:root {
  /* Colors: */
  --ppr-green: #498447;
  --ppr-yellow: #f9e41c;
  --ppr-orange: orange;
  --ppr-red: #e12530;
  --ppr-blue: cornflowerblue;
  --ppr-grey: #888;
}

@font-face {
  font-family: RobotoSlabRegular;
  src: url(../fonts/RobotoSlab-Regular.ttf);
}
@font-face {
  font-family: RobotoSlabBold;
  src: url(../fonts/RobotoSlab-Bold.ttf);
}
@font-face {
  font-family: LatoBold;
  src: url(../fonts/Lato-Bold.ttf);
}
@font-face {
  font-family: LatoRegular;
  src: url(../fonts/Lato-Regular.ttf);
}
html, body {
  font-family: LatoRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1:focus {
  outline: none;
}

h4 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 1vw;
}

th {
  text-align: center;
  padding: 0 0.2604166667vw;
}

.ppr-red {
  color: var(--ppr-red) !important;
}

.ppr-orange {
  color: var(--ppr-orange) !important;
}

.ppr-yellow {
  color: var(--ppr-yellow) !important;
}

.ppr-green {
  color: var(--ppr-green) !important;
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

.validation-message {
  color: #e50000;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

.header-client-name {
  text-align: center;
  font-size: 1.0416666667vw;
  line-height: 1.1458333333vw;
  font-weight: bold;
}

.header-logo {
  width: 85%;
}

.app-name-login {
  color: white;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.app-name {
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.app-version {
  color: white;
  font-size: 12pt;
  text-align: center;
  margin-top: -5px;
}

.login {
  width: 20vw;
  margin: auto;
}

.login-label {
  color: white;
  text-align: end;
  margin-top: 0.3125vw;
}

.login-link {
  color: white;
}

.login-link:hover {
  text-decoration: underline;
  cursor: pointer;
}

.login-button {
  border: 2px solid #dd2;
  border-radius: 2.0833333333vw;
  margin-left: auto;
  margin-right: auto;
  width: 4.1666666667vw;
  height: 4.1666666667vw;
  cursor: pointer;
  margin-top: 1.0416666667vw;
  background-color: transparent;
  color: white;
}

.login-form {
  width: 19.53125vw;
  height: 15.625vw;
  margin: 50px auto;
}

.login-prompt {
  color: white;
  width: 100%;
  margin: 0.78125vw auto;
  font-size: 0.9375vw;
  padding: 0.5208333333vw;
}

.login-text {
  padding-top: 1.4583333333vw;
  margin-left: -0.2604166667vw;
  color: white;
}

.loginInput {
  border: none;
  height: 2.3958333333vw;
  padding: 0.2604166667vw 1.3020833333vw;
  font-size: 14pt;
}

.login-wait {
  position: relative;
  left: 0.5208333333vw;
}

.login-logo {
  margin-bottom: 1.3020833333vw;
}

.login-header {
  padding: 0.5208333333vw;
  display: block;
  height: 7.8125vw;
  margin-top: 3.125vw;
}

.login-body {
  background-image: url("/images/Royal_Jubilee_Hospital_background.jpg");
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: darkblue;
  height: 100vh;
  padding: 0.5208333333vw;
  padding-bottom: 60px; /* Height of the footer */
}

.login-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: white;
  font-size: 1vw;
  margin: 0.5vw;
}

.nav-link {
  padding: 0.78125vw;
}

.top-row {
  height: 10.5rem !important;
}

.bottom-row {
  height: 7rem;
  padding: 0.5rem;
}

.ppr-button {
  color: white;
  background-color: cornflowerblue;
  padding: 0.5208333333vw;
  border-radius: 0.3125vw;
  text-align: center;
}

.ppr-button.disabled {
  background-color: #888;
  text-decoration: none !important;
  cursor: default !important;
}

.ppr-button:hover {
  text-decoration: underline;
  cursor: pointer;
}

.selected {
  background-color: red !important;
}

.building-box {
  width: 18.2291666667vw;
  height: 22vw;
  margin: 0.5208333333vw;
}

.building-name {
  font-size: 1.25vw;
  line-height: 1.4vw;
  margin-bottom: 0.2604166667vw;
  height: 3vw;
}

.building-img {
  width: 18.2291666667vw;
  height: 18.2291666667vw;
}

.select-brochure {
  padding: 0.2604166667vw;
  margin-bottom: 0.78125vw;
  display: block;
}

.pdf-viewer {
  height: 59.8958333333vw;
  width: 100%;
}

.page-text {
  padding: 2.6041666667vw;
}

.reporting-selection {
  margin: 0.78125vw 0;
}

.footprint-bubble {
  position: absolute;
  z-index: 1000;
  width: 1.35vw;
  height: 1.35vw;
  border-radius: 0.6770833333vw;
  background-color: white;
  text-align: center;
  border: 1px solid #444;
  padding: 0;
  vertical-align: middle;
  font-size: 1vw;
  line-height: 1.1vw;
}

.img-block {
  width: 32.8125vw;
  position: absolute;
}

.range-shaking {
  width: 100%;
  max-width: 100%;
  z-index: 1000;
  margin-top: 2.0833333333vw;
}

.legend-row {
  height: 1.5625vw;
}

.building-table {
  height: 30vw;
  font-size: 1vw;
}

.details-div {
  height: 41vw;
  padding-left: 10px;
}

.colour-def-list {
  margin-bottom: 0;
}

.colour-def-table {
  margin: 1vw 0;
  font-size: 0.8vw;
}

.building-num {
  width: 2vw;
}

.bar-ofc-container {
  height: 13.0208333333vw;
  width: 2.6041666667vw;
  float: left;
  margin-left: 1.3020833333vw;
}

.bar-green {
  background-color: green;
  width: 2.6041666667vw;
  float: left;
  z-index: 100;
}

.bar-yellow {
  background-color: yellow;
  width: 2.6041666667vw;
  float: left;
  z-index: 100;
}

.bar-orange {
  background-color: darkorange;
  width: 2.6041666667vw;
  float: left;
  z-index: 100;
}

.bar-red {
  background-color: #E50019;
  width: 2.6041666667vw;
  float: left;
  z-index: 100;
}

.bar-blue {
  background-color: lightblue;
  width: 2.6041666667vw;
  float: left;
  z-index: 100;
}

.bar-black {
  background-color: black;
  width: 1.0416666667vw;
  margin-left: 0.78125vw;
  position: relative;
  z-index: 500;
}

.bar-label {
  text-align: center;
  font-size: 18px;
}

.slider-blue {
  accent-color: auto;
}

.slider-green {
  accent-color: #498447;
}

.slider-yellow {
  accent-color: #f9e41c;
}

.slider-orange {
  accent-color: orange;
}

.slider-red {
  accent-color: #e12530;
}

.ofc-label-container {
  float: left;
  margin-left: 0.2604166667vw;
  height: 13.0208333333vw;
  position: relative;
}

.results-panel {
  padding: 0.78125vw;
  border: 1px solid #aaa;
}

.label-ppr {
  position: absolute;
  line-height: 0.625vw;
  font-size: 0.625vw;
}

.building-event-date {
  font-size: 0.7291666667vw;
  text-align: center;
  width: 100%;
  margin-bottom: 0.5208333333vw;
}

.ppr-building-name {
  margin-top: 0.78125vw;
  font-size: 1.09375vw;
  line-height: 0.9375vw;
  text-align: center;
  width: 100%;
}

.ppr-result {
  width: 7.8125vw;
  display: flex;
  flex-direction: column;
  margin: 2.6041666667vw auto;
}

.bar-container {
  width: 2.6041666667vw;
  float: left;
  margin-left: 2.6041666667vw;
}

.label-container {
  float: left;
  margin-left: 0.2604166667vw;
  position: relative;
}

.building-select {
  margin-top: 5.2083333333vw;
}

.form-row {
  margin-bottom: 0.5vw;
}

.admin-button {
  width: fit-content;
  margin: 0 auto;
}

.div-earthquake {
  margin-bottom: 0.5rem;
  width: fit-content;
}

.select-label {
  margin: 0 0.2604166667vw;
  display: inline-block;
}

.earthquake-table {
  font-size: 1vw;
}

.current-eq {
  font-weight: bold;
  display: inline-block;
  padding: 10px;
  border: 2px solid cornflowerblue;
}

.footprint {
  height: 600px;
  margin-left: 80px;
}

.footprint-overlay {
  max-width: 520px;
  max-height: 600px;
  position: absolute;
  object-fit: contain;
  width: 100%;
}

.footprint-labels {
  position: absolute;
  width: 300px;
}

.div-earthquake-details {
  max-width: 27.34375vw;
  margin: auto;
}

.pin-grey {
  background-color: var(--ppr-grey);
}

.pin-blue {
  background-color: var(--ppr-blue);
}

.pin-green {
  background-color: var(--ppr-green);
}

.pin-yellow {
  background-color: var(--ppr-yellow);
}

.pin-red {
  background-color: var(--ppr-red);
}

.school-label {
  margin-left: 5px;
  margin-top: -6px;
}

.school-label-left {
  margin-right: 5px;
  margin-top: -6px;
}

.performance-data {
  position: relative;
  margin: 15px;
}

.map {
  position: relative;
  height: 750px;
}

.map-image {
  position: absolute;
}

.img-map {
  object-fit: none;
  z-index: 50;
  position: absolute;
}

.select-container {
  margin-top: 20px;
}

.pin-container {
  position: absolute;
  z-index: 500;
  margin-top: 75px;
}

.facility-pin {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  border: 1px solid #222;
}

.facility-label {
  margin-left: 5px;
  margin-top: -6px;
  width: 100px;
  font-weight: 800;
}

.pin-grey {
  background-color: var(--ppr-grey);
}

.pin-blue {
  background-color: var(--ppr-blue);
}

.pin-green {
  background-color: var(--ppr-green);
}

.pin-yellow {
  background-color: var(--ppr-yellow);
}

.pin-red {
  background-color: var(--ppr-red);
}

.event-button {
  color: white;
  background-color: var(--ppr-blue);
  margin: 0 10px;
  border-radius: 5px;
}

.footprint-container {
  position: relative;
  width: 600px;
}

.block-label {
  color: white;
  z-index: 1000;
  position: relative;
}

.school-select {
  margin-top: 40px;
}

.reporting-form {
  margin-top: 40px;
}

.text-gm {
  width: 80px;
}

.priority-header {
  font-size: 1.5rem;
}

.summary-table {
  width: 400px;
}

.div-link {
  color: blue !important;
  margin: 0 5px;
  display: inline;
  position: relative;
  z-index: 10;
}

.div-link:hover {
  text-decoration: underline;
  cursor: pointer;
}

.radio-label {
  margin-left: 5px;
  margin-right: 15px;
}

.school-name {
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

.border-button {
  padding: 8px;
  border: 1px solid blue;
  border-radius: 5px;
}

.legend {
  display: inline-block;
  max-width: 500px;
  margin-right: 10px;
}

.blazored-modal {
  z-index: 500;
  position: relative;
}

.button-row {
  margin-top: 10px;
}

/* The Modal (background) */
.dialog-bg {
  position: fixed; /* Stay in place */
  z-index: 600; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.dialog-contents {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 450px;
}

.div-block-photo {
  text-align: center;
}

.block-photo {
  height: 170px;
}

.block-names {
  width: 300px;
}

.user-table {
  display: block;
  margin: auto;
  height: 90vh;
  overflow: scroll;
}

.diagnostics-image {
  width: 80%;
}

.div-past-eq {
  margin-top: 20px;
}

.eq-title {
  font-weight: bold;
}

.td-past-eq {
  padding: 0 0.3vw;
}

.safe-thresholds-box {
  width: 15vw;
  border: 2px solid cornflowerblue;
  margin: 5vw 10vw 0 0;
  float: right;
}

.safe-thresholds-title {
  color: white;
  background-color: cornflowerblue;
  font-weight: bold;
  text-align: center;
  padding: 5px;
}

.safe-threshold-image {
  object-fit: contain;
  width: 100%;
}