body {
  font-family: sans-serif;
}

.container1, .container2,.container3 {
  display: flex;
  flex-direction:  column;
  justify-content: center;
  max-width: 512px;
  margin: 0 auto;
  margin-top: 100px;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#progresscircle{
  position: absolute;
  width: 256px;
  height: 256px;
  left: 50%;
  top: 50%;
  margin-left: -128px; /* half of the width */
  margin-top: -128px; /* half of the height */
  animation: rotation 10s infinite linear;
  transform: translate(-50%, -50%);
  display: none;
}

.container1{
  margin-top: 100px;
}

.container2{
  margin-bottom: 100px;
}


.item {
  width: 100%;
  margin-bottom: 10px;
}


.loginblock {
  width: 100%;
}

input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  font-size: 18px;
}

button {
  background-color: #008CBA; /* Green */
  border: none;
  color: white;
  padding: 10px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  cursor: pointer;
}

a {
  font-size: 18px;
  color: #008CBA;
  text-decoration: none;
}

.overlayparent{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;

}

.button{
  position: absolute;
  bottom: 10px;
  margin: 0 auto;
}

#pagelogo{
  position: fixed;
  top: 35px;
  left: 20px;
}

#buttonbar{
  position: fixed;
  bottom: 10px;
  width: 100%;
  max-width: 512px;
  height: 60px;
  left: 50%;
  transform: translate(-50%);
}

#cameraButton{
  position: absolute;
  bottom: 10px;
  width: 50px;
  height: 50px;
  left: 10%;
  border-radius: 5px;
  transform: translate(-50%);
}

@keyframes bounce {
  0% { transform: translate(-50%,0); }
  50% { transform: translate(-50%,-8px); }
  100% { transform: translate(-50,0); }
}

#help1{
  position: absolute;
  bottom: 70px;
  width: 50px;
  height: 50px;
  left: 10%;
  border-radius: 5px;
  transform: translate(-50%);
  animation: bounce 1s infinite linear;
  display: none;
}


.showblock{
  display: block !important;
}

#setstyle{
  position: absolute;
  bottom: 10px;
  width: 50px;
  height: 50px;
  left: 50%;
  border-radius: 50px;
  transform: translate(-50%);
}

#help2{
  position: absolute;
  bottom: 70px;
  width: 50px;
  height: 50px;
  left: 50%;
  border-radius: 5px;
  transform: translate(-50%);
  animation: bounce 1s infinite linear;
  display: none;
}


#zazzleme{
  position: absolute;
  bottom: 10px;
  width: 50px;
  height: 50px;
  left: 90%;
  transform: translate(-50%);

}

.grayout{
  filter: grayscale(100%);
}

#help3{
  position: absolute;
  bottom: 70px;
  width: 50px;
  height: 50px;
  left: 90%;
  border-radius: 5px;
  transform: translate(-50%);
  animation: bounce 1s infinite linear;
  display: none;
}


#configurator{
  position: fixed;
  bottom: 0px;
  top: 0px;
  width: 101%;
  max-width: 512px;
  left: 50%;
  transform: translate(-50%);
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  visibility: hidden ;
}

#settings{
  position: fixed;
  bottom: 0px;
  top: 0px;
  width: 100%;
  max-width: 512px;
  left: 50%;
  transform: translate(-50%);
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  visibility: hidden ;
}

#settingsbtn{
  position: fixed;
  top: 35px;
  width: 50px;
  height: 50px;
  right: 20px;
  border-radius: 50px;
}

#settingscontainer{
  margin-left: 10px;
  margin-top: 25px;
  max-width: 70%;
}

.settingsheader{
  color: deeppink;
}

.selectorGroup{
  margin-left: 10px;
}

.selectorImage{
  border: 1px dotted gray;
  border-radius: 10px;
  margin-left: 10px;
  width: 50px;
  height: 50px;
}

.selectorImageActive{
  border-radius: 10px;
  border: 1px solid deeppink;
  box-shadow: 0px 0px 5px 5px rgba(0,117,255,0.35);
}



.visible{
  visibility: visible !important;
}


#loginsignuperror,#passwordsignuperror{
  margin-left: 10px;
  color: deeppink;
  display: none;
}


.loginlink{
  padding-left: 12px;
}