html {
	  height: 100%;
  }
  body {
	  margin: 0;
	  font-family: Roboto, Arial;
	  position: relative;
	  height: 100%;
  }
  .block {
	  width: 100%;
	  position: relative;
  }
  .logo {
	  max-height: 75%;
	  top: 8px;
	  right: 24px;
	  position: absolute;
  }
  .title {
	  color: white;
	  font: 26px/75px Roboto, Arial;
	  text-align: center;
  }
  .block-1 {
	  width: 100%;
	  background-color: red;
	  height: 75px;
	  position: relative;
  }
  .block-2 {
	  background-color: #808080;
	  height: 60px;
  }
  .block-2 > div > div {
	  width: 49%;
	  text-align: center;
	  display: inline-block;
	  color: white;
	  font: 20px/60px Roboto, Arial;
  }
  .block-3 {
	  padding: 40px 0;
	  background-color: white;
	  position: relative;
  }
  .month {
	  font: bold 26px/34px Roboto, Arial;
  }
  .calendar, .message {
	  max-width: 600px;
	  margin: 0 auto;
	  position: relative;
	  opacity: 0;
	  transition: opacity 0.6s linear;
	  max-height: 0px;
	  overflow: hidden;
  }
  .calendar.displayed, .message.displayed {
	  opacity: 1;
	  max-height: 100%;
  }
  
  .message {
	  font-size: 26px;
	  text-align: center;
	  display: grid;
	  height: 400px;
	  align-content: center;
  }
  
  .weekdays, .week {
	  text-align: justify;
	  -ms-text-justify: distribute-all-lines;
	  text-justify: distribute-all-lines;
	  font: bold 20px/14px Roboto, Arial;
  }
  .weekdays:after, .week:after {
	  content: "";
	  width: 100%;
	  display: inline-block;
	  font-size: 0;
	  line-height: 0;
  }
  
  .week {
	  display: none;
  }
  .week.active {
	  display: flex;
  }
  .date {
	  display: inline-block;
	  text-align: center;
	  font: 22px/24px Roboto, Arial;
	  cursor: pointer;
	  /* max-width: 50px; */
	  display: inline-block;
	  vertical-align: top;
	  padding: 0 29px;
  }
  
  .date:hover > .date-inner {
	  background-color: #80808080;
	  color: white;
  }
  
  .date-inner {
	  border: 1px solid #F6F6F6;
	  border-radius: 100px;
	  padding: 10px 0;
  }
  .date.selected > .date-inner {
	  background-color: red;
	  color: white;
	  border: 1px solid red;
	  font-weight: bold;
  }
  
  .time.selected {
	  background-color: red;
	  color: white;
	  border: 1px solid red;
	  font-weight: bold;
  }
  .date.disabled {
	  pointer-events: none;
	  opacity: 0.4;
  }
  .times {
	  min-height: 300px;
  }
  .time-container {
	  padding: 10px;
  }
  .time-container > div:hover {
	  background-color: #80808080;
	  color: white;
	  border:  1px solid #80808080;
  }
  .time, .time-range {
	  min-width: 70%;
	  border: 1px solid black;
	  margin: 0 auto;
	  cursor: pointer;
	  max-width: 150px;
	  text-align: center;
  }
  
  .number-controls {
	  display: flex;
  }
  
  .number-controls .prev {
	  top: 95px;
	  cursor: pointer;
	  background-image: url(right-arrow.png);
	  background-position: center;
	  background-size: cover;
	  -webkit-transform: rotate(180deg);
	  -moz-transform: rotate(180deg);
	  -ms-transform: rotate(180deg);
	  -o-transform: rotate(180deg);
	  transform: rotate(180deg);
	  height: 30px;
	  width: 30px;
	  opacity: 1;
  }
  .number-controls .next {
	  top: 95px;
	  cursor: pointer;
	  background-image: url(right-arrow.png);
	  background-position: center;
	  background-size: cover;
	  height: 30px;
	  width: 30px;
	  opacity: 1;
  }
  .number-controls div.inactive {
	  /*display: none;*/
	  opacity: 0.2;
	  pointer-events: none
  }
  .result {
	  min-height: 65px;
	  text-align: center;
  }
  .result-label {
	  padding: 3px 0;
	  display: none;
	  font: bold 18px Roboto, Arial;
  }
  .result-label.displayed {
	  display: block;
  }
  .text {
	  padding: 5px 0;
	  font: bold 22px Roboto, Arial;
	  color: red;
  }
  .button {
	  text-align: center;
	  width: 100%;
	  background-color: #80808080;
	  color:  white;
	  font: 24px/46px Roboto, Arial;
	  border:  1px solid #80808080;
	  cursor: pointer;
	  pointer-events: none;
	  opacity: 0.5;
	  margin-bottom: 80px;
  }
  
  .button.active {
	  background-color:  red;
	  color: white;
	  pointer-events: auto;
	  opacity: 1;
	  border: 1px solid red;
  }
  
  .button.active:hover {
	  color: red;
	  background-color: white;
  }
  
  .button-container {
	  margin-top: 40px;
  }
  
  .time-block {
	  display: none;
  }
  .time-block.visible {
	  display: block;
  }
  
  .time-range.disabled {
	  pointer-events: none;
	  opacity: 0.4;
  }
  
  .tb1.hidden, #loader.hidden {
	  display: none!important;
  }
  
  .plate-number {
	  background: white;
	  color: black;
	  width: fit-content;
	  margin: auto;
	  line-height: 40px;
	  border-radius: 6px;
	  border: 2px solid black;
	  padding: 0 15px;
  }
  
  .footer {
	  align-items: center;
	  position: fixed;
	  bottom: 0;
	  height: 80px;
	  background-color: #41464b;
	  width: 100%;
	  padding: 10px 0;
	  color: white;
  }
  
  .copyright {
	  width: 100%;
	  display: inline-flex;
	  justify-content: center;
	  font-size: 12px;
  }
  
  .links {
	  justify-content: center;
	  width: 100%;
	  display: inline-flex;
	  font-size: 22px;
  }
  
  .actual-link {
	  text-decoration: none;
	  color: white;
	  font-size: 19px;
	  padding: 0 10px;
	  line-height: 35px;
	  cursor: pointer;
  }
  
  .actual-link:hover {
	  color: red;
  }
  
  .calendar-top {
	  display: flex;
	  justify-content: space-between;
	  padding: 0 0 40px;
  }
  
  .deleteButtonsContainer {
	  display: inline-flex;
	  justify-content: space-between;
	  margin-top: 50px;
  }
  
  .deleteButtonsContainer > button {
	  max-width: 80%;
	  text-align: center;
	  /* color:  white; */
	  font: 22px/42px Roboto, Arial;
	  border: 0;
	  cursor: pointer;
	  background-color: red;
	  color: white;
	  pointer-events: all;
	  opacity: 1;
  }
  
  .confirmDateTime {
	  font-size: 32px;
	  line-height: 50px;
  }
  
  .deleteTooltip {
	  font-size: 16px;
	  margin-top: 15px;
  }
  
  /* bootstrap class overrides */
  .modal-header {
	  border-bottom: none;
  }
  
  .modal-footer {
	  border-top: none;
  }
  
  .modal-backdrop.show {
	  opacity: 0.75;
  }
  
  .btn-danger {
	  background-color: red;
  }
  
  @media only screen and (max-width: 905px) {
	  body {
		  min-height: 100%;
	  }
  
	  .calendar-top {
		  padding: 0 40px 40px;
	  }
  
	  .date {
		  padding: 5px;
	  }
  
	  .month {
		  text-align: center;
	  }
  
	  .block-3 {
		  padding: 30px 0;
	  }
  
	  .weekdays, .numbers {
		  padding: 0 40px;
	  }
  
	  .number-controls .prev {
		  /*left: 15px;*/
	  }
  
	  .number-controls .next {
		  /*right: 15px;*/
	  }
  
	  .logo {
		  max-width: 15%;
		  top: 23px;
		  right: 11px;
		  position: absolute;
	  }
  
	  .time, .time-range {
		  width: 65%;
	  }
  }
  
  #loader {
	position: absolute;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	width: 128px;
	height: 128px;
	border-radius: 50%;
	perspective: 800px;
  }
  
  .inner {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 50%;  
  }
  
  .inner.one {
	left: 0%;
	top: 0%;
	animation: rotate-one 1s linear infinite;
	border-bottom: 3px solid #FF0000;
  }
  
  .inner.two {
	right: 0%;
	top: 0%;
	animation: rotate-two 1s linear infinite;
	border-right: 3px solid #808080;
  }
  
  .inner.three {
	right: 0%;
	bottom: 0%;
	animation: rotate-three 1s linear infinite;
	border-top: 3px solid #000000;
  }
  
  @keyframes rotate-one {
	0% {
	  transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
	  transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
  }
  
  @keyframes rotate-two {
	0% {
	  transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
	  transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
  }
  
  @keyframes rotate-three {
	0% {
	  transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
	  transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
  }