/* 
 * NOTE: 2/7/2022 - this file is only partially converted from leanAndGreen to
 *       metronetLYI.
 *
 * New colors
 * Purple 1: #9645FD
 * Purple 2: #742DCE
 * Purple 3: #381664
 * Green 1: #00C900
 * Green 2: #00A600
 * Yellow 1: #F0F022
 * Yellow 2: #D9D91D
 * Brand Gray: #B2B2B2
 * Navy: #222156
 # Teal 1: #00A89C
 # Teal 2: #06867D
 # Teal 3: #005650
 * White: #FFFFFF
 * Black: #000000
 * Focus Blue: #00428A
 * Green Disabled: #013D01
 * Yellow Disabled: #5B5B00
 * Teal Disabled: #014B46
 */
@font-face {
  font-family: 'Lexend';
  src: url('/includes/assets/themes/metronetLYI/Lexend-VariableFont_wght.ttf');
}

img[src*="metronet-logo.png"] {
  width: 200px;
  height: 50px;
}

/* Begin Foundation overrides */
a:focus, 
a:active, 
a:hover {
  color: #FFF;
}

.close-button:focus,
.close-button:active,
.close-button {
  color: #FFF;
  right: 0;
  padding: 0 .5em;
  top: 0.25rem;
}

.close-button:hover {
  color: #cacaca;
}

.menu-icon:hover:after {
  background: #FFF;
  box-shadow: 0 7px 0 #FFF, 0 14px 0 #FFF;
}

.pagination a:hover {
  border-radius: .3em;
}

.pagination .current {
  padding: .1875rem .625rem;
  background: #000000;
  color: #FFF;
  cursor: default;
  border-radius: .3em;
}

.pagination li {
  font-size: 1em;
}

.pagination a, 
.pagination button,
.pagination .disabled {
  color: #FFFFFF;
}

.pagination a:hover,
.pagination button:hover {
  color: #9E9E9E;
  background: #000000;
}

.menu-icon {
  z-index: 10;
}

ol, ul {
  margin-left: 0;
}

ul {
  list-style-type: none;
}

dl, ol, ul {
  line-height: inherit;
  margin-bottom: 0;
}

label {
  color: #FFFFFF;
  font-size: 1em;
  font-weight: normal;
  line-height: 1em;
  display: inline-block;
  margin-bottom: .5em;
}

[type=color], 
[type=date], 
[type=datetime-local], 
[type=datetime], 
[type=email], 
[type=month], 
[type=number], 
[type=password], 
[type=search], 
[type=tel], 
[type=text], 
[type=time], 
[type=url], 
[type=week], 
[type=checkbox], 
[type=file], 
[type=radio],
[type=checkbox] + label, 
[type=radio] + label,
select,
textarea {
  margin: 0;
}

select {
  padding: 0 .5rem 0 0;
  background-position: right center;
}

table {
  width: inherit;
  border-radius: inherit;
  margin: 0;
  padding: 0;
}

table tbody td,
table tbody th {
  padding: 0;
  padding: 0 0 1em 0;
}

table tbody, 
table tfoot, 
table thead {
  border: none;
  background-color: #000000;
  background-color: transparent;
  color: #FFFFFF;
}

table tbody tr:nth-child(odd),
table tbody tr:nth-child(even) {
  background-color: transparent; /* Needed for IE */
  background-color: initial;
}

table.dataTable tbody, 
table.dataTable tfoot, 
table.dataTable thead {
  background-color: #000000;
}

.button {
  text-transform: uppercase;
  transition: none;
  border: inherit;
  background-color: inherit;
  padding: 0;
  margin: 0;
  font-size: 1em;
  padding: .4em 1em;
}

.button.disabled,
.button.disabled:focus,
.button.disabled:hover,
.button[disabled],
.button[disabled]:focus,
.button[disabled]:hover {
  background-color: #5B5B00;
  color: #000000;
}

.tooltip {
  background-color: transparent;
  color: #FFFFFF;
  font-size: 1rem;
  padding: 0;
  position: static;
  z-index: auto;
  top: auto;
  max-width: 10em;
  border-radius: 0;
}

.tooltip.top:before,
.tooltip:before {
  display: none;
}

.label {
  display: block;
  padding: initial;
  font-size: initial;
  background: none;
  color: initial;
}

.medium-uncollapse.noSideGutter>.column:first-of-type {
  padding-left: 0;
}

.medium-uncollapse.noSideGutter>.column:last-of-type:not(.end) {
  padding-right: 0;
}

.tabs-title a,
a.tabs-title:focus,
a.tabs-title:active,
a.tabs-title:hover,
.accordion-title,
a.accordion-title:focus,
a.accordion-title:active,
a.accordion-title:hover {
  border: 1px solid #3C3C3C;
  background-color: #242424;
  color: #FFFFFF;
  font-size: 1rem;
}

.tabs-title > a[aria-selected=false] {
  color: #9E9E9E;
} 

.tabs-title > a:hover:not([aria-selected=true]) {
  font-weight: normal;                      
  background-color: #242424;                
  color: #FFFFFF;
} 

:last-child:not(.is-active)>.accordion-title {
  border-bottom: 1px solid #3C3C3C;
}

:last-child>.accordion-content:last-child {
  border-bottom: 1px solid #3C3C3C;
}

.accordion-title:focus,
.accordion-title:hover {
  background-color: transparent;
}

ul.accordion {
  border-radius: .3rem
}

.accordion-item:first-child>:first-child {
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;
}

.accordion-item:last-child>:last-child,
:last-child:not(.is-active)>.accordion-title,
.accordion-item:last-child>:last-child {
  border-bottom-left-radius: .3rem;
  border-bottom-right-radius: .3rem;
}

ul.tabs {
  position: relative;
  background-color: transparent;
  border: none;
}

.tabs-title > a:hover,
.tabs-title > a:focus,
.tabs-title > a[aria-selected=true] {
  background-color: #242424;
  color: #FFFFFF;
}

.tabs-title {
  background-color: #242424;
  border-right: 1px solid #3C3C3C;
  border-top: 1px solid #3C3C3C;
}

