:root {
  /* Basic Colors */
  --primary-text-color: #ededed;
  --secondary-text-color: #ffffff;
  --input-placeholder-color: #999999;
  --default-background-color: #ffffff;
  --default-light-foreground-color: #f9f9f9;

  --form-section-number-complete-color: #93c741;
  --form-section-tip-color: #666666;
  --form-section-tip-background-color: #fbee93;
  --form-section-button-background-color: #78cd3d;
  --form-section-button-border-color: #63b52d;
  --form-login-button-hover-color: #67c22a;

  --border-color: #c2c2c2;
  --box-shadow-color: #ebebeb;
  --text-area-focus-color: #0c0;

  --header-background-color: #1a1a1a;
  --header-text-color: #ffffff;
  --header-hover-text-color: #e3f1ff;

  --footer-background-color: #1a1a1a;
  --footer-text-color: #ffffff;

  --button-background-color: #ffffff;
  --button-text-color: #ffffff;
  --button-hover-background-color: #ffffff;
  --button-hover-text-color: #ffffff;

  --link-color: #26ade4;
  --link-hover-color: #24a0d1;
  --link-visited-color: #26ade4;

  /* Fonts */
  --main-font: sans-serif;

  /* Branding */
  --zc-primary-color: #333333;
  --zc-secondary-color: #e84b4b;

  --fl-primary-color: #004d30;
  --fl-secondary-color: #333333;

  --tcc-primary-color: #ffde59;
  --tcc-secondary-color: #000000;

  --nl-primary-color: #e0633b;
  --nl-secondary-color: #99c06f;

  --sc-primary-color: #00a0b8;
  --sc-secondary-color: #595959;
}

/* General Styles */
body, html {
  margin: 0px auto;
  height: 100%;
  font-family: var(--main-font);
  -webkit-print-color-adjust: exact;
}

body {
  background-image: url("../images/background.png") !important;
  background-size: cover;
  background-position: center;
  background-repeat: true;
  border-radius: 10px;
}

.clear {
  clear: both;
}

a {
  text-decoration: none;
}

