@charset "UTF-8";
@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,800,900&display=swap");

*,
*:before,
*:after {
    box-sizing: border-box;
}

html,
body,
div,
span,
object,
iframe,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
code,
em,
img,
small,
strike,
strong,
sub,
sup,
tt,
b,
u,
i,
ol,
ul,
li,
fieldset,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
main,
canvas,
embed,
footer,
header,
nav,
section,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
}

footer,
header,
nav,
section,
main {
    display: block;
}

body,
html {
    font-size: 1rem;
    background: #F6F8FF;
    font-family: "Roboto";
    font-size: 62.5%;
    font-size: 10px;
    /*overflow-x: hidden;*/
    overflow: hidden;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: "";
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input {
    border-radius: 0;
}

.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1400px;
}

h1 {
    font-size: 3.2rem;
    line-height: normal;
    text-align: center;
    color: #000000;
    font-weight: 700;
    position: relative;
    margin: 0 0 4rem 0;
}

    h1:before {
        background: #4aa4d9;
        width: 9%;
        height: 0.2rem;
        content: "";
        position: absolute;
        right: 0;
        text-align: center;
        margin: 0 auto;
        bottom: -1.2rem;
        left: 0;
    }

h2 {
    color: #2C3039;
    font-style: normal;
    font-weight: 400;
    font-size: 3.2rem;
    line-height: normal;
}

    h2 span {
        font-weight: 700;
        color: #4aa4d9;
    }

h3 {
    font-weight: 700;
    font-size: 2rem;
    line-height: normal;
    font-weight: 700;
    position: relative;
    padding: 0 0 2rem 0;
    color: #2C3039;
}

h4 {
    font-weight: 700;
    font-size: 2rem;
    line-height: normal;
    font-weight: 700;
    padding: 0 0 2rem 0;
    color: #4aa4d9;
}

    h4 span {
        color: #000000;
    }

h5 {
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 4.4rem;
    font-weight: 700;
    padding: 0 0 1.6rem 0;
    color: #ffffff;
}

    h5 span {
        color: #4aa4d9;
    }

.input-effect {
    position: relative;
    margin: 0 0 2.4rem 0;
    width: 100%;
}

input,
textarea {
    outline: none;
}

    input[type=text] {
        color: #000000;
        width: 100%;
        box-sizing: border-box;
        letter-spacing: 0px;
        height: 4.5rem;
    }

/*.effect-19 {
    border: 1px solid $inputborder;
    padding: 1.2rem 1.4rem;
    transition: 0.4s;
    background: $brightcolor;
    border-radius: $radius1;
}

.effect-19~.focus-border:before,
.effect-19~.focus-border:after {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: $secondarycolor;
    transition: 0.4s;
}

.effect-19~.focus-border:after {
    top: auto;
    bottom: 0;
}

.effect-19~.focus-border i:before,
.effect-19~.focus-border i:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 2px;
    height: 0;
    background-color: $secondarycolor;
    transition: 0.6s;
}

.effect-19~.focus-border i:after {
    left: auto;
    right: 0;
}

.effect-19:focus~.focus-border:before,
.effect-19:focus~.focus-border:after,
.has-content.effect-19~.focus-border:before,
.has-content.effect-19~.focus-border:after {
    left: 0;
    width: 100%;
    transition: 0.4s;
}

.effect-19:focus~.focus-border i:before,
.effect-19:focus~.focus-border i:after,
.has-content.effect-19~.focus-border i:before,
.has-content.effect-19~.focus-border i:after {
    top: -1px;
    height: 100%;
    transition: 0.6s;
}

.effect-19~label {
    position: absolute;
    left: 14px;
    width: 100%;
    top: 10px;
    color: $darkcolor;
    transition: 0.3s;
    z-index: -1;
    letter-spacing: 0.5px;
}

.effect-19:focus~label,
.has-content.effect-19~label {
    top: -18px;
    left: 0;
    font-size: 1.2rem;
    color: $darkcolor;
    transition: 0.3s;
    z-index: 1;
}*/
.radio input[type=radio] + .radio-label:before {
    border: 1px solid #4aa4d9;
    width: 20px;
    height: 20px;
    top: 0;
}

.radio input[type=radio]:checked + .radio-label:before {
    background-color: #4aa4d9;
    box-shadow: inset 0 0 0 3px #ffffff;
    top: 0;
}

.checkbox label,
.radio label {
    padding-left: 0;
    color: #AAAAAA;
    font-size: 1.4rem;
}

.radio input[type=radio]:checked + .radio-label {
    font-weight: bold !important;
    color: #4aa4d9;
}

.radio input[type=radio] {
    position: absolute;
    opacity: 0;
}

    .radio input[type=radio] + .radio-label:before {
        content: "";
        background: #ffffff;
        border-radius: 100%;
        border: 2px solid #4aa4d9;
        display: inline-block;
        width: 24px;
        height: 24px;
        position: relative;
        top: -2px;
        margin-right: 1rem;
        vertical-align: middle;
        cursor: pointer;
        text-align: center;
        transition: all 250ms ease;
    }

    .radio input[type=radio]:checked + .radio-label:before {
        background-color: #4aa4d9;
        box-shadow: inset 0 0 0 3px #ffffff;
    }

    .radio input[type=radio]:focus + .radio-label:before {
        outline: none;
        border-color: #4aa4d9;
    }

    .radio input[type=radio]:disabled + .radio-label:before {
        box-shadow: inset 0 0 0 4px #ffffff;
        border-color: #4aa4d9;
        background: #DDDDDD;
    }

    .radio input[type=radio] + .radio-label:empty:before {
        margin-right: 0;
    }

.checkbox label,
.radio label {
    padding-left: 0;
}

.radio input[type=radio] + .radio-label:before {
    border: 1px solid #4aa4d9;
    width: 20px;
    height: 20px;
    top: 0;
}

.file-box {
    border: 1px solid #DDDDDD;
    border-radius: 0.4rem;
    padding: 0px 1rem 0px 0px;
    text-wrap: wrap;
    overflow: hidden;
}

[type=file] {
    /* Style the color of the message that says 'No file chosen' */
    color: #222E3E;
    font-size: 1.2rem;
}

    [type=file]::-webkit-file-upload-button {
        background: #ffffff;
        border: 1px solid #4aa4d9;
        color: #4aa4d9;
        cursor: pointer;
        font-size: 1.6rem;
        outline: none;
        padding: 1.1rem 2rem;
        border-radius: 4px 0px 0px 4px;
        font-weight: 600;
    }

        [type=file]::-webkit-file-upload-button:hover {
            background: #4aa4d9;
            color: #ffffff;
        }

/*sign in form css end*/
label {
    font-size: 1.4rem !important;
    margin: 0 0 0.7rem 0 !important;
    line-height: 1.7rem;
    display: block;
    font-family: "Roboto";
    color: #7E7E7E;
    position: relative;
    font-size: 1.4rem;
}

.form-bg label {
    font-size: 1.4rem !important;
    margin: 0 0 0.7rem 0 !important;
    line-height: 1.7rem;
    display: block;
    font-family: "Roboto";
    color: #7E7E7E;
    font-size: 1.6rem !important;
}

.form-control {
    display: block;
    width: 100%;
    padding: 1rem 1rem;
    border: 1px solid #D2D2D2;
    border-radius: 0.4rem;
    color: #000000;
    background: #ffffff;
    height: 4.5rem;
    margin: 0 0 0 0;
    font-weight: 600;
    font-size: 16px;
    font-weight: 500;
}

.form-bg .form-control {
    display: block;
    width: 100%;
    padding: 1rem 1rem;
    border: 1px solid #D2D2D2;
    border-radius: 0.4rem;
    color: #000000;
    background: #ffffff;
    height: 4.5rem;
    margin: 0 0 0 0;
    font-weight: 600;
    font-size: 1.6rem;
}

.form-control:focus {
    color: #000000;
    background-color: #ffffff;
    border-color: #ffffff;
    outline: 0;
}

textarea.form-control {
    background: #ffffff;
    border: 1px solid #DDDDDD;
    color: #000000;
    line-height: 2.6rem;
    height: 8rem;
    resize: none;
    border-radius: 0.4rem !important;
}

input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #D2D2D2 !important;
    font-size: 1.2rem;
    font-weight: 400;
}

input ::-moz-placeholder {
    /* Firefox 19+ */
    color: #D2D2D2 !important;
    font-size: 1.2rem;
    font-weight: 400;
}

input :-ms-input-placeholder {
    /* IE 10+ */
    color: #D2D2D2 !important;
    font-size: 1.2rem;
    font-weight: 400;
}

input :-moz-placeholder {
    /* Firefox 18- */
    color: #D2D2D2 !important;
    font-size: 1.2rem;
    font-weight: 400;
}

textarea::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #D2D2D2 !important;
    font-size: 1.2rem;
    font-weight: 400;
}

textarea ::-moz-placeholder {
    /* Firefox 19+ */
    color: #D2D2D2 !important;
    font-size: 1.2rem;
    font-weight: 400;
}

textarea :-ms-input-placeholder {
    /* IE 10+ */
    color: #D2D2D2 !important;
    font-size: 1.2rem;
    font-weight: 400;
}

textarea :-moz-placeholder {
    /* Firefox 18- */
    color: #D2D2D2 !important;
    font-size: 1.2rem;
    font-weight: 400;
}

/*custum input css end*/
/*custom checkbox*/
.checkform {
    margin: 0 0 2.4rem 0;
}

    .checkform label {
        padding-left: 0;
        font-size: 1.6rem !important;
        color: #000000;
        position: relative;
        font-weight: 600;
        margin: 0 15px 0 0 !important;
        display: inline;
    }

    .checkform .form-group {
        display: inline;
    }

    .checkform a {
        color: #4aa4d9;
    }

        .checkform a:hover {
            color: #4aa4d9;
            text-decoration: underline !important;
        }

.form-group input[type=checkbox] {
    display: none;
    cursor: pointer;
}

input[type=checkbox] + label:before {
    content: "";
    background-color: #ffffff;
    border: 1px solid #7E7E7E;
    border-radius: 0.4rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 8px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 7px;
    top: -1px;
}

input[type=checkbox]:checked + label:after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 5px;
    width: 6px;
    height: 10px;
    border: 1px solid #4aa4d9;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

select {
    position: relative;
    color: #000000 !important;
}

option:disabled {
    color: #AAAAAA;
}

.arrow-down {
    position: absolute;
    right: 10px;
    top: 18px;
}

.button {
    border: none;
    text-decoration: inherit;
    display: inline-block;
    padding: 1rem 2rem;
    border: 1px solid #4aa4d9;
    border-radius: 0.4rem;
    font-size: 1.6rem;
    background: transparent;
    color: #4aa4d9;
    text-align: center;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

    .button:hover {
        background: #407DF6;
        color: #ffffff;
        border: 1px solid #407DF6;
    }

.button-blue {
    border: none;
    text-decoration: inherit;
    display: inline-block;
    padding: 1rem 2rem;
    border: 1px solid #4aa4d9;
    border-radius: 0.4rem;
    font-size: 1.8rem;
    background: #4aa4d9;
    color: #ffffff;
    text-align: center;
    width: 100%;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

    .button-blue:hover {
        background: #407DF6;
        color: #ffffff;
        border: 1px solid #407DF6;
        font-weight: bold;
    }

.button-white {
    border: none;
    text-decoration: inherit;
    display: inline-block;
    padding: 0.9rem 1rem;
    border: 2px solid #4aa4d9;
    border-radius: 0.4rem;
    font-size: 1.8rem;
    background: #ffffff;
    color: #4aa4d9;
    text-align: center;
    width: 100%;
    margin: 0 0 2rem 0;
    font-weight: 700;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

    .button-white:hover {
        background: #407DF6;
        color: #ffffff;
        border: 2px solid #407DF6;
    }

    .button-white img {
        vertical-align: middle;
    }

section {
    padding: 4rem 0;
}

p {
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2.2rem;
    color: #555555;
}

/*tooltip css*/
.t-box {
    position: absolute;
    right: 0;
}

#tooltip a {
    color: #ffffff;
}

.lite-tooltip {
    opacity: 0;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
    background-color: #555555;
    color: #ffffff;
    color: 1.6rem;
    padding: 1rem 1rem;
    border-radius: 0.4rem;
    transition: opacity 0.2s ease-in-out;
}

    .lite-tooltip:before {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 6px 0 6px;
        border-color: #555555 transparent transparent transparent;
        display: inline-block;
    }

    .lite-tooltip.lite-tooltip-bottom:before {
        bottom: auto;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 0 6px 6px 6px;
        border-color: transparent transparent #555555 transparent;
    }

    .lite-tooltip.lite-tooltip-right:before {
        bottom: auto;
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
        border-width: 6px 6px 6px 0;
        border-color: transparent #555555 transparent transparent;
    }

    .lite-tooltip.lite-tooltip-left:before {
        bottom: auto;
        left: auto;
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        border-width: 6px 0 6px 6px;
        border-color: transparent transparent transparent #555555;
    }

.follow-table {
    margin-top: 2rem !important;
}

    .follow-table .table tr:last-child td {
        border-bottom: 1px solid #EBEBEB;
        border-right: 0px;
        border-right: 1px solid #EBEBEB;
    }

.btn-box {
    display: inline-block;
    margin: 0px 0px 0 0;
    font-size: 1.4rem;
}

    .btn-box i {
        background: #4aa4d9;
        border-radius: 100%;
        height: 3rem;
        width: 3rem;
        font-size: 1.4rem;
        text-align: center;
        color: #fff;
        line-height: 30px;
        cursor: pointer;
        margin: 0 5px 0 0;
    }

        .btn-box i:hover {
            background: #4aa4d9;
        }

/*new datepicker*/
.ui.input {
    width: 100%;
}

    .ui.input input {
        padding: 1rem 1rem;
        border: 1px solid #DDDDDD;
        height: 4.5rem;
        font-size: 1.4rem;
    }

.ui.calendar .ui.popup {
    width: 100%;
}

.ui.calendar .ui.table tr .prev.link {
    top: 40px;
}

.ui.calendar .ui.table tr .next.link {
    top: 40px;
}

/*select dropdown*/
.widget-cus-id .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: 0;
    background: url("../images/select_arrow.png") no-repeat;
    width: 10px;
    height: 8px;
    top: 0px;
}

.widget-cus-id .select2-container--open .select2-selection__arrow b {
    border: 0;
    background: url("../images/select_arrow.png") no-repeat !important;
    width: 10px;
    height: 8px;
    top: 18px;
}

.widget-cus-id .select2-container--default .select2-selection--single {
    background: #ffffff;
    width: 100%;
    padding: 1rem 1rem;
    text-align: left;
    height: 4.5rem;
    border-radius: 0.4rem;
    display: inline-block;
    border: 1px solid #D2D2D2;
    font-size: 1.6rem !important;
    color: #000000;
}

    .widget-cus-id .select2-container--default .select2-selection--single:hover {
        border: 1px solid #D2D2D2;
    }

    .widget-cus-id .select2-container--default .select2-selection--single:focus {
        color: #000000;
        background-color: #ffffff;
        border-color: #ffffff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

.widget-cus-id .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ececec !important;
}

.widget-cus-id .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #4aa4d9 !important;
    color: #ffffff !important;
}

