/**********************************************************************
   Copyright 2017 Séamus Keena

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  
  VERSION 2.0.0 - 09/07/2019 
 
 ************************************************************************/

html, body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  min-height: 100%;
  background-image: linear-gradient(to top, #FDFEFE 0%,#F4F6F6 100%);
}
main, #messages-card {
  height: 100%;
  padding-bottom: 0;
}
#messages-card-container {
  height: calc(100% - 150px);
  padding-bottom: 0;
}
#messages-card {
  margin-top: 15px;
}
#headeritem {
  line-height: 80px;
  font-size: 16px;
  margin-left: 60px;
  margin-top: auto;
  margin-bottom: auto;
}

.log-in-out{
    margin-right:10%;
    background-color: transparent;
    border-color: transparent;
    color:white !important;
    font-family: Tahoma Black;
}
.log-in-out:hover{
    color:#1F618D !important;
}
.user-name-text{
    margin-right:10%;
    background-color: transparent;
    border-color: transparent;
    color:white !important;
    font-family: Tahoma;
}
.mdl-grid.content-grid {
  justify-content: center
}
#grid {
  height: 164px;
}
#helpButton {
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
   -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
       animation: fadein 2s;
}
.material-icons {
  font-size: 36px;
  top: 8px;
  position: relative;
}
.mdl-layout__header {
  background-image: linear-gradient(to top, #21618C 0%, #009FDF 100%);
  width: 100%;
  position: fixed;
  z-index: 1;
  padding-left: 10%;
  padding-right: 10%;
}
p {
  text-align: center;
}
header {
  height: 79px;
  padding-bottom: 10px !important;
}
.mdl-layout__header-row {
  padding: 0;
  margin: 0 auto;
}
.mdl-layout__header-row img{
  float:left;
  height: 50px;
  padding-right: 12px;
  margin: 10px;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
   -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
       animation: fadein 2s;
}
.mdl-card__supporting-text {
  width: auto;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.mdl-textfield {
    margin-top: 4%;
    position: relative;
    font-size: 16px;
    display: inline-block;
    box-sizing: border-box;
    width: 300px;
    max-width: 100%;
}
.mdl-layout__content {
  padding-top: 80px;
  background-image: linear-gradient(to top, #FDFEFE 0%,#FDFEFE 100%);
}
.mdl-textfield__input {
  position: relative;
  font-size: 20px;
  display: inline-block;
  box-sizing: border-box;
  width: 300px;
  max-width: 100%;
}
.mdl-textfield__label {
  margin-bottom: 0px;
}
.mdl-card {
  min-height: 0;
}
.mdl-card {
  background: linear-gradient(white, #f9f9f9);
  justify-content: space-between;
}
.mdl-button{
  border-radius: 4px;
  width: 49%;
  margin-top: 4px;
  margin-bottom: 4px;
}
#sign-in {
  margin-top: 0px;
  margin-bottom: 0px; 
  width: 100px;
  background-color: transparent;
  border-color: transparent;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
   -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
       animation: fadein 2s;
}
#sign-out {
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100px;
  background-color: transparent;
  border-color: transparent;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
   -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
       animation: fadein 2s;
}
#user-container {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 35px;
  height: 36px;
  padding-left: 10px;
  justify-content: left;
  padding-right: 10px;
  z-index: 5;
  right: 110px;
}
#loggedInUser {
  padding-right: 24px;
  padding-top: 7.25px;
}
#user-container #user-pic {
  top: -3px;
  position: relative;
  display: inline-block;
  background-image: url('/images/profile_placeholder.png');
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-size: 40px;
  border-radius: 20px;
  z-index: 1;
}
#user-container #user-name {
  font-size: 16px;
  line-height: 34px;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
   -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
       animation: fadein 2s;
}
#buttons-container {
  display: flex;
  flex-direction: row;
  top: 35px;
  width: 110px;
  right: 0;
  padding-left: 10px;
  justify-content: flex-end;
  padding-right: 10px;
  z-index: 4;
  float: right;
  padding-top: 30px;
}

a:hover {
  color:white !important;
}

#userTableInfo {
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
   -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
       animation: fadein 2s;
}
#txtEmail{
  width: 200px;
  max-width: 200px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
#txtPass{
  width: 200px;
  max-width: 200px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
#welcome {
  text-align: justify;
  padding-left: 10%;
  padding-right: 10%;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
   -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
       animation: fadein 2s;
}
#instructions {
  text-align: justify;
  padding-left: 10%;
  padding-right: 10%;
}
#content{
  text-align: justify;
  padding-top: 8px;
}
.showButton{
  margin-top: 15px;
  margin-bottom: 15px;
}
#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 644px;
    height: 20px;
    margin: 0 auto;
}
#carReg {
    text-align: center;
    text-transform: uppercase;  
  }
#sample3 {
    text-align: center;
    text-transform: uppercase;  
  }
    ::-webkit-input-placeholder { /* WebKit browsers */
      text-transform: initial;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      text-transform: initial;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
      text-transform: initial;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
      text-transform: initial;
  }
