@charset "UTF-8";
body.page-template-template-aloita-pilvipalvelu .hero-sec .row.extrasmall {
  min-height: 25vh !important;
}
body.page-template-template-aloita-pilvipalvelu .hero-sec .hero-content h1,
body.page-template-template-aloita-pilvipalvelu .hero-sec .hero-content p {
  color: #fff !important;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.368627451) !important;
}

#steps {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  text-align: center;
  position: relative;
}
#steps:before {
  content: "";
  height: 1px;
  width: 100%;
  top: 25px;
  left: 0;
  background: rgb(233, 233, 233);
  position: absolute;
  z-index: 0;
}
#steps:after {
  content: "Vaihe 1 - Y-tunnus";
  display: block;
  margin: 20px auto 0px;
  font-size: 25px;
  font-weight: 300;
  text-align: center;
}
#steps .step {
  width: 30%;
  text-align: center;
  display: inline-block;
  position: relative;
  /*&.step1:before {
    content: "Y-tunnus";
  }
  &.step2:before {
    content: "Yhteystiedot";
  }
  &.step3:before {
    content: "";
  }*/
}
#steps .step:before {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 0;
  color: #000;
  font-size: 15px;
  z-index: 2;
  opacity: 0;
  width: 100%;
  text-align: center;
}
#steps .step span {
  width: 50px;
  height: 50px;
  background: #c9c9c9;
  position: relative;
  z-index: 1;
  color: #000000;
  display: inline-block;
  margin: 0px 5px;
  padding-top: 10px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}
#steps .step:nth-child(1) span {
  background: #93c94a;
  color: #fff !important;
}
#steps .step:nth-child(1):before {
  opacity: 1;
}
#steps.step2 span.step2 span {
  background: #93c94a;
  color: #fff !important;
}
#steps.step2:after {
  content: "Vaihe 2 - Yrityksen tiedot";
}
#steps.step2.step3 span.step2 span,
#steps.step2.step3 span.step3 span {
  background: #93c94a;
  color: #fff !important;
}
#steps.step2.step3:after {
  content: "";
}
#steps.step2.step3.fail:after {
  content: "Käytön aloitus epäonnistui.";
}
#steps.step2.step3.success:after {
  content: "Valmis";
}

#aloita {
  position: relative;
  padding-top: 0px !important;
  /*Additionalinfo*/
  /*Additionalinfo*/
  /*Creation*/
  /*Creation*/
  /*Errors*/
  /*Errors*/
}
#aloita label {
  font-weight: bold;
  font-size: 0.85em;
}
#aloita .col-12.ehdot label {
  padding: 10px 0px 10px 30px;
  width: 94%;
}
#aloita .col-12.ehdot p {
  margin: 5px 0px 0px 0px;
}
#aloita .col-12.ehdot input[type=checkbox] {
  transform: scale(1.5) translate(-15px, 3px);
  margin-right: 6px;
  accent-color: #93c94a;
  color: #fff;
  position: absolute;
}
#aloita .button,
#aloita .button.button-primary {
  padding: 10px 45px;
  margin: 30px 20px 10px 0px;
  display: inline-block;
  background: #93c94a;
  color: #fff !important;
  transition: all 0.3s ease-in-out;
}
#aloita .button:hover,
#aloita .button.button-primary:hover {
  background: #33c3f0;
}
#aloita .button:disabled, #aloita .button:disabled:hover,
#aloita .button.button-primary:disabled,
#aloita .button.button-primary:disabled:hover {
  background: #ababab !important;
}
#aloita .button.back,
#aloita .button.back:hover {
  padding: 10px 25px;
  background: none;
  color: #000 !important;
  border: 1px solid;
}
#aloita #MainForm input[type=text],
#aloita #MainForm input[type=email],
#aloita #MainForm input[type=tel],
#aloita #MainForm textarea,
#aloita #MainForm select {
  padding: 13px !important;
  border-radius: 5px;
  padding: 15px 0px;
  margin-bottom: 0;
  margin-top: 0;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-in-out;
}
#aloita #MainForm input[type=text].error-field,
#aloita #MainForm input[type=email].error-field,
#aloita #MainForm input[type=checkbox].error-field,
#aloita #MainForm select.error-field,
#aloita #MainForm label.error-field,
#aloita #MainForm div.error-field {
  border: 1px dashed #f00;
}
#aloita #MainForm input#BusinessID:-moz-read-only {
  background: none !important;
  border: none !important;
  pointer-events: none;
}
#aloita #MainForm input#BusinessID:read-only {
  background: none !important;
  border: none !important;
  pointer-events: none;
}
#aloita #MainForm .vat {
  margin-bottom: 15px;
}
#aloita #MainForm .vat p.vatrs {
  display: none;
}
#aloita #MainForm .vat input#BusinessID {
  padding: 0px !important;
}
#aloita #MainForm.novat .vat p.vatrs {
  margin-bottom: 0px;
  display: block;
}
#aloita #MainForm.novat input#BusinessID {
  opacity: 0.2;
  border-radius: 0px;
  pointer-events: none;
  padding: 0px !important;
  height: 5px !important;
}
#aloita #MainForm.novat label[for=BusinessID] {
  pointer-events: none;
}
#aloita #Agreement p {
  font-size: 15px;
}
#aloita .agreement-text {
  padding: 30px;
}
#aloita #AdditionalInfo,
#aloita #Prepare,
#aloita #Registration {
  background: #fafafa;
  padding: 20px;
  border-radius: 10px;
  max-width: 566px;
  margin: 0 auto;
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.0588235294);
}
#aloita #AdditionalInfo label,
#aloita #Prepare label,
#aloita #Registration label {
  display: block;
  font-weight: bold;
}
#aloita #AdditionalInfo select,
#aloita #Prepare select,
#aloita #Registration select {
  padding: 15px 20px;
  display: block;
  width: 100%;
  border-radius: 25px;
}
#aloita #AdditionalInfo select:focus,
#aloita #Prepare select:focus,
#aloita #Registration select:focus {
  border-radius: 0px;
}
#aloita #AdditionalInfo input[type=text],
#aloita #AdditionalInfo input[type=email],
#aloita #AdditionalInfo input[type=tel],
#aloita #AdditionalInfo textarea,
#aloita #AdditionalInfo select,
#aloita #Prepare input[type=text],
#aloita #Prepare input[type=email],
#aloita #Prepare input[type=tel],
#aloita #Prepare textarea,
#aloita #Prepare select,
#aloita #Registration input[type=text],
#aloita #Registration input[type=email],
#aloita #Registration input[type=tel],
#aloita #Registration textarea,
#aloita #Registration select {
  padding: 13px !important;
  border-radius: 8px;
  padding: 15px 0px;
  margin-bottom: 0;
  margin-top: 0;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-in-out;
}
#aloita #Prepare .ytunnusselect {
  width: 100%;
  margin: auto;
  transition: 0.4s;
  padding: 10px 20px;
  /* background: rgba(255, 255, 255, 0.9);*/
}
#aloita #Prepare .ytunnusselect p {
  margin: 20px 0px;
  font-size: 25px;
}
#aloita #Prepare .ytunnusselect .wrapper_input {
  position: relative;
  margin: 10px 0;
}
#aloita #Prepare .ytunnusselect input {
  display: none;
}
#aloita #Prepare .ytunnusselect input:checked + label:after {
  transform: scale(1);
  opacity: 1;
}
#aloita #Prepare .ytunnusselect label {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.8);
  margin: 0;
  padding-left: 35px;
  display: inline-block;
  position: relative;
}
#aloita #Prepare .ytunnusselect label:before {
  width: 20px;
  height: 20px;
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  background: #fff;
  border: 1px solid #000;
  margin-top: -10px;
}
#aloita #Prepare .ytunnusselect label:after {
  background: #93c94a;
  left: 0;
  top: 50%;
  transition: 0.3s;
  transform: scale(3.4);
  opacity: 0;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  content: "";
  position: absolute;
  left: 3px;
}
#aloita #Prepare button {
  border: none !important;
}
#aloita #ytunnusReason {
  display: none;
}
#aloita #ytunnusReason button.button.button-primary.setreason:disabled {
  background: #e5e5e5 !important;
  border: none;
}
#aloita #ytunnuscheck p.errormsg,
#aloita #ytunnusReason p.errormsg {
  color: red !important;
  font-size: 0.8em;
  margin: 0;
}
#aloita #ytunnuscheck input,
#aloita #ytunnuscheck button,
#aloita #ytunnusReason input,
#aloita #ytunnusReason button {
  width: 100%;
}
#aloita #ytunnuscheck button,
#aloita #ytunnusReason button {
  max-width: 250px;
}
#aloita section#Registration {
  position: relative;
  transition: box-shadow 0.3s linear;
}
#aloita.submitting section#Registration {
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0);
}
#aloita section#Registration #Creation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 100px 0px;
  background: #ffffff;
  text-align: center;
  background-image: url("helpostilasku-logo.png");
  background-repeat: no-repeat;
  background-size: 150px auto;
  background-position: top 40px center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}
