@font-face {
  font-family: 'metro';
  src: url('../template/docs/fonts/metro.eot');
  src: url('../template/docs/fonts/metro.eot') format('embedded-opentype'), url('../template/docs/fonts/metro.woff') format('woff'), url('../template/docs/fonts/metro.ttf') format('truetype'), url('../template/docs/fonts/metro.svg') format('svg');
  
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'oto';
  src: url('../template/docs/fonts/oto.eot');
  src: url('../template/docs/fonts/oto.eot') format('embedded-opentype'), url('../template/docs/fonts/oto.woff') format('woff'), url('../template/docs/fonts/oto.ttf') format('truetype'), url('../template/docs/fonts/oto.svg') format('svg');
  
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'micr';
  src: url('../template/docs/fonts/MICR.ttf');
  src: url('../template/docs/fonts/MICR.ttf') format('truetype');
  
  font-weight: normal;
  font-style: normal;
}
  
  :root {
    
    --announce_back_set: #F2E21D;
    --announce_text_set: #000000;
    
    
    
    /* FOR MATT'S TILES -- THIS MAY NEED TO BE ADJUSTED WHEN WE ADD USER TO CHANGE CSS TEMPLATES */
    --blue-darker: #232963;
    --blue-dark: #2e357f;
    --blue: #2f48ae;
    --blue-light: #5170be;
    --blue-lighter: #8cbbf7;

    --green-darker: #005f2c;
    --green-dark: #007a38;
    --green: #009444;
    --green-light: #2ea766;
    --green-lighter: #5cba88;

    --orange-darker: #fa6e33;
    --orange-dark: #fa7c33;
    --orange: #ff9000;
    --orange-light: #ffa22c;
    --orange-lighter: #ffbc67;

    --pink-darker: #72314e;
    --pink-dark: #8f3d62;
    --pink: #ab4975;
    --pink-light: #bc628a;
    --pink-lighter: #c87ea0;

    --purple-darker: #44044a;
    --purple-dark: #4e0554;
    --purple: #5d0565;
    --purple-light: #7a3281;
    --purple-lighter: #975f9d;

    --red-darker: #810008;
    --red-dark: #9f000a;
    --red: #bf000a;
    --red-light: #d0454c;
    --red-lighter: #d65c63;

    --teal-darker: #0b6469;
    --teal-dark: #0e8187;
    --teal: #119da4;
    --teal-light: #51b7bc;
    --teal-lighter: #7dc9cd;

    --yellow-darker: #e8b713;
    --yellow-dark: #ffcd29;
    --yellow: #ffd754;
    --yellow-light: #ffdc69;
    --yellow-lighter: #ffe17e;
    
    
    
  }
  
  
  

  
  body { 
    color: var(--text_main);
  }
  
  a { color: var(--text_main); }
  
  a:focus { outline: none; }
  
  .underline { text-decoration: underline; }
  
  .icon.rot90 {
    display: inline-block;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  
  .mif-cross:before     { color: var(--bad_color); }
  .mif-checkmark:before { color: var(--good_color); }
    
  
  /* PADDING */
  .pad1vh { padding: 1vh; }
  .pad2vh { padding: 2vh; }
  .pad3vh { padding: 3vh; }
  .pad4vh { padding: 4vh; }
  .pad5vh { padding: 5vh; }
  
  .pad1vw { padding: 1vw; }
  .pad2vw { padding: 2vw; }
  .pad3vw { padding: 3vw; }
  .pad4vw { padding: 4vw; }
  .pad5vw { padding: 5vw; }
  
  .no_pad_top     { padding-top: 0px; }
  .no_pad_bottom  { padding-bottom: 0px; }
  .no_pad_left    { padding-left: 0px; }
  .no_pad_right   { padding-right: 0px; }
  
  .no_pad_vert  { padding-top: 0px; padding-bottom: 0px; }
  .no_pad_horiz { padding-left: 0px; padding-right: 0px; }
  
  
  label{ 
    color: var(--text_main);
    font-weight: bold;
    font-size: 2vh;
  }
  
  .vin_color1 { color: var(--vin_color1); }
  .vin_color2 { color: var(--vin_color2); }
  .vin_color3 { color: var(--vin_color3); }
  .vin_color4 { color: var(--vin_color4); }
  
  
  /* TOP NAV BAR */
  #custom-top-nav.app-bar,
  #custom-top-nav .app-bar-pullmenu .app-bar-menu, 
  #custom-top-nav .app-bar-pullmenu .app-bar-menu .d-menu,
  #custom-top-nav .d-menu .divider {
    background-color: var(--top_nav_background) !important;
  }
  
  #custom-top-nav.app-bar .app-bar-menu > li .d-menu li:hover, 
  #custom-top-nav.app-bar .app-bar-menu > li .d-menu li a:hover {
    background-color: var(--menu_back_hover) !important;
    
  }
  #custom-top-nav.app-bar .app-bar-menu > li:hover,
  #custom-top-nav.app-bar .app-bar-menu > li > a:hover,
  #custom-top-nav.app-bar .app-bar-menu > li:active,
  #custom-top-nav.app-bar .app-bar-menu > li > a:active,
  #custom-top-nav.app-bar .app-bar-element:hover,
  #custom-top-nav.app-bar .app-bar-element:active,
  #custom-top-nav.app-bar .app-bar-pullmenu li:hover a.active-toggle,
  #custom-top-nav.app-bar .app-bar-pullbutton:hover,
  #custom-top-nav.app-bar .app-bar-pullbutton:active,
  #custom-top-nav .app-bar-pullmenu .app-bar-menu .d-menu li a:hover, 
  #custom-top-nav .app-bar-pullmenu .app-bar-menu .d-menu li a:active {
    background-color: inherit;
  }
  #custom-top-nav .app-bar-pullmenu .app-bar-menu, 
  #custom-top-nav .app-bar-pullmenu .app-bar-menu .d-menu,
  #custom-top-nav.app-bar .app-bar-menu > li .d-menu,
  #custom-top-nav.app-bar .app-bar-drop-container,
  #custom-top-nav.app-bar .app-bar-drop-container:before { 
    border: none;
    box-shadow: 0px 5px 10px 1px var(--top_nav_shadow);
  }
  
  #custom-top-nav {
    box-shadow: 0px 0px 10px 1px var(--top_nav_shadow);
    color: var(--top_nav_text) !important;
    height: 3.125rem;
  }
  #custom-top-nav .app-bar-element { background-color: unset; }

  #custom-top-nav #auction_branding { 
    border-right: solid 2px var(--top_nav_border);
    min-width: 150px; 
    padding: 0px;
    width: 10vw; 
  }
  #custom-top-nav #auction_branding img {
    max-width: 90%;
  }
  
  #custom-top-nav #auction_branding:hover,
  #custom-top-nav #auction_name_div2 { background-color: unset; }
  
  #custom-top-nav #auction-branding img { width: 100%; }
  #custom-top-nav #auction_name_div2 { width: auto; }
  #custom-top-nav #auction_name_div2 .short_name { display: none; }
  #custom-top-nav #auction_menus li { 
    border-left: solid 2px var(--top_nav_border); 
  }
  #custom-top-nav #auction_menus li a .icon {
    font-size: 1.5rem;
  }
  #custom-top-nav #auction_menus li #plus_drop { 
    padding: 0 0.625rem !important;
  }
  
  #custom-top-nav .app-bar-pullbutton { 
  //  position: absolute;
  //  right: 0px;
  }
  
  
  #custom-top-nav #plus_drop.dropdown-toggle:before {
    
    display: none !important;
  }
  

  
  #custom-top-nav.app-bar .app-bar-menu > li:hover {
    color: var(--text_main_highlight);
  }
  
  #custom-top-nav.app-bar .app-bar-menu > li > a.dropdown-toggle:before { border-color: var(--menu_text); }
  #custom-top-nav.app-bar .app-bar-menu > li:hover > a.dropdown-toggle:before,
  #custom-top-nav.app-bar .app-bar-menu > li > a.dropdown-toggle:hover:before  {
     border-color: var(--text_main_highlight); 
  }
  
  #custom-top-nav .app-bar-menu .d-menu li a { color: var(--menu_text); }
  
  
  #custom-top-nav .d-menu {
    background-color: var(--menu_back);
    color: var(--menu_text);
  }
  
  .v-menu {
    background: #c1c1c1 !important;
    color: #000000 !important;
  }
  
  
  
  /* MORPHSEARCH */
  .morphsearch {
    top:10px;
    right: 250px;
    width: 0px;
    transition-duration: .4s;
    -webkit-transition-duration: .4s;
    z-index: 1100; 
  }
  
  .morphsearch-input { padding: 0px; }
  
  
  
  .morphsearch .morphsearch-form span.icon {
    display: none !important;
    position: absolute;
    top: 9px;
    right: 50px;
    font-size: 150%;
    color: #FFFFFF;
  }
  
  .morphsearch.open {
    font-family: Arial, Helvetica, sans-serif;
    background-image: var(--background_image);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    padding: 0;
    height: calc(100% - 3.125rem); 
    min-height: 0px;
    margin-top: 3.125rem; 
    z-index: 1000;
  }
  .morphsearch.open .morphsearch-form span.icon {
    display: none;
  }
  .morphsearch.open h2 {
    box-shadow: inset 0 -1px 0 var(--text_secondary);
    color: var(--text_secondary);
    font-size: 1.5rem;
  }
  .morphsearch.open .hint2 { z-index: 100000; }

  
  
  .morphsearch.open .morphsearch-input { 
    font-size: 5em; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #e3c800 !important; 
    background-color: transparent !important;
    border: none !important;
    padding-left: 2vw;
    width: 80%;
  }
  .morphsearch.open .morphsearch-input::placeholder { color: #E3C800; }

  .morphsearch.open .morphsearch_inner {
   height: 100%;
   width: 100%;
  }
  .morphsearch.open .morphsearch-content { 
    height: calc(100% - 300px); 
    margin-top: 1.5rem; 
    background: none; 
    padding: 0 50px;
  }

  .morphsearch #search_select_div { 
    display: none; 
    height: 100%;
    width: auto;
    position: absolute;
    top: 0px;
    padding: 10px 0px;
  }
  .morphsearch #search_select_div .custom_radio--label { 
    padding-top: 0.15vh; 
    padding-bottom: 0.15vh; 
    font-size: 1.75vh;
    font-weight: normal;
  }
  .morphsearch #search_select_div .custom_radio--label.set { font-weight: bold;  }
  .morphsearch #search_select_div .custom_radio--check .inside { margin-top: 0px; }

  .morphsearch.open #search_select_div { display: inline-block; }

  .morphsearch.open #close_div { display: block; }
  .morphsearch .clear_icon { color: transparent !important; }
  .morphsearch #close_div {
    display: none;
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 2.5rem;
    color: var(--text_secondary);
    cursor: pointer;
  }

  .morphsearch #search_form_div { position: relative; }

  .morphsearch .dummy-column {
    height: 100%;
    width: 80%;
    margin: 0 auto; 
    padding-bottom: 0px; 
    float: none;
  }
  .morphsearch .dummy-column .search_column {
    display: inline-block;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
  }
    
  .morphsearch .sloader { 
    display: none; 
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 250%;
  }      
    
  .morphsearch .data_out_table { 
    width: 100%;
  }
  .morphsearch .data_out_table tr { 
    height: 6vh;
    
  }
  
  
  
  .morphsearch .data_out_table tr.primary_table--spacer { height: 0.25vh; }
  .morphsearch .data_out_table tr.primary_table--spacer td { padding: 0px; }
  .morphsearch .data_out_table tr:hover { 
    background-color: var(--table_row_hover); 
  }
  .morphsearch .data_out_table tr td { 
    color: var(--text_main);
    cursor: pointer;
    font-size: 2vh;
    height: inherit;
    padding: 0.5vh 0.5vw;
    position:relative;
    width: auto;
    
    background-image: none !important;  /* THIS IS ONLY TEMPORARY UNTIL I FIX THE ISSUE WITH THIS  */
  }
  
  .morphsearch .data_out_table tr td .bp_company_ops { 
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }
  .morphsearch .data_out_table tr td .bp_company_ops select { 
    height: 100%;
  }
  
  .morphsearch .data_out_table#vehicle_table tr td { font-size: 1.5vh; }
  
  .morphsearch .data_out_table tr:hover td { color: var(--table_row_hover); }
  
  .morphsearch .data_out_table tr td .name_span { 
    font-weight: bold;
    
  }
  .morphsearch .data_out_table .number_span {  }
  .morphsearch .data_out_table .icon { font-size: 4vh; }
  .morphsearch .data_out_table .organization td { height: auto; }
  .morphsearch .data_out_table .fav_div { width: 5%; }
  .morphsearch .data_out_table .fav_div2 { 
    width: 5%; 
    display: inline-block; 
    vertical-align: top; 
  }
  .morphsearch .data_out_table .inset { display: inline-block; }
  .morphsearch .data_out_table img { height: 100%; }
  .morphsearch .data_out_table .fav_div img, 
  .morphsearch .data_out_table .fav_div2 img { height: auto; }
  .morphsearch .data_out_table .number_div { display: inline-block; }

  .morphsearch .user_green { color: green; }
  /* END MORPHSEARCH */
  
  
  /* MAIN CONTENT SECTION */
  #main_content { padding: 2vh 2vw; }
  
  #cell-content { 
    position: relative; 
    
  }
  
  /* DASHBOARD TILES */
  .custom_container {
    display: inline-block;
    position: relative;
    width: calc((100% - 45px)/5);
    margin: 5px 2.25px;
  }
  .dbl_container { width: calc(((100% - 25px)/5)*2); }

  .custom_container .dummy { margin-top: 100%; }
  .dbl_container .dummy { margin-top: calc(50% - 5px); }

  .custom-tile {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    margin: 0px;
    background: var(--main_field_back);
    box-shadow: 2px 2px 5px 0px var(--main_field_shadow);
    color: var(--text_main);
    border-radius: 5px;
  }
  
  .custom-tile .tile-content { overflow: unset; }
  
  .custom-tile .tile-content .tile_title { 
    font-size: 0.655vw; 
    padding-top: 0px !important;
    padding-left: 0px; 
    color: var(--text_main);
    font-weight: bold;
  }
  
  .custom-tile .tile-content .no_info {
    align-items: center;
    display: flex;
    font-weight: bold;
    height: 90%;
    justify-content: center;
    width: 100%;
  }
  
  .custom-tile .tile_dots {
    position: absolute;
    bottom: 0px;
    right: 5px;
    font-size: 200%;
    color: var(--text_main);
    filter: brightness(120%);
  }
  
  .tile_dots_menu {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: var(--popup_field_back);
    color: var(--popup_field_text);
    padding: 5px;
    box-shadow: 2px 2px 5px 0px var(--popup_field_shadow);
  }

  .tdm_op {
    padding: 2px 0px;

  }
  .tdm_op:hover {
    font-weight: bold;
  }
  
  
  #titles_grid .titles_header {
    text-align: center;
    font-weight: bold;
    color: var(--text_main);
    font-size: 0.8em;
  }
  
  /* END DASHBOARD TILES */
  
  
  
  
  /* Headers */
  .screen_header {
    color: var(--text_main);
    font-size: 1.25vw;
    font-weight: bold;
    margin-bottom: 1vh;
  }
  
  
  /* CUSTOM HEADER */
  .custom_header--container { 
    box-shadow: 0px 5px 10px 1px var(--top_header_shadow);
    color: var(--top_header_text);
    display: flex;
    height: 7vh;
    position: relative;
    width: 100%;
    overflow-x: hidden;
  }
  .custom_header--section {
    align-items: center;
    background-image: var(--top_header_back);
    display: inline-flex;
    flex-wrap: wrap;
    height: 100%;
    
  }
  .custom_header--spacer {
    background-color: var(--top_header_spacer);
    flex: 0 0 1px;
    -webkit-flex: 0 0 1px;
    height: 100%;
  }
  
  
  /* TEMP */
  .custom-header-container {
    background-color: unset;
    background-image: var(--top_header_back);
  }
  /* END TEMP */
  
  /* CUSTOM INPUTS */
  input,
  select,
  textarea {
    background-color: var(--input_back); 
    border: var(--input_border) !important;
    color: var(--input_text);
    outline: 0px;
  }
  .input-control input:disabled, .input-control textarea:disabled, .input-control select:disabled {
    background-color: var(--input_back);
  }
  
  input:hover,
  input:focus,
  select:hover,
  select:focus,
  textarea:hover,
  textarea:focus {
    background-color: var(--input_back_hover); 
    border: var(--input_border) !important;
    color: var(--input_text_hover);
    outline: 0px;
  }
  
  .custom_input { 
    padding: 2px 0.5vw; 
  }
  
  
  .input-control.checkbox input[type="checkbox"]:disabled ~ .caption, 
  .input-control.radio input[type="checkbox"]:disabled ~ .caption, 
  .input-control.checkbox input[type="radio"]:disabled ~ .caption, 
  .input-control.radio input[type="radio"]:disabled ~ .caption {
    color: var(--text_main_disabled);
  }
  
  .custom_input--label { 
    font-size: 2vh; 
    font-weight: normal;
  }
  
  
  input.active,
  select.active,
  textarea.active  { 
    background-color: var(--input_back_active); 
    color: var(--input_text_active);
  }
  
  
  /* CUSTOM CALENDAR -- CUSTOM FILE UPLOAD -- FIELD */
  .custom_calendar button.button,
  .custom_upload button.button  { 
    background-color: var(--input_back); 
    border: none !important;
    border-left: solid 1px var(--main_field_hr) !important;
    border-radius: 0;
    padding: 0 1rem;
    height: 2.125rem;
    text-align: center;
    vertical-align: middle;
    
    cursor: pointer;
    display: inline-block;
    outline: none;
    font-size: .875rem;
    margin: .15625rem 0;
    position: relative;
  }
  .custom_calendar button.button .mif-calendar,
  .custom_upload button.button .mif-folder { color: var(--input_text); }
  .custom_calendar:hover button.button,
  .custom_upload:hover button.button  { background-color: var(--input_back_hover); }
  .custom_calendar:hover button.button .mif-calendar,
  .custom_upload:hover button.button .mif-folder { color: var(--input_text_hover); }
  .custom_calendar input.active ~ button.button,
  .custom_upload input.active ~ button.button { background-color: var(--input_back_active); }
  .custom_calendar input.active ~ button.button .mif-calendar,
  .custom_upload input.active ~ button.button .mif-folder { color: var(--input_text_active); }
  
  /* I CAN PROBABLY REMOVE ALL THE ABOVE CODE AS THIS CODE SHOULD REPLACE IT */
  .input-control button.button { 
    background-color: var(--input_back); 
    border: none !important;
    border-left: solid 1px var(--main_field_hr) !important;
    border-radius: 0;
    padding: 0 1rem;
    height: 2.125rem;
    text-align: center;
    vertical-align: middle;
    
    cursor: pointer;
    display: inline-block;
    outline: none;
    font-size: .875rem;
    margin: .15625rem 0;
    position: relative;
  }
  .input-control button.button .mif-calendar { color: var(--input_text); }
  .input-control:hover button.button  { background-color: var(--input_back_hover); }
  .input-control:hover button.button .mif-calendar { color: var(--input_text_hover); }
  .input-control input.active ~ button.button { background-color: var(--input_back_active); }
  .input-control input.active ~ button.button .mif-calendar { color: var(--input_text_active); }
  
  /* CALENDAR -- POPUP */
  .calendar {
    background-color: unset;
    background-image: var(--main_field_image);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
  }
  .calendar-grid { 
    background-color: unset; 
    //background-image: var(--main_field_back) !important;
  }
  .calendar .calendar-header { 
    background-color: var(--button_back); 
    color: var(--button_text);
  }
  .calendar .day { 
    border-color: var(--text_main_disabled); 
  }
  .calendar .day a { 
    color: var(--text_main_disabled);
  }
  .calendar .day.today a { color: var(--text_main); }
  .calendar a:hover { 
    background-color: var(--input_back);
    color: var(--text_main);    
  }
  .calendar .selected a { 
    background-color: var(--input_back);
    color: var(--text_main);    
  }
  
  /* CLOCKPICKER OVERRIDES */
  .popover { 
    background-color: unset !important;
    background-image: var(--main_field_image) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    border-radius: 0px !important; 
  }
  .clockpicker-popover .popover-title {
    background-color: unset !important;
    color: var(--text_secondary) !important; 
    background-image: var(--main_field_back) !important;
  }
  .clockpicker-popover .popover-content { 
    background-color: unset !important;
    color: var(--text_secondary) !important; 
    
  }
  .clockpicker-popover .popover-title .text-primary { color: var(--text_main) !important; }
  .clockpicker-plate { 
    border-color: var(--text_main) !important; 
    background-color: unset !important;
  }
  .clockpicker-canvas line { stroke: var(--button_back) !important; }
  .clockpicker-canvas-fg { fill: var(--button_back) !important; }
  .clockpicker-canvas-bg { fill: var(--button_back) !important; }
  .clockpicker-canvas-bearing { fill: var(--button_back) !important; }
  
  .clockpicker-button { 
    background-color: var(--button_back) !important;
    color: var(--button_text) !important;
    border-radius: 0px !important;
  }
  .clockpicker-tick { color: var(--text_main) !important; }
  .input-group.clockpicker { height: 100% !important; }
  .popover:before { display: none !important; }
  
  
  /* SWITCHES */
  .switch,
  .custom_switch { 
    margin: 0px; 
  }
  .switch span.check,
  .custom_switch span.check {
    background-color: var(--switch_back);
    border: solid 1px var(--switch_back_active) !important;
    height: 1.75vh;
    width: 1.75vw;
  }
  
  .switch input:checked ~ .check,
  .custom_switch input:checked ~ .check { background-color: var(--switch_back_active); }
  .switch .check:before,
  .custom_switch .check:before {
    height: 0.75vw;
    width: 0.75vw;
    margin-left: 0.05vw;
    margin-top: 0vh;
  }
  .switch input:checked ~ .check:before,
  .custom_switch input:checked ~ .check:before {
    background-color: var(--switch_active);
    transform: translateX(0.75vw);
  }
  .switch input:not(:checked) ~ .check:before,
  .custom_switch input:not(:checked) ~ .check:before {
    background-color: var(--switch_button);
  }
  
  
  /* BUTTONS */
  
  button.button { padding: 0 1rem; }
  
  .div_button,
  .nav_button,
  button.button,
  input[type="button"].button {
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    height: 3.5vh;
    justify-content: center;
    padding: 0 0.5vw;
    width: auto;
  }
  
  .button .mif-calendar { color: var(--text_main); }
  
  
  /* update */
  .button.update {
    background-color: var(--button_update_back);
    border: var(--button_update_border) !important;
    color: var(--button_update_text);
    font-family: var(--button_update_font);
  }
  .button.update.shadow {
    box-shadow: 0px 0px 10px 1px var(--button_update_shadow);
  }
  .button.update:hover {
    background-color: var(--button_update_hover) !important;
    border: var(--button_update_hover_border) !important;
    color: var(--button_update_hover_text);
  }
  .button.update.disabled { 
    background-color: var(--button_update_disabled);
    color: var(--button_update_disabled_text);
    border: var(--button_update_disabled_border) !important;
    cursor: initial;
  }
  
  /* primary */
  .button.primary {
    background-color: var(--button_back);
    border: var(--button_border) !important;
    color: var(--button_text);
    font-family: var(--button_font);
  }
  .button.primary.shadow {
    box-shadow: 0px 0px 10px 1px var(--button_shadow);
  }
  .button.primary:hover {
    background-color: var(--button_hover) !important;
    border: var(--button_hover_border) !important;
    color: var(--button_hover_text);
  }
  .button.primary.disabled { 
    background-color: var(--button_disabled);
    color: var(--button_disabled_text);
    border: var(--button_disabled_border) !important;
    cursor: initial;
  }
  
  
  /* primary2 */
  .button.primary2 {
    background-color: var(--button2_back);
    border: var(--button2_border) !important;
    color: var(--button2_text);
    font-family: var(--button2_font);
  }
  .button.primary2.shadow {
    box-shadow: 0px 0px 10px 1px var(--button2_shadow);
  }
  .button.primary2:hover {
    background-color: var(--button2_hover) !important;
    border: var(--button2_hover_border) !important;
    color: var(--button2_hover_text);
  }
  .button.primary2.disabled { 
    background-color: var(--button2_disabled);
    color: var(--button2_disabled_text);
    border: var(--button2_disabled_border) !important;
    cursor: initial;
  }
  
  /* secondary */
  .button.secondary {
    background-color: var(--button_secondary_back);
    border: var(--button_secondary_border) !important;
    color: var(--button_secondary_text);
    font-family: var(--button_secondary_font);
  }
  .button.secondary.shadow {
    box-shadow: 0px 0px 10px 1px var(--button_secondary_shadow);
  }
  .button.secondary:hover {
    background-color: var(--button_secondary_hover) !important;
    border: var(--button_secondary_hover_border) !important;
    color: var(--button_secondary_hover_text);
  }
  .button.secondary.disabled { 
    background-color: var(--button_secondary_disabled);
    border: var(--button_secondary_disabled_border) !important;
    color: var(--button_secondary_disabled_text);
    cursor: initial;
  }
  
  
  .div_button {
    background-color: var(--button_back);
    border: var(--button_border) !important;
    color: var(--button_text);
    font-family: var(--button_font);
  }
  .div_button.shadow {
    box-shadow: 0px 0px 10px 1px var(--button_shadow);
  }
  .div_button:hover {
    background-color: var(--button_hover) !important;
    border: var(--button_hover_border) !important;
    color: var(--button_hover_text);
  }
  .div_button.disabled { 
    background-color: var(--button_disabled);
    color: var(--button_disabled_text);
    border: var(--button_disabled_border) !important;
    cursor: initial;
  }
  
  
  .nav_button {
    border: var(--button_secondary_border) !important;
    border-radius: 10px;
    color: var(--button_secondary_text);
    font-family: var(--button_font);
    font-size: 1vw;
    height: 100%;
    padding: 0.5vh 0.5vw;
  }
  
  .nav_button:hover,
  .nav_button.active  {
    background-color: var(--button_secondary_text) !important;
    color: var(--button_back);
  }
  .nav_button.disabled { 
    background-color: var(--button_secondary_disabled);
    border: var(--button_secondary_disabled_border) !important;
    color: var(--button_secondary_disabled_text);
    cursor: initial;
  }
  
  
  
  /* add note */
  .button.note {
    background-color: var(--button_note_back);
    border: var(--button_note_border) !important;
    color: var(--button_note_text);
    font-family: var(--button_note_font);
  }
  .button.note.shadow {
    box-shadow: 0px 0px 10px 1px var(--button_note_shadow);
  }
  .button.note:hover {
    background-color: var(--button_note_hover) !important;
    border: var(--button_note_hover_border) !important;
    color: var(--button_note_hover_text);
  }
  .button.note.disabled { 
    background-color: var(--button_update_disabled);
    color: var(--button_note_disabled_text);
    border: var(--button_note_disabled_border) !important;
    cursor: initial;
  }
  
  


  
  
  
  /* LINK BUTTON */
  .link_button{
    background-image: var(--link_button_image);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    height: 100%;
    width: 100%;
  }
  .link_button:hover { color: var(--button_hover_text); }
  .link_button.shadow {
    box-shadow: 0px 0px 10px 1px var(--link_button_shadow);
  }
  .link_button--inner {
    align-items: center;
    background-image: var(--link_button_back);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    border-radius: 5px;
    color: var(--link_button_text);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
  }
  .link_button:hover .link_button--inner { color: var(--button_hover_text); }
  .link_button.active .link_button--inner {
    background-color: var(--link_button_back_active);
    color: var(--link_button_text_active);
  }
  .link_button .link_button--text {
    font-size: 1.5vw;
    font-weight: bold;
    flex: 0 0 100%;
    -webkit-flex: 0 0 100%;
    text-align: center;
  }
  .link_button .link_button--secondary_text {
    font-size: 1.5vh;
    flex: 0 0 100%;
    -webkit-flex: 0 0 100%;
    text-align: center;
  }
  /* END BUTTONS */
  
  
  
  
  
  
  /* INFIELD TOP-ALIGNED LABELS */
  .ita_label {
    font-size: 0.655vw;
    left: 0.5vw;
    position: absolute;
    top: 0.25vw;
  }
  .ita_input {
    height: 5vh;
    padding-top: 0.75vw;
    padding-left: 0.5vw;
    width: 100%;
  }

  
  /* SCROLLBARS */
  ::-webkit-scrollbar { height: 7px; width: 5px; }
  ::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px var(--custom_scroll_track);
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--custom_scroll_thumb);
  }
  ::scrollbar-color: var(--custom_scroll_thumb) var(--custom_scroll_track);
  ::scrollbar-width: thin;
  
  
  
  
  /* REMOVE ALL THIS IF THE ABOVE IS SUFFICIENT -- SHOULD BE SINCE IT SHOULD AFFECT ALL SCROLLBARS */
  .custom_scroll ::-webkit-scrollbar { width: 5px; }
  .custom_scroll ::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px var(--custom_scroll_track);
    border-radius: 5px;
  }
  .custom_scroll ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--custom_scroll_thumb);
  }
  
  .custom-flex-list { width: 100%; }
  .custom-flex-list ::-webkit-scrollbar { width: 5px; }
  .custom-flex-list ::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px var(--custom_scroll_track);
    border-radius: 5px;
  }
  .custom-flex-list ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--custom_scroll_thumb);
  }
  
  
  
  
  
  /* TABCONTROL */
  .custom_tabcontrol { width: 98%; }
  .custom_tabcontrol > .tabs { 
    position: relative;
    border-bottom: 1px var(--tab_underline) solid;
    height: 4vh;
  }
  .custom_tabcontrol > .tabs li {
    align-items: center;
    display: inline-flex;
    height: 101%;
    
    justify-content: center;
    width: 9.5vw;
  }
  
  .custom_tabcontrol > .tabs li a { 
    align-items: center;
    border-radius: 4px 4px 0px 0px;
    color: var(--tab_text); 
    display: flex;
    font-size: 0.75vw;
    height: 100%;
    justify-content: center;
    padding: 0px;
    position: absolute;
    top: 0px;
    width: 10vw;
  }
  .custom_tabcontrol > .tabs li:hover > a { 
    background-color: inherit;
    color: var(--tab_hover); 
  }
  .custom_tabcontrol > .frames .frame { background-color: inherit; }
  .custom_tabcontrol .frames .frame.has_secondary { margin-top: 4vh;}
  
  .custom_tabcontrol > .tabs li.active > a { 
    background-color: var(--tab_active); 
    color: var(--tab_text_active);
    text-shadow: none;
  }
  
  .custom_tabcontrol > .frames .frame { 
    display: none; 
    height: 100%;
    padding-left: 0px; 
    padding-right: 0px;
    padding-bottom: 0px;
  }
  
  
  .custom_tabcontrol .tabs--secondary {
    display: none;
    font-size: 75%;
    height: 3vh;
    left: 0px;
    position: absolute;
    top: 4vh;
  }
  .custom_tabcontrol .tabs--secondary li a { 
    color: var(--tab_secondary_text); 
  }
  .custom_tabcontrol .tabs--secondary li:hover > a { 
    background-color: inherit;
    color: var(--tab_secondary_hover); 
  }
  .custom_tabcontrol > .tabs  .tabs--secondary li.active > a { 
    background-color: var(--tab_secondary_active); 
    border-radius: 0px 0px 4px 4px;
    color: var(--tab_secondary_text_active);
    text-shadow: none;
  }

  .custom_tabcontrol .frames--secondary { height: 100%; }
  
  
  
  
  /* CUSTOM ACCORDION */
  
  .custom_accordion { 
    border: none;
  }
  .custom_accordion .frame { 
    border: none;
    height: 100%;
    background-image: var(--table_row_image);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
  }
  .custom_accordion > .frame > .heading {
    align-items: center;
    background-image: var(--table_row);
    background-color: unset;
    border: none;
    border-radius: 5px;
    color: var(--table_text);
    display: flex;
    height: 100%;
    vertical-align: center;
  }
  .custom_accordion > .frame > .heading:hover {
    background-image: var(--table_row_hover_image);
    background-color: unset;
    color: var(--table_hover_text);
  }
  .custom_accordion > .frame.active > .heading {
    background-color: unset;
    border: none;
    border-radius: 5px 5px 0px 0px;
  }
  
  .custom_accordion > .frame > .heading:before {
    border: none;
    bottom: 1.5vw;
    color: var(--table_text);
    content: '\e66b';
    display: block;
    font: normal normal normal 1vw/1 metro;
    left: initial;
    position: absolute;
    right: 1.25vw;
    top: initial;
    transform: initial;
    -webkit-transform: initial;
    transition: all 0.3s ease;
  }
  .custom_accordion > .frame.active > .heading:before {
    bottom: 1vw;
    left: initial;
    transition: all 0.3s ease;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  .custom_accordion > .frame.active > .content {
    background-color: var(--accordion_content_back);
    
    border-radius: 0px 0px 5px 5px;
    color: var(--accordion_content_text);
  }
  
  
  /* DATATABLES */
  .dataTable .sorting_desc,
  .dataTable .sorting_asc {
    background-color: inherit;
    color: var(--text_main_highlight);
    font-weight: bold;
    cursor: pointer;
  }
  .dataTable .sorting_desc:after {
    font: normal normal bold 1vw/1 metro;
    content: "\e64b";
    color: var(--text_main_highlight);
    left: unset;
    margin-left: 0px;
  }
  .dataTable .sorting_asc:after {
    font: normal normal bold 1vw/1 metro;
    content: "\e64a";
    color: var(--text_main_highlight);
    left: unset;
    margin-left: 0px;
  }
  
  
  /* LIGHTS */
  .auction_lights--container {
    height: 75%; 
    padding: 0.25vh 0vh;
    display: inline-flex;
    width:100%;
    justify-content: center;
    align-items: center;
  }
  .auction_lights--outter {
    padding: 1px;
    height: 100%;
    cursor: pointer;
  }
  .auction_lights--cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 1px;
    border: solid 2px;
  }
  
  .vehicle_lights--container { height: 100%; width: 100%;}
  .vehicle_lights--container.vert .vehicle_lights--cell { 
    display: block;
    width: 100%;
  }
  .vehicle_lights--container.vert.lights1 .vehicle_lights--cell { height: 100%; }
  .vehicle_lights--container.vert.lights2 .vehicle_lights--cell { height: 50%; }
  .vehicle_lights--container.vert.lights3 .vehicle_lights--cell { height: 33.3%; }
  .vehicle_lights--container.vert.lights4 .vehicle_lights--cell { height: 25%; }
  .vehicle_lights--container.vert.lights5 .vehicle_lights--cell { height: 20%; }
  
  
  .vehicle_lights--container.horiz .vehicle_lights--cell { 
    display: inline-block;
    height: 100%; 
  }
  .vehicle_lights--container.horiz.lights1 .vehicle_lights--cell { width: 100%; }
  .vehicle_lights--container.horiz.lights2 .vehicle_lights--cell { width: 50%; }
  .vehicle_lights--container.horiz.lights3 .vehicle_lights--cell { width: 33.3%; }
  .vehicle_lights--container.horiz.lights4 .vehicle_lights--cell { width: 25%; }
  .vehicle_lights--container.horiz.lights5 .vehicle_lights--cell { width: 20%; }
  
  
  
  
  
  /* FIELDSET 2 */
  .custom_fieldset--legend { 
    padding: 0.5vh 1vw;
    font-weight: bold;
    color: var(--fieldset2_color);
  }
  .custom_fieldset--content {
    border: var(--fieldset2_border);
    padding: 1vw;
    border-radius: 1vw;
    position: relative;
  }
  .custom_fieldset--inner {
    color: var(--fieldset2_color);
    height: 100%;
    width: 100%;
    padding-right: 10px;
  }
  
  .fieldset2_legend { 
    padding: 0.5vh 1vw;
    font-weight: bold;
    color: var(--fieldset2_color);
  }
  .fieldset2_content {
    border: var(--fieldset2_border);
    padding: 1vw;
    border-radius: 1vw;
    position: relative;
  }
  .fieldset2_inner {
    height: 100%;
    width: 100%;
    padding-right: 10px;
  }
  
  
  /* POSSIBLY TEMPORARY IF OLD FIELDSET CODE IS UPDATED */
  .custom-fieldset { 
    border: var(--fieldset2_border);
  }
  .custom-fieldset > legend { 
    border: none;
    background-color: transparent;
    color: var(--fieldset2_color);
    
  }
  
  
  /* MAIN FIELD */
  .main_field {
    height: 100%;
    position: relative;
    width: 100%;
  }
  .main_field--header {
    color: var(--text_main);
    font-weight: bold;
    padding: 0.5vh 0.5vw;
    text-transform: uppercase;
  }
  .main_field--back{
    background-image: var(--main_field_image);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    border-radius: 1vw;
    box-shadow: 0px 0px 15px 5px var(--main_field_shadow);
    height: 98%;
    opacity: 55%;
    width: 100%;
  }
  .main_field--inner {
    background-image: var(--main_field_back);
    color: var(--main_field_text);
    height: 98%;
    left: 0px;
    opacity: 1;
    padding: 1vw;
    position: absolute;
    top: 0px;
    width: 100%;
    border-radius: 1vw;
    
  }
  
  .main_field--inner .flex-grid {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  
  .main_field--inner hr {
    background-color: var(--main_field_hr);
  }
  
  .main_field2 {
    border: var(--fieldset2_border);
    padding: 1vw;
    border-radius: 1vw;
    position: relative;
  }
  
  /* POPUP FIELD */
  .popup_field {
    color: var(--popup_field_text);
    display: none;
    position: absolute;
    width: auto;
    height: auto;
    z-index: 9999;
    background-color: var(--popup_field_back);
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px 1px var(--popup_field_shadow);
    
  }
  
  
  /* STICKY TABLE HEADERS */
  .sticky th {
    border-bottom: solid .25vh var(--table_underline);
    padding: 0.5vh 0.5vw;
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    z-index: 100;
  }
  .sticky th.scrolled,
  th.sticky.scrolled,
  td.sticky.scrolled  {
    background-color: var(--table_scroll_header);
    border: solid 1px var(--table_scroll_header_border);
    color: var(--table_scroll_header_text);
    background-image: none;
  }
  
  /* DATATABLES OVERRIDES */
  .dataTables_length select {
    background-color: unset !important;
    border: solid 1px var(--text_main) !important;
    color: var(--text_main) !important;
  }
  .dataTables_length select option {
    background-color: var(--input_back) !important;
  }
  .dataTables_length select option:hover {
    background-color: var(--input_back_hover) !important;
    color: var(--input_text_hover) !important;
  }
  .dataTables_paginate {
    margin: 1vh 1vw;
  }
  .dataTables_paginate .paginate_button {
    background-color: unset;
    border: none;
    color: var(--text_main);
  }
  .dataTables_paginate .paginate_button:hover {
    background-color: inherit;
    border-color: inherit;
    color: inherit;
  }
  .dataTables_paginate .paginate_button.current, 
  .dataTables_paginate .paginate_button.active {
    background-color: unset;
    border: solid 1px var(--text_main);
    color: var(--text_main);
    text-shadow: unset;
  }
  .dataTables_paginate .paginate_button:disabled, .dataTables_paginate .paginate_button.disabled {
    cursor: default;
    background-color: unset;
    border: unset;
    color: var(--text_main_disabled);
  }
  
  /* PRIMARY TABLE */
  .primary_table {   
    border-collapse: separate;
    border-spacing: 0 0.15vh; 
    padding-right: 1vw;
  }
  
  .primary_table.dataTable { margin: 0px; }
  .primary_table thead::after { 
    content: "-";
    display: block;
    line-height: 0.75vh;
    visibility: hidden;
  }
  .primary_table--header > th,
  .dataTables_scrollHead .dataTable.primary_table th {
    border-bottom: var(--table_underline);
  }
  .primary_table--header th.center,
  .primary_table > tbody > td.center { 
    text-align: center; 
    vertical-align: middle; 
  }
  .primary_table thead th {
    color: var(--table_head_text);
    font-size: 0.65vw;
    text-transform: uppercase;
    text-align: left;
    padding: .25vh;
    padding-left: 0.5vw;
    font-size: 0.75vw;
  }
  
  .primary_table tbody {
    
  }
  .primary_table > tbody > tr {
    background-image: var(--table_row_image);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    color: var(--table_text);
    height: 3.5vh;
    cursor: pointer;
    box-shadow: 0px 0px 0.25vh 0px var(--table_row_shadow);
  }

  .primary_table > tbody > tr > td {
    background-image: var(--table_row);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: inherit;
    font-size: 0.75rem;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    position:relative;
  }

  
  .primary_table > tbody > tr:hover { 
    background-image: var(--table_row_hover_image); 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    color: var(--table_row_hover_text);
  }
  .primary_table > tbody > tr:hover > td { 
    background-image: var(--table_row_hover); 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
  }
  
  .primary_table.no_highlight > tbody > tr:hover {
    background-image: var(--table_row);
    color: var(--table_text);
  }
  
  .primary_table > tbody > tr.primary_table--spacer > td, 
  .primary_table > tbody > tr > td.no_bg,
  .primary_table > tbody > tr:hover > td.no_bg {
    background-image: none !important;
    background-color: transparent !important;
  }
  .primary_table > tbody > tr.primary_table--spacer { 
    background-image: none !important;
    background-color: transparent !important;
    height: 0.5vh; 
    box-shadow: none !important;
  }
  .primary_table > tbody > tr.primary_table--spacer > td { background-color: transparent; } 
  
  
  .custom_dtable.primary_table > thead::after { line-height: 0px; }
  .dataTables_scrollBody .custom_dtable.primary_table {
    border-spacing: 0 0.5vh;
  }
  
  .primary_table tfoot th {
    color: var(--table_head_text);
    font-size: 0.75vw;
    padding: .25vh;
  }
  .primary_table--footer { padding-top: 0.25vh; }
  .primary_table--footer > th,
  .dataTables_scrollFoot .dataTable.primary_table .primary_table--footer th    {
    border-top: var(--table_underline) ;
  }
    
  
  
  
  /* SIMPLE TABLE */
  .simple_table {   
    border-collapse: separate;
    border-spacing: 0 0.15vh; 
    padding: 0px;
    padding-right: 1vw;
    width: 100%;
  }
  .simple_table thead th {
    color: var(--table_head_text);
    font-size: 0.65vw;
    text-transform: uppercase;
    text-align: left;
    padding: .25vh;
    font-size: 0.75vw;
  }
  .simple_table tbody tr {
      color: var(--table_text);
    //  height: 4vh;
  }
  .simple_table tbody tr td {
    height: inherit;
    font-size: 0.75vw;
    color: var(--text_main);
    padding-left: 0.25vw;
    padding-right: 0.25vw;
  }
  
  
  /* ACCORDION TABLE */
  .accordion_table {
    width: 100%;
    font-size: 0.75vw;
    color: var(--table_text);
  }
  .accordion_table--header {
    border-bottom: var(--table_underline);
    color: var(--table_head_text);
  }
  .accordion_table thead::after { 
    content: "-";
    display: block;
    line-height: 0.75vh;
    visibility: hidden;
  }
  .accordion_table .accordion_table--header th.center,
  .accordion_table tbody td.center { 
    text-align: center; 
    vertical-align: middle; 
  }
  .accordion_table--header th {
    text-transform: uppercase;
    text-align: left;
    padding: .25vh 0.5vw;
    font-size: 0.75vw;
  }
  .accordion_table tbody {
    
  }
  .accordion_table--row  {
    background-image: var(--table_row_image);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    box-shadow: 0px 0px 0.5vh 0px var(--table_row_shadow);
    height: 4vh;
  }
  .accordion_table--row:hover { 
    background-image: var(--table_row_hover_image); 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    color: var(--table_row_hover_text);
  }
  
  .accordion_table--row td {
    background-image: var(--table_row);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
   padding: 0.5vw;
  }
  .accordion_table--row:hover td { 
    background-image: var(--table_row_hover); 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    color: var(--table_row_hover_text);
  }
  
  .accordion_table--content {
    display: none;
    box-shadow: 0px 0px 0.5vh 0px var(--table_row_shadow);
  }
  .accordion_table--content td {
    width: 100%;
    height: 20vh;
    background-color: var(--accordion_content_back);
  }
  .accordion_table--content td label { 
    font-weight: bold;
    color: var(--accordion_content_text); 
  }
  .accordion_table--inner_content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0.75vw 1vw;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .accordion_table--inner_content .input-control.checkbox .check {
    border: solid 2px var(--text_main) !important;
  }
  .accordion_table--spacer { 
    background-image: none !important;
    background-color: transparent !important;
    height: 0.75vh; 
    box-shadow: none !important;
  
  }
  .accordion_table--spacer td { 
    background-color: transparent;
  }
  
  
  /* CUSTOM RADIO BUTTON */
   .custom_radio--container {
    display: inline-flex;
    flex-wrap: wrap;
  }
  .custom_radio--cell { position: relative; }
  .custom_radio--cell .custom_radio--label {
    display: block;
    position: relative;
    color: var(--text_main);
    padding: 1vw 1.5vw;
    margin: 15px auto;
    margin-bottom: 0px;
    height: auto;
    z-index: 9;
    cursor: pointer;
    font-weight: bold;
  }
  .custom_radio {
    position: absolute;
    visibility: hidden;
  }
  .custom_radio--check {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    display: flex;
    align-items: center;
  }
  .custom_radio--check .inside{
    display: block;
    border: 3px solid var(--text_main);
    border-radius: 100%;
    height: 1vw;
    margin-top: 15px;
    width: 1vw;
    z-index: 5;
    transition: border .25s linear;
  }
  .custom_radio--check .inside::before {
    display: block;
    content: '';
    border-radius: 100%;
    height: 0.7vw;
    width: 0.7vw;
    margin-left:0.01vw;
    margin-top: 0.01vh;
    transition: background 0.25s linear;
  }
  .custom_radio:checked ~ .custom_radio--check .inside {
    border: 3px solid var(--text_main);
  }
  .custom_radio:checked ~ .custom_radio--check .inside::before{
    background: var(--text_main);
  }
  .custom_radio--sm.input-control.radio .check:before {
    height: 0.75rem;
    width: 0.75rem;
    left: 36.5%;
    top: 36.5%;
  }
  .input-control.radio input[type="radio"]:disabled ~ .check {
    background-color: var(--input_back);
  }
  
  
  
  /* CUSTOM CHECKBOX */
  .custom_checkbox.input-control.checkbox .check {
    background-color: var(--checkbox_back);
    border: var(--checkbox_border) !important;
  }
  
  .custom_checkbox.input-control.checkbox.custom_checkbox--light .check {
    background-color: var(--checkbox_back);
    border-color: var(--sub_section4) !important;
  }
  
  .custom_checkbox.input-control.small-check input[data-show="indeterminate"]:checked ~ .check {
    background-color: var(--checkbox_back);
  } 
  
  .custom_checkbox.input-control.checkbox input[data-show="indeterminate"]:not(:checked) ~ .check:after, 
  .custom_checkbox.input-control.radio input[data-show="indeterminate"]:not(:checked) ~ .check:after,
  .custom_checkbox.custom_checkbox--check.input-control.checkbox input[data-show="indeterminate"]:not(:checked) ~ .check:after, 
  .custom_checkbox.custom_checkbox--check.input-control.radio input[data-show="indeterminate"]:not(:checked) ~ .check:after {
    content: "";
  }
  
  
  .custom_checkbox.input-control input[data-show="indeterminate"] ~ .check:after, 
  .custom_checkbox.input-control input[data-show="indeterminate"]:checked ~ .check:after, 
  .custom_checkbox.input-control input.indeterminate:checked ~ .check:after, 
  .custom_checkbox.input-control input[type="checkbox"]:indeterminate ~ .check:after,
  .custom_checkbox.input-control.small-check input[data-show="indeterminate"] ~ .check:after, 
  .custom_checkbox.input-control.small-check input[data-show="indeterminate"]:checked ~ .check:after, 
  .custom_checkbox.input-control.small-check input.indeterminate:checked ~ .check:after, 
  .custom_checkbox.input-control.small-check input[type="checkbox"]:indeterminate ~ .check:after {
    content: "X";
    color: var(--bad_color);
    font-size: 1.25vw;
    height: 0px;
    left: 0px;
    margin-left: .05rem;
    margin-top: -0.6rem;
    width: 0px;
    top: 0px;
  }
  
  .custom_checkbox.input-control.small-check input[data-show="indeterminate"] ~ .check:after, 
  .custom_checkbox.input-control.small-check input[data-show="indeterminate"]:checked ~ .check:after, 
  .custom_checkbox.input-control.small-check input.indeterminate:checked ~ .check:after, 
  .custom_checkbox.input-control.small-check input[type="checkbox"]:indeterminate ~ .check:after {
    margin-left: .05rem;
    margin-top: -0.6rem;
    font-size: 1vw;
  }
  
  .custom_checkbox.custom_checkbox--check.input-control input[data-show="indeterminate"] ~ .check:after, 
  .custom_checkbox.custom_checkbox--check.input-control input[data-show="indeterminate"]:checked ~ .check:after, 
  .custom_checkbox.custom_checkbox--check.input-control input.indeterminate:checked ~ .check:after, 
  .custom_checkbox.custom_checkbox--check.input-control input[type="checkbox"]:indeterminate ~ .check:after,
  .custom_checkbox.custom_checkbox--check.input-control.small-check input[data-show="indeterminate"] ~ .check:after, 
  .custom_checkbox.custom_checkbox--check.input-control.small-check input[data-show="indeterminate"]:checked ~ .check:after, 
  .custom_checkbox.custom_checkbox--check.input-control.small-check input.indeterminate:checked ~ .check:after, 
  .custom_checkbox.custom_checkbox--check.input-control.small-check input[type="checkbox"]:indeterminate ~ .check:after {
    color: var(--good_color);
    content: "\ea10";
    font: normal normal normal 1vw/1 metro;
    font-size: 1.3vw;
    margin-top: 0px;
    margin-left: 0px;
  }
  
  .custom_checkbox.custom_checkbox--check.input-control.small-check input[data-show="indeterminate"] ~ .check:after, 
  .custom_checkbox.custom_checkbox--check.input-control.small-check input[data-show="indeterminate"]:checked ~ .check:after, 
  .custom_checkbox.custom_checkbox--check.input-control.small-check input.indeterminate:checked ~ .check:after, 
  .custom_checkbox.custom_checkbox--check.input-control.small-check input[type="checkbox"]:indeterminate ~ .check:after {
    font-size: 0.75vw;
  }
  
  .custom_checkbox.input-control.checkbox input[type="checkbox"]:disabled ~ .check:after {
    background-color: var(--input_disabled);
    color: var(--input_disabled);
    
  }
  
  
  /* I PROBABLY CAN REMOVE ALL THE ABOVE CODE SINCE THIS CODE SHOULD WORK FOR ALL CHECKBOXES 
      --- MUST GO THROUGH EACH ITEM ABOVE BEFORE REMOVAL, HAVE COME ACROSS SEVERAL THINGS THAT CAN'T BE REMOVED YET 
  */
  .input-control.checkbox .check {
    background-color: var(--checkbox_back);
    border: var(--checkbox_border) !important;
  }
  .input-control.checkbox.small-check input[data-show="indeterminate"]:checked ~ .check {
    background-color: var(--checkbox_back);
  } 
  
  
  
  .input-control.checkbox input[data-show="indeterminate"] ~ .check:after, 
  .input-control.checkbox input[data-show="indeterminate"]:checked ~ .check:after, 
  .input-control.checkbox input.indeterminate:checked ~ .check:after, 
  .input-control.checkbox input[type="checkbox"]:indeterminate ~ .check:after,
  .input-control.checkbox.small-check input[data-show="indeterminate"] ~ .check:after, 
  .input-control.checkbox.small-check input[data-show="indeterminate"]:checked ~ .check:after, 
  .input-control.checkbox.small-check input.indeterminate:checked ~ .check:after, 
  .input-control.checkbox.small-check input[type="checkbox"]:indeterminate ~ .check:after {
    color: var(--good_color);
    content: "\ea10";
    font: normal normal normal 1vw/1 metro;
    font-size: 1.3vw;
    margin-top: 0px;
    margin-left: 0px;
    height: 0px;
    left: 0px;
    width: 0px;
    top: 0px;
  }
  
  .input-control.checkbox.small-check input[data-show="indeterminate"] ~ .check:after, 
  .input-control.checkbox.small-check input[data-show="indeterminate"]:checked ~ .check:after, 
  .input-control.checkbox.small-check input.indeterminate:checked ~ .check:after, 
  .input-control.checkbox.small-check input[type="checkbox"]:indeterminate ~ .check:after {
    font-size: 0.75vw;
  }
  
  .input-control.checkbox input[type="checkbox"]:disabled ~ .check:after {
    background-color: var(--input_disabled);
    color: var(--input_disabled);
    
  }
  
  
  .input-control.checkbox input[data-show="indeterminate"]:not(:checked) ~ .check:after, 
  .input-control.radio input[data-show="indeterminate"]:not(:checked) ~ .check:after,
  .input-control.checkbox input[data-show="indeterminate"]:not(:checked) ~ .check:after, 
  .input-control.radio input[data-show="indeterminate"]:not(:checked) ~ .check:after {
    content: "";
  }
  
  
  
  .custom_checkbox--label {
    margin: 0px 0.5vw;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* CUSTOM NOTES */
  .custom_notes {
    width: 100%;
    height: 90%;
    border-radius: 5px;
    margin-top: 0.25vh;
    padding: 0.5vw;
  }
  
  
  /* PSI ARBIRATION */
  
  .arb_mini { border-left: solid .5vw var(--arb_color); }
  .psi_mini { border-left: solid .5vw var(--psi_color); }
  .psi_label { border-bottom: solid 0.5vh var(--psi_color); }
  .arb_label { border-bottom: solid 0.5vh var(--arb_color); }
  
  
  /* BACK TO DASHBOARD - UPDATE ROW -- on several screens */
  #back_to_dash_update {
    position: absolute;
    right: 4vw;
    bottom: 2vh;
  }
  #back_to_dash_update input { margin-left: 0.25vw; }
  
  /* MORPHSEARCH */
  .morphsearch .data_out_table .name_div.bad .name_span {
    color: var(--bad_color);
  }
  .morphsearch .data_out_table .name_div.cond .name_span {
    color: var(--conditional_color);
  }
  
  
  
  /* POPUP DIALOGS */
  .dialog {
    background-color: var(--popup_field_back);
    color: var(--popup_field_text);
    box-shadow: 2px 2px 5px 0px var(--popup_field_shadow);
  }
  .dialog .dialog-actions button {
    background-color: var(--button_back);
    color: var(--button_text);
    border: var(--button_border);
  }
  .dialog .dialog-actions button:hover {
    background-color: var(--button_hover);
    color: var(--button_hover_text);
    border: var(--button_hover_border);
  }
  
  
  /* user header mods -- make sure icon colors are still visiable if user has alerts/locked */
  /*
  .summary_alert ~ div,
  .summary_alert ~ div a { color: #444444 !important; }
  */
  
  
  @media screen and (max-width: 640px) {
      
      #psi_content { margin: 0px; }
      .tabcontrol > .tabs li { width: 23%; }
      
      .flex-grid .row.pa_tile_row { 
        flex-direction: row; 
        margin-bottom: 1vh;
      }
      .flex-grid .row .cell, .flex-grid .row .cell[class*=size].radio_container { 
        flex: 0 0 30%;
        -webkit-flex: 0 0 30%;
      }
      .psi_sort_label { 
        position: relative; 
        
      }
      
      .custom_radio--cell .custom_radio--label { 
        margin: 0px;
        padding: 0.5vh 0 0 3vw; 
      }
      .custom_radio--cell .custom_radio--labelb { padding-top: 1.25vh; }
      .custom_radio--check .inside { 
        height: 2.5vw;
        width: 2.5vw;
        margin-top: 2vh;
      }
      .custom_radio--check .inside,
      .custom_radio:checked ~ .custom_radio--check .inside {
        border: solid 3px #000000;
      }
      .custom_radio--check .inside::before {
        height: 1.25vw;
        width: 1.25vw; 
      }
  }
  
  
  
  
  
  
  
  
  
  
/* ALL THIS CAN BE REMOVED ONCE THESE SECTIONS ARE REMOVED */
/* SIDEBAR */
#fixed-sidebar {
  width: 200px;
  height: 100%;
  position: fixed;
  background-image: var(--main_field_back);
  color: var(--text_main);
  background-color: transparent;
}
#fixed-sidebar > .sidebar { background-image: var(--main_field_back); background-color: transparent; }
#fixed-sidebar li:hover {  background-image: var(--table_row_image); }
#fixed-sidebar li.active:hover {  color: var(--text_main); }
.sidebar li.custom-side-sub a .icon { margin-left: 10px; }






