/*
$theme-primary:			rgb(7,58,128);
$theme-primary-d3:		rgb(0, 32, 71);
$theme-primary-d2:		rgb(1, 47, 104);
$theme-primary-d1:		rgb(0,58,129);
$theme-primary-l1:		rgb(14, 77, 165);
$theme-primary-l2:		rgb(21, 96, 201);

$theme-secondary:		rgb(180,8,59);
$theme-secondary-d3:	rgb(133, 4, 30);
$theme-secondary-d2:	rgb(153,4,34);
$theme-secondary-d1:	rgb(160, 7, 53);
$theme-secondary-l1:	rgb(207, 17, 74);
$theme-secondary-l2:	rgb(230, 22, 84);

$theme-tertiary:		rgb(167,169,172);
$theme-premium:			rgb(177,149,58);
$theme-neutral:			rgb(190,192,194);
$theme-blank:			rgb(255,255,255);

$side-panel-width:		240px;
$central-panel-width:	500px;
*/
/* Event colours */
.event-color-0 {
  color: #FF4900;
  fill: #FF4900;
}

.event-color-1 {
  color: #F16D00;
  fill: #F16D00;
}

.event-color-2 {
  color: #F1B500;
  fill: #F1B500;
}

.event-color-3 {
  color: #CECE0F;
  fill: #CECE0F;
}

.event-color-4 {
  color: #85C00E;
  fill: #85C00E;
}

.event-color-5 {
  color: #14A70C;
  fill: #14A70C;
}

.event-color-6 {
  color: #0A8667;
  fill: #0A8667;
}

.event-color-7 {
  color: #5C9632;
  fill: #5C9632;
}

.event-color-8 {
  color: #226666;
  fill: #226666;
}

.event-color-9 {
  color: #045A9B;
  fill: #045A9B;
}

.event-color-10 {
  color: #2F58EA;
  fill: #2F58EA;
}

.event-color-11 {
  color: #334CA6;
  fill: #334CA6;
}

.event-color-12 {
  color: #4A34A9;
  fill: #4A34A9;
}

.event-color-13 {
  color: #5F2FA6;
  fill: #5F2FA6;
}

.event-color-14 {
  color: #8228A2;
  fill: #8228A2;
}

.event-color-15 {
  color: #822B66;
  fill: #822B66;
}

.event-color-16 {
  color: #953255;
  fill: #953255;
}

.event-color-17 {
  color: #C8021D;
  fill: #C8021D;
}

.event-tint-0 {
  background-color: rgba(255, 73, 0, 0.4);
}

.event-tint-1 {
  background-color: rgba(241, 109, 0, 0.4);
}

.event-tint-2 {
  background-color: rgba(241, 181, 0, 0.4);
}

.event-tint-3 {
  background-color: rgba(206, 206, 15, 0.4);
}

.event-tint-4 {
  background-color: rgba(133, 192, 14, 0.4);
}

.event-tint-5 {
  background-color: rgba(20, 167, 12, 0.4);
}

.event-tint-6 {
  background-color: rgba(10, 134, 103, 0.4);
}

.event-tint-7 {
  background-color: rgba(92, 150, 50, 0.4);
}

.event-tint-8 {
  background-color: rgba(34, 102, 102, 0.4);
}

.event-tint-9 {
  background-color: rgba(4, 90, 155, 0.4);
}

.event-tint-10 {
  background-color: rgba(47, 88, 234, 0.4);
}

.event-tint-11 {
  background-color: rgba(51, 76, 166, 0.4);
}

.event-tint-12 {
  background-color: rgba(74, 52, 169, 0.4);
}

.event-tint-13 {
  background-color: rgba(95, 47, 166, 0.4);
}

.event-tint-14 {
  background-color: rgba(130, 40, 162, 0.4);
}

.event-tint-15 {
  background-color: rgba(130, 43, 102, 0.4);
}

.event-tint-16 {
  background-color: rgba(149, 50, 85, 0.4);
}

.event-tint-17 {
  background-color: rgba(200, 2, 29, 0.4);
}

#houseChart > div {
  padding: 8px 0px;
}

#houseChart .house-name {
  font-weight: bold;
  text-align: left;
}

#houseChart .house {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#houseChart .house > div:fist-child {
  text-align: left;
}

#houseChart .house > div:last-child {
  text-align: right;
}

#houseChart .bar {
  background-color: rgba(0, 0, 0, 0.2);
  height: 1em;
  border-radius: 0 0.5em 0.5em 0;
}

#houseChart div:nth-child(1) .bar {
  background-color: #00c800;
}

#houseChart div:nth-child(2) .bar {
  background-color: #ff6400;
}

#houseChart div:nth-child(3) .bar {
  background-color: #ff3264;
}

#houseChart div:nth-child(4) .bar {
  background-color: #5082ff;
}

#houseChart div:nth-child(5) .bar {
  background-color: #ff50dc;
}

#houseChart div:nth-child(6) .bar {
  background-color: #00a0ff;
}

.blankpage {
  background-color: #fff;
  min-height: 100%;
  padding: 16px 32px;
}

.condensed {
  font-size: 80%;
  padding: 16px;
}
.condensed h1 {
  font-size: 150%;
  font-weight: bold;
  text-align: center;
}
.condensed h2 {
  font-size: 130%;
  font-weight: bold;
}
.condensed ol {
  -webkit-padding-start: 16px;
          padding-inline-start: 16px;
}
.condensed p {
  text-align: justify;
}

