/* *-----------------------------------------------------------------------------------
    CSS INDEX
    ===================
    1. Default
    2. Sidebar
    3. Header
    4. Menu Button
    5. Footer
    6. Main Content
    7. Page Heading
    8. Avatar
    9. Card
    10. Table
    11. Forms
    12. Button
    13. Switch Button 1
    14. Modal
    15. Login Screen
    16. Pagination
    17. Page Not Found
    18. Loader
    19. Sweet Alert
    20. React Switch
    21. Darkmode
/*--------------------------------------------------------------
    1. Default
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700&display=swap');

* {
    outline-color: transparent;
    outline-style: none;
}

:root {
    --white: #FFFFFF;
    --light: #F5F5F5;
    --dark: #0D0D0D;
    --gray: #696C70;
    --primary: #0093ED;
    --success: #34A853;
    --danger: #EA4335;
    --warning: #FFBF1C;
    --info: #4285F4;
    --border: #EDEDED;
    --font-white: #FFFFFF;
    --box-shadow: 0 0 6px -4px #00000014, 0 0 16px 0 #0000000d, 0 0 28px 8px #0000000d;
}

[data-theme="waitover-darks"] {
    --white: #201e26;
    --light: #141218;
    --dark: #b2b2b2;
    --gray: #b2b2b2;
    --primary: #0093ED;
    --success: #44CF94;
    --danger: #EA4335;
    --warning: #FFBF1C;
    --info: #4285F4;
    --border: #2e2d32;
    --font-white: #FFFFFF;
    --box-shadow: 0 3px 6px -4px #0000006b, 0 0 16px 0 #0000002b, 0 0 28px 8px #0000004a !important;
}

html.light {
    --white: #FFFFFF;
    --light: #F5F5F5;
    --dark: #0D0D0D;
    --gray: #696C70;
    --primary: #0093ED;
    --success: #34A853;
    --danger: #EA4335;
    --warning: #FFBF1C;
    --info: #4285F4;
    --border: #EDEDED;
    --font-white: #FFFFFF;
}

html.dark {
    --white: #201e26;
    --light: #141218;
    --dark: #b2b2b2;
    --gray: #b2b2b2;
    --primary: #0093ED;
    --success: #44CF94;
    --danger: #EA4335;
    --warning: #FFBF1C;
    --info: #4285F4;
    --border: #2e2d32;
    --font-white: #FFFFFF;
}

body {
    font-family: 'Maven Pro', sans-serif;
    color: var(--dark);
    font-size: 15px;
    background-color: var(--light);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background-color: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: var(--gray);
    border-radius: .325rem;
}

::selection {
    color: var(--font-white);
    background-color: var(--primary);
}

::-moz-selection {
    color: var(--font-white);
    background-color: var(--primary);
}

a {
    color: var(--dark);
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: none;
}

a:hover {
    color: var(--primary);
}

a:-webkit-any-link:focus-visible {
    outline-offset: 0;
}

a:-webkit-any-link:focus-visible {
    outline-offset: unset;
}

select {
    background-color: var(--light) !important;
}

.dropdown-item {
    font-weight: 500;
    color: var(--dark);
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--dark);
    background-color: var(--light);
}

button:focus,
.btn-close:focus,
.btn:focus-visible,
.btn:focus {
    outline: 0;
    box-shadow: unset;
}

:focus-visible {
    outline: unset;
}

:focus-visible {
    outline: 0;
}

:-webkit-direct-focus {
    outline-color: unset;
    outline-style: unset;
    outline-width: 0 !important;
}

:focus {
    outline-color: unset;
    outline-style: unset;
    outline-width: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dark);
    background-color: var(--light);
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: unset !important;
}

.form-control::-webkit-input-placeholder,
input[type=text]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=datetime]::-webkit-input-placeholder,
input[type=datetime-local]::-webkit-input-placeholder,
input[type=date]::-webkit-input-placeholder,
input[type=month]::-webkit-input-placeholder,
input[type=time]::-webkit-input-placeholder,
input[type=week]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=color]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #bdbdbd
}

html.dark .form-control::-webkit-input-placeholder,
html.dark input[type=text]::-webkit-input-placeholder,
html.dark input[type=password]::-webkit-input-placeholder,
html.dark input[type=datetime]::-webkit-input-placeholder,
html.dark input[type=datetime-local]::-webkit-input-placeholder,
html.dark input[type=date]::-webkit-input-placeholder,
html.dark input[type=month]::-webkit-input-placeholder,
html.dark input[type=time]::-webkit-input-placeholder,
html.dark input[type=week]::-webkit-input-placeholder,
html.dark input[type=number]::-webkit-input-placeholder,
html.dark input[type=email]::-webkit-input-placeholder,
html.dark input[type=url]::-webkit-input-placeholder,
html.dark input[type=search]::-webkit-input-placeholder,
html.dark input[type=tel]::-webkit-input-placeholder,
html.dark input[type=color]::-webkit-input-placeholder,
html.dark textarea::-webkit-input-placeholder {
    color: #444444
}

.border,
.border-bottom {
    border-color: var(--border) !important;
}

/*--------------------------------------------------------------
    2. Sidebar
--------------------------------------------------------------*/
.sidebar-wrapper {
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: var(--white);
    bottom: 0;
    transition: width 0.3s ease-out, left 0.5s ease-out;
}

/* SideBar Header*/
.sidebar-wrapper .sidebar-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75px;
    border-right: 1px solid var(--border);
}

.sidebar-wrapper .sidebar-header img {
    display: block;
    max-width: 100%;
    height: 34px;
    margin: 0 auto;
}

/* SideBar Menu*/
.sidebar-menu {
    position: relative;
    width: 250px;
    height: calc(100vh - 75px);
    background-color: var(--white);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    transition: width 0.3s ease-out;
}

.sidebar-wrapper .menu {
    margin-top: 1rem;
    padding: 0;
    font-weight: 600;
}

.sidebar-wrapper .menu .sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1rem;
    margin: 0 1rem;
    font-size: 15px;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: 0.3s;
    text-decoration: none;
    color: var(--gray);
}

.sidebar-wrapper .menu .sidebar-link.active i,
.sidebar-wrapper .menu .sidebar-link.active>span {
    color: var(--primary);
}

.sidebar-wrapper .menu .sidebar-link.active {
    background-color: rgb(0 147 237 / 7%);
}

.sidebar-wrapper .menu .sidebar-link i {
    font-size: 1.25rem;
    color: var(--gray);
}

.sidebar-wrapper .menu .sidebar-link span {
    margin-left: .7rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 15ch;
}

.sidebar-wrapper .menu .has-sub.active .sidebar-link span,
.sidebar-wrapper .menu .has-sub.active .sidebar-link i:before {
    color: var(--primary);
}

.sidebar-wrapper .menu .sidebar-item:hover a,
.sidebar-wrapper .menu .sidebar-item:hover a i,
.sidebar-wrapper .menu .sidebar-link:hover,
.sidebar-wrapper .menu .sidebar-link:hover i {
    color: var(--primary);
}

.sidebar-wrapper .menu .sidebar-item {
    list-style: none;
    position: relative;
}

.sidebar-wrapper .menu .sidebar-item.has-sub .sidebar-link {
    cursor: pointer;
}

.sidebar-wrapper .menu .sidebar-item.has-sub .sidebar-link:after {
    content: "\ea4a";
    font-family: boxicons !important;
    position: absolute;
    color: var(--gray);
    right: 15px;
    top: 14px;
    display: block;
    font-size: 20px;
}


.sidebar-wrapper .menu .sidebar-item .sidebar-link.active span,
.sidebar-wrapper .menu .sidebar-item.has-sub.active .sidebar-link:after,
.sidebar-wrapper .menu .sidebar-item.has-sub:hover .sidebar-link:after {
    color: var(--primary);
}

.sidebar-wrapper .menu .sidebar-item .sidebar-link.active i,
.sidebar-wrapper .menu .sidebar-item .sidebar-link.active svg {
    fill: var(--primary);
    color: var(--primary);
}


.sidebar-wrapper .menu .submenu {
    list-style: none;
    display: none;
    transition: max-height 2s cubic-bezier(0, 0.55, 0.45, 1);
    overflow: hidden;
}

.sidebar-wrapper .menu .sidebar-item.has-sub.active .sidebar-link {
    background-color: rgb(0 147 237 / 7%);
}

.sidebar-wrapper .menu .submenu.active {
    max-height: 999px;
    display: block;
}

.sidebar-wrapper .menu .submenu .submenu-item.active {
    position: relative;
}

.sidebar-wrapper .menu .submenu .submenu-item a.active {
    color: var(--primary);
}

.sidebar-wrapper .menu .submenu .submenu-item.active>a {
    color: var(--primary);
}


.sidebar-wrapper .menu .submenu .submenu-item a {
    padding: 0.7rem 1.4rem;
    padding-left: 2.1rem;
    display: block;
    color: var(--gray);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.sidebar-wrapper .menu .submenu .submenu-item a:hover {
    color: var(--primary);
}

.layout-wrapper .toggler {
    display: none;
}

.layout-wrapper .sidebar-logo .logo-mini {
    display: none;
}

.layout-wrapper.collapsed .menu .sidebar-item.has-sub .sidebar-link:after {
    opacity: 0
}

.layout-wrapper.collapsed .sidebar-menu:hover .sidebar-item.has-sub .sidebar-link:after {
    opacity: unset;
}

@media screen and (min-width: 1199px) {
    .layout-wrapper.collapsed .sidebar-logo .logo {
        display: none;
    }

    .layout-wrapper.collapsed .sidebar-logo .logo-mini {
        display: block;
    }

    .layout-wrapper.collapsed .sidebar-menu:hover {
        width: 250px;
    }

    .layout-wrapper .toggler {
        display: block;
        position: fixed;
        left: 265px;
        top: 23.5px;
        transition: left 0.3s ease-out;
        z-index: 99;
    }

    .layout-wrapper.collapsed .sidebar-wrapper,
    .layout-wrapper.collapsed .sidebar-menu {
        width: 85px;
    }

    .layout-wrapper.collapsed header.sidebar-header {
        left: 85px;
        width: calc(100% - 85px);
    }

    .layout-wrapper.collapsed .toggler {
        left: 100px;
    }

    .layout-wrapper.collapsed #main {
        margin-left: 85px;
    }
}

@media screen and (max-width: 1199px) {
    .sidebar-wrapper {
        position: fixed;
        left: -250px;
    }

    .sidebar-wrapper .sidebar-toggler.x {
        display: block;
    }

    .sidebar-wrapper.active {
        left: 0 !important;
    }
}

/*--------------------------------------------------------------
    3. Header
--------------------------------------------------------------*/
header.sidebar-header {
    background-color: var(--white);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    left: 250px;
    width: calc(100% - 250px);
    height: 75px;
    padding: 0 1.5rem;
    transition: left 0.3s ease-out;
    z-index: 9;
}

header.sidebar-header.full-header {
    width: 100%;
    left: 0;
}

.sidebar-header .header-left-menu .logo,
.sidebar-header .sidebar-logo .logo {
    width: 200px;
    height: auto;
}

.sidebar-header .header-left-menu .logo-mini,
.sidebar-header .header-right-menu .logo-mini,
.sidebar-header .sidebar-logo .logo-mini {
    height: 40px;
    width: auto;
}

html.dark .sidebar-header .header-left-menu .logo path:first-child,
html.dark .sidebar-header .sidebar-logo .logo path:first-child {
    fill: var(--font-white);
}

html.dark .sidebar-header .header-left-menu .logo-mini path:last-child,
html.dark .sidebar-header .header-right-menu .logo-mini path:last-child,
html.dark .sidebar-header .sidebar-logo .logo-mini path:last-child {
    fill: var(--font-white);
}

