/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.header{
	height:90px;
	background-image: linear-gradient(to right, #FDD42A, #FA970C);
} 
/*
.select_lang:hover, .select_lang:focus {
	color: black;
	background-color: white;
	border: 1px black;
	border-radius: 20px;
	-webkit-box-shadow: 6px 8px 9px 2px #FFC273; 
	box-shadow: 6px 8px 9px 2px #FFC273;
	font-size: 20px;
	font-weight: 600;
}*/
.select_lang:focus { 
			-webkit-box-shadow: 6px 8px 9px 2px #FFC273!important; box-shadow: 6px 8px 9px 2px #FFC273!important; border: 1px solid #E5E5E5!important; }
			
.lang_selected{
	color: black;
	background-color: white;
	border: 1px black;
	border-radius: 20px;
	-webkit-box-shadow: 6px 8px 9px 2px #FFC273; 
	box-shadow: 6px 8px 9px 2px #FFC273;
	font-size: 20px;
	font-weight: 600;
}

#txtIdPassport{
	height: 80px !important;
	color: black;
	background-color: white;
	border: 1px black;
	border-radius: 20px;
	-webkit-box-shadow: 6px 8px 9px 2px #FFC273; 
	box-shadow: 6px 8px 9px 2px #FFC273;
	font-size: 40px;
	font-weight: 600;
	width: 500px;
}

.custom_feather_size{
	height: 3rem;
    width: 3rem;
}

.btn_id_submit{
	font-size:36px !important;
	border: 1px black;
	border-radius: 20px;
	-webkit-box-shadow: 6px 8px 9px 2px #A3AAAC; 
	box-shadow: 6px 8px 9px 2px #A3AAAC;
	font-weight: 600;
}

.btn_sms_otp{
	margin-left:30px;
	font-size:36px !important;
	border: 1px black;
	border-radius: 20px;
	-webkit-box-shadow: 6px 8px 9px 2px #A3AAAC; 
	box-shadow: 6px 8px 9px 2px #A3AAAC;
	font-weight: 600;
}

#add_receiver{
	color: white;
	background-image: linear-gradient(to right, #FF702D, #FD3200);
	border: 1px black;
	border-radius: 50px;
	-webkit-box-shadow: 6px 8px 9px 2px #A3AAAC; 
	box-shadow: 6px 8px 9px 2px #A3AAAC;
	font-size: 20px;
	font-weight: 600;
}

.orange_rectangle_box{
	border-radius: 25px;
	border: 2px solid #F9A42A;
	margin: 50px;
	width: 40%;
	height: 200px;
}

.purpose-option-check:checked+.purpose-option {
	background-color: #F9A42A;
	color: #000000;
	border-color: #F9A42A;
	-webkit-box-shadow: 6px 8px 9px 2px #FFC273; 
	box-shadow: 6px 8px 9px 2px #FFC273;
}

.purpose-option-check+.purpose-option {
	color: #000000;
	border-color: #F9A42A;
	background-color: transparent;
	height: 200px;
	font-size: 26px;
}

.blue_rectangle_box{
	border-radius: 25px;
	border: 2px solid #0070C0;
	margin: 50px;
	width: 40%;
	height: 200px;
}

.income-option-check:checked+.income-option {
	background-color: #00B0F0;
	color: #000000;
	border-color: #0070C0;
	-webkit-box-shadow: 6px 8px 9px 2px #b4e3f4; 
	box-shadow: 6px 8px 9px 2px #b4e3f4;
}

.income-option-check+.income-option {
	color: #000000;
	border-color: #0070C0;
	background-color: transparent;
	height: 200px;
	font-size: 26px;
}

.green_rectangle_box{
	border-radius: 25px;
	border: 2px solid #008F00;
	margin: 50px;
	width: 40%;
	height: 200px;
}

.occupation-option-check:checked+.occupation-option {
	background-color: #92D050;
	color: #000000;
	border-color: #008F00;
	-webkit-box-shadow: 6px 8px 9px 2px #9CE0BB; 
	box-shadow: 6px 8px 9px 2px #9CE0BB;
}

.occupation-option-check+.occupation-option {
	color: #000000;
	border-color: #008F00;
	background-color: transparent;
	height: 200px;
	font-size: 26px;
}

.form-select[multiple], .form-select[size]:not([size="1"]){
	height: 600px;
}

option{
	min-height: 3em;
    font-size: 40px;
}
.btn-back, .btn-next, .btn-next-style, .btn-back-style {
	background-color: #000;
	width:80px;
	height:80px;
	border-radius: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.51);
	-moz-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.51);
	box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.51);
	margin-left: 20px;
}
.btn-home, .btn-logout, .btn-video-start, .btn-menu {
	background-color: #000;
	height: 80px;
	width: auto;
	border-radius: 20px;
	padding-right: 15px;
	padding-left: 15px;
	margin-left: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-variant: bolder;
	font-weight: bold;
	font-size: 35px;
	text-transform: uppercase;
	-webkit-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.51);
	-moz-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.51);
	box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.51);
}

