@charset "utf-8";
/* Autoprefixed 020223 */
/* Autoprefixed 141124 */

#folliesDateGrid {
   display: grid;
   grid-template-areas:
      "heading"
      "fingask"
      "scotland"
      "england"
      "request";
   grid-template-rows: auto;
   grid-template-columns: auto;
   row-gap: 12px;
   margin: 12px 1% 0 1%;
}

#datesHeading {
   grid-area: heading;
   text-align: center;
}

.headingBox {
   background-image: radial-gradient(#dbe3df, #b9c9c1);
   border-radius: 6px 6px 0 0;
   padding: 4px;
}

.dateGridSize {
   width: 96%;
   padding: 6px 0 12px 0;
}

#datesFingask {
   grid-area: fingask;
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   text-align: center;
}

#datesScotland {
   grid-area: scotland;
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   text-align: center;
}

#datesEngland {
   grid-area: england;
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   text-align: center;
}

.finShowWrapGrid {
   display: grid;
   grid-template-areas: "finDate finDrinks finShowtime finBook";
   /* grid-template-columns: repeat(4, 1fr); */
   /* grid-template-columns: 1.5fr 1.5fr 1.5fr 2fr; replaced 151124 */
   grid-template-columns: 1.6fr 1.3fr 1.3fr 1.6fr;
   align-items: center; /* added 141124 */
   /* place-items: initial; */
   line-height: 2.3;
}

.finDate {
   grid-area: finDate;
   height: 100%;
   align-content: center;
}
.finDrinks {
   grid-area: finDrinks;
}
.finShowtime {
   grid-area: finShowtime;
}

.finTicketBook {
   grid-area: finBook;
}

.otherShowWrapGrid {
   display: grid;
   grid-template-areas: "otherDate otherVenue otherTicket";
   grid-template-columns: 1fr 2fr 1fr;
   align-items: center;
   place-items: initial;
   line-height: 2.3;
}

.otherDate {
   grid-area: otherDate;
}
.otherVenue {
   grid-area: otherVenue;
}
.otherTicketInfo {
   grid-area: otherTicket;
}

#ticketRequest {
   grid-area: request;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 24px 0 0 0;
}

.ticketVariant {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 0 1em;
   font-size: 0.9rem;
   margin: 0.5em 0;
   align-content: center;
}

.ticketVariant input {
   text-align: center;
}



.colHead {
   text-align: center;
   background-color: #a5b8af;
   color: whitesmoke;
}

.showInfo {
   text-align: left;
   padding: 0 0 0 12px;
}

.showColour {
   background-color: #dbe3df;
}

.showDivider {
   border-bottom: 1px dotted #a5b8af;
}

.noteBox {
   text-align: center;
   background-color: #dbe3df;
   border-radius: 0 0 6px 6px;
   padding: 4px 12px;
}

.boxPara {
   margin: 0 3%;
   padding: 6px;
   font-size: 1rem;
}

.formFlex {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
   width: 80%;
   margin: 12px;
}

.formFlex input[type="text"] {
   padding: 6px;
   font-size: 1em;
   margin: 3px 0;
}

.formFlex input[type="submit"] {
   padding: 4px;
}

/* Style inputs, select elements and textareas */
.boxPara input[type="text"],
select,
textarea {
   width: 60%;
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
   resize: vertical;
}

@media only screen and (max-width: 900px) {
   .dateGridSize {
      width: 100%;
   }
}

@media only screen and (max-width: 600px) {
   #folliesDateGrid {
      margin: 12px 0 0 0;
   }
   .headingBox {
      border-radius: 0;
   }
   .noteBox {
      border-radius: 0;
   }
   .showWrapGrid {
      grid-template-columns: 2fr 1fr 1fr 2fr;
   }
   .otherShowWrapGrid {
      line-height: 2;
   }
   .boxPara input[type="text"],
   select,
   textarea {
      width: 90%;
      padding: 6px;
   }
   .boxPara {
      font-size: 0.8rem;
   }
}