@import "variable.css";

/* Fonts
======================================================*/
@font-face {
    font-family: 'NeueHaasGroteskText Pro Md';
    src: url('../fonts/NHaasGroteskTXPro-65Md.eot');
    src: url('../fonts/NHaasGroteskTXPro-65Md.eot?#iefix') format('embedded-opentype'), url('../fonts/NHaasGroteskTXPro-65Md.woff2') format('woff2'), url('../fonts/NHaasGroteskTXPro-65Md.woff') format('woff'), url('../fonts/NHaasGroteskTXPro-65Md.ttf') format('truetype'), url('../fonts/NHaasGroteskTXPro-65Md.svg#NHaasGroteskTXPro-65Md') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeueHaasGroteskText Pro';
    src: url('../fonts/NHaasGroteskTXPro-55Rg.eot');
    src: url('../fonts/NHaasGroteskTXPro-55Rg.eot?#iefix') format('embedded-opentype'), url('../fonts/NHaasGroteskTXPro-55Rg.woff2') format('woff2'), url('../fonts/NHaasGroteskTXPro-55Rg.woff') format('woff'), url('../fonts/NHaasGroteskTXPro-55Rg.ttf') format('truetype'), url('../fonts/NHaasGroteskTXPro-55Rg.svg#NHaasGroteskTXPro-55Rg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeueHaasGroteskText Pro';
    src: url('../fonts/NHaasGroteskTXPro-75Bd.eot');
    src: url('../fonts/NHaasGroteskTXPro-75Bd.eot?#iefix') format('embedded-opentype'), url('../fonts/NHaasGroteskTXPro-75Bd.woff2') format('woff2'), url('../fonts/NHaasGroteskTXPro-75Bd.woff') format('woff'), url('../fonts/NHaasGroteskTXPro-75Bd.ttf') format('truetype'), url('../fonts/NHaasGroteskTXPro-75Bd.svg#NHaasGroteskTXPro-75Bd') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Reset CSS
======================================================*/
*,
*:after,
*:before {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}

html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
}

body,
html {
    background: var(--bs-body-bg) none no-repeat scroll top center;
    background-size: contain;
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    font-weight: var(--bs-body-font-weight);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    padding-left: 270px;
    display: flex;
    flex-direction: column;
}

figure,
picture {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0px;
    overflow: hidden;
}

img {
    max-width: 100%;
    max-height: 100%;
    outline: none;
    border: none;
    height: auto;
    width: auto;
}

svg {
    max-width: 100%;
    height: auto;
}

.svg-white path {
    fill: white !important;
}

.absolute-div {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
}

.picture > img,
.picture > a > img {
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.object-fit {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .object-fit img {
        opacity: 0;
    }

strong, b, label {
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
    margin-bottom: 0px;
}

ul, ul li, ol, ol li {
    list-style: none;
    padding: 0px;
    margin: 0px;
    position: relative;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
    color: var(--bs-secondary);
    padding: 0px;
    margin: 0px;
    width: 100%;
}

h1, .h1 {
    font-size: var(--bs-font-size-h1);
    line-height: var(--bs-line-height-h1);
}

h2, .h2 {
    font-size: var(--bs-font-size-h2);
    line-height: var(--bs-line-height-h2);
}

h3, .h3 {
    font-size: var(--bs-font-size-h3);
    line-height: var(--bs-line-height-h3);
}

h4, .h4 {
    font-size: var(--bs-font-size-h4);
    line-height: var(--bs-line-height-h4);
}

h5, .h5 {
    font-size: var(--bs-font-size-h5);
    line-height: var(--bs-line-height-h5);
}

h6, .h6 {
    font-size: var(--bs-font-size-h6);
    line-height: var(--bs-line-height-h6);
}

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

a, .a {
    color: var(--bs-primary);
    display: inline-block;
    cursor: pointer;
}

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

p {
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    margin: 0 0 23px;
}

    p:empty {
        display: none;
    }

label {
    margin-bottom: 0px;
}

small, .small {
    font-size: var(--bs-small-font-size);
    line-height: var(--bs-small-line-height);
}

main {
    display: flex;
    flex: 1 1 auto !important;
}

section {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding: 0 var(--bs-gutter) var(--bs-gutter);
    min-height: 100%;
}

    section > .card,
    .tab-pane > .card {
        min-height: 100%;
    }

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

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

:hover, :visited, :active, :focus {
    outline: none !important;
}

:last-child:not(img):not(.icon):not(.modal-dialog):not(.sweet-alert):not(.margin-child),
:only-child:not(img):not(.icon):not(.modal-dialog):not(.sweet-alert):not(.margin-child) {
    margin-bottom: 0px !important;
}


/* Common Css
======================================================*/
.transition, ::before, ::after, img, svg, svg *, a, .a, input, textarea, button, select, option, .form-control, .icon, .button, .form-label,
.select2-selection__arrow, .select2-results__option, .daterangepicker .ranges ul li, .daterangepicker td.in-range, .daterangepicker .calendar-table thead th,
body a.cke_button, body a.cke_combo_button, .sweet-alert .sa-button-container button, .chat-user-item {
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.box-shadow {
    -webkit-box-shadow: 10px 7px 24px #EFEDE5;
    -moz-box-shadow: 10px 7px 24px #EFEDE5;
    box-shadow: 10px 7px 24px #EFEDE5;
}

.rounded-circle, .form-check .form-check-input[type="radio"]:after, .form-switch .form-check-input::after, .text-content ul:not(.gallery-block):not(.gallery-file) li:before,
.chat-main .user-image li:nth-child(3) ~ li {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.rounded, .dropdown-item, .alert {
    -webkit-border-radius: var(--bs-border-radius-xs) !important;
    -moz-border-radius: var(--bs-border-radius-xs) !important;
    border-radius: var(--bs-border-radius-xs) !important;
}

.rounded-sm, .card, .select2-dropdown, .dropdown-menu {
    -webkit-border-radius: var(--bs-border-radius-sm);
    -moz-border-radius: var(--bs-border-radius-sm);
    border-radius: var(--bs-border-radius-sm);
}

.rounded-md {
    -webkit-border-radius: var(--bs-border-radius-md);
    -moz-border-radius: var(--bs-border-radius-md);
    border-radius: var(--bs-border-radius-md);
}

.rounded-lg {
    -webkit-border-radius: var(--bs-border-radius-lg);
    -moz-border-radius: var(--bs-border-radius-lg);
    border-radius: var(--bs-border-radius-lg);
}

.rounded-0, .form-control, .form-check-input[type="checkbox"] {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.row {
    --bs-gutter-x: var(--bs-gutter);
    --bs-gutter-y: var(--bs-gutter);
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.small-container {
    max-width: 890px;
    margin-left: auto;
    margin-right: auto;
}

.border {
    border: 1px solid var(--bs-border-color) !important;
}

.spinner-loader-outer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11111;
    background: rgba(255,255,255,0.5);
}

#spinner-loader {
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-border {
    width: 50px;
    height: 50px;
}

/* Form Control
======================================================*/
.card {
    width: 100%;
    border-color: var(--bs-border-color);
    -webkit-box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);
    -moz-box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);
    box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);
}

.card-head {
    padding: var(--bs-gutter) var(--bs-gutter) 0;
}

.card-body {
    padding: var(--bs-gutter);
}

    .card-body.custom-scroll {
        padding-right: 0px !important;
    }

        .card-body.custom-scroll .mCSB_container {
            padding-right: var(--bs-gutter);
        }

.card-sm > .card-body {
    padding: calc(var(--bs-gutter) * 0.75);
}

.card-md > .card-body {
    padding: var(--bs-space-32);
}

.card-lg > .card-body {
    padding: var(--bs-space-45);
}


/* Form Control
======================================================*/
::-webkit-input-placeholder {
    color: var(--bs-body-color) !important;
    opacity: 1;
}

::-moz-placeholder {
    color: var(--bs-body-color) !important;
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--bs-body-color) !important;
    opacity: 1;
}

:-moz-placeholder {
    color: var(--bs-body-color) !important;
    opacity: 1;
}

::-ms-reveal,
::-ms-clear {
    display: none;
}

::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 20px;
    height: 20px;
    margin: auto;
    background-image: url('../images/icon-calendar.svg');
    border: none;
    background-origin: border-box;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

::-webkit-inner-spin-button,
::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input,
textarea,
button,
select,
option {
    font-family: var(--bs-font);
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
    outline: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

select {
    position: absolute;
    width: 0px;
    height: 0px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

textarea.form-control {
    min-height: 68px;
    resize: none;
    padding-top: 0;
    margin-top: 18px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

input[type=number] {
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.form-control-date {
    background-image: url('../images/icon-calendar.svg');
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
}

.form-group {
    display: inline-block;
    width: 100%;
    position: relative;
    margin-bottom: 24px;
}

.form-group-check {
    padding: 14px 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.form-group small {
    margin-top: 10px;
    display: inline-block;
    width: 100%;
}

.from-title {
    padding-bottom: 14px;
}

.form-label {
    margin-bottom: 0;
    font-weight: normal;
    position: absolute;
    top: 18px;
    left: 0px;
    font-size: 14px;
    line-height: 19px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    cursor: pointer;
    pointer-events: none;
}

.form-control-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-control.no-label {
    padding-top: 0px !important;
}

.form-control {
    background-color: transparent;
    padding: 18px 0 10px;
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 14px;
    line-height: 19px;
    color: var(--bs-dark) !important;
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
}

.form-control:disabled, .form-control[readonly] {
    background-color: rgba(var(--bs-light-rgb), 0.1);
    opacity: 1;
    /*padding: 13px 15px;
    margin-top: 18px;*/
    pointer-events: none !important;
}

.readonly {
    background-color: rgba(var(--bs-light-rgb), 0.1);
    opacity: 1;
    pointer-events: none !important;
}

.readonly .icon-button {
    pointer-events: all;
}

label.form-control {
    color: var(--bs-body-color);
}

.label-me {
    margin-bottom: 12px;
}

.icon-input {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0px;
    top: 14px;
}

.input-button {
    cursor: pointer;
    position: absolute;
    height: 30px;
    right: 0px;
    top: 14px;
}

.icon-input:not(.icon-eye):not(.icon-button) {
    pointer-events: none;
}


.icon-input.icon-loader #spinner-loader .spinner-border {
    width: 25px;
    height: 25px;
}

.form-control-icon,
.form-control-icon ~ .form-label {
    padding-right: 35px;
}

.input-focus .form-label,
.form-control:focus ~ .form-label {
    top: -4px;
}

.form-control:focus {
    background-color: transparent;
    border-color: var(--bs-primary);
}

.icon-eye {
    background-image: url("../images/icon-eye-off.svg");
}

.icon-eye.active {
    background-image: url("../images/icon-eye.svg");
}

.valid-feedback {
    display: inline-block;
    width: 100%;
    font-size: var(--bs-small-font-size);
    line-height: var(--bs-small-line-height);
    color: var(--bs-success);
}

.invalid-feedback {
    display: inline-block;
    width: 100%;
    font-size: var(--bs-small-font-size);
    line-height: var(--bs-small-line-height);
    color: var(--bs-danger);
}

.form-action {
    padding-top: 10px;
}

    .form-action .button {
        margin-left: 10px;
        min-width: 135px;
    }

    .form-action .link {
        margin-right: 10px;
    }

/* Radio/Checkbox
======================================================*/
.form-check {
    padding: 0;
    line-height: 18px;
    margin-bottom: 0;
}

    .form-check .form-check-input {
        margin: 0;
        min-width: 18px;
        width: 18px;
        height: 18px;
        border: 2px solid var(--bs-body-color);
        position: relative;
    }

        .form-check .form-check-input[type="radio"] {
            border-color: var(--bs-dark);
            background: transparent !important;
        }

        .form-check .form-check-input:checked {
            border-color: var(--bs-primary) !important;
            background: var(--bs-primary) url("../images/icon-check.svg") no-repeat scroll center center;
            background-size: 80%;
        }

        .form-check .form-check-input[type="radio"]:after {
            content: "";
            display: inline-block;
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            margin: auto;
            border: 5px solid var(--bs-primary);
            opacity: 0;
            visibility: hidden;
        }

        .form-check .form-check-input[type="radio"]:checked:after {
            opacity: 1;
            visibility: visible;
        }

.form-check-label {
    line-height: 18px;
    padding-left: 10px;
    cursor: pointer;
}

.form-switch {
    padding: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .form-switch .form-check-input {
        min-width: 40px;
        width: 40px;
        height: 24px;
        margin: 0;
        border: 5px solid transparent;
        cursor: pointer;
        background: #94A2A2 none no-repeat scroll center center !important;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
    }

        .form-switch .form-check-input::after {
            content: "";
            display: inline-block;
            width: 14px;
            height: 14px;
            background-color: var(--bs-white);
        }

        .form-switch .form-check-input:checked {
            background: var(--bs-primary) none no-repeat scroll center center !important;
        }

            .form-switch .form-check-input:checked::after {
                margin-left: 16px;
            }

    .form-switch .form-check-label {
        font-size: 14px;
        color: #1A383A;
    }


/* Select 2
======================================================*/
.select2 {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.select2-container .select2-selection--single {
    height: auto;
}

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding: 18px 25px 10px 0;
    }

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-dark);
    font-size: 14px;
    line-height: 19px;
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px;
    top: 0;
    right: 0;
    width: 20px;
    background: transparent url("../images/icon-select.svg") no-repeat scroll center center;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none;
    }

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-bottom-color: var(--bs-primary);
}

.select2-container--open ~ .form-label {
    top: -4px;
}

.select2-dropdown {
    min-width: 60px;
    overflow: hidden;
    -webkit-box-shadow: 0px 5px 20px #EFEDE5;
    -moz-box-shadow: 0px 5px 20px #EFEDE5;
    box-shadow: 0px 5px 20px #EFEDE5;
    border: none;
    font-size: var(--bs-small-font-size);
    line-height: var(--bs-small-line-height);
    z-index: 1111;
}

.select2-search--dropdown {
    padding: 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: none;
}

.select2-search--dropdown .select2-search__field {
    padding: 10px calc(var(--bs-gutter) * 0.5);
    font-size: 14px;
    line-height: 20px;
    color: var(--bs-dark);
}

.select2-results__option {
    padding: 11px calc(var(--bs-gutter) * 0.5);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--bs-secondary);
    color: var(--bs-white);
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    height: 48px;
    margin-right: 30px;
}

/* Background Color
======================================================*/
.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.bg-success {
    background-color: var(--bs-success) !important;
}

.bg-danger {
    background-color: var(--bs-danger) !important;
}

.bg-warning {
    background-color: var(--bs-warning) !important;
}

.bg-info {
    background-color: var(--bs-info) !important;
}

.bg-light {
    background-color: var(--bs-light) !important;
}

.bg-dark {
    background-color: var(--bs-dark) !important;
}

.bg-white {
    background-color: var(--bs-white) !important;
}

.bg-black {
    background-color: var(--bs-black) !important;
}

/* Grid
======================================================*/
@media (min-width: 1600px) {
    .row-cols-xxxl-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-xxxl-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-xxxl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-xxxl-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-xxxl-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-xxxl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
}

/* Text Color
======================================================*/
.text-body {
    color: var(--bs-body-color) !important;
}

/* Alert
======================================================*/
.alert {
    padding: 12px var(--bs-gutter);
    line-height: 24px;
}

.alert-primary {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-color: var(--bs-primary);
}

.alert-secondary {
    color: var(--bs-secondary);
    background-color: rgba(var(--bs-secondary-rgb), 0.1);
    border-color: var(--bs-secondary);
}

.alert-success {
    color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), 0.1);
    border-color: var(--bs-success);
}

.alert-danger {
    color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.1);
    border-color: var(--bs-danger);
}

