/* ==========================================================================
   MAIN APPLICATION STYLESHEET (main.css)
   ==========================================================================
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   1. CORE BASE & GLOBAL UTILITIES
   2. PAGE LAYOUT & CONTAINER GRIDS
   3. CARD & PANEL COMPONENTS
   4. BUTTON & BADGE UTILITIES
   5. FORM & WIDGET EXTENSIONS
   ========================================================================== */

/* Fluid Typography for Laptop / Desktop Screens */
@media (min-width: 64.0625rem) {
	html {
		font-size: clamp(12.8px, clamp(0.875rem, 0.5rem + 0.4167vw, 1.5rem), 22.4px) !important;
	}
}

@media (max-width: 64rem) {
	html {
		font-size: clamp(12.8px, 1rem, 22.4px) !important;
	}
}

@import url('../css-libraries/google-fonts-inter/inter.css');

body {
	font-family: 'Inter', sans-serif;
	background: #f8fafc;
	color: #1e293b;
	overflow-x: hidden;
}

a:hover {
	text-decoration: none;
}

#loginWrapper {
	display: block;
	width: 100vw;
	height: 100vh;
	background: url(../img/login-bg.jpg);
	background-size: cover;
	overflow: auto;
	/* overflow:hidden;*/
	float: left;
	position: relative;
}

#loginVqDisplay {
	display: block;
	width: 100vw;
	height: 100vh;
	background: url(../img/login-bg.jpg);
	background-size: cover;
	overflow: auto;
	float: left;
	position: relative;
}

#loginWrapper:after {
	background: rgba(167, 167, 167, 0);
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.loginContainer {
	position: relative;
	z-index: 2;
	width: 33.75rem;
	margin: 0 auto;
}

.loginorionlogo {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0 0 0.6875rem 0;
	background: rgba(255, 255, 255, .1);
	padding: 1.25rem 0;
}

.fa-paperclip {
	color: blue;
}

.loginContainer .form {
	width: 60%;
	margin: 0;
	display: block;
	float: left;
}

.loginContainer .leftLogo {
	width: calc(40% - 0.625rem);
	margin: 0 0.625rem 0 0;
	float: left;
	display: block;
	background: rgba(255, 255, 255, .1);
	height: 16.125rem;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.leftLogo img {
	display: block;
	max-width: 85%;
	max-height: 85%;
}

.ulLogin {
	display: block;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
}

.ulLogin li {
	display: block;
	float: left;
	width: 100%;
	margin-bottom: 0.5625rem;
	position: relative;
}

.login-form label {
	position: absolute;
	z-index: 10;
	top: 0.5625rem;
	font-size: 0.875rem;
	left: 0.75rem;
	color: #828282;
}

.ulLogin .select2-container--default {
	min-width: 100%;
}

.fullRedBtn {
	display: block;
	background: #3b82f6;
	border-radius: 0;
	width: 100%;
	color: #fff;
	text-align: center;
	height: 3.125rem;
	cursor: pointer;
	text-transform: uppercase;
}



.ulLogin input.form-control[type="text"],
.ulLogin input.form-control[type="password"] {
	width: 100%;
	border-radius: 0;
	background: rgba(255, 255, 255, 1);
	height: 2.6875rem;
	border: none;
	padding-left: 2.375rem;
	transition: all .3s ease;
}

.ulLogin .select2-container--default .select2-selection--single {
	display: block;
	background: rgba(255, 255, 255, 1);
	height: 2.6875rem;
	line-height: 2.6875rem;
	padding: 0.4375rem 0 0 1.875rem;
	border-radius: 0;
	border: none;
}

.ulLogin .select2-container--default .select2-selection--single .select2-selection__arrow b {
	margin-top: 0.3125rem;
	margin-left: -0.4375rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: rgba(59, 130, 246, .8);
}

ul.ulLogin input.form-control:focus,
.ulLogin span.select2.select2-container.select2-container--default.select2-container--focus .select2-selection--single {
	background: rgba(255, 255, 255, .8);
	border: none;
	box-shadow: none;
}

.ulLogin a {
	font-size: 0.75rem;
	color: #ccc;
}

.ulLogin a:hover {
	color: #3b82f6;
}

.logoArea {
	height: 5.25rem;
	width: 12.5rem;
	display: block;
	display: flex;
	align-items: center;
	justify-content: center;
	float: left;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 12;
}

.red .logoArea {
	background: #0f172a;
	box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, .3);
}

.red .logoArea img {
	width: auto;
	height: 4.75rem;

}

header {
	display: block;
	float: left;
	width: 100%;
	transition: all .3s ease;
	max-height: 0;
	box-shadow: 0px 1px 0.3125rem rgba(0, 0, 0, .2);
}

.headerBottomSection {
	position: fixed;
	right: 0;
	top: 2.625rem;
	z-index: 10;
}

article.headerTopSection {
	background: #fff;
	position: fixed;
	z-index: 12;
	right: 0;
	top: 0;
}

.headerTopSection,
.headerBottomSection {
	width: calc(100% - 12.5rem);
	display: block;
	float: left;
	height: 2.625rem;
}

.red .headerBottomSection {
	background: #f1f5f9;
	box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, .08);
}

nav.mainNav {
	display: block;
	float: left;
}

nav.mainNav ul {
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
}

nav ul.navMainUl>li {
	display: block;
	float: left;
	position: relative;
	margin: 0 0 0 1px;
}

nav.mainNav ul.navMainUl>li>a {
	height: 2.625rem;
	line-height: 2.625rem;
	padding: 0 0.75rem;
}

.red nav.mainNav ul.navMainUl>li>a {
	color: #555;
}

.red nav.mainNav ul.navMainUl>li:hover>a {
	background: #3b82f6;
	color: #fff;
}

nav.mainNav ul.navMainUl>li>.subMenu {
	width: 15.625rem;
	left: 0;
	padding: 2px 0 0 0;
	margin: 0;
	position: absolute;
	top: 2.5625rem;
}

