:root {
  --white:      #F5F5F5;  --black:      #121212;  --redRAW:     #B8202D;
  --redMNR:     #D33A48;  --orangeSS:   #f57c00;  --orangeCOTC: #FFBE7E;
  --yellowPPV:  #FFFF00;  --yellowNXT:  #FFC71C;  --greenECW:   #50C878; 
  --greenWC:    #C1FF7D;  --greenTDR:   #7DFFC2;  --blueSD:     #00BBEC;
  --blueSNME:   #6392cf;  --blueNTR:    #7DBBFF;  --blueFNS:    #479dea; 
  --blue:       #006AC9;  --purpleWW:   #c592f7;  --pinkWW:     #FF7DDD;
  --greyDARK:   #404040;  --greyMED:    #606060;  --greyLGT:    #808080;
  --greyBRT:    #ADB5BD;  --blueHDR:    #275596;  --orangePPV:  #f57c00;
  --beigeWC:    #eca58f;  --purple205:  #b06af4;  --redROH:     #cc2229;
  --redIMP:     #da0109;  --orangeNWA:  #feb71a;  --greySTR:    #2c3034;
  --greyHOV:    #323539;  --redDARK:    #2F0002;
}

* { padding: 0; margin: 0; box-sizing: border-box; }

html {font-family: Arial; font-size: 100%;}

table.reports {font-family: "Times New Roman", Times, serif; font-size: 0.9em; width: 90%; }

img       {border: hidden;}

a:hover   { text-decoration: none; color: var(--redRAW); }

a.edit:visited {text-decoration: none;}
a.edit:active  {text-decoration: none;}
a.edit:link    {text-decoration: none;}
a.edit:hover   {text-decoration: underline; color: var(--redRAW);}

table a:visited, table a:active, table a:link { color: inherit; font-weight: bold; text-decoration: none; }
table a:hover { text-decoration: underline; }

textarea    {font-size: 14px; font-family: Arial;}

nav.header { color: var(--white); }

b.abc       {line-height: 1; font-size: 10px;}

input, select { font-size: 1em; font-family: Arial; font-weight: bold;
                text-align: center; }
option     {font-size: 1.125em; font-family: Arial;}
option.bio {font-size: 1.125em; font-family: Arial;}

ddb        {font-size: 0.5625em; font-weight: normal; color: green;}
em         {font-size: 0.6250em; font-weight: normal;}

