/*@import url('https://fonts.googleapis.com/css?family=Playfair+Display');*/
/*@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');*/

/* NOTE: google fonts can create a single import link that imports multiple fonts, instead of listing two imports above... */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Quicksand&display=swap');

/* original Portal body settings */
body {
  font-size: .875rem;   /* original dashboard font-size; others are relative to this! */
/*  font-size: .925rem; */     /* this example project defaulted with the above .875... */
  /*background-color: #F8F8FF;*/
}

/* body settings copied from enact vision project */
/*body {
    font-family: 'Roboto', sans-serif;
    font-size:  .925rem;
    font-weight: 300;
    line-height: 1.5em;
    background-color: #fafafa;
}
*/
/* i added this hr style */
hr.nav-divider {
  margin: 10px 15px 15px 15px;
}

/* had to do custom styling for Forms due to crispy forms and bootstrap 5 not getting along...*/
label {
  padding-top: 6px;
  padding-bottom: 6px;
}

.external-form {
  margin: 0px;
}

.external-form label {
  font-size: small;
  padding-top: 0px;
  padding-bottom: 0px;
}

.external-form input[type="checkbox"] {
  margin-top: 4px;
}

.calculator-form label {
  padding-bottom: 2px; /* overrides above global label styling, just for this class */
}


input[type="checkbox"] {
  margin-top: 10px;
}

/* I added this */
a {
  color: royalblue;
  text-decoration: none;
}

/* POWER BI EMBEDDED STYLING, COPIED FROM CSS FILE OF FLASK SAMPLE APPLICATION */

/*header {
    background-color: #007FFF;
    height: 75px;
    width: 100%;
}

header > p {
    color: #FFFFFF;
    font: bold 1.6em "segoe ui", arial, sans-serif;
    margin-left: 31px;
    padding-top: 20px;
}
*/
main {
/*    margin: 0 auto;*/
    width: 100%;
}
/* IMPORTANT NOTE: on 3/18 I un-commented the above 'main' styling; prior to that it was never
used; I just wanted to see if it had any effect on the report embeding, since this is the styling
from the flask app; margin:  0 auto will shift all content in main to the left, behind the
sidebar, so that doesn't work; curious to check what effect width 100% does or doesn't have....*/


section#text-container > div > p {
    font: 1.2em "segoe ui", arial, sans-serif;
}

/* NOTE: the vw value here for years was * 80vw; experimenting in late 2025 with dash v2.0, e.g. 88 etc.
that said, my question is: does this need to be a value set relative to a sidebar width value? if we go above 80 do we risk
it getting pushed down below sidebar? but I can't find any sidebar setting e.g. == 20vw, so doesn't seem to be the case...need to test on multiple viewports! */

section#report-container {
    height: calc(0.5625 * 80vw); /* 16:9 aspect ratio */          /* this is 60vw in flask file; I changed to 80, then 100 */
}

@media only screen and (max-width: 575px) {
    section#report-container {
        height: calc(0.5625 * 100vw); /* 16:9 aspect ratio */       /* this is 100vw in flask file */
    }
}

/* ^^^ max-width: 575px means screens of 575 width OR LESS; that is, mobile phones, etc. So, these are media overrides for phones.

/*footer > p {
    font: 1em "segoe ui", arial, sans-serif;
}*/

iframe {
    border: none;
}

/* END OF POWER BI EMBEDDED STYLING */


/* class based on styling of the Enact Vision mockup; see base.css in that project */
.vision-styling {
  font-family: 'Roboto', sans-serif;
  font-size:  .925rem;
  font-weight: 300;
  line-height: 1.5em;
  background-color: #fafafa;
}

/* labels for checkboxes have too-small margins by default UPDATE: I commented this out because it was 
screwing with display of checkboxes for selectable Reports; these changes need to be more granular, but
that's hard to do with individuals parts of whole forms. original use of this was that 'active' appeared
to close to other form input fields, so I moved it down */
/*.form-check-label {
  margin-top: 10px;
}*/

