/* -------------------------------------------------------- */
body {
  padding: 1% 0%;
  background-color: rgb(170, 187, 204, 0.05);
  color: rgb(52, 58, 64);
  overflow: hidden;
}
#outer_container {
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  max-width: 1280px;
  position: relative;
}

/* -------------- Header ------------------------------------------ */
/*
header {
	border-bottom: 1px solid #ddd;
}
*/
#controls a {
  display: inline-block;
}
#controls a i {
  color: rgb(52, 58, 64);
}

/* -------------- Main ------------------------------------------ */
#main {
  max-width: 1280px;
}
#canvas_container {
  height: auto;
  padding: 0% 4% 2cqw;
}
#inner_container {
  /* height: 55%; */
  overflow-y: hidden;
}
#container_wrapper {
  width: inherit;
  height: inherit;
}
#inner_container img {
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  max-width: 100%;
  height: auto;
  margin: 20px 0px;
}
ol li {
  margin: 10px;
}

/* -------------------------------------------------------- */
.btn-move-down:active {
  transform: translateY(4px);
  transition: 0.3s;
}
.text-just {
  text-align: justify;
}

/* -------------- Scroll Bars ------------------------------------------ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: rgb(109, 117, 125, 0.7);
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgb(109, 117, 125, 0.8);
}
::-webkit-scrollbar-thumb:active {
  background-color: rgb(109, 117, 125);
}

/*
* {
	font-size: calc(0.7vmin + 0.04rem);
}
*/
#image-wrapper {
  position: relative;
  margin: auto;
}
#image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.main-img {
  object-fit: contain;
  width: 100%;
  height: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#image_wrap.is-zoomed {
  left: 0px !important;
}
#MyImage {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
  cursor: crosshair;
}

#MyImage.fade-out {
  opacity: 0;
}

#clickable {
  border: 3px solid #73af55;
  position: absolute;
  opacity: 0;
}

.clickable-0 {
  bottom: 6.5%;
  left: 3%;
  height: 7%;
  width: 16%;
}
.clickable-1 {
  bottom: 4%;
  left: 3%;
  height: 5%;
  width: 13%;
}

.clickable-2 {
  bottom: 4%;
  left: 5.5%;
  height: 7%;
  width: 15%;
}
#progress-container {
  gap: 10px;
  z-index: 10;
}
#progression {
  font-size: 0.9em !important;
}

#bar {
  height: 30px;
  width: 120px;
  border-radius: 10px;
  border: 2px solid rgb(226, 226, 226);
  overflow: hidden;
  box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.75);
}

#progress {
  height: 100%;
  background-color: #507d3b;
  width: 0;
  transition: 0.3s;
}

#scs-message {
  color: #507d3b;
  font-weight: 600;
  transform: scaleX(0);
  transition: 0.3s;
  transition-delay: 0.9s;
  transform-origin: top left;
}

#progress-container svg {
  width: 30px;
  height: 30px;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}
.circle {
  -webkit-animation: dash 0.9s ease-in-out;
  animation: dash 0.9s ease-in-out;
}
.line {
  stroke-dashoffset: 1000;
  -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
  animation: dash 0.9s 0.35s ease-in-out forwards;
}
.check {
  stroke-dashoffset: -100;
  -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
  animation: dash-check 0.9s 0.35s ease-in-out forwards;
}
/** Mobile **/

.mobile #progression {
  position: relative;
  top: 15%;
}

.mobile #clickable {
  border: 2px solid #73af55;
}
.btn-zoom {
  z-index: 1000;
}
.bg-green, .bg-green:hover {
	background-color: #507d3b;
	color: #f5f5f5;
}

@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}

@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
