@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&family=Poppins&family=Roboto:wght@400;500;700&display=swap');

body {
  background-image: url('https://firebasestorage.googleapis.com/v0/b/eyeseeu-22ad4.appspot.com/o/ishihara-page%2Fishihara-test-blue-bg.jpg?alt=media&token=c902e814-1bc3-48e4-b658-2ccf795b2bc0');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#loader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: 9999;
}

.pill-navbar *,
.tab-container *,
.feature-optician *{
  font-family: 'Roboto', sans-serif;
}

.pill-navbar {
  padding-left: 6.25em;
  padding-right: 6.25em;
}

.tab-container .active {
  display: block;
}

.tab-container .inactive {
  display: none;
}

.tab-container {
  margin-left: 6.25em;
  margin-right: 6.25em;
}

.ishihara .nav {
  background-color: #2F67D5;

}

.ishihara .nav-link {
  color: white;
}

.ishihara .nav-link:active {
  background-color: #18A0FB;
  color: white;
}

.ishihara-plate-img {
  height: 50vh;
  width: 100%;
  object-fit: cover;
  object-position: center;
  object-fit: scale-down;
  transition: 200ms ease-in-out;
}

#overlay {
  position: fixed;
  opacity: 0;
  transition: 200ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

#overlay-light {
  position: fixed;
  opacity: 0;
  transition: 200ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

#overlay.active {
  opacity: 1;
  pointer-events: all;
}

#overlay-light.active {
  opacity: 1;
  pointer-events: all;
}

.optionBtn.btn.active {
  background-color:#FD8647;
  color: black;
  border: none;
}
.optionBtn {
  background-color:#2F67D5;
  color: white;
  border: none;
}
.optionBtn:hover {
  background-color: #FD8647;
  color: black;
  border: none;
}

.feature-optician {
  background-color: #2F67D5;
  padding: 3em 6.25em;
  text-justify: distribute;
}

.zoom-plate {
  overflow: hidden;
}

.zoom-plate img {
  transition: all 1s ease;
}

.zoom-plate:hover img {
  transform: scale(1.25);
}

.ishihara-text-gradient {
  background: linear-gradient(to right, #3B12E2, #2ad2e4, transparent);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.table-container {
  position: relative;
}
.table-container thead {
  position: sticky;
  top: 0;
}
/* Add a scrollbar to the table body */
.table-container tbody {
  overflow-y: scroll;
}

@media screen and (max-width: 576px) {
  
  .tab-container {
    margin-left: 1.25em;
    margin-right: 1.25em;
    margin-top: 1.25em;
  }
  .pill-navbar {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }
  .feature-optician {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }
  .ishihara-plate-img {
    height: 40vh;
  }
  .tab-pane .tab-content {
    padding-left: 1em !important;
    padding-right: 1em !important;
  }

}

@media screen and (max-width: 768px) {
  .display-right-panel {
    padding-top: 10px !important;    
  }
  .display-right-panel h5 {
    text-align:center;
  }
  .display-right-panel .options {
    justify-content: center !important;
    margin-bottom: 10px !important;
  }
  .question-message {
    text-align:center;
  }
}

@media screen and (max-width: 870px) {
  .nav-pills,
  .nav-link {
    flex-direction: column;  
    border-radius:5px !important;  
  }
  .info-container {
    padding: 1em 1em !important;
  }
}