@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'); 		/* ========= Web Icon ========= */

/*====== Google Font ======*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); 				/*== font-family: 'Open Sans', sans-serif; ==*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');


body{
	font-family:var(--template-default-font-family);
	font-family: 'Poppins', sans-serif;
	font-size:14px;
	margin:0px;
	padding:0px;
	padding:0px;
	color:var(--template-default-font-color);
	background:var(--template-default-body-background);
}

h1{
	font-size:20px;
	font-weight:600;
	margin:20px 0;
	text-align:center;
}
h2{
	font-size:16px;
	font-weight:400;
	margin:0 0 20px 0;
	text-align:center;
}
/* ################################################################################### */
/* ################################################################################### */



/* ################################################################################### */
/* ################################################################################### */
#wkrLogin{
	position:absolute;
	width:100%;
	height:100%;
	cursor:default;
}
.wkrLoginBg,.wkrLoginBg div{
	position:fixed;
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}
.wkrLoginBg div{
	background:rgba(0,0,0,0);
}
.wkrLoginBrand{
	display:none;
	position:absolute;
	width:100%;
	top:0px;
	padding:20px 0 0 50px;
	z-index:1;
}
#wkrLogin .container-fluid{
	position:relative;
	width:100%;
	min-height:100%;
	top:0px;
	right:0px;
	max-width:470px;
	padding:0px;
}
.fluid-height{
	height:100%;
}
.wkrLogin{
	max-width:470px;
	padding:50px 38px 20px 38px;
	margin:0px;
}
.wkrLoginContent{
	position: relative;
	background:var(--template-default-body-box-background);
	padding:40px 30px;
	margin:0px;
	border-radius:15px;
	overflow: auto;
}
.wkrLoginContentBrand{
	display:block;
	text-align:center;
}
.wkrLoginContent img{
	margin-bottom:20px;
}
.wkrLoginContent nav{
	position:relative;
}
.wkrLoginContent label{
	letter-spacing:1px;
}
.wkrLoginContent input{
	font-size:14px;
	background:none;
}
.wkrLoginContent a{
	font-weight:600;
	text-decoration:none;
	letter-spacing:1px;
	color:var(--template-default-font-color);
}
.wkrLoginContent nav p a{
	font-size:11px;
}
.wkrLoginContent nav nav{
	text-align:center;
}
.wkrLoginNavBg{
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.6);
	text-align:center;
	z-index:10;
}
.wkrLoginNavBg i,.wkrLoginNavBg img{
	font-size:22px;
	margin:0 auto;
	color:var(--brand-primary-color);
	z-index:1;
}
.wkrLoginNavBg img{
	width:50px;
}
#wkrResponseMessage{
	display:block;
	height:20px;
	font-size:11px;
	padding-top:2px;
	margin-bottom:-21px;
	color:#F9A825;
	color:#C62828;
	color:#388E3C;
}
#wkrResponseMessage i{
	margin-right:5px;
}
.wkrLoginContentText{
	text-align:center;
	padding:0px;
	margin:10px 0 -15px 0;
}
.wkrLoginContentTextMin{
	font-size:11px;
	text-align:justify;
	margin:25px 0 -20px 0;
	padding:0 5px;
}
/* ################################################################################### */
/* ################################################################################### */



/* ################################################################################### */
/* ################################################################################### */
.row{
	width:100%;
	height:100%;
}
.input-group{
	margin-bottom:10px;
	border-bottom:1px solid var(--template-default-font-color);
}
.input-group input{
	border-radius:0px;
	border:none;
}
.input-group-text{
	width:45px;
	padding:0px;
	text-align:center;
	background:none;
	border-radius:0px;
	border:none;
}
.input-group-text i{
	width:100%;
	text-align:center;
	font-size:11px;
	color:var(--template-default-font-color);
}
.input-group-text{
	border-color:none;
}
.input-group .input-group-text:last-child{
	cursor:pointer;
}
#wkrLogin .wkrInputLoginBorderError{
	border-bottom-color:#FC0905;
}
#wkrLogin input:active,#wkrLogin input:focus{
	outline:none;
}
.btn-primary{
	padding:12px 0;
	letter-spacing:2px;
	border-color:var(--brand-primary-color);
	background:var(--brand-primary-color);
	color:var(--brand-primary-color-in-font-color);
	font-weight:var(--brand-primary-color-in-font-weight);
}
#wkrLogin .btn-primary:hover{
	padding:12px 0;
	letter-spacing:2px;
	border-color:var(--brand-primary-color);
	background:var(--brand-primary-color);
	color:var(--brand-primary-color-in-font-color);
}
#wkrLogin .btn-primary:active,#wkrLogin .btn-primary:focus{
	outline:none;
	color:var(--brand-primary-color-in-font-color);
}
.form-control:focus,.form-select:focus{
	border-color:#000;
	-webkit-box-shadow:none;
	box-shadow:none;
	background:none;
}
#wkrLogin .btn-outline-primary,#wkrLogin .btn-primary,#wkrLogin .btn-outline-secondary,#wkrLogin .btn-secondary,#wkrLogin button{
	-webkit-box-shadow:none;
	box-shadow:none;
	border-color:var(--brand-primary-color);
	background:var(--brand-primary-color);
}
#wkrLogin input{
	color:var(--template-default-font-color);
	background:none;
}
#wkrLogin input::-webkit-input-placeholder{color:var(--template-default-placeholder-color);font-weight:300;}
#wkrLogin input:-moz-placeholder{color:var(--template-default-placeholder-color);font-weight:300;}
#wkrLogin input::-moz-placeholder{color:var(--template-default-placeholder-color);font-weight:300;}
#wkrLogin input:-ms-input-placeholder{color:var(--template-default-placeholder-color);font-weight:300;}
/* ################################################################################### */
/* ################################################################################### */



/* ################################################################################### */
/* ################################################################################### */
::-webkit-scrollbar{
	width:5px;
	height:5px;
}
::-webkit-scrollbar-track{
	background:rgba(0,0,0,0.1); /* color of the tracking area */
	margin-top:0px;
	margin-bottom:0px;
}
::-webkit-scrollbar-thumb{
	background:var(--template-default-body-scrollbar-color);
}
/* ################################################################################### */
/* ################################################################################### */



/* ################################################################################### */
/* ################################################################################### */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--template-default-font-color) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.input-group-token input{
	display:inline !important;
	width:45px !important;
	height:50px !important;
	padding:0px !important;
	font-size:20px !important;
	text-align:center;
	font-weight:600;
	margin:10px auto;
}

#wkrLogin nav .imageColorW{
	filter:contrast(0%) brightness(200%) !important;
	opacity:1 !important;
}
/* ################################################################################### */
/* ################################################################################### */