.tabs-title:first-of-type,
.tabs-title:first-of-type > a {
  border-top-left-radius: .3rem;
}

.tabs-title:first-of-type {
  border-left: 1px solid #3C3C3C;
}

.tabs-title:last-of-type,
.tabs-title:last-of-type > a {
  border-top-right-radius: .3rem;
}

.tabs-title > a {
  padding: 1.25rem 1.25rem;
}

.accordion-item.disabled,
.tabs-title.disabled {
  pointer-events: none;
  cursor: not-allowed;
}

.accordion-item.disabled a,
.tabs-title.disabled a {
  background-color: #f0f0f0;
  color: #d2d2d2;
}

.tabs-content {
  border: none;
  background: transparent;
}

div[data-tab-content] {
  border: 1px solid #3C3C3C;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  border-top-right-radius: 0.3rem; 
  background-color: #00428A;
  background-image: url(/includes/assets/themes/metronetLYI/Property-1Gradient-3.png);   
  background-size: cover;
  padding: 1em;
  color: #FFFFFF;
}

div.accordion-content[data-tab-content] {
  border-radius: 0;
}
/* End Foundation overrides */

/* Begin DataTable overrides */
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
  background-image: none !important;
}

div.dataTables_wrapper div.dataTables_paginate {
  position: absolute;
  bottom: -2.45em;
  right: -.5em;
}

div.dataTables_wrapper div.dataTables_info {
  position: relative;
  top: 1.25em;
  padding: 0;
  width: 10em;
}

div.dataTables_wrapper div.dataTables_length {
  position: absolute;
  top: -2.5em;
  right: .25em;
}

div.dataTables_wrapper div.dataTables_length select {
  color: #FFF;
  width: 4.5em;
  padding: 0 2px 0 4px;
}

select {
  background-image: url(/includes/assets/themes/metronetLYI/chevron-down.svg);
  background-size: auto;
  /*background-position: right 0px top 12px;*/
}
/* End DataTable overrides */

/* Begin Google recaptcha styling */
.g-recaptcha > div:first-of-type {
  margin: 1em 0 0 0;
}

.g-recaptcha {
  transform: scale(0.85);
  transform-origin: 0 0;
}
/* End Google recaptcha styling */

:focus {
  outline: none;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ui-widget,
body {
  font: 16px Lexend,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  padding: 0;
  margin: 0 auto;
  background-color: #000000;
  min-width: 320px;
  /*max-width: 1366px;*/
  width: 100%;
  position: relative;
  color: #767676;
}

span#repoName {
  color: #FFF;
}

div.instanceName {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
}

.content {
  padding: 1em;
  position: relative;
  min-height: 38em;
  color: #FFFFFF;
  background-color: #00428A;
  background-image: url(/includes/assets/themes/metronetLYI/Property-1Gradient-3.png);
  background-size: cover;
}

.loginScreen .content {
  min-height: 0;
}

div.titleBar {
  background-color: #000000;
  font-size: 1em;
  color: #FFF;
  height: 4em;
  padding: 4em;
  /*box-shadow: inset 0px -10px 20px -10px #000000;*/
}

div.titleBar ul.branding {
  float: left;
}

div.titleBar ul.links {
  float: right;
  top: -.5em;
  height: 1em;
  position: relative;
}

div.titleBar .menu > li {
  padding-left: 1em;
  padding-right: 1em;
}

div.titleBar .menu > li > a {
  padding: 0;
}

div.titleBar ul.links > li > a {
  line-height: 4em;
  padding: 0 .5em;
}

div.titleBar li.top > ul.submenu {
  margin-top: 1em;
}

div.titleBar ul.submenu {
  border-bottom-left-radius: .3rem;
  border-bottom-right-radius: .3rem;
  border-radius: .3rem;
  z-index: 1000;
  white-space: nowrap;
}

div.titleBar .menu > li.is-submenu-item,
div.titleBar .menu > li.is-submenu-item > a {
  color: #000000;
  line-height: 1.5rem;
}

div.titleBar .menu li.is-submenu-item.hover:hover {
  box-shadow: none;
}

div.titleBar .menu > li.is-submenu-item.is-active > a,
div.titleBar .menu > li.is-submenu-item.hover:hover > a {
  color: #FFFFFF;
}

div.titleBar ul.userInfo.dropdown.menu > li.opens-inner > .is-dropdown-submenu,
div.titleBar ul.userInfo.dropdown.menu > li.opens-left > .is-dropdown-submenu {
  left: -3em;
  top: 3.5em;
}

div.titleBar .dropdown.menu > li.opens-right > .is-dropdown-submenu {
  /*left: -2.5em;*/
  top: 3.75em;
}

div.titleBar ul.userInfo .is-dropdown-submenu:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #FFFFFF transparent;
  top: -16px;
  left: 80px;
}

div.titleBar ul.is-dropdown-submenu > li.is-submenu-item.hover a:after {
  border-color: transparent;
}

div.titleBar .dropdown.menu > li.is-dropdown-submenu-parent > a {
  padding: 0 .5em;
}

div.titleBar .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a:after {
  content: url(/includes/assets/themes/metronetLYI/chevron-right.svg);
  top: -2px;
  right: 1.5em;
}

div.titleBar .dropdown.menu > li.is-dropdown-submenu-parent > a:after {
  display: none;
}

div.titleBar ul.links > li.is-active,
div.titleBar ul.links > li:hover {
  border-radius: 9999px;
}

div.titleBar ul.links li.hover.is-active,
div.titleBar ul.links li.hover:hover {
  /*
  background-color: #7EC03D;
  box-shadow: inset 0px -10px 20px -10px #000000;
  */
  color: #FFFFFF;
  background-color: #242424;
  padding-left: 1em;
  padding-right: 1em;
}

div.titleBar ul.userInfo {
  float: right;
  position: relative;
  margin-left: -1.5em;
  right: -1.15em;
  color: #767676;
}

div.titleBar ul.userInfo .is-dropdown-submenu {
  min-width: 7.5em;
  width: auto;
}

div.titleBar li.user img {
  width: 3em;
  border-radius: 50%;
}

