/* Minification failed. Returning unminified contents.
(3,23): run-time error CSS1039: Token not allowed after unary operator: '-size-m'
(4,28): run-time error CSS1039: Token not allowed after unary operator: '-super-light-grey-color'
(17,27): run-time error CSS1039: Token not allowed after unary operator: '-super-light-grey-color'
(26,17): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(30,35): run-time error CSS1039: Token not allowed after unary operator: '-super-light-grey-color'
(38,28): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(48,29): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(53,21): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(58,32): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(67,24): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(88,23): run-time error CSS1039: Token not allowed after unary operator: '-size-m'
(101,22): run-time error CSS1039: Token not allowed after unary operator: '-size-xl'
(102,26): run-time error CSS1039: Token not allowed after unary operator: '-size-xl'
(106,24): run-time error CSS1039: Token not allowed after unary operator: '-size-m'
(110,26): run-time error CSS1039: Token not allowed after unary operator: '-size-xs'
(111,25): run-time error CSS1039: Token not allowed after unary operator: '-size-s'
(112,35): run-time error CSS1039: Token not allowed after unary operator: '-light-grey-color'
(143,28): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue-color'
(148,17): run-time error CSS1039: Token not allowed after unary operator: '-super-light-grey-color'
(149,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(156,19): run-time error CSS1039: Token not allowed after unary operator: '-size-m'
(156,33): run-time error CSS1039: Token not allowed after unary operator: '-size-s'
(156,52): run-time error CSS1039: Token not allowed after unary operator: '-size-xxl'
(156,70): run-time error CSS1039: Token not allowed after unary operator: '-size-s'
(156,85): run-time error CSS1039: Token not allowed after unary operator: '-size-s'
(165,25): run-time error CSS1039: Token not allowed after unary operator: '-size-m'
(183,25): run-time error CSS1039: Token not allowed after unary operator: '-size-m'
(217,23): run-time error CSS1039: Token not allowed after unary operator: '-size-xs'
(218,26): run-time error CSS1039: Token not allowed after unary operator: '-size-s'
(222,18): run-time error CSS1039: Token not allowed after unary operator: '-size-xs'
(224,28): run-time error CSS1039: Token not allowed after unary operator: '-light-grey-color'
(228,28): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue-color'
(233,25): run-time error CSS1039: Token not allowed after unary operator: '-size-s'
(237,22): run-time error CSS1039: Token not allowed after unary operator: '-size-xs'
(249,32): run-time error CSS1039: Token not allowed after unary operator: '-grey-color'
(285,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(297,19): run-time error CSS1039: Token not allowed after unary operator: '-modal-padding'
(297,40): run-time error CSS1039: Token not allowed after unary operator: '-modal-padding'
(297,66): run-time error CSS1039: Token not allowed after unary operator: '-modal-padding'
(307,19): run-time error CSS1039: Token not allowed after unary operator: '-modal-padding'
(308,21): run-time error CSS1039: Token not allowed after unary operator: '-modal-padding'
(312,21): run-time error CSS1039: Token not allowed after unary operator: '-error-color'
(316,28): run-time error CSS1039: Token not allowed after unary operator: '-super-light-grey-color'
(317,24): run-time error CSS1039: Token not allowed after unary operator: '-modal-padding'
(317,50): run-time error CSS1039: Token not allowed after unary operator: '-modal-padding'
(337,19): run-time error CSS1039: Token not allowed after unary operator: '-modal-padding'
(358,28): run-time error CSS1039: Token not allowed after unary operator: '-grey-color'
(359,24): run-time error CSS1039: Token not allowed after unary operator: '-grey-color'
(360,17): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
 */
/* variables are defined in styles.css */
.container-bg-wrapper {
    padding-top: var(--size-m);
    background-color: var(--super-light-grey-color);
}

.solutions-selection-icon {
    height: 52px;
    display: inline-block;
    text-align: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 20px;
}

.solution-steps {
    background-color:var(--super-light-grey-color);
}

.solution-step {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    height: 80px;
    color: var(--main-text-color);
    padding-top: 20px;
    padding-bottom: 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--super-light-grey-color);
}

.solution-step span {
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 32px;
    border: 1px solid var(--main-text-color);
    border-radius: 50%;
    text-align: center;
    margin-left: 20px;
    margin-right: 16px;
}

    .solution-step.active,
    .solution-step:hover {
        background-color: #FFF;
        border-radius: var(--border-radius);
    }

    .solution-step.active,
    .solution-step:hover {
        color: var(--main-text-color);
    }

        .solution-step.active span,
        .solution-step:hover span {
            border-color: var(--main-text-color);
        }

.solution-steps-detail {
    background-color: #FFF;
    min-height: 120px;
}

.solution-options-container {
    border-radius:var(--border-radius);
}

.solution-detail-option {
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 30px;
    cursor: pointer;
    padding: 30px 48px 0 48px;
}

    .solution-detail-option.selected .solutions-selection-icon,
    .solution-detail-option:hover .solutions-selection-icon {
        background-position: -9999px, 50% 0%;
    }

.solution-detail-option span.label {
    display: inline-block;
}

.construction-period-selection .solution-detail-option {
    padding-top: var(--size-m);
}

.construction-period-selection .solution-detail-option.selected,
.construction-period-selection .solution-detail-option:hover {
    font-weight: 700;
}

.dimensions-specification .solution-detail-option {
    padding-top: 16px;
}

.solution-example {
    margin-top: var(--size-xl);
    padding-bottom: var(--size-xl);
}

