/*
Accent 1 #a22b2a // #a22b2a
Accent 2 #425563 // #425563
Accent 3#76777b //#76777b
Dark Grey #6f7072
Light Grey #e8e8e8
*/

/*@import url("../Boilerplate4Skin/font-awesome.css");
@import url("../Boilerplate4Skin/PageLayout.css");*/
/* @group GLOBAL
================================================== */

body {
    background: #FFF !important;
    font-family: Arial, sans-serif;
    font-size: 0.9em;
}

h1, h2, h3, h4, h5, h6
{
    font-family: 'Open Sans', sans-serif;
}
h1, h2
{
    color: #a22b2a;
}
     
h2 {
    font-size: 1.2em;
    font-size: 1.3em;
    letter-spacing: -.05em;
}
h3 {
    font-size: 1.3em;
    font-size: 1.4em;
    color: #425563;
}
h4 {
    font-size: 1.1em;
    margin: .5em 0 .01em 0;
    letter-spacing: -.05em;
    color: rgba(0, 0, 0, 0.9);
}
h4 strong,
h4 b {
    color: #425563;
}
::-webkit-scrollbar-thumb {
    background: #a22b2a;
}
iframe::-webkit-scrollbar-thumb,
.popup::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-thumb {
    background: #a22b2a;
}
/* @end
================================================== */
/* @group Classes
================================================== */

