:root {
		  --line-activated-border-fill: #578552;
		  --line-active-border-fill: #3498db;
		  --line-border-empty: #e0e0e0;
		  --size-of-step-box-wide: 40px;
		  --size-of-step-box-small: 20px;
		}


		.progress-container::before {
		  content: "";
		  background: var(--line-border-empty);
		  position: absolute;
		  top: 50%;
		  left: 0;
		  transform: translateY(-50%);
		  height: 4px;
		  width: 100%;
		  z-index: 0;
		}

		.progress-container {
		  display: flex;
		  justify-content: space-between;
		  position: relative;
		  /*margin-bottom: 30px;*/
		  max-width: 100%;
		  /*width: 350px;*/
		}

		.progress {
		  background: var(--line-activated-border-fill);
		  position: absolute;
		  top: 50%;
		  left: 0;
		  transform: translateY(-50%);
		  height: 4px;
		  width: 0%;
		  z-index: 0;
		  transition: 0.4s ease;
		}

		.progress-step-circle {
		  background: #fff;
		  color: #999;
		  border-radius: 50%;
		  height: var(--size-of-step-box-wide);
		  width: var(--size-of-step-box-wide);
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  border: 3px solid var(--line-border-empty);
		  transition: 0.4s ease;
		  z-index: 1;
		}

		.progress-step-circle.progress-step-activated {
		  border-color: var(--line-activated-border-fill);
		}
		
		.progress-step-circle.progress-step-active {
		  border-color: var(--line-active-border-fill);
		}

		
		@media handheld,screen and (max-width:600px){.progress-step-circle{height: var(--size-of-step-box-small); width: var(--size-of-step-box-small);}}

		/*.btn {
		  background-color: var(--line-border-fill);
		  color: #fff;
		  cursor: pointer;
		  font-family: inherit;
		  border: 0;
		  border-radius: 6px;
		  padding: 8px 30px;
		  margin: 5px;
		  font-size: 14px;
		}

		.btn:active {
		  transform: scale(0.98);
		}

		.btn:focus {
		  outline: 0;
		}

		.btn:disabled {
		  background-color: var(--line-border-empty);
		  cursor: not-allowed;
		}*/