nav.mainNav ul.navMainUl>li>.subMenu .subMenu {
	left: 15.5rem;
	top: 0;
	padding: 0 0 0 0.1875rem;
	margin: 0;
	width: 15.625rem;
	position: absolute;
}

nav.mainNav ul.navMainUl>li .subMenu {
	display: none;
	transition: max-height .3s ease;
}

nav.mainNav ul.navMainUl li:hover>.subMenu,
nav.mainNav ul.navMainUl li>.subMenu>li:hover>.subMenu,
nav.mainNav ul.navMainUl li>.subMenu>li .subMenu>li:hover .subMenu {
	display: block;
}

nav.mainNav ul.navMainUl>li>.subMenu .subMenu .subMenu {
	left: 15.3125rem;
}

nav.mainNav ul.navMainUl>li>.subMenu li {
	display: block;
	position: relative;
}

nav.mainNav ul.navMainUl>li>.subMenu li a {
	padding: 0.4375rem 0.9375rem;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.red nav.mainNav ul.navMainUl>li>.subMenu li.hasSub:after {
	right: 0.5rem;
	top: 0.625rem;
	content: "\f105";
	font: 0.875rem FontAwesome;
	position: absolute;
	color: rgba(255, 255, 255, .5);
}

.red nav.mainNav ul.navMainUl>li>.subMenu li a {
	background: #3b82f6;
	color: #fff;
	border-bottom: solid 1px rgba(100, 100, 100, 0.2);
}

.red nav.mainNav ul.navMainUl>li>.subMenu li:hover>a {
	background: #2563eb;
	color: #fff;
	text-decoration: none;
}

.ulRightHeadTop {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}

.ulRightHeadTop li,
.ulRightHeadBottom li {
	display: block;
	float: left;
	margin: 0.3125rem 0.375rem 0 0;
}

.ulRightHeadTop>li>a,
.ulRightHeadTop>li>.dropdown>a,
.ulRightHeadBottom>li>a,
.ulRightHeadBottom>li>.dropdown>a {
	height: clamp(1.875rem, 3.5vh, 2.5rem);
	width: 1.875rem;
	line-height: 1.8125rem;
	text-align: center;
	float: left;
	font-size: 0.875rem;
	display: block;
	cursor: pointer;
	padding: 0;
	overflow: hidden;
	border-radius: 50%;
}

.ulRightHeadTop>li>a:hover,
.ulRightHeadBottom>li>a:hover {
	text-decoration: none;
}

.ulRightHeadBottom>li>.dropdown>a.headTopText {
	width: auto;
	border-radius: 1.25rem;
	padding: 0 1.125rem;
	font-size: 0.75rem;
}

.ulRightHeadTop>li>a.bI,
.ulRightHeadTop>li>.dropdown>a.bI,
.ulRightHeadBottom>li>a.bI,
.ulRightHeadBottom>li>.dropdown>a.bI {
	font-size: 0.75rem;
}

.ulRightHeadTop>li>.dropdown>a.proImage img {
	width: 100%;
	margin: 0;
	display: block;
	float: left;
}

.ulRightHeadTop>li>.dropdown>a:after,
.ulRightHeadBottom>li>.dropdown>a:not(.headTopText):after {
	display: none;
}

.red .ulRightHeadTop>li>a,
.red .ulRightHeadTop>li>.dropdown>a {
	background: #f1f5f9;
	color: #3b82f6;
}

.red .ulRightHeadBottom>li>a,
.red .ulRightHeadBottom>li>.dropdown>a {
	background: #fff;
	color: #333;
}

.red .ulRightHeadTop>li>a:hover,
.red .ulRightHeadTop>li>.dropdown>a:hover,
.red .ulRightHeadTop>li>.dropdown.show>a,
.red .ulRightHeadBottom>li>a:hover,
.red .ulRightHeadBottom>li>.dropdown>a:hover,
.red .ulRightHeadBottom>li>.dropdown.show>a {
	color: #3b82f6;
	background: #ccc;
}

.topSearch {
	display: block;
	float: left;
}

.topSearch input[type="search"] {
	width: 12.5rem;
	height: clamp(1.875rem, 3.5vh, 2.5rem);
	padding: 0.375rem 0.9375rem;
	border-radius: 1.25rem;
	font-size: 0.75rem;
	margin: 0 0 0 -0.75rem;
	position: relative;
	display: block;
	float: left;
}

.topSearch .searchForm {
	border: none;
	float: left;
	display: block;
	padding: 0;
	height: clamp(1.875rem, 3.5vh, 2.5rem);
	width: 1.875rem;
	line-height: clamp(1.875rem, 3.5vh, 2.5rem);
	cursor: pointer;
	text-align: center;
	position: relative;
	margin: 0 0 0 -1.9375rem;
	font-size: 0.75rem;
	transition: all .3s ease;
}

.red .topSearch .searchForm {
	background: none;
	color: #333;
}

.topSearch .searchForm:hover {
	color: #3b82f6;
}

.topSearch .dropdown {
	display: block;
	float: left;
}

.red .topSearch input[type="search"]:focus {
	border: solid 1px rgba(59, 130, 246, .3);
	box-shadow: none;
}

.topSearch .dropdown>a {
	float: left;
	height: clamp(1.875rem, 3.5vh, 2.5rem);
	line-height: 1.75rem;
	border-radius: 1.25rem 0 0 1.25rem;
	padding: 0 1.125rem 0 0.75rem;
	font-size: 0.75rem;
	background: #eee;
	border: solid 1px #dfdddd;
}

#leftMenuAside {
	display: block;
	float: left;
	position: fixed;
	left: -13.125rem;
	bottom: 0;
	width: 12.5rem;
	z-index: 12;
	top: 5.25rem;
	box-shadow: 2px 0 0.3125rem rgba(0, 0, 0, .2);
	transition: all .3s ease;
}

