/* =========================================================
   INFOFITNESS CALCULATORS
   ========================================================= */


/* =========================================================
   CALCULATOR BASIS
   ========================================================= */

.if-page .if-calculator {
    width: 100%;
    margin: 60px 0px;
    padding: 30px;
    background: #faf9f7;
    border: 1px solid #ebe7ec;
    border-radius: 14px;
    box-sizing: border-box;
}

.if-page .if-calculator *,
.if-page .if-calculator *::before,
.if-page .if-calculator *::after {
    box-sizing: border-box;
}


/* =========================================================
   CALCULATOR KOP
   ========================================================= */

.if-page .if-calculator-head {
    width: 100%;
    max-width: 720px;
    margin: 0 0 26px;
}

.if-page .if-calculator-label {
    display: block;
    margin: 0 0 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px !important;
    line-height: 1.4 !important;
    font-weight: 700;
    color: #ff5600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.if-page .if-calculator-head h2 {
    margin: 0 0 8px;
    font-size: 24px !important;
    line-height: 1.3 !important;
}

.if-page .if-calculator-head p {
    margin: 0;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #5d585f;
}


/* =========================================================
   VELDEN
   ========================================================= */

.if-page .if-calculator-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

.if-page .if-calculator-fields-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.if-page .if-calculator-field {
    min-width: 0;
}

.if-page .if-calculator-field label {
    display: block;
    margin: 0 0 7px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 700;
    color: #1a1a1a;
}

.if-page .if-calculator-input {
    position: relative;
    width: 100%;
}

.if-page .if-calculator-input input {
    display: block;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 58px 0 14px;
    background: #ffffff;
    border: 1px solid #dcd7de;
    border-radius: 8px;
    box-shadow: none;
    outline: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px !important;
    line-height: 50px !important;
    font-weight: 600;
    color: #1a1a1a;
}

.if-page .if-calculator-input input:focus {
    border-color: #3a3244;
}

.if-page .if-calculator-input input::placeholder {
    color: #aaa5ab;
    opacity: 1;
}

.if-page .if-calculator-input > span {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 600;
    color: #8a848c;
    pointer-events: none;
}


/* =========================================================
   KLEINE TOELICHTING
   ========================================================= */

.if-page p.if-calculator-note {
    margin: 10px 0 0;
    font-size: 10px !important;
    line-height: 1.55 !important;
    color: #77717a;
}


/* =========================================================
   MELDING
   ========================================================= */

.if-page .if-calculator-message {
    width: 100%;
    margin: 18px 0 0;
    padding: 13px 15px;
    background: #f3f0f4;
    border: 1px solid #ddd8df;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px !important;
    line-height: 1.55 !important;
    color: #4d4850;
}

.if-page .if-calculator-message[hidden] {
    display: none;
}


/* =========================================================
   RESULTAAT
   ========================================================= */

.if-page .if-calculator-result {
    display: grid;
    grid-template-columns: minmax(170px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    width: 100%;
    margin: 26px 0 0;
    padding: 21px 23px;
    background: #3a3244;
    border-radius: 10px;
}

.if-page .if-calculator-result-label,
.if-page .if-calculator-result-secondary > span {
    display: block;
    margin: 0 0 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px !important;
    line-height: 1.4 !important;
    font-weight: 700;
    color: #d7d2d9;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.if-page .if-calculator-result [data-calculator-result="primary"] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 30px !important;
    line-height: 1.2 !important;
    font-weight: 700;
    color: #ffffff;
}

.if-page .if-calculator-result-secondary {
    min-width: 0;
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, .18);
}

.if-page .if-calculator-result .if-calculator-result-secondary {
    color: #ffffff !important;
}

.if-page .if-calculator-result .if-calculator-result-secondary > span {
    color: #d7d2d9 !important;
}

.if-page .if-calculator-result .if-calculator-result-secondary > strong {
    color: #ffffff !important;
}

.if-page .if-calculator-result .if-calculator-result-secondary > strong {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 700;
    color: #ffffff !important;
}

.if-page .if-calculator-result .if-calculator-result-secondary > span {
    display: block;
    margin: 0 0 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px !important;
    line-height: 1.4 !important;
    font-weight: 700;
    color: #d7d2d9 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.if-page .if-calculator-result > p {
    margin: 0;
    padding: 0 0 0 28px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #d7d2d9;
}


/* =========================================================
   SAMENVATTING
   ========================================================= */

.if-page .if-calculator-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 10px 0 0;
}

.if-page .if-calculator-summary-item {
    min-width: 0;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #e5e1e6;
    border-radius: 9px;
}