.alert-warning {
    color: var(--bs-warning);
    background-color: rgba(var(--bs-warning-rgb), 0.1);
    border-color: var(--bs-warning);
}

.alert-info {
    color: var(--bs-info);
    background-color: rgba(var(--bs-info-rgb), 0.1);
    border-color: var(--bs-info);
}

.alert-light {
    color: var(--bs-light);
    background-color: rgba(var(--bs-light-rgb), 0.1);
    border-color: var(--bs-light);
}

.alert-dark {
    color: var(--bs-dark);
    background-color: rgba(var(--bs-dark-rgb), 0.1);
    border-color: var(--bs-dark);
}

/* Button
======================================================*/
.button {
    border-width: 1px;
    border-style: solid;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: var(--bs-small-font-size);
    line-height: 24px;
    text-transform: uppercase;
    padding: 7px var(--bs-gutter);
    text-align: center;
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    z-index: 1;
}

.button-primary, .button-outline-primary:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}

.button-primary:disabled, .button-primary:disabled:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--bs-body-color);
    opacity: 50%;
    cursor: not-allowed;
}

.button-secondary, .button-outline-secondary:hover {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: var(--bs-white);
}

.button-grey, .button-outline-grey:hover {
    background-color: var(--bs-body-color);
    border-color: var(--bs-body-color);
    color: var(--bs-white);
}

.button-white, .button-outline-white:hover {
    background-color: var(--bs-white);
    border-color: var(--bs-white);
    color: var(--bs-secondary);
}

.button-danger, .button-outline-danger:hover {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: var(--bs-white);
}

.button-primary:hover, .button-outline-primary {
    background-color: transparent;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.button-secondary:hover, .button-outline-secondary {
    background-color: transparent;
    border-color: var(--bs-secondary);
    color: var(--bs-secondary);
}

.button-grey:hover, .button-outline-grey {
    background-color: transparent;
    border-color: var(--bs-body-color);
    color: var(--bs-body-color);
}

.button-white:hover, .button-outline-white {
    background-color: transparent;
    border-color: var(--bs-white);
    color: var(--bs-white);
}

.button-danger:hover, .button-outline-danger {
    background-color: transparent;
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.button-warning:hover, .button-outline-warning {
    background-color: transparent;
    border-color: var(--bs-warning);
    color: var(--bs-warning);
}

.button-warning, .button-outline-warning:hover {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    color: var(--bs-white);
}

.button-primary:hover svg path {
    fill: var(--bs-primary);
}

.button-secondary:hover svg path {
    fill: var(--bs-secondary);
}

.button-grey:hover svg path {
    fill: var(--bs-body-color);
}

.button-white:hover svg path {
    fill: var(--bs-white);
}

.button-danger:hover svg path {
    fill: var(--bs-danger);
}

.button-outline-primary:hover svg path,
.button-outline-secondary:hover svg path,
.button-outline-grey:hover svg path,
.button-outline-danger:hover svg path,
.button-outline-xero:hover svg path {
    fill: var(--bs-white);
}

.button-outline-xero, .button-xero:hover {
    background-color: transparent;
    border-color: var(--bs-xero-color);
    color: var(--bs-xero-color);
}

.button-outline-xero:hover, .button-xero {
    background-color: var(--bs-xero-color);
    border-color: var(--bs-xero-color);
    color: var(--bs-white);
}

.button-outline-white:hover svg path {
    fill: var(--bs-secondary)
}

.button-google, .button-google:hover {
    background-color: var(--bs-white);
    border-color: var(--bs-border-color);
    color: var(--bs-black);
}


.button-sign-in {
    width: 100%;
    margin-top: 5px;
    height: 40px;
}

.button-sign-in img{
    margin-right: 10px;
}

/* Sweet Alert
======================================================*/
.sweet-alert {
    border: none;
    -webkit-border-radius: var(--bs-border-radius-sm);
    -moz-border-radius: var(--bs-border-radius-sm);
    border-radius: var(--bs-border-radius-sm);
    -webkit-box-shadow: 10px 7px 24px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 10px 7px 24px rgba(0, 0, 0, 0.1);
    box-shadow: 10px 7px 24px rgba(0, 0, 0, 0.1);
    max-width: 450px;
    width: calc(100% - 40px);
    padding: var(--bs-space-45) var(--bs-gutter);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    font-weight: var(--bs-body-font-weight);
    left: 20px;
    right: 20px;
    margin: auto !important;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

    .sweet-alert .sa-icon {
        margin: 0 auto;
    }

    .sweet-alert .sa-icon.sa-error .sa-line.sa-left {
        left: 13px;
    }

    .sweet-alert .sa-icon.sa-error .sa-line.sa-right {
        right: 13px;
    }

    .sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
        width: 19px;
        left: 15px;
        top: 40px;
    }

    .sweet-alert .sa-icon.sa-success .sa-line.sa-long {
        width: 40px;
        right: 9px;
        top: 34px;
    }

        .sweet-alert .sa-icon.sa-warning .sa-body {
            height: 40px;
            background-color: var(--bs-warning);
        }

        .sweet-alert .sa-icon.sa-warning .sa-dot {
            background-color: var(--bs-warning);
        }

        .sweet-alert .sa-icon.sa-warning {
            border-color: var(--bs-warning);
        }

    .sweet-alert h2 {
        margin: var(--bs-gutter) 0 5px;
        font-size: var(--bs-font-size-h1);
        line-height: var(--bs-line-height-h1);
        color: var(--bs-secondary);
        font-family: var(--bs-font-heading);
        font-weight: var(--bs-font-medium);
    }

    .sweet-alert p {
        font-family: var(--bs-body-font-family);
        font-size: var(--bs-font-size-h4);
        line-height: var(--bs-line-height-h4);
        font-weight: var(--bs-body-font-weight);
        color: var(--bs-body-color);
    }

.sa-button-container {
    display: flex;
    justify-content: center;
    margin-top: var(--bs-space-32);
}

.sweet-alert .sa-button-container button {
    border-width: 1px;
    border-style: solid;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: var(--bs-small-font-size);
    line-height: 24px;
    text-transform: uppercase;
    padding: 7px var(--bs-gutter);
    text-align: center;
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary);
    color: var(--bs-white);
    margin: 0;
}

    .sweet-alert .sa-button-container button:hover {
        background-color: transparent !important;
        border-color: var(--bs-primary);
        color: var(--bs-primary);
    }

    .sweet-alert .sa-button-container button.cancel {
        background-color: var(--bs-body-color) !important;
        border-color: var(--bs-body-color);
        color: var(--bs-white);
        margin-right: 10px;
    }

        .sweet-alert .sa-button-container button.cancel:hover {
            background-color: transparent !important;
            border-color: var(--bs-body-color);
            color: var(--bs-body-color);
        }

/* Link
======================================================*/
.link {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
    display: inline-block;
}

    .link::before {
        content: "";
        position: absolute;
        height: 1px;
        width: 100%;
        bottom: 0px;
        right: 0;
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }

    .link:not(.link-underline):hover::before, .link-underline::before {
        left: 0;
        -webkit-transform: scaleY(1) scaleX(1);
        -moz--transform: scaleY(1) scaleX(1);
        transform: scaleY(1) scaleX(1);
        -webkit-transition: transform .4s cubic-bezier(.5,0,.1,1), left 0s linear;
        -moz-transition: transform .4s cubic-bezier(.5,0,.1,1), left 0s linear;
        transition: transform .4s cubic-bezier(.5,0,.1,1), left 0s linear;
    }

    .link-underline:hover::before, .link:not(.link-underline)::before {
        left: 100%;
        -webkit-transform: scaleY(1) scaleX(0);
        -moz-transform: scaleY(1) scaleX(0);
        transform: scaleY(1) scaleX(0);
        -webkit-transition: left .4s cubic-bezier(.5,0,.1,1), transform 0s linear .4s;
        -moz-transition: left .4s cubic-bezier(.5,0,.1,1), transform 0s linear .4s;
        transition: left .4s cubic-bezier(.5,0,.1,1), transform 0s linear .4s;
    }

.link-icon:not(.link-underline):hover::before, .link-icon.link-underline:not(:hover)::before {
    left: 22px;
}

.link-icon-right::before {
    left: 0;
    width: calc(100% - 22px);
}

.link svg {
    max-width: 16px;
}

.link-primary {
    color: var(--bs-primary) !important;
}

.link-secondary {
    color: var(--bs-secondary) !important;
}

.link-success {
    color: var(--bs-success) !important;
}

.link-danger {
    color: var(--bs-danger) !important;
}

.link-warning {
    color: var(--bs-warning) !important;
}

.link-info {
    color: var(--bs-info) !important;
}

.link-light {
    color: var(--bs-light) !important;
}

.link-dark {
    color: var(--bs-dark) !important;
}

.link-body {
    color: var(--bs-body-color) !important;
}

.link-primary::before {
    background-color: var(--bs-primary);
}

.link-secondary::before {
    background-color: var(--bs-secondary);
}

.link-success::before {
    background-color: var(--bs-success);
}

.link-danger::before {
    background-color: var(--bs-danger);
}

.link-warning::before {
    background-color: var(--bs-warning);
}

.link-info::before {
    background-color: var(--bs-info);
}

.link-light::before {
    background-color: var(--bs-light);
}

.link-dark::before {
    background-color: var(--bs-dark);
}

.link-body::before {
    background-color: var(--bs-body-color);
}

/* Custom Scroll Bar
======================================================*/
.mCSB_inside > .mCSB_container {
    margin-right: 0px;
}

.mCSB_scrollTools {
    width: 10px;
    opacity: 1 !important;
}

    .mCSB_scrollTools .mCSB_draggerRail {
        background: transparent;
    }

    .mCSB_scrollTools .mCSB_draggerContainer {
        top: 4px;
        bottom: 4px;
    }

    .mCSB_scrollTools.mCSB_scrollTools_vertical .mCSB_dragger .mCSB_dragger_bar {
        width: 6px;
    }

    .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
        background: rgba(184, 192, 188, 0.199813) !important;
    }

