.login-page {
	background-image: url("../images/background.jpg"); /* The image used */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}
/* Page Loader ================================= */
.page-loader-wrapper {
	z-index: 99999999;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: #eee;
	overflow: hidden;
	text-align: center; }
.page-loader-wrapper p {
    font-size: 13px;
    margin-top: 10px;
    font-weight: bold;
    color: #444; }
.page-loader-wrapper .loader {
    position: relative;
    top: calc(50% - 30px); }

/* Preloaders ================================== */
.md-preloader .pl-red {
	stroke: #F44336; }

.preloader {
	display: inline-block;
	position: relative;
	width: 50px;
	height: 50px;
	-webkit-animation: container-rotate 1568ms linear infinite;
	-moz-animation: container-rotate 1568ms linear infinite;
	-o-animation: container-rotate 1568ms linear infinite;
	animation: container-rotate 1568ms linear infinite; }
.preloader.pl-size-xl {
    width: 75px;
    height: 75px; }
.preloader.pl-size-l {
    width: 60px;
    height: 60px; }
.preloader.pl-size-md {
    width: 50px;
    height: 50px; }
.preloader.pl-size-sm {
    width: 40px;
    height: 40px; }
.preloader.pl-size-xs {
    width: 25px;
    height: 25px; }

.spinner-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	border-color: #F44336;
	-ms-opacity: 1;
	opacity: 1;
	-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	-moz-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	-o-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.spinner-layer.pl-red {
    border-color: #F44336; }  

.right {
	float: right !important; }

.gap-patch {
	position: absolute;
	top: 0;
	left: 45%;
	width: 10%;
	height: 100%;
	overflow: hidden;
	border-color: inherit; }
.gap-patch.circle {
    width: 1000%;
    left: -450%; }

.circle-clipper {
	display: inline-block;
	position: relative;
	width: 50%;
	height: 100%;
	overflow: hidden;
	border-color: inherit; }
.circle-clipper .circle {
    width: 200%;
    height: 100%;
    border-width: 3px;
    border-style: solid;
    border-color: inherit;
    border-bottom-color: transparent !important;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: none;
    animation: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0; }
.circle-clipper.left .circle {
    left: 0;
    border-right-color: transparent !important;
    -webkit-transform: rotate(129deg);
    -moz-transform: rotate(129deg);
    -ms-transform: rotate(129deg);
    -o-transform: rotate(129deg);
    transform: rotate(129deg);
    -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    -moz-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    -o-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.circle-clipper.right .circle {
    left: -100%;
    border-left-color: transparent !important;
    -webkit-transform: rotate(-129deg);
    -moz-transform: rotate(-129deg);
    -ms-transform: rotate(-129deg);
    -o-transform: rotate(-129deg);
    transform: rotate(-129deg);
    -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    -moz-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    -o-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

@-webkit-keyframes container-rotate {
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg); } }

@keyframes container-rotate {
	to {
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg); } }

@-webkit-keyframes fill-unfill-rotate {
	12.5% {
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg); }
	25% {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg); }
	37.5% {
		-webkit-transform: rotate(405deg);
		transform: rotate(405deg); }
	50% {
		-webkit-transform: rotate(540deg);
		transform: rotate(540deg); }
	62.5% {
		-webkit-transform: rotate(675deg);
		transform: rotate(675deg); }
	75% {
		-webkit-transform: rotate(810deg);
		transform: rotate(810deg); }
	87.5% {
		-webkit-transform: rotate(945deg);
		transform: rotate(945deg); }
	to {
		-webkit-transform: rotate(1080deg);
		transform: rotate(1080deg); } }

@keyframes fill-unfill-rotate {
	12.5% {
		transform: rotate(135deg); }
	25% {
		transform: rotate(270deg); }
	37.5% {
		transform: rotate(405deg); }
	50% {
		transform: rotate(540deg); }
	62.5% {
		transform: rotate(675deg); }
	75% {
		transform: rotate(810deg); }
	87.5% {
		transform: rotate(945deg); }
	to {
		transform: rotate(1080deg); } }

@-webkit-keyframes left-spin {
	from {
		-webkit-transform: rotate(130deg);
		-moz-transform: rotate(130deg);
		-ms-transform: rotate(130deg);
		-o-transform: rotate(130deg);
		transform: rotate(130deg); }
	50% {
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		transform: rotate(-5deg); }
	to {
		-webkit-transform: rotate(130deg);
		-moz-transform: rotate(130deg);
		-ms-transform: rotate(130deg);
		-o-transform: rotate(130deg);
		transform: rotate(130deg); } }

@keyframes left-spin {
	from {
		-moz-transform: rotate(130deg);
		-ms-transform: rotate(130deg);
		-o-transform: rotate(130deg);
		-webkit-transform: rotate(130deg);
		transform: rotate(130deg); }
	50% {
		-moz-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg); }
	to {
		-moz-transform: rotate(130deg);
		-ms-transform: rotate(130deg);
		-o-transform: rotate(130deg);
		-webkit-transform: rotate(130deg);
		transform: rotate(130deg); } }

