/* || text color */
.gray-text {
    color: #767676 !important;
}

.order-gray-text {
    color: #4F4F4F !important;
}

.black-text {
    color: #000000 !important;
}

.black-text2 {
    color: #111111 !important;
}

.orange-text {
    color: #F0780A !important;
}

.orange-text2 {
    color: #FD5C22 !important;
}

.dark-gray-text {
    color: #3D3D3D !important;
}

.green-success {
    color: #1A7F3C !important;
}

.red-error {
    color: #C20B1D !important;
}

.yellow-warning {
    color: #FFB339 !important;
}

.text-disable {
    color: #A3A3A3 !important;
}

.text-disable {
    color: #A3A3A3 !important;
}

.green-text {
    color: #358E53 !important;
}

.red-text {
    color: #FF0000 !important;
}

/* || font-size */
.fs-xxs {
    font-size: 0.5rem !important;
}

.fs-xs {
    font-size: 0.625rem !important;
}

.fs-sm {
    font-size: 0.75rem !important;
}

.fs-nm {
    font-size: 0.875rem !important;
}

.fs-md {
    font-size: 1rem !important;
}

.fs-slg {
    font-size: 1.125rem !important;
}

.fs-lg {
    font-size: 1.25rem !important;
}

.fs-xl {
    font-size: 1.5rem !important;
}

.fs-xxl {
    font-size: 2rem !important;
}

/* || font-weight */
.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

/* || line-height */
.lh-medium {
    line-height: 1.8 !important;
}

/* || Misc */
.picto {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}

.cursor-pointer {
    cursor: pointer;
}

.center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.collapse-columns {
    grid-template-columns: 0fr !important;
}

.collapse-rows {
    grid-template-rows: 0fr !important;
}

.z-index-n1 {
    z-index: -1 !important;
}

.z-index-10 {
    z-index: 10 !important;
}

.z-index-1040 {
    z-index: 1040 !important;
}

.mb-3b {
    margin-bottom: 1.25rem !important;
}

.mb-4b {
    margin-bottom: 1.8rem !important;
}

.h-21 {
    height: 21px !important;
}

.h-42 {
    height: 42px !important;
}

.justify-self-center {
    justify-self: center;
}

.d-flex-column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.min-w-auto {
    min-width: auto !important;
}

.min-w-140 {
    min-width: 140px !important;
}

.scroll-sm::-webkit-scrollbar-track {
    background-color: #D9D9D9;
    border-radius: 8px;
}

.scroll-sm::-webkit-scrollbar-thumb {
    background-color: #0B0B0B;
    border-radius: 8px;
}

.scroll-sm::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scroll-xsm::-webkit-scrollbar-track {
    background-color: #D9D9D9;
    border-radius: 8px;
}

.scroll-xsm::-webkit-scrollbar-thumb {
    background-color: #0B0B0B;
    border-radius: 8px;
}

.scroll-xsm::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* || Custom bootstrap dropdown */
/* Position left */
.custom-dropdown-menu-left {
    right: auto;
    left: 0;
}

/* Position right */
.custom-dropdown-menu-right {
    right: 0;
    left: auto;
}

/* Position above and left */
.custom-dropdown-menu-top-start {
    right: auto;
    left: 0;
    bottom: 100%;
}

/* Position above and right */
.custom-dropdown-menu-top-end {
    right: 0;
    left: auto;
    bottom: 100%;
}

/* Position below and left */
.custom-dropdown-menu-bottom-start {
    right: auto;
    left: 0;
    top: 100%;
}

/* Position below and right */
.custom-dropdown-menu-bottom-end {
    right: 0;
    left: auto;
    top: 100%;
    z-index: 1036 !important;
}

