.gm-style-iw,
.gm-style-iw div {
  /* Google maps seems to use an inline style on div with class gm-style-iw to set the maximum height of their
     "info window" (the window that pops up when user hovers over a map marker) to a value that is smaller than
     the height of the info we want to display.  So override style to set max-height to none.  Note: need to mark
     the stye as important to override the inline style. */
  max-height: none !important;
}


/*html, body {
  height: 100%;
}

#wrapper {
  min-height:100%;
  position:relative;
}*/

.main_content_area {
  /*padding-bottom: 6em;*/    /* height of footer */
}

/*.client_footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 6em;
}*/

.sm_client_body {
  margin-top: 8.5em;      /* adjustment for fixed header */
  /*margin-top: 7.3em;*/  /* value prior to adding feature level to header */
}

.help_trigger {
  cursor: help;
}

.has-error .form-control,
.has-error textarea {
  border-color: #a94442;
}

.checklist input[type=checkbox]:checked + label {
  font-weight: bold;
}

.lineheight-normal {
  line-height: normal;
}

.table-nostriped tbody tr:nth-of-type(odd) {
  background-color:transparent;
}

td.table-width-20 {
  width: 20%;
}

td.td-min-width {
  width: 1%;
  white-space: nowrap;
}

.graybackground {
  background-color:#d9d9d9;
}

.fontweight-semi-bold {
  font-weight: 600;
}

.sm_nowrap {
  white-space: nowrap;
}

textarea.no-resize {
  resize: none;
}

/*.yes-no-toggle {
  color: black;
}
*/
label.toggle-disabled {
  cursor: not-allowed;
}

label.toggle-disabled:hover,
label.toggle-disabled:active {
  background-color: white;
  color: #6c757d;
}


/*.border-width-thick {
  border-width: thick;
}*/

.hr-dark {
  border: none;
  height: .1em;
  background-color: black;
}

.sm_required:after {
  color:red;
  content: " *";
}

.sm_datepicker_control_group input.datepicker:read-only{
  background-color: white;
}

.sm_client_subnavbar {
  /*background-color: darkblue;*/
  /*background-color: #00004d;*/
}

.sm_client_subnavbar .navbar-toggler {
  border-color: white;
  color: white;
  padding: .4em;
}

.sm_client_subnavbar .nav-link {
  color: white;
  padding-left: .5em;
  padding-top: 0;
}

.sm_client_subnavbar .nav-link:hover {
  background-color: white;
  color: black;
}

.sm_client_subnavbar .dropdown-item {
  color: white;
  padding-left: .5em;
}

.sm_client_subnavbar .dropdown-item:hover {
  background-color: white;
  color: black;
}

.dropdown-menu.bg-dark .dropdown-item {
  background-color: #343a40;  /* color of bootstrap bg-dark */
  color: white;
}

.dropdown-menu.bg-dark .dropdown-item:hover {
  background-color: white;
  color: black;
}

.sm_calendar_table {
  /* necessary to allow us to easily put a different color border around current day cell */
  border-collapse: separate;
  border-spacing: 0;
}

.sm_calendar_table thead th {
  background-color: #003300;        /* shade of DarkGreen */
  border-color: #003300;            /* should match background-color */
  color: white;
}

.sm_calendar_table tr.daysofweek th {
  width: 14%;
  text-align: center;
}

.sm_calendar_table td {
  min-height: 10em;
}

.sm_calendar_table td p {
  margin-bottom: 0;
  line-height: normal;
}

.sm_report_table tr th:first-child,
.sm_report_table tr td:first-child {
  padding-left: .75em;
}

.sm_report_table tr th:last-child,
.sm_report_table tr td:last-child {
  padding-right: .75em;
}

.sm_dashboard_card {
  /*margin-top: 1em;
  padding-top: 1em;
  padding-bottom: 1em;*/

  /*height: 100%;*/
  /*height: 95% */

  margin-bottom: 1em;
}