.showLeftBar #leftMenuAside {
	left: 0;
}

#rightMenuAside {
	display: block;
	float: left;
	position: fixed;
	right: -9.375rem;
	bottom: 0;
	width: 8.75rem;
	z-index: 9;
	top: 5.25rem;
	transition: all .3s ease;
}

.showRightBar #rightMenuAside {
	right: 0;
}

.leftAsideHandle {
	display: block;
	position: fixed;
	width: 0.4375rem;
	bottom: 0;
	background: rgba(0, 0, 0, .1);
	top: 5.25rem;
	left: 0;
	z-index: 10;
	cursor: pointer;
	transition: all .3s ease;
}

.rightAsideHandle {
	display: block;
	position: fixed;
	width: 0.4375rem;
	bottom: 0;
	background: rgba(0, 0, 0, .1);
	top: 5.25rem;
	right: 0;
	cursor: pointer;
	z-index: 10;
	transition: all .3s ease;
}

.showMenuHandle {
	position: fixed;
	height: 0.4375rem;
	top: 0;
	background: rgba(0, 0, 0, .1);
	right: 0;
	left: 0;
	cursor: pointer;
	display: none;
	transition: all .3s ease;
}

.noMenu .showMenuHandle {
	display: block;
}

.noMenu header,
.noMenu article.headerTopSection,
.noMenu .logoArea {
	top: -5.3125rem;
}

.noMenu .headerBottomSection,
.noMenu .pagetitl {
	top: -2.6875rem;
}

.noMenu .rightAsideHandle,
.noMenu .leftAsideHandle,
.noMenu #leftMenuAside,
.noMenu #rightMenuAside {
	top: 0;
}

.showLeftBar .leftAsideHandle {
	left: 12rem;
}

.showRightBar .rightAsideHandle {
	right: 8.25rem;
}

.leftAsideHandle:hover,
.rightAsideHandle:hover,
.showMenuHandle:hover {
	background: rgba(0, 0, 0, .3);
}

.red #leftMenuAside {
	background: #0f172a;
}

.leftMenuSide {
	display: block;
	float: left;
	width: 100%;
	margin: 0.3125rem 0 0 0;
}

.leftMenuWrap {
	display: block;
	float: left;
	width: 100%;
	margin: 1px 0 0 0;
}

.leftMenuWrap h4 {
	display: block;
	float: left;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 0.75rem;
	font-size: 0.75rem;
	position: relative;
	cursor: pointer;
	margin: 0 0 1px 0;
	transition: all .3s ease;
}

.leftMenuWrap h4 i {
	position: absolute;
	right: 1.25rem;
	top: 0.75rem;
}

.red .leftMenuWrap h4,
.red .leftMenuWrap {
	background: rgba(255, 255, 255, .05);
}

.red .leftMenuWrap h4 {
	color: #94a3b8;
}

.red .leftMenuWrap h4:hover {
	color: #fff;
	background: rgba(255, 255, 255, .1);
}

.leftMenuWrap ul {
	margin: 0;
	display: block;
	float: left;
	overflow: hidden;
	padding: 0;
	transition: all .3s ease;
	max-height: 0;
}

.leftMenuWrap.show ul {
	max-height: 31.25rem;
	padding: 0.3125rem 0;
}

.leftMenuWrap ul li {
	display: block;
	float: left;
	width: 100%;
}

.leftMenuWrap ul li a {
	display: block;
	float: left;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
}

.leftMenuWrap ul li a i {
	margin: 0 0.3125rem 0 0;
}

.bottomLogo {
	position: absolute;
	background: rgba(255, 255, 255, .1);
	left: 0;
	right: 0;
	bottom: 0;
	height: 3.125rem;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	float: left;
	vertical-align: middle;
}

.bottomLogo img {
	max-height: 80%;
	max-width: 70%;
}

.rightButtonWrap {
	display: block;
	width: 100%;
	position: relative;
	padding: 0.9375rem 0.75rem 0 0.75rem;
	box-sizing: border-box;
}

.rightButtonWrap .leftMenUl {
	margin: 0 0 0.3125rem 0;
	padding: 0;
	display: block;
	width: 100%;
	float: left;
}

.rightButtonWrap .leftMenUl li {
	display: block;
	float: left;
	width: 100%;
	margin: 0 0 0.1875rem 0;
}

.rightButtonWrap .leftMenUl li button {
	font-size: 0.75rem;
	width: 100%;
	text-align: left;
}

.rightButtonWrap .leftMenUl li button i {
	font-size: 0.875rem;
	margin: 0 0.375rem 0 0;
}

.red .leftMenuWrap ul li a {
	color: #94a3b8;
}

.red .leftMenuWrap ul li a:hover,
.red .leftMenuWrap ul li.active a {
	color: #3b82f6;
}

.red .leftMenuWrap ul li a i {
	color: #3b82f6;
}

.red .leftMenuWrap ul li a:hover i {
	color: #fff;
}

.rightHeaderTop,
.rightHeaderBottom {
	display: block;
	float: right;
}

.modal-header {
	padding: 0.5rem 0.9375rem;
}

.modal-header .close {
	padding: 0.375rem;
	margin: -0.5rem -0.75rem -0.9375rem auto;
	cursor: pointer;
}

.modal-header .close:hover {}

.red .modal-header {
	background: #3b82f6;
	color: #fff;
}

.red .modal-header .modal-title {
	font-size: 0.8125rem;
	text-transform: capitalize;
}

.table {
	border: 1px solid #e5e7eb
}

.table td,
.table th {
	border: 1px solid #e5e7eb
}

.table thead td,
.table thead th {
	border-bottom-width: 2px
}

.table td,
.table th {
	font-size: 0.7188rem;
	padding: .55rem;
}

.red .table-hover tbody tr.noHover,
.red .table-hover tbody tr.noHover:hover {
	background: #fff;
}