.mCSB_horizontal.mCSB_inside > .mCSB_container {
    margin-bottom: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
    height: 2px;
}

    .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerContainer {
        top: 0px;
        bottom: 0px;
    }

    .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
        height: 2px;
        margin: 0px auto;
    }

    .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
        background: var(--bs-secondary) !important;
    }

/* dashboard-job-tabs
======================================================*/
.dashboard-job-tabs {
    border-bottom: none;
}

.dashboard-job-tabs a {
    min-width: 180px;
    padding: calc(var(--bs-gutter) * 0.50) var(--bs-gutter);
    text-align: center;
    background-color: #E9E6DD !important;
    color: rgba(26, 56, 58, 0.7) !important;
    -webkit-border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
    -moz-border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
    border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
    text-transform: capitalize;
}

.dashboard-job-tabs a:hover, .dashboard-job-tabs a.active {
    background-color: var(--bs-white) !important;
    color: var(--bs-primary) !important;
}

/* Tabs
======================================================*/
.tab-scroll .tab-scroll {
    border-bottom: 1px solid var(--bs-border-color);
}

.nav-tabs {
    border-bottom: none;
}

    .nav-tabs a {
        min-width: 180px;
        margin-right: 2px;
        padding: calc(var(--bs-gutter) * 0.75) var(--bs-gutter);
        text-align: center;
        background-color: #E9E6DD;
        color: rgba(26, 56, 58, 0.7);
        -webkit-border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
        -moz-border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
        border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
        font-family: var(--bs-font-heading);
        font-weight: var(--bs-font-medium);
        text-transform: capitalize;
    }

        .nav-tabs a:hover, .nav-tabs a.active {
            background-color: var(--bs-white);
            color: var(--bs-primary);
        }

.tab-content {
    flex: 1 1 auto !important;
}

    .tab-content .tab-pane {
        position: relative;
        min-height: 100%;
    }

        .tab-content .tab-pane > .card {
            -webkit-border-radius: 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm) var(--bs-border-radius-sm);
            -moz-border-radius: 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm) var(--bs-border-radius-sm);
            border-radius: 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm) var(--bs-border-radius-sm);
        }

    .tab-content > .active {
        display: flex;
    }

.card .nav-tabs a:hover, .card .nav-tabs a.active {
    background-color: #ECF9E8;
    color: var(--bs-primary);
}

.tab-disputes .dataTables_filter {
    padding-right: 0;
}

/* Badge
======================================================*/
.badge {
    border: 1px solid transparent;
    text-transform: uppercase;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-size: var(--bs-small-font-size);
    line-height: var(--bs-small-line-height);
    padding: 5px var(--bs-gutter);
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
}

.badge-primary {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

.badge-body {
    color: var(--bs-body-color);
    background-color: rgba(var(--bs-body-color-rgb), 0.2);
    border-color: rgba(26, 56, 58, 0.2);
}

.badge-warning {
    color: var(--bs-warning);
    background-color: rgba(var(--bs-warning-rgb), 0.1);
}

.badge-danger {
    color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.1);
}

.badge-info {
    color: var(--bs-info);
    background-color: rgba(var(--bs-info-rgb), 0.1);
}

.badge-default {
    color: var(--bs-body-color);
    background-color: rgba(var(--bs-body-color-rgb), 0.2);
}

/* Dropdown
======================================================*/
.dropdown-toggle::after {
    display: none;
}

.dropdown-menu {
    background: var(--bs-white);
    -webkit-box-shadow: 0px 5px 20px #EFEDE5;
    -moz-box-shadow: 0px 5px 20px #EFEDE5;
    box-shadow: 0px 5px 20px #EFEDE5;
    border: none;
    padding: 8px;
    max-width: 200px;
}

    .dropdown-menu.dropdown-menu-right {
        right: 0px;
    }

.dropdown-item {
    color: var(--bs-body-color);
    padding: 2px 10px;
    margin: 0px !important;
    background-color: transparent;
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
}

    .dropdown-item:hover {
        color: var(--bs-secondary);
        background-color: rgba(var(-bs-dark-rgb), 0.1);
    }

/* Table
======================================================*/
.dataTables_scrollBody {
    overflow: initial !important;
}

.dataTables_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

    .dataTables_wrapper .dataTables_scroll {
        width: 100%;
        margin-bottom: var(--bs-gutter);
    }

.dataTables_length, .dataTables_info, .dataTables_paginate {
    -ms-flex-order: 1;
    order: 1;
    margin-left: var(--bs-gutter);
    font-size: var(--bs-small-font-size);
    line-height: var(--bs-small-line-height);
    color: var(--bs-secondary);
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
}

    .dataTables_info .select-info {
        display: none;
    }

.dataTables_length {
    margin-left: auto;
    font-size: 0;
}

    .dataTables_length::before {
        content: "Rows per page: ";
        font-size: var(--bs-small-font-size);
        font-family: var(--bs-font-heading);
        font-weight: var(--bs-font-medium);
    }

    .dataTables_length .select2-container--default .select2-selection--single {
        border-bottom: none;
    }

    .dataTables_length .select2-container .select2-selection--single .select2-selection__rendered {
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 14px;
        font-size: var(--bs-small-font-size);
        line-height: var(--bs-small-line-height);
    }

    .dataTables_length .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 18px;
        background-image: none;
        width: 8px;
    }

        .dataTables_length .select2-container--default .select2-selection--single .select2-selection__arrow::after {
            content: "";
            display: inline-block;
            margin-top: 7px;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid var(--bs-secondary);
        }

.dataTables_filter {
    padding: 28px var(--bs-gutter);
    margin-left: auto;
}

    .dataTables_filter label {
        font-size: 0;
    }

        .dataTables_filter label input {
            border: 1px solid var(--bs-border-color);
            background: var(--bs-white) url("../images/icon-search.svg") no-repeat scroll left 12px center;
            padding: 10px 12px 10px 40px;
            width: 390px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            font-size: var(--bs-small-font-size);
            line-height: var(--bs-small-line-height);
            font-family: var(--bs-font-heading);
            font-weight: var(--bs-font-medium);
        }

            .dataTables_filter label input:focus {
                border-color: var(--bs-primary);
            }

.dataTables_paginate {
    font-size: 0;
    display: inline-block;
}

    .dataTables_paginate > span {
        display: none;
    }

    .dataTables_paginate a {
        width: 20px;
        height: 20px;
    }

        .dataTables_paginate a.previous {
            background: transparent url("../images/icon-arrow-left.svg") no-repeat scroll center center;
        }

        .dataTables_paginate a.next {
            background: transparent url("../images/icon-arrow-right.svg") no-repeat scroll center center;
            margin-left: calc(0.25 * var(--bs-gutter));
        }

        .dataTables_paginate a:hover {
            background-color: rgba(var(--bs-light-rgb), 0.4);
        }

.dataTables_processing {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(var(--bs-body-bg-rgb), 0.8) none no-repeat scroll top center;
    z-index: 1;
    text-align: center;
    display: block;
    font-size: 0;
}

.dataTables_processing::after {
    content: "Processing...";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 130px;
    height: 40px;
    z-index: -1;
    background-color: var(--bs-secondary);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: var(--bs-white);
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
    font-size: var(--bs-body-font-size);
    line-height: 40px;
}

.table-main thead tr {
    background-color: rgba(var(--bs-dark-rgb), 0.05);
    -webkit-border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
    -moz-border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
    border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
}

    .table-main thead tr th:first-child {
        -webkit-border-radius: var(--bs-border-radius-xs) 0 0 0;
        -moz-border-radius: var(--bs-border-radius-xs) 0 0 0;
        border-radius: var(--bs-border-radius-xs) 0 0 0;
    }

    .table-main thead tr th:last-child {
        -webkit-border-radius: 0 var(--bs-border-radius-xs) 0 0;
        -moz-border-radius: 0 var(--bs-border-radius-xs) 0 0;
        border-radius: 0 var(--bs-border-radius-xs) 0 0;
    }

    .table-main thead tr th {
        padding: 13px var(--bs-gutter);
        background-color: rgba(var(--bs-body-color-rgb), 0.1);
        color: rgba(var(--bs-body-color-rgb), 0.7);
        font-family: var(--bs-font-heading);
        font-weight: var(--bs-font-medium);
    }

