/* 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-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-size: cover;
  background-position: right center; }
 .aesop .app-container {
	 background-image: url(../img/wallpaper_nylon_blur_aesop.jpg);
 }

/* Root page visibility */
#nav.splash > .page:not(#splash-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.biometricconsent > .page:not(#biometricconsent-page),
#nav.biometricconsentlong > .page:not(#biometricconsentlong-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 .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; }

.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 {
  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;
}
*/
#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; }
  .aesop #login-page .logo {
	background-image: url(../img/aesop_logo.png);
  }
  #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); }

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: -moz-linear-gradient(top, rgba(227, 27, 35, 0.9) 0%, rgba(227, 27, 35, 0.9) 50%, #e31b23 100%);
  background: -webkit-linear-gradient(top, rgba(227, 27, 35, 0.9) 0%, rgba(227, 27, 35, 0.9) 50%, #e31b23 100%);
  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 {
  position: absolute;
  background-color: #e31b23;
  border: solid 2px #e23a28;
  border-radius: 50%;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  color: white;
  right: -100%;
  bottom: 16px;
  padding: 16px;
  -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: right 1000ms ease-out;
  -ms-transition: right 1000ms ease-out;
  -o-transition: right 1000ms ease-out;
  transition: right 1000ms ease-out; }
  #save-fab i {
    display: block; }

#flag.model-has-changed #save-fab {
  right: 16px; }

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

.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:26:57 AM
    Author     : AW
*/
/*
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; }

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 .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 {
  text-align: right;
  width: 15%; }

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; }

/*# sourceMappingURL=app.css.map */