.solution-summary {
    padding-left: var(--size-m);
}

.summary-property {
    padding-bottom: var(--size-xs);
    margin-bottom: var(--size-s);
    border-bottom: 1px solid var(--light-grey-color);
}

.summary-property .label {
    margin-bottom: 0;
    font-weight: 700;
    line-height: 22px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.summary-property .value {
    line-height: 38px;
    font-size: 24px;
    letter-spacing: 1px;
    margin-bottom: 0;
}

    .summary-property:nth-child(4) {
        border-bottom: none;
    }

.solution-detail-option .form-control {
    line-height: 40px;
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

.solution-summary-footer {
    background-color: var(--dark-blue-color);
    line-height: 60px;
    font-size: 24px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--super-light-grey-color);
    border-radius: var(--border-radius);
}

.solution-proposal {
}

.recommendation {
    padding: var(--size-m) var(--size-s) calc(var(--size-xxl) - var(--size-s)) var(--size-s);
}

.recommendation-icon {
    margin:0 auto;
    background-repeat:no-repeat;
    background-position:center bottom;
    width:160px;
    height:160px;
    margin-bottom: var(--size-m);
}

.recommendation h3 {
    font-weight: 700;
    line-height: 22px;
    font-size: 13px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.recommendation-description {
    font-weight: 300;
    line-height: 38px;
    font-size: 24px;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: var(--size-m);
    min-height: 120px;
}

    .recommendation-description p {
        margin-bottom: 0;
    }

.recommendation-rating {
    overflow: auto;
}

    .recommendation-rating .label {
        float: left;
        font-weight: 700;
        line-height: 22px;
        font-size: 13px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .recommendation-rating .value {
        float: right;
        font-weight: 700;
        line-height: 22px;
        font-size: 13px;
        text-align: right;
        letter-spacing: 1px;
        text-transform: uppercase;
    }


.recommendation .rating {
    clear: both;
    padding-top: var(--size-xs);
    padding-bottom: var(--size-s);
}

.recommendation .rating .progress {    
    height: var(--size-xs);
    border-radius: 100px;
    background-color: var(--light-grey-color);
}

.recommendation .rating .progress-bar {
    background-color: var(--dark-blue-color);
    border-radius: 100px;
}

.recommendation-pricerange {
    margin-bottom: var(--size-s)
}

.recommendation .cta {
    margin-top: var(--size-xs);
}

.row .col-lg-3:first-child .recommendation .cta button {
    background-color: #F69A46;
    color: #FFF;
}

    .recommendation .cta button {
        width: 100%;
        text-align: center;
        text-transform: uppercase;
        background-color: var(--grey-color);
        font-weight: 600;
        line-height: 50px;
        font-size: 13px;
        text-align: center;
        letter-spacing: 1px;
        border-radius: 3px;
    }


    .vrijstaand-icon {
        background-image: url(/Content/images/icons/Icon-vrijstaandewoning.svg), url(/Content/images/icons/Icon-vrijstaandewoning_hover.svg);
        background-position-y: bottom !important;
        width: 50px;
    }

.tweeondereenkap-icon {
    background-image: url(/Content/images/icons/Icon-2^1KapWoning.svg), url(/Content/images/icons/Icon-2^1KapWoning_hover.svg);
    background-position-y: bottom !important;
    width: 96px;
}

.rijtjeshuis-icon {
    background-image: url(/Content/images/icons/Icon-Tussenwoning.svg), url(/Content/images/icons/Icon-Tussenwoning_hover.svg);
    background-position-y: bottom !important;
    width: 88px;
}

.hoekwoning-icon {
    background-image: url(/Content/images/icons/Icon-Hoekwoning.svg), url(/Content/images/icons/Icon-Hoekwoning_hover.svg);
    background-position-y: bottom !important;
    width: 88px;
}

/*#region modal #*/
:root {
    --modal-padding: 48px;
}
.modal-content {
    border: 0;
}

.modal-body {
    padding:0;
}

#requestInfoModal .header {
    position: relative;
    padding: var(--modal-padding) var(--modal-padding) 48px var(--modal-padding);
}
    #requestInfoModal .header h1 {
        line-height: 60px;
        margin-bottom: 48px;
    }

    #requestInfoModal .header .close {
        opacity: 1;
        position: absolute;
        top: var(--modal-padding);
        right: var(--modal-padding);
    }

    li.error {
        color: var(--error-color);
    }

#requestInfoModal .form {
    background-color: var(--super-light-grey-color);
    padding: 80px var(--modal-padding) 80px var(--modal-padding);
}

#requestInfoModal .form label {
    margin-top: 32px;
}

    #requestInfoModal .form .row:first-of-type label {
        margin-top: 0;
    }

    #requestInfoModal .form .error a {
        text-decoration: underline;
    }

    #requestInfoModal .form textarea {
        min-height: 120px;
    }

#requestInfoModal .modal-footer {
    padding: var(--modal-padding);
}

#requestInfoModal .btn {
    text-transform: uppercase;
    font-weight: 700;
    line-height: 50px;
    height: 50px;
    font-size: 13px;
    text-align: center;
    letter-spacing: 1px;
    border-radius: 3px;
    padding: 0 16px;
}

#requestInfoModal .btn-primary {
    background-color: #EAAE33;
    border-color: #EAAE33;
}

#requestInfoModal .btn-secondary {
    background-color: var(--grey-color);
    border-color: var(--grey-color);
    color: var(--main-text-color);
}
/*#endregion modal#*/