.mt-block {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin: 1rem 0;
}
.mt-case {
    width: 100%; 
    position: relative;
}

#view_pwd { position : absolute; bottom : 6px; right : 10px; display: block;}
#view_pwd .fa {font-size : 130%;}

.mt .w30 {flex-basis: 30%}
.mt .w40 {flex-basis: 40%;}

/* input */
.mt-input {
    display: block;
    width: 100%;
    border: none;   
    padding : 5px 15px; 
    border-radius : 0px;
    box-sizing : border-box;
    font-family: inherit;
    outline: 0;
    background: transparent;
}
    .bg_bleu .mt-input {
        color: #fff;
        background: rgba(255,255,255,.2);
    }
    .mt-append {width: 66%}

    .mt-input[type="text"], .mt-input[type="password"], select.mt-input {
        height: 2.2em;
    }
    
    .mt-border {
        display: block;
        content: '';
        height: 2px;
        width: 100%;
        background: #ccc;
    }

    .mt-border.mt-border-error {background: red}
    .mt-input:not([readonly]):focus+.mt-border {
    	animation-duration: 0.5s;
        animation-name: getfocus;
        animation-fill-mode: forwards;
    }

    @keyframes getfocus {
      
      0% {
        width: 0%;
      }

      100% {
        background: var(--vert);
        width: 100%;
      }
    }

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

    select.mt-input option[disabled] { text-decoration: line-through; background: #eee; font-size : 90%}

    @supports 
      (-webkit-appearance: none) or
      (-moz-appearance: none) or
      (appearance: none) {
        
        select.mt-input {
            padding-left: 0;
            padding-right: 0;
            -webkit-appearance: none; 
            -moz-appearance: none;
            appearance: none;
            /* https://www.iconfinder.com/iconsets/google-material-design-icons  */
            background-color: white;
            background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAANtJREFUeJzt0MkRgkAUBuE+eNdwiMeFIAnAJRwSUC+8KsoNhcGCob8qjs6zf5AkSZIkSZIk9bbK5EYvG+AEbEe8UQJHYD3ijV42wAW4AVfGGaFs3r8BZyY0Qju+/e0S3mjHT26Eiuc/l3KEV/HxVQneH6wAasYZ4VN83dyehK4R9j3enE18SDnC7OJDihFmGx+GjDD7+NA1wuHFb7KJD7+MkF18+GaEbOND1whZx4dfR8gqPnw7QpbxoWuErOPDuxEWER8eR1hUfIgRFhkfChYcL0mSJEmSJEn6tzsaC9SYLvp20QAAAABJRU5ErkJggg==');
            background-repeat: no-repeat;
            background-position: right center ;
            background-size: contain;
        }
        
        select.mt-input option:not(.placeholder) {color: #000;}

        select.mt-input option.placeholder,
        select.mt-input.mt-placeholder-on {
            color: #9A9A9A;
        }
        select.mt-input.mt-placeholder-on:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 #9A9A9A;
        }

    }

/* label */
.mt-label {
    display: block;
    padding: 8px 0 0 0;
    font-size: 80%;
    color: rgba(255,255,255,.5);
    visibility: hidden;
}
    .bg_blanc .mt-label{
        color : #AAA; 
    }
    .mt-label.mt-label-on {
        visibility: visible;
    }

/* helper */

.mt-helper[data-aide]::after,
.mt-helper[data-erreur]::after {
    display: block;
    width: 100%;
    padding: 4px 0;
    font-size: 80%; 
}

    .mt-helper[data-aide]::after {
        content: attr(data-aide);
        color: #000000;
        opacity: 0.38;
    }

    .mt-helper[data-erreur]::after {
        content: attr(data-erreur);
        color: #D50000;
        opacity: 1;
    }

   .bg_bleu .mt-helper[data-erreur]::after {
        color : #fff; 
    }

   .mt-helper[data-erreur] {
        display: inline-block;
    }

     .bg_bleu .mt-helper[data-erreur]::after {
        background : #D50000;
        padding : 5px 10px;
        border-radius: 30px;
        line-height: 1;
     }


    .mt-helper[data-erreur=""] {
        display: none;
    }
    
/* bouton */
.mt-submit {
    box-sizing: border-box;
    float: right;
    margin: 16px 0;
    cursor: pointer;
    border : none;
    padding: 8px 16px;
    color: #ffffff;
    font-weight: 300;
    text-transform: uppercase;
}

    .mt-submit-append {
        float: none;
        margin: auto 0;
        padding: 6px 16px;
        width: 100%;
    }

    .mt-label-space::before {
        content: ' ';
        display: block;
        padding: 0 0 0 0;
        font-size: 80%;
        visibility: hidden;
    }

    .mt-js-required {
        opacity: 0.5;
        pointer-events: none;
    }

        .mt-js-required::before {
            display: block;
            padding: 9px 0;
            content: attr(data-label-off);
        }

        .js-isActive .mt-js-required {
            opacity: 1;
            pointer-events: auto;
        }

        .js-isActive .mt-js-required::before {
            content: attr(data-label-on);
        }

.mt-radio {
    display: inline-block;
    margin-top: 10px;
}
.mt-radio + label {
    display: inline-block;
    margin-left: 10px;
}