body {
    margin: 0;
    font-family: inter;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    background-color: white;
    z-index: 100;
}

.headerContent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 0;
}

.headerLogoMobile img {
    height: 40px;
    left: 16px;
    position: relative;
    display: none;
}

.headerSpan {
    margin-left: 348px;
}

.helpAndUserProfile {
    margin-left: auto;
    margin-right: 5%;
    display: flex;
    gap: 20px;
    align-items: center;
}

.userProfile {
    border-radius: 50%;
    border: 2px solid black;
    font-size: 20px;
    font-weight: bold;
    color: #29abe2;
    cursor: pointer;
    transition: all 100ms ease-in-out;
    height: 56px;
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.userProfile:hover {
    cursor: pointer;
    background-color: rgba(12, 46, 98, 0.12);
}

.helpDiv:hover {
    transform: scale(1.15);
    cursor: pointer;
}

.from-login{
    display: none;
}

.sideBar {
    background-color: #2a3647;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 232px;
    z-index: 101;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 64px 0px 64px 0px;
    box-sizing: content-box;
}

.imgWrapper img {
    width: 100.03px;
    height: 121.97px;
    margin-bottom: 80px;
}

.sideBarMenu img {
    width: 25px;
    height: 25px;
    top: 2.5px;
    left: 2.5px;
}

.sideBarMenu {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 200px;
    width: 100%;
}

.sideBarMenuButtons {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #cdcdcd;
    gap: 5px;
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 56px;
    
}

.sideBarMenuButtons:hover {
    background-color: #2a3d59;
}

.active {
    background-color: #091931;
}

.activeGrey {
    columns: #a8a8a8;
}

.policyHref.activeGrey:hover,
.noticeHref.activeGrey:hover {
    color: #a8a8a8;
    font-weight: normal;
    transform: none;
}

.policyHref:not(.activeGrey):hover,
.noticeHref:not(.activeGrey):hover {
    color: rgb(41, 171, 226);
    font-weight: bold;
}

.sideBarPolicyAndNotice {
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 176px;
}

.policyHref {
    text-decoration: none;
    color: #a8a8a8;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 232px;
}

.noticeHref {
    text-decoration: none;
    color: #a8a8a8;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 232px;
}

.policyHref:hover {
    color: rgb(41, 171, 226);
    font-weight: bold;
}

.noticeHref:hover {
    color: rgb(41, 171, 226);
    font-weight: bold;
}

.user-menu-box {
    width: 150px;
    height: 158px;
    background-color: #2a3647;
    top: 100px;
    position: absolute;
    right: 32px;
    border-radius: 20px 0px 20px 20px;
    display: flex;
    justify-content: center;
    display: none;
    box-sizing: border-box;
    padding: 10px 0px 10px 0px;
}

.user-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.user-menu a {
    color: #cdcdcd;
    font-size: 16px;
    font-weight: 400;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 8px;
    text-decoration: none;
}

.user-menu a:hover {
    background-color: #2a3d59;
}

.help-link {
    display: none;
}

@media (max-width: 1360px) {
    header {
        /* padding: 20px 40px 20px 40px; */
        height: 80px;
    }
    .headerContent img {
        display: block;
    }
    .headerSpan {
        display: none;
    }
    .headerLogoMobile {
        margin-left: 9%;
    }
    .headerLogoMobile img {
        left: 0;
    }
    .helpAndUserProfile {
        margin-right: 9%;
    }
    .userProfile {
        height: 40px;
        width: 40px;
    }
    .sideBar {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        width: auto;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
    }
    .imgWrapper img {
        display: none;
    }
    .sideBarMenu {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        margin-bottom: 0;
        height: 80px;
    }
    .sideBarMenuButtons {
        flex-direction: column;
        padding-left: 8px;
        width: auto;
        padding: 8px;
        border-radius: 8px;
    }
    .sideBarPolicyAndNotice {
        display: none;
    }
    .helpDiv {
        display: none;
    }
    .help-link {
        display: flex;
    }
    .user-menu-box {
        top: 84px;
        height: 204px;
    }
}

@media (max-width: 800px) {
    .headerLogoMobile {
        margin-left: 7%;
    }
    .helpAndUserProfile {
        margin-right: 7%;
    }
}

@media (max-height: 800px) {
    .sideBarMenu {
        display: flex;
        gap: 15px;
        margin-bottom: 150px;
    }
}

@media (max-width: 650px) {
    .headerLogoMobile {
        margin-left: 6%;
    }
    .helpAndUserProfile {
        margin-right: 6%;
    }
}

@media (max-width: 600px) {
    .sideBarMenuButtons {
        font-size: 11px;
    }
    .sideBarMenu img img {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 400px) {
    .headerLogoMobile {
        margin-left: 5%;
    }
    .helpAndUserProfile {
        margin-right: 5%;
    }
}

#landscape-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.959);
    color: white;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    text-align: center;
}

@media screen and (max-width: 824px) and (orientation: landscape) {
    #landscape-warning {
        display: flex;
    }
}