/* Panel stuff. */
/* Fat border. */
/* Tables. */
/* Rows. */
/* Checkboxes. */
/* Third party - bootstrap */
@font-face {
  font-family: "dotsfont";
  src: url("/Content/Fonts/dotsfont.eot");
  src: url("/Content/Fonts/dotsfont.eot?#iefix") format("embedded-opentype"), url("/Content/Fonts/dotsfont.woff") format("woff"), url("/Content/Fonts/dotsfont.ttf") format("truetype"), url("/Content/Fonts/dotsfont.svg#dotsfontregular") format("svg");
}
.mask-with-dots {
  -webkit-text-security: disc;
  font-family: dotsfont;
}

body {
  background-color: #353C4B;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
}

.modern-layout-content-wrapper {
  margin-left: 377px;
  height: 100%;
  overflow: auto;
  z-index: 1;
}
.modern-layout-content-wrapper.expanded {
  margin-left: 30px;
}
.modern-layout-content-wrapper .modern-layout-content {
  display: table;
  height: 100%;
}
.modern-layout-content-wrapper .modern-layout-content .modern-layout-header-wrapper {
  display: table-header-group;
  height: 79px;
}
.modern-layout-content-wrapper .modern-layout-content .modern-layout-header-wrapper .modern-layout-header {
  height: 44px;
  margin-left: 45px;
  margin-top: 35px;
}
.modern-layout-content-wrapper .modern-layout-content .modern-layout-header-wrapper .modern-layout-header .breadcrumbs {
  display: inline-block;
  min-width: 380px;
  vertical-align: bottom;
  margin-right: 20px;
}
.modern-layout-content-wrapper .modern-layout-content .modern-layout-header-wrapper .modern-layout-header .modern-motd {
  display: inline-block;
  vertical-align: bottom;
}
.modern-layout-content-wrapper .modern-layout-content .modern-page-layout-content-wrapper {
  display: table-row-group;
}
.modern-layout-content-wrapper .modern-layout-content .modern-page-layout-content-wrapper .modern-layout-page-content {
  overflow: inherit;
  margin-left: 45px;
}
.modern-layout-content-wrapper .modern-layout-content .modern-page-layout-content-wrapper .modern-layout-page-content .modern-page-small {
  margin-top: 208px;
  margin-left: 108px;
}
.modern-layout-content-wrapper .modern-layout-content .modern-page-layout-content-wrapper .modern-layout-page-content .modern-page-large {
  margin-top: 127px;
  margin-left: 44px;
}
.modern-layout-content-wrapper .modern-layout-content .modern-page-layout-content-wrapper .modern-layout-page-content .modern-page-tall {
  margin-top: 0;
}
.modern-layout-content-wrapper .modern-layout-content .modern-layout-footer-wrapper {
  display: table-footer-group;
  height: 71px;
}
.modern-layout-content-wrapper .modern-layout-content .modern-layout-footer-wrapper .modern-layout-footer {
  margin-left: 45px;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
  height: 71px;
}
.modern-layout-content-wrapper .modern-layout-content .dynamic-height {
  height: auto;
  line-height: normal;
}

@media (max-width: 768px) {
  .modern-layout-content-wrapper {
    margin-left: 299px;
  }
  .modern-layout-content-wrapper.expanded {
    margin-left: 30px;
  }
  .modern-layout-content-wrapper .modern-layout-content .modern-layout-header-wrapper .modern-layout-header {
    margin-left: 15px;
    margin-top: 15px;
  }
  .modern-layout-content-wrapper .modern-layout-content .modern-page-layout-content-wrapper .modern-layout-page-content {
    margin-left: 15px;
  }
  .modern-layout-content-wrapper .modern-layout-content .modern-page-layout-content-wrapper .modern-layout-page-content .modern-page-small {
    margin-top: 59px;
    margin-left: 15px;
  }
  .modern-layout-content-wrapper .modern-layout-content .modern-page-layout-content-wrapper .modern-layout-page-content .modern-page-large {
    margin-top: 59px;
    margin-left: 15px;
  }
  .modern-layout-content-wrapper .modern-layout-content .modern-layout-footer-wrapper {
    height: 37px;
  }
  .modern-layout-content-wrapper .modern-layout-content .modern-layout-footer-wrapper .modern-layout-footer {
    margin-left: 15px;
    height: 37px;
  }
}
@media (max-width: 576px) {
  .modern-layout-content-wrapper .modern-layout-content {
    display: block;
    min-height: 100vh;
    /* It's unclear why, but in iPhoneX mode, the content height is no longer 100%, but much shorter. So this sets it to be 100%. */
  }
  .modern-layout-content-wrapper .modern-layout-content .modern-page-layout-content-wrapper {
    display: block;
    min-height: 70vh;
    /* To make the content appear in middle of the page and, header and footer to appear on top and bottom of the page respectively. */
  }
  .modern-layout-content-wrapper .modern-layout-content .modern-layout-header-wrapper {
    display: block;
  }
  .modern-layout-content-wrapper .modern-layout-content .modern-layout-footer-wrapper {
    display: block;
  }
}
.modern-row {
  margin-bottom: 30px;
}

.modern-narrow-row {
  margin-bottom: 10px;
}
.modern-narrow-row .col-sm-1,
.modern-narrow-row .col-sm-2,
.modern-narrow-row .col-sm-3,
.modern-narrow-row .col-sm-4,
.modern-narrow-row .col-sm-5,
.modern-narrow-row .col-sm-6,
.modern-narrow-row .col-sm-7,
.modern-narrow-row .col-sm-8,
.modern-narrow-row .col-sm-9,
.modern-narrow-row .col-sm-10,
.modern-narrow-row .col-sm-11,
.modern-narrow-row .col-sm-12 {
  padding-right: 0;
}
.modern-narrow-row .col-sm-1 {
  width: 8%;
}
.modern-narrow-row .col-sm-2 {
  width: 16%;
}
.modern-narrow-row .col-sm-3 {
  width: 24%;
}
.modern-narrow-row .col-sm-4 {
  width: 32%;
}
.modern-narrow-row .col-sm-5 {
  width: 40%;
}
.modern-narrow-row .col-sm-6 {
  width: 48%;
}
.modern-narrow-row .col-sm-7 {
  width: 56%;
}
.modern-narrow-row .col-sm-8 {
  width: 64%;
}
.modern-narrow-row .col-sm-9 {
  width: 72%;
}
.modern-narrow-row .col-sm-10 {
  width: 80%;
}
.modern-narrow-row .col-sm-11 {
  width: 88%;
}
.modern-narrow-row .col-sm-12 {
  width: 96%;
}
.modern-narrow-row .col-gap {
  position: relative;
  min-height: 1px;
  padding-right: 0;
  padding-left: 10px;
  float: left;
  width: 3%;
}

/*
  The following 3-column style "table" originated on the receiving page.

*/
.modern-3-bordered-columns {
  width: 1271px;
}
.modern-3-bordered-columns .modern-3-bordered-column-row {
  margin-bottom: 0;
}
.modern-3-bordered-columns .modern-3-bordered-column-row > .modern-3-bordered-column {
  border-left: 2px solid #ccc;
  padding-bottom: 30px;
}
.modern-3-bordered-columns .modern-3-bordered-column-row > .modern-3-bordered-column:first-child {
  border-left-width: 0;
}
.modern-3-bordered-columns .modern-3-bordered-column-row:last-child > * {
  padding-bottom: 0;
}

.modern-layout-input-group-row {
  overflow: auto;
}
.modern-layout-input-group-row .modern-layout-input-group {
  float: left;
  margin-right: 27px;
  margin-bottom: 13px;
}
.modern-layout-input-group-row > .modern-btn {
  margin-bottom: 13px;
}

