@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");



/* 
	=================================
	=================================
	DEFAULT CSS
	=================================
	=================================
	font-family: 'Open Sans', sans-serif;
	font-family: 'Poppins', 'Open Sans', sans-serif;
*/
* {
	box-sizing:border-box;
	position:relative;
	text-rendering:optimizeLegibility;
}
body{
	margin:0px auto; padding:0px; margin-top:72px;
	font-family: "Poppins", "Open Sans", sans-serif;
	font-size:15px; letter-spacing:0.3px; line-height:24px;
	color:#212121;
	overflow:hidden; overflow-y:scroll;
	background:#ffffff;
	direction:ltr;
}
header,
footer,
menu,
nav,
article,
section,
aside{display:block; margin:0px; padding:0px;}
h1, h2, h3, h4, h5, h6{
	margin:0px; padding:0px;
	font-family: "Poppins", "Open Sans", sans-serif;
}
form{margin:0px; padding:0px;}
p, ul, li, a{margin:0px; padding:0px; list-style-type:none;}
a, span, label, dt, dl, i{display:inline-block;}
a{
	outline:none; border:none;
	text-decoration:none;
	color:#1068B2;
}
img{ outline:none; border:none; max-width:100%;}
input[type="submit"],
input[type="button"]{
	-webkit-appearance:none;
	font-family:"Poppins", "Open Sans", sans-serif;
	-webkit-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
	outline:none;
	cursor:pointer;
}
input, select, textarea, button{
	outline:none;
	font-family: "Poppins", "Open Sans", sans-serif;
	margin:0px;
	border:none;
	font-size:15px;
	background:#ffffff;
	filter:none; /* Rmeove yellow color from @ the time of autocomplete */ 
}
input[type="text"], input[type="password"], input[type="email"]
{
	width:100%;
	border:1px solid #D5D3D3;
	border-radius:6px;
	background-color:#e7e7e7;
}
select{width:100%}
textarea{resize:none; width:100%;}
.input{	
	padding:10px 10px;
	transition:all 0.3s ease-out;	
}
.input:focus{border:1px solid #F2E7E3;}
.inputLoaderWrapper{display:inline-block; z-index:2;}
.inputLoaderWrapper .input{width:100%;}
.inputLoaderWrapper .inputLoader{right:-35px; top:10px;}
input[type="number"]{-moz-appearance:textfield;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button,
input[type="number"]{
	-moz-appearance:none;
	appearance:none;
	-webkit-appearance:none;
}
.input:disabled{background-color: #f7f7f7 !important;}
.clr{display:none; clear:both; margin-top:3px;}

/* For placeholder text color */
::placeholder{color:#848484!important; font-weight:400; opacity:1; font-size:14px;}
:-ms-input-placeholder{color:#848484!important; font-weight:500; font-size:14px; opacity:1;}
::-ms-input-placeholder{color:#848484!important; font-weight:500; font-size:14px; opacity:1;}
::-webkit-input-placeholder{color:#848484!important; font-weight:500; font-size:14px; opacity:1;}
:-moz-placeholder{color:#848484!important; font-weight:500; font-size:14px; opacity:1;}
::-moz-placeholder{color:#848484!important; font-weight:500; font-size:14px; opacity:1;}

/* For Layouts */
main{min-height:100vh; display:grid; grid-template-columns:250px calc(100% - 250px);}
.pageContent{padding:30px 25px 0px;}
.contentWrapper{padding-bottom:100px;}

.wrapper{
    width:100%;
    max-width:1170px;
    margin:0px auto;
}

/* card */
.card{
	background:#ffffff;
	box-shadow:0px 1px 8px rgba(0, 0, 0, 0.32);
	border-radius:12px;
	border:1px solid #DFE3EB;
}

/* ============= For Menu */
.activeView {
	-webkit-transform:translate3d(0, 0, 0) !important;
	-moz-transform:translate3d(0, 0, 0) !important;
	transform:translate3d(0, 0, 0) !important;
}
.menuOverlay{
	background:rgba(0, 0, 0, 0.8);
	position:fixed; top:0px; left:0px;
	z-index:20000;
	width:105%; height:105%;
}

/* ============= */
.submitBtn {
  position:relative;
  display:inline-block;
  margin-left: calc(220px - 0px);
  margin:0px auto;
}
input#cancle,input#cancle1{
    font-weight:600; font-size:16px;
    color:#FF7A59;
	background:#fff !important;
	box-shadow:2px 4px 6px #A12003;
    border:1px solid #FF7A59;
	padding:11px 20px; margin-left:10px;
}
.submitBtn .btn{
    border-radius:6px;
    background-color:#1068B2;
    box-shadow:2px 4px 6px #1068B2;
    color:#fff;
    width:100%;
    padding:10px 20px;
    font-size:16px; font-weight:600;
    text-transform:capitalize;
}
.submitBtn .btn.disable{background-color: rgba(0, 0, 0, 0.3);}
.submitBtn .btnLoader{
	background-color:#1068B2;	
	position:absolute; top:0px; left:0px;
	z-index:1;
	width:100%; height:100%;
	text-align:center;
	border-radius:6px; 
	cursor:wait;
}
.submitBtn .btnLoader span.spinLoader{
	width:25px; height:25px;
	border-width:4px;
	position:relative; top:9px; left:0px;
	border-color:#872007;
	border-top-color:#fff;
}

/*
	=======================
	anchore button
	=======================
*/
.disabled a{
	border: 1px solid #d8d8d8 !important;
	background-color: rgb( 216, 216, 216 )!important;
	box-shadow: 0px 5px 6px 0px rgb( 215, 213, 213 );
	color: #fff;
}
.button a{
	background-color:#1068B2;
	border:2px solid #1068B2;
	box-shadow:0px 3px 1px 0px rgba(0, 0, 0, 0.1);
	border-radius:5px;
	padding:8px 20px;
	color:#fff;
	font-weight:500;
}
.button a:hover{transform:translateY(-5px);}
.button .btnLoader{
	position:absolute; top:0px; left:0px;
	z-index:1;
	width:100%; height:100%;
	border-radius:5px; border:2px solid #1068B2;
	background-color: #1068B2;	
	text-align:center;
}
.button .btnLoader span{top:9px;}

/* blue */
.button.border a{background:#fff !important; color:#1068B2;}

/* Green */
.button.green a, .button.green .btnLoader{
	background-color:#0091AE;
	border-color:#0091AE;
}
.button.green.border a{color: #51a266;}

/* red */
.button.red a,
.button.red .btnLoader{background-color:#de5e5e; border-color: #de5e5e;}
.button.red.border a{color:#de5e5e;}

/* yellow */
.button.yellow a,
.button.yellow .btnLoader{background-color:#f0c349; border-color:#f0c349;}
.button.yellow.border a{color:#f0c349;}


/*
	=======================
	ringLoader
	=======================
*/
.spinLoader .small {background:url("../../images/cross-icon.png");}
.spinLoader{
	border:16px solid #1068B2; border-top:16px solid #ffffff;
	border-radius:50%;	
	width:120px; height:120px;
	-webkit-animation: spin 0.5s linear infinite;
	animation: spin 0.5s linear infinite;
}
@-webkit-keyframes spin{
  0%{
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.spinLoader.small{width:22px; height:22px; border-width:4px;}
.spinLoader.medium{
	border:8px solid #1068B2;
	border-top:8px solid #fff;
	width:80px; height:80px;
}
	
/* ============= Custom CheckBox */
.checkbox{
	display:block;
	position:relative;
	padding-left:14px; margin-bottom:0px;
	cursor:pointer;
	font-size:15px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.checkbox input{position:absolute; opacity:0; cursor:pointer;}
.checkbox .checkmark{
	position:absolute; top:3px; left:-13px; /*left:0;*/
	height:17px; width:17px;
	background-color:#eee;
	border-radius:3px;
}
.checkmark:after{content:""; position:absolute; display:none;}
.checkbox:hover input ~ .checkmark{background-color:#ccc;}
.checkbox input:checked ~ .checkmark{background-color:#1068B2;}
.checkbox input:checked ~ .checkmark:after{display:block;}
.checkbox .checkmark:after{
	left:5px; top:1px;
	width:4px; height:9px;
	border:solid white; border-width:0 3px 3px 0;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}

/* ============= Custom Radio */
.radioBtn{
	display:block;
	position:relative;
	margin-bottom:0px; padding-left: 25px;
	cursor:pointer;
	font-size:15px; line-height:22px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.radioBtn input{position:absolute; opacity:0; cursor:pointer;}
.radioBtn .checkmark{
	position:absolute; top:4px; left:0;
	height:17px; width:17px;
	background-color:#eee;
	border-radius:50%;
}
.radioBtn:hover input ~ .checkmark{background-color:#ccc;}
.radioBtn input:checked ~ .checkmark{background-color:#1068B2;}
.radioBtn:after{content: ""; position:absolute; display:none;}
.radioBtn input:checked ~ .checkmark:after{display:block;}
.radioBtn .checkmark:after{
	top:4px; left:4px;
	width:9px; height:9px;
	border-radius:50%;
	background:white;
}
.verticalField{padding-top:10px;}
.horizontalField{
	display:flex; justify-content:flex-start; align-items:center;
	height:40px; padding-top:10px;
}
.horizontalField span{margin-right:10px;}
.horizontalField div span{margin-left:10px;}
.horizontalField label{float:left; margin-right:20px;}


/* =============== */
.listStatus{
  border-radius:4px;
  padding:2px 10px;
  color:#fff;
  font-weight:500; font-size:12px;
  min-width:75px;
  text-align:center;
}
.listStatus.assigned{background:#5e9be1;}
.listStatus.active{background:#3cabc2;}
.listStatus.inactive{background:#c8c8c8;}
.listStatus.pending{background:#c7c7c7;}
.listStatus.draft{background:#2d3e50;}
.listStatus.submitted{background:#6ac9a4;}
.listStatus.denied{background:#fd7777;}
.listStatus.collected{background:#af68d0;}
.listStatus.settled_to_client{background:#6ac9a4;}
.listStatus.partial{background-color:#f1982a;}
.listStatus.deposited{background-color:#03c1c8;}
.listStatus.deposited_to_bank{background-color:#03c1c8;}

/*
	==========
	No record
	==========
*/
.noRecord{text-align:center; padding:50px 0px 100px 0px;}
.noRecord img{max-width:200px;}
.noRecord label{display:block; font-weight:500; font-size:22px;}
.noRecord p{font-size:16px; color:rgba(0, 0, 0, 0.5); margin-bottom:25px;}
.noRecord a{
  border:1px solid rgba(0, 0, 0, 0.1); border-bottom:2px solid rgba(0, 0, 0, 0.1); border-radius:4px;
  padding:10px 15px;  
}

/* 
	=========
	FROM
	=========
*/
.card.form{margin:15px 0px; padding:20px 25px 10px 25px;}
.form li{display:block; width:100%;}
.form li .lbl{margin-top:10px;}
.form li .lbl span{
	font-size:14px; line-height:24px;
	color:red;
	position:absolute; top:0px; right:12px;
}
.form li .value .input{width:100%;}
.inputLoader{position:absolute; top:0px; right:0px;}
.formButtonPanel{text-align:left; margin:40px 0px;}
.formButtonPanel .submitBtn{margin:0px 15px; display:inline-block;}
.formButtonPanel:after{content: " "; display:block; clear:both;}
.formButtonPanel .prev{float:left; width:120px !important;}
.formButtonPanel .prev .btn{
	background-image:url("../../images/button_image.png") !important;
	background-color:rgb(62, 131, 230) !important;
	background-size:35px;
	background-repeat:no-repeat;
	background-position:15px -37px;
	padding:12px 30px 12px 50px;
}
.formButtonPanel .prev.disable .btn{
	background-color:rgba(0, 0, 0, 0.3) !important;
	pointer-events:none !important;
}
.formButtonPanel .next{float:right; width:120px !important;}
.formButtonPanel .next .btn{
	background-image:url("../../images/button_image.png") !important;
	background-color:rgb(62, 131, 230) !important;
	background-size:35px;
	background-repeat:no-repeat;
	background-position:100% 14px;
	padding:12px 50px 12px 30px;
}
.formButtonPanel .next.disable .btn{
	background-color:rgba(0, 0, 0, 0.3) !important;
	pointer-events:none !important;
}
.formButtonPanel .submit{float:right; width:135px !important;}
.formButtonPanel .submit .btn{
	background-image:url("../../images/button_image.png") !important;
	background-color:rgb(62, 131, 230) !important;
	background-size:35px;
	background-repeat:no-repeat;
	background-position:100% 14px;
	padding:12px 50px 12px 30px;
}
.formButtonPanel .submit.disable .btn{
	background-color:rgba(0, 0, 0, 0.3) !important;
	pointer-events:none !important;
}
.formButtonPanel .save{width:120px !important;}
.formButtonPanel .save .btnLoader{background:#3cbe8c;}
.formButtonPanel .save .btn{
	background-image:url("../../images/button_image.png") !important;
	background-color:#3cbe8c !important;
	background-size:30px;
	background-repeat:no-repeat;
	background-position:15px -78px;
	padding:12px 30px 12px 55px;
	box-shadow:0px 7px 7px 0px rgba(52, 165, 121, 0.26);
}
.formButtonPanel .save.disable .btn{
	background-color:rgba(0, 0, 0, 0.3) !important;
	pointer-events:none !important;
}
.validation{height:18px; line-height:20px; font-size:12px; color:red; clear:both;}