/*
.calc_plugin_container{
    position: absolute;
    width: 415px;
    height: 420px;
    background-color: #EEF8F7;
    right: 150px;
    top:-400px;
    border-radius: 10px;
    padding: 10px;
    z-index: 100;
}
@media screen and (max-width:1120px) {
  .calc_plugin_container{
      right: 50px;
  }
}
@media screen and (max-width:1025px) {
  .calc_plugin_container{
      position:unset;
      margin-left: auto;
      margin-right: auto;
  }
}
*/



#regForm,#calc_plugin_map,#calc_plugin_displayname {
  
  /*margin: 100px auto;*/
  font-family: Raleway;
  padding: 10px;
  min-width: 300px;
}
/* 
h1 {
  text-align: center;  
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}
*/
/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}
/*
button {
  background-color: #04AA6D;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}
*/
#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #04AA6D;
}

.calc-plugin-loading{
  display: none;
  margin: 62px 0px;
}
 @keyframes loader {
	 0% {
		 width: 0;
	}
	 20% {
		 width: 10%;
	}
	 25% {
		 width: 24%;
	}
	 43% {
		 width: 41%;
	}
	 56% {
		 width: 50%;
	}
	 66% {
		 width: 52%;
	}
	 71% {
		 width: 60%;
	}
	 75% {
		 width: 76%;
	}
	 94% {
		 width: 86%;
	}
	 100% {
		 width: 100%;
	}
}
 .progress-bar {
	 border-radius: 60px;
	 overflow: hidden;
	 width: 100%;
}
 .progress-bar span {
	 display: block;
}
 .bar {
	 background: rgba(0, 0, 0, 0.075);
}
 .progress {
	 animation: loader 8s ease infinite;
	 background: #04AA6D;
	 color: #fff;
	 padding: 5px;
	 width: 0;
}
 .progress-bar {
	 /*left: 50%;
	 position: absolute;
	 top: 50%;
	 transform: translate3d(-50%, -50%, 0);
	 */
	 max-width: 70%;
	 margin: 0 auto;
}
 





.button-group {
    position: relative;
    z-index: 2;
    display: flex;
    /*min-width: 600px;*/
    height: 60px;
    /*background-color: #828A89;*/
    border-radius: 7px;
    padding: 2px;
  }
  .button-group > div {
    cursor: pointer;
    flex: 1;
    background-image: linear-gradient(to top, #A4AEAD 0%, #B7C4C2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1px;
    transition: 0.2s;
    font-size: 2.5em;
    /*box-shadow: inset 0 20px 4px -21px rgba(255,255,255,0.4), 0 19px 13px 0 rgba(0,0,0,0.3);*/
    color: #181818;
    position: relative;
    z-index: 2;
  }
  .button-group > div:before {
    content: "";
    display: block;
    width: 0.8em;
    height: 0.8em;
    transition: 0.1s;
    background-image: radial-gradient(circle 30px at center, #ebf7ff 0%, #b3e1ff 47%, #b3e1ff 100%);
    position: absolute;
    filter: blur(15px);
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  .button-group > div:after {
    content: "";
    display: block;
    height: 70px;
    width: 1px;
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: 0.2s;
    filter: blur(0px);
    box-shadow: -75px 0 0px 0px rgba(179,225,255,0.3), 74px 0 0px 0px rgba(179,225,255,0.35);
  }
  .button-group > div svg {
    height: 35px;
    /*width: 2em;*/
    position: relative;
    display: block;
    fill: #181818;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,0.15)) url("#inset-shadow");
  }
  .button-group > div.active {
    background-image: linear-gradient(to top, #151515 0%, #1d1d1d 100%);
    box-shadow: inset 0 16px 14px -21px transparent, 0 0px 13px 0 rgba(0,0,0,0.3), inset 0 0 7px 2px rgba(0,0,0,0.4);
    z-index: 0;
  }
  .button-group > div.active:before {
    width: 1em;
    height: 1em;
    opacity: 0.8;
  }
  .button-group > div.active:after {
    opacity: 0;
  }
  .button-group > div.active svg {
    fill: url("#active");
    filter: drop-shadow(0 1px 1px rgba(255,255,255,0));
  }
  .button-group div:first-of-type {
    border-radius: 4px 0 0 4px;
  }
  .button-group div:first-of-type:after {
    box-shadow: -85px 0 18px 1px transparent, 83px 0 12px 1px #b3e1ff;
  }
  .button-group div:last-of-type {
    border-radius: 0 4px 4px 0;
  }
  .button-group div:last-of-type:after {
    box-shadow: -85px 0 18px 1px #b3e1ff, 83px 0 12px 1px transparent;
  }
  .svg-filters {
    height: 0;
    width: 0;
  }


.calc_plugin_info_container ul {
    list-style: none;
}
.calc_plugin_info_container ul li {
    padding-left: 27px;
    position: relative;
    min-height: 12px;
    margin-bottom: 5px;
}
.calc_plugin_info_container ul li::before {
    content: "✓";
    line-height: 1;
    position: absolute;
    color: rgb(50, 181, 26);
    font-size: 0.75rem;
    height: 12px;
    width: 12px;
    top: 5px;
    left: 0px;
}
.calc_plugin_input_container {
    margin: 5px;
}