.table-main tbody tr td {
    padding: 15px var(--bs-gutter);
    height: 66px;
    vertical-align: middle !important;
    font-size: var(--bs-font-size-h4);
    line-height: var(--bs-line-height-h4);
    color: var(--bs-secondary);
}

    .table-main tbody tr td:not(.select-checkbox) {
        min-width: 140px;
    }

    .table-main tbody tr td.select-checkbox {
        text-align: center;
    }

        .table-main tbody tr td.select-checkbox::after {
            content: "";
            position: relative;
            width: 18px;
            min-width: 18px;
            height: 18px;
            border: 2px solid var(--bs-body-color);
            background: transparent none no-repeat scroll center center;
            cursor: pointer;
            display: inline-block;
        }

.table-main tbody tr.selected td.select-checkbox::after {
    border-color: var(--bs-primary) !important;
    background: var(--bs-primary) url("../images/icon-check.svg") no-repeat scroll center center;
    background-size: 80%;
}

.table-main:not(.table-border) tbody tr:nth-child(2n) td {
    background-color: rgba(var(--bs-border-color-rgb), 0.3);
}

.table-main label {
    font-weight: var(--bs-font-regular);
}

.table-main .icon-action a:not(.dropdown-item):not(:first-child) {
    margin-left: 30px;
    text-transform: uppercase;
}

.table-main .icon-action .dropdown:not(:only-child) {
    margin-left: 30px;
}

.table-main .icon-action .icon {
    min-width: 20px;
}

    .table-main .icon-action .icon:hover path {
        fill: var(--bs-primary);
    }

.table-main .avatar {
    white-space: nowrap;
}

    .table-main .avatar figure {
        width: 36px;
        min-width: 36px;
        height: 36px;
        margin-right: 15px;
    }

    .table-main .avatar.avatar-small figure {
        width: 26px;
        min-width: 26px;
        height: 26px;
    }

.table-main .dots {
    width: 9px;
    height: 9px;
    display: inline-block;
    position: absolute;
    top: -1px;
    left: -4px;
    border: 1px solid var(--bs-white);
    z-index: 1;
}

.table-border tbody tr {
    border-bottom: 1px solid rgba(var(--bs-black-rgb), 0.1);
}

.table-head {
    padding: var(--bs-gutter);
    background-color: rgba(var(--bs-dark-rgb), 0.05);
    margin-bottom: -96px;
    min-height: 96px;
    -webkit-border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
    -moz-border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
    border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
}

    .table-head h2 {
        margin-bottom: 1px;
    }

    .table-head h2,
    .table-head small {
        z-index: 1;
        position: relative;
    }

/* Modal
======================================================*/
.modal-backdrop.show {
    opacity: .7;
}

.modal .modal-dialog {
    display: flex;
    align-items: center;
    margin: 0 auto;
    height: 100vh;
    padding: var(--bs-gutter);
}

.modal .modal-content {
    max-height: calc(100vh - var(--bs-gutter) - var(--bs-gutter));
    overflow: auto;
    border: none;
    -webkit-border-radius: var(--bs-border-radius-sm);
    -moz-border-radius: var(--bs-border-radius-sm);
    border-radius: var(--bs-border-radius-sm);
    -webkit-box-shadow: 10px 7px 24px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 10px 7px 24px rgba(0, 0, 0, 0.1);
    box-shadow: 10px 7px 24px rgba(0, 0, 0, 0.1);
}

.modal .modal-body {
    padding: var(--bs-space-32) var(--bs-space-45);
}

.modal .modal-md .modal-body {
    padding: var(--bs-space-32) var(--bs-gutter);
}

.icon-close {
    position: absolute;
    top: -2px;
    right: 0;
    cursor: pointer;
}

.modal-xl {
    max-width: 982px;
}

.modal-lg {
    max-width: 638px;
}

.modal-llg {
    max-width: 838px;
}

.modal-md {
    max-width: 598px;
}

.modal-title {
    margin-bottom: 24px;
    position: relative;
}

    .modal-title h1 {
        margin-bottom: 5px;
    }

    .modal-title h3 {
        margin-bottom: 5px;
        padding-right: 30px;
    }

    .modal-title h4 {
        font-family: var(--bs-font);
        font-weight: var(--bs-font-regular);
    }

.modal-contract textarea.form-control {
    border: 1px solid var(--bs-border-color);
    -webkit-border-radius: var(--bs-border-radius-md);
    -moz-border-radius: var(--bs-border-radius-md);
    border-radius: var(--bs-border-radius-md);
    min-height: 98px;
    padding: 10px;
}

    .modal-contract textarea.form-control:focus {
        border-color: var(--bs-primary);
    }

.modal-contract .form-check {
    padding: 7px 9px;
    position: relative;
    z-index: 2;
}

    .modal-contract .form-check .form-check-input + label:after {
        background: #f2f2f2;
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
        opacity: 0;
        visibility: hidden;
    }

    .modal-contract .form-check .form-check-input:checked + label:after {
        opacity: 1;
        visibility: visible;
    }

    .modal-contract .form-check .form-check-input[type="radio"] {
        border-color: var(--bs-light);
    }

        .modal-contract .form-check .form-check-input[type="radio"]:after {
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
        }

.modal-contract .form-check-label {
    font-size: 14px;
    color: var(--bs-secondary);
    font-family: var(--bs-font);
    font-weight: var(--bs-font-regular);
}

.mfp-container.mfp-image-holder {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CK Editor
======================================================*/
body .cke_chrome {
    border: none;
    background-color: #F5F5F5;
    padding: 5px 5px 10px;
}

body .cke_inner {
    background-color: transparent;
}

body .cke_top {
    background-color: transparent;
    border-bottom: none;
    padding: 5px;
}

body a.cke_button, body a.cke_combo_button {
    height: 28px;
    padding: 4px 6px;
    background-color: var(--bs-white);
    border: 1px solid var(--bs-border-color);
    margin: 2px !important;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);
    -moz-box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);
    box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);
    cursor: pointer;
}

body a.cke_button_disabled:hover, body a.cke_button_disabled:focus, body a.cke_button_disabled:active {
    background-color: var(--bs-white);
    border: 1px solid var(--bs-border-color);
    padding: 4px 6px;
}

body a.cke_button_off:hover, body a.cke_button_off:focus, body a.cke_button_off:active, body .cke_combo_on a.cke_combo_button, body .cke_combo_off a.cke_combo_button:hover, body .cke_combo_off a.cke_combo_button:focus, body .cke_combo_off a.cke_combo_button:active {
    background-color: var(--bs-white);
    border: 1px solid var(--bs-primary);
    padding: 4px 6px;
}

body a.cke_button_expandable.cke_button_off:hover, body a.cke_button_expandable.cke_button_off:focus, body a.cke_button_expandable.cke_button_off:active {
    padding: 4px 6px;
}

body .cke_bottom, body .cke_toolbar_separator, body .cke_toolgroup a.cke_button:last-child::after, body .cke_toolgroup a.cke_button.cke_button_disabled:hover:last-child::after, body .cke_combo::after {
    display: none;
}

body .cke_combo_text {
    margin-bottom: 0;
    margin-top: 0;
}

body .cke_combo_text {
    line-height: 18px;
    padding-left: 0px;
    color: var(--bs-secondary);
    width: auto;
}

body .cke_combo_open {
    font-size: 0;
    height: 18px;
    line-height: 18px;
    margin: 0px 5px;
    width: 5px;
}

body .cke_combo_arrow {
    margin: 8px 0 0;
}

body .cke_toolbar_start + .cke_combo_on a.cke_combo_button, body .cke_toolbar_start + .cke_combo_off a.cke_combo_button:hover, body .cke_toolbar_start + .cke_combo_off a.cke_combo_button:focus, body .cke_toolbar_start + .cke_combo_off a.cke_combo_button:active {
    padding: 4px 6px;
    margin-left: 2px;
}

body .cke_toolgroup {
    border: 0;
    margin: 0;
    padding-right: 0;
}

body .cke_toolbox {
    display: flex;
    flex-wrap: wrap;
}

/* Sidebar
======================================================*/
.aside-sidebar {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 270px;
    height: 100%;
    background: var(--bs-dark) url("../images/aside-background.svg") no-repeat scroll bottom 0 right -136px;
    overflow: auto;
    z-index: 999;
}

    .aside-sidebar .mCSB_container {
        padding: var(--bs-space-45) var(--bs-gutter) calc(var(--bs-space-45) * 2);
        min-height: calc(100vh - 2px);
        display: flex;
        flex-direction: column;
    }

    .aside-sidebar.open .aside-backdrop {
        opacity: 0.7;
        visibility: visible;
    }

    .aside-sidebar ul li {
        padding-top: 1px;
        padding-bottom: 1px;
    }

    .aside-sidebar ul li ul {
        padding-left: 45px;
        display: none;
    }

    .aside-sidebar ul li a {
        padding: calc(var(--bs-gutter) * 0.5) calc(var(--bs-gutter) * 0.666667);
        color: rgba(var(--bs-white-rgb), 0.7);
        font-family: var(--bs-font-heading);
        font-weight: var(--bs-font-medium);
    }
        .aside-sidebar ul li.caret > a {
            padding-right: 35px;
        }

        .aside-sidebar ul li.caret > a::after {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            background: transparent url("../images/icon-caret.svg") no-repeat scroll center center;
            position: absolute;
            right: calc(var(--bs-gutter) * 0.666667);
            top: 19px;
        }

        .aside-sidebar ul li.caret.open > a::after {
            -webkit-transform: rotate(-180deg);
            -moz-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }

        .aside-sidebar ul li ul li a {
            padding-left: calc(var(--bs-gutter) * 0.5);
            padding-right: calc(var(--bs-gutter) * 0.5);
        }

        .aside-sidebar ul li ul li a:hover, .aside-sidebar ul li ul li a.active {
            background-color: transparent;
            color: var(--bs-primary);
        }

        .aside-sidebar ul li a .icon {
            min-width: 30px;
            height: 30px;
            background-color: rgba(var(--bs-white-rgb), 0.1);
            margin-right: calc(var(--bs-gutter) * 0.5);
            -webkit-box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);
            -moz-box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);
            box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);
        }

        .aside-sidebar ul li a:hover, .aside-sidebar ul li a.active, .aside-sidebar ul li.open > a {
            background-color: var(--bs-primary);
            color: var(--bs-white);
        }

            .aside-sidebar ul li a:hover .icon, .aside-sidebar ul li a.active .icon, .aside-sidebar ul li.open > a .icon {
                background-color: rgba(var(--bs-dark-rgb), 0.1);
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
            }

                .aside-sidebar ul li a:hover .icon svg path, .aside-sidebar ul li a.active .icon svg path, .aside-sidebar ul li.open > a .icon svg path {
                    fill: var(--bs-white);
                }

    .aside-sidebar .icon-line {
        margin-top: var(--bs-space-32);
        margin-bottom: var(--bs-space-32);
    }

    .aside-sidebar small {
        padding: var(--bs-gutter) 0 15px calc(var(--bs-gutter) * 0.666667);
        text-transform: uppercase;
        font-family: var(--bs-font-heading);
        font-weight: var(--bs-font-medium);
    }

.aside-bottom {
    padding-top: 50px;
}

    .aside-bottom .icon {
        width: 35px;
        height: 35px;
        background-color: var(--bs-white);
        margin-bottom: 20px;
    }

    .aside-bottom .button {
        margin-top: 9px;
    }

    .aside-bottom .small {
        font-family: var(--bs-font-heading);
        font-weight: var(--bs-font-medium);
    }