.red .table-hover tbody tr:not(.noHover):hover {
	background: rgba(59, 130, 246, .08);
}

.red .table-hover tbody tr.clicked {
	background: rgba(16, 185, 129, .15);
}

.red .btn-primary {
	background: #3b82f6;
	color: #fff;
	cursor: pointer;
	border-color: #3b82f6;
	border-radius: 0.5rem;
}

.red .btn-primary:hover {
	background: #2563eb;
	border-color: #2563eb;
}

.btn-general {
	background: #814471;
	color: #fff;
	cursor: pointer;
	border-color: #7a7070;
}

.btn-sub {
	background: #354871;
	color: #fff;
	cursor: pointer;
	border-color: #7a7070;
}

.btn-jump {
	background: #5f648c;
	color: #fff;
	cursor: pointer;
	border-color: #7a7070;
}

.modal-content {
	max-width: 100%;
}

.scrollTopDown {
	display: block;
	position: absolute;
	bottom: -0.9375rem;
	right: 1.5rem;
}

.scrollTopDown a {
	display: inline-block;
	width: 1.875rem;
	height: clamp(1.875rem, 3.5vh, 2.5rem);
	float: left;
	font-size: 0.8125rem;
	line-height: 1.0625rem;
	text-align: center;
	margin: auto 0.375rem;
	cursor: pointer;
	position: relative;
	color: #fff !important;
}

.red .scrollTopDown a:before {
	background: #333;
	border-radius: 0.3125rem;
	content: "";
	display: block;
	width: 1.875rem;
	height: clamp(1.875rem, 3.5vh, 2.5rem);
	position: absolute;
	z-index: -1;
	transform: rotate(45deg);
}

.red .scrollTopDown a:hover:before {
	background: #3b82f6;
}

#contentArea {
	display: block;
	float: left;
	width: 100%;
	box-sizing: border-box;
	min-height: 100vh;
	padding: 5.25rem 0.9375rem 1.25rem 0.9375rem;
	/*overflow-x: hidden;*/
}

#contentArea.dashBoardArea {
	padding-bottom: 0;
}

.noMenu #contentArea {
	padding-top: 0.625rem;
}

.showLeftBar #contentArea {
	padding-left: 12.8125rem;
}

.showRightBar #contentArea {
	padding-right: 9.0625rem;
}

.red #contentArea {
	background: #f8fafc;
}

.pagetitl {
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	position: fixed;
	top: 2.625rem;
	z-index: 11;
	height: 2.625rem;
	line-height: 2.625rem;
	left: 13.5625rem;
}

.red .pagetitl {
	color: #1e293b;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	border-bottom: solid 2px #e2e8f0;
}

.panel {
	display: block;
	float: left;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	height: auto;
	padding: clamp(0.5rem, 1vw, 1rem) clamp(0.3125rem, 0.75vw, 0.75rem);
	margin: clamp(0.3125rem, 1vh, 0.75rem) 0 0 0;
	border-radius: 0.375rem;
	box-shadow: 1px 1px 0.3125rem rgba(100, 100, 100, .1);
}

.table thead th {
	border-top: none;
	color: #a5b5c5;
	font: 0.8125rem Inter;
}

ul.ulExportIcon {
	margin: 0.3125rem 0 0 0;
	padding: 0;
}

ul.ulExportIcon li {
	display: block;
	float: left;
	margin: 0 0.8125rem 0 0;
}

ul.ulExportIcon li a {
	color: #333;
	font-size: 0.8125rem;
	cursor: pointer;
}

ul.ulExportIcon li .fa {
	margin: 0 0.3125rem 0 0;
}

.red ul.ulExportIcon li .fa {
	color: #3b82f6;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
}

.pagination {
	margin: 0.3125rem 0 0 0;
}

.table {
	margin-bottom: 0.1875rem;
}

.tabMain.nav-tabs .nav-item.show .nav-link,
.tabMain.nav-tabs .nav-link.active,
.tabMain.nav-tabs .nav-item.show .nav-link:hover,
.tabMain.nav-tabs .nav-link.active:hover,
.tabMain.nav-tabs .nav-item.show .nav-link:focus,
.tabMain.nav-tabs .nav-link.active:focus {
	background: #f1f5f9;
	border-bottom-color: #f1f5f9;
	color: #3b82f6;
	font-weight: 600;
}

.tabMain.nav-tabs .nav-link,
.page-link {
	color: #555;
	padding: 0.25rem 1.25rem;
	font-size: 0.75rem;
}

.tabMain.nav-tabs .nav-link:focus,
.tabMain.nav-tabs .nav-link:hover {
	background: rgba(0, 0, 0, .05);
	border-color: transparent;
}

.red .page-link:focus,
.page-link:hover {
	background: rgba(59, 130, 246, .12);
	color: #333;
}

ul.tablMenu {
	margin: 0;
	padding: 0;
	display: block;
}

.tablMenu li {
	display: block;
	float: left;
	margin: 0 0.3125rem 0.3125rem 0;
}

.tablMenu li .btn {
	background: rgba(0, 0, 0, .01);
	padding: 0.3125rem 0.5rem;
	font-size: 0.8125rem;
	color: #9e9d9d;
	cursor: pointer;
}

.tablMenu li .btn i {
	margin: 0 0.1875rem 0 0;
	color: #555;
}

.tablMenu li .btn:hover i {
	color: #3b82f6;
}

.btn.btn-secondary.inform,
.btn.btn-primary.inform {
	height: 2.125rem;
	background: #3b82f6;
	color: #fff;
	box-sizing: border-box;
	line-height: 2.125rem;
	padding: 0 1.25rem;
	border: none;
	border-radius: 0.5rem;
	margin: 0 0.5rem 0 0;
	font-size: 0.8125rem;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	cursor: pointer;
	transition: all .2s ease;
}

