/* ===========================================
   Gloobify Meet Sidebar
=========================================== */

.sidebar{

    width:270px;

    min-width:270px;

    height:100vh;

    background:#111827;

    color:white;

    display:flex;

    flex-direction:column;

    transition:.30s;

    overflow:hidden;

}

/* ===========================================
   Logo
=========================================== */

.sidebar-top{

    display:flex;

    align-items:center;

    gap:15px;

    padding:28px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.sidebar-logo{

    width:48px;

    height:48px;

    object-fit:contain;

}

.sidebar-top h2{

    font-size:24px;

    font-weight:700;

    letter-spacing:1px;

}

/* ===========================================
   Menu
=========================================== */

.sidebar-menu{

    display:flex;

    flex-direction:column;

    padding:18px 14px;

    gap:8px;

    flex:1;

}

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:16px;

    color:#d1d5db;

    text-decoration:none;

    padding:15px 18px;

    border-radius:14px;

    transition:.25s;

    font-size:15px;

    font-weight:500;

}

.sidebar-menu a span{

    width:24px;

    text-align:center;

    font-size:20px;

}

.sidebar-menu a:hover{

    background:#1f2937;

    color:white;

    transform:translateX(4px);

}

.sidebar-menu a.active{

    background:#2563eb;

    color:white;

    font-weight:600;

}

/* ===========================================
   Bottom
=========================================== */

.sidebar-bottom{

    padding:22px;

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

}

.logout-btn{

    width:100%;

    border:none;

    background:#dc2626;

    color:white;

    border-radius:14px;

    padding:14px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.logout-btn:hover{

    background:#b91c1c;

}

/* ===========================================
   Mobile
=========================================== */

@media(max-width:900px){

.sidebar{

    position:fixed;

    top:0;

    left:-280px;

    z-index:999;

    box-shadow:

    0 20px 50px rgba(0,0,0,.25);

}

.sidebar.open{

    left:0;

}

}

@media(min-width:901px){

.sidebar{

    left:0 !important;

}

}