/* Colours */
/* Green */
/* Global */
/* Form Google Material */
/* Text Inputs + Textarea */
/*$input-border-color: color("grey", "base") !default;
$input-border: 1px solid $input-border-color !default;
$input-background: #fff !default;
$input-error-color: $error-color !default;
$input-success-color: $success-color !default;
$input-focus-color: $secondary-color !default;
$input-font-size: 1rem !default;
$input-margin: 0 0 20px 0 !default;
$input-padding: 0 !default;
$input-transition: all .3s !default;
$label-font-size: .8rem !default;
$input-disabled-color: rgba(0,0,0, .26) !default;
$input-disabled-solid-color: #BDBDBD !default;
$input-disabled-border: 1px dotted $input-disabled-color !default;
$input-invalid-border: 1px solid $input-error-color !default;
$placeholder-text-color: lighten($input-border-color, 20%) !default;*/
/* Tabs */
/* Collapsible */
/* Grid */
@import url("grid.css");
/* Side Nav */
/* Toast */
/* Button */
/* Shared stlye */
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab");

.custom-shepherd-theme.shepherd-element {
    background-color: rgba(12, 2, 47, 1); /* Custom background */
    color: white; /* Text color */
    border-radius: 8px;
    padding: 20px;
    width: 600px;
}

.custom-shepherd-theme .shepherd-arrow {
    display: none !important;
}

.custom-shepherd-theme .shepherd-header {
    color: white;
}

.custom-shepherd-theme .shepherd-text {
    color: white;
}

.custom-shepherd-button {
    background-color: #D00078 !important;
    color: white;
    border: none;
    padding: 8px 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
}

    .custom-shepherd-button:hover {
        background-color: #b00066;
    }

.btn.disabled,
.btn-floating.disabled,
.btn-large.disabled,
.btn-flat.disabled,
.btn:disabled,
.btn-floating:disabled,
.btn-large:disabled,
.btn-flat:disabled,
.btn[disabled],
.btn-floating[disabled],
.btn-large[disabled],
.btn-flat[disabled] {
  pointer-events: none;
  background-color: #DFDFDF !important;
  box-shadow: none;
  color: #9F9F9F !important;
  cursor: default; }
  .btn.disabled:hover,
  .btn-floating.disabled:hover,
  .btn-large.disabled:hover,
  .btn-flat.disabled:hover,
  .btn:disabled:hover,
  .btn-floating:disabled:hover,
  .btn-large:disabled:hover,
  .btn-flat:disabled:hover,
  .btn[disabled]:hover,
  .btn-floating[disabled]:hover,
  .btn-large[disabled]:hover,
  .btn-flat[disabled]:hover {
    background-color: #DFDFDF !important;
    color: #9F9F9F !important; }
body.loading .modal-loading img {
    box-shadow: none !important;
}
.paginate_button {
    border-radius: 8px !important;
    padding: 10px 15px !important;
    text-align: center !important;
    background-color: #d3d3d3 !important;
    color: white !important;
}
.paginate_button:hover {
    background-color: rgba(186, 0, 112, 1) !important;
}
.ui-dialog[aria-describedby="diagstaffselect"] iframe {
    width: 87vw !important;
}
/* Card */
/* Chips */
/* Pagination */
/* Preloader */
/*$secondary-color: #00FFBA !default;*/
/* Progress Bar */
/* Collection */
/* Badge */
/* Form Elements */
/* Z Level */
.z-depth-0 {
    box-shadow: none !important;
}

/* Most shadows are being removed following the new colour scheme 30.03.2020
.z-depth-1, .collapsible, .toast, .card-panel, .card {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); }

.z-depth-1-half {
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); }

.z-depth-2 {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); }

.z-depth-3 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3); }

.z-depth-4, .def_modal {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3); }

.z-depth-5 {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3); }
 */

/* Fonts */
/* Mixin */
/* General */

/* General header style */
h1 {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

h3 {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    font-size: 1.5rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

body {
  width: 100%;
  overflow-x: hidden;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 100%;
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.87);
  margin: 0px;
  padding: 0px;
}

p {
  margin: 0px;
  line-height: 1.5; 
}

a {
  /*color: rgba(0, 0, 0, 0.87);*/ }

/* Utility */
._unmargin {
  margin: 0px !important; }

._unmargin_top {
  margin-top: 0px !important; }

._center {
  text-align: center !important; }

._inlineblock {
  width: 100% !important;
  display: inline-block !important; }

._pull_left {
  float: left !important; }

._pull_right {
  float: right !important; }

._no_scroll {
  overflow: hidden;
  height: 100%; }

/* iPad & Mobile */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  ._pull_left {
    float: none !important; 
  }

  ._pull_right {
    float: none !important; 
  }

  .m_inlineblock {
    display: inline-block !important;
    width: auto !important; 
  }

  .m_hide {
    display: none !important; 
  }
}

/* Mobile Only */
@media only screen and (max-width: 760px) {
  .m_margin_top_10 {
    margin-top: 10px; 
  }

  .m_margin_top_bottom_10 {
    margin-top: 10px;
    margin-bottom: 10px; 

  } 
}

/* Button Style */
.btn i {
  padding-top: 5px;
  color: #ffffff;
  vertical-align: -6px; 
}
.btn span {
  color: #ffffff;
  font-size: 1.6rem !important;
  font-size: 16px !important;
  margin-left: 0px;
  padding-left: 0px !important; 
}

.button_normal, .ui-dialog-buttonset button {
    text-decoration: none;
    padding: 5px 10px;
    /*10 20*/
    display: block;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    transition: all ease .5s;
    max-width: 120px;
    margin: 0 auto;
    user-select: none;
    cursor: pointer;
    border: none;
    font: 13.3333px Arial;
    padding: 10px 15px;
    font-size: 1rem;
    max-width: none;
}

  .button_normal i {
    vertical-align: -5px;
    margin-right: 3px;
    font-size: 18px; 
  }

    .button_normal:hover {
        transition: all ease .5s;
    }

  .button_normal.btn_inline {
    /*display: inline-flex;*/
    display: inline-block;
    justify-content: center;
    align-items: center; 
  }

.button_wrapper {
  max-width: 300px;
  margin: 15px auto;
  text-align: center; 
}

/* You will need this sometimes*/
/*i.button_normal.btn_inline.waves-effect.waves-light.waves-input-wrapper{
    padding: 0px;
    box-shadow: none !important;
    background-color: transparent;
}
i.button_normal.btn_inline.waves-effect.waves-light.waves-input-wrapper:hover{
    transition: all ease .5s;
    box-shadow: none !important;
}
i.btn_inline.waves-effect.waves-light.waves-input-wrapper{
    padding: 0px;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
    background-color: transparent;
}
i.btn_inline.waves-effect.waves-light.waves-input-wrapper:hover{
    transition: all ease .5s;
    box-shadow:0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15) !important;
}*/
/* input button */
/*input[type="button"], input[type="submit"]{
    text-decoration: none;
      background-color: #30365d;
      color: #FFFFFF;
      padding: 5px 10px;
      display: block;
      box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
      transition: all ease .5s !important;
      user-select: none;
      cursor: pointer;
      border: none;
      border-radius: 2px !important;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -o-border-radius: 2px;
      -ms-border-radius: 2px;
      font-size: 14px;
      max-width: 200px;
      width: auto;
      margin: 0px;

}
input[type="button"]:hover, input[type="submit"]:hover{
    transition: all ease .5s;
    box-shadow:0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15) !important;
}*/
input[type="button"], input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

/* Button bigger on mobile and ipad*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  .button_normal {
    padding: 15px 25px;
    font-size: 1.1rem;
    max-width: none; 
  }

  input[type="button"], input[type="submit"] {
    padding: 15px 25px;
    font-size: 1.1rem;
    max-width: none; 
  } 
}

/* Effect */
.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /*white-space: nowrap;
  outline: 0;*/
  vertical-align: middle;
  /*cursor: pointer;
  border: none;
  outline: none;
  color: inherit;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1em;
  line-height:1em;
  text-align: center;
  text-decoration: none;*/
  z-index: 1;
  will-change: opacity, transform;
  transition: .3s ease-out;
  /*Waves Colors*/ 
}
  .waves-effect .waves-ripple {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.2);
    /*$gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
    background: -webkit-radial-gradient($gradient);
    background: -o-radial-gradient($gradient);
    background: -moz-radial-gradient($gradient);
    background: radial-gradient($gradient);*/
    transition: all 0.7s ease-out;
    transition-property: transform, opacity;
    transform: scale(0);
    pointer-events: none; 
  }

  .waves-effect.waves-light .waves-ripple {
    background-color: rgba(255, 255, 255, 0.45); }
  .waves-effect.waves-red .waves-ripple {
    background-color: rgba(244, 67, 54, 0.7); }
  .waves-effect.waves-yellow .waves-ripple {
    background-color: rgba(255, 235, 59, 0.7); }
  .waves-effect.waves-orange .waves-ripple {
    background-color: rgba(255, 152, 0, 0.7); }
  .waves-effect.waves-purple .waves-ripple {
    background-color: rgba(156, 39, 176, 0.7); }
  .waves-effect.waves-green .waves-ripple {
    background-color: rgba(76, 175, 80, 0.7); }
  .waves-effect.waves-teal .waves-ripple {
    background-color: rgba(0, 150, 136, 0.7); }

