﻿.global-css * {
    font-family: 'Ubuntu','Open Sans', 'Segoe UI', 'Corbel', 'Arial', 'Verdana', 'Geneva', 'Helvetica', sans-serif !important;
}

.global-css {
    background: #E5F5F4;
    font-family: 'Ubuntu','Open Sans', 'Segoe UI', 'Corbel', 'Arial', 'Verdana', 'Geneva', 'Helvetica', sans-serif;
    color: #001F20;
}

    .global-css div#header {
        background-color: #E5F5F4;
        margin-bottom: 0;
    }

    .global-css .content {
        max-width: 600px;
        padding: 0 24px 24px 24px;
        background: #fff;
    }

    .global-css h3.main-toggle-title {
        margin-top: 0;
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: 0;
        color: #001F20;
    }

    .global-css .lthead {
        background-color: #E5F5F4;
    }

    .global-css .ltheadc {
        background: #fff;
        padding: 24px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .global-css .ltnm {
        width: 300px;
        margin-bottom: 10px;
    }

    .global-css .ltnm1 {
        padding-left: 0;
        font-weight: 400;
        font-size: 24px;
        line-height: 120%;
        letter-spacing: 0;
    }

    .global-css .ltnm1, .global-css .ltnm2 {
        color: #001F20;
    }

    .global-css .logovr {
        width: 120px;
        margin-top: 0px;
        margin-right: 0px;
    }

    .global-css a.footerlink {
        font-weight: normal;
        text-decoration: none;
    }

    .global-css select.proforma-select-text,
    .global-css input.ui-input-text {
        background-color: #F6FFFE;
        border: 1px solid #CADAD9;
        border-radius: 8px;
        font-weight: 400;
        font-size: 16px !important;
        line-height: 140%;
        letter-spacing: 0;
        padding: 16px 20px;
        color: #001F20 !important;
        margin-left: 0;
        margin-right: 0;
        outline: none !important;
    }
    /*.global-css select.proforma-select-text:focus, 
.global-css input.ui-input-text:focus{
    background-color: #F6FFFE;
}*/
    .global-css table.breedte.pad td {
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        color: #001F20;
    }

    .global-css table.breedte.pad td {
        padding-left: 0;
        padding-right: 0;
    }

    .global-css .tgl-sw-ios.tgl-sw-ios-checked + .btn-switch {
        background: #0E7F88;
    }

        .global-css .tgl-sw-ios.tgl-sw-ios-checked + .btn-switch:after {
            background: #fff;
        }

    .global-css .tgl-sw-ios + .btn-switch:after {
        width: 14px;
        height: 14px;
        margin-top: 4px;
        margin-left: 5px;
        box-shadow: none !important;
    }

    .global-css .tgl-sw-ios + .btn-switch {
        background: #fff;
        border-color: #CADAD9;
    }

    .global-css input.bigbutton {
        background-color: #FF6600;
        box-shadow: 0px 4px 16px 0px #00000014;
        border: 4px solid #FFFFFF1A;
        padding: 10.8px 32px;
        height: auto;
        border-radius: 62px;
        font-weight: 500;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: 0;
        text-align: center;
    }

    .global-css .tgl-sw-ios + .btn-switch:after {
        background: #CADAD9;
    }

    .global-css .inputtabelrow {
        height: 70px;
    }

    .global-css .button-wrapper {
        background: transparent;
    }

    .global-css table.breedte {
        margin-top: 0;
    }

.global-css div#header .ltheadc {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #fff;
    padding: 24px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.global-css div#header .ltnm {
    flex: 1;
    margin-bottom: 10px;
    min-width: 0;
    max-width: 260px;
}

    .global-css div#header .logovr {
        width: 120px !important;
        margin-top: 0px;
        margin-right: 0px;
        flex-shrink: 0;
        float: none;
        line-height: normal;
        height: auto;
        vertical-align: top;
    }

@media(max-width:767px) {
    .global-css div#header .ltnm {
        width: auto;
        flex: 1;
        margin-bottom: 0;
        margin-right: 16px;

    }

    .global-css div#header .logovr {
        width: 120px !important;
        flex-shrink: 0;
    }

    .global-css div#header .ltheadc {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: nowrap;
        padding: 16px 24px;
    }
}

@media(max-width:480px) {
    .global-css div#header .ltnm {
        margin-right: 12px;
    }

    .global-css div#header .logovr {
        width: 90px;
    }

    .global-css div#header .ltheadc {
        padding: 12px 16px;
        align-items: flex-start;
    }
}


.calcproforma div {
    background: #fff;
}

.calcproforma.global-css div > strong h3,
.calcproforma.global-css div > h3,
.calcproforma h3.titles {
    border-bottom: 1px solid #CADAD9;
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0;
    color: #001F20;
    margin-top: 0;
    padding-top: 10px;
}

    .calcproforma h3.titles.top {
        margin-top: 0;
    }


