:root {
  --activeColor: #aff81e;
  --turkoosi: #46c9c9;
}

div#loadBackground {
  background: var(--turkoosi)
}

p.camera-error {
  margin: auto;
  display: block;
  /* left: 50%; */
  width: fit-content;
  max-width: 300px;
  top: 50%;
  position: relative;
  background: white;
  padding: 5px 10px;
  border-radius: 3px;
  transform: translateY(-50%);
}

.hide-headers.ydd-yle-global-header, .hide-headers.ydd-footer {
	display: none;
}

/* Style for "Tap To Place Model" text overlay */
.over {
  z-index: 10;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  /* text-align: center; */
  color: black;
  font-family: "Nunito", monospace;
  /* text-shadow: 0px 0px 5px black; */
}
#guideBox {
  background-color: #46c9c9;
  border: 0.3em solid rgba(114, 21, 164, 1);
  color: white;
/*   margin: 0 auto; */
  width: auto;
  border-radius: 15px;
  /* padding: 0.25em; */
  padding-top: 0.25em;
  padding-right: 0.25em;
  padding-left: 0.15em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 1em;
  box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.2);
}

.container {
	display: flex;
	position: absolute;
	bottom: 2em;
	width: 90%;
	align-items: center;
	justify-content: space-between;
	left: 50%;
	transform: translateX(-50%);
}

#mark {
  margin-left: 0.15em;
  margin-right: 0.15em;
}

#promptText {
  text-align: center;
  font-size: large;
  margin-right: 0.1em;
  font-family: "happyhell";
  letter-spacing: 0.1rem;
}

#nextbutton {
  width: 25vw;
  height: auto;
  position: absolute;
  bottom: 6vh;
  left: 25vw;
  background-color: #ad50ff;
  border: 0.2em solid white;
  text-align: center;
  color: #fff;
  border-radius: 100px;
}
#nextbutton:active #idlebutton:active {
  background-color: white;
  color: #ad50ff;
}

#idlebutton {
  width: 10vw;
  height: auto;
  position: absolute;
  bottom: 6vh;
  left: 50vw;
  background-color: #ad50ff;
  border: 0.2em solid white;
  text-align: center;
  color: #fff;
  border-radius: 100px;
}

#walkbutton {
  width: 10vw;
  height: auto;
  position: absolute;
  bottom: 6vh;
  left: 80vw;
  background-color: #ad50ff;
  border: 0.2em solid white;
  text-align: center;
  color: #fff;
  border-radius: 100px;
}

#testbuttons {
  display: none;
}

#placebutton {
  height: auto;

  margin-right: 1.5em;
  text-align: center;
  color: white;
  float: right;
  cursor: pointer;
  z-index: 15;
}


#placebutton.disabled,
#speechbutton.disabled {
  display: none;
}

#ball[data-disabled="true"] {
  display: none;
}

.blooming-menu__container.disabled {
  opacity: 0.25;
}


.circle-button-style#placebutton.active {
  background: var(--activeColor);
}

.circle-button-style#placebutton.active svg {
  fill: var(--turkoosi);
}

#speechbutton {
  width: 10vw;
  max-width: 50px;
  height: auto;
  /* position: absolute; */
  background-color: #46c9c9;
  border: 0.3em solid rgba(114, 21, 164, 1);
  text-align: center;
  color: white;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
/*   margin: 0 auto; */
  pointer-events: all;
}

#speechDebugBox {
  width: auto;
  max-width: 400px;
  height: auto;
  position: absolute;
  bottom: 2vh;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: white;
  border: 0.2em solid white;
  text-align: center;
  color: #000000;
  padding: 10px;
  z-index: 1;
  display: none;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
}
/* 
      #speechbutton svg {
	fill: white;
      } */

#speechbutton.recordOn {
  animation: pulse 2s infinite;
   background-color: #d83d1e; 
  /* background: var(--turkoosi); */
  /* background: var(--activeColor); */
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* #speechbutton.recordOn svg {
	fill: red;
      } */

h2 {
  font-size: 1.3em;
  text-align: center;
  font-family: monospace;
}

/* <MODAALI> */

.modal-window {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.25);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  pointer-events: auto;
}
.modal-window.modal-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 999;
}
.modal-window > div {
  max-width: 400px;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2em;
  background: white;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  text-align: center;
  font-family: Nunito;
}

.scroll-area {
  overflow-y: auto;
  max-height: 25em;
} 

@media only screen and (max-height: 700px) {
  .scroll-area {
    max-height: 20em;
  } 
}

#guideBox.hint {
  width: 10em;
  justify-content: center;
  flex-direction: column;
}

#guideBox.centered {
	margin: 0 auto;
}

.modal-window h1 {
  font-size: 150%;
  margin: 0 0 15px;
}

.modal-window ul {
  list-style-type: square;
}

.modal-close {
  line-height: 50px;
  font-size: 120%;
  position: relative;
  text-decoration: none;
}

.modal-close:hover {
  color: gray;
}

.modal-header {
  letter-spacing: 0.2rem;
  font-family: 'happyhell';
  font-size: x-large;
  text-align: center;
}

