/* 
    Created on : 10.06.2022, 11:10:38
    Author     : alexanderkoch
*/

:root {
    --eol-color-accent: #006ea9;
    --eol-color-accent-contrast: #ffffff;
    --eol-color-light: #bfdae9;
    --eol-color-light-contrast: #333333;
    --eol-color-disabled: #bfdae9;
    --eol-color-disabled-contrast: #ffffff;
}

div.wpforms-container .wpforms-form .choices__list--dropdown {
    z-index: 103 !important;
}

/* BASIC STYLES */

div.wpforms-container-full.eologix-roi .wpforms-form .wpforms-page-button:not(.wpforms-page-prev),
div.wpforms-container-full.eologix-roi .wpforms-form .wpforms-submit {
    background-color: var(--eol-color-accent);
    color: white;
    border-color: var(--eol-color-accent);
}
@media screen and ( max-width: 992px ) {
    div.wpforms-container-full.eologix-roi .wpforms-form .wpforms-page-button,
    div.wpforms-container-full.eologix-roi .wpforms-form .wpforms-submit {
        margin-bottom: 10px;
    }
    div.wpforms-container-full.eologix-roi .wpforms-form .wpforms-submit-container {
        padding-top: 0;
        text-align: center;
        margin-top: -10px;
    }
}



/* PAGE INDICATORS */
div.wpforms-container-full.eologix-roi .wpforms-page-indicator.circles {
    overflow: visible;
    border-top: 0 !important;
    border-bottom: 0 !important;
    margin-bottom: 75px;
}
div.wpforms-container-full.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    width: calc( 100% / 8);
}
div.wpforms-container-full.eologix-roi .wpforms-form .wpforms-page-indicator.circles {
    margin-left: calc( 100% / 16 + 40px );
    margin-right: calc( -100% / 16 + 40px );
}

@media screen and ( max-width: 992px ) {
    div.wpforms-container-full.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page {
      width: calc( 100% / 6);
      margin: 0 !important;
    }
    div.wpforms-container-full.eologix-roi .wpforms-form .wpforms-page-indicator.circles {
        margin-left: 0;
        margin-right: 0;
    }
    .eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page:last-child:after {
        display: none;
    }
}
.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page .wpforms-page-indicator-page-title {
    flex-basis: 100%;
}
@media screen and ( max-width: 992px ) {
    .eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page .wpforms-page-indicator-page-title {
        font-size: .8rem;
    }
}

.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page .wpforms-page-indicator-page-number {
    position: relative;
    z-index: 1;
    background-color: var(--eol-color-accent) !important;
    color: var(--eol-color-accent-contrast) !important;
}
.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page.active ~ .wpforms-page-indicator-page .wpforms-page-indicator-page-number {
    background-color: var(--eol-color-disabled) !important;
    color: var(--eol-color-disabled-contrast) !important;
}
.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page:after {
    content: '';
    width: 100%;
    height: 1px;
    background: var(--eol-color-accent);
    position: absolute;
    top: 20px;
    left: -55%;
    z-index: 0;
}
.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page.active ~ .wpforms-page-indicator-page:after {
    background: var(--eol-color-disabled);
}
.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page:last-child:after {
    width: 200%;
}

@media screen and ( max-width: 992px ) {
    .eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page:after {
        display: none;
    }
}

@media screen and ( max-width: 992px ) {
    .eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page .wpforms-page-indicator-page-number:after {
        width: 75px;
        left: 0;
    }
    
}
.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page:first-child:before,
.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page:last-child:before {
    content: '';
    z-index: 1;
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: var(--eol-color-disabled);
    background-image: url('../assets/img/schneeflocke.png');
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
}
.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page:last-child:before {
    background-image: url('../assets/img/document.png');
}


.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page:first-child:before {
    background-color: var(--eol-color-accent);
}



@media screen and ( max-width: 992px ) {
    .eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page:first-child:before,
    .eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page:last-child:before {
        display: none;
    }
}
.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page:first-child:before {
    left: calc( -100% + 40px);
}
.eologix-roi .wpforms-page-indicator .wpforms-page-indicator-page:last-child:before {
    right: calc( -100% + 40px);
}






/* FORM FIELDS */

.eologix-roi .wpforms-field:not(.wpforms-field-divider):not(.wpforms-field-html):not(.wpforms-field-pagebreak):not(.wpforms-field-entry-preview) {
    display: grid;
    align-items: center;
    grid-template-columns: 300px 1fr 100px;
    grid-gap: 8px;
    grid-auto-flow: dense;
}
div.wpforms-container-full .wpforms-form label.wpforms-error {
    grid-column-start: 2;
}

.wpforms-field-number-slider .wpforms-field-description {
    grid-column-start: 2;
    margin-top: -1em !important;
    padding-top: 0 !important;
}


.eologix-roi .wpforms-field:not(.wpforms-field-checkbox):not(.wpforms-field-divider):not(.wpforms-field-html):not(.wpforms-field-pagebreak):not(.wpforms-field-entry-preview)  > * {
    hyphens: auto;
    width: 100%;
    max-width: none;
}
.eol-roi-intro .wpforms-field-description {
    width: 100% !important;
    max-width: none !important;
    font-size: 1.5em !important;
    text-align: center; 
}

@media screen and ( max-width: 992px ) {
    .eologix-roi .wpforms-field:not(.wpforms-field-checkbox):not(.wpforms-field-divider):not(.wpforms-field-html):not(.wpforms-field-pagebreak):not(.wpforms-field-entry-preview) {
        display: grid;
        align-items: center;
        grid-template-columns: 200px 1fr 100px;
    }
}
@media screen and ( max-width: 500px ) {
    .eologix-roi .wpforms-field:not(.wpforms-field-divider):not(.wpforms-field-html):not(.wpforms-field-pagebreak):not(.wpforms-field-entry-preview) {
        display: grid;
        align-items: center;
        grid-template-columns: 1fr;
    }
    .wpforms-field-number-slider .wpforms-field-description,
    div.wpforms-container-full .wpforms-form label.wpforms-error {
        grid-column-start: 1;
    }
}

.eologix-roi .wpforms-form .wpforms-field-divider {
    margin-top: 25px;
}
div.wpforms-container-full.eologix-roi .wpforms-form .wpforms-field-number-slider input[type=range] {
    margin: 10px 10px 10px 0;
}
div.wpforms-container-full.eologix-roi .wpforms-form input[type=text],
div.wpforms-container-full.eologix-roi .wpforms-form input[type=number]{
    margin-right: 10px;
}
div.wpforms-container.eologix-roi .wpforms-form .choices__list--dropdown .choices__item,
div.wpforms-container.eologix-roi .wpforms-form .choices__list--single .choices__item[data-value=''] {
    font-weight: 400;
}
div.wpforms-container-full.eologix-roi .wpforms-form .wpforms-field-description {
    max-width: 100px;
}

div.wpforms-container-full .wpforms-form .wpforms-field-number-slider input[type=range] {
    border: 0px !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-number-slider input[type=range]::-moz-range-track {
    height: 10px;
    cursor: pointer;
    box-shadow: 0px 0px 1px #000000;
}

div.wpforms-container-full .wpforms-form .wpforms-field-number-slider input[type=range]::-webkit-slider-runnable-track {
    height: 10px;
    cursor: pointer;
    box-shadow: 0px 0px 1px #000000;
}
  
div.wpforms-container-full .wpforms-form .wpforms-field-number-slider input[type=range]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -3px;
}

.wpforms-field input + div {
    white-space: nowrap;
}