.widget-cus-id .select2-container,
.widget-cus-id .select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100% !important;
    font-weight: 500 !important;
    color: #000000;
    display: inline;
    word-wrap: normal !important;
    /**white-space: normal;**/
    text-align: left;
    padding: 0;
    font-size: 15px;
}

    .widget-cus-id .select2-container--default .select2-selection--single .select2-selection__rendered:hover {
        color: #000000;
    }

.widget-cus-id .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    position: absolute;
    top: 7px;
    right: 10px;
    width: 20px;
}

.select2-dropdown--below {
    border: 1px solid #7E7E7E;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 10px rgba(143, 10, 17, 0.2509803922);
    border-radius: 0 0 5px 5px;
    padding: 0;
    min-width: 160px !important;
}

.select2-dropdown {
    border: 0;
}

.trip-navigation .select2-container--open .select2-dropdown {
    left: -5px;
    top: 5px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #c9c9c9;
    border-radius: 5px;
}

.select2-selection__placeholder {
    color: #E0E0E0 !important;
    line-height: normal;
}

.select2-results__option {
    font-size: 1.6rem;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
    line-height: 3rem;
}

    .select2-results__option strong {
        display: block;
    }

    .select2-results__option.select2-results__option--highlighted {
        background: #FDE7E8 !important;
        color: #000000;
        line-height: 3rem;
    }

/*button glow*/
.btn--glow {
    position: relative;
    overflow: hidden;
}

    .btn--glow:before {
        content: "";
        position: absolute;
        left: -20%;
        top: -10%;
        width: 0;
        height: 100%;
        transform: rotate(15deg) scale(1, 2);
        box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.7);
        animation: button-glow 2500ms ease-in-out infinite;
    }

@keyframes button-glow {
    0% {
        left: -20%;
    }

    50% {
        left: 120%;
    }

    100% {
        left: 120%;
    }
}
/*alert box start*/
.alert-box {
    width: 20%;
    margin: 0 auto;
    text-align: left;
    position: fixed;
    right: 0;
    bottom: 0;
}

    .alert-box .alert {
        padding: 1.5rem 2.5rem;
    }

        .alert-box .alert .close {
            padding: 1.4rem 1.3rem;
            position: absolute;
            right: 0;
            font-size: 1.6rem;
            top: 0;
            font-weight: 700;
            color: #008000 !important;
        }

    .alert-box .alert-dismissable-group {
        bottom: 0;
        right: 0;
        position: relative;
        z-index: 999999;
    }

    .alert-box .alert-dismissable {
        opacity: 0;
        transform: translateY(100%);
        transition: opacity 0.3s ease-out, transform 0.01s linear 0.3s;
    }

        .alert-box .alert-dismissable.is-shown {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.3s ease-out;
        }

.alert-success {
    --bs-alert-color: $success;
    --bs-alert-bg: #e9fbe9;
    --bs-alert-border-color: #e9fbe9;
}

    .alert-success p {
        color: #008000;
        font-size: 2.8rem;
        font-weight: 700;
    }

        .alert-success p span {
            display: block;
            font-size: 1.8rem;
            color: #0BBB32;
            margin: 1rem 0 0 0;
        }

.alert-danger {
    --bs-alert-color: $alertcolor;
    --bs-alert-bg: #fde9e7;
    --bs-alert-border-color: #fde9e7;
}

    .alert-danger p {
        color: #FF0000;
        font-size: 2.8rem;
        font-weight: 700;
    }

        .alert-danger p span {
            display: block;
            font-size: 1.8rem;
            color: #8e160b;
            margin: 1rem 0 0 0;
        }

.vald-info {
    display: none;
    padding: 1.4rem;
    margin: 0 auto;
    width: 40%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.6rem;
    background: #4aa4d9;
    color: #fff;
    border-radius: 0.4rem;
    text-align: center;
    position: absolute;
    z-index: 9;
}

.form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    text-align: center;
    pointer-events: none;
    color: #aaa;
    text-align: center;
    font-size: 12px;
    line-height: 40px;
    margin: 0 auto;
    width: 25px;
    height: 25px;
}

.searchbox {
    padding-left: 2.375rem;
}

.supplier-input {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #7e7e7e !important;
}

.w-20 {
    width: 20%;
}

.w-16 {
    width: 16%;
}

.train-box {
    border: 0.1rem solid #EEEEEE;
    border-radius: 0.8rem;
    background: #ffffff;
    margin: 0 0 2rem 0;
    padding: 0;
}

    .train-box .table {
        margin-bottom: 0;
        border-color: #EBEBEB;
        margin-bottom: 0;
    }

        .train-box .table tr th {
            border-right: 1px solid #fbfbff;
        }

        .train-box .table tr td {
            border-right: 1px solid #fbfbff;
        }

    .train-box tr th {
        background: #407DF6 !important;
        font-style: normal;
        font-weight: 700;
        font-size: 1.6rem;
        color: #ffffff !important;
        line-height: 1.8rem;
        vertical-align: top;
        padding: 1.4rem 1rem;
        text-transform: uppercase;
    }

    .train-box tr:hover {
        background: #B7AEFF !important;
    }

    .train-box tr td {
        font-style: normal;
        font-weight: 500;
        font-size: 1.4rem;
        line-height: 3rem;
        color: #555555;
        background: #ffffff;
        text-align: left;
        border-bottom: 1px solid #EBEBEB !important;
        padding: 1rem 1rem;
    }

        .train-box tr td a {
            color: #4aa4d9 !important;
        }

    .train-box table tr:last-child td {
        border-bottom: 1px solid #EBEBEB !important;
    }

        .train-box table tr:last-child td:first-child {
            border-bottom-left-radius: 0.8rem;
        }

        .train-box table tr:last-child td:last-child {
            border-bottom-right-radius: 0.8rem;
        }

    .train-box table tr:first-child th:first-child {
        border-top-left-radius: 0.8rem;
    }

    .train-box table tr:first-child th:last-child {
        border-top-right-radius: 0.8rem;
    }

    .train-box .table-striped > tbody > tr:nth-of-type(odd) > * {
        background: #fbfbff;
        color: #555555;
    }

    .train-box .table tr td {
        border-right: 1px solid #ebebeb !important;
        padding: 0.7rem 1.2rem;
    }

.iconlist {
    justify-content: center;
}

    .iconlist .list-group-item {
        background-color: transparent !important;
        border: none !important;
        text-align: center;
        padding: 0px 6px;
        font-size: 15px;
        color: #D2D2D2;
    }

        .iconlist .list-group-item .active {
            color: #0BBB32 !important;
        }

.main-box {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 2rem 0 0 0 !important;
    min-height: 100vh;
    height: 100%;
    position: relative;
    padding-left: 0;
    transition: all 0.5s ease;
    overflow: hidden;
}

    .main-box .leftbox {
        z-index: 9999;
        position: fixed;
        left: 250px;
        width: 65px;
        height: 100%;
        margin-left: -250px;
        overflow-y: auto;
        background: #ffffff;
        transition: all 0.5s ease;
        box-shadow: 10px 0 10px -5px rgba(115, 115, 115, 0.75);
    }

    .main-box .right-box {
        transition: all 0.5s;
        position: absolute;
        padding: 15px;
        width: 95%;
        overflow-x: hidden;
        height: 100%;
    }

    .main-box #msform fieldset {
        position: relative !important;
    }

    .main-box.toggled {
        padding-left: 250px;
        overflow: hidden;
    }

        .main-box.toggled .leftbox {
            width: 250px;
        }

.xyz {
    min-width: 360px;
}

.main-box.toggled .right-box {
    position: relative;
    margin-right: 0px;
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 20px 0 0 0;
    list-style: none;
    margin-top: 2px;
    background-color: #ffffff;
}

    .sidebar-nav li {
        text-indent: 0px;
        line-height: 40px;
    }

        .sidebar-nav li a {
            display: block;
            text-decoration: none;
            color: #222E3E;
            font-size: 14px;
            position: relative;
        }

            .sidebar-nav li a .right {
                position: absolute;
                left: 87%;
                z-index: 9999;
                top: 32%;
            }

        .sidebar-nav li ul {
            padding-left: 5px;
            background: #99cdeb80;
        }

            .sidebar-nav li ul li a {
                padding-left: 25px;
            }

            .sidebar-nav li ul li ul {
                padding-left: 15px;
            }

        .sidebar-nav li a span {
            font-size: 22px;
            line-height: 45px;
            margin-right: 10px;
        }

.fa-stack {
    width: 2em !important;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff !important;
    background: #4aa4d9 !important;
    border-left: 2px solid #f8e6e6;
}

    .sidebar-nav li a:hover i {
        animation: swing ease-in-out 0.5s 1 alternate;
    }

@keyframes swing {
    0%, 30%, 50%, 70%, 100% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(10deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

    .sidebar-nav > .sidebar-brand a {
        color: #999999;
    }

        .sidebar-nav > .sidebar-brand a:hover {
            color: #fff;
            background: none;
        }

.fa-stack {
    font-size: 25px;
}

.leftbox-toggle {
    border: none;
    background: white;
    font-size: 21px;
    margin-right: 40px;
}

.no-margin {
    margin: 0;
}

@media (min-width: 768px) {
    .main-box {
        padding-left: 100px;
    }

    .fixed-brand {
        width: 250px;
    }

    .main-box.toggled {
        padding-left: 0;
    }

    .leftbox {
        width: 250px;
    }

    .main-box .leftbox:hover {
        width: 250px;
    }

    .main-box.toggled-2 .leftbox {
        width: 250px;
    }

        .main-box.toggled-2 .leftbox:hover {
            width: 250px;
        }

    .right-box {
        padding: 20px;
        position: relative;
        transition: all 0.5s ease;
    }

    .main-box.toggled .right-box {
        position: relative;
        margin-right: 0;
        padding-left: 250px;
    }

    .main-box.toggled-2 .right-box {
        position: relative;
        margin-right: 0;
        margin-left: 173px;
        transition: all 0.5s ease;
        width: 90%;
    }
}

.fixed-brand {
    width: auto;
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
   /* //background-color: #407DF6 !important;
    //color: #ffffff !important;*/

}
    .modal-header button {
        border: none;
        color: red;
        font-size: 13px;
        font-weight: 900;
    }

    .modal-header h5 {
        color: #4aa4d9;
        font-size: 18px;
        line-height: 23px;
        padding: 0 0 0 0 !important;
    }

    .modal-header .btn-close {
        color: #ffffff;
    }

.btnmodal {
    width: 100% !important;
    max-width: 600px !important;
}

.flex-container {
   display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-between;
    padding: 5px;
    margin: 10px auto;
}

.action-btn {
    position: relative;
    padding: 1rem 2rem;
    border: 1px solid #222E3E;
    border-radius: 0.4rem;
    font-size: 1.6rem;
    background: #fafafa;
    color: #000000;
    text-align: center;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    width:190px;
}
.action_top {
    margin-top:10px;
}

.btn-width {
    max-width: 190px;
    width: 100%;
}

.text-dark {
    color: #000000;
    text-decoration: none;
}

.action-btn:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    direction: rtl;
    z-index: -1;
    box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, 0.6), -4px -4px 5px 0px rgba(255, 255, 255, 0.6), 7px 7px 20px 0px rgba(0, 0, 0, 0.1333333333), 4px 4px 5px 0px rgba(0, 0, 0, 0.0666666667);
    transition: all 0.3s ease;
}

.action-btn:hover {
    background-color: #fafafa;
    color: #2C3039;
}

    .action-btn:hover:after {
        left: auto;
        right: 0;
        width: 100%;
    }

.action-btn:active {
    top: 2px;
}

.action-button {
    text-align: center;
    text-decoration: none;
}

.re-action-button {
    width: auto;
    height: 45px;
    padding: 1rem 5rem;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.5rem;
}

.edit-action-btn {
    position: relative;
    padding: 1rem 5rem;
    margin: 0 3rem 2rem 0;
    display: inline-block;
    border: 1px solid #222E3E;
    border-radius: 0.4rem;
    font-size: 1.6rem;
    background: transparent;
    color: #000000;
    text-align: center;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    box-shadow: 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
}

.nav .nav-item {
    width: 50%;
    border-bottom: 1px solid #EEEEEE;
}

    .nav .nav-item button {
        color: #737373;
        font-size: 20px;
        width: 100%;
    }

        .nav .nav-item button.active {
            background-color: transparent;
            color: #4aa4d9 !important;
        }

            .nav .nav-item button.active::after {
                content: "";
                border-bottom: 4px solid #4aa4d9;
                width: 100%;
                position: absolute;
                left: 0;
                bottom: -1px;
                border-radius: 5px 5px 0 0;
            }