.modern-layout-content .modern-layout-input-header, .modern-layout-modal-content .modern-layout-input-header {
  padding: 0 0 0 18px;
  height: 34.56px;
  line-height: 34.56px;
  vertical-align: middle;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
  background-color: #566074;
}
.modern-layout-content .modern-layout-input-header .modern-top-right-options, .modern-layout-modal-content .modern-layout-input-header .modern-top-right-options {
  padding-right: 6px;
  float: right;
  font-size: 14px !important;
}
.modern-layout-content .modern-layout-input-header .modern-top-right-options label,
.modern-layout-content .modern-layout-input-header .modern-top-right-options input,
.modern-layout-content .modern-layout-input-header .modern-top-right-options a, .modern-layout-modal-content .modern-layout-input-header .modern-top-right-options label,
.modern-layout-modal-content .modern-layout-input-header .modern-top-right-options input,
.modern-layout-modal-content .modern-layout-input-header .modern-top-right-options a {
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
  font-weight: 300;
  color: #fff;
  background-color: inherit;
  height: inherit;
  display: inline;
  width: auto;
  margin-top: 0;
}
.modern-layout-content .modern-layout-input-header .modern-top-right-options .dropdown-menu, .modern-layout-modal-content .modern-layout-input-header .modern-top-right-options .dropdown-menu {
  background-color: #fff;
}
.modern-layout-content .modern-layout-input-header .modern-top-right-options .dropdown-menu > li, .modern-layout-modal-content .modern-layout-input-header .modern-top-right-options .dropdown-menu > li {
  padding: 0 0 0 18px;
  background-color: #fff;
}
.modern-layout-content .modern-layout-input-header .modern-top-right-options .dropdown-menu *, .modern-layout-modal-content .modern-layout-input-header .modern-top-right-options .dropdown-menu * {
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
  font-weight: 300;
  color: #353C4B;
  /*$dropdown-font-color*/
  background-color: #fff;
  padding: 0;
  text-decoration: none;
}
.modern-layout-content .modern-layout-input-header .checkbox-in-header .modern-checkbox-override, .modern-layout-modal-content .modern-layout-input-header .checkbox-in-header .modern-checkbox-override {
  width: 16px;
  height: 16px;
  line-height: 16px;
}
.modern-layout-content .modern-layout-input-header .checkbox-in-header .modern-checkbox-override:before, .modern-layout-modal-content .modern-layout-input-header .checkbox-in-header .modern-checkbox-override:before {
  font-size: 14px;
  font-weight: 600;
  left: 1px;
}
.modern-layout-content .modern-layout-input-header a[data-toggle=collapse], .modern-layout-modal-content .modern-layout-input-header a[data-toggle=collapse] {
  color: #fff;
  width: 100%;
  display: inline-block;
  text-decoration: none;
}
.modern-layout-content .modern-layout-input-header a[data-toggle=collapse] .fa, .modern-layout-modal-content .modern-layout-input-header a[data-toggle=collapse] .fa {
  float: right;
  font-family: FontAwesome !important;
  margin-top: 6px;
  margin-right: 6px;
}
.modern-layout-content .modern-layout-input-header.active, .modern-layout-modal-content .modern-layout-input-header.active {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
  background-color: #D4692D;
}
.modern-layout-content .modern-layout-input, .modern-layout-content input, .modern-layout-content select, .modern-layout-content textarea, .modern-layout-modal-content .modern-layout-input, .modern-layout-modal-content input, .modern-layout-modal-content select, .modern-layout-modal-content textarea {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #4D535F;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  background-color: #E6E6E6;
  border-width: 0;
  padding: 0 0 0 18px;
  margin: 0;
  width: 100%;
  box-shadow: none;
}
.modern-layout-content .modern-layout-input.text-right, .modern-layout-content input.text-right, .modern-layout-content select.text-right, .modern-layout-content textarea.text-right, .modern-layout-modal-content .modern-layout-input.text-right, .modern-layout-modal-content input.text-right, .modern-layout-modal-content select.text-right, .modern-layout-modal-content textarea.text-right {
  padding: 0 18px 0 0;
}
.modern-layout-content textarea, .modern-layout-modal-content textarea {
  line-height: normal;
  height: auto;
}
.modern-layout-content textarea.modern-layout-input, .modern-layout-modal-content textarea.modern-layout-input {
  height: 28px;
}
.modern-layout-content textarea.no-resize, .modern-layout-modal-content textarea.no-resize {
  resize: none;
}
.modern-layout-content .modern-layout-input-large, .modern-layout-modal-content .modern-layout-input-large {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #4D535F;
  height: 34.56px;
  line-height: 34.56px;
  vertical-align: middle;
}
.modern-layout-content .modern-layout-input-validation, .modern-layout-modal-content .modern-layout-input-validation {
  padding: 0 0 0 18px;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #B94A48;
  background-color: #EADBC7;
}
.modern-layout-content .form-control[readonly], .modern-layout-content .form-control[disabled], .modern-layout-modal-content .form-control[readonly], .modern-layout-modal-content .form-control[disabled] {
  background-color: #E6E6E6;
}
.modern-layout-content input[disabled], .modern-layout-modal-content input[disabled] {
  background-color: #4D535F;
  color: #fff;
}
.modern-layout-content input, .modern-layout-content select, .modern-layout-content textarea, .modern-layout-content .input-group-addon, .modern-layout-content .input-group-btn, .modern-layout-modal-content input, .modern-layout-modal-content select, .modern-layout-modal-content textarea, .modern-layout-modal-content .input-group-addon, .modern-layout-modal-content .input-group-btn {
  /* Includes overrides for bootstrap input addons. */
  border-width: 0;
  border-radius: 0;
  background-color: #E6E6E6;
}
.modern-layout-content .input-group-btn .btn, .modern-layout-modal-content .input-group-btn .btn {
  color: #b5bac3;
  background-color: #E6E6E6;
  border-width: 0;
}
.modern-layout-content .input-group-btn .btn.selected, .modern-layout-modal-content .input-group-btn .btn.selected {
  background-color: #D4692D;
  color: #fff;
}
.modern-layout-content .input-group-btn .btn:hover,
.modern-layout-content .input-group-btn .btn:focus, .modern-layout-modal-content .input-group-btn .btn:hover,
.modern-layout-modal-content .input-group-btn .btn:focus {
  color: #4D535F;
}
.modern-layout-content .input-group-btn .btn:hover.selected,
.modern-layout-content .input-group-btn .btn:focus.selected, .modern-layout-modal-content .input-group-btn .btn:hover.selected,
.modern-layout-modal-content .input-group-btn .btn:focus.selected {
  color: #fff;
}
.modern-layout-content .input-group.danger input, .modern-layout-content .input-group.danger select, .modern-layout-content .input-group.danger textarea, .modern-layout-content .input-group.danger .input-group-addon, .modern-layout-content .input-group.danger .input-group-btn, .modern-layout-content .input-group.danger .input-group-btn .btn, .modern-layout-modal-content .input-group.danger input, .modern-layout-modal-content .input-group.danger select, .modern-layout-modal-content .input-group.danger textarea, .modern-layout-modal-content .input-group.danger .input-group-addon, .modern-layout-modal-content .input-group.danger .input-group-btn, .modern-layout-modal-content .input-group.danger .input-group-btn .btn {
  background-color: #F88;
}
.modern-layout-content .input-group-field, .modern-layout-modal-content .input-group-field {
  padding: 0 0 0 18px;
}
.modern-layout-content .modern-layout-input-group .row, .modern-layout-modal-content .modern-layout-input-group .row {
  margin-top: 13px;
}
.modern-layout-content .modern-layout-input-group.white-body .modern-layout-input-body, .modern-layout-modal-content .modern-layout-input-group.white-body .modern-layout-input-body {
  background-color: #fff;
}
.modern-layout-content .modern-layout-input-group-widest, .modern-layout-modal-content .modern-layout-input-group-widest {
  width: 468px;
}
.modern-layout-content .modern-input-x-small, .modern-layout-modal-content .modern-input-x-small {
  width: 63px;
}
.modern-layout-content .modern-input-small, .modern-layout-modal-content .modern-input-small {
  width: 98px;
}

.dark-modal .modal-body {
  background-color: #353C4B;
  color: #fff;
}

.modern-btn {
  width: 264px;
  height: 43.2px;
  line-height: 43.2px;
  vertical-align: middle;
  border-width: 0;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
  background-color: #566074;
  display: inline-block;
}
.modern-btn.modern-btn-small {
  width: 88px;
  font-size: 16px !important;
}
.modern-btn.modern-btn-small.modern-btn-medium-width {
  width: 176px;
}
.modern-btn.modern-btn-small.modern-btn-max-width {
  width: 100%;
}
.modern-btn.modern-btn-tiny {
  width: 70.4px;
  font-size: 12.8px !important;
}
.modern-btn.modern-btn-tiny.modern-btn-medium-width {
  width: 176px;
}
.modern-btn.modern-btn-tiny.modern-btn-max-width {
  width: 100%;
}
.modern-btn.modern-btn-medium-width {
  width: 176px;
}
.modern-btn.modern-btn-max-width {
  width: 100%;
}

.modern-btn-padding {
  padding: 5px;
}

.modern-btn-space {
  margin-right: 5px !important;
}

.modern-btn:hover,
.modern-btn:focus {
  color: #353C4B;
  background-color: #fff;
}

.modern-btn:active {
  color: #353C4B;
  background-color: #cccccc;
}

.modern-btn-primary {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
  background-color: #D4692D;
}

.modern-btn-primary:hover,
.modern-btn-primary:focus {
  background-color: #dd8757;
}

.modern-btn-primary:active {
  background-color: #ab5423;
}

.modern-btn-small {
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
}

.modern-btn-tiny {
  height: 22.4px;
  line-height: 22.4px;
  vertical-align: middle;
}

.modern-btn-icon {
  display: inline-block;
  width: 43.2px;
  /* to make a square icon. */
  text-align: center;
}
.modern-btn-icon.modern-btn-small {
  width: 28px;
}
.modern-btn-icon .fa {
  color: inherit;
  margin: 0 auto;
}

.modern-btn-right {
  padding-right: 40px;
  text-align: right;
}
.modern-btn-right .fa {
  margin-left: 12px;
}

.modern-btn-left {
  padding-left: 40px;
  text-align: left;
}
.modern-btn-left .fa {
  margin-right: 12px;
}
.modern-btn-left.modern-btn-small {
  padding-left: 20px;
}

.modern-btn[disabled],
.modern-btn[disabled]:hover {
  background-color: #4D535F;
  color: #fff;
}

.modern-layout-sidebar .modern-btn-primary,
.modern-layout-sidebar .modern-btn-primary:hover,
.modern-layout-sidebar .modern-btn-primary:focus,
.modern-layout-sidebar .modern-btn-primary:active {
  color: #fff;
}

