:root{
  --color-main-blue : #4e97fd;
  --color-main-dark : #333333;
  --color-main-gray : #9b9b9b;
}
.product_configuratore{
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 60px;
  }
  .product_configuratore .steps-row{
    background-color: transparent;
    position: relative;
    top: 0px;
    z-index: 9;
  }
  .product_configuratore .steps-row .wrapper{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    justify-content: center;
  }
  .product_configuratore .steps-row .step{
    display:flex;
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    background: transparent;
    margin-left:-20px;
  }
  .product_configuratore .steps-row .step.current{
    background: #FFF;
  }
  .product_configuratore .steps-row .step  .step_number{
    width: 30px;
    height: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 2px solid var(--color-main-blue);
    opacity: 0.8;
    font-size: 18px;
    line-height: 27px;
    background-color: var(--color-main-blue);
    color: #fff;
    display: block;
    text-align: center;
  }
  .product_configuratore .steps-row .step  .step_number span{
    display:none;
  }
  .product_configuratore .steps-row .step.completed .step_number{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z' fill='white'/%3E%3C/svg%3E");
    opacity: 1;
    background-size:20px 20px;
    background-repeat:no-repeat;
    background-position: center;
    color: transparent;
  }
  .product_configuratore .steps-row .step.current .step_number{
    border-color:var(--color-main-blue);
    background-color:var(--color-main-blue);
    color: var(--color-main-dark);
    opacity: 1;
  }
  


  .product_configuratore .steps-row svg{
    margin-left:-2px;
    fill:#F9F9F9;
    position:relative;
    z-index:9;
  }
  .product_configuratore .steps-row .step.current + svg{
    fill:#fff;
  }
  .actions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .actions .btn{
    display: flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    border-radius: 4px;
    border:1px solid;
    transition:all 400ms linear;
    cursor:pointer;
  }
  .actions .btn.btn-back{
    border-color: #1c1c1d;
    color: #1c1c1d;
    background-color:#fff;
  }
  .actions .btn.btn-back:hover{
    color: #fff;
    background-color:#1c1c1d;
  }
  .actions .btn.btn-next{
    border-color: var(--color-main-blue);
    color:#fff;
    background-color:var(--color-main-blue);
  }
  .actions .btn.btn-next.disabled{
    pointer-events: none;
    opacity: 0.8;
    background-color: var(--color-main-gray);
    border-color: var(--color-main-gray);
  }
  .actions .btn.btn-next:hover{
    color:var(--color-main-blue);
    background-color:#fff;
  }
  .actions  .btn-complete{
    background-color: var(--color-main-blue);
    color: var(--color-main-dark);
    border-color: var(--color-main-blue);
    display: none;
  }
  .step_content{
    text-align: center;
    padding:0px 20px;
  }
  .step_head{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    align-self: stretch;
    margin-bottom:34px;
  }
  .step_content .step_head-pre{
    color: #830505;
    leading-trim: both;
    text-edge: cap;
  
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  .step_head-title{
    color: #1C1C1D;
    leading-trim: both;
    text-edge: cap;
    font-family: 'Chivo', sans-serif;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
  }
  .step_head-description{
    color: #000;
    leading-trim: both;
    text-edge: cap;
  
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width:480px;
  }
  
  .select-otions-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
  }
  .select-otions-list .input-wrapper{
    position: relative;
  }
  .select-otions-list .input-wrapper label{
    padding: 8px 26px;
    width: 100%;
    border: 2px solid #e1e1e1;
    display: block;
    cursor: pointer;
    
  }
  .select-otions-list .input-wrapper label:hover{
    border-color: var(--color-main-blue);
  }
  .select-otions-list .input-wrapper input{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
  }
  .select-otions-list .input-wrapper input:checked + label{
    border-color: var(--color-main-blue);
  }
  .icons{
    display: flex;
    align-items: flex-start;
  }
  .step_content_1 .icons{
    gap: -8px;
  }
  .icons svg{
    fill: #1C1C1D;
  }
  .step .options label input:checked + div{
    border-color:#026C82;
    background: #FFF;
  }
  .step .options label input:checked + div svg{
    fill:#026C82;
  }
  .step .options label input:checked + div span{
    font-weight:700;
  }
  
  .wizard-form .step {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-in-out;
  }
  
  .wizard-form .step.active{
    height: auto;
  }

  #product-results .product-details{
    display: grid;
    grid-template-columns: 60% 1fr;
    max-width: 785px;
    margin: 0 auto;
  }
  .prod-attributes-wrapper h3{
    text-align: left;
  }
  .prod-attributes-wrapper ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
    text-align: left;
  }
  .prod-attributes-wrapper ul li{
    margin: 0px;
    font-size: 19px;
  }

  .prod_articles_header{
    display: grid;
    grid-template-columns: 70px 1fr 100px;
    max-width: 785px;
    margin: 0 auto;
    border-bottom: 2px solid var(--color-main-blue);
    text-align: left;
  }
  .prod_articles_row{
    display: grid;
    grid-template-columns: 70px 1fr 100px;
    max-width: 785px;
    margin: 10px auto;
    text-align: left;

  }
  .wizard-form .step_body{
    position: relative;
    min-height: 200px;
    opacity: 1;
    transition: opacity 400ms linear;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .wizard-form .select-otions-list{
    width: 100%;
  }
  .image-explain img{
    max-width: 400px;
    width: 100%;
    height: auto;
  }
  #geruesthoehe-results{
    width: 50%;
  }
  .wizard-form .step_body.loading{
    opacity: 0.5;
    transition: opacity 400ms linear;
  }
  .wizard-form .step_body:after{
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-size: contain;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 400ms linear;
    animation: rotate 2s linear infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='200' height='200' style='shape-rendering: auto; display: block; background: rgba(255, 255, 255, 0);'%3E%3Cg data-idx='1'%3E%3Cg transform='matrix(1,0,0,1,50,50)' data-idx='2'%3E%3Cg data-idx='3' transform='matrix(0.8910065090752445,0.4539905294007204,-0.4539905294007204,0.8910065090752445,0,0)'%3E%3Cpath fill='%230099cc' d='M29.491524206117255 -5.5 L37.491524206117255 -5.5 L37.491524206117255 5.5 L29.491524206117255 5.5 A30 30 0 0 1 24.742744050198738 16.964569457146712 L24.742744050198738 16.964569457146712 L30.399598299691117 22.621423706639092 L22.621423706639096 30.399598299691114 L16.964569457146716 24.742744050198734 A30 30 0 0 1 5.5 29.491524206117255 L5.5 29.491524206117255 L5.5 37.491524206117255 L-5.499999999999997 37.491524206117255 L-5.499999999999997 29.491524206117255 A30 30 0 0 1 -16.964569457146705 24.742744050198738 L-16.964569457146705 24.742744050198738 L-22.621423706639085 30.399598299691117 L-30.399598299691117 22.621423706639092 L-24.742744050198738 16.964569457146712 A30 30 0 0 1 -29.491524206117255 5.500000000000009 L-29.491524206117255 5.500000000000009 L-37.491524206117255 5.50000000000001 L-37.491524206117255 -5.500000000000001 L-29.491524206117255 -5.500000000000002 A30 30 0 0 1 -24.742744050198738 -16.964569457146705 L-24.742744050198738 -16.964569457146705 L-30.399598299691117 -22.621423706639085 L-22.621423706639092 -30.399598299691117 L-16.964569457146712 -24.742744050198738 A30 30 0 0 1 -5.500000000000011 -29.491524206117255 L-5.500000000000011 -29.491524206117255 L-5.500000000000012 -37.491524206117255 L5.499999999999998 -37.491524206117255 L5.5 -29.491524206117255 A30 30 0 0 1 16.964569457146702 -24.74274405019874 L16.964569457146702 -24.74274405019874 L22.62142370663908 -30.39959829969112 L30.399598299691117 -22.6214237066391 L24.742744050198738 -16.964569457146716 A30 30 0 0 1 29.491524206117255 -5.500000000000013 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20' data-idx='5'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cg data-idx='6'%3E%3C/g%3E%3C/g%3E%3Ctext data-watermark='true' text-anchor='middle' dominant-baseline='middle' stroke-opacity='0.1' fill='black' fill-opacity='0.1' stroke='white' stroke-width='1' font-size='5.0' x='50' y='50' data-idx='7' style='opacity: 1; font-size: 5px;'%3ELOADING.IO%3C/text%3E%3C/svg%3E");
  }
  .wizard-form .step_body.loading:after{
    opacity: 1;
    visibility: visible;
    transition: opacity 400ms linear;

  }

  @keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}