header .header-right-menu {
    display: flex;
    align-items: center;
}

header .header-right-menu .dropdown .dropdown-toggle {
    display: block;
    border: none;
    padding: 0.5rem;
    background-color: var(--light);
    border-radius: 0.625rem;
    margin: 0;
    width: 100%;
    box-shadow: none;
}

header .header-right-menu .user-menu img {
    width: 44px;
    height: 44px;
    max-width: 44px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: .625rem;
}

header .header-right-menu .dropdown .dropdown-toggle::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    border-top: 0.3em solid var(--dark);
}

header .header-right-menu .dropdown-menu.show {
    display: block;
    margin: 1rem .625rem 1rem -.625rem !important;
    min-width: 218px !important;
    border-radius: 0.625rem;
    background-color: var(--white);
    box-shadow: 0 0 20px 3px #00000014;
    border: none;
}

header .header-right-menu .dropdown-item.active,
header .header-right-menu .dropdown-item:active {
    color: var(--font-white);
    text-decoration: none;
    background-color: var(--primary);
}

header .header-right-menu .dropdown-divider {
    border-top-color: var(--border);
}

header .header-right-menu .dropdown .user-menu {
    display: flex;
    align-items: center;
    padding-right: 24px;
}

header .header-right-menu .dropdown .user-menu .user-name {
    text-align: left;
}

header .header-right-menu .dropdown .user-menu .user-name h6 {
    color: var(--dark);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 15ch;
}

header .header-right-menu .dropdown .user-menu .user-name p {
    color: var(--gray);
    margin-bottom: 0;
    font-size: 14px;
}

@media (max-width: 1199.98px) {
    header.sidebar-header {
        left: 0;
        width: 100%;
    }

    header .header-right-menu .burger-btn {
        margin-left: .25rem;
    }
}

@media (max-width: 767.98px) {
    .full-header .header-right-menu .btn {
        --bs-btn-padding-y: 0.25rem;
        --bs-btn-padding-x: 0.5rem;
        --bs-btn-font-size: 0.875rem;
        --bs-btn-border-radius: 0.25rem;
    }
}

@media (max-width: 575px) {
    header.sidebar-header {
        padding: 0 1rem;
    }

    header .header-right-menu .user-menu img {
        width: 36px;
        height: 36px;
        max-width: 36px;
        min-height: 36px;
        border: 1px solid var(--border);
        border-radius: 0.375rem;
    }
}

@media (max-width: 450px) {
    header .header-right-menu .dropdown .user-menu .user-name h6 {
        max-width: 7ch;
    }
}

@media (max-width: 350px) {
    header .header-right-menu .dropdown .user-menu .user-name {
        display: none;
    }
}

/*--------------------------------------------------------------
    4. Menu Button
--------------------------------------------------------------*/
.burger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    color: var(--dark) !important;
    border: none;
    width: 35px;
    height: 35px;
    font-size: 22px;
    border-radius: .625rem;
}

/*--------------------------------------------------------------
    5. Footer
--------------------------------------------------------------*/
.page-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1rem;
    width: 100%;
    height: auto;
    background-color: var(--white);
    position: fixed;
    bottom: 0 !important;
    right: 0 !important;
}

.page-footer i {
    font-size: 18px;
    line-height: 24px;
    margin: 0 3px;
}

.page-footer a {
    color: var(--primary);
    font-weight: 600;
    margin: 0 3px;
}

/*--------------------------------------------------------------
    6. Main Content
--------------------------------------------------------------*/
#main {
    margin-left: 250px;
    padding: 105px 30px 30px;
    transition: margin-left 0.3s ease-out;
}

#main.full-page-content {
    margin-left: 0;
}

@media screen and (max-width: 1199px) {
    #main {
        margin-left: 0;
        padding: 91px 16px 16px 16px;
    }
}

/*--------------------------------------------------------------
    7. Page Heading
--------------------------------------------------------------*/
.page-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    height: auto;
    background-color: var(--white);
    border-radius: 0.625rem;
}

.page-heading h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 0;
}

.page-heading h3 span {
    color: var(--primary);
}


.page-title-headings {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.page-title-headings h3 {
    margin-bottom: 0;
    margin-right: 1rem;
}

.page-heading-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.page-heading-right-scanned-images {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-heading .breadcrumb {
    margin: 0;
}

.page-heading .breadcrumb .breadcrumb-item a {
    display: flex;
    align-items: center;
}

.page-heading .breadcrumb .breadcrumb-item.active {
    color: var(--primary);
}

.custom-btn-add i {
    display: none;
}

@media (max-width: 768.98px) {
    .page-heading {
        padding: 1rem;
    }

    .custom-btn-add i {
        display: block;
        font-size: 20px;
    }

    .custom-btn-add span {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .page-heading h3 {
        font-size: 22px;
    }
}

/*--------------------------------------------------------------
    8. Avatar
--------------------------------------------------------------*/
.avatar {
    display: inline-flex;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

.avatar .avatar-content {
    width: 32px;
    height: 32px;
    color: var(--font-white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
}

.avatar .avatar-content i,
.avatar .avatar-content svg {
    color: var(--font-white);
    font-size: 1rem;
    height: 1rem;
}

.avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.avatar .avatar-status {
    width: 0.7rem;
    height: 0.7rem;
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--border);
    bottom: 0;
    right: 0;
}

.avatar.avatar-sm .avatar-content,
.avatar.avatar-sm img {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
}

.avatar.avatar-md .avatar-content,
.avatar.avatar-md img {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
}

.avatar.avatar-lg .avatar-content,
.avatar.avatar-lg img {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
}

.avatar.avatar-xl .avatar-content,
.avatar.avatar-xl img {
    width: 60px;
    height: 60px;
    font-size: 1.4rem;
}

/*--------------------------------------------------------------
    9. Card
--------------------------------------------------------------*/
.card {
    border: none;
    border-radius: .625rem;
    background-color: var(--white);
}

.card-header {
    border-bottom: none;
    background-color: var(--white);
    border-top-left-radius: .625rem !important;
    border-top-right-radius: .625rem !important;
    padding: 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

.card-body .row:last-child {
    border-bottom: unset !important;
}

.card-image {
    margin-bottom: .5rem;
    overflow: hidden;
    padding-top: 50.2%;
    position: relative;
    border-radius: .525rem;
}

.card-image img {
    border-radius: .652rem;
    display: block;
    height: 100%;
    left: 0;
    -o-object-position: center center;
    object-position: center center;
    position: absolute;
    top: 0;
    width: 100%;
    margin-bottom: 0.5rem;
}

.card-footer {
    padding: 1.25rem;
    background-color: var(--white);
    border-top-color: var(--border);
    border-radius: 0 0 .625rem .625rem !important;
}

@media (max-width: 400px) {

    .card-header,
    .card-body,
    .card-footer {
        padding: 1rem;
    }
}

/*--------------------------------------------------------------
    10. Table
--------------------------------------------------------------*/
tbody,
td,
tfoot,
th,
thead,
tr {
    vertical-align: middle;
    color: var(--dark);
}

thead th {
    background-color: var(--light) !important;
}

tbody td {
    color: var(--dark);
}

.table-responsive {
    box-shadow: 0 0 0 1px var(--border);
    border-radius: .625rem;
    background-color: var(--white);
}

.table-responsive table {
    margin-bottom: 0;
}

.table-responsive .table> :not(caption)>*>* {
    padding: 0.75rem .5rem;
}

.table-responsive .table-bordered> :not(caption)>* {
    border-width: 0;
}

.table-responsive .table> :not(:last-child)> :last-child>* {
    border-bottom-color: var(--border);
}

.table-responsive .table th,
.table-responsive .table td {
    border: 1px solid var(--border);
}

.table-responsive .table th:first-child,
.table-responsive .table td:first-child {
    border-left: none;
}

.table-responsive .table th:last-child,
.table-responsive .table td:last-child {
    border-right: none;
}

.table-responsive .table tr:first-child th {
    border-top: none;
}

.table-responsive .table tr:last-child td {
    border-bottom: none;
}

.modal-img img {
    width: 40px;
    height: 40px;
    border-radius: .625rem;
}

.table-sort-filter {
    display: flex;
    align-items: center;
}

.table-sort-filter .table-sort {
    position: relative;
    display: flex;
    margin-left: .5rem;
}

.table-sort-filter .table-sort i {
    font-size: 10px;
    color: var(--dark);
    line-height: .8;
    cursor: pointer;
}

.table-sort-filter .table-sort i.active {
    color: var(--primary);
}

.table-sort-filter .table-sort .sort-up {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDYgMTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDNWMTVIMlY2SDZMMCAwVjNaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K);
    width: 10px;
    height: 15px;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 1px;
    cursor: pointer;
}

.table-sort-filter .table-sort .sort-down {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDYgMTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00IDlIMEw2IDE1VjBINFY5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==);
    width: 10px;
    height: 15px;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 1px;
    cursor: pointer;
}

.dark .table-sort-filter .table-sort .sort-up,
.dark .table-sort-filter .table-sort .sort-down {
    filter: invert(72%) sepia(0%) saturate(0%) hue-rotate(110deg) brightness(98%) contrast(96%);
}

.table-sort-filter .table-sort .sort-down.active,
.table-sort-filter .table-sort .sort-up.active {
    filter: invert(47%) sepia(70%) saturate(3412%) hue-rotate(177deg) brightness(95%) contrast(102%);
}

/*--------------------------------------------------------------
    11. Forms
--------------------------------------------------------------*/
.form-label {
    font-size: 14.5px;
    color: var(--gray);
    font-weight: 500;
    margin-bottom: 0;
}

label.form-label .rerq {
    color: var(--danger);
    margin-left: 0.1rem;
}

label.error {
    display: none;
    font-size: .875em;
    color: var(--danger);
    background-color: #ea433512;
    border-radius: .525rem;
    padding: 0 .5rem;
    margin-bottom: .5rem;
}

.invalid-feedback strong {
    font-size: .875em;
    color: var(--danger);
    background-color: #ea433512;
    border-radius: .525rem;
    padding: .2rem .5rem;
    margin-bottom: .5rem;
    font-weight: 500 !important;
}

.form-control-lg {
    min-height: calc(1.7em + 1rem + 2px) !important;
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: .625rem;
}

.form-control-sm {
    min-height: calc(1.858em + 0.5rem + 2px) !important;
    border-radius: .325rem;
}

.form-control,
.form-select,
.rs-picker-default .rs-picker-toggle {
    padding: 0.375rem 0.75rem;
    min-height: 40px;
    border-radius: .625rem;
    color: var(--dark);
    font-size: 15px;
    font-weight: 500;
    background-color: var(--light) !important;
    /* border: none; */
    border-color: var(--light);
}

.rs-picker-default .rs-picker-toggle.rs-btn .rs-picker-toggle-indicator .rs-picker-caret-icon,
.rs-picker-default .rs-picker-toggle.rs-btn .rs-picker-toggle-indicator .rs-picker-clean {
    top: 10px !important;
}

.rs-search-box .rs-input-group.rs-input-group-inside .rs-search-box-input.rs-input,
.rs-search-box .rs-input-group.rs-input-group-inside .rs-input-group-addon {
    background-color: var(--light);
    border: 2px solid var(--border);
    outline: none;
    color: var(--dark);
    /* border-radius: 0px; */
}

.rs-search-box-input.rs-input {
    border-color: var(--border);
    outline: none;
    border-radius: 0px;
}

.rs-input-group.rs-input-group-inside {
    border-color: var(--border);
    outline: none;
}

.rs-input-group.rs-input-group-inside:hover {
    border-color: var(--border);
    outline: none;
}

.rs-input-group.rs-input-group-inside.rs-input-group-focus {
    border-color: var(--border);
    outline: none;
}

.rs-picker-select-menu-item.rs-picker-select-menu-item-focus {
    background-color: var(--light);
    color: var(--dark);
}

.input-group-text {
    border: none;
    background-color: var(--light);
    border-radius: .625rem;
}

.rs-picker-default .rs-picker-toggle.rs-btn {
    padding-top: 10px;
    padding-bottom: 10px;
}

.rs-picker-default .rs-picker-toggle.rs-btn .rs-picker-toggle-caret {
    top: 10px;
}

.rs-picker-default:not(.rs-picker-disabled) .rs-btn:hover,
.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:hover,
.rs-picker-default:not(.rs-picker-disabled) .rs-btn:focus,
.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:focus,
.rs-picker-default:not(.rs-picker-disabled) .rs-btn-active,
.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle-active,
.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:hover,
.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:focus,
.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle-active,
.rs-picker-default:not(.rs-picker-disabled) .rs-btn:hover,
.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:hover,
.rs-picker-default:not(.rs-picker-disabled) .rs-btn:focus,
.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:focus,
.rs-picker-default:not(.rs-picker-disabled) .rs-btn-active,
.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle-active {
    border-color: transparent;
}

.rs-picker-toggle-active,
.rs-picker.rs-picker-focused {
    box-shadow: unset;
}

.rs-picker-has-value .rs-btn .rs-picker-toggle-value,
.rs-picker-has-value .rs-picker-toggle .rs-picker-toggle-value {
    color: var(--dark);
}

.rs-picker-menu {
    background-color: var(--white);
    border-radius: .625rem;
    z-index: 1060;
}

.rs-picker-select-menu-item {
    color: var(--dark);
}

.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
    color: var(--dark);
    background-color: var(--light);
    border-color: var(--border);
    border-radius: .625rem;
    font-size: 15px;
}

.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input:focus,
.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input:hover:not(:disabled),
.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input:focus,
.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input:hover:not(:disabled) {
    border-color: var(--primary);
}

.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input:focus {
    outline: unset;
}

.form-select {
    padding: 0.375rem 2rem 0.375rem 0.75rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    outline: 0;
    box-shadow: unset;
    color: var(--dark);
    background-color: var(--light);
}

html.dark .form-control:disabled {
    background-color: #ffffff0d;
}

.form-control::-webkit-file-upload-button {
    height: 40px;
    color: var(--dark);
    background-color: var(--white);
    border: 4px solid var(--light);
    border-radius: .625rem;
}

.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background-color: var(--white);
}

.form-group[class*="has-icon-"].has-icon-left .form-control {
    padding-left: 3rem;
}

.form-group[class*="has-icon-"].has-icon-left .form-control-icon {
    left: 0;
}

.form-group[class*="has-icon-"].has-icon-right .form-control {
    padding-right: 3rem;
}

.form-group[class*="has-icon-"].has-icon-right .form-control-icon {
    right: 0;
}

.form-group[class*="has-icon-"] .form-control:focus~.form-control-icon i,
.form-group[class*="has-icon-"] .form-control:focus~.form-control-icon svg {
    color: var(--primary);
}

.form-group[class*="has-icon-"] .form-control.form-control-xl {
    padding-left: 3rem;
}

.form-group[class*="has-icon-"] .form-control.form-control-xl~.form-control-icon i {
    font-size: 1.6rem;
}

.form-group[class*="has-icon-"] .form-control.form-control-xl~.form-control-icon i:before {
    color: #a6a8aa;
}

.form-group[class*="has-icon-"] .form-control-icon {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 .8rem;
}

.search-icon-button {
    color: var(--gray);
}

.search-icon-button:hover,
.search-icon-button:focus-visible {
    color: var(--primary);
}

.form-group.form-control-lg-icon[class*="has-icon-"] .form-control-icon {
    top: 15px;
    transform: none;
}

.form-group[class*="has-icon-"] .form-control-icon i,
.form-group[class*="has-icon-"] .form-control-icon svg {
    width: 1.4rem;
    color: var(--gray);
    font-size: 1.4rem;
}

.form-check {
    padding-left: 2em;
}

.form-check-input {
    width: 1.4em;
    height: 1.4em;
    margin-top: 0;
    background-color: var(--light);
    border: 1px solid #bfbfbf;
}

.form-check .form-check-input {
    margin-left: -2em;
}

label.form-check-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--gray);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/*--------------------------------------------------------------
    12. Button
--------------------------------------------------------------*/

