/* VARIABLES */

:root {
    --text-black: #292222;
    --input-grey: #5B5352;
    --border-grey: #E2DBD9;
    --cta-background: #FFD707;
    --cta-text: #1C1B1B;
    --link-red: #b00c28;
    --fa-li-margin: 3rem;
    --fa-li-green: #2C9255;
    --flex-gap: 2rem;
}

/* BUTTONS */

.cta-button {
    font-size: 16px;
    padding: 10px 40px;
    border-radius: 50px;
    background: var(--cta-background);
    width: max-content;
    font-family: 'Inter', sans-serif;
}
a.cta-button:hover, a.cta-button:active  {
    color: inherit;
    text-decoration: none;
}
.cta-link button {
    color: var(--link-red);
    font-size: 16px;
}
.cta-link:hover button {
    color: inherit;
    text-decoration: underline;
}

/* LOGGED IN USER */

.account {
    margin-bottom: 20px;
}
.account-signed {
    display: flex;
    justify-content: center;
    border: 1px solid var(--border-grey);
    padding: 2rem;
    flex-direction: column;
    text-align: center;
    margin-top: 1rem;
    font-size: 18px;
}
.account-info {
    font-size: 19px;
}
.account-email {
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 1rem;
}
.account-email:before {
    content: "";
    width: 25px;
    height: 24px;
    display: inline-block;
    background: url('data:image/svg+xml,<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_1750_34020)"><path d="M24.5 0H-70V24H24.5V0Z" fill="%23AE0D21"/><path d="M15.3721 16.6601H17.1403V7.35966H14.6487V5.64697H18.8529V18.3529H14.611L10.3503 13.9979V11.5252L15.3721 16.6601Z" fill="white"/><path d="M9.62791 7.34081H7.8587V16.6412H10.3503V18.3529H6.14706V5.64697H10.3879L14.6487 10.003V12.4757L9.62791 7.34081Z" fill="white"/></g><defs><clipPath id="clip0_1750_34020"><rect width="24" height="24" fill="white" transform="translate(0.5)"/></clipPath></defs></svg>');
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* FORM ELEMENTS */

.input-row {
    display: flex;
    /*flex-wrap: wrap;*/
    gap: 16px;
    margin-bottom: 24px;
}

.input_text_root {
    position: relative;
    color: #979797;

    @media only screen and (max-width: 760px) {
        flex-basis: 100%
    }
}

.input_text_input {
    display: block;
    width: 100%;
    padding: 25px 16px 6px 16px;
    border: 1px rgba(133.97, 141.34, 152.40, 0.60) solid;

    color: var(--input-grey);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Desktop/Button/01 */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 19px; /* 118.75% */
}

.input_text_input:focus {
    outline: none !important;
    border: 2px #181818 solid;
    padding: 24px 15px 5px 15px;
}

.input_text_label {
    position: absolute;
    top: 16px;
    right: 16px;
    left: 16px;
    display: block;
    transform: scale(1);
    transform-origin: 0 0;
    pointer-events: none;
    transition: transform .33s ease;
    opacity: 0.7;
    font-weight: 500;
    /*transform: scale(.75) translateY(-1.5rem);*/
    /*transform-origin: 0 0;*/

    color: var(--input-grey);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Desktop/Button/01 */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 19px; /* 118.75% */
}

.input_text_root:focus-within > .input_text_label,
.input_text_input.active + .input_text_label,
.input_text_input:not(:placeholder-shown) + .input_text_label,
.input_text_label.active
{
    transform: scale(.75) translateY(-1.5rem);
    transform-origin: 0 0;
}

.input_text_input::placeholder {
    opacity: 0.7;
    color: var(--input-grey);
    font-size: 12px;
    transition: opacity 0.3s ease;
}
.input_text_input:not(:focus)::placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.input_checkbox_centered {
    display: flex;
    justify-content: center
}

.input_checkbox_checkbox {
    position: relative;
    align-items: baseline;
    color: #3e3e3e;
    cursor: pointer;

    color: var(--input-grey);
    leading-trim: both;
    text-edge: cap;
    font-feature-settings: 'liga' off, 'clig' off;

    /* Desktop/Tagline/02 */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    line-height: 18px; /* 128.571% */
}

.input_checkbox_small {
    display: inline-flex;
    column-gap: 8px;
    align-items: end;
    font-weight: normal;
}

.input_checkbox_input {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    opacity: 0
}

.input_checkbox_label {
    display: block;
    margin-bottom: 16px;
}

.input_checkbox_fake_input {
    position: relative;
    display: inline-block;
    min-width: 22px;
    min-height: 22px;
    max-height: 22px;
    /*border-radius: 4px;*/
    border: 1px rgba(133.97, 141.34, 152.40, 0.60) solid;
    pointer-events: none;
}

.input_checkbox_fake_input_small {
    top: .1875rem;
    margin: auto;
}

.input_checkbox_input:checked + .input_checkbox_fake_input {
    border: 1px black solid;
    background-color: black;
    background-image: url("/layouts/dennikn/img/icons/radio_checked.svg");
}

.input_checkbox_input:focus-visible + .input_checkbox_fake_input {
    box-shadow: 0 0 .375rem .0625rem rgba(208, 2, 27, .3)
}

select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background-color: #fff;
    background-image: url(/layouts/dennikn/img/icons/dropdown.svg);
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    display: block;
    padding: 20px 16px 6px 16px;
    border: 1px rgba(133.97, 141.34, 152.40, 0.60) solid;
    color: #181818;
    font-size: 18px;
    font-family: adelle-sans, sans-serif;
    font-weight: 500;
}