.calcproforma .content table td {
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
}

.calcproforma div#calcHeader {
    margin: 0;
}

body {
    background-color: #E5F5F4 !important;
}

.global-css #footer2,
.global-css div#footer {
    max-width: 600px;
}

.global-css .footerpromocnt {
    margin-top: 0;
    color: #748094;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.global-css .footerpromotxt {
    padding-left: 24px;
    padding-right: 24px;
    color: #748094;
    font-size: 12px;
    line-height: 19px;
}

.global-css div#disctxt {
    padding-left: 24px;
    padding-right: 24px;
    color: #748094;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.global-css .footer-top-text {
    color: #748094;
    background: transparent;
    font-size: 12px;
    line-height: 19px;
}

.calcproforma.global-css .content > div:nth-child(2),
.calcproforma.global-css .content table + div {
    padding-left: 0 !important;
}

.calcproforma.global-css .content table tr.outputtabelrow > td {
    padding-left: 0 !IMPORTANT;
}

.global-css .button-wrapper input.bigbutton.ui-btn-text {
    margin-bottom: 0;
}

.calcproforma tr.outputtabelrow {
    height: 48px;
}

.calcproforma .content table td {
    color: #001F20;
}

    .calcproforma .content table td.s1 {
        font-weight: bold !important;
        text-transform: capitalize;
    }

.calcproforma.global-css .content table tr.outputtabelrow:nth-last-child(2) {
    border-top: 1px solid #CADAD9 !important;
}

    .calcproforma.global-css .content table tr.outputtabelrow:nth-last-child(2) td.s3 {
        font-weight: 400;
        font-size: 24px;
        line-height: 140%;
        letter-spacing: 0;
        vertical-align: bottom;
        color: #001F20;
    }

.global-css input#txtGeboorteDatum {
    background-image: url(/wwwroot/Images/calender.png);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.global-css select.proforma-select-text {
    background-image: url(/wwwroot/Images/select.svg);
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: right 10px center;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.global-css tr.trJaar {
    display: inline-block;
}

.global-css .inputnextyear {
    border: 1px solid #CADAD9;
    background: #F6FFFE;
    color: #001F20;
    border-radius: 58px;
    width: 100px;
}

    .global-css .inputnextyear a {
        color: #001F20;
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: 0;
        text-decoration: none !important;
        position: relative;
    }

.global-css .inputcurrentyear {
    border: 1px solid #CADAD9;
    background: #fff;
    border-radius: 58px;
    width: 100px;
}

    .global-css .inputcurrentyear a {
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: 0;
        color: #001F20;
        position: relative;
    }

        .global-css .inputcurrentyear a::before {
            content: "";
            border: 1px solid #CADAD9;
            width: 19px;
            height: 19px;
            display: inline-block;
            border-radius: 100px;
            vertical-align: -5px;
            margin-right: 7px;
        }

.global-css .inputnextyear a::before {
    content: "";
    border: 1px solid #0E7F88;
    width: 19px;
    height: 19px;
    display: inline-block;
    border-radius: 100px;
    vertical-align: -5px;
    margin-right: 7px;
}

.global-css .inputnextyear a::after {
    content: "";
    background: #0E7F88;
    width: 11px;
    height: 11px;
    display: inline-block;
    position: absolute;
    border-radius: 100px;
    top: 5px;
    left: 4px;
}

.global-css td#nextYear {
    position: relative;
    left: 12px;
}

.global-css .inputsalaris {
    border: 1px solid #CADAD9;
    background: #fff;
    border-radius: 58px;
    width: 120px;
}

    .global-css .inputsalaris a {
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: 0;
        color: #001F20;
        position: relative;
    }

        .global-css .inputsalaris a::before {
            content: "";
            border: 1px solid #CADAD9;
            width: 19px;
            height: 19px;
            display: inline-block;
            border-radius: 100px;
            vertical-align: -5px;
            margin-right: 7px;
        }

.global-css .inputuitkering {
    border: 1px solid #CADAD9;
    background: #F6FFFE;
    color: #001F20;
    border-radius: 58px;
    width: 120px;
}

    .global-css .inputuitkering a {
        color: #001F20;
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: 0;
        text-decoration: none !important;
        position: relative;
    }

        .global-css .inputuitkering a::before {
            content: "";
            border: 1px solid #0E7F88;
            width: 19px;
            height: 19px;
            display: inline-block;
            border-radius: 100px;
            vertical-align: -5px;
            margin-right: 7px;
        }

        .global-css .inputuitkering a::after {
            content: "";
            background: #0E7F88;
            width: 11px;
            height: 11px;
            display: inline-block;
            position: absolute;
            border-radius: 100px;
            top: 5px;
            left: 4px;
        }

