:root {
    --ink-1-darken: var(--secondary);
    --ink-1: #042E34;
    --ink-1-opacity: rgba(0, 0, 0, .1);
    --ink-1-disable: #9C9C9C;
    --inactive-light: #fd2c1a;
    --ink-7: #042E34;
    --ink-7-darken: #fd2c1a;
    --ink-9: white;
    --body-bg-color: #ECE5D3;
    --font-family-base: "Anuphan", Roboto, Arial, sans-serif;
    --font-family-alt: "Archia, Roboto", Arial, sans-serif;
    --font-family-title: 'Archia', Arial, sans-serif;
    --font-family-button: 'Archia', Arial, sans-serif;
    --gray-1: #f3f3f3;
    --gray-2: #9c9c9c;
    --white: #ffffff;

    --primary: #DFFFA4;
    --secondary: #DFFFA4;
    --tertiary: #B0E3FF;
    --quaternary: #FFFFFF;
    --fifth: #FF9668;

    --radius: 1.5625vw;

    --product-li: #D6C4FF;
    --product-ncr: #D6C4FF;
    --product-ncc: #FF9668;
    --product-nces: #B0E3FF;
}

body {
    color: var(--ink-7) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink-7);
}

.h3 {
    letter-spacing: 0px !important;
}

p {
    font-family: var(--font-family-base) !important;
}

.u-txt-color-ink-1 {
    color: var(--ink-7) !important;
}

.heading-folder-cta .col-md-6 {
    display: inline-block;
    max-width: fit-content !important;
}

.heading-folder-cta .button--large {
    padding: 6px 18px;
    font-size: 16px;
    background-color: var(--primary);
    color: var(--ink-7);
}
.heading-folder-cta .button--large:hover {
    background-color: var(--ink-7);
    color: var(--primary);
    border-radius: var(--radius);
}

.dashboard__filter {
    display: grid;
    grid-template:
    "filter__icon filter__number"
    "filter__icon filter__label";
    background: var(--ink-7);
    grid-template-columns: 48px auto;
    border-color: transparent !important;
    border-radius: var(--radius) !important;
}

.dashboard__filter svg path:not(.svg-abandoned-files-2) {
    fill: var(--primary);
}

.dashboard__filter svg path .svg-abandoned-files-1 {
    fill: var(--primary);
}

.svg-abandoned-files-2 {
    stroke: var(--primary);
}

.filter__icon {
    grid-area: filter__icon;
    margin-right: 10px;
}

.filter__icon svg:not(.svg-ie) {
    max-width: 101%;
}

.filter__number {
    grid-area: filter__number;
    margin-right: 10px;
    text-align: left;
    font-size: 48px !important;
    color: var(--primary);
    font-weight: bold !important;
    font-family: var(--font-family-base) !important;
}

.filter__label {
    grid-area: filter__label;
    margin-right: 10px;
    text-align: left;
    font-family: var(--font-family-base) !important;
    font-size: 18px !important;
    color: var(--white);
}

.filter__label span {
    display: block;
}

.button--files-state {
    background: var(--gray-1) !important;
    color: var(--ink-7) !important;
}

.button--abandon {
    background: transparent !important;
    margin-left: 10px !important;
}

.button--abandon .svg-abandoned-files-1 {
    fill: var(--ink-1) !important;
}

.button--abandon .svg-abandoned-files-2 {
    stroke: var(--ink-1) !important
}

.button--abandon:hover .svg-abandoned-files-1 {
    fill: var(--primary) !important
}

.button--abandon:hover .svg-abandoned-files-2 {
    stroke: var(--primary) !important
}

.button-primary {
    border-radius: var(--radius);
    background: var(--ink-7) !important;
    border-color: transparent !important;
    padding: 5px 20px;
    color: var(--primary) !important;
    font-weight: bold !important;
    font-family: var(--font-family-base) !important;
}

.button-primary:hover {
    background-color: var(--primary) !important;
    color: var(--ink-7) !important;
    border-color: transparent !important;
}

.button-primary--outline {
    border-radius: var(--radius);
    background: var(--ink-7) !important;
    border-color: transparent !important;
    padding: 5px 20px;
    color: var(--primary) !important;
    font-family: var(--font-family-base) !important;
}

.button-primary--outline:hover {
    background-color: var(--primary) !important;
    color: var(--ink-7) !important;
    border-color: transparent !important;
    border-radius: var(--radius);
}

input[type="text"].button-search {
    background: #f3f3f3;
    border-color: #dadada;
    color: var(--gray-2);
    border-radius: 10px;
}

input[type="text"].button-search::placeholder {
    font-size: 14px;
}

textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[list]:focus, select:focus {
    box-shadow: 0px 0px 0px 1px rgba(15, 42, 61, 0.7) !important;
}

.button--files-state svg {
    max-width: 35px !important;
}

.list__line .button--files-state svg {
    max-width: 25px !important;
}

.header-step-button-container .button--files-state:not(.button--files-state--active) svg path {
    fill: var(--primary);
}

.header-step-button-container .button--files-state:not(.button--files-state--active):hover svg path {
    fill: var(--ink-7);
}

.header-step-button-container .button--files-state svg path.svg-abandoned-files-1 {
    fill:var(--primary) !important;
}

.header-step-button-container .button--files-state svg path.svg-abandoned-files-2 {
    fill: transparent;
    stroke: var(--primary);
}

.header-step-button-container .button--files-state.button--files-state--active svg path.svg-abandoned-files-1 {
    fill: var(--ink-7) !important;
}

.header-step-button-container .button--files-state.button--files-state--active svg path.svg-abandoned-files-2 {
    fill: transparent;
    stroke: var(--ink-7);
}

.header-step-button-container .button--files-state:hover svg path.svg-abandoned-files-1 {
    fill: var(--ink-7) !important;
}

.header-step-button-container .button--files-state:hover svg path.svg-abandoned-files-2 {
    fill: transparent;
    stroke: var(--ink-7) !important;
}


.header-step-button-container .button--files-state.button--files-state--active {
    background: var(--primary) !important;
    color: var(--ink-7) !important;
    stroke: var(--ink-7) !important;
}

.header-step-button-container .button--files-state.button--files-state--active svg path:not(.svg-abandoned-files-2) {
    fill: var(--ink-7) !important;
}

.button--files-state {
    font-size: 1.1em !important;
}

.wizzard__step.wizzard__step--active .step__number {
    background-color: var(--ink-7) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

.wizzard__step.wizzard__step--active .step__title {
    background-color: var(--ink-7) !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
}

.wizzard__step.wizzard__step--active .step__number,
.wizzard__step.wizzard__step--active .step__title {
    color: var(--primary) !important;
    padding: 10px;
}

.wizzard__step {
    margin-top: 10px !important;
    font-family: var(--font-family-title) !important;
}

.wizzard__step.wizzard__step--active .step__progression .progress {
    background: var(--primary) !important;
}

.wizzard__step.wizzard__step--complete .step__number,
.wizzard__step.wizzard__step--complete .step__title {
    color: var(--ink-7) !important;
}

.step__number,
.step__title {
    color: var(--ink-7) !important;
}

.wizzard__step .step__progression {
    display: none;
    background: var(--primary) !important;
}

.wizzard__step .step__progression .progress {
    background: var(--ink-7) !important;
}

.wizzard {
    margin-bottom: 0px !important;
}

.wizzard__step.wizzard__step--active .step__number {
    padding-bottom: 0px !important;
    margin-top: 0px !important;
}

.wizzard__step.wizzard__step--active .step__title {
    padding-top: 0px !important;
}

.wizzard-inner {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    background-color: var(--white);
    border-radius: var(--radius);
    padding: 10px;
    padding-bottom: 20px;
    background-color: var(--primary);
}

.back svg {
    margin-top: -3px;
}

label.radio-button-with-circle input + span {
    font-size: 14px !important;
    font-family: var(--font-family-base) !important;
    color: var(--ink-7) !important;
}

label.radio-button-with-circle input:checked + span, label.radio-button-with-circle input:hover + span {
    background: var(--gray-1);
}

.radio-simple span {
    font-family: var(--font-family-base) !important;
    color: var(--ink-7) !important;
}

.main-header .button--logout {
    display: flex !important;
    background-color: var(--ink-7);
    color: var(--primary);
    place-items: center;
}

.main-header .button--logout:not(:hover) svg {
    stroke: var(--primary);
}

.main-header .button--logout:hover svg {
    stroke: var(--ink-7);
}

.main-header .button--logout:hover {
    color: var(--ink-7);
    background-color: var(--primary);
}

.main-header .button--logout:hover .text-logout {
    color: var(--ink-7);
}

.main-header .button--logout span {
    margin-right: 10px;
    margin-left: 10px;
}

.main-header .text-logout {
    display: block !important;
    color: var(--primary);
    font-family: var(--font-family-base);
}

.main-header .user-profile {
    color: var(--ink-7) !important;
}

.button {
    border-radius: var(--radius) !important;
}

.button__container {
    border-radius: var(--radius);
    display: inline-block;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(223, 167.00000000000009, 64.99999999999997, 0);
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s, transform .4s;
}

.button__container:hover {
    border-radius: var(--radius);
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--ink-7);
}

