/** ======================================== **/
/**                 KX-VARIABLES             **/
/** ======================================== **/
:root {
    --color1: #FF811D;
    --color2: #1DB9DE;
    --color3: #E8F8FC;
    --black1: #161615;
    --black2: #2F2F2F;
    --grey1: #F2F3F7;
    --grey2: #F9F9FB;
    --grey3: #C2C2CD;
}

/** ======================================== **/
/**             COMMUN PROPERTIES            **/
/** ======================================== **/
.relative-error .slds-has-error .slds-form-element__help{
    position: relative !important;
}

.slds-has-error .slds-form-element__help {
    text-transform: none !important;
    position: absolute;
}

.slds-required {
    color: var(--color1) !important;
    cursor: default !important;
}

/** ======================================== **/
/**                 KX-SECTION               **/
/** ======================================== **/

.kx-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: white;
    /* border-radius: 5px; */
    /* box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px 0px; */
    /* border:1px solid #ebebeb; */
}

.kx-section-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 30px 50px;
    margin-bottom: 50px;
    border-radius: 4px;
    background: var(--grey2);
}

.kx-section-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.kx-section-content {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    padding: 0 50px;
    margin-bottom: 50px;
    border-bottom: 1px dashed rgb(74 199 228 / 30%);
    padding-bottom: 50px;
}

.kx-section-content:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* .kx-section-content:last-child {
    margin-bottom: 0;
} */

.kx-section-content-title {
    width: 100%;
}

/** ======================================== **/
/**                 KX-BUTTON                **/
/** ======================================== **/

.slds-button+.slds-button {
    margin-left: 0;
}

.kx-button.slds-button {
    padding: 10px 20px;
    color: white;
    background: var(--color1);
    font-family: source;
    font-size: 16px;
    border-radius: 8px;
    height: 45px;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.kx-button.slds-button:focus,
.kx-button.slds-button:active {
    box-shadow: none;
    outline: none;
    color: var(--color1);
    background: white;
    border-color: var(--color1);
}

.kx-button.slds-button:hover {
    border-color: var(--color1);
    color: var(--color1);
    background: white;
}

.kx-button.slds-button:disabled,
.kx-button.slds-button:disabled:hover {
    background: var(--grey1);
    color: var(--grey3);
    border-color: var(--grey3);
}

/** ======================================== **/
/**              KX-BUTTON-ICON              **/
/** ======================================== **/

.kx-button-icon-left {
    position: relative;
}

.kx-button-icon-left .kx-button {
    padding-right: 22px;
    padding-left: 43px;
}

.kx-button-icon-left i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease;
    pointer-events: none;
}

.kx-button+i {
    color: white;
}

.kx-button:active+i,
.kx-button:focus+i,
.kx-button:hover+i {
    color: var(--color1);
}

.kx-button-icon-right {
    position: relative;
}

.kx-button-icon-right .kx-button {
    padding-left: 22px;
    padding-right: 43px;
}

.kx-button-icon-right i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease;
    pointer-events: none;
}

.kx-button-icon-right .kx-button:disabled+i,
.kx-button-icon-left .kx-button:disabled+i {
    color: #C2C2CD !important
}

/** ======================================== **/
/**             KX-BUTTON-BASIC              **/
/** ======================================== **/

.kx-button.slds-button.kx-button-basic {
    background: white;
    color: var(--color1);
    border-color: var(--color1);
}

.kx-button.slds-button.kx-button-basic+i {
    color: var(--color1);
}

.kx-button.slds-button.kx-button-basic:active,
.kx-button.slds-button.kx-button-basic:focus {
    box-shadow: none;
    outline: none;
    color: var(--color1);
    border-color: var(--color1);
    background: white;
}

.kx-button.slds-button.kx-button-basic:active+i,
.kx-button.slds-button.kx-button-basic:focus+i {
    color: var(--color1);
}

.kx-button.slds-button.kx-button-basic:hover {
    background: var(--color1);
    border-color: var(--color1);
    color: white;
}

.kx-button.slds-button.kx-button-basic:hover+i {
    color: white;
}


.kx-button-icon-left .kx-button.slds-button.kx-button-basic,
.kx-button-icon-right .kx-button.slds-button.kx-button-basic {
    border-color: var(--grey1);
    color: #02223B;
}

