﻿

fieldset {margin: 0;padding: 0;border: 0;}
.form-label {margin-bottom:20px}
.form-label label {outline: none; font-family:almoniDL400;}

.form-label input[type="text"],
.form-label input[type="password"], 
.form-label input[type="tel"],
.form-label input[type="email"],
.form-label select {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    height: 48px;
    margin:0;
    padding: 0;
    border-radius: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    background:var(--primaryBgColor);
    text-indent:14px;
    outline: 0;
    -webkit-appearance: none;
        -moz-appearance: none;
            appearance: none;
    transition: all 0.2s ease-in-out;
    -webkit-box-shadow: inset 0 0 0 50px var(--primaryBgColor);
    font-family: almoniDL400;
        direction: rtl;
        text-align: right;
    font-family:almoniDL400;
    border:1px #666 solid;
    color: #1a1a1a;
}
.form-label input[type="password"], .form-label input[type="email"] {  
  direction: ltr;
  text-align: left;
}
.form-label input[type="password"] { text-indent:40px}

.form-label label, select label {
    position: absolute;
    right: 8px;
    font-size: 18px;
    top: 12px;
    color: #666;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    transition: all 0.2s ease-in-out;
}

 /* pressed input */
.form-label input:valid ~ label,
.form-label input:focus ~ label {
    background:var(--primaryBgColor);
    padding:0 5px;
    -webkit-transform: translate3d(0, -21px, 0);
            transform: translate3d(0, -21px, 0);
    line-height: 20px;
    font-size: 15px;
}

/* select */
select:valid ~ label, select:focus ~ label {top: -10px !important;    font-size: 15px; background:var(--primaryBgColor); padding:0 5px; }

/* Hover */
.form-label input[type="text"]:hover, .form-label select:hover {border:1px #1a1a1a solid;}
.form-label input[type="text"]:hover ~label, .form-label select:hover ~ label {color: #1a1a1a;}
 
/* activated */
.form-label input[type="text"]:valid, .form-label select:valid {border:1px #666 solid;}
.form-label input[type="text"]:valid ~ label, .form-label select:valid ~ label {color:#666;}

/* focused */
.form-label input[type="text"]:focus, .form-label select:focus {border:2px #1a1a1a solid;}
.form-label input[type="text"]:focus ~ label, .form-label select:focus ~ label {color: #1a1a1a;}


/* error */
#right_form .errMess, #left_form .errMess {display:none;line-height: 36px;color:#e7165b;margin-right:10px}
.form-label .invalid_input {border:2px solid #e7165b !important; color:#e7165b;}
.form-label .invalid_input:valid ~ label {color:#e7165b !important}

 

 @media only screen and (max-width: 480px) {
.form-label input[type="text"],
.form-label input[type="password"], 
.form-label input[type="tel"],
.form-label input[type="email"],
.form-label select {-webkit-box-shadow: inset 0 0 0 50px #fff1e5; }

.form-label select:valid ~ label, 
.form-label select:focus ~ label,
.form-label input:valid ~ label,  
.form-label input:focus ~ label {background: #fff1e5 !important;}

}