.button__container--logout:hover {
    box-shadow: 0 0 0 2px var(--ink-7);
}

.array-choice__header .array-choice--item__heading {
    width: auto !important;
}

.array-choice--item__heading, .array-choice--item__option {
    padding: 1em .4em !important;
    width: 4.8em !important;
    font-size: small !important;
}

.array-choice--item {
    width: 4.5em !important;
    text-align: center !important;
}

.array-choice__header {
    width: 7em !important;
}

label:not(.radio-button-with-circle):not(.label-phone):not(.checkbox-toggle__button):not(.checkbox__label) {
    top: 23px !important;
}

label:not(.radio-button-with-circle) {
    color: var(--ink-7) !important;
    font-size: 1.28571em !important;
}

.form-floating > .form-control:focus ~ label:not(.label-phone),
.form-floating > .form-control:not(:placeholder-shown) ~ label:not(.label-phone),
.form-floating > .form-select ~ label:not(.label-phone) {
    transform: translateY(-31px) translateX(-12px) !important;
}

.form-floating {
    > .form-control:focus,
    > .form-control:not(:placeholder-shown),
    > .form-select {
        ~ label:not(.label-phone) {
            font-size: 1.28571em !important;
            color: var(--ink-7) !important;
        }
    }
}

.form-floating:not(.label-phone) {
    padding-top: 27px !important;
}

 .form-floating .form-control {
    height: 38px !important;
}

.error:after {
    top: 38px !important;
}

.currency-amount:after {
    top: 32px !important
}

.datepicker__wrapper input[type="text"] {
    padding-left: 40px !important;
    height: 38px !important;
}

.datepicker__wrapper svg {
    top: 38px !important;
}

.datepicker__wrapper label {
    color: var(--ink-7) !important;
}

.box-elevations--base {
    box-shadow: none !important;
    border: 1px solid var(--gray-1) !important;
    border-radius: var(--radius) !important;
}

.checkbox-toggle--light+.checkbox-toggle__button {
    background: var(--ink-1-disable) !important;
}

.checkbox-toggle--light:checked+.checkbox-toggle__button {
    background: var(--primary) !important;
}

.help-wrapper .help__button {
    display: none;
}

.button-search {
    box-shadow: none !important;
}

.preview-doc-widgets .button-preview {
    background-color: var(--primary) !important;
    color: var(--ink-7) !important;
    border-radius: var(--radius) !important;
}

.preview-doc-widgets .button-preview svg {
    fill: var(--ink-7) !important;
}

.preview-doc-widgets .button-preview:hover svg {
    fill: var(--primary) !important;
}

.preview-doc-widgets .button-preview:hover {
    background-color: var(--ink-7) !important;
    color: var(--primary) !important;
}

.preview-doc-widgets .button-preview--reverse {
    background-color: var(--ink-7) !important;
    color: var(--primary) !important;
}

.preview-doc-widgets .button-preview--reverse:hover {
    background-color: var(--primary) !important;
    color: var(--ink-7) !important;
}

.preview-doc-widgets .button-preview--reverse svg g path {
    fill: var(--primary) !important;
}

.preview-doc-widgets .button-preview--reverse:hover svg g path {
    fill: var(--ink-7) !important;
}

.preview-doc-widgets .button-preview div {
    font-size: 1em !important;
}

.pagination .pagination__number .number__item {
    background: var(--primary) !important;
    color: var(--ink-7) !important;
    border-radius: var(--radius) !important;
    border: none !important;
}

.pagination .pagination__number .number__item--active {
    background: var(--ink-7) !important;
    color: var(--primary) !important;
    border-radius: var(--radius) !important;
}

.pagination .pagination__action {
    color: var(--ink-7) !important;
    border-radius: var(--radius) !important;
}

.pagination .pagination__action:hover {
    color: var(--primary) !important;
    border-radius: var(--radius) !important;
}

.card.card--completed .card__first {
    margin-top: 2rem !important;
}

.card.card--completed .card__title {
    display: inline;
    color: var(--primary);
    background-color: var(--ink-7);
    border-radius: 0.2604166667vw;
    padding: 0 0.8854166667vw;
    margin-bottom: 0.8854166667vw;
    padding-bottom: 0.15625vw;
}

.card.card--completed .card__content {
    margin-top: 15px;
}

.card.card--completed .button.button-primary--outline {
    display: flex;
}

.flatpickr-weekday {
    color: var(--primary) !important;
}

.u-txt-color-text-light {
    color: var(--ink-7) !important;
}

.loader {
    color: var(--ink-7) !important;
}

