/* ------------------------------------------------------------------------------
	Validation
--------------------------------------------------------------------------------- */

@font-face {
    font-family: "source sans pro";
    src: url(./fonts/source-sans-pro/SourceSansPro-Regular.eot);
    src: url(./fonts/source-sans-pro/SourceSansPro-Regular.woff) format("woff"),url(./fonts/source-sans-pro/SourceSansPro-Regular.woff2) format("woff2"),url(./fonts/source-sans-pro/SourceSansPro-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@media (min-width: 1200px) {
    .header-logo {
        background-image: url('images/landing-banner.png');
        height: 450px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position-x: 100%;
        background-position-y: 100%;
    }

    .header-row {
        height: 450px;
    }
}

@media (max-width: 1199px) {
    .header-logo {
        background-image: none;
    }

    .header-row {
    }
}

@media (min-width: 576px) and (min-width: 786px) and (max-width: 991.98px) { /* xs and sm */
    .mobile-view, .mobile-view * {
        font-size: 36px !important;
    }
    .container, .container-xs-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: var(--bs-gutter-x, 0.75rem) !important;
        padding-left: var(--bs-gutter-x, 0.75rem) !important;
    }
    .layout-logo {
        width: 100% !important;
    }
}

.hide-xs-sm-md {
    display: none !important;
}
.show-xs-sm-md {
    display: block !important;
}

@media (min-width: 992px) { /* lg and up */
    .hide-xs-sm-md {
        display: block !important;
    }
    .show-xs-sm-md {
        display: none !important;
    }
}

/* added for styling the jquery dialog for popup */
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {
    border-color: #0053A0 !important;
    border-style: solid;
    border-width: 5px;
}

.field-validation-error {
    color: #ff0000;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    margin-top: 0px;
    font-weight: bold;
    color: #ff0000;
    text-align: center;
}

    .validation-summary-errors ul {
        margin-top: 5px;
    }

.validation-summary-valid {
    display: none;
    text-align: left;
}

/* ------------------------------------------------------------------------------
	Messaging
--------------------------------------------------------------------------------- */
#messaging {
    padding: 20px;
    text-align: center;
    color: #f00;
    font-weight: bold;
}

.wholePage {
    height: 613px;
    width: 1000px;
    margin: 0 auto;
}

#body-content-new > :first-child {
    border-radius: 15px 15px 0 0;
}

#body-content-new > :last-child {
    border-radius: 0 0 15px 15px;
}

#body-content-new > :only-child {
    border-radius: 15px;
}

.section {
    margin-top: 10px;
    padding-bottom: 20px;
}

.section-realTimeSolutions, .section-phmp, .section-generalBenefit, .section-careGuide {
    margin-top: 10px;
}

.section h2 {
    padding-left: 24px;
    padding-top: 20px;
}

#generalBenefit {
    background: #7EA8CA;
}

#realTimeSolution {
    background: black;
}

#phmp {
    background: #778899;
    padding-bottom: 0;
}

    #phmp .right {
        padding-top: 20px;
    }



#careGuide {
    background: #56060C; /* Old browsers */
    background: -moz-linear-gradient(left, #ab0f14 0%, #490609 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ab0f14 0%,#490609 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ab0f14 0%,#490609 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab0f14', endColorstr='#490609',GradientType=1 ); /* IE6-9 */
}

/* General Benefit Information buttons */
.stretchButton {
    position: relative;
    /* Use layered transparent backgrounds to make chevrons overlap */
    background: transparent no-repeat scroll top right;
    background-image: url('images/button-notlast.png'), url('images/button-base.png');
    display: block;
    float: left;
    height: 66px;
    margin-right: 0px;
    padding-right: 12px;
    /* FONT PROPERTIES */
    text-decoration: none;
    color: #000000;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    max-width: 120px;
}

    .stretchButton:last-child {
        /* Show only the chevron on the last button */
        background-image: url('images/button-base.png');
    }

    .stretchButton a:hover span {
        text-decoration: underline;
    }

#topButtons .buttonRow {
    height: 64px;
    padding-bottom: 15px;
}

#phrSection {
    background: url('images/blue_shape.png') no-repeat;
    margin: 10px;
    width: 243px;
    height: 308px;
}

    #phrSection div {
        margin: 5px;
    }

    #phrSection #imgClipboard {
        height: 60px;
        padding: 10px 0px 0px 95px;
    }

    #phrSection h2 {
        margin: 0;
        padding: 0;
        text-align: center;
        line-height: 32px;
        width: 230px;
    }

    #phrSection p {
        text-align: center;
        line-height: 18px !important;
        margin: 10px 5px;
    }

#upperLeftBody #topButtons {
    margin-top: 20px;
}


#upperLeftBody #buttonSection {
    margin-top: 50px;
    margin-left: 230px;
    width: 560px;
}