div.titleBar ul.branding span.appVersion {
  display: none;
}

div.titleBar div.hamburger {
  position: relative;
  top: -14px;
  float: right;
  line-height: 2.75em;
}

div.headerUnder {
  height: .75rem;
  background-color: #121212;
  clear: both;
}

/* Use .includeLinks class to make headerUnder taller to accomodate the links */
div.headerUnder.includeLinks .hamburger {
  right: 1em;
  top: 0;
  position: absolute;
}

div.headerUnder.includeLinks {
  position: relative;
  height: 3em;
  line-height: 3em;
}

div.headerUnder.includeLinks span {
  padding: 0 1em;
}

div.headerUnder.includeLinks .menu > li > a {
  line-height: 1.75em;
  padding: .6rem 1rem;
}

div.headerUnder.includeLinks .menu > li:hover {
  background-color: #242424;
  color: #FFF;
}

div.headerUnder ul.menu li {
  position: relative;
}

div.headerUnder ul.menu li.active > a {
  background-color: #242424;
}

div.headerUnder ul.menu li.active > a:hover {
  background-color: #242424;
}

/* 
 * This creates the carrot for the active screen.  There are application 
 * specific changes 'left' which are used to center it.
 */
div.headerUnder ul.menu li.active:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #F0F0F0 transparent;
  top: 32px;
  left: 32px;
}

.headerUnder.includeLinks.fixed {
  position: fixed !important;
  width: 100%;
  height: 3.1em !important;
  top: 0;
  z-index: 100;
  margin: 0 auto;
}

div.headerUnder ul.menu li.active:after {
  top: 34px;
}

div#offCanvasLeft .menu,
div#offCanvasRight .menu {
  background: none;
  background-color: #000000;
  z-index: 101;
}

div.jumpTo .menu > li > a,
div#offCanvasLeft .menu > li > a,
div#offCanvasRight .menu > li > a {
  line-height: 2em;
}

div.jumpTo .menu li a {
  color: #FFFFFF;
}

div.jumpTo .menu li a: {
  color: #9E9E9E;
}

div.jumpTo .menu li {
  background-color: #000000;
}

div.jumpTo.panel {
  background-color: #000;
  background-image: none;
  width: 15em;
  top: 1em;
}

div.jumpTo.panel.fixed {
  top: 4em;
  position: fixed;
}

div.jumpTo .close {
  margin-bottom: 1em;
}

div.infoBar {
  color: #FFFFFF;
  background: #000000;
  padding: .5em;
  border-radius: .3rem;
  margin-top: 1em;
}

.red {
  color: red !important;
}

.green {
  color: #009C00 !important;
}

.blue {
  color: #246BA1 !important;
}

/* Begin leaders */
ul.leaders {
  max-width: 40em;
  padding: 0;
  overflow-x: hidden;
  list-style: none;
}

ul.leaders li {
  overflow: hidden;
}

ul.leaders li:after {
  float: left;
  width: 0;
  white-space: nowrap;
  content:
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . ";
}

ul.leaders span:first-child {
  padding-right: 0.33em;
  background-color: #000000;
}

ul.leaders span + span {
  float: right;
  padding-left: 0.33em;
  background-color: #000000;
  position: relative;
  z-index: 1;
}

.inactive:not(.pending) ul.leaders span:first-child,
.inactive:not(.pending) ul.leaders span + span {
  background-color: #525252;
}

.pending:not(.inactive) ul.leaders span:first-child,
.pending:not(.inactive) ul.leaders span + span {
  /*background-color: #7EC03D;*/
}

/* Begin alternate leaders that validate within a <label> */
span.leaders {
  overflow: hidden;
}

span.leaders:after {
  display: block;
  overflow: hidden;
  height: 14px;
  white-space: nowrap;
  content:
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . ";
}

span.leaders span.leaderLabel {
  float: left;
  padding: 0 4px 0 0;
  margin: 0;
}

span.leaders span.leaderValue {
  float: right;
  padding: 0 0 0 4px;
  margin: 0;
}
/* End alternate leaders that validate within a <label> */
/* End leaders */

/* Begin classes for the dynamic return to top icon */
.returnToTop {
  display: none;
  z-index: 90;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 10px;
  box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 ), inset 0 0 0 1px rgba( 0, 0, 0, 0.2 ), inset 0 1px 0 rgba( 255, 255, 255, .4 ), inset 0 10px 10px rgba( 255, 255, 255, .1 );
  border: 1px solid #000;
  background: #111;
  border-radius: .3rem;
  opacity: .6;
}

.returnToTop > span {
  display: block;
  overflow: hidden;
  width: 24px;
  height: 24px;
  background: url(/includes/assets/themes/metronetLYI/chevron-up.svg) no-repeat;
  background-size: 24px 24px;
}
/* End classes for the dynamic return to top icon */

.title {
  color: #00C900;
  font-size: 1.25em;
  font-weight: bold;
  text-transform: uppercase;
}

/* Begin autocomplete styling */
.ui-autocomplete .ui-menu-item {
  text-transform: uppercase;
}

.ui-autocomplete.ui-widget-content .ui-menu-item.ui-state-focus,
.ui-autocomplete.ui-widget-content .ui-menu-item-wrapper.ui-state-active {
  border-top: 1px solid #ABABAB;
  border-bottom: 1px solid #ABABAB;
  background: #FFF;
  color: #6A6A6A;
  cursor: pointer;
  font-weight: bold;
}

.ui-autocomplete.ui-widget-content li:first-of-type .ui-menu-item-wrapper.ui-state-active {
  border-top: initial;
}

.ui-autocomplete.ui-widget-content li:last-of-type .ui-menu-item-wrapper.ui-state-active {
  border-bottom: initial;
}

.ui-autocomplete {
  background-color: #FFF;
  position: absolute;
}

ul.ui-autocomplete.ui-widget-content {
  border-bottom-right-radius: .3rem;
  border-bottom-left-radius: .3rem;
}

ul.ui-autocomplete.ui-widget-content {
  border: 1px solid #242424;
  background: #121212;
  color: #FFFFFF;
}