/* override bootstrap default for table head separator THESE ARE DEFAULTS; IF YOU WANT TO OVERRIDE, DO IT HERE */
/*.table > :not(:first-child) {
    border-top: 2px solid currentColor; 
}*/


.two-column-offset-right {
  margin-right: 12px;
}


.two-column-offset-left {
  margin-left: 12px;
}


/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  /* rtl:raw:
  right: 0;
  */
  bottom: 0;
  /* rtl:remove */
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 48px 0 0; /* Height of navbar */
/*  background-color: #f2f2f2;*/
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  /* My New Additions below -- to make sidebar scroll */
  /*overflow-x:  hidden;*/ /* unclear to me if this is necessary... */
  overflow: auto; /* this allows the sidebar to scroll when content is larger than viewport; tested & working */
}

/* all modified classes for mobile-sizing should be set inside this media query block; create classes as needed in here, and apply them in templates */
@media (max-width: 767.98px) {
  .sidebar {
/*    top: 5rem;*/
      top:  0;        /* this is a crucial fix: it removes all the extra space that was appearing above the sidebar when viewed (un-collapsed) in mobile */
  }
  /* remove margins from two-column layout pages on mobile, since they will be stacked vertically */
  .two-column-offset-right, .two-column-offset-left {
    margin-left: 0px;
    margin-right: 0px;
  }

  .insight-box-media {
    margin-top: 8px;
  }

}

/* this is not actually used anywhere! */
.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #727272;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .90rem;
  text-transform: uppercase;
}

.insight-header {
/*  font-family: 'Bebas Neue', sans-serif;*/
  font-family: 'Quicksand', sans-serif;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .55rem;      /* both of these were originally .75 */
  padding-bottom: .55rem;
  font-size: 1rem;
/*  background-color: rgba(0, 0, 0, .25);*/
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .10);   /* you were using .10 on the last entry (right side) */
}

.navbar .navbar-toggler {
  top: .25rem;
  right: .25rem; /* I changed this to .25, originally was 1 -- created too much space to right of button in mobile mode */
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}


/* my added classes */

/* styles inside of tab-content wrapper div that goes around all tab-pan divs */
.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    border-radius: 0 0 4px 4px;
}


.icon-heading {
  display: inline-block;
}

.push-badge {
  margin-left:  auto;
}

.modal-button {

}

.modal-button:hover {

}


.modal-header {
    background-color: #f2f2f2;
}


.btn-pref {
  background-color: #fff;
  border: 1px solid black;
  color:black;
  display: block;
  margin-bottom: 2px;
  padding: 4px;
  width: 100%;
  /* margin-bottom: 10px; */
  /* margin-top: 10px; */
}

.info-display {
  padding: .55rem 1rem; /* this was originally .75 -->
  border-width:  0;
  border-radius: 0;
/*  color: lightgrey;
  background-color: rgba(255, 255, 255, .1); 
  border-color:  rgba(255, 255, 255, .1);*/
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .10);
}



/* remove asterisk from 'required' field in crispy forms display */
.asteriskField {
    display: none;
}

.search-button {
  background-color: transparent;
  background-repeat: no-repeat;
  border:  none;
  margin-right: 0px;
  padding: 0px;
  outline: none;
  overflow: hidden;
}

.custom-drop-menu {
  /*background-color: limegreen;*/        /* works, was simply testing! */
/*  min-width: 110px !important;*/
}

.custom-drop-menu .dropdown-item, .dropdown-header {
  padding-left: 8px;                  /* works; default padding was too deep */
}

.custom-drop-menu .dropdown-header {
  padding-top: 1px;
  padding-bottom: 3px;
}


.embed-drop-menu {
  max-height:  60vh;
  overflow-x:  hidden;
  overflow-y: auto;
}

/*.sub-page-header {
  padding-bottom: 6px !important;
}*/

.dropdown-divider {
  margin-top: 0;
  margin-bottom: 5px;
}

.activeStatusCheck {
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.check-widget {
  margin: 0;
}

#sidebarMenu .nav-item:hover {
  background-color: #e6e6e6;
}