.if-page .if-calculator-summary-item > span {
    display: block;
    margin: 0 0 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px !important;
    line-height: 1.4 !important;
    font-weight: 600;
    color: #77717a;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.if-page .if-calculator-summary-item > strong {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 700;
    color: #1a1a1a;
}


/* =========================================================
   SUBKOPPEN IN CALCULATOR
   ========================================================= */

.if-page .if-calculator-section-head {
    width: 100%;
    margin: 0 0 15px;
}

.if-page .if-calculator-section-head h3 {
    margin: 0 0 6px;
    font-size: 17px !important;
    line-height: 1.35 !important;
}

.if-page .if-calculator-section-head p {
    margin: 0;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #676269;
}


/* =========================================================
   BMI SCHAAL
   ========================================================= */

.if-page .if-calculator-scale-section {
    width: 100%;
    margin: 32px 0 0;
}

.if-page .if-calculator-scale-section[hidden] {
    display: none;
}

.if-page .if-calculator-scale {
    width: 100%;
    padding: 20px 18px 17px;
    background: #ffffff;
    border: 1px solid #e5e1e6;
    border-radius: 10px;
}

.if-page .if-calculator-scale-track {
    position: relative;
    width: 100%;
    height: 12px;
    margin: 4px 0 14px;
    border-radius: 20px;
    background: linear-gradient(
        to right,
        #d9d5dc 0%,
        #d9d5dc 14%,
        #8f8797 14%,
        #8f8797 40%,
        #d89a79 40%,
        #d89a79 60%,
        #ff5600 60%,
        #ff5600 100%
    );
}

.if-page .if-calculator-scale-marker {
    position: absolute;
    top: 50%;
    left: var(--calculator-position, 0%);
    width: 20px;
    height: 20px;
    background: #3a3244;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #3a3244;
    transform: translate(-50%, -50%);
    transition: left .2s ease;
}

.if-page .if-calculator-scale-legend {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.if-page .if-calculator-scale-legend > div {
    display: block;
    flex: 0 0 auto;
    padding-right: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px !important;
    line-height: 1.4 !important;
    font-weight: 600;
    color: #77717a;
}

.if-page .if-calculator-scale-legend-under {
    width: 14%;
    text-align: left;
}

.if-page .if-calculator-scale-legend-healthy {
    width: 26%;
    text-align: center;
}

.if-page .if-calculator-scale-legend-over {
    width: 20%;
    text-align: center;
}

.if-page .if-calculator-scale-legend-obesity {
    width: 40%;
    padding-right: 0 !important;
    text-align: right;
}


/* =========================================================
   TABELLEN
   ========================================================= */

.if-page .if-calculator-table-section {
    width: 100%;
    margin: 32px 0 0;
}

.if-page .if-calculator-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e5e1e6;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
}

.if-page .if-calculator-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-family: 'Montserrat', sans-serif;
}

.if-page .if-calculator-table th {
    padding: 13px 16px;
    background: #f3f0f4;
    border-bottom: 1px solid #e5e1e6;
    font-size: 11px !important;
    line-height: 1.4 !important;
    font-weight: 700;
    color: #4d4850;
    text-align: left;
    white-space: nowrap;
}

.if-page .if-calculator-table td {
    padding: 13px 16px;
    background: #ffffff;
    border-bottom: 1px solid #eeeaf0;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #2b2b2b;
    text-align: left;
}

.if-page .if-calculator-table tbody tr:last-child td {
    border-bottom: 0;
}

.if-page .if-calculator-table td:first-child strong {
    color: #3a3244;
}

.if-page .if-calculator-table td[data-calculator-weight] {
    font-weight: 700;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .if-page .if-calculator {
        margin-bottom: 46px;
        padding: 24px;
    }

    .if-page .if-calculator-head h2 {
        font-size: 22px !important;
    }

    .if-page .if-calculator-fields,
    .if-page .if-calculator-fields-3 {
        grid-template-columns: 1fr;
    }

    .if-page .if-calculator-result {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .if-page .if-calculator-result-secondary,
    .if-page .if-calculator-result > p {
        padding: 14px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .18);
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 520px) {

    .if-page .if-calculator-summary-grid {
        grid-template-columns: 1fr;
    }

    .if-page .if-calculator-scale {
        padding: 17px 12px 14px;
    }

    .if-page .if-calculator-scale-legend > div {
        font-size: 8px !important;
        padding-right: 4px;
    }

}


@media (max-width: 480px) {

    .if-page .if-calculator {
        margin-bottom: 38px;
        padding: 20px 16px;
        border-radius: 12px;
    }

    .if-page .if-calculator-head {
        margin-bottom: 22px;
    }

    .if-page .if-calculator-head h2 {
        font-size: 19px !important;
    }

    .if-page .if-calculator-result {
        padding: 18px;
    }

	.if-page .if-calculator-result [data-calculator-result="primary"] {
		font-size: 27px !important;
	}

    .if-page .if-calculator-table {
        min-width: 480px;
    }

}

/* =========================================================
   CALCULATOR EXTRA LAYOUTS
   ========================================================= */

.if-page .if-calculator-fields-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.if-page .if-calculator-subsection {
    width: 100%;
    margin: 30px 0 0;
    padding-top: 28px;
    border-top: 1px solid #e5e1e6;
}

.if-page .if-calculator-subsection:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}


