@media screen and (max-width: 834px){
    .mobile-header-menu-button {
        position: absolute;
        width: 50px;
        height: 50px;
        top: -10px;
        display: flex;
        justify-content: center;

        a {
            display: block;
            text-align: center;
            margin: auto 0;
            text-decoration: none;
            color: white;

            i, span {
                display: block;
                font-size: 1.3em;
            }
            small {
                margin-top: 8px;
                display: block;
                line-height: 0.8em;
            }
        }
    }
    .mobile-header-menu-button-single-icon {
        position: absolute;
        width: 50px;
        height: 50px;
        top: -10px;
        .header-menu-button-wrapper {
            margin-top: 5px;
            margin-left: 5px;
        }
    }



    .user-menu.menu-not-logged-in {
        #user-menu-container .ts-dropdown-button {
            cursor: pointer;
            width: 50px; height: 50px;
            background-color: #e18008;
            display: flex;
            justify-content: center;
            a {
                display: block;
                text-align: center;
                margin: auto 0;
                text-decoration: none;
                color: white;

                i, span {
                    display: block;
                    font-size: 1.3em;
                }
                small {
                    margin-top: 8px;
                    display: block;
                    line-height: 0.8em;
                }
            }
        }




        #user-menu-background {
            width: 65px;
        }


        #mobile-be-button {
            width: 60px;
            right: calc(100vw - 130px);
            background-color: transparent;
        }
        #mobile-je-button {
            width: 60px;
            right: calc(100vw - 190px);
            background-color: transparent;
        }
        #help-button {
            width: 50px;
            right: 130px;
            background-color: #2A3B3A;
        }
        #user-search-container {
            right: 80px;
            background-color: #274947;
        }
        #header-search-box-container {
            background-color: #274947;
        }
        #user-menu-container {
            right: 30px;
            background-color: #264b4b;

            .header-menu-button-wrapper {
                margin-top: 7.5px;
                margin-left: 2px;
            }
        }
    }
    .user-menu.menu-logged-in {
        #user-menu-background {
            width: 180px;
        }





        #mobile-be-button {
            width: 60px;
            right: calc(100vw - 130px);
            background-color: transparent;
        }
        #mobile-je-button {
            width: 60px;
            right: calc(100vw - 190px);
            background-color: transparent;
        }
        #help-button {
            display: none;
        }
        #user-search-container {
            right: 130px;
            background-color: #2B3737;
        }
        #header-search-box-container {
            background-color: #2B3737;
        }
        #user-menu-container {
            right: 30px;
            background-color: #274D4B;
        }
    }
    #user-menu-background {
        display: none;
        position: absolute;
        right: -20px;
        height: 50px;
        top: -10px;
        background-color: rgb(26, 105, 103);
    }
    #user-menu li.user-menu-title {
        border-bottom: #eeeeee solid 1px;
        margin-top: -3px;
        padding: 6px 14px;
        font-size: small;
    }
    /* #user-menu li.user-menu-section-title {
        margin-top: -3px;
        padding: 6px 14px;
        font-size: small;
    } */
    #user-menu li.split {
        background-color:  #e0e0e0;
        height: 1px;
    }
    #has-unread-comment-indicator {
        position: relative;
    }
    #has-unread-comment-indicator::after {
        content: '⚫︎';
        color: #DD9934;
        position: absolute;
        top: 8px; right: 10px
    }
    .user-menu {
        top: 10px;
        right: 20px;
        position: fixed;
        z-index: 1000;
        text-align: center;
        font-size: 16px;

        .header-menu-button i, .header-menu-button img {
            filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
        }

        
        
        #user-notification-container {
            position: absolute;
            right: 80px;
            top: 0px;
            width: 50px;
            height: 50px;
            top: -10px;
            background-color: #294241;

            .header-menu-button-wrapper {
                margin-top: 5px;
                margin-left: 5px;
            }

            #notification-indicator {
                position: absolute;
                color: #d93;
                right: 8px;
                top: 8px;
                font-size: 0.5em;
            }
            .ts-dropdown-content-right0 {
                right: -40px;
            }
        }

        #user-menu-container {
            position: absolute;
            top: -10px;
            height: 50px;
            width: 50px;

            button {
                margin-left: 5px;
                margin-top: 5px;
                img {
                    border-radius: 50%;
                    width: 40px;
                    height: 40px;
                    -webkit-user-drag: none;
                    user-select: none;
                }
            }
            .lank_badge_wrapper {
                position: absolute;
                right: 3px;
                bottom: 3px;
            }
            .rank_badge_bg {
                width: 22px; height: 22px;
            }
            .rank_badge_text {
                font-size: 10px;
            }
            #user-menu {
                width: 170px;
            }
        }

        #sidemenu-container {
            position: absolute;
            right: -20px;
            top: -10px;

            #sidemenu-button-wrapper {
                button {
                    position: relative;
                    width: 50px;
                    height: 50px;
                    outline: none;
                    background-color: #1B6967;
                    /* background-color: transparent; */
                    border: none;
                    border-radius: 0;
                    z-index: 3;
                    
                    div {
                        transition: all 0.2s ease-out;
                        opacity: 0;
                        color: white;
                        position: relative;
                        font-size: 2em;

                        span {
                            position: absolute;
                            left: 25px;
                            display: block;
                            transform: translate(-50%, -50%);
                            filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
                        }
                    }
                }
                
            }
            #sidemenu-background-overlay {
                width: 100vw;
                height: 100vh;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 1;
            /* background-color: rgba(255, 255, 255, 0.1); */

                animation-duration: 0.3s;
                animation-fill-mode: forwards;
                /* transition: backdrop-filter 0.3s; */
                /* backdrop-filter: blur(12px); */
            }
            #sidemenu {
                z-index: 2;
                position: fixed;
                right: 0;
                animation-duration: 0.2s;
                animation-fill-mode: forwards;
                width: 300px;
                background-color: #283f41;
                height: 100vh;

                #sidemenu-section-top {
                    margin-top: 40px;
                }
                #sidemenu-section-mid ul {
                    list-style: none;
                    padding: 15px;
                    li.std a {
                        text-decoration: none;
                        display: flex;
                        color: white;
                        font-size: 1.2em;
                        text-align: start;
                        padding: 5px 20px;

                        i, span {
                            display: block;
                            width: 40px;
                            line-height: 1.75em;
                        }
                    }
                    li.spc a {
                        display: block;
                        color: white;
                        font-size: 0.9em;
                        text-align: start;
                        padding: 5px 20px;
                        text-decoration: none;
                    }
                    hr {
                        margin: 20px 10px;
                    }
                    #sidemenu-sns-container {
                        width: calc(100% - 40px);
                        margin: 0 auto;
                        /* padding: 40px 20px; */
                        /* border-top: 1px solid rgba(255, 255, 255, 0.2); */
                        /* height: 70px; */
                        /* border-radius: 35px; */
                        /* background-color: rgba(255, 255, 255, 0.1); */
                        display: flex;
                        justify-content: space-evenly;

                        .sns-box {
                            width: 30%;
                            
                            .sns-icon {
                                display: flex;
                                margin: 0 auto;
                                justify-content: center;
                                height: 50px; width: 50px;
                                border-radius: 50%;
                                transition: 0.15s;
                                background-color: rgba(255, 255, 255, 0.1);

                                a {
                                    font-size: 1.4em;
                                    display: block;
                                    margin: auto 0;
                                    text-align: center;
                                    text-decoration: none;
                                    color: #f5f5f5;
                                }
                            }
                        }
                    }
                }
                
            }
            
        }
        #sidemenu-container:not(.open, .closed) #sidemenu-background-overlay {
            display: none;
        }
        #sidemenu-container:not(.open, .closed) #sidemenu {
            transform: translateX(100%);
            display: none;
        }
        #sidemenu-container.closed #sidemenu-background-overlay {
            animation-name: sidemenu-background-overlay-off;
        }
        #sidemenu-container.closed #sidemenu {
            animation-name: sidemenu-closed;
        }
        #sidemenu-container:not(.open) #sidemenu-button-wrapper button {
            div:first-of-type {
                opacity: 0;
                transform: rotate(90deg);
            }
            div:last-of-type {
                opacity: 1;
                transform: rotate(0deg);
            }
            
        }
        #sidemenu-container.open #sidemenu-background-overlay {
            animation-name: sidemenu-background-overlay-on;
        }
        #sidemenu-container.open #sidemenu {
            animation-name: sidemenu-open;
        }
        #sidemenu-container.open #sidemenu-button-wrapper button {
            div:first-of-type {
                opacity: 1;
                transform: rotate(0deg);
            }
            div:last-of-type {
                opacity: 0;
                transform: rotate(90deg);
            }
        }
        #header-search-box-wrapper {
            position: fixed;
            top: 50px; right: 0;
            width: 100%;

            #header-search-box-container {
                position: absolute;
                width: 100%; height: 54px;
                padding: 8px 20px;
                top: 0; right: 0;
                display: flex;
                gap: 15px;
                z-index: 55;

                #header-search-box-icon {
                    font-size: 1.3em;
                    color: white;
                }

                input {
                    border-radius: 18.5px;
                    height: 37px;
                    /* border: 3px #ccc solid; */
                }

                input:focus, input:focus-visible {
                    border-color: none;
                    outline: none;
                }
                #header-delete-kw-btn {
                    position: absolute;
                    right: 25px; top: 16px;
                    width: 30px;
                    color: #666666;
                    background-color: transparent;
                    font-size: 1.2em;
                    padding: 0; margin: 0;
                    outline: none;
                    border: none;
                }
            }
            #header-search-box-close-cover {
                position: absolute;
                top: 0; right: 0;
                z-index: 50;
                height: 100vh; width: 100vw;
                overflow: hidden;

                background-color: rgba(0, 0, 0, 0.3)
            }
            
        }
        
    }
    
}