.righticon {
    float: right;
    padding-top: 5px;
}

.modal-th {
    text-align: left !important;
    border-right: 1px solid #e3dfdf !important;
}

canvas {
    height: 100%;
    width: 100%;
    max-width: 375px;
    max-height: 290px;
    border-style: solid;
    border-width: 1px;
    border-color: #7E7E7E;
}

.orlabel {
    background-color: #EEEEEE;
    border: 1px solid #7E7E7E;
    color: #7E7E7E;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 14px !important;
    text-align: center;
    vertical-align: middle;
    position: relative;
    line-height: 40px;
    margin: 10px 0 !important;
}

.arrowbtn {
    padding: 7px 17px;
    font-size: 16px;
    border-color: #4aa4d9;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0;
    color: #4aa4d9;
    transition: all 0.3ms ease-in-out;
}

    .arrowbtn:hover {
        background-color: #4aa4d9;
        color: #ffffff;
    }

.add-more-btn {
    font-size: 15px;
    line-height: normal;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    margin: 0rem 0 2rem 0;
    color: #4aa4d9;
}

    .add-more-btn:hover {
        color: #222E3E;
    }

.form-main {
    border-bottom: 1px solid #EEEEEE;
    margin-bottom: 1.5rem;
}

.footer-btn {
    text-align: right;
}

.modal-save {
    width: auto;
    background: #407DF6;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.5rem;
    color: #ffffff !important;
    border: 0 none;
    border-radius: 0.4rem;
    border: 1px solid #407DF6;
    cursor: pointer;
    padding: 0.9rem 5rem;
    margin: 0rem 1rem 0rem 0;
    transition: all 0.3s ease-in-out;
}

    .modal-save:hover {
        background-color: #ffffff;
        color: #407DF6 !important;
    }

.pric-sec {
    padding-top: 20px;
}

    .pric-sec .price {
        color: #FF702E;
        padding-right: 20px;
        font-size: 18px;
        font-weight: 700;
        padding-top: 5px;
        display: inline-block;
    }

    .pric-sec .count {
        float: none;
        display: inline-block;
        position: relative;
    }

        .pric-sec .count button {
            border: 0;
            border-radius: 25px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #2C3039;
        }

        .pric-sec .count .right-btn {
            position: absolute;
            right: -22px;
            top: 0px;
            width: 36px;
            border: none;
            background-color: #FF702E;
            color: #ffffff;
            height: 31px;
            border-radius: 0;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
        }

        .pric-sec .count input.quntity-input {
            width: 39px;
            height: 31px;
            margin: 0 5px;
            text-align: center;
            padding: 0;
            color: #fff !important;
            border: 0;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            font-size: 14px;
            background-color: #FF702E;
        }

        .pric-sec .count .minus:before {
            content: "\f068";
            font-family: "Font Awesome 5 Free";
            font-weight: 600;
            color: #2C3039;
            background: transparent;
        }

        .pric-sec .count .plus:before {
            content: "\f067";
            font-family: "Font Awesome 5 Free";
            font-weight: 600;
            color: #ffffff;
        }

.subject-info-box-1,
.subject-info-box-2 {
    float: left;
    width: 45%;
    margin-bottom: 2rem;
}

    .subject-info-box-1 select,
    .subject-info-box-2 select {
        height: 200px;
        padding: 0;
    }

        .subject-info-box-1 select option,
        .subject-info-box-2 select option {
            padding: 4px 10px 4px 10px;
        }

            .subject-info-box-1 select option:hover,
            .subject-info-box-2 select option:hover {
                background: #EEEEEE;
            }

.subject-info-arrows {
    float: left;
    width: 10%;
}

    .subject-info-arrows input {
        width: 70%;
        margin-bottom: 5px;
    }

.wrapper {
    padding: 30px 0 !important;
}

input::-moz-placeholder {
    font-size: 15px !important;
    color: #7e7e7e !important;
}

input,
input::placeholder {
    font-size: 15px !important;
    color: #7e7e7e !important;
}

mark {
    background-color: pink;
}

.list-autocomplete {
    padding: 0;
}

    .list-autocomplete em {
        font-style: normal;
        background-color: #e1f2f9;
    }

.hasNoResults {
    color: #aaa;
}

.hasNoResults,
.btn-extra {
    display: block;
    padding: 10px;
}

.hasNoResults {
    color: #aaa;
}

.btn-extra {
    width: 100%;
    border-top: 0.5px solid #d2d2d2;
}

.list-autocomplete .dropdown-item {
    font-size: 15px;
}

.form-control-arrow {
    position: absolute;
    z-index: 2;
    display: block;
    pointer-events: none;
    color: #aaa;
    text-align: center;
    font-size: 12px;
    line-height: 40px;
    right: 0;
    width: 25px;
    height: 25px;
}

.btn-close {
    background: transparent url(../images/close.png) center/1em auto no-repeat !important;
}

.no-border {
    border: none;
}

.card-header {
    background-color: #ffffff;
    border-bottom: none;
}

    .card-header a {
        text-decoration: none;
        cursor: pointer;
    }

.accordion .card-header:after {
    font-size: 30px;
    content: "+";
    float: right;
    top: 0;
    position: absolute;
    color: #4aa4d9;
    right: 15px;
}

.accordion .card-header.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "-";
    font-size: 30px;
    color: #4aa4d9;
}

.selected-hidden {
    display: none;
}

.checkbox-group .checkbox-normal {
    display: none;
}

.checkbox-group {
    display: inline-block;
    position: relative;
}

    .checkbox-group label {
        display: inline-block;
        position: relative;
       /* //padding-left: 7px;*/
        cursor: pointer;
    }

    .checkbox-group + .checkbox-group label {
        margin-left: 15px;
    }

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.radio-group label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 3px;
    left: 0px;
    background: #fcfcfc;
    border: 1px solid #bbb;
}

.radio-group .radio-normal + label:before {
    border-radius: 10px;
}

.radio-group .radio-normal:hover + label:before {
    border-color: #197DD5;
}

.radio-group .radio-normal:checked + label:before {
    content: "\e6bf";
    font-family: "Font Awesome 5 Pro";
    color: #fff;
    font-size: 14px;
    line-height: 15px;
    border-color: #197DD5;
    text-align: center;
    background: #197DD5;
}

.radio-group .radio-normal:disabled + label:before {
    color: #fff;
    border: 1px solid #ccc;
    background: #ddd;
    cursor: not-allowed;
}

.checkbox-group label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 3px;
    left: 0;
    background: #fcfcfc;
    border: 1px solid #bbb;
}

/* 设置选中的 radio 的样式 + 是兄弟选择器，获取选中后的 label 元素 */
.checkbox-group .checkbox-normal + label:before {
    border-radius: 3px;
}

.checkbox-group .checkbox-normal:hover + label:before {
    border-color: #197DD5;
}

.checkbox-group .checkbox-normal:checked + label:before {
    content: " ";
    font-family: "Font Awesome 5 Pro";
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 13px;
    border-color: #0BBB32;
    font-weight: bold;
    border: 2px solid #0BBB32;
}

input[type=checkbox]:checked + label:after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: 1px solid #dd0808;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.checkbox-group .checkbox-normal:disabled + label:before {
    color: #fff;
    border: 1px solid #ccc;
    background-color: #ddd;
    cursor: not-allowed;
}

.checkbox-group .checkbox-indeterminate + label:before {
    content: "\fooc";
    font-family: "Font Awesome 5 Pro";
    font-size: 14px;
    text-align: center;
    line-height: 15px;
    color: #fff;
    border-color: #197DD5;
    font-weight: bold;
    background: #197DD5;
    border-radius: 3px;
}

.multi-select-active:after {
    content: "\e93e";
    font-family: "Font Awesome 5 Pro";
    margin-left: 64%;
    font-weight: bold;
}

.icon-single-add {
    font-size: 22px;
    position: absolute;
    margin-left: -30px;
    margin-top: 7px;
}

.icon-double-add {
    font-size: 22px;
    position: absolute;
    margin-left: -30px;
    margin-top: 7px;
}

.transfer-double {
    width: 100%;
    height: 390px;
    background-color: #fff;
    z-index: 1000;
    border-radius: 2px;
}

.transfer-double-content-left {
    display: inline-block;
    width: 47%;
    height: 320px;
    border: 1px solid #eee;
    border-radius: 2px;
    float: left;
}

.transfer-double-content-middle {
    display: inline-block;
    width: 35px;
    float: left;
    margin: 8% 15px 0 15px;
    text-align: center;
}

.transfer-double-content-right {
    display: inline-block;
    width: 47%;
    height: 320px;
    border: 1px solid #eee;
    border-radius: 2px;
    float: right;
}

.transfer-double-content-param {
    display: inline-block;
    width: 100%;
    height: 36px;
    line-height: 36px;
    border-bottom: 1px solid #eee;
    text-align: center;
}

    .transfer-double-content-param .param-item {
        display: inline-block;
        height: 36px;
        line-height: 36px;
        font-size: 20px;
        float: left;
        padding: 0 0 0 10px;
    }

.vertical-separation-line {
    color: #eee;
    margin: 0 10px;
}

.transfer-double-list-header {
    padding: 8px 8px 6px 8px;
    text-align: center;
}

.transfer-double-list-search-input {
    width: 232px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #ddd;
    padding: 5px 0 4px 8px;
    border-radius: 2px;
}

.transfer-double-list-content {
    padding: 3px 3px;
}

.transfer-double-list-main {
    height: 210px;
    overflow-y: auto;
}

    .transfer-double-list-main .transfer-double-list-ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

        .transfer-double-list-main .transfer-double-list-ul .transfer-double-list-li {
            margin-top: 5px;
        }

            .transfer-double-list-main .transfer-double-list-ul .transfer-double-list-li input {
                margin-right: 10px;
            }

    .transfer-double-list-main .transfer-double-group-list-ul {
        list-style: none;
        padding-left: 25px;
        margin: 0;
    }

        .transfer-double-list-main .transfer-double-group-list-ul .transfer-double-group-list-li {
            margin-top: 5px;
        }

            .transfer-double-list-main .transfer-double-group-list-ul .transfer-double-group-list-li .transfer-double-group-list-li-ul {
                list-style: none;
                margin-left: 25px;
            }

                .transfer-double-list-main .transfer-double-group-list-ul .transfer-double-group-list-li .transfer-double-group-list-li-ul .transfer-double-group-list-li-ul-li {
                    margin-top: 5px;
                }

.transfer-double-selected-list-header {
    padding: 8px 8px 6px 8px;
    text-align: center;
}

.transfer-double-selected-list-search-input {
    width: 232px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #ddd;
    padding: 5px 0 4px 8px;
    border-radius: 2px;
}

.transfer-double-selected-list-content {
    padding: 3px 3px;
}

.transfer-double-selected-list-main {
    height: 210px;
    overflow-y: auto;
}

    .transfer-double-selected-list-main .transfer-double-selected-list-ul {
        list-style: none;
        padding-left: 0px;
        margin: 0;
    }

        .transfer-double-selected-list-main .transfer-double-selected-list-ul .transfer-double-selected-list-li {
            margin-top: 5px;
        }

            .transfer-double-selected-list-main .transfer-double-selected-list-ul .transfer-double-selected-list-li .checkbox-group {
                width: 65%;
            }

            .transfer-double-selected-list-main .transfer-double-selected-list-ul .transfer-double-selected-list-li input[type=checkbox] {
                margin-right: 10px;
            }

            .transfer-double-selected-list-main .transfer-double-selected-list-ul .transfer-double-selected-list-li input[type=text] {
                min-width: 40px;
                width: 40px;
                min-height: 24px;
                height: 24px;
            }

.transfer-double-list-footer {
    height: 24px;
    line-height: 24px;
    border-top: 1px solid #ddd;
    padding-left: 18px;
    color: #999;
    padding-top: 1px;
}

    .transfer-double-list-footer span {
        margin-left: 20px;
    }

    .transfer-double-list-footer input {
        min-width: 40px;
        width: 40px;
        min-height: 24px;
        height: 24px;
        margin-left: 75px;
    }

    .transfer-double-list-footer .btn-setting {
        display: inline-block;
        margin-left: 5px;
    }

    .transfer-double-list-footer label {
        margin-left: 10px;
    }

.transfer-double-footer {
    padding: 10px;
    text-align: right;
}

.btn-select-arrow {
    display: inline-block;
    width: 34px;
    height: 28px;
    line-height: 28px;
    color: #4aa4d9;
    background: #ffffff;
    border: 1px solid #4aa4d9;
}

    .btn-select-arrow + .btn-select-arrow {
        margin-top: 10px;
    }

.btn-arrow-active {
    color: #fff;
    background: #4aa4d9;
}

/*
* clear float
*/
.clearfix:before, .clearfix:after {
    display: table;
    content: " ";
}

.clearfix:after {
    clear: both;
}

.transfer-double-list-main::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.transfer-double-list-main::-webkit-scrollbar-track {
    background: #f6f6f6;
    border-radius: 2px;
}

.transfer-double-list-main::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

    .transfer-double-list-main::-webkit-scrollbar-thumb:hover {
        background: #999;
    }

.transfer-double-list-main::-webkit-scrollbar-corner {
    background: #f6f6f6;
}

.transfer-double-selected-list-main::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.transfer-double-selected-list-main::-webkit-scrollbar-track {
    background: #f6f6f6;
    border-radius: 2px;
}

.transfer-double-selected-list-main::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

    .transfer-double-selected-list-main::-webkit-scrollbar-thumb:hover {
        background: #999;
    }

.transfer-double-selected-list-main::-webkit-scrollbar-corner {
    background: #f6f6f6;
}

.newform-border {
    padding: 5px !important;
    margin: 0 0 16px 0;
}

.small-input {
    margin: 0 0 9px 0 !important;
}

.nospaceh4 {
    padding: 0 0 0 0 !important;
}