.btn-primary {
    --bs-btn-color: var(--font-white);
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--font-white);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--font-white);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--font-white);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-light {
    --bs-btn-color: var(--dark);
    --bs-btn-bg: var(--light);
    --bs-btn-border-color: var(--light);
    --bs-btn-hover-color: var(--dark);
    --bs-btn-hover-bg: var(--light);
    --bs-btn-hover-border-color: var(--light);
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: var(--dark);
    --bs-btn-active-bg: var(--light);
    --bs-btn-active-border-color: var(--light);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--dark);
    --bs-btn-disabled-bg: var(--light);
    --bs-btn-disabled-border-color: var(--light);
}

.btn-danger {
    --bs-btn-color: var(--font-white);
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-color: var(--font-white);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: var(--font-white);
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--font-white);
    --bs-btn-disabled-bg: var(--danger);
    --bs-btn-disabled-border-color: var(--danger);
}

.btn-success {
    --bs-btn-color: var(--font-white);
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-color: var(--font-white);
    --bs-btn-hover-bg: var(--success);
    --bs-btn-hover-border-color: var(--success);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--font-white);
    --bs-btn-active-bg: var(--success);
    --bs-btn-active-border-color: var(--success);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--font-white);
    --bs-btn-disabled-bg: var(--success);
    --bs-btn-disabled-border-color: var(--success);
}

.btn-info {
    --bs-btn-color: var(--font-white);
    --bs-btn-bg: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-hover-color: var(--font-white);
    --bs-btn-hover-bg: var(--info);
    --bs-btn-hover-border-color: var(--info);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--font-white);
    --bs-btn-active-bg: var(--info);
    --bs-btn-active-border-color: var(--info);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--font-white);
    --bs-btn-disabled-bg: var(--info);
    --bs-btn-disabled-border-color: var(--info);
}

.btn-warning {
    --bs-btn-color: var(--font-white);
    --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: var(--font-white);
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--font-white);
    --bs-btn-active-bg: var(--warning);
    --bs-btn-active-border-color: var(--warning);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--font-white);
    --bs-btn-disabled-bg: var(--warning);
    --bs-btn-disabled-border-color: var(--warning);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--font-white);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: var(--font-white);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-color: var(--font-white);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: var(--font-white);
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--danger);
    --bs-btn-disabled-border-color: var(--danger);
}

.btn-outline-success {
    --bs-btn-color: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-color: var(--font-white);
    --bs-btn-hover-bg: var(--success);
    --bs-btn-hover-border-color: var(--success);
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: var(--font-white);
    --bs-btn-active-bg: var(--success);
    --bs-btn-active-border-color: var(--success);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--success);
    --bs-btn-disabled-border-color: var(--success);
}

.btn-outline-warning {
    --bs-btn-color: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: var(--font-white);
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: var(--font-white);
    --bs-btn-active-bg: var(--warning);
    --bs-btn-active-border-color: var(--warning);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--warning);
    --bs-btn-disabled-border-color: var(--warning);
}

.btn-outline-info {
    --bs-btn-color: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-hover-color: var(--font-white);
    --bs-btn-hover-bg: var(--info);
    --bs-btn-hover-border-color: var(--info);
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: var(--font-white);
    --bs-btn-active-bg: var(--info);
    --bs-btn-active-border-color: var(--info);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--info);
    --bs-btn-disabled-border-color: var(--info);
}

.btn-group-lg>.btn,
.btn-lg {
    padding: 0.625rem 1.25rem !important;
    font-size: 1.25rem;
    border-radius: .625rem;
}

.btn-sm {
    padding: 0.407rem 0.5rem !important;
    font-size: 0.875rem;
    border-radius: .325rem;
}

.btn {
    font-weight: 500;
    border-radius: 0.625rem;
    padding: 0.485rem 1rem;
    font-size: 15px;
    box-shadow: unset;
}

.btn.btn-icon-text {
    display: flex;
    align-items: center;
}

.btn.btn-icon-text i {
    margin-right: .5rem;
    font-size: 1.225rem;
    line-height: 1.225rem;
}

.btn.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    height: 32px;
    width: 32px;
}

.btn.btn-icon i {
    font-size: 1rem;
    line-height: 1rem;
}

.btn.btn-icon-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    height: 40px;
    width: 40px;
}

.btn.btn-icon-lg i,
.btn.btn-icon-lg.bx {
    font-size: 1.15rem;
    line-height: 1.15rem;
}

@media (max-width: 767.98px) {
    .btn-group .btn {
        --bs-btn-padding-y: 0.25rem;
        --bs-btn-padding-x: 0.5rem;
        --bs-btn-font-size: 0.875rem;
        --bs-btn-border-radius: 0.25rem;
    }
}

/*--------------------------------------------------------------
    13. Switch Button 1
--------------------------------------------------------------*/
.switch.btn-sm {
    min-height: 36px !important;
}

.switch-on.btn.btn-sm {
    padding-right: 1.5rem !important;
    line-height: 22px;
}

.switch-off.btn.btn-sm {
    padding-left: 1.5rem !important;
    line-height: 22px;
}

.switch.btn.btn-light,
.switch.btn.btn-outline-light {
    border-color: var(--border) !important;
}

.switch-on.btn {
    padding-right: 2rem;
    line-height: 18px;
}

.switch-off.btn {
    padding-left: 2rem;
    line-height: 18px;
}

.switch-handle {
    background-color: var(--white) !important;
}

/*--------------------------------------------------------------
    14. Modal
--------------------------------------------------------------*/
.modal-content {
    background-color: var(--white);
    border-color: var(--border);
}

.modal-header {
    border-bottom-color: var(--border);
}

.modal .modal-header .modal-title {
    font-size: 20px;
    font-weight: 600;
}

.modal .modal-body .modal-content {
    border-color: transparent;
}

.modal-footer {
    border-color: var(--border);
}

html.dark .btn-close {
    filter: invert(1);
}

/*--------------------------------------------------------------
    15. Login Screen
--------------------------------------------------------------*/
.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100vh;
}

.auth .auth-box {
    width: 500px;
    border-radius: 0.825rem;
    margin: 0 auto;
    background-color: var(--white);
}

.auth .auth-box .auth-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: .75rem;
    padding-top: 20px;
    text-align: center;
}

.auth .auth-box .auth-subtitle {
    font-size: 16px;
    color: var(--gray);
    margin-bottom: 2rem;
    text-align: center;
}

.auth .auth-box .auth-logo .logo-mini {
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--white);
    border-radius: .625rem;
    padding: 1rem;
    height: 112px;
    width: 112px;
    max-width: 100%;
}

html.dark .auth .auth-box .auth-logo .logo-mini path:last-child {
    fill: var(--font-white);
}

.auth .auth-box .input-prefix {
    position: relative;
}

.auth .auth-box .input-prefix .form-control {
    padding-right: 50px;
}

.auth .auth-box .input-prefix i {
    position: absolute;
    right: 0.25rem;
    bottom: 0;
    font-size: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gray);
}

@media (max-width: 767px) {}

@media (max-width: 400px) {}

@media (max-width:375px) {}

/*--------------------------------------------------------------
    16. Pagination
--------------------------------------------------------------*/
.pagination {
    --bs-pagination-color: #c0c3c7;
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: #c0c3c7;
    --bs-pagination-bg: #fff;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: #dee2e6;
    --bs-pagination-border-radius: 0.375rem;
    --bs-pagination-hover-color: #000;
    --bs-pagination-hover-bg: #e9ecef;
    --bs-pagination-hover-border-color: #dee2e6;
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: #e9ecef;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25remrgba(13, 110, 253, 0.25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #0d6efd;
    --bs-pagination-active-border-color: #0d6efd;
    --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: #dee2e6;
    display: flex;
    padding-left: 0;
    list-style: none;
}