.aside-backdrop {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: var(--bs-dark);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

/* Header
======================================================*/
header {
    padding: 22px var(--bs-gutter);
}

    header ul li {
        margin-left: 12px;
    }

    header .dots {
        width: 6px;
        height: 6px;
        position: absolute;
        border: 1px solid var(--bs-body-bg);
        top: 3px;
        right: 2px;
    }

.avatar figure {
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin-right: 6px;
}

.avatar-text {
    max-width: 106px;
}

    .avatar-text h5, .avatar-text span {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .avatar-text span {
        color: #718096;
        font-size: 10px;
        line-height: 12px;
        font-family: var(--bs-font-heading);
        font-weight: var(--bs-font-medium);
    }

.nav-toggle {
    min-width: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: relative;
    margin-right: var(--bs-gutter);
}

    .nav-toggle .bar {
        left: 0px;
        background: var(--bs-secondary);
        display: inline-block;
        position: absolute;
        height: 2px;
        width: 20px;
    }

        .nav-toggle .bar:first-child {
            top: 2px;
        }

        .nav-toggle .bar:nth-child(2) {
            top: 9px;
        }

        .nav-toggle .bar:last-child {
            top: 16px;
        }

.nav-head {
    padding: 8px 0px;
}

    .nav-head .breadcrumb {
        margin-bottom: 6px;
        font-family: var(--bs-font-heading);
        font-weight: var(--bs-font-medium);
    }

        .nav-head .breadcrumb .breadcrumb-item:first-child a {
            color: var(--bs-light);
        }

        .nav-head .breadcrumb .breadcrumb-item::before, .nav-head .breadcrumb .breadcrumb-item a, .nav-head .breadcrumb .breadcrumb-item.active {
            color: var(--bs-secondary);
        }

    .nav-head h1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.header-search input {
    width: 40px;
    height: 40px;
    background: var(--bs-white) none no-repeat scroll center center;
    border: 1px solid var(--bs-border-color);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 0px 19px;
    cursor: pointer;
}

    .header-search:hover input {
        width: 250px;
    }

.header-search button {
    border: none;
    background: transparent;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
    .header-search button:hover {
        background-color: var(--bs-border-color);
    }

    .header-search input:not(:focus) + button {
        /*pointer-events: none;*/
    }

.notification-bar {
    top: calc(100% + 16px);
    opacity: 0;
    visibility: hidden;
    right: calc((-1 * var(--bs-gutter)) + 7px);
    z-index: 11;
    -webkit-box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.1);
    width: 236px;
    max-height: 298px;
}

    .notification-bar.open {
        opacity: 1;
        visibility: visible;
    }

    .notification-bar::before {
        content: "";
        pointer-events: none;
        z-index: -1;
        position: fixed;
        top: 90px;
        right: 0px;
        bottom: 0px;
        width: 100%;
        background-color: rgba(var(--bs-black-rgb), 0.1);
    }

    .notification-bar::after {
        content: "";
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid var(--bs-white);
        position: absolute;
        top: -7px;
        right: calc(var(--bs-gutter) - 7px);
    }

    .notification-bar h2 {
        padding: 17px 17px 10px;
        border-bottom: 1px solid var(--bs-border-color);
        -webkit-border-radius: var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0 0;
        -moz-border-radius: var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0 0;
        border-radius: var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0 0;
    }

    .notification-bar ul {
        padding-left: 17px;
        padding-right: 17px;
    }

        .notification-bar ul li {
            margin-left: 0;
            padding-top: 16px;
            padding-bottom: 22px;
            border-bottom: 1px solid var(--bs-border-color);
        }

            .notification-bar ul li:last-child {
                border-bottom: none;
            }

            .notification-bar ul li h6 {
                margin-top: 3px;
                margin-bottom: 3px;
            }

.link-view {
    background-color: var(--bs-body-bg);
    padding: 10px 5px;
    -webkit-border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm);
    -moz-border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm);
    border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm);
}

.notification-item li:not(:last-child) {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Chat
======================================================*/
.chat-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-color: var(--bs-secondary);
    z-index: 11;
}

.chat-toggle path {
    fill: var(--bs-white);
}

.chat-toggle:hover {
    background-color: var(--bs-primary);
}

.chat-card {
    max-height: 800px !important;
}

/* Card Profile
======================================================*/
.card-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-color: var(--bs-secondary);
    z-index: 11;
}

.card-toggle path {
    fill: var(--bs-white);
}

.card-toggle:hover {
    background-color: var(--bs-primary);
}

.card-profile {
    flex: 0 0 auto;
    width: 380px;
}

    .card-profile.card-profile-sm {
        width: 330px;
    }

    .card-profile .block-share {
        border-left: 1px solid var(--bs-border-color);
        padding: 15px 0 0px 15px;
        margin-bottom: 35px;
    }

    .card-profile .gallery-file li .h4 {
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%;
        overflow: hidden;
        padding-left: 25px;
        position: relative;
    }

    .card-profile .gallery-file li .h4 .icon {
        position: absolute;
        top: 3px;
        left: 0px;
    }

    .card-profile .gallery-file li .h4 .icon svg path {
        fill: #26A3FF;
    } 

    .card-profile .gallery-file li {
        margin-bottom: 10px;
    }

    .card-profile .gallery-block {
        margin: -8px -4px 0;
        padding-bottom: 15px;        
    }

    .card-profile .gallery-block li {
        padding: 8px 4px 0;
        width: 12.5%;
    }

    .card-profile .gallery-block li figure {
        width: 100%;
        height: auto;
        padding-top: 100%;
    }

    .card-profile .text-content-share {
        padding-top: 35px;
        border-top: 1px solid var(--bs-border-color);
    }

.card-box {
    padding: var(--bs-gutter);
    margin-bottom: 20px;
    font-size: var(--bs-small-font-size);
    line-height: var(--bs-small-line-height);
}

    .card-box li {
        display: flex;
        padding: 7px 0;
        color: var(--bs-white);
    }

        .card-box li:first-child, .card-box li:nth-child(2), .card-box li:nth-child(3) {
            border-bottom: 1px solid rgba(var(--bs-white-rgb),0.2);
        }

        .card-box li label {
            width: 50%;
            flex: 0 0 50%;
            padding-right: 10px;
        }

        .card-box li span {
            display: block;
        }

        .card-box li small {
            font-size: 11px;
            color: rgba(var(--bs-white-rgb), 0.7);
        }

.picture-cover {
    padding-top: 57%;
    margin-bottom: 10px;
    background-color: var(--bs-dark);
}

    .picture-cover img {
        opacity: 0.6;
    }

.picture-avatar {
    width: 94px;
    height: 94px;
    margin: -78px auto 0;
    display: block;
    -webkit-box-shadow: 0px 12px 24px rgba(var(--bs-black-rgb), .14371);
    -moz-box-shadow: 0px 12px 24px rgba(var(--bs-black-rgb), .14371);
    box-shadow: 0px 12px 24px rgba(var(--bs-black-rgb), .14371);
}

.banner-thumbnail {
    object-fit: contain !important;
    max-width: 70%;
    opacity: 0.2;
    margin: auto;
    right: 0px;
}

.profile-thumbnail {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
}

.card-detail {
    margin: 18px 0 20px;
}

    .card-detail .dots {
        width: 9px;
        height: 9px;
        display: inline-block;
        vertical-align: middle !important;
        margin-top: -2px;
    }

.profile-icon {
    position: absolute;
    top: 14px;
    right: 14px;
}

    .profile-icon li:not(:last-child) {
        margin-bottom: 14px;
    }

.card-address {
    margin-top: 20px;
}

    .card-address li {
        padding: 10px 0;
        border-top: 1px solid var(--bs-border-color);
    }

.social-icon > a {
    margin-left: 10px;
}

/* Dashbaord
======================================================*/
.icon-avatar {
    width: 50px;
    height: 50px;
    min-width: 50px;
    margin-right: 15px;
}

.row-status .icon {
    height: 45px;
    min-width: 45px;
}

.row-dashboard .card {
    height: 377px;
}

.row-dashboard .card-list li {
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.row-dashboard .card-list-border li:not(:last-child) {
    border-bottom: 1px solid var(--bs-border-color);
    margin-top: -2px;
}

.row-dashboard .icon-line {
    margin-top: calc(0.75 * var(--bs-gutter));
    margin-bottom: calc(0.75 * var(--bs-gutter));
}

.row-dashboard .card-information > li {
    margin-bottom: 17px;
}

    .row-dashboard .card-information > li ul li {
        margin-left: 10px;
    }

.progress-box {
    min-width: 146px;
    height: 146px;
    margin-left: var(--bs-gutter);
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0), conic-gradient(var(--bs-primary) calc(var(--pgPercentage) * 1%), rgba(var(--bs-light-rgb), 0.2) 0);
    color: var(--bs-primary);
}

    .progress-box::before {
        counter-reset: percentage var(--value);
        content: counter(percentage) '%';
        position: absolute;
        top: 45px;
        font-size: var(--bs-font-size-h1);
        font-weight: var(--bs-font-medium);
        font-family: var(--bs-font-heading);
    }

.progress-status {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 70px;
    color: var(--bs-secondary);
}

@keyframes growProgressBar {
    0%, 33% {
        --pgPercentage: 0;
    }

    100% {
        --pgPercentage: var(--value);
    }
}

.card-empty .icon {
    margin-bottom: 10px;
}

/* Chart Page
======================================================*/
.chart-canvas {
    margin-top: var(--bs-gutter);
}

.chart-text {
    margin-top: var(--bs-space-45);
}

    .chart-text h3 {
        margin-bottom: 5px;
    }

.daterangepicker {
    border: 0;
    padding: var(--bs-gutter);
    background: var(--bs-white);
    -webkit-box-shadow: 0px 10px 35px rgb(37 51 66 / 10%);
    -moz-box-shadow: 0px 10px 35px rgb(37 51 66 / 10%);
    box-shadow: 0px 10px 35px rgb(37 51 66 / 10%);
    -webkit-border-radius: var(--bs-border-radius-sm);
    -moz-border-radius: var(--bs-border-radius-sm);
    border-radius: var(--bs-border-radius-sm);
    border: 0;
    width: 536px;
    margin-right: calc(2 * var(--bs-gutter));
}

    .daterangepicker:after, .daterangepicker:before {
        display: none;
    }

    .daterangepicker * {
        font-family: var(--bs-font);
        color: var(--bs-secondary);
    }

    .daterangepicker .ranges, .daterangepicker .drp-calendar {
        float: none;
        max-width: 100%;
        margin-top: 0 !important;
    }

    .daterangepicker .ranges {
        overflow: auto;
    }

        .daterangepicker .ranges ul {
            display: flex;
            width: auto;
            background-color: #f5f5f5;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            overflow: hidden;
        }

            .daterangepicker .ranges ul li {
                white-space: nowrap;
                flex: 1 1 auto;
                text-align: center;
                border-bottom: 3px solid transparent;
                padding: 11px 11px 8px;
                font-size: var(--bs-small-font-size);
                line-height: var(--bs-small-line-height);
            }

                .daterangepicker .ranges ul li:hover, .daterangepicker .ranges ul li.active {
                    background-color: transparent;
                    color: var(--bs-primary);
                }

    .daterangepicker.show-calendar .drp-calendar {
        width: calc(50% - 20px);
        display: inline-block;
        padding: 19px 0 0;
    }

    .daterangepicker.show-ranges.ltr .drp-calendar.left {
        border-left: 0;
        margin-right: 40px;
    }

    .daterangepicker .calendar-table thead th.month {
        font-size: var(--bs-font-size-h4);
        font-family: var(--bs-font-heading);
        font-weight: var(--bs-font-medium);
    }

    .daterangepicker .calendar-table thead th {
        font-size: var(--bs-small-font-size);
    }

    .daterangepicker .calendar-table thead tr:last-child th {
        padding-bottom: 6px;
        padding-top: 15px;
    }

    .daterangepicker .calendar-table td {
        font-size: var(--bs-body-font-size);
    }

    .daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
        width: 24px;
        height: 24px;
        min-width: 24px;
        line-height: 24px;
        border: none;
        padding: 0;
    }

    .daterangepicker .drp-calendar.left .calendar-table {
        padding-right: 0;
        border: none;
    }

    .daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
        vertical-align: middle !important;
        position: relative;
        top: -1px;
    }

    .daterangepicker td.in-range {
        background-color: #f1f5f8;
    }

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

