/****************************
    Forms - General
****************************/

.yls_form .s-field__input,
.yls_form .s-field__textarea,
.yls_form .s-field__select,
.yls_form .s-group__checkbox,
.yls_form .s-group__radio,
.yls_form .s-field__optin,
.yls_form .s-field__upload {
    --gap: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column-reverse;
    margin: calc( var(--gap) / -2 ) 0;
}

.yls_form .s-field__wrapper label {
    margin-bottom: 0;
    padding: calc( var(--gap) / 2 ) 0;
}

.yls_form .s-field__wrapper input[type="text"],
.yls_form .s-field__wrapper input[type="email"],
.yls_form .s-field__wrapper textarea {
    padding: var(--type-scale-rel_xs-5) var(--type-scale-rel_xs-2);
    background: rgba(0, 0, 0, 0.01);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius_md);
    outline: 0;
    
    -webkit-transition: all .38s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all .38s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all .38s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.yls_form .s-field__wrapper input[type="text"]:hover,
.yls_form .s-field__wrapper input[type="email"]:hover,
.yls_form .s-field__wrapper textarea:hover {
    border-color: var(--color_secondary-400);
}

.yls_form .s-field__wrapper input[type="text"]:focus,
.yls_form .s-field__wrapper input[type="email"]:focus,
.yls_form .s-field__wrapper textarea:focus {
    background: var(--color_secondary-300);
}

.yls_form .s-form__msg {
    display: none !important;
}