.page-item:nth-child(2) .page-link {
    background-color: var(--primary) !important;
}

.page-item:nth-child(2) .page-link:hover {
    color: #fff !important;
}

.pagination-custom {
    margin-top: 1.5rem;
}

.rc-pagination {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.rc-pagination-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: .625rem;
}

.rc-pagination-prev:before,
.rc-pagination-next:before {
    font-family: 'boxicons' !important;
    position: absolute;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: .625rem;
}

.rc-pagination-next:before {
    content: "\ebe6";
}

.rc-pagination-prev:before {
    content: "\eb33";
}

.rc-pagination-item,
.rc-pagination-prev,
.rc-pagination-jump-prev,
.rc-pagination-jump-next {
    margin-right: 8px;
}

.rc-pagination-item.rc-pagination-item-active {
    background-color: var(--primary);
    color: var(--font-white);
}

.rc-pagination-prev.rc-pagination-disabled,
.rc-pagination-next.rc-pagination-disabled {
    color: #444444;
}

.paggination-btn {
    width: 40px;
    height: 40px;
    overflow: hidden;
    background-color: transparent;
    color: var(--dark);
    border-radius: .625rem;
    border: transparent;
}

.rc-pagination-jump-prev button,
.rc-pagination-jump-next button {
    border-color: transparent;
    background-color: transparent;
}

.rc-pagination-jump-next button:after,
.rc-pagination-jump-prev button:after {
    display: block;
    content: "•••";
    font-size: 14px;
    color: var(--dark);
}

.rc-pagination-prev,
.rc-pagination-next,
.rc-pagination-item,
.rc-pagination-jump-prev,
.rc-pagination-jump-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

/*--------------------------------------------------------------
    17. Page Not Found
--------------------------------------------------------------*/
.error {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-found {
    text-align: center;
    padding: 3rem 0;
}

.no-found img {
    height: 200px;
}

.no-found p {
    font-size: 20px;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0;
}

.Image-Map {
    width: 40px;
    height: 40px;
}

/*--------------------------------------------------------------
    18. Loader
--------------------------------------------------------------*/
.loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: var(--white);
    z-index: 999;
}

.loader:after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../public/logo/appicon.png');
    border-radius: .625rem;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
}

.loader:before {
    content: "";
    position: fixed;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    border: 2px solid var(--primary);
    border-top-color: transparent;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    -webkit-animation: animate-preloader 1s linear infinite;
    animation: animate-preloader 1s linear infinite;
}

.loader.table-loader {
    position: absolute;
    border-radius: .625rem;
    height: calc(100vh - 140px);
}

.loader.table-loader:after,
.loader.table-loader:before {
    position: absolute;
}

@-webkit-keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

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

/*--------------------------------------------------------------
    19. Sweet Alert
--------------------------------------------------------------*/
.swal2-popup {
    background-color: var(--white) !important;
    color: var(--dark) !important;
    border-radius: .625rem !important;
}

/*--------------------------------------------------------------
    20. React Switch
--------------------------------------------------------------*/
.react-switch .react-switch-off,
.react-switch .react-switch-on {
    display: flex;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    line-height: 30px;
    color: var(--font-white);
}

.react-switch .react-switch-off {
    margin-right: 4px;
}

.react-switch .react-switch-on {
    margin-left: 4px;
}

/*--------------------------------------------------------------
    21. Darkmode
--------------------------------------------------------------*/
.darkmode-switch {
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: 1.5rem;
    transition: background-color 0.3s ease-in-out;
}

.darkmode-switch #darkMode {
    border: none;
    background: transparent;
}

.darkmode-switch #darkMode::before {
    content: "\ee4e";
    font-family: boxicons !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--gray);
    font-size: 1.35rem;
}

.darkmode-switch #darkMode.clicked::before {
    content: "\eebe";
}

/*--------------------------------------------------------------
    22. Toastify toast
--------------------------------------------------------------*/
.Toastify__toast-theme--light {
    background-color: var(--white) !important;
    color: var(--dark) !important;
}

.Toastify__close-button--light {
    color: var(--dark) !important;
    opacity: 1 !important;
}

/* ==================================================
    23. Date Range Picker
================================================== */
.daterangepicker {
    background-color: var(--white);
    border-color: var(--border);
}

.daterangepicker .calendar-table {
    background-color: var(--white);
    border-color: var(--border);
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    color: var(--font-white);
    border-color: var(--dark);
}

.daterangepicker .drp-buttons .btn.btn-default {
    color: var(--dark);
    background-color: var(--light);
}

.daterangepicker td.in-range {
    background-color: var(--light);
    color: var(--dark);
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: var(--white);
    color: var(--gray);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--primary);
    color: var(--font-white);
}

.daterangepicker .drp-buttons {
    border-color: var(--border);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    color: var(--dark);
    background-color: var(--light);
}

.daterangepicker .calendar-table th {
    border-radius: 0;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    min-width: 32px;
    width: 32px;
    height: 32px;
    line-height: 0;
}

.daterangepicker td.start-date.end-date {
    border-radius: .525rem;
}

.daterangepicker td.start-date {
    border-radius: .525rem 0 0 .525rem;
}

.daterangepicker td.end-date {
    border-radius: 0 .525rem .525rem 0;
}

.daterangepicker:after {
    border-bottom: 6px solid var(--border) !important;
}

.daterangepicker:before {
    border-bottom: 7px solid var(--border);
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    background-color: var(--white);
    border-color: var(--border);
    border-radius: 0.325rem;
    color: var(--dark);
}

/*--------------------------------------------------------------
    24. Multi Select Picker
--------------------------------------------------------------*/
.rs-picker-popup {
    background-color: var(--white);
    border-color: var(--dark);
    /* border: 1px solid var(--dark); */
    border-radius: 0.625rem;
}

.rs-picker-popup .rs-picker-item {
    color: var(--dark);
}

.rs-picker-popup .rs-picker-item.active,
.rs-picker-select-menu-item.rs-picker-select-menu-item-active {
    font-weight: bold;
    color: var(--primary) !important;
    background-color: var(--light);
}

.rs-picker-select-menu-item.rs-picker-select-menu-item:hover {
    /* font-weight: bold; */
    color: var(--black);
    background-color: var(--light);
}

.css-b62m3t-container .css-13cymwt-control,
.css-t3ipsp-control {
    padding: 0.1rem 0.25rem;
    min-height: 40px;
    border-radius: 0.625rem !important;
    color: var(--dark);
    font-weight: 500;
    background-color: var(--light) !important;
    border: none !important;
    box-shadow: unset !important;
}

.css-1u9des2-indicatorSeparator {
    background-color: var(--border) !important;
}

.css-1p3m7a8-multiValue {
    background-color: var(--white) !important;
}

.css-wsp0cs-MultiValueGeneric {
    color: var(--dark) !important;
}

.react-select__menu {
    background-color: var(--white) !important;
}

.swal2-cancel {
    margin-inline-end: 10px;
}

/*--------------------------------------------------------------
    26. Popover
--------------------------------------------------------------*/
.popover {
    border-color: var(--border);
}

.popover-body {
    background-color: var(--white);
    color: var(--dark);
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,
.bs-popover-top>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,
.bs-popover-left>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,
.bs-popover-right>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,
.bs-popover-bottom>.popover-arrow::after {
    border-top-color: var(--border);
}

/*--------------------------------------------------------------
    27. Project Grid List
--------------------------------------------------------------*/
.project-grid-list .card {
    margin-bottom: 1.5rem;
}

.project-grid-list .project-list-item {
    display: flex;
    align-items: center;
}

.project-grid-list .project-list-item:hover {
    color: unset;
}

.project-grid-list .project-list-item img {
    width: 50px;
    height: 50px;
    border-radius: .625rem;
    margin-right: 1rem;
}

.project-grid-list .project-list-item .project-list-content h6 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.project-grid-list .project-list-item .project-list-content p {
    margin: 0;
}

/*--------------------------------------------------------------
    28. Math Community
--------------------------------------------------------------*/
.math-community .card-header {
    border-bottom: 1px solid var(--border);
}

.math-community .card-header .community-user {
    display: flex;
    align-items: center;
}

.math-community .card-header .community-user span {
    font-size: 20px;
    font-weight: 600;
    margin-right: 1rem;
}

.math-community .card-header .community-user h5 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding-left: .75rem;
}

.math-community .card-header .community-user ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.math-community .card-header .community-user ul li {
    font-size: 14px;
    margin-left: 1.5rem;
}

.math-community .card-header .community-user ul li:first-child {
    list-style-type: none;
    margin-left: 0.75rem;
}

.math-community .card-header .community-user ul li::marker {
    color: var(--gray);
}

.math-community .card-header .community-user ul li a {
    font-size: 14px;
    color: var(--gray);
}

.math-community .card-body {
    position: relative;
}

.math-community .card-body .attach-counter-img {
    position: relative;
    display: inline-block;
    margin-top: 1rem;
}

.math-community .card-body .attach-counter-img i {
    font-size: 25px;
    padding: .75rem;
    background-color: var(--light);
    border-radius: .625rem;
}

.math-community .card-body .attach-counter-img span {
    position: absolute;
    top: -5px;
    right: -5px;
}

.math-community .card-body .attach-counter-img span.bg-primary {
    background-color: var(--primary) !important;
}

.math-community .card-body .ans-check {
    position: absolute;
    top: 20px;
    right: 20px;
}

.math-community .card-header .ans-check i,
.math-community .card-body .ans-check i {
    font-size: 28px;
    color: var(--success);
}

/*--------------------------------------------------------------
    30. DateRange Picker
--------------------------------------------------------------*/
.daterangepicker {
    background-color: var(--white);
    border-color: var(--border);
}

.daterangepicker .calendar-table {
    background-color: var(--white);
    border-color: var(--border);
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    color: var(--font-white);
    border-color: var(--dark);
}

.daterangepicker .drp-buttons .btn.btn-default {
    color: var(--dark);
    background-color: var(--light);
}

.daterangepicker td.in-range {
    background-color: var(--light);
    color: var(--dark);
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: var(--white);
    color: var(--gray);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--primary);
    color: var(--font-white);
}

.daterangepicker .drp-buttons {
    border-color: var(--border);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    color: var(--dark);
    background-color: var(--light);
}

.daterangepicker .calendar-table th {
    border-radius: 0;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    min-width: 32px;
    width: 32px;
    height: 32px;
    line-height: 0;
}

.daterangepicker td.start-date.end-date {
    border-radius: .525rem;
}

.daterangepicker td.start-date {
    border-radius: .525rem 0 0 .525rem;
}

.daterangepicker td.end-date {
    border-radius: 0 .525rem .525rem 0;
}

.daterangepicker:after {
    border-bottom: 6px solid var(--border) !important;
}

.daterangepicker:before {
    border-bottom: 7px solid var(--border);
}

/* ---------------------------
    Appinfo 
------------------------------*/
.w-appinfo {
    background: #eaf6ff !important;
    background: linear-gradient(180deg, #fff 0%, #eaf6ff 100%) !important;
}

.w-appinfo .appinfo-content {
    text-align: center !important;
}

.w-appinfo .appinfo-content h3 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #24272c;
    margin-bottom: 0.5rem;
}

.w-appinfo .appinfo-content p {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 0;
    color: #6c737d;
}

@media (max-width: 1399.98px) {
    .w-appinfo .appinfo-content h3 {
        font-size: 30px;
    }
}

@media (max-width: 1199.98px) {
    .w-appinfo .appinfo-content h3 {
        font-size: 28px;
    }
}