#image-form #submitImage {
  width: auto;
  padding: 0 6px 0 1px;
  min-width: 0;
}
#image-form #submitImage .material-icons {
  top: -1px;
}
.message img {
  max-width: 300px;
  max-height: 200px;
}
#mediaCapture {
  display: none;
}
#policyText {
  padding-left: 2rem;
  padding-right: 2rem;
}
#policyAcceptButton {
  margin-bottom: 20px;
}
.passwordReset {
  top: 80px;
  height: 24px;
  margin-right: 5px;
  padding-top: 3px;
  z-index: 5;
  color: blue;
  background-color: inherit;
  border: none;
}
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}
.loader {
  color: #ffffff;
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before,
.loader:after {
  position: absolute;
  content: '';
}
.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #0076B7;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.2em 5.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}
.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: #0076B7;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#table {
  counter-reset: rowNumber;
  margin-left: auto;
  margin-right: auto;
}
#table tr:not(:first-child) {
  counter-increment: rowNumber;
}
#table tr:not(:first-child) td:first-child::before {
  /*content: counter(rowNumber);*/
  min-width: 1em;
  margin-right: 0.5em;
}
/*.mdl-data-table{
  text-align: left;
}*/
.mdl-data-table td {
    text-align: center;
    font-size: 16px;
}
.mdl-data-table th {
    padding: 0 18px 12px 18px;
    text-align: center; 
    font-size: 16px;
}
.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
  text-align: center;
}
#user_table {
  counter-reset: rowNumber;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}
#user_table tr:not(:first-child) {
  counter-increment: rowNumber;
}
#user_table tr:not(:first-child) td:first-child::before {
  /*content: counter(rowNumber);*/
  min-width: 1em;
  margin-right: 0.5em;
}

@media screen and (min-width: 321px) and (max-width: 350px) {
  #user-container {
    top: 75px;
    height: 38px;
    padding-right: 2px;
    z-index: 5;
    margin-right: -27%
  }
  header {
    height: 115px;
    padding-bottom: 10px !important;
  }
}
@media screen and (min-width: 350px) and (max-width: 440px) {
  #user-container {
    top: 75px;
    height: 38px;
    padding-right: 2px;
    z-index: 5;
    margin-right: -20%
  }
  header {
    height: 115px;
    padding-bottom: 10px !important;
  }
}

@media screen and (min-width: 440px) and (max-width: 600px) {
  #user-container {
    top: 75px;
    height: 38px;
    padding-right: 2px;
    z-index: 5;
    margin-right: -10%
  }
  header {
    height: 115px;
    padding-bottom: 10px !important;
  }
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
  .mdl-layout__header {
    background-image: linear-gradient(to top, #21618C 0%, #009FDF 100%);
    width: 100%;
    position: fixed;
    z-index: 1;
    padding: 1%;
  }
  #headeritem {
    line-height: 80px;
    font-size: 14px;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
  }
  #loggedInUser {
    font-size: 16px;
    padding-right: 24px;
    padding-top: 7.25px;
  }
  #user-container #user-name {
    font-size: 16px;
    line-height: 33px;
  }
  #user-container #user-pic {
    top: 2px;
    width: 33px;
    height: 33px;
    background-size: 33px;
    z-index: 2;
  }
  #buttons-container {
    top: 35px;
    height: 38px;
    width: 110px;
    margin-left: auto;
    padding-top: 3px;
    padding-right: 2px;
    z-index: 5;
  }
  #userTableInfo {
    font-size: 12px;
  }
  #txtEmail{
    width: 100%;
    max-width: 200px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  #txtPass{
    width: 100%;
    max-width: 200px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .passwordReset {
    top: 80px;
    height: 24px;
    margin-right: 5px;
    padding-top: 3px;
    z-index: 5;
    color: blue;
    background-color: inherit;
    border: none;
  }
  #sign-out {
    padding-left: 12px;
    padding-right: 12px;
  }
  #password-reset {
    padding-left: 12px;
    padding-right: 12px;
  }
  .mdl-layout__content{
    padding-top: 110px;
    background-image: linear-gradient(to top, #FDFEFE 0%,#BFC9CA 100%);
  }
}
@media screen and (max-width: 320px) {
  header {
    height: 150px;
    padding-bottom: 50px !important;
  }
  .user-name-text{
    margin-right:0%;
    background-color: transparent;
    border-color: transparent;
    color:white !important;
    font-family: Tahoma;
  }
  #headeritem {
    line-height: 80px;
    font-size: 16px;
    margin-left: 0px;
    margin-top: auto;
    margin-bottom: auto;
  }
  .mdl-layout__content{
    padding-top: 150px;
    background-image: linear-gradient(to top, #FDFEFE 0%,#BFC9CA 100%);
  }
  .mdl-layout__header-row img{
    height: 50px;
    margin: 10px;
  }
  #headeritem {
    font-size: 18px;
  }
  #user-container {
    top: 90px;
    height: 38px;
    right: 0;
    padding-top: 0px;
    padding-right: 2px;
    z-index: 5;
  }
  #userTableInfo {
    font-size: 12px;
  }
  #loggedInUser {
    font-size: 18px;
    padding-top: 6px;
    padding-right: 15px;
  }
  #user-container #user-pic {
    top: 2px;
    width: 33px;
    height: 33px;
    background-size: 33px;
    z-index: 2;
  }
  #user-container #user-name {
  font-size: 16px;
  line-height: 36px;
  text-align: end;
  z-index: 4;
}

  #buttons-container {
    top: 35px;
    background: linear-gradient(to right, #111C2D 12%, #009FDF 100%);
    height: 38px;
    padding-top: 0px;
    padding-right: 2px;
    z-index: 4;
  }
  .passwordReset {
    top: 80px;
    height: 24px;
    margin-right: 5px;
    padding-top: 3px;
    z-index: 5;
    color: blue;
    background-color: inherit;
    border: none;
  }
  #txtEmail {
    width: 47.7%;
    padding-left: 2px;
    margin-left: 4px;
    margin-right: 2px;
  }
  #txtPass {
    width: 49%
  }
}
.mdl-textfield__label:after {
  background-color: #0288D1;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
  color: #0288D1;
}
.mdl-button .material-icons {
  top: -1px;
  margin-right: 5px;
  border-radius: 4px;
}

