body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(20, 20, 20);
  overflow: hidden;
}
@keyframes loadingBoi{
  from {opacity: 0;}
  to {opacity: 1;}
}

.fade-in-right{-webkit-animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}

.fade-in-right-bar{-webkit-animation:fade-in-right 1s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes fade-in-right-bar{0%{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right-bar{0%{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}

.fade-in-bottom{-webkit-animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}



.sampleImage1{animation-delay: 1000ms;}
.sampleImage2{animation-delay: 1100ms;}
.sampleImage3{animation-delay: 1200ms;}
.sampleImage4{animation-delay: 1300ms;}
.sampleImage5{animation-delay: 1400ms;}
.sampleImage6{animation-delay: 1000ms;}
.sampleImage7{animation-delay: 1100ms;}
.sampleImage8{animation-delay: 1200ms;}
.sampleImage9{animation-delay: 1300ms;}
.sampleImage10{animation-delay: 1400ms;}

#pred1{animation-delay: 0s;}
#pred2{animation-delay: .1s;}
#pred3{animation-delay: .2s;}
#pred4{animation-delay: .3s;}
#pred5{animation-delay: .4s;}

.titleContainer{
  color: white;
  height:8vh;
}

#logoImage{
  height: 10vh;
  position: absolute;
  left: 1vw;
  top: 1vw;
}
.titleBlock {
  margin: 2vh;
  font-size: 3vw;
  margin-bottom: 0;
}
#vertLine{
  border-left: .1vh solid white;
  margin-top: 4vw;
  position: relative;
  z-index: 9999;
}

#masterReferenceContainer{
  animation-delay: .5s;
  animation-play-state: paused;
}

.cropper-center:before,
.cropper-center:after {
  background-color: #999;
}

.fakeImage{
  background-color: rgb(31, 31, 31);
  height: 16.5vh;
  width: 16.5vh;
  border: .7vh solid rgb(31,31,31);
  outline: .3vh solid rgb(0, 85, 118);
  border-radius: 1vw;
}

.sampleImageRow {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#aboutPage{
  display: flex;
  justify-content: space-around;
}



.aboutSampleImage{
  width: 12vw;
  height: 12vw;
}
#sampleImageRow1{
  padding: 4vh 0 2vh 0;
}

#finishedCropsContainer{
  width: 95%;
  height: 8vw;
  margin: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #515151;
  border-radius: 1vw;
  
}

#sampleImageRow2{
  padding: 2vh 0 4vh 0;
}

#dummyButton{
  color: white;
  font-size: 2vw;
  margin-top: 8vh;
  margin-bottom: 3vh;
  padding: 1.5vh 1.5vw;
  background-color: rgb(0, 119, 255);
  border: none;
  border-radius: 1vw;
  cursor: pointer;
}

#dummyButton:hover {
  background-color: rgb(1, 102, 218);
  box-shadow: 0 0 1.5vw .1vh rgba(49, 145, 255, 0.54);
}

#imageAreaHeader{
  color: white;
  margin: 8vh 0 5vh 0;
  text-align: center;
  font-size: 3vw;
}

#predictionAreaHeader{
  color: white;
  margin: 0 0 1vh 0;
  font-size: 3vw;
  margin-left: 3vw;
  animation-play-state: paused;
}

.prediction{
  font-size: 6vh;
  text-align: center;
  background-color: rgb(31, 31, 31);
  width: 5vw;
  padding: 0 1vw;
  color: white;
  box-shadow: 0 0 1vw .1vh rgba(255, 255, 255, 0.525);
  border-radius: 4vh;
  position: relative;
  cursor:pointer;
}

.activePrediction{
  outline: .2vh solid rgb(255, 121, 31);
  text-shadow: 0 0 1vh rgb(255, 121, 31);
  box-shadow: 0 0 2vw .1vw rgb(255, 121, 31);
}

#sampleImageContainer{
  border: .5vh double rgb(0, 85, 118);
  border-radius: 2vw;
  z-index: 2;
  background-color: rgb(31, 31, 31);
  animation-delay:.5s;
  animation-play-state: paused;
}
#testImage{
  display: block;
  /* This rule is very important, please don't ignore this */
  width: 100%;
}

#sampleImageHeader{
  padding: 2vh 0 0 2.5vw;
  margin-top: 0;
  margin-bottom: 0;
  color: white;
  font-size: 4vh;
  animation-delay: .5s;
  animation-play-state: paused;
  position: relative;
  z-index: 5;
}

#sampleImageHeaderText{
  background-color: rgb(31, 31, 31);
  padding: 1vh 2vh 0 2vh;
  border-top-left-radius: 1vh;
  border-top-right-radius: 1vh;
  border: .5vh double rgb(0, 85, 118);
  border-bottom: .7vh solid rgb(31, 31, 31);
}