/* Additional */
.cont-blue {
  text-align: center; 
}

.table_header_wrapper, .table_header_wrap {
  text-align: center;
  color: #ffffff;
  font-size: 24px;
  /*18*/
  font-weight: bold;
  font-family: "Open Sans", sans-serif; 
}
  .table_header_wrapper.text_blue, .table_header_wrap.text_blue {
    color: #30365d; 
  }

#head {
  background-color: #30365d !important;
  border: none !important; }
  #head .menu {
    border: none; }

#sb-site, .sb-site-container {
    background-image: unset !important;
}

/* In Box Style */
.formbox {
  max-width: 90vw;
  width: 1000px;
  margin: 0 auto;
  margin-bottom: 4vh;
  height: auto;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
  .formbox .title {
    text-align: center;
    font-size: 1.2em;
    padding: 0.8em;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 3; }
  .formbox .importantText {
    background-color: #30365d;
    text-align: center;
    padding: 0.5em;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    z-index: 2;
    line-height: 2.2em; }
  .formbox .form-body {
    box-sizing: border-box;
    padding: 1em; }
    .formbox .form-body .form-cell {
      height: 3em;
      width: 28em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: left;
      padding: 0.5em;
      max-width: 49%; }
      .formbox .form-body .form-cell span {
        width: calc(100% - 176px); }
    .formbox .form-body .form-cell-long {
      height: 3em;
      width: 50em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: left;
      padding: 0.5em; }
    .formbox .form-body .label {
      display: inline-block;
      width: 10em;
      text-align: right;
      margin-right: 1em;
      float: left; }
    .formbox .form-body input[type="text"], .formbox .form-body input[type="email"], .formbox .form-body input[type="number"], .formbox .form-body input[type="tel"], .formbox .form-body input[type="datetime"], .formbox .form-body input[type="datetime-local"], .formbox .form-body select {
        flex-grow: 1;
        -webkit-flex-grow: 1;
        -moz-flex-grow: 1;
        height: 40px;
        /*2.3em*/
        font-size: 1em;
        border-radius: 2px;
        border: 1px solid #30365d;
        transition: all ease .3s;
        padding: 0.2em;
        box-sizing: border-box;
    }
        .formbox .form-body input[type="text"]:focus, .formbox .form-body input[type="email"]:focus, .formbox .form-body input[type="number"]:focus, .formbox .form-body input[type="tel"]:focus, .formbox .form-body input[type="datetime"]:focus, .formbox .form-body input[type="datetime-local"]:focus, .formbox .form-body select:focus {
            box-shadow: 0 3px 0 0 #30365d;
            border: 1px solid #30365d;
            transition: all ease .3s;
            outline: none;
        }
    .formbox .form-body textarea {
        font-size: 1em;
        border-radius: 2px;
        border: 1px solid #30365d;
        padding: 0.2em;
    }
  .formbox .body-content {
    background-color: white; }

.subsection {
  width: 100%;
  text-align: center;
  min-height: 3vh;
  line-height: 3vh;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

#ProfilePhoto {
  float: right;
  width: 28em;
  height: 24em;
  max-width: 49%; }

.i-flexbox {
  display: inline-flex;
  align-items: center;
  justify-content: center; }

.requiredAsterisk {
  color: red;
  display: inline-block; }

/* General label style */
label {
    font-weight: bold;
}
    /* General label style for dark background*/
    label.light {
        font-weight: bold;
    }

/* Input styles */
input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="datetime"], input[type="datetime-local"], select, input[type=date], input[type=time] {
    font-family: open sans;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    height: 36px;
    font-size: 1em;
    border-radius: 2px;
    border: 1px solid #30365d;
    transition: all ease .3s;
    padding: 0.2em;
    box-sizing: border-box;
    background-color: #fff;
}
    input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, select:focus, input[type=date]:focus, input[type=time]:focus {
        box-shadow: 0 3px 0 0 #30365d;
        border: 1px solid #30365d;
        transition: all ease .3s;
        outline: none;
    }

/*input[type=date]{
  border-radius: 2px;
  border: 1px solid #9E9E9E;
  transition: all ease .3s;
  padding: 0.2em;
  box-sizing: border-box;
  &:focus{
    box-shadow: 0 3px 0 0 #30365d;
    border: 1px solid #E0E0E0;
    transition: all ease .3s;
    outline: none;
  }
}*/
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  margin: 0px; }

input[type="time"] {
  font-family: open sans; }
    input[type="time"]:focus {
        box-shadow: 0 3px 0 0 #30365d;
        border: 1px solid #30365d;
        transition: all ease .3s;
        outline: none;
    }

textarea {
  font-family: open sans;
  font-size: 1em;
  border-radius: 2px;
  border: 1px solid #9E9E9E;
  padding: 0.2em; }
    textarea:focus {
        box-shadow: 0 3px 0 0 #30365d;
        border: 1px solid #E0E0E0;
        transition: all ease .3s;
        outline: none;
    }

input[type="file"] {
  color: rgba(0, 0, 0, 0.87);
  font-size: 1em; }

/* Styles for Table */
.table_head td {
    background: #30365d;
    color: white;
    font-weight: bold;
    font-family: "Open Sans", sans-serif;
}

table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 1.4rem;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    overflow: hidden;
    background-color: #ebebeb;
}

/* Zebra striping */
tr:nth-of-type(odd) {
  /*background: #f6f6f6; */ }

th {
  /*#333*/
  font-weight: normal;
  font-family: "Open Sans", sans-serif; }

tbody {
}


td, th {
  padding: 9px 6px;
  text-align: center; 
}
  td a, th a {
    text-decoration: underline;
    color: #000; 
  }

td > i {
  vertical-align: -5px; }

tr:last-child td:last-child {
  border-radius: 0px; }

/* Table for mobile */
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  table {
    box-shadow: none; }

  /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr {
    display: block; }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px; }

  tr {
    border: 1px solid #ccc;
    margin-bottom: 1em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

  tr:first-child th {
    display: none;
    /* Display non for the table header*/ }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #ffffff;
        border-right: 1px solid #ffffff;
        border-left: 1px solid #ffffff;
        position: relative;
        padding-left: 50%;
    }

  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap; }

  /* Example Table */
  /* ID = example_table */
  table#example_table td:nth-of-type(1):before {
    content: "Col 1"; }

  table#example_table td:nth-of-type(2):before {
    content: "Col 2"; }

  table#example_table td:nth-of-type(3):before {
    content: "Col 3"; }

  table#example_table td:nth-of-type(4):before {
    content: "Col 4"; }

  table#example_table td:nth-of-type(5):before {
    content: "Col 5"; } }
/* Modal */
.modal_new {
  text-align: center;
  margin: 0 auto; }
  .modal_new label {
    color: rgba(0, 0, 0, 0.87);
    font-weight: normal;
    display: inline-block;
    width: 10em;
    text-align: right;
    margin-right: 1em; }
  .modal_new .modal-content label {
    /*width: 22em;*/
    width: 100%; }

/* Modal Mobile */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  .modal_new label {
    text-align: center; }
  .modal_new .modal-content label {
    width: 100%; }

  .modal-footer {
    width: 90%; } }