.red .btn.btn-secondary.inform {
	background: #f1f5f9;
	color: #374151;
	border: 1px solid #e2e8f0;
}

.red .btn.btn-primary.inform:hover,
.red .btn.btn-secondary.inform:hover {
	background: #2563eb;
	color: #fff;
	transform: translateY(-1px);
}

.btn.btn-secondary.inform.nolabelForm {
	margin-top: 1.5625rem;
}

.daterangepicker.dropdown-menu {
	font-size: 0.6875rem;
}

.daterangepicker input.input-mini.form-control {
	padding-left: 1.375rem;
}




.form-control {
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
}

.tree-with-textBox {
	border: 1px solid #d1d5db;
}

input.form-control[type="text"],
input.form-control[type="email"],
input.form-control[type="number"],
input.form-control[type="password"],
textarea.form-control,
select.form-control:not([size]):not([multiple]) {
	border-radius: 0.375rem;
	font-size: 0.8125rem;
	font-family: 'Inter', sans-serif;
	background: #fff;
	padding: 0 0.5rem;
	color: #1f2937;
}

input.form-control[type="text"],
input.form-control[type="email"],
input.form-control[type="number"],
input.form-control[type="password"],
select.form-control:not([size]):not([multiple]) {
	height: clamp(1.875rem, 3.5vh, 2.5rem);
}

textarea.form-control {
	height: auto;
}

input.form-control[type="text"]:focus,
input.form-control[type="email"]:focus,
input.form-control[type="number"]:focus,
input.form-control[type="password"]:focus,
textarea.form-control:focus,
select.form-control:not([size]):not([multiple]):focus {
	border: 1px solid #3b82f6;
	box-shadow: 0 0 0 0.1875rem rgba(59, 130, 246, .15);
	outline: none;
}

label {
	margin-bottom: .2rem;
	font-size: 0.75rem;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	color: #374151;
	text-transform: capitalize;
}

.form-group.col-md-3,
.form-group.col-md-4,
.form-group.col-md-5,
.form-group.col-md-6,
.form-group.col-md-7,
.form-group.col-md-8,
.form-group.col-md-9,
.form-group.col-md-10,
.form-group.col-md-11,
.form-group.col-md-12 {
	padding-left: 0.3125rem;
	padding-right: 0.3125rem;
	margin-bottom: 0.5rem;
}

.hasPicker .form-group,
.hasPicker .form-group .row>div {
	position: relative;
}

.form-group .sinleLineFirst {
	padding-right: 0;
}

label.custom-control.custom-checkbox,
label.custom-control.custom-radio {
	margin: 1.3125rem 0 0 0;
}

.hasPicker .glyphicon.fa.dateButton {
	cursor: pointer;
	position: absolute;
	font-size: 0.75rem;
	right: 0.75rem;
	top: 2.125rem;
	color: #b5b4b4;
}

.singleLineFrm .hasPicker .glyphicon.fa {
	right: 0.6875rem;
	top: 0.5rem;
}

.singleLineFrm label {
	text-align: right;
	padding-right: 0;
}

.hasPicker .glyphicon.fa:hover {
	color: #3b82f6;
}

.listPicker {
	padding-right: 0px;
	padding-left: 0px;
}

.formWrap,
.table-responsive,
.tableWrap {
	clear: both;
}

.panelName {
	font-size: 0.8125rem;
	margin: 0;
	padding: 0.5rem 0 0.5rem 0.5rem;
	color: #3b82f6;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
}

.treeView {
	display: block;
	clear: both;
	width: 100%;
	float: left;
	padding: 0.9375rem 0;
}

ul.mainTreeUl {
	margin: 0;
	padding: 0 0 0 1.5625rem;
}

.treeView ul.mainTreeUl ul {
	display: block;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0 0 0 1.625rem;
	border-left: solid 1px #eee;
	overflow: hidden;
	max-height: 0;
	transition: all .3s ease;
}

.treeView ul.mainTreeUl li.open>ul {
	max-height: 500rem;
}

.treeView ul li {
	display: block;
	float: left;
	clear: both;
	box-sizing: border-box;
	font-size: 0.75rem;
	padding: 0.1875rem 0;
}

.treeView ul li a {
	color: #333;
}

.treeView ul li span {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	float: left;
	background: rgba(220, 220, 220, .1);
	color: #999;
	position: relative;
	margin: 1px 0.3125rem 0 -0.5625rem;
	cursor: pointer;
}

.treeView ul li>span:before {
	content: "\f067";
	font-family: FontAwesome;
	font-size: 0.75rem;
	line-height: 1.25rem;
	display: block;
	text-align: center;
	width: 1.25rem;
	height: 1.25rem;
}

.treeView ul li.open>span.hasDrop:before {
	content: "\f068";
}

.treeView ul li>span.child:before {
	content: "\f0c8";
	font-size: 0.5rem;
}

.treeView.treeBook ul li>span:before {
	content: "\f07b";
	color: red;
}

.treeView.treeBook ul li.open>span.hasDrop:before {
	content: "\f07c";
	color: red;
}

.treeView.treeBook ul li>span.child:before {
	content: "\f02d";
	font-size: 0.75rem;
	color: blue;
}

.treeView.treeBook ul li>span.bookOpen:before {
	content: "\f02d";
	font-size: 0.75rem;
}

.treeView.treeBook ul li>span.breif:before {
	content: "\f0b1";
	font-size: 0.75rem;
}

.treeView.treeBook ul li>span.ledge:before {
	content: "\f272";
	font-size: 0.75rem;
	color: green;
}

.treeView.treeBook ul li>span.ledger:before {
	content: "\f1ea";
	font-size: 0.75rem;
	color: green;
}

.treeView ul li a:hover,
.treeView ul li span:hover {
	color: #3b82f6;
}

.proFileImg {
	display: block;
	/* float: left; */
	margin: 0.9375rem auto;
	width: 5rem;
	overflow: hidden;
	height: 5rem;
	border-radius: 50%;
}