/**
 * Checkbox.
 * You can't directly style a checkbox -- the browser controls that.
 * What you can do is hide the checkbox and style a sibling element,
 * and then control the checkbox state through a label.
 *
 * .modern-checbkox is a class that goes on the label.
 *
 * Reference: https://stackoverflow.com/a/27779075
 *
 * Usage:
 *  In razor, just call @Html.ModernCheckBoxFor.
 *
 * Alternately:
 *  Create a label around your checkbox, and put your text describing the checkbox
 *  after the checkbox.
 *  Then, give your *label* the class modern-checkbox.
 *  ModernLayout.js will then call ui.setupCheckboxes to add functionality
 *  and extra UI stuff for every checkbox.
 *
 * example:
 *
 *  <label class="modern-checkbox">
 *    @Html.CheckBoxFor(model => model.SearchFilters.UseDateFilter)
 *    Use Date Filter?
 *  </label>
 *
 * Alternately:
 *  The main thing the js does is add the <span> that holds our replacement
 *  checbox icon. You can add this manually. It's just a blank <span.modern-checkbox-override>, and it
 *  must *follow* the checbox input.
 *
 * example:
 *
 *  <label class="modern-checkbox">
 *    <input name="whatever" type="checkbox" />
 *    <span class="modern-checkbox-override"></span> <!-- add this span here -->
 *    Should this be on?
 *  </label>
 *
 */
.modern-checkbox {
  height: 28px;
}
.modern-checkbox span.modern-checkbox-override {
  width: 28px;
  height: 28px;
  line-height: 28px;
}

.modern-checkbox {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #4D535F;
  /* For an unchecked checkbox, modify its sibling span. */
  /* For a checked checkbox, modify its sibling span. */
  /* Some disabled checkboxes we want to hide altogether, if unchecked. */
  /* For a readonly checkbox, only show its span if it is checked. */
  /*
  [type=checkbox][readonly]:not(:checked) ~ span.modern-checkbox-override{
    display:none;
  }
  */
}
.modern-checkbox * {
  vertical-align: middle;
}
.modern-checkbox input {
  display: none;
  /* Hide the actual, wrapped, checkbox. */
}
.modern-checkbox span.modern-checkbox-override {
  /* This will be our custom checkbox, visually. */
  display: inline-block;
  position: relative;
  background-color: #E6E6E6;
}
.modern-checkbox span.modern-checkbox-override[disabled] {
  background-color: gray;
}
.modern-checkbox [type=checkbox] ~ span.modern-checkbox-override:before {
  font-family: FontAwesome !important;
  font-size: 22px;
  position: absolute;
  top: -1px;
  left: 3px;
  content: "";
}
.modern-checkbox [type=checkbox]:checked ~ span.modern-checkbox-override:before {
  /* Checked state: a standard darker checkmark. */
  color: #4D535F;
  content: "\f00c";
}
.modern-checkbox [type=checkbox][disabled].hide-unchecked:not(:checked) ~ span.modern-checkbox-override {
  display: none;
}

/**
 * Radiobuttons and groups.
 *
 * Usage, for a single radio button:
 *  Wrap the radiobutton in a label, and give that label the class .modern-radio-button.
 *  Example:
 *
 *    <label class="modern-radio-button"><input name="whatever" type="radio"> Some label!</label>
 *
 * Alternately:
 *  Call @Html.ModernRadioButtonFor
 */
.modern-layout-radio-button-group {
  background-color: #E6E6E6;
  padding: 0 0 0 18px;
  padding-bottom: 1px;
}
.modern-layout-radio-button-group.dark-font .modern-radio-button {
  color: black;
}

.modern-radio-button {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #4D535F;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
}
.modern-radio-button input[type=radio] {
  margin: 0;
  padding-right: 0 6px;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #4D535F;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  width: 14px;
}

/**
 * Select/dropdown.
 *
 * Reference: https://stackoverflow.com/a/30783140
 *
 * Usage:
 *  Just create a regular <select> (including @Html.DropDownListFor) and give
 *  it the class .modern-select.
 *  ModernLayout.js will then call ui.wrapAndSetupSelects, which will take
 *  care of wrapping and other setup.
 *
 * Alternately:
 *  You can manually wrap your <select.modern-select> in a <div.modern-select-wrapper>.
 */
.modern-select-wrapper {
  position: relative;
  display: -moz-inline-stack;
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #4D535F;
  background-color: #E6E6E6;
  width: 100%;
}
.modern-select-wrapper .modern-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  background: transparent;
  padding-right: 24px;
  /* width of chevron, plus extra padding */
  border-width: 0;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  -webkit-border-radius: 0px;
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -moz-border-radius: 0px;
  /* Firefox 1-3.6 */
  border-radius: 0px;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  width: 100%;
}
.modern-select-wrapper .modern-select option {
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #4D535F;
  background-color: #E6E6E6;
}
.modern-select-wrapper .modern-select::-ms-expand {
  /* This is to hide the default arrow in IE. */
  display: none;
}
.modern-select-wrapper.normal-width {
  width: inherit;
}
.modern-select-wrapper.normal-width .modern-select {
  width: inherit;
}

.modern-select-wrapper:after {
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  background-color: transparent;
  content: "\f078";
  font-family: FontAwesome !important;
  position: absolute;
  right: 4px;
  top: 0px;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
}

.modern-select[disabled] {
  background-color: gray;
}

.modern-select-wrapper.small-select {
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
  font-weight: 300;
  color: #4D535F;
}
.modern-select-wrapper.small-select .modern-select {
  height: 14px;
  line-height: 14px;
  vertical-align: middle;
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
  font-weight: 300;
  color: #4D535F;
}
.modern-select-wrapper.small-select .modern-select option {
  height: 14px;
  line-height: 14px;
  vertical-align: middle;
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
  font-weight: 300;
  color: #4D535F;
}
.modern-select-wrapper.small-select:after {
  height: 14px;
  line-height: 14px;
  vertical-align: middle;
  padding-top: 2px;
}

/**
 * Date-and-time.
 */
.modern-datetime-row {
  clear: both;
}
.modern-datetime-row > .form-control-static {
  width: 50%;
  float: left;
  display: inline-block;
}
.modern-datetime-row > .form-control,
.modern-datetime-row > .input-group {
  width: 50%;
  float: left;
}
.modern-datetime-row > .form-date-control,
.modern-datetime-row > .readonly-date {
  width: 60%;
}
.modern-datetime-row > .form-time-control,
.modern-datetime-row > .readonly-time {
  width: 40%;
}
.modern-datetime-row > .full-width {
  width: 100%;
}

.modern-datetime-row .datetime-date {
  padding-left: 12px;
}
.modern-datetime-row .datetime-time {
  padding-left: 6px;
}

/**
 * Table.
 */