.sm_dashboard_card .card-header {
  text-align: center;
  font-weight: bold;
}

.sm_client_banner {
  /*background-color: #6b7a8f;*/        /* "blueberry" (kind of a steel blue/gray color) */
  /*color: white;*/
  text-align: center;
}

.sm_simple_page_title {
  text-align: center;
  font-weight: bold;
}

.sm_client_area_card {
  margin-bottom: 1.5em;
  /*border: 1px solid black;*/
}

.sm_client_area_card .card-header {
  font-weight: bold;
  padding-top: .5em;
  padding-bottom: .5em;
  vertical-align: middle;
}

.sm_client_area_card .card-header .btn-link {
  font-weight: bold;
  text-decoration: none;
  color: black;
}

.sm_client_area_card .sm_edit_button {
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.sm_event_job_card {
  margin-top: 1em;
}

.sm_event_job_card .list-group-item {
  padding: .25em .5em;
}

.sm_form fieldset {
  padding: 1em;
}

.sm_form legend {
  width: auto;
  font-size: inherit;
  font-weight: bold;
  padding-left: 1em;
  padding-right: 1em;
  margin-bottom: 0;
}

form.sm_form label {
  font-weight: bold;
  margin-bottom: .25em;
}

form.sm_form .form-check label {
  /* label's for checkboxes should not be bolded and should have no bottom margin */
  font-weight: normal;
  margin-bottom: 0em;
}

form.sm_view_only label {
  font-weight: bold;
  margin-bottom: 0em;
}

form.sm_view_only input,
form.sm_view_only textarea {
  padding-top: 0em;
  
  /* experimenting */
  /*
  padding: 0em;
  background-color: transparent !important;
  border: none;
  height: auto;
  */
}

form.sm_view_only .form-group {
  margin-bottom: .5em;
}

.form-group textarea {
  /* Match bootstrap input control styling */
  border: 1px solid #ced4da;
  border-radius: .25rem;
  padding: .375rem .75rem;
}

.db_text_display {
 /* make look like a readonly input field */
 width: 100%;
 background-color: #e9ecef;
 padding-top: 0em;
 border: 1px solid #ced4da;
 border-radius: .25rem;
 min-height: 2em;
 padding: .5em;
}

.db_responsive_table_bordered {
  border: 1px solid lightgray;
}

@media (max-width: 991.98px) {
  .db_responsive_table {
    border: none;
    border-collapse: separate;
    /*border-spacing: 0em 1em;*/
  }

  .db_responsive_table > thead {
    display: none;
  }

  .db_responsive_table > tbody > tr {
    display: table;
    padding: 1em;
    width: 100%;
  }

  .db_responsive_table > tbody > tr > td {
    display: table-row;
    border: none;
    width: 100%;
  }

  .db_responsive_table td.hide_on_stack {
    display: none;
  }

  .db_responsive_table .nested_small_table {
    width: 20%;
  }

  .sm_edit_menu_navbutton {
    width: 100%;
    display:block;
    margin-bottom: .75em;
  }

  .transfer_button {
    width: 100%;
    display: block
  }

}

.sub_menu_nav .nav-link {
  color: black;
}

.sub_menu_nav .nav-link:hover {
  color: gray;
}

.sub_menu_nav .nav-link.active {
  background-color: silver;
}

.sticky-top {
  background: white;
}

/*.fixed_button_area {
  position: fixed;
  bottom:0px;
  left:0px;
  z-index: 3;
}*/

@media (max-width:575.98px) {
  .btn-block-xs {
    width: 100%;
    display:block;
  }

  .full-width-xs {
    width: 100% !important;
  }

}


.event_roster_table td {
  width: 15%;
  vertical-align: middle;
  padding-bottom: 0;
}

.event_roster_table td.smallcol {
  width: 10%
}

.event_roster_table td.mediumcol {
  width: 20%;
}

.event_roster_table td.largecol {
  width: 50%;
}

.roster_summary_table td {
  vertical-align: middle;
  padding-top: 0;
  padding-bottom: 0;
}

.roster_summary_table td.statuscol {
  width: 15%;
}

.roster_summary_table td.gamecol {
  width: 35%;
}

.roster_summary_table td.datecol {
  width: 25%;
}

#event_notifications_table {
  border: none;
}