/* Tabs */
.tabs {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    height: 48px;
    width: 100%;
    background-color: #30365d;
    margin: 0 auto;
    white-space: nowrap;
    padding-left: 0px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
  .tabs.tabs-transparent {
    background-color: transparent;
    /*.tab a{
      text-decoration: none;
    }*/ }
    .tabs.tabs-transparent .tab a,
    .tabs.tabs-transparent .tab.disabled a,
    .tabs.tabs-transparent .tab.disabled a:hover {
      color: rgba(255, 255, 255, 0.7); }
    .tabs.tabs-transparent .tab a:hover,
    .tabs.tabs-transparent .tab a.active {
      color: #fff; }
    .tabs.tabs-transparent .indicator {
      background-color: #fff; }
  .tabs.tabs-fixed-width {
    display: flex; }
    .tabs.tabs-fixed-width .tab {
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1; }
  .tabs .tab {
    display: inline-block;
    text-align: center;
    line-height: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    text-transform: uppercase; }
    .tabs .tab a {
      text-decoration: none;
      color: rgba(255, 255, 255, 0.7);
      display: block;
      width: 100%;
      height: 100%;
      /*padding: 0 24px;*/
      font-size: 14px;
      text-overflow: ellipsis;
      overflow: hidden;
      transition: color .28s ease; }
      .tabs .tab a:hover, .tabs .tab a.active {
        background-color: transparent;
        color: #FFFFFF; }
    .tabs .tab.disabled a, .tabs .tab.disabled a:hover {
      color: rgba(255, 255, 255, 0.7);
      cursor: default; }
  .tabs .indicator {
    position: absolute;
    bottom: 0;
    height: 5px;
    background-color: #FFFFFF;
    will-change: left, right; }

/* Collapsible */
.collapsible {
  list-style: none;
  padding-left: 0px;
  margin: 0.5rem 0 1rem 0; 
}

.collapsible-header {
    display: block;
    cursor: pointer;
    min-height: 3rem;
    line-height: 3rem;
    padding: 0 1rem;
}

  .collapsible-header i {
    width: 2rem;
    font-size: 1.6rem;
    line-height: 3rem;
    display: block;
    float: left;
    text-align: center;
    margin-right: 1rem; 
  }

.collapsible-body {
  display: none;
  border-bottom: 1px solid #ffffff;
  box-sizing: border-box; 
}
  .collapsible-body p {
    margin: 0;
    padding: 2rem; 
  }

/* sideNav collapsible styling */
.side-nav .collapsible,
.side-nav.fixed .collapsible {
  border: none;
  box-shadow: none; }
  .side-nav .collapsible li,
  .side-nav.fixed .collapsible li {
    padding: 0; }
.side-nav .collapsible-header,
.side-nav.fixed .collapsible-header {
  background-color: transparent;
  border: none;
  line-height: inherit;
  height: inherit;
  padding: 0 16px; }
  .side-nav .collapsible-header:hover,
  .side-nav.fixed .collapsible-header:hover {
    background-color: rgba(0, 0, 0, 0.05); }
  .side-nav .collapsible-header i,
  .side-nav.fixed .collapsible-header i {
    line-height: inherit; }
.side-nav .collapsible-body,
.side-nav.fixed .collapsible-body {
    border: 0;
    background-color: #30365d;
}
  .side-nav .collapsible-body li a,
  .side-nav.fixed .collapsible-body li a {
    padding: 0 23.5px 0 31px; }

/* Toast */
#toast-container {
  display: block;
  position: fixed;
  z-index: 10000; }
  @media only screen and (max-width: 600px) {
    #toast-container {
      min-width: 100%;
      bottom: 0%; } }
  @media only screen and (min-width: 601px) and (max-width: 992px) {
    #toast-container {
      left: 5%;
      bottom: 7%;
      max-width: 90%; } }
  @media only screen and (min-width: 993px) {
    #toast-container {
      top: 10%;
      right: 7%;
      max-width: 86%; } }

.toast {
  border-radius: 2px;
  top: 0;
  width: auto;
  clear: both;
  margin-top: 10px;
  position: relative;
  max-width: 100%;
  height: auto;
  min-height: 48px;
  line-height: 1.5em;
  word-break: break-all;
  padding: 10px 25px;
  font-size: 1.1rem;
  font-weight: 300;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .toast .btn, .toast .btn-flat {
    margin: 0;
    margin-left: 3rem; }
  .toast.rounded {
    border-radius: 24px; }
  @media only screen and (max-width: 600px) {
    .toast {
      width: 100%;
      border-radius: 0; } }
  @media only screen and (min-width: 601px) and (max-width: 992px) {
    .toast {
      float: left; } }
  @media only screen and (min-width: 993px) {
    .toast {
      float: right; } }

/* Material Box */
.materialbox_wrapper {
  width: 650px;
  margin: 0 auto; }

.materialboxed {
  display: block;
  cursor: zoom-in;
  position: relative;
  transition: opacity .4s;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); }
  .materialboxed:hover {
    will-change: left, top, width, height; }
    .materialboxed:hover:not(.active) {
      opacity: .8; }

.materialboxed.active {
  cursor: zoom-out; }

#materialbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #292929;
  z-index: 1000;
  will-change: opacity; }

.materialbox-caption {
  position: fixed;
  display: none;
  color: #fff;
  line-height: 50px;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 0% 15%;
  height: 50px;
  z-index: 1000;
  -webkit-font-smoothing: antialiased; }

/* Card */
.card-panel {
    transition: box-shadow .25s;
    padding: 20px;
    margin: 0.5rem 0 1rem 0;
    border-radius: 2px;
}

.card {
  position: relative;
  margin: 0.5rem 0 1rem 0;
  transition: box-shadow .25s;
  border-radius: 2px;
  /*Card Sizes*/
  /*Horizontal Cards*/
  /*Sticky Action Section*/ }
  .card .card-title {
    font-size: 24px;
    font-weight: 300; }
    .card .card-title.activator {
      cursor: pointer; }
  .card.small, .card.medium, .card.large {
    position: relative; }
    .card.small .card-image, .card.medium .card-image, .card.large .card-image {
      max-height: 60%;
      overflow: hidden; }
    .card.small .card-image + .card-content, .card.medium .card-image + .card-content, .card.large .card-image + .card-content {
      max-height: 40%; }
    .card.small .card-content, .card.medium .card-content, .card.large .card-content {
      max-height: 100%;
      overflow: hidden; }
    .card.small .card-action, .card.medium .card-action, .card.large .card-action {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0; }
  .card.small {
    height: 300px; }
  .card.medium {
    height: 400px; }
  .card.large {
    height: 500px; }
  .card.horizontal {
    display: flex; }
    .card.horizontal.small .card-image, .card.horizontal.medium .card-image, .card.horizontal.large .card-image {
      height: 100%;
      max-height: none;
      overflow: visible; }
      .card.horizontal.small .card-image img, .card.horizontal.medium .card-image img, .card.horizontal.large .card-image img {
        height: 100%; }
    .card.horizontal .card-image {
      max-width: 50%; }
      .card.horizontal .card-image img {
        border-radius: 2px 0 0 2px;
        max-width: 100%;
        width: auto; }
    .card.horizontal .card-stacked {
      display: flex;
      flex-direction: column;
      flex: 1;
      position: relative; }
      .card.horizontal .card-stacked .card-content {
        flex-grow: 1; }
  .card.sticky-action .card-action {
    z-index: 2; }
  .card.sticky-action .card-reveal {
    z-index: 1;
    padding-bottom: 64px; }
  .card .card-image {
    position: relative;
    /*Image background for content*/ }
    .card .card-image img {
      display: block;
      border-radius: 2px 2px 0 0;
      position: relative;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%; }
    .card .card-image .card-title {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 20px;
    }
    .card .card-content {
        padding: 20px;
        border-radius: 0 0 2px 2px;
    }
    .card .card-content p {
      margin: 0;
      color: inherit; }
    .card .card-content .card-title {
      line-height: 48px; }
  .card .card-action {
    position: relative;
    background-color: inherit;
    border-top: 1px solid rgba(160, 160, 160, 0.2);
    padding: 20px; }
    .card .card-action a:not(.btn):not(.btn-large):not(.btn-floating) {
      color: #FFFFFF;
      margin-right: 20px;
      transition: color .3s ease;
      text-transform: uppercase; }
      .card .card-action a:not(.btn):not(.btn-large):not(.btn-floating):hover {
        color: white; }
  .card .card-reveal {
    padding: 20px;
    position: absolute;
    width: 100%;
    overflow-y: auto;
    left: 0;
    top: 100%;
    height: 100%;
    z-index: 3;
    display: none; }
    .card .card-reveal .card-title {
      cursor: pointer;
      display: block; }

/* Chips */
.chip {
  display: inline-block;
  height: 32px;
  font-size: 13px;
  font-weight: 500;
  line-height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  margin-bottom: 5px;
  margin-right: 5px; }
  .chip img {
    float: left;
    margin: 0 8px 0 -12px;
    height: 32px;
    width: 32px;
    border-radius: 50%; }
  .chip .close {
    cursor: pointer;
    float: right;
    font-size: 16px;
    line-height: 32px;
    padding-left: 8px; }
  .chip i {
    vertical-align: middle; }
  .chip .contact_detail {
    display: none;
    /*opacity: 0;*/
    /*transition: opacity 300ms;*/
    /*transition:opacity 0.5s linear;*/ }
  .chip .expanded_detail {
    display: inline-block;
    /*opacity: 1;*/
    /*-webkit-animation: slide-down .3s ease-out;
    -moz-animation: slide-down .3s ease-out;*/
    transition: linear 3s ease; }
  .chip.selected {
    /*animation: fade-out .5s 1;*/
    /*transition: width 0.5s ease;*/
    /*transition: 0.3s ease-in-out;*/ }

/*@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateX(-100%); }   
    100% { opacity: 1; -webkit-transform: translateX(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateX(-100%); }   
    100% { opacity: 1; -moz-transform: translateX(0); }
}*/
.chips {
  border: none;
  box-shadow: none;
  margin: 5px;
  min-height: 45px;
  outline: none;
  /*transition: all .3s;*/ }