.btnBackground {
    display: block;
    height: 64px;
    width: 100px;
}

.btnText {
    display: table-cell;
    line-height: normal;
    vertical-align: middle;
    max-width: 100px;
    width: 100px;
    min-width: 80px;
    text-align: center;
    padding: 5px 4px 5px 4px;
    color: White;
}

/* RealTimeSolutions buttons*/
.btnBackgroundReal {
    display: block;
    background: #990000;
    height: 66px;
    width: 100px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    border-radius: 7px;
}

.stretchButtonReal {
    /* Sliding right image */
    position: relative;
    display: inline-block;
    height: 66px;
    margin-right: 0px;
    margin-bottom: 5px;
    padding-right: 24px;
    /* FONT PROPERTIES */
    text-decoration: none;
    color: #000000;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    max-width: 120px;
}

    .stretchButtonReal a:hover {
        text-decoration: underline;
        color: white;
    }

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

#careGuide .flex-container {
    width: 500px;
}

/* My Care Guide buttons*/
.careButton {
    /* Sliding right image */
    width: 85px;
    min-height: 55px;
    text-align: center;
    margin-right: 5px;
    margin-bottom: 5px;
    line-height: 1em;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

    .careButton a {
        display: block;
        padding: 30px 0px 0px 0px;
        min-height: 28px;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 9px !important;
        font-weight: bold !important;
        color: white !important;
    }

    .careButton:hover {
        text-decoration: underline;
        color: white !important;
    }

#copyright {
    text-align: center;
    font-size: 12px;
    color: #ffffff;
    line-height: 30px;
}

.columns {
    display: table;
}

.buttonSection {
    display: table-cell;
    padding-top: 10px;
}

.textSection {
    display: table-cell;
}

#realTimeSolution {
    display: table;
    height: 200px;
}

    #realTimeSolution .textSection {
        width: 440px;
        padding-bottom: 30px;
        padding-right: 30px;
    }

    #realTimeSolution .buttonSection {
        margin-bottom: 10px;
        text-align: center;
    }


#careGuide {
    width: 100%;
    min-height: 255px;
}

    #careGuide .buttonSection {
        padding-top: 10px;
    }

    #careGuide .textSection {
        width: 560px;
        padding-bottom: 30px;
        padding-right: 30px;
    }

.monthStatus {
    border: 2px solid #0054a4;
    border-radius: 3px;
    background: white;
    width: 100px;
    height: 80px;
    text-align: center;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 10pt;
    float: left;
    margin: 5px;
}

    .monthStatus div {
        background: #0054a4;
        color: white;
        line-height: 1.2em;
    }

    .monthStatus img {
        padding-top: 8px;
    }

.none {
    background: #cccccc;
}

/* PHMP Activity page*/
#section-phmp-activity {
    color: black !important;
    border-radius: 15px;
    background: #e1e0dc url("/Content/images/phmp-heart.png") no-repeat;
    background-size: 250px 200px;
    background-position: left 40px bottom 40px;
    padding: 15px;
}

    #section-phmp-activity li {
        line-height: 1.5em;
    }

    #section-phmp-activity h2 {
        color: #0f3c64;
    }

    #section-phmp-activity table {
        border-collapse: separate;
        border-spacing: 2px;
        margin: 0;
    }


/* PHMP Status */
#phmp-status-qualified {
    width: 300px;
    height: 300px;
    background: url("/Content/images/nurse-done.png") no-repeat;
}


    #phmp-status-qualified span {
        font-size: 1.3em;
        color: #006600;
    }

#phmp-status-notQualified {
    width: 300px;
    height: 300px;
    background: url("/Content/images/nurse-warn-male.png") no-repeat;
}

    #phmp-status-notQualified span {
        font-size: 1.3em;
        color: #660000;
    }

#phmp-calendar-link {
    position: absolute;
    font-size: 10pt;
    width: 176px;
    bottom: 5px;
}

    #phmp-calendar-link :hover {
        text-decoration: underline;
    }

#phmp .left {
    display: table-cell;
    height: 300px;
}

#phmp .right {
    display: table-cell;
    width: 300px;
    height: 300px;
    padding-top: 20px;
    vertical-align: bottom;
}

#contactCoach {
    position: relative;
    left: 5px;
    width: 190px;
    height: 130px;
    top: 60px;
    line-height: 1.5em;
    font-weight: bold;
    color: #0556a2;
    text-align: center;
    text-shadow: #fff 1px 1px;
    cursor: default;
}

#google_translate_element {
    display: none;
}

#upperRightBody {
    position: relative;
    float: right;
    /*  background: url(images/blue_background.png)  top right no-repeat; */
    width: 254px;
    height: 377px;
}

    #upperRightBody #imgFiles {
        position: relative;
        margin-top: 20px;
        height: 200px;
    }