@charset "UTF-8";

*{
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html{font-size: 62.5%; scroll-behavior: smooth;}


body{
	width: 100vw;
	height: 100vh;
	display: block;
    font-family: 'Roboto', sans-serif;
	line-height: 1.42857143;
	color: #333333;
	background-color: #fff8f1;
}
img{width: 100%;height: 100%;}
label{ font-size: 1.7rem; }
p{font-size: 1.6rem; text-align: justify; word-break: break-word;}
a{font-size: 1.6rem;}

.td-n{text-decoration: none;}

.ff-ts{font-family: "Times New Roman", Times, serif;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-size: 2rem;
  	line-height: 1.8;
  	font-family: "Times New Roman", Times, serif;
}

a,button,input,select{
	border:  0px;
  	outline: 0px;
 	text-overflow: ellipsis;
  	white-space: nowrap;
}

hr{
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top-color: currentcolor;
    border-top-style: none;
    border-top-width: 0px;
}

.nav-ico{font-size: 2.4rem; padding-right: 2.5rem;}

.content-body{padding: 1rem;height: 100%;}
.content-wrap{border-radius: 1rem;padding: 1rem;}
.c-wrap-w1-2{width: 49%;}
.c-wrap-w1-3{width: 32.5%;}


.p-pra{
	line-height: 3rem;
	margin-bottom: 2rem;
	text-align: justify;
}
.wmx{width: max-content;}

.lh-n{line-height: normal;}

.ta-c{text-align: center;}
.ta-l{text-align: left;}
.ta-r{text-align: right;}





.w-a{width: auto}
.w-12{width: 12rem;}
.w-50{width: 50%;}
.w-100{width: 100%;}

.h-a{height: auto}
.h-100{height: 100%}

.p-1{padding: 1rem;}
.p-2{padding: 2rem;}

.pt-05{padding-top: .5rem;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}

.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}

.pl-05{padding-left: .5rem;}
.pl-1{padding-left: 1rem;}
.pl-2{padding-left: 2rem;}


.pr-1{padding-right: 1rem;}
.pr-2{padding-right: 2rem;}

.fs-1_4{font-size: 1.4rem}
.fs-1_5{font-size: 1.5rem}
.fs-1_6{font-size: 1.6rem}
.fs-1_8{font-size: 1.8rem}
.fs-2{font-size: 2rem}