.proFileImg img {
	width: 100%;
}

a.dropdown-item {
	border-bottom: solid 1px #f1f5f9;
	padding: 0.375rem 1.3125rem;
	font-size: 0.75rem;
}

a.dropdown-item:last-child {
	border: none;
}

.alert.fixed {
	position: fixed;
	right: 6.25rem;
	top: 6.25rem;
	z-index: 800;
	padding-right: 2.8125rem;
	min-width: 32.4375rem;
}

.fieldMulti>div {
	padding: 0 0.3125rem;
}

.fieldMulti {
	margin: 0 -0.375rem;
}

.tableCollapse {
	display: block;
	float: left;
	width: 100%;
	margin-bottom: 0.5rem;
}

h5.headTar {
	display: block;
	float: left;
	width: 100%;
	position: relative;
	padding: 0.5625rem 0 0.5625rem 2.125rem;
	font-size: 0.8125rem;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	background: #f1f5f9;
	color: #334155;
	cursor: pointer;
	margin-bottom: 1px;
	border-left: 0.1875rem solid #3b82f6;
	border-radius: 0.375rem 0.375rem 0 0;
	letter-spacing: 0.01em;
}

h5.headTar:before {
	content: "\f054";
	font-family: fontAwesome;
	position: absolute;
	font-size: 0.5625rem;
	top: 0.75rem;
	left: 1.0625rem;
	color: #3b82f6;
}

.showTable h5.headTar:before {
	content: "\f078";
}

h5.headTarGroup {
	display: block;
	float: left;
	width: 100%;
	position: relative;
	font-size: 0.8125rem;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	background: #f1f5f9;
	color: #334155;
	cursor: pointer;
	margin-bottom: 1px;
	border-radius: 0.375rem;
}

h5.headTarGroup:before {
	content: "\f101\f101\f101";
	font-family: fontAwesome;
	position: absolute;
	font-size: 0.75rem;
	top: -0.1875rem;
	left: 50%;
	color: #3b82f6;
}

.showTableGroup h5.headTarGroup:before {
	content: "\f103\f103\f103";
}

h5.headCustomGroup {
	height: 0.5rem;
	font-size: 0.75rem;
	background: #e2e8f0;
	color: #475569;
}

h5.headTarGroup:hover {
	background: #e2e8f0;
	color: #1e293b;
}

.collapsingtbl {
	display: none;
	width: 100%;
	float: left;
	transition: all.3s ease;
	max-height: 0;
}

.showTable .collapsingtbl {
	max-height: 625rem;
	display: block;
}

.tableCollapseGroup .tableCollapse {
	display: none;
	width: 100%;
	float: left;
	transition: all.3s ease;
	max-height: 0;
}

.tableCollapseGroup {
	display: block;
	float: left;
	width: 100%;
	margin-bottom: 0.5rem;
}

.showTableGroup .tableCollapse {
	max-height: 625rem;
	display: block;
}

section#contentArea .dashColWrap {
	background: #fff;
	margin: 0.1875rem 0;
	height: calc(33.3vh - 2.3125rem);
	overflow: hidden;
	border-radius: 0.1875rem;
	position: relative;
}

.dashColWrap .dashContent {
	height: calc(33.3vh - 2.3125rem);
	padding: 0.3125rem;
	width: 100%;
}

.noMenu section#contentArea .dashColWrap,
.noMenu .dashColWrap .dashContent {
	height: calc(33.3vh - 0.8125rem);
}

section#contentArea .dashboardRow:first-child .dashColWrap {
	margin-top: 0.5rem;
}

section#contentArea .dashboardRow:last-child .dashColWrap {
	margin-bottom: 0;
}

.row.dashboardRow {
	margin-left: -0.8125rem;
	margin-right: -0.8125rem;
}

.dashboardRow>div {
	padding-left: 0.1875rem;
	padding-right: 0.1875rem;
}

.dashColWrap a.closeDash {
	position: absolute;
	right: 0;
	top: -1.375rem;
	width: 1.25rem;
	height: 1.25rem;
	background: #f1f5f9;
	text-align: center;
	color: #475569;
	line-height: 2px;
	border-radius: 0.1875rem;
	cursor: pointer;
	transition: all .3s ease;
}

.dashColWrap:hover a.closeDash {
	top: 0;
}

.dashColWrap:hover a.closeDash:hover {
	color: #3b82f6;
}

.panelRow {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	clear: both;
	margin: 0 -0.1875rem;
}

.panelRow .panel.panel50,
.panelRow .panel.panel60,
.panelRow .panel.panel40,
.panelRow .panel.panel33 {
	margin-right: 0.1875rem;
	margin-left: 0.1875rem;
}

.panelRow .panel.panel50 {
	width: calc(50% - 0.5rem);
	flex: 0 1 calc(50% - 0.5rem);
}

.panelRow .panel.panel60 {
	width: calc(60% - 0.5rem);
	flex: 0 1 calc(60% - 0.5rem);
}

.panelRow .panel.panel40 {
	width: calc(40% - 0.5rem);
	flex: 0 1 calc(40% - 0.5rem);
}

.panelRow .panel.panel33 {
	width: calc(33% - 0.5rem);
	flex: 0 1 calc(33% - 0.5rem);
}

.permissionWrp header {
	position: relative;
	max-height: 187.5rem;
	box-shadow: none;
}

section.permissionWrp {
	display: block;
	min-width: 68.75rem;
	float: left;
}

