/*  custom style sheet Project 1 - Cleveland Live Music*/
/*  Brian Macauley, Jason Way, Stacie Knisley, Rhonda Johnson*/

body { background: linear-gradient( to right, black, rgb(97, 62, 78)) }

.containerTop {
      position: relative;
      text-align: center;
      color: white;
  }

.centered {
      position: static;
      bottom: 4px;
      right: 16px;
      font-weight: 700;
}

#aboutCLM {
      text-align: right; 
      position: relative; 
}
  
.top-left {
      position: absolute;
      top: 8px;
      left: 16px;
  }

#selected-date,
#hidden-val {
  font-weight: bold;
  color: #e8e8e8;
}

td,
.colTitle{
      color: white;
      text-decoration-color: white;
}

.bootstrap-datetimepicker-widget table td span {
  display: none!important;
}

.bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover, .bootstrap-datetimepicker-widget .picker-switch:hover, .glyphicon-chevron-right:hover {
    background: #eee;
    cursor: pointer;
    color: #333333!important;
}

thead { color:#ffffff; }

.bootstrap-datetimepicker-widget table th.disabled, .bootstrap-datetimepicker-widget table th.disabled:hover
{color:#white;}

.datepicker.datepicker-inline {
      border: 5px solid #eee;
      display: inline-block;
      position: relative;
    }

/* add a border to calendar/datepicker*/
#datetimepicker{
      border: 5px white;
      outline: 3px solid white;
/*      height: 300px;*/
      /*width: 300px;*/
      padding: 10px;
}

.bootstrap-datetimepicker-widget{
      background-color: #3c3e43;
      border: 5px white;
}

.modal a.close-modal {
    position: absolute;
    z-index: 99999999;
    top: 16.5px;
    right: 16.5px;
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  /*  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR…o8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==);
*/}

/* for the map*/
canvas.mapboxgl-canvas{
      width: 100px;
      height: 100px;
}

.marker {
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}


#map,
.venue-map {
  position: relative;
  top: 0;
  bottom: 0;
  width: 50%;
}

div.venue-map.mapboxgl-map {
  width: 200px;
  height: 200px;

}


/*div#map.mapboxgl-map {
  width: 300px;
  height: 400px;

}*/

#bigmap.mapboxgl-map {
  width: 100%;
  height: 400px;
}



/* No More Tables Table */
  @media only screen and (max-width: 800px) {
    
    /* Force table to not be like tables anymore */
  #no-more-tables table, 
  #no-more-tables thead, 
  #no-more-tables tbody, 
  #no-more-tables th, 
  #no-more-tables td, 
  #no-more-tables tr { 
    display: block; 
    max-width: none!important;
  }
 
  /* Hide table headers (but not display: none;, for accessibility) */
  #no-more-tables thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
 
  #no-more-tables tr { border: 1px solid #ccc; }
 
  #no-more-tables td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 36%; 
    white-space: normal;
    text-align:left;
    
  }
 
  #no-more-tables td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
    color:#ffffff;
  }
 
  /*
  Label the data
  */
  #no-more-tables td:before { content: attr(data-title); }