.bgc{
color:#fff;
background-image:linear-gradient(30deg,#0ff,#00a,#005,#00a,#0ff);
background-image:-webkit-linear-gradient(30deg,#0ff,#00a,#005,#00a,#0ff);
background-image:-moz-linear-gradient(30deg,#0ff,#00a,#005,#00a,#0ff);
background-image:-o-linear-gradient(30deg,#0ff,#00a,#005,#00a,#0ff);
background-image:-ms-linear-gradient(30deg,#0ff,#00a,#005,#00a,#0ff);
}

.formBox{
position:fixed;
top:0;
left:0;
right:0;
width:100vw;
height:100vh;
z-index:99999999;
display:none;
padding:4px;
margin:auto auto 40px auto;
padding:40px 0;
box-sizing:border-box;
overflow-x:hidden;
overflow-y:auto;
z-index:999999999;
}
.formSubject{
text-align:center;
font-weight:bold;
margin:auto;
color:#fff;
font-size:18px;
border-bottom:1px solid;
}

.formBox p{
width:30%;
margin:auto;
padding:4px;
text-align:center;
direction:rtl;
}

.formBox input{
width:100%;
border:1px solid;
border-radius:4px;
padding:8px;
margin:8px auto;
text-align:center;
direction:ltr;
background-image:linear-gradient(90deg,#0ff,#00a,#005,#00a,#0ff);
background-image:-webkit-linear-gradient(90deg,#0ff,#00a,#005,#00a,#0ff);
background-image:-moz-linear-gradient(90deg,#0ff,#00a,#005,#00a,#0ff);
background-image:-o-linear-gradient(90deg,#0ff,#00a,#005,#00a,#0ff);
background-image:-ms-linear-gradient(90deg,#0ff,#00a,#005,#00a,#0ff);
color:#fff;
}

.formBox input:hover{
background-image:linear-gradient(0deg,#0ff,#00a,#005,#00a,#0ff);
background-image:-webkit-linear-gradient(0deg,#0ff,#00a,#005,#00a,#0ff);
background-image:-moz-linear-gradient(0deg,#0ff,#00a,#005,#00a,#0ff);
background-image:-o-linear-gradient(0deg,#0ff,#00a,#005,#00a,#0ff);
background-image:-ms-linear-gradient(0deg,#0ff,#00a,#005,#00a,#0ff);
color:#fff;
}

.formBox input:focus-visible{
border:1px solid #f00;
font-size:18px;
}
.formBox input::placeholder{
color:#0ff;
}

.star::before{
content:" * ";
color:#f00;
font-size:30px;
font-weight:bold;
}


@media (min-width:800px){
.formBox p{width:40%;}
}

@media (max-width:800px){
.formBox p{width:70%;}
}

@media (max-width:500px){
.formBox p{width:98%;}
}
.btnSwitchForm,.btnCloseForm{
margin:16px auto;
color:#fff;
background:transparent;
}

.btnSwitchForm{border-bottom:2px solid;}


.formBox label{
color:#fff;
font-weight:bold;
float:right;
direction:rtl;
text-align:right;
}


.eye{
position:relative;
bottom:38px;
right:-8px;
width:25px;
height:25px;
margin:auto;
object-fit:cover;
float:left;
clip-path:none;
display:inline;    
cursor:pointer;
background-color:transparent;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
.off{
background-image:url("../images/40/eyeOff.png");
}
.on{
background-image:url("../images/40/eyeOn.png");
}