.flatpickr-day.selected {
    color: var(--primary) !important;
    background: var(--ink-7) !important;
    border: 0px;
}

.flatpickr-day:hover {
    color: var(--ink-7) !important;
    background-color: var(--primary) !important;
    border: 0px;
}

a.dashboard__filter:nth-child(4) > div:nth-child(1) > svg:nth-child(1) > path:nth-child(2) {
    fill: transparent !important;
    stroke: var(--primary);
}

a.dashboard__filter__validated:nth-child(2) > div:nth-child(1) > svg:nth-child(1) > path:nth-child(1),
a.dashboard__filter__sync:nth-child(3) > div:nth-child(1) > svg:nth-child(1) > path:nth-child(1),
a.dashboard__filter__error:nth-child(4) > div:nth-child(1) > svg:nth-child(1) > path:nth-child(1) {
    fill: transparent !important;
    stroke: var(--primary);
}

a.dashboard__filter__ongoing:nth-child(1) > div:nth-child(1) > svg:nth-child(1) > path:nth-child(1) {
    stroke: transparent !important;
    stroke: var(--primary);
}

label[for*="NCR"] > span {
    background-color: var(--product-ncr) !important;
}

label[for*="NCC"] > span {
    background-color: var(--product-ncc) !important;
}

label[for*="NCES"] > span {
    background-color: var(--product-nces) !important;
}

label[for*="NCR"]:hover input:hover + span,
label[for*="NCR"] input:checked + span {
    background-color: color-mix(in srgb, var(--product-ncr), black 5%) !important;
}

label[for*="NCC"]:hover input:hover + span,
label[for*="NCC"] input:checked + span {
    background-color: color-mix(in srgb, var(--product-ncc), black 5%) !important;
}

label[for*="NCES"]:hover input:hover + span,
label[for*="NCES"] input:checked + span {
    background-color: color-mix(in srgb, var(--product-nces), black 5%) !important;
}

@media screen and (min-width: 1440px){
    .wrap.u-mxAuto {
    max-width: 1480px !important;
    }

    .wizzard.u-mxAuto,
    .box-elevations {
        max-width: 1440px !important;
    }

    .card.card--completed,
    .card.card--disabled {
        width: 1440px !important;
    }
}

.wrap.u-mxAuto {
    max-width: 1032px !important;
}

.wizzard.u-mxAuto,
.box-elevations {
    max-width: 992px !important;
}

.card.card--completed,
.card.card--disabled {
    width: 992px !important;
    padding-left: 10px !important;
}

.u-txt-size-s {
    font-size: 1.15em !important;
}

.u-txt-size-xs {
    font-size: 1em !important;
}

.main-header.u-mxl img {
    padding-top: 10px !important;
}

.main-header {
    padding-bottom: 10px !important;
}

.checkbox:checked + label:after {
    top: 16px !important;
}

@media screen and (max-width: 767px) and (min-width: 320px){
    .h3.help-wrapper {
        padding-top: 15px !important;
        font-size: 2em !important;
    }

    h3 {
        letter-spacing: 0px !important;
    }

    .slideDown {
        overflow: hidden !important;
    }

    .dashboard__filters {
        grid-column-gap: 18px !important;
        grid-template-columns: none !important;
    }

    .dashboard__filter {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border-radius: 8vw !important;
    }

    .filter__icon,
    .filter__number,
    .filter__label {
        display: inline-block;
    }

    .box-elevations {
        padding: 16px 20px !important;
    }

    .flex-container.latest-item > .user-profile {
        order: 2;
    }

    .main-header .flex-container.middle-xs > .button__container--logout {
        order: 1;
    }px

    .main-header .flex-container.middle-xs > .user-profile {
        order: 2;
    }

    .flex-container.latest-item > .button__container--logout {
        order: 1;
    }

    .button--files-state svg {
       max-width: 25px;
    }

    .filter__icon svg:not(.svg-ie) {
        max-width: 45px;
    }

    .list__line .button--medium.button-icon-action {
        padding: 0px;
    }

    .list__line .button-icon-action svg {
        height: 25px !important;
        width: 25px !important;
    }

    .list__line .button--files-state.button--abandon svg {
        width: 25px !important;
    }

    .box-elevations.box-elevations--base.box-elevations--max-heigt-initial.box-elevations--mb .col-md-12 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .flex.btn-margin-left-10 button+button {
        margin-left: 10px !important;
        width: 29px !important;
    }

    .button-icon-action {
        width: 29px;
    }

    .header-step-button-container .col-md-3 {
        margin-bottom: 5px !important;
    }

    .hide-on-mobile {
        display: none !important;
    }
}