/* Position below and center */
.custom-dropdown-menu-bottom-center {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
/* || Custom bg color */
.bg-orange {
    background-color: #FD5C22;
}

/* || Custom buttons */
.btn {
    padding: 0.375rem 1.35rem !important;
}

.btn-sm {
    height: 22px !important;
    padding: 0.375rem 0.875rem !important;
}

.btn-nm {
    height: 24px !important;
    padding: 0.375rem 1rem !important;
}

.btn-lg {
    padding: 0.188rem 1.875rem !important;
    min-height: 32px;
}

.btn-xlg {
    padding: 0.375rem 1.5rem !important;
    min-height: 36px;
}

.btn-xxlg {
    padding: 0.5rem 1.5rem !important;
    min-height: 40px;
}

.btn:focus {
    box-shadow: none !important;
}

.btn:disabled,
.btn.disabled {
    background-color: #DEDEDE !important;
    border: 0 !important;
}

.border-black {
    border: 1px solid #000000 !important;
    background-color: #FFF !important;
    color: #1C1917 !important;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
}


.bg-black {
    background-color: #000000 !important;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
}



.bg-black-2 {
    background-color: #000000 !important;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
}


/* || Custom input */
.form-control:disabled,
.form-control[readonly] {
    background-color: #FFF !important;
}

.form-control:disabled,
.custom-input.disabled,
.custom-input:disabled {
    color: #A3A3A3 !important;
    background-color: #F1F1F2!important;
}

.form-control {
    border-radius: 2px !important;
}

label.required::before {
    content: "*";
    position: absolute;
    top: -2px;
    right: -3px;
    color: #FF0000;
}

.custom-label {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 18px !important;
    transform: translateY(-50%);
    line-height: 1;
    padding: 0 3px;
    background-color: transparent;
    color: #999;
    border-radius: 2px;
    font-size: .875rem !important;
    pointer-events: none;
    transition: all .2s ease;
    font-weight: 400 !important;
}

.custom-label:after,
.custom-label-select:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    height: 2px;
    width: 104%;
    z-index: -1;
}

.custom-label-select {
    position: absolute;
    z-index: 2;
    top: -6px;
    left: 8px !important;
    line-height: 1;
    padding: 0 3px;
    background-color: transparent;
    color: #111111;
    border-radius: 2px;
    font-size: .875rem !important;
    pointer-events: none;
    transition: all .2s ease;
    font-weight: 400 !important;
}

.is-invalid .custom-label {
    color: #cd3847 !important;
}

.selected .custom-label,
.custom-input:focus+.custom-label,
.custom-input:not(:placeholder-shown)+.custom-label {
    top: -6px !important;
    left: 8px !important;
    transform: translateY(0);
    font-size: 12px;
    color: #333;
    background: transparent;
    padding: 0 3px;
    font-size: .75rem !important;
    font-weight: 300 !important;
}

.has-placeholder .custom-label {
    display: none;
}

.row .selected .custom-label,
.col .custom-input:focus+.custom-label,
.col .custom-input:not(:placeholder-shown)+.custom-label,
.col .custom-label-select {
    left: 20px !important;
}

.col .custom-label {
    left: 30px !important;
}

.iti .custom-label {
    left: 60px !important;
}

.iti .custom-input:focus+.custom-label,
.iti .custom-input:not(:placeholder-shown)+.custom-label {
    left: 8px !important;
}

.custom-input:focus+.custom-label,
.custom-input:not(:placeholder-shown)+.custom-label {
    top: -6px;
    left: 8px !important;
    transform: translateY(0);
    font-size: 12px;
    color: #333;
    background: transparent;
    padding: 0 3px;
    font-size: .75rem !important;
    font-weight: 300 !important;
}

.col .custom-input:focus+.custom-label,
.col .custom-input:not(:placeholder-shown)+.custom-label,
.col .custom-label-select {
    left: 20px !important;
}

.col .custom-label {
    left: 30px !important;
}

.iti .custom-label {
    left: 60px !important;
}

.iti .custom-input:focus+.custom-label,
.iti .custom-input:not(:placeholder-shown)+.custom-label {
    left: 8px !important;
}

.custom-input {
    color: #000000;
    border: 0.5px solid #D1D1D1;
    border-radius: 2px;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    padding-right: 2rem;
    text-align: start;
    display: flex !important;
    align-items: center !important;
    background-color: #FFF;
    width: 100%;
}

.custom-input.valid {
    outline: 0.5px solid #1a7f3c !important;
}

.custom-input.error {
    border: 0.5px solid #cd3847 !important;
    outline: 0.5px solid #cd3847 !important;
}

.custom-input.error:focus {
    outline: 1px solid #cd3847 !important;
}

.custom-input::placeholder,
.custom-input.placeholder {
    color: #767676 !important;
}

.custom-input:focus {
    box-shadow: unset !important;
    outline: 1px solid #000000 !important;
    border: 0.5px solid #D1D1D1;
}

.custom-input.purchase {
    font-size: 0.75rem !important;
    padding: 0.625rem 1.125rem !important;
    padding-right: 2rem !important;
    border: 0.5px solid #D1D1D1 !important;
    overflow: hidden;
    height: 39px;
}