/* Setting Page
======================================================*/
.form-group-merge .form-control {
    padding-right: 195px;
}

.form-group-merge .button {
    position: absolute;
    top: 0px;
    right: 0px;
}

.text-setting {
    max-width: 576px;
}

    .text-setting h3 {
        margin-bottom: 10px;
    }

    .text-setting h4 {
        margin-bottom: 20px;
    }

/* Card
======================================================*/
.card-item:hover {
    border-color: transparent;
    -webkit-box-shadow: 10px 7px 24px #EFEDE5;
    -moz-box-shadow: 10px 7px 24px #EFEDE5;
    box-shadow: 10px 7px 24px #EFEDE5;
}

.card-item h3 {
    margin-bottom: 4px;
}

.card-item small {
    margin-bottom: 14px;
    display: inline-block;
    width: 100%;
}

.card-item h4 {
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-item ul {
    margin-top: 16px;
    margin-bottom: 32px;
}

    .card-item ul li {
        display: flex;
        justify-content: space-between;
        margin-bottom: 14px;
    }

        .card-item ul li span {
            color: var(--bs-secondary);
            font-family: var(--bs-font-heading);
            font-weight: var(--bs-font-medium);
            min-width: 77px;
        }

.card-item .dropdown {
    position: absolute;
    top: 0;
    right: 0px;
}

.card-dropdown {
    padding-right: 50px;
    position: relative;
}

/* Payment
======================================================*/
.payment-block {
    padding: var(--bs-gutter) calc(0.75 * var(--bs-gutter));
    margin: 20px 0 30px;
}

    .payment-block .icon {
        min-width: 44px;
        height: 44px;
        margin-right: 16px;
    }

    .payment-block h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .payment-block .button:not(:last-child) {
        margin-right: 10px;
        min-width: 150px;
    }

.table-payment {
    border-collapse: separate;
    border-spacing: 0 5px;
}

    .table-payment .badge {
        text-transform: capitalize;
        min-width: 96px;
    }

    .table-payment thead tr th {
        color: var(--bs-secondary);
    }

        .table-payment thead tr th:first-child, .table-payment tbody tr td:first-child {
            -webkit-border-radius: var(--bs-border-radius-xs) 0 0 var(--bs-border-radius-xs);
            -moz-border-radius: var(--bs-border-radius-xs) 0 0 var(--bs-border-radius-xs);
            border-radius: var(--bs-border-radius-xs) 0 0 var(--bs-border-radius-xs);
        }

        .table-payment thead tr th:last-child, .table-payment tbody tr td:last-child {
            -webkit-border-radius: 0 var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0;
            -moz-border-radius: 0 var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0;
            border-radius: 0 var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0;
        }

    .table-payment tbody tr td {
        border-top: 1px solid #F2F2F2;
        border-bottom: 1px solid #F2F2F2;
        font-weight: var(--bs-font-medium);
        color: var(--bs-body-color);
        background: transparent !important;
        -webkit-box-shadow: 0px 3.5px 5.5px rgba(var(--bs-black-rgb), 0.02);
        -moz-box-shadow: 0px 3.5px 5.5px rgba(var(--bs-black-rgb), 0.02);
        box-shadow: 0px 3.5px 5.5px rgba(var(--bs-black-rgb), 0.02);
    }

        .table-payment tbody tr td:first-child {
            border-left: 1px solid #F2F2F2;
        }

        .table-payment tbody tr td:last-child {
            border-right: 1px solid #F2F2F2;
        }

.table-title {
    margin-bottom: 14px;
}

/* Job Detail
======================================================*/
.row-milestone {
    counter-increment: milestone;
}

.row-milestone:not(:first-child) {
    margin-top: 0;
}

    .row-milestone label[for="milestone"]::before {
        content: counter(milestone) " ";
    }

.card-job {
    width: calc(100% - 380px);
    flex: 0 0 calc(100% - 380px);
}

.card-job-fullwidth {
    width: 100% !important;
    flex: 0 0 auto;
}


.card-job .tab-scroll {
    padding-right: 250px;
}

.text-heading {
    margin-bottom: 20px;
}

.text-button {
    margin-top: -5px;
}

.text-button .button {
    margin-top: 5px;
    margin-right: 10px;
    min-width: 150px;
}

.text-content {
    margin-bottom: var(--bs-gutter);
}

    .text-content h2 {
        margin-bottom: 6px;
    }

    .text-content ul:not(.gallery-block):not(.gallery-file) li {
        font-family: var(--bs-font-heading);
        font-weight: 500;
        position: relative;
        padding-left: 16px;
    }

        .text-content ul:not(.gallery-block):not(.gallery-file) li:before {
            content: '';
            position: absolute;
            width: 5px;
            height: 5px;
            background: var(--bs-primary);
            left: 0;
            top: 8px;
        }

    .text-content .file-name i {
        width: 20px;
        flex: 0 0 20px;
    }

.gallery-block {
    margin: -14px -7px 0;
}

    .gallery-block li {
        padding: 14px 7px 0;
    }

    .gallery-block figure {
        width: 90px;
        height: 90px;
    }

    .gallery-block .icon {
        position: absolute;
        top: 19px;
        right: 12px;
    }

    .gallery-block .icon svg path {
        fill: var(--bs-danger);
    } 

.tab-action {
    position: absolute;
    top: -50px;
    right: 0;
    padding-bottom: 0;
    height: 40px;
}

    .tab-action .link:not(:last-child) {
        margin-right: 30px;
    }

    .tab-action .link {
        padding-bottom: 5px;
    }

.card-row {
    margin-bottom: var(--bs-space-45);
}

    .card-row li {
        flex: 0 0 auto;
        width: 25%;
        padding: calc(var(--bs-gutter) * 0.5);
    }

        .card-row li:not(:last-child) {
            border-right: 1px solid var(--bs-border-color);
        }

.table-title {
    margin-bottom: 12px;
}

.table-tab {
    min-width: 686px;
}

.table-tab tbody tr:first-child {
    border-top: 1px solid var(--bs-border-color);
}

.table-tab tbody tr td {
    font-size: var(--bs-body-font-size);
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-medium);
    padding-top: 8px;
    padding-bottom: 8px;
    height: 57px;
}

    .table-tab tbody tr td:first-child {
        padding-left: 0;
    }