@media (max-width: 991.98px) {
    .w-appinfo .appinfo-content h3 {
        font-size: 26px;
    }

    .w-appinfo .appinfo-media {
        text-align: center !important;
    }

    .w-appinfo .appinfo-media img {
        max-width: 80%;
    }
}

@media (max-width: 767.98px) {
    .w-appinfo .appinfo-content h3 {
        font-size: 24px;
    }
}

@media (max-width: 575.98px) {
    .w-appinfo .appinfo-content h3 {
        font-size: 22px;
        margin-bottom: 0.35rem;
    }
}

@media (max-width: 399.98px) {
    .w-appinfo .appinfo-content h3 {
        font-size: 20px;
        margin-bottom: 0.25rem;
    }

    .w-appinfo .appinfo-content p {
        font-size: 14px;
    }
}

@media (max-width: 349.98px) {
    .w-appinfo .appinfo-content h3 {
        font-size: 18px;
    }
}

/* ---------------------------
    Hero 
------------------------------*/
.w-hero {
    position: relative;
    height: auto;
    width: 100%;
    padding-top: 125px !important;
}

.w-hero::before,
.w-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
}

.w-hero::before {
    top: 0;
    background-image: url(../public/hero/bg.jpg);
    height: 100%;
}

.w-hero::after {
    background-image: url(../public/hero/shape.svg);
    height: 114px;
}

.w-hero .hero-content {
    position: relative;
    z-index: 2;
}

.w-hero .hero-content h1 {
    font-size: 50px;
    font-weight: 700;
    color: #24272c;
    margin: 0;
}

.w-hero .hero-content h1 span {
    display: block;
    color: #3F68B3;
}

.w-hero .hero-content p {
    font-size: 18px;
    line-height: normal;
    font-weight: 400;
    color: #6c737d;
    margin: 1rem 0 2rem;
}

.w-hero .hero-content .hero-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.w-hero .hero-media {
    position: relative;
    display: flex;
    justify-content: space-between;
    z-index: 2;
}

@media (max-width: 1599.98px) {}

@media (max-width: 1499.98px) {}

@media (max-width: 1399.98px) {
    .w-hero .hero-content h1 {
        font-size: 45px;
    }
}

@media (max-width: 1199.98px) {
    .w-hero {
        padding-top: 120px !important;
    }
}

@media (max-width: 991.98px) {
    .w-hero .hero-content {
        text-align: center;
    }

    .w-hero .hero-content h1 {
        font-size: 40px;
    }

    .w-hero .hero-content p {
        font-size: 17px;
    }

    .w-hero .hero-content .hero-btn {
        justify-content: center;
    }

    .w-hero .hero-media img {
        max-width: 80%;
        margin: 1.25rem auto 0;
    }
}

