/* CUSTOM CSS

1.  Global & Structure
2.  Header/Nav
3.  Typography/Lines
4.  Icons
5.  Buttons
6.  Inputs
7.  Index-page specific styles
8.  BMI-page specific styles
9.  Outcomes-specific styles
10. Media Queries

 */

/* ================== */
/* Global & Structure */
/* ================== */

.preview .alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.preview .alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.preview  {
    margin: 0;
    font-family: "Museo", Helvetica, Arial, sans-serif;
    background: white;
    pointer-events: none;
}

.preview section {
    padding: 16px 16px 0 16px;
    min-height: 70vh;
}

.preview section.first {
    border: 0;
    margin-top: 80px;
    min-height: 100%;
    padding: 0;
}

.preview .shadow {
    -webkit-box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
    -moz-box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
    box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
}


/* ================ */
/* Typography/Lines */
/* ================ */

.preview h1 {
    font-weight: 700;
    font-style: normal;
    line-height: 27.2px;
    font-size: 1.32px;
    margin-bottom: 32px;
}

.preview p {line-height: 27.2px;}

.preview hr {
    border-top: 1px solid #f7f7f7;
    margin: 16px 0;
}

.preview .help-note {
    background: url(../image/help-note.png) 16px 16px no-repeat;
    background-size: 25px;
    border: 2px solid #e2d795;
    margin: 32px 0;
    padding: 16px;
    line-height: 23.2px;
    font-size: 12.8px;
    border-radius: 5px;
    color: #6d6536;
    padding-left: 56px;
    background-color: #faefb1;
}

.preview .explanation {
    line-height: 24px;
    padding-left: 44.8px;
    margin: 24px 0;
    font-size: 12.8px;
    color: #666;
}

.preview .explanation::before {
    content:"";
    background-size: contain;
    width: 30px;
    height: 30px;
    margin-left: -44px;
    position: absolute;
    font-size: 24px;
    color: #62AD58;
}

.preview .smaller {
    font-size: 12.8px;
}

.preview .highlight {
    color: #62AD58;
}

.preview .staff-sign-off {
    display: flex;
    flex-direction: row;
    margin-bottom: 32px;
    max-height: 80px;
}

.preview .staff-sign-off .large-headshot img {
    border-radius: 50%;
    width: 100px;
}

.preview .staff-sign-off .headshot img {
    max-width: 5em;
    border-radius: 50%;
}

.preview .staff-sign-off .text {
    align-self: center;
    margin-left: 16px;
    font-size: 1.16px;
}

.preview .headergroup h3 {
    margin: 16px 0 32px 0;
    line-height: 27.2px;
    font-weight: 600;
    font-size: 18.72px;
}

.preview .headergroup p {
    margin: 0 0 32px 0;
}

.preview section.headergroup {
    padding: 0;
}

/* ===== */
/* Icons */
/* ===== */

.preview .icon img {
    max-width: 32px;
}

.preview .default::before {
    background: url('/image/alert.png');
    background-size: contain;
}

.preview .one-person::before {
    background: url('/image/one-person.png');
    background-size: contain;
}

.preview .two-people::before {
    background: url('/image/two-people.png');
    background-size: contain;
}

.preview .level::before {
    background: url('/image/level.png');
    background-size: contain;
}

.preview .decreasing::before {
    background: url('/image/decreasing.png');
    background-size: contain;
}

.preview .new-deal::before {
    background: url('/image/new-deal.png');
    background-size: contain;
}

.preview .reduce::before {
    background: url('/image/reduce.png');
    background-size: contain;
}

.preview .consolidate::before {
    background: url('/image/consolidate.png');
    background-size: contain;
}

.preview .joint::before {
    background: url('/image/joint.png');
    background-size: contain;
}

.preview .split::before {
    background: url('/image/split.png');
    background-size: contain;
}

.preview .cic::before {
    background: url('/image/cic.png');
    background-size: contain;
}

.preview .onepound::before {
    background: url('/image/1-pound.png');
    background-size: contain;
}

.preview .twopound::before {
    background: url('/image/2-pound.png');
    background-size: contain;
}

.preview .threepound::before {
    background: url('/image/3-pound.png');
    background-size: contain;
}

