@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@800&display=swap');

@font-face{
	font-family:MyFont;
	src: url(TH-K2D-July8.ttf);
}

@font-face{
	font-family:MyFontB;
	src: url(TH-K2D-July8-Bold.ttf);
}

@font-face{
	font-family:Kodchasal;
	src: url(TH-Kodchasal.ttf);
}

@font-face{
	font-family:KodchasalB;
	src: url(TH-Kodchasal-Bold.ttf);
}

*{
	margin: 0;
	padding:0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

body
{
	display: flex;
	font-family: Prompt;
	font-size: 11pt;
	padding: 10px;
	/* background-color:#dddddd; */
	background: linear-gradient(135deg, #71b7e6, #9b59b6);
	justify-content: center;
	align-items: center;
}

.container{
	max-width: 1000px;
	width: 100%;
	background-color: #fff;
	padding: 25px 30px;
	border-radius: 5px;
}

.container .title{
	font-family: Prompt;
	font-size:30pt;
	font-weight: 500;
	position: relative;
}

.container .title::before{
	content:'';
	position: absolute;
	left:0;
	bottom:0;
	height: 3px;
	width: 640px;
	background: linear-gradient(135deg, #73a9ff, #ffadfc)
}

.iLogo{
	padding: 1px 10px;
	background-color: #4f80c9;
	color: #ba0624;
	font-family: Arial;
	font-size:14pt;
	font-weight:800;
}

.container  form .user-details{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 30px 0 12px 0;
}

form .user-details .input-box,
form .user-details .radio-box{
	margin-bottom: 5px;
	width: calc(100% / 2 - 20px);
}

form .user-details .input-richbox,
form .user-details .input-field{
	margin-bottom: 5px;
	width: calc(100%);
}

.user-details .input-box .details,
.user-details .input-richbox .details,
.user-details .input-field .details{
	display: block;
	font-weight: 500;
	margin-bottom: 5px;
}

.user-details .input-box .details .mark-star,
.user-details .input-richbox .details .mark-star,
.user-details .input-field .details .mark-star{
	font-weight: 900;
	color: red;
}

.mark-star{
	font-size: 9pt;
	font-weight: 100;
	color: red;
	margin-left: 8px;
}

.mark-blue{
	font-size: 9pt;
	font-weight: 300;
	color: blue;
	margin-left: 8px;
}

.user-details .input-box input,
.user-details .input-richbox input,
.user-details .input-richbox textarea{
	height: 35px;
	width: 100%;
	outline: none;
	border-radius: 5px;
	border: 1px solid #ccc;
	padding-left: 15px;
	font-size: 15px;
	transition: all 0.3s ease;
	margin-bottom: 5px;
}

.user-details .input-richbox textarea{
	resize:none;
	height: 95px;
}

.user-details .custom-select{ /* For Radio Button */
	position: relative;
	width:100%;
	height: 37px;
}

.user-details .custom-select select{ /* For Radio Button */
	/*-webkit-appearance: none;*/
	width:100%;
	height: 37px;
	border-radius: 5px;
	border: 1px solid #ccc;
	padding: 8px 10px;
	color: red;
	outline:none;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.user-details .radio-box .select-iso{
	display: inline-flex;
	width: 60%;
	float:right;
	justify-content: space-between;
	margin: 14px 10px;
}

.user-details .radio-box .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: 5px 5px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}

.user-details .radio-box .option .dot{
  height: 12px;
  width: 12px;
  background: #d9d9d9; 
  border-radius: 50%;
  position: relative;
}

.user-details .radio-box .option .dot::before{
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  background: rgba(76, 175, 80, 0.01);
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}

input[type="radio"]{
  display: none;
}

.user-details .radio-box .option span{
  font-size: 14px;
  color: #808080;
} 


/* Effect for Radio button Group 1 */
#option-11:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-12:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-11:checked:checked ~ .option-1 .dot,
#option-12:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-11:checked:checked ~ .option-1 .dot::before,
#option-12:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-11:checked:checked ~ .option-1 span,
#option-12:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 2 */
#option-21:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-22:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-21:checked:checked ~ .option-1 .dot,
#option-22:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-21:checked:checked ~ .option-1 .dot::before,
#option-22:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-21:checked:checked ~ .option-1 span,
#option-22:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 3 */
#option-31:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-32:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-31:checked:checked ~ .option-1 .dot,
#option-32:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-31:checked:checked ~ .option-1 .dot::before,
#option-32:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-31:checked:checked ~ .option-1 span,
#option-32:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 4 */
#option-41:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-42:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-41:checked:checked ~ .option-1 .dot,
#option-42:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-41:checked:checked ~ .option-1 .dot::before,
#option-42:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-41:checked:checked ~ .option-1 span,
#option-42:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 5 */
#option-51:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-52:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-51:checked:checked ~ .option-1 .dot,
#option-52:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-51:checked:checked ~ .option-1 .dot::before,
#option-52:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-51:checked:checked ~ .option-1 span,
#option-52:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 6 */
#option-61:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-62:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-61:checked:checked ~ .option-1 .dot,
#option-62:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-61:checked:checked ~ .option-1 .dot::before,
#option-62:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-61:checked:checked ~ .option-1 span,
#option-62:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 7 */
#option-71:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-72:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-71:checked:checked ~ .option-1 .dot,
#option-72:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-71:checked:checked ~ .option-1 .dot::before,
#option-72:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-71:checked:checked ~ .option-1 span,
#option-72:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 8 */
#option-81:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-82:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-81:checked:checked ~ .option-1 .dot,
#option-82:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-81:checked:checked ~ .option-1 .dot::before,
#option-82:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-81:checked:checked ~ .option-1 span,
#option-82:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 9 */
#option-91:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-92:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-91:checked:checked ~ .option-1 .dot,
#option-92:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-91:checked:checked ~ .option-1 .dot::before,
#option-92:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-91:checked:checked ~ .option-1 span,
#option-92:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 10 */
#IOpt-11:checked:checked ~ .IOpt-1{
  border-color: #0099d9;
  background: #0099d9;
}

#IOpt-12:checked:checked ~ .IOpt-2{
  border-color: #d9115e;
  background: #d9115e;
}

#IOpt-11:checked:checked ~ .IOpt-1 .dot,
#IOpt-12:checked:checked ~ .IOpt-2 .dot{
  background: #fff;
}