.smalltrain-box {
    margin: 0 0 0 0 !important;
}

.popup-btn {
    height: 100%;
    border: 1px solid #d2d2d2;
    color: #000;
    font-size: 16px;
}

    .popup-btn:hover {
        border: 1px solid #4aa4d9;
        color: #4aa4d9;
    }

.search-btn {
    height: 43px;
    border: 1px solid #d2d2d2;
    color: #000;
    font-size: 16px;
    display: inline-block;
    line-height: 38px;
}

    .search-btn:hover {
        border: 1px solid #4aa4d9;
        color: #4aa4d9;
    }

.save:hover {
    color: #ffffff !important;
}

.filter-btn {
    height: 43px;
    border: 1px solid #d2d2d2;
    color: #ffffff;
    background-color: #4aa4d9;
    font-size: 16px;
    display: inline-block;
    line-height: 24px;
    padding: 1rem 1.2rem;
}

    .filter-btn img {
        vertical-align: middle;
        margin: 0px 0 0 0;
        display: inline;
    }

    .filter-btn:hover {
        background: #4aa4d9;
        color: #ffffff;
    }

span.current {
    white-space: nowrap;
    overflow: hidden;
    display: block;
    max-width: 190px;
    text-overflow: ellipsis;
    width: 100%;
}

.another {
    margin: 2rem 0 !important;
}

.child-policy {
    margin-top: 4%;
}

    .child-policy > input[type=checkbox]:checked + label:after {
        content: "";
        display: block;
        position: absolute;
        top: 16%;
        left: 8%;
        width: 6px;
        height: 10px;
        border: 1px solid #ff0404;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }

    .child-policy > input[type=checkbox] + label:before {
        content: "";
        background-color: #ffffff;
        border: 1px solid #7E7E7E;
        border-radius: 0.4rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
        padding: 8px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 7px;
        top: 5%;
        left: 7%;
        width: 22px;
        height: 22px;
    }

.alert {
    display: none;
    position: fixed;
    top: 50%;
    right: 0px;
}

    .alert .fa {
        margin-right: 0.5em;
    }

.alert-danger p,
.alert-success p {
    font-size: 1.5rem !important;
}

.closealert {
    float: right;
    background-color: #008000;
    color: #fff;
    border-radius: 50%;
    border: none;
}

.closedanger {
    float: right;
    background-color: #FF0000;
    color: #ffffff;
    border-radius: 50%;
    border: none;
}

.navbar-expand-lg .navbar-nav .nav-link {
    font-size: 1.4rem;
    padding: 0.4rem 1.4rem;
}

.dropdown-item {
    font-size: 1.4rem;
    padding: 0.8rem 1.4rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.dropdown-menu.show {
    /* Safari 4.0 - 8.0 */
    animation: fadeIn 0.3s alternate;
}

.navbar-toggler {
    border: none;
    padding: 0;
    outline: none;
}

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

    .navbar-toggler .hamburger-toggle {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 50px;
        z-index: 11;
        float: right;
    }

        .navbar-toggler .hamburger-toggle .hamburger {
            position: absolute;
            transform: translate(-50%, -50%) rotate(0deg);
            left: 50%;
            top: 50%;
            width: 50%;
            height: 50%;
            pointer-events: none;
        }

            .navbar-toggler .hamburger-toggle .hamburger span {
                width: 100%;
                height: 4px;
                position: absolute;
                background: #333;
                border-radius: 2px;
                z-index: 1;
                transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out;
                left: 0px;
            }

                .navbar-toggler .hamburger-toggle .hamburger span:first-child {
                    top: 10%;
                    transform-origin: 50% 50%;
                    transform: translate(0% -50%) !important;
                }

                .navbar-toggler .hamburger-toggle .hamburger span:nth-child(2) {
                    top: 50%;
                    transform: translate(0, -50%);
                }

                .navbar-toggler .hamburger-toggle .hamburger span:last-child {
                    left: 0px;
                    top: auto;
                    bottom: 10%;
                    transform-origin: 50% 50%;
                }

            .navbar-toggler .hamburger-toggle .hamburger.active span {
                position: absolute;
                margin: 0;
            }

                .navbar-toggler .hamburger-toggle .hamburger.active span:first-child {
                    top: 45%;
                    transform: rotate(45deg);
                }

                .navbar-toggler .hamburger-toggle .hamburger.active span:nth-child(2) {
                    left: 50%;
                    width: 0px;
                }

                .navbar-toggler .hamburger-toggle .hamburger.active span:last-child {
                    top: 45%;
                    transform: rotate(-45deg);
                }

.icons {
    display: inline-flex;
    margin-left: auto;
}

    .icons a {
        transition: all 0.2s ease-in-out;
        padding: 0.2rem 0.4rem;
        color: #ccc !important;
        text-decoration: none;
    }

        .icons a:hover {
            color: white;
            text-shadow: 0 0 30px white;
        }

.long-value-input {
    width: 200px;
    height: 30px;
    padding: 0 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

header {
    position: fixed;
    padding: 0rem 0 0rem 0;
    width: 100%;
    z-index: 99;
    top: 0;
    position: fixed;
    background: #ffffff;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    box-shadow: 0px 0px 4px rgba(6, 45, 209, 0.25);
}

    header .head-menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.homebanner {
    background: #F6F8FF;
    background-size: cover;
    height: 580px;
    display: block;
    margin: 7% 0 0 0;
}

    .homebanner .homeform .form-bg {
        width: 30%;
        padding: 3.2rem 2.4rem;
        background: #ffffff;
        border: 2px solid #ffffff;
        border-radius: 0.8rem;
        -webkit-backdrop-filter: blur(25px);
        backdrop-filter: blur(25px);
        position: relative;
        overflow: hidden;
        float: right;
        box-shadow: 0px 0px 4px rgba(39, 56, 128, 0.25);
    }

        .homebanner .homeform .form-bg input::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: #D2D2D2 !important;
        }

        .homebanner .homeform .form-bg input ::-moz-placeholder {
            /* Firefox 19+ */
            color: #D2D2D2 !important;
        }

        .homebanner .homeform .form-bg input :-ms-input-placeholder {
            /* IE 10+ */
            color: #D2D2D2 !important;
        }

        .homebanner .homeform .form-bg input :-moz-placeholder {
            /* Firefox 18- */
            color: #D2D2D2 !important;
        }

        .homebanner .homeform .form-bg textarea::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: #D2D2D2 !important;
        }

        .homebanner .homeform .form-bg textarea ::-moz-placeholder {
            /* Firefox 19+ */
            color: #D2D2D2 !important;
        }

        .homebanner .homeform .form-bg textarea :-ms-input-placeholder {
            /* IE 10+ */
            color: #D2D2D2 !important;
        }

        .homebanner .homeform .form-bg textarea :-moz-placeholder {
            /* Firefox 18- */
            color: #D2D2D2 !important;
        }

        .homebanner .homeform .form-bg .check_box {
            margin: 17px 0 0 0;
        }

            .homebanner .homeform .form-bg .check_box .rem_div {
                float: left;
                width: 50%;
                margin: 0px 0 0 0;
            }

                .homebanner .homeform .form-bg .check_box .rem_div .rem_div .checkform label {
                    margin: 0 0 0 0;
                }

            .homebanner .homeform .form-bg .check_box .forgot_div {
                float: right;
                width: 50%;
            }

            .homebanner .homeform .form-bg .check_box a.forget {
                text-align: right;
                float: right;
                text-transform: capitalize;
                font-size: 1.4rem;
                text-decoration: none;
                margin: 0px 0 1rem 0;
                color: #ffffff;
            }

                .homebanner .homeform .form-bg .check_box a.forget:hover {
                    color: #4aa4d9;
                }

.toggle-password {
    float: right;
    cursor: pointer;
    margin-right: 10px;
    margin-top: -28px;
}

/*forgot popup start*/
.forgot-popup .modal-body {
    padding: 0px;
}

.forgot-popup .close-btn {
    position: absolute;
    right: 0;
    top: -8px;
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
    color: #585858;
    z-index: 1;
    background: none;
    box-shadow: none;
    border: none;
}

.forgot-popup .forgotform {
    max-width: 100%;
    border-radius: 1.6rem;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3294117647);
    -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3294117647);
    -moz-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3294117647);
    background: #fff;
    position: relative;
    margin: 0 auto;
    padding: 2rem;
}

.forgot-popup .form-heading p {
    color: #000000;
    font-size: 3rem;
    line-height: normal;
    text-align: center;
    margin: 0 0 1.5rem 0;
    font-weight: 600;
}

.forgot-popup .modal-content {
    border-radius: 1.6rem;
}

.forgot-popup .btn-bg {
    text-align: center;
    margin: 0px auto 0;
}

.forgot-popup .form-bg {
    margin: 0rem;
}

.forgot-popup .forgotform label {
    margin: 0 0 1rem 0 !important;
    color: #2C3039;
}

.forgot-popup .otp-group {
    display: inline-block;
    margin: 0 auto 2rem;
    text-align: center;
    width: 100%;
}

    .forgot-popup .otp-group .input-effect {
        width: 160px;
        padding: 0;
        margin: 0 0px 0 0;
        text-align: center;
        display: inline-block;
        position: relative;
        border: none;
    }

/*forgot popup end*/
/*slider start*/
.form-slider {
    text-align: center;
    border: 1px solid #4aa4d9;
}

.form-box img {
    max-width: 100%;
    width: 100%;
}

.form-slider .slick-dots {
    bottom: -35px;
    height: 16px;
    width: 100%;
    text-align: center;
}

.banner-slide .slick-dotted.slick-slider {
    margin-bottom: 0px;
}

.form-slider .slick-dots li {
    margin: 0;
}

    .form-slider .slick-dots li button {
        width: 100%;
        height: 15px;
        padding: 0;
        text-indent: -9999px;
    }

.form-slider .slick-dots li {
    height: 16px;
    width: 16px;
    margin: 0 8px;
}

    .form-slider .slick-dots li button:before {
        height: 16px;
        width: 16px !important;
        border-radius: 50px;
        background: #D2D2D2;
        top: 0;
    }

    .form-slider .slick-dots li.slick-active button:before {
        background: #4aa4d9 !important;
    }

/*findlist start*/
.findhere ul.findlist {
    padding: 0;
    margin: 2.5rem 0 0 0;
}

    .findhere ul.findlist li {
        background: #ffffff;
        box-shadow: 0px 0px 4px rgba(6, 45, 209, 0.25);
        border-radius: 0.8rem;
        display: inline-block;
        width: calc(33.33% - 16px);
        margin: 0 1rem 2rem 1rem;
        padding: 2.4rem;
        vertical-align: top;
        border: 2px solid #ffffff;
    }

        .findhere ul.findlist li:hover {
            box-shadow: 0px 0px 4px #4aa4d9;
            border: 2px solid #4aa4d9;
        }

            .findhere ul.findlist li:hover h3 {
                color: #4aa4d9;
            }

                .findhere ul.findlist li:hover h3::after {
                    background: #4aa4d9;
                }

        .findhere ul.findlist li:first-child,
        .findhere ul.findlist li:nth-child(4) {
            margin-left: 0rem;
        }

        .findhere ul.findlist li:nth-child(3),
        .findhere ul.findlist li:nth-child(6) {
            margin-right: 0rem;
        }

/*submit visa start*/
.submitvisa {
    padding: 0;
}

    .submitvisa ul.submit-step {
        padding: 0;
        margin: 4.8rem 0 0 0;
        text-align: center;
    }

        .submitvisa ul.submit-step li {
            display: inline-block;
            width: calc(20% - 19px);
            margin: 0 1rem 2rem 1rem;
            padding: 2.4rem;
            vertical-align: middle;
        }

            .submitvisa ul.submit-step li .step-pic {
                margin: 0 0 3.2rem 0;
            }

            .submitvisa ul.submit-step li:first-child {
                margin-left: 0rem;
                position: relative;
            }

            .submitvisa ul.submit-step li:last-child {
                margin-right: 0rem;
            }

footer {
    background: #00BDF2;
    padding: 1.5rem;
}

    footer p {
        color: #ffffff;
        text-align: center;
    }

    footer a {
        text-decoration: underline;
        color: #ffffff;
    }

        footer a:hover {
            color: #ffffff;
            text-decoration: none;
        }

/*add form start*/
.form-head {
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 4.4rem;
    color: #4aa4d9;
}

.main-box {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 3.3rem 0 0 0;
    min-height: 100vh;
    height: 100%;
    position: relative;
}

    .main-box .container-fluid {
        padding-left: calc(var(--bs-gutter-x) * 0);
    }

    .main-box .left-box {
        width: 5%;
        height: 100%;
        overflow-x: hidden;
        box-shadow: 0px 2px 4px rgba(39, 56, 128, 0.25);
        position: fixed;
        font-weight: bold;
        padding-right: calc(var(--bs-gutter-x) * 0);
        background-color: #fff !important;
    }

        .main-box .left-box ul {
            padding: 0;
            margin: 2rem 0 0 0;
        }

            .main-box .left-box ul li {
                list-style-type: none;
                text-align: center;
                margin: 0 0 2rem 0;
                border-left: 2px solid #ffffff;
            }

                .main-box .left-box ul li span {
                    display: block;
                    margin: 5px 0 0 0;
                }

                .main-box .left-box ul li a {
                    color: #555555;
                    font-size: 1.6rem;
                    text-decoration: none !important;
                    text-align: center;
                }

                    .main-box .left-box ul li a:hover, .main-box .left-box ul li.active a {
                        color: #4aa4d9;
                        text-decoration: none !important;
                    }

                .main-box .left-box ul li.active a {
                    color: #4aa4d9;
                    text-decoration: none;
                }

                .main-box .left-box ul li.active, .main-box .left-box ul li:hover {
                    border-left: 2px solid #4aa4d9;
                }

                .main-box .left-box ul li a i {
                    border: 2px solid #555555;
                    padding: 1rem;
                    border-radius: 100%;
                }

                    .main-box .left-box ul li a i.fa {
                        width: 50px;
                        text-align: center;
                        padding-right: 15px;
                        transition: all 1s;
                    }

                .main-box .left-box ul li a:hover i.fa, .main-box .left-box ul li.active a i.fa {
                    color: #4aa4d9;
                }

                .main-box .left-box ul li a:hover i, .main-box .left-box ul li.active a i {
                    border: 2px solid #4aa4d9;
                }

    .main-box .right-box {
        transition: all 0.5s;
    }