@keyframes anim {
  0% {
    display: none;
    opacity: 0; }
  1% {
    display: block;
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }
/*Form prefix*/
.prefix ~ .chips {
  margin-left: 3rem;
  width: 92%;
  width: calc(100% - 3rem); }

.chips:empty ~ label {
  font-size: 0.8rem;
  transform: translateY(-140%); }

/* Pagination */
ul.pagination {
  padding-left: 0px;
  list-style: none;
  text-align: center; }
  ul.pagination a {
    text-decoration: none;
    color: #FFFFFF; }
  ul.pagination .disabled a {
    color: #424242; }

/* Pre Loader */
/*
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
/**************************/
/* STYLES FOR THE SPINNER */
/**************************/
/*
 * Constants:
 *      STROKEWIDTH = 3px
 *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
 *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
 *      ARCSTARTROT = 216 degrees (how much the start location of the arc
 *                                should rotate each time, 216 gives us a
 *                                5 pointed star shape (it's 360/5 * 3).
 *                                For a 7 pointed star, we might do
 *                                360/7 * 3 = 154.286)
 *      CONTAINERWIDTH = 28px
 *      SHRINK_TIME = 400ms
 */
.preloader-wrapper {
  display: inline-block;
  position: relative;
  width: 48px;
  height: 48px; }
  .preloader-wrapper.small {
    width: 36px;
    height: 36px; }
  .preloader-wrapper.big {
    width: 64px;
    height: 64px; }
  .preloader-wrapper.active {
    /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
    -webkit-animation: container-rotate 1568ms linear infinite;
    animation: container-rotate 1568ms linear infinite; }

@-webkit-keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg); } }
@keyframes container-rotate {
  to {
    transform: rotate(360deg); } }
.spinner-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-color: #00FFBA; }

.spinner-blue,
.spinner-blue-only {
  border-color: #4285f4; }

/**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as redundant as it
 * seems).
 *
 * We write out each animation in full (instead of separating animation-name,
 * animation-duration, etc.) because under the polyfill, Safari does not recognize those
 * specific properties properly, treats them as -webkit-animation, and overrides the
 * other animation rules. See https://github.com/Polymer/platform/issues/53.
 */
.active .spinner-layer.spinner-blue {
  /* durations: 4 * ARCTIME */
  /*-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;*/ }

.active .spinner-layer,
.active .spinner-layer.spinner-blue-only,
.active .spinner-layer.spinner-red-only,
.active .spinner-layer.spinner-yellow-only,
.active .spinner-layer.spinner-green-only {
  /* durations: 4 * ARCTIME */
  opacity: 1;
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

@-webkit-keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg); }
  25% {
    -webkit-transform: rotate(270deg); }
  37.5% {
    -webkit-transform: rotate(405deg); }
  50% {
    -webkit-transform: rotate(540deg); }
  62.5% {
    -webkit-transform: rotate(675deg); }
  75% {
    -webkit-transform: rotate(810deg); }
  87.5% {
    -webkit-transform: rotate(945deg); }
  to {
    -webkit-transform: rotate(1080deg); } }
@keyframes fill-unfill-rotate {
  12.5% {
    transform: rotate(135deg); }
  25% {
    transform: rotate(270deg); }
  37.5% {
    transform: rotate(405deg); }
  50% {
    transform: rotate(540deg); }
  62.5% {
    transform: rotate(675deg); }
  75% {
    transform: rotate(810deg); }
  87.5% {
    transform: rotate(945deg); }
  to {
    transform: rotate(1080deg); } }
@-webkit-keyframes blue-fade-in-out {
  from {
    opacity: 1; }
  25% {
    opacity: 1; }
  26% {
    opacity: 0; }
  89% {
    opacity: 0; }
  90% {
    opacity: 1; }
  100% {
    opacity: 1; } }
@keyframes blue-fade-in-out {
  from {
    opacity: 1; }
  25% {
    opacity: 1; }
  26% {
    opacity: 0; }
  89% {
    opacity: 0; }
  90% {
    opacity: 1; }
  100% {
    opacity: 1; } }
/**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
 */
.gap-patch {
  position: absolute;
  top: 0;
  left: 45%;
  width: 10%;
  height: 100%;
  overflow: hidden;
  border-color: inherit; }

.gap-patch .circle {
  width: 1000%;
  left: -450%; }

.circle-clipper {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit; }
  .circle-clipper .circle {
    width: 200%;
    height: 100%;
    border-width: 3px;
    /* STROKEWIDTH */
    border-style: solid;
    border-color: inherit;
    border-bottom-color: transparent !important;
    border-radius: 50%;
    -webkit-animation: none;
    animation: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0; }
  .circle-clipper.left .circle {
    left: 0;
    border-right-color: transparent !important;
    -webkit-transform: rotate(129deg);
    transform: rotate(129deg); }
  .circle-clipper.right .circle {
    left: -100%;
    border-left-color: transparent !important;
    -webkit-transform: rotate(-129deg);
    transform: rotate(-129deg); }

.active .circle-clipper.left .circle {
  /* duration: ARCTIME */
  -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.active .circle-clipper.right .circle {
  /* duration: ARCTIME */
  -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg); }
  50% {
    -webkit-transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(130deg); } }
@keyframes left-spin {
  from {
    transform: rotate(130deg); }
  50% {
    transform: rotate(-5deg); }
  to {
    transform: rotate(130deg); } }
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg); }
  50% {
    -webkit-transform: rotate(5deg); }
  to {
    -webkit-transform: rotate(-130deg); } }
@keyframes right-spin {
  from {
    transform: rotate(-130deg); }
  50% {
    transform: rotate(5deg); }
  to {
    transform: rotate(-130deg); } }
#spinnerContainer.cooldown {
  /* duration: SHRINK_TIME */
  -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
  animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1); }

