body { 
    background-color:#235E6F; 
    margin:0 auto;
    font: Georgia, serif;
    touch-action: pan-x pan-y;
}

/* @font-face {
    font-family: sleigh;
    src: url(../font/santas_sleigh/SantasSleighFull.ttf);
}

@font-face {
    font-family: mountains;
    src: url(../font/Mountains_of_Christmas/MountainsofChristmas-Regular.ttf);
    font-weight: normal;
}

@font-face {
    font-family: mountains;
    src: url(../font/Mountains_of_Christmas/MountainsofChristmas-Bold.ttf);
    font-weight: bold;
} */

@media only screen and (max-width: 600px) {
  #mainPanel #warning{
    top: 20px;
    font-size: 20px;
    /* margin-top: 35px; */
    width: 70%;
    /* left: 0px; */
    margin-left: 0px;
  }
  #mainPanel #success{
    top:20px;
    font-size: 20px;
    margin-top: 35px;
  }
  #mainPanel{
    margin-top:0px !important;

  }
 #ticket, #ticketReturn, #giftOut, #summary{
    padding:20px;
  }
  #mainPanel h1{
    font-size: 30px;
  }
  #secretSanta{
    max-width: 100vw;
    content: url("/images/secret-santa-now-logo-long.png");
    display:none;
  }
  .smallButton{
    min-width:50px !important;
    padding: 22px 22px !important;
  }
  .mobileShow{
    display:table-cell !important;
  }
  .mobileHide {
    display: none;
  }
  #scanTable{
    width: 100%;
    font-size: 20px;
  }
  .numShowHidden{
    top: 37px !important;
    left: 40px !important;
    width: 60px !important;
    height: 60px !important;
  }
  .homeButton{
    /* display: none; */
    right: 5% !important;
  }
}

@media only screen and (orientation: landscape) and (max-height: 600px) {
  #secretSanta{
    display:none;
  }
  #mainPanel{
    margin-top:0px !important;

  }
  h1 {
    margin-top: 10px !important;
    font-size:1.5em !important;
  }
  .mobileShow{
    display:table-cell !important;
  }
  .mobileHide {
    display: none;
  }
  .landscapeFlex {
    display: flex;
  }
  .landscapeSpace {
    margin-right:50px;
  }
  #scanTable{
    font-size:25px;
  }
  #scanNumPad{
    float:right;
  }
  #scanNumPad .smallButton{
    min-width: 50px  !important;
  }
  .numShowHidden{
    right:40px;
    width: 60px !important;
    height: 60px !important;
    left: auto !important;
  }
  #userTableDiv{
    height: 135px !important;
  }
}

.mobileShow{
  display: none;
}

.reset{
  margin-bottom:10px;
  line-height: 0px !important;
}
#mainPanel {
    margin:auto;
    justify-content: center;
    font-family: mountains;
    font-size: 26px;
    margin-top: 10px;
    max-width: 1024px;
    padding: 10px;
    background-color: white;
    filter: drop-shadow(10px 10px 4px rgb(49, 48, 48));
    display:grid;
    z-index: 2;    
    overflow: auto;
}
.overflowAlert{
  color:red;
}
#loadingPanel {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
    background-color: #235e6f73;
    display:none;
}
.agencyName, .agencyCode{
  display: inline;

}
td .agencyName, td .agencyCode{
  display: table-cell;
}
#ticket #agencyName, #ticket #agencyCode {
  font-size: 20px;
  width: 300px;
}
#scanCode {
  font-size: 20px;
}
.center{
  margin: auto;
}
#warning {
    color:red;
    font-size:30px;    
    font-weight: bold;
    margin-bottom: 10px;
}
#success {
    color:green;
    font-size:30px;
    font-weight: bold;
    margin-bottom: 10px;
}
.agencyName{
  font-weight: bold;
  font-size: 22px;
}
.loading::after {
  display: inline-block;
  animation: dotty steps(1,end) 1.5s infinite;
  content: '';
}
.numpad{
  display: none;
}
.numShow{
  background-image: url(/images/numpad.png);
  background-size: cover;
  height: 40px;
  width: 40px;
  margin-left: 10px;
  vertical-align: middle;
  background-color: #1a9e15;
  box-shadow:
  inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
  inset 0 0 6px #147a10, /* inner glow */
  1px 1px 3px rgba(0,0,0,0.75)  !important; /* shadow */
}
.numShowHidden{
  display: none;
  background-image: url(/images/icon-santa.png);
  top: 109px;
  left: 13%;
  position: absolute;
  width: 120px;
  height: 120px;
  background-size: cover;
  color: inherit;
  background-color: #fff0;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
#code {
  font-size: 20px;
}
.infoMsg {
  color: red;
  font-size: 30px;
  text-align: center;
  width: 100%;
  font-weight: bold;
}