/* PROFILE TILES AND ADDRESS TILES */
.custom-profile-tile, 
.custom-address-tile {
  display: block;
  float: left;
  margin: 5px;
  background-color: unset;
  background-image: var(--link_button_back); 
  color: var(--link_button_text);
  height: 125px; 
  width: 13%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.custom-profile-tile:active, 
.custom-address-tile:active,
.custom-address-tile-active {
  outline: 0;
  background-color: unset;
  background-image: var(--link_button_back_active);
  color: var(--link_button_text_active);
}
.custom-profile-tile:hover, 
.custom-address-tile:hover {
  background-color: unset;
  background-image: var(--link_button_back_active);
  color: var(--link_button_text_active);
}
.custom-profile-tile .tile-label, 
.custom-address-tile .tile-label {
  position: absolute;
  bottom: 0;
  padding: 2px;
  z-index: 999;
  width: 100%;
  background-color: var(--button_back);
  text-align: center;
  color: var(--button_text);
  height: 45px;
  left: 0px;
  
}
.custom-profile-tile .tile-label.custom-label-spacer, 
.custom-address-tile .tile-label.custom-label-spacer { 
	padding-top: 10px; 
}
.custom-profile-tile .tile-content.iconic .icon, 
.custom-address-tile .tile-content.iconic .icon { 
top: 38%; 
} 

/* PROFILE TILES */
.custom-profile-tile { height: 85px !important; }
.custom-profile-tile .tile-label { height: 30px; }
.custom-profile-tile .tile-content.iconic .icon { font-size: 45px; }
.custom-profile-tile .tile-content.iconic .icon { top: 45px; }
.custom-profile-tile.custom-active-profile-tile { 
  background-image: var(--link_button_back_active); 
  color: var(--link_button_text_active);
}

/* ADDRESS TILES */
.custom-address-tile {
	width: 300px;
	height: 85px;
	
  font-weight: 500;
}
.custom-address-tile .tile-content { 
	padding: 10px; 
	top: -3px;
}
.custom-address-tile .tile-custom-center > .tile-custom-center-text { vertical-align: top; }
.custom-address-tile .tile-label { height: 30px; padding-top: 5px; }

.custom-add-address {
	width: 150px;
	background-color: var(--button_back);
	color: var(--button_text);
}
.custom-add-address:hover { 
  background-color: var(--button_hover);
  color: var(--button_hover_text); 
}
.custom-add-address .tile-content.iconic .icon {
	height: auto;
	font-size: 40px;
	margin-top: -25px;
}
.custom-add-address .tile-label {
	left: 0px;
	//bottom: 2px;
	background-color: var(--button_back);
  color: var(--button_text);
}




.custom-subnav-tile {
  display: block;
  float: left;
  margin: 5px;
  background-color: var(--button_back);
  color: var(--button_text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: solid 2px var(--button_back);
  //border-radius: 5px;
  height: 30px; 
  width: 250px;
}
.custom-subnav-tile:hover,
.custom-subnav-tile.active {
  background-color: var(--button_hover);
  color: var(--button_hover_text);
}


.custom-subnav-tile .tile-label {
  position: absolute;
  bottom: 0px;
  padding: 2px;
  z-index: 999;
  width: 100%;
  text-align: center;
  height: 45px;
  font-size: 24px;
  padding-top: 13px;
}
.custom-subnav-tile2 { width: 180px; }

.burger_div { 
  position: absolute;
  display: block;
  width: 150px;
  height: 150px;
  background-image: var(--main_field_back); 
  right: 30px;
  top: -35px;
}
.burger_data {
  position: relative;
  width: 100%;
  list-style: none inside none;
  color: var(--main_field_text);
  margin: 0;
  padding: 0;
}  
.burger_data li {
  display: block;
  background-color: var(--menu_back);
  color: var(--menu_text);
  position:relative;
  height: auto;
  padding: 0.55vh;
  padding-left: 1vw;
  margin: 0.25vh 0;
}
.burger_data li:hover { 
  background-color: var(--menu_back_hover);
}
.burger_data li a { 

  color: inherit;
}

.small_page_head { 
  display: none; 
  padding-left: 30px;
  color: var(--text_main);
  font-weight: bold;
  font-size: 120%;
}

.custom_dtable thead { border-bottom: solid 1px var(--text_main); }
.custom_dtable thead td { 
  padding: 5px 0px 20px 5px; 
  color: var(--text_main); 
  font-weight: initial;
  font-size: 150%;
}

.custom_dtable tbody td { font-size: 1vw; }
.custom_dtable td:first-child { text-align: left;  }

.custom_dtable tbody tr { border-bottom: none; }
.custom_dtable tbody tr td { 
  cursor: pointer; 
  padding: 5px 10px;
}

.dataTables_scrollBody .custom_dtable.dataTable thead { border-bottom: none; }


.custom_dtable_length { display: none;}
.custom_dtable .dataTables_info {
  background-color: transparent;
  padding-top: 25px;
  color: var(--text_main);
  font-weight: 500;
}
.dataTables_info {
  background-color: var(--popup_field_back);
  margin-top: 1vh;
    
}
 


.fieldset_div .accordion > .frame .heading.show_accordion { 
  background-image: var(--main_field_back);
  color: var(--main_field_text);
  font-size: 1.75rem;
  border-color: var(--main_field_hr);
  //border-radius: 5px;
  height: 50px;
  padding-left: 35px;
}


.fieldset_div .accordion > .frame > .content {
  padding: 0px;
  display: block;
  background-color: inherit; 
}
.fieldset_div .accordion > .frame > .heading {
  display: none;
} 


/* TEMP STUFF */
.input-control.text, .input-control.select, .input-control.file, .input-control.password, .input-control.number, .input-control.email, .input-control.tel {
    width: 100%;
}