@-webkit-keyframes fade-out {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@keyframes fade-out {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
.loader,
.loader:before,
.loader:after {
  border-radius: 50%; }

.loader {
  color: #4285f4;
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0); }

.loader:before,
.loader:after {
  position: absolute;
  content: ''; }

.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #FFFFFF;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.2em 5.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s; }

.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: #FFFFFF;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease; }

@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
/* Progress Bar */
.progress {
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  background-color: #bbdefb;
  border-radius: 2px;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden; }
  .progress .determinate {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #4285f4;
    transition: width .3s linear; }
  .progress .indeterminate {
    background-color: #4285f4; }
    .progress .indeterminate:before {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
    .progress .indeterminate:after {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -webkit-animation-delay: 1.15s;
      animation-delay: 1.15s; }

@-webkit-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }
@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }
@-webkit-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }
/* Collections */
.collection {
  margin: 0.5rem 0 1rem 0;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); }
    .collection .collection-item {
        background-color: #30365d;
        line-height: 1.5rem;
        padding: 10px 20px;
        margin: 0;
        border-bottom: 1px solid #e0e0e0;
        /*Avatar Collection*/
    }
    .collection .collection-item.avatar {
      min-height: 84px;
      padding-left: 72px;
      position: relative; }
      .collection .collection-item.avatar .circle {
        position: absolute;
        width: 42px;
        height: 42px;
        overflow: hidden;
        left: 15px;
        display: inline-block;
        vertical-align: middle; }
      .collection .collection-item.avatar i.circle {
        font-size: 18px;
        line-height: 42px;
        color: #fff;
        background-color: #999;
        text-align: center; }
      .collection .collection-item.avatar .title {
        font-size: 16px; }
      .collection .collection-item.avatar p {
        margin: 0; }
      .collection .collection-item.avatar .secondary-content {
        position: absolute;
        top: 16px;
        right: 16px; }
    .collection .collection-item:last-child {
      border-bottom: none; }
    .collection .collection-item.active {
      background-color: rgba(63, 81, 181, 0.8);
      color: #FFFFFF; }
      .collection .collection-item.active .secondary-content {
        color: #fff; }
  .collection a.collection-item {
    display: block;
    transition: .25s;
    color: #FFFFFF;
    text-decoration: none; }
    .collection a.collection-item:not(.active):hover {
      background-color: rgba(63, 81, 181, 0.8); }
    .collection.with-header .collection-header {
        background-color: #30365d;
        border-bottom: 1px solid #e0e0e0;
        padding: 10px 20px;
    }
  .collection.with-header .collection-item {
    padding-left: 30px; }
  .collection.with-header .collection-item.avatar {
    padding-left: 72px; }

/*Made less specific to allow easier overriding*/
.secondary-content {
  float: right;
  color: #00FFBA; }

.collapsible .collection {
  margin: 0;
  border: none; }

/*Badges*/
span.badge {
  min-width: 3rem;
  padding: 0 6px;
  margin-left: 14px;
  text-align: center;
  font-size: 1rem;
  line-height: inherit;
  color: color("grey", "darken-1");
  float: right;
  box-sizing: border-box; }
    span.badge.new {
        font-weight: 300;
        font-size: 0.8rem;
        color: #30365d;
        background-color: #FFFFFF;
        border-radius: 2px;
    }
  span.badge.new:after {
    content: " new"; }
  span.badge[data-badge-caption]::after {
    content: " " attr(data-badge-caption); }

nav ul a span.badge {
  display: inline-block;
  float: none;
  margin-left: 4px;
  line-height: 22px;
  height: 22px; }

.side-nav span.badge.new,
.collapsible span.badge.new {
  position: relative;
  background-color: transparent; }
  .side-nav span.badge.new::before,
  .collapsible span.badge.new::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 0;
    bottom: 10px;
    left: 0;
    background-color: #FFFFFF;
    border-radius: 2px;
    z-index: -1; }

.collapsible span.badge.new {
  z-index: 1; }

/*Responsive Videos*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden; }
  .video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/* Grid Stack */
.grid-stack {
  background: #FFFFFF; }

.grid-stack-item-content {
    color: #FFFFFF;
    /*text-align: center;*/
    background-color: #30365d;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

.def_modal {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  padding: 0;
  max-height: 70%;
  width: 55%;
  margin: auto;
  overflow-y: auto;
  border-radius: 2px;
  will-change: top, opacity; 
}
  @media only screen and (max-width: 992px) {
    .def_modal {
      width: 90%; 
    } 
  }
  .def_modal.small_modal {
    width: 470px; 
  }
    @media only screen and (max-width: 992px) {
      .def_modal.small_modal {
        width: 90%; 
      } 
    }
    .def_modal.small_modal label {
      width: 100px; 
    }
      @media only screen and (max-width: 992px) {
        .def_modal.small_modal label {
          display: block;
          width: 100%;
          text-align: left; 
        } 
      }
  .def_modal label {
    color: rgba(0, 0, 0, 0.8);
    font-weight: bold;
    display: inline-block;
    width: 150px;
    text-align: right;
    margin-right: 2%; 
  }

    @media only screen and (max-width: 992px) {
      .def_modal label {
        display: block;
        width: 100%;
        text-align: left; 
      } 
    }

  .def_modal .box_detail {
    /*span{
      line-height: 2em;
    }*/ 
  }
  .def_modal input, .def_modal select {
    width: 280px !important; 
  }
  .def_modal input[type="checkbox"], .def_modal input[type="radio"] {
    width: 20px !important;
    height: 20px !important; 
  }
  .def_modal input[type="radio"] {
    vertical-align: -4px;
    margin: 0px;
  }
  .def_modal .sub_label {
    width: auto !important;
    text-align: left;
    font-weight: normal;
    line-height: 2em; 
  }
    @media only screen and (max-width: 992px) {
      .def_modal .sub_label {
        line-height: 1em; 
      } 
    }
  .def_modal .modal-header {
    box-sizing: border-box;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    text-align: center; 
  }
  .def_modal .modal-content {
    padding: 24px; 
  }
    .def_modal .modal-content .box_detail {
      margin: 10px auto; 
    }
  .def_modal .modal-close {
    cursor: pointer; 
  }
  .def_modal .modal-footer {
    border-radius: 0 0 2px 2px;
    height: 56px;
    padding-bottom: 20px; 
  }

.modal-overlay {
  position: fixed;
  z-index: 999;
  top: -100px;
  /*-100px*/
  left: 0;
  bottom: 0;
  right: 0;
  height: 125%;
  /*125%*/
  width: 100%;
  background: #000;
  display: none;
  will-change: opacity; }

body.modal-open {
  overflow: hidden; }

/* Remove default checkbox */
/* [type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
  opacity: 0; } */

/*Checkbox Styles*/
[type="checkbox"] {
  /*Text Label Style*/
  /* checkbox aspect */
  /*Focused styles*/ }
  [type="checkbox"] + label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
    -webkit-user-select: none;
    /* webkit (safari, chrome) browsers */
    -moz-user-select: none;
    /* mozilla browsers */
    -khtml-user-select: none;
    /* webkit (konqueror) browsers */
    -ms-user-select: none;
    /* IE10+ */
    margin-bottom: 10px; }
  [type="checkbox"] + label:before, [type="checkbox"]:not(.filled-in) + label:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 2px solid #5a5a5a;
    border-radius: 1px;
    margin-top: 2px;
    transition: .2s; }
  [type="checkbox"]:not(.filled-in) + label:after {
    border: 0;
    transform: scale(0); }
  [type="checkbox"]:not(:checked):disabled + label:before {
    border: none;
    background-color: rgba(0, 0, 0, 0.26); }
  [type="checkbox"].tabbed:focus + label:after {
    transform: scale(1);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.1); }

    [type="checkbox"]:checked + label:before {
        top: -4px;
        left: -5px;
        width: 12px;
        height: 22px;
        border-top: 2px solid transparent;
        border-left: 2px solid transparent;
        border-right: 2px solid #30365d;
        border-bottom: 2px solid #30365d;
        transform: rotate(40deg);
        backface-visibility: hidden;
        transform-origin: 100% 100%;
    }
[type="checkbox"]:checked:disabled + label:before {
  border-right: 2px solid rgba(0, 0, 0, 0.26);
  border-bottom: 2px solid rgba(0, 0, 0, 0.26); }

/* Indeterminate checkbox */
[type="checkbox"]:indeterminate {
  /*Disabled indeterminate*/ }
    [type="checkbox"]:indeterminate + label:before {
        top: -11px;
        left: -12px;
        width: 10px;
        height: 22px;
        border-top: none;
        border-left: none;
        border-right: 2px solid #30365d;
        border-bottom: none;
        transform: rotate(90deg);
        backface-visibility: hidden;
        transform-origin: 100% 100%;
    }
  [type="checkbox"]:indeterminate:disabled + label:before {
    border-right: 2px solid rgba(0, 0, 0, 0.26);
    background-color: transparent; }

/*Filled in Style*/
[type="checkbox"].filled-in {
  /*General*/
  /*Unchecked style*/
  /*Checked style*/
  /*Focused styles*/
  /*Disabled style*/ }
  [type="checkbox"].filled-in + label:after {
    border-radius: 2px; }
  [type="checkbox"].filled-in + label:before,
  [type="checkbox"].filled-in + label:after {
    content: '';
    left: 0;
    position: absolute;
    /* .1s delay is for check animation */
    transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
    z-index: 1; }
  [type="checkbox"].filled-in:not(:checked) + label:before {
    width: 0;
    height: 0;
    border: 3px solid transparent;
    left: 6px;
    top: 10px;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 20% 40%;
    transform-origin: 100% 100%; }
  [type="checkbox"].filled-in:not(:checked) + label:after {
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid #5a5a5a;
    top: 0px;
    z-index: 0; }
  [type="checkbox"].filled-in:checked + label:before {
    top: 0;
    left: 1px;
    /*1*/
    width: 6px;
    /*8*/
    height: 13px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%; }
    [type="checkbox"].filled-in:checked + label:after {
        top: 0;
        width: 20px;
        height: 20px;
        border: 2px solid #30365d;
        background-color: #30365d;
        z-index: 0;
    }
  [type="checkbox"].filled-in.tabbed:focus + label:after {
    border-radius: 2px;
    border-color: #5a5a5a;
    background-color: rgba(0, 0, 0, 0.1); }
  [type="checkbox"].filled-in.tabbed:checked:focus + label:after {
    border-radius: 2px;
    background-color: #00FFBA;
    border-color: #00FFBA; }
  [type="checkbox"].filled-in:disabled:not(:checked) + label:before {
    background-color: transparent;
    border: 2px solid transparent; }
  [type="checkbox"].filled-in:disabled:not(:checked) + label:after {
    border-color: transparent;
    background-color: #BDBDBD; }
  [type="checkbox"].filled-in:disabled:checked + label:before {
    background-color: transparent; }
  [type="checkbox"].filled-in:disabled:checked + label:after {
    background-color: #BDBDBD;
    border-color: #BDBDBD; }

/* Radio button */
/*Remove default Radio Buttons*/
/*[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
  opacity: 0; }*/

[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  /*display: inline-block;*/
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  transition: .28s ease;
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  user-select: none;
  margin-bottom: 10px; }

[type="radio"] + label:before,
[type="radio"] + label:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 0px 4px 4px 4px;
  width: 16px;
  height: 16px;
  z-index: 0;
  transition: .28s ease; }

/* Unchecked styles */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:before,
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
  border-radius: 50%; }

[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after {
  border: 2px solid #5a5a5a; }

[type="radio"]:not(:checked) + label:after {
  transform: scale(0); }

/* Checked styles */
[type="radio"]:checked + label:before {
  border: 2px solid transparent; }

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
    border: 2px solid #30365d;
}

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:after {
    background-color: #30365d;
}

[type="radio"]:checked + label:after {
  transform: scale(1.02); }

/* Radio With gap */
[type="radio"].with-gap:checked + label:after {
  transform: scale(0.5); }

/* Focused styles */
[type="radio"].tabbed:focus + label:before {
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); }

/* Disabled Radio With gap */
[type="radio"].with-gap:disabled:checked + label:before {
  border: 2px solid rgba(0, 0, 0, 0.26); }

[type="radio"].with-gap:disabled:checked + label:after {
  border: none;
  background-color: rgba(0, 0, 0, 0.26); }

/* Disabled style */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
  background-color: transparent;
  border-color: rgba(0, 0, 0, 0.26); }

[type="radio"]:disabled + label {
  color: rgba(0, 0, 0, 0.26); }

[type="radio"]:disabled:not(:checked) + label:before {
  border-color: rgba(0, 0, 0, 0.26); }

[type="radio"]:disabled:checked + label:after {
  background-color: rgba(0, 0, 0, 0.26);
  border-color: #BDBDBD; }

/* Icons */
.material-icons.md-18 {
  font-size: 18px; }

.material-icons.md-24 {
  font-size: 24px; }

.material-icons.md-36 {
  font-size: 36px; }

.material-icons.md-48 {
  font-size: 48px; }

.icon_white {
  color: #fff; }

/* Mobile Style */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  label {
    display: block; }

  input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="datetime"], input[type="datetime-local"], select, textarea {
    margin: 10px auto;
    width: calc(100% - 1em); }

  .formbox .form-body .label {
    text-align: left;
    width: 100%;
    margin-right: 0px;
    display: block; }
  .formbox .form-body .form-cell {
    width: 100%;
    max-width: none;
    display: block;
    float: none;
    height: auto; }
  .formbox .form-body .form-cell-long {
    width: 100%;
    max-width: none;
    display: block;
    float: none;
    height: auto; }

  .materialbox_wrapper {
    width: 100%; } }

/*# sourceMappingURL=default_style.css.map */
#container {
    margin-top: 0;
}

