﻿@font-face {
	font-family: "montserratregular";
	src: url("/montserrat/montserrat-medium.woff") format("woff2"),
		url("/montserrat/montserrat-medium.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "montserratitalic";
	src: url("/montserrat/montserrat-mediumitalic.woff2") format("woff2"),
		url("/montserrat/montserrat-mediumitalic.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "montserratsemibold";
	src: url("/montserrat/montserrat-semibold.woff2") format("woff2"),
		url("/montserrat/montserrat-semibold.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "montserratbold";
	src: url("/montserrat/montserrat-bold.woff2") format("woff2"),
		url("/montserrat/montserrat-bold.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
/* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
body {
	font-family: montserratregular, Verdana, Geneva, Tahoma, sans-serif !important;
	letter-spacing: -0.01rem;
}
.app {
	background-color: rgb(255, 255, 255);
}
.tooltip {
	top: 0;
}
.container-fluid {
	padding: 0 !important;
}
.btn {
	padding: 10px !important;
	font-size: 12px !important;
	font-family: montserratbold !important;
	font-weight: normal !important;
	border-radius: 0 !important;
	border: none !important;
}
.table {
	margin-bottom: 0 !important;
}
.container-fluid .row {
	margin-bottom: 16px;
}
/* Nav Bar Styles */
.navbar-header {
	position: relative;
	z-index: 1;
}
.navbar .navbar-nav li a {
	word-spacing: 0px;
}
.nav.bg-light {
	width: 100%;
	background-color: rgb(211, 220, 226) !important;
}
.navbar-nav {
	padding: 0 8px !important;
}
.navbar-nav:first-of-type {
	border-left: 1px solid rgb(183, 194, 204); /* Light Gray */
}
.navbar-nav + .navbar-nav .nav-item:last-of-type {
	border-left: 1px solid rgb(183, 194, 204); /* Light Gray */
}
.nav-item {
	font-size: 20px;
	color: rgb(137, 140, 142); /* Med Gray */
	padding: 0 8px;
}
.nav-item a:hover,
.nav-item .active {
	color: rgb(126, 147, 167) !important;
}
/* Page Styles */
.page {
	background-color: rgb(255, 255, 255);
}
.header {
	font-family: montserratbold;
	font-weight: normal;
	text-transform: uppercase;
	color: rgb(126, 147, 167) !important;
}
.header h3 {
	font-size: 24px;
	font-weight: bold;
	margin-right: 8px;
	display: inline-block;
	vertical-align: middle;
	width: calc(100% - 214px);
}
.header .btn {
	width: 205px;
	background-color: rgb(126, 147, 167);
	border: none !important;
}
.header .btn:hover,
.header .btn:focus {
	background-color: rgb(78, 91, 115) !important;
}
.header .btn:focus {
	box-shadow: 0 0 0 3px rgba(126, 147, 167, 0.4) !important;
}
.form-control:focus,
li.page-item a:focus,
.custom-select:focus {
	box-shadow: 0 0 0 3px rgba(126, 147, 167, 0.2) !important;
}
.navbar-toggler:focus {
	outline: none !important;
	box-shadow: 0 0 0 1px rgba(126, 147, 167, 0.8) !important;
}
.btn.o-save:focus {
	box-shadow: 0 0 0 3px rgba(117, 199, 145, 0.4) !important;
}
.fa-user-circle-o::before,
.fa-sign-out::before {
	font-size: 40px;
	color: rgb(126, 147, 167);
	vertical-align: middle;
	margin: 0 10px;
}
.fa-sign-out::before {
	font-size: 26px;
	line-height: 40px;
}
/* Search Field Styles */
input {
	padding: 0 !important;
}
input::placeholder {
	font-size: 14px !important;
	font-style: normal;
	color: rgb(183, 194, 204) !important; /* Light Gray */
}
.o-search {
	width: 36px;
	padding: 4px 10px;
	color: rgb(137, 140, 142); /* Med Gray */
	border: 2px solid rgb(183, 194, 204) !important; /* Light Gray */
	border-right: none !important;
}
.form-control {
	height: 38px !important;
	border-radius: 0 !important;
	border: 2px solid rgb(183, 194, 204) !important; /* Light Gray */
	border-left: none !important;
	border-right: none !important;
}
.form-control + .input-group-append {
	border: 2px solid rgb(183, 194, 204); /* Light Gray */
	border-left: none;
}
.form-control + .input-group-append .btn {
	width: 36px;
	color: rgb(137, 140, 142); /* Med Gray */
	padding: 4px 10px !important;
	border-radius: 0;
	border: none;
	background-color: rgb(255, 255, 255);
}
.form-control + .input-group-append .btn:disabled i {
	display: none;
}
/*Grid Styles*/
th[role="columnheader"] {
	font-size: 16px !important;
	font-family: montserratbold;
	font-weight: normal;
	text-transform: uppercase;
	color: rgb(137, 140, 142) !important; /* Med Gray */
	background-color: rgb(255, 255, 255) !important;
	border: none !important;
}
th[role="columnheader"]:not(.o-th) {
	width: 28%;
}
th[role="columnheader"].o-th {
	width: 4%;
}
@media screen and (max-width: 991.98px) {
	th[role="columnheader"]:not(.o-th) {
		width: 180px;
	}
	th[role="columnheader"].o-th {
		width: 35px !important;
	}
	.navbar-collapse > ul + ul {
		display: block !important;
		float: right;
	}
	.navbar-collapse > ul + ul li {
		display: inline-block !important;
		width: auto !important;
	}
	.navbar-collapse > ul + ul li + li {
		padding: 0 0 0 8px;
	}
	.fa-sign-out::before {
		margin: 0 0 0 10px;
	}
	.header h3 {
		width: calc(100% - 49px);
	}
	.header .btn {
		width: 40px;
	}
}
tr[role="row"]:nth-child(odd) {
	background-color: rgb(211, 220, 226) !important;
}
tr[role="row"]:nth-child(even) {
	background-color: rgb(237, 241, 242) !important;
}
td[role="cell"] {
	font-size: 14px !important;
	color: rgb(126, 147, 167) !important;
	text-transform: uppercase;
	vertical-align: middle !important;
}
td[role="cell"]:first-of-type {
	font-family: montserratbold;
}
td[role="cell"] .btn i {
	color: rgb(126, 147, 167) !important;
}
td[role="cell"] .btn i.fa.fa-pencil::before,
td[role="cell"] .btn i.fa.fa-trash::before,
td[role="cell"] .btn i.fa.fa-sitemap::before {
	font-size: 19px;
}
td[role="cell"].o-td-center {
	text-align: center;
}
.fa-check-circle {
	color: green;
}
.fa-check {
	color: green;
}
.o-enabled {
	color: rgb(117, 199, 145);
}
.o-disabled {
	color: rgb(184, 61, 36);
}
/*Pagination Styles*/
.pagination .page-item:first-of-type {
	padding-left: 0 !important;
}
.page-item {
	padding: 2px;
}
.page-item .page-link {
	height: 100%;
	padding: 0 10px !important;
	font-size: 24px !important;
	line-height: 24px !important;
	color: rgb(137, 140, 142) !important; /* Med Gray */
	border-radius: 0 !important;
	border: none;
	background-color: rgb(211, 220, 226) !important;
}
.page-item a[role="menuitemradio"].page-link {
	font-size: 14px !important;
	border: 2px solid rgb(211, 220, 226);
}
.page-item.active a[role="menuitemradio"].page-link {
	border: 2px solid rgb(183, 194, 204) !important; /* Light Gray */
	background-color: transparent !important;
}
#pageSize {
	margin: 0 8px;
	border-radius: 0;
	color: rgb(137, 140, 142); /* Med Gray */
	border: 2px solid rgb(183, 194, 204); /* Light Gray */
}
.o-page-count,
.o-page-size {
	font-size: 12px;
	color: rgb(137, 140, 142); /* Med Gray */
}
.o-page-count {
	padding: 6px 0 !important;
}
.o-strong {
	font-family: montserratbold;
}
.o-form .form-control {
	border: 2px solid rgb(183, 194, 204) !important; /* Light Gray */
}
/*Collapse*/
.card {
	border-top: 1px solid rgb(137, 140, 142) !important; /* Med Gray */
	border-right: none !important;
	border-bottom: none !important;
	border-left: none !important;
	border-radius: 0 !important;
	background-color: rgb(250, 250, 250) !important;
}
.o-label-sm {
	font-size: 11px;
	text-transform: uppercase;
	color: rgb(137, 140, 142); /* Med Gray */
}
.o-arrow-down,
.o-arrow-down-border {
	position: absolute;
	top: -1px;
	left: 56px;
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid rgb(255, 255, 255);
	z-index: 1;
}
.o-arrow-down-border {
	left: 55px;
	border-left: 21px solid transparent;
	border-right: 21px solid transparent;
	border-top: 21px solid rgb(137, 140, 142); /* Med Gray */
	z-index: 0;
}
.collapsed .fa-caret-up {
	transform: rotate(-180deg);
}
.o-interior-panel {
	max-width: none !important;
	margin: 0 -5px;
}
.o-interior-panel .o-btn-add,
.o-interior-panel .o-btn-trash {
	background-color: rgb(137, 140, 142) !important; /* Med Gray */
}
.o-interior-panel .o-arrow-down {
	border-top: 20px solid rgb(250, 250, 250);
}
textarea.form-control {
	height: unset !important;
}
/*Form Fields*/
.o-field {
	display: flex;
	flex-flow: column-reverse;
	position: relative;
}
/* .o-field label,
.o-field input,
.o-field select,
.o-field textarea {
	transition: all 1ms;
	touch-action: manipulation;
	position: absolute;
} */
input,
.o-field select,
.o-field textarea {
	padding: 0 6px !important;
	border-radius: 0;
	cursor: text;
	-webkit-appearance: none;
}
.o-field select, 
select {
	border: 2px solid rgb(183, 194, 204) !important; 
	border-radius: 0 !important;
}
.datepickerlabel {
	top: -14px;
	left: 6px;
	max-width: 90%;
	margin: 0;
    text-transform: uppercase;
	font-size: 11px;
    font-family: montserratbold;   

}
.o-field label {
	top: -14px;
	left: 6px;
	max-width: 90%;
	margin: 0;
    text-transform: uppercase;
	font-size: 11px;
    font-family: montserratbold;    
}
/*By Default Placeholder is Transparent and Should Inherit Transition*/
/* .o-field input::placeholder,
.o-field textarea::placeholder {
	opacity: 0 !important;
	transition: inherit;
} */
/*Translate Down and Scale Label Up to Cover Placeholder*/
/* .o-field input:placeholder-shown + label,
.o-field select:not(.o-option-selected) + label,
.o-field textarea:placeholder-shown + label {
	font-family: montserratregular;
	color: rgb(183, 194, 204); 
	transform-origin: left bottom;
	transform: translate(4px, 12px);
} */
/*When Element is Focused, Remove Label Transform*/
/* .o-field input:not(:placeholder-shown) + label,
.o-field input:focus + label,
.o-field select.o-option-selected + label,
.o-field select:focus + label,
.o-field textarea:not(:placeholder-shown) + label,
.o-field textarea:focus + label {
	padding: 0 2px;
	font-size: 11px;
	font-family: montserratbold;
	color: rgb(137, 140, 142); 
	background-color: rgb(255, 255, 255);
	cursor: pointer;
	transform: translate(0, -4px);
} */
.o-info {
	color: rgb(126, 147, 167) !important;
}
.o-info span {
	display: inline-block;
	vertical-align: middle;
}
.o-save {
	float: right !important;
	width: 140px;
	margin-right: 0 !important;
	background-color: rgb(117, 199, 145) !important;
}
.o-cancel {
	width: 140px;
	background-color: rgb(184, 61, 36) !important;
}
.o-btn-add,
.o-btn-trash {
	width: 36px;
	height: 36px;
	padding: 8px !important;
	background-color: rgb(126, 147, 167) !important;
}
.o-btn-trash {
	background-color: rgb(184, 61, 36) !important;
}
.o-btn-link {
	width: calc(100% - 36px);
	height: 36px;
	font-size: 14px !important;
	color: rgb(137, 140, 142) !important; /* Med Gray */
	text-align: left !important;
	text-decoration: none !important;
	text-transform: uppercase;
}
.o-express-header {
	font-family: montserratbold !important;
	color: rgb(137, 140, 142) !important; /* Med Gray */
	text-align: left !important;
	text-decoration: none !important;
	text-transform: uppercase;
	margin: 0;
	margin-bottom: .5rem;
}
