﻿/* 
------------------------------------------------------
:: REM font sizing with px fallback
------------------------------------------------------ 
This site uses rem for font sizing. The base font size is 14px so 
to find the rem equivalent of an px value simply divide target(px) by the base (14). 

for example to find the rem value of 16px font size...

16 / 14 = 1.142857rem

be sure to include at least 5 numbers after the decimal to avoid browser rounding.
for more info... http://snook.ca/archives/html_and_css/font-size-with-rem}


------------------------------------------------------
:: Hevletica Neue Font Family
------------------------------------------------------ 

// Light
font-family: "HelveticaNeueW01-47LtCn_692686";

//Light oblique
font-family: "HelveticaNeueW01-47LtCn_692689";

//Regular body copy
font-family: "HelveticaNeueETW01-55Rg"

//Italic
font-family: "HelveticaNeueETW01-56It"

//Medium
font-family: "HelveticaNeueETW01-65Md"

//Medium oblique
font-family: "HelveticaNeueETW01-66Md"

//Bold
font-family: "HelveticaNeueETW01-75Bd"

//Bold italic
font-family: "HelveticaNeueETW01-76Bd"
*/




/* ------------------------------ Header ------------------------------------------------------ */

.header-brand {
    margin-top: 15px;
}

.header-brand img {
    width: 100px;
}

.site-title {
    font-size: 1.14285rem;
}

@media screen and (min-width: 768px) { /* //////////////////////////////// BREAKPOINT */

    .header-brand {
        margin-top: 0;
    }

    .header-brand img {
        display: inline-block;
        margin-top: 25px;
        margin-bottom: 25px;
        width: 150px;
    }

    .site-title {
        float: right;
        margin-top: 25px;
        margin-bottom: 0;
        line-height: 1;
        padding: 0;
        font-size: 1.85714rem;
    }

    .site-header .row {
        border-bottom: 3px solid #0075aa;
    }

    .site-header {
        margin-bottom: 20px;
    }
}
/* end media query*/



/* ------------------------------ Lists ------------------------------------------------------ */

@media screen and (max-width: 500px) { /* //////////////////////////////// BREAKPOINT */
    .property-info dt {
        float: left;
        width: 30%;
        clear: left;
    }

    .property-info dd {
        margin-left: 35%;
    }
}



/* ------------------------------ footer ------------------------------------------------------ */
.site-footer .row {
    padding: 20px;
    background-color: #f2f2f2;
    border-top: 1px solid #ccc;
}

.site-footer-copyright {
    font-size: 0.85714rem;
}



/* ------------------------------ Calculator ------------------------------------------------------ */
/* better to hide with css rather than wait on all js to load */
[data-name="loaninfofieldwrapper"],
[data-name="trResults"],
[data-name="trIsCommercial"],
[data-name="trSimIssueChk"],
[data-type="editable"] {
    //display: none;
}

[data-name="endorsementsContainer"] {
    display: none;
}

[data-name="propertyInfo"],
[data-name="loaninfofield"],
[data-name="show-options"],
[data-name="preparedForByTitleRepInfo"],
[data-name="submit-buttons"],
[data-name="state-county-city"],
[data-name="show-closing"],
[data-name="trRefiLoanPol"],
[data-name="trSimIssueChk"],
[data-name="trSale"],
[data-name="add-loan-span"],
[data-name="add-leaseholdloan-span"],
[data-name="proplocation-noresults"],
[data-name="additionalTSFButtonsRow"],
#divPropertyUnincorporated,
#trNumberOfYearsPurchase {
    display: none;
}

.select-endorsements {
    padding-top: 50px;
}

.endorsements-container .btn {
    display: inline-block;
    float: left;
    margin: 0;
}

caption {
    text-align: left;
    font-size: 1.14285rem;
}

.prem-total {
    font-family: "HelveticaNeueETW01-75Bd";
}

.form-actions {
    margin-top: 20px;
    margin-bottom: 20px;
    border-color: #e5e5e5;
    background-color: #f5f5f5;
}