.buttongroup {
  max-width: 400px;
  margin: auto;
}
.buttongroup button {
  display: block;
  background-color: #00634d;
  color: white;
  margin-bottom: 16px;
}
.buttongroup button:first-child {
  background-color: #009982;
}
.buttongroup button:last-child {
  margin-bottom: 0px;
}

hr {
  border-color: #e31b23;
  border-width: 2px;
}

/* Full screen container representing the total body space */
.body-container {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #b71515;
  background-image: url(../img/wallpaper_nylon_dark.jpg);
  background-blend-mode: luminosity;
  background-size: cover;
  background-position: center center;
}

/* Descendants should be positioned relative to this centred app container not the body */
.app-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 100%;
  overflow: hidden;
  margin: auto;
  -webkit-box-shadow: 0px 0px 20px black;
          box-shadow: 0px 0px 20px black;
  background-color: #911712;
  background-image: url(../img/metallic_blur.jpg);
  background-blend-mode: luminosity;
  background-size: cover;
  background-position: right center;
}

/* Root page visibility */
#nav.splash > .page:not(#splash-page),
#nav.unavailable > .page:not(#unavailable-page),
#nav.login > .page:not(#login-page),
#nav.reset > .page:not(#reset-page),
#nav.setpassword > .page:not(#setpassword-page),
#nav.changepassword > .page:not(#changepassword-page),
#nav.points > .page:not(#points-page),
#nav.personalinfo > .page:not(#personalinfo-page),
#nav.photocard > .page:not(#photocard-page),
#nav.biometricconsent > .page:not(#biometricconsent-page),
#nav.biometricconsentlong > .page:not(#biometricconsentlong-page),
#nav.reference > .page:not(#reference-page),
#nav.uniform > .page:not(#uniform-page),
#nav.healthinfo > .page:not(#healthinfo-page),
#nav.leaving > .page:not(#leaving-page),
#nav.main > .page:not(#main-page) {
  display: none;
}

/* Main tabbed page visibility */
#main-nav.calendar > .page:not(#calendar-page),
#main-nav.events > .page:not(#events-page),
#main-nav.rota > .page:not(#rota-page),
#main-nav.history > .page:not(#history-page) {
  display: none;
}

/* Tab bar highlighting */
#main-nav.calendar #main-tab-bar > #calendar-tab,
#main-nav.events #main-tab-bar > #events-tab,
#main-nav.rota #main-tab-bar > #rota-tab,
#main-nav.history #main-tab-bar > #history-tab {
  background-color: #e31b23;
  color: white;
}

/* Tab tip visibility */
#main-tab-tip,
#main-nav.calendar #main-tab-tip > div:not(#tab-tip-calendar),
#main-nav.events #main-tab-tip > div:not(#tab-tip-events),
#main-nav.rota #main-tab-tip > div:not(#tab-tip-rota),
#main-nav.history #main-tab-tip > div:not(#tab-tip-history) {
  display: none;
}

.page {
  -webkit-overflow-scrolling: touch;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.page:has(main) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: stretch;
      -ms-flex-pack: stretch;
          justify-content: stretch;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  padding: 0px;
}
.page > header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  left: 0px;
  bottom: 0px;
  padding: 16px 32px;
  font-size: 1.25em;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.1);
  color: black;
}
.page > main {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 2px 32px;
}
.page > footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  left: 0px;
  bottom: 0px;
  padding: 16px 32px;
  font-size: 1.25em;
  font-weight: bold;
  text-align: center;
  z-index: 4;
}
.page .page {
  background-color: #bec0c2;
  padding: 0px;
  overflow-y: visible;
}
.page .page::before, .page .page::after {
  border: dotted 1px #f00;
  height: 150px;
}
.page .content {
  padding: 0px 16px;
  margin: auto;
  max-width: 600px;
}

.orient.grid {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: 50% 16px 50%;
  grid-template-rows: 50% 50%;
  gap: 16px;
}

.orient.grid > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.orient.grid > *:nth-child(2) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

