/* ***************** *******************************************************************
* WordPress Theme  | LanteasOpenSoclePremiumThemeChild [Input elements] - Lanteas.
* ***************** *******************************************************************
*/


/* Default normal state */

#top [data-role="etape-formulaire"] .input-text, #top [data-role="etape-formulaire"] input[type="text"], 
#top [data-role="etape-formulaire"] input[type="input"], #top [data-role="etape-formulaire"] input[type="password"], 
#top [data-role="etape-formulaire"] input[type="email"], #top [data-role="etape-formulaire"] input[type="number"], #top input[type="url"], 
#top [data-role="etape-formulaire"] input[type="tel"], #top [data-role="etape-formulaire"] input[type="search"], 
#top [data-role="etape-formulaire"] input[type="date"], 
#top [data-role="etape-formulaire"] input[type="datetime-local"], 
#top [data-role="etape-formulaire"] input[type="month"], 
#top [data-role="etape-formulaire"] input[type="time"],
#top [data-role="etape-formulaire"] textarea,
#top [data-role="etape-formulaire"] div[rel="as-input-text"],
#top [data-role="etape-formulaire"] div[rel="as-input-text"] *,
#top [data-role="etape-formulaire"] a[data-role="champ-formulaire"], 
#top [data-role="etape-formulaire"] select, #top [data-role="etape-formulaire"] .select {
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 4px !important;
    color: initial , var( --alternate_color_color );
           /* Allow initial preformatted inline style (eg Wysiwyg) versus custom Enfold Style ;) */
}

/* Special Link for linked resources or relation */
#top [data-role="etape-formulaire"] a[data-role="champ-formulaire"],
#top [data-role="etape-formulaire"] input[type="date"][data-role="champ-formulaire"],
#top [data-role="etape-formulaire"] input[type="datetime-local"][data-role="champ-formulaire"],
#top [data-role="etape-formulaire"] input[type="month"][data-role="champ-formulaire"],
#top [data-role="etape-formulaire"] input[type="time"][data-role="champ-formulaire"] {
    width: 100%;
    display: block;
    padding: 6px 6px;
    outline: none;
    margin: 0;
    background-color: var( --header_color_bg2 );
    border-color: var( --main_color_border );
    cursor: cell !important;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 5px; /* override */
}

/* Disabled design */
#top [data-role="etape-formulaire"] [disabled],
#top [data-role="etape-formulaire"] [disabled="disabled"] {
    background-color: var( --header_color_bg2 );
/*  color: var( --alternate_color_primary ); */
    border-color: var( --main_color_border );
    cursor: not-allowed !important;
}


/* Readonly/Detail (disabled) design */
#top [data-role="etape-formulaire"].readonly [disabled],
#top [data-role="etape-formulaire"].readonly [disabled="disabled"] {
    background-color: var( --header_color_bg2__light );
/*  color: var( --alternate_color_primary ); */
    border-color: var( --main_color_border__light );
    cursor: not-allowed !important;
}


#top [data-role="etape-formulaire"] select[disabled] option[selected]:checked {
  background: var( --header_color_bg2 ) linear-gradient(0deg, var( --header_color_bg2 ) 0%, var( --header_color_bg2 ) 100%);
}
#top [data-role="etape-formulaire"] select[disabled] option[selected]:checked::before {
  content: "•";
}

/* Required design */
#top [data-role="etape-formulaire"] [required="required"] {
    /*background-color: var( --header_color_bg2 );*/
    background-color: #ffffff;
    color: var( --alternate_color_primary );
    border-color: var( --main_color_border );
    cursor: default;
    /*color: var( --picto-color-hover );*/
    color: #343a40;
}

[data-required] label::after, [data-required] > span::after  {
    content: "\f069";
    color: var( --red );
    display: inline-block;
    margin: 0;
    margin-left: 0.25rem;

    font: normal normal normal 14px/1 "Font Awesome 5 Free";
    font-family: "Font Awesome 5 Free";
    font-size: 60%;
    font-weight: 900;
    transform: translateY(-60%);

    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-required] > span::after {
    position: absolute;
    display: inline;
    transform: translateY(0%);
    font-size: 50%;
    margin-left: 0.125rem;
}