table .list-edit-button:hover {
  background-color: #ffd966;
  color:  black;
}


table .list-trash-button:hover {
  background-color: #dc3545;
  color: white;
}


table .record-list-row:hover {
  background-color: #f2f2f2;
}

header .logo-image {
  height: 25px;
}

.logo-image {
  height: 40px;
}

.portal-logo-image {
  height: 78px;
}

.portal-logo-only {
  height: 70px;
}

.logo-name-only {
  height: 30px;
}

.logo-image-sidebar {
    height: 24px;
}

.title-insights-row {
  text-decoration: none;
  color: black;
}

.title-insights-row:hover {
/*  background-color: #f2f2f2;*/
    background-color: #e6f0ff;
}

.dash-selector:hover {
  background-color: #e6f0ff;
}

.bookmark-loader {
  border: solid;
  border-color: lightgrey;
  margin-right: 5px;
}

.bookmark-loader:hover {
  background-color: #e6f0ff;
}

/* jquery ui autocomplete styling */

.ui-autocomplete {
  position: fixed;
  top: 100%;
  left: 0;
  z-index: 2000;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  cursor: pointer; /* NoirDB didn't need this, but without this here, cursor is text bracket not pointer! */
}

.ui-helper-hidden-accessible { display:none; }

/* jquery ui's way of changing hover-on-item behavior... */
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #e6e6e6 !important;
/*    color: #ffffff !important;*/
/*    font-weight: bold !important;*/
} 

/* make the menu results have some space to their left and right*/
.ui-menu .ui-menu-item {
  margin: 0 8px 0 8px;
}

/*.ui-autocomplete.ui-widget {
    font-size: 14px;
}
*/


/*.accordion-button:focus {
  background-color: #FFF !important;
}*/

/* this prevents the accordion from turning blue at unexpected times */
.bookmark-accordion-button:not(.collapsed) {
  background-color: #FFF !important;
}



/* STYLING FOR ESTIMATE TOOL INPUT BOX */
/* this is the required css for making sure the radio button and label text for button align correctly */
input[type="radio"] {
  margin-top: 9px;
}


/*.estimate-box {
  font-family: 'Playfair', sans-serif !important;
}*/

/* play with this to align radio buttons horizontally; use of the widget class radio-inline NEVER, EVER WORKS */
/* UPDATE: IN VERSION WHERE MODEL_TYPE IS A SELECT CHOICES INSTEAD OF RADIO BUTTONS, ALL THIS STYLING MUST BE
COMMETED OUT -- IT SCREWS UP THE ELEMENTS, BECAUSE THESE IDS ARE STILL ACTIVE FOR THE FORM FIELDS */
#div_id_model_type div {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 3px;
    display:inline-flex;
    justify-content: center;
    width: 100%;
}

#div_id_model_type .form-check-label {
    margin-left: 8px;
    margin-top: 0px;
}


#div_id_track_or_trail div {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 3px;
    display:inline-flex;
    justify-content: center;
    width: 100%;
}

#div_id_track_or_trail .form-check-label {
    margin-left: 8px;
    margin-top: 0px;
}

/* in the Set Target Trailer modal on the Trailer Data page, the default spacing between each radio select field was huge;
this makes them appear closer together */
#div_id_select_target .form-check-label {
  padding-top: 5px;
  padding-bottom: 4px;
}


.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}



input[type="range"] {
  border: none !important;
  box-shadow: none !important;
  background-color: #f6f6f6 !important;
}


input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: none !important;
}

input[type="range"]:focus::-moz-range-thumb {
  box-shadow: none !important;
}

input[type="range"]:focus::-ms-thumb {
  box-shadow: none !important;
}

.itool-button {
  background-color: #e580ff;
}

.itool-button:hover {
  background-color: #eb99ff;
}

#resetTool {
  cursor: pointer;
}


.yellow-buttons {
    color: black;
    text-decoration: none;
    border-radius: 14px;
    background-color: #ffdf80;
}

