:root {
  /* Go to main/colour_test to see a colour panel */
  /* Colours: */
  
  /* --skin-main-nav-colour: #e4051f; */
  --skin-main-nav-colour: #000000;
  /* --skin-body-background: #3e3f3a; */
  --skin-body-background: #3e3f3a;
  /* --skin-active-pagination: #737470; */
  --skin-active-pagination: #737470;

  /* --skin-success-btn: #00A88E; */
  --skin-success-btn: #00b300;

  
  /* --skin-info-btn: #868B8E; */
  --skin-info-btn: #868B8E;

   
  /* --skin-danger-btn: #FCD700; */
  --skin-danger-btn: #FCD700;
  }
  
  body {
    background-color: var(--skin-body-background);
  }
  a:focus {
    color: #666666;
  }
  
  /* Login Colours */
  
  #the_form {
  -webkit-box-shadow: 0px 7px 8px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 7px 8px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 7px 8px 0px rgba(0,0,0,0.75);
  background-color: #FFFFFF;
  }
  
  #the_form h1 {
    background: var(--skin-main-nav-colour);
  }
  
  #the_form h1:before,
  #the_form h1:after {
    background-color: var(--skin-main-nav-colour); filter: brightness(1.25);;
  }
  
  
  /* Card Approval */
  
  .card_approval_tabs {
    background-color: var(--skin-main-nav-colour) !important;
    color: white !important; 
    border-color: var(--skin-main-nav-colour) !important;
    font-weight: normal;
  }
  
  /* Any badges knocking around */
  
  .nav_badge {
      background-color: var(--skin-main-nav-colour);
      bottom: 2px;
      color: white;
      display: none;
      font-size: 11px;
      left: 2px;
      padding-bottom: 2px;
      padding-top: 2px;
      position: relative;
  }
  
  .card_approval_badge {
      background-color: var(--skin-main-nav-colour);
      color: white;
  }
  
  /* Top of Archive */
  
  .archive_heading {
    background-color: var(--skin-body-background) !important;
    cursor: pointer;
  }
  
  .archive_heading .panel-title{
    color: white;
  }
  
  .archive_heading_body {
    background-color: #f8f8f8 !important;
  }
  
  /* Dashboard Panels */
  .hero-widget { background-color: #EFE8DC;}
  .hero-widget label { color: #67665A;}
  .hero-widget:hover {
    background-color: var(--skin-main-nav-colour);
    color: white;
  }
  
  /* Pagination */
  
  .pagination > li > a, .pagination > li > span {
    background-color: var(--skin-body-background);
    color: white;
    text-transform: capitalize;
    border-color: #31322E;
  }
  
  .pagination > .active > a, 
  .pagination > .active > span, 
  .pagination > .active > a:hover, 
  .pagination > .active > span:hover, 
  .pagination > .active > a:focus, 
  .pagination > .active > span:focus {
    background-color: var(--skin-active-pagination);
    border-color: var(--skin-active-pagination);
    color: white;
  }
  
  .pagination > li > a:hover, 
  .pagination > li > span:hover, 
  .pagination > li > a:focus, 
  .pagination > li > span:focus {
      background-color: var(--skin-active-pagination);
      border-color: var(--skin-active-pagination);
      color: white;
  }
  
  /* Page headers on Relations */
  .page_breaker {
    background-color: var(--skin-main-nav-colour);
    color: white;
  }
  
  .edit_member_option:hover {
    background-color: var(--skin-main-nav-colour);
    color: white;
  }
  
  .misc_colour_text {
    color: var(--skin-main-nav-colour);
    filter: brightness(1.25);
  }
  
  .misc_color_item {
    background-color: var(--skin-main-nav-colour);
    filter: brightness(1.25);
  }
  
  /* filter button colours on active */
  
  .bizmoduleselect label.btn-default.active{ background-color:var(--skin-main-nav-colour); color:#FFF; }
  
  /* navbar */
  
  .navbar-default {
      background-color: var(--skin-main-nav-colour);
      border-color: var(--skin-main-nav-colour);
  }
  
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
      border-color: var(--skin-main-nav-colour);
  }
  
  .navbar-default .navbar-nav > li > a {
      color: white;
  }
  
  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: var(--skin-main-nav-colour);
    filter: brightness(1.25);
  }
  
  .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: var(--skin-main-nav-colour);
    filter: brightness(1.25);
  }
  
  .navbar-default .navbar-toggle .icon-bar {
      background-color: #ffffff;
  }
  
  /* footer */
  
  #footer {
    background-color: var(--skin-main-nav-colour);
    color: white;
   }
  
  #footer a {
    color: white;
  }
  
  /* buttons*/
  
  .bg-primary { background-color: var(--skin-main-nav-colour); }
  .btn-primary {  background-color: var(--skin-main-nav-colour); }
  .btn-primary:hover { background-color: var(--skin-main-nav-colour); filter: brightness(1.25); }
  .btn-primary:focus { background-color: var(--skin-main-nav-colour); filter: brightness(0.99); }
  
  .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, 
  .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary.focus:active, .btn-primary.active.focus, 
  .open > .dropdown-toggle.btn-primary.focus {
    background-color: var(--skin-main-nav-colour); filter: brightness(1.25);
  }
  
  .btn-success { background-color: var(--skin-success-btn); }
  .btn-success:hover { background-color: var(--skin-success-btn); filter: brightness(1.10); }
  .btn-success:focus { background-color: var(--skin-success-btn); filter: brightness(0.95);}
  
  .btn-success.disabled, 
  .btn-success[disabled], 
  fieldset[disabled] .btn-success, 
  .btn-success.disabled:hover, 
  .btn-success[disabled]:hover, 
  fieldset[disabled] .btn-success:hover, 
  .btn-success.disabled:focus, 
  .btn-success[disabled]:focus, 
  fieldset[disabled] .btn-success:focus, 
  .btn-success.disabled.focus, 
  .btn-success.focus[disabled], 
  fieldset[disabled] .btn-success.focus, 
  .btn-success.disabled:active, 
  .btn-success[disabled]:active, 
  fieldset[disabled] .btn-success:active, 
  .btn-success.disabled.active, 
  .btn-success.active[disabled], 
  fieldset[disabled] .btn-success.active {
    background-color: var(--skin-success-btn); filter: brightness(0.95); 
  }
  
  .btn-success:active:hover, .btn-success.active:hover, .open > .dropdown-toggle.btn-success:hover, .btn-success:active:focus, 
  .btn-success.active:focus, .open > .dropdown-toggle.btn-success:focus, .btn-success.focus:active, .btn-success.active.focus, 
  .open > .dropdown-toggle.btn-success.focus {
    background-color: var(--skin-success-btn); filter: brightness(1.10); 
  }
  
  .btn-info { background-color: var(--skin-info-btn); }
  .btn-info:hover { background-color: var(--skin-info-btn); filter: brightness(1.15)}
  .btn-info:focus { background-color: var(--skin-info-btn); filter: brightness(0.95) }
  
  .btn-info:active:hover, .btn-info.active:hover, .open > .dropdown-toggle.btn-info:hover, .btn-info:active:focus, 
  .btn-info.active:focus, .open > .dropdown-toggle.btn-info:focus, .btn-info.focus:active, .btn-info.active.focus, 
  .open > .dropdown-toggle.btn-info.focus {
    background-color: var(--skin-info-btn); 
  }
  
  .btn-danger { background-color: var(--skin-danger-btn); color: #333333;}
  .btn-danger:hover { background-color: var(--skin-danger-btn); filter: brightness(1.05); color: #333333; }
  .btn-danger:focus { background-color: var(--skin-danger-btn); filter: brightness(0.95); color: #333333; }
  
  .btn-danger:active:hover, .btn-danger.active:hover, .open > .dropdown-toggle.btn-danger:hover, .btn-danger:active:focus, 
  .btn-danger.active:focus, .open > .dropdown-toggle.btn-danger:focus, .btn-danger.focus:active, .btn-danger.active.focus, 
  .open > .dropdown-toggle.btn-danger.focus {
    background-color: var(--skin-danger-btn-low); color: #333333;
  }
  
  /* panels */
  
  .panel-primary { border-color: var(--skin-main-nav-colour); }
  .panel-primary > .panel-heading {
      background-color: var(--skin-main-nav-colour);
      border-color: var(--skin-main-nav-colour);
      color: #ffffff;
  }
  
  .panel-success { border-color: var(--skin-success-btn); }
  .panel-success > .panel-heading {
      background-color: var(--skin-success-btn);
      border-color: var(--skin-success-btn);
      color: #ffffff;
  }
  
  
  .panel-info { border-color: var(--skin-info-btn); }
  .panel-info > .panel-heading {
      background-color: var(--skin-info-btn);
      border-color: var(--skin-info-btn);
      color: #ffffff;
  }
  
  .panel-danger { border-color: var(--skin-danger-btn); }
  .panel-danger > .panel-heading {
      background-color: var(--skin-danger-btn);
      border-color: var(--skin-danger-btn);
      color: #333333;
  }
  
  
  /* alerts */
  .alert-info {
    background-color: var(--skin-info-btn);
    padding-top: 6px;
    padding-bottom: 6px;
    font-weight: normal;
  }
  
  .alert .alert-link {
    font-weight: normal;
  }
  
  .alert-success {
    background-color: var(--skin-success-btn);
    padding-top: 6px;
    padding-bottom: 6px;
    font-weight: normal;
  }
  
  .alert-danger {
    background-color: var(--skin-danger-btn); 
    color: #333333;
    padding-top: 6px;
    padding-bottom: 6px;
    font-weight: normal;
  }
  
  .alert-warning {
    padding-top: 6px;
    padding-bottom: 6px;
    font-weight: normal;
  }
  
  .alert-danger a {
    color: #333333 !important;
  }
  
  /* Divs that give the JS their colours */
  
  #default_nav_colour {
    background-color: var(--skin-main-nav-colour);
  }
  
  #highlighted_nav_colour {
    background-color: var(--skin-main-nav-colour);
    filter: brightness(1.25);
  }
  
  #dashboard_boxes_colour {
    background-color: #67665A;
  }
  
  #dashboard_text_colour {
    background-color: #FFFFFF;
  }
  
  #html_background_colour {
    background-color: var(--skin-body-background);
  }
  
  /* misc */
  
  .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
    background-color: var(--skin-main-nav-colour) !important;
  }
  
  #map_background_colour {
    background-color: var(--skin-body-background);
  }
  
  #map_top_gradient_colour {
    background-color: #FFF;
  }
  
  #map_bottom_gradient_colour {
    background-color: var(--skin-main-nav-colour);
    filter: brightness(1.25);
  }
  
  .an_icon {
    color: var(--skin-main-nav-colour);
  }
  
  .template_selected {
    background-color: var(--skin-main-nav-colour);
  }
  
  .multiselect-container > li > a > label.radio, .multiselect-container > li > a > label.checkbox {
      color: #444444;
  }
  
  .nav-tabs > li > a {
      color: #444444;
  }
  
  .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
      color: #444444;
  }
  
  .function_glyphs {
    color: var(--skin-main-nav-colour);
    font-size: 18px;
    margin-left: 3px;
  }
  
  .function_glyphs:hover {
    color: var(--skin-main-nav-colour);
    font-size: 18px;
    margin-left: 3px;
  }
  
  .function_labels_downloaded {
    color: var(--skin-success-btn);
  }
  
  .function_letters_downloaded {
      color: var(--skin-success-btn);
  }
  
  .move_box:hover {
    background-color: #cccccc;
    cursor: pointer;
  }
  
  .check_highlighted {
    background-color: #cccccc;
  }
  
  .pt_bar {
    background-color: var(--skin-body-background) !important; 
  }
  
  .pt_bar_red {
      background-color: #ff2c2c !important;
  }
  
  .pt_bar:hover {
    background-color: #54554F !important; 
  }