/* =========================================================
       TOPBAR
    ========================================================= */
    #page-topbar{
        background:
            rgba(255,255,255,0.75) !important;
        backdrop-filter: blur(16px);
        box-shadow:
            0 4px 25px rgba(0,0,0,.05);
        border-bottom:
            1px solid rgba(255,255,255,.4);
        height: 75px;
        transition: all .25s ease;
    }
    .navbar-header{
        height:75px;
        padding:0 24px;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }
    /* =========================================================
       LOGO
    ========================================================= */
    .navbar-brand-box{
        width:auto !important;
        padding-right:25px;
        background:transparent !important;
    }
    .logo-text{
        font-size:24px;
        font-weight:700;
        background: linear-gradient(
            135deg,
            #0F172A,
            #2563EB
        );
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }
    /* =========================================================
       MENU BUTTON
    ========================================================= */
    #vertical-menu-btn{
        width:45px;
        height:45px;
        border-radius:14px;
        background:
            rgba(85,110,230,.08);
        border:none;
        transition:.25s;
    }
    #vertical-menu-btn:hover{
        background:
            linear-gradient(
                135deg,
                #556ee6,
                #34c38f
            );
        color:white;
    }
    /* =========================================================
       HEADER BUTTON
    ========================================================= */
    .header-item{
        height:45px !important;
        width:45px;
        border-radius:14px !important;
        display:flex !important;
        align-items:center;
        justify-content:center;
        transition:.25s;
    }
    .header-item:hover{
        background:
            rgba(85,110,230,.08);
    }
    /* =========================================================
       PROFILE
    ========================================================= */
    .user-profile-btn{
        width:auto !important;
        padding:8px 16px !important;
        border-radius:18px !important;
        background:
            rgba(255,255,255,.75);
        border:
            1px solid rgba(0,0,0,.04);
        box-shadow:
            0 4px 15px rgba(0,0,0,.04);
    }
    .header-profile-user{
        width:42px !important;
        height:42px !important;
        object-fit:cover;
        border:
            2px solid #556ee6;
    }
    /* =========================================================
       USERNAME
    ========================================================= */
    .username-text{
        font-weight:600;
        color:#1e293b;
    }
    /* =========================================================
       DROPDOWN
    ========================================================= */
    .dropdown-menu{
        border:none !important;
        border-radius:20px !important;
        padding:12px;
        box-shadow:
            0 10px 40px rgba(0,0,0,.08);
    }
    .dropdown-item{
        border-radius:12px;
        padding:12px 14px;
        transition:.2s;
    }
    .dropdown-item:hover{
        background:
            rgba(85,110,230,.08);
        color:#556ee6;
    }
    /* =========================================================
       RESPONSIVE
    ========================================================= */
    @media(max-width:991px){
        #page-topbar{
            left:0 !important;
        }
        .navbar-header{
            padding:0 15px;
        }
        .logo-text{
            font-size:18px;
        }
    }
    .modal-content{
        border-radius:18px;
    }

    .modal-header{
        border:none;
    }

    .modal-body{
        padding:28px;
    }

    .modal-footer{
        border:none;
        padding:20px 28px;
    }

    .modal-header.bg-warning{
        background:linear-gradient(
            135deg,
            #f59e0b,
            #fbbf24
        ) !important;
    }

    .modal .form-control{
        border-radius:10px;
    }

    .modal label{
        font-weight:600;
        margin-bottom:6px;
    }

    .modal-lg{
        max-width:900px;
    }
    /* Container */
    .input-modern .select2-container{
        width:100% !important;
    }

    /* Box */
    .input-modern .select2-selection--single{
        height:58px !important;
        border-radius:18px !important;
        border:1px solid #d9dee8 !important;
        background:#fff !important;
        display:flex !important;
        align-items:center !important;
        padding-left:45px !important;
        box-shadow:none !important;
    }
    /* Text */

    .input-modern .select2-selection__rendered{
        line-height:56px !important;
        padding-left:0 !important;
        color:#6b7280 !important;
        font-size:18px;
    }
    /* Arrow */
    .input-modern .select2-selection__arrow{
        height:58px !important;
        right:15px !important;
    }