.yellow-buttons:active, 
.yellow-buttons:hover, 
.yellow-buttons.focus, 
.yellow-buttons.active {
    background-color: #ffe699 !important;
    border-color: #ffe699 !important;
}


.white-outline-buttons {
    color: black;
    text-decoration: none;
    border-radius: 14px;
    background-color: white;
    border-color: black;
}

.white-outline-buttons:active, 
.white-outline-buttons:hover, 
.white-outline-buttons.focus, 
.white-outline-buttons.active {
    background-color: #ffe699;      /* was #dfd4f7 */
    border-color: black;
}


.purple-buttons {
    color: black;
    text-decoration: none;
    border-radius: 14px;
    background-color: #f5ccff;
}

.purple-buttons:active, 
.purple-buttons:hover, 
.purple-buttons.focus, 
.purple-buttons.active {
    background-color: #fae6ff !important;
    border-color: #fae6ff !important;
}

.soft-purple-buttons {
    color: black;
    text-decoration: none;
    border-radius: 14px;
    background-color: #e0d5f6;
}

.soft-purple-buttons:active, 
.soft-purple-buttons:hover, 
.soft-purple-buttons.focus, 
.soft-purple-buttons.active {
    background-color: #efeafb !important;
    border-color: #efeafb !important;
}


.green-buttons {
    color: black;
    text-decoration: none;
    border-radius: 14px;
    background-color: #9de2af;
}

.green-buttons:active, 
.green-buttons:hover, 
.green-buttons.focus, 
.green-buttons.active {
    background-color: #b0e8bf !important;
    border-color: #b0e8bf !important;
}


.white-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #ffffff;
}

.white-buttons-form:active, 
.white-buttons-form:hover, 
.white-buttons-form.focus, 
.white-buttons-form.active {
    background-color: #f2f2f2 !important;
    border-color: #f2f2f2 !important;
}

.white-buttons-form.selected {
  background-color: #ffe866 !important;
}


.soft-yellow-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #FFFFC5;
}

.soft-yellow-buttons-form:active, 
.soft-yellow-buttons-form:hover, 
.soft-yellow-buttons-form.focus, 
.soft-yellow-buttons-form.active {
    background-color: #ffffe6 !important;
    border-color: #ffffe6 !important;
}


.circle-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #eee6dd;
}

.circle-buttons-form:active, 
.circle-buttons-form:hover, 
.circle-buttons-form.focus, 
.circle-buttons-form.active {
    background-color: #f7f2ee !important;
    border-color: #f7f2ee !important;
}

.grey-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #e6e6e6;
}

.grey-buttons-form:active, 
.grey-buttons-form:hover, 
.grey-buttons-form.focus, 
.grey-buttons-form.active {
    background-color: #f2f2f2 !important;
    border-color: #f2f2f2 !important;
}


.silver-buttons {
  color: black;
  text-decoration: none;
  background-color: #d9d9d9;
  border-radius: 14px;
}

.silver-buttons:active, 
.silver-buttons:hover, 
.silver-buttons.focus, 
.silver-buttons.active {
    background-color: #e6e6e6 !important;
    border-color: #e6e6e6 !important;
}


.silver-buttons-form {
  color: black;
  text-decoration: none;
  background-color: #d9d9d9;
}

.silver-buttons-form:active, 
.silver-buttons-form:hover, 
.silver-buttons-form.focus, 
.silver-buttons-form.active {
    background-color: #e6e6e6 !important;
    border-color: #e6e6e6 !important;
}

.army-green-buttons {
  color: black;
  text-decoration: none;
  background-color: #d8e0d2;
  border-radius: 14px;
}

.army-green-buttons:active, 
.army-green-buttons:hover, 
.army-green-buttons.focus, 
.army-green-buttons.active {
    background-color: #e5eae1 !important;
    border-color: #e5eae1 !important;
}



.army-green-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #d8e0d2;
}


.army-green-buttons-form:active, 
.army-green-buttons-form:hover, 
.army-green-buttons-form.focus, 
.army-green-buttons-form.active {
    background-color: #e5eae1 !important; /* this is two shades lighter than primary color above, FYI - */
    border-color: #e5eae1 !important;
}