.otp-step-gif {
    width: 200px;
    height: 200px;
}
.otp-number-step {
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #df643a;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    position: absolute;
    left: -25px;
    top: -10px;
}
.otp-card-body{
	flex: 1 1 auto;
    padding: 0.5rem;
    max-width: 200px;
}
.otp-card-body h4{
	padding-left: 20px;
	font-size: 14px;
    color: #000;
    font-weight: 700;
    width:100%;
}


/* For title below the header. */
.sub-header-title { /* Default, can be overridden in view page. */
	font-weight: 800;
	font-size: 48px; 
	color: black; 
}

/* For transaction select button. */
.trans-sel-frame {
	/*position: relative;*/
	text-align: center;
	/*min-height: 280px;*/ /* Default, can be overridden in view page. */
	height: 100%;
	width: auto;
	padding: 30px; /* Default, can be overridden in view page. */
}
.trans-sel-frame .trans-sel-content {
	/*position: absolute; 
	transform: translateX(-50%);
	top: 30px; 
	left: 50%; */
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.trans-sel-frame .trans-sel-content .trans-sel-label {
	font-size: 30px;
	font-weight: bold;
	color: black;
	text-transform: uppercase;
}
.trans-sel-frame .trans-sel-content .trans-sel-icon img {
	height: 200px; /* Default, can be overridden in view page. */
	margin-bottom: 10px;
}

/* For button template styling. */
.btn-templt-style {
	-webkit-box-shadow: 6px 8px 9px 2px #A3AAAC; 
	box-shadow: 6px 8px 9px 2px #A3AAAC;
	border-radius: 20px;
	font-weight: bold;
	font-size: 26px;
	color: #FFF;
}
.btn-templt-style:focus {
	color: #FFF;
}

/* For panel template styling. */
.panel-templt-style {
	-webkit-box-shadow: 6px 8px 9px 2px #FFC273; 
	box-shadow: 6px 8px 9px 2px #FFC273;
	background-color: white;
	border: 1px solid #E5E5E5;
	border-radius: 20px;
}

.panel-templt-style-alt {
	-webkit-box-shadow: 6px 8px 9px 2px #FFC273; 
	box-shadow: 6px 8px 9px 2px #FFC273;
	background-color: white;
	border: 1px solid #E5E5E5;
}

@keyframes shadowPulse {
    0% {
        -webkit-box-shadow: 6px 8px 9px 2px #FFC273; 
		box-shadow: 6px 8px 9px 2px #FFC273;
    }
    50% {
    	-webkit-box-shadow: 6px 8px 9px 2px #FFF; 
		box-shadow: 6px 8px 9px 2px #FFF;
    }
    100% {
        -webkit-box-shadow: 6px 8px 9px 2px #FFC273; 
		box-shadow: 6px 8px 9px 2px #FFC273;
    }
}
.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

.footer{
	background-image: linear-gradient(to right, #FDD42A, #FA970C)!important;
}
.kiosk-error-text{
	color:#FF000D;
	font-weight: 700;
}
#search_receiver{
	width:230px;
	height:60px;
	font-size:22px;
	font-weight:600;
	border-radius: 5px;
}
#search_receiver:focus , #search_receiver_country:focus{
	-webkit-box-shadow: 6px 8px 9px 2px #FFC273; 
	box-shadow: 6px 8px 9px 2px #FFC273;
}
#search_receiver_input , #search_receiver_country{
	margin-left:20px;
	font-size:22px;
	height:60px;
	border-radius: 10px;
	width:500px!important;
}
.topupboxes{
	border-radius: 40px;
	border:1px solid #DFDFDF;
	-webkit-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.51)!important;
	-moz-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.51)!important;
	box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.51)!important;
}
.btn-success{
	background-color: #028F00!important;
	border-color: #028F00!important;
	display: flex;
	flex-direction: row;
	min-width:250px!important;
	justify-content: center;
	align-items: center;
}

.rec-disabled { background-color: #DCDCDC; }

.is-disabled-icon-frame { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.is-disabled-icon-frame img { height:50px; width:50px; }