#scroll-infinite {
	scroll-behavior: smooth;
	overflow-y: scroll;
}
.usr-slct{
	/* select text highlight */
	-webkit-touch-callout: text; /* iOS Safari */
  -webkit-user-select: text; /* Safari */
  -khtml-user-select: text; /* Konqueror HTML */
  -moz-user-select: text; /* Old versions of Firefox */
  -ms-user-select: text; /* Internet Explorer/Edge */
  user-select: text; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.usr-slct-none{
	-webkit-tap-highlight-color: transparent;
	/* select text highlight */
	-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.pos-a{position: absolute;}
.pos-r{position: relative;}

.dis-sho{display: inline-block}
.dis-hid{display: none !important}

.cp-a{cursor: pointer}
.cp-n{cursor: none; pointer-events:none}

.ta-c{text-align: center;}
.ta-r{text-align: right;}
.ta-l{text-align: left;}

.fb{font-weight: bold}


/* //-- messages */
#msg{
	position: sticky;
	display: block;
	z-index: 85;
	top: 6rem;
}
#msg ul{padding-left: 0rem;}

.msg_succ{
	position: relative;
	text-align: center;
	border-radius: .4rem;
	padding: 8px 8px;
	margin: 0rem 1rem 1rem;
	border-radius: .5rem;	
}

.messages .success{
	text-align: center;
	border-radius: .4rem;
	padding: 15px 8px;
}
.messages .error{
	text-align: center;
	border-radius: 3px;
	padding: 15px 8px;
}
/* messages --// */


.object-container{
	position: relative;
	padding: 1rem;
	margin: 0rem 1rem 1rem;
	border-radius: 1rem;
}


.content_center{
	position: relative;
	width: auto;
	height: auto;
	padding: 2rem;
	padding-top: 1rem;
	border-radius: .4rem;
	top: 50%; 
  	left: 50%; 
  	display: grid;
	place-items: center;
  	text-align: center;
  	transform: translate(-50%, -50%);
}

.dis-center{
	display: grid;
	place-items: center;
}
.dis-flx-row-space-e{
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-evenly;
}
.dis-flx-row{
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
.flx-sb{justify-content: space-between}



/* ===================== Input Field ===================== */
	
	
	.input-wrap-frm{
		border:  0px;
  		outline: 0px;
		width: 100%;
		font-size: 1.8rem;
		border-radius: .8rem;
		box-sizing: border-box;
		transition: 1s;
	}
	
	.input-wrap-ph-frm{padding-left: 9rem !important}
	.input-wrap-frm{padding: 1rem}
	.input-wrap-left{padding-left: 4.4rem}

	.fa-field-ico{
		position: absolute;
		top: .44rem;
		left: 1rem;
		font-size: 2.4rem;
		z-index: 1;
	}
	#id_full_name{text-transform: capitalize}

	#id_country{
		position: absolute;
		width: 7rem;
		height: 3.88rem;
		left: .8rem;
		top: .2rem;
		font-size: 1.8rem;
		outline: none;
		color: #484848;
		display: grid;
		place-items: center;
	}
	.select{
	    width: 100%;
	    cursor: pointer;
	    background-color: #ffffff;
	    appearance: none;
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100" height="50"><polygon points="0,0 100,0 50,50" style="fill:%23666666;" /></svg>');
	    background-position: right 1rem top 50%;
	    background-repeat: no-repeat;
	    background-size: 1.2rem;
	    padding-right: 1.8rem;
	    text-transform: capitalize;
	}
	.flag{
	  position: absolute;
		right: 1rem;
		top: .1rem;
		color: #aaa;
		transition: 1s;
		height: 4rem;
		display: grid;
		place-items: center;
	}.flag img{
		width: 4rem;
		height: 3rem;
	}





/* ======================================  */

.pos-a-r{
	position: absolute;
    display: block;
    top: 0;  
    right: 0;
    left: inherit;
}


/* =============================== */
input[type="radio"] {
	/* remove standard background appearance */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* create custom radiobutton appearance */
	display: table-cell;
	width: 20px;
	height: 20px;
	padding: 3px;
	/* background-color only for content */
	background-clip: content-box;
	border-radius: 50%;

	margin-top: 0.4rem;
}

.primary-btn{
	border-radius: 1rem;
	display: inline-block;
	cursor: pointer;
	padding: 9px 23px;
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
}

.secondary-btn{
	border-radius: 1rem;
	display: inline-block;
	cursor: pointer;
	padding: 9px 23px;
	font-family: Arial;
	font-size: 15px;
}


/* ===================== Input Field =====================*/


/* //-- popup window object delete */
.obj-del{font-size: 7rem;}
#popText{padding-top: 1rem;font-size: 2rem;}

.popdel,
.cancle-order{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 10;
	padding: .6rem;
}
.popdel_content{
	position: relative;
	width: 38rem;
	height: auto;
	padding: 2rem;
	padding-top: 1rem;
	border-radius: .4rem;
	top: 50%; 
  	left: 50%; 
  	display: grid;
	place-items: center;
  	text-align: center;
  	transform: translate(-50%, -50%);
 
}

/*=================================================*/

.del-circle-load{
	width: 9rem;
	height: 9rem;
	top: 10%;
	border-radius: 50%;
	border: .3rem solid rgba(0, 0, 0, 0.01);
 	border-left-color: rgba(0, 0, 0, 0.01);
	border-left-color: rgba(0, 0, 0, 0.01);
	border-left-color: #16a2f9;
	animation: loader-spin_ful_page 1.2s infinite linear;
	position: absolute;
	display: inline-block;
	vertical-align: top;
}

#circle-loader-container{
	text-align: center;
	width: 100%;
	position: relative;
	margin-top: 2rem;
	z-index: 12;
}
.circle-loader {
  	border: .3rem solid rgba(0, 0, 0, 0.01);
  	border-left-color: #16a2f9;
  	animation: loader-spin_ac 1.2s infinite linear;
  	position: relative;
  	display: inline-block;
  	vertical-align: top;
  	border-radius: 50%;
  	width: 7.8rem;
  	height: 7.8rem;
	}@keyframes loader-spin_ac {
	  	0% {transform: rotate(0deg);}
	  	100% {transform: rotate(360deg);
	}
}
#process-value{
    width: 100%;
    top: 34%;
    color: #16a2f9;
    position: absolute;
    font-size: 2rem;
}


/*.usr-img-view-container{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	background: rgb(0, 0, 0, .8);
	z-index: 10;
	padding: .6rem;

}*/

/* popup window object delete --// */


	/* Media Query for Mobile Devices */
@media (max-width: 390px) {
/*    .bottom-sheet-container{background-color: yellow}*/
    html{font-size: 52%}
/*    #qr-cont{display: none;}*/
}

/* Media Query for Mobile Devices */
@media (min-width: 391px) and (max-width: 440px) {
/*   .bottom-sheet-container{background-color: red}*/
    html{font-size: 62%}
/*    #qr-cont{display: none;}*/
}

	/* Media Query for Mobile Devices */
@media (min-width: 441px) and (max-width: 490px) {
/*   .bottom-sheet-container{background-color: green}*/
    html{font-size: 72%}
/*    #qr-cont{display: none;}*/
}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 491px) and (max-width: 767px) {
/*   .bottom-sheet-container{background-color: blue}*/

	html{font-size: 60%}

}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
/*   .bottom-sheet-container{background-color: blue}*/
	html{font-size: 60%}
}

/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {
/*    .bottom-sheet-container{background-color: blue}*/
	html{font-size: 60%}
}

/* Media Query for Large screens */
@media (min-width: 1281px) {
/*    .bottom-sheet-container{background-color: blue}*/
	html{font-size: 60%}
}