@media print {
    #table {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #table tr:not(:first-child) {
    counter-increment: rowNumber !important;
  }
  #table tr:not(:first-child) td:first-child::before {
    min-width: 1em !important;
    margin-right: 0.5em !important;
  }
  .mdl-data-table td {
      text-align: left !important;
  }
  .mdl-data-table th {
      padding: 0 18px 12px 18px !important;
      text-align: left !important; 
  }
}
.infoTableHeader{
  background-image: linear-gradient(to bottom, #FDFEFE 0%,#E5E7E9 100%);
}
.optanon-toggle-display{
  display: inline-block;
	display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid
  transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  color:white;
}

#cookie-content { position: fixed; background-color: #0075b0; color: #fff; text-align: center; overflow: hidden; bottom: 0; width: 100%; }
.catapult-cookie-bar { font-size: 16px; line-height: 140%; margin: 10px auto; padding: 0 30px; max-width: 940px; }
#cookie-agree { margin: 2px 10px 0 10px; font-family: StRyde-Medium, Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none; text-align: center; font-weight: bold; padding: 2px 5px; font-size: 14px; display: inline-block; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; cursor: pointer; background: #438c08 url(../img/green.png) left top repeat-x !important; /* Old browsers */ background: -moz-linear-gradient(top, #8cc260 1%, #7fba4d 4%, #64ac29 8%, #57a417 10%, #438c08 100%) !important; /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #8cc260), color-stop(4%, #7fba4d), color-stop(8%, #64ac29), color-stop(10%, #57a417), color-stop(100%, #438c08)) !important; /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #8cc260 1%, #7fba4d 4%, #64ac29 8%, #57a417 10%, #438c08 100%) !important; /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #8cc260 1%, #7fba4d 4%, #64ac29 8%, #57a417 10%, #438c08 100%) !important; /* Opera 11.10+ */ background: -ms-linear-gradient(top, #8cc260 1%, #7fba4d 4%, #64ac29 8%, #57a417 10%, #438c08 100%) !important; /* IE10+ */ background: linear-gradient(to bottom, #8cc260 1%, #7fba4d 4%, #64ac29 8%, #57a417 10%, #438c08 100%) !important; /* W3C */ border: 1px solid #3b7b06; text-shadow: 0px 0px 4px #285900; }
#cookie-agree:hover { background: #4d9610 url(../img/green-hover.png) left top repeat-x !important; background: -moz-linear-gradient(top, #9bda66 0%, #8bd44e 3%, #6ac71e 6%, #5ac106 9%, #4d9610 99%, #4d9610 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9bda66), color-stop(3%, #8bd44e), color-stop(6%, #6ac71e), color-stop(9%, #5ac106), color-stop(99%, #4d9610), color-stop(100%, #4d9610)) !important; background: -webkit-linear-gradient(top, #9bda66 0%, #8bd44e 3%, #6ac71e 6%, #5ac106 9%, #4d9610 99%, #4d9610 100%) !important; background: -o-linear-gradient(top, #9bda66 0%, #8bd44e 3%, #6ac71e 6%, #5ac106 9%, #4d9610 99%, #4d9610 100%) !important; background: -ms-linear-gradient(top, #9bda66 0%, #8bd44e 3%, #6ac71e 6%, #5ac106 9%, #4d9610 99%, #4d9610 100%) !important; background: linear-gradient(to bottom, #9bda66 0%, #8bd44e 3%, #6ac71e 6%, #5ac106 9%, #4d9610 99%, #4d9610 100%) !important; border: 1px solid #3b7b06; }
#CardModel_CardSecurityCode { width: 90px; }
#modalIframeId { color: #fff; color: #95E2FF; font-size: 16px; }
#cookie-content #cookie-message-block #cookie-agree { color: #fff; }
.btn { width: auto; height: auto; }