/*Add form start*/
#notComplete,
#submitGood,
#dbError {
    display: none;
}

#results {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    margin-top: 5rem;
    color: #2C3039;
}

#msform {
    width: 100%;
    margin: 2rem auto;
    position: relative;
}
.reg-form{
    border-radius: 0.4rem;
            box-shadow: 0px 0px 4px rgba(39, 56, 128, 0.25);
            padding: 2.4rem 2.4rem 0rem 2.4rem;
            margin: 0 0 2.4rem 0;
            position: relative;
            background: #ffffff;
}
    #msform fieldset {
        border: 0 none;
        box-sizing: border-box;
        width: 100%;
        margin: 0 0;
        position: absolute;
    }

        #msform fieldset .form-border {
            border-radius: 0.4rem;
            box-shadow: 0px 0px 4px rgba(39, 56, 128, 0.25);
            padding: 2.4rem 2.4rem 0rem 2.4rem;
            margin: 0 0 2.4rem 0;
            position: relative;
            background: #ffffff;
        }

        #msform fieldset:not(:first-of-type) {
            display: none;
        }

    #msform .action-button {
        width: 10%;
        background: #4aa4d9;
        font-weight: 700;
        font-size: 1.8rem;
        line-height: 2.5rem;
        color: #ffffff !important;
        border: 0 none;
        border-radius: 0.4rem;
        border: 1px solid #4aa4d9;
        cursor: pointer;
        padding: 1rem 5rem;
        margin: 0rem 1rem 3rem 0;
        transition: all 0.3s ease-in-out;
    }

        #msform .action-button:hover, #msform .action-button:focus {
            background: #407DF6;
            color: #ffffff !important;
        }

        #msform .action-button.active {
            background: #ffffff !important;
            color: #4aa4d9 !important;
        }

            #msform .action-button.active:hover {
                background: #407DF6;
                color: #ffffff;
            }

    #msform .prev-btn {
        font-weight: 700;
        font-size: 1.8rem;
        line-height: 2.5rem;
        border: 0 none;
        border-radius: 0.4rem;
        cursor: pointer;
        padding: 1rem 1rem;
        margin: 0rem 1rem 3rem 0;
        transition: all 0.3s ease-in-out;
        background: #ffffff !important;
        color: #4aa4d9 !important;
        border: 1px solid #4aa4d9 !important;
        width: 10%;
    }

        #msform .prev-btn:hover {
            background: #4aa4d9 !important;
            color: #ffffff !important;
            border: 1px solid #4aa4d9 !important;
        }

.star {
    color: #FF0000;
}

.per-comp {
    position: absolute;
    right: 0rem;
    top: 1.1rem;
    color: #222E3E;
    font-size: 1.4rem;
    font-weight: 600;
}

.limit {
    font-size: 2rem;
    line-height: 2.7rem;
    color: #555555;
    margin: 0 0 2rem 0;
}

    .limit span {
        color: #4aa4d9;
    }

/*progressbar*/
#progressbar {
    margin-bottom: 3rem;
    overflow: hidden;
    counter-reset: step;
    text-align: center;
    left: 0;
    position: relative;
}

    #progressbar li {
        list-style-type: none;
        color: #222E3E;
        font-size: 1.8rem;
        width: 23%;
        float: left;
        position: relative;
        text-align: left;
        font-weight: 500;
    }

        #progressbar li:before {
            content: counter(step);
            counter-increment: step;
            width: 4rem;
            line-height: 3.4rem;
            display: block;
            height: 4rem;
            font-weight: 700;
            font-size: 1.6rem;
            color: #000000;
            outline: 2px solid #D2D2D2;
            background: #EEEEEE;
            border-radius: 100%;
            border: 5px solid #ffffff;
            margin: 2px 5px 14px 5px;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        #progressbar li:after {
            content: "";
            width: 76%;
            height: 0.8rem;
            background: #D2D2D2 !important;
            position: absolute;
            left: 19%;
            top: 1.6rem;
            border-radius: 1.8rem;
        }

        /*#progressbar li:first-child:before,
#progressbar li:first-child:after {
  background: $secondarycolor ;
  color: $brightcolor ;
  line-height: 3.0rem;
  border: 5px solid $brightcolor;
  outline: 2px solid $secondarycolor;
}

#progressbar li.active.done:first-child:before {
  outline: 2px solid $greencolor ;
  background: $greencolor ;
  border-radius: 100%;
  border: 5px solid $brightcolor;
}
#progressbar li:hover:before,
#progressbar li:hover:after {
  background: $secondarycolor !important;
  color: $brightcolor !important;
  line-height: 3.0rem;
}
#progressbar li:hover:before {
  outline: 2px solid $secondarycolor;
  background: $secondarycolor;
  border-radius: 100%;
  border: 5px solid $brightcolor;
}
*/
        #progressbar li.done:before {
            content: "✓";
        }

        #progressbar li.active:after {
            background: #D2D2D2 !important;
            color: #ffffff !important;
            line-height: 3rem;
            border: 1px solid #D2D2D2;
        }

        #progressbar li.active:before {
            outline: 2px solid #407DF6;
            background: #407DF6 !important;
            border-radius: 100%;
            border: 5px solid #ffffff;
            color: #ffffff !important;
        }

        #progressbar li.active.done:after {
            background: #0BBB32 !important;
            color: #ffffff !important;
            line-height: 3rem;
            border: 1px solid #0BBB32;
        }

        #progressbar li.active.done:before {
            outline: 2px solid #0BBB32;
            background: #0BBB32 !important;
            border-radius: 100%;
            border: 5px solid #ffffff;
        }

.percent {
    position: absolute;
    right: 5%;
    width: 10%;
    top: 13px;
}

.input_container {
    position: relative;
}

    .input_container i {
        position: absolute;
        bottom: 10px;
        right: 11px;
        font-size: 1.4rem;
        width: 20px;
        height: 20px;
        color: #555555;
    }

.join .radio {
    display: inline-block;
    margin: 1.5rem 3rem 0 0px;
}

.or-border {
    position: relative;
}

    .or-border .or-main {
        margin: 1rem auto;
        text-align: center;
        width: 100%;
        display: block;
    }

        .or-border .or-main .or-box {
            background: #EEEEEE;
            border: 5px solid #ffffff;
            padding: 10px;
            border-radius: 100px;
            outline: 1px solid #DDDDDD;
            display: inline-block;
            font-style: normal;
            margin: 10px auto;
            z-index: 1;
            font-weight: 700;
            text-align: center;
            position: relative;
            font-size: 1.6rem;
            line-height: 22px;
        }

        .or-border .or-main:before {
            position: absolute;
            content: "";
            top: 50%;
            height: 1px;
            left: 0;
            background: #EEEEEE;
            width: 50%;
        }

        .or-border .or-main:after {
            position: absolute;
            content: "";
            top: 50%;
            height: 1px;
            right: 0;
            background: #EEEEEE;
            width: 50%;
        }

.add-pass {
    margin: 24px 0 0 0;
}

.border-bottom {
    border-bottom: 1px solid #DDDDDD;
    padding: 0 0 1rem 0;
    margin: 0 0 2rem 0;
}

.passanger-two {
    position: relative;
}

.close-btn {
    position: absolute;
    right: -13px;
    top: -8px;
}

    .close-btn i {
        background: #4aa4d9;
        border-radius: 100%;
        height: 30px;
        width: 30px;
        font-size: 1.6rem;
        text-align: center;
        color: #ffffff;
        line-height: 30px;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }

        .close-btn i:hover {
            background: #4aa4d9;
        }

.add-btn {
    display: inline-block;
    margin: 30px 20px 0 0;
    font-size: 1.4rem;
}

    .add-btn i {
        background: #273880;
        border-radius: 100%;
        height: 30px;
        width: 30px;
        font-size: 1.6rem;
        text-align: center;
        color: #fff;
        line-height: 30px;
        cursor: pointer;
        margin: 0 5px 0 0;
    }

        .add-btn i:hover {
            background: #4aa4d9;
        }

a.edit-btn {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: normal;
    display: inline-block;
    right: 3rem;
    position: absolute;
    font-weight: 600;
    color: #4aa4d9;
    text-decoration: none;
}

    a.edit-btn:hover {
        color: #4aa4d9;
    }

/*Visa fee details start*/
.visa-border {
    border-radius: 0.4rem;
    box-shadow: 0px 0px 4px rgba(39, 56, 128, 0.25);
    padding: 0rem 0rem;
    margin: 0 0 2rem 0;
    position: relative;
}

.visa-table {
    margin: -24px 0 0 0;
}

.table thead th {
    border-bottom: 1px solid #EBEBEB;
    background: #E6F9FF;
    color: #4aa4d9;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.9rem;
    vertical-align: middle;
    text-align: center;
}

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

    .table tr th,
    .table tr td {
        border-right: 1px solid #EBEBEB;
        border-bottom: 0px solid #EBEBEB;
        padding: 1.2rem;
    }

        .table tr th:first-child,
        .table tr td:first-child {
            border-left: 1px solid #EBEBEB;
        }

    .table tr td {
        font-style: normal;
        font-weight: 600;
        font-size: 1.4rem;
        line-height: 3rem;
        color: #555555;
        vertical-align: middle;
    }

    .table tr:first-child th:first-child {
        border-top-left-radius: 0.4rem;
    }

    .table tr:first-child th:last-child {
        border-top-right-radius: 0.4rem;
    }

    .table tr:last-child td:first-child {
        border-bottom-left-radius: 0.4rem;
    }

    .table tr:last-child td:last-child {
        border-bottom-right-radius: 0.4rem;
    }

    .table tr:last-child td {
        border-bottom: 1px solid #EBEBEB;
        border-right: 0px;
    }

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

.p-b-10 {
    padding-bottom: 1rem !important;
}

.p-t-10 {
    padding-top: 1rem !important;
}

.p-space {
    padding: 0rem 2rem 0rem 2rem;
}

.select-box {
    font-style: normal;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 2.5rem;
    display: inline-block;
    color: #000000;
    padding: 0px 0 2rem 0;
}

div.dataTables_wrapper div.dataTables_filter input {
    padding: 1rem;
    margin-left: 0 !important;
}

.benefit-banner {
    background: #4aa4d9;
    display: block;
}

    .benefit-banner .map {
        background: url(../images/map.png) no-repeat center center;
        padding: 0rem 0 0 0;
        background-size: contain;
    }

    .benefit-banner ul.bene-list {
        margin: 1.5rem 0 1.5rem 0;
        float: left;
        width: 100%;
    }

        .benefit-banner ul.bene-list li {
            float: left;
            width: calc(50% - 10px);
        }

        .benefit-banner ul.bene-list ul li {
            margin: 0 0 2rem 0;
            padding: 0 0 0 1.5rem;
            display: block;
            position: relative;
            font-style: normal;
            font-weight: 500;
            font-size: 1.8rem;
            line-height: 27px;
            color: #ffffff;
            width: 100%;
        }

            .benefit-banner ul.bene-list ul li:before {
                content: "";
                width: 8px;
                height: 8px;
                display: block;
                border-radius: 50px;
                background: #ffffff;
                left: 0;
                top: 9px;
                position: absolute;
            }

    .benefit-banner .benefit-form {
        background: #ffffff;
        position: relative;
        padding: 3rem 5rem;
    }

        .benefit-banner .benefit-form .member {
            text-align: right;
            font-size: 1.6rem;
            line-height: 2.2rem;
            text-transform: capitalize;
            color: #555555;
            margin: 0 0 2rem 0;
        }

            .benefit-banner .benefit-form .member a {
                font-weight: 500;
                font-size: 1.6rem;
                line-height: 2.2rem;
                text-decoration-line: underline;
                text-transform: uppercase;
                color: #4aa4d9;
            }

                .benefit-banner .benefit-form .member a:hover {
                    color: #4aa4d9;
                }

        .benefit-banner .benefit-form .sign-box {
            box-shadow: 0px 0px 4px #4aa4d9;
            border: 2px solid #4aa4d9;
            border-radius: 0.8rem;
            padding: 3.2rem;
        }

div.dataTables_wrapper div.dataTables_info {
    padding: 0 0 2rem 0;
    white-space: nowrap;
    display: inline-block;
    font-size: 1.2rem;
    position: absolute;
    bottom: 0;
}

div.dataTables_wrapper div.dataTables_paginate {
    padding: 2rem 0rem 2rem 0;
    white-space: nowrap;
    text-align: center !important;
    float: none;
    position: relative;
}

div.dataTables_wrapper div.dataTables_length select {
    width: 4.5rem !important;
    display: inline-block;
    font-size: 1.2rem;
    height: auto !important;
}

div.dataTables_wrapper div.dataTables_length label {
    font-size: 12px !important;
}

.dataTables_length,
.dataTables_wrapper {
    font-size: 1.6rem;
    margin: 3rem 2rem 1rem;
}

    .dataTables_length select,
    .dataTables_length input,
    .dataTables_wrapper select,
    .dataTables_wrapper input {
        background-color: #ffffff;
        border: 1px solid #DDDDDD;
        border-radius: 0.4rem;
        height: 4rem;
        line-height: 2;
        font-size: 1.8rem;
        color: #2C3039;
        margin: -15px 0 0 0;
    }

    .dataTables_length .dataTables_length,
    .dataTables_length .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        display: inline-flex;
    }

.dataTables_filter {
    z-index: 0;
    position: relative;
    font-size: 1.4rem;
    padding: 5px;
    margin: 3rem 0rem 1rem;
}