.custom-input.purchase:focus {
    outline: 0.5px solid #000000 !important;
}

/* Custom select2 */
.select2-container .select2-selection--single {
    color: #000000 !important;
    border: 0.5px solid #D1D1D1 !important;
    border-radius: 2px !important;
    font-size: 0.875rem !important;
    height: 42px !important;
    padding: 0.375rem 1.25rem !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    z-index: 1056;
    overflow: hidden;
    color: #212529;
    background-color: #fff;
    border-color: #ced4da !important;
    border-radius: 0.25rem;
}

.select2-dropdown {
    height: 248px !important;
}
/* 
Il s'agit de la fixation du height pour le select, (nottament pour le select stock location du formulaire) à check en version mobile si c'est dérangeant ou pas
.select2-results,
.select2-results__options {
    height: 200px !important;
} */

.select2-container--open .select2-dropdown {
    top: 8px;
    border: 0;
    box-shadow: 0px 0px 10px 0px #0000001A;
    border-radius: 3px !important;
    padding: 10px;
}

.select2-container--open .select2-dropdown--above {
    border-bottom: 1px solid #ced4da !important;
    top: -8px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    padding: 0.25rem 0.75rem !important;
    border-radius: 0.325rem !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: #D1D1D1 !important;
    box-shadow: unset !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #ced4da !important;
    box-shadow: unset !important;
    outline: 1px solid #000000 !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: #000 !important;
    background-color: #F6F6F6 !important;
    font-weight: 500 !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: #000 !important;
    background-color: #F6F6F6 !important;
    font-weight: 500 !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    padding: 0 !important;
    font-size: 0.875rem !important;
    border-radius: 3px;
}

.select2-container--bootstrap-5 .select2-results__option .custom-flag-container {
    padding: 1.25rem 0.75rem !important;
}

.select2-results__options::-webkit-scrollbar-track,
.iti__country-list::-webkit-scrollbar-track {
    background-color: #FFF;
}

.select2-results__options::-webkit-scrollbar-thumb,
.iti__country-list::-webkit-scrollbar-thumb {
    background-color: #e9ecef;
    border-radius: 10px;
}

.select2-results__options::-webkit-scrollbar,
.iti__country-list::-webkit-scrollbar {
    width: 8px;
}

.custom-flag-container {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 30px;
}

.custom-flag {
    height: 14px;
    width: 20px;
    margin-right: 5px;
    box-shadow: 0px 0px 1px 0px #888;
}

.custom-dropdown {
    width: 280px !important;
    width: max-content !important;
}

.custom-dropdown.purchase {
    padding: 0.5rem !important;
    border: unset !important;
    border-radius: 6px !important;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
}

.custom-dropdown.purchase .dropdown-item {
    font-size: 0.75rem !important;
    color: #000000 !important;
    padding: 0.375rem 0.5rem !important;
    padding-right: 1.25rem !important;
    border-radius: 3px;
    line-height: 1;
}

.custom-dropdown.purchase>.dropdown-item+.dropdown-item {
    margin-top: 4px;
}

.custom-dropdown.purchase .dropdown-item:hover {
    background-color: #F6F6F6 !important;
}

.custom-dropdown.purchase .dropdown-item:active {
    color: #000000 !important;
    background-color: #F6F6F6;
}

.custom-dropdown.purchase .dropdown-item.active {
    color: #000000 !important;
    background-color: #F6F6F6;
}

.dropdown-arrow {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 12px;
    min-width: 12px;
    height: 10px;
    padding: 15px;
    background-image: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 6"><path d="M4.95544 5.78413L0.225765 1.25827C-0.0752544 0.970375 -0.0752544 0.503596 0.225765 0.215837C0.526518 -0.0719456 1.01431 -0.0719456 1.31504 0.215837L5.50008 4.22052L9.68498 0.215953C9.98585 -0.0718292 10.4736 -0.0718292 10.7743 0.215953C11.0752 0.503736 11.0752 0.970491 10.7743 1.25839L6.04459 5.78424C5.89414 5.92814 5.69717 6 5.5001 6C5.30294 6 5.10582 5.928 4.95544 5.78413Z" fill="%231F1F1F"/></svg>');
    background-size: 12px;
    transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
    transform-origin: top;
    -webkit-transform-origin: top;
    background-color: #FFF;
    border-radius: 50%;
}