.modern-table {
  margin-bottom: 26px;
  width: 100%;
}
.modern-table > thead > tr {
  background-color: #566074;
  height: 32px;
  line-height: 32px;
  vertical-align: middle;
}
.modern-table > thead > tr > th {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
  white-space: nowrap;
  background-color: #566074;
  padding-left: 6px;
}
.modern-table > thead > tr > th:first-child {
  padding-left: 18px;
}
.modern-table > thead > tr > th.number-field {
  text-align: right;
}
.modern-table > tbody > tr > th {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
  white-space: nowrap;
  background-color: #566074;
}
.modern-table > tbody > tr > td {
  vertical-align: top;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
  padding: 3px 6px;
  border-right: solid 2px #566074;
}
.modern-table > tbody > tr > td a {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
  text-decoration: underline;
}
.modern-table > tbody > tr > td .dropdown-menu {
  background-color: #fff;
}
.modern-table > tbody > tr > td .dropdown-menu > li {
  padding: 0 0 0 18px;
  background-color: #fff;
}
.modern-table > tbody > tr > td .dropdown-menu * {
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
  font-weight: 300;
  color: #353C4B;
  /*$dropdown-font-color*/
  background-color: #fff;
  padding: 0;
  text-decoration: none;
}
.modern-table > tbody > tr > td .dropdown-menu > .disabled > a,
.modern-table > tbody > tr > td .dropdown-menu > .disabled > a:hover,
.modern-table > tbody > tr > td .dropdown-menu > .disabled > a:focus {
  color: #777;
}
.modern-table > tbody > tr > td:first-child {
  padding-left: 18px;
}
.modern-table > tbody > tr > td:last-child,
.modern-table > tbody > tr > td.no-border {
  border-right-width: 0;
}
.modern-table > tbody > tr > td.number-field {
  text-align: right;
}
.modern-table > tbody > tr.fat-top-border > td {
  border-top: solid 4px #566074;
}
.modern-table > tbody > tr.highlighted-row > td {
  background-color: #DA8;
}
.modern-table > tbody > tr.highlighted-error-row > td {
  background-color: #f00;
}
.modern-table > tbody > tr.highlighted-success-row > td {
  background-color: #0b0;
}
.modern-table > tbody > tr.no-border > td {
  border-right-width: 0;
}
.modern-table > tbody > tr:nth-child(even) {
  background-color: #454D5F;
}
.modern-table > tbody > tr:nth-child(odd) {
  background-color: #353C4B;
}
.modern-table > tbody > tr:hover {
  background-color: #D4692D;
}
.modern-table > tbody > tr:hover.no-highlight:nth-child(even) {
  background-color: #454D5F;
}
.modern-table > tbody > tr:hover.no-highlight:nth-child(odd) {
  background-color: #353C4B;
}
.modern-table > tbody > tr:hover.highlighted-row > td {
  background-color: #D4692D;
}
.modern-table > tbody > tr:hover.highlighted-error-row > td {
  background-color: #f00;
}
.modern-table > tbody > tr:hover.highlighted-success-row > td {
  background-color: #0b0;
}
.modern-table > tbody.no-border > tr > td {
  border-right-width: 0;
}
.modern-table > tbody.no-highlight > tr:hover {
  background-color: #353C4B;
}
.modern-table > tbody.fat-padding-bottom > tr:last-child > td {
  padding-bottom: 70px;
}
.modern-table tfoot.summary {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 500;
  color: #fff;
}
.modern-table tfoot.summary td {
  padding: 6px 12px;
}
.modern-table tfoot.primary {
  color: #fff;
  background-color: #D4692D;
}
.modern-table.alternate-rows-by-2 > tbody > tr:nth-child(4n+0),
.modern-table.alternate-rows-by-2 > tbody > tr:nth-child(4n+3) {
  background-color: #454D5F;
}
.modern-table.alternate-rows-by-2 > tbody > tr:nth-child(4n+1),
.modern-table.alternate-rows-by-2 > tbody > tr:nth-child(4n+2) {
  background-color: #353C4B;
}
.modern-table.alternate-rows-by-2 > tbody > tr.no-highlight:nth-child(4n+0), .modern-table.alternate-rows-by-2 > tbody > tr.no-highlight:nth-child(4n+3) {
  background-color: #454D5F;
}
.modern-table.alternate-rows-by-2 > tbody > tr.no-highlight:nth-child(4n+1), .modern-table.alternate-rows-by-2 > tbody > tr.no-highlight:nth-child(4n+2) {
  background-color: #353C4B;
}
.modern-table.alternate-rows-by-2 > tbody > tr:hover {
  background-color: #D4692D;
}
.modern-table.non-alternating-rows > tbody > tr {
  background-color: #353C4B;
}
.modern-table.no-highlight > tbody > tr {
  background-color: #353C4B;
}
.modern-table.no-border > tbody > tr > td {
  border-right-width: 0;
}
.modern-table.small-headers {
  /*
  .modern-checkbox-override {
      height: $checkbox-small-height;
      width: $checkbox-small-width;
  }
  */
}
.modern-table.small-headers > thead > tr,
.modern-table.small-headers > thead > tr > th,
.modern-table.small-headers > tbody > tr > th {
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
  font-weight: 300;
  color: #fff;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
}
.modern-table.small-headers .modern-checkbox {
  height: 14px;
}
.modern-table.small-headers .modern-checkbox span.modern-checkbox-override {
  width: 14px;
  height: 14px;
  line-height: 14px;
}
.modern-table.small-headers [type=checkbox] ~ span.modern-checkbox-override:before {
  font-size: 12px;
  font-weight: 600;
  left: 1px;
}
.modern-table.small-records {
  /*
  .modern-checkbox-override {
      height: $checkbox-small-height;
      width: $checkbox-small-width;
  }
  */
}
.modern-table.small-records > tbody > tr > td {
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
  font-weight: 300;
  color: #fff;
}
.modern-table.small-records .modern-checkbox {
  height: 14px;
}
.modern-table.small-records .modern-checkbox span.modern-checkbox-override {
  width: 14px;
  height: 14px;
  line-height: 14px;
}
.modern-table.small-records [type=checkbox] ~ span.modern-checkbox-override:before {
  font-size: 16px;
  top: -3px;
  left: 1px;
}
.modern-table.small-padding > thead > tr > th,
.modern-table.small-padding > thead > tr > th:first-child {
  padding: 0 3px;
}
.modern-table.small-padding > tbody > tr > td,
.modern-table.small-padding > tbody > tr > td:first-child {
  padding: 0 3px;
}
.modern-table.small-padding > tbody > tr > td .input-group-field {
  padding-left: 0 3px;
}
.modern-table.small-padding > tbody > tr > td .input-group-btn {
  width: unset;
}
.modern-table.sidebar-info-table > tbody > tr {
  background-color: #fff;
  height: 16px;
  line-height: 16px;
  vertical-align: middle;
}
.modern-table.sidebar-info-table > tbody > tr > td {
  color: #353C4B;
  border-right: none;
  padding: 4px;
  word-break: break-word;
}

.modern-table-sm {
  margin-bottom: 0px;
}

/* This class can be used for some note about a table, such as a row count. */
.modern-table-note {
  border-top: solid 8px #566074;
  padding-top: 26px;
  letter-spacing: 1px;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 500;
  color: #fff;
}

/**
 * Pager. Not necessarily a part of a table, but pretty much always based on one.
 *
 * Note: many of the style choices here override the bootstrap defaults.
 */
.modern-pager {
  /* Yes, the mismatch between font-size and line-height/height is by design. */
}
.modern-pager .pagination > li > a, .modern-pager .pagination > li > span {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
  /* Yes, the mismatch between font-size and line-height/height is by design. */
  height: 44.8px;
  line-height: 32px;
}
.modern-pager .pagination li:hover > a, .modern-pager .pagination li:hover > span {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #353C4B;
}
.modern-pager.small-pager .pagination > li > a, .modern-pager.small-pager .pagination > li > span {
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
  font-weight: 300;
  color: #fff;
  /* Yes, the mismatch between font-size and line-height/height is by design. */
  height: 28px;
  line-height: 14px;
}
.modern-pager.small-pager .pagination li:hover > a, .modern-pager.small-pager .pagination li:hover > span {
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
  font-weight: 300;
  color: #353C4B;
}
.modern-pager.x-small-pager .pagination > li > a, .modern-pager.x-small-pager .pagination > li > span {
  font-family: "Roboto", sans-serif;
  font-size: 12px !important;
  font-weight: 300;
  color: #fff;
  /* Yes, the mismatch between font-size and line-height/height is by design. */
  height: 18px;
  line-height: 18px;
}
.modern-pager.x-small-pager .pagination li:hover > a, .modern-pager.x-small-pager .pagination li:hover > span {
  font-family: "Roboto", sans-serif;
  font-size: 12px !important;
  font-weight: 300;
  color: #353C4B;
}
.modern-pager.x-small-pager .pagination > li > a, .modern-pager.x-small-pager .pagination > li > span {
  padding: 0 6px;
}
.modern-pager .pagination {
  margin-top: 0;
  padding-top: 0;
}
.modern-pager .pagination > li:first-child > a, .modern-pager .pagination > li:first-child > span {
  border-radius: 0;
}
.modern-pager .pagination > li {
  margin-right: 8px;
  display: inline-block;
}
.modern-pager .pagination > li > a, .modern-pager .pagination > li > span {
  /* Yes, the mismatch between font-size and line-height/height is by design. */
  background-color: #566074;
  text-transform: uppercase;
  border-width: 0;
  letter-spacing: 1px;
}
.modern-pager .pagination > li:last-child {
  margin-right: 0;
}
.modern-pager .pagination > li:last-child > a, .modern-pager .pagination > li:last-child > span {
  border-radius: 0;
}
.modern-pager .pagination li.active > a, .modern-pager .pagination li.active > span {
  background-color: #D4692D;
}
.modern-pager .pagination li:hover > a, .modern-pager .pagination li:hover > span {
  background-color: #fff;
}
.modern-pager .pagination li.disabled > a, .modern-pager .pagination li.disabled > span, .modern-pager .pagination li.disabled:hover > a, .modern-pager .pagination li.disabled:hover > span {
  background-color: #566074;
  color: #353C4B;
}

/**
 * A modern adaptation of the main.css .box class and construct.
 */
.box header {
  background-image: none;
  padding: 0 0 0 18px;
  font-family: "Roboto", sans-serif;
  font-size: 22.4px !important;
  font-weight: 300;
  color: #fff;
  background-color: #566074;
  /*.narrow-header{
       font-size:$default-font-size!important;
  }*/
}

.box header.narrow-header {
  font-size: 16px !important;
}

.box-sm {
  margin: 0px auto;
}

.modern-box {
  border-color: #566074;
}
.modern-box header {
  border-color: #566074;
  padding-top: 5px;
  padding-bottom: 5px;
}
.modern-box header .toolbar .nav > li > a {
  padding: 0;
  color: #fff;
  background-color: #566074;
}
.modern-box header .toolbar .nav > li > a:hover {
  background-color: #D4692D;
}

/**
 * Dashboard.
 */
.dashboard-widget .header {
  padding: 0 3px;
  margin-bottom: 3px;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
  font-weight: 300;
  color: #fff;
  background-color: #566074;
  border-width: 0;
}
.dashboard-widget .header * {
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
  font-weight: 300;
  color: #fff;
  background-color: #566074;
}
.dashboard-widget .body {
  overflow-y: scroll;
  border: 1px solid #888;
  margin-bottom: 10px;
}
.dashboard-widget .body .modern-table {
  margin-bottom: 0;
}

/**
 * Ops board.
 */
