﻿:root {
    --channelFreq-TopBtmPadding-rate: 0.6;
    --channelFreq-leftRightPadding-rate: 0.4;
}

html, body {
    height: 100%;
}

.main-wrapper {
    height: 100%;
}

.inner-wrapper {
    flex-direction: column;
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: column; /* Safari 6.1+ */
    display: flex;
    flex-direction: column;
}

.mainWrapper {
    -webkit-flex: 1 0 auto; /* Safari 6.1+ */
    -ms-flex: 1 0 auto; /* IE 10 */
    flex: 1 0 auto;
}

footer {
    -webkit-flex-shrink: 0; /* Safari 6.1+ */
    flex-shrink: 0;
}

/*************************/

.mainTitle {
    width: 100%;
    line-height: normal;
    text-align: center;
    font-size: 2.25rem;
    color: var(--shared-red);
    margin-bottom: 1.875rem;
}

.selectTitle {
    width: 100%;
    line-height: normal;
    color: #333;
    text-align: center;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

.selectWrapper {
    width: 100%;
    padding: 2.1875rem 3rem;
    background-color: #fff;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
    -webkit-justify-content: space-between; /* Safari 6.1+ */
    justify-content: space-between; /* Safari 6.1+ */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
}

.selectItem {
    width: 44%;
}

@media screen and (max-width: 767px) {
    .selectWrapper {
        padding: calc(2.1875rem * var(--channelFreq-TopBtmPadding-rate)) calc(3rem * var(--channelFreq-leftRightPadding-rate));
    }

    .selectItem {
        width: 100%;
    }

    .selectItem:not(:first-child) {
        margin-top: 1.25rem;
    }
}

.selectItem select {
    width: 100%;
    max-width: none;
    margin-top: 0.8125rem;
    font-size: 1.25rem;
}

.selectItem .sectionHead {
    padding: 0;
}

/********************************/

.resultWrapper {
    width: 100%;
    margin: 1.25rem 0;
    padding: 2.1875rem 3rem;
    background-color: #fff;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
    -webkit-justify-content: space-between; /* Safari 6.1+ */
    justify-content: space-between; /* Safari 6.1+ */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
}

.resultTitle {
    width: 100%;
    font-size: 1.5rem;
    line-height: normal;
    margin-bottom: 1.25rem;
    color: var(--shared-red);
}

.resultColVal,
.resultColName {
    width: 100%;
    text-align: center;
    line-height: normal;
    font-size: 1.375rem;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
    -webkit-justify-content: flex-start; /* Safari 6.1+ */
    justify-content: flex-start; /* Safari 6.1+ */
}

.resultColName {
    font-weight: 500;
    background-color: #ddd;
    border: 1px solid #ccc;
}

.resultColVal:nth-child(even) {
    background-color: #f2f2f2;
}

.resultColName div,
.resultColVal div {
    width: 50%;
    padding: 0.9375rem 0;
}

.resultColName div:first-child,
.resultColVal div:first-child,
.resultColName div:last-child,
.resultColVal div:last-child {
    width: 25%;
}

.resultColName div:not(:last-child) {
    border-right: 1px solid #ccc;
}

@media screen and (max-width: 767px) {
    .resultWrapper {
        padding: calc(2.1875rem * var(--channelFreq-TopBtmPadding-rate)) calc(3rem * var(--channelFreq-leftRightPadding-rate));
    }

    .resultColVal,
    .resultColName {
        font-size: calc(1.375rem * 0.8);
    }
}