@media (orientation: landscape) {
  .orient.grid {
    -ms-grid-columns: 40% 60% !important;
    grid-template-columns: 40% 60% !important;
    -ms-grid-rows: 1fr !important;
    grid-template-rows: 1fr !important;
  }
  .orient.grid > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .orient.grid > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

  .backdrop-orientation {
    -webkit-transform: rotateX(75deg) rotateY(15deg) translate(-30vw, -80vh) scale(2) !important;
            transform: rotateX(75deg) rotateY(15deg) translate(-30vw, -80vh) scale(2) !important;
  }

  #photocard-page .photo-area {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    -webkit-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
  }
  #photocard-page .details-area {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    font-size: 3vh;
    font-size: 4dvh;
  }
}
#photocard-page {
  /*
  &:after {
  	content: "";
  	position: absolute;
  	inset: 2px;

  }
  */
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: stratch;
      -ms-flex-pack: stratch;
          justify-content: stratch;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  /*
  #photocard-picture {
  	aspect-ratio: 35 / 45;
  	height: 90%;
  	max-height: 75vw;
  }
  */
}
#photocard-page > div:first-child {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
#photocard-page .photo-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
#photocard-page .details-area {
  position: relative;
  z-index: 4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
}
#photocard-page:not(.no-photo-found) .photocard-invalid {
  display: none;
}
#photocard-page.no-photo-found .photocard-backdrop {
  display: none !important;
}
#photocard-page #photocard-back-button {
  position: absolute;
  z-index: 6;
  left: 0px;
  top: 0px;
}
#photocard-page #photocard-back-button i {
  font-size: 2.5em;
}
#photocard-page #photocard-logo {
  position: absolute;
  z-index: 5;
  right: 32px;
  top: 16px;
  height: 40vmin;
}
#photocard-page .photocard-picture {
  position: relative;
  z-index: 2;
  aspect-ratio: 35/45;
  -o-object-fit: cover;
     object-fit: cover;
  height: 90%;
  max-height: 75vmin;
  max-height: 75dvmin;
}
#photocard-page .photocard-invalid {
  position: absolute;
  inset: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
  z-index: 7;
}
#photocard-page .photocard-invalid > div {
  background-color: rgba(255, 255, 255, 0.95);
  color: red;
  border: dashed 1ex red;
  padding: 0.5ex 1em;
  border-radius: 1em;
  font-size: 7vmax;
  text-align: center;
}
#photocard-page .photocard-invalid > div > div:last-child {
  font-size: 1rem;
}
#photocard-page #photocard-jacketno {
  font-size: 3.5em;
  font-weight: bold;
  background-color: #009982;
  color: white;
  padding: 0px 12px;
  border-radius: 4px;
}
#photocard-page #photocard-payno {
  font-size: 3em;
  font-weight: bold;
}
#photocard-page #photocard-name {
  font-size: 2em;
}
#photocard-page .photocard-backdrop {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 3;
  -webkit-perspective: 70vmax;
          perspective: 70vmax;
}
#photocard-page .photocard-backdrop .backdrop-orientation {
  -webkit-perspective-origin: center;
          perspective-origin: center;
  -webkit-transform: rotateX(50deg) rotateY(40deg) translate(-50vw, -59vh) scale(2);
          transform: rotateX(50deg) rotateY(40deg) translate(-50vw, -59vh) scale(2);
}
#photocard-page .photocard-backdrop svg {
  width: 100vmax;
  height: 100vmax;
}
#photocard-page #raysmask {
  -webkit-animation: rotating 20s linear infinite;
          animation: rotating 20s linear infinite;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}
#photocard-page #raysmask2 {
  -webkit-animation: rotating 30s linear infinite;
          animation: rotating 30s linear infinite;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}
#photocard-page #ring1 {
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  fill: rgba(0, 153, 130, 0.2);
  /* transform: scale(27); */
}

@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.centralize {
  position: relative;
  margin: 0px auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.text-center {
  text-align: center;
}

/*
.w3-modal { padding: 0px; background-color: rgba(0,0,0,0.6);}


#mobile-footer { }
#badge-area { text-align: right; padding: 16px;}
#save-changes { display: inline-flex; vertical-align: middle;}
*/
#splash-page, #unavailable-page {
  color: white;
}

.hide {
  display: none !important;
}

#qrCodeContainer {
  margin-top: 24px;
}

#qrCodeCanvas {
  margin: auto;
  padding: 12px;
  background-color: #fff;
  display: inline;
}

/*
#qrCodeCanvas img, #qrCodeCanvas canvas {
		margin: auto;
		margin-top: 24px;
}
*/
.uniform-form > div:nth-child(odd) {
  margin-bottom: 1ex;
}
.uniform-form select {
  min-width: 50%;
  text-align: right;
}

/* mobile first */
@media only screen and (max-width: 540px) {
  .wide-only {
    display: none;
  }
}
@media only screen and (min-width: calc($narrow-width + 1)) {
  .narrow-only {
    display: none;
  }
}
#login-page {
  color: white;
  padding: 32px 0px;
  /*
  .login-card {
  	max-width: 500px;
  	margin: auto;
  	background-color: $theme-blank;
  	color: black;

  	div {
  		padding: 8px 16px;
  	}

  	.heading {
  		background-color: $theme-primary;
  		color: $theme-blank;
  		font-weight: bold;
  		font-size: 120%;
  		text-align: center;
  	}

  	input[type="text"] {
  		font-weight: bold;
  	}
  }
  */
}
#login-page > table {
  width: 100%;
  height: 100%;
  border-spacing: 16px;
  border-collapse: separate;
}
#login-page > table tr:nth-child(2) {
  height: 1px;
}
#login-page .reset-password {
  font-size: 85%;
}
#login-page .reset-password table {
  width: 100%;
}
#login-page .reset-password table td:first-child {
  display: table-cell;
  text-align: left;
}
#login-page .reset-password table td:last-child {
  display: table-cell;
  text-align: right;
}
#login-page .consent {
  font-size: 70%;
  text-align: center;
  padding: 4px 0px;
}
#login-page .warning {
  max-width: 500px;
  margin: auto;
  background-color: gold;
  color: #e31b23;
  text-align: center;
  font-weight: bold;
}
#login-page .logo {
  background-image: url(../img/lfc_logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
#login-page auth-message-area {
  display: none;
}
#login-page #login-username:invalid {
  color: #F00;
}