/* Higlight focusable */
#top a, 
#top button,
#top input,
#top select,
#top textarea {
    outline: revert !important;
}

#top a:focus, 
#top button:focus,
#top input:focus,
#top select:focus,
#top textarea:focus {
    outline: revert !important;
    box-shadow: 0 0 5px -2px var( --main_color_primary )
}

#top a:focus-visible, 
#top button:focus-visible,
#top input:focus-visible,
#top select:focus-visible,
#top textarea:focus-visible {
    outline: revert !important;
}


#top [data-role="etape-formulaire"] input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -border-radius: 9px;
    border-radius: calc( var( --toggle-base-size ) / 2 );
    height: var( --toggle-base-size );
    width: calc( var( --toggle-base-size ) * 2 );
    display: flex;
    position: relative;
    margin: calc( var( --toggle-base-size ) / 6 );
    margin-left: 0;
    cursor: pointer;
    background: var( --main_color_bg2 );
    border: 1px solid var( --main_color_border );
}
#top [data-role="etape-formulaire"] input[type="checkbox"]:checked {
    background: var( --main_color_border );
}
#top [data-role="etape-formulaire"] input[type="checkbox"]::before {
    font-family: FontAwesome;
    content: '';
    display: block;
    color: var( --main_color_color );
    font-size: calc( var( --toggle-base-size ) / 5 * 3 );
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    text-align: center;
    left: 0;
    margin: 0;
    transition: all ease-in-out 220ms;
    width: calc(100% / 2);
    height: calc( var( --toggle-base-size ) - 2px );
    border-radius: calc( ( var( --toggle-base-size ) / 2 ) - 2px );
    line-height: calc( var( --toggle-base-size ) - 2px );
    background-color: var( --main_color_border );
}
#top [data-role="etape-formulaire"] input[type="checkbox"]:checked::before {
    color: #fff;
    transform: translateY(-50%) translateX( calc(100%) );
    transition: all ease-in-out 220ms;
    /*
    opacity: 1;
    background-color: var( --picto-color-hover );
    filter: saturate(1);
    /**/
    background-color: var( --alternate_color_color );
    content: var( --toggle-active-glyph );
}
#top [data-role="etape-formulaire"] .field-radio-label input[type="checkbox"][disabled]:checked::before {
    opacity: 0.5;
    filter: saturate(0);
}


#top [data-role="etape-formulaire"] .field-radio-label {
    display: inline-flex;
    align-items: center;
}
#top [data-role="etape-formulaire"] .field-radio-label.stacked-field-radio {
    display: flex;
}
#top [data-role="etape-formulaire"] .field-radio-label label {
    margin: 0 0.75rem 0 0.25rem;
    cursor: pointer;
}
#top [data-role="etape-formulaire"] .field-radio-label:last-of-type label {
    margin-right: 0;
}

#top [data-role="etape-formulaire"] .field-radio-label input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    cursor: pointer;
    position: relative;
    height: var( --switch-base-size );
    min-height: var( --switch-base-size );
    max-height: var( --switch-base-size );
    width: var( --switch-base-size );
    min-width: var( --switch-base-size );
    max-width: var( --switch-base-size );
    background: var( --main_color_bg2 );
    border: 2px solid var( --main_color_border );
    border-radius: calc( var( --switch-base-size ) / 2 );
}