.paginate_button {
    min-width: 1rem;
    display: inline-block;
    text-align: center;
    padding: 0.5rem 1rem;
    margin-top: -1rem;
    border: 2px solid #DDDDDD;
    background: #ffffff;
    text-decoration: none;
    color: #4aa4d9;
}

a.paginate_button.current {
    background: #4aa4d9;
    color: #ffffff;
}

.paginate_button:not(.previous) {
    border-left: none;
}

.paginate_button.previous {
    border-radius: 0.8rem 0 0 0.8rem;
    min-width: 4rem;
    background: #ffffff url(../images/back.png) no-repeat center center;
    text-decoration: none;
    color: #4aa4d9;
    margin: -2px 0 0 0;
    padding: 1.6rem 1rem;
    vertical-align: middle;
    content: "";
}

.paginate_button.next {
    border-radius: 0 0.8rem 0.8rem 0;
    min-width: 4rem;
    background: #ffffff url(../images/next.png) no-repeat center center;
    text-decoration: none;
    color: #4aa4d9;
    margin: -2px 0 0 0;
    padding: 1.6rem 1rem;
    vertical-align: middle;
    content: "";
}

.paginate_button:hover {
    cursor: pointer;
    background-color: #4aa4d9;
    color: #ffffff;
    text-decoration: none;
}

    .paginate_button:hover.next {
        background: #4aa4d9 url(../images/next-r.png) no-repeat center center;
    }

    .paginate_button:hover.previous {
        background: #4aa4d9 url(../images/back-r.png) no-repeat center center;
    }

table.table-bordered.dataTable tbody th,
table.table-bordered.dataTable tbody td {
    border-bottom-width: 0;
    text-align: center !important;
}

table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
    content: "↑" !important;
    right: 1.5rem;
    position: absolute;
}

table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
    content: "↓" !important;
}

table.dataTable thead .sorting_asc:after {
    content: "↓" !important;
}

table.dataTable {
    margin-bottom: 2rem !important;
}

.dataTables_length {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 1.4rem;
    z-index: 9;
}

ul.sort-file {
    margin: 2rem auto 0;
    left: 0;
    position: absolute;
    text-align: center;
    right: 0;
    padding: 0;
}

    ul.sort-file li {
        display: inline-block;
        width: 7%;
        margin: 0 0.5rem;
    }

        ul.sort-file li:last-child {
            width: 9%;
        }

.export {
    right: 2rem;
    position: absolute;
    top: 2rem;
}

.success {
    font-weight: 500;
    font-size: 14px;
    width: 70%;
    display: inline-block;
    border-radius: 100px;
    line-height: 19px;
    text-transform: capitalize;
    padding: 8px 15px;
    color: #008000;
    background: #D0FFD0;
}

.pending {
    font-weight: 500;
    font-size: 14px;
    width: 70%;
    display: inline-block;
    border-radius: 100px;
    line-height: 19px;
    text-transform: capitalize;
    padding: 8px 15px;
    color: #0000FF;
    background: #D0F9FF;
}

.error {
    font-weight: 500;
    font-size: 14px;
    width: 70%;
    display: inline-block;
    border-radius: 100px;
    line-height: 19px;
    text-transform: capitalize;
    padding: 8px 15px;
    color: #FF0000;
    background: #FFDCDC;
}

.waiting {
    font-weight: 500;
    font-size: 14px;
    width: 70%;
    display: inline-block;
    border-radius: 100px;
    line-height: 19px;
    text-transform: capitalize;
    padding: 8px 15px;
    color: #Ff792e;
    background: #ffdfcc;
}

a.status-btn {
    font-size: 1.4rem;
    line-height: 1.9rem;
    text-transform: capitalize;
    color: #555555;
    text-decoration: none;
    position: relative;
    padding: 0 0 0 1.5rem;
}

    a.status-btn:before {
        content: "";
        width: 1rem;
        height: 1rem;
        display: block;
        border-radius: 50px;
        left: 0;
        top: 0.4rem;
        position: absolute;
    }

    a.status-btn.dot1:before {
        background: #008000;
    }

    a.status-btn.dot2:before {
        background: #0000FF;
    }

    a.status-btn.dot3:before {
        background: #FF0000;
    }

    a.status-btn.dot4:before {
        background: #Ff792e;
    }

    a.status-btn:after {
        content: "";
        position: absolute;
        right: -17px;
        top: 0.5rem;
        width: 1.1rem;
        height: 0.9rem;
        transform: rotate(-90deg);
        background: url(../images/select_arrow.png) no-repeat center center;
    }

    a.status-btn:hover {
        color: #4aa4d9;
    }

        a.status-btn:hover:before {
            background: #4aa4d9;
        }

.flexbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100vh;
    margin: 0;
}

.flexbox-item {
    max-width: 100%;
}

.fixed {
    flex: none;
    max-width: 100%;
}

.profile-user-img {
    width: 12rem;
    height: 12rem;
    border: 1px solid #DDDDDD;
    border-radius: 100%;
}

.avatar-upload {
    position: relative;
    max-width: 14rem;
    margin-bottom: 2rem;
}

    .avatar-upload .avatar-edit {
        position: absolute;
        right: 0px;
        z-index: 1;
        bottom: 0px;
    }

        .avatar-upload .avatar-edit input {
            display: none;
        }

            .avatar-upload .avatar-edit input + label {
                display: inline-block;
                width: 3.4rem;
                height: 3.4rem;
                margin-bottom: 0;
                border-radius: 100%;
                background: #ffffff;
                border: 1px solid #DDDDDD;
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                cursor: pointer;
                font-weight: normal;
                transition: all 0.2s ease-in-out;
            }

                .avatar-upload .avatar-edit input + label:hover {
                    background: #ffffff;
                    border-color: #DDDDDD;
                }

                .avatar-upload .avatar-edit input + label:after {
                    content: "";
                    font-family: "FontAwesome";
                    color: #4aa4d9;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0.5rem;
                    width: 2.5rem;
                    height: 2.5rem;
                    text-align: center;
                    margin: auto;
                    background: url(../images/camera.png) no-repeat center center;
                }

    .avatar-upload .avatar-head {
        font-weight: 500;
        font-size: 1.6rem;
        text-align: center;
        line-height: 2.2rem;
        padding: 0 0 1rem;
        color: #555555;
    }

.d-hide {
    display: none !important;
}

:root {
    --color-white-100: hsl(206, 5%, 100%);
    --color-white-200: hsl(206, 5%, 90%);
    --color-white-300: hsl(206, 5%, 80%);
    --color-white-400: hsl(206, 5%, 60%);
    --color-white-500: hsl(206, 5%, 50%);
    --color-black-100: hsl(213, 23%, 8%);
    --color-black-200: hsl(214, 21%, 6%);
    --color-black-300: hsl(210, 21%, 6%);
    --color-black-400: hsl(216, 22%, 4%);
    --color-black-500: hsl(220, 18%, 3%);
    --color-pink-100: hsl(326, 85%, 90%);
    --color-pink-200: hsl(327, 87%, 80%);
    --color-pink-300: hsl(329, 86%, 70%);
    --color-pink-400: hsl(330, 81%, 60%);
    --color-pink-500: hsl(333, 71%, 50%);
    --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    row-gap: 0rem;
    width: 90%;
    height: 4rem;
    margin: 0 auto;
}

    .wrapper nav#navbar {
        margin-right: 20px;
    }

.menu-item {
    position: relative;
    display: inline-block;
    margin-left: 1.5rem;
}

.menu-link {
    display: flex;
    justify-content: center;
    align-items: center;
    -moz-column-gap: 0.25rem;
    column-gap: 0.25rem;
    font-family: inherit;
    font-size: 2rem;
    font-weight: 600;
    line-height: 2.7rem;
    cursor: pointer;
    text-transform: capitalize;
    color: #000000;
    transition: all 0.3s ease-in-out;
}

    .menu-link > i.bx {
        font-size: 1rem;
        line-height: 1rem;
        color: inherit;
    }

    .menu-link:hover {
        outline: none;
        color: #4aa4d9;
    }

.submenu {
    position: absolute;
    top: 6rem;
    right: 0rem;
    min-width: 20rem;
    height: auto;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    border-radius: 0 0 0.25rem 0.25rem;
    border-top: 2px solid #EEEEEE;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    transition: all 0.3s ease-in-out;
}

    .submenu:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        margin-left: -0.5em;
        top: 1px;
        left: 90%;
        box-sizing: border-box;
        border: 1em solid rgba(0, 0, 0, 0.2);
        border-color: transparent transparent #ffffff #ffffff;
        transform-origin: 0 0;
        transform: rotate(135deg);
        box-shadow: -3px 3px 7px -3px rgba(0, 0, 0, 0.2);
    }

.submenu-item {
    display: block;
}

.submenu-link {
    font-size: 1.6rem;
    font-weight: 500;
    border-bottom: 1px solid #EEEEEE;
    line-height: 3rem;
    cursor: pointer;
    color: #000000;
    transition: all 0.35s ease;
    text-decoration: none;
    display: block;
    padding: 1rem 1rem;
}

    .submenu-link:hover {
        background: #E6F9FF;
        color: #000000;
    }

.burger {
    position: relative;
    display: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 3.6rem;
    height: 3.15rem;
    opacity: 0;
    visibility: hidden;
    background: transparent;
}

.burger-line {
    position: absolute;
    display: block;
    right: 0;
    width: 100%;
    height: 2.1px;
    opacity: 1;
    border: none;
    outline: none;
    border-radius: 1rem;
    background: #000000;
}

    .burger-line:nth-child(1) {
        top: 0px;
    }

    .burger-line:nth-child(2) {
        top: 2rem;
        width: 70%;
    }

    .burger-line:nth-child(3) {
        top: 1rem;
    }

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease-in-out;
    background-color: rgba(0, 0, 0, 0.65);
}

.menu-icon1 {
    position: relative;
    width: 2.5rem;
    display: inline-block;
    padding: 0px 0px 0px 0;
    height: 2.5rem;
    top: 0.2rem;
    background: url(../images/sprite.png) no-repeat -50px -9px;
}

.menu-icon2 {
    position: relative;
    width: 2.5rem;
    display: inline-block;
    padding: 0px 0px 0px 0;
    height: 2.5rem;
    top: 0.2rem;
    background: url(../images/sprite.png) no-repeat -92px -9px;
}

.menu-icon3 {
    position: relative;
    width: 2.5rem;
    display: inline-block;
    padding: 0px 0px 0px 0;
    height: 2.5rem;
    top: 0.2rem;
    background: url(../images/sprite.png) no-repeat -130px -9px;
}

img.userpic {
    border-radius: 100%;
    vertical-align: middle;
    margin: 0 1rem 0 0;
}

.user-name {
    font-size: 1.8rem;
    line-height: 2rem;
    text-align: center;
    color: #000000;
    padding: 1rem 0 0.5rem 0;
    border-bottom: 1px solid #EEEEEE;
}

    .user-name span {
        font-style: normal;
        font-weight: 500;
        display: block;
        font-size: 1.6rem;
        line-height: 1.8rem;
        color: #555555;
        margin: 0.5rem 0 0.5rem 0;
    }

.form-control:disabled {
    background-color: #fff;
    opacity: 0.9;
}

.print-box .form-control {
    opacity: 0.5;
}

.print-box input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #000000 !important;
}

.print-box input ::-moz-placeholder {
    /* Firefox 19+ */
    color: #000000 !important;
}

.print-box input :-ms-input-placeholder {
    /* IE 10+ */
    color: #000000 !important;
}

.print-box input :-moz-placeholder {
    /* Firefox 18- */
    color: #000000 !important;
}

.print-box textarea::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #000000 !important;
}

.print-box textarea ::-moz-placeholder {
    /* Firefox 19+ */
    color: #000000 !important;
}

.print-box textarea :-ms-input-placeholder {
    /* IE 10+ */
    color: #000000 !important;
}

.print-box textarea :-moz-placeholder {
    /* Firefox 18- */
    color: #000000 !important;
}

.print-box .widget-cus-id .select2-container--default .select2-selection--single {
    opacity: 0.5;
}

.print-box .checkform label {
    opacity: 0.5;
}

input.slide-hover-left-1 {
    background-image: linear-gradient(0, #0A3D5B, #0A3D5B);
    background-size: 0;
    transition: 0.8s;
    background-repeat: no-repeat;
}

    input.slide-hover-left-1:hover {
        background-size: 100%;
        color: #fff;
    }

@media screen and (max-width: 1600px) {
    #msform .action-button {
        width: auto;
    }

    ul.sort-file li {
        display: inline-block;
        width: 8%;
        margin: 0 0.5rem;
    }

        ul.sort-file li:nth-child(4) {
            width: 11%;
        }

    .w-16 {
        width: 20%;
    }

        .w-16:first-child {
            width: 20%;
        }

        .w-16:last-child {
            margin-bottom: 10px;
        }
}

@media screen and (max-width: 1440px) {
    ul.sort-file li {
        display: inline-block;
        width: 9%;
        margin: 0 0.5rem;
    }

        ul.sort-file li:last-child {
            width: 12%;
        }

    .success,
    .pending,
    .error,
    .waiting {
        width: 100% !important;
        border-radius: 0.8rem;
        line-height: 1.9rem;
    }

    .table tr td {
        line-height: 2rem;
    }

    #msform {
        width: 100%;
        margin: 3rem auto;
        position: relative;
    }

    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 100%;
        width: 96%;
    }

    .alert-box {
        width: 26%;
    }

    .w-16 {
        width: 20%;
    }

        .w-16:first-child {
            width: 20%;
        }
    input, input::placeholder {
        font-size: 13px !important;
        
    }
}

@media screen and (max-width: 1366px) {
    .per-comp {
        font-size: 1.2rem;
    }
    .button {
        padding: 1rem 1.5rem;
        font-size: 1.4rem;
     }
    }