/* TOOLTIPS Custom*/
.material-tooltip {
    padding: 10px 8px;
    font-size: 0.8rem;
    z-index: 2000;
    background-color: transparent;
    border-radius: 2px;
    color: #fff;
    line-height: 120%;
    opacity: 0;
    position: absolute;
    text-align: center;
    max-width: 400px;
    overflow: hidden;
    left: 0;
    top: 0;
    pointer-events: none;
    visibility: hidden;
    background-color: #323232;
}

.backdrop {
    position: absolute;
    opacity: 0;
    height: 7px;
    width: 14px;
    border-radius: 0 0 50% 50%;
    background-color: #323232;
    z-index: -1;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    visibility: hidden;
}

/* Paginate button default */
.paginate_button {
    width: auto;
    padding: 10px;
    padding-right: 15px;
    padding-left: 15px;
    border-radius: 3px;
    margin: 0 5px 0 5px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.20);
    transition: all ease 0.5s;
}

    .paginate_button.disabled {
        box-shadow: none;
        cursor: default;
    }

    .paginate_button.current {
        font-weight: bold;
    }

/* Message at top of page in pink bar */
.advance_msg {
    width: 100vw;
    text-align: center;
    color: white;
}

/* Scroll bar - thick with arrows
::-webkit-scrollbar-button:vertical:increment {
    background-image: url(../Artwork/dn.png);
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transform: rotate(180deg);
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(../Artwork/up.png);
    background-size: contain;
    background-repeat: no-repeat;
}

/* Scroll bar background 
::-webkit-scrollbar {
    background-color: #e9e9e9;
}

/* Scroll bar up/down buttons 
::-webkit-scrollbar-button {
    background-color: #30365d;
}
    /* Scroll bar up/down buttons hover 
    ::-webkit-scrollbar-button:hover {
        background-color: #545d8c;
    }

/* scroll bar slider 
::-webkit-scrollbar-thumb {
    background: #30365d;
}

    /* scroll bar slider hover 
    ::-webkit-scrollbar-thumb:hover {
        background-color: #545d8c;
    }
*/

#quickAddShiftsButtonDiv {
    position: absolute;
    top: 7px;
    left: 90px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#reportDDL_dvi {
    position: absolute;
    top: 7px;
    left: 240px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: white;
}

div#myForm {
    position: absolute;
    top: 7px;
    left: 33em;
    padding-top: 5px;
    padding-bottom: 5px;
    color: white;
}

.paperFormLabel {
    color: white;
    font-weight: unset;
}

@media only screen and (max-width: 1600px) {
    div#myForm {
        left: 52em;
    }

    .dataTables_filter input[type=search] {
        width: 15em !important;
    }
}

#btnQuickAddShifts {
    max-width: none !important;
    height: 38px !important;
}

.ui-dialog[aria-describedby="diagQuickAddShifts"] {
    width: 98vw !important;
    height: 80vh !important;
}

    .ui-dialog[aria-describedby="diagQuickAddShifts"] iframe {
        width: 96vw;
        height: 64vh;
    }

/********************************************************************************/
/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 7px;
}

    ::-webkit-scrollbar:hover {
        cursor: pointer !important;
    }

::-webkit-scrollbar-button {
    width: 2px;
    height: 0px;
}

    ::-webkit-scrollbar-thumb:hover {
        cursor: pointer;
    }


/********************************************************************************/
/******** OVERALL WEDSITE COLOUR STYLES *********/
/**** General site wide styles ****/
/* HTML and body */
html, body {
    background-color: #ffffff;
}

.display-none {
    display: none !important;
}

/* Site */
#sb-site, .sb-site-container {
    background-color: #ffffff;
}

/* Page header text */
h1, h3 {
    color: #30365d;
}

/* Page title */
.page-title {
    color: #30365d;
}

/* Section title */
.section .title {
    color: #30365d;
}

.table_header {
    background-color: #30365d;
}

/* Table header */
th {
    background: #30365d;
    color: white;
}

.dataTables_scrollHeadInner {
    background-color: #30365d !important;
}

/* Table row */
tr {
    background-color: #ebebeb;
}

tr:not(:first-of-type) {
    border-bottom: 1px solid #ccc;
}
tr:nth-of-type(2) {
    border-top: 1px solid #ccc;
}


.selected,
.highlighted,
.selectedRow td,
table.dataTable tbody tr.selected {
    background-color: #b5cdff !important;
}

.dataTable tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: #dee7fa;
}

table.dataTable tbody tr.selected:hover,
table.dataTable tbody tr:hover.highlighted {
    background-color: #c2d6ff !important;
}

/*table.dataTable thead th, table.dataTable thead td {
    border-bottom: 1px solid #ffffff;
}*/

.dataTables_scroll {
    /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);*/
}

.dataTables_filter i {
    color: #30365d;
}

/* Table search input */
.dataTables_filter input[type=search] {
    background-color: #ffffff;
    color: #30365d;
    padding: 0px 8px;
}

/* Table info (num of rows showing) */
.dataTables_info {
    color: #30365d !important;
}

/* Button */
button, .button_normal, .btn-primary {
    background-color: #30365d;
    color: #ffffff;
}

    /* Button hover*/
    button:hover, .button_normal:hover, button.ui-state-hover, .btn:hover {
        background-color: #545d8c !important;
        color: #ffffff;
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    }

    button:disabled {
        background-color: #BDBDBD;
    }

    .button_normal.button_normal_disabled {
        background-color: #BDBDBD !important;
        box-shadow: none;
    }

    .button_normal.button_normal_disabled:hover {
        background-color: #BDBDBD !important;
        box-shadow: none;
    }

        /* Input buttons */
        input[type="button"], input[type="submit"], input.button_small {
            background-color: #30365d;
            color: #ffffff;
        }

    /* Input buttons hover */
    input[type="button"]:hover, input[type="submit"]:hover {
        background-color: #545d8c;
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    }

    input[type=button]:disabled, input[type=submit]:disabled {
        background-color: #BDBDBD;
        box-shadow:none;
    }

input[type=button]:disabled:hover, input[type=submit]:disabled:hover {
    background-color: #BDBDBD !important;
    box-shadow: none;
}

/* Input areas */
input:focus:not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
    box-shadow: 0 2px 0 0 #30365d;
}

textarea:focus {
    box-shadow: 0 2px 0 0 #30365d;
}

/* Action buttons  */
.action_button {
    background-color: #30365d;
    color: #ffffff;
}

    /* Action buttons hover */
    .action_button:not(.disabled):not(.action_close):hover {
        background-color: #545d8c;
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    }

/* Action buttons icon */
.action_button i {
    color: #ffffff;
}

/* Paginate buttons */
.paginate_button {
    background-color: #30365d;
    color: #ffffff;
}
    /* Paginate buttons hover */
    .paginate_button:hover {
        background-color: #545d8c;
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    }

    /* Paginate buttons current page */
    .paginate_button.current {
        background-color: #de4767;
    }

    /* Paginate buttons prev/next disabled */
    .paginate_button.disabled {
        background-color: lightgrey;
        color: #424242;
    }

    /* Label style */
    label {
        color: #30356d;
    }
    /* Label style for dark background*/
    label.light {
        color: #ffffff;
    }

/* Switch background */
.switch_toggle label .lever {
    background-color: #818181;
}

/* Switch (left) */
.switch_toggle label .lever:after {
    background-color: #de4767;
}

/* Switch (right) */
.switch_toggle label input[type=checkbox]:checked + .lever:after {
    background-color: #de4767;
}

/* Cog button on right edge of page */
.switch_wrapper .custom_button, .switch_section {
    background-color: #30365d;
    color: #ffffff;
}

/* Collapsible body */
.collapsible-body {
    border-bottom: 1px solid #ffffff;
}

    /* Collapsible header */
    .collapsible-header {
        background-color: #30365d;
        border-bottom: 1px solid #ffffff;
        color: #ffffff;
    }

        /* Collapsible header hover */
        .collapsible-header:hover {
            background-color: #545d8c;
        }