.hr-red {
    border-top: 1px solid #425563;
}
.bg-blue-bright {
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.bg-blue-HPS {
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.bg-blue-accent {
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.bg-orange-dark {
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.hero-background,
.bg-header-image {
    background: url(images/Hero_title.jpg) !important;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center !important;
    background-size: auto;
    height: 100%;
    width: 100%;
}
.ExtPg .hero-background, .ExtPg .bg-header-image {
    /*not required to be customized unless specified by client. uncomment below if client needs customization*/
    background: url(images/Hero_title.jpg) !important;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center !important;
    background-size: auto;
    height: 100%;
    width:100%;
}
.custom-content-bg {
    /*not required to be customized unless specified by client.  uncomment below if client needs customization. customization not offered, but available upon request*/
    
    background: #E8E8E8;
    background: rgba(0, 0, 0, 0.05);
    /*background-color: transparent;*/
    /*background-image: ;
    background-repeat: none;
    background-position: top center;*/
}
.bg-secondary-navigation {
    background: #E8E8E8;
    background: rgba(232, 232, 232, 1);
}

.layoutrow_PageHeader h1, .layoutrow_PageHeader h3
{
    text-align: center;
}
/********************** START Brand Colours**********************/
/**Brand Background Colours**/
/*deprecate the client named styles, adopt the .accentX names*/

.bg-blue-HPS,
.bg-accent1,
.bg-accent2,
.bg-accent3 {
    background: #a22b2a;
}
.bg-red-HPS,
.bg-accent2,
.bg-accent3 {
    background: #425563;
}
.bg-blue-accent,
.bg-accent3 {
    background:#76777b;
}
/**Brand Font Colours**/

.text-blue-HPS,
.text-accent1,
.text-accent2,
.text-accent3 {
    color: #a22b2a;
}
.text-red-HPS,
.text-accent2,
.text-accent3 {
    color: #425563;
}
.text-accent3 {
    color:#76777b;
}
.text-highlight
{
    color: #425563;
}
/**END Brand Font Colours**/
/**********************END Brand Colours**********************/
/**********************Start - Status Colours**********************/
/**Status Background Colours**/
/*Please use .statusX class, common colour names should be deprecated.*/
/*1 - Denied, Error*/
.text-white { color: #FFF !important; }
.bg-red,
.bg-status1 {
    background: #c5281c !important;
}
/*2 - Approved, Good, Successful, Paid*/

.bg-green,
.bg-status2 {
    background: #6EAF12 !important ;
}
/*3 - Void*/

.bg-dark-grey,
.bg-status3 {
    background: #6F7072 !important;
}
/*4 - Available, Neutral*/

.bg-blue,
.bg-status4 {
    background: #a22b2a !important;
}
/*5 - Orange*/

.bg-orange,
.bg-status5 {
    background: #DB5B14 !important;
}
/*6 - Processing, Pending*/

.bg-purple,
.bg-status6 {
    background: #9E26A8;
}
/**Status Text Colours**/
/*These can be variations of the colour name, but should stay true to the name. Ex: Red can be a vintage red, or firetruck red. Please use .statusX class, common colour names should be deprecated.*/
/*1 - Denied, Error*/

.text-red,
.text-status1 {
    color: #c5281c;
}
/*2 - Approved, Good, Successful, Paid*/

.text-green,
.text-status2 {
    color: #6EAF12;
}
/*3 - Void*/

.text-dark-grey,
.text-status3 {
    color: #6F7072;
}
/*4 - Available, Neutral*/

.text-blue,
.text-status4 {
    color: #a22b2a;
}
/*5 - Orange*/

.text-orange,
.text-status5 {
    color: #DB5B14;
}
/*6 - Processing, Pending*/

.text-purple,
.text-status6 {
    color: #9E26A8;
}
.mobilebrwsr-theme-color
{
    color:#a22b2a;
}

/**********************End - Status Colours**********************/

.frame {
    padding: 3em 5%;
}
.frame-wide {
    padding: 4em;
}
    .frame-small
    {
        padding: 3em 0% !important;
    }
.contentheader-content {
    margin-right: -15px !important;
    margin-left: -15px !important;
    margin-bottom: 0px !important;
}
h2.contentheader-content {
    color: #FFF;
    text-align: center;
}
.contentheader-content > article,
.contentheader-content > section,
.contentheader-content > header,
.contentheader-content > footer,
.contentheader-content > div,
.contentheader-content > aside {
    padding: 1em 2em 2em 2em;
    /*margin-bottom: 2em;*/
}
.contentbody-content {
    border: 1px solid #e8e8e8;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom-color: #d3d3d3;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}
.grey-border
{
    border: 1px solid #d8d8d8;
    border: 1px solid rgba(216,216,216, 1);
    border-bottom-color: #c2c2c2;
    border-bottom-color: rgba(194,194,194, 1);
}

h2.header-grey, h2.header-grey-light
{
background: #e8e8e8;
}

h2.header-grey-dark
{
background: #6f7072;
color: #FFF;
}
h2.header-red
{
background:#76777b;
color: #FFF;
}
/******************Buttons***************************/

.button-bright-blue,
button.button-bright-blue,
html input[type="button"].button-bright-blue,
input[type="reset"].button-bright-blue,
input[type="submit"].button-bright-blue {
    border: 1px solid rgba(0, 167, 215, 0.2);
    color: #FFF;
    background: #425563;
}
.button-bright-blue:hover,
button.button-bright-blue:hover,
html input[type="button"].button-bright-blue:hover,
input[type="reset"].button-bright-blue:hover,
input[type="submit"].button-bright-blue:hover {
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: #FFF !important;
    background:#76777b;
}
.link {
    border-bottom: 1px dotted #D6D6D6;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.25);
}
.link:hover {
    border-bottom: 1px dotted #D6D6D6;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
}
/***************List for home/dashboard*********/
/* make large buttons in a narrow column, be one per column*/

.t-col-3 ul.large-icon-buttons li a i {
    color: rgba(0, 0, 0, 0.6);
}
/* END make large buttons in a narrow column, be one per column*/

ul.large-icon-buttons li .show-on-hover {
    color: #6f7072;
}
ul.large-icon-buttons li:hover .show-on-hover {
    opacity: 1;
    color: #6f7072;
}
ul.large-icon-buttons li:hover .fa-corner {
    color: #000;
}
ul.large-icon-buttons li a i {
    color: #425563;
}
ul.large-icon-buttons li:hover {
    background: #e8e8e8;
    color: #000;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    border-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
}
ul.large-icon-buttons li:hover h3,
ul.large-icon-buttons li:hover h4,
ul.large-icon-buttons li:hover p {
    color: rgba(0, 0, 0, 0.1);
}
ul.large-icon-buttons li:hover i {
    color: #005F79;
}
/*.error {
    background-color: #fccdbb !important;
    border: 1px solid #425563 !important;
}*/
.error {
    background-color: #FBDAE0 !important;
    color: #000 !important;
    border: 1px solid #202d33 !important;
}
.valSummary {
    border: 1px solid #DE6F2C;
}
.small {
    font-size: .71em;
}
.id-card-GW {
    /*padding: 1.5em .75em .75em 0;*/
    
    font-size: .65em;
    font-size: .8em;
}
.id-card-GW .left {
    /*width: 60%;*/
}
.id-card-GW div.right {
    /*width: 35%;*/
}
.id-card-GW h3 {
    padding: .2em .4em .2em 1em;
    margin: 0;
}
.id-card-GW .inset-left {
    margin-left: 1em;
}
.id-card-GW footer {
    /*padding: .4em .4em .4em 1em;
    background-image: url(../images/generali-small-white.png);
    background-position: 95% center;
    background-repeat: no-repeat;*/
}
.bg-gen-card {
    background: url(images/id-card-logos.png) 97% 97% no-repeat;
}
.bg-reg-card {
    background: url(images/Regional-Network-Access-Card.jpg) center bottom no-repeat;
    background-size: cover;
}
.bg-Temp-IDcard {
    background: url(images/TempID-Logo-EA_CMN.png) 97% 97% no-repeat;
}
.bg-reg-card-backside {
    background: url(images/RegAccessCard_BackSide.png) center no-repeat;
    background-size: 100%;
    height: 300px;
}
ul.border-right li {
    border-right: 1px #CCC solid;
}
ul.border-right li:last-child {
    border-right: 1px #FFF solid;
}
.display-inline {
    display: inline;
}
.display-inline-block {
    display: inline-block;
}
.width-15-pct {
    width: 15%;
}
.width-70-pct {
    width: 70%;
    padding: 0 2%;
}
.circle {
    height: 486px;
}
.bg-wellness {
    background: url(images/wellness-crop.jpg) top left no-repeat;
    background-size: cover;
}
.lblText strong,
.lblText b {
    color: #425563;
}
.GGH-MAYFAIR .secondary-logo {
    min-width: 150px;
    max-width: none;
}
/* @end
================================================== */
/* @group by ID
================================================== */
.ExtPg #content {
    margin-top: 119px;
}
#content {
    margin-top: 123px;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
    webkit-animation: fadein 2s;
}
.pageedit #content {
    margin-top: 150px;
}
#content::-webkit-scrollbar-thumb {
    background: #425563
}
#primary-navigation
{
font-size: 1.15em;
}
#footer {
    background: #425563;
    color: #ffffff;
}
#footer footer {
    background: #425563;
    color: #ffffff;
}
#footer a {
   color: #ffffff;
}
#footer1_pCopyRight
{
    margin : 0;
}
#footer1_pCopyRight a{color: #ffffff;}
#wrap-logo {
   
    /*max-height: 64px !important;*/
}
    #wrap-logo h1, #wrap-logo h2 {
        margin: 0;
        text-align: left;
    } 
