/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 
 #fynnscheduletable {
   box-shadow: 2px 2px 4px 0 #00000080;
   border-radius: 15px;
   border-collapse: collapse;
   overflow: hidden;
   padding: 100px;
 }

select {
   display: block;
   border-radius: 15px !important;
}

input {
   display: block;
   border-radius: 15px !important;
}

/* The Modal (background) */
.modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   left: 0;
   top: 50px;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }

 /* Modal Content/Box */
 .detailModalContent {
   position: relative;
   background-color: #fefefe;
   margin: 15% auto; /* 15% from the top and centered */
   padding: 20px;
   border: 1px solid #888;
   width: 80%; /* Could be more or less, depending on screen size */
   box-shadow: 2px 2px 4px 0 #00000080;
   border-radius: 15px;
 }
 
 /* The Close Button */
 .close {
   color: #aaa;
   
   position: absolute;
   top: 20px;
   right: 20px;
   font-size: 28px;
   font-weight: bold;
 }
 
 .close:hover,
 .close:focus {
   color: black;
   text-decoration: none;
   cursor: pointer;
 }

/* Shrink-wrap the date/time column */
table.dataTable th.event-date-col,
table.dataTable td.event-date-col {
  white-space: nowrap;
  width: 1px !important;   /* forces column as narrow as content allows */
}

/* optional: reduce padding on small screens to gain space */
@media (max-width: 900px) {
  table.dataTable td, table.dataTable th {
    padding: 6px 8px;
  }
}

/* === Desktop / wide screens === */
@media (min-width: 769px) {
  table.dataTable th.event-name-col,
  table.dataTable td.event-name-col  { width: 35% !important; }

  table.dataTable th.caller-col,
  table.dataTable td.caller-col      { width: 20% !important; }

  table.dataTable th.dance-level-col,
  table.dataTable td.dance-level-col { width: 15% !important; }

  table.dataTable th.room-col,
  table.dataTable td.room-col        { width: 15% !important; }
}

/* === Mobile portrait === */
@media (max-width: 768px) and (orientation: portrait) {
  table.dataTable th.event-name-col,
  table.dataTable td.event-name-col  { width: 50% !important; }

  table.dataTable th.caller-col,
  table.dataTable td.caller-col      { width: 25% !important; }

  table.dataTable th.dance-level-col,
  table.dataTable td.dance-level-col { width: 15% !important; }

  table.dataTable th.room-col,
  table.dataTable td.room-col        { width: 10% !important; }
}

/* === Mobile landscape === */
@media (max-width: 768px) and (orientation: landscape) {
  table.dataTable th.event-name-col,
  table.dataTable td.event-name-col  { width: 40% !important; }

  table.dataTable th.caller-col,
  table.dataTable td.caller-col      { width: 22% !important; }

  table.dataTable th.dance-level-col,
  table.dataTable td.dance-level-col { width: 18% !important; }

  table.dataTable th.room-col,
  table.dataTable td.room-col        { width: 20% !important; }
}