/*@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");*/

body {
   font-family: 'Century Gothic', sans-serif;
}

.form-control{
	background-color: #fff;
	padding:8px 16px 8px 35px; 
	width: 100%;
	font-size: 16px;
	font-style: normal;
	font-family: 'Century Gothic';
    
}
.form-control::placeholder{
    color:#aaa;
}
.form-control:focus{
    box-shadow:none;
    border-color:var(--font-hover-color);
    outline:none;
}
.form-group:focus-within{
    transform:scale(1.1,1.1);
}

.form-control:invalid:focus{
    border-color:red;
}
.form-control:valid:focus{
    border-color:green;
}
  
.col-sm-6 i{
  position: absolute; 
  top: 34%; 
  left: 8px; 
  color: #ccc; 
  font-size: 17px; 
  pointer-events: none; 
  transform: translateY(-50%);
}

.col-sm-12 i{
  position: absolute; 
  top: 34%; 
  left: 8px; 
  color: #ccc; 
  font-size: 17px; 
  pointer-events: none; 
  transform: translateY(-50%);
}

.col-sm-6 input:focus ~ i{
  color: #00823b;
}

.col-sm-12 input:focus ~ i{
  color: #00823b;
}

form .button-area{
  margin: 0 0 30px 0;
  display: flex;
  align-items: center;
}
.button-area button{
  color: #fff;
  border: none;
  outline: none;
  font-size: 18px;
  font-family: 'Century Gothic';
  cursor: pointer;
  border-radius: 5px;
  padding: 13px 25px;
  background: #04AA6D;
  transition: background 0.3s ease;
}
.button-area button:hover{
  background: #00823b;
}
.button-area span{
  
  font-size: 14px;
  margin-left: 5px;
  /*display: none;*/
}

/* Modal Background -------------------------------------------*/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1 1 auto; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  
}

/* Modal Content/Box */
  .modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  /*width: 80%; /* Could be more or less, depending on screen size */
  width: 360px;
  border-radius: 12px;
}

/* Close Button */
.close {
  /*color: #888;
  float: right;
  font-size: 28px;
  font-weight: bold;*/
  
  	width: 100%;
	margin-top: -35px;
	padding: 10px 0;
	background-color: #6fd649; /* #00823b;*/
	color: #fff;
	border: 0;
	outline: none;
	font-family: 'Century Gothic', sans-serif;
	font-size: 14px;
	font-weight: normal;
	text-align:center;
 	border-radius: 6px;
 	box-shadow: 0 1px 1px rgba(0,0,0,2);
 	opacity: 1;
}

.close:hover,
.close:focus {
  /*color: black;*/
  color: #000;
  background-color: #eee;
  font-family: 'Century Gothic', sans-serif;
  font-size: 14px;
  font-weight: normal;
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
}

.coname {
 font-size:10px;
 color: #888;
 text-align: left;
 padding-bottom: 35px;
}

@media only screen and (max-width: 500px) {
    	.modal {
        transform:scale(1);
        transform-origin:0 0;
}