/* @media screen and (max-width: 380px){ */
@media screen and (max-width: 834px){
    .site-name.site-name-text-link {
        height: 50px; width: 55px;
        /* background-color: #245655; */
        background-color: transparent;
        padding: 0;
    }
    .site-name-text {
        margin-top: 2.5px;
        background-image: url(/img/general/logo/logo_new_square_white.svg);
        width: 45px; height: 45px;
        z-index: 1;
        background-size: cover;
        background-position: center;
    }
    .site-logo-image.header-site-logo-image {
        display: none;
    }
}
/* @media screen and (max-width: 455px){
    .user-menu.menu-not-logged-in #become-researcher {
                right: 130px;

            background-color: #e18008;
        .ts-button > *{
            filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
        }
    }
} */

@media screen and (min-width: 835px){
    #sidemenu-container {
        display: none;
    }
    #mobile-be-button {
        display: none;
    }
    #mobile-je-button {
        display: none;
    }
    #help-button {
        display: none;
    }
    .user-menu.menu-not-logged-in {
        #user-menu-background {
            width: 105px;
        }
        #user-search-container {
            right: 42px;
        }
        #user-menu-container {
            position: absolute;
            right: -15px; top: -5px;
            width: 50px;
            .ts-dropdown-button {
                width: 50px; height: 50px;
                background-color: transparent;
                display: flex;
                justify-content: center;
                a {
                    display: block;
                    text-align: center;
                    margin: auto 0;
                    text-decoration: none;
                    color: white;
                    cursor: pointer;

                    i, span {
                        display: block;
                        font-size: 1.3em;
                    }
                    small {
                        margin-top: 8px;
                        display: block;
                        line-height: 0.8em;
                    }
                }
            }
        }
    }
    .user-menu.menu-logged-in {
        #user-menu-background {
            width: 155px;
        }
        #user-notification-container {
            right: 98px;
        }
        #user-search-container {
            right: 50px;
        }
        #user-menu-container {
            position: absolute;
            right: -10px;
            width: 50px;
            button.header-menu-button.ts-button img {
                transition: transform 0.15s;
            }
        }
    }
    #user-menu-background {
        position: absolute;
        right: -20px;
        height: 60px;
        top: -10px;
        background-color: rgb(26, 105, 103);
    }
    #user-menu li.user-menu-title {
        border-bottom: #eeeeee solid 1px;
        margin-top: -3px;
        padding: 6px 14px;
        font-size: small;
    }
    #user-menu li.split {
        background-color:  #e0e0e0;
        height: 1px;
    }
    #has-unread-comment-indicator {
        position: relative;
    }
    #has-unread-comment-indicator::after {
        content: '⚫︎';
        color: #DD9934;
        position: absolute;
        top: 8px; right: 10px
    }
    .user-menu {
        top: 10px;
        right: 20px;
        position: fixed;
        z-index: 1000;
        text-align: center;
        font-size: 16px;

        .header-menu-button i, .header-menu-button img {
            filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
        }

        #user-search-container {
            position: absolute;
        }

        #user-notification-container {
            position: absolute;
            right: 55px;
            top: 0px;

            #notification-indicator {
                position: absolute;
                color: #d93;
                right: 3px;
                top: 5px;
                font-size: 0.5em;
            }
        }   
        
        #user-menu-container {
            img {
                border-radius: 50%;
                width: 40px;
                height: 40px;
                -webkit-user-drag: none;
                user-select: none;
                
            }
            .lank_badge_wrapper {
                position: absolute;
                right: 0;
                bottom: 0;
            }
            .rank_badge_bg {
                width: 22px; height: 22px;
            }
            .rank_badge_text {
                font-size: 10px;
            }

            #user-menu {
                width: 170px;
            }
            
        }

        #header-search-box-wrapper {
            position: fixed;
            top: 60px; right: 0;
            width: 100%;

            #header-search-box-container {
                position: absolute;
                width: 400px; height: 48px;
                padding: 5px 20px;
                top: 0px; right: 0;
                display: flex;
                gap: 15px;
                z-index: 55;

                background-color: #196967;

                #header-search-box-icon {
                    font-size: 1.3em;
                    color: white;
                }

                input {
                    border-radius: 18.5px;
                    height: 37px;
                    /* border: 3px #ccc solid; */
                }

                input:focus, input:focus-visible {
                    border-color: none;
                    outline: none;
                }
                #header-delete-kw-btn {
                    position: absolute;
                    right: 25px; top: 13px;
                    width: 30px;
                    color: #666666;
                    background-color: transparent;
                    font-size: 1.2em;
                    padding: 0; margin: 0;
                    outline: none;
                    border: none;
                }
                #header-delete-kw-btn:hover {
                    color: #cccccc
                }
            }
            #header-search-box-close-cover {
                position: absolute;
                top: 0; right: 0;
                z-index: 50;
                height: 100vh; width: 100vw;
                overflow: hidden;

                background-color: rgba(0, 0, 0, 0.3)
            }
            
        }
    }
}