.white-buttons {
  color: black;
  text-decoration: none;
  background-color: #fbf2e9;
  border-radius: 14px;
}

.white-buttons:active, 
.white-buttons:hover, 
.white-buttons.focus, 
.white-buttons.active {
    background-color: #fdf8f3!important;
    border-color: #fdf8f3 !important;
}


.whte-buttons-form {
  color: black;
  text-decoration: none;
  background-color: #fbf2e9;
}

.white-buttons-form:active, 
.white-buttons-form:hover, 
.white-buttons-form.focus, 
.white-buttons-form.active {
    background-color: #fdf8f3 !important;
    border-color: #fdf8f3 !important;
}



.orange-buttons {
  color: black;
  text-decoration: none;
  background-color: #ffdd99;
  border-radius: 14px;
}

.orange-buttons:active, 
.orange-buttons:hover, 
.orange-buttons.focus, 
.orange-buttons.active {
    background-color: #ffe6b3!important;
    border-color: #ffe6b3 !important;
}


.orange-buttons-form {
  color: black;
  text-decoration: none;
  background-color: #ffdd99;
}

.orange-buttons-form:active, 
.orange-buttons-form:hover, 
.orange-buttons-form.focus, 
.orange-buttons-form.active {
    background-color: #ffe6b3 !important;
    border-color: #ffe6b3 !important;
}


.purple-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #ffb3ff;
}

.purple-buttons-form:active, 
.purple-buttons-form:hover, 
.purple-buttons-form.focus, 
.purple-buttons-form.active {
    background-color: #ffccff !important;
    border-color: #ffccff !important;
}




.soft-purple-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #e0d5f6;
}

.soft-purple-buttons-form:active, 
.soft-purple-buttons-form:hover, 
.soft-purple-buttons-form.focus, 
.soft-purple-buttons-form.active {
    background-color: #efeafb !important;
    border-color: #efeafb !important;
}


.blue-buttons {
    color: black;
    text-decoration: none;
    border-radius: 14px;
    background-color: #bee5f4;
}

.blue-buttons:active, 
.blue-buttons:hover, 
.blue-buttons.focus, 
.blue-buttons.active {
    background-color: #d3edf8 !important;
    border-color: #d3edf8 !important;
}

.blue-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #92d3ed;
}

.blue-buttons-form:active, 
.blue-buttons-form:hover, 
.blue-buttons-form.focus, 
.blue-buttons-form.active {
    background-color: #a8dcf0 !important;
    border-color: #a8dcf0 !important;
}

.banner-blue-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #bedff4;;
}

.banner-blue-buttons-form:active, 
.banner-blue-buttons-form:hover, 
.banner-blue-buttons-form.focus, 
.banner-blue-buttons-form.active {
    background-color: #d3eaf8 !important;
    border-color: #d3eaf8 !important;
}



.yellow-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #ffd966;
}

.yellow-buttons-form:active, 
.yellow-buttons-form:hover, 
.yellow-buttons-form.focus, 
.yellow-buttons-form.active {
    background-color: #ffdf80 !important;
    border-color: #ffdf80 !important;
}


.green-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #89dc9f;
}

.green-buttons-form:active, 
.green-buttons-form:hover, 
.green-buttons-form.focus, 
.green-buttons-form.active {
    background-color: #9de2af !important;
    border-color: #9de2af !important;
}


.red-buttons {
    color: black;
    text-decoration: none;
    border-radius: 14px;
    background-color: #F7CAC9;
}

.red-buttons:active, 
.red-buttons:hover, 
.red-buttons.focus, 
.red-buttons.active {
    background-color: #f8d3d3 !important;
    border-color: #f8d3d3 !important;
}


.red-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #F7CAC9;
}

.red-buttons-form:active, 
.red-buttons-form:hover, 
.red-buttons-form.focus, 
.red-buttons-form.active {
    background-color: #f8d3d3 !important;
    border-color: #f8d3d3 !important;
}