#event_notifications_table th {
  padding: 0em;
  padding-right: 1em;
}

#event_notifications_table td {
  padding: 0px;
}


#event_display_area {
  margin-top: 1em;
}

/*
#display_mode_toggle_group label.active {
  background-color: green;
}
*/

#timeframe_toggle_group label.active {
  /*background-color: green;*/
  background-color: #007bff;    /* matching bootstrap primary color */
  border-color: #007bff;        /* matching bootstrap primary color */
}

#timeframe_toggle_group label.active:hover {
  background-color: #0069d9;   /* matching bootstrap primary hover color */
  border-color: #0062cc;       /* matching bootstrap primary hover color */
}


#filter_staff_modal .custom-checkbox label,
#staff_advanced_search_modal .custom-checkbox label {
  font-weight: normal;
}

#dsm_booked_staff_list {
  max-height: 25em;
  overflow-y:auto;
}

/*************************************************************************************************/
/* Style for scrolling modal body                                                                */
/*************************************************************************************************/
.sm-scroll-modal-body {
  max-height:65vh;
  overflow-y: auto;
}

/*************************************************************************************************/
/* Pay Report Styles.                                                                            */
/*************************************************************************************************/
.pay-report-table .amt-col {
  width: 6%;
}

.pay-report-table .name-col {
  width: 10%;
}

.pay-report-table .job-col {
  width: 10%;
}

.pay-report-table .date-col {
  width: 9%;
}

/*************************************************************************************************/
/* Pay Report Setup Styles.                                                                      */
/*************************************************************************************************/
.slot-level-pay-adjustment {
  font-weight: bold;
  /*font-weight: 800;*/   /* "very" bold */
  /*border-width: thick;*/
}

/*************************************************************************************************/
/* Event Ratings Styles.                                                                         */
/*************************************************************************************************/
#event_ratings_detail_table .ratings_col {
  width: 80%;
}

#event_ratings_detail_table .button_col {
  width: 10%;
}

/*************************************************************************************************/
/* Rating Stars control                                                                          */
/*************************************************************************************************/
.sm_rating_stars input[type=radio] {
  display: none;    /* Hide the actual radio button so only the "star" widget (which is the label) is shown */
  margin-right: 0;
}

.sm_rating_stars .form-check-inline {
  margin-right: 0;
}

.sm_rating_stars .form-check:hover {
  cursor: pointer;
}

/*************************************************************************************************/
/* Customized Bootstrap text-warning color for better visibility on light backgrounds.           */
/*************************************************************************************************/
.text-warning-sm {
    /*color: #ff981a !important;*/
    color: #e67e00 !important;
}

a.text-warning-sm:hover, a.text-warning-sm:focus {
    /*color: #e67e00 !important;*/
    color: #b36200 !important;
}

.bg-warning-sm {
    background-color: #e67e00 !important;
}

a.bg-warning-sm:hover, a.bg-warning-sm:focus,
button.bg-warning-sm:hover,
button.bg-warning-sm:focus {
    background-color: #b36200 !important;
}


/*************************************************************************************************/
/* Message (email or sms) Logs (Utilities section) styles                                        */
/*************************************************************************************************/
.message-log-table .message-col {
  width: 15%;
}

/*************************************************************************************************/
/* Messaging settings (Utilities section) styles                                                 */
/*************************************************************************************************/

#messaging_settings_table .label_col {
  font-weight: 600;
  white-space: nowrap;
}