#reset-page.new-user .reset-only {
  display: none;
}
#reset-page:not(.new-user) .new-user-only {
  display: none;
}

#flag.resetting .hide-if-resetting,
#flag:not(.resetting) .show-if-resetting {
  display: none;
}

.modal {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  overflow: hidden;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0);
}

#menu-modal {
  left: -100%;
  -webkit-transition: background-color 500ms linear;
  -o-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}

#help-modal {
  right: -100%;
  -webkit-transition: background-color 500ms linear;
  -o-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}

#modal.menu #menu-modal {
  pointer-events: auto;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.8);
}

#modal.help #help-modal {
  pointer-events: auto;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.8);
}

#main-menu {
  position: absolute;
  left: -100%;
  width: 75%;
  height: 100%;
  max-width: 300px;
  background-color: #e31b23;
  color: gold;
  overflow: hidden;
  overflow-y: auto;
  padding-top: 32px;
  -webkit-transition: left 250ms linear;
  -o-transition: left 250ms linear;
  transition: left 250ms linear;
}
#main-menu a {
  display: block;
  padding: 12px 8px;
  text-decoration: none;
}
#main-menu a > * {
  vertical-align: middle;
  line-height: 2;
}
#main-menu a > i {
  margin-right: 8px;
}
#main-menu a > div > * {
  vertical-align: middle;
  padding-left: 8px;
}
#main-menu a .logo {
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 24px;
}

#flag:not(.model-has-changed) .menu-save-enabled {
  display: none;
}

#modal.menu #main-menu {
  left: 0px;
}

#main-help {
  position: absolute;
  right: -100%;
  width: 75%;
  height: 100%;
  max-width: 300px;
  background-color: #009982;
  color: white;
  overflow: hidden;
  overflow-y: auto;
  -webkit-transition: right 250ms linear;
  -o-transition: right 250ms linear;
  transition: right 250ms linear;
}

#help td {
  vertical-align: top;
}

#modal.help #main-help {
  right: 0px;
}

.version {
  position: absolute;
  right: 16px;
  bottom: 8px;
  font-size: 50%;
  opacity: 0.5;
}

#dialog-modal {
  /*
  position: fixed;
  */
  background-color: rgba(0, 0, 0, 0.75);
  top: 0px;
  left: 0px;
  /*
  width: 100%;
  height: 100%;
  display: table;
  z-index: 10;
  */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.dialog-inset {
  margin: 0px 32px;
}

.dialog-box {
  background-color: white;
  color: black;
  border: solid 2px #e31b23;
  text-align: center;
  overflow: hidden;
  border-radius: 8px;
  -webkit-box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.5);
  width: 60%;
  max-width: 440px;
  min-width: 280px;
  margin: 16px;
}
.dialog-box .dialog-header, .dialog-box .dialog-footer {
  background-color: #e31b23;
  color: white;
  padding: 4px 16px;
}
.dialog-box .dialog-body {
  padding: 2px 16px 12px 16px;
  max-height: 80vh;
  overflow: hidden;
  overflow-y: auto;
  /*
  > div {
  	margin: 8px 16px;
  }
  */
}
.dialog-box .dialog-body ul, .dialog-box .dialog-body ol {
  text-align: left;
}
.dialog-box .dialog-body button {
  display: inline-block;
}
.dialog-box button {
  background-color: #00634d;
  color: white;
}
.dialog-box button:first-child {
  background-color: #009982;
}

.inset-double {
  margin: 0px 32px;
}

.card {
  background-color: white;
  color: black;
  border: solid 2px #e31b23;
  margin: 0px auto;
  -webkit-box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.5);
          box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.5);
  max-width: 500px;
}
.card .card-header, .card .card-footer {
  background-color: #e31b23;
  color: white;
  font-weight: bold;
  font-size: 120%;
  text-align: center;
  padding: 4px 16px;
}
.card .card-body {
  padding: 2px 16px;
}
.card .card-body > div {
  margin: 8px 16px;
}
.card .card-body .instructions {
  background-color: rgba(190, 192, 194, 0.25);
  padding: 2px 16px;
  font-size: 80%;
}
.card .card-body input[type=text] {
  font-weight: bold;
}
.card .card-body button {
  background-color: #00634d;
  color: white;
  margin-top: 16px;
  margin-bottom: 16px;
}
.card .card-body button:first-child {
  background-color: #009982;
}

#main-nav.calendar #main-help > div:not(#help-calendar),
#main-nav.events #main-help > div:not(#help-events),
#main-nav.rota #main-help > div:not(#help-rota),
#main-nav.history #main-help > div:not(#help-history) {
  display: none;
}

#modal:not(.dialog) #dialog-modal,
#modal:not(.busy) #busy-modal {
  display: none;
}

html.no-touch-events::-webkit-scrollbar {
  width: 12px;
  background-color: rgba(0, 0, 0, 0.2);
}

html.no-touch-events::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
}

html.touch-events::-webkit-scrollbar {
  width: 0px;
  background-color: rgba(0, 0, 0, 0.2);
}

html, body {
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  overscroll-behavior: none;
}