#IOpt-11:checked:checked ~ .IOpt-1 .dot::before,
#IOpt-12:checked:checked ~ .IOpt-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#IOpt-11:checked:checked ~ .IOpt-1 span,
#IOpt-12:checked:checked ~ .IOpt-2 span{
  color: #fff;
}


/* Effect for Radio button Group 11 */
#option-111:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-112:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-111:checked:checked ~ .option-1 .dot,
#option-112:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-111:checked:checked ~ .option-1 .dot::before,
#option-112:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-111:checked:checked ~ .option-1 span,
#option-112:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 12 */
#option-121:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-122:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-121:checked:checked ~ .option-1 .dot,
#option-122:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-121:checked:checked ~ .option-1 .dot::before,
#option-122:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-121:checked:checked ~ .option-1 span,
#option-122:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 13 */
#option-131:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-132:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-131:checked:checked ~ .option-1 .dot,
#option-132:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-131:checked:checked ~ .option-1 .dot::before,
#option-132:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-131:checked:checked ~ .option-1 span,
#option-132:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 14 */
#option-141:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-142:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-141:checked:checked ~ .option-1 .dot,
#option-142:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-141:checked:checked ~ .option-1 .dot::before,
#option-142:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-141:checked:checked ~ .option-1 span,
#option-142:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 15 */
#option-151:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-152:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-151:checked:checked ~ .option-1 .dot,
#option-152:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-151:checked:checked ~ .option-1 .dot::before,
#option-152:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-151:checked:checked ~ .option-1 span,
#option-152:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 16 */
#option-161:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-162:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-161:checked:checked ~ .option-1 .dot,
#option-162:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-161:checked:checked ~ .option-1 .dot::before,
#option-162:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-161:checked:checked ~ .option-1 span,
#option-162:checked:checked ~ .option-2 span{
  color: #fff;
}


/* Effect for Radio button Group 17 */
#option-171:checked:checked ~ .option-1{
  border-color: #0099d9;
  background: #0099d9;
}

#option-172:checked:checked ~ .option-2{
  border-color: #d9115e;
  background: #d9115e;
}

#option-171:checked:checked ~ .option-1 .dot,
#option-172:checked:checked ~ .option-2 .dot{
  background: #fff;
}

#option-171:checked:checked ~ .option-1 .dot::before,
#option-172:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}

#option-171:checked:checked ~ .option-1 span,
#option-172:checked:checked ~ .option-2 span{
  color: #fff;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.user-details .input-box input:focus/*,
.user-details .input-box input:valid */{
	border-bottom-width: 2px;
	border-right-width: 2px;
	border-color: #0b994d;
}

.user-details .input-richbox input:focus/*,
.user-details .input-box input:valid */{
	border-bottom-width: 2px;
	border-right-width: 2px;
	border-color: #0b994d;
}