html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body,
a,
button,
input,
select,
textarea,
.btn,
.form-control,
.dropdown-menu,
.modal,
.table,
.nav,
.card,
.breadcrumb,
.label,
.tooltip,
.popover {
    font-family: 'Montserrat', sans-serif;
}

body {
    margin-bottom: 60px;
    color: #1f2937;
    background: #f5f7fb;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
.card-label,
.header-logo,
.topbar,
.offcanvas,
.navi-text {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.02em;
}

.page-shell,
.content,
.subheader,
.header,
.header-mobile {
    background: transparent;
}

#kt_content .container,
#kt_content .container-fluid,
#kt_subheader .container,
#kt_header .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

#kt_content .container-fluid {
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
}

.card.card-custom {
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.card.card-custom .card-header {
    padding-top: 1.25rem;
    padding-bottom: 1rem;
}

.card.card-custom .card-body {
    padding: 1.5rem;
}

.card .card-title {
    margin-bottom: 0;
}

.form-group {
    margin-bottom: 1.15rem;
}

.form-control {
    min-height: calc(1.5em + 1rem + 2px);
    border-radius: 0.75rem;
    border-color: #d7dee9;
    box-shadow: none;
    background-color: #fff;
}

.form-control:focus {
    border-color: #6993ff;
    box-shadow: 0 0 0 0.2rem rgba(105, 147, 255, 0.12);
}

.btn {
    border-radius: 0.75rem;
    font-weight: 600;
}

.btn:not(.btn-icon):not(.btn-xs) {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.dropdown-menu {
    border-radius: 0.875rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    padding: 0.75rem 0;
}

.modal-content {
    position: relative;
    border-radius: 1rem;
    border: 0;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.16);
}

.modal-header,
.modal-footer {
    padding: 1.25rem 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.datatable {
    margin-top: 1rem;
}

.page-actions {
    margin-top: 1.5rem;
    padding: 1rem 1.5rem 0;
}

.role-assign-page .col-2 {
    min-width: 6rem;
}

.role-assign-page select[size] {
    min-height: 22rem;
}

.user-master-modal .select2-container {
    width: 100% !important;
}

.user-master-modal .select2-container--open {
    z-index: 1060;
}

.user-master-modal .select2-dropdown {
    z-index: 1060;
}

.user-master-modal .modal-body {
    padding-top: 1.75rem;
}

.user-master-modal-form .checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.user-preview-page .card-body {
    padding: 1.75rem;
}

.custom-loader-wrapper {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: #ffffff00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    display: none;
    opacity: 0.5;
    transition: all .8s ease-out;
}

    .custom-loader-wrapper .custom-loader {
        font-size: 10px;
        margin: auto;
        text-indent: -9999em;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 8px solid #f3f3f3; /* Light grey */
        border-top: 8px solid #3498db; /* Blue */
        -webkit-animation: loading 1.4s infinite linear;
        animation: spin 1.4s infinite linear;
        transform: translateZ(0);
    }

    .custom-loader-wrapper .loader.loader:before {
        width: 50%;
        height: 50%;
        background: #727cf5;
        border-radius: 100% 0 0 0;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
    }

    .custom-loader-wrapper .loader.loader:after {
        background: #f9fafb;
        width: 75%;
        height: 75%;
        border-radius: 50%;
        content: '';
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    .location-scope-group--disabled {
        opacity: 0.45;
    }

.location-scope-group--disabled .select2-container {
    pointer-events: none;
}

.login.login-4 .login-form {
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

.login.login-4 .login-form .form-control {
    border-radius: 0.9rem;
}

.login.login-4 .login-form .btn {
    min-width: 9.5rem;
}

.dashboard-card .card-body {
    padding: 2rem 1.5rem 1.75rem;
}

.dashboard-card .dashboard-grid {
    margin-top: 0.75rem;
}

.dashboard-card .dashboard-item {
    padding: 1.25rem 0.75rem 0.75rem;
}

.dashboard-card .dashboard-title {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.dashboard-card .dashboard-description {
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
    color: #64748b;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}