body {
  -webkit-touch-callout: none !important;
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.clickable {
  cursor: pointer;
}

.mobile-header {
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 0px;
}
.mobile-header .mobile-menu-bar {
  background-color: #e31b23;
  color: white;
  display: table;
  width: 100%;
}
.mobile-header .mobile-menu-bar div {
  display: table-row;
}
.mobile-header .mobile-menu-bar div div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.mobile-header .mobile-menu-bar div div:first-child, .mobile-header .mobile-menu-bar div div:last-child {
  width: 1px;
}
.mobile-header .mobile-message-area {
  display: none;
  color: gold;
  font-size: 80%;
  text-align: justify;
  border-radius: 0px 0px 8px 8px;
  padding: 8px 16px;
  margin: 0px 8px 0px 8px;
  background-color: #e31b23;
  -webkit-box-shadow: 0 0 8px #000;
          box-shadow: 0 0 8px #000;
}

.mobile-footer {
  position: absolute;
  width: 100%;
  z-index: 1;
  bottom: 0px;
}
.mobile-footer .mobile-tab-bar {
  background-color: #911712;
}

.mobile-tab-tip-area > div {
  color: #FFF;
  font-size: 80%;
  text-align: justify;
  border-radius: 8px 8px 0px 0px;
  padding: 8px 16px;
  margin: 0px 24px 0px 24px;
  -webkit-box-shadow: 0 0 8px #000;
          box-shadow: 0 0 8px #000;
  border: solid 2px #e31b23;
  border-bottom: none;
  background-color: #e31b23;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(227, 27, 35, 0.9)), color-stop(50%, rgba(227, 27, 35, 0.9)), to(#e31b23));
  background: -o-linear-gradient(top, rgba(227, 27, 35, 0.9) 0%, rgba(227, 27, 35, 0.9) 50%, #e31b23 100%);
  background: linear-gradient(to bottom, rgba(227, 27, 35, 0.9) 0%, rgba(227, 27, 35, 0.9) 50%, #e31b23 100%);
}

.mobile-tab-tip-area > div:first-child {
  margin-left: 0px;
  margin-right: 48px;
  border-top-left-radius: 0px;
  border-left: none;
}

.mobile-tab-tip-area > div:last-child {
  margin-right: 0px;
  margin-left: 48px;
  border-top-right-radius: 0px;
  border-right: none;
}

.mobile-tab-tip-area > div > div {
  display: table-cell;
  vertical-align: middle;
}

.mobile-tab-tip-area > div > div:first-child {
  padding-right: 8px;
}

.mobile-tab-tip-area p {
  margin: 0;
}

.mobile-tab-bar {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.mobile-tab-bar > div {
  background-color: #911712;
  color: white;
  display: table-cell;
  position: relative;
  border-radius: 0px 0px 8px 8px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  padding: 8px 8px 6px 8px;
  width: 0px;
}

.mobile-tab-bar > div:first-child {
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}

.mobile-tab-bar > div:last-child {
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}

.mobile-tab-bar > div.pressed {
  background-color: #e31b23;
  color: white;
}

mobile-tab-bar [data-badge]:after {
  position: absolute;
  background-color: gold;
  color: #911712;
  font-weight: bold;
  border-radius: 50%;
  top: -4px;
  right: 8px;
  width: 20px;
  height: 20px;
  padding-top: 5px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  content: attr(data-badge);
}

#fab-area {
  position: relative;
}

#save-fab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  width: 64px;
  height: 64px;
  position: absolute;
  background-color: #e31b23;
  border: solid 2px white;
  border-radius: 50%;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  color: white;
  left: -100%;
  bottom: 12px;
  -webkit-box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
  -webkit-transition: left 1000ms ease-in-out;
  -o-transition: left 1000ms ease-in-out;
  transition: left 1000ms ease-in-out;
}
#save-fab i {
  display: block;
}

#flag.model-has-changed #save-fab {
  left: 10px;
}

.spin {
  -webkit-animation: spin-icon 2s infinite linear;
          animation: spin-icon 2s infinite linear;
  animation-direction: reverse;
}

.reverse {
  animation-direction: reverse;
}

#flag.saving #save-fab {
  background-color: gold;
  color: black;
}
#flag.saving #save-fab-icon {
  display: none;
}

#flag:not(.saving) #saving-fab-icon {
  display: none;
}

@-webkit-keyframes spin-icon {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

@keyframes spin-icon {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 12, 2018, 3:27:43 AM
    Author     : AW
*/
#templates, .template {
  display: none;
}

.disabled, [disabled] {
  opacity: 0.35 !important;
  font-style: italic !important;
  pointer-events: none !important;
}

body.bg-calendar-page {
  background: #bec0c2;
  /* Old browsers */
  /*
  background: -moz-linear-gradient(top, #AAAAAA 0%, #EEEEEE 100%);
  background: -webkit-linear-gradient(top, #AAAAAA 0%,#EEEEEE 100%);
  background: linear-gradient(to bottom, #AAAAAA 0%,#EEEEEE 100%);
  */
}

body.bg-events-page {
  background: #bec0c2;
  /*
  background: -moz-linear-gradient(225deg, #E3C9B3 0%, #CCCCCC 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #CCCCCC), color-stop(100%, #E3C9B3));
  background: -webkit-linear-gradient(225deg, #E3C9B3 0%, #CCCCCC 100%);
  background: linear-gradient(225deg, #E3C9B3 0%, #CCCCCC 100%);
  */
}

body.bg-rota-page {
  background: #bec0c2;
  /*
  background: -moz-linear-gradient(315deg, #B1E3B4 0%, #CCCCCC 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #B1E3B4), color-stop(100%, #CCCCCC));
  background: -webkit-linear-gradient(315deg, #B1E3B4 0%, #CCCCCC 100%);
  background: linear-gradient(135deg, #B1E3B4 0%, #CCCCCC 100%);
  */
}

body.bg-history-page {
  background: #bec0c2;
  /*
  background: -moz-linear-gradient(top, #666666 0%, #a9aeb2 100%);
  background: -webkit-linear-gradient(top, #666666 0%,#a9aeb2 100%);
  background: linear-gradient(to bottom, #666666 0%,#a9aeb2 100%);
  */
}

#flag:not(.uppercaseFound) .uppercaseFound,
#flag:not(.lowercaseFound) .lowercaseFound,
#flag:not(.numeralFound) .numeralFound,
#flag:not(.symbolFound) .symbolFound {
  visibility: hidden;
}