.mobile	   { font-size: 0.5625em; }
.size      { font-size: 0.7500em; }
.grid01	   { font-size: 0.6875em; }
.titles    { font-size: 0.6875em; text-align: justify;}
.titles2   { font-size: 0.6875em; text-align: left;}
.titles3   { font-size: 0.8125em; text-align: left;}
.titles4   { font-size: 0.9375em; text-align: justify;}
.rumble    { font-size: 0.8125em; }
.calander  { font-size: 0.7500em; color: #FF0000; }
.standings { font-size: 0.7500em; }

.hdr-1 { font-size: 2.50em; }
.hdr-2 { font-size: 2.00em; }
.hdr-3 { font-size: 1.50em; }
.hdr-4 { font-size: 1.25em; }
.hdr-5 { font-size: 0.9375em;}
.hdr-6 { font-size: 0.6250em;}

.superscript, .sup {font-size: xx-small; vertical-align: top;} 
.subscript, .sub   {font-size: xx-small; vertical-align: bottom;}

.left-solid   { border-left:   solid 0.125em var(--white); }
.right-solid  { border-right:  solid 0.125em var(--white); }
.bottom-solid { border-bottom: solid 0.125em var(--white); }
.top-solid    { border-top:    solid 0.125em var(--white); }
.all-solid    { border:        solid 0.125em var(--white); }

.left-grey    { border-left:   solid 0.125em var(--greyMED); }
.right-grey   { border-right:  solid 0.125em var(--greyMED); }
.bottom-grey  { border-bottom: solid 0.125em var(--greyMED); }
.top-grey     { border-top:    solid 0.125em var(--greyMED); }
.all-grey     { border:        solid 0.125em var(--greyLGT); }

.dashed-top-grey { border-top: dashed 0.125em var(--greyMED); }
.double-top-grey { border-top: double 0.1875em var(--greyMED); }

.double-grey  { border-left: solid 0.1875em var(--greyMED); border-right: solid 0.1875em var(--greyMED); }

.bottom-solid-thick { border-bottom: solid 0.25em var(--white); }
.top-solid-thick    { border-top:    solid 0.25em var(--white); }

.breakhere { page-break-after: always; }

.main-container {
  margin: 0 auto;
  height: 100%;  width: 100%;  max-width: 60em;
  display: grid;
  grid-template-columns: 1fr;  grid-template-rows: auto 1fr;
  grid-template-areas: 
  "header"
  "main";
}

.form-floating label { font-weight: 400; font-size: 1em; color: var(--black); }
.form-floating > textarea.form-control { text-align: center; height: 12em; }
.form-floating > .form-control { height: 3.5em; font-size: 1em; }
                           
.raw  { color: var(--redRAW);    }  .sd   { color: var(--blueSD);     }
.ppv  { color: var(--orangePPV); }  .nxt  { color: var(--yellowNXT); }  .ecw  { color: var(--greenECW);   }
.snme { color: var(--blueSNME);  }  .ss   { color: var(--orangeSS);  }  .cotc { color: var(--orangeCOTC); }
.wc   { color: var(--greenWC);   }  .tdr  { color: var(--greenTDR);  }  .ntr  { color: var(--blueNTR);    }
.ww   { color: var(--purpleWW);  }  .pro  { color: var(--pinkWW);    }  .mnr  { color: var(--redMNR);     }
.fns  { color: var(--blueFNS);   }  .sups { color: #b7c9e2;         }
.cha  { color: var(--beigeWC);   }  .liv  { color: var(--purple205); }  .roh  { color: var(--redROH);     }
.imp  { color: var(--redIMP);    }  .nwa  { color: var(--orangeNWA); }  .wcw  { color: var(--redROH);     }
.unknown { color: var(--orangeNWA);}

.bg-wwe  { background-color: var(--white);     }  .bg-raw  { background-color: var(--redRAW);    }  .bg-sd   { background-color: var(--blueSD);     }
.bg-ppv  { background-color: var(--orangePPV); }  .bg-nxt  { background-color: var(--yellowNXT); }  .bg-ecw  { background-color: var(--greenECW);   }
.bg-snme { background-color: var(--blueSNME);  }  .bg-ss   { background-color: var(--orangeSS);  }  .bg-cotc { background-color: var(--orangeCOTC); }
.bg-wc   { background-color: var(--greenWC);   }  .bg-tdr  { background-color: var(--greenTDR);  }  .bg-ntr  { background-color: var(--blueNTR);    }
.bg-ww   { background-color: var(--purpleWW);  }  .bg-pro  { background-color: var(--pinkWW);    }  .bg-mnr  { background-color: var(--redMNR);     }
.bg-fns  { background-color: var(--blueFNS);   }  .bg-blk  { background-color: var(--black);     }  .bg-sups { background-color: #b7c9e2;         }
.bg-cha  { background-color: var(--beigeWC);   }  .bg-liv  { background-color: var(--purple205); }  .bg-roh  { background-color: var(--redROH);     }
.bg-imp  { background-color: var(--redIMP);    }  .bg-nwa  { background-color: var(--orangeNWA); }  .bg-wcw  { background-color: var(--redROH);     }

.header { grid-area: header; }

.big-table { font-size: 1.5em; }

.main   { grid-area: main;  scrollbar-width: none;   flex-direction: column;
          display: flex;  align-items: center; }

.cost-table, .time-table { border-collapse: collapse; }
.cost-table td, .cost-table th { padding: 0 0.25em; font-size: 1em; }
.time-table td { padding: 0 0.125em; font-size: 0.875em; }

.price, .deposit_total, .net_total, .total { min-width: 3.5em ;}

input.submit, .blue-btn  { border: solid 0.125em var(--blueFNS);  font-size: 1em;
  padding: 0.25em 0.5em;  color: var(--blueFNS);  font-weight: bold;
  background-color: var(--white);  border-radius: 0.5em; }
.addin-input { width: 5em; }

a > img { height: 2em; }

.vertical-header { font-size: 1em; line-height: 1; font-weight: bold;}

.collapsible { background-color: var(--greyMED); color: var(--white); cursor: pointer;
    padding: 1.125em; width: 75%; border: none; text-align: left; outline: none; font-size: 0.9375em; }
  
.active, .collapsible:hover { background-color: var(--greyDARK); }

.content { padding: 0 1.125em;  display: none;  overflow: hidden;  background-color: var(--black); }

.calendar .header   { border: 1px var(--greyDARK) solid; }
.calendar .day      { width: 6em; border: 1px var(--greyDARK) solid; }
.calendar .month    { width: 11em; border: 1px var(--greyDARK) solid; }
.calendar .not-day  { background-color: var(--greyHOV); }
.calendar .no-sales { background-color: var(--redDARK); }
.dow_stats tr td    { padding-left: 1em; padding-right: 1em;}

#searchForm { display: none; }

/* ----------------------------- New Entry Button ----------------------------- */
#myBtn { display: block; position: fixed; bottom: 24px; right: 8px; z-index: 100; font-weight: 400;
  /* background-color: #D9B310; color: #1D2731; */
  cursor: pointer; box-shadow: 2px 5px #1D2731;
  padding: 8px 16px; border-radius: 8px; font-size: 1.125rem; }

/* #myBtn:hover  { background-color: #D9B310BB; }
#myBtn:active { background-color: #D9B31088; box-shadow: 1px 1px #1D2731;
         transform: translateY(4px); } */
/* -------------------------------------------------------------------------------- */

/* ------------------------------- Changes for Larger Screens --------------------------------------- */

@media screen and (max-width: 1096px)                          { body { font-size: 1.000rem;} }
@media screen and (min-width: 1096px) and (min-height: 812px)  { body { font-size: 1.125rem;} }
@media screen and (min-width: 1224px) and (min-height: 856px)  { body { font-size: 1.250rem;} }
@media screen and (min-width: 1344px) and (min-height: 944px)  { body { font-size: 1.375rem;} }
@media screen and (min-width: 1464px) and (min-height: 1024px) { body { font-size: 1.500rem;} }
@media screen and (min-width: 1584px) and (min-height: 1112px) { body { font-size: 1.625rem;} }
@media screen and (min-width: 1704px) and (min-height: 1194px) { body { font-size: 1.750rem;} }
@media screen and (min-width: 1824px) and (min-height: 1280px) { body { font-size: 1.875rem;} }
@media screen and (min-width: 1944px) and (min-height: 1368px) { body { font-size: 2.000rem;} }
@media screen and (min-width: 2064px) and (min-height: 1448px) { body { font-size: 2.125rem;} }
@media screen and (min-width: 2184px) and (min-height: 1536px) { body { font-size: 2.250rem;} }
@media screen and (min-width: 2304px) and (min-height: 1616px) { body { font-size: 2.375rem;} }
@media screen and (min-width: 2424px) and (min-height: 1704px) { body { font-size: 2.500rem;} }
@media screen and (min-width: 2544px) and (min-height: 1784px) { body { font-size: 2.625rem;} }
@media screen and (min-width: 2664px) and (min-height: 1872px) { body { font-size: 2.750rem;} }
@media screen and (min-width: 2784px) and (min-height: 1952px) { body { font-size: 2.875rem;} }
@media screen and (min-width: 2904px) and (min-height: 2040px) { body { font-size: 3.000rem;} }
@media screen and (min-width: 3024px) and (min-height: 2128px) { body { font-size: 3.125rem;} }
@media screen and (min-width: 3144px) and (min-height: 2208px) { body { font-size: 3.250rem;} }
@media screen and (min-width: 3264px) and (min-height: 2296px) { body { font-size: 3.375rem;} }
@media screen and (min-width: 3384px) and (min-height: 2376px) { body { font-size: 3.500rem;} }
@media screen and (min-width: 3504px) and (min-height: 2464px) { body { font-size: 3.625rem;} }
@media screen and (min-width: 3624px) and (min-height: 2544px) { body { font-size: 3.750rem;} }
@media screen and (min-width: 3744px) and (min-height: 2632px) { body { font-size: 3.875rem;} }
@media screen and (min-width: 3864px) and (min-height: 2712px) { body { font-size: 4.000rem;} }