.ExtPg #nav-tools > ul > li > a {
    color: #a22b2a;
    padding: 19px 1.4em;
}
.ExtPg #social-media > li,
.ExtPg #social-media > li a{padding: 5px;}

.comment-text
{
   /* color: rgba(0, 0, 0, 0.9) !important;*/
}
/********** START more benefits **********/
/***************List for home/dashboard*********/

ul.large-text-buttons li {
    margin: 1em 5% 1em 0;
    border: 1px solid #e8e8e8;
}
ul.large-text-buttons li:hover {
    border-color: rgba(0, 0, 0, 0.3);
}
ul.large-text-buttons li a i {
    color: #a22b2a;
}
ul.large-text-buttons li:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    border-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
}
ul.large-text-buttons li:hover h3,
ul.large-text-buttons li:hover h4,
ul.large-text-buttons li:hover p {
    color: rgba(0, 0, 0, 0.1);
}
ul.large-text-buttons li:hover i {
    color: #005F79;
}
/********** END more benefits **********/
/*****Start Grid No Record*****/
/*
.rgNoRecords:before
{
    content: "\f01c";
    font-family: "FontAwesome";
    font-size: 3em;
    color: rgba(0, 0, 0, 0.1);
    margin-top: 3em;
    font-style: normal;
}
.rgNoRecords, .rgNoRecords td
{
    text-align: center;
    text-align: center;
    display: block;
    width: 100%;
    font-style: italic;
    color: rgba(0, 0, 0, 0.2);
}
*/
/*****END Grid No Record*****/

.RadGrid .rgHeader {
    padding: .5em .75em;
    text-align: left;
    vertical-align: top;
}
/* @group Media
================================================== */
/* ==========================================================================
Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */

@media only screen and (max-width: 1700px) {
    .frame {
        padding: 3em 10%;
    } 
}

@media only screen and (min-width: 900px) and (max-width: 1280px) {

    #content {
        margin-top: 112px;
    }
}

    @media only screen and (max-width: 1200px) {
        .frame {
            padding: 1.5em 5%;
        }
    }

    @media only screen and (max-width: 1500px) {
        .frame {
            padding: 2em 7%;
        }

        #wrap-logo {
            float: left;
            width: 25%;
            margin: 5px;
        }

        .ExtPg #wrap-logo {
            margin-top: 30px;
            margin-bottom: 25px
        }
    }

    @media only screen and (min-width: 1281px) and (max-width: 1400px) {
        .frame {
            padding: 2em 3%;
        }
    }

    @media only screen and (max-width: 960px) {
        #secondary-navigation {
            /*  position: fixed;
        bottom: 1px;
        right: 1px;*/
        }

            #secondary-navigation > ul > li:last-child:hover ul {
                /*bottom: 30px;*/
            }
    }

    @media only screen and (max-width: 900px) {
        .frame {
            padding: 1.5em 2%;
        }

        .frame-wide {
            padding: 2em;
        }

        #wrap-logo {
            max-width: inherit;
            width: 300px !important;
            margin: .4em auto !important;
            float: none;
        }
    }

    @media only screen and (max-width: 768px) {
        .rlvI {
            float: left;
            width: 99% !important;
            margin: 28px 4px 4px 4px;
            border-radius: 4px;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
            background: #ffffff;
            height: 100% !important;
        }

        .pgTitleHdr {
            font-size: 32px;
        }
    }

    @media only screen and (max-width: 400px) {
        #nav-tools ul li {
            max-width: 100%;
        }
    }

    @media only screen and (max-width: 400px) {
        .frame-wide {
            padding: 4em;
        }
    }

    /*--------------------- Header Logo -----------------------------------*/

    @media only screen and (max-width: 900px) {
        .header-logo-wrap {
            padding-left: 0 !important;
        }

        .header-logo-link {
            display: flex;
            justify-content: center;
        }
    }

    .header-logo-img {
        max-width: 100% !important;
    }

    @media only screen and (min-width: 1201px) {
        .header-logo-img {
            max-width: 75% !important;
        }
    }

    @media only screen and (max-width: 1200px) {
        .header-logo-img {
            max-width: 100% !important;
        }
    }

    @media only screen and (max-width: 900px) {
        .header-logo-img {
            max-width: 50% !important;
        }
    }


    /*--------------------- Switch control -----------------------------------*/

    input:checked + .slider {
        background-color: #a22b2a;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #a22b2a;
    }

    .switch-label-on {
        color: #425563 !important;
    }
    /*--------------------- Switch control -----------------------------------*/
    /*************** Messages - Start *******************/

    .tools-pane nav ul li a:hover {
        color: #425563;
    }

    #msg-bulk-functions {
        padding: .3em .8em;
    }

    .email-listing .rlbSelected.rlbItem {
        color: #768692 !important;
    }

        .email-listing .rlbSelected.rlbItem h3 {
            border-color: #dddddd !important;
            background-color: #ffffff !important;
        }

    .button-newMsg,
    button.button-newMsg,
    html input[type="button"].button-newMsg,
    input[type="reset"].button-newMsg,
    input[type="submit"].button-newMsg {
        border: 1px solid rgba(0, 167, 215, 0.2);
        color: #FFF;
        background: #425563 !important;
    }

        .button-newMsg:hover,
        button.button-newMsg:hover,
        html input[type="button"].button-newMsg:hover,
        input[type="reset"].button-newMsg:hover,
        input[type="submit"].button-newMsg:hover {
            border: 1px solid rgba(0, 0, 0, 0.4);
            color: #FFF !important;
            background: #768692 !important;
        }

    table.message-view {
        margin: 1em !important;
    }
    /*************** Messages - End *******************/

    .MedEmerg {
        color: #DE6F40 !important;
        font-style: italic;
        font-weight: bold;
        font-size: 1.2em;
    }
    /*--------------------------------------------------------- PreAuth ---------------------------------------------------------*/

    .ProvSplty {
        background-color: #425563;
        color: #fff;
    }

    .profile-photo-container {
        width: 115px;
        max-height: 115px;
        margin: 0 auto;
        overflow: hidden;
        background: rgba(0,0,0,0.05);
        margin: 0 auto 1em auto;
    }

    .profile-photo {
        width: 100%;
    }

    /*--------------------------------------------------------- PreAuth ---------------------------------------------------------*/


    /*--------------------------------------------------------- claim status color ---------------------------------------------------------*/

    .cdi-checknbr {
        /*color:Black;*/
    }
    /* claim summary */

    .rlvI-lightgrey {
        float: left;
        width: 99%;
        margin: 4px;
        border-radius: 4px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.03)
    }

    .rlvI {
        float: left;
        width: 30%;
        margin: 22px 32px 4px 0px;
        border-radius: 4px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        background: #ffffff;
        height: 231px;
    }

        .rlvI .claim {
            padding-left: 12px;
            line-height: 22px;
            padding-bottom: 2px;
        }

            .rlvI .claim .bold_text {
                font-weight: bold;
            }

        .rlvI .boxTitle {
            margin-bottom: 7px;
            line-height: 5px;
            color: #ffffff;
            font-weight: bold;
            border-radius: 4px 4px 0 0;
        }

    .clearfix {
        clear: both;
        display: block;
    }

    .rlvI .tdCellHead,
    .tdCell {
        border: 1px solid #d0d0d0;
    }

    .rlvI .tdCellHead {
        background-color: rgba(0, 0, 0, 0.05);
    }