.skyline-daypilot-container {
  /* IE scrollbar. */
}
.skyline-daypilot-container .menu_default_main {
  width: 225px;
}
.skyline-daypilot-container .scheduler_default_matrix_vertical_line {
  /* background-color: gray; */
}
.skyline-daypilot-container .scheduler_default_main {
  background-color: #fff;
}
.skyline-daypilot-container .scheduler_default_main .fullscreen-wait-div {
  z-index: 999;
  /* To prevent clashing with modals during Skyline_Flight_ValidateAndChangeSlotOnFlight. */
}
.skyline-daypilot-container .scheduler_default_tree_image_no_children {
  visibility: hidden;
  /* Groups that have no children are automatically given what looks like, an empty checkbox in lieu of the expand/collapse icons. This styling is to hide those boxes. */
}
.skyline-daypilot-container .scheduler_default_event_bar {
  top: auto;
  /* Without this, the bottom attribute doesn't seem to have an effect. */
  bottom: 0;
}
.skyline-daypilot-container .scheduler_default_main ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.skyline-daypilot-container .scheduler_default_main ::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background-color: #999;
}
.skyline-daypilot-container .cargo-table-col ::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}
.skyline-daypilot-container .scheduler_default_main ::-webkit-scrollbar-track {
  border-radius: 1em;
  background: lightgray;
}
.skyline-daypilot-container .scheduler_default_main ::-webkit-scrollbar-track:hover {
  background: lightgray;
}
.skyline-daypilot-container .scheduler_default_main {
  scrollbar-face-color: #999;
  scrollbar-track-color: lightgray;
}
.skyline-daypilot-container .ops-board-messages {
  position: absolute;
  width: 100%;
  height: 100%;
}
.skyline-daypilot-container .ops-board-messages .edit-messages {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
}
.skyline-daypilot-container .ops-board-messages:hover .edit-messages {
  display: block;
}
.skyline-daypilot-container .ops-board-messages p {
  display: block;
  width: 90%;
  padding-left: 2px;
}
.skyline-daypilot-container .ops-board-messages .previous-ops-board-message,
.skyline-daypilot-container .ops-board-messages .next-ops-board-message {
  position: absolute;
  display: none;
}
.skyline-daypilot-container .ops-board-messages .previous-ops-board-message {
  top: 0;
  right: 2px;
}
.skyline-daypilot-container .ops-board-messages .next-ops-board-message {
  bottom: 0;
  right: 2px;
}
.skyline-daypilot-container .ops-board-messages:hover .previous-ops-board-message,
.skyline-daypilot-container .ops-board-messages:hover .next-ops-board-message {
  display: block;
}

/* We put these at the top level (outside of .skyline-daypilot-container) to support fullscreen. */
.scheduler_default_main .event-half-top {
  padding-bottom: 1px;
}
.scheduler_default_main .event-half-top .scheduler_default_event_inner {
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
}
.scheduler_default_main .event-half-bottom .scheduler_default_event_inner {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
}
.scheduler_default_main .event-half-bottom .scheduler_default_event_float {
  border-top-width: 0 !important;
  border-top-style: none !important;
}
.scheduler_default_main .scheduler_default_matrix_horizontal_line.stressed-horizontals {
  background-color: black !important;
  line-height: 2px !important;
  height: 2px !important;
}

/**
 * TreeView
 */
.modern-tree-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid #4b4b4b;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  scrollbar-width: thin;
  scrollbar-color: #6c757d #f0f0f0;
}

.modern-tree-container {
  width: 100%;
  margin: 0;
  overflow-y: auto;
  overflow-x: auto;
  padding-bottom: 2px;
  box-sizing: border-box;
  min-height: 50px;
}

.modern-tree-checked {
  height: 20px !important;
  display: inline-block;
  vertical-align: middle;
}

.modern-tree-empty {
  font-style: italic;
  font-weight: normal;
  color: #888;
}

.treeview-expandToggle {
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.modern-tree-node {
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 1;
}

.modern-tree-node.hiddenNode {
  max-height: 0;
  opacity: 0;
}

.modern-tree-row-with-gridlines > span:not(.treeview-expandToggle):not(.checkbx-span) {
  display: flex;
  justify-content: center;
  height: 100%;
  border-left: 1px solid black;
  padding: 0 4px;
  box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.15);
}

.modern-tree-can-highlight {
  background-color: white;
  transition: background-color 0.3s ease;
}

.modern-tree-can-highlight > span:nth-child(n+3):nth-child(-n+5) {
  transition: background-color 0.3s ease;
}

.modern-tree-can-highlight:hover {
  cursor: pointer;
}

.modern-tree-can-highlight:hover > span:nth-child(3),
.modern-tree-can-highlight:hover > span:nth-child(4),
.modern-tree-can-highlight:hover > span:nth-child(5) {
  background-color: #fffacd;
  /* Light yellow background */
}

.modern-tree-can-highlight > span:nth-child(3):hover ~ span:nth-child(4),
.modern-tree-can-highlight > span:nth-child(3):hover ~ span:nth-child(5),
.modern-tree-can-highlight > span:nth-child(4):hover ~ span:nth-child(3),
.modern-tree-can-highlight > span:nth-child(4):hover ~ span:nth-child(5),
.modern-tree-can-highlight > span:nth-child(5):hover ~ span:nth-child(3),
.modern-tree-can-highlight > span:nth-child(5):hover ~ span:nth-child(4) {
  background-color: #fffacd;
  /* Light yellow background */
}

.modern-tree-warning {
  text-align: center;
  font-style: italic;
  max-width: 345px;
  border-left: 4px solid;
  border-right: 4px solid;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0px 2px;
  margin: 0 1px;
  display: inline-block;
}

.modern-tree-warning.modern-tree-warning-red {
  color: #d9534f;
  background-color: #f9ecec;
  border-color: #d9534f;
}

.modern-tree-warning.modern-tree-warning-green {
  color: #28a745;
  background-color: #e9f7ec;
  border-color: #28a745;
}

.modern-tree-warning.modern-tree-warning-blue {
  color: #007bff;
  background-color: #e3f2fd;
  border-color: #007bff;
}

.modern-tree-warning.modern-tree-warning-yellow {
  color: #ffc107;
  background-color: #fff3cd;
  border-color: #ffc107;
}

.modern-tree-warning.modern-tree-warning-black-on-yellow {
  color: #000000;
  background-color: #fff3cd;
  border-color: #ffc107;
}

.modern-tree-align-left {
  text-align: left;
  justify-content: flex-start;
}

.modern-tree-align-right {
  text-align: right;
  justify-content: flex-end;
}

.modern-tree-align-center {
  text-align: center;
  justify-content: center;
}

.modern-tree-template-link {
  color: #00a2ff;
  font-weight: bold;
  text-decoration: none;
}

.modern-tree-template-link:hover {
  color: #0085cc;
  text-decoration: underline;
}

/* These are just for some inline HTML line formatting */
.text-bold {
  font-weight: bold;
}

.text-regular {
  font-weight: normal;
}

/**
 * DIY UI, that users can customize for themselves.
 */
.skyline-diyui-container [data-diyui-component-name] {
  display: none;
}
.skyline-diyui-container .skyline-diyui-component-placeholder {
  display: none;
}
.skyline-diyui-container.viewmode [data-diyui-component-name] {
  display: block;
}
.skyline-diyui-container.viewmode [data-diyui-component-name].skyline-diyui-component-placeholder {
  display: none;
}

.modern-layout-sidebar-wrapper {
  background-color: #fff;
  position: fixed;
  height: 100%;
  width: 377px;
  float: left;
  padding-top: 49px;
  padding-left: 71px;
  padding-right: 37px;
  overflow-y: visible;
  z-index: 3;
}
.modern-layout-sidebar-wrapper.collapsed {
  width: 30px;
  padding: 0;
}
.modern-layout-sidebar-wrapper.collapsed .modern-layout-sidebar {
  display: none;
}
.modern-layout-sidebar-wrapper a {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #353C4B;
  text-decoration: none;
}
.modern-layout-sidebar-wrapper a:hover {
  color: #5f6c87;
  text-decoration: none;
}

