/* Custom fonts */
@font-face {
	font-family: 'calibri-bold';
	src: url('../Assets/font/calibri-bold.ttf');
}
@font-face {
	font-family: 'calibri-italic';
	src: url('../Assets/font/calibri-italic.ttf');
}
@font-face {
	font-family: 'calibri-regular';
	src: url('../Assets/font/calibri-regular.ttf');
}
@font-face {
	font-family: 'calibri-bold-italic';
	src: url('../Assets/font/calibri-bold-italic.ttf');
}

/* Disable old body styles - let sunan-theme.css handle this */
/*
body {
	background:url("../Assets/bg-mobile.png")no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	font-family: 'calibri-regular' !important;
}
*/

/* Disable old bg-form styles - let sunan-theme.css handle this */
/*
.bg-form{
	background: linear-gradient(135deg, #A3D9F1, #7BC7E8); 
	border-radius: 20px; 
	box-shadow: 0 15px 35px rgba(163, 217, 241, 0.3);
	padding: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	border: 0;
}
*/

.img-thumbnail {
	background-color: transparent !important;
	border: 0 !important;
	margin-bottom: 0px !important;
	width: 100% !important;
	height: auto !important;
}

.bg-transparent {
	background-color: transparent !important;
	border: 0;
}

/* custom text */
.h1, h2, h3, h4, h5, h6 {
	/* font-family: 'calibri-bold' !important; */
	color: #000000 !important;
	text-align: center;
}
.h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
	font-family: 'archivo' !important;
	color: #000000 !important;
	text-align: center;
}

.text{
	text-align: left !important;
}


/* unvisited link */
a:link {
	color:#0154A0;
  }
  
  /* visited link */
  /* a:visited {
	color: green;
  } */
  
  /* mouse over link */
  a:hover {
	color:#072847 !important;
  }
  
  /* selected link */
  a:active {
	color:#eaeaea !important;
  }
  a {
  text-decoration: none !important;
}
/* custom text */


/* custom image  */
	.img-thumbnail {
		background-color: transparent;
		border: 0;
		margin-bottom: 0px;


	}

	.img-thumbnail {
		border: 0;
	}

/* end of custom image */

	/* custom button style */
	.btn {
		background: #997a31;
		border-color: #997a31;
		border-color: #997a31;


	}

	.btn:hover,
	.btn:focus,
	.btn:active,
	.btn.active,
	.open>.dropdown-toggle.btn {
		color: #997a31;
		background-color: #ffffff;
		border-color: #997a31;
	}

	.btn1{

		font-size: 1.2em;
line-height: 1.2em;  
	 
 }
 
		  
  .btn1 {
	 background:#ffffff;
	  /* margin-bottom:15px; */
   border: solid #0154A0 !important;   
   border-width: 2px !important;
	 padding: 10px 35px;
	 text-align: center;
	  color: #0154A0 ;
	 transition: 0.5s;
	 background-size: 200% auto;
	 font-weight: 700;
	 border-radius: 14px;
	 display: block;
   }

   .btn1:hover {
	   
	  background:#0154A0;

	 background-position: right center; /* change the direction of the change here */
	 color: #eaeaea ;
   }
   .btn2{
color:#790007;

		font-size: 1.2em;
line-height: 1.2em;  
	 
 }
.btn2 {
	 background: #ffffff;
	 ;
	  margin-top:15px;
	  margin-bottom:15px;

 border:  #ffffff;   
	 padding: 15px 45px;
	 text-align: center;

	 transition: 0.5s;
	 background-size: 200% auto;
	 color: #1E1C1C ;            
	font-weight: 700;
	 border-radius: 10px;
	 display: block;
   }

   .btn2:hover {
	   
	  background:#EC6B42;

	 background-position: right center; /* change the direction of the change here */
	 color: #fff;
	 text-decoration: none;
   }

   .btn3 {
	 background:#FF0000;
	  margin-top:15px;
	  margin-bottom:15px;

 border: #FF0000;   
	 padding: 15px 45px;
	 text-align: center;
	  color: #FFFFFF;
	 transition: 0.5s;
	 background-size: 200% auto;
	 color: white;            

	 border-radius: 10px;
	 display: block;
   }

   .btn3:hover {
	   
	  background:#8B0000;

	 background-position: right center; /* change the direction of the change here */
	 color: #fff;
	 text-decoration: none;
   }
   		  
  .btnsubmit {
	background:#EC6B40;
margin-top:15px;
	 margin-bottom:15px;
  border: #3700b3;   
	padding: 15px 45px;
	text-align: center;
	 color: #FFFFFF;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	font-weight: 700;
	border-radius: 10px;
	display: block;
  }

  .btnsubmit:hover {
	  
	 background:#ffffff;

	background-position: right center; /* change the direction of the change here */
	color: #1E1C1C ;
  }
  /* end of button custom */

  /* p{
	color:#ffffff;
  } */
	  
  

  .containtr {
	  background: rgba(0,0,0,0);
	  border-radius: 15px;
  }