.warningred-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #ff9999;
}

.warningred-buttons-form:active, 
.warningred-buttons-form:hover, 
.warningred-buttons-form.focus, 
.warningred-buttons-form.active {
    background-color: #ffcccc !important;
    border-color: #ffcccc !important;
}

.strong-red-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #f2a9a6;
}

.strong-red-buttons-form:active, 
.strong-red-buttons-form:hover, 
.strong-red-buttons-form.focus, 
.strong-red-buttons-form.active {
    background-color: #f5bebc !important;
    border-color: #f5bebc !important;
}


.soft-blue-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #bee5f4;
}

.soft-blue-buttons-form:active, 
.soft-blue-buttons-form:hover, 
.soft-blue-buttons-form.focus, 
.soft-blue-buttons-form.active {
    background-color: #d3edf8 !important;
    border-color: #d3edf8 !important;
}

.blue-silver-buttons {
  color: black;
  text-decoration: none;
  background-color: #e0ebeb;
  border-radius: 14px;
}

.blue-silver-buttons:active, 
.blue-silver-buttons:hover, 
.blue-silver-buttons.focus, 
.blue-silver-buttons.active {
    background-color: #eff5f5 !important;
    border-color: #eff5f5 !important;
}


.blue-silver-buttons-form {
  color: black;
  text-decoration: none;
  background-color: #e0ebeb;
}
/* FIND OUT: what is the difference between :active and .active ? */

.blue-silver-buttons-form:active, 
.blue-silver-buttons-form:hover, 
.blue-silver-buttons-form.focus, 
.blue-silver-buttons-form.active {
    background-color: #eff5f5 !important;
    border-color: #f0f5f5 !important;
}


.soft-yellow-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #ffee8c;
}

.soft-yellow-buttons-form:active, 
.soft-yellow-buttons-form:hover, 
.soft-yellow-buttons-form.focus, 
.soft-yellow-buttons-form.active {
    background-color: #fff4b3 !important;
    border-color: #fff4b3 !important;
}


.soft-orange-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #ffdfb3;
}

.soft-orange-buttons-form:active, 
.soft-orange-buttons-form:hover, 
.soft-orange-buttons-form.focus, 
.soft-orange-buttons-form.active {
    background-color: #ffeacc !important;
    border-color: #ffeacc !important;
}


.mysoftgreen-buttons {
  color: black;
  text-decoration: none;
  background-color: #8cd9ac;
  border-radius: 14px;
}

.mysoftgreen-buttons:active, 
.mysoftgreen-buttons:hover, 
.mysoftgreen-buttons.focus, 
.mysoftgreen-buttons.active {
    background-color: #b3e6c8 !important;
    border-color: #b3e6c8 !important;
}



.mysoftgreen-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #8cd9ac;
}


.mysoftgreen-buttons-form:active, 
.mysoftgreen-buttons-form:hover, 
.mysoftgreen-buttons-form.focus, 
.mysoftgreen-buttons-form.active {
    background-color: #b3e6c8 !important; /* this is two shades lighter than primary color above, FYI - */
    border-color: #b3e6c8 !important;
}


.light-yellow-buttons-form {
    color: black;
    text-decoration: none;
    background-color: #fddb92;
}

.light-yellow-buttons-form:active, 
.light-yellow-buttons-form:hover, 
.light-yellow-buttons-form.focus, 
.light-yellow-buttons-form.active {
    background-color: #fde6b4 !important; /* this is two shades lighter than primary color above, FYI - */
    border-color: #fde6b4 !important;
}


.whiteblack-form {
  color: black;
  /*border-radius: 14px;*/
  /* border-width: 2px; this actually messes with the overal size of the element... */
  text-decoration: none;
  background-color: snow;
  border-color: black;
}

.whiteblack-form:active,
.whiteblack-form:hover,
.whiteblack-form.focus,
.whiteblack-form.active {
  background-color: ghostwhite;
  border-color: grey;
}


.user-saved-view {
    font-size: small;
}