@-webkit-keyframes right-spin {
	from {
		-webkit-transform: rotate(-130deg);
		-moz-transform: rotate(-130deg);
		-ms-transform: rotate(-130deg);
		-o-transform: rotate(-130deg);
		transform: rotate(-130deg); }
	50% {
		-webkit-transform: rotate(5deg);
		-moz-transform: rotate(5deg);
		-ms-transform: rotate(5deg);
		-o-transform: rotate(5deg);
		transform: rotate(5deg); }
	to {
		-webkit-transform: rotate(-130deg);
		-moz-transform: rotate(-130deg);
		-ms-transform: rotate(-130deg);
		-o-transform: rotate(-130deg);
		transform: rotate(-130deg); } }

@-moz-keyframes right-spin {
	from {
		-moz-transform: rotate(-130deg);
		-ms-transform: rotate(-130deg);
		-o-transform: rotate(-130deg);
		-webkit-transform: rotate(-130deg);
		transform: rotate(-130deg); }
	50% {
		-moz-transform: rotate(5deg);
		-ms-transform: rotate(5deg);
		-o-transform: rotate(5deg);
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg); }
	to {
		-moz-transform: rotate(-130deg);
		-ms-transform: rotate(-130deg);
		-o-transform: rotate(-130deg);
		-webkit-transform: rotate(-130deg);
		transform: rotate(-130deg); } }

@keyframes right-spin {
	from {
		-moz-transform: rotate(-130deg);
		-ms-transform: rotate(-130deg);
		-o-transform: rotate(-130deg);
		-webkit-transform: rotate(-130deg);
		transform: rotate(-130deg); }
	50% {
		-moz-transform: rotate(5deg);
		-ms-transform: rotate(5deg);
		-o-transform: rotate(5deg);
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg); }
	to {
		-moz-transform: rotate(-130deg);
		-ms-transform: rotate(-130deg);
		-o-transform: rotate(-130deg);
		-webkit-transform: rotate(-130deg);
		transform: rotate(-130deg); } }

#notfound {
    position: relative;
    height: 100vh;
}
#notfound .notfound {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.notfound {
    max-width: 767px;
    width: 100%;
    line-height: 1.4;
    text-align: center;
    padding: 15px;
}
.notfound .notfound-404 {
    position: relative;
    height: 220px;
}
.notfound .notfound-404 h1 {
    font-family: 'Kanit', sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 186px;
    font-weight: 200;
    margin: 0px;
    background: linear-gradient(130deg, #ffa34f, #ff6f68);
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-transform: uppercase;
}
.notfound h2 {
    font-family: 'Kanit', sans-serif;
    font-size: 33px;
    font-weight: 200;
    text-transform: uppercase;
    margin-top: 0px;
    margin-bottom: 25px;
    letter-spacing: 3px;
}
.notfound p {
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 200;
    margin-top: 0px;
    margin-bottom: 25px;
}
.notfound a {
    font-family: 'Kanit', sans-serif;
    color: #ff6f68;
    font-weight: 200;
    text-decoration: none;
    border-bottom: 1px dashed #ff6f68;
    border-radius: 2px;
}
@media only screen and (max-width: 480px) {
    .notfound .notfound-404 {
        position: relative;
        height: 168px;
    }
    .notfound .notfound-404 h1 {
        font-size: 142px;
    }
    .notfound h2 {
        font-size: 22px;
    }
}


.footer{
	/*position: fixed;*/
	left: 0;
	bottom: 0;
	width: 100%;
	color: #000;
	text-align: center;
}
.validation{
	color:red;
}
.pointer{
	cursor: pointer;
}
.bold{
	font-weight: 600;
}
.requiredField:after {
	content:"*";
	color: #F44336;
}
.text-black{
	color: #000;
}
.layout-navbar-fixed .wrapper .main-header {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1037;
}
.settingDropDown a{
    color: #000 !important;
}
.settingDropDown a:focus{
    color: #fff !important;
    background-color: #dc3545 !important;
}
.settingDropDown {
    min-width: 180px !important;
    max-width: 200px !important;
    padding: 0 !important;
}
.settingDropDown a:hover{
    color: #fff !important;
    background-color: #dc3545 !important;
}
.sidebar-light-danger .nav-treeview>.nav-item>.nav-link.active, .sidebar-light-danger .nav-treeview>.nav-item>.nav-link.active:hover {
    color: #fff;
    background-color: #dc3545;
}
.m-l-10{
	margin-left: 10px;
}
.swal2-icon.swal2-question {
    border-color: #ec0202 !important;
    color: #ec0202 !important;
}

/* ----------------------- Wizard css -----------------*/
.stepwizard-step p {
    margin-top: 10px;
	text-align: center;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
	/*    top: 14px;*/
	top: 25px; 
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;

}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

/*.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 18px;
  line-height: 1.428571429;
  border-radius: 15px;
}*/
.btn-circle {
    width: 50px;
    height: 50px;
    text-align: center;
    padding: 10px 0;
    font-size: 18px;
    line-height: 1.428571429;
    border-radius: 25px;
}
.stepwizard-step .btn-primary:hover, .stepwizard-step .btn-primary:active {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.stepwizard-step .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.stepwizard-step .btn-primary.focus {
    box-shadow: 0 1px 1px rgba(0,0,0,.075), 0 0 0 0.2rem rgb(220, 53, 69);
}

.btn-bg-red {
    background-color: #dc3545;
    color: #fff;
    border-color: #fff;
}
/* ----------------------- Wizard css end -----------------*/
#crdContractor .form-group {
    margin-bottom: 10px;
    margin-top: 10px;
}

#crdContractor .form-control {
    padding: .375rem 0.3rem;
}