/* Calendar specific__________________________________________________________*/
#calendar-page {
  /*.calendar .context-menu-icon { position: absolute; color: #FFF; right: 0px; top: 0px; padding: 6px 8px;}*/
}
#calendar-page .month-name {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
}
#calendar-page .day-names {
  font-weight: bold;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 80%;
}
#calendar-page .calendar {
  position: relative;
  background-color: #009982;
}
#calendar-page .calendar > table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#calendar-page .calendar > table tr.week > td {
  position: relative;
  padding: 0px;
  border: solid 1px #888;
  background-color: #FFF;
  background-image: url(../svg/date_cell.svg);
  background-size: 100% 100%;
}
#calendar-page .calendar > table tr.week > td:nth-child(6), #calendar-page .calendar > table tr.week > td:nth-child(7) {
  background-color: rgba(255, 255, 255, 0.75);
}
#calendar-page .calendar > table tr.week > td > div {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 2px 4px;
  font-weight: bold;
  text-shadow: 0px 1px 1px #fff;
}
#calendar-page .calendar > table tr.week > td > .check-mark {
  display: block;
  width: 100%;
  margin: 0px;
}
#calendar-page .calendar > table tr.week > td.dead-date {
  background-color: #31b5aa;
  background-image: none;
}
#calendar-page .calendar > table tr.week > td.past-date > div {
  opacity: 0.25;
  font-weight: lighter;
}
#calendar-page .calendar > table tr.week > td.past-date > .check-mark {
  opacity: 0.25;
}
#calendar-page .calendar > table tr.week > td.active-date > div {
  text-decoration: underline;
}

/* Events & rota pages________________________________________________________*/
.event-card .tab-left {
  text-align: left;
}
.event-card .tab-left .tab-area {
  text-align: left;
}
.event-card .tab-left .tab {
  display: inline-block;
  border-radius: 4px 8px 0 0;
  font-size: 125%;
  background-color: #009982;
  color: white;
}
.event-card .tab-right {
  text-align: right;
}
.event-card .tab-right .tab-area {
  text-align: right;
}
.event-card .tab-right .tab {
  display: inline-block;
  border-radius: 8px 4px 0 0;
  font-size: 125%;
  text-align: right;
  background-color: #009982;
  color: white;
}
.event-card .event-description {
  position: relative;
  text-align: left;
  background-color: #009982;
  color: white;
}
.event-card .event-description .flag {
  position: absolute;
  right: 4px;
  bottom: 0px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75);
  /*
  text-shadow: 1px 1px 6px rgba(255,255,255,0.5);
  */
}
.event-card .event-description .flag i {
  font-size: 200%;
}
.event-card .card-body {
  background-color: white;
}
.event-card .notes {
  background-color: #009982;
  color: white;
  font-size: 80%;
}
.event-card td.date-left-side {
  text-align: right;
  width: 10%;
  white-space: nowrap;
  padding-left: 16px;
  padding-right: 0px;
}
.event-card td.date-right-side {
  text-align: left;
  width: 10%;
  white-space: nowrap;
  padding-left: 0px;
  padding-right: 8px;
}
.event-card table {
  border-collapse: collapse;
}
.event-card table tbody > tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}
.event-card td.check-box {
  text-align: right;
  width: 15%;
}

