:root{
    --aside-width: 180px;
    --desktop-max-width: 2048px;
    --laptop-max-width: 1584px;
    --mobile-max-width: 760px;
    --top-nav-color: #14080E;
    --main-bg-color: #799496;
    --main-font-color: #49475B;
}

*{
    margin: 0;
    padding: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white;
}

body{
    display: flex;
    justify-content: center;
    background-color: var(--main-bg-color);
}

#main-wrapper{
    width: 100%;
    display: flex;
}

a{
    text-decoration: none   ;
}

.justify-self-end{
    display: flex;
    justify-content: end;
}

.justify-self-start{
    display: flex;
    justify-content: start;
}

.center-class{
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-class{
    position: relative;
    background-color: rgb(23, 32, 38);
    margin: 0.5rem;
    /* padding: 0.3rem 0.5rem; */
    border-radius: 7px;
    width: 120px;
    height: 30px;
    max-width: 180px;
    span{
        position: absolute;
        width: 100%;
        text-align: center;
    }
    &:hover{
        background-color: rgb(37, 53, 64);
        border: 1px solid rgb(23, 32, 38);
        & span{
            font-weight: 600;
        }
    }
    &:active{
        background-color: rgb(49, 78, 97);
        border: 1px solid rgb(37, 53, 64);
    }
}

.delete-item{
    background-color: rgba(255, 199, 199, 0.548);
    padding: 0rem 0.1rem;
    border-radius: 5px;
    color: rgb(255, 54, 54);
    font-size: 10px;
    margin-left: 0.5rem;
    &:hover{
        cursor: pointer;
        font-weight: 600;
        outline: 1px solid red;
    }
}

.highlight-text{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    span{
        position: absolute;
        text-align: center;
    }
    &:hover{
        & span{
            font-weight: 600;
        }
    }
}

button{
    background: none;
    border: none;
    cursor: pointer;
    /* &[type="submit"]{
        font-weight: 600;
        color: #b1b7c3;
        &:hover{
            color: white;
        }
    } */
    &.close-icon{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 25px;
        width: 25px;
        position: absolute;
        top: 10px;
        right: 10px;
        border: 1px solid #2f3d43;
        border-radius: 5px;
        font-size: 10px;
        &:hover{
            color: rgb(255, 20, 20);
            background-color: rgb(23, 32, 38);
            border: 1px solid #3c4d55;
            border-radius: 5px;
            &:active{
                background-color: rgb(14, 20, 24);
                border: 1px solid #242e33;
                color: rgb(230, 0, 0);
            }
        }
    }
}

#body-wrapper{
    /* max-width: 1440px; */
    max-width: var(--laptop-max-width);
    min-width: 1394px;
    width: 100%;
}

/* header, #header-wrapper{
    max-width: var(--laptop-max-width);
} */

header{
    position: sticky;
    top: 0;
    /* left: 0; */
    z-index: 2;
}

#header-wrapper{
    display: flex;
    justify-content: space-between;
    background-color: #101517;
    #logo{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0rem;
        height: 30px;
        min-width: var(--aside-width);
        width: var(--aside-width);
        &:hover svg path{
            fill: rgb(95, 175, 255);
        }
    }
    #top-nav{
        /* position: sticky; */
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        #login-button-wrapper{
            padding: 0.5rem 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            #login-button{
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                background-color: #242e33;
                padding: 0.5rem 1rem;
                border-radius: 7px;
                /* width: fit-content; */
                width: 60px;
                height: 25px;
                div{
                    top: -0.5rem;
                    left: -0.3rem;
                }
                span{
                    position: absolute;
                    width: 100%;
                    text-align: center;
                    /* top: 15%;
                    left: 21%; */
                }
                &:hover{
                    background-color: #3a4a54;
                    & * {
                        font-weight: 600;
                        /* left: 19%; */
                    }
                }
            }
        }
    }
}

aside, #aside-wrapper{
    position: relative;
    transition: width 0.5s;
    height: 100vh;
    background-color: #193649;
    width: var(--aside-width);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &.minimise{
        transition: width 0.5s; /*cubic-bezier(1, 0.63, 0.25, 1.5);*/
        /* overflow: hidden; */
        width: 62px;
        #sidebar-icon-wrapper{
            transition: left 0.5s;
            left: 0.1rem;
        }
    }
}
aside{
    position: sticky;
    top: 46px;
    left: -1rem;
    z-index: 1;
}

#tabs{
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
    .tab{
        &:first-child{
            padding-top: 0.3rem;
        }
        button{
            width: 100%;
        }
        a, button{
            /* active bg colour when active
            background-color: #4c70ae; */
            /* width: 100%; */
            padding: 0.5rem 1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            .tab-icon{
                height: 20px;
                width: 34px;
                padding-right: 15px;
            }
            .tab-name{
                font-size: 14px;
                transition: opacity 2s;
                opacity: 1;
                text-align: center;
            }
        }
        .tab-content{
            transition: height 0.5s; /* cubic-bezier(1, 0.63, 0.25, 1.5); */
            overflow: hidden;
            height: 0px;
            &.show{
                height: 200px;
            }
            .tab-content-item{
                background-color: #244860;
                color: #99a0af;
                font-size: 13.5px;
                padding: 1rem 0;
                padding-left: 1.6rem;
                padding-right: 0.5rem;
                max-height: 15px;
                &:hover{
                    color: white;
                    font-weight: 600;
                }
            }
        }
    }
}

#dashboard-link{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

#sidebar-icon-wrapper{
    position: fixed;
    bottom: 0;
    transition: left 0.5s;
    left: 7rem;
    display: flex;
    justify-content: end;
    #sidebar-button{
        padding: 1rem;
        padding-bottom: 1.5rem;
    }
}

.hide-modal{
    display: none;
    z-index: -1;
}

.hide{
    transition: opacity 1s;
    opacity: 0;
    display: none;
    z-index: -1;
}

.page-section{
    margin: 2rem;
    padding: 1rem;
}

input{
    padding-left: 0.2rem;
    color: black;
}

.input-wrapper{
    display: flex;
    flex-direction: column;
    max-width: fit-content;
    margin-top: 1rem;
}

#submit-btn{
    width: 65px;
}

#login-modal-bg{
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2f323978;
    #login-modal-content{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #101517;
        height: 300px;
        width: 300px;
        #login-input
        {
            /* padding-bottom: 60px; */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            #login-user-input, #login-password-input
            {
                padding: 0.2rem;
                color: black;
                display: flex;
                flex-direction: column;
                font-weight: 600;
            }
        }
    }
}

@media(min-width: 760px){
    #body-wrapper{
        min-width: 100%
    }
}

@media(min-width: 1584px){
    #body-wrapper{
        max-width: 2048px;
        min-width: 1802px;
    }
    /* header, #header-wrapper{
        max-width: var(--desktop-max-width);
    } */
}

@media(max-width: 760px){
    #body-wrapper{
        max-width: 100vw;
        min-width: 100%
    }
    /* header, #header-wrapper{
        max-width: var(--mobile-max-width);
    } */
}