/* Dialog */
.ui-dialog {
    background-color: #ffffff;
}

/* Dialog header */
.ui-dialog .ui-dialog-titlebar {
    background-color: #30365d !important;
    color: #ffffff;
}

    /* Dialog close button */
    .ui-dialog .ui-dialog-titlebar-close {
        background-color: #30365d !important;
        color: #ffffff;
        border: none !important;
    }

/* Dialog buttonset */
.ui-dialog-buttonset button {
    background-color: #30365d !important;
    color: #ffffff;
}

/* Content blue class */
.cont-blue {
    background-color: #30365d;
    color: #ffffff;
}

/* Modal body*/
.def_modal, .modal-content {
    background-color: #ffffff;
}

/* Modal header*/
.modal-header, .modal-head {
    background-color: #30365d;
    color: #ffffff;
}

    /* Modal header*/
    .def_modal .modal-header {
        background-color: #30365d;
        color: #ffffff;
    }

.modal-sub-header {
    color: white;
    background-color: #30365d;
    clear: both;
}

.modal_new table th {
    background-color: #30365d;
    color: white !important;
    font-size: 14px;
}

/* Chips */
.chip {
    background-color: #30365d;
    color: #ffffff;
}

.chips.focus {
    border-bottom: 1px solid #de4767;
    box-shadow: 0 1px 0 0 #000000;
}

.chips:hover {
    cursor: text;
}

    .chips .chip.selected {
        background-color: #de4767;
        color: #ffffff;
    }

    .chip .contact_detail i {
        color: rgba(0, 0, 0, 0.87);
    }

/* Cards */
.card {
    background-color: #ffffff;
}

.card-header {
    background-color: #30365d;
    color: #ffffff;
}

.card-content {
    background-color: #ffffff;
}

.card-panel {
    background-color: #30365d;
}

.card .card-image .card-title {
    color: #30365d;
}

.card .card-reveal {
    background-color: #30365d;
}

.toast {
    background-color: #545d8c !important;
    color: #ffffff;
}

iframe {
    border: none;
}

.tooltip .tooltiptext {
    background-color: #de4767;
    color: #fff;
}

/* Scroll bar slider */
::-webkit-scrollbar-thumb {
    background: #545d8c;
    border: 0px solid #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

    /* Scroll bar slider hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #de4767;
    }

    /* Scroll bar slider active */
    ::-webkit-scrollbar-thumb:active {
        background: #30365d;
    }

/* Scroll bar background */
::-webkit-scrollbar-track {
    background: #e9e9e9;
    border: 0px none #ffffff;
}

    /* Scroll bar background hover - Not to sure how if i like this
    ::-webkit-scrollbar-track:hover {
        background: transparent;
    }

    /* Scroll bar background active 
    ::-webkit-scrollbar-track:active {
        background: transparent;
    }*/

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    background-color: #ebebeb;
    border-bottom: 1px solid #ffffff;
}
/* Advance search header */
#GV_AdvancedSearch thead {
    background-color: #30365d;
}


/********************************************************************************/
/**** General styles specifically for index ****/
/* Login box header */
.login_box .title {
    background-color: #30365d;
    color: #ffffff;
}

/* Information icon */
.login_box .body {
    color: #30365d;
}

    /* Forgotten pin button */
    .login_box .body input[type=button] {
        background-color: #de4767;
    }

        /* Forgotten pin button hover */
        .login_box .body input[type=button]:hover {
            background-color: #ed6884;
        }


/********************************************************************************/
/**** General styles specifically for admin_overview ****/
/* Red buttons */
.button_normal.red {
    background-color: #de4767;
}

    /* Red buttons hover */
    .button_normal.red:hover {
        background-color: #ed6884 !important;
    }


/********************************************************************************/
/**** General styles specifically for vetting_summary ****/
/* Table filter bar */
.screening-filter-holder {
    background-color: #30365d;
    color: #ffffff;
}

    /* Table filter bar button hover */
    .screening-filter-holder > div:not(.on):hover {
        background-color: #545d8c;
    }

/* Table filter bar button selected */
.screening-filter-holder > div.on {
    background-color: #de4767;
    color: #ffffff;
}

/* Not to sure what this does?
.screening-filter-holder > div.ignore:hover {
    background-color: #30365d !important;
}
*/

/*Table cells*/
.screening-table td.references-col, 
.screening-table td.information-col, 
.screening-table td.policy-col, 
.screening-table td.address-col, 
.screening-table td.education-col {
    border-left: solid 1px #ffffff;
}

.ui-dialog .ui-dialog-title{
    width: 100% !important;
}
/********************************************************************************/
/**** General styles specifically for vetting_managemant ****/
/* Table titles */
.table .title {
    color: white;
}

.screening-table {
    background-color: #ffffff;
}

    .screening-table tr:hover {
        background-color: #dee7fa;
    }


/********************************************************************************/
/**** General styles specifically for deployment_summary ****/
/* filter rotas prompt (top of screen) */
.advance_msg {
    background-color: #de4767;
}

/* Allocation Overview body */
#allocationOverviewContainer .body {
    background-color: #30365d;
}

    /* Allocation Overview header */
    #allocationOverviewContainer .header {
        background-color: #30365d;
    }

        /* Allocation Overview title */
        #allocationOverviewContainer .header .title {
            background-color: #30365d;
        }

/* Allocation overview table cell */
#allocationOverviewContainer table td {
    border-bottom: 1px solid #30365d;
    border-right: 1px solid #30365d;
}

/* Page header buttons */
.top-tab-button {
    color: #ffffff;
}

    /* Page header buttons hover */
    .top-tab-button:hover {
        background-color: #545d8c;
    }

/* Table column header */
tr.header.blue.small td {
    background-color: #30365d;
}

/* Venue table header */
.address-row td {
    color: #ffffff;
}

/* Venue notes display (in venue header) */
.venue-note-input:disabled {
    color: #ffffff;
}

/* Dropdown menu (top right covert of venue table) */
.dropdown-content {
    background-color: #30365d;
    color: #ffffff;
}

    /* Links inside the dropdown menu */
    .dropdown-content a, .dropdown a {
        color: #ffffff;
        border-bottom: 1px solid #ffffff;
    }

        /* Links hover */
        .dropdown-content a:hover, .dropdown-content input:hover {
            background-color: #545d8c;
        }

        /* Links disabled */
        .dropdown-content a[disabled='disabled'] {
            background-color: lightgrey;
            color: #424242;
        }

.log-box {
    background-color: #30365d;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    color: white;
}

.compliance-box {
    background-color: #30365d;
    color: white;
}

.remove_shifts {
    background-color: #30365d;
    color: #fff;
}

.staff-info-box {
    background-color: #30365d;
    color: white;
}

.staff_card .detail_tab {
    color: white;
    background-color: #30365d;
}

    .staff_card .detail_tab.selected {
        background-color: #de4767;
    }

    .staff_card .detail_tab:hover {
        background-color: #545d8c;
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    }

.recipients_table th {
    color: white;
    background-color: #30365d;
}

/********************************************************************************/
/**** General styles specifically for anomalous_shifts ****/
/* Button small */
a.button_small {
    background-color: #30365d;
    color: #ffffff;
}
    /* Button small hover */
    a.button_small:hover {
        background-color: #545d8c;
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    }

.button_small_disabled {
    background-color: #BDBDBD !important;
    box-shadow: none !important;
}
/* Button small hover */
.button_small_disabled:hover {
    background-color: #BDBDBD !important;
    box-shadow: none !important;
}

/* Options dropdown button fake */
.dropbtn {
    background-color: #30365d;
    color: #ffffff;
}

/* Dropdown links */
.dropdown-content {
    background-color: #30365d;
    color: #ffffff;
}

    .dropdown-content a {
        color: white;
    }

        /* Dropdown links hover */
        .dropdown-content a:hover {
            background-color: #545d8c;
        }


/********************************************************************************/
/**** General styles specifically for control_room_beta ****/
/* Shift view controls background */
.control_room_wrapper .shift-view-controls {
    background-color: #30365d;
    color: #ffffff;
}

/* Notifications header */
.control_room_wrapper .notifications_header {
    background-color: #30365d;
    color: #ffffff;
}

/* Cog menu button (right side of page) */
.option__wrapper .custom_button {
    background-color: #30365d;
    color: #ffffff;
}

/* Cog menu (right side of page) */
.option__wrapper .option__section {
    background-color: #30365d;
}

/* Notifications and Map div */
.control_room_wrapper .control_room_content .content_left {
    border-right: solid 1px #30365d;
}

.control_room_wrapper .control_room_content .notifcation_holder {
    border-bottom: solid 1px #30365d;
}

/* Control room background */
.control_room_wrapper .control_room_content #Notification-Tile {
    background-color: #ffffff;
}

.selected a, .selected label {
    color: #ffffff;
}

.red.selected {
    background-color: #9279B5 !important;
    color: #ffffff;
}

.red a {
    color: #ffffff;
}

.ui-slider-horizontal .ui-slider-handle {
    background-color: #de4767;
}

#viewed_shift_info {
    background-color: #30365d;
    color: #ffffff;
}