.rota-card {
  /*
  .confirmed-overall {
  	text-align: center;
  	background-color: $theme-primary;
  	color: $theme-blank;
  	font-weight: bold;
  	font-variant: small-caps;
  	&.alt {
  		background-color: unset;
  		> div {
  			background-color: $theme-primary;
  			padding: 0.2ex 1ex;
  		}
  	}
  }
  */
}
.rota-card .tab-left {
  text-align: left;
}
.rota-card .tab-left .tab-area {
  text-align: left;
}
.rota-card .tab-left .tab {
  display: inline-block;
  border-radius: 4px 8px 0 0;
  font-size: 125%;
  background-color: #009982;
  color: white;
}
.rota-card .tab-right {
  text-align: right;
}
.rota-card .tab-right .tab-area {
  text-align: right;
}
.rota-card .tab-right .tab {
  display: inline-block;
  border-radius: 8px 4px 0 0;
  font-size: 125%;
  text-align: right;
  background-color: #009982;
  color: white;
}
.rota-card .event-description {
  position: relative;
  text-align: right;
  background-color: #009982;
  color: white;
}
.rota-card .event-description .flag {
  position: absolute;
  left: 4px;
  bottom: 0px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75);
  /*
  text-shadow: 1px 1px 6px rgba(255,255,255,0.5);
  */
}
.rota-card .event-description .flag i {
  font-size: 200%;
}
.rota-card .card-body {
  background-color: white;
}
.rota-card .status {
  background-color: rgba(0, 153, 130, 0.3);
  color: black;
  text-align: center;
  font-size: 1.2;
  padding-top: 6px;
  padding-bottom: 6px;
  font-weight: bold;
}
.rota-card .notes {
  background-color: #009982;
  color: white;
  font-size: 80%;
}
.rota-card td.date-left-side {
  text-align: right;
  width: 10%;
  white-space: nowrap;
  padding-left: 16px;
  padding-right: 0px;
}
.rota-card td.date-right-side {
  text-align: left;
  width: 10%;
  white-space: nowrap;
  padding-left: 0px;
  padding-right: 8px;
}
.rota-card table {
  border-collapse: collapse;
  width: 100%;
}
.rota-card table tbody > tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}
.rota-card td.check-box {
  position: relative;
  text-align: right;
  vertical-align: bottom;
  width: 15%;
  max-width: 64px;
  padding-bottom: 0.5ex;
}
.rota-card td.check-box.confirmed > div {
  position: relative;
  font-size: 0.9em;
}
.rota-card td.check-box.confirmed > div:after {
  content: "CONFIRMED";
  position: absolute;
  top: calc( calc(100% * 0.5) - 1em);
  right: 100%;
  background-color: #e31b23;
  color: white;
  font-weight: bold;
  padding: 0.1ex 1ex 0.2ex 1ex;
  border-radius: 1ex;
  border: solid 2px white;
  -webkit-box-shadow: 2px 4px 8px rgba(227, 27, 35, 0.5);
          box-shadow: 2px 4px 8px rgba(227, 27, 35, 0.5);
}

td.check-box img.check-mark {
  width: 100%;
  max-width: 64px;
  height: auto;
}

#stop-offers-button {
  background-color: gold;
  color: black;
  margin-bottom: 16px;
  margin-top: 16px;
}

/* Events & rota pages________________________________________________________*/
.history-card {
  background-color: white;
}
.history-card .description {
  font-size: 70%;
  background-color: black;
  color: white;
}
.history-card table {
  border-collapse: collapse;
  width: 100%;
  font-size: 70%;
}
.history-card table tr th:nth-child(1) {
  text-align: left;
}
.history-card table tr th:nth-child(2) {
  text-align: center;
}
.history-card table tr th:nth-child(3) {
  text-align: center;
}
.history-card table tr th:nth-child(4) {
  text-align: right;
}
.history-card table tr th:nth-child(5) {
  text-align: right;
}
.history-card table tr th:nth-child(6) {
  text-align: center;
}
.history-card table tr td:nth-child(1) {
  text-align: left;
}
.history-card table tr td:nth-child(2) {
  text-align: right;
}
.history-card table tr td:nth-child(3) {
  text-align: center;
}
.history-card table tr td:nth-child(4) {
  text-align: left;
}
.history-card table tr td:nth-child(5) {
  text-align: center;
}
.history-card table tr td:nth-child(6) {
  text-align: right;
}
.history-card table tr td:nth-child(7) {
  text-align: right;
}
.history-card table tr td:nth-child(8) {
  text-align: center;
}
.history-card table tbody > tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}
.history-card footer {
  font-size: 70%;
  text-align: right;
}
.history-card .notes {
  background-color: black;
  color: white;
}

div.offer-breakdown {
  padding: 8px 0px 8px 16px;
}

div.offer-breakdown > div {
  display: table;
}

div.offer-breakdown > div > div {
  display: table-row;
}

div.offer-breakdown > div > div > div {
  display: table-cell;
}

div.offer-breakdown .label {
  text-align: right;
  font-weight: bold;
}

/*
// The animation code
@keyframes example {
    from {background-color: rgba( 255, 0, 0, 1);}
    to {background-color: rgba( 255, 255, 0, 0);}
}

// The element to apply the animation to 
.flash-selected {
    background-color: #BDF;
    animation-name: example;
    animation-duration: 2s;
}
*/
.confirm-button {
  display: inline-block;
  background-color: #009982;
  color: white;
  margin: 16px;
}

.reject-button {
  display: inline-block;
  background-color: #00634d;
  color: white;
  margin: 16px;
}

.flash-selected {
  background-color: #FF8 !important;
}

.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.selectable {
  -webkit-transition-property: background;
  -o-transition-property: background;
  transition-property: background;
  -webkit-transition-duration: 0.5s;
       -o-transition-duration: 0.5s;
          transition-duration: 0.5s;
  -webkit-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
}

