:root {
	--l-theme: #FFFFFF;
	--l-bg: #F8FAFF;
	--l-dark-blue: #132452;
	--l-purple: #7177B1;
	--l-white: #fff;
    --green-sheen:#CDE6F7;
	--light-gray: #F0F0F0;
	--light-gray-b1: #D9D9D9;
    --light-gray-b2:#e0e0e0;
	--light-gray-b3:#F3F3F4;
	--light-gray-b4:#FAFAFA;
	--medium-gray-b2:#8e8e8e;
	--l-filter-gray:#848A9F;
    --bright-gray:#EEEFEF;
	--medium-gray: #adadad;
	--close-gray:#979797;
	--light-lavender-gray: #f2f0f2;
	--dark-gray: #4d4d4d;
	--pale-blue-gray:#dee2e6;
	--cool-slate-gray: #ced4da;
	--light-grayish: #d9d5cb;
    --yellow:#FFA90E;
	--Apricot:#F8AC59;
    --blanched-almond:#FFEFD0;
	--Midnight-Blue:#101828;
	--l-skyblue: #8ac7fc;
	--l-darkgreenblue:#062541;
	--l-siderbar-blue:#1064b3;
	--royal-blue:#365B9A;
	--slate-gray-blue: #667085;
	--l-lightgreenblue:#59738b;
    --l-lighblue:#01B9B5;
	--off-white-blue:#FCFCFD;
	--light-gray-blue:#E9EFEF;
    --l-sidebar-tray:#01B9B51F;
    --l-content-tray:#01B9B51F;
    --l-black:#313B45;
    --l-charcol:#6E747A;
	--l-Charcoal:#484848;
    --l-content-bg:#F8FAFF;
	--light-beige: #c2beaf;
	--l-darkgreen:#002626;
    --l-limegreen:#5DDADA;
	--teal-green: #008E8B;
    --l-lightgreen:#38C6C6;
	--Cyan:#01B9B5;
	--Aquamarine:#1AB394;
	--pale-aqua: #DFECF2;
	--pale-yellow-beige: #fcfbf3;
	--light-silver: #F1F1F1;
	--light-aqua: #D6E9E2;
	--dark-brown:#482702;
}
body{
	overflow: hidden;
	background-color: var(--l-white);
	font-family: Inter;
	font-size: .875rem;
}
/* side bar design */
#sidebar-wrapper {
	height: calc(100vh - 5rem);
	flex-direction: column;
	overflow-y: scroll;
	overflow-x: hidden;
}

#sidebar-wrapper main{
	flex: 1;
}
#content-wrapper{
	height: calc(100vh - 5rem);
	overflow-y: scroll;
	overflow-x: hidden;
}
.l-sidebar {
	width: 13rem;
	-webkit-transition: all 0.35s ease;
	-moz-transition: all 0.35s ease;
	-o-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.l-sidebar.icons {
	width: 5.5rem;
}

.l-sidebar.icons .menu-name, 
.l-sidebar.icons footer .copy-tag{
	display: none;
}
#sidebar-wrapper .list-group a,
#sidebar-wrapper footer a{
	color: var(--l-lightgreenblue);
	background-color: var(--l-l-darkgreen);
	border: none;
	text-transform: capitalize;
    font-family: Public Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}
#sidebar-wrapper .list-group a:hover,
#sidebar-wrapper footer a:hover{
	color: var(--l-siderbar-blue);
}
#sidebar-wrapper .list-group a.active,
#sidebar-wrapper footer .list-group a.active
{
    color: var(--l-siderbar-blue);;
    font-weight: 600;
}
.copy-tag{
	font-size: 0.6rem;
	color: var(--l-lightgreen);
}
/*scroll bar design*/
/* all browsers expect firefox */
.l-form-page,
.l-sample-card,
.table-responsive {
	scrollbar-width: thin;
	scrollbar-color: var(--light-beige) var(--light-grayish);
}

#sidebar-wrapper {
	scrollbar-width: thin;
	scrollbar-color: var(--l-limegreen) var(--l-sidebar-tray);
}

#content-wrapper{
	scrollbar-width: thin;
	scrollbar-color: var(--l-lighblue) var(--l-content-tray);
}

/* navbar design */
.navbar{
	padding: 0.25rem 1rem;
}
.navbar .nav-list-design a{
	color: var(--l-charcol);
    font-family: Public Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}
.navbar .nav-list-design a:hover,
.navbar .nav-list-design a:active{
    color: var(--l-black);
}