.ui-autocomplete-loading {
  background: black url('/includes/assets/themes/metronetLYI/ajax-loader-arrows.svg') right center no-repeat !important;
  background-size: 24px 24px;
  height: 24px;
  width: 24px;
}
/* End autocomplete styling */

/* Begin datepicker styling */
.ui-datepicker .ui-state-default,
.ui-datepicker.ui-widget-content .ui-state-default {
  background: transparent;
  color: #FFFFFF;
  top: 6px;
}

div.datepicker,
div.datepicker input.datepicker {
  width: 8.5em;
  display: inline-block;
  position: relative;
  margin: 0;
}

.form.datepicker input[type=text],
.form .datepicker input[type=text] {
  cursor: pointer;
  text-align: left;
  position: relative;
  height: 1.9em;
  width: 10em; /* NOTE - Changing this can cause issues with some datepickers */
}

/* Icon */
div.datepicker:after {
  content: "\f124";
  font-family: 'foundation-icons';
  font-size: 24px;
  position: absolute;
  top: 1px;
  pointer-events: none;
  right: 25px;
  right: -15px;
  color: #9645FD;
}

.ui-datepicker {
  display: none;
  background: #242424;
  border-radius: .3rem;
  font-size: 1em;
  color: #FFFFFF;
  z-index: 99 !important;
  text-decoration: none;
  padding: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, .1);
  width: 250px;
  margin-left: -5.5em;
}

.ui-datepicker .ui-datepicker-header {
  color: #FFFFFF;
  border: none;
  background: #242424;
  padding: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  color: transparent;
}  

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: none;
}

.ui-datepicker .ui-datepicker-prev:after,
.ui-datepicker .ui-datepicker-next:after {
  content: "";
  cursor: pointer;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #FFFFFF;
  font-size: 20px;
  position: absolute;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 4px;
}

.ui-datepicker .ui-datepicker-prev:hover:after,
.ui-datepicker .ui-datepicker-next:hover:after {
}

.ui-datepicker .ui-datepicker-prev:after {
  content: url(/includes/assets/themes/metronetLYI/chevron-left.svg);
  content: "";
  left: 10px;
  top: 10px;
  transform: rotate(-220deg);
  -webkit-transform: rotate(-220deg);
  color: #FFFFFF;
}

.ui-datepicker .ui-datepicker-next:after {
  content: "";
  right: 10px;
  top: 10px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker .ui-datepicker-next.ui-state-disabled {
  display: none;
}

.ui-datepicker .ui-datepicker-title {
  color: #FFFFFF;
}

.ui-datepicker table {
  margin-bottom: 0;
}

.ui-datepicker thead {
  display: inline-block;
  padding: 5px 0;
}

.ui-datepicker td,
.ui-datepicker th {
  padding: 3px !important;
}

.ui-datepicker th {
  text-align: center;
  display: inline-block;
  width: 34px;
  line-height: 1;
}

.ui-datepicker td {
  text-align: center;
  line-height: 1;
  display: inline-block;
  width: 34px;
  height: 34px;
}

.ui-datepicker td.ui-state-disabled:not(.ui-datepicker-unselectable) {
  color: #F97066;
  text-decoration: line-through;
  background: transparent;
  border: none;
  cursor: default !important;
}

.ui-datepicker td.ui-datepicker-other-month.ui-state-disabled {
  border: 0;
}

.ui-datepicker td.ui-state-disabled:hover {
  background-color: transparent;
}

.ui-datepicker .ui-state-highlight {
  padding: 0;
}

.ui-datepicker td:hover {
  cursor: pointer;
  background: #3C3C3C;
  border-radius: 50%;
}

.ui-datepicker td a {
  color: #767676;
  text-decoration: none;
  position: relative;
}

.ui-datepicker td a:hover,
.ui-datepicker a.ui-state-default:hover,
.ui-datepicker td:hover a.ui-state-default {
  color: #fff;
}
/* End datepicker styling */

/* Convenience classes for compatibility with jQuery UI */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: .3rem;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: .3rem;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: .3rem;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: .3rem;
}

/* Begin error.tmpl styling */
body.forbidden .content .error,
body.errorPage .content .error {
  border: 1px solid #242424;
  padding: 1em;
  border-radius: .3rem;
}

body.errorPage .content ul {
  margin-left: 3em;
  margin-bottom: 1em;
  list-style-type: disc;
}

body.errorPage .content .error .title {
  text-transform: uppercase;
  color: #CD0A0A;
}

body.errorPage .content .error .body {
  color: #B2B2B2;
  background-color: #121212;
  padding: 0 1em 1em 1em;
}
/* End error.tmpl styling */

/* Begin displaying error messages in a window shade across the top */
div.alertSizeCalc {
  margin: 0 auto;
  visibility: hidden;
  position: fixed;
  left: -1000px;
  padding: .5em;
  border: 1px solid #fff;
  max-width: 75%;
}

div.alertContainer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  max-width: 75%;
}

div.alertContainer div.closeAll {
  padding: .5em;
  color: #FFFFFF;
  background: #00C900;
  border-right: 1px solid #00A600;
  border-left: 1px solid #00A600;
  border-bottom: 1px solid #00A600;
  box-shadow: 0px 0px 7px 0px #818181;
  border-radius: .3rem;
  text-align: center;
  width: 100px;
  margin: 0 0 0 auto;
  cursor: pointer;
}

div.alert {
  position: relative;
  display: none;
  margin: 0 auto;
  padding: .5em;
  color: #FFFFFF;
  background: #00C900;
  border-right: 1px solid #00A600;
  border-left: 1px solid #00A600;
  border-bottom: 1px solid #00A600;
  border-bottom-left-radius: .3rem;
  border-bottom-right-radius: .3rem;
  box-shadow: 0px 4px 20px rgba(255, 255, 255, .25);
  position: fixed;
  max-width: 75%;
  top: 0;
  left: 12.5%;
  z-index: 10000;
}

div.alertContainer div.alert {
  position: relative;
  margin-bottom: .25em;
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;
  max-width: 100%;
  left: 0;
}