.selected, .selected- {
  background-color: #FF0 !important;
  -webkit-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

.selected-y {
  background-color: #8F8 !important;
  -webkit-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

.selected-n {
  background-color: #F84 !important;
  -webkit-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

#content-area {
  position: relative;
  max-width: 1200px;
  min-height: 100%;
  margin: 0 auto;
}

#password-page input[type=text] {
  background-color: gold;
}

.validate {
  -webkit-transition-property: background;
  -o-transition-property: background;
  transition-property: background;
  -webkit-transition-duration: 0.5s;
       -o-transition-duration: 0.5s;
          transition-duration: 0.5s;
  -webkit-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
}

.invalid {
  background-color: #f40;
  -webkit-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

.mdi {
  font-size: 24px;
}

#personalinfo-content {
  /*
  > div {
  	margin-top: 1em;
  }
  */
}
#personalinfo-content h1 {
  margin: 0px;
  padding: 0px;
}
#personalinfo-content .explaination {
  color: #009982;
  padding: 1ex;
  border: solid 1px #009982;
  border-radius: 0.5ex;
  font-size: 80%;
  font-style: italic;
}
#personalinfo-content > .form-layout {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: [left-side] auto [right-side];
  grid-template-columns: [left-side] auto [right-side];
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  margin-bottom: 2em;
}
#personalinfo-content > .form-layout > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
#personalinfo-content > .form-layout > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
#personalinfo-content > .form-layout > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
#personalinfo-content > .form-layout > .subheading {
  -ms-grid-column: left-side;
      grid-column-start: left-side;
  -ms-grid-column-span: NaN;
  grid-column-end: right-side;
  text-align: left;
  padding: 0.5ex 1ex;
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
  background-color: #009982;
  color: white;
  margin-left: -1ex;
  margin-right: -1ex;
}
#personalinfo-content > .form-layout > .subheading:not(:first-child) {
  margin-top: 1.25em;
}
#personalinfo-content label {
  display: block;
  font-weight: bold;
  color: #009982;
  margin-top: 1ex;
}
#personalinfo-content table {
  width: 100%;
  border-spacing: 1ex;
  padding: 0px;
  border: none;
}
#personalinfo-content table th > div {
  text-align: left;
  padding: 0.5ex 1ex;
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
  background-color: #009982;
  color: white;
  margin-left: -1ex;
  margin-right: -1ex;
}
#personalinfo-content table td {
  text-align: left;
  vertical-align: top;
}
#personalinfo-content table td:first-child {
  width: 10%;
  white-space: nowrap;
}
#personalinfo-content textarea, #personalinfo-content input[type=text], #personalinfo-content input[type=email] {
  width: 100%;
  overflow: hidden;
  resize: none;
  padding: 1ex 1em;
  border: solid 1px #009982;
  border-radius: 1ex;
  background-color: rgba(0, 153, 130, 0.05);
}
#personalinfo-content textarea:-moz-placeholder-shown, #personalinfo-content input[type=text]:-moz-placeholder-shown, #personalinfo-content input[type=email]:-moz-placeholder-shown {
  font-style: italic;
}
#personalinfo-content textarea:-ms-input-placeholder, #personalinfo-content input[type=text]:-ms-input-placeholder, #personalinfo-content input[type=email]:-ms-input-placeholder {
  font-style: italic;
}
#personalinfo-content textarea:placeholder-shown, #personalinfo-content input[type=text]:placeholder-shown, #personalinfo-content input[type=email]:placeholder-shown {
  font-style: italic;
}
#personalinfo-content textarea.invalid, #personalinfo-content input[type=text].invalid, #personalinfo-content input[type=email].invalid {
  color: red !important;
  border-color: red !important;
}
#personalinfo-content input[validate=sortcode] {
  width: 4em;
  text-align: center;
}

@media only screen and (min-width: calc($narrow-width + 1)) {
  #personalinfo-content .form-layout {
    -ms-grid-columns: [left-side] minmax(9em, 1fr) [center-line] 7fr [right-side];
    grid-template-columns: [left-side] minmax(9em, 1fr) [center-line] 7fr [right-side];
  }
  #personalinfo-content .form-layout > div {
    margin-top: 0.5ex;
    margin-bottom: 0.5ex;
  }
}
#healthinfo-content > div {
  margin-top: 1em;
}
#healthinfo-content label {
  display: block;
  font-weight: bold;
  color: #009982;
}
#healthinfo-content textarea, #healthinfo-content .textinputbox {
  width: 100%;
  overflow: hidden;
  resize: none;
  padding: 1ex 1em;
  border: solid 1px #009982;
  border-radius: 1ex;
  background-color: rgba(0, 153, 130, 0.05);
}
#healthinfo-content textarea:-moz-placeholder-shown, #healthinfo-content .textinputbox:-moz-placeholder-shown {
  font-style: italic;
}
#healthinfo-content textarea:-ms-input-placeholder, #healthinfo-content .textinputbox:-ms-input-placeholder {
  font-style: italic;
}
#healthinfo-content textarea:placeholder-shown, #healthinfo-content .textinputbox:placeholder-shown {
  font-style: italic;
}
#healthinfo-content input[type=date] {
  padding: 1ex;
  border: solid 1px #009982;
  border-radius: 1ex;
  background-color: rgba(0, 153, 130, 0.05);
}
#healthinfo-content input[type=checkbox] {
  margin-top: 1ex;
  width: 2em;
  height: 2em;
  background-color: rgba(0, 153, 130, 0.05);
}
#healthinfo-content hr {
  border-color: #009982;
}
#healthinfo-content .consent-box {
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: solid 1px #009982;
  border-radius: 1ex;
  background-color: rgba(0, 153, 130, 0.05);
  padding: 1em;
}
/*# sourceMappingURL=app.css.map */