@media (max-width: 767.98px) {
    .w-hero .hero-content h1 {
        font-size: 36px;
    }

    .w-hero .hero-content p {
        font-size: 16px;
        margin: 1rem 0 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .w-hero {
        padding-top: 100px !important;
        padding-bottom: 1rem !important;
    }

    .w-hero .hero-content h1 {
        font-size: 32px;
    }

    .w-hero .hero-content h1 span {
        display: inline;
    }

    .w-hero .hero-content .hero-btn a img {
        height: 55px;
    }
}

@media (max-width: 399.98px) {
    .w-hero .hero-content h1 {
        font-size: 30px;
    }

    .w-hero .hero-content p {
        font-size: 15px;
        margin: 1rem 0 1rem;
    }

    .w-hero .hero-content .hero-btn a {
        margin: .25rem .5rem;
    }

    .w-hero .hero-content .hero-btn a img {
        height: 50px;
    }
}

@media (max-width: 349.98px) {
    .w-hero .hero-content h1 {
        font-size: 28px;
    }

    .w-hero .hero-content p {
        font-size: 14px;
    }
}

/* ---------------------------
    About 
------------------------------*/
.w-about {
    background-color: #fff;
}

.w-about .about-media {
    text-align: center;
}

.w-about .about-content h3 {
    font-size: 34px;
    font-weight: 700;
    color: #24272c;
    margin-bottom: 1rem;
}

.w-about .about-content h3 span {
    color: #3F68B3;
}

.w-about .about-content p {
    font-size: 18px;
    color: #6c737d;
    margin: 0;
}

@media (max-width: 1199.98px) {
    .w-about .about-content p {
        font-size: 17px;
    }
}

@media (max-width: 991.98px) {
    .w-about .about-content h3 {
        font-size: 32px;
    }

    .w-about .about-content p {
        font-size: 16px;
    }
}

@media (max-width: 767.98px) {
    .w-about .about-content h3 {
        font-size: 30px;
    }

    .w-about .about-media img {
        max-width: 40%;
    }
}

@media (max-width: 575.98px) {
    .w-about .about-content h3 {
        font-size: 28px;
        margin-bottom: 0.75rem;
    }

    .w-about .about-media img {
        max-width: 50%;
    }
}

@media (max-width: 399.98px) {
    .w-about .about-content h3 {
        font-size: 26px;
        margin-bottom: 0.625rem;
    }

    .w-about .about-content p {
        font-size: 14px;
    }
}

@media (max-width: 349.98px) {
    .w-about .about-content h3 {
        font-size: 24px;
    }
}

/* ---------------------------
    Features 
------------------------------*/
.w-features {
    position: relative;
    background: rgb(248, 248, 248) !important;
    background: linear-gradient(360deg, rgb(248, 248, 248) 0%, rgba(247, 247, 247, 0) 100%) !important;
    z-index: 1;
}

.w-features .features-card {
    padding: 1.5rem;
    height: 100%;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 1rem;
    transition: 0.3s;
}

.w-features .features-card.fb-1:hover {
    border-color: #1db2f3;
    box-shadow: 0 0 10px 0 rgba(29, 178, 243, 0.15);
}

.w-features .features-card.fb-2:hover {
    border-color: #ff8a23;
    box-shadow: 0 0 10px 0 rgba(255, 138, 35, 0.15);
}

.w-features .features-card.fb-3:hover {
    border-color: #ff4050;
    box-shadow: 0 0 10px 0 rgba(255, 64, 80, 0.15);
}

.w-features .features-card.fb-4:hover {
    border-color: #5748fa;
    box-shadow: 0 0 10px 0 rgba(87, 72, 250, 0.15);
}

.w-features .features-card.fb-5:hover {
    border-color: #00b364;
    box-shadow: 0 0 10px 0 rgba(0, 179, 100, 0.15);
}

.w-features .features-card.fb-6:hover {
    border-color: #b97a66;
    box-shadow: 0 0 10px 0 rgba(185, 122, 102, 0.15);
}

.w-features .features-card .features-card-body h3 {
    font-size: 18px;
    color: #24272c;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}

.w-features .features-card .features-card-body p {
    font-size: 14px;
    color: #6c737d;
    margin-bottom: 0;
}

.w-features .w-shape .shape-left {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.w-features .w-shape .shape-right {
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    z-index: -1;
}

@media (max-width: 1199.98px) {
    .w-features .features-card {
        padding: 1.25rem;
    }

    .w-features .features-card .features-card-body h3 {
        margin: 1.25rem 0 0.5rem;
    }
}

@media (max-width: 991.98px) {
    .w-features .features-card .features-card-body h3 {
        margin: 1rem 0 0.5rem;
    }
}

@media (max-width: 767.98px) {
    .w-features .features-card {
        padding: 1rem;
    }

    .w-features .w-shape {
        display: none;
    }
}

@media (max-width: 399.98px) {
    .w-features .features-card .features-card-body h3 {
        font-size: 17px;
        margin: 0.75rem 0 0.5rem;
    }
}

@media (max-width: 349.98px) {
    .w-features .features-card {
        padding: 0.75rem;
    }

    .w-features .features-card .features-card-body h3 {
        font-size: 16px;
    }

    .w-features .features-card .features-card-body p {
        font-size: 13px;
    }
}

/* ---------------------------
    Works 
------------------------------*/
.w-how-works {
    background: #eaf6ff;
    background: linear-gradient(180deg, #f3f6ff 0%, #fff 100%);
}

.w-how-works .work-list-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.w-how-works .work-list-container ul li {
    position: relative;
    margin-bottom: 1.25rem;
    padding-left: 4rem;
}

.w-how-works .work-list-container ul li:before {
    content: attr(data-slide);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(108, 115, 125, 0.3);
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    color: #6c737d;
    background-color: #fff;
    transition: 0.3s;
}

.w-how-works .work-list-container ul li:after {
    content: "";
    position: absolute;
    height: 100%;
    border: 1px dashed rgba(108, 115, 125, 0.3);
    left: 22.5px;
    top: 45px;
}

.w-how-works .work-list-container ul li:last-child::after {
    content: unset;
}

.w-how-works .work-list-container ul li h4 {
    font-size: 22px;
    font-weight: 700;
    color: #24272c;
    padding-top: 0.65rem;
    margin-bottom: 0.75rem;
    transition: 0.3s;
    cursor: pointer;
}

.w-how-works .work-list-container ul li p {
    font-size: 15px;
    color: #6c737d;
    margin: 0;
}

.w-how-works .work-list-container ul li.active:before {
    border-color: #3F68B3;
    color: #fff;
    background-color: #3F68B3;
}

.w-how-works .work-list-container ul li.active h4 {
    color: #3F68B3;
}

.w-how-works .swiper {
    position: relative;
    text-align: center;
}

.w-how-works .swiper .swiper-wrapper .swiper-slide .work-media {
    position: relative !important;
    /* background-image: url(../public/screen/mockup.png) !important; */
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center center !important;
}

.w-how-works .swiper .swiper-wrapper .swiper-slide .work-media img {
    position: relative !important;
    padding: 12px !important;
    z-index: -1 !important;
}

@media (max-width: 1199.98px) {
    .w-how-works .work-list-container ul li h4 {
        font-size: 20px;
    }
}

@media (max-width: 991.98px) {
    .w-how-works .work-list-container ul li h4 {
        font-size: 19px;
    }
}

@media (max-width: 767.98px) {
    .w-how-works .work-list-container ul li {
        margin-bottom: 1rem;
        padding-left: 3.5rem;
    }

    .w-how-works .work-list-container ul li h4 {
        font-size: 18px;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .w-how-works .work-list-container ul li {
        margin-bottom: 0.75rem;
        padding-left: 3.25rem;
    }

    .w-how-works .work-list-container ul li::before {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .w-how-works .work-list-container ul li::after {
        left: 20px;
        top: 40px;
    }

    .w-how-works .work-list-container ul li h4 {
        padding-top: 0.45rem;
        margin-bottom: 0.35rem;
    }
}

@media (max-width: 399.98px) {
    .w-how-works .work-list-container ul li {
        padding-left: 3rem;
    }

    .w-how-works .work-list-container ul li::before {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .w-how-works .work-list-container ul li::after {
        left: 17px;
        top: 35px;
    }

    .w-how-works .work-list-container ul li h4 {
        font-size: 17px;
        padding-top: 0.35rem;
        margin-bottom: 0.25rem;
    }

    .w-how-works .work-list-container ul li p {
        font-size: 14px;
    }
}

@media (max-width: 349.98px) {
    .w-how-works .work-list-container ul li h4 {
        font-size: 16px;
    }
}

/* ---------------------------
    Step 
------------------------------*/
.w-step {
    position: relative;
    background: #fafdff;
    z-index: 1;
}

.w-step .step {
    position: relative;
}

.w-step .step::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}

.w-step .step.step-1::before {
    background-image: url(../public/step/shape-1.svg);
}

.w-step .step.step-1 .step-box {
    border-color: #1db2f3;
}

.w-step .step.step-1 .step-box span {
    color: #1db2f3;
}

.w-step .step.step-2::before {
    background-image: url(../public/step/shape-2.svg);
}

.w-step .step.step-2 .step-box {
    border-color: #5748fa;
}

.w-step .step.step-2 .step-box span {
    color: #5748fa;
}

.w-step .step.step-3::before {
    background-image: url(../public/step/shape-3.svg);
}

.w-step .step.step-3 .step-box {
    border-color: #ff4050;
}

.w-step .step.step-3 .step-box span {
    color: #ff4050;
}

.w-step .step-box {
    position: relative;
    padding: 3.5rem 2rem;
    background-color: #fff;
    border-radius: 50%;
    width: 350px;
    height: 350px;
    text-align: center;
    border: 3px solid rgba(108, 115, 125, 0.3);
    margin: 0 auto 20px;
}

.w-step .step-box span {
    display: block;
    font-size: 40px;
    font-weight: 800;
    line-height: normal;
    color: #24272c;
    margin-bottom: 1rem;
}

.w-step .step-box h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    color: #24272c;
    margin-bottom: 1.25rem;
}

.w-step .step-box p {
    font-size: 14px;
    font-weight: 400;
    color: #6c737d;
    margin: 0;
}

@media (max-width: 1399.98px) {
    .w-step .step::before {
        content: "";
        width: 370px;
        height: 370px;
    }

    .w-step .step .step-box {
        padding: 2rem 2.5rem;
        width: 320px;
        height: 320px;
    }

    .w-step .step .step-box h3,
    .w-step .step .step-box span {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 1199.98px) {
    .w-step .step::before {
        content: unset;
    }

    .w-step .step .step-box {
        padding: 1.25rem;
        width: auto;
        height: 100%;
        border-radius: 1rem;
        border-width: 2px;
    }

    .w-step .step .step-box span {
        font-size: 34px;
    }
}

@media (max-width: 991.98px) {
    .w-step .step .step-box span {
        font-size: 32px;
    }
}

@media (max-width: 767.98px) {
    .w-step .step .step-box {
        padding: 1rem;
    }

    .w-step .step .step-box span {
        font-size: 30px;
    }
}

@media (max-width: 575.98px) {
    .w-step .step .step-box {
        border-width: 1px;
        height: auto;
        margin: 0;
    }

    .w-step .step .step-box span {
        font-size: 28px;
    }
}

@media (max-width: 399.98px) {
    .w-step .step .step-box span {
        font-size: 26px;
    }

    .w-step .step .step-box h3 {
        font-size: 17px;
    }
}

@media (max-width: 349.98px) {
    .w-step .step .step-box span {
        font-size: 24px;
    }
}

/* ---------------------------
    Screen 
------------------------------*/
.w-screen {
    overflow: hidden;
    background-color: #fff;
}

.w-screen .swiper {
    padding: 20px 0;
}

.w-screen .swiper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../public/screen/mockup.png) no-repeat;
    background-size: cover;
    width: 288px;
    height: 586px;
    margin: 0 auto;
    z-index: 3;
}

.w-screen .swiper .swiper-wrapper .swiper-slide {
    text-align: center;
    opacity: 0.6;
    transform: scale(0.7);
    transition: 0.3s;
}

.w-screen .swiper .swiper-wrapper .swiper-slide.swiper-slide-prev,
.w-screen .swiper .swiper-wrapper .swiper-slide.swiper-slide-next {
    transform: scale(0.8) !important;
    opacity: 0.8 !important;
}

.w-screen .swiper .swiper-wrapper .swiper-slide.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 1399.98px) {
    .w-screen .swiper {
        padding: 14px 0;
    }

    .w-screen .swiper::before {
        width: 247px !important;
        height: 504px !important;
    }

    .w-screen .swiper .swiper-wrapper .swiper-slide.swiper-slide-active {
        opacity: 1;
        transform: scale(0.860);
    }
}

@media (max-width: 1199.98px) {
    .w-screen .swiper {
        padding: 20px 0;
    }

    .w-screen .swiper::before {
        width: 288px;
        height: 586px;
    }

    .w-screen .swiper .swiper-wrapper .swiper-slide.swiper-slide-active {
        opacity: 1;
        transform: scale(0.960);
    }
}

@media (max-width: 991.98px) {
    .w-screen .swiper {
        padding: 14px 0;
    }

    .w-screen .swiper::before {
        width: 257px;
        height: 524px;
    }
}

@media (max-width: 767.98px) {
    .w-screen .swiper {
        padding: 10px 0;
    }

    /* .w-screen .swiper::before {
        width: 226px;
        height: 460px;
   } */
    .w-screen .swiper::before {
        width: 278px !important;
        height: 565px !important;
    }
}

@media (max-width: 575.98px) {
    .w-screen .swiper::before {
        width: 278px !important;
        height: 565px !important;
    }
}

@media (max-width: 319.98px) {
    .w-screen .swiper::before {
        display: none;
    }
}

/* ---------------------------
    Review 
------------------------------*/
.w-review {
    position: relative;
    background-color: #fff;
    z-index: 1;
}

.w-review .review-content {
    border: 1px solid rgba(118, 118, 128, 0.12);
    background-color: #fff;
    border-radius: 1rem;
    padding: 1.25rem;
    height: 100%;
}

.w-review .review-content .review-star {
    margin-bottom: 0.5rem;
}

.w-review .review-content .review-star i {
    color: #d6d7d9;
    font-size: 26px;
    margin-right: 0.25rem;
}

.w-review .review-content .review-star i.fill {
    color: #febb36;
}

.w-review .review-content h4 {
    display: -webkit-box;
    font-size: 18px;
    line-height: normal;
    font-weight: 700;
    color: #24272c;
    margin-bottom: 0.5rem;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.w-review .review-content p {
    display: -webkit-box;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 1rem;
    color: #6c737d;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.w-review .review-content .review-user {
    display: flex;
    align-items: center;
}

.w-review .review-content .review-user .review-user-details {
    margin-left: 0.75rem;
}

.w-review .review-content .review-user .review-user-details h4 {
    font-size: 18px;
    line-height: normal;
    font-weight: 700;
    color: #111;
    margin-bottom: 0;
}

.w-review .review-content .review-user .review-user-details span {
    font-size: 14px;
    font-weight: 500;
    color: #6c737d;
}

.w-review .w-shape .shape-left {
    position: absolute;
    top: 100px;
    left: 90px;
    z-index: -1;
}

.w-review .w-shape .shape-right {
    position: absolute;
    bottom: 50px;
    right: 90px;
    z-index: -1;
}

@media (max-width: 1599.98px) {
    .w-review .w-shape .shape-left {
        top: 130px;
        left: 1rem;
    }

    .w-review .w-shape .shape-right {
        bottom: 1rem;
        right: 1rem;
    }
}

@media (max-width: 1199.98px) {
    .w-review .w-shape {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .w-review .review-content .review-star i {
        font-size: 24px;
    }
}

@media (max-width: 767.98px) {
    .w-review .review-content .review-star i {
        font-size: 22px;
    }

    .w-review .review-content h4 {
        font-size: 17px;
    }

    .w-review .review-content .review-user img {
        width: 50px;
        height: 50px;
    }

    .w-review .review-content .review-user .review-user-details h4 {
        font-size: 17px;
    }
}

@media (max-width: 575.98px) {
    .w-review .review-content {
        padding: 1rem;
    }

    .w-review .review-content h4 {
        font-size: 16px;
    }

    .w-review .review-content .review-star i {
        font-size: 20px;
    }

    .w-review .review-content .review-user img {
        width: 45px;
        height: 45px;
    }

    .w-review .review-content .review-user .review-user-details h4 {
        font-size: 16px;
    }
}

@media (max-width: 399.98px) {
    .w-review .review-content h4 {
        font-size: 15px;
    }

    .w-review .review-content .review-user img {
        width: 40px;
        height: 40px;
    }

    .w-review .review-content .review-user .review-user-details h4 {
        font-size: 15px;
    }
}

@media (max-width: 349.98px) {
    .w-review .review-content h4 {
        font-size: 14px;
    }

    .w-review .review-content p {
        font-size: 13px;
    }

    .w-review .review-content .review-user .review-user-details h4 {
        font-size: 14px;
    }

    .w-review .review-content .review-user .review-user-details p {
        font-size: 13px;
    }
}

/* ---------------------------
    Downloads 
------------------------------*/
.w-download {
    background-color: #fff;
}

.w-download .download-box {
    position: relative;
    padding: 90px 70px;
    border-radius: 1rem;
    background-image: url(../public/download/bg.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.w-download .download-box .download-content {
    text-align: center;
}

.w-download .download-box .download-content h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #24272c;
}

.w-download .download-box .download-content p {
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 1.75rem;
    color: #6c737d;
}

.w-download .download-box .download-content .download-app-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.w-download .download-box .shape .shape-1 {
    position: absolute;
    top: 40px;
    left: 180px;
}

.w-download .download-box .shape .shape-2 {
    position: absolute;
    top: 170px;
    left: 70px;
}

.w-download .download-box .shape .shape-3 {
    position: absolute;
    bottom: 30px;
    left: 225px;
}

.w-download .download-box .shape .shape-4 {
    position: absolute;
    top: 50px;
    right: 180px;
}

.w-download .download-box .shape .shape-5 {
    position: absolute;
    top: 170px;
    right: 70px;
}

.w-download .download-box .shape .shape-6 {
    position: absolute;
    bottom: 40px;
    right: 195px;
}

@media (max-width: 1199.98px) {
    .w-download .download-box {
        padding: 80px 60px;
    }

    .w-download .download-box .shape .shape-1 {
        left: 160px;
    }

    .w-download .download-box .shape .shape-3 {
        left: 180px;
    }

    .w-download .download-box .shape .shape-4 {
        top: 40px;
        right: 150px;
    }
}

@media (max-width: 991.98px) {
    .w-download .download-box {
        padding: 70px 50px;
    }

    .w-download .download-box .shape img {
        width: 60px;
    }

    .w-download .download-box .shape .shape-1 {
        left: 110px;
    }

    .w-download .download-box .shape .shape-2 {
        left: 10px;
        top: 190px;
    }

    .w-download .download-box .shape .shape-3 {
        bottom: 15px;
        left: 115px;
    }

    .w-download .download-box .shape .shape-4 {
        right: 110px;
    }

    .w-download .download-box .shape .shape-5 {
        right: 10px;
        top: 190px;
    }

    .w-download .download-box .shape .shape-6 {
        bottom: 15px;
        right: 115px;
    }
}

@media (max-width: 767.98px) {
    .w-download .download-box {
        padding: 70px 35px;
    }

    .w-download .download-box .download-content h2 {
        font-size: 30px;
        margin-bottom: 0.5rem;
    }

    .w-download .download-box .download-content p {
        margin-bottom: 1.5rem;
    }

    .w-download .download-box .shape {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .w-download .download-box {
        padding: 1.25rem;
    }

    .w-download .download-box .download-content h2 {
        font-size: 28px;
    }

    .w-download .download-box .download-content p {
        margin-bottom: 1.25rem;
    }

    .w-download .download-box .download-content .download-app-btn a {
        margin: 0.5rem;
    }

    .w-download .download-box .shape {
        display: none;
    }
}

@media (max-width: 399.98px) {
    .w-download .download-box {
        padding: 1rem;
    }

    .w-download .download-box .download-content h2 {
        font-size: 26px;
    }

    .w-download .download-box .download-content p {
        font-size: 14px;
        margin-bottom: 1rem;
    }
}

@media (max-width: 349.98px) {
    .w-download .download-box .download-content h2 {
        font-size: 24px;
    }

    .w-download .download-box .download-content p {
        font-size: 14px;
    }

    .w-download .download-box .download-content .download-app-btn a {
        margin: 0.25rem;
    }
}

.w-mathscanner section {
    padding: 50px 0;
    scroll-margin-top: 80px;
}

.w-mathscanner .title {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
}

.w-mathscanner .title h2 {
    font-size: 34px;
    font-weight: 700;
    color: #24272c;
    margin: 0;
}

.w-mathscanner .title h2 span {
    color: #3F68B3;
}

.w-mathscanner .title p {
    font-size: 16px;
    color: #6c737d;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .w-mathscanner section {
        padding: 45px 0;
    }

    .w-mathscanner .title {
        margin-bottom: 38px;
    }

    .w-mathscanner .title h2 {
        font-size: 32px;
    }

    .w-mathscanner .title p br {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .w-mathscanner section {
        padding: 40px 0;
    }

    .w-mathscanner .title {
        margin-bottom: 36px;
    }

    .w-mathscanner .title h2 {
        font-size: 30px;
    }

    .w-mathscanner .title p {
        font-size: 17px;
    }
}

@media (max-width: 575.98px) {
    .w-mathscanner section {
        padding: 35px 0;
    }

    .w-mathscanner .title {
        margin-bottom: 34px;
    }

    .w-mathscanner .title h2 {
        font-size: 28px;
    }

    .w-mathscanner .title p {
        font-size: 16px;
    }
}

@media (max-width: 399.98px) {
    .w-mathscanner section {
        padding: 30px 0;
    }

    .w-mathscanner .title {
        margin-bottom: 30px;
    }

    .w-mathscanner .title h2 {
        font-size: 26px;
    }

    .w-mathscanner .title p {
        font-size: 15px;
    }
}

@media (max-width: 319.98px) {
    .w-mathscanner section {
        padding: 25px 0;
    }

    .w-mathscanner .title {
        margin-bottom: 25px;
    }

    .w-mathscanner .title h2 {
        font-size: 24px;
    }

    .w-mathscanner .title p {
        font-size: 14px;
    }
}

/* ---------------------------
    Header 
------------------------------*/
.w-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    padding: 0.625rem 0;
    z-index: 1000;
    transform: translateY(0);
    transition: all 0.3s ease-out;
}

.w-header .navbar {
    background-color: #1B4188;
    padding: 1rem;
    border-radius: .625rem;
    transition: all 0.3s ease-out;
}

.w-header .navbar .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
}

.w-header .navbar .navbar-brand img {
    display: block;
    height: 60px;
    border-radius: 0.625rem;
    transition: all 0.3s ease-out;
}

.w-header .navbar .navbar-brand span {
    font-size: 22px;
    font-weight: 700;
    line-height: normal;
    color: #fff;
    margin-left: 1rem;
}

.w-header .navbar .navbar-nav .nav-item a {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    margin: 0 1rem;
    padding: 0 !important;
    transition: color 200ms linear !important;
}

.w-header .navbar .navbar-nav .nav-item a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background-color: #fff;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: opacity 200ms ease, transform 200ms ease;
}

.w-header .navbar .navbar-nav .nav-item a.active::before {
    opacity: 1;
    transform: scaleX(1);
}

.w-header .navbar .navbar-nav .nav-item a.active {
    color: #fff;
}

.w-header .navbar-appbtn {
    display: flex;
    align-items: center;
}

.w-header .navbar-appbtn a {
    display: block;
}

.w-header.scroll-on {
    /* background-color: #fff;
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.0509803922); */
    padding: 0;
}

.w-header.scroll-on .navbar {
    padding: .5rem 1rem;
}

.navbar-toggler-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    border-radius: .325rem;
}

.navbar-toggler-icon i {
    font-size: 20px;
    color: #fff;
}

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: unset;
}

@media (max-width: 1399.98px) {
    .w-header .navbar .navbar-brand span {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .w-header .navbar {
        padding: .75rem;
    }

    .w-header .navbar .navbar-brand span {
        font-size: 20px;
        display: inline-block;
    }

    .w-header .navbar .navbar-brand img {
        height: 50px;
    }

    .w-header .navbar .navbar-collapse {
        margin-top: 0.625rem;
    }

    .w-header .navbar .navbar-collapse .navbar-nav {
        background-color: #fff;
        padding: 1rem;
        border-radius: 1rem;
    }

    .w-header .navbar .navbar-collapse .navbar-nav .nav-item {
        display: block;
        width: 100%;
    }

    .w-header .navbar .navbar-collapse .navbar-nav a {
        color: #24272c;
        text-align: left;
        width: 100%;
        padding: 0.5rem 0 !important;
        margin: 0;
    }

    .w-header .navbar .navbar-collapse .navbar-nav a.active {
        color: #1B4188;
    }

    .w-header .navbar .navbar-appbtn {
        display: none;
    }

}

@media (max-width: 767.98px) {
    .w-header .navbar .navbar-brand span {
        font-size: 19px;
    }
}

@media (max-width: 575.98px) {
    .w-header .navbar .navbar-brand span {
        font-size: 18px;
    }

    .w-header .navbar .navbar-brand img {
        height: 45px;
    }
}

@media (max-width: 399.98px) {
    .w-header .navbar .navbar-brand span {
        font-size: 17px;
        margin-left: 0.75rem;
    }
}

/* ---------------------------
    Footer 
------------------------------*/
.w-footer {
    background-color: #0c101b;
    padding-top: 50px;
}

.w-footer .footer-content h3 {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.625rem;
}

.w-footer .footer-content p {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 1rem;
}

.w-footer .footer-content ul {
    display: flex;
    padding: 0;
    list-style: none;
    margin: 0;
}

.w-footer .footer-content ul li {
    display: flex;
    align-items: center;
    margin-right: 0.75rem;
}

.w-footer .footer-content ul li:last-child {
    margin-right: 0;
}

.w-footer .footer-content ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.w-footer .footer-content ul li a:hover {
    border: transparent;
}

.w-footer .footer-content ul li a:hover.ins {
    background: linear-gradient(49.12deg, #fd5 6.62%, #ff543e 50.06%, #c837ab 93.5%);
}

.w-footer .footer-content ul li a:hover.pin {
    background: #e60023;
}

.w-footer .footer-content ul li a:hover.fb {
    background: #0b69ed;
}

.w-footer .footer-content ul li a:hover.yt {
    background: #f00;
}

.w-footer .footer-content ul li a:hover.x {
    background: #fff;
}

.w-footer .footer-content ul li a:hover.x img {
    filter: brightness(0.1);
}

.w-footer .footer-content ul li a:hover.tik {
    background: #000;
}

.w-footer .footer-app-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.w-footer .copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #404a63;
    margin: 1.25rem 0;
    padding-top: 1.25rem;
}

.w-footer .copyright ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.w-footer .copyright ul li {
    margin-right: 1rem;
    padding-right: 1rem;
    border-right: 1px solid #404a63;
}

.w-footer .copyright ul li:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

.w-footer .copyright ul li a {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    transition: 0.3s;
}

.w-footer .copyright ul li a:hover {
    color: #3F68B3;
}

.w-footer .copyright .footer-copyright {
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

@media (max-width: 991.98px) {
    .w-footer {
        padding-top: 45px;
    }

    .w-footer .footer-content h3 {
        font-size: 28px;
    }

    .w-footer .copyright {
        margin-top: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .w-footer .copyright ul {
        margin-bottom: 0.75rem;
    }

    .w-footer .copyright ul li a {
        font-size: 17px;
    }

    .w-footer .copyright .footer-copyright {
        font-size: 17px;
    }
}

@media (max-width: 767.98px) {
    .w-footer {
        padding-top: 40px;
        text-align: center;
    }

    .w-footer .footer-content h3 {
        font-size: 26px;
    }

    .w-footer .footer-content ul {
        justify-content: center;
        margin-bottom: 1rem;
    }

    .w-footer .footer-content ul li a {
        width: 42px;
        height: 42px;
    }

    .w-footer .footer-app-btn {
        justify-content: center;
    }

    .w-footer .footer-app-btn a img {
        height: 55px;
    }

    .w-footer .copyright {
        margin-top: 0.75rem;
    }

    .w-footer .copyright ul li a {
        font-size: 16px;
    }

    .w-footer .copyright .footer-copyright {
        font-size: 16px;
    }
}

@media (max-width: 575.98px) {
    .w-footer {
        padding-top: 35px;
    }

    .w-footer .footer-content h3 {
        font-size: 24px;
    }

    .w-footer .footer-content p {
        font-size: 15px;
    }

    .w-footer .footer-content ul li a {
        width: 40px;
        height: 40px;
    }

    .w-footer .footer-content ul li a img {
        width: 19px;
    }

    .w-footer .copyright {
        margin: 1rem 0;
        padding-top: 1rem;
    }

    .w-footer .copyright ul li a {
        font-size: 15px;
    }

    .w-footer .copyright .footer-copyright {
        font-size: 15px;
    }
}

@media (max-width: 399.98px) {
    .w-footer {
        padding-top: 30px;
    }

    .w-footer .footer-content h3 {
        font-size: 22px;
    }

    .w-footer .footer-content ul li a {
        width: 38px;
        height: 38px;
    }

    .w-footer .footer-content ul li a img {
        width: 18px;
    }

    .w-footer .footer-app-btn a img {
        height: 50px;
    }
}

@media (max-width: 349.98px) {
    .w-footer .footer-content h3 {
        font-size: 20px;
    }

    .w-footer .footer-content p {
        font-size: 14px;
    }

    .w-footer .copyright {
        margin: 0.75rem 0;
        padding-top: 0.75rem;
    }

    .w-footer .copyright ul li a {
        font-size: 14px;
    }

    .w-footer .copyright .footer-copyright {
        font-size: 14px;
    }
}

.stepslider-wrapper {
    position: relative;
    text-align: center;
}

/* FIXED MOCKUP */
.stepslider-mockup {
    position: absolute;
    inset: 0;
    background: url("../public/screen/mockup.png") no-repeat center;
    background-size: contain;
    pointer-events: none;
    z-index: 3;
}

/* SLIDER IMAGES */
.stepslider .swiper-slide img {
    padding: 12px;
    position: relative;
    z-index: 1;
}

/* Add these styles to your existing CSS */
.collapse:not(.show) {
    display: none;
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        transition: all 0.35s ease;
    }

    .navbar-collapse.collapsing {
        position: relative;
        height: 0;
        padding-bottom: 0;
        overflow: hidden;
    }

    .navbar-collapse.show {
        height: auto;
    }
}

section {
    scroll-margin-top: 0px;
    /* not needed for center logic but safe */
}


/* ---------------------------
    Dashboard 
------------------------------*/

/* Section Cards */
.vv-dashboard .section-card {
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}

.vv-dashboard .info-section {
    background-color: rgba(31, 217, 163, 0.03) !important;
    border-color: rgba(31, 217, 163, 0.5) !important;
}

html.dark .vv-dashboard .info-section {
    background-color: rgba(31, 217, 163, 0.1) !important;
    border-color: rgba(31, 217, 163, 0.3) !important;
}

.vv-dashboard .backup-section {
    background-color: #FFF0F4 !important;
    border-color: #FFD1DF !important;
}

html.dark .vv-dashboard .backup-section {
    background-color: rgba(255, 107, 149, 0.1) !important;
    border-color: rgba(255, 107, 149, 0.3) !important;
}

.vv-dashboard .community-section {
    background-color: #FFF6E8 !important;
    border-color: #FFE5B5 !important;
}

html.dark .vv-dashboard .community-section {
    background-color: rgba(255, 193, 102, 0.1) !important;
    border-color: rgba(255, 193, 102, 0.3) !important;
}

.vv-dashboard .section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark);
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
}

.vv-dashboard .section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 24px;
    margin-right: 10px;
    color: var(--gray);
}

/* Counters */
.vv-dashboard .counter-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.vv-dashboard .counter-card .card-body {
    padding: 0 !important;
    margin-top: 1rem !important;
}

.vv-dashboard .counter-card .counter {
    padding: 1.5rem;
    border-radius: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    min-height: 110px;
    transition: transform 0.2s;
}

.vv-dashboard .counter-card .counter:hover {
    transform: translateY(-3px);
}

.vv-dashboard .counter-content {
    z-index: 1;
    margin-left: 0 !important;
    padding-left: 1rem;
}

.vv-dashboard .counter-content h5 {
    color: #fff !important;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    position: relative;
}

.vv-dashboard .counter-content h5::before {
    content: "●";
    color: #fff;
    font-size: 22px;
    position: absolute;
    left: -24px;
    top: 2px;
}

.vv-dashboard .counter-content p {
    color: #fff !important;
    /* font-size: 26px; */
    font-weight: 700;
    margin-bottom: 0;
    font-size: 20px;
    margin-bottom: 0;
}

.vv-dashboard .counter-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 34px;
    z-index: 5;
    position: absolute;
    top: 50%;
    right: 0.5rem;
}

