﻿/*
Accent 1 #FFC422
Accent 2 #00A7D7
Accent 3 #002A36
Dark Grey #6f7072
Light Grey #e8e8e8
*/
/* @group GLOBAL
================================================== */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700');
body {
    background: #FFF !important;
    font-size: 0.9em;
}
h1 {
    color: #000;
}
h2 {
    font-size: 1.2em;
    font-size: 1.3em;
    letter-spacing: -.05em;
}
h3 {
    font-size: 1.3em;
    font-size: 1.4em;
    color: #00A7D7;
}
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: #00A7D7;
}
::-webkit-scrollbar-thumb {
    background: #FFC422;
}
iframe::-webkit-scrollbar-thumb,
.popup::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-thumb {
    background: #FFC422;
}
/* @end
================================================== */
/* @group Classes
================================================== */

.hr-red {
    border-top: 1px solid #00A7D7;
}
.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 {
    /*not required to be customized unless specified by client.  uncomment below if client needs customization*/
    /*background-color: accent 1;
    color: white;
    background-image: url(../HPS1400/images/filename.png);*/
}
.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: #00A7D7;   
}

.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: #FFC422;
}
.bg-red-HPS,
.bg-accent2,
.bg-accent3 {
    background: #00A7D7;
}
.bg-blue-accent,
.bg-accent3 {
    background: #002A36;
}
/**Brand Font Colours**/

.text-blue-HPS,
.text-accent1,
.text-accent2,
.text-accent3 {
    color: #FFC422;
}
.text-red-HPS,
.text-accent2,
.text-accent3 {
    color: #00A7D7;
}
.text-accent3 {
    color: #002A36;
}
.text-highlight
{
    color: #00A7D7;
}
/**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*/

.bg-red,
.bg-status1 {
    background: #c5281c;
}
/*2 - Approved, Good, Successful, Paid*/

.bg-green,
.bg-status2 {
    background: #6EAF12;
}
/*3 - Void*/

.bg-dark-grey,
.bg-status3 {
    background: #6F7072;
}
/*4 - Available, Neutral*/

.bg-blue,
.bg-status4 {
    background: #FFC422;
}
/*5 - Orange*/

.bg-orange,
.bg-status5 {
    background: #DB5B14;
}
/*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: #FFC422;
}
/*5 - Orange*/

.text-orange,
.text-status5 {
    color: #DB5B14;
}
/*6 - Processing, Pending*/

.text-purple,
.text-status6 {
    color: #9E26A8;
}
.mobilebrwsr-theme-color
{
    color:#00AFDB;
}

/**********************End - Status Colours**********************/

.frame {
    padding: 3em 0%;
}
.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); 
}
/******************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: #00A7D7;
}
.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: #002A36;
}
.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: #FFC422;
}
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: #FBDAE0 !important;*/ /*#fccdbb*/
    /*color: #000 !important;
    border: 1px solid #00A7D7 !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: #00A7D7;
}
.GGH-MAYFAIR .secondary-logo {
    min-width: 150px;
    max-width: none;
}
/* @end
================================================== */
/* @group by ID
================================================== */

#content {
    margin-top: 101px;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
    webkit-animation: fadein 2s;
}
 .ExtPg #content {
     margin-top: 124px;
}
.pageedit #content {
    margin-top: 150px;
}
#content::-webkit-scrollbar-thumb {
    background: #00A7D7
}
#primary-navigation
{
font-size: 1.25em;
}
#footer {
    background: rgba(232, 232, 232, 0.8);
}
#footer footer {
    background: rgba(232, 232, 232, 0.8);
}
#wrap-logo {
    max-width: 160px;
    /*max-height: 64px !important;*/
}
    #wrap-logo h1, #wrap-logo h2 {
        margin: 0;
        padding: 0.2em;
    } 
.ExtPg #nav-tools > ul > li > a {
    /*color: #FFC422;*/
}
.ExtPg #wrap-logo
{
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
.ExtPg #nav-tools > ul > li > a
{
    padding: 0 !important;
    font-weight: normal !important;
}

.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: #FFC422;
}
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 (max-width: 1200px) {
    .frame {
        padding: 1.5em 5%;
    }
}
@media only screen and (max-width: 1500px) {
    .frame {
        padding: 2em 7%;
    }
}
@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;
    }
}
@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;
    }
}
/*--------------------- Switch control -----------------------------------*/

input:checked + .slider {
    background-color: #FFC422;
}
input:focus + .slider {
    box-shadow: 0 0 1px #FFC422;
}
.switch-label-on {
    color: #00A7D7 !important;
}
/*--------------------- Switch control -----------------------------------*/
/*************** Messages - Start *******************/

.tools-pane nav ul li a:hover {
    color: #00A7D7;
}
#msg-bulk-functions {
    padding: .3em .8em;
}
.email-listing .rlbSelected.rlbItem {
    color: #333333 !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: #00A7D7 !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: #002A36 !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: #00A7D7;
    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: 52px 32px 4px 0px;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    background: #ffffff;
    height: 258px;
}
.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);
}
/*--------------------------------------------------------- claim status color ---------------------------------------------------------*/

/*--------------------------------------------------------- Enrollment Pages ---------------------------------------------------------*/ 

  
 ol.breadcrumbs li.active:first-letter{
     color: #FFF;
     background: #FFC422;
     border: 1px solid #FFC422;
}
 .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 ---------------------------------------------------------*/     