/* CSS Document */
body, html { height: 100%; }
.bgimg { background-image: url('../images/BG.png'); height: 100%; background-position: center; background-size: cover; position: relative;}
.topmiddle { position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%);	text-align: center; }
.middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.eventCheckIn {position: absolute;top: 22%;left: 50%;transform: translate(-50%, -50%);text-align: center;}
.logo {	width: 50%;	height: 50%;}

.footer{
  position: fixed; left: 0;bottom: 0; height: 20%; width: 100%; color: #fff; background-color: #094588;padding: 0px;
  font-family: Verdana,sans-serif;
  font-size: 15px;
  border-top: #acb0b4 solid 10px;
}
.border{ width: 100%; height: 5%; background-color: #d4d4d4; }
.message { color: #a7a7a7;  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif", ; float: left; font-size: 20px; }

.welcome{ display: flex; flex-direction: row; align-items: center; top: 50% }
.selection { display: flex; align-items: center; flex-direction: column; top:50% }
.groupName { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: x-large; color: gray }
.fullName {font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 30px; color: cornflowerblue}
.selectionItems {display:flex; align-items: center; left: 20%}
.error {display: flex; align-items: center; flex-direction: column; top: 60%;}
.errormessage {font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:large; color: #e5432d;}
.raisedbutton {background-color:#ffdb2b; font-weight:bold;padding: 3px 40px 3px 40px;}
.acknowledge {display: flex; align-items: center; flex-direction: column; top: 40%}
.status {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size:medium;font-size: 20px; font-weight: bold; color:green}
.position {font-family:Verdana, Geneva, Tahoma, sans-serif; font-size: medium; color: gray;}
.clickHereBtn { height: 3em; border: 2px solid #094588; border-radius: 20px; width: 25em; text-align: center; background: #094588; color: white; }
.eventName {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;color: black;font-weight: bold;font-size: 19px;width: 100%}
.messagefont {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;font-size: 19px;font-weight: bold;color: black}
.eventerrormessage {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;font-size: 19px; color: #e5432d;font-weight: bold;}
.eventSelection {display: flex;align-items: center;flex-direction: column;top: 50%}
.imageHeightWidth {height: 90px;width: 90px;}
.eventChecked{font-size: 25px}
.selectionButton {font-size: 19px !important;padding: 3px 40px 3px 40px !important;}
.errorButtonDiv {padding-left: 25px;padding-top: 12px;}
.spanShowHide{ display: none;}
.divShowHide {display: block;}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:1.5){.imageHeightWidth{height:140px;width:140px;}
  .eventSelection{display:flex;align-items:center;flex-direction:column;width:752px;}
  .eventChecked{font-size:30px;}
  .eventCheckIn{position:absolute;top:19%;left:50%;transform:translate(-50%, -50%);text-align:center;}
  .eventName{font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;color:black;font-weight:bold;font-size:30px;width:100% }
  .messagefont{font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;font-size:30px;font-weight:bold;color:black;padding-top:30px;}
  .eventerrormessage {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;font-size: 30px;color: #e5432d;font-weight: bold;padding-top: 25px;}
  .selectionButton {font-size: 30px !important;padding: 10px 40px 10px 40px !important;}
  .messageTop{padding-top:70px;}
  .errorButtonDiv {padding-left: 0}
  .spanShowHide {display: block;}
  .divShowHide {display: none;}
  .eventNamePadding{padding-bottom: 25%}
}


@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1.5){.imageHeightWidth{height:140px;width:140px;}
  .eventSelection{display:flex;align-items:center;flex-direction:column;width:752px;}
  .eventChecked{font-size:30px;}
  .eventCheckIn{position:absolute;top:19%;left:50%;transform:translate(-50%, -50%);text-align:center;}
  .eventName{font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;color:black;font-weight:bold;font-size:30px;width:100% }
  .messagefont{font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;font-size:30px;font-weight:bold;color:black;padding-top:25px;}
  .eventerrormessage {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;font-size: 30px;color: #e5432d;font-weight: bold;padding-top: 30px;}
  .selectionButton {font-size: 30px !important;padding: 10px 40px 10px 40px !important;}
  .errorButtonDiv {padding-left: 0}
  .spanShowHide{ display: none;}
  .divShowHide {display: none;}
}