@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
    --color1: #00B6B7;
    --color2: #ee3f22;
    --color3: #891f6c;
    --colorBackground: #01A8A9;
    --colorHightLight: #00C65D;
    --colorTextBase: #0b2154;
    --colorPrimaryText: #303645;
    --colorSecondaryText: #888;
    --GrayTint-50: #F4F5F6;
    --Text-Primary-Text: #141414;
    --Text-Tertiary-Text: #708090;
    --Text-Secondary-Text: #707070;
    --Status-Valid: #00C763;
    --Status-InValid: #E03E3E;
    --Border-Primary-Border: #C2C2C2;
    --Border-Secondary-Border: #E0E0E0;
    --Background-Background: #F2F2F2;
    --VtestCompact-OnPrimary: #F5F5F5;
    --DarkBlue-400: #1347c2;
    --bg-grad-45: linear-gradient(45deg, #ee8222 0, #EE3F22 30%, #FFCD42 100%);
    --bg-grad-90: linear-gradient(90deg, #ee8222 0, #EE3F22 30%, #FFCD42 100%);
    --bg-grad-45u: linear-gradient(-45deg, #ee8222 0, #EE3F22 30%, #FFCD42 100%);
    font-size: 10px;
}
body {
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    color: var( --Text-Primary-Text);
    background-color: #fff;
    overflow-x: hidden;
}

.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 10px
}

h1 {
    font-size: 30px
}

h2 {
    font-size: 24px
}

h3 {
    font-size: 16px
}

h4 {
    font-size: 14px
}

h5 {
    font-size: 12px
}

h6 {
    font-size: 10px
}

h3, h4, h5 {
    margin-top: 5px;
    font-weight: 600
}
.size-box {
    height: 1px;
    flex: 1 0 0;
}
.border-gradient {
    border: double 2px transparent;
    background-image: linear-gradient(white, white), linear-gradient(45deg, rgba(21, 12, 222, 1) 0%, rgba(241, 31, 76, 1) 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    padding-bottom: 5px;
}
.border-grad-54u {
    background: var(--bg-grad-45u) !important;
    position: relative;
}
    .border-grad-54u > div {
        z-index: 1;
    }
    .border-grad-54u:before {
        content: "";
        background: #fff;
        width: calc(100% - 4px);
        height: calc(100% - 9px);
        position: absolute;
        top: 2px;
        left: 2px;
        border-radius: 1.6rem;
        z-index: 0;
    }
.block {
    display: block;
}

.clear {
    display: block;
    overflow: hidden;
}

a {
    cursor: pointer;
}

    a:hover,
    a:focus {
        text-decoration: none;
    }
/* #region Button*/
.btn {
    border-radius: 5rem;
    font-weight: 400;
    padding: 8px 16px
}
    .btn.btn-link {
        padding: 6px 6px;
    }
.btn-lg, .btn-group-lg > .btn {
    padding: 1rem 1.6rem;
    font-size: 1.5rem;
    line-height: 1.6;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: thin dotted;
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.float-e-margins .btn {
    margin-bottom: 0.5rem;
}
.btn-lg > .fa, .btn-group-lg > .btn > .fa {
    font-size: 1.33333333em;
    line-height: .75em;
    vertical-align: -15%;
}
.lg-icon,
.btn-link > [class^="icon-"], .btn-link > [class*=" icon-"],
.btn-lg > [class^="icon-"], .btn-lg > [class*=" icon-"],
.btn-group-lg > .btn > [class^="icon-"], .btn-group-lg > .btn > [class*=" icon-"] {
    font-size: 2.4rem;
    vertical-align: -16%;
}
    .lg-icon.icon-home-o {
        font-size: 2.2rem;
    }

    .lg-icon.icon-all-out-o {
        font-size: 2.5rem;
    }
.btn > .fa {
    padding: 0 0.5rem;
}
.btn-w-m {
    min-width: 12rem;
}

.btn-success.btn-outline {
    color: #0aa658;
}
.btn-main.btn-outline {
    color: #E2E8FD;
}
.btn-primary.btn-outline {
    color: #00B6B7;
}

.btn-secondary.btn-outline {
    color: #F2F2F2;
}

.btn-info.btn-outline {
    color: #23c6c8;
}

.btn-warning.btn-outline {
    color: #f8ac59;
}

.btn-danger.btn-outline {
    color: #ed5565;
}

    .btn-success.btn-outline:hover,
    .btn-main.btn-outline:hover,
    .btn-primary.btn-outline:hover,
    .btn-secondary.btn-outline:hover,
    .btn-info.btn-outline:hover,
    .btn-warning.btn-outline:hover,
    .btn-danger.btn-outline:hover {
        color: #fff;
    }

.btn-success {
    background-color: #0aa658;
    border-color: #0aa658;
    color: #FFFFFF;
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active,
    .btn-success.active,
    .open .dropdown-toggle.btn-success {
        background-color: #0b8e4c;
        border-color: #0b8e4c;
        color: #FFFFFF;
    }

    .btn-success:active,
    .btn-success.active,
    .open .dropdown-toggle.btn-success {
        background-image: none;
    }

        .btn-success.disabled,
        .btn-success.disabled:hover,
        .btn-success.disabled:focus,
        .btn-success.disabled:active,
        .btn-success.disabled.active,
        .btn-success[disabled],
        .btn-success[disabled]:hover,
        .btn-success[disabled]:focus,
        .btn-success[disabled]:active,
        .btn-success.active[disabled],
        fieldset[disabled] .btn-success,
        fieldset[disabled] .btn-success:hover,
        fieldset[disabled] .btn-success:focus,
        fieldset[disabled] .btn-success:active,
        fieldset[disabled] .btn-success.active {
            background-color: #1fc873;
            border-color: #1fc873;
        }

.btn-main {
    background-color: #E2E8FD;
    border-color: #E2E8FD;
    color: var(--Primary-Primary, #00B6B7);
}

    .btn-main:hover,
    .btn-main:focus,
    .btn-main:active,
    .btn-main.active,
    .open .dropdown-toggle.btn-main {
        background-color: #cfd8fc;
        border-color: #cfd8fc;
        color: var(--Primary-Primary, #00B6B7);
    }

    .btn-main:active,
    .btn-main.active,
    .open .dropdown-toggle.btn-main {
        background-image: none;
    }

        .btn-main.disabled,
        .btn-main.disabled:hover,
        .btn-main.disabled:focus,
        .btn-main.disabled:active,
        .btn-main.disabled.active,
        .btn-main[disabled],
        .btn-main[disabled]:hover,
        .btn-main[disabled]:focus,
        .btn-main[disabled]:active,
        .btn-main.active[disabled],
        fieldset[disabled] .btn-main,
        fieldset[disabled] .btn-main:hover,
        fieldset[disabled] .btn-main:focus,
        fieldset[disabled] .btn-main:active,
        fieldset[disabled] .btn-main.active {
            background-color: #e3e7f5;
            border-color: #e3e7f5;
        }

.btn-gradient {
    background: var(--bg-grad-45);
    color: #FFFFFF;
    opacity: .9;
    padding: 8.5px 16.5px;
    border: none;
}

    .btn-gradient:hover,
    .btn-gradient:focus,
    .btn-gradient:active,
    .btn-gradient.active,
    .open .dropdown-toggle.btn-gradient {
        background: var(--bg-grad-45);
        color: #FFFFFF;
        opacity: 1;
    }
.btn-gradient-u {
    background: var(--bg-grad-45u);
    color: #FFFFFF;
    opacity: .9;
    padding: 8.5px 16.5px;
    border: none;
}

    .btn-gradient-u:hover,
    .btn-gradient-u:focus,
    .btn-gradient-u:active,
    .btn-gradient-u.active,
    .open .dropdown-toggle.btn-gradient-u {
        background: var(--bg-grad-45u);
        color: #FFFFFF;
        opacity: 1;
    }
.btn-gradient-90 {
    background: var(--bg-grad-90);
    color: #FFFFFF;
    opacity: .9;
    padding: 8.5px 16.5px;
    border: none;
}

    .btn-gradient-90:hover,
    .btn-gradient-90:focus,
    .btn-gradient-90:active,
    .btn-gradient-90.active,
    .open .dropdown-toggle.btn-gradient-90 {
        background: var(--bg-grad-90);
        color: #FFFFFF;
        opacity: .999;
    }
    .btn-gradient.btn-lg,
    .btn-gradient-u.btn-lg,
    .btn-gradient-90.btn-lg {
        padding: 10.8px 18.5px;
    }

.btn-gradient-border {
    border: double 2px transparent;
    background-image: linear-gradient(white, white), linear-gradient(45deg, rgba(21, 12, 222, 1) 0%, rgba(241, 31, 76, 1) 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    opacity: .9;
    color: rgba(21, 12, 222, 1);
    padding: 0px 0px;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
    .btn-gradient-border:hover,
    .btn-gradient-border:focus,
    .btn-gradient-border:active,
    .btn-gradient-border.active,
    .open .dropdown-toggle.btn-gradient-border {
        background-image: linear-gradient(white, white), linear-gradient(45deg, rgba(21, 12, 222, 1) 0%, rgba(241, 31, 76, 1) 100%);
        color: rgba(21, 12, 222, 1);
        opacity: 1;
    }
    .btn-gradient-border.btn-lg {
        height: 42px;
    }
    .btn-gradient-border:before,
    .btn-gradient-border::after {
        content: "";
        width: 2rem;
    }
.btn-primary {
    background-color: #00B6B7;
    border-color: #00B6B7;
    color: #FFFFFF;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        background-color: #01A8A9;
        border-color: #01A8A9;
        color: #FFFFFF;
    }

    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        background-image: none;
    }

        .btn-primary.disabled,
        .btn-primary.disabled:hover,
        .btn-primary.disabled:focus,
        .btn-primary.disabled:active,
        .btn-primary.disabled.active,
        .btn-primary[disabled],
        .btn-primary[disabled]:hover,
        .btn-primary[disabled]:focus,
        .btn-primary[disabled]:active,
        .btn-primary.active[disabled],
        fieldset[disabled] .btn-primary,
        fieldset[disabled] .btn-primary:hover,
        fieldset[disabled] .btn-primary:focus,
        fieldset[disabled] .btn-primary:active,
        fieldset[disabled] .btn-primary.active {
            background-color: #0D2968;
            border-color: #0D2968;
        }

.btn-secondary {
    background-color: #F2F2F2;
    border-color: #F2F2F2;
    color: #707070;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active,
    .btn-secondary.active,
    .open .dropdown-toggle.btn-secondary {
        background-color: #e7e7e7;
        border-color: #e7e7e7;
        color: #707070;
    }

    .btn-secondary:active,
    .btn-secondary.active,
    .open .dropdown-toggle.btn-secondary {
        background-image: none;
    }

        .btn-secondary.disabled,
        .btn-secondary.disabled:hover,
        .btn-secondary.disabled:focus,
        .btn-secondary.disabled:active,
        .btn-secondary.disabled.active,
        .btn-secondary[disabled],
        .btn-secondary[disabled]:hover,
        .btn-secondary[disabled]:focus,
        .btn-secondary[disabled]:active,
        .btn-secondary.active[disabled],
        fieldset[disabled] .btn-secondary,
        fieldset[disabled] .btn-secondary:hover,
        fieldset[disabled] .btn-secondary:focus,
        fieldset[disabled] .btn-secondary:active,
        fieldset[disabled] .btn-secondary.active {
            background-color: #F6F6F6;
            border-color: #F6F6F6;
        }

.btn-info {
    background-color: #23c6c8;
    border-color: #23c6c8;
    color: #FFFFFF;
}

    .btn-info:hover,
    .btn-info:focus,
    .btn-info:active,
    .btn-info.active,
    .open .dropdown-toggle.btn-info {
        background-color: #21b9bb;
        border-color: #21b9bb;
        color: #FFFFFF;
    }

    .btn-info:active,
    .btn-info.active,
    .open .dropdown-toggle.btn-info {
        background-image: none;
    }

        .btn-info.disabled,
        .btn-info.disabled:hover,
        .btn-info.disabled:focus,
        .btn-info.disabled:active,
        .btn-info.disabled.active,
        .btn-info[disabled],
        .btn-info[disabled]:hover,
        .btn-info[disabled]:focus,
        .btn-info[disabled]:active,
        .btn-info.active[disabled],
        fieldset[disabled] .btn-info,
        fieldset[disabled] .btn-info:hover,
        fieldset[disabled] .btn-info:focus,
        fieldset[disabled] .btn-info:active,
        fieldset[disabled] .btn-info.active {
            background-color: #26d7d9;
            border-color: #26d7d9;
        }

.btn-default {
    background-color: #c2c2c2;
    border-color: #c2c2c2;
    color: #FFFFFF;
}

    .btn-default:hover,
    .btn-default:focus,
    .btn-default:active,
    .btn-default.active,
    .open .dropdown-toggle.btn-default {
        background-color: #bababa;
        border-color: #bababa;
        color: #FFFFFF;
    }

    .btn-default:active,
    .btn-default.active,
    .open .dropdown-toggle.btn-default {
        background-image: none;
    }

        .btn-default.disabled,
        .btn-default.disabled:hover,
        .btn-default.disabled:focus,
        .btn-default.disabled:active,
        .btn-default.disabled.active,
        .btn-default[disabled],
        .btn-default[disabled]:hover,
        .btn-default[disabled]:focus,
        .btn-default[disabled]:active,
        .btn-default.active[disabled],
        fieldset[disabled] .btn-default,
        fieldset[disabled] .btn-default:hover,
        fieldset[disabled] .btn-default:focus,
        fieldset[disabled] .btn-default:active,
        fieldset[disabled] .btn-default.active {
            background-color: #cccccc;
            border-color: #cccccc;
        }

.btn-warning {
    background-color: #f8ac59;
    border-color: #f8ac59;
    color: #FFFFFF;
}

    .btn-warning:hover,
    .btn-warning:focus,
    .btn-warning:active,
    .btn-warning.active,
    .open .dropdown-toggle.btn-warning {
        background-color: #f7a54a;
        border-color: #f7a54a;
        color: #FFFFFF;
    }

    .btn-warning:active,
    .btn-warning.active,
    .open .dropdown-toggle.btn-warning {
        background-image: none;
    }

        .btn-warning.disabled,
        .btn-warning.disabled:hover,
        .btn-warning.disabled:focus,
        .btn-warning.disabled:active,
        .btn-warning.disabled.active,
        .btn-warning[disabled],
        .btn-warning[disabled]:hover,
        .btn-warning[disabled]:focus,
        .btn-warning[disabled]:active,
        .btn-warning.active[disabled],
        fieldset[disabled] .btn-warning,
        fieldset[disabled] .btn-warning:hover,
        fieldset[disabled] .btn-warning:focus,
        fieldset[disabled] .btn-warning:active,
        fieldset[disabled] .btn-warning.active {
            background-color: #f9b66d;
            border-color: #f9b66d;
        }

.btn-danger {
    background-color: #ed5565;
    border-color: #ed5565;
    color: #FFFFFF;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active,
    .btn-danger.active,
    .open .dropdown-toggle.btn-danger {
        background-color: #ec4758;
        border-color: #ec4758;
        color: #FFFFFF;
    }

    .btn-danger:active,
    .btn-danger.active,
    .open .dropdown-toggle.btn-danger {
        background-image: none;
    }

        .btn-danger.disabled,
        .btn-danger.disabled:hover,
        .btn-danger.disabled:focus,
        .btn-danger.disabled:active,
        .btn-danger.disabled.active,
        .btn-danger[disabled],
        .btn-danger[disabled]:hover,
        .btn-danger[disabled]:focus,
        .btn-danger[disabled]:active,
        .btn-danger.active[disabled],
        fieldset[disabled] .btn-danger,
        fieldset[disabled] .btn-danger:hover,
        fieldset[disabled] .btn-danger:focus,
        fieldset[disabled] .btn-danger:active,
        fieldset[disabled] .btn-danger.active {
            background-color: #ef6776;
            border-color: #ef6776;
        }

.btn-link {
    color: inherit;
}

    .btn-link:hover,
    .btn-link:focus,
    .btn-link:active,
    .btn-link.active,
    .open .dropdown-toggle.btn-link {
        color: #00B6B7;
        text-decoration: none;
    }

    .btn-link:active,
    .btn-link.active,
    .open .dropdown-toggle.btn-link {
        background-image: none;
    }

        .btn-link.disabled,
        .btn-link.disabled:hover,
        .btn-link.disabled:focus,
        .btn-link.disabled:active,
        .btn-link.disabled.active,
        .btn-link[disabled],
        .btn-link[disabled]:hover,
        .btn-link[disabled]:focus,
        .btn-link[disabled]:active,
        .btn-link.active[disabled],
        fieldset[disabled] .btn-link,
        fieldset[disabled] .btn-link:hover,
        fieldset[disabled] .btn-link:focus,
        fieldset[disabled] .btn-link:active,
        fieldset[disabled] .btn-link.active {
            color: #cacaca;
        }

.btn-white {
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
}

    .btn-white:hover,
    .btn-white:focus,
    .btn-white:active,
    .btn-white.active,
    .open .dropdown-toggle.btn-white {
        color: inherit;
        border: 1px solid #d2d2d2;
    }

    .btn-white:active,
    .btn-white.active {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
    }

    .btn-white:active,
    .btn-white.active,
    .open .dropdown-toggle.btn-white {
        background-image: none;
    }

        .btn-white.disabled,
        .btn-white.disabled:hover,
        .btn-white.disabled:focus,
        .btn-white.disabled:active,
        .btn-white.disabled.active,
        .btn-white[disabled],
        .btn-white[disabled]:hover,
        .btn-white[disabled]:focus,
        .btn-white[disabled]:active,
        .btn-white.active[disabled],
        fieldset[disabled] .btn-white,
        fieldset[disabled] .btn-white:hover,
        fieldset[disabled] .btn-white:focus,
        fieldset[disabled] .btn-white:active,
        fieldset[disabled] .btn-white.active {
            color: #cacaca;
        }

.form-control,
.form-control:focus,
.has-error .form-control:focus,
.has-primary .form-control:focus,
.has-warning .form-control:focus,
.navbar-collapse,
.navbar-form,
.navbar-form-custom .form-control:focus,
.navbar-form-custom .form-control:hover,
.open .btn.dropdown-toggle,
.panel,
.popover,
.progress,
.progress-bar {
    box-shadow: none;
}

.btn-outline {
    color: inherit;
    background-color: transparent;
    transition: all .5s;
}

.btn-rounded {
    border-radius: 50px;
}

.btn-large-dim {
    width: 90px;
    height: 90px;
    font-size: 42px;
}

button.dim {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    padding-top: 6px;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 600;
    margin-bottom: 20px !important;
}

    button.dim:active {
        top: 3px;
    }

button.btn-success.dim {
    box-shadow: inset 0px 0px 0px #16987e, 0px 5px 0px 0px #16987e, 0px 10px 5px #999999;
}

    button.btn-success.dim:active {
        box-shadow: inset 0px 0px 0px #16987e, 0px 2px 0px 0px #16987e, 0px 5px 3px #999999;
    }

button.btn-default.dim {
    box-shadow: inset 0px 0px 0px #b3b3b3, 0px 5px 0px 0px #b3b3b3, 0px 10px 5px #999999;
}

    button.btn-default.dim:active {
        box-shadow: inset 0px 0px 0px #b3b3b3, 0px 2px 0px 0px #b3b3b3, 0px 5px 3px #999999;
    }

button.btn-warning.dim {
    box-shadow: inset 0px 0px 0px #f79d3c, 0px 5px 0px 0px #f79d3c, 0px 10px 5px #999999;
}

    button.btn-warning.dim:active {
        box-shadow: inset 0px 0px 0px #f79d3c, 0px 2px 0px 0px #f79d3c, 0px 5px 3px #999999;
    }

button.btn-info.dim {
    box-shadow: inset 0px 0px 0px #1eacae, 0px 5px 0px 0px #1eacae, 0px 10px 5px #999999;
}

    button.btn-info.dim:active {
        box-shadow: inset 0px 0px 0px #1eacae, 0px 2px 0px 0px #1eacae, 0px 5px 3px #999999;
    }
button.btn-main.dim {
    box-shadow: inset 0px 0px 0px #acb6d8, 0px 5px 0px 0px #acb6d8, 0px 10px 5px #999999;
}

    button.btn-main.dim:active {
        box-shadow: inset 0px 0px 0px #acb6d8, 0px 2px 0px 0px #acb6d8, 0px 5px 3px #999999;
    }
button.btn-primary.dim {
    box-shadow: inset 0px 0px 0px #082587, 0px 5px 0px 0px #082587, 0px 10px 5px #999999;
}

    button.btn-primary.dim:active {
        box-shadow: inset 0px 0px 0px #082587, 0px 2px 0px 0px #082587, 0px 5px 3px #999999;
    }
button.btn-secondary.dim {
    box-shadow: inset 0px 0px 0px #e2e2e2, 0px 5px 0px 0px #e2e2e2, 0px 10px 5px #999999;
}

    button.btn-secondary.dim:active {
        box-shadow: inset 0px 0px 0px #e2e2e2, 0px 2px 0px 0px #e2e2e2, 0px 5px 3px #999999;
    }

button.btn-danger.dim {
    box-shadow: inset 0px 0px 0px #ea394c, 0px 5px 0px 0px #ea394c, 0px 10px 5px #999999;
}

    button.btn-danger.dim:active {
        box-shadow: inset 0px 0px 0px #ea394c, 0px 2px 0px 0px #ea394c, 0px 5px 3px #999999;
    }

button.dim:before {
    font-size: 50px;
    line-height: 1em;
    font-weight: normal;
    color: #fff;
    display: block;
    padding-top: 10px;
}

button.dim:active:before {
    top: 7px;
    font-size: 50px;
}
.btn-default.form-control {
    background-color: #f2f2f2;
    color: #141414;
    padding: 6px 16px;
}

.ui-select-match.btn-default-focus {
    border-radius: 16px;
    outline: none;
    background: #fff;
}

    .ui-select-match.btn-default-focus .btn-default.form-control {
        background-color: #fff;
        color: #000;
    }
.form-control.ui-select-search {
    border-radius: 16px;
}
/* #endregion */

/* #region dropdown*/
.dropdown-menu {
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12), 0px 0px 32px 0px rgba(0, 0, 0, 0.32);
}

    .dropdown-menu li > a {
        display: flex;
        padding: .8rem 1.2rem;
        align-items: center;
        gap: 1.2rem;
    }
/* #endregion*/
/* #region COLORS */
.white-bg {
    background: #fff;
}
.gray-bg {
    background: var(--GrayTint-50, #F4F5F6);
}
.text-navy {
    color: var(--colorHightLight) !important;
}
.text-status {
    color: #00C763;
}
.text-status-red {
    color: #E03E3E;
}
.text-status-gray {
    color: #C2C2C2;
}
.text-grad-45 {
    background: var(--bg-grad-45);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-grad-45u {
    background: var(--bg-grad-45u);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-primary {
    color: inherit !important;
}

.text-success {
    color: #1c84c6 !important;
}

.text-info {
    color: #23c6c8 !important;
}

.text-warning {
    color: #f8ac59 !important;
}

.text-danger {
    color: #ed5565 !important;
}

.text-muted {
    color: #888888 !important;
}

.text-white {
    color: #ffffff;
}
.divider {
    width: 100%;
    height: 0.1rem;
    background: var(--Border-Primary-Border, #C2C2C2);
}
.progress {
    border-radius: 20px;
    background-color: #e3e6e8;
}
.progress-bar {
    background-color: var(--DarkBlue-400, #1246F3);
}

.progress-small,
.progress-small .progress-bar {
    height: 12px;
}

.progress-mini,
.progress-mini .progress-bar {
    height: 8px;
    border-radius: 8px;
    margin-bottom: 0;
}

.progress-bar-navy-light {
    background-color: #3dc7ab;
}

.progress-bar-success {
    background-color: #1c84c6;
}

.progress-bar-info {
    background-color: #23c6c8;
}

.progress-bar-warning {
    background-color: #f8ac59;
}

.progress-bar-danger {
    background-color: #ed5565;
}
.fa-sm {
    font-size: 0.8em;
}
.btn-rounded {
    border-radius: 50px;
}
.text-highliht {
    color: var(--colorHightLight)
}
.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.428571429;
}

    .btn-circle.btn-lg {
        width: 50px;
        height: 50px;
        padding: 10px 16px;
        border-radius: 25px;
        font-size: 18px;
        line-height: 1.33;
    }

    .btn-circle.btn-xl {
        width: 70px;
        height: 70px;
        padding: 10px 16px;
        border-radius: 35px;
        font-size: 24px;
        line-height: 1.33;
    }
/* #endregion COLORS */
/* #region input checkbox */

input[type="radio"].my-check, input[type="checkbox"].my-check {
    position: relative;
    margin: 0px 4px 3px 0px;
    width: 20px;
    height: 17px;
}

    input[type="radio"].my-check::before, input[type="radio"].my-check::after, input[type="checkbox"].my-check::before, input[type="checkbox"].my-check::after {
        content: '';
        position: absolute;
        top: 0px;
        left: 0;
    }

    input[type="radio"].my-check::before, input[type="checkbox"].my-check::before {
        display: block;
        width: 20px;
        height: 20px;
        border: 2px solid #888;
        background: #fff;
    }

    input[type="radio"].my-check:focus::before, input[type="checkbox"].my-check:focus::before {
        border-color: #1A56DB;
    }

    input[type="radio"].my-check::after, input[type="checkbox"].my-check::after {
        display: none;
        content: "✔";
        color: #1A56DB;
        font-size: 18px;
        top: -2px;
        left: 3px;
        font-weight: 600;
    }

    input[type="radio"].my-check:checked::after, input[type="checkbox"].my-check:checked::after {
        display: block;
    }

    input[type="radio"].my-check:disabled::before, input[type="checkbox"].my-check:disabled::before {
        border: 2px solid #aaa;
        cursor: not-allowed;
        background: #f2f2f2;
    }

    input[type="radio"].my-check:disabled::after, input[type="checkbox"].my-check:disabled::after {
        cursor: not-allowed;
        background: #69A999;
    }
/* #endregion */
/* #region benefit */
.home-list-benefit {
    padding: 1.6rem;
    background: var(--Background-Background);
}

    .home-list-benefit .item {
        width: 30rem;
        --c: #00A8E6;
        --w: 7rem;
        display: flex;
    }

        .home-list-benefit .item .border-my {
            width: calc(var(--w));
            display: flex;
            position: relative;
            align-items: center;
            justify-content: center;
            transform: rotate(16deg);
            z-index: 1;
        }

            .home-list-benefit .item .border-my:before {
                content: "";
                position: absolute;
                width: var(--w);
                height: var(--w);
                border-radius: 50%;
                left: calc(-1*(var(--w) - var(--w) / 1.5) / 2);
                top: calc(50% - var(--w) / 2);
                background: conic-gradient(var(--c) 50%, #0000 0);
            }

            .home-list-benefit .item .border-my:after {
                content: "";
                position: absolute;
                width: 0.5rem;
                height: 100%;
                background-color: var(--c);
                left: calc(var(--w) / 3);
                z-index: 0;
            }

            .home-list-benefit .item .border-my > img {
                background: #f2f2f2;
                border: 2px solid #fff;
                border-radius: 50%;
                width: calc(var(--w) / 1.5);
                z-index: 1;
                transform: rotate(-16deg);
                padding: 0.5rem;
            }

        .home-list-benefit .item .content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            text-align: left;
            padding: 1rem 1.6rem 1rem 4rem;
            border: 1px solid var(--Background-Background);
            border-radius: 0 1.6rem 1.6rem 0;
            transform: skewX(-16deg);
            margin: 1.5rem 0.8rem;
            margin-left: -2rem;
            background: #fff;
            box-shadow: 5px 7px 9px 0px var(--Border-Secondary-Border);
        }

        .home-list-benefit .item .title {
            color: var(--c);
            font-size: 1.3rem;
            font-weight: 600;
            margin-left: -2rem;
        }

        .home-list-benefit .item .subtile {
            height: 8rem;
            text-align: justify;
            font-size: 1rem;
        }
/* #endregion */

/* #region progress-circular*/
@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}
@keyframes p {
    from {
        --p: 0
    }
}
@property --p2 {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@keyframes p2 {
    from {
        --p2: 0
    }
}
.progress-bar-circular {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(closest-side, white 79%, transparent 80% 100%), radial-gradient(farthest-side,#00C763 100%,#0000) top/5px 5px no-repeat, radial-gradient(farthest-side,#00C763 100%,#0000) calc(var(--r) + var(--r) * cos((var(--p) * 3.6 - 90) * pi/180)) calc(var(--r) + var(--r) * sin((var(--p) * 3.6 - 90) * pi/180)) /5px 5px no-repeat, conic-gradient(#00C763 calc(var(--p)*1%), #F2F2F2 0);
    animation: p 1s .5s both;
}

.progress-bar-circular-text {
    color: var(--Text-Secondary-Text, #707070);
    text-align: center;
    font-size: inherit;
    font-weight: 400;
    line-height: normal;
}

.progress-bar-pie {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(closest-side, white 50%, transparent 51% 100%), conic-gradient(#00C763 calc(var(--p)*1%), #F2F2F2 0);
}

.pie {
    --p: 20;
    --c: darkred;
    --p2: 10;
    --c2: darkred;
    --b: 2.4rem;
    --w: inherit;
    --r: 10.8rem;
    --ro: 0;
    width: var(--w);
    aspect-ratio: 1;
    position: absolute;
    display: inline-grid;
    place-content: center;
    transform: rotate(calc(var(--ro)*3.6deg));
}

    .pie:before, .pie:after {
        content: "";
        position: absolute;
        border-radius: 50%;
    }

    .pie:before {
        inset: 0;
        background: radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,radial-gradient(farthest-side,var(--c) 100%,#0000) calc(var(--r) + var(--r) * cos((var(--p) * 3.6 - 90) * pi/180)) calc(var(--r) + var(--r) * sin((var(--p) * 3.6 - 90) * pi/180)) /var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
        -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
        mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
    }
    .pie:after {
        inset: 0;
        background: radial-gradient(farthest-side,var(--c2) 98%,#0000) top/var(--b) var(--b) no-repeat,radial-gradient(farthest-side,var(--c2) 100%,#0000) calc(var(--r) + var(--r) * cos((var(--p2) * 3.6 - 90) * pi/180)) calc(var(--r) + var(--r) * sin((var(--p2) * 3.6 - 90) * pi/180)) /var(--b) var(--b) no-repeat, conic-gradient(var(--c2) calc(var(--p2)*1%),#0000 0);
        -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
        mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
    }
    .pie.not-pt2:after {
        display: none;
    }
    .pie.animate {
        animation: p 1s .15s both, p2 1s .25s both;
    }
    .pie > span {
        width: var(--w);
        height: var(--w);
        padding: 3.2rem;
        transform: rotate(calc((var(--p) / 2)* 3.6deg));
        font-size: 1.6rem;
        font-weight: 300;
        color: var(--c2);
        text-align: center;
    }
.dount {
    --p: 20;
    --c: darkred;
    --b: inherit;
    --w: inherit;
    --ro: 0;
    width: var(--w);
    aspect-ratio: 1;
    position: absolute;
    display: inline-grid;
    place-content: center;
    transform: rotate(calc(var(--ro)*3.6deg));
}
    .dount:before {
        content: "";
        position: absolute;
        border-radius: 50%;
        inset: 0;
        background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
        -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
        mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
    }
    .dount > span {
        font-size: 1rem;
        color: var(--Pure-White, #FFF);
        text-align: center;
        position: absolute;
        left: calc(var(--r) + var(--r)* cos(((var(--p) / 2)* 3.6 - 90)* pi / 180));
        top: calc(var(--r) + var(--r)* sin(((var(--p) / 2)* 3.6 - 90)* pi / 180));
        transform: rotate(calc(-1* var(--ro)* 3.6deg));
        padding: 0.4rem;
    }
    .dount.animate {
        animation: p 1s .15s both;
    }
/* #endregion progress-circular*/

/* #region MARGINS & PADDINGS */
.p-xxs {
    padding: 5px;
}

.p-xs {
    padding: 10px;
}

.p-sm {
    padding: 15px;
}

.p-m {
    padding: 20px;
}

.p-md {
    padding: 25px;
}

.p-lg {
    padding: 30px;
}

.p-xl {
    padding: 40px;
}
.p-l-xxs {
    padding-left: 5px;
}

.p-l-xs {
    padding-left: 10px;
}

.p-l-sm {
    padding-left: 15px;
}

.p-l-m {
    padding-left: 20px;
}

.p-l-md {
    padding-left: 25px;
}

.p-l-lg {
    padding-left: 30px;
}

.p-l-xl {
    padding-left: 40px;
}
.p-t-xxs {
    padding-top: 5px;
}

.p-t-xs {
    padding-top: 10px;
}

.p-t-sm {
    padding-top: 15px;
}

.p-t-m {
    padding-top: 20px;
}

.p-t-md {
    padding-top: 25px;
}

.p-t-lg {
    padding-top: 30px;
}

.p-t-xl {
    padding-top: 40px;
}
.p-r-xxs {
    padding-right: 5px;
}

.p-r-xs {
    padding-right: 10px;
}

.p-r-sm {
    padding-right: 15px;
}

.p-r-m {
    padding-right: 20px;
}

.p-r-md {
    padding-right: 25px;
}

.p-r-lg {
    padding-right: 30px;
}

.p-r-xl {
    padding-right: 40px;
}
.p-b-xxs {
    padding-bottom: 5px;
}

.p-b-xs {
    padding-bottom: 10px;
}

.p-b-sm {
    padding-bottom: 15px;
}

.p-b-m {
    padding-bottom: 20px;
}

.p-b-md {
    padding-bottom: 25px;
}

.p-b-lg {
    padding-bottom: 30px;
}

.p-b-xl {
    padding-bottom: 40px;
}
.m-xxs {
    margin: 2px 4px;
}

.m-xs {
    margin: 5px;
}

.m-sm {
    margin: 10px;
}

.m {
    margin: 15px;
}

.m-md {
    margin: 20px;
}

.m-lg {
    margin: 30px;
}

.m-xl {
    margin: 50px;
}

.m-n {
    margin: 0 !important;
}

.m-l-none {
    margin-left: 0;
}

.m-l-xs {
    margin-left: 5px;
}

.m-l-sm {
    margin-left: 10px;
}

.m-l {
    margin-left: 15px;
}

.m-l-md {
    margin-left: 20px;
}

.m-l-lg {
    margin-left: 30px;
}

.m-l-xl {
    margin-left: 40px;
}

.m-l-n-xxs {
    margin-left: -1px;
}

.m-l-n-xs {
    margin-left: -5px;
}

.m-l-n-sm {
    margin-left: -10px;
}

.m-l-n {
    margin-left: -15px;
}

.m-l-n-md {
    margin-left: -20px;
}

.m-l-n-lg {
    margin-left: -30px;
}

.m-l-n-xl {
    margin-left: -40px;
}

.m-t-none {
    margin-top: 0;
}

.m-t-xxs {
    margin-top: 1px;
}

.m-t-xs {
    margin-top: 5px;
}

.m-t-sm {
    margin-top: 10px;
}

.m-t {
    margin-top: 15px;
}

.m-t-md {
    margin-top: 20px;
}

.m-t-lg {
    margin-top: 30px;
}

.m-t-xl {
    margin-top: 40px;
}

.m-t-n-xxs {
    margin-top: -1px;
}

.m-t-n-xs {
    margin-top: -5px;
}

.m-t-n-sm {
    margin-top: -10px;
}

.m-t-n {
    margin-top: -15px;
}

.m-t-n-md {
    margin-top: -20px;
}

.m-t-n-lg {
    margin-top: -30px;
}

.m-t-n-xl {
    margin-top: -40px;
}

.m-r-none {
    margin-right: 0;
}

.m-r-xxs {
    margin-right: 1px;
}

.m-r-xs {
    margin-right: 5px;
}

.m-r-sm {
    margin-right: 10px;
}

.m-r {
    margin-right: 15px;
}

.m-r-md {
    margin-right: 20px;
}

.m-r-lg {
    margin-right: 30px;
}

.m-r-xl {
    margin-right: 40px;
}

.m-r-n-xxs {
    margin-right: -1px;
}

.m-r-n-xs {
    margin-right: -5px;
}

.m-r-n-sm {
    margin-right: -10px;
}

.m-r-n {
    margin-right: -15px;
}

.m-r-n-md {
    margin-right: -20px;
}

.m-r-n-lg {
    margin-right: -30px;
}

.m-r-n-xl {
    margin-right: -40px;
}

.m-b-none {
    margin-bottom: 0;
}

.m-b-xxs {
    margin-bottom: 1px;
}

.m-b-xs {
    margin-bottom: 5px;
}

.m-b-sm {
    margin-bottom: 10px;
}

.m-b {
    margin-bottom: 15px;
}

.m-b-md {
    margin-bottom: 20px;
}

.m-b-lg {
    margin-bottom: 30px;
}

.m-b-xl {
    margin-bottom: 40px;
}

.m-b-n-xxs {
    margin-bottom: -1px;
}

.m-b-n-xs {
    margin-bottom: -5px;
}

.m-b-n-sm {
    margin-bottom: -10px;
}

.m-b-n {
    margin-bottom: -15px;
}

.m-b-n-md {
    margin-bottom: -20px;
}

.m-b-n-lg {
    margin-bottom: -30px;
}

.m-b-n-xl {
    margin-bottom: -40px;
}
/* #endregion*/
/* #region Table */
.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 1px solid #ddd;
}
/* #endregion */
/* #region Modal*/
.modal.in-up .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out, opacity .15s linear;
    -o-transition: -o-transform .3s ease-out, opacity .15s linear;
    transition: transform .3s ease-out, opacity .15s linear;
    -webkit-transform: translate3d(0, 20%, 0);
    -o-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
}
.modal.in .modal-dialog {
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.modal-content {
    border-radius: 2.5rem;
    border: double 2px transparent;
    background-image: linear-gradient(white, white), linear-gradient(45deg, rgba(21, 12, 222, 1) 0%, rgba(241, 31, 76, 1) 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    padding-bottom: 5px;
}

    .modal-content .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.6rem;
        padding-bottom: 0;
        margin: auto;
        border-bottom: none;
    }

        .modal-content .modal-header .modal-title {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex: 1 0 0;
            color: var(--Text-Secondary-Text, #707070);
            text-align: center
        }

            .modal-content .modal-header .modal-title .title {
                color: var(--Text-Primary-Text, #141414);
                text-align: center;
                font-size: 1.8rem;
                font-weight: 700;
                line-height: 2.6rem; /* 144.444% */
            }
            .modal-content .modal-header .modal-title h4 {
                padding: 0;
                margin: 0;
                color: var(--Text-Primary-Text, #141414);
                text-align: center;
                font-size: 2.4rem;
                font-weight: 700;
                line-height: 140%; /* 3.36rem */
            }

        .modal-content .modal-header .text-right {
            width: 4rem;
            display: flex;
            align-items: center;
        }

.modal-main-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex: 1;
    gap: 1.2rem;
    padding: 2rem 4rem;
}

.modal-input-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-radius: 10rem;
    background: var(--Background-Background, #F2F2F2);
    padding: 0.6rem 0.8rem;
    width: 100%;
    border: 1px solid transparent;
}

    .modal-input-wrapper:focus-within {
        border: 1px solid var(--Primary-Primary, #00B6B7);
        background: var(--Pure-White, #FFF);
        box-shadow: 0px 0px 20px 0px rgba(10, 52, 190, 0.20);
    }

    .modal-input-wrapper.warning {
        border: 1px solid var(--Status-Invalid, #E03E3E);
        box-shadow: 0px 0px 20px 0px rgba(224, 62, 62, 0.20);
    }

.modal-input-icon {
    padding: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--Pure-White, #FFF);
    color: #1C1B1F;
}

    .modal-input-icon.warning {
        color: var(--Status-Invalid, #E03E3E);
    }

.modal-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    caret-color: var(--Primary-Primary, #00B6B7);
    color: var(--Text-Primary-Text, #141414);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 140%;
    padding: 0.9rem 0;
}

.modal-input-warning {
    color: var(--Status-Invalid, #E03E3E);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 140%;
    width: 100%;
    margin-left: 2rem;
}
.popup.alert {
    display: flex;
    max-width: 98%;
    width: 500px;
    padding: 32px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    border-radius: 40px;
    background: #FFF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20), 0px 0px 40px 0px rgba(0, 0, 0, 0.08);
}
.alert .alert-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
    .alert .alert-body .title {
        color: var(--Text-Primary-Text, #141414);
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        line-height: 32px; /* 145.455% */
    }
.alert .alert-body .content{
        color: var(--Text-Secondary-Text, #707070);
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        line-height: 140%; /* 22.4px */
    }
.alert .alert-button {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
}
/* #endregion*/
/* #region filter */
.filter-title {
    border-radius: 0.8rem;
    border: 1px solid var(--Border-Secondary-Border, #E0E0E0);
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.filter-title-nobackground {
    border: none;
}

.filter-title-text {
    color: var(--Text-Primary-Text, #141414);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 140%;
}

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

.filter-title i {
    font-size: 2.4rem;
}

.filter-list {
    position: absolute;
    background: #fff;
    border-radius: 0.8rem;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12), 0px 0px 32px 0px rgba(0, 0, 0, 0.20);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 999;
}

.filter-overflow {
    max-height: 50vh;
    overflow-y: scroll;
}

.filter-list-item {
    padding: 1.2rem;
    cursor: pointer;
    position: relative;
}

    .filter-list-item:hover {
        background: var(--Background-Background, #F2F2F2);
        border-radius: 0.8rem;
    }

.filter-list-sub {
    top: 0;
    left: 100%;
    width: 50%;
}

@media (max-width: 1400px) {
    .filter-list-sub {
        left: 50%;
    }
}
/* #endregion */
/* #region divider text*/
.divider-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    width: 80%;
}
    .divider-text .line {
        height: 0.2rem;
        flex: 1 0 0;
        border-radius: 0.2rem;
        background: var(--Background-Background, #F2F2F2);
    }
    .divider-text span {
        color: var(--Text-Tertiary-Text, #708090);
        font-size: 1.4rem;
        line-height: 140%; /* 1.96rem */
    }
.divider-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    width: 80%;
    color: var(--DarkBlue-400);
    font-weight: 500;
}

    .divider-line:before,
    .divider-line::after {
        content: "";
        height: .5px;
        flex: 1 0 0;
        background: var(--color1);
    }

/* #endregion */
/* #region Scrollbar */
::-webkit-scrollbar-track {
    background-color: transparent;
    height: 2px;
}

::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 2px;
    -webkit-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    transition: background-color 1s linear;
}
.show-scrollbar::-webkit-scrollbar-thumb,
*:hover::-webkit-scrollbar-thumb {
    background-color: #5555;
}
/* #endregion Scrollbar */

/* #region Layout */
#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#page-wrapper {
    flex: 1;
    padding-top: 10px;
}
.container {
    padding: 0;
    margin-right: auto;
    margin-left: auto;
}
    .container:before, .container:after {
        content: unset;
    }
.container-row {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}
    .container-row .col-left {
        flex: 1 0 0;
    }
    .container-row .col-right {
        width: 36rem;
    }
.row {
    margin-right: -10px;
    margin-left: -10px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-right: 10px;
    padding-left: 10px;
}
.main-header {
    display: flex;
    padding: 10px 8px;
    align-items: flex-start;
}

.btn-right {
    width: 40px;
    display: flex;
    align-items: center;
}
.content-header {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    flex: 1 0 0;
}

    .content-header .title {
        color: var(--Text-Primary-Text, #141414);
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 33.6px */
    }

    .content-header .lable {
        color: var(--Text-Secondary-Text, #707070);
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%; /* 19.6px */
    }
    .content-header .time {
        color: var(--Text-Secondary-Text, #707070);
        text-align: center;
        font-size: 16px;
        font-style: italic;
        font-weight: 400;
        line-height: 140%; /* 19.6px */
    }
.main-right .main-header {
    padding: 10px 8px 10px 16px;
}
.main-right .content-header .title, .main-right .content-header .lable {
    text-align: left;
}
.fixed-top {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}

.navbar-wrapper .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
}

.navbar-wrapper .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
}

.carousel-inner .container {
    height: 669px;
}

.main-content {
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    padding: .8rem 0;
    border-radius: 20px;
    background: #FFF;
}
/* #endregion*/
/* #region Header */
.header-top {
    position: sticky;
    top: 0;
    z-index: 11;
    width: 100%;
    box-shadow: 0px 1px 3px 0px #0002;
}
.navbar-top {
    background: #fff;
    -webkit-transition: background .3s linear;
    -o-transition: background .3s linear;
    transition: background .3s linear;
}
    .navbar-top .logo {
        padding: 0;
    }
        .navbar-top .logo img {
            height: 5rem;
            margin: 0.5rem 0;
        }
        .navbar-top .logo > .logo-white {
            display: none;
        }
    .navbar-top .tab-tools {
        display: flex;
        align-items: center;
        align-self: stretch;
    }

    .navbar-top .center-widget {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .navbar-top .size-box {
        height: 66px;
        flex: 1 0 0;
    }

.navbar-top-links {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: 12px;
}
    .navbar-top-links .navbar-top-links-menu {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2.6rem;
        flex: 1;
    }
        .navbar-top-links .navbar-top-links-menu .navbar-top-item {
            cursor: pointer;
            padding: 5px;
            display: flex;
            align-items: center;
            position: relative;
            color: var(--colorTextBase);
        }
            .navbar-top-links .navbar-top-links-menu .navbar-top-item .menu-name {
                font-size: 1.6rem;
                font-weight: 700;
                padding-left: 1rem;
            }
            .navbar-top-links .navbar-top-links-menu .navbar-top-item.active {
                color: var(--color3);
            }
            .navbar-top-links .navbar-top-links-menu .navbar-top-item.home {
                display: none;
            }
        .navbar-top-links .navbar-top-links-menu > a:hover,
        .navbar-top-links .navbar-top-links-menu > a:focus {
            background: linear-gradient(45deg, #EE3F2233 0%, #FFCD4218 100%);
        }
        .navbar-top-links .navbar-top-links-menu > a:hover > span,
        .navbar-top-links .navbar-top-links-menu > a:focus > span {
            border-radius: 50%;
            background: var(--color2);
            color: #fff;
        }

    .navbar-top-links a {
        color: var(--colorTextBase);
        font-size: 1.8rem;
        font-style: normal;
        font-weight: 500;
        line-height: 2.4rem;
        border-radius: 1.6rem;
    }

        .navbar-top-links a:focus, .navbar-top-links a:hover {
            text-decoration: none;
        }

    .navbar-top-links .nav > li > a:focus, .navbar-top-links .nav > li > a:hover {
        text-decoration: none;
        background-color: #FFF0;
        background: linear-gradient(45deg, #EE3F2222 0%, #FFCD4218 100%);
    }

        .navbar-top-links a .caret {
            color: var(--Text-Secondary-Text);
            margin: auto 6px;
            border-top: 5px dashed;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
        }
    .navbar-top-links li a.dropdown-link {
        margin: 0px;
        padding: 8px;
    }

    .navbar-top-links .avatar {
        padding: 2px;
        border-radius: 100px;
        background: #fff;
        border: 1px solid var(--Border-Primary-Border, #C2C2C2);
        display: inline-block;
    }

        .navbar-top-links .avatar > img {
            width: 40px;
            height: 40px;
            border-radius: 40px;
        }
    .navbar-top-links .user-name {
        font-weight: 700;
    }
.header-top .dropdown-menu {
    width: 32rem;
    overflow: hidden;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12), 0px 0px 32px 0px rgba(0, 0, 0, 0.32);
}
    .header-top .dropdown-menu .profile {
        padding: 1.6rem;
        border-bottom: 1px solid var(--Border-Secondary-Border, #E0E0E0);
        display: flex;
        gap: 1rem;
    }
        .header-top .dropdown-menu .profile .avatar {
            width: 6.4rem;
            height: 6.4rem;
            padding: 0.4rem;
            border: none;
        }
.header-top .dropdown-menu .profile .avatar > img{
                width: 5.6rem;
                height: 5.6rem;
                border-radius: 50%;
            }

        .header-top .dropdown-menu .profile .info {
            display: flex;
            padding: 0.4rem;
            flex-direction: column;
            gap: 0.8rem;
            flex: 1 0 0;
        }

            .header-top .dropdown-menu .profile .info .name {
                font-size: 2rem;
                font-weight: 700;
                line-height: 140%;
                color: var(--color3);
            }

            .header-top .dropdown-menu .profile .info .id {
                color: var(--Text-Tertiary-Text, #708090);
            }

            .header-top .dropdown-menu .profile .info .link {
                color: var(--DarkBlue-400);
                cursor: pointer;
            }

                .header-top .dropdown-menu .profile .info .link:hover {
                    opacity: 0.8;
                    cursor: pointer;
                }

    .header-top .dropdown-menu > li > a {
        display: flex;
        padding: 1rem 1.6rem;
        align-items: center;
        gap: 1.2rem;
        text-overflow: ellipsis;
        font-size: 1.6rem;
    }
.nav.navbar-top-links a {
    font-size: 14px;
}
.title-name-app {
    width: 100%;
    text-align: center;
    margin: 20vh 0 3rem;
}
.line-box {
    width: 2px;
    height: 4rem;
    background: var(--Text-Primary-Text);
    border-radius: 5px;
}
.search-box {
    display: flex;
    gap: 1rem;
    margin: auto;
}
    .search-box.view-cau-hoi {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 10px;
        background: linear-gradient(180deg, transparent, #0008);
    }
.input-wrapper {
    background: #eee;
    border-radius: 5rem;
    padding: 1rem 1rem;
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
    border: 1px solid transparent;
}
    .input-wrapper .soid-input {
        background: none;
        border: none;
        outline: none;
        font-size: 1.6rem;
        line-height: 140%;
        min-width: 250px;
    }
    .input-wrapper .input-icon {
        padding: 0;
        background: #fff;
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
        .input-wrapper .input-icon.clear {
            color: transparent;
            background: transparent;
        }
        .input-wrapper .input-icon.clear.view {
            color: inherit;
            cursor: pointer;
        }


.input-btn-group {
    display: flex;
    border: 1px solid #aaa;
    box-shadow: 0px 5px 10px 0px #0002;
    border-radius: 5rem;
}

    .input-btn-group:focus-within {
        border: 1px solid var(--color1);
        box-shadow: 0px 5px 12px 2px #0002;
    }

    .input-btn-group .input-wrapper {
        border-radius: 5rem 0 0 5rem;
    }

    .input-btn-group .btn {
        border-radius: 0 5rem 5rem 0;
        padding: 0 2rem 0 1rem;
    }
/* #endregion*/
/* #region Footer */
/* Footer */
.box-footer {
    margin-top: 2rem;
    background: var(--VtestCompact-OnPrimary);
    border-top: 2px solid var(--color2);
    background-image: url(/assets/img/word_map.png);
}

    .box-footer .footer-content {
        color: inherit;
        width: 100%;
        padding: 4rem 0.8rem 1rem;
        background: linear-gradient(180deg, #0003 0, transparent 20px);
        background-repeat: no-repeat;
    }

.footer-content a {
    color: inherit;
    text-decoration: none;
}

.footer-content .footer-top {
    display: flex;
    align-items: center;
}

.footer-content .footer-logo {
    width: 520px;
    max-width: 100%;
    text-align: center;
}

    .footer-content .footer-logo img {
        width: 80%;
    }

.footer-content .footer-info {
    display: flex;
    flex-direction: column;
    font-size: 1.7rem;
}

    .footer-content .footer-info .footer-title {
        color: var(--color2);
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 140%;
    }

    .footer-content .footer-info .info-item {
        display: flex;
        gap: 1rem;
        align-items: center;
        padding-top: 1.2rem;
    }

        .footer-content .footer-info .info-item > img {
            width: 32px;
        }

.footer-content .lien-he {
    display: flex;
    justify-content: space-between;
    margin: 6rem 0;
    font-size: 1.8rem;
}

    .footer-content .lien-he > div {
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
    }

    .footer-content .lien-he .box-title {
        color: var(--color2);
        font-size: 2rem;
        font-weight: bold;
    }

.footer-content .lien-ket a {
    display: inline-block;
    height: 40px;
    width: 40px;
}

    .footer-content .lien-ket a > img {
        width: 100%;
    }
/* #endregion*/
/* #region xu ly them */
.run-left-right {
    animation: icon-btn 0.5s ease-out infinite;
}

@keyframes icon-btn {
    to {
        padding-left: 0;
        padding-right: 1rem;
    }

    from {
        padding-left: 1rem;
        padding-right: 0;
    }
}
.float-right {
    float: right;
}
/* #endregion */
/* ------------------------------------------------reponsive--------------------------------------------- */
.navbar-wrapper .navbar-toggler,
.lg-hidden, .md-show, .sm-show {
    display: none;
}
.chat-widget {
    z-index: 10;
    border: none;
    visibility: visible;
    bottom: 82px;
    right: 10px;
    position: fixed;
    width: 60px;
    height: 60px;
}
.chat-widget a img {
    width: 60px;
    height: 60px;
}
.root-zalo {
    right: 10px !important;
    bottom: 20px !important;
}
.root-fb {
    bottom: 82px !important;
    right: 10px !important;
}

/*****************
Dựng responsive                 Bootrast
- Desktop   1200px - to hơn     col-lg-
- Ipad      768px - 1199px      col-sm-
- Mobile    nhỏ hơn - 767px     col-xs-
*/
@media (min-width: 1200px) {
    .navbar-top.navbar-white, .navbar-top.navbar-white .navbar-top-links .navbar-top-links-menu .navbar-top-item {
        background: transparent;
        color: #fff;
    }

        .navbar-top.navbar-white .logo > .logo-white {
            display: block;
        }

        .navbar-top.navbar-white .logo > .logo-color {
            display: none;
        }

        .navbar-top.navbar-white .fa-bell-o {
            color: #fff;
        }
}
/* Desktop small & Tablet*/
@media (max-width: 1199px) {
    .container {
        width: 750px;
    }
    .md-show {
        display: initial;
    }
    .md-hidden, .grecaptcha-badge {
        display: none !important;
    }
    .container-row {
        flex-direction: column-reverse;
    }

        .container-row .col-left {
            width: 100%;
        }

        .container-row .col-right {
            width: 100%;
        }
    .main-content {
        height: calc(100vh - 15rem);
    }
    .footer-content .footer-logo {
        width: 380px;
    }

    .footer-content .footer-info,
    .footer-content .lien-he,
    .footer-content .lien-he .box-title {
        font-size: 1.5rem;
    }
        .footer-content .footer-info .footer-title {
            font-size: 1.8rem;
        }


    .navbar-top-links {
        position: fixed;
        z-index: 11;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 60px;
        background: #fff;
        border-top: 1px solid #5f189891;
        box-shadow: 0 -1px 5px #3b334133;
        justify-content: space-between;
        padding: 0.6rem 0.8rem;
    }

        .navbar-top-links .navbar-top-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--Text-Primary-Text);
        }

        .navbar-top-links .navbar-top-links-menu .navbar-top-item.home {
            display: flex;
        }

        .navbar-top-links .navbar-top-links-menu .navbar-top-item .menu-name {
            font-size: 1.2rem;
            padding: 0;
        }
}

/* Mobile big */
@media (max-width: 767px) {
    .container {
        max-width: 750px;
        width: 100%;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
    .sm-hidden {
        display: none !important;
    }
    .navbar-wrapper .navbar-toggler,
    .lg-hidden, .sm-show {
        display: block;
    }
    .modal-open .modal {
        overflow-x: hidden;
        overflow-y: hidden;
    }
    #page-wrapper {
        padding: unset;
    }
    .popup.alert {
        width: 368px;
    }
    .main-content {
        padding: 0 0 6rem 0px;
        border-radius: 0px;
        height: calc(100vh - 6.5rem);
    }
    .main-header {
        align-items: flex-start;
    }

    .navbar-top .center-widget {
        justify-content: center;
    }
    .header-top {
        position: initial;
        padding: 0.6rem;
        box-shadow: unset;
    }
    #page-wrapper {
        padding-bottom: 60px !important;
    }
    .search-box.view-cau-hoi {
        position: fixed;
        bottom: 60px;
        padding: 0.6rem;
        z-index: 2;
    }
    .input-wrapper {
        padding: 0.6rem;
        flex: 1;
    }

        .input-wrapper .soid-input {
            min-width: unset;
            width: 100px;
        }
    .search-box .btn-camera {
        height: 45.6px;
        padding: 8px 10px;
    }
    .box-footer .footer-content {
        padding-bottom: 6rem;
    }
    .footer-content .footer-top {
        flex-direction: column;
    }

    .footer-content .footer-logo {
        text-align: center;
        margin-bottom: 2rem;
    }

        .footer-content .footer-logo img {
            width: 68%;
        }

    .footer-content .footer-info {
        font-size: 1.4rem;
    }

    .footer-content .lien-he {
        flex-direction: column;
        gap: 3rem;
    }
    .root-zalo {
        bottom: 68px !important;
    }

    .root-fb {
        bottom: 128px !important;
    }
}

/* Mobile */
@media (max-width: 360px) {
    :root{
        font-size: 8px;
    }
    .navbar-top-links a {
        font-size: 1.6rem;
    }

    .navbar-top .logo img {
        height: 36px;
    }

    .footer .name-app {
        display: none;
    }
    .modal-main-form {
        padding: 0;
    }
}
/*-------------------------------------------- end reponsive------------------------------------------------*/

#gtx-trans, #MathJax_Message {
    display: none !important;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-internal-autofill-selected {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

/*--------------------------------------------Notification------------------------------------------------*/

.Notifications .dropdown-menu {
    width: 360px;
    max-height: 600px;
    overflow-y: auto;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.notification-item {
    cursor: pointer;
    border-bottom: 1px solid #CED0D4;
    transition: background-color 0.2s ease;
}
.notification-read {
    background-color: #d8eeff;
}

.notification-item-one{
    display:flex;
}

.notification-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.notification-avatar {
    width: 56px;
    height: 56px;
    margin-right: 12px;
    flex-shrink: 0;
}

    .notification-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

.notification-content {
    flex: 1;
    font-size: 0.9375rem;
}

.notification-text {
    font-size: 1.6rem;
    margin: 0;
    color: #050505;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:normal;
    max-width: 200px;
    width: 100%;
}

.notification-time {
    color: #65676B;
    font-size: 1.3125rem;
}

.notification-status {
    color: #65676B;
    font-size: 0.8125rem;
    margin-top: 4px;
}

.notification-dot {
    width: 12px;
    height: 12px;
    background-color: #1876f2;
    border-radius: 50%;
    margin-left: 8px;
    align-self: center;
}

.notification-header {
    padding: 10px;
    border-bottom: 1px solid #CED0D4;
}

    .notification-header h6 {
        font-size: 1.6rem;
        font-weight: 700;
    }
.view-all-tb {
    text-align:center;
    padding: 1rem 1.6rem;
}

strong {
    font-weight: 600;
}
.unread-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    background-color: #2196F3;
    border-radius: 50%;
}
.dropdown-menu-right-tb {
    right: 0;
    left: auto;
}

@media (max-width: 767px) {
    .Notifications .dropdown-menu{
        width:300px;
    }
    .dropdown-menu-right-tb {
        right: -50px;
        left: auto;
    }
}

@media (min-width: 1200px) {
    .navbar-top.navbar-white .notification-footer {
        background: transparent;
        color: #000;
    }
}


/* Danh sách tủ sách */
.books-section .section-title {
    display: flex;
    justify-content: space-between;
    font-size: 1.8rem;
    align-items: center;
    border-bottom: 1px solid var(--Border-Primary-Border); 
}

.section-title .title-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .section-title .title-left small {
        color: var(--Text-Secondary-Text);
        line-height: initial;
    }
/* end danh sách tủ sach */