/* WCOA Branding Overrides */
:root {
  --or_blue: #011F44;
  --or_yellow: #F7D444;
  --or_gold: #D98930;
  --neutral_back: #F5F5F5;
  /* --header_bg: #FFFFAA; */
  /* --header_bg: var(--or_yellow); */
  --header_bg: var(--neutral_back);
  --secondary_bg: var(--or_yellow);
  --alt_bg: var(--or_blue);
  --accent_bg: #CCEEFF;
  --panel_bg: white;
  /* --panel_bg: #BBDDFF; */
  /* --panel_highlight_bg: #8888FF; */
  /* --title: #0033DD; */
  --title: var(--or_blue);
  --font_p: var(--or_blue);
  --font_alt: var(--or_yellow);
  --font_hover: #2266FF;
  --prim_button_bg: var(--or_blue);
  --prim_button_bg_alt: var(--or_gold);
  --prim_button_color: var(--or_gold);
  --prim_button_color_alt: var(--or_blue);
  --cms_button_bg: var(--or_yellow);
  --cms_button_color: var(--or_blue);
  --cms_button_bg_alt: var(--or_gold);
  --link_highlight: var(--or_yellow);
  --base_font_fam: 'OpenSans', Arial;
  
  --primary_color: var(--or_blue) !important;
  --link_color: var(--or_blue) !important;
  --link_hover: var(--or_gold) !important;
  --border_primary: var(--or_blue) !important;
  --border_alt: var(--or_gold) !important;
}

/**********GENERAL*************/
*,
input,
#discover-landing p .highlight,
h1, h2, h3, h4 {
  font-family: var(--base_font_fam);
}
h1, h2, h3, h4 {
  color: var(--title);
}
/* html { */
body.base-layout {
  /* background-image: linear-gradient(90deg, var(--or_yellow), white, white, White, white); */
  /* height: min-content; */
  background-size: 100% 100%;
}

.home-item h1, 
.home-item h2, 
.home-item h3, 
.home-item h4, 
.home-item p {
  color: var(--font_p);
}

.btn-success {
  border: 1px solid var(--cms_button_color);
  border-radius: 5px;
  color: var(--cms_button_color);
  background-color: var(--cms_button_bg);
}

.btn-success:hover:not(.toggle-on):not(.toggle) {
  color: var(--cms_button_color);
  border: 2px solid var(--cms_button_color);
  background-color: var(--cms_button_bg_alt);
  font-weight: bold;
  margin: -2px auto auto -2px;
}

body.template-visualize #left-panel a#button_next,
a.btn-primary,
body.template-visualize #left-panel a.btn-primary,
a.btn-warning:hover,
a.btn-default:hover,
body.template-visualize #left-panel a.btn-default:hover,
body.template-visualize #left-panel a.btn-warning:hover {
  border-radius: 5px;
  color: var(--prim_button_color);
  background-color: var(--prim_button_bg);
  border-color: var(--prim_button_color);
  font-weight:bold;
}

body.template-visualize #left-panel a#button_next:hover,
body.template-visualize #left-panel a.btn-primary:hover,
body a.btn-primary:hover,
body.template-visualize #left-panel a.btn-warning,
body a.btn-default,
body.template-visualize #left-panel a.btn-default,
a.btn-warning {
  border-radius: 5px;
  font-weight:bold;
  color: var(--prim_button_color_alt);
  background-color: var(--prim_button_bg_alt);
  border-color: var(--prim_button_color_alt);
}


/**********HEADER*************/
.navbar .brand {
  background: var(--header_bg);
}

body.base-layout > header {
  height: 100px;
}

header > nav.container.navbar-default.navbar {
  width: 100vw;
  /* margin-left: 20px; */
}

.navbar-brand img {
  max-height: 80px;
  margin-left: 0;
  max-width: 100%;
}

.navbar-header {
  position: absolute;
  left: 0;
  width: 100vw;
  display: flex;
}

.top-nav {
  margin-left: 0px;
  max-height: 45px;
}


ul.top-nav > li > a > span.oversized {
  width: 0;
}

body ul.top-nav > li.dropdown:not(.search-dropdown) .dropdown-menu,
body.template-visualize ul.top-nav > li.open > .dropdown-menu {
  right: 0;
  left: 0;
  top: 0;
  position: relative;
}