.description-arrow {
    background-image: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 6"><path d="M4.95544 5.78413L0.225765 1.25827C-0.0752544 0.970375 -0.0752544 0.503596 0.225765 0.215837C0.526518 -0.0719456 1.01431 -0.0719456 1.31504 0.215837L5.50008 4.22052L9.68498 0.215953C9.98585 -0.0718292 10.4736 -0.0718292 10.7743 0.215953C11.0752 0.503736 11.0752 0.970491 10.7743 1.25839L6.04459 5.78424C5.89414 5.92814 5.69717 6 5.5001 6C5.30294 6 5.10582 5.928 4.95544 5.78413Z" fill="%231F1F1F"/></svg>');
    background-size: contain;
    width: 14px;
    height: 14px;
    cursor: pointer;
    transition: transform 0.2s ease-out;
    -webkit-transition: transform 0.2s ease-out;
}

.description-arrow.rotate {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}


.custom-input.show .dropdown-arrow {
    rotate: -90deg;
}

.custom-modal-dropdown {
    z-index: 1060 !important;
}

.autocomplete-container {
    position: absolute;
    top: 50px;
    left: 0;
    width: calc(100% - 24px);
    z-index: -1;
    background-color: #FFF;
    border: 0;
    box-shadow: 0px 0px 10px 0px #0000001A;
    border-radius: 3px !important;
    margin-left: 12px;
    transition: background-color 0.15s ease-in-out;
    -webkit-transition: background-color 0.15s ease-in-out;
    margin-top: 1px;
    max-height: 169px;
    overflow-y: auto;
    padding: 10px;
}


.autocomplete-container>div {
    font-size: 0.875rem;
    padding: 6px 12px;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
    border-radius: 3px;
}

.autocomplete-container>div:hover {
    background-color: #F6F6F6;
    font-weight: 500;
}

/* || Checkbox input */
.form-check-input {
    min-width: 16px;
}

.form-check-input.large {
    min-width: 20px;
    height: 20px;
}

.form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25) !important;
    box-shadow: none !important;
}

.form-check-input:checked {
    background-color: #000000 !important;
    border: unset !important;
}

.form-check-input:active {
    border-color: unset !important;
}