#control_panel {
    background-color: #30365d;
}

#path_times #path_values {
    color: #ffffff;
}



/********************************************************************************/
/**** General styles specifically for Emergency_Control ****/
/*  */
.notifications_header, .incidents_tile .incidents_header {
    background-color: #30365d;
    color: #ffffff;
}


/********************************************************************************/
/**** General styles specifically for tasks ****/
/*  */
#cTasksHeader {
    background-color: #ffffff;
}

/* Header under page title */
.header-row {
    color: #ffffff;
    background-color: #30365d;
}

/* Site select input */
#ContentPlaceHolder1_selSites {
    background-color: #30365d;
    color: #ffffff;
}

    /* Site select input disabled */
    #ContentPlaceHolder1_selSites option:disabled {
        background-color: lightgrey;
    }

/* Table header */
.table-header {
    color: #ffffff;
    background-color: #30365d;
}

/* Table cell */
/*tbody td {
    border-bottom: 1px solid #ccc;
}*/


/********************************************************************************/
/**** General styles specifically for reporting ****/
/* Modal body */
.modal_new, .modal_new .body {
    background-color: #fff;
}


/********************************************************************************/
/**** General styles specifically for usage ****/
/* Section break */
.section-break {
    background-color: #30365d;
}

.section-head {
    background-color: #30365d;
    color: white;
}

table.grid th {
    border-color: #30365d;
    background-color: #30365d;
    color: white;
    box-shadow: 0 5px 10px -10px rgba(0, 0, 0, 0.2);
}

table.grid td {
    border-right-color: #30365d;
    border-left: none;
}

    table.grid td:last-of-type {
        border-right: none;
    }

    tr.break td {
        border-bottom: 2px solid #de4767 !important;
    }

tr.total td.label, tr.total td.value {
    border-top: 2px solid #de4767 !important;
}

table.block-summary {
    border: solid 3px #30365d;
    box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2);
}


/********************************************************************************/
/**** General styles specifically for timesheets ****/
/* Day header */
tr.day-row {
    background-color: #30365d;
    color: white;
}

    /* Day header hover */
    tr.day-row:hover {
        background-color: #545d8c !important;
    }


/********************************************************************************/
/**** General styles specifically for amendments ****/
/* List items */
.list-group-item {
    background-color: #30365d;
    color: white;
}

    .list-group-item:hover {
        background-color: #545d8c;
    }


/********************************************************************************/
/**** General styles specifically for invoice_summary ****/
/* Select all tick box background */
tr td.sorting, tr td.sorting_asc, tr td.sorting_disabled {
    background-color: #30365d;
}

.confirmed td {
    background-color: #C5E1A5;
}


/********************************************************************************/
/**** General styles specifically for from_definition ****/
/* Form select header */
#formSelectHead {
    background-color: #30365d;
    color: #ffffff;
}


/********************************************************************************/
/**** General styles specifically for absences ****/
/* Modal header */
.c247-brand {
    background-color: #30365d;
    color: #ffffff;
}

.contextmenu-list li:hover {
    background-color: #545d8c;
    color: white;
}


/********************************************************************************/
/**** General styles specifically for staff_search2 ****/
/* Search input container header */
.panel .panel-title {
    background-color: #30365d;
    color: #ffffff;
}

.select select {
    background: #fff;
    color: #555;
}

.boxed label {
    border: solid 2px #ccc;
}

.boxed input[type="radio"]:checked + label {
    border: solid 2px #30365d;
}


/********************************************************************************/
/**** General styles specifically for site_search ****/
/* Search input container header */
.tabholder .tab {
    background-color: #30365d;
    color: white;
}

    .tabholder .tab.active {
        background-color: #3b4480;
    }

    .tabholder .tab:hover {
        background-color: #545d8c;
        box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.4);
    }


/********************************************************************************/
/**** General styles specifically for site_records, staff_records and master_settings ****/
/* Buttons */
a.button:not(.myProfile), a.small-button {
    background: #30365d;
    color: #ffffff;
}
    /* Buttons hover */
    a.button:hover, a.small-button:hover, a.small-button:not(.inactive):hover {
        background: #545d8c;
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    }

.accordion {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
    background: #ffffff; /* pale gray - #f5f5f5 */
}

a.accordion-section-title {
    background: #30365d;
    color: #ffffff;
}

.accordion-section-title.active {
    background: #3b4480; /* Explore other options of colour*/
}

.accordion-section-title:hover {
    background: #545d8c;
}

.accordion-section-title:after {
    color: #ffffff;
}

.accordion-section-title:before {
    color: #ffffff;
}

.accordion-section-content {
    background: #ffffff;
}

.formtable td {
    background-color: #ffffff;
}

.separator {
    background-color: #30365d;
    color: #ffffff;
}

.show-hide-table th {
    background-color: #30365d;
    color: #ffffff;
}

.inputfile + label {
    background-color: #30365d;
    color: #ffffff;
}

.controlpanel {
    background-color: #ffffff;
    border-color: #30365d;
    /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
}

.iframe_modal .body {
    background-color: #ffffff;
}

.fixed_headers th, .fixed_headers thead tr {
    background-color: #30365d;
    color: white;
}

/* Required field not filled*/
input.invalid, select.invalid {
    background-color: #E57373 !important;
}

#defaults {
    background-color: #f5f5f5;
}

    #defaults .head {
        background-color: #30365d;
        color: #fff;
    }

    #defaults .content {
        border: 4px solid #30365d;
    }

.inactive {
    background: #888888 !important;
}

#profile_empty_photo {
    border: thin solid #9E9E9E;
}

    #profile_empty_photo i {
        color: #9E9E9E;
    }

.inactive {
    background: #888888 !important;
}

p .responsive-header {
    display: none;
    margin-right: 200px;
    text-align: left;
    padding-left: 50px;
    box-sizing: border-box;
    color: black;
    font-weight: bold;
}

@media only screen and (min-device-width: 400px) and (max-device-width: 1024px) {
    #sitesTable > tbody > tr > td {
        display: flex;
        justify-content: center;
        border-bottom: 1px solid 0.5px;
    }

    p .responsive-header {
        width: 45%;
        display: block;
    }
}

/********************************************************************************/
/**** General styles specifically for master_settings ****/
/* User info banner */
.infobox {
    background-color: #de4767;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}


/********************************************************************************/
/**** General styles specifically for upload_documents ****/
/* Page controls background */
.document-controls {
    background: #ffffff;
}


/********************************************************************************/
/**** General styles specifically for My Profile modal ****/
/*  */

.ui-dialog.user_profile_card {
    width: 300px !important;
    border: none !important;
    overflow: unset !important;
    padding: unset !important;

}

/*.ui-dialog-content {
    overflow: unset !important;
}*/

.user_profile_info {
}

.img_row {

}

.user_profile_info_row {
    margin: 5px 5px 5px 0px;
}

.user_profile_input {
    font-family: open sans;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    height: 3vh !important;
    width: 8vw !important;
    font-size: 1em;
    border-radius: 2px;
    border: 1px solid #30365d;
    transition: all ease .3s;
    padding: 0.2em;
    box-sizing: border-box;
    background-color: #fff;
    text-align: left !important;
    margin-left: 5px !important;
}

.user_profile_btn {
    text-decoration: none;
    padding: 5px 10px;
    display: block;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
    transition: all ease .5s !important;
    user-select: none;
    cursor: pointer;
    border: none;
    border-radius: 2px !important;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    font-size: 14px;
    max-width: 150px !important;
    width: auto !important;
    margin: 0px;
    height: auto !important;
    padding: 0.2em !important;
}

    .user_profile_btn:hover {
        transition: all ease .5s;
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15) !important;
    }

.user_profile_info_icon{
    font-size: 30px !important;
}

#txtLastNameUserProfile {
}

#txtEmailUserProfile {

}

#btnUpdateUserProfileInfo, #btnVerifyCurrentPassword, #btnBackToProfileInfo, #btnBackToMain, #btnSetNewPassword {
    width: 4vw !important;
    height: 3vh !important;
}

#btnChangePasswordUserProfileInfo {
    width: 9vw !important;
    height: 3vh !important;
}

.update_user_password {

}

.verify_current_password {

}

.text_row {

}

#txtCurrentPasswordUserProfile {

}

.set_new_password {

}

#txtNewPasswordUserProfile {

}

#txtRetypePasswordUserProfile {


}

/* Tooltip container */
.user_profile_tooltip {
    position: relative;
    display: inline-block;
}
    /* Tooltip text */
    .user_profile_tooltip .user_profile_tooltiptext {
        visibility: hidden;
        width: 18vw;
        height: 9vh;
        background-color: #de4767 !important;
        color: white !important;
        text-align: center;
        padding: 5px 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        top: 35px;
        right: -160px;
        border-radius: 3px;
    }


    /* Show the tooltip text when you mouse over the tooltip container */
    .user_profile_tooltip:hover .user_profile_tooltiptext {
        visibility: visible;
    }


.user_profile_label {
    color: #30356d;
    font-weight: bold;
    font-size: 16px;
}