.navbar .nav > li > a,
div.navbar ul.nav > li:hover > a {
  text-shadow: none;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
ul.dropdown-menu > li:hover,
ul.dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li.open:hover > a,
ul.top-nav li:hover {
  background-color: var(--alt_bg);
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
ul.dropdown-menu > li:hover,
ul.dropdown-menu > li > a:hover,
nav .dropdown:not(.search-dropdown) .dropdown-menu > li:hover > a,
.navbar-default .navbar-nav > li.open:hover > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default ul.top-nav > li:hover > a {
  color: var(--font_alt);
  /* font-weight: bold; */
  background-image: none;
}

.navbar .nav li.dropdown > .dropdown-toggle .caret {
  border-top-color: var(--font_p);
}

.navbar .nav li.dropdown.open {
  max-height: 45px;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
ul.top-nav > li.dropdown:hover > a.dropdown-toggle > span.caret {
  border-top-color: var(--font_alt);
}
button.toggle-button.navbar-toggle {
  position: relative;
  background-color: white;
  height: 50%;
  margin-top: 8%;
  border-radius: 10px;
  border: 1px solid var(--font_p);
}

nav.navbar ul.nav {
  right: 60px;
}

button.toggle-button.navbar-toggle span.icon-bar {
  background-color: var(--font_p);
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open ul.dropdown-menu li a:hover,
.navbar-default ul.navbar-nav > li > a:hover {
  background-color: var(--font_p);
  color: var(--font_alt);
  font-weight: bold;
}

.nav-col-left > div.navbar-collapse {
  flex-grow: 4;
  width: 100%;
}

div.navbar-collapse.collapsing ul.nav {
  right: 109px;
}

.navbar-nav .open ul.dropdown-menu {
  background-color: white;
}

.navbar-nav .open ul.dropdown-menu li {
  background-color: white;
  padding-left: 1em;
  margin: 0;
  padding: 9px 0;
  z-index: 5;
  position: relative;
}

.navbar-nav .open ul.dropdown-menu li.divider {
  padding: 0;
  border-bottom: 1px solid var(--font_p);
}

nav .dropdown:not(.search-dropdown) .dropdown-menu > li:hover > a {
  color: var(--font_p);
}



/* Navbar Brand */

.navbar-brand .col-xs-6 {
  text-align: center;
}
.nav-col-left div.navbar-brand {
  text-align: left;
  left: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

div.navbar-brand a.navbar-brand-item {
  flex-grow: 1;
  margin:0.5rem;
  padding:0.5rem;
  background-color: rgba(255,255,255,0.4);
  border-radius: 10px;
  display: flex;
  justify-content: center;
}

div.navbar-brand a.navbar-brand-item:hover {
  background-color: rgba(255,255,255,0.8);
  margin: 0.1rem;
  padding: 0.1rem;
  border: 1px solid var(--border_primary);
}

div.navbar-brand a.navbar-brand-item:hover > img.header-logo {
  max-height: 90px;
}

.navbar-brand .nav-col-right {
  text-align: right;
  right: 0;
  display: flex;
  justify-content: right;
}
.navbar-brand .col-xs-6 h3 {
  margin-top: 0;
  color: black;
}



/********FOOTER************/

div.footer.container  {
  min-height: 100px;
}

div.footer.container a {
  color: var(--font_p);
  background-color: rgba(255,255,255,0.5);
  border-radius: 10px;
  padding: 5px;
}

div.footer.container a:hover {
  background-color: rgba(1,31,68,0.8);
  color: var(--font_alt);
  font-weight: bold;
}

/********MODALS************/
.modal-content {
  border-radius: 1rem;
  border: 1px solid var(--border_primary);
}
.modal-header {
  background-color: var(--header_bg);
  border-radius: 1rem 1rem 0 0;
}
.modal-footer{
  background-color: var(--header_bg);
  border-radius: 0 0 1rem 1rem;
}

.modal-body{
  background-color: var(--panel_bg);
}

button.close,
button.close span {
  color: var(--font_p);
  text-shadow: none;
  opacity: 0.8;
}


/******** Login PAGE ************/

div.login h2 {
  color: var(--or_blue);
}


/******** CTA PAGE ************/

div.cta-item-wrap {
  border: 3px solid var(--border_primary);
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

div.home-item-label p span.title {
  font-size: 2.7rem;
}

/*
* CTA Backgrounds
* RDH 2022-02-15: Seeing text over images is hard business. Allow editors to provide a solid backdrop for their text.
*/
.cta-item-wrap p {
  background-color: inherit;
  font-size: 1.8rem;
}

.content a:hover,
.content a:hover > div.cta-item > div.cta-content * {
  text-decoration: none;
}


/********VISUALIZE************/

.navbar-header {
  background-color: var(--header_bg);
  padding-left: 5vw;
  padding-right: 5vw;
  max-height: 100px;

}
body.template-visualize #left-panel{
  background-color: var(--header_bg);
  border: 1px solid var(--border_primary);
}

body.template-visualize #left-panel .panel-body {
  background-color: var(--panel_bg);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

p,
#data-search-input::placeholder,
body.template-visualize .search-icon,
.panel-default > .panel-heading,
body.template-visualize #left-panel a,
body.template-visualize #left-panel .panel-title > a {
  color: var(--font_p);
}

body.template-visualize #left-panel a:hover,
body.template-visualize #left-panel .panel-title > a:hover {
  color: var(--font_hover);
}

body.template-visualize .accordion-heading.active {
  background-color: var(--accent_bg);
}

i.green {
  color: var(--or_gold);
}

body.template-visualize #left-panel a.btn-slider,
body.template-visualize .sidebar-nav .nav-tabs > li a .count {
  background-color: var(--secondary_bg);
}

body.template-visualize .ol-zoom.ol-control .ol-zoom-in,
body.template-visualize .ol-zoom.ol-control .ol-zoom-out,
body.template-visualize #map-controls #linear-measurement,
body.template-visualize #map-controls #get-link-button,
body.template-visualize #map-controls .quick-button,
.fas.fa-ruler-vertical.outline,
body div.transparent-sticky-footer button.feedback-button {
  background-color: var(--alt_bg);
  color: var(--font_alt);
  border-color: var(--border_alt);
  font-weight: bold;
  border-width: 2px;
}
body div.transparent-sticky-footer button.feedback-button {
  border-width: 4px;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  margin-right: 167px;
  border-bottom: 0;
}
tr.slider-row td.animation-check-container,
tr.slider-row td.animation-check-container label i.fa-play {
  border-radius: 4px;
}
tr.slider-row td.animation-check-container label i.fa-play {
  color: var(--font_p);
  border: 2px solid var(--font_p);
}

tr.slider-row td.animation-check-container:hover label i.fa-play,
body.template-visualize .ol-zoom.ol-control .ol-zoom-in:hover,
body.template-visualize .ol-zoom.ol-control .ol-zoom-out:hover,
body.template-visualize #map-controls #linear-measurement:hover,
body.template-visualize #map-controls #get-link-button:hover,
body.template-visualize #map-controls #linear-measurement:hover i.fas.fa-ruler-vertical.outline,
body.template-visualize #map-controls .quick-button:hover,
body div.transparent-sticky-footer button.feedback-button:hover {
  background-color: var(--secondary_bg);
  color: var(--font_p);
  border-color: var(--border_primary);
  font-weight: bold;
}

body.template-visualize #left-panel a.create-new-button,
span.create-new-button {
  color: var(--font_hover);
  border: 1px solid var(--border_primary);
  border-radius: 4px;
  padding: 4px;
}

body.template-visualize #left-panel a.create-new-button:hover {
  background-color: var(--secondary_bg);
  cursor: pointer;
  color: var(--font_p);
}

body.template-visualize #left-panel a.create-new-button i.fa-plus,
span.create-new-button i.fa-plus {
  margin-right: 4px;
}

body.template-visualize #aggregated-attribute-overlay {
  background-color: var(--header_bg);
  border: 1px solid var(--border_primary);
  border-radius: 1rem;
}

body.template-visualize #aggregated-attribute-heading h4 {
  color: var(--title);
}

#aggregated-attribute-content {
  background-color: white;
}

.tooltip.fade.right.in .tooltip-arrow {
  border-right-color: var(--badge_border);
}

.tooltip.fade.left.in .tooltip-arrow {
  border-left-color: var(--badge_border);
}

.tooltip.fade.top.in .tooltip-arrow {
  border-top-color: var(--badge_border);
}

.tooltip.fade.bottom.in .tooltip-arrow {
  border-bottom-color: var(--badge_border);
}

.tooltip-inner {
  background-color: var(--badge_border);
}

i.btn-user-gen {
  color: var(--or_gold);
}

#user-content-notice {
  background-color: var(--or_blue);
  border-color: var(--or_gold);
  border-width: 3px;
  color: var(--or_yellow);
  opacity: 85%;
}

div#user-content-notice a {
  color: var(--or_gold);
  font-weight: bold;
  text-decoration: underline;
}

div#user-content-notice a:hover {
  color: var(--or_yellow);
}

body.template-visualize #map-controls a.img-icon:hover img.quick-launch-icon, body.template-visualize #map-controls a.img-icon img.quick-launch-icon:hover {
  filter: invert(12%) sepia(38%) saturate(2630%) hue-rotate(192deg) brightness(88%) contrast(106%);
}