/* =========================================================
   SELECTS
   ========================================================= */

.if-page .if-calculator-select {
    display: block;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 38px 0 14px;
    background: #ffffff;
    border: 1px solid #dcd7de;
    border-radius: 8px;
    box-shadow: none;
    outline: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px !important;
    line-height: 50px !important;
    font-weight: 600;
    color: #2b2b2b;
    cursor: pointer;
}

.if-page .if-calculator-select:focus {
    border-color: #3a3244;
}

.if-page .if-calculator-field-help {
    display: block;
    margin: 7px 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px !important;
    line-height: 1.5 !important;
    font-weight: 400;
    color: #827c84;
}


/* =========================================================
   CALORIE RESULTAAT
   ========================================================= */

.if-page .if-calorie-results {
    width: 100%;
    margin: 32px 0 0;
}

.if-page .if-calorie-results[hidden] {
    display: none;
}

.if-page .if-calorie-primary {
    width: 100%;
    padding: 24px;
    background: #3a3244;
    border-radius: 10px;
}

.if-page .if-calorie-primary > strong {
    display: inline-block;
    margin: 3px 7px 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 34px !important;
    line-height: 1.2 !important;
    font-weight: 700;
    color: #ffffff !important;
}

.if-page .if-calorie-primary-unit {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px !important;
    line-height: 1.4 !important;
    font-weight: 600;
    color: #d7d2d9;
}


/* =========================================================
   CALORIE STATISTIEKEN
   ========================================================= */

.if-page .if-calorie-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 10px 0 0;
}

.if-page .if-calorie-stat {
    min-width: 0;
    padding: 17px 18px;
    background: #ffffff;
    border: 1px solid #e5e1e6;
    border-radius: 9px;
}

.if-page .if-calorie-stat > span,
.if-page .if-calorie-macro > span {
    display: block;
    margin: 0 0 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px !important;
    line-height: 1.4 !important;
    font-weight: 600;
    color: #77717a;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.if-page .if-calorie-stat > strong {
    display: inline-block;
    margin-right: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 700;
    color: #1a1a1a;
}

.if-page .if-calorie-stat > small,
.if-page .if-calorie-macro > small {
    font-family: 'Montserrat', sans-serif;
    font-size: 9px !important;
    line-height: 1.4 !important;
    color: #827c84;
}

.if-page .if-calorie-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.if-page .if-calorie-stat > span {
    width: 100%;
    margin-bottom: 4px;
}


/* =========================================================
   MACRO'S
   ========================================================= */

.if-page .if-calorie-macros {
    width: 100%;
    margin: 32px 0 0;
}

.if-page .if-calorie-macro-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.if-page .if-calorie-macro {
    min-width: 0;
    padding: 20px 18px;
    background: #ffffff;
    border: 1px solid #e5e1e6;
    border-radius: 9px;
}

.if-page .if-calorie-macro > strong {
    display: block;
    margin: 0 0 2px;
    font-family: 'Montserrat', sans-serif;
    font-size: 21px !important;
    line-height: 1.3 !important;
    font-weight: 700;
    color: #3a3244;
}

.if-page .if-calorie-result-note {
    margin-top: 28px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .if-page .if-calculator-fields-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 768px) {

    .if-page .if-calorie-stat-grid,
    .if-page .if-calorie-macro-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 520px) {

    .if-page .if-calculator-fields-4 {
        grid-template-columns: 1fr;
    }

    .if-page .if-calorie-primary {
        padding: 20px 18px;
    }

    .if-page .if-calorie-primary > strong {
        font-size: 29px !important;
    }

}

/* =========================================================
   MESSAGE
   ========================================================= */

.if-page .if-calculator-field.is-missing .if-calculator-select,
.if-page .if-calculator-field.is-missing .if-calculator-input input {
    border-color: #ff5600;
    box-shadow: 0 0 0 2px rgba(255, 86, 0, .08);
}