App.css

body, html {
  box-sizing: border-box;
  margin: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, html, #root, .outer {
  max-height: 100vh;
}

.gridContainer {
  display: grid;
  grid-template-rows: 1fr 8fr;
  grid-template-columns: 1fr;
  background: #ffffff;
  overflow: auto;
  border-radius: 10px;
  background-color: rgb(86, 86, 86);
  max-height: 100vh;
}

.viewerContainer {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: 3fr 1fr;
  overflow: auto;
}

.view {
  grid-column: 1 / 2;
  min-height: 0px;
  min-width: 0px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgb(78, 96, 113);
  position: relative;
  display: grid;
  grid-template-columns: 2fr 38fr 2fr;
  grid-template-rows: 1fr;
}

.prev-slice {
  height: 100%;
  grid-column: 1 / 2;
  display: flex;
  z-index: 150;
}

.prev-slice>img {
  align-self: center;
  margin: 0 auto;
  transform: translateY(-24px);
  padding: 16px 2px 16px;
  cursor: pointer;
  opacity: 0.7;
  height: 3em;
}

.next-slice {
  height: 100%;
  grid-column: 3 / 4;
  display: flex;
  z-index: 150;
}

.next-slice>img {
  align-self: center;
  margin: 0 auto;
  transform: translateY(-24px);
  padding: 16px 2px 16px;
  cursor: pointer;
  opacity: 0.7;
  height: 3em;
}

.navigator {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    overflow: scroll;
	padding-top: 5px;
}

.carouselContainer {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    overflow: visible;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 24fr 1fr;
}

.leftArrow {
    grid-row: 1 / 2;
    grid-column : 1 / 2;
    display: flex;
}

.leftArrow>img {
    align-self: center;
    margin: 0 auto;
    padding: 1em 0px 1em;
    cursor: pointer;
    height: 26px;
    z-index: 1;
}

.rightArrow {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    display: flex;
}

.rightArrow>img {
    align-self: center;
    margin: 0 auto;
    padding: 1em 0px 1em;
    cursor: pointer;
    height: 26px;
    z-index: 1;
}

.thumb-wrapper{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 5px;
  margin-bottom: auto;
}

::-webkit-scrollbar {
    display: none;
}

.card {
    flex: 0 0 auto;
    margin-left: 0.4em;
    cursor: pointer;
}

.card-left {
    flex: 0 0 auto;
    cursor: pointer;
}

.card-selected>img {
    border: 2px solid rgb(7, 189, 250)
}

.thumb-img {
  width: 102px;
  height: 82px;
  border: 2px solid transparent;
   -webkit-transition : border 200ms ease-out;
  -moz-transition : border 200ms ease-out;
  -o-transition : border 200ms ease-out;
  transition : border 200ms ease-out;
}

.label {
  color: white;
  font-family: 'Corbel', sans-serif;
  font-size: 15px;
  margin-right: 3em;
  margin-top: 3px;
  margin-bottom: 4px;
  padding-left: 1em;
  padding-bottom: 1px;
  cursor: pointer;
}

.label.active {
  color: rgb(0, 190, 255);
}

.mri {
  border-top: 3px solid rgb(78, 96, 113);
  border-bottom: 3px solid rgb(78, 96, 113);
  border-right: 3px solid rgb(78, 96, 113);
  cursor: pointer;
}

.imageContainer {
  grid-column: 2/3;
  grid-row: 1/2;
}

@media (orientation: landscape) {
  .imageContainer>img{
    height: 100%;
    overflow-y: hidden;
  }
}

@media (orientation: portrait) {
  .imageContainer>img{
    width: 100%;
    overflow-y: scroll;
  }
  .view {
    overflow-x: hidden;
    overflow-y: scroll;
    grid-template-rows: 1fr 3fr;
  }
}
@media screen and (max-width: 480px) {
	.label {
	 font-size: 14px;
	}
}
.mainImage {
  position: absolute;
  z-index: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.overlayImage {
  position: absolute;
  z-index: 99;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}