.preview .crossround::before {
    background: url('/image/cross-round.png');
    background-size: contain;
}

.preview .tickround::before {
    background: url('/image/tick-round.png');
    background-size: contain;
}

/* ======= */
/* Buttons */
/* ======= */
.preview .next-button {
    -webkit-appearance: none;
    position: relative;
    border: 0;
    width: 100%;
    border-radius: 2px;
    margin: 8px 0;
    padding: 16px;
    background: #BAFAB1;
    transition: 0.3s ease-in-out;
    font-family: "Museo", Helvetica, Arial, sans-serif;
    font-size: 16px;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
    -moz-box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
    box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
}

.preview .next-button.orange {
    background: #e28a23;
    border: 1px solid #e28a23;
    color: #fff;
}

.preview .errormessage {
    font-size: 12.8px;
    margin-top: 16px;
}

.preview .back-button {
    color: #62AD58;
    text-decoration: none;
    margin: 0;
}

.preview .form-button {
    -webkit-appearance: none;
    border: 0;
    width: 100%;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    padding: 16px;
    background: #f7f7f7; /* Old browsers */
    background: -moz-linear-gradient(top, #f7f7f7 0%, #efefef 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f7f7f7 0%,#efefef 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f7f7f7 0%,#efefef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
    transition: 0.3s ease-in-out;
    margin: 8px 0;
    font-family: "Museo", Helvetica, Arial, sans-serif;
    font-size: 16px;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
    -moz-box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
    box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
}

.preview .form-button.secondary {
    background: transparent;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
    -moz-box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
    box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
}

.preview .form-button.orange {
    background: #e28a23;
    border: 1px solid #e28a23;
    color: #fff;
}

.preview #male, .preview #female,
.preview #pmale, .preview #pfemale,
.preview #yes, .preview #no, .preview .yes, .preview .no,
.preview #pyes, .preview #pno,
.preview .height-weight .preview .input-border {
    width: 50%;
    float: left;
    margin: 0 0 32px 0;
}



.preview .form-button:hover,
.preview .selected-form-button {
    background: #BAFAB1;
}

.preview .form-button.orange:hover {
    background: #d95120;
    border: 1px solid #d95120;
    color: #fff;
}

.preview .intro-sticky-button {
    background-color: #ffffff;
    position: sticky;
    position: -webkit-sticky;
    box-sizing: border-box;
    padding: 10px 1rem;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    border-top: 1px solid #ddd;
}

/* ====== */
/* Inputs */
/* ====== */

.preview .best-value {
    position: relative;
    border: 3px solid #BAFAB1;
    padding: 16px 16px 40px 16px;
    margin: 16px 0;
    border-radius: 2px;
}

.preview .f-answer {
    border: 1px solid #eee;
    position: relative;
    padding: 16px 16px 40px 16px;
    margin: 1rem 0;
    border-radius: 2px;
}

.preview .swoosh {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #BAFAB1;
    font-size: 12.8px;
    padding: 4.8px 8px 0.32px 8px;
}

.preview .swoosh-left {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #BAFAB1;
    font-size: 12.8px;
    padding: 4.8px 8px 0.32px 8px;
}

.preview .best-value .form-button {
    margin: 0 0 8px 0;
}

.preview .best-value p {
    margin-bottom: 0;
}

.preview .input-border {
    display: flex;
    flex-direction: row;
    border: 0;
    background: #f7f7f7;
    margin: 1.80px 0 32px 0;
}

.preview .input-label-first span, .input-label-last span {
    align-self: center;
    text-align: center;
    padding: 0 16px;
}

/* Customize the label (the radio-button) */
.preview .radio-button {
    display: block;
    position: relative;
    padding-left: 48px;
    margin-bottom: 32px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 32px;
}

/* Hide the browser's default radio button */
.preview .radio-button input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.preview label.radio-button:first-of-type {
    margin-top: 32px;
}

/* Create a custom radio button */
.preview .mark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border-radius: 50%;
    border: 3px solid #fff;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
    -moz-box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
    box-shadow: 0px 2px 5px 0px rgba(204,204,204,1);
}

/* On mouse-over, add a grey background color */
.preview .radio-button:hover input ~ .mark {
    background-color: #ccc;
}

