/*
==========================================================
UET SIDEBAR
==========================================================
*/

.uet-sidebar{

    width:290px;

    min-width:290px;

    height:100vh;

    position:sticky;

    top:0;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:#0d0d0d;

    border-right:1px solid rgba(255,255,255,.05);

    box-shadow:

        0 0 35px rgba(0,183,255,.08),

        0 0 70px rgba(255,45,186,.05);

}

/*
==========================================================
TOP
==========================================================
*/

.uet-sidebar-top{

    padding:35px 25px;

    text-align:center;

}

.uet-sidebar-logo{

    width:92px;

    height:92px;

    object-fit:contain;

    display:block;

    margin:auto;

    margin-bottom:20px;

}

.uet-sidebar-company{

    color:#ffffff;

    font-size:20px;

    font-weight:700;

    line-height:1.4;

}

.uet-sidebar-tagline{

    margin-top:8px;

    color:#8c8c8c;

    font-size:14px;

}

/*
==========================================================
NAVIGATION
==========================================================
*/

.uet-sidebar-nav{

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:0 18px;

    flex:1;

}

.uet-sidebar-link{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 18px;

    border-radius:16px;

    text-decoration:none;

    color:#b8b8b8;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.uet-sidebar-link:hover{

    background:rgba(255,255,255,.04);

    color:#ffffff;

    transform:translateX(4px);

}

.uet-sidebar-link.active{

    background:linear-gradient(
        90deg,
        rgba(0,183,255,.20),
        rgba(255,45,186,.18)
    );

    color:#ffffff;

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,.05),

        0 0 20px rgba(0,183,255,.15);

}

.uet-sidebar-icon{

    width:26px;

    display:flex;

    justify-content:center;

    font-size:20px;

}

/*
==========================================================
BOTTOM
==========================================================
*/

.uet-sidebar-bottom{

    padding:24px;

    border-top:1px solid rgba(255,255,255,.05);

}

.uet-player-tag{

    padding:14px;

    text-align:center;

    font-weight:700;

    color:#ffffff;

    border-radius:16px;

    margin-bottom:20px;

    background:linear-gradient(
        90deg,
        #00B7FF,
        #FF2DBA
    );

    box-shadow:

        0 0 18px rgba(0,183,255,.25);

}

.uet-sidebar-logout{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#bbbbbb;

    padding:14px;

    border-radius:14px;

    transition:.25s;

}

.uet-sidebar-logout:hover{

    background:#1b1b1b;

    color:#ff5d5d;

}

/*
==========================================================
RESPONSIVE
==========================================================
*/

@media(max-width:1100px){

    .uet-sidebar{

        width:90px;

        min-width:90px;

    }

    .uet-sidebar-company,

    .uet-sidebar-tagline,

    .uet-sidebar-link span:not(.uet-sidebar-icon),

    .uet-player-tag,

    .uet-sidebar-logout{

        display:none;

    }

    .uet-sidebar-logo{

        width:58px;

        height:58px;

    }

    .uet-sidebar-link{

        justify-content:center;

        padding:18px;

    }

}

@media(max-width:768px){

    .uet-sidebar{

        position:fixed;

        left:-290px;

        z-index:999;

        transition:.35s;

    }

    .uet-sidebar.open{

        left:0;

    }

}