/* this needs testing -- trying to stop blue background from appearing when clicking links in dropdowns */
.link-in-dropdown {
    color: rgb(0, 102, 204);
    text-decoration: none;
}

.signout-box {
    box-shadow: inset -1px 0 0 rgba(.10, 0, 0, 0);
}

/* WIP */
.custom-hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

.activeLoadHighlight {
  /*background-color: #ebd8f9 !important;*/
  background-color: #ffe699 !important;
}


/*.insight-loader:focus,
.insight-loader.focus {
  outline: none !important;
  box-shadow: none !important;
}
*/

.pending-insight {
    background-color: #fbf9d0 !important;
}

.soft-background:hover {
  background-color: #f2f2f2 !important;
}

table .list-trash-button:hover {
  background-color: #dc3545;
  color: white;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}


.small-game-image {
    max-height: 18vh;
    max-width: auto;
}

.poster-image {
    max-height: auto;
    max-width: 13vw;   /* 9/24 updated to vw, used to use vh, which works, but is weird... */
}

.sizzle-image {
    max-height: auto;
    max-width: 350px;
}

.small-poster-image {
    max-height: 18vh;
    max-width: auto;
}


.star-image {
    max-height: auto;
    max-width: 30vh; /* same here, see above ^^^ should be vw, not vh, but this still does "work" */
}



/*#comp-radios input {
  padding-top: 0px;
  padding-bottom: 0px;
}
*/

/* Janky... reduces spacing between radio selections in compfinder form, but you have to mess with padding for it to work... */
#comp-radios label {
  padding-top: 5px;
  padding-bottom: 0px;
}


/* the styling of the Audience Compfinder > Sort & Filter dropdown needs to be explicitly set here; the dropdown was copied from the
Title App > Title List detail page, but initially showed up with huge spaces between each entry in the form / dropdown selections. This fixes that... */

#div_id_sorting .form-check-label {
  padding-top: 0px;
  padding-bottom: 0px;
}

#div_id_filtering .form-check-label {
  padding-top: 0px;
  padding-bottom: 0px;
}

#div_id_sorting .form-check-input {
  margin-top: 4px;
}

#div_id_filtering .form-check-input {
  margin-top: 4px;
}

.vision-table tbody tr:hover {
  background-color: #f9ffcc;
  #background-color: #fcffe6; /* Your desired hover color */
}

.btn-outline-secondary:hover {
  background-color: none !important;
}


.box-gradient-purple1 {
  background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
}

.box-gradient-purple2 {
  background-image: linear-gradient(to top, #fbc8d4 0%, #9795f0 100%);
}

.box-gradient-blue1 {
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

.box-gradient-blue2 {
  background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}

.box-gradient-blue3 {
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
}


.box-gradient-light-blue {
  background-image: linear-gradient(to top, #c0d7f2 0%, #e7f0fd 100%);
}

.box-gradient-light-blue:active, 
.box-gradient-light-blue:hover, 
.box-gradient-light-blue.focus, 
.box-gradient-light-blue.active {
    border-color: #678498 !important;
}


.box-gradient-light-green {
  background-image: linear-gradient(to top, #8cd9ac 0%, #d9f2e3 100%);
}

.box-gradient-light-green:active, 
.box-gradient-light-green:hover, 
.box-gradient-light-green.focus, 
.box-gradient-light-green.active {
    border-color: #678498 !important;
}




.box-gradient-yellow {
  background-image: linear-gradient(to top, #d1fdff 0%, #fddb92 100%);
}

/* customized color combo here */    
.box-insight-gradient {
  background-image: linear-gradient(to top, #fccfef 0%, #d4e1f7 100%);
}

.box-insight-yellow {
  background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);
}

.client-title-select .form-check {
    margin-bottom: 0 !important; /* Reduce vertical space */
    padding-bottom: 0 !important;
}

/* wow...this actually works... (above and below) to control space between radio selections on client dash! */
.client-title-select .form-check-label {
    margin-bottom: 0 !important; /* Reduce vertical space */
    padding-bottom: 0 !important;
}
/* EOF */