@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:wght@100&display=swap');
body {
    margin: 0;
    padding: 0;
    background-size: cover;
  }
  *{
	  font-family:poppins;
  }
  #spin{
      display:none;
  }
.contain{
  max-width: 50%;  
  margin: 100px auto;
	}
.header{
	display: flex;
    justify-content: center;
}
.bg-gr{
  background:#a7a407;
}
.bx .text_create{
  font-size: 14px;
  color: #a7a407;
background-color: transparent;
border-bottom: 1px dashed !important;
text-decoration: none;
outline: 0;
transition: all .3s ease;
}
._fc .text_pass{
  font-size: 14px;
  color: #a7a407;
background-color: transparent;
text-decoration: none;
outline: 0;
transition: all .3s ease;
}
.bx .text_ct{
/*color: #a7a407;*/
background-color: transparent;
border-bottom: 2px solid #198553 !important;
text-decoration: none;
padding-bottom:3px;
margin-bottom:40px;
outline: 0;
transition: all .3s ease;
}
.fs p:active{
 color:  #d5f4de!important;
}
.fs{
	font-weight:900;
	font-size:50px;
	color:#fff;
}
.header img{
	width:60px;
	height:60px;
	
}
.form-control:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none!important;
  }
.btn{
  box-shadow: none!important;
}
textarea:focus, input:focus{
    outline: none!important;
}

.hr-text {
position: relative;
outline: 0;
border: 0;
color: #198754;
text-align: center;
height:2em;
opacity: .9;
width:60px;
z-index:2;
}
  
  .__hero-img{
  background-image: url("../../img/bg.jpg");
  background-color: #000;
  height: 100vh;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  }
  .bx {
	background:#fff;
    margin:0 auto;
    max-width: 60rem;
    padding: 1.5rem;
    box-sizing: border-box;
    border: 1px solid #dadce0;
    -webkit-border-radius: 8px;
    border-radius: 8px;
  	box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;

  }
  .center{
    margin: 30rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .__reg{
   
  }
  .bt-icon i{
    color:#d3f3dc;
  }
  .field-icon {
    float: right;
    margin-left: -30px;
    margin-top: -30px; 
    position: relative;
    z-index: 2;
    color:#84898c;
    cursor:pointer;
  }
  #second,#result{
    display:none;
  }
  .input-error{
    border-color: #dc3545!important;
    padding-right: calc(1.5em + .75rem)!important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e")!important;
    background-repeat: no-repeat!important;
    background-position: right calc(.375em + .1875rem) center!important;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem)!important;
  }
  .bt{
    cursor:not-allowed
  }
  .bx h2 {
    padding: 0;
    color: #fff;
    text-align: center;
    color: #202124;
    font-size: 24px;
    font-weight: 400;
  }

  
  .bx .inBox {
    position: relative;
  }
  
  .bx .inBox input {
    width: 100%;
    padding: 0.625rem 10px;
    font-size: 1rem;
    letter-spacing: 0.062rem;
    border: 1px solid #ccc;
    background: transparent;
    border-radius: 4px;
  }
  select{
    padding: 0.625rem 10px!important;
  }
  .bx .inBox label {
    position: absolute;
    top: 0;
    left: 10px;
    padding-top: 0.505rem;
    padding-bottom: 0.225rem;
    font-size: 1rem;
    color: grey;
    pointer-events: none;
    transition: 0.5s;
  }
  
  .bx .inBox input:focus ~ label,
  .bx .inBox input:valid ~ label,
  .bx .inBox input:not([value=""]) ~ label {
    top: -1.125rem;
    left: 10px;
    color: #198754;
    font-size: 0.75rem;
    background-color: #fff;
    padding-left: 5px;
    padding-right: 5px;
  }
  .bx .inBox input:focus {
    outline: none;
    border: 2px solid #d3f3dc;
  }
  .bx input[type="submit"] {
    border: none;
    outline: none;
    color: #fff;
    background-color: #1a73e8;
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    border-radius: 0.312rem;
    font-size: 1rem;
    float: right;
  }
  
  .bx input[type="submit"]:hover {
    background-color: #287ae6;
    box-shadow: 0 1px 1px 0 rgba(66,133,244,0.45), 0 1px 3px 1px rgba(66,133,244,0.3);
  }
  
  @media screen and (max-width: 992px){
	  .bx{
		  
	  }
	  ._logI{
		  display:none;
	  }
		
			.fs{
				font-size:30px;
				padding:14px;
			}	
  }