/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */
.backyell {background-color:yellow; }
.greyedout {background-color: #F6F0F0;} /*pale grey*/
.bold {font-weight:bold; }
.hide {display:none; }
h1 {width:100%; }
#seccheck {
  display:grid;
  grid-template-columns: 1fr 4fr;
  grid-row-gap: 10px;
  width: 40%;
  margin:auto;
}
#seccheck h3, #seccheck h4, #seccheck button {
  grid-column: 1 / span 2;
} 
#cookiecheck {grid-column: 1 / span 2 }

#form1 button {
    width: 30%;
    margin-left: 35%;
    margin-right: 35%;
}
#confmsg, #div25 {
  display:none; 
  position:absolute;
  top: 10%;
  left:10%;
  width:80%;
  background-color:lightgray;
  padding:2%;
  border-radius:10px;
}
#confmsg button {
  position:absolute;
  top: 30%;
  right: 5%;
}
#div25 {text-align:center;}
#chkpanel {
  display:none; 
  position:absolute;
  top: 10%;
  left:20%;
  width:60%;
  background-color:lightgray;
  border-radius:10px;
  grid-template-columns: 4fr 1fr 2fr 2fr;
  grid-row-gap: 10px;
  cursor:move;
}
#chkpanel input {width: 100%;}
#chkpanel label {text-align:center; }
#chkdetails {
  grid-column: 1 / span 4;
  display:grid;
  grid-template-columns: 4fr 2fr 2fr 1fr;
  grid-row-gap: 10px;
  width: 40%;
  margin:auto;
 }
#contactpanel {
  display:none;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 3px;
  width: 60%;
  background-color: lightgrey;
  border-radius:10px;
  padding:2px;
 }
#contactpanel div {
  cursor:pointer; 
  text-align:center;
}
#contactpanel div:hover {background-color:white; }
#contacthdr {
  grid-column: 1 / span 3; 
}

#contactpanel h4 {margin-top: -3%; margin-bottom: -2%;}
#contactinfo {
  display:none;
  width: 30%;
  background-color: lightblue;
  border-radius:10px;
  padding:2px;
 }

#hdr {font-size:4.5vw; }
#buttongrid {
  width: 100%;
  margin:auto;  
  margin-top:-2%;
  display:grid;
  grid-template-columns: repeat(5,1fr);
  grid-row-gap: 10px;
 }
#buttongrid button {
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
}

#griddiv1 {
  display:grid;
  grid-template-columns: 50% 50%;
  grid-row-gap: 10px;
  width: 90%;
  margin:auto;  
}
div.ui-datepicker{
 font-size:1.7vw;
}
#timesdiv {display:none; }
#time1 {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 5px;
  width: 60%;
  margin:auto;  
  background-color:lightgray;
  border-radius:10px;
}
#time1 h4 {
  grid-column: 1 / span 2;
  text-align:center;
 }
#time1 div {
  font-size: 1.7vw;
}
#time1 div:nth-child(even) {
  text-align:center;
  cursor:pointer;
  color:blue;
 }
#time1 div:nth-child(odd) {text-align:left; } 
 
#griddiv2 {
  display: grid; 
  grid-template-columns: repeat(3, 10% 20%);
  grid-row-gap: 10px;
  width: 90%;
  margin:auto;
}
#form1 label {text-align:right; }
.mand::after {
   content: " *";
   color:black;
   font-size:1.5em;
}
@media (max-width:5000px) {
    body::after {
       content: "large";
       font-size:0;
     }
}
@media (max-width:1000px) {
    div.ui-datepicker{
      font-size:2.5vw;
    }
      #seccheck {
        grid-template-columns: 1fr;
        grid-row-gap: 10px;
        width: 60%;
        margin:auto;
      }
      #seccheck h3, #seccheck h4, #seccheck button {
        grid-column: 1 / span 1;
      } 
      #cookiecheck {grid-column: 1 / span 1 }
    #chkpanel {
      left:5%;
      width:90%;    
    }
    #cal1 {margin:auto; }
    #time1 {
      width: 90%;    
    }
    #time1 div {
      font-size:2.5vw;
    }
    #confmsg {top:12%}
    #griddiv2 {
      grid-template-columns: 30% 70%;
      grid-row-gap: 5px;
    }      	
}
@media (max-width:480px) {
    body::after {
       content: 'small';
       font-size:0;
     }
      #seccheck {
        width: 90%;
      }
    #chkpanel {
      left:10%;
      width:80%; 
      grid-template-columns: 1fr;  
      grid-template-rows: auto; 
    }
    #chkpanel > label, #chkpanel > input, #chkpanel > button {
       display:block;
       width:60%;
       margin-left:20%;
     }
    #chkpanel input {
       width: 57%;
    } 
    #chkdetails {
       grid-column: 1;
       width:80%;
       text-align:center;
    }
    #contactpanel {
      grid-template-columns: repeat(2, 1fr);
      width: 90%;
     }
    #contacthdr {grid-column: 1 / span 2; }
    #contactinfo {
      width: 70%;
    }
    #buttongrid {
       width: 95%;
       margin:auto;  
    }
    #buttongrid button {
          width: 100%;
          margin-left:0;
          margin-right:0;
          padding:0;
     } 
    #griddiv1 {
      grid-template-columns: 100%;
    }
    div.ui-datepicker{
      font-size:4vw;
    }
    #cal1 {margin:auto; }
    #time1 {
      width: 90%;    
    }
    #time1 div {
      font-size:4vw;
    }
    #griddiv2 {
      width: 100%;
    }
   
}