/* iPhone X Remove Gutters */
html {
  padding: env(safe-area-inset);
}

/* Prevent Horizontal Scrolling & Font Style */
html,
body {
  font-family: "Poppins", sans-serif;
  background-color: #005a82;
}

/* Bootstrap Styles */

.navbar {
  z-index: 9999;
}

.nav-item .nav-link {
  margin: 0 0 0 1rem;
}

.nav-item .nav-link:hover,
.nav-item .nav-link.current {
  background-color: #25a6df;
  color: #fff !important;
  border-radius: 5px;
}

.bg-light {
  background-color: #fff !important;
}

/* All Other Styles */

.dashboard-page-title {
  color: #fff;
  background-color: #166db7;
  z-index: 1;
  display: flex;
  height: 2.5rem;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.1rem;
}

.inline-block-element {
  color: #fff;
  background-color: #f47426;
  z-index: 1;
  display: flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  text-align: center;

}


.dashboard-page-title h2 {
  font-size: 1.2rem;
  float: left;
}

.dash-month-year {
  font-size: 1.2rem;
  background-color: #25a6df;
  color: #fff;
  display: inline-flex;
  padding: 0.1rem 1rem;
  border-radius: 3px;
  margin: 0 1rem 0 0;
}

h2 {
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  margin: 0;
  padding: 3px;
}

.content-card {
  background-color: #fff;
  border-radius: 5px;
  padding: 1.5rem;
  text-align: center;
  width: 100%;
}

.week-at-a-glance {
  background-color: #fff;
  border-radius: 5px;
  padding: 1.5rem;
  text-align: center;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.content-card .card-section {
  padding: 0 0 2rem 0;
}

.content-card.tall-card {
  height: 25rem;
}

.about-page {
  background-color: #fff;
}

.about-container hr {
  margin: 2rem 0 2rem 0;
}

.about-container {
  background-color: #fff;
  border-radius: 5px;
  padding: 1.5rem;
  width: 100%;
}

.about-container h1 {
  font-weight: bold;
  font-size: 2rem;
}

.about-container h2 {
  font-size: 1.2rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: #3ea5dd;
}

.data-name {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3ea5dd;
  padding: 1rem;
}

.data-name h2 {
  font-size: 1rem;
  margin-bottom: 0;
}

.data-name .info-icon {
  width: 1rem;
  position: absolute;
  right: 2.5rem;
  cursor: pointer;
}

.card-section .card-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e6f2ff;
  padding: 1rem;
}

.total-crashes-title {
  background-color: #e6f2ff;
  padding: 0.5rem;
}

.total-crashes-title h2 {
  font-size: 1.3rem;
}

.card-section h3 {
  font-size: 1rem;
  margin: 0;
}

.card-section .info-icon {
  width: 1rem;
  position: absolute;
  right: 2.5rem;
  cursor: pointer;
}

.card-title h2,
.chart-date h2 {
  font-size: 1.2rem;
  color: #324e67;
}

.sticky-map-container {
  position: sticky;
  height: 80vh;
  top: 5rem;
}

.sticky-column {
  position: sticky;
  top: 10.3rem;
  height: 33.5rem;
}

#txtNumCrashes,
#txtNumCrashesView,
#txtNumJuly19Crashes,
#txtNumJuly21Crashes,
#txtNumCrashesAvg {
  font-size: 2rem;
  text-align: center;
}

/* Chart Styles */
#crashTypeChart,
#injuryTypeChart,
#weatherChart,
#roadConditionsChart {
  height: 20rem;
}

#historicalCrashesChart,
#dayOfWeekChart,
#timeOfDayChart {
  height: 15rem;
}

#weekdayCTTminutes,
#weekdayTDminutes,
#fridayCTTminutes,
#fridayTDminutes,
#sundayCTTminutes,
#sundayTDminutes {
  height: 20rem;
  
}

#crashSeverity01Chart,
#crashSeverity02Chart,
#crashSeverity03Chart,
#collisionType01Chart,
#collisionType02Chart,
#collisionType03Chart {
  height: 20rem;
}

#weekdayTVvehiclesHour,
#weekdayAvgHrVolPm,
#weekdayAvgHrVolAm,
#fridayAvgHrVolPm,
#fridayAvgHrVolAm,
#sundayAvgHrVolPm,
#sundayAvgHrVolAm,
#fridayTVvehiclesHour,
#sundayTVvehiclesHour {
  height: 25rem;
}

/* Map Styles */
#crashMap {
  padding: 0;
  margin: 0;
  background-color: #fff;
}

.legend-section-title {
  font-weight: bold;
}

.map-legend {
  position: absolute;
  bottom: 3.4rem;
  right: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  padding: 1rem;
  color: #333;
  padding-top: 0.5rem;
  border: solid 1px #ddd;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.btn-filter {
  position: absolute;
  bottom: 2rem;
  right: 1rem;
}

.btn-close-filter,
.btn-close-filter:active,
.btn-close-filter:focus,
.btn-close-filter:visited {
  margin-left: 1rem;
  margin-top: 0.5rem;
  background-color: #555;
  border-color: #555;
}

.btn-close-filter:hover {
  background-color: #777;
}

.btn-clear-filter,
.btn-clear-filter:active,
.btn-clear-filter:focus,
.btn-clear-filter:visited {
  margin-top: 0.5rem;
}

.btn-clear-filter:hover {
  background-color: #4988ca;
  border-color: #4988ca;
}