/** for partition password */
#partition {

letter-spacing: 42px;
border: 0;
background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
background-position: bottom;
background-size: 50px 1px;
background-repeat: repeat-x;
background-position-x: 35px;
width: 100%;

outline:none;
}

#divInner{
left: 0;
position: sticky;
}

#divOuter{
width: 100%; 
overflow: hidden;
}
/**end parrtition password */

/**custom input field */
.form-control{
border-radius: 10px;
height: 55px;
margin: 10px 0;
border: 2px solid lightgrey;
}

.form-group ::placeholder,
.form-group select{

left: 15px;
font-size: 18px;
font-weight: 400;
padding: 0 6px;
color: #a6a6a6;
}

.form-control .input{
position: relative;
height: 100%;
width: 100%;
outline: none;
color: #333;

padding: 0 40px 0 16px;
border: 2px solid lightgrey;
border-radius: 10px;
transition: all 0.3s ease;
}
.form-control i,
.form-control .label{

position: absolute;
top: 50%;
transform: translateY(-50%);
color: #a6a6a6;
transition: all 0.3s ease;

}

/**end ofcustom input field */

/** for password visibility */


.input-box-area{
position: relative;
height: 55px;
margin: 10px 0;
}
.input-box-area input{
position: relative;
height: 100%;
width: 100%;
outline: none;
color: #333;

padding: 0 40px 0 16px;
border: 2px solid lightgrey;
border-radius: 10px;
transition: all 0.3s ease;
}




.input-box{
position: relative;
height: 55px;
margin: 10px 0;
}
.input-box input{
position: relative;
height: 100%;
width: 100%;
outline: none;
color: #333;

padding: 0 40px 0 16px;
border: 2px solid lightgrey;
border-radius: 10px;
transition: all 0.3s ease;
}
/* border color */
.input-box input:focus,
.input-box input:valid{
border-color: #EC6B40;  
}
/* end of border color */
.input-box i,
.input-box label{
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #a6a6a6;
transition: all 0.3s ease;
}
.input-box label{
 border-radius: 10px;
left: 15px;
font-size: 18px;
font-weight: 400;
background: #fff;
padding: 0 6px;
pointer-events: none;
}
/* text color */
.input-box input:focus ~ label,
.input-box input:valid ~ label{
top: 0;
font-size: 14px;
color: #EC6B40;
}
/* end of text color */
.input-box i{
right: 15px;
cursor: pointer;
padding: 8px;
}
.alert{
display: flex;
align-items: center;
margin-top: -13px;
}
.alert .error{
color: #D93025;
font-size: 18px;
display: none;
margin-right: 8px;
}
.text{
font-size: 18px;
font-weight: 400;
color: #a6a6a6;
}
.input-box.button input{
border: none;
font-size: 20px;
color: #fff;
letter-spacing: 1px;
background: #4070F4;
cursor: not-allowed;
}
.input-box.button input.active:hover{
background: #265df2;
cursor: pointer;
}



.error {
border-radius:10px;
padding:15px;
font-weight: 400;
background-color: #FF5630;
color: #FFEBE6;

align-items: center;
text-align: center;
}
.error ul {
margin:5px;
padding:0px;
font-weight: 400;
align-items: center;
text-align: center;
}
.success {
border-radius:10px;
padding:15px;
font-weight: 400;
text-align: center;
align-items: center;

background-color: #00875A;
color: #E3FCEF;

}


  
    
:root {
	--smaller: .40;
  }
  
  * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
  }
  /* general styling */
  
  .container {
	color: #333;
	margin: 0 auto;
	
  }
  h1, h2, h3, h4, h5, h6 {



	/* font-family: 'calibri-regular' !important; */
}
  h1 {
	font-weight: normal;
	letter-spacing: 0rem;
	text-transform: uppercase;
  }
  
  li {
	/* display: inline-block;
	font-size: 2.5em;
	list-style-type: none;
	padding: 10px;
	text-transform: uppercase;
	color:#FFFFFF; */
  }
  
  li span {
	background:rgba(255, 255, 255, 0.45);
			  border-radius: 15px; margin-top:5px; margin-bottom:5px;
	padding:20px;
	display: block;
	font-size: 4.5rem;
  }
  
  
  @media all and (max-width: 768px) {
	/* h1 {
	  font-size: calc(1.5rem * var(--smaller));
	}
	
	li {
	  font-size: calc(1.125rem * var(--smaller));
	}
	
	li span {
	  font-size: calc(3.375rem * var(--smaller));
	} */
  }