.modern-layout-sidebar {
  background-color: #fff;
  height: 100%;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #353C4B;
  /* .modern-sidebar-content */
}
.modern-layout-sidebar .modern-btn-icon {
  font-size: 16px !important;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  margin: 0 6px 0 0;
}
.modern-layout-sidebar input, .modern-layout-sidebar select, .modern-layout-sidebar textarea {
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #4D535F;
  padding: 0 0 0 8px;
  box-shadow: none;
}
.modern-layout-sidebar textarea {
  line-height: normal;
  height: auto;
}
.modern-layout-sidebar .form-control[readonly], .modern-layout-sidebar .form-control[disabled] {
  background-color: #E6E6E6;
}
.modern-layout-sidebar input, .modern-layout-sidebar select, .modern-layout-sidebar textarea, .modern-layout-sidebar .input-group-addon, .modern-layout-sidebar .input-group-btn {
  /* Includes overrides for bootstrap input addons. */
  border-width: 0;
  border-radius: 0;
  background-color: #E6E6E6;
}
.modern-layout-sidebar .input-group-btn .btn {
  color: #b5bac3;
  background-color: #E6E6E6;
  border-width: 0;
}
.modern-layout-sidebar .input-group-btn .btn:hover,
.modern-layout-sidebar .input-group-btn .btn:focus {
  color: #4D535F;
}
.modern-layout-sidebar .modern-sidebar-commands .modern-sidebar-command {
  float: right;
  margin-left: 20px;
  font-size: 20px !important;
  background-color: #fff;
}
.modern-layout-sidebar .modern-sidebar-commands .modern-sidebar-command sup {
  color: #D4692D;
}
.modern-layout-sidebar .modern-sidebar-commands .modern-sidebar-command .dropdown, .modern-layout-sidebar .modern-sidebar-commands .modern-sidebar-command .dropdown-toggle {
  padding: 0;
  margin: 0;
}
.modern-layout-sidebar .modern-sidebar-commands .modern-sidebar-command .fa {
  font-size: 20px !important;
  line-height: 1.42857143;
}
.modern-layout-sidebar .modern-sidebar-commands .modern-sidebar-command :hover {
  background-color: #fff;
}
.modern-layout-sidebar .modern-sidebar-commands .modern-sidebar-command .modern-messages-dropdown {
  position: fixed;
  top: inherit;
  left: 200px;
}
.modern-layout-sidebar .modern-sidebar-commands .nav .open > a, .modern-layout-sidebar .modern-sidebar-commands .nav .open > a:hover, .modern-layout-sidebar .modern-sidebar-commands .nav .open > a:focus {
  background-color: #fff;
}
.modern-layout-sidebar .modern-sidebar-brand {
  display: block;
  width: 134px;
  height: 33px;
  background-image: url("/Content/images/SkylineLogoLight.png");
  background-color: #000;
  margin-top: 86px;
  margin-bottom: 10px;
}
.modern-layout-sidebar .modern-sidebar-content {
  margin-top: 256px;
  /* .modern-search-form */
}
.modern-layout-sidebar .modern-sidebar-content .modern-sidebar-title {
  font-family: "Roboto", sans-serif;
  font-size: 24px !important;
  font-weight: 300;
  color: #D4692D;
}
.modern-layout-sidebar .modern-sidebar-content .modern-sidebar-option {
  display: block;
  overflow: auto;
  text-transform: uppercase;
  margin-right: -37px;
  margin-bottom: 15px;
}
.modern-layout-sidebar .modern-sidebar-content .modern-sidebar-option .modern-sidebar-option-icon {
  margin-right: 12px;
  width: 16px;
  text-align: center;
}
.modern-layout-sidebar .modern-sidebar-content .modern-sidebar-option .modern-sidebar-option-text {
  letter-spacing: 2px;
}
.modern-layout-sidebar .modern-sidebar-content .modern-sidebar-option * {
  display: block;
  float: left;
}
.modern-layout-sidebar .modern-sidebar-content .modern-sidebar-option-primary {
  color: #D4692D;
}
.modern-layout-sidebar .modern-sidebar-content .modern-sidebar-option-primary a {
  color: #D4692D;
}
.modern-layout-sidebar .modern-sidebar-content .modern-sidebar-option-primary a:hover {
  color: #e5a582;
}
.modern-layout-sidebar .modern-sidebar-content .modern-sidebar-content-footer {
  display: block;
  margin-top: 0;
  border-top: solid 3px #ccc;
  text-transform: uppercase;
}
.modern-layout-sidebar .modern-sidebar-content .modern-sidebar-content-footer .modern-sidebar-content-footer-header {
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 9px;
  letter-spacing: 2px;
}
.modern-layout-sidebar .modern-sidebar-content .modern-sidebar-content-footer .modern-sidebar-content-footer-info {
  color: #D4692D;
  letter-spacing: 1px;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form {
  /* .modern-body */
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form > .modern-header {
  margin-bottom: 10px;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-header {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 500;
  color: #353C4B;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  border-bottom: 4px solid #eee;
  border-top: 4px solid #eee;
  padding-bottom: 10px;
  padding-top: 10px;
  margin-bottom: 10px;
  /* .modern-panel */
  /* .modern-panel:hover */
  /* .modern-panel:first-child */
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body.dynamic-height {
  height: inherit;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body.no-border, .modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body.no-bottom-border {
  border-bottom: 0;
  padding-bottom: 0;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body.no-border, .modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body.no-top-border {
  border-top: 0;
  padding-top: 0;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body .modern-panel {
  border-bottom: 4px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
  /* .modern-panel-header */
  /* .modern-panel-body */
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body .modern-panel .modern-panel-header {
  margin-bottom: 0;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body .modern-panel .modern-panel-header [data-toggle=collapse] {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #353C4B;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body .modern-panel .modern-panel-header [data-toggle=collapse] * {
  display: block;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body .modern-panel .modern-panel-header .fa {
  font-family: FontAwesome !important;
  float: right;
  margin-top: -19px;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body .modern-panel .modern-panel-body {
  margin-top: 6px;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body .modern-panel .modern-panel-body > div {
  margin-bottom: 6px;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body .modern-panel:hover {
  /* .modern-panel-header */
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body .modern-panel:hover .modern-panel-header * {
  color: #D4692D;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-body .modern-panel:last-child {
  border-bottom-width: 0;
  margin: 0;
  padding: 0;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-footer {
  font-size: 0;
  /* Why? Because without this we get a gap in child elements. https://stackoverflow.com/a/24036286 */
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .modern-footer > div {
  margin-bottom: 6px;
}
.modern-layout-sidebar .modern-sidebar-content .modern-search-form .input-group {
  width: 100%;
}
.modern-layout-sidebar .modern-sidebar-content-tall {
  margin-top: 47px;
}
.modern-layout-sidebar .modern-sidebar-footer {
  margin-bottom: 49px;
  overflow: auto;
  width: 269px;
}
.modern-layout-sidebar .modern-sidebar-footer .modern-sidebar-username {
  font-weight: 500;
}
.modern-layout-sidebar .modern-sidebar-footer .modern-sidebar-timeleft {
  float: right;
  color: #D4692D;
}
.modern-layout-sidebar .modern-sidebar-footer.label-danger * {
  color: #fff !important;
}
.modern-layout-sidebar .modern-sidebar-table {
  width: 100%;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #353C4B;
}
.modern-layout-sidebar .modern-sidebar-table.x-small {
  font-family: "Roboto", sans-serif;
  font-size: 12px !important;
  font-weight: 300;
  color: #353C4B;
}
.modern-layout-sidebar .modern-sidebar-table.x-small .modern-btn-icon {
  width: 12px;
  height: 12px;
  line-height: 12px;
  font-family: "Roboto", sans-serif;
  font-size: 12px !important;
  font-weight: 300;
  color: #fff;
  padding: 0;
}
.modern-layout-sidebar .modern-sidebar-table .number-field {
  text-align: right;
}
.modern-layout-sidebar .modern-sidebar-content-footer .modern-sidebar-table {
  color: #D4692D !important;
}

.modern-layout-sidebar {
  display: table;
  height: 100%;
}
.modern-layout-sidebar .modern-layout-sidebar-header-wrapper {
  display: table-header-group;
}
.modern-layout-sidebar .modern-layout-sidebar-body-wrapper {
  display: table-row-group;
}
.modern-layout-sidebar .modern-layout-sidebar-footer-wrapper {
  display: table-footer-group;
}

.modern-sidebar-collapser {
  position: absolute;
  right: 0;
  top: 50%;
  width: 30px;
  margin-top: -49px;
  display: none;
  text-align: center;
}

.modern-layout-sidebar-wrapper:hover .modern-sidebar-collapser {
  display: block;
}

.modern-layout-sidebar-wrapper .modern-sidebar-collapser i.fa:before {
  content: "\f0d9";
}
.modern-layout-sidebar-wrapper.collapsed .modern-sidebar-collapser i.fa:before {
  content: "\f0da";
}

@media (max-width: 768px) {
  .modern-layout-sidebar-wrapper {
    width: 299px;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .modern-layout-sidebar .modern-sidebar-footer {
    width: 269px;
  }
}
@media (max-width: 576px) {
  .modern-sidebar-collapser {
    width: 60px;
    padding: 60px 9px;
    text-align: right;
  }
  .modern-sidebar-collapser .fa {
    font-size: 200%;
  }
}
.modern-layout-content .text-danger {
  color: #ffc107;
}
.modern-layout-content .modal-body .text-danger {
  color: #a94442;
}

.modern-layout-body .ui-tooltip {
  font-size: 12px;
}
.modern-layout-body .modal-dialog .modal-content {
  border-radius: 0;
  border-width: 0;
}
.modern-layout-body .modal-dialog .modal-content .modal-header {
  padding: 0 0 0 18px;
  height: 34.56px;
  line-height: 34.56px;
  vertical-align: middle;
  font-family: "Roboto", sans-serif;
  font-size: 22.4px !important;
  font-weight: 300;
  color: #fff;
  background-color: #566074;
  border-width: 0;
}
.modern-layout-body .modal-dialog .modal-content .modal-header * {
  height: 34.56px;
  line-height: 34.56px;
  vertical-align: middle;
  font-family: "Roboto", sans-serif;
  font-size: 22.4px !important;
  font-weight: 300;
  color: #fff;
  background-color: #566074;
}
.modern-layout-body .modal-dialog .modal-content .modal-header .close {
  margin-top: 0;
  margin-right: 5px;
}
.modern-layout-body .modal-dialog .modal-content .modal-body {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #353C4B;
}
.modern-layout-body .modal-dialog .modal-content .modal-body h1, .modern-layout-body .modal-dialog .modal-content .modal-body h2, .modern-layout-body .modal-dialog .modal-content .modal-body h3, .modern-layout-body .modal-dialog .modal-content .modal-body h4, .modern-layout-body .modal-dialog .modal-content .modal-body h5, .modern-layout-body .modal-dialog .modal-content .modal-body h6 {
  font-family: "Roboto", sans-serif;
  font-size: 20px !important;
  font-weight: 300;
  color: #353C4B;
  margin: 10px 0;
  line-height: 20px;
}
.modern-layout-body .modal-dialog .modal-content .modal-footer {
  height: 36px;
  border-width: 0;
  padding: 0;
  margin-top: 12px;
}
.modern-layout-body .modal-dialog .modal-content .modal-footer .btn {
  height: 36px;
  line-height: 36px;
  vertical-align: middle;
  border-width: 0;
  border-radius: 0;
  margin: 0;
  padding: 0 15px;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
}
.modern-layout-body .modal-dialog .modal-content .modal-footer .btn-default {
  background-color: #566074;
}
.modern-layout-body .modal-dialog .modal-content .modal-footer .btn-default:hover, .modern-layout-body .modal-dialog .modal-content .modal-footer .btn-default:focus {
  background-color: #6c7891;
}
.modern-layout-body .modal-dialog .modal-content .modal-footer .btn-primary {
  background-color: #D4692D;
}
.modern-layout-body .modal-dialog .modal-content .modal-footer .btn-primary:hover, .modern-layout-body .modal-dialog .modal-content .modal-footer .btn-primary:focus {
  background-color: #dd8757;
}
.modern-layout-body .modal-dialog.dark-modal .modal-content .modal-body {
  background-color: #353C4B;
  color: #fff;
}
.modern-layout-body .popover {
  color: #353C4B;
}

.home-navbtn {
  width: 201.6px;
  height: 157.5px;
  font-family: "Roboto", sans-serif;
  font-size: 19.6px !important;
  font-weight: 300;
  color: #fff;
  background-color: #566074;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  position: relative;
}

.home-navbtn:hover {
  background-color: #D4692D;
  font-family: "Roboto", sans-serif;
  font-size: 19.6px !important;
  font-weight: 300;
  color: #fff;
  text-decoration: none;
}

.home-navbtn-icons {
  position: absolute;
  width: 100%;
  display: block;
  bottom: 52.5px;
  padding-bottom: 20px;
}

.home-navbtn-title {
  position: absolute;
  top: 105px;
  width: 100%;
  display: block;
}

.home-nav-columns {
  overflow: hidden;
  padding-top: 100px;
}
.home-nav-columns .home-nav-toolbar {
  float: right;
  margin-top: -100px;
}
.home-nav-columns .home-nav-column {
  float: left;
  position: relative;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}
.home-nav-columns .home-nav-column .home-nav-column-title {
  font-family: "Roboto", sans-serif;
  font-size: 24px !important;
  font-weight: 500;
  color: #fff;
  padding-bottom: 27px;
  padding-left: 26px;
}
.home-nav-columns .home-nav-column .home-nav-column-body {
  width: 262.6px;
  padding: 0 26px;
  border: solid 0 #566074;
  border-right-width: 9px;
}
.home-nav-columns .home-nav-column:first-child .home-nav-column-title {
  padding-left: 0;
}
.home-nav-columns .home-nav-column:first-child .home-nav-column-body {
  width: 236.6px;
  padding-left: 0;
  border-left-width: 0;
}
.home-nav-columns .home-nav-column:last-child .home-nav-column-body {
  width: 227.6px;
  padding-right: 0;
  border-right-width: 0;
}

.home-nav-rows {
  padding-top: 100px;
}
.home-nav-rows .home-nav-toolbar {
  float: right;
  margin-top: -100px;
}
.home-nav-rows .home-nav-row .home-nav-row-title {
  font-family: "Roboto", sans-serif;
  font-size: 24px !important;
  font-weight: 500;
  color: #fff;
  padding-top: 13.5px;
  padding-bottom: 13.5px;
  padding-left: 26px;
}
.home-nav-rows .home-nav-row .home-nav-row-body {
  width: 100%;
  padding: 0 26px;
}
.home-nav-rows .home-nav-row .home-nav-row-body .home-navbtn {
  margin-right: 6px;
}

.home-nav-toolbar {
  float: left;
}
.home-nav-toolbar .home-nav-toolbar-icon {
  width: 72px;
  height: 72px;
  line-height: 72px;
  vertical-align: middle;
  color: #fff;
  background-color: #D4692D;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  float: left;
  margin-left: 8px;
  font-family: "Roboto", sans-serif;
  font-size: 19.6px !important;
  font-weight: 300;
  color: #fff;
}
.home-nav-toolbar .home-nav-toolbar-icon .fa {
  line-height: 72px;
}
.home-nav-toolbar .home-nav-toolbar-icon:hover {
  background-color: #566074;
  text-decoration: none;
}

.fat-border-top {
  border-top: solid 8px #566074;
  padding-top: 26px;
}

.fat-border-right {
  border-right: solid 8px #566074;
  padding-right: 26px;
}

.fat-border-bottom {
  border-bottom: solid 8px #566074;
  padding-bottom: 26px;
}

.fat-border-left {
  border-left: solid 8px #566074;
  padding-left: 26px;
}

hr.fat-border {
  height: 8px;
  background-color: #566074;
  margin: 13px 0;
  padding: 0;
  border: 0;
}
hr.fat-border.modern-row {
  margin-bottom: 30px;
}

.modern-row-sm {
  margin-bottom: 10px;
}

.modern-row-xs {
  margin-bottom: -10px;
}

.small-text {
  font-size: 14px !important;
}
.small-text h1, .small-text h2, .small-text h3, .small-text h4, .small-text h5, .small-text h6 {
  font-size: 14px !important;
  padding: 0;
  margin: 0;
}
.small-text .modern-btn-icon {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-family: "Roboto", sans-serif;
  font-size: 15px !important;
  font-weight: 300;
  color: #fff;
  padding: 0;
}

.modern-layout-sidebar-wrapper {
  /* The sidebar is narrow enough that we cannot afford the larger padding on bs cols. */
}
.modern-layout-sidebar-wrapper .navbar-nav {
  /* BS styles .navbar-nav differently at different resolutions. We want this one to always be the same. */
  float: left;
  margin: 0;
}
.modern-layout-sidebar-wrapper .navbar-nav .dropdown.open {
  float: left;
}
.modern-layout-sidebar-wrapper .navbar-nav .dropdown.open .dropdown-menu {
  float: left;
  position: absolute;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.modern-layout-sidebar-wrapper .nav > li > a.skyline-hamburger-icon,
.modern-layout-sidebar-wrapper .skyline-hamburger-icon {
  height: 30px;
  width: 30px;
  vertical-align: middle;
  background-color: #fff;
  list-style-type: none;
  border-width: 0;
  list-style: none;
  padding: 0;
  margin: 0 0 -30px 0;
  /* The bottom margin is so that it still appears in the header, when the sidebar is not collapsed. */
}
.modern-layout-sidebar-wrapper .skyline-hamburger-icon:before {
  content: "";
  width: 25px;
  background: linear-gradient(to bottom, #989FAB, #989FAB 14%, #fff 14%, #fff 43%, #989FAB 43%, #989FAB 57%, #fff 57%, #fff 86%, #989FAB 86%, #989FAB 100%);
}
.modern-layout-sidebar-wrapper .dropdown-menu > li > a {
  font-weight: 300;
}
.modern-layout-sidebar-wrapper .dropdown-menu > li > a.dropdown-menu-label {
  font-weight: 500;
  cursor: default;
}
.modern-layout-sidebar-wrapper .modern-sidebar-content {
  overflow-y: auto;
}
.modern-layout-sidebar-wrapper .modern-sidebar-content .row {
  margin-right: -3px;
  margin-left: -3px;
}
.modern-layout-sidebar-wrapper .modern-sidebar-content .col-xs-1, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-sm-1, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-md-1, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-lg-1, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-xs-2, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-sm-2, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-md-2, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-lg-2, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-xs-3, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-sm-3, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-md-3, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-lg-3, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-xs-4, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-sm-4, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-md-4, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-lg-4, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-xs-5, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-sm-5, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-md-5, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-lg-5, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-xs-6, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-sm-6, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-md-6, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-lg-6, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-xs-7, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-sm-7, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-md-7, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-lg-7, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-xs-8, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-sm-8, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-md-8, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-lg-8, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-xs-9, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-sm-9, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-md-9, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-lg-9, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-xs-10, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-sm-10, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-md-10, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-lg-10, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-xs-11, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-sm-11, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-md-11, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-lg-11, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-xs-12, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-sm-12, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-md-12, .modern-layout-sidebar-wrapper .modern-sidebar-content .col-lg-12 {
  padding-right: 3px;
  padding-left: 3px;
}

.modern-motd {
  height: 44px;
}
.modern-motd * {
  margin: 0;
  padding: 0;
}
.modern-motd .motd-marquee {
  background-color: #353C4B;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
}
.modern-motd .motd-body-wrapper {
  width: 600px;
  height: 44px;
  position: relative;
  overflow: hidden;
}
.modern-motd .motd-body-wrapper .motd-body {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  width: auto;
}
.modern-motd .motd-body-wrapper .motd-body .motd-message {
  width: 600px;
}
.modern-motd .motd-body-wrapper .motd-body::-webkit-scrollbar {
  display: none;
}
.modern-motd .motd-arrow {
  width: 14px;
  padding: 0;
  color: #353C4B;
}
.modern-motd :hover .motd-arrow {
  color: #fff;
}

@media (max-width: 768px) {
  .modern-motd {
    height: 22px;
  }
  .modern-motd .motd-body-wrapper {
    height: 22px;
  }
}
.home-navbtn-icons .fa {
  font-size: 2em;
}
.home-navbtn-icons .fa-2x {
  font-size: 3.5em;
}

.modern-layout-body .breadcrumbs {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #D4692D;
}
.modern-layout-body .breadcrumbs a {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300;
  color: #fff;
}

/**
 * Datepicker compatibility.
 */
.datepicker .datepicker-days {
  color: #353C4B;
}
.datepicker .datepicker-months {
  color: #353C4B;
}
.datepicker .datepicker-years {
  color: #353C4B;
}
.datepicker .datepicker-decades {
  color: #353C4B;
}
.datepicker .datepicker-centuries {
  color: #353C4B;
}

.form-control:focus,
.btn:focus {
  border-width: 0;
  box-shadow: none;
  border-radius: 0;
  outline-style: none;
}

/**
 * The receiving commodities table. It's unclear if this is a set of styles that can be used generally.
 */
.modern-table.modern-receiving-commodities-tree > thead > tr > td, .modern-table.modern-receiving-commodities-tree > thead > tr > th {
  padding-left: 17px;
  padding-right: 17px;
}
.modern-table.modern-receiving-commodities-tree > thead > tr > td.unpadded, .modern-table.modern-receiving-commodities-tree > thead > tr > th.unpadded {
  padding-left: 0;
  padding-right: 0;
}
.modern-table.modern-receiving-commodities-tree > thead > tr > th:first-child {
  padding-left: 28px;
}
.modern-table.modern-receiving-commodities-tree > tbody > tr {
  background-color: #353C4B;
}
.modern-table.modern-receiving-commodities-tree > tbody > tr > td {
  border-width: 0;
  padding: 0 0 17px 0;
  margin: 0;
}
.modern-table.modern-receiving-commodities-tree > tbody > tr .border-left {
  border-left: solid 2px #566074;
}
.modern-table.modern-receiving-commodities-tree > tbody > tr:last-child > td {
  padding-bottom: 26px;
}
.modern-table.modern-receiving-commodities-tree > tbody > tr > td, .modern-table.modern-receiving-commodities-tree > tbody > tr > th {
  padding-left: 17px;
  padding-right: 17px;
}
.modern-table.modern-receiving-commodities-tree > tbody > tr > td.unpadded, .modern-table.modern-receiving-commodities-tree > tbody > tr > th.unpadded {
  padding-left: 0;
  padding-right: 0;
}
.modern-table.modern-receiving-commodities-tree > tbody .subhead {
  font-style: italic;
}
.modern-table.modern-receiving-commodities-tree > tfoot.summary-footer > tr > td, .modern-table.modern-receiving-commodities-tree > tfoot.summary-footer > tr > th {
  padding-left: 17px;
  padding-right: 17px;
}
.modern-table.modern-receiving-commodities-tree > tfoot.summary-footer > tr > td.unpadded, .modern-table.modern-receiving-commodities-tree > tfoot.summary-footer > tr > th.unpadded {
  padding-left: 0;
  padding-right: 0;
}
.modern-table.modern-receiving-commodities-tree > tfoot.summary-footer strong {
  font-family: "Roboto", sans-serif;
  font-size: 22.4px !important;
  font-weight: 500;
  color: #fff;
}
.modern-table.modern-receiving-commodities-tree > tfoot.summary-footer > tr > td {
  border-top: solid 8px #566074;
  padding-top: 26px;
  letter-spacing: 1px;
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 500;
  color: #fff;
}
.modern-table.modern-receiving-commodities-tree .treegrid-indent {
  width: 28px;
}
.modern-table.modern-receiving-commodities-tree .treegrid-expander {
  width: 28px;
}

.tree .input-group-addon {
  padding: 0;
  background-color: inherit;
}

.fa {
  font-family: FontAwesome !important;
}

.fa:not(.fa-spin) {
  animation: none;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

.autocomplete-entry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.autocomplete-entry-list li {
  border: 1px solid #ddd;
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 10px;
  text-decoration: none;
  font-size: 14px;
  color: black;
  display: block;
  position: relative;
}
.autocomplete-entry-list li span.delete-autocomplete-entry {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 0px 5px;
  color: #b5bac3;
}
.autocomplete-entry-list li span.delete-autocomplete-entry:hover {
  color: #4D535F;
}

.autocomplete-persistent-selected {
  background-color: #DA8;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item a {
  font-size: 14px;
}

.pager-alignment {
  float: right !important;
}

.modal-pager-container {
  overflow: auto;
  margin-bottom: -30px;
}

.hotkey-definition {
  position: absolute;
  right: 0;
  color: gray;
  margin-right: 5px;
}

.filter-header-counter {
  float: right;
  right: 0;
  margin-right: 50px;
  font-weight: 400;
  color: #D4692D;
}

.has-warrant .passenger-name {
  background-color: red !important;
}

.passenger-status-M .passenger-name {
  background-color: green;
}

.passenger-status-X .passenger-name {
  background-color: #666;
  text-decoration: line-through;
}

.passenger-status-DP .passenger-name {
  background-color: #fcc;
  text-decoration: line-through;
  color: black;
}

.passenger-status-N .passenger-name {
  background-color: #ccf;
}

.highlight-element {
  background-color: #6ab76a;
}

@media (max-width: 768px) {
  .home-nav-columns .home-nav-toolbar {
    margin-right: 70px;
  }
  .home-nav-columns .home-nav-column {
    margin-left: 20px;
  }
  .home-nav-columns .home-nav-column .home-nav-column-body {
    width: 203.1px;
    padding: 0 0;
  }
  .home-nav-columns .home-nav-column .home-nav-column-body .home-navbtn {
    width: 170.1px;
  }
  .home-nav-columns .home-nav-column:first-child .home-nav-column-title {
    padding-left: 26px;
  }
  .home-nav-columns .home-nav-column:first-child .home-nav-column-body {
    width: 203.1px;
  }

  .home-navbtn-icons .fa {
    font-size: 1.5em;
  }
  .home-navbtn-icons .fa-2x {
    font-size: 2.5em;
  }

  .pager-alignment {
    float: left !important;
  }
}
@media (max-width: 576px) {
  .home-nav-columns {
    padding-top: 0;
  }
  .home-nav-columns .home-nav-toolbar {
    margin-right: 130px;
  }
  .home-nav-columns .home-nav-column {
    margin-left: 20px;
  }
  .home-nav-columns .home-nav-column .home-nav-column-body {
    width: 231.1px;
    padding: 0 26px;
  }
  .home-nav-columns .home-nav-column .home-nav-column-body .home-navbtn {
    width: 170.1px;
  }
  .home-nav-columns .home-nav-column .home-nav-column-body {
    border-right-width: 0;
    border-bottom-width: 9px;
    margin-bottom: 26px;
    padding-bottom: 9px;
  }
  .home-nav-columns .home-nav-column:first-child .home-nav-column-title {
    padding-left: 44px;
  }
  .home-nav-columns .home-nav-column:first-child .home-nav-column-body {
    width: 236.6px;
    padding-left: 26px;
    border-left-width: 0;
  }

  .home-page {
    padding-top: 100px;
  }

  .home-navbtn-icons .fa {
    font-size: 1.5em;
  }
  .home-navbtn-icons .fa-2x {
    font-size: 2.5em;
  }

  .pager-alignment {
    float: left !important;
  }
}
.merge-data-button {
  position: absolute;
  top: 50%;
}
.merge-data-button.merge-data-button-to-right {
  right: 0;
}
.merge-data-button.merge-data-button-to-left {
  left: 0;
}

.table-dangerous-goods {
  background-color: #FF0000;
  color: #FFFFFF;
  width: 100%;
}

.table-dangerous-goods td {
  padding: 1px;
  text-align: left;
  font-size: 11px;
}

.table-dangerous-goods th {
  font-weight: normal;
  font-size: 11px;
  padding-bottom: 5px;
}

.table-dangerous-goods-title {
  background-color: #FF0000;
  color: #FFFFFF;
  font-weight: bold;
  padding: 5px;
  text-align: left;
  font-size: 25px;
}

/*this is for a inline modal... one that might work well for pf, but makes it so we are creating modaols in modals*/
.modern-inline-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 998;
}

.modern-inline-modal-overlay.show {
    display: block;
}

.modern-inline-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 999;
    min-width: 300px;
    transition: all 0.3s ease;
    overflow: hidden;
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

.modern-inline-modal.show {
    display: block;
}

.modern-inline-modal .weight-display {
    font-size: 16px;
    font-weight: bold;
}

.modern-inline-modal .modal-body {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 0;
    padding-top: 20px;
}

/* Form row layout */
.modern-inline-modal .form-group-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
    flex-wrap: nowrap;
    max-height: 30px;
}

.modern-inline-modal .form-group-row label {
    white-space: nowrap;
    margin: 0;
    flex-shrink: 0;
    text-align: right;
    min-width: 70px;
}

.modern-inline-modal .form-group-row input[type="text"],
.modern-inline-modal .form-group-row input[type="number"] {
    max-width: 95px;
    width: 100%;
    margin-left: 5px;
    padding: 6px 8px;
    box-sizing: border-box;
    flex-shrink: 1;
}

.modern-inline-modal .modal-footer {
    display: flex;
    padding: 0;
    margin: 0;
    height: 45px;
}

.modern-inline-modal .modal-footer button {
    flex: 1;
    border-radius: 0;
    margin: 0;
    border: none;
    height: 100%;
    padding: 0;
    font-size: 18px;
    font-weight: normal;
    font-family: inherit;
    color: white;
    text-align: center;
    cursor: pointer;
}

/* Colors pulled from the screenshot */
.modern-inline-modal .close-button {
    background-color: #505e72;
}

.modern-inline-modal .confirm-button {
    background-color: #d26a2c;
}
.modern-inline-modal .confirm-button {
    background-color: #d26a2c;
    color: white;
    cursor: pointer;
}

/* Disabled state */
.modern-inline-modal .confirm-button:disabled {
    background-color: #f2b385; /* softened version of the orange */
    color: #fff;
    opacity: 1; /* important to override default gray-out */
    cursor: not-allowed;
}

.modern-inline-modal .modal-footer button:hover:not(:disabled) {
    filter: brightness(1.05);
}


.modal-blur {
    filter: blur(2px);
    pointer-events: none;
    user-select: none;
}

/*lets add a container for a table...to control scrolling*/
.table-scroll-wrapper {
        max-height: 400px; /* adjust as needed */
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding-right: 2px;
        padding-left: 0px;
    }

    .table-scroll-wrapper::-webkit-scrollbar {
        width: 8px;
    }

    .table-scroll-wrapper::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.3);
        border-radius: 4px;
    }

    /*//lets make the header sticky*/
    .table-scroll-lock-head thead th {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
    }

/*# sourceMappingURL=ModernLayout.css.map */