/* Watermark Icon */
.vv-dashboard .counter-watermark {
    position: absolute;
    right: 0;
    bottom: -15px;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
    transform: rotate(-15deg);
}

.vv-dashboard .counter-watermark i {
    font-size: 110px;
    color: #fff;
}

/* Colors */
.vv-dashboard .green-gradient {
    background: linear-gradient(135deg, #20E2A8 0%, #1CD69D 100%);
    /* box-shadow: 0 4px 15px rgba(32, 226, 168, 0.3); */
}

.vv-dashboard .pink-gradient {
    background: linear-gradient(135deg, #FF6B95 0%, #FF5B89 100%);
    /* box-shadow: 0 4px 15px rgba(255, 107, 149, 0.3); */
}

.vv-dashboard .orange-gradient {
    background: linear-gradient(135deg, #FFC166 0%, #FFB15C 100%);
    /* box-shadow: 0 4px 15px rgba(255, 193, 102, 0.3); */
}

.vv-dashboard .purple-gradient {
    background: linear-gradient(135deg, #D66AFF 0%, #C950FF 100%);
    /* box-shadow: 0 4px 15px rgba(214, 106, 255, 0.3); */
}

.vv-dashboard .blue-gradient {
    background: linear-gradient(135deg, #6A9BF4 0%, #5A8BF4 100%);
    /* box-shadow: 0 4px 15px rgba(106, 155, 244, 0.3); */
}

.vv-dashboard .blue-solid {
    background-color: #25A6F2;
    /* box-shadow: 0 4px 15px rgba(37, 166, 242, 0.3); */
}

.vv-dashboard .blue-light-solid {
    background-color: #6A9BF4;
    /* box-shadow: 0 4px 15px rgba(106, 155, 244, 0.3); */
}

.vv-dashboard .purple-solid {
    background-color: #A359FF;
    /* box-shadow: 0 4px 15px rgba(163, 89, 255, 0.3); */
}

.vv-dashboard .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--white);
    background-clip: border-box;
    border: 1px solid var(--border);
    border-radius: 0rem;
}

.vv-dashboard .card-body {
    flex: 1 1 auto;
    padding: 1.35rem 1.5rem;
}

/* ---------------------------
    ContactUs 
------------------------------*/
.contactus {
    position: relative;
    height: auto;
    width: 100%;
    padding-top: 125px !important;
    z-index: 1;
}

.contactus .cu-heading {
    text-align: center;
}

.contactus .cu-heading h1 {
    font-size: 34px;
    font-weight: 700;
    color: #24272c;
    margin-bottom: 0.5rem;
}

.contactus .cu-heading h1 span {
    color: #3F68B3;
}

.contactus .cu-heading p {
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    color: #6c737d;
    margin-bottom: 2.75rem;
}

.contactus .contactus-box {
    position: relative;
    background-color: #fff;
    border-radius: 1.25rem;
    padding: 3rem;
    box-shadow: 0 10px 22px 3px rgba(125, 143, 178, .16);
    z-index: 1;
}

.contactus .contactus-box .cub-media {
    text-align: center;
}

.contactus .contactus-box .cub-form .form-control {
    font-size: 1rem;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
}

.contactus .contactus-box .cub-form .form-control::placeholder {
    color: #a9b2bd;
}

.contactus .contactus-box .cub-form .form-control:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: unset;
}

.contactus .contactus-box .cub-form .btn {
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
}

.contactus .contactus-box .cub-form .btn.btn-primary {
    color: #fff;
    background-color: #3F68B3;
    border-color: #3F68B3;
}

.contactus .contactus-box .cub-form .btn:focus {
    box-shadow: unset;
}

.contactus .contactus-box .cub-form .cub-policy {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #6c737d;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.contactus .contactus-box .cub-form .form-error {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    background-color: rgba(253, 21, 21, .1);
    color: #fd1515;
    margin-top: 0.5rem;
    margin-bottom: 0;
    border-radius: 0.425rem;
    padding: 2px 10px;
}

.contactus .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dee2e6;
    border-radius: .75rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.contactus .form-control-lg {
    padding: .75rem 1rem;
    font-size: 1rem;
    border-radius: .75rem;
}

.contactus .form-control:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: unset;
}

@media (max-width: 1399.98px) {
    .contactus .cu-heading p {
        margin-bottom: 2.5rem;
    }

    .contactus .contactus-box {
        padding: 2.25rem;
    }
}

@media (max-width: 1199.98px) {
    .contactus .cu-heading p {
        margin-bottom: 2.25rem;
    }

    .contactus .contactus-box {
        padding: 2rem;
    }

    .contactus .contactus-box .cub-media img {
        max-width: 90%;
    }

    .contactus .contactus-box .cub-form .cub-policy {
        margin-top: 0.5rem;
    }
}

@media (max-width: 991.98px) {
    .contactus {
        padding-top: 120px !important;
    }

    .contactus .cu-heading h1 {
        font-size: 32px;
    }

    .contactus .cu-heading p {
        margin-bottom: 2rem;
    }

    .contactus .contactus-box {
        padding: 1.75rem;
    }

    .contactus .contactus-box .cub-media img {
        max-width: 80%;
        margin-bottom: 2rem;
    }
}

@media (max-width: 767.98px) {
    .contactus {
        padding-top: 110px !important;
    }

    .contactus .cu-heading h1 {
        font-size: 30px;
    }

    .contactus .cu-heading p {
        font-size: 17px;
        margin-bottom: 1.75rem;
    }

    .contactus .contactus-box {
        padding: 1.5rem;
    }

    .contactus .contactus-box .cub-media img {
        margin-bottom: 1.75rem;
    }

    .contactus .contactus-box .cub-form .form-control {
        padding: 0.6rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .contactus {
        padding-top: 100px !important;
    }

    .contactus .cu-heading h1 {
        font-size: 28px;
    }

    .contactus .cu-heading p {
        font-size: 16px;
        margin-bottom: 1.5rem;
    }

    .contactus .contactus-box {
        padding: 1.25rem;
    }

    .contactus .contactus-box .cub-media img {
        margin-bottom: 1.5rem;
    }

    .contactus .contactus-box .cub-form .form-control {
        padding: 0.5rem 1rem;
    }

    .contactus .contactus-box .cub-form .cub-policy {
        margin-top: 0.25rem;
    }
}

@media (max-width: 399.98px) {
    .contactus .cu-heading h1 {
        font-size: 26px;
    }

    .contactus .cu-heading p {
        font-size: 15px;
        margin-bottom: 1.25rem;
    }

    .contactus .contactus-box {
        padding: 1rem;
    }

    .contactus .contactus-box .cub-media img {
        max-width: 70%;
        margin: 1.25rem 0;
    }

    .contactus .contactus-box .cub-form .cub-policy {
        margin-top: 0;
    }
}

@media (max-width: 349.98px) {
    .contactus .cu-heading h1 {
        font-size: 24px;
    }

    .contactus .cu-heading p {
        font-size: 14px;
        margin-bottom: 1rem;
    }

    .contactus .contactus-box {
        padding: 0.75rem;
    }

    .contactus .contactus-box .cub-media img {
        max-width: 80%;
        margin: 1rem 0;
    }
}

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    background-color: #3F68B3;
    color: #fff;
    border-radius: 0.625rem;
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    z-index: 1000;
    text-decoration: none;
    transition: all 0.3s ease;
    display: none;
}


.wv-175 {
    width: 175px;
    min-width: 175px;
    max-width: 175px;
}

.ck-editor__editable_inline:not(.ck-comment__input *) {
    height: 250px;
    overflow-y: auto;

}

.ck-editor__editable_inline:not(.ck-comment__input *) {
    min-height: 200px;
}


/* Question Card */
.question-card {
    /* background: white; */
    border-radius: 12px;
    padding: 16px;
}

/* Question Text */
.math-question {
    font-size: 15px;
    line-height: 1.7;
    /* color: #2c2c2c; */
}

/* Answer Badge */
.answer-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 20px;
    cursor: default;
    display: inline-flex;
    align-items: center;
}