.form-actions .btn {
    margin-top: 0;
}

.endorsements-container .checkbox input[type="checkbox"] {
    position: absolute;
    left: 0;
}

.endorsements-container .checkbox label {
    padding-left: 1.5em;
    position: relative;
    overflow: visible;
}

.prop-state,
.prop-city,
.prop-county {
    display: none;
}

.btn-summary {
    display: block;
    margin-top: 5px;
    font-size: .85714rem;
    line-height: 1.25;
}

.btn-summary strong {
    font-family: "HelveticaNeueETW01-75Bd"
}

.results-column,
.endorsements-column {
    padding: 15px;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    border-radius: 5px;
    background-color: #f5f5f5;
}

.table-results {
    table-layout: fixed;
    width: 100%;
}

.table-results td, .table-results th {
    text-align: right;
}

@media screen and (min-width: 768px) { /* //////////////////////////////// BREAKPOINT */

    .select-endorsements {
        padding-top: 0;
    }

    [data-type="container"] .btn {
        position: relative;
        float: right;
        top: 10px;
        margin: 0;
        width: auto;
    }
}

.help-icon {
    cursor: pointer;
    padding: 0 8px;
}

.calculator-content {
    border: 1px solid black;
    padding-top: 10px;
}

.calculator-content .row {
    padding: 0px 15px;
}

span.expand-content,
span.add-remove,
span.enable-content,
[data-name="reissueMessage"] {
    cursor: pointer;
}

.calculator-section {
    border: 1px solid black;
    padding: 10px 15px;
    background-color: #f2f2f2;
}

.calculator-container input:not(.skip-right-align) {
    text-align: right;
}

.calculator-container .btn,
#btnPdf {
    float: none;
    margin-top: 0;
}

.calculator-section-header {
    margin-top: 5px;
}

.calculator-section-total {
    text-align: right;
    margin-top: 5px;
}

.calculator-section-total span {
    width: 100%;
}

.switch-button {
    overflow: hidden;
}

.switch-button input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-button label {
    display: inline-block;
    width: 33%;
    background-color: rgb(255, 255, 255);
    color: #0075aa;
    float: left;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    text-shadow: none;
    padding: 6px 2px;
    border: 1px solid #0075aa;
    border-radius: 1px;
    line-height: 15px;
}

#buyerSellerLoanEstimateGroup label {
    height: 40px;
    display: inline-grid;
    align-items: center;
}

.switch-button label:hover {
    cursor: pointer;
}


.switch-button input:checked + label,
.btn[data-name="modal-close"] {
    background-color: #0075aa;
    color: rgb(255, 255, 255);
}

.homelink {
    text-decoration: underline;
    font-size: small;
}

.total-section,
.calculator-container button,
.btn-primary[data-type="containerToggle"] {
    background-color: #0075aa;
    border-color: #0075aa;
    color: white;
    font-size: 16px;
}

.total-section div {
    margin-bottom: 5px;
}

.total-section div:last-child {
    text-align: right;
}

