/* ==========================================
   Category Section
========================================== */

.dashboard-category{

    display:flex;

    flex-direction:column;

    gap:10px;

    min-width:320px;

}


/* ==========================================
   Label
========================================== */

.dashboard-label{

    font-size:15px;

    font-weight:600;

    color:var(--dashboard-title);

}


/* ==========================================
   Dropdown Wrapper
========================================== */

.dashboard-dropdown{

    position:relative;

    width:100%;

}


/* ==========================================
   Input
========================================== */

.dashboard-input{

    width:100%;

    height:56px;

    padding:0 18px;

    border:1px solid var(--dashboard-border);

    border-radius:14px;

    background:#ffffff;

    color:var(--dashboard-text);

    font-size:15px;

    outline:none;

    transition:var(--dashboard-transition);

    cursor:pointer;

}

.dashboard-input::placeholder{

    color:#94A3B8;

}

.dashboard-input:hover{

    border-color:var(--dashboard-primary);

}

.dashboard-input:focus{

    border-color:var(--dashboard-primary);

    box-shadow:0 0 0 4px rgba(10,147,150,.12);

}


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

.custom-dropdown-menu{

    position:absolute;

    top:calc(100% + 8px);

    left:0;

    right:0;

    margin:0;

    padding:8px 0;

    list-style:none;

    background:#ffffff;

    border:1px solid var(--dashboard-border);

    border-radius:16px;

    box-shadow:0 18px 45px rgba(15,23,42,.10);

    display:none;

    max-height:320px;

    overflow-y:auto;

    z-index:var(--dashboard-dropdown-z);

}


/* ==========================================
   Show Dropdown
========================================== */

.custom-dropdown-menu.show{

    display:block;

}


/* ==========================================
   Dropdown Item
========================================== */

.custom-dropdown-menu li{

    margin:0;

    padding:0;

}


/* ==========================================
   Item Link
========================================== */

.custom-dropdown-menu .dropdown-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:13px 18px;

    color:var(--dashboard-text);

    text-decoration:none;

    font-size:15px;

    cursor:pointer;

    transition:var(--dashboard-transition);

}

.custom-dropdown-menu .dropdown-item:hover{

    background:#F3FCFC;

    color:var(--dashboard-primary);

}


/* ==========================================
   Disabled Item
========================================== */

.custom-dropdown-menu .dropdown-item.disabled{

    color:#94A3B8;

    background:#FAFBFC;

    cursor:not-allowed;

}

.custom-dropdown-menu .dropdown-item.disabled:hover{

    background:#FAFBFC;

    color:#94A3B8;

}


/* ==========================================
   Added Check Mark
========================================== */

.added-mark{

    display:flex;

    align-items:center;

    justify-content:center;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#DCFCE7;

    color:#16A34A;

    font-size:13px;

    font-weight:700;

}


/* ==========================================
   Scrollbar
========================================== */

.custom-dropdown-menu::-webkit-scrollbar{

    width:8px;

}

.custom-dropdown-menu::-webkit-scrollbar-track{

    background:#F5F7FA;

    border-radius:20px;

}

.custom-dropdown-menu::-webkit-scrollbar-thumb{

    background:#C7D6DD;

    border-radius:20px;

}

.custom-dropdown-menu::-webkit-scrollbar-thumb:hover{

    background:#A8BBC5;

}


/* ==========================================
   Animation
========================================== */

.custom-dropdown-menu.show{

    animation:dropdownFade .22s ease;

}

@keyframes dropdownFade{

    from{

        opacity:0;

        transform:translateY(-10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media (max-width:1199.98px){

    .dashboard-category{

        width:100%;

        min-width:100%;

    }

    .dashboard-input{

        height:54px;

    }

}


@media (max-width:575.98px){

    .dashboard-input{

        height:50px;

        font-size:14px;

        padding:0 15px;

    }

    .custom-dropdown-menu .dropdown-item{

        padding:12px 15px;

        font-size:14px;

    }

}