/*@media (min-width:768px) and (max-width:1024px) {
    .rlvI .phEOB {
        height: 32px;
    }
}*/
    /*--------------------------------------------------------- claim status color ---------------------------------------------------------*/

    /*--------------------------------------------------------- Enrollment Pages ---------------------------------------------------------*/


    ol.breadcrumbs li.active:first-letter {
        color: #FFF;
        background: #a22b2a;
        border: 1px solid #a22b2a;
    }

    .insertButton {
        padding-bottom: 15px;
    }

    .dataGroup {
        margin-bottom: 25px;
        padding-left: 20px;
        background: #dde0e1;
        position: relative;
    }

        .dataGroup fieldset {
            padding: 20px 0 0;
            *padding: 0;
            border: 0 none;
        }

            .dataGroup fieldset legend {
                width: 100%;
                height: 50px;
                *margin: 0 0 20px -7px;
                padding-right: 0;
                line-height: 50px;
                font-weight: bold;
                font-size: 17px;
                border-bottom: 1px solid #ffffff;
            }

    /*--------------------------------------------------------- Enrollment Pages ----------------------------------------------------*/
              

    .rlvIChart {
        float: left;
        margin: 52px 32px 4px 0px;
        border-radius: 4px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        background: #ffffff;
    }

/*---------------67620	HPS1400 & All - CSS Focus/Outline to be More Distinct - AA----------------------------------*/
*:focus {
    outline: 2px solid #76777b !important;
    outline-offset: 0.3em !important;
}

/*RadMenu Accessibility*/
.RadMenu, .RadMenu *:focus {
    outline: none !important;
}

.rmItem.rmFocused {
    outline: 2px solid #76777b !important;
    outline-offset: 0.3em !important;
}

    .rmItem.rmFocused[aria-haspopup="true"]:after {
        content: '' !important;
        position: absolute !important;
        top: 100% !important;
        left: calc(50% - 20px) !important;
        width: 0 !important;
        height: 0 !important;
        border-top: solid 20px #76777b !important;
        border-left: solid 20px transparent !important;
        border-right: solid 20px transparent !important;
    }

#primary-navigation {
    display: contents;
}
/*End RadMenu AAccessibility*/


/***for the date pickers, calendar pop-up*****/
.RadPicker .rcCalPopup:focus, .RadPicker .rcTimePopup:focus {
    background: #76777b;
    /*since the outline is not looking good, settling for the background colour change*/
}

.RadPicker .RadInput > input:focus {
    background: #e8e8e8 !important;
}

input[type=checkbox]:focus + label, input[type=radio]:focus + label {
    outline: 2px solid #76777b;
    outline-offset: 0.5em !important;
}

html .RadUpload .ruButton.ruBrowse.ruFocused {
    outline-offset: -0.4em !important;
    outline: 2px solid #76777b;
}
/*---------------67620	HPS1400 & All - CSS Focus/Outline to be More Distinct - AA----------------------------------*/