div.alertContainer div.alert:first-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

div.alert span.close {
  cursor: pointer;
  font-weight: bold;
  display: inline-block;
  font-size: 2em;
  line-height: 1em;
  top: 0px;
  right: 10px;
  position: absolute;
}

div.alert ul {
  list-style-position: outside;
  list-style-type: disc;
  margin-left: 1em;
}

div.alert ul li {
  margin-left: 1.5em;
}
/* End displaying error messages in a window shade across the top */

#reauth {
  width: 18.75em !important;
}

/* Begin special modal -- only covers the content area */
.contentOverlay {
  z-index: 100;
  background: #3B3B3B;
  filter: Alpha(Opacity=80);
  opacity: .8;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* End special modal -- only covers the content area */

/* Begin dialog styling */
.dialog {
  overflow: hidden !important;
}

.dialog.ui-widget-content {
  border: none;
  background: #EBEBEB;
  background: #FFF;
  color: #767676;
  min-width: 18.75em;
  outline-color: initial;
}

.dialog .ui-dialog-content {
  color: #FFFFFF;
  background: #121212;
  border: 1px solid #242424;
  border: none;
  padding: 2em;
}

.dialog .ui-dialog-titlebar {
  display: none;
}

/* Modal overlay */
.ui-widget-overlay {
  background: #3B3B3B;
  filter: Alpha(Opacity=80);
  opacity: .8;
}

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* End dialog styling */

#loader {
  color: #FFFFFF;
  background: #00C900;
  border-right: 1px solid #00A600;
  border-left: 1px solid #00A600;
  border-bottom: 1px solid #00A600;
  border-bottom-left-radius: .3rem;
  border-bottom-right-radius: .3rem;
  left: 50%;
  margin-left: -57px;
}

#loader div {
  background-image: url(/includes/assets/themes/metronetLYI/loading-9645fd.gif);
  position: relative;
  top: 0.15rem;
  height: 16px;
  width: 16px;
}

p {
  margin: .5em 0;
}

a {
  color: #FFF;
  text-decoration: none;
}

.unsupportedBrowser .content a {
  color: #FFFFFF;
  text-decoration: none;
}

.unsupportedBrowser .content a:hover {
  color: #9E9E9E;
}

h1 {
  font-size: 1.1em;
  color: #00C900;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: .75em;
  margin-bottom: .5em;
}

h2 {
  font-size: 1.25em;
  color: #246BA1;
  font-weight: bold;
  margin-bottom: .75em;
  text-align: center;
}

h5 {
  font-size: 1rem;
}

form fieldset {
  margin: 0;
}

form table tr td {
  padding: 0;
}

form table tr td:first-of-type {
  text-align: left;
}

form#login,
form#login label {
  width: auto; /* Needed for IE */
  width: initial;
}

.form label {
  line-height: 1em;
  position: relative;
}

#qmanagerLoginDialog {
  position: relative;
}

#qmanagerLoginDialog .close {
  position: absolute;
  top: 0;
  right: 1em;
  transform: scale(2);
  cursor: pointer;
}

form#qmLogin button,
form#login button {
  width: 100%;
  margin-top: 1em;
}

table td,
form table tr td {
  padding-bottom: 1em;
}

.dialog form table tr:last-of-type td {
  padding-bottom: 0;
}

form table {
  line-height: 1em;
}

.form {
  color: #FFFFFF;
}

.form div.error {
  padding: .25em;
  border-radius: .3rem;
  position: relative;
  top: -.25em;
  left: -.25em;
}

.error {
  border: 1px solid #242424;
  background-color: #121212 !important;
  color: #b2b2b2 !important;
}

.form .error {
  border: 1px solid #F04438 !important;
  border-radius: .3rem;
}

.error[data-error-container] {
  background-color: transparent !important;
}

.form input[type="radio"] {
  margin-right: .5em;
}

.form input.gap[type="radio"] {
  margin-left: 1em;
}

.form select,
.form textarea,
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="number"],
.form input[type="search"] {
  width: 100%;
  border-radius: .3rem;
  line-height: 1em;
  background-color: #121212;
  border: 1px solid #242424;
  color: #FFFFFF;
  color: #b2b2b2;
  padding: 10px 14px;
  height: 3em;
  box-shadow: 0 0px 2px rgba(16, 24, 40, .8);
}

.form textarea {
  color: #B2B2B2;
  height: 8em;
  resize: vertical;
  overflow: hidden;
}

.form select:hover,
.form textarea:hover,
.form input:hover {
  background-color: #242424;
}

/* Begin custom radio/checkbox styling */
.form [type="radio"],
.form [type="checkbox"] {
  position: absolute;
  visibility: hidden;
  height: 0;
  width: 0;
  left: -9999px;
}

.form [type="radio"] + label,
.form [type="checkbox"] + label {
  position: relative;
  cursor: pointer;
  padding: .5em 1em .5em 2em;
  padding: .5em 0 .5em 2em;
  padding: .5em 0 .5em 1.75em;
  top: 0;
}

.form [type="radio"] + label.hidden,
.form [type="checkbox"] + label.hidden {
  display: none;
}

.form [type="radio"].checkboxRight + label,
.form [type="checkbox"].checkboxRight + label {
  position: relative;
  cursor: pointer;
  padding: .5em 1em .5em 0;
  padding: .5em 0;
}

/* checkbox aspect */
.form [type="radio"] + label:before,
.form [type="checkbox"] + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: .25em;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid #242424;
  background: #121212;
  border-radius: .3rem;
}

.form [type="radio"].checkboxRight + label:before,
.form [type="checkbox"].checkboxRight + label:before {
  content: '';
  position: absolute;
  left: auto;
  right: -2em; 
  top: .25em;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid #E0E0E0;
  background: #FFF;
  border-radius: .3rem;
}

/* checked mark aspect */
.form [type="radio"] + label:after,
.form [type="checkbox"] + label:after {
  content: '\2714';
  position: absolute;
  top: .5em;
  left: .3125em;
  font-size: 1em;
  line-height: 1em;
  transition: all .1s;
  color: #00C900;
}