a:link {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

a:visited {
  color: var(--link-visited-color);
}

.blue_span {
  color: var(--link-color);
}

/* Form Elements */
input[type="text"],
input[type="password"],
textarea,
select {
  font-family: arial;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  box-shadow: 1px 1px 4px var(--box-shadow-color);
  border-radius: 3px;
  padding: 7px;
  outline: none;
}

input[type="text"]:focus,
textarea:focus {
  border-color: var(--text-area-focus-color);
}

input::placeholder {
  color: var(--input-placeholder-color);
}

/* Header */
.header, .all_header {
  width: 100%;
  background-color: var(--zc-primary-color);
}

.header {
  height: 30px;
  width: 100%;
  background-color: #d11919;
}

.all_header {
  height: 30px;
  z-index: 1000;
}

.header_content, .all_header_content {
  z-index: 1000;
  position: relative;
  margin: 0 auto;
  width: 950px;
  font-size: 14px;
}

.header_logo, .all_header_logo, .all_header_item, .all_header_name {
  float: left;
  font-size: 10pt;
  color: var(--footer-text-color);
  line-height: 30px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}
.all_header_item_current {
  font-size: 10pt;
  color: var(--button-hover-text-color);
  line-height: 30px;
}

.header_logo {
  font-size: 14pt;
  height: 25px;
}

.all_header_logo {
  font-size: 10pt;
  font-weight: bold;
  line-height: 30px;
  padding-right: 20px;
}
.header_nav_item {
  position: relative;
  z-index: 1000;
  float: right;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #ffffff;
  padding-left: 15px;
  padding-right: 15px;
  cursor: pointer;
}
.header_nav_item a {
  pointer-events: auto;
}

/* Edit stats page */
.success_banner, .error_banner {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 75px;
  width: 100%;
  background-color: var(--form-section-button-background-color);
  line-height: 50px;
  text-align: center;
  font-size: 13pt;
  color: var(--footer-text-color);
  z-index: 2000;
}
.edit_stats_heading {
  width: 100%;
  font-size: 16pt;
  font-weight: bold;
  padding: 20px;
}
.parent_stats_half {
  display: flex
}
.stats_left_half, .stats_right_half {
  flex: 1;
  font-size: 15pt;
  font-weight: bold;
}
.event_item_details_item {
  padding-top: 15px;
  font-weight: normal;
}
.event_item_details_label {
  float: left;
  width: 255px;
  font-size: 11pt;
  color: var(--zc-primary-color);
}
.event_item_details_info {
  float: left;
  width: 280px;
  font-size: 11pt;
  line-height: 15pt;
  display: block;
  unicode-bidi: isolate;
}
.event_item_details_notes {
  width: 100%;
  height: 5rem;
}
.section_label {
  font-size: 15pt;
  font-weight: bold;
  padding-top: 10px;
}
.event_item_details_option_button {
  width: 100%;
  height: 35px;
  background-color: var(--form-section-button-background-color);
  font-size: 11pt;
  color: var(--footer-text-color);
  text-align: center;
  border: 0px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 10px;
  margin-right: 10px;
}

/* Footer */
.footer {
  width: 100%;
  color: var(--footer-background-color);
  font-size: 9pt;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.oxcart_footer {
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
  width: 100px;
  position: relative
}

/* Buttons */
.generic_button,
.generic_red_button,
.generic_green_button,
.generic_blue_button {
  height: 30px;
  width: 100%;
  font-size: 11pt;
  padding: 0 10 0 10px;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
}

.generic_button {
  color: var(--zc-primary-color) !important;
  background: var(--default-light-foreground-color);
  border: 1px solid #dddddd !important;
}

.generic_button:hover {
  background: #ededed;
}

.generic_red_button {
  color: #ffffff !important;
  background: #ff5151;
  border: 1px solid #a91414 !important;
}

.generic_red_button:hover {
  background: #d11919;
}

.generic_green_button {
  color: #ffffff !important;
  background: #97dd6e;
  border: 1px solid #77b057 !important;
}

.generic_green_button:hover {
  background: #78cd3d;
}

.generic_blue_button {
  color: #ffffff !important;
  background: #54bdf2;
  border: 1px solid #23a2d1 !important;
}

.generic_blue_button:hover {
  background: var(--link-hover-color);
}

/* Messages */
.yellow_message,
.red_message,
.green_message,
.blue_message,
.grey_message,
.event_item_details_approved_message,
.event_item_details_reverse_approved_message,
.event_item_details_denied_message,
.event_item_details_deleted_message {
  padding: 20px;
  box-sizing: border-box;
  border-radius: 3px;
  box-shadow: 1px 1px 1px 0px #e5e5e5;
}

.yellow_message {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border: 1px solid #faebcc;
}

.red_message {
  color: #a94442;
  background-color: #f2dede;
  border: 1px solid #ebccd1;
}

.green_message {
  color: #3c763d;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
}

.blue_message {
  color: #31708f;
  background-color: #d9edf7;
  border: 1px solid #bce8f1;
}

.grey_message {
  color: #4e4c48;
  background-color: #f5f5f5;
  border: 1px solid #dcd8ce;
}

/* Shoutouts */
.shoutout_photo_item {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border: 3px solid #d5d5d5;
  cursor: pointer;
}

.shoutout_photo_item:hover {
  border-color: #999999;
}

.shoutout_photo_item_selected {
  border-color: #79ce3e;
}

/* Page */
.page,
.page_full,
.page_left {
  margin: 0px auto;
  width: 950px;
  margin-top: 30px;
}
.page_left_content {
  width: 100%;
  background-color: #ffffff;
  padding: 20px;
  box-sizing: border-box;
  border: 1px #dfdfdf solid;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.page_left {
  float: left;
  width: 465px;
  margin-right: 10px;
}

.page_full {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.page_full_content, .stats_section {
  width: 100%;
  background-color: var(--default-background-color);
  padding: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.page_heading {
  width: 100%;
  font-size: 16pt;
  font-weight: bold;
  border-bottom: 1px solid var(--border-color);
  padding: 20px;
  box-sizing: border-box;
}

.page_heading_nav {
  float: right;
  font-size: 11pt;
  font-weight: normal;
}

.page_heading_nav_item {
  float: right;
  height: 30px;
  font-size: 10pt;
  background-color: var(--button-hover-background-color);
  line-height: 30px;
  margin-left: 7px;
  margin-top: -3px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 15px;
  cursor: pointer;
}

.page_heading_nav_item:hover {
  background-color: var(--header-hover-text-color);
}

.page_heading_nav_item_active {
  background-color: var(--link-color);
  color: var(--header-hover-text-color);
}

.page_options {
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  padding: 20px;
  box-sizing: border-box;
}

.page_full_tabs {
  width: 100%;
  margin-bottom: -1px;
}

.page_full_tab,
.page_full_tab_active {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-bottom: 0px;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
}

.page_full_tab {
  background-color: var(--header-background-color);
}

.page_full_tab:hover {
  background-color: var(--tag-hover);
}

.page_full_tab_active {
  background-color: var(--header-hover-text-color);
  font-weight: bold;
}
.date_filter_div {
  padding-top:10px;
  align-items: center;
}

.page_full_tabs_right {
  float: right;
  line-height: 40px;
  font-size: 15px;
}

/* Flex Containers */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

/* Reports and Charts */
.reports_graphs_holder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}

.reports_graph {
  display: block;
  unicode-bidi: isolate;
}

.reports_graphs_holder_grey_bg {
  background-color: var(--default-light-foreground-color);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 3px 0 rgb(60 66 87 / 10%), 0 3px 6px 0 rgb(0 0 0 / 0%);
  padding: 20px;
}

.reports_quick_stats_number {
  font-size: 24px;
  font-weight: 600;
  color: #1a1b25;
  padding-bottom: 5px;
}

.reports_quick_stats_label {
  font-size: 18px;
  color: #999999;
}
.location_item_top {
  font-size: 20px;
  font-weight: bold;
}
.location_item {
  font-size: 13px;
  font-weight: bold;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}
.service_row {
  float: right;
  font-size: 11pt;
  font-weight: normal;
}

/* Form Section */
.form {
  display: block;
  margin-top: 0em;
  unicode-bidi: isolate;
  margin-block-end: 1em;
}
.form_section {
  margin-bottom: 10px;
}

.form_section_number_complete {
  width: 50px;
  height: 40px;
  line-height: 40px;
  background-color: var(--form-section-number-complete-color);
  text-align: center;
  color: var(--default-background-color);
  font-size: 12pt;
  border-radius: 3px 0 0 3px;
}

.form_section_content {
  background-color: var(--default-background-color);
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

.form_section_input_large,
.form_section_input_medium,
.form_section_input_number {
  height: 40px;
  font-size: 12pt;
  padding: 10px;
  box-sizing: border-box;
}

.form_section_input_large {
  width: 100%;
}

.form_section_input_medium, .settings_input {
  width: 365px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.form_section_input_number {
  width: 250px;
  margin-right: 20px;
}

.form_section_textarea {
  height: 70px;
  width: 100%;
  font-size: 12pt;
  padding: 7px;
}

.form_section_dropdown {
  height: 40px;
  font-size: 12pt;
  padding: 7px;
  -webkit-appearance: menulist-button;
}

.form_section_tip {
  display: none;
  position: relative;
  width: 900px;
  background-color: var(--form-section-tip-background-color);
  color: var(--form-section-tip-color);
  padding: 20px;
  margin-left: 50px;
  margin-top: -3px;
  box-sizing: border-box;
}

.form_section_button {
  width: 100%;
  height: 50px;
  background-color: var(--form-section-button-background-color);
  color: var(--default-background-color);
  font-size: 13pt;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--form-section-button-border-color);
  border-radius: 3px;
  cursor: pointer;
  outline: none;
}
.settings_label {
  font-size: 11pt;
  font-weight: bold;
  margin-bottom: 5px;
}

.login_div {
  margin: 0px auto;
  width: 55%;
  background-color: var(--default-background-color);
  padding: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  -moz-box-shadow: 1px 1px 1px 0px var(--box-shadow-color);
  -webkit-box-shadow: 1px 1px 1px 0pxvar(--box-shadow-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.login_div_content {
  width: 100%;
}
.login_div_title {
  width: 100%;
  font-size: 20pt;
  font-weight: bold;
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px #f9f9f9 solid;
}


.login_div_input {
  width: 100%;
  height: 45px;
  font-size: 11pt;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 15px;
  box-sizing: border-box;
  border: 1px var(--border-color) solid;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  outline: none;
}
.login_div_button, .settings_button {
  width: 100%;
  height: 45px;
  background-color: var(--form-section-button-background-color);
  color: var(--footer-text-color);
  font-size: 11pt;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  border: 1px var(--form-section-button-border-color) solid;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
}

.two_charts {
  display: flex;
  flex: 1 0 45%;
  max-width: 100%;
}

/* popups */
.popup_overlay {
  display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--zc-primary-color);
    opacity: 0.8;
    z-index: 100000;
}
.popup_content {
  display: none;
  position: fixed;
  top: 10%;
  left: 50%;
  width: 450px;
  margin-left: -225px;
  background-color: var(--default-background-color);
  box-sizing: border-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  z-index: 1000000;
}
.popup_heading {
  width: 100%;
    font-size: 14pt;
    font-weight: bold;
    border-bottom: 1px var(--border-color) solid;
    padding: 20px;
    box-sizing: border-box;
}
.popup_close {
  float: right;
  font-size: 11pt;
  font-weight: normal;
  color: var(--zc-primary-color);
  cursor: pointer;
}
.popup_input {
  width: 100%;
    height: 35px;
    font-size: 11pt;
    background-color: var(--default-background-color);
    padding-left: 7px;
    padding-right: 7px;
    box-sizing: border-box;
    border: 1px var(--border-color) solid;
}
.popup_button {
  width: 100%;
  height: 35px;
  font-size: 11pt;
  background-color: var(--form-section-button-background-color);
  color: var(--footer-text-color);
  padding-left: 7px;
  padding-right: 7px;
  margin-top: 10px;
  box-sizing: border-box;
  border: 0px;
  cursor: pointer;
}

/* Media Queries */
@media (max-width: 600px) {
  .page,
  .footer,
  .stats_section,
  .event_item_details_content {
    margin: 0px auto;
    width: 950px;
    margin-top: 30px;
  }

  .all_header_content,{
    text-align: center;
  }

  .stats_blob {
    width: 100%;
  }
}