.label-indent {
    text-indent: 30px;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: white;
    color: black;
    border: 1px solid #0075aa;
    font-size: x-small;
    border-radius: 6px;
    padding-left: 2px;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.btn-divider {
    width: 5px;
    height: auto;
    display: inline-block;
}

[data-name="quote-new"] {
    float: left !important;
    margin-top: 0;
}

[data-name="results-hide"] {
    float: right !important;
    margin-top: 0;
}

.fa_custom,
[data-name="proplocation-noresults"] {
    color: #0075aa;
}

.checkbox-calculator {
    margin-left: 2px;
}

.checkbox-calculator label {
    display: inline-block;
    padding-right: 10px;
    padding-top: 4px;
    white-space: nowrap;
}

.checkbox-calculator input {
    vertical-align: middle;
    margin-right: 0;
}

.checkbox-calculator label span {
    vertical-align: middle;
    font-family: Arial;
    font-size: small;
}

.add-remove-control {
    margin-left: 5px;
}

.add-remove-control i {
    padding-top: 3px;
}

.fa-disabled-no-cursor {
    opacity: 0.6;
    cursor: not-allowed !important;
}

.fa_disabled {
    color: rgb(242,242,242);
}

.clicks-disabled {
    pointer-events: none;
}

.a_disabled {
    pointer-events: none !important;
    cursor: default;
    color: rgb(242,242,242);
}

.hidden-element,
.tefe-hidden-rows {
    display: none;
}

.tefe-hidden-rows td {
    padding-top: 0px;
}

.short-padding td {
    padding-bottom: 3px;
}

.input-percentage {
    min-width: 54px;
}

input[name='txtPropertyLocation'].ui-autocomplete-loading {
    background: white url("/Content/img/ajax_loader_gray_32.gif") left center no-repeat;
}

[data-name="tbTipPolicy"] table th,
.short-padding td {
    padding-left: 5px;
    padding-right: 5px;
}

.mobile-arrow {
    display: none;
}

@media screen and (max-width: 700px) { /* //////////////////////////////// BREAKPOINT */
    [data-name="tbTipPolicy"] table th,
    .short-padding td {
        padding-left: 2px;
        padding-right: 2px;
    }
}

@media screen and (max-width: 629px) { /* //////////////////////////////// BREAKPOINT */
    #buyerSellerLoanEstimateGroup label {
        height: 60px;
    }
}

@media screen and (max-width: 599px) { /* //////////////////////////////// BREAKPOINT */
    /* .row-c* for AEM needs */
    .expand-section .column,
    .expand-section .columns,
    .expand-section .row-c0,
    .expand-section .row-c1,
    .expand-section .row-c2,
    .expand-section .row-c3 {
        position: relative;
        float: left;
        margin-left: 4.4%;
        min-height: 1px;
    }

    .expand-section .column:first-child,
    .expand-section .columns:first-child,
    .expand-section .row-c0 {
        margin-left: 0px;
    }
    /* column widths */
    .row.expand-section .one.column {
        width: 4.3%;
    }

    .row.expand-section .two.columns {
        width: 13%;
    }
    /* AEM column splitter 3 column width */
    .row.expand-section .three.columns:not(.calculator-mobile),
    .expand-section .cq-colctrl-lt3x3x3x3 .row-c0,
    .expand-section .cq-colctrl-lt3x3x3x3 .row-c1,
    .expand-section .cq-colctrl-lt3x3x3x3 .row-c2,
    .expand-section .cq-colctrl-lt3x3x3x3 .row-c3 {
        width: 21.68%;
    }
    /* AEM column splitter 4 column width */
    .row.expand-section .four.columns,
    .cq-colctrl-lt8x4 .row-c1,
    .cq-colctrl-lt4x4x4 .row-c0,
    .cq-colctrl-lt4x4x4 .row-c1,
    .cq-colctrl-lt4x4x4 .row-c2,
    .cq-colctrl-lt4x8 .row-c0 {
        width: 30.4%;
    }

    .row.expand-section .five.columns {
        width: 39.1%;
    }
    /* AEM column splitter 6 column width */
    .row.expand-section .six.columns:not(.calculator-mobile),
    .cq-colctrl-lt6x6 .row-c0,
    .cq-colctrl-lt6x6 .row-c1 {
        width: 47.8%;
    }

    .row.expand-section .seven.columns {
        width: 56.5%;
    }
    /* AEM column splitter 8 column width */
    .row.expand-section .eight.columns,
    .expand-section .cq-colctrl-lt8x4 .row-c0,
    .expand-section .cq-colctrl-lt4x8 .row-c1 {
        width: 65.2%;
    }

    .row.expand-section .nine.columns {
        width: 73.9%;
    }

    .row.expand-section .ten.columns {
        width: 82.6%;
    }

    .row.expand-section .eleven.columns {
        width: 91.3%;
    }

    .row.expand-section .twelve.columns {
        width: 100%;
    }

    .row.expand-section .calculator-mobile.m-two {
        width: 13%;
    }

    .row.expand-section .calculator-mobile.m-four {
        width: 30.4%;
    }

    .row.expand-section .calculator-mobile.m-five {
        width: 39.1%;
    }

    .row.expand-section .calculator-mobile.m-six {
        width: 47.8%;
    }

    .ui-dialog {
        min-width: 80%;
        width: 80% !important;
    }

    #buyerSellerLoanEstimateGroup label {
        height: 40px;
    }
}

