@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght@300;400;700&display=swap');

.App {
  background-color: #282c34;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  margin-top: 0.5rem;
}
.App.Admin {
  margin-top: 0;
}

.App-link {
  color: #61dafb;
}

.App .container,
.App .container-fluid {
  background-color: #4b505a6b;
  border-radius: 0.3rem;
  padding: 2rem;
}

@media only screen and (max-width : 500px) { 
  .App .container {
    padding: 0.5rem!important;
  }
  .vom-rating-arrow {
    border-width: 0.5rem 6rem 0px 0!important;
  }
}

.App section {
  display: flex;
  flex-direction: column;
}

button:disabled,
button.disabled {
  cursor: not-allowed;
};

h1 {
  font-family: 'Open Sans' , sans-serif;
  font-weight: 900;
}

form {
  display: flex;
  flex-direction: column;
}

form button {
  align-self: flex-end;
}

.text-muted {
  color: #b7c3ce!important;
}

.custom-switch {
  display: flex;
}

.custom-control-label {
  display: flex;
  align-items: center; 
}

.custom-control-label h6 {
  margin-bottom: 0!important;
}

#vom-intro p,
#vom-terms p {
  text-align: justify;
}
#vom-associations-list {
  display: flex; 
}

.vom-remove-association {
  padding: 0;
  border: 0;
  color: #F2F2F2;
  font-size: 0.7rem;
  line-height: 1rem;
}

.vom-rating {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  justify-items: center;
  align-items: center;
}

.vom-rating ~ .is-invalid {
  display: block;
}

.vom-rating-label.is-invalid,
.vom-rating-value label.is-invalid {
  color: #dc3545;
}
.vom-rating-label.is-valid,
.vom-rating-value label.is-valid {
  color: #28a745
}
.vom-rating-value {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vom-rating-value label {
  margin: 0;
}

.vom-rating-arrow-container {
  grid-column: 3 / span 3;
  grid-row: 1;
}

.vom-rating-arrow {
  width: 100%;
  height: 0;
  border-style: solid;
  border-width: 0.5rem 10rem 0px 0;
  border-color: transparent #6c757d transparent transparent;
}

.vom-draw-reminder {
  font-size: 0.9rem;
}

#magic-canvas,
#vom-admin-canvas,
#vom-heatmap-canvas {
  width: 100%;
  background-color: #F2F2F2;
  background-image: url('merseyside-nobg-4_5-LIGHT.png');
  background-position: top left;
  background-size: contain;
  background-repeat: no-repeat;
}

#magic-canvas.border-success {
  border-width: 4px!important;
}

#vom-drawing-canvas {
  position: relative;
}

#vom-drawing-canvas button {
  align-self: flex-end;
}

#vom-canvas-tools {
  display: flex;
  justify-content: space-between;
}

#vom-canvas-mode {
  position: absolute;
  top: 3.5rem;
  left: 0.5rem;
  color: #282c34;
  text-transform: uppercase;
  font-size: 0.8rem;
}

#vom-progress-bar {
  width: 100%;
  height: 0.5rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background-color: #6c757d;
  position: fixed;
  top: 0;
  z-index: 99;
}

.vom-progress-page {
  width: 0;
  transition: width 500ms ease-in-out;
}

.vom-progress-page.progress-done {
  background-color: #17a2b8;
  width: 100%;
}

.uva-terms li {
  flex-basis: 30%;
}

.uva-terms li img {
  width: 100%;
}