@media (min-width: 992px) {
  #messaging_settings_table td, th {
    padding: .5em;
  }

  /* For larger screens and larger, center the toggle control columns  */
  #messaging_settings_table .toggle_col {
    text-align: center;
  }
}

@media (max-width: 991.98px) {
  #messaging_settings_table tr {
    padding: 0;
    padding-bottom: 1em;
  }

  #messaging_settings_table tr.section_header {
    padding: 0;
  }

}

/*************************************************************************************************/
/* Staff Messaging settings (Utilities section) styles                                           */
/*************************************************************************************************/
@media (min-width: 992px) {
  /* For larger screens and larger, center the toggle control columns  */
  #staff_messaging_settings_table .toggle_col {
    text-align: center;
  }
}

@media (max-width: 991.98px) {
  #staff_messaging_settings_table > tbody > tr {
    padding-left: 0;    /* overriding the tr padding for .db_responsive_table, as we don't want the left padding here for this table */
  }

}


/*************************************************************************************************/
/* Event Staff Ratings (Utilities section) styles                                                */
/*************************************************************************************************/
@media (min-width: 992px) {
  /* For larger screens and larger, we don't want the action buttons column to wrap */
  #ratings_questions_table td.action_buttons_col {
    white-space: nowrap;
  }
}

/*************************************************************************************************/
/*                                     PROGRESS TRACKER STYLES                                   */
/*************************************************************************************************/
.progress_tracker_area {
  padding-top: 2em;
  padding-bottom: 5em;
  /*padding-bottom: 60px;*/
}

ol.progress_tracker[data-steps="2"] li { width: 49%; }
ol.progress_tracker[data-steps="3"] li { width: 33%; }
ol.progress_tracker[data-steps="4"] li { width: 24%; }
ol.progress_tracker[data-steps="5"] li { width: 19%; }
ol.progress_tracker[data-steps="6"] li { width: 16%; }
ol.progress_tracker[data-steps="7"] li { width: 14%; }
ol.progress_tracker[data-steps="8"] li { width: 12%; }
ol.progress_tracker[data-steps="9"] li { width: 11%; }

.progress_tracker {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.progress_tracker li {
  float: left;
  text-align: center;
  position: relative;
}

.progress_tracker .name {
  display: block;
  vertical-align: bottom;
  text-align: center;
  margin-bottom: 1em;
  color: black;
  opacity: 0.3;
}

.progress_tracker .step {
  color: black;
  border: 3px solid #eef2f4;
  background-color: #eef2f4;
  border-radius: 50%;
  line-height: 1.2;
  width: 2em;
  height: 2em;
  display: inline-block;
  z-index: 0;
}

.progress_tracker .step span {
    opacity: 0.3;
    font-size: smaller;
    font-weight: bold;
}

.progress_tracker .active .name,
.progress_tracker .active .step span {
  opacity: 1;
}

.progress_tracker .step:before {
    content: "";
    display: block;
    background-color: #eef2f4;
    height: 0.4em;
    width: 50%;
    position: absolute;
    bottom: 3.5em;
    left: 0;
    z-index: -1;
}

.progress_tracker .step:after {
      content: "";
      display: block;
      background-color: #eef2f4;
      height: 0.4em;
      width: 50%;
      position: absolute;
      bottom: 3.5em;
      right: 0;
      z-index: -1;
}

.progress_tracker li.first_step_item .step:before {
  display: none;
}

.progress_tracker li.last_step_item .step:after {
  display: none;
}

.progress_tracker .done .step,
.progress_tracker .done .step:before,
.progress_tracker .done .step:after,
.progress_tracker .active .step,
.progress_tracker .active .step:before {
    color: white;
    background-color: #0D5D90;
}

.progress_tracker .done .step,
.progress_tracker .active .step {
    border: 3px solid #0D5D90;
}

.progress_tracker .done .step,
.progress_tracker .done .name {
  cursor: pointer;
}