@keyframes sidemenu-background-overlay-on {
    0% {
        display: block;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }
    100%{
        display: block;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}
@keyframes sidemenu-background-overlay-off {
    0%{
        display: block;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    99%{
        display: block;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }
    100%{
        display: none;
    }
}

@keyframes sidemenu-open {
    0% {
        display: block;
        opacity: 0;
        transform: translateX(100%);
    }
    100%{
        display: block;
        opacity: 1;
        transform: translateX(0%);
    }
}
@keyframes sidemenu-closed {
    0%{
        display: block;
        opacity: 1;
        transform: translateX(0%);
    }
    99%{
        display: block;
        opacity: 0;
        transform: translateX(100%);
    }
    100%{
        display: none;
        transform: translateX(100%);
    }
}


#user-notification-container {
    position: absolute;
    right: 55px;
    top: 0px;
    
    #notification-list-wrapper {
        max-height: 65vh; width: 300px;
        overflow-y: scroll;
        box-shadow: 0px 1px 3px 1px #555555, 0px 1px 2px 0px #555555;

        #notification-list {
            background-color: white;
            padding: 0;

            .notification-wrapper a {
                position: relative;
                padding: 8px 20px 8px 16px;
                display: grid; gap: 10px; grid-template-columns: 40px 1fr;
                width: 100%;
                list-style: none; text-decoration: none;
                transition: all 0.15s;
                color: #2d2d2d;

                .notification-icon {
                    padding-top: 5px;
                    font-size: 20px;
                    width: 40px;
                }
                .notification-unread-indicator {
                    position: absolute;
                    color: #d93;
                    left: 15px;
                    top: 7px;
                    font-size: 0.35em;
                }
                .notification-content {
                    width: 215px;

                    .notification-title {
                        font-weight: bold;
                        font-size: small;
                        text-align: start;
                    }
                    .notification-message {
                        font-size: small;
                        text-align: start;
                    }
                    .notification-datetime {
                        font-size: small;
                        text-align: start;
                        color: gray;
                    }
                }
                
            }
            .notification-wrapper:has(+div) {
                border-bottom: 1px solid #f2f2f2;
            }   
        }
    }
}  
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .notification-wrapper a:hover {
    opacity: 0.5;
}




body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .user-menu.menu-not-logged-in #user-menu-container .ts-dropdown-button a:hover i {
    transform: scale(0.9);
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .user-menu.menu-logged-in #user-menu-container button.header-menu-button.ts-button:hover img {
    transform: scale(0.9);
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .user-menu #user-notification-container #notification-box #notification-tab-switcher-container .notification-tab-switcher-button:hover {
    color: #000;
}

body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .user-menu #header-search-box-wrapper #header-search-box-container #header-delete-kw-btn:hover {
    color: #cccccc
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .user-menu #sidemenu ul li a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}