#headerCover {
  background-color: rgb(31, 31, 31);
  position: absolute;
  top: 6.5vh;
  padding: 1vh 2vh 0 2vh;
  color:transparent;
  font-size: 2vh;
  z-index: unset;
}

.ifcc{
  width: 7vw;
  height: 7vw;
  position: relative;
  border: .1vh solid white;
  border-radius: 2vh;
}

.finishedCrop{
  object-fit: fill;
  width: 100%;
  height: 100%;
  position:relative;
  border-radius: 2vh;
  z-index: 3;
}

.inactiveDone{
  background-color: #999 !important;
  pointer-events: none;
}

.finishedCrop[src=""]{
  display:none;
}

.questionImageButton{
  color:white;
  width: 10vh;
  height:5vh;
  margin:0;
  font-size: 4vh;
  border-top-left-radius: 2vh;
  border-top-right-radius: 2vh;
  background-color: #5c5c5c;
  display:inline-block;
  position: relative;
  cursor:pointer;
}

.questionImageButton p{
  margin: 0;
}

#demoButton{
  color: white;
  font-size: 2vw;
  margin-top: 8vh;
  margin-bottom: 3vh;
  margin-left: 1vw;
  padding: 1.5vh 1.5vw;
  background-color: rgb(255, 102, 0);
  border: none;
  border-radius: 1vw;
  cursor: pointer;
}

#demoButton:hover{
  background-color: rgb(221, 89, 1);
  box-shadow: 0 0 1.5vw .1vh rgba(255, 159, 49, 0.54);
}

.activeQuestion{
  background-color: #999;
  z-index: 3;
}

.questionImageButton:before, .questionImageButton:after, 
.questionImageButton p:before, .questionImageButton p:after {
  position: absolute;
  bottom: 0;
}

.finalQuestion:after,   .finalQuestion p:after,
.questionImageButton:first-child:before, .questionImageButton:first-child p:before,
.activeQuestion:after,   .activeQuestion:before, 
.activeQuestion p:after, .activeQuestion p:before {
  content: "";
}
.questionImageButton:before, .questionImageButton:after {
  background: #5c5c5c;
  width: 1vh;
  height: 1vh;
}

.activeQuestion:before, .activeQuestion:after {
  background: #999; 
  
  /* Squares below circles */
  z-index: 1;
}


.questionImageButton:before {
  left: -1vh;      
}
.questionImageButton:after { 
  right: -1vh;
}
/* Circles */
.questionImageButton p:after, .questionImageButton p:before {
  width: 2vh; 
  height: 2vh;
  /* Circles are circular */
  -webkit-border-radius: 1vh;
  -moz-border-radius:    1vh;
  border-radius:         1vh;
  background: rgb(20, 20, 20);
  
  /* Circles over squares */
  z-index: 2;
}
.activeQuestion p:after, .activeQuestion p:before {
  background: #5c5c5c;
}
/* First and last tabs have different
   outside color needs */
.questionImageButton:first-child.activeQuestion p:before,
.finalQuestion.activeQuestion p:after {
  background: rgb(20, 20, 20);
}
.questionImageButton p:before {
  left: -2vh;
}
.questionImageButton p:after {
  right: -2vh;
}

#loadingContainer{
  position: absolute;
  top: 30vh;
  color: rgba(255, 255, 255, 0.386);
  width:100%;
  font-size: 10vh;
  text-align: center;
  margin:auto;
  opacity: 0;
  animation: loadingBoi;
  animation-duration: 1000ms;
  animation-delay: 600ms;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

#aboutContainer{
  position: absolute;
  right: 1vw;
  top: 2vh;
}

#aboutContainer a{
  color: white;
  font-size: 3vh;
}

#aboutTextContainer{
  width: 60vw;
  margin:auto;
  display:flex;
  flex-direction: column;
  margin-top: 3vh;
  margin-bottom:0;
  color: white;
  font-size: 3vh;
  line-height: 130%;
}

.aboutImageBoi{
  margin-top: 0;
  position: fixed;
  top: 0;
  width: 18vw;
  height: 100vh;
  overflow: hidden;
}

.rightImage{
  right:0;
}

.aboutImageBoi img{
  width: 18vw;
}

.aboutText{
  text-indent: 5%;
}

.kanjiText{
  font-size: 3vh;
}

.aboutHeader{
  font-size: 5vh;
  border-bottom: 1px solid white;
  display: inline-block;
}

#cropPopupContainer {
  background-color: rgb(180, 180, 180);
  position: relative;
  border-radius: 1vw;
  margin-bottom: 10vh;
  max-height: 70vh;
  width: 25vw;
  box-shadow: 0px 0px 1px 100vw rgba(0, 0, 0, 0.895);
}

#cropImageContainer{
  display: inline-block;
  width: 22vw;
  max-height: 40vh;
  margin: 1.5vw 1.5vw 0 1.5vw;
}