@media screen and (min-width: 501px) {
    .mobile-table tr:not(.hidden-element) {
        display: table-row;
    }
}

@media screen and (max-width: 500px) { /* //////////////////////////////// BREAKPOINT */
    .mobile-table th,
    .mobile-table td {
        height: 50px;
    }

    .mobile-table tbody {
        width: 40%;
    }

    .mobile-table tr.hidden-element {
        display: none;
    }

    .tefe-hidden-rows td {
        padding-top: 10px;
        border: none !important;
    }

    [data-name="additionalTSFButtonsRow"] {
        display: block;
    }

    .not-mobile-view {
        display: none;
    }

    .mobile-arrow {
        display: block;
    }
}

/* CSS specific to iOS devices */
@supports (-webkit-overflow-scrolling: touch) {
    .mobile-table tbody {
        -webkit-overflow-scrolling: touch;
    }
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    border-radius: 0px;
}

a {
    color: #0075aa;
    text-decoration: none;
}

.btn:hover,
.btn:active {
    border-color: #0075aa;
    background-color: #005B84;
    color: #FFFFFF;
    text-decoration: none;
}

/* primary */
.btn-primary,
.btn-primary:visited,
.btn-primary:link {
    border-color: #0075aa;
    border-radius: 1px;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.3);
}

select:focus {
    outline: 2px solid rgb(0, 0, 0);
    border-radius: 0px;
}

select:required:invalid,
select:required:invalid:focus,
select[pattern]:invalid,
textarea:required:invalid,
textarea:required:invalid:focus,
textarea[pattern]:invalid,
input:required:invalid,
input:required:invalid:focus,
input[pattern]:invalid {
    outline: 0;
    border-color: #FF0000;
    background: #FFFFFF;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
    border-radius: 1px;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
    border-radius: 1px;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid #0075aa;
    background: #0075aa;
    font-weight: normal;
    color: #ffffff;
}

.modal-message-wrapper {
    border-radius: 1px;
}

.flex-container {
    display: flex;
}
.flex-container textarea {
    resize: vertical;
    display: block;
    width: 100%;
    max-width: 100%;
}
.prop-location-font {
    font-size: 80% !important;
    line-height : 10px !important
}


/* Start - Accordion - For Endorsement Selection Page */
.accordion-item {
    background-color: transparent;
}

.accordion-item-header {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.accordion-item-header::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #0075aa;
    position: absolute;
    right: 1rem;
}

.accordion-item-header.active::after {
    transform: rotate(-180deg); /* Rotate for down arrow */
}

.accordion-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.question-table {
    margin-top: 15px;
    border-left: solid;
    border-color: #0075AA;
}

.question-table td {
    padding: 5px 7px;
}

.question-col {
    width: 80%;
    text-align: left;
}

.answer-col {
    width: 15%;
}

.answer-col label {
    margin-right: -5px;
}

.answer-col-count {
    width: 120px;
    text-align: right;
}
.answer-col-currency {
    width: 120px;
    text-align: right;
}
/* End - Accordion - For Endorsement Selection Page */

/* Start - Is Collateral Mort */
.inline-checkbox-group {
    display: flex;
    align-items: center;
}

.inline-checkbox-group label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding-right: 5px;
}

.inline-checkbox-group input[type="checkbox"] {
    margin-right: 6px;
}
/* End - Is Collateral Mort */