.image.no-top-margin {
  margin-top: 0;
}

.emoji-bullet {
    list-style: none;
    padding: 0;
 
  }
  .emoji-bullet li {
    padding-left: 1em;
    text-indent: -0.75rem;
    font-family: 'happyhell';
    letter-spacing: 0.2em;
    font-size: large;
    display: inline;
    padding-right: 1em;
    margin-left: -1.6em;

  }
  .emoji-bullet li::before {
    content: "🐶 ";
  }


/* </MODAALI> */

iframe.upotus {
  border: 0px;
  margin-top: 0em;
  height: 17vh;
}

/*INPUT FIELD*/
#dogName {
  font-size: larger;
  width: 100%;
  padding: 12px 20px;
  margin: -5px 0;
  box-sizing: border-box;
  border-radius: 12px;
  border: 3px solid #46c9c9;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 500px;
}

#dogName:focus {
  border: 3px solid #9329c0;
}

#dogName::placeholder {
  text-align: center;
}

.noTopMargin {
  margin-top: 0px !important;
}

.tekijat p {
  margin: unset;
}

.image {
  width: 100%;
  max-width: 32.5em;
  height: auto;
  /* margin-top: 2em;  */
}

.hidden {
  display: none !important;
}

.show {
  display: inline-block;
}
#startscreen {
  min-height: -webkit-fill-available;
  z-index: 998;
  height: 100%;
  width: 100%;
  background-color: white;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-family: Arial, sans-serif;
}
.button-style {
  z-index: 999;
  width: 100%;
  max-width: 17em;
  height: auto;
  margin: auto;
  bottom: 0;
  background-color: #46c9c9;
  border: 0.3em solid rgb(114, 21, 164);
  text-align: center;
  color: #fff;
  border-radius: 25px;
  cursor: pointer;
  margin-top: 2em;
  position: relative;
  box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.2);
  transition: 0.25s ease-in-out 0s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
h2 {
  font-size: x-large;
  text-align: center;
  font-family: "happyhell";
  letter-spacing: 0.2rem;
}

#wuff-h2 {
  margin-top: 0;
}

.bg-color {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background: radial-gradient(
    circle,
    rgba(193, 254, 255, 0.2) 35%,
    rgba(13, 193, 184, 0.5) 100%
  );
}

.box {
  margin: auto;
  width: 85%;
  height: 95%;
  text-align: center;
  font-size: medium;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@font-face {
  font-family: "happyhell";
  src: url("assets/HappyHell2-Regular.otf");
}

.header-text {
  font-size: x-large;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.custom-radio-buttons div {
  display: inline-block;
}

/*default radiobuttoneiden piilotus, niin voi tehdä custom*/

input[type="radio"] {
  display: none;
}

.custom-radio-buttons label {
  display: inline-block;
  width: 4em;
  height: 4em;
  cursor: pointer;
  margin-left: 2em;
  margin-right: 2em;
  margin-top: 0.5em;
}

.custom-radio-buttons label span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 3px 3px 3px #cfcfcf;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  transition: 0.25s ease-in-out 0s;
}

label span.default {
  background-color: #cbb05e;
}

label span.dark {
  background-color: #2f2d26;
}

/*hover-efekti pois touch screeneiltä*/
@media (hover: hover) {
  label:hover span {
    transform: scale(1.2);
  }
  .button-style:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.5);
    transform: scale(1.05);
  }
}

input[type="radio"]:checked + label .default {
  border: 6px solid rgb(52, 196, 198);
}
input[type="radio"]:checked + label .dark {
  border: 6px solid rgb(52, 196, 198);
}

.fill-area {
  margin-top: 2.5em;
  width: 100%;
  max-width: 600px;
  font-size: 1em;
  font-weight: 400;
  font-family: "Nunito";
}

#throwstickbutton {
  --scale-value: 1;

  width: 50px;
  height: 50px;
  background-color: #fff;
  border: 10px solid #0066cc;
  border-radius: 50%;
  transform: scale3d(var(--scale-value), var(--scale-value), 1);
  transition: transform cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s;
  position: absolute;
  right: 20px;
  top: 100px;
  z-index: 3;
}
#throwstickbutton:active {
  border-color: #003a75;
  background-color: #f2f5ea;
}

#throwstickbutton:hover {
  background-color: #ccc;
  cursor: pointer;
}

.circle-button-style {
  margin-top: 2vh;
  margin-left: 2vh;
  background-color: rgb(52, 196, 198);
  border: 0.3em solid rgb(114, 21, 164);
  color: white;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  cursor: pointer;
}

.info-style {
  color: white;
  margin: auto;
  font-family: "happyhell";
  font-size: xx-large;
  text-align: center;
}

#infobutton.modal-open {
  z-index: 9999 !important;
}

.animate-fade-guide {
  animation-duration: 1s;
  animation-name: animate-fade-guide;
  animation-delay: 3s;
  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
}

@keyframes animate-fade-guide {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

.fade-animation {
  animation-duration: 1s;
  animation-name: fade;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
}

@keyframes fade {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

.qr-style {
  max-height: 5em;
  width: auto;
}