input[type="number"]{
  width: 167px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

@keyframes dotty {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}
.awaiting {
  font-size: 32px;
  font-weight:bold;
  background-image: linear-gradient(to left, red, green, red, green, red, green);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient 1s ease infinite;
}
@keyframes gradient {
	0% {background-image: linear-gradient(to right,green,red,red,red,red,green,red,red,red,red);}
	10% {background-image: linear-gradient(to right,red,green,red,red,red,red,green,red,red,red);}
	20% {background-image: linear-gradient(to right,red,red,green,red,red,red,red,green,red,red);}
	30% {background-image: linear-gradient(to right,red,red,red,green,red,red,red,red,green,red);}
	40% {background-image: linear-gradient(to right,red,red,red,red,green,red,red,red,red,green);}
	50% {background-image: linear-gradient(to right,green,red,red,red,red,green,red,red,red,red);}
	60% {background-image: linear-gradient(to right,red,green,red,red,red,red,green,red,red,red);}
	70% {background-image: linear-gradient(to right,red,red,green,red,red,red,red,green,red,red);}
	80% {background-image: linear-gradient(to right,red,red,red,green,red,red,red,red,green,red);}
	90% {background-image: linear-gradient(to right,red,red,red,red,green,red,red,red,red,green);}
	100% {background-image: linear-gradient(to right,red,red,red,red,red,green,red,red,red,green);}
}
.blink-warning{
  height:100%;
  width:100%;
  background-color: #ef0a1980;
  font-weight: bold;
  font-size: 2rem;
  animation: blinkingWarning 2s infinite;
  position: absolute;
  z-index: -1;
}
@keyframes blinkingWarning{
  0%		{ background-color: #236f2975;}
  20%		{ background-color: #ef0a1980;}
  40%	{ background-color: #236f2975;}
  60%		{ background-color: #ef0a1980;}
  80%	{ background-color: #236f2975;}
  100%	{ background-color: #ef0a1980;}
}
/***************************

Snow.  

***************************/
.snow, .snow:before, .snow:after {

	position: absolute;
	top: -600px;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: radial-gradient(5px 5px at 34px 172px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 86px 25px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 388px 47px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 53px 303px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 373px 475px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 196px 261px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 434px 424px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 234px 213px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 393px 356px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 537px 497px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 151px 362px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 110px 99px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 270px 111px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 351px 424px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 459px 279px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 584px 126px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 303px 486px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 132px 292px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 120px 162px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 396px 460px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 169px 508px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 177px 298px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 575px 410px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 29px 140px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 82px 378px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 482px 473px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 56px 24px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 157px 73px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 97px 496px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 240px 225px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 12px 102px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 518px 417px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 323px 155px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 534px 119px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 294px 245px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 270px 432px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 406px 292px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 42px 233px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 109px 160px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 158px 359px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 212px 133px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 303px 536px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 513px 314px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 54px 346px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 127px 115px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 559px 29px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 493px 581px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 339px 414px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 349px 481px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 331px 86px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 497px 385px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 65px 332px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 432px 593px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 377px 240px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 293px 224px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 455px 336px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 93px 50px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 129px 453px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 393px 78px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 364px 75px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 66px 19px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 254px 199px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 178px 454px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 499px 280px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 419px 40px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 179px 593px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 66px 529px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 498px 329px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 381px 464px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 172px 17px, #ffffff 50%, rgba(0, 0, 0, 0));
	background-size: 600px 600px;
	animation: snow 5s linear infinite;
}
#snow {
	background: none;
	z-index: -1;
	background-image: url('/images/flake1.png'), url('/images/flake2.png'), url('/images/flake3.png');
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
}
table {
  border-collapse:collapse;
}
table tr{
  border-bottom: dotted 1px #1e8f02;
}
@keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

/***************************

Button With Snow.  

***************************/
.smallButton{
  line-height: 1px !important;
  margin-bottom: 10px !important;
  background: #0f5e0c !important;
  box-shadow:
  inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
  inset 0 0 6px #147a10, /* inner glow */
  inset 0 80px 80px -40px #16b91e, /* gradient */
  1px 1px 3px rgba(0,0,0,0.75)  !important; /* shadow */
}
.button {
    display: inline-block;
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;
    min-width:100px;
    padding: 22px 33px;
    font-family: mountains;
    font-size: 26px;
    line-height: 26px;
    text-decoration: none;
    color: #FFF;
    text-shadow: 0 1px 2px rgba(0,0,0,0.75);
    background: #5e0d0c;
    outline: none;
    border-radius: 15px;
    border: 1px solid #4c0300;
    box-shadow:
      inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
      inset 0 0 6px #a23227, /* inner glow */
      inset 0 80px 80px -40px #ac3223, /* gradient */
      1px 1px 3px rgba(0,0,0,0.75); /* shadow */
      
    position: relative;
    overflow: visible; /* IE9 & 10 */
    -webkit-transition: 500ms linear;
       -moz-transition: 500ms linear;
         -o-transition: 500ms linear;
            transition: 500ms linear;
  }
  
  .button::before {
    content: '';
    display: block;
    position: absolute;
    top: -7px;
    left: -3px;
    right: 0;
    height: 23px;
    background: url('/images/buttonSnow1.png') no-repeat 0 0,
    url('/images/buttonSnow2.png') no-repeat 50% 0,
    url('/images/buttonSnow3.png') no-repeat 100% 0;
    
  }
  .button:hover {
    background: #CC231E;
    text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 0 40px #FFF;
    box-shadow:
      inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
      inset 0 0 6px #F5624D, /* inner glow */
      inset 0 80px 80px -40px #CC231E, /* gradient */
      1px 1px 3px rgba(0,0,0,0.75); /* shadow */
      
  }
  .button:focus {
    outline: none; /*FF*/
  }
  .button:active {
    box-shadow:
      inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
      inset 0 0 6px #CC231E, /* inner glow */
      inset 0 80px 80px -40px #F5624D, /* gradient */
      0px 1px 0px rgba(255,255,255,0.25); /* shadow */
      
    -webkit-transition: 50ms linear;
       -moz-transition: 50ms linear;
         -o-transition: 50ms linear;
            transition: 50ms linear;
  }
  .buttonHalf {
    padding: 11px 33px !important;

  }

/***************************

Stocking Loading.  

***************************/
  svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    transform-origin: 50% 50%;
    width: 500px;
    height: 500px;
    backface-visibility: hidden;
    // border: 1px solid red;
  }
  
  .base,
  .top,
  .stripe {
    stroke-width: 3;
    stroke: #DE4E37;
    fill: none;
  }
  
  .top {
    fill: #fff;
  }
  
  .dot1,
  .dot2,
  .dot3 {
    fill: #DE4E37;
  }
  
  .white .base {
    fill: #fff;
  }

/***************************

Ticket APP.  

***************************/
#userTable tr { cursor: pointer;   
  border: solid;
  border-width: 1px;}
#userTable td, #userTable th { cursor: pointer;   
  border: solid;
  border-width: 1px;}
#userTable {
  border-collapse: collapse;
}
#userTableDiv {
  max-height: 200px;
  /* height: 200px; */
  overflow: auto;
  font-size: 20px;
}
.highlight { background: #88e378; }


/***************************

Index APP.  

***************************/
.landingContainer{
  width: 40%;
  display: none;
  box-shadow: 5px 5px 5px darkgreen;
  border: 1px solid darkgreen;
  border-radius: 5px;
  padding: 5px;
  background-image: linear-gradient(lightgreen, green);
  float: left;
  margin:1%;
  text-align: center;
  text-decoration: auto;
  color: black;
}

.homeButton{
  filter: contrast(2.5);
  width: 40px;
  position: absolute;
  right: 10%;
  top: 10px;
}

.homeButtonImg{
  width:40px;
}

#validCodes table, th, td {
  border: 1px solid black;
  padding:5px;
}

#code span{
  font-size: 12px;
}