.navi-logo {
	width: 5.125rem;
}
.navi-img{
	width: 1.8rem;
}
.nav-list-design{
	background: none;
	border: none;
}
.breadcrumb {
    background: var(--l-content-bg);

}
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a{
    color: var(--teal-green) !important;
    font-family: Public Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
    text-decoration: none;
}
.l-footer {
    background-color: var(--l-darkgreenblue);
    font-size: 11px;
    color: var(--l-lightgreenblue);
	border-top: 1px solid var(--l-lightgreenblue);
}
.l-w-12{
	width: 12rem;
}
.l-filter-w-1{
	min-width: 130px;
	max-width: 200px;
	background-color: var(--lpale-aqua) !important;
	color: var(--l-purple) !important;
}
.l-h-1{
	height: 1.875rem !important;
}
.l-h-2{
	height: 2.25rem !important;
}
.l-h-24{
	height: 23.95rem;
}
.l-h-25{
	height: 24.125rem;
}
.select2 .select2-selection,
.form-control{
	background-color: var(--light-lavender-gray) !important;
}

.l-form-bg{
    background-color: var(--light-lavender-gray) !important;
    border: 1px solid var(--cool-slate-gray);
    padding-left: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    padding-top: 0.188rem !important;
}
.l-form-bg .l-form-c-bg,
.l-form-bg .form-control,
.l-form-bg .select2,
.l-form-bg .select2 .selection .select2-selection{
    border: 0 !important;
    background-color: var(--light-lavender-gray) !important;
}
.l-p-font-small p{
    font-size: .875em;
    font-weight: 400;
}
.l-label-color p{
    color: var(--slate-gray-blue);
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
}
.l-data-color p{
    color:var(--teal-green);
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
}

.l-sample-card{
    height: 350px;
    overflow-y: scroll;
	background-color: var(--pale-yellow-beige);
}
.l-wait-card{
	min-height: 386px;
    border: 1.5px dashed var(--light-beige);
}
.l-sample-card-header{
    /* background-color: #c1b98b !important; */
	/* background-color: #d9c55b !important; */
    height: 36px;
	padding: 0.5rem 1.25rem !important;
	color: var(--dark-gray);
    height: 36px;
    background-color: var(--light-gray);
    background-image: linear-gradient(300deg,var(--medium-gray) 10%,rgba(190,190,190,.4) 100%);
}
.l-sample-sub-card{
	background-color:var(--light-silver) !important;
}
.l-sample-sub-card-header{
	background-color: transparent !important;
}
.card-body.bound2 {
    background-color: var(--light-silver);
}
.card{
	background-color: var(--light-silver) !important;
	border-radius: 0 !important;
	border: none;
}
.card-header{
	border-radius: 0 !important;
}
.modal-header{
	display: block;
	height: 2.2rem;
    padding-bottom: 0.25rem!important;
    padding-top: 0.4rem !important;
}
.modal-title{
    font-size: 0.9rem;
    font-weight: 400;
}
.modal-header,
.modal-content{
    border-radius: 0;
}
.l-nl-card-bg{
    background-color: var(--light-aqua);
}
.l-bg-darkblue{
	background-color: var(--l-dark-blue);
}
.l-bg-theme{
    background-color: var(--l-darkgreenblue);
}
.l-bg-color{
    background-color: var(--l-content-bg);
}
.l-bg-secondary {
    background-color: var(--light-gray-b1) !important;
    border-bottom: 1px solid var(--l-white);
}
.l-bg-light{
    background-color: var(--light-gray-b3);
    color: var(--slate-gray-blue);
    border-top: 1px solid var(--light-gray-b1);
    border-right: 1px solid var(--light-gray-b1);
    border-bottom: 1px solid var(--light-gray-b1);
}
.l-f-bg{
    border: 0 !important;
    background-color: var(--light-gray-b4);
}
.l-f-g-bg{
    background-color: var(--light-gray-b4);
    border-top: 1px solid var(--light-gray-b1);
    border-bottom: 1px solid var(--light-gray-b1);
    padding: 0;
}
.l-drop-bar{
	background-color: transparent;
	border: 1px dashed var(--medium-gray) !important;
	color: var(--medium-gray-b2);
}
.l-fill-blue{
	fill: var(--l-dark-blue);
}
.bg-notification{
    background-color: var(--green-sheen);
}
.l-h-47{
    height: 2.625rem;
}
/* buttons */
.l-back-arrow{
    border-radius: 5px;
    opacity: 0.5;
	background-color: var(--Aquamarine);
	color: var(--light-gray-b4);
	padding: 4px;
}
.l-btn-close,
.l-btn-close:hover{
    color: var(--close-gray);
    border-color: var(--close-gray);
    font-style: normal;
}
.l-btn-search,
.l-btn-search:hover{
    border-color: var(--l-black);
	color: var(--l-charcol);
}
.l-btn-theme,
.l-btn-theme:hover{
    color: #FFFFFF;
    background-color: var(--Cyan);
}
.l-filter-btn,
.l-filter-btn:hover{
	background-color: var(--l-filter-gray);
	color:var(--l-white);
}
.l-btn-search-1,
.l-btn-search-1:hover{
	background-color: var(--l-purple);
	color: var(--light-gray-b4);
}
.l-btn-search-2,
.l-btn-search-2:focus,
.l-btn-search-2:active {
	height: 30px;
	color: var(--yellow);
	background: var(--blanched-almond) !important;
	border-color: var(--yellow) !important;
	border-radius: 3px;
	transition: all 200ms;
	box-shadow: 0px 0px 0px 0.5px rgba(247, 177, 48, 1);
	font-weight: 500;
	text-transform: uppercase;
	align-items: center;
	justify-content: center;
}