.global-css td#soortinkomen_uitkering {
    position: relative;
    left: 12px;
}

.global-css .inputfulltime {
    border: 1px solid #CADAD9;
    background: #fff;
    border-radius: 58px;
    width: 120px;
    height: 43px;
    padding-left: 20px;
}

    .global-css .inputfulltime a {
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: 0;
        color: #001F20;
        position: relative;
    }

        .global-css .inputfulltime a::before {
            content: "";
            border: 1px solid #CADAD9;
            width: 19px;
            height: 19px;
            display: inline-block;
            border-radius: 100px;
            vertical-align: -5px;
            margin-right: 7px;
        }

.global-css .inputparttime {
    border: 1px solid #CADAD9;
    background: #F6FFFE;
    color: #001F20;
    border-radius: 58px;
    width: 120px;
    height: 43px;
    padding-left: 20px;
}

    .global-css .inputparttime a {
        color: #001F20;
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: 0;
        text-decoration: none !important;
        position: relative;
    }

        .global-css .inputparttime a::before {
            content: "";
            border: 1px solid #0E7F88;
            width: 19px;
            height: 19px;
            display: inline-block;
            border-radius: 100px;
            vertical-align: -5px;
            margin-right: 7px;
        }

        .global-css .inputparttime a::after {
            content: "";
            background: #0E7F88;
            width: 11px;
            height: 11px;
            display: inline-block;
            position: absolute;
            border-radius: 100px;
            top: 5px;
            left: 4px;
        }

.global-css td#inkomencategorie_parttime {
    position: relative;
    left: 12px;
}

.calcproforma.global-css .content > div:nth-child(2) h3.titles {
    margin-top: 0;
}

.main-page .content,
.main-page {
    background: #E5F5F4;
}

    .main-page .headgrp {
        background: transparent;
    }

    .main-page div#content > div {
        background: #E5F5F4;
    }

.calcproforma .content table td:first-child {
    width: 45%;
}

.calcproforma .content table .s0 td.s1:nth-child(2) {
    text-align: left;
}

.calcproforma.global-css .content table tr.outputtabelrow > td:last-child {
    text-align: right;
}

.calcproforma.global-css .content table tr.outputtabelrow > td {
    text-align: left;
}

@media(max-width:767px) {

    .global-css .ltnm1 {
        font-size: 20px;
        line-height: 120%;
        letter-spacing: 0;
    }

    .global-css .ltnm {
        width: 300px;
    }

    .global-css .logovr {
        float: right;
    }
}

.global-css .row-label-wrapper {
    margin-bottom: 14px;
    margin-top: 0;
}

.global-css .row-label {
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
    color: #001F20;
    display: block;
    margin-bottom: 0;
    background-color: white;
}

.global-css .input-elm-wrapper {
    width: 100%;
    background-color: white;
}

.global-css .input-elm {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.global-css a.new-check-button {
    background-color: #FFFFFF;
    box-shadow: 0px 4px 16px 0px #00000014;
    border: 4px solid #E0E0E0;
    padding: 10.8px 32px;
    height: auto;
    border-radius: 62px;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
    text-align: center;
    color: black;
    width: 100%;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.global-css a.new-check-button:active {
    background-color: #E5F5F4;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.global-css .switch-label-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #FFFFFF;
    min-height: 43px;
}

.global-css .switch-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.global-css .label-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
}

.global-css .switch-label {
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
    color: #001F20;
    margin: 0;
    background-color: white !important;
    width: 100%;
}

.global-css .switch-wrapper .bottom {
    background-color: white !important;
}

.global-css .two-column-container {
    display: flex;
    gap: 16px;
    width: 100%;
    background-color: white;
}

.global-css .column-left,
.global-css .column-right {
    flex: 1;
    min-width: 0;
    background-color: white;
}

.global-css .inputrow td {
    padding-top: 24px;
}

@media(max-width:767px) {
    .global-css .two-column-container {
        flex-direction: column;
        gap: 0;
    }

    /* Ensure cataloguswaarde and eigenbijdrage fields don't become too narrow on smaller screens */
        .global-css #trCatalogusWaardeEnEigenbijdrage .two-column-container {
        flex-direction: row;
        min-width: 300px;
        gap: 12px;
    }

    .global-css #trCatalogusWaardeEnEigenbijdrage .column-left,
    .global-css #trCatalogusWaardeEnEigenbijdrage .column-right {
        min-width: 140px;
        flex: 1;
    }

    /* Ensure Parttime fields don't become too narrow on smaller screens */
    .global-css #trParttime .two-column-container {
        flex-direction: row;
        min-width: 300px;
        gap: 12px;
    }

    .global-css #trParttime .column-left,
    .global-css #trParttime .column-right {
        min-width: 140px;
        flex: 1;
    }
}