#top [data-role="etape-formulaire"] .field-radio-label input[type="radio"]:checked {
    background: var( --main_color_border );
}
#top [data-role="etape-formulaire"] .field-radio-label input[type="radio"]::before {
    font-family: FontAwesome;
    content: '';
    display: block;
    color: var( --main_color_color );
    font-size: calc( var( --toggle-base-size ) / 5 * 3 );
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    text-align: center;
    left: 50%;
    margin: 0;
    transition: all ease-in-out 220ms;
    width: calc( var( --toggle-base-size ) - 2px );
    height: calc( var( --toggle-base-size ) - 2px );
    border-radius: calc( var( --switch-base-size ) / 2 );
    line-height: calc( var( --toggle-base-size ) - 2px );
    background: transparent;
}
#top [data-role="etape-formulaire"] .field-radio-label input[type="radio"]:checked::before {
    color: #fff;
    transition: all ease-in-out 220ms;
    /*
    opacity: 1;
    background-color: var( --picto-color-hover );
    filter: saturate(1);
    /**/
    background-color: var( --alternate_color_color );
    content: var( --switch-active-glyph );
}
#top [data-role="etape-formulaire"] .field-radio-label input[type="radio"][disabled]:checked::before {
    opacity: 0.5;
    filter: saturate(0);
}

#top [data-role="etape-formulaire"] input[type="file"]{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

#top [data-role="etape-formulaire"] input[type="file"]:focus,
#top [data-role="etape-formulaire"] input[type="file"]:focus-visible,
#top [data-role="etape-formulaire"] input[type="file"]:focus-within,
#top [data-role="etape-formulaire"] input[type="file"]:active{
    box-shadow:none !important;
}

#top [data-role="etape-formulaire"] span[data-attache]:hover,
#top [data-role="etape-formulaire"] span[data-browse]:hover,
#top [data-role="etape-formulaire"] span[data-selector]:hover{
    box-shadow: -3px 0 0 0 var( --main_color_primary );
}

#top [data-role="etape-formulaire"] span[data-attache],
#top [data-role="etape-formulaire"] span[data-browse],
#top [data-role="etape-formulaire"] span[data-loading],
#top [data-role="etape-formulaire"] span[data-selector]{
  -webkit-transition: box-shadow 0.10s linear 0s;
     -moz-transition: box-shadow 0.10s linear 0s;
       -o-transition: box-shadow 0.10s linear 0s;
          transition: box-shadow 0.10s linear 0s;

    padding-left: 3px;

    margin-top: 6px;
    display: block;
    margin-left: 2px;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    color: var( --main_color_primary );
    font-style: italic;
}

#top [data-role="etape-formulaire"] span[data-attache] >span,
#top [data-role="etape-formulaire"] span[data-browse] >span,
#top [data-role="etape-formulaire"] span[data-loading] >span,
#top [data-role="etape-formulaire"] span[data-selector] >span{
    white-space: pre-wrap;
    display: flex;
    color: var( --main_color_color );
}

#top [data-role="etape-formulaire"] span[data-attache] [data-role="clear-related-file"],
#top [data-role="etape-formulaire"] span[data-browse] [data-role="clear-browsed-file"],
#top [data-role="etape-formulaire"] span[data-loading] [data-role="clear-loading-file"],
#top [data-role="etape-formulaire"] span[data-selector] [data-role="clear-selected-file"]{
    min-width: 1.5rem;
}

#top select[data-name] {
  overflow-x: hidden;
  text-overflow: ellipsis;
  padding-right: 1.6rem;
}

#top select[multiple][data-name] {
    padding-right: unset;
}

/* custom alignement <span> <-|-> <i cross> */
#top [data-role="etape-formulaire"] span[data-attache] > span,
#top [data-role="etape-formulaire"] span[data-browse] > span,
#top [data-role="etape-formulaire"] span[data-loading] > span,
#top [data-role="etape-formulaire"] span[data-selector] > span {
  justify-content: space-between;
  align-items: center;
}



/* Special custom ui design for div appearance as textarea */
#top [data-role="etape-formulaire"] div[rel="as-input-text"] {
    margin-left: -4px;
    width: calc( 100% - 6px );
}

.los-filename {
    word-wrap: break-word;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

input[type="file"].input_champ.custom-field {
    width: 100%;
    word-wrap: break-word;
}

@media only screen and (max-width: 767px) {
    #top [data-role="etape-formulaire"] div[rel="as-input-text"] {
        margin-left: 0;
        width: auto;
    }
}