.map-query {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(3px);
  width: 250px;
  color: #333;
  z-index: 1;
  width: auto;
}

.map-query-no-expand {
  position: absolute;
  right: 0.5em;
  bottom: 1.5em;
}

.map-query h2 {
  font-size: 1.2rem;
  font-weight: bold;
}

button.multiselect {
  width: 157px;
}

.filter-form-align {
  justify-content: flex-end;
  align-items: baseline;
}

.legend-row {
  clear: both;
  padding-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legend-row img {
  float: left;
}

.legend-row .legend-text {
  width: 8rem;
  float: right;
  text-align: left;
}

.map-legend img {
  margin-right: 0.5rem;
}

.map-label {
  position: absolute;
  display: flex;
  background-color: #74bde9;
  padding: 0.3rem;
  padding-right: 1rem;
  padding-left: 2rem;
  color: #fff;
  top: 0.5rem;
  right: 0.2rem;
  width: auto;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 6% 100%);
}

.map-label h2 {
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  margin: 0;
  padding: 3px;
}

.map-label span.date,
.map-label span.map-note {
  display: inline-block;
  padding-left: 1rem;
  padding-bottom: 0.2rem;
  padding-right: 1rem;
}

.map-label span.location {
  background-color: #166db7;
  color: #fff;
  display: block;
  margin: 0;
  width: 100%;
  padding: 0.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

fieldset {
  border: 1px groove #ddd !important;
  padding: 0 1.1em 0.8em 1.1em !important;
  margin: 0 !important;
  -webkit-box-shadow: 0px 0px 0px 0px #000;
  box-shadow: 0px 0px 0px 0px #000;
}

legend {
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  width: inherit;
  padding: 0 10px;
  border-bottom: none;
}

#weekdayTVvehiclesHour circle,
#fridayTVvehiclesHour circle,
#sundayTVvehiclesHour circle {
  display: none !important;
}

.esri-ui-bottom-left {
  bottom: 7.5rem;
  left: 0;
}

#timeSlider {
  position: absolute;
  right: 1rem;
}

#timeSlider {
  background-color: rgba(255, 255, 255, 0.8);
}

.esri-time-slider__slider {
  background-color: transparent;
}

.esri-time-slider__slider .esri-slider {
  background-color: transparent;
}

.esri-time-slider {
  box-shadow: none;
  border: solid 1px #ddd;
  backdrop-filter: blur(3px);
}

.operations-slider .esri-time-slider__time-extent-date {
  display: none;
  position: absolute;

}

.site-title {
  font-size: 1.2rem;
  margin-left: 0.5rem;
  margin: 0;
}

.txt-total-crashes {
  font-size: 1.8rem;
}

#timeSlider {
  position: absolute;
  bottom: 1.5rem;
  width: 20rem;
  margin: 0 auto;
  right: 15rem;
}

.esri-time-slider__layout--compact .esri-time-slider__row:nth-child(3) {
  display: none;
}

.thin-gutter {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

@media (max-width: 1709px) {
  .card-title {
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}

/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/
/*WAYPOINTS (DON'T CHANGE CSS BELOW)*/
.os-animation {
  /*  margin: 0!important;*/
  max-width: 100%;
  opacity: 0;
}

.os-animation.animated {
  opacity: 1;
}

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.info-icon {
  width: 1rem;
  cursor: pointer;
}

iframe {
  margin: 6px 0 6px 0;
  background-color: white;
  border: none;
  display: flex;
  flex-direction: column;
}

.cpweek {
  display: flex;
  margin: 6px 0 6px 8px;
}

.percentchange {
  display: flex;
  align-items: center;
  border: rgb(255, 255, 255);
  border-style: solid;
  border-width: 5px;
  justify-content: center;
}

.iframe-container {
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  column-gap: 6px;
  padding-right: 5px;
}

.dashboard-title {
  background-color: #ff8e16;
  color: #fff;
  padding-top: 0.5rem;
  padding-bottom: 0.1rem;
}

.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #74bde9;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

.card-header p {
  margin: 0;
}

@media (min-width: 1200px) {
  .card-header {
    height: 4.1rem;
  }
}

.card-section-header {
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}


h2 {
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  margin: 0;
  padding: 3px;
}

h3 {
  color: #161616;
  font-size: 1.1rem;
  margin: 0;
  font-weight: bold;
}

.cs-column-container {
  background-color: #fff;
  padding: 0.5rem;
  text-align: center;
}

.navigation-clean {
  background: #fff;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #333;
  border-radius: 0;
  box-shadow: none;
  border: none;
  margin-bottom: 0;
}

#collisionMap,
#collisionMap2,
#collisionMap3 {
  height: 100%;
  background-color: #ffffff;
}

.map-label2 {
  position: absolute;
  bottom: 1.5rem;
  background-color: #ffc53b;
  padding: 0;
  color: #333;
  padding-top: 0.5rem;
}

.map-label2 h2 {
  font-size: 1.2rem;
  font-weight: bold;
  padding-left: 1rem;
}

.map-label2 span.date,
.map-label2 span.map-note {
  display: inline-block;
  padding-left: 1rem;
  padding-bottom: 0.2rem;
  padding-right: 1rem;
}

.map-label2 span.location {
  background-color: #166db7;
  color: #fff;
  display: block;
  margin: 0;
  width: 100%;
  padding: 0.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
/*WAYPOINTS (DON'T CHANGE CSS ABOVE)*/