#aloita.submitting section#Registration #Creation {
  opacity: 1;
}
#aloita div#Result {
  text-align: center;
}
#aloita div#Result h2.virhe {
  color: red !important;
}
#aloita #Errors {
  background: #ff0000;
  color: #fff;
}
#aloita #Errors ul#ErrorMessage li::marker {
  color: #fff !important;
}
#aloita #Errors ul#ErrorMessage,
#aloita #Errors p {
  font-size: 0.8em;
  color: #fff !important;
}
#aloita #Errors p {
  margin: 0px;
}

a.tasoominaisuudet {
  padding: 15px 0px;
  display: block;
}

#ominaisuusModal .modal-header img {
  margin: 0px !important;
}

.row.yhteyshenkilo,
.row.osoitetiedot,
.row.palvelutaso {
  padding: 25px 0px;
}

.row.lisatieto,
.row.ehdot {
  padding: 10px 0px;
}

.hidden {
  display: none;
}

div#Robot {
  padding: 0px 6px 6px 6px;
  margin-bottom: 7px;
}
div#Robot.error-field .g-recaptcha-container {
  display: block;
  padding-bottom: 10px;
}

/* Spinner
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#Spinner {
  margin: 0 auto;
  max-width: 100%;
  display: block;
}

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #93c94a;
  height: 100%;
  width: 6px;
  display: inline-block;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  animation-delay: -1.1s;
}

.spinner .rect3 {
  animation-delay: -1s;
}

.spinner .rect4 {
  animation-delay: -0.9s;
}

.spinner .rect5 {
  animation-delay: -0.8s;
}

#aloita:not(.submitting) #Creation .spinner div {
  animation: none;
}
@keyframes stretchdelay {
  0%, 40%, 100% {
    background-color: #70a32e;
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
    background-color: #010200;
  }
}
@media (max-width: 768px) {
  #aloita #AdditionalInfo,
  #aloita #Prepare,
  #aloita #Registration {
    padding: 15px 0px;
  }
  #aloita #AdditionalInfo .container,
  #aloita #Prepare .container,
  #aloita #Registration .container {
    max-width: 100% !important;
  }
  #aloita #Prepare .ytunnusselect p {
    margin: 10px 0px;
    font-size: 20px;
  }
  #ytunnusReason h4 {
    margin: 5px 0px !important;
  }
  #aloita .agreement-text {
    padding: 5px 10px;
  }
}