.mainPermissonTitle>h3 {
	display: block;
	width: 28%;
	float: left;
	font: 0.8125rem Inter;
	padding: 0.375rem 0.625rem;
	margin: 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mainPermissonTitle>h3.tit {
	width: 8%;
	padding: 0.375rem 0;

}

.permi {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

header.permissonTitle {
	display: block;
	float: left;
	width: 100%;
	max-height: 187.5rem;
	box-shadow: none;
}

.permissonTitle>h4 {
	display: block;
	float: left;
	width: 28%;
	padding: 0.375rem 0.625rem;
	font: 0.9375rem "Inter";
	margin: 0;
}

.permissionTitle span.tit {
	display: block;
}

header.permissonTitle span.tit {
	display: block;
	width: 8%;
	float: left;
	padding: 0;
	text-align: center;
}

.permi ul.per {
	display: block;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	max-height: 0;
	transition: all.3s ease;
}

.permi ul.per>li {
	display: block;
	float: left;
	width: 100%;
}

h4.subPermission {
	display: block;
	width: 28%;
	float: left;
	font-size: 0.8125rem;
	padding: 0.3125rem 0.625rem;
	margin: 0;
}

.permi ul.per .tit {
	display: block;
	width: 8%;
	float: left;
}

.permi label {
	display: block;
	width: 2.1875rem;
	height: 0.875rem;
	border-radius: 1.5625rem;
	position: relative;
	cursor: pointer;
	margin: 0.4375rem 0 0.4375rem 0;
	transition: all .3s ease;
}

.permi label:after {
	width: 0.625rem;
	height: 0.625rem;
	content: "";
	position: absolute;
	border-radius: 50%;
	top: 2px;
	left: 2px;
	transition: all .3s ease;
}

.permi input:checked+label:after {
	left: calc(100% - 2.0625rem);
}

.permi input[type="checkbox"] {
	position: absolute;
	opacity: .01;
}

.permissonTitle h4,
.subPermisson h4.subPermission {
	cursor: pointer;
	display: block;
	box-sizing: border-box;
	padding-left: 1.75rem;
	position: relative;
}

.permissonTitle h4:before {
	content: "\f105";
	font: 0.8125rem fontAwesome;
	position: absolute;
	width: 0.9375rem;
	height: 0.9375rem;
	text-align: center;
	top: 0.5625rem;
	left: 0.5rem;
}

div.permi input:disabled+label {
	opacity: .3;
	cursor: auto;
}

.sub2Wrap {
	display: block;
	position: relative;
	overflow: hidden;
	max-height: 0;
	transition: all .3s ease;
	float: left;
	clear: both;
	width: 100%;
}

.subPermisson {
	display: block;
	position: relative;
	overflow: hidden;
	max-height: 0;
	transition: all .3s ease;
	float: left;
	clear: both;
	width: 100%;
}

.permi.open>.subPermisson,
.permi .open ul.per {
	max-height: 250rem;
}

h4.level2 {
	display: block;
	float: left;
	width: 28%;
	box-sizing: border-box;
	font-size: 0.875rem;
	margin: 0;
	padding: 0.375rem 1.625rem;
	position: relative;
	cursor: pointer;
}

.headerSub2 {
	background: #a09e9e;
	display: block;
	float: left;
	width: 100%;
}

.headerSub2 .tit {
	display: block;
	float: left;
	width: 8%;
}

h4.level2:before {
	content: "\f105";
	font: 0.8125rem fontAwesome;
	display: block;
	position: absolute;
	top: 0.5625rem;
	left: 0.8125rem;
}

.level2Wrp.open>.headerSub2>h4.level2:before,
.permi.open>.permissonTitle>h4:before {
	content: "\f107";
}

.red .permissionWrp header {
	background: #0f172a;
	color: #f8fafc;
}

.red header.permissonTitle {
	background: #1e293b;
	color: #e2e8f0;
}

.red .permissonTitle>h4 {
	color: #e2e8f0;
}

.red .permi .headerSub2 .tit label {
	background: #64748b;
}

.red .permi ul.per>li {
	background: #f8fafc;
	border-top: solid 1px #e2e8f0;
}

.red .permi label:after {
	background: #fff;
}

.red .permi input:checked+label,
.red .permi header.permissonTitle input:checked+label,
.red .permi .headerSub2 .tit input:checked+label {
	background: #10b981;
}

.red .permi header.permissonTitle label {
	background: #334155;
}

.red .permi label {
	background: #cbd5e1;
	box-shadow: inset 1px 1px 0.3125rem rgba(0, 0, 0, .1);
}


.select2-container {
	clear: both;
	min-width: 100%;
	border-radius: 0;
	border-color: #ccc;
}

span.select2-selection.select2-selection--multiple {
	border-color: #cccccc;
	border-radius: 0;
	height: 1.375rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	font-size: 0.8125rem;
	margin-top: 0.1875rem;
}

.select2-container--default .select2-results>.select2-results__options {
	font-size: 0.75rem;
}

span.reqStar {
	position: relative;
	margin: 0 0 0 2px;
	font-size: 1em;
	top: -0.1875rem;
}

span.reqStar.red {
	color: #3b82f6;
}

span.reqStar.green {
	color: #4CAF50;
}

#leftMenuAside .ps__rail-y {
	right: auto !important;
	left: 0 !important;
}

.daterangepicker.dropdown-menu.ltr.show-calendar.opensright.dateDropup {
	margin-top: -19.125rem;
}

.dateDropup.daterangepicker:after {
	display: none;
}

.hasIconInputRelative {
	display: block;
	position: relative;
	width: 100%;
}

.hasIconInputRelative .overlapiCon {
	position: absolute;
	color: #b5b4b4;
	font-size: 0.75rem;
	width: 1.5625rem;
	height: clamp(1.875rem, 3.5vh, 2.5rem);
	line-height: clamp(1.875rem, 3.5vh, 2.5rem);
	text-align: center;
}

.hasIconInputRelative.hasInsideIconLeft input {
	padding-left: 1.875rem;
}

.hasIconInputRelative.hasInsideIconRight input {
	padding-right: 1.875rem;
}

.hasInsideIconLeft .overlapiCon {
	left: 0;
}

.hasInsideIconRight .overlapiCon {
	right: 0;
	left: auto;
}

.fstMultipleMode .fstControls {
	width: 100% !important;
	max-width: 21.25rem;
}

.fstResultItem {
	font-size: 0.75rem !important;
}

.fstElement {
	font-size: 0.5rem;
}

.fstToggleBtn {
	min-width: 100%;
}

.submitBtn {
	display: none;
}

.fstMultipleMode {
	display: block;
}

.fstMultipleMode .fstControls {
	width: 100%;
	height: 1.8125rem;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0.1875rem 0.75rem !important;
	margin-top: 0 !important;
}

.fstMultipleMode .fstQueryInputExpanded {
	float: none;
	width: 100%;
	min-width: 18.75rem;
	padding: 0 !important;
}

.fstMultipleMode .fstQueryInput {
	font-size: 0.75rem !important;
	float: left;
	padding: 0;
	margin: 0 !important;
	width: 100%;
	color: #999;
}

#chckbx .fstResultItem::before {
	content: "☐";
	margin-right: 0.3125rem;
}