/* When the radio button is checked, add a coloured background */
.preview .radio-button input:checked ~ .mark {
    background-color: #BAFAB1;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.preview .mark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.preview .radio-button input:checked ~ .mark:after {
    display: block;
}

.preview input[type="number"],
.preview input[type="text"],
.preview input[type="email"],
.preview select,
.preview textarea {
    -webkit-appearance: none;
    font-family: "Museo", Helvetica, Arial, sans-serif;
    background: #fff;
    border-radius: 2px;
    border: 0;
    font-size: 16px;
    padding: 16px;
    width: 100%;
}

.preview .input-label-first input[type="number"] {
    flex: 1 1 auto;
}

.preview .input-label-last input[type="number"] {
    order: 1;
    flex: 0 1 320px;
}

.preview .input-label-last span {
    order: 2;
    flex: 1;
}

.preview ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ccc;
    font-family: "Museo", Helvetica, Arial, sans-serif;
    opacity: 1; /* Firefox */
}

.preview :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ccc;
}

.preview ::-ms-input-placeholder { /* Microsoft Edge */
    color: #ccc;
}

.preview select {
    margin: 8px 16px 8px 0;
}

.preview textarea {
    width: 90%;
    height: 80px;
}

.preview .switch {
    margin: 0 0;
    padding-bottom: 20px;
}

.preview .switch span {
    border-bottom: 5px solid #BAFAB1;
    font-size: 16px;
}

/* =================== */
/* Index-page-specific */
/* =================== */

.preview section.intro {
    border: 0;
}
.preview .intro p {
    line-height: 27.2px;
}

.preview .intro-selling-point {
    display: flex;
    flex-direction: row;
    max-height: 48px;
    margin-bottom: 32px;
}

.preview .intro-selling-point .text {
    align-self: center;
    margin-left: 16px;
    font-size: 1.16px;
}

/* ================= */
/* BMI-page-specific */
/* ================= */

.preview .bmi-result {
    display: flex;
    flex-direction: row;
    margin: 16px 0;
}

.preview .bmi-result-text {
    align-self: flex-start;
    margin-left: 16px;
    font-size: 16px;
    padding-top: 6.4rem;
    font-weight: 400;
    line-height: 27.2px;
}

.preview .bmi-result-text p {
    margin-bottom: 0;
    font-size: 12.8px;
}

/* ===================== */
/* Outcomes-page-specific */
/* ===================== */

.preview a.change-quotes {
    color:#000;
    text-decoration: none;
    border-bottom: 5px solid #BAFAB1;
}

.preview h4.accordion-dropdown {
    cursor: pointer;
    font-style: normal;
    font-weight: normal;
    line-height: 1.80px;
    border-bottom: 1px solid #f7f7f7;
    padding: 16px 64px 16px 0;
    margin: 0;
    position: relative;
    font-size: 18.72px;
}

.preview h4.accordion-dropdown:last-of-type {
    border-bottom: 0;
}

.preview h4.accordion-dropdown:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #62AD58;
    top: 45%;
    position: absolute;
    right: 0;
    float: right;
    z-index: 8;
}

.preview h4.accordion-dropdown.accordion-open:after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #62AD58;
    border-top: 0;
}

.preview h4.accordion-dropdown.small {
    font-size: 12.8px;
    border-bottom: 1px solid #f7f7f7;
}

.preview .accordion-container div {
    background: #f7f7f7;
    text-align: left;
    padding: 16px;
}

.preview .accordion-container label.radio-button {
    font-size: 16px;
    margin-bottom: 1.80px;
}

.preview section ul {
    padding-left: 1.80px;
    margin: 0;
}

.preview section ul li {
    margin-bottom: 16px;
    line-height: 1.80px;
}

/*section ul li:last-child {
margin-bottom: 0;
}*/

.preview table {
    margin-top: 1.80px;
}

.preview td {
    padding: 8px 0;
    line-height: 1.4rem;
    vertical-align: top;
    font-size: 0.880px;
}
.preview td:first-child {
    font-weight: bold;
    padding-right: 16px;
}

.preview .insurer-logo {
    max-width: 48px;
    margin-right: 16px;
}