@media screen and (max-width: 1280px) {
    .homebanner {
        margin: 9% 0 0 0;
    }
    .button {
        padding: 1rem 1.5rem;
        font-size: 1.4rem;
    }
    .w-16 {
        width: 20%;
    }

        .w-16:first-child {
            width: 20%;
        }
}

@media only screen and (max-width: 1024px) {
    .benefit-banner .benefit-form {
        padding: 2rem 2rem;
    }

        .benefit-banner .benefit-form .sign-box {
            padding: 2rem;
        }

    #msform .action-button {
        width: 13%;
    }

    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    ul.sort-file {
        margin: 0.5rem auto 0;
    }

        ul.sort-file li {
            width: 12%;
        }

            ul.sort-file li:last-child {
                width: 17%;
            }

    .export {
        top: 0.5rem;
    }

    div.dataTables_wrapper div.dataTables_filter input {
        margin: 0px 0 0 0;
        display: inline-block;
        width: 140px !important;
        font-size: 14px;
        padding: 5px;
        height: 45px;
    }

    table.dataTable {
        margin-top: 0px !important;
    }

    .dataTables_length .dataTables_length,
    .dataTables_length .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin: 0rem 0rem 1rem;
        display: inline-flex;
    }

    .success,
    .pending,
    .error,
    .waiting {
        font-size: 1.2rem;
        padding: 3px 8px;
    }

    .per-comp {
        font-size: 1rem;
    }

    .w-20 {
        width: 30%;
    }

    .input-effect {
        margin: 0 0 0.4rem 0;
    }

    #msform fieldset .form-border {
        padding: 2.4rem 2.4rem 2.4rem 2.4rem;
    }

    .w-16 {
        width: 30%;
    }

    .button {
        padding: 1rem 1rem;
    }
}

@media only screen and (min-width: 993px) {
    .menu-dropdown:hover > .submenu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

@media screen and (max-width: 992px) {
    a.m-logo {
        padding: 1rem;
        display: block;
    }

    .wrapper {
        height: 9rem;
    }

        .wrapper .navbar {
            position: fixed;
            top: 0;
            left: -100%;
            width: 75%;
            height: 100%;
            z-index: 10;
            opacity: 0;
            overflow-y: auto;
            visibility: hidden;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
            background-color: #ffffff;
            transition: all 0.5s ease;
        }

            .wrapper .navbar.active {
                left: 0rem;
                opacity: 1;
                visibility: visible;
            }

    .user-name {
        padding: 1rem 1rem;
        text-align: left;
    }

    .menu-link > i {
        right: 16px;
        position: absolute;
    }

    .d-hide {
        display: block !important;
    }

    .menu {
        width: 100%;
        height: auto;
        padding: 1rem 0;
        position: absolute;
        top: 0;
    }

    .menu-item {
        display: block;
        margin: 0 auto;
    }

    .menu-link {
        justify-content: flex-start;
        padding: 2rem 2rem;
        border-bottom: 1px solid #EEEEEE;
        line-height: 3rem;
    }

        .menu-link:hover {
            background: #E6F9FF;
            color: #000000;
        }

    a.menu-link {
        text-decoration: none;
    }

    .submenu {
        position: relative;
        top: -0.5rem;
        left: 0rem;
        width: 100%;
        max-height: 0;
        padding: 0px;
        border: none;
        outline: none;
        opacity: 1;
        overflow: hidden;
        visibility: visible;
        transform: translateY(0px);
        box-shadow: none;
        background: transparent;
    }

    .burger {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .overlay.active {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    #progressbar {
        left: 0;
    }

    .per-comp {
        right: 0rem;
    }

    .export span {
        display: none;
    }

    div.dataTables_wrapper div.dataTables_filter input {
        height: 36px;
        margin-left: 0rem !important;
        width: 130px !important;
    }

    .benefit-banner .benefit-form {
        padding: 2rem 2rem;
        margin: 0 0 2rem 0;
    }

    .menu-icon1 {
        background: url(../images/sprite.png) no-repeat -50px -14px;
    }

    .menu-icon2 {
        background: url(../images/sprite.png) no-repeat -92px -14px;
    }

    .menu-icon3 {
        background: url(../images/sprite.png) no-repeat -130px -14px;
    }

    input[type=checkbox]:checked + label:after {
        top: 2px;
    }

    .action-btn {
        max-width: 120px;
    }

    .select {
        min-width: 160px;
    }

    .re-action-button {
        height: 39px;
    }

    #msform .action-button {
        width: 19%;
    }

    input[type=text],
    .select {
        font-size: 15px;
        height: 35px;
    }
}

@media screen and (max-width: 768px) {
    .homebanner {
        margin: 13% 0 0 0;
        background: #ffffff;
    }

        .homebanner .homeform .form-bg {
            width: 100%;
        }

    .submitvisa ul.submit-step li {
        display: inline-block;
        width: calc(100% - 0px);
        margin: 0 0rem 3rem 0rem;
        padding: 0 0 2rem;
        border-bottom: 1px dashed #DDDDDD;
        vertical-align: middle;
    }

        .submitvisa ul.submit-step li:last-child {
            border-bottom: 0px dashed #DDDDDD;
        }

    .m-hide {
        display: none !important;
    }

    body,
    html {
        font-size: 1rem;
        background: #ffffff;
        font-size: 50%;
        font-size: 8px;
        overflow-x: hidden;
    }

    .input_container i {
        position: absolute;
        bottom: 5px;
        right: 4px;
        font-size: 14px;
        width: 20px;
        height: 20px;
        color: #555555;
    }

    .add-btn {
        display: inline-block;
        margin: 24px 13px 0 0;
        font-size: 14px;
    }

    .arrow-down {
        position: absolute;
        right: 10px;
        top: 14px;
    }

    ul.sort-file li {
        width: 12%;
    }

        ul.sort-file li:nth-child(4) {
            width: 16%;
        }

    .dataTables_wrapper .dataTables_filter {
        margin: 0rem 0rem 0rem;
    }

    .toggle-password {
        margin-top: -22px;
    }

    .add-pass {
        margin: 20px 0 0 0;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 18px !important;
    }

    .alert-box {
        width: 40%;
    }

    .vald-info {
        width: 70%;
    }

    #msform fieldset .form-border {
        padding: 2.4rem 2.4rem 2.4rem 2.4rem;
    }
}

@media screen and (max-width: 767px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 100%;
        width: 98%;
    }

    .per-comp {
        font-size: 1.4rem;
    }

        .per-comp span {
            display: none;
        }

    section {
        padding: 2.5rem 1.5rem;
    }

    .submitvisa {
        padding: 2.5rem 1.5rem;
    }
    .main-box .right-box {
        width: 100%;
    }

    [type=file] {
        width: 90%;
    }
    .homebanner {
        background: none;
        margin: 26% 0 0 0;
    }

        .homebanner .homeform .form-bg {
            width: 96%;
            float: none;
            margin: 0 auto;
        }

    header {
        background: #ffffff;
        box-shadow: 0px 2px 4px rgba(39, 56, 128, 0.25);
        padding: 1rem 1rem;
    }

    a.navbar-brand img {
        max-width: 100%;
        width: 80%;
    }

    header.large,
    header.small {
        padding: 0 1.5rem;
    }

    header .home-logo img {
        max-width: 100%;
        width: 60%;
        transition: all 0.5s;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
    }

    header.small .home-logo img {
        max-width: 100%;
        width: 50%;
    }

    .main-box {
        margin: 6.3rem 0 0 0;
    }

    .findhere ul.findlist li {
        width: calc(100% - 0px);
        margin: 0 0 2rem 0;
    }

    .benefit-banner ul.bene-list li {
        float: left;
        width: calc(100% - 0px);
    }

    .benefit-banner .map {
        padding: 2rem;
    }

    .flexbox-container {
        min-height: auto;
    }

    .visa-table {
        margin: 0px 0 0 0;
    }

    div.dataTables_wrapper div.dataTables_info {
        padding: 0 0 1rem 0;
    }

    #msform fieldset .form-border {
        padding: 2rem 2rem 0rem 2rem;
    }

    #msform #progressbar li {
        width: 23%;
        font-size: 1.2rem;
    }

    #msform .action-button {
        width: 30%;
    }

    #msform #progressbar li:before {
        width: 3.5rem;
        height: 3.5rem;
        line-height: 2.5rem;
    }

    #msform #progressbar li.active:before,
    #msform #progressbar li.active:after {
        line-height: 2.5rem;
    }

    .limit {
        margin: 0 0 1rem 0;
    }

    .input_container,
    .join,
    .file-box {
        margin: 0 0 3rem 0;
    }

    .add-btn {
        margin: 0px 20px 20px 0;
    }

    .arrow-down {
        position: absolute;
        right: 15px;
        top: 15px;
    }

    .input_container i {
        bottom: 5px;
        right: 9px;
    }

    .input-effect {
        margin: 0 0 2rem 0;
    }

    .form-head {
        font-size: 2.2rem;
    }

    div.dataTables_wrapper div.dataTables_paginate {
        padding: 2rem 0rem 4rem 0;
    }

    .dataTables_length {
        margin: 0 1rem 0 0 !important;
    }

    ul.sort-file li {
        width: 30%;
    }

    ul.sort-file {
        margin: 0rem auto 0;
        left: 0;
        position: relative;
        text-align: left;
        right: 0;
        padding: 1.4rem 1rem 2rem 1rem;
        top: 41px;
    }

        ul.sort-file li:last-child {
            width: 41%;
        }

    .dataTables_filter {
        position: absolute;
        font-size: 1.4rem;
        padding: 0.5rem 0 0 0;
        top: 0;
    }

    .forgot-popup .close-btn {
        right: 1rem;
    }

    .checkform label {
        margin: 0 10px 0px 0 !important;
    }

    .checkform .form-group {
        display: inline-block;
        margin: 0 0 10px 0 !important;
    }

    .add-pass {
        margin: 5px 0 0 0;
    }

    .alert-box {
        width: 50%;
    }

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

    .alert-success p {
        font-size: 2rem;
    }

        .alert-success p span {
            margin: 0.5rem 0 0 0;
            font-size: 1.4rem;
        }

    .alert-danger p {
        font-size: 2rem;
    }

        .alert-danger p span {
            margin: 0.5rem 0 0 0;
            font-size: 1.4rem;
        }

    .action-btn {
        max-width: 198px;
        margin-bottom: 5px;
    }

    .main-box .leftbox {
        display: none;
    }

    .main-box .right-box {
        width: 100%;
        margin-left: 1%;
    }

    .input-effect {
        margin: 0 0 0.5rem 0;
    }

    .w-16 {
        width: 100%;
    }

        .w-16:first-child {
            width: 100%;
        }

    .main-box .left-box {
        display: none;
    }
}

@media only screen and (max-width: 425px) {
    .w-20 {
        width: 49%;
    }

    .r-btn {
        margin-bottom: 6px;
    }
}

@media screen and (max-width: 320px) {
    #msform .action-button {
        width: 45%;
    }

    h2 {
        font-size: 2.8rem;
    }

    h4 {
        font-size: 1.8rem;
    }

    h5 {
        font-size: 2.8rem;
        line-height: 2rem;
    }

    a.edit-btn {
        font-size: 1.4rem;
        right: 1rem;
    }

    ul.sort-file li {
        width: 37%;
    }

        ul.sort-file li:last-child {
            width: 49%;
        }
}

@media only screen and (min-device-width: 991px) and (max-device-width: 1280px) and (orientation: landscape) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media only screen and (min-device-width: 569px) and (max-device-width: 850px) and (orientation: landscape) {
    .homebanner {
        margin: 14% 0 0 0;
    }
}

@media only screen and (max-width: 1440px) {
    .main-box .right-box {
        width: 93%;
    }

    .main-box.toggled-2 .right-box {
        width: 87%;
    }
}

@media only screen and (max-width: 1024px) {
    .main-box .right-box {
        width: 90%;
    }

    .main-box.toggled-2 .right-box {
        width: 80%;
    }
}

@media only screen and (max-width: 768px) {
    .leftbox-toggle {
        left: 15%;
        position: absolute;
    }
}


@media only screen and (max-width:647px) {
    .main-box .right-box{
    
        width:100% !important
    }
}/*.main-box .leftbox::-webkit-scrollbar { width:3px;}*/
/*# sourceMappingURL=mainstyle.css.map */
   