.cropDeleteButton{
  width: 4vh;
  height: 4vh;
  font-size: 3vh;
  position: absolute;
  color: white;
  background-color: #999;
  right: -2vh;
  top: -2vh;
  z-index: 4;
  border-radius: 1vw;
  cursor: pointer;
}
#cropPopupHeader{
  font-size: 3vw;
  color: white;
  margin: 0 0 2vh 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

#submitCropButton{
  color: white;
  background-color: rgb(0, 185, 12);
  border-radius: .5vw;
  font-size: 1.5vw;
  padding: .5vw;
  border: none;
  margin: 2vh 1vw 2vh 0;
  cursor: pointer;
}

.tooltipAlert{
  position: absolute;
  background-color: #0091ff;
  height: 4vh;
  color: rgb(255, 255, 255);
  width: 4vh;
  font-size: 3.5vh;
  top:-1vh;
  right: -1vh;
  border-radius: 5vh;
  z-index: 100;
}

.tooltipText{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.5vh;
  font-size: .4em;
  width: 37vh;
  right: -10vh;
  top:-7vh;
  background-color: #4a4a4a;
  border-radius: 1vh;
  opacity: 0;
  transition: opacity 350ms;
}

.tooltipAlert:hover + .tooltipText{
  opacity: 1;
}

#addCropButton{
  color: white;
  background-color: rgb(40, 172, 255);
  border-radius: .5vw;
  font-size: 1.5vw;
  padding: .5vw;
  border: none;
  margin: 2vh 1vh 2vh 1vw;
  cursor: pointer;
}

#cropPopupArea{
  position: absolute;
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  top:0;
  left:0;
  z-index: 999;
}

#exampleArea{
  width:35vw;
  height:100vh;
  position: relative;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#exampleHeader{
  font-size: 3vw;
    color: white;
    text-align: center;
    margin: 2vh 0 4vh 0;
    border-bottom: 1px solid white;
}

.exampleHeader{
  color: white;
  font-size: 5vh;
  text-align: center;
}

.exampleContainer{
  width: 10vw;
}

#goodBadContainer{
  width: 25vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5vh;
}

.goodExampleImage{
  box-shadow: 0 0 1vw 0.3vw green;
}

.badExampleImage{
  box-shadow: 0 0 1vw 0.3vw rgb(242, 17, 17);
}

.exampleImage{
  width:10vw;
  height:10vw;
  margin-bottom: 5vh;
  object-fit: fill;
  border-radius: 1vh;
}

#finishedCropArea{
  width:35vw;
  position: relative;
  z-index: 1000;
  height:100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#finishedCropAreaHeader{
  color: white;
  font-size: 5vh;
  margin: 0 0 2vh 2vw;
  text-align: left;
}

.ifccLabel {
  position: absolute;
  top:0;
  left:0;
  color:rgba(249, 250, 250, 0.393);
  margin:0;
  width: 100%;
  height:100%;
  text-align: center;
  font-size:6vw;

}

#preloadContainer {
  display: none;
}

.hidden {
  display: none !important;
}

#showImage{
  width: 95%;
  height: 95%;
  object-fit: fill;
  border: 2vh solid rgb(20, 20, 20);
  border-radius: 1vw;
  margin:auto;
  border:none;
  display: none;
}

#imageArea{
  width: 35vw;
}
#file{
  display: none;
}
#predictionArea{
  position: relative;
  justify-content: center;
  width: 55vw;
  margin-left: 5vw;
  margin-right: 5vw;
}

#predictionAreaPlaceholder{
  justify-content: center;
  text-align: center;
  width: 49vw;
  margin-left: 8vw;
  margin-right: 8vw;
  margin-top: 8vh;
  font-size: 5vw;
  color: rgba(255, 255, 255, 0.386);
}

#applicationArea {
  display: flex;
  flex-direction: row;
}
#questionImageHolder{
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45vh;
  border-radius: 1vw;
  border: .2vw solid #999;
}
#questionImageSelectionBar{
  position: absolute;
  display: flex;
  top: -5vh;
  width: 45vh;
  justify-content: center;
  margin: auto;
  text-align: center;
}

#questionContainer{
  margin:auto;
  margin-top: 11vh;
  position:relative;
  height: 45vh;
  width:45vh;
}

#predictionTopBar {
  display: flex;
  width: 90%;
  z-index: 1;
  margin: auto;
  height:8.5vh;
  margin-bottom: 8.5vh;
  justify-content: space-between;
}
#horizontalBar{
  border-top: .1vh solid white;
  margin:auto;
  margin-bottom: 8vh;
  width:90%;
  animation-delay: 500ms;
  animation-play-state: paused;

}
#dragAndDropLabel{
  color: rgba(255, 255, 255, 0.198);
  font-size: 3.5vw;
  font-weight: bold;
  text-align: center;
  padding: 2vh 1vw 0vh 1vw

}
#fileHolder{
  display: flex;
  height:10vh;
  margin: none;
  align-items: center;
  justify-content: center;
}