.form [type="radio"].checkboxRight + label:after,
.form [type="checkbox"].checkboxRight + label:after {
  content: '\2714';
  position: absolute;
  top: .5em;
  left: auto;
  right: -1.7em;
  font-size: 1em;
  line-height: 1em;
  transition: all .1s;
  color: #B3B3B3;
}

/* checked mark aspect changes */
.form [type="radio"]:not(:checked) + label:after,
.form [type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}

.form [type="radio"]:checked + label:after,
.form [type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1.25);
}

/* disabled checkbox */
.form [type="radio"]:disabled + label:before,
.form [type="checkbox"]:disabled + label:before {
  box-shadow: none;
  border-color: #3C3C3C;
  background-color: #121212;
}

.form [type="radio"]:disabled:checked + label:after,
.form [type="checkbox"]:disabled:checked + label:after {
  color: #3C3C3C;
}

.form [type="radio"]:disabled + label,
.form [type="checkbox"]:disabled + label {
  cursor: auto;
  cursor: not-allowed;
  color: #B2B2B2;
}

/* accessibility */
.form [type="radio"]:focus + label:before,
.form [type="checkbox"]:focus + label:before {
}

/* hover style just for information */
.form label:hover:before {
  background-color: #242424;
}
/* End custom checkbox styling */

.ui-state-default,
.ui-widget-content .ui-state-default,
.button,
.ui-button,
.ui-small-button {
  border: none;
  background: none;
  background-color: #F0F022;
  border: none;
  color: #000000;
  text-transform: uppercase;
  line-height: 1.5em;
  font-weight: bold;
  border-radius: 9999px;
  padding: 1em 2em;
  font-weight: normal;
}

.ui-datepicker .ui-state-default {
  border-radius: 0;
  padding: 0;
  line-height: 1;
}


.button, 
.ui-button {
  padding: 1em 2em;
}

.ui-small-button {
  padding: .064em 1em;
}

.ui-button.ui-state-hover {
  background: #D9D91D;
}

.ui-button.ui-state-active.selectable {
  background-color: #003398;
}

.button:focus, .button:hover {
  background: #D9D91D;
  color: #000000;
}

body .ui-tooltip {
  border-width: 2px;
} 

.ui-tooltip {
  padding: .5em;
  position: absolute;
  z-index: 9999;
  box-shadow: 0 0 5px #aaa;
}

.tooltipStyle {
  max-width: 35.5em;
  background: #000000;
  color: #FFFFFF;
  border: none;
  border-radius: .3rem;
}

.ui-front {
  z-index: 100;
}

.ui-dialog {
  border-radius: .3rem;
} 

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Begin footer styling */
.footer {
  box-shadow: inset 0px 7px 20px -10px #000000;
  background-color: #000000;
  color: #FFF;
  min-height: 14em;
  padding: 2em 2em;
}

.footer .row {
  font-size: .8rem;
}

.footer .column {
  padding-left: 0;
}

.footer .links {
  text-transform: uppercase;
  margin-left: 1em;
  float: none;
  margin-bottom: 2em;
}

.footer .links .column {
  margin-bottom: .25em;
}

.footer .links a:after {
  content: "";
  position: relative;
  left: .5em;
}

.footer .links .last a:after {
  content: "";
}

.footer a:hover {
  color: #9E9E9E;
}


.footer .menu {
  float: none;
  /*text-transform: uppercase;*/
}

.footer .menu>li a {
  font-size: .9rem;
  padding: .5rem 0;
}

.footer .menu>li:last-of-type a {
  padding-bottom: 2rem;
}
/* End footer styling */

.loginTitle {
  margin: 0 auto;
  text-align: center;
}

.loginTitle h1 {
  font-weight: normal;
  font-size: 1.5em;
  text-transform: none;
  margin-bottom: 0;
}

.loginTitle img {
  position: relative;
  left: -1.9em;
}

/* Begin flyout panel */
.panel {
  position: absolute;
  width: 19.5em;
  top: 4em;
  left: -9999px;
  padding: .75em;
  box-shadow: 0 0px 16px rgba(16, 24, 40, .8);
  background-color: #00428A;
  background-image: url(/includes/assets/themes/metronetLYI/Property-1Gradient-3.png);
  background-size: cover;
  z-index: 99;
  transition-duration: 0.4s;
  text-align: left;
  border-top-right-radius: .3rem;
  border-bottom-right-radius: .3rem;
}

#panelModalOverlay {
  z-index: 98;
  position: fixed;
  overflow: hidden;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #000;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.panel.active {
  left: 0em;
}