/*.main-box .leftbox::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(241, 12, 12, 0.3);border-radius: 10px;
}

  .main-box .leftbox::-webkit-scrollbar-thumb {background: #4aa4d9; border-radius: 10px;}

.modal-header {
    background: #4aa4d9 !important;
}

.btn-close {
    background: none !important;
    font-size: 15px;
    font-weight: 600;
    padding: 0 !important;
    margin: 0 !important;
}*/
.mainbox {
    resize: none;
    overflow: visible;
    display: grid;
    max-width: 100%;
    margin: 0 auto;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.subbox {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-radius: 0;
}

.input-daterange {
    padding-bottom: 1.5rem;
}

.input-group-addon {
    padding: 12px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.weakend {
    margin: 1.8rem 0 1.5rem 0;
}

.validity-row {
    margin-bottom: 20px;
}

.no-border {
    border: none !important;
}

.accordion {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
}

.accordion-button {
    color: $tertiarycolor !important;
    font-size: 20px;
    font-weight: 600;
    padding: 20px;
    background-color: #ffffff !important;
}

    .accordion-button::after {
        content: "\f106";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        float: right;
        background-image: none;
    }

    .accordion-button:not(.collapsed)::after,
    .accordion-button.collapsed:after {
        content: "\f107";
        background-image: none;
    }

.or-img {
    margin: 16px auto 0;
    text-align: center;
}

.add-charges {
    margin-top: 18%;
}

.non-refund {
    width: 100%;
    background-color: #ffffff;
    color: $bluecolor;
    border: 1px solid $bluecolor;
    &:hover

{
    background-color: $bluecolor;
    color: #ffffff;
    border: 1px solid $bluecolor;
}

}

.add-refund {
    margin-top: 8%;
}

.main-box .leftbox::-webkit-scrollbar {
    width: 3px;
}

.main-box .leftbox::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(241, 12, 12, 0.3);
    border-radius: 10px;
}

.main-box .leftbox::-webkit-scrollbar-thumb {
    background: #4aa4d9;
    border-radius: 10px;
}

.modal-header {
/*    //background: #4aa4d9 !important;*/
}

.btn-close {
    background: none !important;
    font-size: 15px;
    font-weight: 600;
    padding: 0 !important;
    margin: 0 !important;
}

.validity-row:first-child {
    border-bottom: 1px solid #dedede;
    padding-bottom: 20px;
}

.cancellation-info {
    display: none;
}

.additionalpolicy-info {
    display: none;
}

.train-box table tr:first-child th {
    border-bottom: 1px solid #ffffff !important;
}

.checkboxlbl {
    display: inline-block !important;
}
.multiselect {
    width: 320px;
    height: auto;
    border: solid 1px #c0c0c0;
    overflow: auto;
    box-sizing: border-box;
    transition: all 0.15s cubic-bezier(0.25, 0, 0.25, 1.75), opacity 0.1s linear;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09);
    background-color: #fff;
    border-radius: 6px;
    margin-top: 4px;
    padding: 3px 0;
    opacity: 1;
    overflow: hidden;
    display: none;
    position: absolute;
    z-index: 999;
    max-height: 250px;
    overflow: auto;
    border: 1px solid #ddd;
}

    .multiselect label {
        display: block;
        padding: 4px 29px 4px 18px;
        margin: 0 0 1px 0 !important;
        line-height: 25px;
    }

        .multiselect label input {
            display: inline-block;
            margin-right: 5px !important;
        }

            .multiselect label input + i.fa {
                float: right;
                margin-top: -32px;
                margin-right: 9px;
                pointer-events: none;
                background-color: #FFF;
                padding-right: 5px;
            }

        .multiselect label:hover {
            color: #000;
            cursor: pointer;
            background-color: #F6F8FF !important;
        }

.multiselect-on {
    color: #4aa4d9;
    font-weight: 600;
    background-color: #F6F8FF !important;
}

.inputWithIcon input[type="text"] {
    padding-right: 40px;
}

.inputWithIcon {
    position: relative;
}

    .inputWithIcon i {
        position: absolute;
        right: 15px;
        top: 8px;
        padding: 9px 8px;
        color: #aaa;
        transition: 0.3s;
    }

    .inputWithIcon input[type="text"]:focus + i {
        transform: rotate(180deg);
        right: 0px;
    }

.table-input {
    max-width:120px;
    min-width:95px;
    width:auto;
}
.righticon {
    float: right;
    font-size: 15px;
    line-height: 25px;
    color: #4aa4d9;
}

.w-80 {
    width: 90% !important;
    display: inline-block;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
.add_masters {
    float:right;
    font-weight:800;
    font-size:17px;
}
    .add_masters a {
   text-decoration:none;
   color:red;
        }
.primary {
    overflow: auto;
    width: 100%;
    height: 80vh;
    display: block;
    border: 1px solid #d2d2d2;
    border-radius: 6px;
    text-align: center;
}

    .primary table {
        border-collapse: collapse;
        border: 0;
        text-align: center;
        width: 100%;
    }

    .primary th {
        color: #000;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding: 2.5rem 1rem;
    }

    .primary th,
    .primary td {
        border: 1px solid #aaa;
        background-clip: padding-box;
        scroll-snap-align: start;
        text-align: center;
        vertical-align: middle;
    }

    .primary tbody tr:last-child th,
    .primary tbody tr:last-child td {
        border-bottom: 0;
    }

    .primary thead {
        z-index: 1000;
        position: relative;
    }

    .primary th,
    .primary td {
        padding: 2.5rem 1rem;
        min-width: 22rem;
        margin: 0;
    }

    .primary thead th {
        position: sticky;
        top: -1px;
        background-clip: padding-box;
    }

        .primary thead th.pin {
            left: 0;
            z-index: 1001;
            border-left: 0;
        }

    .primary .b-line {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-bottom: 1px solid #aaa;
    }

    .primary tbody th {
        background-clip: padding-box;
    }

    .primary tbody {
        z-index: 10;
        position: relative;
    }

        .primary tbody th {
            position: sticky;
            left: -1px;
            z-index: 9;
        }

        .primary thead th,
        .primary tbody th {
            background-color: #FAFAFA;
        }

            .primary thead th span,
            .primary tbody th span {
                display: block;
                font-weight: 400;
            }

    .primary .t-price {
        color: #555;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .primary .t-room {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding: 10px 0 0 0;
    }

    .primary .light-blue {
        background: #FAFFFF;
    }

    .primary .blue {
        color: #407DF6;
        background: #F1F9FF;
        position: relative;
    }

    .primary .green {
        color: #0BBB32;
        background: #F8FFF9;
        position: relative;
    }

    .primary .red {
        color: #F00;
        background: #FFFBFB;
        position: relative;
    }

    .primary .r-tag {
        border-radius: 0px 0px 0px 2px;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 0;
        top: 0;
    }

    .primary .tag-green {
        background: #0BBB32;
        color: #fff;
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }

    .primary .tag-red {
        background: #F00;
        color: #fff;
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }

    .primary .dollar-tag {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 3px;
        top: 5px;
    }

    .primary .tax-tag {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 25px;
        top: 5px;
    }

@media (min-width: 40em) {
    main {
        display: flex;
    }

    .primary {
        order: 2;
    }
}

.cal-head {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.cal-name {
    display: inline-flex;
    width: 30%;
    font-size: 2rem;
    line-height: normal;
    font-weight: 700;
    padding: 0 0 0 0;
    margin: 0;
    color: #4aa4d9;
    align-items: center;
}

.filter-main {
    display: inline-flex;
    width: 70%;
    align-items: center;
    justify-content: end;
}

.filter-box {
    display: inline-block;
    width: 10%;
    margin: 5px 15px 5px 0;
    z-index: 9999;
}

.month-box {
    display: inline-block;
    width: 10%;
    margin: 5px 10px 5px 0;
    z-index: 9999;
}

.week-arrow {
    display: inline-block;
    width: 18%;
    margin: 5px 0px 5px 0;
}

    .week-arrow a.page-link {
        background: #fff;
        min-height: 39px;
        color: #222E3E;
        line-height: 23px;
    }

        .week-arrow a.page-link strong {
            font-weight: 600;
        }

    .week-arrow .disabled > .page-link,
    .page-link.disabled {
        background: transparent;
    }

    .week-arrow .page-item:first-child .page-link,
    .week-arrow .page-item:last-child .page-link {
        background: #4aa4d9;
    }

.tooltip-inner {
    font-size: 12px;
}

/*.tooltip-inner {
  background-color: #333;
}
.tooltip.bs-tooltip-right .arrow:before {
  border-right-color: #333 !important;
}
.tooltip.bs-tooltip-left .arrow:before {
  border-right-color: #333 !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
  border-right-color: #333 !important;
}
.tooltip.bs-tooltip-top .arrow:before {
  border-right-color: #333 !important;
}*/
/* discount configure page CSS start */
.discount-config .accordion {
    border-radius: 4px;
    background: var(--white-color-ffffff, #FFF);
    box-shadow: 0 0 4px 0 rgba(39, 56, 128, 0.25);
    padding: 20px 20px !important;
}

.discount-config .accordion-body {
    padding: 20px;
}

.discount-config .accordion-button {
    color: #4aa4d9 !important;
    padding: 12px 20px !important;
    margin: 0rem 1rem 0rem 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    font-size: 2rem;
}

    .discount-config .accordion-button:after {
        background: #EEE !important;
        color: #000 !important;
        width: 30px;
        line-height: 30px;
        height: 30px;
        border-radius: 50px;
        text-align: center;
    }

    .discount-config .accordion-button span {
        color: #7E7E7E;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-left: 5px;
    }

    .discount-config .accordion-button .left-c {
        width: 65%;
    }

    .discount-config .accordion-button .right-c {
        width: 34%;
        text-align: right;
        float: right;
        margin-right: 1%;
        color: #7E7E7E;
        font-size: 16px;
        font-weight: 500;
    }

        .discount-config .accordion-button .right-c strong {
            color: #222E3E;
            font-weight: 600;
        }

.discount-config #msform fieldset .form-border {
    border-radius: 4px;
    background: var(--white-color-ffffff, #FFF);
    box-shadow: 0 0 4px 0 rgba(219, 106, 122, 0.25) !important;
    margin: 0 0 20px 0;
    padding: 0;
}

.discount-config #msform .action-button {
    margin: 0rem 1rem 0rem 0;
}

.discount-config #msform .footer-btn {
    margin-left: 0px;
}

.discount-config #msform input[type=text] {
    height: 41px;
}

.discount-config #msform .img-approve {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    margin: 8px 8px 0 0;
    padding: 0;
}

.discount-config #msform .line-row {
    padding: 0px 0 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #dedede;
}

.discount-config #msform .line-row-m {
    padding: 0px 0 0px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #dedede;
}

.discount-config #msform .no-border-m {
    border: none !important;
    margin-bottom: 0;
}

.discount-config #msform .daterangecal .input-group {
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
}

.discount-config #msform .input-daterange .form-group {
    width: 100%;
}

.discount-config .form-check-input {
    clear: left;
    margin-top: 0;
}

.discount-config .form-switch {
    padding-left: 2.5em;
    margin: 3.2rem 0 0 4rem;
}

    .discount-config .form-switch input[type=checkbox] + label:before {
        display: none;
    }

    .discount-config .form-switch input[type=checkbox]:checked + label:after {
        display: none;
    }

.discount-config a.verify-button {
    width: auto !important;
    background: #0BBB32 !important;
    color: #ffffff !important;
    border: 1px solid #0BBB32 !important;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.5rem;
    border: 0 none;
    border-radius: 0.4rem;
    cursor: pointer;
    padding: 1rem 1rem;
    margin: 0rem 1rem 0rem 0;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

    .discount-config a.verify-button:hover {
        background: #036619 !important;
    }

.discount-config a.verify-button-y:hover svg {
    fill: #fff !important;
}

a.verify-button-y {
    width: auto !important;
    background: #ffffff !important;
    color: #FFA800 !important;
    border: 1px solid #FFA800 !important;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.5rem;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    padding: 1rem;
    margin: 0 1rem 0 0;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

    a.verify-button-y:hover {
        background: #FFA800 !important;
        color: #fff !important;
    }

        a.verify-button-y:hover path {
            fill: #fff !important;
        }

.disclaimer {
    color: #F00;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 15px 0;
}

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

.verify-btn {
    background-color: white;
    color: #FFA800;
    border: 1px solid #FFA800;
    font-weight: 700;
    font-size: 1.8rem;
    padding: 1rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    width: auto;
    display: inline-block;
    margin: 0 15px 0 0;
}

    .verify-btn.green {
        background-color: #0BBB32;
        color: white;
        border-color: #0BBB32;
    }

.spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
    margin-right: 5px;
}

.btn-add {
    cursor: pointer;
}

.add-cal {
    display: flex;
    flex-flow: row wrap-reverse;
}

    .add-cal .cal-one {
        display: inline-flex;
    }

    .add-cal .cal-two {
        display: inline-flex;
    }

    .add-cal .daterangecal {
        margin-right: 1%;
    }

/* Media Queries */
@media only screen and (max-width: 1024px) {
    .discount-config .accordion-button {
        font-size: 1.8rem;
    }

        .discount-config .accordion-button span {
            font-size: 1.6rem;
        }

        .discount-config .accordion-button .right-c {
            font-size: 14px;
        }

            .discount-config .accordion-button .right-c strong {
                display: block;
            }
}

@media only screen and (max-width: 768px) {
    .discount-config #msform input[type=text],
    .discount-config #msform .select {
        height: 35px;
    }

    .discount-config .accordion {
        padding: 10px !important;
    }

    .discount-config .accordion-body {
        padding: 14px;
    }

    .discount-config .accordion-button {
        font-size: 1.8rem;
    }

        .discount-config .accordion-button .right-c {
            font-size: 12px;
        }

    .discount-config .right-c {
        font-size: 12px;
    }
}
#calendarInput1-rangesList {
    padding: 0;
    margin: 0;
}

.black-range {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px; /* black background */
    color: black; /* white text */
    border-radius: 4px;
    list-style: none;
    box-sizing: border-box;
}

.range-buttons {
    display: flex;
    gap: 5px; /* space between edit & remove buttons */
}

.edit-btn, .remove-btn {
    background-color: #fff;
    border: none;
    color: #000;
    padding: 4px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

    .edit-btn:hover {
        background-color: #cce5ff;
    }

    .remove-btn:hover {
        background-color: #f8d7da;
    }

.blockout-disabled {
    opacity: 0.5; /* Make it look faded */
    pointer-events: none; /* Disable interaction */
    cursor: not-allowed; /* Change the cursor to indicate it's not clickable */

}
.inactive-row {
    background-color: #9ef39e !important; /* force it to apply */
}

    .inactive-row td {
        background-color: #9ef39e !important; /* ensure all <td> inherit */
    }
.rate-block {
    border-left: 3px solid transparent;
    padding: 6px 8px;
    margin-bottom: 8px;
    border-radius: 6px;
}

/* STATIC */
.static-block {
    background: #f1f7ff;
    border-color: #1e88e5;
}

.rate-label.static {
    background: #1e88e5;
    color: #fff;
}

/* DYNAMIC */
.dynamic-block {
    background: #f6f1ff;
    border-color: #7e57c2;
}

.rate-label.dynamic {
    background: #7e57c2;
    color: #fff;
}

/* Labels */
.rate-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-bottom: 4px;
}

/* Prices */
.t-price {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

/* Rooms / Free Sell */
.t-room {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.static-room {
    color: #1e88e5;
}

.dynamic-room {
    color: #7e57c2;
}