/* Dispute Detail
======================================================*/
.content-text {
    padding-right: calc(2 * var(--bs-space-32));
}

    .content-text h2, .content-text h3, .content-text ul {
        margin-bottom: 8px;
    }

    .content-text h4 {
        margin-bottom: 20px;
    }

    .content-text ul li {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

/* Money Detail
======================================================*/
.list-item {
    padding-right: var(--bs-space-45);
    font-size: var(--bs-font-size-h4);
    line-height: var(--bs-line-height-h4);
}

    .list-item li {
        margin-bottom: var(--bs-gutter);
        display: flex;
    }

        .list-item li label {
            font-size: var(--bs-small-font-size);
            line-height: var(--bs-small-line-height);
            width: 130px;
            flex: 0 0 auto;
            margin-right: 10px;
            opacity: 0.7;
        }

        .list-item li .link {
            word-break: break-all;
            white-space: initial;
        }

        .list-item li .form-control {
            padding-bottom: 0;
        }

        .list-item li.select-box label {
            padding-top: 17px;
        }

/* User Detail
======================================================*/
.heading {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: var(--bs-gutter);
}

    .heading h3 {
        padding-right: var(--bs-gutter);
    }

.form-group-link .form-control {
    padding-right: 130px;
}

.form-group-link .link {
    position: absolute;
    right: 0;
    top: 15px;
}

.form-group-link--right-margin .link {
    position: absolute;
    margin-right: 10px;
    right: 0px;
    top: 15px;
}

/* Account
======================================================*/
.section-account {
    padding-top: var(--bs-space-45);
    padding-bottom: var(--bs-space-45);
}

    .section-account .card {
        margin-top: 40px;
        max-width: 592px;
    }

    .section-account .brand-logo img {
        min-width: 280px;
    }

/* Account
======================================================*/
.text-editor h2, .text-editor h3, .text-editor h4, .text-editor h5, .text-editor h6 {
    margin-bottom: 10px;
    padding-top: 10px;
}

.text-editor ol {
    counter-reset: ol;
}

    .text-editor ul li, .text-editor ol li {
        padding-left: 16px;
    }

        .text-editor ul li:before {
            content: '';
            position: absolute;
            width: 5px;
            height: 5px;
            background: var(--bs-primary);
            left: 0;
            top: 8px;
        }

        .text-editor ol li:before {
            counter-increment: ol;
            content: counter(ol) ". ";
            position: absolute;
            left: 0;
            top: 0px;
            color: var(--bs-secondary);
        }

/* Chat Module
======================================================*/
.chat-module .card-profile {margin-left: var(--bs-gutter);}
.card:not(.chat-sidebar) .chat-body .mCSB_scrollTools {opacity: 0 !important;}
.card.card-profile.mCustomScrollbar .mCSB_scrollTools {opacity: 1 !important;}

.chat-sidebar {width: 100%; max-width: 390px; margin-right: var(--bs-gutter);}
.chat-sidebar .dots {width: 9px; height: 9px; display: inline-block; position: absolute; top: -1px; left: -4px; border: 1px solid var(--bs-white); z-index: 1; }
.chat-sidebar .avatar {margin-bottom: 16px;}
.chat-sidebar .avatar figure {width: 33px; min-width: 33px; height: 33px; margin-right: 15px; text-align: center; line-height: 33px; font-weight: bold; }
.chat-sidebar ul li {margin-bottom: 20px;}
.chat-sidebar ul li a {display: inline-block; padding: 15px; width: 100%; -webkit-box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02); -moz-box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02); box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);}
.chat-sidebar ul li a.active h4, .chat-sidebar ul li a.active .h4 {color: var(--bs-white) !important;}
.chat-sidebar ul li a.active span.text-body {color: #DBDBDB !important; opacity: 0.6;}
.chat-sidebar ul li a.active .dots {border-color: var(--bs-secondary);}
.chat-sidebar ul li h4, .chat-sidebar ul li .h4 {line-height: 17px; margin-bottom: 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: inline-block;}
.chat-sidebar ul li span:not(.h4) {font-size: 11px; line-height: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: inline-block;}
.chat-sidebar ul li span.count {line-height: 20px; text-align: center; margin-left: 15px; width: 20px; height: 20px; min-width: 20px;}
.chat-sidebar ul li span.icon-attachment {margin-left: 15px; width: 16px; height: 20px; min-width: 16px; padding: 2px 0;}

.chat-user-item {width: calc(100% + var(--bs-gutter)); margin-right: calc(-1 * var(--bs-gutter));}
.chat-user-item > .mCustomScrollBox {padding-right: var(--bs-gutter);}

.input-box {margin-top: 20px;} 
.input-box .emojionearea.emojionearea-inline {background: var(--bs-white); border: 1px solid #E0E1E2; -webkit-border-radius: var(--bs-border-radius-sm); -moz-border-radius: var(--bs-border-radius-sm); border-radius: var(--bs-border-radius-sm); padding: 26px 125px 26px 95px; font-size: 14px; width: 100%; height: auto; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.input-box .emojionearea.emojionearea-inline > .emojionearea-editor {height: 20px; padding: 0; left: 0; top: 0; position: relative; right: 0; }
.input-box .button-send {position: absolute; padding: 5px 16px; top: 19px; right: 14px; color: var(--bs-primary); -webkit-box-shadow: 10px 10px 40px rgba(29, 77, 7, 0.1); -moz-box-shadow: 10px 10px 40px rgba(29, 77, 7, 0.1); box-shadow: 10px 10px 40px rgba(29, 77, 7, 0.1); }
.input-box .button-send:hover {background-color: var(--bs-primary); border-color: var(--bs-primary); color: var(--bs-white); }
.input-box label {position: absolute; cursor: pointer; width: 24px; height: 24px; top: 0px; left: 20px; bottom: 0px; margin: auto; }
.input-box .chat__typing::after {content: "Sending."; font-size: 10px; position: absolute; line-height: 14px; bottom: -14px; left: 10px; -webkit-animation: type 1s ease-in-out 0s infinite; -moz-animation: type 1s ease-in-out 0s infinite; animation: type 1s ease-in-out 0s infinite; }
.input-box .emojionearea.emojionearea-inline > .emojionearea-button {left: 55px; top: 0; bottom: 0; margin: auto; right: inherit; width: 24px; height: 24px; opacity: 1; background: transparent url("../images/icon-emoji.svg") no-repeat scroll center center;}
.input-box .emojionearea.emojionearea-inline > .emojionearea-button > div {display: none !important;}

.admin-chat-container {
    padding: 10px;
    border-radius: 20px;
    background: var(--bs-body-bg);
}

.admin-chat-container .user-input {
    width: 100%;
    border: none;
    background: var(--bs-body-bg);
}

.emojionearea .emojionearea-picker.emojionearea-picker-position-top {
    left: 0;
    right: inherit;
}
.emojionearea .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper::after {left: 20px; right: inherit; }
.emojionearea .emojionearea-picker .emojionearea-search > input {border: 1px solid var(--bs-border-color); padding: 5px; font-size: 10px;}

@keyframes type {
  0%   {content: "Sending";}
  20%  {content: "Sending.";}
  40%  {content: "Sending..";}
  60%  {content: "Sending...";}
  80%  {content: "Sending....";}
  100%  {content: "Sending.....";}
}

.chat-body {height: calc(100vh - 104px - var(--bs-gutter));}
.card-inner .chat-body {height: calc(100vh - 106px - calc(var(--bs-gutter) * 3));}
.chat-body-card {height: calc(100vh - 323px - var(--bs-gutter));}

.chat-main {display: flex; flex-direction: column; position: relative;}
/*.chat-main::after {content: ""; display: inline-block; pointer-events: none; width: 100%; height: 50px; position: absolute; top: 0px; left: 0px; background: -webkit-linear-gradient(180deg, var(--bs-white) 3.33%, rgba(255, 255, 255, 0.0001) 99.3%); background: -moz-linear-gradient(180deg, var(--bs-white) 3.33%, rgba(255, 255, 255, 0.0001) 99.3%); background: linear-gradient(180deg, var(--bs-white) 3.33%, rgba(255, 255, 255, 0.0001) 99.3%);}*/
.chat-main > li {margin-bottom: calc(0.5 * var(--bs-gutter)); width: 100%;}
.chat-main p {margin-bottom: 0;}
.chat-main .user-chat-para {border: 1px solid rgba(151, 151, 151, 0.2); display: inline-block; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; padding: 15px 16px; }
.chat-main span:not(.user-chat-para) {font-size: 10px; font-weight: 500;}
.chat-main .user-image {border: 1px solid rgba(151, 151, 151, 0.2); padding: 15px; display: flex; flex-wrap: wrap; margin-top: 12px; margin-right: auto; counter-reset: ul;}
.chat-main .user-image:empty {display: none;}
.chat-main .user-image li {padding: 5px;}
.chat-main .user-image li figure, .chat-main .user-image li:nth-child(3):last-child figure {width: 108px; min-width: 108px; height: 108px;}
.chat-main .user-image li:nth-child(3) figure {width: 54px; min-width: 54px; }
.chat-main .user-image li:nth-child(3) ~ li:not(:last-child) {display: none; }
.chat-main .user-image li:nth-child(3) ~ li::before {counter-increment: ul; content: "+" counter(ul); }
.chat-main .user-image li:nth-child(3) ~ li {width: 28px; height: 28px; pointer-events: none; position: absolute; background: var(--bs-body-bg); top: 60px; text-align: center; right: 33px; line-height: 28px; padding: 0; }
.chat-main .user-image li:nth-child(3) ~ li figure {opacity: 0;}
.chat-main .chat-date {font-weight: 500; font-size: 12px; line-height: 15px; letter-spacing: 1px; text-transform: uppercase; color: #DBDBDB; padding-bottom: 10px; border-bottom: 1px solid #F2F2F2; text-align: center; }

.chat-main .chat-from .avatar-image {display: none;}
.chat-main .chat-from .user-chat-para, .chat-main .chat-from .user-image {background-color: #f9fafb; border-color: transparent;}
.chat-main .chat-from .user-image {margin-left: auto; margin-right: 0; flex-direction: row-reverse;}
.chat-main .chat-from .user-image:only-child {margin-top: 0;}
.chat-main .chat-from .user-image li:nth-child(3) ~ li {left: 33px;}
.chat-main .chat-from .user-data, .chat-main .chat-from .__chat__ {margin-left: auto;}

.chat-filter {margin-bottom: var(--bs-gutter);}
.chat-filter input {padding: 8px 20px 8px 38px; background: var(--bs-white) url("../images/icon-search.svg") no-repeat scroll left 12px center; border: 1px solid #E2E8F0; width: 100%; line-height: 22px; }
.chat-filter .icon {width: 40px; height: 40px; background-color: var(--bs-white); min-width: 40px; text-align: center; border: 1px solid #E2E8F0; margin-left: 10px;}

.chat-head {margin: calc(-0.75 * var(--bs-gutter)) calc(-0.75 * var(--bs-gutter)) 0; padding: var(--bs-space-32); border-bottom: 1px solid var(--bs-border-color);}

.icon-milestone-delete {position: absolute; top: 14px; right: 0; }
.icon-milestone-delete .form-control {padding-right: 35px;}

/* Media Query
======================================================*/
@media (max-width: 1599px) {
    .progress-box {
        min-width: 126px;
        height: 126px;
        margin-left: 10px;
    }

        .progress-box::before {
            top: 35px;
        }

    .progress-status {
        top: 60px;
    }

    .chat-module .card-profile,
    .chat-sidebar {
        max-width: 300px;
    }
}

@media (max-width: 1399px) {
    header {
        padding: 20px var(--bs-gutter);
    }

    .nav-head {
        padding: 0;
    }

        .nav-head .breadcrumb {
            margin-bottom: 2px;
        }

    .avatar-text {
        max-width: 70px;
    }

    .header-search input:focus {
        width: 160px;
    }

    .payment-block h2 {
        font-size: 28px;
    }

    .card-job .tab-scroll, .content-text, .list-item {
        padding-right: 0;
    }

    .card-job {
        width: calc(100% - 330px);
        flex: 0 0 calc(100% - 330px);
        padding: 0 var(--bs-gutter) 0 0;
    }

    .card-profile {
        flex: 0 0 auto;
        width: 330px;
    }

    .tab-action {
        position: static;
        height: auto;
        margin-top: var(--bs-gutter);
        justify-content: flex-start !important;
    }

    .notification-bar::before {
        top: 80px;
    }

    .chat-module .card-profile {
        display: none;
    }

    .chat-body .card-toggle {
        display: flex !important;
    }

    .chat-body .chat-toggle {
        display: flex !important;
    }
}

@media (max-width: 1199px) {
    body {
        padding-left: 0;
    }

    .aside-sidebar:not(.open) {
        left: -270px;
    }

    .row-dashboard .card-information {
        width: 100%;
    }

    .progress-box {
        margin-top: var(--bs-gutter);
        margin-left: 0;
        max-width: 126px;
    }
}

@media (max-width: 991px) {
    header {
        background-color: var(--bs-white);
        padding: 0px;
    }

        header nav {
            padding: 5px var(--bs-gutter);
        }

        header ul li.head-button {
            -ms-flex-order: 1;
            order: 1;
            margin: -5px calc(-1 * var(--bs-gutter)) -5px 12px;
        }

        header ul li .button:not(.button-submit) {
            font-size: 0;
            padding: 12px;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
        }

    .notification-bar::before {
        top: 50px;
    }

    .nav-head {
        -ms-flex-order: 1;
        order: 1;
        width: 100%;
        padding: 14px 60px 14px var(--bs-gutter);
        border-top: 1px solid var(--bs-border-color);
        border-bottom: 1px solid var(--bs-border-color);
    }

        .nav-head .breadcrumb {
            display: none;
        }

    .nav-toggle {
        margin-right: 0;
        margin-left: var(--bs-gutter);
    }

    .header-search {
        position: absolute !important;
        top: 55px;
        right: 5px;
        left: 5px;
        text-align: right;
    }

        .header-search input:focus {
            width: 100%;
        }

    section {
        padding-top: var(--bs-gutter);
    }

    .card-profile,
    .card-profile.card-profile-sm {
        position: absolute;
        top: 0px;
        right: -100%;
        background-color: var(--bs-white);
        flex: 0 0 auto;
        width: 100%;
        height: 100%;
        overflow: auto;
        z-index: 2;
        border: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .card-profile.card-profile-sm .card-body {
        padding: var(--bs-gutter) !important;
    }

    .card-profile.open {
        right: 0;
    }

    .card-profile.open ~ .card-backdrop {
        opacity: 0.7;
        visibility: visible;
    }

    .card-backdrop {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: var(--bs-dark);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        z-index: 1;
    }

    .table-head {
        margin-bottom: 0;
        padding: calc(0.75 * var(--bs-gutter)) var(--bs-gutter) calc(0.50 * var(--bs-gutter));
        min-height: initial;
    }

    .dataTables_filter {
        width: 100%;
        padding: 0 var(--bs-gutter) var(--bs-gutter);
        background-color: rgba(var(--bs-dark-rgb), 0.05);
        margin-right: 0 !important;
    }

        .dataTables_filter label, .dataTables_filter label input {
            width: 100%;
        }

    .card-job {
        width: 100%;
        flex: 0 0 100%;
        padding: 0;
    }

    .card-user .card-body {
        padding-right: 0;
    }

    .tab-disputes .dataTables_filter {
        padding-right: var(--bs-gutter);
        padding-top: var(--bs-gutter);
        margin-top: var(--bs-gutter);
        -webkit-border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
        -moz-border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
        border-radius: var(--bs-border-radius-xs) var(--bs-border-radius-xs) 0 0;
    }

    .heading {
        padding-right: 25px;
    }

    .progress-box {
        margin-top: 0;
        margin-left: 10px;
    }


    .chat-body-card,
    .chat-body,
    .card-inner .chat-body {
        height: calc(100vh - 200px);
        min-height: 500px;
    }

    .chat-sidebar {
        max-width: 100%;
        margin-right: 0;
        margin-bottom: var(--bs-gutter);
        background: transparent;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .chat-sidebar .chat-body {
        height: auto;
        min-height: inherit;
        padding: 0;
    }


    .chat-sidebar .chat-user-item {
        opacity: 0;
        visibility: hidden;
        position: fixed;
        padding: var(--bs-gutter);
        background: var(--bs-white);
        z-index: 111;
        background-color: rgba(var(--bs-black-rgb), 0.7);
        top: 0;
        left: 0px;
        width: 100%;
        height: 100%;
        align-items: center;
    }

    .chat-sidebar .chat-user-item.open {
        opacity: 1;
        visibility: visible;
    }

    .chat-sidebar ul {
        padding: var(--bs-gutter);
        background-color: var(--bs-white);        
    }

    .chat-filter {
        margin-bottom: 0;
    }

    .chat-module .card-profile {
        display: inline-block;
    }

    .card-inner > .card-body {
        padding: 0;
    }

    .card-inner .card {
        border-color: transparent;
        border-top-color: var(--bs-border-color);
        -webkit-border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm);
        -moz-border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm);
        border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm);
    }
    .chat-user-item > .mCustomScrollBox {
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    .card-table .card-body {
        padding: 0 0 var(--bs-gutter);
    }

    .dataTables_filter label, .dataTables_filter label input {
        width: 100%;
    }

    .daterangepicker {
        margin-right: auto;
        margin-left: auto;
        left: 0px !important;
    }

    .payment-block {
        flex-direction: column;
        text-align: center;
    }

        .payment-block h2 {
            font-size: 22px;
        }

        .payment-block .icon {
            margin-right: 0;
            margin-bottom: 10px;
        }

    .card-row li {
        width: 100%;
    }

        .card-row li:not(:last-child) {
            border-right: none;
            border-bottom: 1px solid var(--bs-border-color);
        }

    .tab-disputes .dataTables_filter {
        margin-top: 0;
    }

    .progress-box {
        margin-top: var(--bs-gutter);
        margin-left: 0px;
    }

    .section-account .brand-logo img {
        min-width: 200px;
    }

    .input-box .emojionearea.emojionearea-inline {
        padding: 12px 50px 12px 75px;
        line-height: 24px;
    }
    .input-box .button-send {
        font-size: 0;
    }
    .input-box .button-send {
        padding: 5px 3px;
        top: 7px;
        right: 7px;
        font-size: 0;
        width: 36px;
    }

    .input-box label {
        left: 10px;
    }
    .input-box .emojionearea.emojionearea-inline > .emojionearea-button {
        left: 40px;
    }

    .chat-main .user-image {
        padding: 5px;
    }
    .chat-main .user-image li figure,
    .chat-main .user-image li:nth-child(3):last-child figure {
        width: 54px;
        min-width: 54px;
        height: 54px;
    }
    .chat-main .user-image li:nth-child(3) figure {
        width: 27px;
        min-width: 27px;
    }
    .chat-main .user-image li:nth-child(3) ~ li {
        width: 27px;
        height: 27px;
        top: 24px;
        right: 10px;
        line-height: 27px;
    }

    .chat-main .chat-from .user-image li:nth-child(3) ~ li {
        left: 10px;
    }
}

@media (max-width: 575px) {
    .dataTables_info {
        display: none;
    }

    .dataTables_paginate {
        margin-right: auto;
    }

    .daterangepicker {
        width: 280px;
    }

        .daterangepicker.show-calendar .drp-calendar {
            width: 100%;
        }

        .daterangepicker.show-ranges.ltr .drp-calendar.left {
            margin-right: 0;
        }

    .table-head {
        text-align: center;
    }

        .table-head .button {
            margin-top: 5px;
            width: 100%;
        }

    .button {
        padding-left: calc(0.75 * var(--bs-gutter));
        padding-right: calc(0.75 * var(--bs-gutter));
    }

    .form-group-merge .form-control {
        padding-right: 0px;
    }

    .form-group-merge .button {
        position: relative;
        top: 0px;
        right: 0px;
        margin-top: var(--bs-gutter);
    }

    .form-action {
        padding-top: 0;
        flex-direction: column;
    }

        .form-action .button, .form-action .link {
            margin-bottom: 10px;
            margin-left: 0;
            margin-right: 0;
        }

    .payment-block .button:not(:last-child) {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .gallery-block li {
        width: 33.3333%;
    }

        .gallery-block li figure {
            width: 100%;
            height: auto;
            padding-top: 100%;
        }

    .text-button .button {
        min-width: auto;
        margin-right: 5px;
    }

    .list-item li {
        flex-wrap: wrap;
        flex-direction: column;
    }

        .list-item li label {
            margin-right: 0;
            margin-bottom: 2px;
            width: 100%;
        }

        .list-item li.select-box label {
            padding-bottom: 0;
        }

    .heading {
        flex-wrap: wrap;
    }

    .chat-head {
        padding: var(--bs-gutter);
    }

    .chat-head .h2 {
        font-size: var(--bs-font-size-h5);
        line-height: var(--bs-line-height-h5);
    }

    .user__item{
        cursor:pointer;
    }
}


#terms-pdf-container,
#privacy-pdf-container {
    display: block;
    margin: 0 auto;
}

.label-tooltip,
.fee-tooltip {
    cursor: pointer;
    pointer-events: all;
}

.table-main--border {
    border-top: 1px solid rgba(var(--bs-black-rgb), 0.1);
    border-bottom: 1px solid rgba(var(--bs-black-rgb), 0.1);
}

.file-upload-dropzone {
    border: 1px dashed gray;
    width: 100%;
    height: 150px;
}


/*OR Separator in login page*/
#or {
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

#or::before,
#or::after {
    position: absolute;
    width: 45%;
    height: 1px;
    top: 24px;
    background-color: var(--bs-border-color);
    content: '';
}

#or::before {
    left: 0;
}

#or::after {
    right: 0;
}

.job-card-location {
    padding-left: 10px;
}

/**
    User menu
*/

.user-menu__user-accounts {
    font-size: 1.15rem;
}

.user-menu__user-accounts li {
    padding-bottom: 0.15rem;
}

.user-menu__user-accounts i {
    vertical-align: middle!important;
    width: 20px;
}

.user-accounts__account--active {
    color: var(--bs-primary);
}

.dropdown-menu {
    min-width: 300px;
}

.company-autocomplete .form-label {
    top: -4px;
}

.modal .company-autocomplete .autoComplete_wrapper > ul {
    position: relative;
}

.verification-status.badge {
    font-size: var(--bs-extra-small-font-size);
    width: 120px;
}

.verification-status__passed {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

.verification-status__created, 
.verification-status__pending {
    color: var(--bs-info);
    background-color: rgba(var(--bs-info-rgb), 0.1);
}

.verification-status__error,
.verification-status__failed {
    color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.1);
}

.verification-status__review {
    color: var(--bs-warning);
    background-color: rgba(var(--bs-warning-rgb), 0.1);
}

.verification-status__none {
    color: #dec380;
    background-color: rgba(252, 241, 214, 0.4);
}

.verification-status-overview {
    margin-bottom: 50px;
}

.company-details,
.company-directors,
.company-shareholders,
.company-due-diligence {
    margin: 30px 0px;
}

.unselectable {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

.floating-admin-chat {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    font-size: 2rem;
    padding: 1rem;
    background: var(--bs-primary);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
}

.floating-admin-chat-window {
    background: white;
    position: fixed;
    height: 500px;
    width: 250px;
    border: 1px;
    right: 0px;
    bottom: 0px;
    border-radius: 10px;
    transform: translate(-55px, -65px);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

@media (min-width: 360px) {
    .floating-admin-chat-window {
        width: 300px;
        transform: translate(-55px, -65px);
    }
}

@media (min-width: 375px) {
    .floating-admin-chat-window {
        width: 315px;
        transform: translate(-55px, -65px);
    }
}

@media (min-width: 390px) {
    .floating-admin-chat-window {
        width: 330px;
        transform: translate(-55px, -65px);
    }
}

@media (min-width: 412px) {
    .floating-admin-chat-window {
        width: 350px;
        transform: translate(-55px, -65px);
    }
}

@media (min-width: 430px) {
    .floating-admin-chat-window {
        width: 365px;
        transform: translate(-55px, -65px);
    }
}

@media (min-width: 768px) {
    .floating-admin-chat-window {
        width: 400px;
        transform: translate(-55px, -65px);
    }
}


.floating-admin-chat-window__header {
    background: var(--bs-primary);
    color: white;
}

.floating-admin-chat-window__header.card-head {
    border-radius: 10px 10px 0px 0px;
    padding: 15px;
}

.floating-admin-chat-window .card-body {
    overflow-y: scroll;
    padding: 15px;
}

.floating-admin-chat-window .card-footer {
    padding: 15px;

    border-radius: 0px 0px 10px 10px;
    padding: 15px;
    border-top: none;
    background: white;
}

.floating-admin-chat-window__header > .header__avatar {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    color: gray;
}

.floating-admin-chat-window__header > .header__name {
    padding-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.floating-admin-chat-window__header > .header__name > h4{
    color: white;
}

.floating-admin-chat-window > .card {
    height: 100%;
    box-shadow: none;
}

.floating-admin-chat-window__messages .chat-window__messages {
    margin-bottom: 30px;
}

.chat-window__messages > li {
    margin-bottom: 10px;
}

.chat-window__messages .chat-window__message {
    max-width: 80%;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 5px;
}

.floating-admin-chat-window__messages .message--sent {
    background: var(--bs-primary);
    color: white;
}

.floating-admin-chat-window__messages .message--received {
    background: var(--bs-body-bg);
    color: black;
}

.floating-admin-chat-window__footer > input {
    border: 1px solid;
    width: 100%
}

.message-menu__count {
    height: 20px;
    min-width: 20px;
    margin-left: 10px;
    text-align: center;
}

#floating-admin-chat__badge {
    height: 20px;
    min-width: 20px;
    margin-left: 10px;
    text-align: center;
    font-size: var(--bs-extra-small-font-size);
    position: absolute;
    transform: translate(20px, -20px);
}

.clickable {
    cursor: pointer !important;
}

/* Dashboard Job Search
======================================================*/
.job-search {
    margin-top: 0px !important;
}

.job-search input {
    padding: 8px 20px 8px 38px;
    background: var(--bs-white) url("../images/icon-search.svg") no-repeat scroll left 12px center;
    border: 1px solid #E2E8F0;
    width: 100%;
    line-height: 22px;
}

.job-filter {
    margin-top: 5px;
}

.job-filter .filter-button {
    border-width: 1px;
    border-style: solid;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: var(--bs-extra-small-font-size);
    line-height: 15px;
    text-transform: uppercase;
    padding: 7px var(--bs-gutter);
    text-align: center;
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-font-light);
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    z-index: 1;
    
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);

    cursor: pointer;
    user-select: none;
}

.job-filter .filter-button .filter-label {
    margin-left: 5px 
}

.job-filter .dropdown-item.dropdown-item.active {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white);
}