.l-btn-search:hover {
	transform: scale(.98);
	color: var(--yellow);
}
.l-btn-action {
	height: 30px;
	background-color: var(--light-gray-b2);
	border-radius: 3px;
	color: var(--l-black);
	transition: all 200ms;
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .14);
	align-items: center;
	justify-content: center;
}
.l-btn-action:hover {
	transform: scale(.98);
	background: var(--bright-gray);
}
.l-btn-filter,
.l-btn-filter:active {
	height: 30px;
	background-color: var(--l-white-b1);
	color: var(--l-purple);
	transition: all 200ms;
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .14);
}
.l-btn-filter:hover {
	transform: scale(.96);
	background: none;
}
.l-btn-warning{
	background-color: var(--Apricot);
	color: var(--dark-brown);
}
.l-btn-tool,
.l-btn-tool:active{
	border-radius: 4px;
	color: var(--l-Charcoal-b2);
	background: linear-gradient(180deg, #EFEEEE 0%, var(--light-gray-b1) 100%);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.55);
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 0.14px;
	cursor: pointer;
}
.l-btn-tool:hover{
	transform: scale(.96);
}
.l-btn-sub,
.l-btn-save,
.l-btn-success {
    background-color: var(--royal-blue)!important;
    border-color: var(--royal-blue)!important;
	color: var(--light-gray-b4);
	font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}
.l-btn-sub:hover,
.l-btn-save:hover,
.l-btn-success:hover{
	transform: scale(.98);
	background-color: var(--royal-blue)!important;
	border-color: var(--royal-blue)!important;
	color: var(--light-gray-b4);
}
.stepper-btn{
	border-radius: 50%;
	height: 2rem;
	width: 2rem;
	text-decoration: none;
	position: relative;
	z-index: 1;
	color: #405867;
	background-color: #eaf0f4;
	font-weight: 700;
	padding-left: 6px;
}
.stepper-btn-lg{
	width: 3.5rem !important;
}
.stepper-btn:hover{
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.stepper-btn.l-finish{
	background: #5cb85c;
	color: white;
}
.stepper-btn.l-finish_visited{
	background: #064b06;
	color: white;
}
.stepper-btn.l-active{
	background: #cf2519;
	color: white;
}
.stepper-btn.l-current{
	background-color: #efcb96;
}
ul.stepper {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stepper li {
  display: inline-block;
  margin-right: 35px;

}
.stepper li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 2px;
  background-color: #ddd;
}
/* table */
/* .l-ta{
	color: #062541;
} */
.l-main-search{
	background-color: var(--lpale-aqua) !important;
	color: var(--l-purple) !important;
}
table#tblData th:last-child,
table#dttable th:last-child,
table#tblData td:last-child,
table#dttable td:last-child {
    width: 200px;
}
.l-table-font{
    color: var(--slate-gray-blue);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 23px;
}
.l-form-table tr td:nth-child(odd) {
    padding-left: 1.875rem;
}
.table thead th{
    color: var(--slate-gray-blue);
    font-style: normal;
    font-weight: 500;
}
.table tbody td{
    color: var(--Midnight-Blue);
	white-space: nowrap;
}
.table-hover> tbody> tr:hover{
	background-color: var(--light-gray-blue) !important;
}
.l-table td {
	background: linear-gradient(0deg, var(--light-gray-b4), var(--light-gray-b4));
} 
.table .l-thead-theme th,
.table .l-thead-theme td {
    color: var(--slate-gray-blue);
    background-color: var(--off-white-blue);
    border-color: var(--pale-blue-gray);
}
table#tblData th:last-child,
table#dttable th:last-child,
table#tblData td:last-child,
table#dttable td:last-child {
    width: 150px;
}
.bulk-order-items .item, .bulk-recipients .recipient {
    list-style: none;
    margin-bottom: 0;
    padding: 10px 0;
}
.bulk-order-items .item li:nth-child(2) {
    text-align: right;
    padding-right: 20px;
}
.bulk-order-items .item li, .bulk-recipients .recipient li {
    display: inline-block;
    vertical-align: top;
}
.bulk-order-items .item li:nth-child(3) {
    text-align: center;
}
.bulk-order-items .item li:nth-child(4) {
    text-align: right;
    padding-right: 20px;
}
/* permission */
.tree-check {
    list-style: none;
    padding-left: 10px;
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid var(--light-gray-b4);
    padding: 10px 0;
}
.tree-check li {
    margin-left: 23px;
    position: relative;
}
.tree-check li .checkbox label input{
	margin-right: 0.5rem;
}
.tree-check .tree-head {
    font-weight: 700;
    cursor: pointer;
    margin-left: 0;
	margin-bottom: 0.5rem;
}
.tree-check .tree-head:before {
    content: "\f096";
    display: inline-block;
    font: 14px/1 FontAwesome;
    font-size: 15px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
    color: var(--l-skyblue);
    width: 12px;
}
.tree-check.tree-cheked .tree-head:before {
    content: "\f0c8"}
