@font-face {
    font-family: 'Hind';
    src: url('fonts/Hind-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Hind-Bold';
    src: url('fonts/Hind-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}










/* Universal */
body { font-family: 'Hind', sans-serif; margin: 0; }
a { color: #000; text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-family: 'Hind-Bold', sans-serif; }
h2 { font-family: 'Hind-Bold', sans-serif; font-size: 36px; line-height: 36px; margin: 0; padding: 0; }
button { margin: 0; padding: 0; border: 0; font-family: 'Hind', sans-serif; }









/* Form Styles */
form { font-size: 16px; }

input[type=radio] { cursor: pointer; }

input[type=text], input[type=password], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  background-color: #ffffff;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

label {
  padding: 16px 8px 4px 0;
  display: inline-block;
  font-size: 13px;
}

input[type=submit] {
  font-family: 'Hind-Bold', sans-serif;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  background-color: #142633;
}

.smallSelect { width: auto; padding: 0; }

.radioLabel {
  display: inline-block;
  cursor: pointer;
}

fieldset { border: 1px solid #142633; }
fieldset legend { font-family: 'Hind-Bold', sans-serif; color: #142633; font-size: 1.2em; }










/* Specific Elements */
#overallBox { padding: 30px 120px; }
#dashInsetBox { border-radius: 6px; background-color: #ffffff; padding: 30px 0; box-shadow: 0px 15px 20px 5px rgba(0, 0, 0, 0.35); }
td.failCell { background-color: #cc0000; }
td.failCell:hover { background-color: #880000; cursor:pointer; cursor:hand; }

.errorBox { background-color: #880000; color: #ffffff; text-align: center; padding: 6px; }

#supervisorSuggestRelative {
  position: relative;
}

#supervisorSuggest {
  position: absolute;
  float: left;
  top: -4px;
  width: 100%;
  padding: 12px;
  border: 2px solid #000;
  border-top: 0;
  background-color: #eaeaea;
  border-radius: 0 0 4px 4px;
  box-sizing: border-box;
  resize: vertical;
  display: none;
}

.item-sidebar .category-title { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #f1e8c1; }
.item-sidebar a { position: relative; display: flex; padding: 10px 16px; background-color: rgba(255,255,255,0.0); border-radius: 6px; font-size: 14px; font-family: 'Hind-Bold', sans-serif;  }
.item-sidebar a:hover { text-decoration: none; background-color: rgba(255,255,255,0.2); }

.item-view-inset { height: 938px; overflow: auto; margin-right: 65%; }

.employeeListingLocation { padding: 4px 64px; background-color: #f8fafc; font-family: 'Hind-Bold', sans-serif; letter-spacing: 0.1em; font-size: 12px; text-transform: uppercase; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.employeeListingRow { display: block; padding: 4px 64px; border-bottom: 1px solid #e2e8f0; }
.employeeListingRow:hover { background-color: #f1f5f9; text-decoration: none; }

.employeeDetail { position: absolute; right: 0; top: 0; width: 65%; height: 100%; background-color: #fff; }

span.account { display: inline-block; padding: 3px 6px; background-color: #142633; color: #ffffff; margin-right: 6px; }

#activeFilter {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 4px 8px;
	margin-right: 4px;
	border: 0;
	cursor: pointer;
	font-family: 'Hind-Bold', sans-serif;
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #000000;
	background-color: #ffda60;
	border-radius: 9999px;
}

#activeFilter:hover {
	background-color: #f2ebc2;
}

#dormantFilter {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 4px 8px;
	margin-right: 4px;
	border: 0;
	cursor: pointer;
	font-family: 'Hind-Bold', sans-serif;
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #000000;
	background-color: #dadada;
	border-radius: 9999px;
}

#dormantFilter:hover {
	background-color: #f2ebc2;
}








/* Grid Layouts */

.fiftySplitGrid {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
}

.twentyfiveSeventyfive {
	grid-template-columns: 25% 75%;
	grid-template-rows: 1fr;
}

.fifteenEightyfive {
	grid-template-columns: 15% 85%;
	grid-template-rows: 1fr;
}

.thirds {
	grid-template-columns: 33% 34% 33%;
	grid-template-rows: 1fr;
}

.insideLayout {
	grid-template-columns: 280px auto;
	grid-template-rows: 50px auto;
	grid-template-areas: 
		"sidebar header"
		"sidebar view"
}

.item-sidebar {
  grid-area: sidebar;
  padding: 1em;
  position: fixed;
  height: 100%;
}

.item-header {
  grid-area: header;
  padding: 1em 64px;
  text-align: right;
  border-bottom: 2px solid #eaeaea;
}

.item-view {
  grid-area: view;
  position: relative;
}









/* Generic Classes */

/* Display */
.grid { display: grid; }
.gridContainer { display: grid; }
.flex { display: flex; }
.flex-inline { display: inline-flex; }
.display-inline-block { display: inline-block; }

/* Flex */
.flex-1 { flex: 0 1 auto; }
.flex-2 { flex: 0 2 auto; }
.flex-3 { flex: 0 3 auto; }
.flex-4 { flex: 0 4 auto; }
.flex-5 { flex: 0 5 auto; }
.flex-6 { flex: 0 6 auto; }
.flex-7 { flex: 0 7 auto; }
.flex-8 { flex: 0 8 auto; }
.flex-wrap { flex-wrap: wrap; }

/* Position and Alignment */
.items-center { align-items: center; }
.align-stretch { align-content: stretch; }
.self-flex-end { align-self: flex-end; }
.flex-end { justify-content: flex-end; }
.float-right { float: right; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-top { top: 0; }
.position-right { right: 0; }
.position-bottom-0 { bottom: 0; }

/* Dimensions */
.
.width-100 { width: 100%; }
.height-100 { height: 100%; }
.min-width-16 {min-width: 16px; }

/* Padding */
.padding-1em { padding: 1em; }
.padding-4 { padding: 4px; }
.padding-8 { padding: 8px; }
.padding-16 { padding: 16px; }
.padding-32 { padding: 32px; }
.padding-64 { padding: 64px; }
.padding-hor-1em { padding-left: 1em; padding-right: 1em; }
.padding-hor-2em { padding-left: 2em; padding-right: 2em; }
.padding-hor-4 { padding-left: 4px; padding-right: 4px; }
.padding-hor-8 { padding-left: 8px; padding-right: 8px; }
.padding-hor-16 { padding-left: 16px; padding-right: 16px; }
.padding-hor-32 { padding-left: 32px; padding-right: 32px; }
.padding-vert-4 { padding-top: 4px; padding-bottom: 4px; }
.padding-vert-8 { padding-top: 8px; padding-bottom: 8px; }
.padding-vert-16 { padding-top: 16px; padding-bottom: 16px; }
.padding-vert-32 { padding-top: 32px; padding-bottom: 32px; }
.padding-left-8 { padding-left: 8px; }
.padding-left-16 { padding-left: 16px; }
.padding-right-8 { padding-right: 8px; }
.padding-right-16 { padding-right: 16px; }

/* Margin */
.margin-vert-1em { margin: 1em 0; }
.margin-left-16 { margin-left: 16px; }
.margin-right-8 { margin-right: 8px; }
.margin-right-16 { margin-right: 16px; }
.margin-bottom-8 { margin-bottom: 8px; }

/* Background colors */
.carrier-blue-bg { background-color: #142633; color: #fff; }
.carrier-blue-bg a { color: #ddd !important; }
.carrier-pale-yellow-bg { background-color: #f2ebc2; }
.carrier-pale-yellow-bg-hover:hover { background-color: #f2ebc2; }
.light-grey-bg { background-color: #f1f5f9; }
.light-grey-bg-hover:hover { background-color: #f1f5f9; }
.red-bg { background-color: #cc0000; }

/* Borders */
.border-grey { border: 1px solid #e2e8f0; }
.border-top-grey { border-top: 1px solid #e2e8f0; }
.border-bottom-grey { border-bottom: 1px solid #e2e8f0; }
.border-right-grey { border-right: 1px solid #e2e8f0; }
.rounded-4px { border-radius: 4px; }
.rounded-full { border-radius: 9999px; }

/* Text treatment */
.text-white { color: #ffffff; }
.text-carrier-pale-yellow { color: #f2ebc2; }
.text-carrier-blue { color: #142633; }
.text-carrier-blue-hover:hover { color: #142633; }
.font-size-10 { font-size: 10px; }
.font-size-11 { font-size: 11px; }
.font-size-12 { font-size: 12px; }
.font-size-13 { font-size: 13px; }
.font-weight-600 { font-weight: 600; }
.letter-spacing-0d1 { letter-spacing: 0.1em; }
.uppercase { text-transform: uppercase; }
.text-decoration-none-hover:hover { text-decoration: none; }

/* Opacity */
.opacity-7 { opacity: 0.7; }

/* Extras */
.pointer { cursor: pointer; }














/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-20, .col-40, .col-60, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
	.thirds { 
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}
	.thirds div { padding: 0 !important; }
}

@media screen and (orientation:portrait) {
	body { font-size: 1.4em !important; }
	form { font-size: 18px; }
	#overallBox { padding: 20px; }
	.col-20, .col-40, .col-60, input[type=submit] {
		width: 100%;
		margin-top: 0;
	}
}