.form-check-input:checked[type=checkbox] {
    background-image: url('data:image/svg+xml,<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 1L3.5 6L1 3.72727" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    background-size: auto;
}

/* || Popover */
.custom-popover {
    border-color: #FFF;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.custom-popover {
    border-color: #FFF !important;
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,
.bs-popover-end>.popover-arrow::before {
    border-right-color: #FFF !important;
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,
.bs-popover-top>.popover-arrow::before {
    border-top-color: #FFF !important;
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,
.bs-popover-start>.popover-arrow::before {
    border-left-color: #FFF !important;
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,
.bs-popover-bottom>.popover-arrow::before {
    border-bottom-color: #FFF !important;
}

/* || Tooltip */
.custom-tooltip.tooltip.show {
    opacity: 1;
}

.custom-tooltip .tooltip-inner {
    background-color: #FFF;
    color: #000000;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem;
    box-shadow: 0px 0px 20px 0px #0000001A;
    line-height: 1.125rem !important;
    padding: 12px 20px;
    text-align: start;
    border-radius: 10px;
    max-width: 100%;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    right: -1px;
    bottom: -8px;
    border-width: 1rem 1.2rem 1rem 0rem !important;
    border-right-color: #FFF !important;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    left: -1px;
    bottom: -12px;
    border-width: 1.2rem 0 1.2rem 1.2rem !important;
    border-left-color: #FFF !important;
}

.bs-tooltip-top .tooltip-arrow::before {
    top: -1px;
    right: -10px;
    border-width: 1.2rem 1.3rem 0rem !important;
    border-top-color: #FFF !important;
}

∏ .bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #FFF !important;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    bottom: -1px;
    right: -15px;
    border-width: 0 1.4rem 1.1rem 1.4rem;
    border-bottom-color: #FFF;
}

/* Phone validation */
.error-msg {
    color: #cd3847 !important;
    font-size: 0.688rem !important;
    margin: 0.125rem .75rem 0 !important;

}

.modal-input-wrapper .error-msg {
    bottom: -22px;
    margin-left: 0;
}

input.error {
    border: 0.5px solid #cd3847 !important;
    outline: 0.5px solid #cd3847 !important;
}

.hide {
    display: none;
}

.iti {
    display: block !important;
}

.iti__dropdown-content {
    position: absolute;
    z-index: 3 !important;
    margin-top: 2px !important;
    border: 0.5px solid #D1D1D1 !important;
    box-shadow: 0px 0px 20px 0px #0000001A !important;
    padding: 0.375rem 0.75rem !important;
}

.iti__search-input {
    width: 100%;
    border-width: 0;
    border-radius: 0.25rem !important;
}

.iti__search-input {
    font-size: 0.875rem;
    border: 0.5px solid #D1D1D1 !important;
    margin-bottom: 0.375rem;
}

.iti__search-input:focus {
    font-size: 0.875rem;
    outline: unset !important;
}

.iti__search-input+.iti__country-list {
    border-top: unset !important;
}

.iti__selected-flag {
    padding: 0 6px 0 20px !important;
}

.iti__selected-flag:focus-visible {
    outline: #000 1px solid !important;
    border-radius: 2px;
}

.iti .custom-input {
    padding-left: 60px !important;
}

.iti__country {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 400;
    line-height: 1.5;
    color: #000 !important;
    border-radius: 6px;
}

.iti__country.iti__highlight {
    background-color: #F6F6F6 !important;
}

.iti__dropdown_open .iti__tel-input {
    outline: 1px solid #000000 !important;
}


/* Modal style */
.modal-msm,
.modal-snm,
.modal-slg {
    margin-left: auto !important;
    margin-right: auto !important;
}

.modal-msm {
    max-width: 350px !important;
}

.modal-snm {
    max-width: 400px !important;
}

.modal-slg {
    max-width: 650px !important;
}

.modal-content {
    border-radius: 10px !important;
}

.modal-content {
    border-radius: 10px !important;
}

.modal-header {
    border-bottom: unset !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.modal-dialog .btn-close {
    position: absolute;
    top: 15px;
    right: 8px;
}

.modal-header .btn-close,
.btn-close-custom {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="black"/><path d="M13.3327 13.3334L6.66602 6.66675M13.3327 6.66675L6.66602 13.3334" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>') !important;
    height: 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    padding: 0 !important;
    background-size: contain !important;
    opacity: 1 !important;
    margin-right: 0 !important;
    border: 0;
    border-radius: 0.25rem;
}

.modal-header .btn-close:hover,
.btn-close-custom:hover {
    opacity: 0.6 !important;
}

.modal-header .btn-close:hover,
.btn-close-custom:focus {
    box-shadow: unset !important;
}

.modal-title {
    color: #F0780A;
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-title-success {
    color: #19ec3a !important;
}

.modal-wrapper {
    background-color: #FFF5E5;
    padding: 20px 25px 35px;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.modal-input-wrapper {
    background-color: #FFF5E5;
    gap: 14px;
}

.modal-input-wrapper .custom-input,
.modal-input-wrapper .select2-selection,
.modal-input-wrapper .select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: #F87839 !important;
    outline: unset !important;
}

.modal-input-wrapper .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.modal-input-wrapper .select2-selection {
    display: flex !important;
    align-items: center;
}

.modal-input-wrapper .custom-input:focus,
.modal-input-wrapper .select2-container--open {
    outline: 1px solid #F87839 !important;
    border-radius: 2px !important;
}

.modal-input-wrapper .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding: 3px !important;
}

/* Alert style */
.alert-primary {
    color: #4E66A0 !important;
    background-color: #E6EDFE !important;
    border-color: #E6EDFE !important;
    border-radius: 6px !important;
}

.alert-success {
    color: #358E53 !important;
    background-color: #F1F9F4 !important;
    border-color: #F1F9F4 !important;
    border-radius: 6px !important;
}

.alert {
    padding: 0.5rem 1rem !important;
    padding-right: 45px !important;
}

.alert-2 {
    padding: 0.5rem 1rem !important;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 50% !important;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0.75rem 1rem !important;
}

.btn-close:focus {
    box-shadow: unset !important;
}

/* Datepicker */
.daterangepicker {
    border: unset !important;
    border-radius: 6px !important;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
    margin-top: 2px !important;
    font-family: sans-serif !important;
}

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

.daterangepicker .drp-calendar.left {
    padding: 8px 15px 0 15px !important;
}

.daterangepicker .drp-buttons {
    clear: both;
    text-align: right;
    padding: 15px;
    border-top: unset !important;
    display: none;
    line-height: 12px;
    vertical-align: middle;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    border: 1px solid #D1D1D1 !important;
    border-radius: 3px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #111111 !important;
    background-color: #FFF !important;
    outline: unset !important;
    box-shadow: unset !important;
}

.daterangepicker select.monthselect:focus,
.daterangepicker select.monthselect:active,
.daterangepicker select.yearselect:focus,
.daterangepicker select.yearselect:active {
    border: 1px solid #000 !important;
    outline: unset !important;
    box-shadow: unset !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    text-align: center !important;
}

.daterangepicker select.monthselect {
    margin-right: 5px !important;
}

.daterangepicker thead tr+tr th {
    border-bottom: 1px solid #D5D4DF !important;
}

.daterangepicker td {
    border-radius: 0 !important;
    border: 1px solid #D5D4DF !important;
}

.daterangepicker th.prev.available:hover,
.daterangepicker th.next.available:hover {
    background-color: unset !important;
}

.daterangepicker td.active {
    background-color: #000000 !important;
    border-color: transparent;
    color: #fff;
}

.daterangepicker .calendar-table td {
    width: 32px !important;
    height: 32px !important;
}

.daterangepicker .drp-buttons .btn {
    margin-left: 8px;
    font-size: 0.75rem !important;
    font-weight: bold;
    padding: 4px 8px;
}

.cancelBtn {
    color: #000;
    background-color: #fff;
    border-color: #000;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    height: 25px !important;
    border-radius: 6px !important;
    padding: 0 1rem !important;
}

.cancelBtn:hover {
    transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    outline: 0.5px solid #000000 !important;
}

.cancelBtn:active,
.cancelBtn:focus {
    color: #000;
    background-color: #fff;
    border-color: #000;
}

.applyBtn:hover {
    transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    border-color: #534B46 !important;
    background-color: #534B46 !important;
    outline: 0.5px solid #534B46 !important;
}

.applyBtn {
    color: #fff;
    background-color: #000;
    border-color: #000;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    height: 25px !important;
    border-radius: 6px !important;
    padding: 0 1rem !important;
}

.applyBtn:active,
.applyBtn:focus {
    color: #fff;
    background-color: #534B46;
    border-color: #000;
    box-shadow: unset !important;
}

/* Loader */
.dataTables_processing,
div.processing {
    position: absolute;
    bottom: unset !important;
    top: 50% !important;
    left: 50% !important;
    width: 200px;
    text-align: center;
    padding: 2px;
    z-index: 10;
    -webkit-transform: translate(-50%, -50%) !important;
    -moz-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
    -o-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

div.processing>div:last-child {
    position: relative;
    width: 80px;
    height: 10px;
    margin: 1em auto;
}

div.processing>div:last-child>div {
    position: absolute;
    top: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #FD5C22 !important;
    background: 13, 110, 253;
    -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
    -moz-animation-timing-function: cubic-bezier(0, 1, 1, 0);
    -o-animation-timing-function: cubic-bezier(0, 1, 1, 0);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

div.processing>div:last-child>div:nth-child(1) {
    left: 8px;
    -webkit-animation: datatables-loader-1 0.6s infinite;
    -moz-animation: datatables-loader-1 0.6s infinite;
    -o-animation: datatables-loader-1 0.6s infinite;
    animation: datatables-loader-1 0.6s infinite;
}

div.processing>div:last-child>div:nth-child(2) {
    left: 8px;
    -webkit-animation: datatables-loader-2 0.6s infinite;
    -moz-animation: datatables-loader-2 0.6s infinite;
    -o-animation: datatables-loader-2 0.6s infinite;
    animation: datatables-loader-2 0.6s infinite;
}

div.processing>div:last-child>div:nth-child(3) {
    left: 32px;
    -webkit-animation: datatables-loader-2 0.6s infinite;
    -moz-animation: datatables-loader-2 0.6s infinite;
    -o-animation: datatables-loader-2 0.6s infinite;
    animation: datatables-loader-2 0.6s infinite;
}

div.processing>div:last-child>div:nth-child(4) {
    left: 56px;
    -webkit-animation: datatables-loader-3 0.6s infinite;
    -moz-animation: datatables-loader-3 0.6s infinite;
    -o-animation: datatables-loader-3 0.6s infinite;
    animation: datatables-loader-3 0.6s infinite;
}

/* custom button with loader */
.loader-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: 190px;
    background-color: #000 !important;
}

.loader-btn .processing {
    display: none;
}

.loader-btn.load .processing {
    display: block;
}


.loader-btn.load,
.loader-btn.success {
    background-color: #F85C23 !important;
    pointer-events: none;
    border: #F85C23 !important;
}

.loader-btn.error {
    background-color: #C20B1D !important;
    border: #C20B1D !important;
    pointer-events: none;
}


.loader-btn.load .custom-processing-btn {
    z-index: 1 !important;
}

.loader-btn.success .loader-btn-label {
    z-index: 1 !important;
}

.success-load {
    display: flex;
    align-items: center;
    line-height: 1;
}

.loader-btn-label,
.success-load-label {
    color: #FFF;
    font-weight: 500;
    font-size: 0.875rem;
}

.error-load-label {
    color: #FCEEEC;
    font-weight: 500;
    font-size: 0.875rem;
}

.success-load-label::after {
    content: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12"><path d="M5.5 11.6.2 6.3l1-1 4.3 4.2L14.7.3l1 1.1z" fill="%23fff"/></svg>');
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-left: 8px;
}

.loader-btn.load .loader-btn-label,
.loader-btn.load>span,
.loader-btn.error>span,
.loader-btn.success>span,
.loader-btn.success .loader-btn-label,
.loader-btn.error .loader-btn-label {
    display: none;
}

.loader-btn .success-load {
    display: none;
}

.loader-btn .error-load {
    display: none;
}

.loader-btn.success .success-load,
.loader-btn.error .error-load {
    display: flex;
}

.custom-processing-btn {
    z-index: -1 !important;
    position: absolute;
    top: 50% !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 10px !important;
}

div.custom-processing-btn>div:last-child {
    position: relative;
    width: 75px;
    margin: 0 !important;
}

div.custom-processing-btn>div:last-child>div {
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FDDACE !important;
    background: 13, 110, 253;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

input:-webkit-autofill {
    background-color: #FFF !important;
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
}

/* Error container */
.error-container {
    width: 100%;
    background-color: #FCEEEC;
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 12px 40px 12px 15px;
    display: none;
    position: relative;
}

.error-container.show-error {
    display: block;
}

.error-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.error-text {
    font-size: 14px;
    font-weight: 600;
    color: #C20B1D;
}

.close-error {
    background-image: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M11 1L1 11M1 1L11 11" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    width: 12px;
    min-width: 12px;
    height: 12px;
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 16px;
}
@keyframes datatables-loader-1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes datatables-loader-3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes datatables-loader-2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}


/* Disable hover effects for touch screens */
@media (hover: none) {
    .loader-btn.load:hover {
        border-color: #F85C23 !important;
        background-color: #F85C23 !important;
        outline: 1px solid #F85C23 !important;
    }

    .bg-black:hover {
        border-color: #000 !important;
        background-color: #000 !important;
        outline: 1px solid #000 !important;
    }

    .bg-black-2:hover {
        border-color: #000 !important;
        background-color: #000 !important;
    }
}

@media screen and (min-width: 991px) {
    .border-black:hover {
        outline: 1px solid #000000 !important;
    }

    .bg-black:hover {
        border-color: #534B46 !important;
        background-color: #534B46 !important;
        outline: 1px solid #534B46 !important;
    }

    .bg-black-2:hover {
        border-color: #534B46 !important;
        background-color: #534B46 !important;
    }

    .loader-btn:hover {
        border-color: #534B46 !important;
        background-color: #534B46 !important;
        outline: 1px solid #534B46 !important;
    }

    .loader-btn.load:active {
        border-color: #F85C23 !important;
        background-color: #F85C23 !important;
        outline: 1px solid #F85C23 !important;
    }

    .loader-btn.error:hover {
        outline: 1px solid #C20B1D !important;
    }

    .loader-btn.load:hover {
        outline: 1px solid #F85C23 !important;
    }
}


@media screen and (max-width: 700px) {

    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select:focus,
    textarea.form-control,
    textarea {
        font-size: 16px !important;
    }

    .modal-dialog {
        padding: 0 10px;
    }
}

@media screen and (max-width: 550px) {
    .modal-title {
        font-size: 1rem !important;
    }

    .modal-input-wrapper {
        flex-direction: column;
    }
}