/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/


.radio_wrapper{
  display: inline-flex;
  background: #fff;
  height: 50px;
  width: 98%;
  align-items: center;
  margin:20px 0 20px 0;
  justify-content: space-evenly;
  border-radius: 5px;
 
 /* box-shadow: 5px 5px 30px rgba(0,0,0,0.2);*/
}
.radio_wrapper .option{
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.radio_wrapper.option .dot{
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.2);

}
.radio_wrapper .option .dot::before{
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  background: #FFF;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
  margin:-6px 0 0 -30px;
  border-color: #999;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
  
}
input[type="radio"]{
  display: none;
}
#option-1:checked:checked ~ .option-1,
#option-3:checked:checked ~ .option-3,
#option-4:checked:checked ~ .option-4,
#option-2:checked:checked ~ .option-2{
  border-color: #0069d9;
  background: #0069d9;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-3:checked:checked ~ .option-3 .dot,
#option-4:checked:checked ~ .option-4 .dot,
#option-2:checked:checked ~ .option-2 .dot{
  background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-3:checked:checked ~ .option-3 .dot::before,
#option-4:checked:checked ~ .option-4 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}
.radio_wrapper .option span{
  font-size: 14px;
  color: #808080;
}
#option-1:checked:checked ~ .option-1 span,
#option-3:checked:checked ~ .option-3 span,
#option-4:checked:checked ~ .option-4 span,
#option-2:checked:checked ~ .option-2 span{
  color: #fff;
}

.visitorpass{
    
}

.visitorpass .upload-image-container{
    float:left;
    height:auto;
    min-height:160px;
    width:100%;
    min-width:100px;
    border:solid 2px #999;   
    border-radius:2px 2px 0px 0px;
    padding:5px;
}

.upload-image-container:hover{
    background-color:#999;
    border:solid 2px #0069d9;
}

.visitorpass .title-icon-right{
    float:right;
    width:40px;
    height:40px;
    margin:0px -10px 0 0;
    color:grey; 
 
}

.visitorpass .title-icon-right:hover{
   color:#0069d9;  
   cursor:pointer;
}

.visitorpass .card-title{
    margin:10px 0px 0 10px;
    border-bottom:solid 1px #efefef;
    width:98%;
    font-weight:600;
}

.visitorpass .upload-image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.visitorpass .upload-image-middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.upload-image-container:hover .upload-image {
  opacity: 0.3;
}

.upload-image-container:hover .upload-image-middle  {
  opacity: 1;
}

.upload-image-container .text {
  background-color: #04AA6D;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

.upload-image-middle:hover{
    cursor:pointer;
} 

.visitorpass h6{
    font-size:14px;
    font-weight:550;
    color:#333;
    
    
}

.visitorpass .info{
    font-size:10px;
    color:#333;
}


/* Image Upload Drag and Drop Area . */
.drag-area{
  border: 2px dashed #999;
  height: 300px;
  width: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.drag-area.active{
  border: 2px solid #fff;
}
.drag-area .icon{
  font-size: 100px;
  color: #999;
}
.drag-area header{
  font-size: 30px;
  font-weight: 500;
  color: #333;
}
.drag-area span{
  font-size: 25px;
  font-weight: 500;
  color: #fff;
  margin: 10px 0 15px 0;
}
.drag-area button{
  padding: 10px 25px;
  font-size: 20px;
  font-weight: 500;
  border: none;
  outline: none;
  background: #fff;
  color: #5256ad;
  border-radius: 5px;
  cursor: pointer;
}
#modal-image-div{
    align-items: center;
    justify-content: center;
    text-align: center;
}
#modal-image-div img{
/*  height: 100%;
  width: 100%;*/
  object-fit: cover;
  border-radius: 5px;
  max-width: 300px;
  
}

#modal-notification{
    /*display:none;*/
    
}

.upload-image-container img{
    max-height: 161px;
    max-width: 100%;
}

/* End. Image Upload Drag and Drop Area . */
/* Phone number inout*/

.form_s {
	position: relative;
}

.form_s i,
.form_s img {
	position: absolute;
	top: 20px;
	right: 20px;
	color: #aaa;
}

.form_s .two_input_together {
	display: flex;
}

.form_s input,
.form_s select {
	width: 100%;
	padding: 18px 20px;
	border: none;
	box-shadow: none;
	outline: none;	
	font-size: 16px;
	/*margin: 10px 0px;*/
	padding-right: 45px;
	background: #FDF2F6;
	border-radius: 10px;
}

.form_s .two_input_together input {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}


.form_s .two_input_together select {
  padding-right: 10px;  
  padding-left: 10px;
}

.form_s .two_input_together select {
	background: #FDF2F6;
	padding-right: 15px;
	max-width: 95px;
	margin-right: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.form_s .two_input_together input,.form_s .two_input_together select{
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
}