body {
	font-size: 1rem !important;
	font-family: "Raleway", sans-serif !important;
	z-index: 1300 !important;
	background-color: white !important;
}

.font-family {
	font-family: "Raleway", sans-serif !important;
}

.MuiTypography-h6 {
	font-family: "Raleway", sans-serif !important;
}

.MuiTypography-body2 {
	font-family: "Raleway", sans-serif !important;
}

.filter-mode .MuiTypography-body1 {
	font-family: "Raleway", sans-serif !important;
	font-size: 0.95em !important;
}

#back {
	background-image: url("../background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	height: 100vh;
	position: relative;
}

#indexlogo {
	position: absolute;
	left: 50%;
	top: 40%;
	padding: 0px 30px;
	transform: translate(-50%, -50%);
}

#root {
	height: 50px !important;
}

.nav-shadow {
	box-shadow: 0px 4px 4px 0px rgba(185, 184, 185, 0.2);
}

.MuiListItem-button:hover {
	text-decoration: none;
	background-color: rgba(0, 0, 0, 0.04) !important;
}

.listItem:hover svg,
.primary-color {
	color: #a6162e !important;
}

.popoverIconStyle {
	margin-right: -1.5em !important;
	margin-left: 5px;
}

.popoverTextStyle {
	padding-right: 15px;
	text-decoration: none !important;
}

.linkStyle {
	text-decoration: none !important;
	color: inherit;
	cursor: pointer;
}

.linkStyle:hover {
	text-decoration: none !important;
	color: inherit;
}

.feather {
	width: 20px;
	height: 20px;
	vertical-align: text-bottom;
}

.toggle-button {
	position: absolute;
	bottom: 0;
	right: 0;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 24px;
	height: 24px;
}

.sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	/* Behind the navbar */
	padding: 0;
	box-shadow: 0px -4px 4px 0px rgba(185, 184, 185, 0.4);
}

.sidebar-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 48px;
	/* Height of navbar */
	height: calc(100vh - 48px);
	padding-top: 0.5rem;
	overflow-x: hidden;
	overflow-y: auto;
	/* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
	font-weight: 500;
	color: #333;
}

.sidebar .nav-link .feather {
	margin-right: 4px;
	color: #999;
}

.sidebar .nav-link.active {
	color: inherit;
	background-color: #dfe1e5;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
	color: #a6162e;
}

.sidebar-heading {
	font-size: 0.75rem;
	text-transform: uppercase;
}

/*
   * Navbar
   */

.navbar-brand {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	font-size: 1rem;
	background-color: rgba(0, 0, 0, 0.25);
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

.bg-white {
	background-color: white;
}

.username {
	margin-top: 10px;
	margin-right: 5px;
	color: #54585a;
}

.username:active,
.username:focus,
.username:hover {
	outline: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	color: inherit !important;
}

.logo {
	padding: 1px 10px;
	width: 172px;
	height: 30px;
}

.navbar .form-control {
	padding: 0.75rem 1rem;
	border-width: 0;
	border-radius: 0;
}

.nav-tabs {
	margin-top: 0.5em;
}

.tab-button {
	margin-right: 0.1em;
	outline: none;
	cursor: pointer;
}

.rdt_TableRow {
	min-height: 38px !important;
}

a[role="tab"] {
	color: #54585a !important;
	background-color: #f8f7fa !important;
	border-color: #dee2e6 #dee2e6 #fff !important;
	padding: 0.2rem 0.5rem;
	margin-right: 1px;
	font-size: 0.9rem;
}

a[role="tab"].active {
	color: #545454 !important;
	background-color: white !important;
	border-color: #dee2e6 #dee2e6 #fff !important;
	padding: 0.2rem 0.5rem;
	margin-right: 1px;
	font-size: 0.9rem;
	box-shadow: -1px -0.2px 1px lightgray;
}

a[role="tab"].active > i,
a[role="tab"].active > svg {
	color: #a55663 !important;
}

.tab-button:focus {
	margin-right: 0.1em;
	outline: none;
	cursor: pointer;
}

.form-control-dark {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.1);
}

