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


/* SELECT 2 */ 
.container .select2-container {
    width: 100% !important;
    margin-top: 5px;
    margin-bottom: 5px;
    height: fit-content;
}

.select2 {
  width: 90%;
  position: relative;
  z-index: 1030;
}

.select2,
.select2 .selection,
.select2 .select2-selection {
  height: 36px;
}
.select2 .selection{
    width: 100%;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  -webkit-appearance: none;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);
  background-position: center right;
  background-repeat: no-repeat;
  border-radius: 2px;
  height: 36px;
  padding: 0 52px 0 5px !important;
  border: 1px solid #e1e1e1;
  padding: 8px 6px;
  border-radius: 4;
  line-height: 36px;
  font-weight: 500;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  text-align: left;
}

.select2-container--default .select2-selection--single {
  border: none;
}

.select2-selection__arrow {
  display: none;
}

.select2-container--default .select2-selection--single {
  background-color: none !important;
  border: none;
}

.select2-container--default.select2-container--open {
  z-index: 10000;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #e4e4e4;
  color: var(--enfold-main-color-meta);
}

#top .select2-results__option {
    min-height: 32px;
}

#top .select2-selection.select2-selection--multiple {
    height: auto;
    border-color: var(--enfold-main-color-border);
    border-radius: 2px;
    border: 1px solid #e1e1e1;
}

#top .select2-selection__rendered .select2-search__field {
    display: none;
}

#top .select2-container--default .select2-results__option,
#top .select2-results .select2-result-label,
#top .select2-container .select2-choice {
  color: #333333;
}
#top
  .select2-container--default
  .select2-results__option--highlighted[aria-selected],
#top
  .select2-container--default
  .select2-results__option--highlighted[data-selected],
#top .select2-results .select2-highlighted {
  background-color: #f0f0f0;
  color: #333333;
}
#top .select2-container .select2-choice,
#top .select2-container--default .select2-selection--single {
  border: none;
  background-image: none;
  height: 36px;
  line-height: 30px;
  border-radius: 2px;
  border-color: var(--enfold-main-color-border);
  background-color: var(--enfold-main-color-bg2);
  color: var(--enfold-main-color-meta);
  font-family: inherit;
}


/* 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;
    }
}