.tree-check.tree-all .tree-head:before {
    content: "\f14a"}
.check-scroll {
    height: 500px;
    overflow-y: scroll;
    border: 1px solid var(--light-gray-b4);
    padding: 10px 15px;
}
#permission_view_container .tree-check .tree-head {
    cursor: auto;
}
#permission_view_container .tree-check li.disabled:before {
    content: "\f00d";
    display: inline-block;
    font: 14px/1 FontAwesome;
    font-size: 12px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    left: -22px;
    top: 5px;
    color: var(--rose-red);
}
#permission_view_container .tree-check li.enabled:before {
    content: "\f00c";
    display: inline-block;
    font: 14px/1 FontAwesome;
    font-size: 12px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    left: -23px;
    top: 5px;
    color: var(--lime-green);
}
.form-group.has-error .help-block{
	color:red;
	padding-left: 15px;
}
.l-form-logo {
	width: 7.125rem;
}
.l-form-title{
	text-decoration: underline;
	text-transform: uppercase;
}
.l-temp-dash{
	border: 1px dashed #222;
	height: 250px;
}
.l-btn-form-log-toggle,
.l-btn-form-log-toggle:hover,
.l-btn-form-log-toggle:active {
	content: '';
	position: relative;
	background-color: #062541;
	color: white;
	font-size: 10px;
    min-width: 134px !important;
}
.l-btn-printer{
	height: 26px;
    line-height: 17px !important;
}
.l-tb-bg{
	background-color: var(--l-white);
	padding: 1rem;
}
.l-log-toggle-btn,
.l-log-toggle-btn:hover,
.l-log-toggle-btn label{
	text-decoration: none;
    color: #212529;
    font-weight: 600;
    font-size: 0.95rem;
	cursor: pointer;
}
.l-log-toggle-btn.collapsed:after {
	font: normal normal normal 14px/1 FontAwesome;
    content: "\f078";
	position: absolute;
	right: 25px;
	top: 20px;
	transform: translateY(-50%);
	margin-left: 5px;
	font-size: 14px;
}
.l-log-toggle-btn:after {
	font: normal normal normal 14px/1 FontAwesome;
    content: "\f077";
	position: absolute;
	right: 25px;
	top: 20px;
	transform: translateY(-50%);
	margin-left: 5px;
	font-size: 14px;
}
.w-12{
	width: 12% !important;
}
/* login */
/* step a */
@media (min-height: 1200px){
	.login-page-center.step-a {
		height: 100vh;
		padding-top: 30vh;
	}
	.security-img{
		max-width: 15vh;
	}
}
@media (max-height: 1200px){
	.login-page-center.l-step-a {
		height: 100vh;
		padding-top: 20vh;
	}
	.security-img{
		max-width: 25vh;
	}
}
@media (max-height: 992px){
	.login-page-center.l-step-a {
		height: 100vh;
		padding-top: 12vh;
	}
	.security-img{
		max-width: 30vh;
	}
}
@media (max-height: 770px){
	.login-page-center.l-step-a {
		height: 100vh;
		padding-top: 5vh;
	}
	.security-img{
		max-width: 35vh;
	}
}
@media (max-height: 633px){
	.login-page-center.l-step-a {
		height: 100vh;
		padding-top: 0vh;
	}
	.security-img{
		max-width: 40vh;
	}
}