.form-control-dark:focus {
	border-color: transparent;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

/*
   * Utilities
   */

.border-top {
	border-top: 1px solid #e5e5e5;
}

.border-bottom {
	border-bottom: 1px solid #e5e5e5;
}

.sfu-color {
	background-color: #a6162e;
	color: white;
}

.sfu-gray {
	background-color: #54585a;
	color: white;
}

.dlink {
	text-decoration: none !important;
	color: #03a9f3 !important;
	cursor: pointer !important;
}

.data-table-extensions-filter {
	border: 1px solid lightgray;
	border-radius: 5px;
	padding: 2px 5px;
	float: right;
	height: 38px;
	margin-bottom: 5px;
	margin-top: -4px;
	width: 30%;
}

.data-table-extensions-filter-video {
	border: 1px solid lightgray;
	border-radius: 5px;
	padding: 2px 5px;
	float: right;
	width: 30%;
	margin-bottom: 5px;
	margin-top: -4px;
}

.data-table-extensions-filter-video .filter-text {
	margin-bottom: 4px;
}

.first {
	padding-right: 15px !important;
}

.filter-text {
	border: none !important;
	width: 90%;
	outline: none !important;
	font-size: 13px;
	padding-top: 8px;
}

.filter-text:hover,
.filter-text:focus {
	outline: none !important;
}

.formatCell {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.data-table-extensions > .data-table-extensions-filter > .icon {
	float: right;
	display: block;
	width: 24px;
	height: 20px;
	color: #03a9f3 !important;
	background-repeat: no-repeat;
	background-position: left center;
	margin-left: 5px;
	margin-top: 5px;
}

.rdt_TableHeadRow {
	background-color: #f0f0f0;
}

.input_bckcolor {
	background-color: #f8f8f8;
}

.tablePaper {
	box-shadow: 0px 0px 1px -1px rgb(0 0 0 / 20%),
		0px 3px 2px 0px rgb(0 0 0 / 12%) !important;
}

.create-job {
	position: "absolute";
	float: right !important;
	margin-left: 10px;
	margin-right: 0px !important;
	background-color: #54585a;
}

.iGaJpU:focus {
	outline: none !important;
}

.nav-item > button {
	padding: 4px 8px !important;
	font-size: 14px;
}

.modal-title {
	font-size: 20px !important;
}

div > label {
	font-size: 0.9rem !important;
	line-height: 1.5 !important;
}

.passwordLabel {
	font-size: 0.8rem !important;
	line-height: 0.3 !important;
}

.bootstrapCSS {
	border-radius: 0.25rem;
}

/*Chip Select testing is the classname prefix used in the .js file.. Change for production!*/

.filterDropdown {
	background-color: #fafafa !important;
}

.testing__control,
.available__control {
	border: none;
	border: 1px solid #ced4da;
	background-color: transparent !important;
}

.testing__multi-value {
	border-radius: 1rem !important;
	font-size: 0.9rem !important;
	padding: 1px;
	background-color: #cbcbcb !important;
	box-shadow: 1px 1px 1px #e0e0e0;
}

.available__multi-value {
	border-radius: 1rem !important;
	font-size: 0.9rem !important;
	padding: 1px;
	background-color: #f0f0f0 !important;
	box-shadow: 1px 1px 1px #e0e0e0;
}

.testing__multi-value__remove,
.available__multi-value__remove {
	border-radius: 50px !important;
}

.testing__option--is-focused,
.available__option--is-focused {
	background-color: #fafafa;
	color: #54585a;
}

.testing__option--is-selected,
.available__option--is-selected {
	background-color: lightgray !important;
}

.testing__menu,
.available__menu {
	margin-top: 2px;
}

.menuIcons {
	font-size: 0.85rem !important;
	vertical-align: text-bottom;
	margin-right: 2px;
}

.testing__control--is-focused,
.testing__control--is-focused:hover,
.available__control--is-focused,
.available__control--is-focused:hover {
	box-shadow: none !important;
	border-bottom: 1px solid #ced4da;
}

.testing__placeholder,
.testing__menu-list,
.available__placeholder,
.available__menu-list {
	font-size: 0.75rem !important;
}

.testing__single-value {
	font-size: 0.8rem !important;
}

.profileImageView:hover {
	opacity: 50% !important;
}

.profileImage {
	width: 50px;
	height: 50px;
	background-color: #999;
	color: white;
	font-size: 40px;
}

.profileImageEdit {
	font-size: 25px;
	background-color: white;
	border-radius: 50%;
	padding: 4px;
	color: gray;
	cursor: pointer;
	margin-left: -10px;
	margin-top: -15px;
}

.profileImageDelete {
	font-size: 25px;
	background-color: white;
	border-radius: 50%;
	padding: 4px;
	color: #a6162e;
	cursor: pointer;
	margin-left: -10px;
	margin-top: -15px;
}

.profileImageView {
	width: 256px !important;
	height: 240px !important;
	cursor: pointer;
	background-color: #f8f7f9;
	color: lightgray;
	margin-left: 5px;
	margin-top: 20px;
}

input[readonly],
textarea[readonly] {
	background-color: #f2f2f2 !important;
	border: none !important;
}

#date-picker-inline,
#time-selector {
	background-color: #fff !important;
	font-family: "Raleway", sans-serif !important;
	font-size: 0.85rem !important;
}

.warningIcon {
	font-size: 1rem;
	vertical-align: sub;
	color: #54585a !important;
}

.warnIcon {
	font-size: 1.2rem;
	color: #ff9800 !important;
	vertical-align: bottom;
}

select > option:hover,
option:active {
	background-color: #eceaea !important;
}

select:hover,
select:focus {
	outline: none !important;
}

.inputStyle {
	border-radius: 5px;
	font-size: 0.85rem !important;
}

.labelStyle {
	margin-top: 0.7rem;
	margin-bottom: 0.1rem;
	font-size: 0.7rem !important;
	color: #808080;
}

div.rdt_TableHeader > * {
	background-color: #fafafa;
	text-transform: capitalize;
	margin: -10px 0px;
	padding-top: 10px;
}

div.rdt_TableBody > * {
	overflow: hidden !important;
}

button[aria-label="Expand Row"]:hover,
button[aria-label="Expand Row"]:focus,
button[aria-label="Collapse Row"]:hover,
button[aria-label="Collapse Row"]:focus {
	background-color: transparent !important;
	outline: none;
}

.form-control:focus {
	color: #495057;
	background-color: #fff;
	border-color: #ced4da !important;
	outline: 0;
	box-shadow: 0 0 0 0.15rem rgb(137 164 190 / 25%) !important;
}

.titleIcons {
	color: #a6162e;
	font-size: 1rem;
}

.MuiSvgIcon-colorPrimary {
	color: #a6162e !important;
}

.data-table-extensions {
	padding-right: 10px;
}

.sectionHeader {
	font-size: 0.8rem !important;
	font-family: "Raleway", sans-serif !important;
	font-weight: 600 !important;
}

.img {
	width: 10rem;
	height: 7rem;
	margin: auto;
	border-radius: 0.5rem;
	box-shadow: 2px 2px 4px grey;
}

.expandedPanel {
	padding: 10px;
	margin: 2px;
	background-color: #fafafa;
	font-size: 0.9rem;
	padding-left: 45px;
}

.panelHeaders {
	background-color: #f3f3f3;
	padding: 5px;
	color: brown;
	text-transform: uppercase;
}

.tabIcons {
	font-size: 0.75rem !important;
	padding: 2px;
	color: lightgray;
}

.jobTabIcons {
	padding: 2px;
	color: lightgray;
	vertical-align: bottom;
	font-size: 1.3rem;
}

.MuiPickersCalendarHeader-iconButton {
	background-color: white !important;
	color: gray !important;
}

.timePicker {
	padding: 1px 1px 2px;
	color: rgb(175, 109, 120);
	margin-right: 2px;
}

.footer {
	padding: 0.5rem;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	box-shadow: 0px -2px 2px 0px rgb(221 221 221 / 40%);
	text-align: center;
	background-color: white;
}

.imgFooter {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
	z-index: -1000;
}

.footerDiv {
	margin-top: 3rem !important;
}

.inPagefooter {
	padding: 0.5rem;
	position: relative;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	box-shadow: 0px -2px 2px 0px rgb(221 221 221 / 40%);
	text-align: center;
	background-color: white;
}

.inPagefooterDiv {
	margin-top: 1rem !important;
}

.btn-box {
	margin-left: -15px;
	padding-top: 5px;
	display: inline-block;
}

.spin {
	animation: spin 2s linear infinite;
}

@keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.slow-spin {
	animation: slow-spin 7s linear infinite;
}

@keyframes slow-spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.ripple {
	animation: ripple 1s linear infinite;
}

@keyframes ripple {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.1);
	}
}

