/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,500&display=swap");

/* #Site Styles
================================================== */

/* ### general ### */
* { margin: 0px; padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html, body { font-family: "Poppins", sans-serif; font-size: 14px; color: #000; }
input, select, textarea { font-family: "Poppins", sans-serif; font-size: 13px; color: #000; padding: 8px 12px;margin-top: 0px !important;}

img { border: 0px; display: block; }
ul, li { list-style: none; }
:focus { outline: none; }

/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; }

/* ### main container ### */
#mainCntr { width: 100%; }

	/* ### header container ### */
	#headerCntr {  width: 100%; z-index: 2; background:#fff; box-shadow: 0 0 20px rgb(0 0 0 / 10%); }
	#headerCntr .logo { float:left;  padding: 6px 12px; width: 175px;  margin: 0 0 0 -10px; }
	#headerCntr .logo img { max-width: 100%; }
	
	#headerCntr .toggle_menu {    font-size: 30px; color: #333;  margin: 8px 12px 0 16px;  display: inline-block;}
.headerBox { height: 70px;}
	.component-header.fixed {    position: fixed; left: 0px;  top: 0px;  width: 100%;
    z-index: 2;}
	/* ### MEnu box ### */
	.menuBox { float:right; }
	.menuBox ul { list-style: none; }
	.menuBox li { float: left; font-size: 15px; color: #333;  padding: 17px 15px; position: relative; }
	.menuBox li a {color:#333; text-decoration: none; }
	.notification_count {position: absolute;  right: 3px;  top: 5px;  background: #d90e0e;  border-radius: 100%;  width: 20px;  height: 20px;  line-height: 20px;  font-size: 12px;    display: block;
    text-align: center;   color: #fff;}
	
	/* ### content container ### */
	#contentCntr { width: 100%;  /*padding:30px 0;*/ position: relative; background:#f6f6f6;  }
	
			

		/*Model popup*/
		.big-model { width: 900px; }
		.modal-header {    padding: 10px 15px;  /*background: #0b7cef;*/  color: #333;}
		.modal-header .close { color:#333; opacity: 1; }
		.big-model label { font-size: 16px; }
		
		
		/*Login box*/
		.loginCntr { max-width:970px; margin: 0px auto; padding: 0px 0; }
		.relative { position: relative; }
		
		.loginBox { z-index:1; position:relative; float:left; width: 430px; background: #fff; padding: 20px 25px;  border-radius: 9px; box-shadow: 0 2px 25px #71717129; }
		
		.login-image {width: 100%; margin-left: -79px;}
		.loginBox h4 { font-size: 30px; margin: 0px 0 12px 0; font-weight:700; }
		.loginBox .form-control { padding:12px 15px; height:auto; font-size: 14px; border-radius:4px; }
		.loginBox label { font-size: 15px; margin-bottom: 8px; }
		.loginBox .btn-primary { width: auto;  padding: 10px 15px; font-weight: 600;  border: 0;  font-size: 17px; background: #d90e0e; border-radius: 4px; text-transform: uppercase;
    letter-spacing: 1px; }		
		.field-validation-error { display: inline-block; padding-top: 5px; }		
		/*checkbox style*/
		.inputSet label { cursor: pointer; line-height: 22px;   position: relative; color:#404E67; }
		.inputSet label input {  opacity: 0;  }
		.inputSet label input[type="checkbox"] ~ span{padding-left:20px;}
		.inputSet label input[type="checkbox"] ~ span::after { border: 1px solid #404E67; content: "";  height: 18px; left: 0; position: absolute;  top: 3px; width: 18px; }
		.inputSet label input[type="checkbox"]:checked ~ span::after {  border: 1px solid #0b7cef; }
		.inputSet label input[type="checkbox"]:checked ~ span { color:#0b7cef; }
		.inputSet label input[type="checkbox"]:checked ~ span::before {  font-family: 'FontAwesome';  content: "\f00c";  display: block;  color: #0b7cef;  position: absolute;   left: 3px;  top: 1px;}

		/*Radio*/
		.inputSet label input[type="radio"] ~ span::after { border-radius: 100%;  border: 2px solid #404E67;  content: "";  height: 22px;  left: 0;  position: absolute;   top: 0;   width: 22px;}
		.inputSet label input[type="radio"]:checked ~ span {  color: #0b7cef;}
		.inputSet label input[type="radio"]:checked ~ span::after { border: 2px solid #0b7cef;}
		.inputSet label input[type="radio"]:checked ~ span::before { border-radius: 100%;  background: #0b7cef; content: ""; display: block;  height: 8px; left: 7px; position: absolute; top: 7px; width: 8px;}
		
		/*Left menu start here*/
		.left-menu { position: fixed;  top: 69px;  left: 0;  min-height: calc(100vh - 60px); background:#432A65;  width: 230px; transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out; }
		.sidebar-menu { list-style: none;  margin: 0;  padding: 0;}
		.sidebar-menu > li { position: relative;  margin: 0;  padding: 0;}
		.sidebar-menu > li > a { position: relative; padding: 15px 10px 15px 20px;  display: block; font-size: 15px; color: #fff; text-decoration:none; }
		
		.sidebar-menu > li > a i { font-size: 20px; display: inline-block; float: left; line-height: 20px; margin-right: 7px; width: 20px;}
		.sidebar-menu > li > a i.arrow { position: absolute;  right: 0px;  top: 50%; margin-right: 0px; margin-top: -11px; }
		.sidebar-menu > li > a:hover { text-decoration: none; }
		.sidebar-menu > li > .treeview-menu { display:none; list-style: none;  background: #0e2855;  padding: 10px;}
		.sidebar-menu > li > .treeview-menu li {padding: 5px 5px 5px 15px; font-size: 14px; }
		.sidebar-menu > li > .treeview-menu li a { color: #8aa4af;  display: block;  }
		.sidebar-menu > li > .treeview-menu li a:hover { text-decoration: none; color:#d90e0e; }
		
		
		.sidebar-menu > li:hover > a,  .sidebar-menu > li.active > a { color: #ffffff;  background: #FF9700; border-left-color: #4a90e2;}
		.sidebar-menu li.active > a > .fa-angle-left {right: 10px; transform: rotate(-90deg);}
		/*icon only*/
		.icon-only .left-menu {width: 70px; }
		
		/*Right content start here*/
		.content-wrapper { padding: 15px; padding-left:258px; background: #f6f6f6; position:relative; }
		.content-wrapper.bgwhite { background:#fff;}
		.content-wrapper .content-header > h1 {  margin: 0 0 10px 0;  font-size: 24px;}
		
		.box {padding: 18px; position: relative;  background: #ffffff;  margin-bottom: 20px;  width: 100%; border-radius: 9px; box-shadow: 0 2px 25px #71717129;}
		.box .form-control { padding: 11px 12px; height: auto; }
		select.form-control:not([size]):not([multiple]) { height: auto; }
		.box-header { color: #444;  display: block; position: relative;}
		.box-header.with-border {  border-bottom: 1px solid #f4f4f4; }
		.box-header .button_submit {  width:100%; border-radius: 0px; }
		.breadcrumb {font-size: 14px; background:none; }
		.breadcrumb a { color: #333; }
		
		.icon-only .content-wrapper {padding-left: 101px;}
		.icon-only .sidebar-menu > li span { display:none;}
		
		/*ReportBox*/
		.reportBox { width: 100%; }
		.reportBox  h4 { margin: 15px 0; }
		.table_head th{ background:rgba(0, 0, 0, 0.05); white-space: nowrap;}
		
		.calendar-icon {  position: absolute; right: 15px;  top: 5px;  color: #5f5e5e;  font-size: 18px;}
		
		.button_submit {margin-top: 26px; }
		.footer { padding: 15px;background:#fff; }
		
		
		
		.sidebar-mini.sidebar-collapse .main-sidebar {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 60px !important;
    z-index: 850;
  }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li {
    position: relative;
  }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
    margin-right: 0;
  }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
    border-top-right-radius: 4px;
  }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
    border-bottom-right-radius: 4px;
  }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-right-radius: 4px;
  }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    display: block !important;
    position: absolute;
    width: 180px;
    left: 50px;
  }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
    top: 0;
    margin-left: -3px;
    padding: 12px 5px 12px 20px;
    background-color: inherit;
  }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    top: 44px;
    margin-left: 0;
  }
  .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info,
  .sidebar-mini.sidebar-collapse .sidebar-form,
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right,
  .sidebar-mini.sidebar-collapse .sidebar-menu li.header {
    display: none !important;
    -webkit-transform: translateZ(0);
  }
  .sidebar-mini.sidebar-collapse .main-header .logo {
    width: 50px;
  }
  .sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
    display: block;
    margin-left: -15px;
    margin-right: -15px;
    font-size: 18px;
  }
  .sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg {
    display: none;
  }
  .sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 50px;
  }
}
.sidebar-menu,
.main-sidebar .user-panel,
.sidebar-menu > li.header {
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-menu:hover {
  overflow: visible;
}
.sidebar-form,
.sidebar-menu > li.header {
  overflow: hidden;
  text-overflow: clip;
}
.sidebar-menu li > a {
  position: relative;
}
.sidebar-menu li > a > .pull-right {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -7px;
}




/*for Tab control*/
div.login-logout-tab div.card.header {padding: 0px 0px 12px 0px;}
div.login-logout-tab li.nav-tabs {margin: 0px 0px -12px 0px;}
div.login-logout-tab li.nav-item {	width: 50%}
div.login-logout-tab a.nav-link {
	font-size: 25px;
	color: #495057;
	text-align: center;
} 

#ex1_value, #ex2_value, #ex3_value { width: 100%; border: none; }
.content_banner { margin-top: 16px; }

#ex1_dropdown, #ex2_dropdown, #ex3_dropdown {
	position: absolute;
	background-color: #fff;
	border: 1px solid #ccc;
	left: 15px;
	padding: 5px 5px;
	width: auto !important;
	max-height: 350px;
	overflow-y: auto;
	z-index: 1;
}
.or {
	font-weight: 700;
	display: inline-block;
	padding: 9px;
	border: 1px solid #ccc;
	border-radius: 100%;
	margin: 20px 0 5px 0;
}

/*delete confirm modal css*/

.modal.fade.in {
	opacity: 1;
	background: #130a0a94;
}

.modal-confirm {
	color: #636363;
	width: 400px;
}

	.modal-confirm .modal-content {
		padding: 20px;
		border-radius: 5px;
		border: none;
		text-align: center;
		font-size: 14px;
	}

.modal.fade .modal-dialog {
	transform: translate(0, 20%) !important;
}

.modal-confirm .modal-header {
	border-bottom: none;
	position: relative;
}

.modal-confirm h4 {
	text-align: center;
	font-size: 26px;
	margin: 30px 0 -10px;
}

.modal-confirm .close {
	position: absolute;
	top: -5px;
	right: -2px;
}

.modal-confirm .modal-body {
	color: #999;
}

.modal-confirm .modal-footer {
	border: none;
	text-align: center;
	border-radius: 5px;
	font-size: 13px;
	padding: 10px 15px 25px;
}

	.modal-confirm .modal-footer a {
		color: #999;
	}

.modal-confirm .icon-box {
	width: 80px;
	height: 80px;
	margin: 0 auto;
	border-radius: 50%;
	z-index: 9;
	text-align: center;
	border: 3px solid #f15e5e;
}

	.modal-confirm .icon-box i {
		color: #f15e5e;
		font-size: 46px;
		display: inline-block;
		margin-top: 13px;
	}

.modal-confirm .btn, .modal-confirm .btn:active {
	color: #fff;
	border-radius: 4px;
	background: #60c7c1;
	text-decoration: none;
	transition: all 0.4s;
	line-height: normal;
	min-width: 120px;
	border: none;
	min-height: 40px;
	border-radius: 3px;
	margin: 0 5px;
}

.modal-confirm .btn-secondary {
	background: #c1c1c1;
}

	.modal-confirm .btn-secondary:hover, .modal-confirm .btn-secondary:focus {
		background: #a8a8a8;
	}

.modal-confirm .btn-danger {
	background: #f15e5e;
}

	.modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus {
		background: #ee3535;
	}
@media (max-width:767px){
	.headerBox{height:auto;min-height:120px;}
		.loginBox{width:100%;padding: 0; border-radius: 0px; box-shadow: none;}
		.login-image{margin-left: 0;}
		.content-wrapper{padding-left: 15px; margin-bottom:30px;}
		.left-menu{display:none;z-index:9;}
		.footer {position: fixed;bottom: 0;	}

	}