body {
    font-family: Roboto, Arial, sans-serif;
    gap: 0.5rem;
}

/*INPUTS*/

input:focus {
    outline-color: var(--Color-Primary-dark_blue);
}

.atp-input-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.atp-input-group-error .atp-input {
    background-color: var(--Color-State-errorbg);
    border-color: var(--Color-State-error);
}

.atp-input-group-error .atp-label {
    color: var(--Color-State-error);
}

.atp-input-group-error .atp-input-text:required {
    border-color: var(--Color-State-error);
}

.atp-label {
    cursor: default;
    display: block;
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--Color-Text-blacktext);
}

.atp-sbt-text {
    display: block;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: var(--text-mention-grey);
}

.atp-input {
    display: inline-flex;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;
    height: 2.5rem;
}

.atp-input-sm {
    height: 2rem;
}

.atp-input-sm .atp-input-text {
    padding: 0.125rem 0.5rem;
}

.atp-input-text {
    border-radius: 0.25rem;
    border: 2px solid var(--Color-Neutre-DS_light_grey);
    background-color: var(--Color-Neutre-white);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: var(--Color-Text-blacktext);
    flex-grow: 1;
    box-sizing: border-box;
    padding: 0.375rem 1rem;
}

.atp-input-text:required,
.atp-input-required {
    border-left: 0.4rem solid var(--Color-Primary-dark_blue) !important;
}

.atp-input-text:disabled {
    background-color: var(--Color-Neutre-DS_light_grey);
    border-color: none;
    cursor: not-allowed;
    pointer-events: none;
}

.atp-input-text:required:disabled {
    border-color: transparent;
    border-left: 0.4rem solid var(--Color-Neutre-DS_dark_grey);
}

.atp-input[data-icon-right] .atp-input-text {
    padding: 0.375rem 3rem 0.375rem 1rem;
}

.atp-input[data-icon-left] .atp-input-text {
    padding: 0.375rem 1rem 0.375rem 3rem;
}

.atp-input-sm[data-icon-right] .atp-input-text {
    padding: 0.125rem 2rem 0.125rem 0.5rem;
}

.atp-input-sm[data-icon-left] .atp-input-text {
    padding: 0.125rem 0.5rem 0.125rem 2rem;
}

.atp-input[data-icon-right]::after,
.atp-input[data-icon-left]::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--Color-Neutre-black);
}

.atp-input[data-icon-right]::after {
    right: 1rem;
    width: 1.5rem;
    height: 1.5rem;
}

.atp-input[data-icon-left]::before {
    left: 1rem;
    width: 1.5rem;
    height: 1.5rem;
}

.atp-input-sm[data-icon-right]::after,
.atp-input-sm[data-icon-left]::before {
    width: 1rem;
    height: 1rem;
}

.atp-input-sm[data-icon-right]::after {
    right: 0.5rem;
}

.atp-input-sm[data-icon-left]::before {
    left: 0.5rem;
}

.atp-label::after {
    content: "";
}

.atp-label:has(~ div :is(input[required], select[required]))::after {
    content: " *";
    color: black;
}

.atp-tom-select {
    position: relative;
    background-color: white;
    width: 100%;
    max-width: 18rem;
    display: inline-block;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    border-left: 6px solid #1a2341;
}

.atp-tom-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    padding: 0.5rem;
    border: none !important;
    background: transparent;
    font-size: 1rem;
    cursor: pointer;
    max-width: 100% !important;
}

.atp-tom-select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

.atp-tom-select .ts-control {
    min-height: 34px;
}

.atp-tom-select::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 1rem;
    height: 1rem;
    background-image: url("/templates/fullpage/assets/check.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}