.kx-button-icon-left .kx-button.slds-button.kx-button-basic:hover,
.kx-button-icon-right .kx-button.slds-button.kx-button-basic:hover {
    color: #02223B;
    background: white;
    border-color: var(--color1);
}

.kx-button-icon-left .kx-button.slds-button.kx-button-basic:hover+i,
.kx-button-icon-right .kx-button.slds-button.kx-button-basic:hover+i {
    color: var(--color1);
}

/** ======================================== **/
/**                 KX-LINK                  **/
/** ======================================== **/

.kx-back-button {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kx-back-button i {
    color: var(--color1);
    font-size: 16px;
}

.kx-back-text {
    font-size: 18px;
    position: relative;
    cursor: pointer;
}

.kx-back-text:after {
    content: '';
    position: absolute;
    border-top: 1px solid var(--color1);
    bottom: 2px;
    width: 100%;
    left: 0;
    transition: all 0.2s ease;
    opacity: 0;
}

.kx-back-text:hover:after {
    opacity: 1;
}

.kx-link,
.kx-link:hover {
    color: var(--color1);
    font-size: 14px;
}


/** ======================================== **/
/**                KX-TAG               **/
/** ======================================== **/

.kx-tag-small {
    font-family: source;
    font-size: 14px;
    background: var(--color2);
    border-radius: 100px;
    padding: 2px 10px;
    color: white;
}

.kx-tag-icon {
    height: 40px;
    font-family: source;
    color: var(--black1);
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    border: 1px solid var(--color3);
    font-size: 16px;
    padding: 4px 20px;
}

.kx-tag-icon i {
    color: var(--color2);
    font-size: 18px;
}


/** ======================================== **/
/**                KX-CHECKBOX               **/
/** ======================================== **/

.kx-checkbox.kx-checkbox-simple .slds-required {
    position: absolute;
    z-index: 1;
    left: 20px;
    top: -10px;
    font-size: 16px;
}

.kx-checkbox .slds-checkbox_faux {
    padding: 9px;
    border-radius: 2px;
    border: 1px solid var(--color1) !important;
    margin-bottom: 1px;
    box-shadow: none !important;
    position: absolute;
    top: 21px;
}


.kx-checkbox.slds-has-error .slds-checkbox_faux {
    border: 2px solid #F40D01 !important;
}

.kx-checkbox .slds-checkbox_faux:after {
    height: 7px !important;
    width: 11px !important;
    margin-top: -2px;
    border-color: var(--color1) !important;
}

.kx-checkbox .slds-form-element__label {
    font-family: source;
    color: var(--black1);
    font-size: 14px !important;
    display: block !important;
    padding-top: 0;
    padding-left: 30px;
}

/* 
.kx-checkbox .slds-checkbox {
    margin-bottom: 9px;
    padding: 18px 20px;
    border: 2px solid var(--color1);
    border-radius: 8px;
} */

.kx-checkbox input:disabled+label .slds-checkbox_faux {
    border-color: var(--grey3) !important;
    background: #f2f3f7 !important;
}

/* .kx-checkbox input:disabled+label .slds-checkbox_faux:after {
    border-color: var(--grey3) !important;
} */

.kx-checkbox .slds-checkbox__label {
    padding: 18px 20px;
    border: 2px solid #E6E8EB;
    border-radius: 8px;
    margin-bottom: 9px;
    cursor: pointer !important;
    transition: all 0.2s ease;
    background: white;
    position: relative;
    display: block;
}

.kx-checkbox .slds-checkbox__label:hover {
    background: var(--grey2);
}

.kx-checkbox .slds-checkbox [type=checkbox]:checked+.slds-checkbox__label {
    border: 2px solid var(--color1);
}

.kx-checkbox .slds-checkbox [type=checkbox]:focus+.slds-checkbox__label .slds-checkbox_faux {
    box-shadow: none !important;
    outline: none !important;
}

.kx-checkbox input:disabled+label {
    cursor: default !important;
    background: #f2f3f7;
}

.kx-checkbox input:disabled+label:hover {
    background: #f2f3f7;
}

.kx-checkbox.kx-checkbox-simple .slds-checkbox__label {
    padding: 0;
    border: none;
    border-radius: 0;
    margin-bottom: 20px;
    display: block;
    cursor: pointer !important;
    transition: all 0.2s ease;
    background: transparent;
    position: relative;
}

.kx-checkbox.kx-checkbox-simple .slds-checkbox [type=checkbox]:checked+.slds-checkbox__label {
    border: none;
}

.kx-checkbox.kx-checkbox-simple .slds-form-element__label {
    font-size: 14px !important;
    line-height: 20px !important;
    padding-left: 30px;
}

.kx-checkbox.kx-checkbox-simple .slds-checkbox_faux {
    top: 2px;
}

.kx-checkbox .slds-form-element__control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kx-checkbox.kx-checkbox-horizontal .slds-checkbox {
    width: calc(50% - 12px);
}

.kx-checkbox.kx-checkbox-horizontal .slds-form-element__control {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.kx-checkbox.kx-checkbox-horizontal .slds-checkbox__label {
    margin-bottom: 0;
}

.kx-checkbox.kx-checkbox-horizontal.fit-content .slds-checkbox {
    width: fit-content;
}

.kx-checkbox.kx-checkbox-horizontal.fit-content .slds-form-element__label {
    padding-left: 17px;
    padding-right: 25px;
}

.kx-checkbox.kx-checkbox-horizontal.fit-content .slds-checkbox {
    width: fit-content;
}

.slds-has-error .slds-checkbox_faux {
    border: 2px solid #F40D01 !important;
}


/** ======================================== **/
/**                 KX-RADIO                 **/
/** ======================================== **/

.kx-radio .slds-radio_faux {
    padding: 9px;
    border-radius: 50px;
    border: 1px solid var(--color1) !important;
    margin-bottom: 1px;
    box-shadow: none !important;
    position: absolute;
    top: 18px;
}

.kx-radio.slds-has-error .slds-radio_faux {
    border: 2px solid #F40D01 !important;
}

.kx-radio .slds-required {
    position: absolute;
    right: -3px;
    color: var(--color1) !important;
}

.kx-radio.slds-has-error .slds-form-element__help {
    color: #ff0000;
    margin-top: 3px;
    position: absolute;
    left: 0;
}

.kx-radio .slds-form-element__label {
    font-family: source;
    color: var(--black1);
    font-size: 14px !important;
    display: block !important;
    padding-top: 0;
    padding-left: 30px;
}

.kx-radio input:disabled+label .slds-radio_faux {
    border-color: var(--grey3) !important;
    background: #f2f3f7 !important;
}

.kx-radio input:disabled+label .slds-radio_faux:after {
    border-color: var(--grey3) !important;
}

.kx-radio .slds-radio__label {
    padding: 18px 20px;
    border: 2px solid #E6E8EB;
    border-radius: 8px;
    margin-bottom: 9px;
    display: block;
    cursor: pointer !important;
    transition: all 0.2s ease;
    background: white;
    position: relative;
}

.kx-radio .slds-radio__label:hover {
    background: var(--grey2);
}

.kx-radio .slds-radio [type=radio]:checked+.slds-radio__label {
    border: 2px solid var(--color1);
}

.kx-radio .slds-radio [type=radio]:focus+.slds-radio__label .slds-radio_faux {
    box-shadow: none !important;
    outline: none !important;
}

.kx-radio input:disabled+label {
    cursor: default !important;
    background: #f2f3f7;
}

.kx-radio input:disabled+label:hover {
    background: #f2f3f7;
}

.kx-radio.kx-radio-simple .slds-radio__label {
    padding: 0;
    border: none;
    border-radius: 0;
    margin-bottom: 20px;
    display: block;
    cursor: pointer !important;
    transition: all 0.2s ease;
    background: white;
    position: relative;
}

.kx-radio.kx-radio-simple .slds-radio [type=radio]:checked+.slds-radio__label {
    border: none;
}

.kx-radio.kx-radio-simple .slds-radio_faux {
    position: absolute;
    top: 2px;
}

.kx-radio .slds-form-element__control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kx-radio.kx-radio-horizontal .slds-radio {
    width: calc(50% - 12px);
}

.kx-radio.kx-radio-horizontal.fit-content .slds-radio {
    width: fit-content;
}

.kx-radio.kx-radio-horizontal.fit-content .slds-form-element__label {
    padding-left: 17px;
    padding-right: 25px;
}

.kx-radio.kx-radio-horizontal .slds-form-element__control {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.kx-radio.kx-radio-horizontal .slds-radio__label {
    margin-bottom: 0;
}

.slds-radio [type=radio]:checked+.slds-radio_faux:after,
.slds-radio [type=radio]:checked+.slds-radio--faux:after,
.slds-radio [type=radio]:checked~.slds-radio_faux:after,
.slds-radio [type=radio]:checked~.slds-radio--faux:after,
.slds-radio [type=radio]:checked+.slds-radio__label .slds-radio_faux:after,
.slds-radio [type=radio]:checked+.slds-radio__label .slds-radio--faux:after {
    background: #f7811f !important;
    width: 10px;
    height: 10px;
}

.slds-radio [type=radio]:focus+.slds-radio_faux,
.slds-radio [type=radio]:focus+.slds-radio--faux,
.slds-radio [type=radio]:focus~.slds-radio_faux,
.slds-radio [type=radio]:focus~.slds-radio--faux,
.slds-radio [type=radio]:focus+.slds-radio__label .slds-radio_faux,
.slds-radio [type=radio]:focus+.slds-radio__label .slds-radio--faux {
    border-color: #f7811f !important;
}

.kx-radio legend.slds-form-element__label {
    display: none !important;
}

/** ======================================== **/
/**              KX-TYPOGRAPHY               **/
/** ======================================== **/
.kx-h1 {
    color: var(--black1);
    font-family: source-bold;
    font-size: 40px;
    /* line-height: 46px; */
    line-height: 1;
}

.kx-h1.kx-h1-before:before {
    content: '';
    height: calc(100% + 30px);
    width: 9px;
    background: var(--color2);
    position: absolute;
    left: 0;
    top: -15px;
}

.kx-h1.kx-h1-before {
    padding-left: 35px;
    position: relative;
}

.kx-h2 {
    color: var(--black1);
    font-family: source-bold;
    font-size: 30px;
    /* line-height: 24px; */
    line-height: 1;
}

.kx-h3 {
    color: var(--black1);
    font-family: source-bold;
    font-size: 25px;
    /* line-height: 36px; */
    line-height: 1;
}

.kx-h4 {
    color: var(--black1);
    font-family: source-bold;
    font-size: 20px;
    /* line-height: 24px; */
    line-height: 1;
}

.kx-h5 {
    color: var(--black1);
    font-family: source-bold;
    font-size: 18px;
    /* line-height: 28px; */
    line-height: 1;
}

.kx-chapo {
    color: var(--black1);
    font-family: source;
    font-size: 16px;
    line-height: 22px;
}

.kx-text {
    color: var(--black1);
    font-family: source;
    font-size: 14px;
    line-height: 26px;
}

.kx-formatted-text {
    height: 45px;
    display: flex;
    align-items: center;
}

.kx-cta {
    color: var(--black1);
    font-family: source;
    font-size: 16px;
    line-height: 28px;
}

.kx-legende {
    color: var(--black1);
    font-family: source;
    font-size: 14px;
    line-height: 18px;
}

.kx-rgpd {
    color: #444444;
    font-family: source;
    font-size: 8px;
    line-height: 12px;
}

/** ======================================== **/
/**                 KX-INPUT                 **/
/** ======================================== **/
.kx-input {
    display: flex;
    align-items: flex-end;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px 15px;
    justify-content: center;
}

.kx-input > * {
    width: 100% !important;
}

.kx-uppercase input {
    text-transform: uppercase !important;
}

.kx-input input::placeholder {
    color: #727E88;
    font-family: source-light;
    letter-spacing: 0;
    text-transform: none !important;
}

.kx-input.kx-input-disabled input::placeholder {
    color: #CDCDD7 !important;
}

.kx-input .slds-form-element__label {
    display: none;
}

.kx-input-label {
    color: #02223B;
    font-family: 'source-bold';
    font-size: 16px;
    margin-bottom: 8px;
    position: relative;
}

.kx-input-helptext {
    font-size: 16px;
    color: var(--color2);
    margin-bottom: 15px;
}

.kx-input input {
    height: 45px;
    font-family: 'source';
    background: white;
    color: #02223B;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 1px solid #02223B19;
    padding: 0 20px;
    font-size: 14px;
}

.kx-input input:focus,
.kx-input input:active {
    box-shadow: none;
    outline: none;
}

.kx-input-valid {
    position: relative;
}

.kx-input-valid input {
    border-color: var(--color2);
    padding-right: 60px;
}

.kx-input-valid .slds-form-element:after {
    content: "\f058";
    font-size: 22px;
    font-family: "Font Awesome 6 Pro";
    color: var(--color2);
    position: absolute;
    right: 20px;
    z-index: 1000;
    top: 7px;
    font-weight: 900;
}

.kx-input-valid-text {
    color: var(--color2);
    font-size: 16px;
    line-height: 22px;
    margin-top: 5px;
}

.kx-input-invalid {
    position: relative;
}

.kx-input-invalid i {
    position: absolute;
    right: 20px;
    font-size: 22px;
    color: #FF000E;
    bottom: 12px;
}

.kx-input-invalid input {
    border-color: #FF000E;
    padding-right: 60px;
}

.kx-input .slds-required {
    position: absolute;
    right: -4px;
    color: var(--color1) !important;
}

/* .kx-input.slds-has-error input {
    box-shadow: var(--color1) 0px 0px 0px 1px inset !important;
    border-color: var(--color1);
}

.kx-input.slds-has-error .slds-form-element__help {
    color: var(--color1);
    margin-top: 3px;
    position: absolute;
    left: 12px;
} */

.kx-input .slds-has-error input,
.kx-input.slds-has-error input {
    box-shadow: none !important;
    border-color: #ff000e;
    padding-right: 60px;
}

.kx-input .slds-has-error .slds-form-element__control:after,
.kx-input.slds-has-error .slds-form-element__control:after {
    content: "\f057";
    font-size: 22px;
    font-family: "Font Awesome 6 Pro";
    color: red;
    position: absolute;
    right: 20px;
    z-index: 1000;
    top: 50%;
    font-weight: 900;
    transform: translateY(-50%);
}

.kx-input .slds-has-error .slds-form-element__help,
.kx-input.slds-has-error .slds-form-element__help {
    color: #ff0000;
    margin-top: 3px;
    font-size: 12px;
}

lightning-calendar .slds-form-element__control:after {
    content: "" !important;
}

.slds-datepicker__filter_month svg {
    fill: var(--color1) !important;
}

.slds-datepicker tbody>tr>td:hover>.slds-day,
.slds-datepicker tbody>tr>td.slds-is-today>.slds-day {
    background-color: var(--color3) !important;
}

.kx-input input:disabled {
    background: #f2f3f7;
    color: #04223b;
    border: 1px solid #f2f3f7;
}

.kx-input lightning-datepicker .slds-is-selected .slds-day {
    background: var(--color2) !important;
}

.kx-input lightning-datepicker .slds-datepicker * {
    font-family: source !important;
}

.kx-input lightning-datepicker .slds-datepicker h2 {
    font-family: source-bold !important;
    font-size: 15px;
}

.kx-input lightning-datepicker .slds-day_adjacent-month .slds-day {
    color: #CDCDD6 !important;
}

.kx-input lightning-datepicker .slds-input {
    padding-left: 40px;
}

.kx-input lightning-datepicker .slds-text-link {
    color: var(--color2) !important;
    font-family: source-bold !important;
    font-size: 13px;
}

.kx-input lightning-datepicker .slds-input__icon {
    position: absolute;
    left: 15px;
    transform: translateY(-2px);
}

.kx-input lightning-datepicker .slds-input__icon svg {
    fill: var(--color1) !important;
    width: 15px;
    height: 15px;
}

.kx-input lightning-datepicker .slds-datepicker {
    background: #F9FDFE;
}

.kx-input.kx-input-disabled lightning-datepicker .slds-input__icon svg {
    fill: #CDCDD7 !important;
}

.kx-input lightning-helptext {
    position: absolute;
    top: 3px;
}

.kx-input lightning-helptext svg {
    fill: var(--color1) !important;
}

.kx-input lightning-helptext:hover svg {
    fill: var(--color1) !important;
}

.kx-input lightning-helptext button:focus,
.kx-input lightning-helptext button:active {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

.slds-popover_tooltip,
.slds-popover--tooltip {
    background: white !important;
    box-shadow: 0px 1px 7px 2px rgb(0 0 0 / 10%) !important;
}

.slds-popover__body {
    background: white;
    color: var(--color1) !important;
    border-radius: 3px;
    font-family: source !important;
}

.kx-fileupload .slds-form-element,
.kx-fileupload .slds-file-selector {
    width: 100%;
}

.kx-fileupload .slds-file-selector__dropzone {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #BFC0CB;
    background: #f2f3f7;
}

.kx-fileupload .slds-has-error .slds-file-selector__dropzone {
    border: 2px dashed #ff8114;
}

.kx-fileupload .slds-file-selector__button {
    color: white;
    background: var(--color1);
    border-radius: 4px;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: source;
    height: 45px;
    padding: 10px 20px;
    border-radius: 8px;
}

.kx-fileupload .slds-file-selector__button:hover {
    color: var(--color1) !important;
    background: white;
    border: 2px solid var(--color1);
}

.kx-fileupload .slds-file-selector__button:focus,
.kx-fileupload .slds-file-selector__button:active {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

.kx-fileupload .slds-button__icon_left {
    margin-top: -2px !important;
}

.kx-fileupload.disabled .slds-file-selector__dropzone .slds-file-selector__text:after {
    color: #a0a1ac !important;
}

.kx-fileupload.disabled .slds-file-selector__button {
    background: #dcdde3 !important;
    color: #a0a1ac !important;
    pointer-events: none !important;
}

/** ======================================== **/
/**              KX-INPUT-ICON               **/
/** ======================================== **/

.kx-input-icon {
    position: relative;
}

.kx-input-icon input {
    padding-left: 35px;
}

.kx-input-icon i {
    position: absolute;
    bottom: 0;
    left: 14px;
    color: #9b9bae;
    z-index: 9;
    top: 17px;
}


/** ======================================== **/
/**              KX-INPUT-DISABLED           **/
/** ======================================== **/

.kx-input-disabled .slds-form-element__label {
    color: #02223B !important;
}

.kx-input-disabled.black .slds-form-element__label {
    color: #02223B !important;
}

.kx-input-disabled.black input:disabled {
    color: #0b2139 !important;
}

.kx-input-disabled input:disabled {
    background: #f2f3f7 !important;
    color: #02223B !important;
}

.kx-input-disabled input:focus,
.kx-input-disabled input:active {
    box-shadow: none !important;
    outline: none !important;
}

.kx-input-disabled .slds-required {
    color: #02223B !important;
}


/** ======================================== **/
/**              KX-INPUT-READONLY            **/
/** ======================================== **/

.kx-input-readonly input {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
    font-size: 16px !important;
}

.kx-input-readonly input:focus,
.kx-input-readonly input:active {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}


/** ======================================== **/
/**              KX-COMBO            **/
/** ======================================== **/
.kx-combo .slds-combobox__input {
    display: flex;
    align-items: center;
    height: 45px;
    font-family: 'source';
    background: white;
    color: #02223B;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid #02223B19;
    padding: 0 20px;
    font-size: 14px;
}

.kx-combo .slds-combobox__input:disabled {
    background: #f2f3f7;
}

.kx-combo .slds-is-open .slds-combobox__input {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-color: #c9dbe1;
}

.slds-input_faux:not(.slds-combobox__input-value) {
    color: #7d8891;
    font-family: 'source-light';
}

/* .kx-combo .slds-combobox__input:focus {
    border: 1px solid #bfc0cc !important;
} */

.kx-combo .slds-form-element__label {
    display: none;
    /* color: #0b2139;
    font-family: 'source-bold';
    font-size: 15px;
    margin-bottom: 5px;
    position: relative; */
}

.kx-combo .slds-required {
    position: absolute;
    right: -4px;
    color: var(--color1) !important;
}

.kx-combo-icon .kx-combo-input {
    position: relative;
}

.kx-combo .slds-dropdown {
    border: 1px solid #cadce2 !important;
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px 0px !important;
    margin-top: 0px !important;
    border-top: none !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    background: #FAFDFE;
}

.kx-combo lightning-base-combobox-item {
    font-family: 'source';
    font-size: 16px;
}

.kx-combo .slds-icon-utility-check svg {
    fill: #f7811f !important;
}

.kx-combo lightning-base-combobox-item.slds-has-focus,
.kx-combo lightning-base-combobox-item:hover,
.kx-combo lightning-base-combobox-item:focus,
.kx-combo lightning-base-combobox-item:active {
    background: var(--color3) !important;
}

.kx-combo .slds-has-error button,
.kx-combo.slds-has-error button {
    box-shadow: none !important;
    border-color: #ff000e;
    padding-right: 95px;
}

.kx-combo .slds-has-error .slds-form-element__control:after,
.kx-combo.slds-has-error .slds-form-element__control:after {
    content: "\f057";
    font-size: 22px;
    font-family: "Font Awesome 6 Pro";
    color: red;
    position: absolute;
    right: 50px;
    z-index: 1000;
    top: 6px;
    font-weight: 900;
}

.kx-combo .slds-has-error .slds-form-element__help,
.kx-combo.slds-has-error .slds-form-element__help {
    color: #ff0000;
    margin-top: 3px;
    font-size: 12px;
}

.kx-combo .slds-combobox__input:after {
    content: "\f078";
    font-size: 16px;
    font-family: "Font Awesome 6 Pro";
    color: var(--color1);
    position: absolute;
    right: 20px;
    z-index: 1000;
    top: 7px;
    /* font-weight: 900; */
}

.kx-combo .slds-combobox__input:disabled:after {
    color: #d5d5d5 !important;
}

.kx-combo .slds-input__icon-group.slds-input__icon-group_right {
    display: none;
}

.kx-combo-icon {
    position: relative;
}

.kx-combo-input i {
    position: absolute;
    top: 16px;
    left: 14px;
    color: #9b9bae;
}

.kx-combo-icon .slds-combobox__input {
    padding-left: 40px;
}

.kx-combo button:focus,
.kx-combo button:active {
    box-shadow: none;
    border: 1px solid #bfc0cc;
    outline: none;
}

/** ======================================== **/
/**                  KX-TEXTAREA             **/
/** ======================================== **/

.kx-textarea .slds-textarea {
    font-family: 'source';
    background: white;
    color: #02223B;
    border-radius: 8px;
    border: 1px solid #02223B19;
    padding: 14px 20px;
    font-size: 16px;
}

.kx-textarea .slds-form-element__label {
    color: #0b2139;
    font-family: 'source-bold';
    font-size: 15px;
    margin-bottom: 5px;
    position: relative;
}

.kx-textarea-big .slds-textarea {
    height: 200px;
}

.kx-textarea .slds-required {
    position: absolute;
    right: -4px;
    color: var(--color1) !important;
}

.kx-textarea textarea:focus,
.kx-textarea textarea:active {
    box-shadow: none;
    border: 1px solid #bfc0cc;
    outline: none;
}

.kx-textarea.slds-has-error .slds-textarea {
    padding-right: 60px;
}

.kx-textarea .slds-has-error input,
.kx-textarea.slds-has-error input {
    box-shadow: none !important;
    border-color: #ff000e;
    padding-right: 60px;
}

.kx-textarea .slds-has-error .slds-form-element__control:after,
.kx-textarea.slds-has-error .slds-form-element__control:after {
    content: "\f057";
    font-size: 22px;
    font-family: "Font Awesome 6 Pro";
    color: red;
    position: absolute;
    right: 20px;
    z-index: 1000;
    top: 10px;
    font-weight: 900;
}

.kx-textarea .slds-has-error .slds-form-element__help,
.kx-textarea.slds-has-error .slds-form-element__help {
    color: #ff0000;
    margin-top: 3px;
    font-size: 12px;
}

.kx-textarea .slds-textarea:disabled {
    background: #f2f3f7;
}

/** ======================================== **/
/**                KX-MODAL                  **/
/** ======================================== **/

.kx-modal {
    background: rgba(126, 140, 153, 0.8);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9001;
}

.kx-modal .slds-modal__header {
    display: flex !important;
    align-items: center;
    justify-content: end;
    border-top-right-radius: 8px !important;
    border-top-left-radius: 8px !important;
    background: white !important;
    border-bottom: none !important;
    /* padding: 45px 80px !important;
    padding-bottom: 25px !important; */
    padding: 20px !important;
}

.kx-modal .close-modal {
    font-size: 25px;
    color: var(--color1);
    /* color: #9b9bae; */
    cursor: pointer;
    margin-left: auto;
    padding-left: 10px;
}

.kx-modal .slds-modal__content {
    /* padding: 0 80px; */
    max-height: calc(100vh - 100px);
    overflow: auto;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    /* padding-bottom: 45px; */
    padding: 20px;
    padding-top: 0;
}

.kx-modal .slds-modal__container {
    height: 95% !important;
    padding: 0 !important;
    margin: auto 20px !important;
    overflow: hidden;
    width: 90%;
    max-width: 1246px !important;
}

.kx-modal .slds-modal__container.fullwidth {
    width: 100%;
    max-width: 1280px !important;
}

.kx-modal .kx-modal-header {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E4EEF1;
    padding-bottom: 20px;
}

.kx-modal-title {
    color: var(--color2)
}

.modalOpenAnimation {
    animation: modalOpenAnimation 0.4s ease;
}

@keyframes modalOpenAnimation {
    0% {
        scale: 0.85;
        opacity: 0;
    }

    100% {
        scale: 1;
        opacity: 1;
    }
}

.modalCloseAnimation {
    animation: modalCloseAnimation 0.3s ease-out;
}

@keyframes modalCloseAnimation {
    0% {
        scale: 1;
        opacity: 1;
    }

    100% {
        scale: 1.05;
        opacity: 0;
    }
}

@media all and (max-width: 850px) {
    .slds-modal__header {
        padding: 10px 15px !important;
    }

    .slds-modal__content {
        padding: 15px 30px;
    }

    .close-modal {
        font-size: 20px;
    }
}

/** ======================================== **/
/**                 KX-BOX                   **/
/** ======================================== **/

.kx-box {
    border: 1px solid rgb(241, 241, 242);
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px 0px;
    padding: 19px 30px;
}

/** ======================================== **/
/**                 KX-CARD                   **/
/** ======================================== **/

.kx-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 30px;
    background: white;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px 0px;
    border: 1px solid #ebebeb;
}

.kx-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 20px 30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #f9f9f9;
    border-bottom: 1px solid #ebebeb;
}

.kx-card-title {
    font-family: source-bold;
    font-size: 20px;
}

.kx-card-subtitle {
    color: #9B9BAE;
}

.kx-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.kx-card-content {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 30px;
}

.kx-card-content.fullwidth {
    background: #f2d629;
    padding: 20px 50px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.tippy-box {
    background: white;
    border: 1px solid #1cb9de;
    border-radius: 5px;
    color: #1cb9de;
    font-family: source;
    font-size: 13px;
    box-shadow: 3px 3px 5px 0px rgb(168 168 168 / 5%);
    padding: 4px;
}

.tippy-box[data-placement^=top]>.tippy-arrow {
    bottom: -1px;
}

.tippy-arrow {
    color: #1cb9de;
}


.kx-checkbox.kx-checkbox-simple .slds-checkbox_faux {
    top: 1px;
}

.kx-checkbox.kx-checkbox-simple .slds-checkbox__label {
    margin-bottom: 0 !important;
    display: flex;
    /* align-items: center; */
}

.kx-checkbox.kx-checkbox-simple .slds-form-element__label {
    padding-left: 0 !important;
}

.kx-radio .slds-radio__label {
    display: flex;
}

.kx-radio .slds-radio_faux {
    top: 0;
    position: relative;
}

.kx-checkbox .slds-checkbox__label {
    display: flex;
}

.kx-checkbox .slds-checkbox_faux {
    top: 0;
    position: relative;
}

h6 {
    color: #FF8115 !important;
}

h5 {
    color: #1CB9DE !important;
}

/** ======================================== **/
/**                 TEMP FIX LDS 2           **/
/** ======================================== **/
.slds-input-has-icon_left > lightning-primitive-icon {
	visibility: hidden;
}