.mb-0 > a {
	display: block;
	position: relative;
}
.mb-0 > a:after {
	content: "\f067"; /* fa-chevron-down */
	font-family: 'Font Awesome 5 Free';
	font-weight: 900; 
	position: absolute;
	right: 0;
}
.mb-0 > a[aria-expanded="true"]:after {
	content: "\f068"; /* fa-chevron-up */
	font-weight: 900; 
}
.tblCost td, .tblCost th {
    padding: 5px !important;
}

nav > .nav.nav-tabs{

	border: none;
    color:#fff;
    background:#272e38;
    border-radius:0;

}
nav > div a.nav-item.nav-link {
	border: none;
    padding: 18px 25px;
    color:#fff;
    background:#272e38;
    border-radius:0;
}
nav > div a.nav-item.nav-link.active
{
	border: none;
    padding: 18px 25px;
    color:#fff;
    background:#dc3545;
    border-radius:0;
}

nav > div a.nav-item.nav-link.active:after
{
	content: "";
	position: relative;
	bottom: -60px;
	left: -10%;
	border: 15px solid transparent;
	border-top-color: #dc3545 ;
}
.tab-content{
	background: #fdfdfd;
    line-height: 25px;
    border: 1px solid #ddd;
    border-top:5px solid #dc3545;
    /*border-bottom:5px solid #dc3545;*/
    padding:30px 25px;
}

nav > div a.nav-item.nav-link:hover,
nav > div a.nav-item.nav-link:focus
{
	border: none;
    background: #dc3545;
    color:#fff;
    border-radius:0;
    transition:background 0.20s linear;
}
.departmentCard .tab-content{
	background: none;
    line-height: 25px;
    border: none;
    border-top:none;
    border-bottom:none;
    padding:0px 0px;
}
.departmentCard{
	border: 1px solid #ccc;
}
.font-18{
	font-size: 18px;
}
.font-14{
	font-size: 14px;
}
.bg-pink {
    background-color: #E91E63 !important;
    color: #fff;
}
#tblCostCount .table td, .table th {
    padding: .50rem 2rem;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}
.border-radius {
	border-radius: 25px !important;
}

/* Checkbox & Radio ============================ */
[type="checkbox"] + label {
  padding-left: 26px;
  height: 25px;
  line-height: 21px;
  font-size: 13px;
  font-weight: normal; }

[type="checkbox"]:checked + label:before {
  top: -4px;
  left: -2px;
  width: 11px;
  height: 19px; }

[type="checkbox"]:checked.chk-col-red + label:before {
  border-right: 2px solid #F44336;
  border-bottom: 2px solid #F44336; }

[type="checkbox"].filled-in:checked + label:after {
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #26a69a;
  background-color: #26a69a;
  z-index: 0; }

[type="checkbox"].filled-in:checked + label:before {
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important; }

[type="checkbox"].filled-in:checked.chk-col-red + label:after {
  border: 2px solid #F44336;
  background-color: #F44336; }


[type="radio"]:not(:checked) + label {
  padding-left: 26px;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  font-weight: normal; }

[type="radio"]:checked + label {
  padding-left: 26px;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  font-weight: normal; }

[type="radio"].radio-col-red:checked + label:after {
  background-color: #F44336;
  border-color: #F44336; }

[type="radio"].with-gap.radio-col-red:checked + label:before {
  border: 2px solid #F44336; }

[type="radio"].with-gap.radio-col-red:checked + label:after {
  background-color: #F44336;
  border: 2px solid #F44336; }

#tblAddRolePermissionMatrix td {
	    padding: .75rem .75rem 0rem .75rem;
}

.not-allowed {cursor: not-allowed !important;}
.m-r-40 {
	margin-right:40px !important;
}
.disable-select {
	 pointer-events: none;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}
.brand-image {
    margin-left: 0px !important;
   
}
.report .table td, .table th {
    padding: 5px !important;
}
.invoiceCost{
	font-size: 15px;
}

.select-box1 {
	margin-top: -5px !important;
	margin-bottom: 5px !important;
}
.nav-link {
   
    padding: .5rem .5rem !important;
}

#crdSchemeForTrainee .form-group {
    margin-bottom: 10px;
    margin-top: 10px;
}
.btn-light {
    color: #1f2d3d;
    background-color: #fff !important;
    border-color: #e1e5e9 !important;
    /* box-shadow: 0 1px 1px rgba(0,0,0,.075); */
}
.info-box {
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    border-radius: .25rem;
    padding: 0px !important;
    min-height: 0px !important;
    background: #fff;
}