#chckbx .fstSelected::before {
	content: "☑";
	margin-right: 0.3125rem;
}

.subGrp a {
	background: #3b82f6 !important;
	padding-left: 1.875rem !important;
	font-size: 0.75rem !important;
	border-bottom-color: #2563eb !important;
}

.subGrp a:hover {
	background: #2563eb !important;
}


.red-star {
	color: #ef4444;
}

/* Related with Error Container Jquery */
input.error {
	border-color: #ff0000;
}

/* Related with Error Container Jquery */
select.error {
	border-color: #ff0000;
}

#errorContainer {
	display: none;
	overflow: auto;
	background-color: #FFDDDD;
	border: 1px solid #FF2323;
	padding-top: 0;

}

#errorContainer label {
	float: none;
	width: auto;
}

#errorContainer ul {
	list-style-type: none;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: -1.5625rem;
}


#errorContainerWarnings {
	display: none;
	overflow: auto;
	background-color: #FFDDDD;
	border: 1px solid #FF2323;
	padding-top: 0;

}

#errorContainerWarnings label {
	float: none;
	width: auto;
}

#errorContainerWarnings ul {
	list-style-type: none;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: -1.5625rem;
}

/* End */

/* Related with Div Message Success*/
#divIdComMessages strong {
	color: red;
}

#divIdComMessages span {
	display: block;
	width: 31.25rem;
	word-wrap: break-word;
}

#divIdComMessages {
	position: fixed;
	top: 30%;
	left: 46%;
	width: 38em;
	margin-top: -9em;
	/*set to a negative number 1/2 of your height*/
	margin-left: -15em;
	/*set to a negative number 1/2 of your width*/
	border: 1px solid #ccc;
}

/* End */

/* Label Combo */

.labelpopup {
	font-size: 0.75rem;
	background-color: #f3f6c2;
	min-width: 8rem;
	line-height: 1;
	padding-bottom: 0px;
}

.labelpopup ul {
	padding-left: 0.625rem;
	margin-bottom: 0.625rem;
}

.drpDiv {
	text-align: right;
}

/* End */

/* Sorted Arrow Style */

.sorted {
	font-size: 0.875rem;
	color: #8B0000;
}

.unsorted {
	font-size: 0.875rem;
	color: #BC9D9D;
}

.second {
	margin-left: -0.75rem;
}

/* End */

h5.headCustom {
	height: 2rem;
	font-size: 0.8125rem;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	background: #f1f5f9;
	padding: 0.5rem 0 0.5625rem 1.8125rem;
	color: #334155;
	border-left: 0.1875rem solid #3b82f6;
}

.clsContainer {
	margin-top: 0.5rem;
}

.clsContainerCol {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 0 0 0.375rem 0.375rem;
}

.loader {
	width: 5rem;
	height: 3.125rem;
	position: relative;
}

.loader-text {
	position: absolute;
	top: 0;
	padding: 0;
	margin: 0;
	color: #ffffff;
	animation: text_713 3.5s ease both infinite;
	font-size: .8rem;
	letter-spacing: 1px;
	font-family: 'Inter', sans-serif;
	text-transform: uppercase;
	font-weight: 600;
}

.load {
	background-color: #ff7800;
	border-radius: 3.125rem;
	display: block;
	height: 1rem;
	width: 1rem;
	bottom: 0;
	position: absolute;
	transform: translateX(4rem);
	animation: loading_713 3.5s ease both infinite;
}

.load::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #3b82f6;
	border-radius: inherit;
	animation: loading2_713 3.5s ease both infinite;
}

@keyframes text_713 {
	0% {
		letter-spacing: 1px;
		transform: translateX(0px);
	}

	40% {
		letter-spacing: 2px;
		transform: translateX(1.625rem);
	}

	80% {
		letter-spacing: 1px;
		transform: translateX(2rem);
	}

	90% {
		letter-spacing: 2px;
		transform: translateX(0px);
	}

	100% {
		letter-spacing: 1px;
		transform: translateX(0px);
	}
}

@keyframes loading_713 {
	0% {
		width: 1rem;
		transform: translateX(0px);
	}

	40% {
		width: 100%;
		transform: translateX(0px);
	}

	80% {
		width: 1rem;
		transform: translateX(4rem);
	}

	90% {
		width: 100%;
		transform: translateX(0px);
	}

	100% {
		width: 1rem;
		transform: translateX(0px);
	}
}

@keyframes loading2_713 {
	0% {
		transform: translateX(0px);
		width: 1rem;
	}

	40% {
		transform: translateX(0%);
		width: 80%;
	}

	80% {
		width: 100%;
		transform: translateX(0px);
	}

	90% {
		width: 80%;
		transform: translateX(0.9375rem);
	}

	100% {
		transform: translateX(0px);
		width: 1rem;
	}
}

.modal-opened {
	background: rgb(0, 0, 0);
	opacity: 0.8;
	filter: Alpha(Opacity=50);
}