/* Image Preview */
.image-preview {
    margin-top: 8px;
}

.preview-thumb {
    position: relative;
    display: inline-block;
}

.preview-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

/* Hover Zoom Effect */
.preview-thumb:hover img {
    transform: scale(1.05);
}

/* Overlay Icon */
.preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    border-radius: 10px;
    transition: opacity 0.2s ease;
}

.preview-thumb:hover .preview-overlay {
    opacity: 1;
}

/* Verified Answer Pill */
.verified-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    background: rgba(25, 135, 84, 0.12);
    /* soft green */
    color: #198754;
    backdrop-filter: blur(6px);
    cursor: default;
    /* box-shadow: 0 2px 6px rgba(25, 135, 84, 0.15); */
    transition: all 0.25s ease;
}

/* Icon */
.verified-pill i {
    font-size: 18px;
}

/* Subtle hover delight */
.verified-pill:hover {
    background: rgba(25, 135, 84, 0.18);
    /* transform: translateY(-1px); */
}

.dashboard-wrapper {
    padding: 10px;
}

.section-card {
    border-radius: 14px;
    margin-bottom: 25px;
    border: 1px solid transparent;
}

.section-card.info {
    background: #f2fbf8;
    border-color: #3fe0b0;
}

.section-card.backup {
    background: #fff7f7;
    border-color: #ff6b8a;
}

.section-card.community {
    background: #fffaf2;
    border-color: #ffb84d;
}

.section-title {
    font-weight: 600;
    margin-bottom: 20px;
}

.stat-card {
    position: relative;
    height: 110px;
    border-radius: 14px;
    padding: 18px;
    color: #fff;
    overflow: hidden;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.stat-content {
    z-index: 2;
    position: relative;
}

.stat-content h6 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.stat-content h4 {
    font-size: 22px;
    font-weight: 700;
}

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    margin-bottom: 8px;
}

.stat-icon {
    position: absolute;
    right: 15px;
    bottom: 10px;
    font-size: 58px;
    opacity: 0.18;
}

/* Gradient Colors */
.green {
    background: linear-gradient(135deg, #2de1a2, #1bcf90);
}

.pink {
    background: linear-gradient(135deg, #ff6aa2, #ff4f8b);
}

.orange {
    background: linear-gradient(135deg, #ffb65e, #ffa13d);
}

.hotpink {
    background: linear-gradient(135deg, #ff4db8, #ff2fa5);
}

.purple {
    background: linear-gradient(135deg, #d980fa, #c56cf0);
}

.blue {
    background: linear-gradient(135deg, #5f7cff, #4a63ff);
}

.sky {
    background: linear-gradient(135deg, #4ecbff, #38b6ff);
}

.violet {
    background: linear-gradient(135deg, #a66cff, #8e5bff);
}