.panel[data-right] {
  left: initial;
  right: -9999px;
  border-top-left-radius: .3rem;
  border-bottom-left-radius: .3rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.panel.active[data-right] {
  /*left: initial;*/
  right: 0em;
}

.panel .close {
  text-align: center;
  position: relative;
}

.panel .close span.title {
}

.panel .close span[title=Close] {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 .2em;
  cursor: pointer;
  font-size: 2em;
  font-weight: bold;
  line-height: .75em;
}

.panel table {
  width: 18em;
  margin-bottom: 0;
}

.panel .button {
  margin-top: 1em;
  width: 100%;
}
/* End flyout panel */

.serviceHeader {
  background-color: #000000;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  margin-top: .5em;
  position: relative;
  height: 2em;
  line-height: 2em;
}

.serviceBox {
  position: relative;
  padding: 1em;
  width: 100%;
  line-height: 1.25em;
  margin-top: .5em;
}

.serviceBox.active {
  background-color: #000000;
  color: #B2B2B2;
}

.serviceBox.inactive {
  color: #B2B2B2;
  background-color: #525252;
}

.serviceBox.pending {
  background-color: #000000;
  color: #009C00;
}

.serviceBox.pendingInactive {
  background-color: #000000;
  color: #F04438;
}

.serviceBox.pendingInactive .collapsibleContainer {
  color: #00C900;
}

/* Begin toolbar - search, refresh, collapsibleToggleAll */
.toolbarContainer {
  clear: both;
}

div.tableBorder .toolbarContainer {
  position: absolute;
  top: .75em;
  right: 6.5em;
}

.toolbarContainer .search {
  position: relative;
  float: right;
  cursor: pointer;
  margin-left: .75em;
}

.toolbarContainer .search input {
  z-index: 101;
  position: absolute;
  top: -5px;
  width: 10em;
  right: 2em;
  right: -.4em;
  padding-right: 1em;
}

.toolbarContainer .search .icon.open {
  background: transparent url('/includes/assets/themes/metronetLYI/search.svg') center center / 20px 20px no-repeat;
  position: relative;
  top: 4px;
  width: 20px;
  height: 20px;
  right: -2px;
}

.toolbarContainer .search .icon.close {
  z-index: 102;
  position: absolute;
  top: -5px;
  right: -.5em;
  width: 1em;
  height: 1em;
  cursor: pointer;
  transform: scale(2);
  color: #9645FD;
}

.toolbarContainer .search .icon.close:after {
  content: "\0000D7";
  position: relative;
  top: 4px;
}

.toolbarContainer .edit {
  z-index: 1;
  float: right;
  margin-left: 1em;
  cursor: pointer;
  position: relative;
  top: 3px;
}

.toolbarContainer .edit:after {
  font-family: 'foundation-icons';
  content: '\f184';
  cursor: pointer;
  color: #9645FD;
  font-size: 20px;
  position: relative;
}

.toolbarContainer .add {
  z-index: 1;
  float: right;
  margin-left: 1em;
  cursor: pointer;
  position: relative;
  top: 3px;
}

.toolbarContainer .add:after {
  font-family: 'foundation-icons';
  content: '\f199';
  cursor: pointer;
  color: #9645FD;
  font-size: 1.25em;
  position: relative;
}

.toolbarContainer .refresh {
  z-index: 1;
  float: right;
  margin-left: 1em;
  cursor: pointer;
  position: relative;
  top: 5px;
  background: transparent url('/includes/assets/themes/metronetLYI/arrows.svg') center center / 20px 20px no-repeat;
  width: 20px;
  height: 20px;
}

.rotate {
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.toolbarContainer .collapsibleToggleAll {
  background: transparent url('/includes/assets/themes/metronetLYI/eye.svg') center center / 20px 20px no-repeat;
  color: #767676;
  height: 20px;
  width: 20px;
  cursor: pointer;
  float: right;
  margin-left: 1em;
  top: .25em;
  position: relative;
}

.toolbarContainer .collapsibleToggleAll.hide {
  display: inherit !important;
}
/* End toolbar - search, refresh, collapsibleToggleAll */

.collapsibleContainer {
  cursor: pointer;
  position: absolute;
  top: .25em;
  right: .25em;
  text-align: center;
  clear: both;
}

.collapsibleContainer .show,
.collapsibleContainer .hide {
  width: 1.5em;
  width: 2em;
  height: 1.5em;
  display: block !important;
  float: right;
  margin-left: .75em;
}

.collapsibleContainer .hide {
  border: 3px solid #00C900;
  line-height: 1em;
}

.collapsibleContainer .show {
  border: none;
  line-height: 1.4em;
}

.collapsible.hide {
  display: inherit !important;
  border: 3px solid #00C900;
  line-height: 1em;
}

.collapsible.show {
  border: none;
  border-bottom: 3px solid #00C900;
}

.active .collapsibleContainer .hide,
.active .collapsibleContainer .show {
  color: #767676;
  border-bottom: 3px solid #B2B2B2;
}

.active .collapsibleContainer .hide {
  border: 3px solid #B2B2B2;
}

.pendingInactive:not(.inactive) .collapsibleContainer .hide,
.pendingInactive:not(.inactive) .collapsibleContainer .show,
.pending:not(.inactive) .collapsibleContainer .hide,
.pending:not(.inactive) .collapsibleContainer .show {
  color: #00C900;
  border-bottom: 3px solid #00C900;
}

.pending:not(.inactive) .collapsibleContainer .hide {
  border: 3px solid #00C900;
}

.inactive:not(.pending) .collapsibleContainer .hide,
.inactive:not(.pending) .collapsibleContainer .show {
  color: #B2B2B2;
  border-bottom: 3px solid #B2B2B2;
}

.inactive:not(.pending) .collapsibleContainer .hide {
  border: 3px solid #B2B2B2;
}

.inactive.pending .collapsibleContainer .hide,
.inactive.pending .collapsibleContainer .show {
  color: red;
  border-bottom: 3px solid red;
}

.inactive.pending .collapsibleContainer .hide {
  border: 3px solid red;
}

table {
  margin-bottom: 2em;
}

table tr.link:hover {
  cursor: pointer;
}

table tr.link:hover td {
  color: #9E9E9E;
}

/* Begin results table styling */
/* A wrapper div is need around the table to provide the border */
div.tableBorder thead tr[data-column-search] th {
  border-bottom: 1px solid #767676;
  border-top: 1px solid #767676;
}

div.tableBorder thead tr[data-column-search] th {
  position: relative;
  padding: .5em 0;
}

div.tableBorder thead tr[data-column-search] th input,
div.tableBorder thead tr[data-column-search] th select {
  width: 12em;
} 

div.tableBorder {
  position: relative;
  background-color: #000000;
  padding: 1em 1em 2em 1em;
  border-radius: .3rem;
  margin-bottom: 1em;
  margin-bottom: 0;
}

div.tableBorder.smallBorder {
  padding: 0;
}

div.tableBorder:first-of-type {
  margin-top: 1em;
}

div.tableBorder.smallBorder:first-of-type {
  margin-top: 0;
}

.tableBorder table {
  width: 100% !important;
  margin-bottom: 0;
  position: relative;
  top: 1em;
} 

table.striped {
  border-radius: .3rem;
  width: 100%;
  background-color: #FFF;
}

table.striped thead {
  font-weight: bold;
}

table.striped th {
  padding: .5em .5em .5em 0;
  padding: 0 .5em .1em .25em;
  position: relative;
  color: #FFFFFF;
}

table table.striped tr:nth-of-type(odd) td,
table.striped tr:nth-of-type(odd) td {
  background-color: #242424;
}

table table.striped tr:nth-of-type(even) td,
table.striped tr:nth-of-type(even) td {
  background-color: #000000;
}

table.striped td {
  padding: .25em .25em;
  color: #FFFFFF;
}

table.striped a {
  color: #FFFFFF;
  text-decoration: underline;
}
/* End results table styling */

table.sorting th {
  cursor: pointer;
}

table.sorting th.sorting_desc:after {
  content: url(/includes/assets/themes/metronetLYI/chevron-down.svg);
  margin-left: .25em;
  position: relative;
  /*top: 6px;*/
}

table.sorting th.sorting_asc:after {
  content: url(/includes/assets/themes/metronetLYI/chevron-up.svg);
  margin-left: .25em;
  position: relative;
  /*top: 6px;*/
}

/* Small only breakpoint */
@media screen and (max-width: 39.9375em) {
  div.alertContainer {
    max-width: 100%;
  }

  div.datepicker {
    margin: -10px 0 !important;
  }

  table.smallCards thead,
  table.smallCards tbody,
  table.smallCards th,
  table.smallCards td,
  table.smallCards tr,
  table.smallCards {
    display: block;
  }

  .ie table.smallCards td,
  .ie table.smallCards tr {
    width: 100%;
  }

  table.smallCards thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table.smallCards tbody tr:nth-of-type(odd) {
    border: 1px solid #FFF;
    margin-bottom: 1em;
  }

  table.smallCards tbody tr:nth-of-type(even) {
    border: 1px solid #f0f0f0;
    margin-bottom: 1em;
  }

  table.smallCards tbody tr:nth-of-type(odd) td {
    border-bottom: 1px solid #FFF;
  }

  table.smallCards tbody td {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 6em;
  }

  table.smallCards thead tr[data-column-search] th:before,
  table.smallCards tbody td:before {
    position: absolute;
    left: 6px;
    white-space: nowrap;
  }

  table.smallCards thead tr[data-column-search] th {
    position: relative;
    padding-left: 6em;
  }

  table.smallCards thead tr[data-column-search] {
    position: relative;
    top: 0;
    left: 0;
  }

  table.smallCards thead tr[data-column-search] th {
    border: none;
    padding-top: .25em;
    padding-bottom: .25em;
  }

  table.smallCards thead tr[data-column-search] th:first-of-type {
    border-top: 1px solid #767676;
    padding-top: .5em;
  }

  table.smallCards thead tr[data-column-search] th:last-of-type {
    border-bottom: 1px solid #767676;
    padding-bottom: .5em;
  }

  .tableBorder table:not(.smallCards) td:nth-of-type(1):after {
    content: ":";
  }

  div.tableBorder thead tr[data-column-search] th input,
  div.tableBorder thead tr[data-column-search] th select {
    width: 100%;
  }
}

/* special small break point */
@media screen and (min-width: 25em) {
  div.titleBar ul.branding span.appVersion {
    display: inline;
  }
}

/* Medium break point */
@media screen and (min-width: 40em) {
  .g-recaptcha {
    transform: scale(1);
  }

  div.dataTables_wrapper div.dataTables_info {
    width: 100%;
  }

  .loginTitle h1 {
    font-size: 2em;
  }

  /* 
   * Decrease the height of the footer when the links are displaying 
   * side-by-side
   */
  .footer {
    height: 10em;
  }

  .footer .menu {
    float: right;
  }

  .footer .menu > li:last-of-type a,
  .footer .menu > li a {
    padding: 0 1rem;
  }

  .footer .menu > li:first-of-type a {
    padding: 0 1rem 0 0;
  }

  .footer .menu>li:after {
    content: "|";
    top: -1.4em;
    position: relative;
  }

  .footer .menu>li:first-of-type {
    position: relative;
    top: -.7em;
  }

  .footer .menu>li:first-of-type:after {
    content: "";
  }
}

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  table.mediumCards thead,
  table.mediumCards tbody,
  table.mediumCards th,
  table.mediumCards td,
  table.mediumCards tr,
  table.mediumCards {
    display: block;
  }

  .ie table.mediumCards td,
  .ie table.mediumCards tr {
    width: 100%;
  }

  table.mediumCards thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table.mediumCards thead tr[data-column-search] th:before,
  table.mediumCards tbody td:before {
    position: absolute;
    left: 6px;
    white-space: nowrap;
  }

  table.mediumCards thead tr[data-column-search] th {
    position: relative;
    padding-left: 6em;
  }

  table.mediumCards thead tr[data-column-search] {
    position: relative;
    top: 0;
    left: 0;
  }

  table.mediumCards thead tr[data-column-search] th {
    position: relative;
    padding-left: 6em;
  }

  table.mediumCards thead tr[data-column-search] th {
    border: none;
    padding-top: .25em;
    padding-bottom: .25em;
  }

  table.mediumCards thead tr[data-column-search] th:first-of-type {
    border-top: 1px solid #767676;
    padding-top: .5em;
  }

  table.mediumCards thead tr[data-column-search] th:last-of-type {
    border-bottom: 1px solid #767676;
    padding-bottom: .5em;
  }

  div.tableBorder thead tr[data-column-search] th input,
  div.tableBorder thead tr[data-column-search] th select {
    width: 100%;
  }

  table.mediumCards tbody tr:nth-of-type(odd) {
    border: 1px solid #FFF;
    margin-bottom: 1em;
  }

  table.mediumCards tbody tr:nth-of-type(even) {
    border: 1px solid #f0f0f0;
    margin-bottom: 1em;
  }

  table.mediumCards tbody tr:nth-of-type(odd) td {
    border-bottom: 1px solid #FFF;
  }

  table.mediumCards tbody td {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 6em;
  }

  table.mediumCards tbody td:before {
    position: absolute;
    left: 6px;
    white-space: nowrap;
  }

  .tableBorder table:not(.mediumCards) td:nth-of-type(1):after {
    /* Can't remember why this was needed, but causes trouble with nested tables
    content: ":";
    */
  }
}

/* Large break point */
@media screen and (min-width: 46em) {
}