.slow-ripple {
	animation: slow-ripple 3s linear infinite;
}

@keyframes slow-ripple {
	0% {
		transform: scale(0.65);
		opacity: 1;
	}

	100% {
		transform: scale(0.75);
		opacity: 0.6;
	}
}

.show-hide {
	animation: show-hide 4s alternate infinite ease-in-out;
}

@keyframes show-hide {
	0% {
		opacity: 1;
	}

	25% {
		opacity: 0.5;
	}

	50% {
		opacity: 1;
	}

	75% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

.listIcons {
	color: gray;
	font-size: 1rem !important;
	vertical-align: text-bottom;
}

.headerIcon {
	margin-right: -5px;
	font-size: 1.1rem !important;
}

.error {
	color: #e31937 !important;
}

.success {
	color: #09922d !important;
}

.headerSaveButton {
	text-transform: none;
	margin-right: 10px;
}

.headerCloseButton {
	text-transform: none;
}

.Mui-disabled {
	color: white !important;
	box-shadow: none;
	background-color: #a6162e !important;
	opacity: 0.25 !important;
}

.disabledOutline {
	color: #a6162e !important;
	background-color: transparent !important;
	border: 1px solid #a6162e !important;
	border-radius: 5px;
}

.overlap-icon {
	position: absolute;
	font-size: 0.75rem !important;
	background-color: white;
	border-radius: 50%;
}

.primary-font {
	font-family: "Raleway", sans-serif !important;
}

.fullscreen {
	overflow: visible;
}

.fullscreen-enabled {
	overflow: auto;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.react-pdf__Document {
	position: relative;
	cursor: pointer;
}

.document_thumbnail:hover::after {
	position: absolute;
	content: "Expand";
	right: 10px;
	top: 10px;
	background-color: #000;
	color: #fff;
	padding: 5px;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
}

.react-pdf__Page {
	margin-top: 10px;
	border: 1px solid darkgrey;
	box-shadow: 5px 5px 5px 1px #ccc;
	border-radius: 5px;
}
.react-pdf__Page__canvas {
	margin: 0 auto;
}

.stacked-container {
    height: 400px;
}

.stacked-container-border {
    height: 370px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
}

.geoContainer {
    height: 370px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.parent-modal-dimmed {
  background-color: rgba(0, 0, 0, 0.2) !important; 
  opacity: 0.3; 
  pointer-events: none; 
  transition: opacity 0.3s ease;
}