﻿/* Brand Colors  */
/* Business-Orange: #c24d00 */
/*  curtain-orange  rgba(164, 47, 0, 0.5) */
/* Agency-Green:    #969300 */
/*  curtain-green   rgba(160, 162, 51, 0.5) */
/* Indiv-Gold:      #DCAA00/#eda900 */
/*  curtain-yellow  rgba(220, 170, 0, 0.5) */
/* About-Navy:      #003e5f/#0c233f */
/*  curtain-blue    rgba(0, 62, 95, 0.5) /*
/* Headings-h1-h2:  #0c233f */
/* Headings-h3:     #4F5858 */

/* PrimaryButton:   #004D71 */
/* Dark Grey:       #cccccc */
/* Light Grey:      #eeeeee */
/* Lighter Grey:    #f7f7f7 */
/* ButtonGroup1:    #333333 */
/* ButtonGroup2:    #4F5858 */

/* header style - cinfin adjustments*/
.homeAccountManager .btnpaymanage {
    background: #c24d00 !important;
    color: white;
    margin-top:5px;
}
.btnpaymanage {
    background: #c24d00 !important;
    color: white;
}

/* header changes after removing nav links */
header > .row {
    /*    margin-bottom:15px;*/
    margin-bottom: 65px;
}
.account-manager .row {
    padding-left: 15px;
    padding-right: 15px;
}
.account-manager .col-xs-4 {
    padding-left: 1px;
    padding-right: 1px;
}
.account-manager .btn {
    background-color: #eeeeee;
    color: #004D71;
    font-size: 14px;
    font-weight:normal;
    text-transform: uppercase;
    padding-top:30px;
    padding-bottom:28px;
    width:100%;
}
.account-manager .btn i {
    padding-right: 4px;
}

.account-outage-box {
    background-color: #00496d;
    color: #ffffff;
    padding-top:30px;
    padding-bottom:15px;
}

/* header button links - mobile views */
@media screen and (max-width: 320px) {
    /*.account-manager .btn span
    {
        display: block;
    }*/
    .account-manager .btn {
    	font-size: 12px;
    }
    
}
@media screen and (max-width: 767px) {
    .account-manager .btn i
    {
        display: block;
    }
}

/* mobile views */
@media screen and (max-width: 768px) {
    .top-navigation, .top-navigation-container  {
        background-color: #004D71;
        text-align:center;
    }
    .top-navigation .header-links {
        background-color: transparent;
    }
    .header-links li a {
        color: white;
    }
    .account-manager .row {
        padding-left: 0px;
        padding-right: 0px;
    }
    .account-outage-box {
        padding-top:15px;
    }
}

/* tablet views */
@media screen and (min-width: 768px) and (max-width: 992px) {
    .header-logo {
        display: none;
    }
    .logo-mobile {
        display: block;
    }   
    .logo-mobile .hiddenprint {
        margin-top: 0px;
    }   
    .logo {
        height: 80px;
        margin: 0px;
        width: 180px;
    }
}

/* match cinfin.com style from Agency Landing Page CSS - tablet views*/
@media screen and (min-width: 768px) {
    header .col-md-6 {
        padding-left: 5px; 
        padding-right: 5px; 
    }
}

/* footer styles - cinfin adjustments */
footer.cinfin-page-footer {
      padding-bottom: 1em; 
}

/* mobile device styles */
.main.mobileDevice h1 {
    font-size: 22px;
}
.main.mobileDevice h2 {
    font-size: 16px;
}
.main.mobileDevice h3 {
    font-size: 14px;
}
.main.mobileDevice .breadcrumb {
    /*background-color: #003e5f;
    border-radius: 0px;
    color: White;
    padding: 0px;*/
    display: none;
}
.main.mobileDevice .breadcrumb li:first-child {
    padding-left: 5px;
}
.main.mobileDevice .breadcrumb li a {
    color: White;
}
.main.mobileDevice .userContent {
    margin-top: 0px;
}
.main.mobileDevice .agencyContent p {
    font-size: 14px;
}

/* section content styles */
.section-content blockquote h4 {
    font-family: 'EB Garamond', serif!important;
    text-transform: none!important;
    line-height: 30px!important;
    font-size: 1.8em!important;
    letter-spacing: 0px!important;
    color: #0c233f!important;
    padding: 0 0;
    margin: 0px 0px 0px 0px!important;
    font-weight: 500!important;
}
.payment-options p {
    margin-top:10px;
}
.payment-options .address-block {
    padding-left:30px;
}

/* left navigation (sidebar) - cinfin adjustments */
#accordion.left-navigation  {
    margin: 15px auto 20px auto;
}
.left-navigation .left-nav-header {
    background-color: #003e5f;
}
.left-navigation .panel-heading h4 a:first-child {
    font-size: 14px;
}

/* general info module (sidebar) */
.info-box {
    font-size: 14px;
    margin-bottom: 20px;
    margin-top:20px;
}
.info-box .info-box-title {
    background-color: #cccccc;
    text-transform: uppercase;
    font-weight: bold;
    padding: 1em;
}
.info-box .info-box-content {
    background-color: #ffffff;
    padding: 1em;
}
.info-box .info-box-links {
    margin: 0;
    padding: 0;
}
.info-box .info-box-links li {
    list-style: none;
}

/* promo modules (sidebar) */
.promo-box {
    margin-bottom: 20px;
    margin-top:20px;
}
.promo-box-title h1 {
    background:#003e5f;
    color:#fff;
    padding: 12px;
    margin:0px;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing:1px!important;
    height: 100%;
    width: 100%;
}
.promo-box-content {
    display: block;
    background-color:#eeeeee;
    margin:0px;
    padding: 12px;
    width: 100%;
}
.promo-box-content h4 {
    margin-top:0px;
    padding-left:0px;
    font-size:16px;
    font-weight:400;
    opacity:1;
    text-transform:none;
    z-index:100;
}
.promo-box-content .buttonContainer .btn {
    background:#003e5f;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    text-transform:uppercase;
}

.promo-box-curtain {
    background:#f1f1f1 no-repeat top center;
    background-size:cover;
    min-height:160px;
    position:relative;
    z-index:1;
}
.promo-box-curtain .promo-box-content { 
    background-color: rgba(0, 62, 95, 0.5);
    border-radius: 0 0 40% 40%/20%;
    height: 80%;
    overflow:hidden;
    z-index:1;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
.promo-box-curtain .promo-box-content h4 {
    color:#fff;
}
.promo-box-curtain .promo-box-content .buttonContainer .btn  {
    float:right;
}
.green-promo-box .promo-box-title h1,
.green-promo-box .promo-box-content .buttonContainer .btn {
    background:#009900;
}
green-promo-box .buttonContainer a {
    background-color: #eeeeee;
}
.green-promo-box.promo-box-curtain .promo-box-content {
    background-color: rgba(160, 162, 51, 0.5) ;
}

/* forms - general */
input[type='radio'] + label {
    font-weight: normal;
    margin-left: 2px;
}
.buttonContainer {
    margin: 10px auto 10px auto;
    text-align: center;
}
.buttonContainer .btn-default {
    margin-left: 5px;
}
.validation-text,
.validation-summary {
    color:#CC0000;
}
.information-text {
    color:black;
} 
span.validation-text {
    margin-right: 10px;
}

.table-form table {
    border: 0px;
}
.table-form td {
    padding: 0px 0px 10px 0px;
    margin: 0px;
    vertical-align: top;
}
.table-form td > label.control-label {
    width:100%;
    text-align:right;
    padding-right: 5px;
}

i.fa-info-circle, i.fa-question-circle {
    color: #337ab7;
    font-size: 16px;
}

span a > i.fa-info-circle.header-align {
    vertical-align: top;
    padding-top: 6px;
}

.popup-close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer
}

.popup-close:before, .popup-close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 20px;
    width: 2px;
    background-color: #111
}

.popup-close:before {
    transform: rotate(45deg)
}

.popup-close:after {
    transform: rotate(-45deg)
}

.targetCookieBlocked {
    color: black;
    z-index: 999;
    text-align: center;
}

/* account challenge quiz */
.challenge-group label {
    display:block;
    margin-top: 5px;
}
.challenge-group select {
    width: 400px;
}
.challenge-group input[type='text'] {
    width: 200px;
}

/* callout module - default color is grey */
.callout-box {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-left-width: 5px;
    border-radius: 3px;
}

.blue-callout-box {
    border: 1px solid #004D71; /*blue*/
    border-left-width: 5px;
    border-radius: 3px;
}
.green-callout-box {
    border: 1px solid #a0a233; /*green*/
    border-left-width: 5px;
    border-radius: 3px;
}
.orange-callout-box {
    border: 1px solid #c24d00; /*orange*/
    border-left-width: 5px;
    border-radius: 3px;
}


/* captch module */
#LBD_CaptchaDiv  {
    border: solid 1px grey;
}
.captcha-box input {
    width:278px;
    margin-top: 5px;
}
.captcha-box legend {
    font-size:18px;
    font-weight:bold;
    text-transform:uppercase;
    margin-bottom: 10px;
}

/* account forms - login/help */
.login-box {
    margin-top: 15px;
}
.login-box h2, .login-box h3 {
    margin-bottom: 0;
}
.login-box .form-group {
    margin-left: 0;
    margin-right: 0;
}
.login-box .form-group:last-child {
    padding-bottom: 16px;
}
.login-box .form-group .btnpaymanage {
    width:150px;
}
.login-box .form-control,
.login-help .form-control {
    border-radius:0;
}
.login-links-box {
    padding-bottom: 16px;
}
.login-links-box a.register-link {
    margin-left: 0;
    font-weight: 700;
    color: #004D71;
}
.login-links-box a.register-link span {
    font-weight: normal;
    color: black;
}
@media screen and (min-width: 425px) {
    .loginCCC.login-box {
        width: 400px;
    }
}
/* .login-box span.help-block {
    margin-left: 87px;
} */

.login-help {
    margin-top: 15px;
}
.login-help-box {
    display: inline-block;
    width: 275px;
    background-color:#eeeeee;
    margin: 0px 15px 15px 0px;
    padding: 0px 15px 15px 15px;
    vertical-align:top;
}
.login-help-title {
    border-bottom: 2px solid #fff;
    margin-bottom: 10px;
}
.login-help-box .help-block {
    color: inherit;
}
.login-help-box .buttonContainer {
    margin-bottom: 0px;
}
.login-challenge > div {
    margin-top: 15px;
}
.login-challenge input[type=text] {
    width: 200px;
}
.login-challenge .buttonContainer {
    /*width: 60%;
    float: left;*/
}

/* Customer Support module */
.contact-cs-form { 
    margin-top: 20px; 
}

h3.FAQsection {
    color: #0c233f;
}
.FAQsection.panel
{
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 0px;
}
.FAQsection.panel-default .panel-heading,
.FAQsection.panel-default .panel-collapse .panel-body
{
    background-image:none;
    background-color: #fff;
    border-color: #fff;
}
.FAQsection.panel-default .panel-body {
    padding-left: 25px;
    padding-top: 5px;
}
.FAQcontent.panel-body {
    counter-reset: FAQcount;
}
.FAQcontent.panel-body > a::before {
    content: counter(FAQcount, disc);
    counter-increment: FAQcount;
    padding-right: 6px;
    display:inline-block;
    margin-left: -14px;
}
.FAQcontent.panel-body > a, 
.FAQcontent.panel-body > div
{
    clear:both;
    float:left;
    margin-left: 14px;
}
.FAQcontent.panel-body > a {
    padding-top: 5px;
}
.FAQcontent.panel-body > a:focus {
    text-decoration: none;
}
.FAQcontent.panel-body > div {
    border-bottom: 2px solid;
    border-color: #eeeeee;
    padding-bottom: 5px;
    margin: 10px;
    width: 90%;
}
.FAQcontent .address-block {
    padding-top:10px;
    padding-left:30px;
}

/* registration process pages */
ul.register-progress h4 {
    margin-top: 0px;
}
.register-step1.table-form td:nth-child(1) {
    width:160px;
}
.register-step3.table-form table {
    margin-bottom: 20px;
}
.register-step3.table-form callout-box {
    width: 70px;
}

/* registration description (sidebar) */
.registrationHelp h1 {
    background-color:#c24d00;
    display:block;
    color:#fff;
    font-size:14px;
    margin:0;
    padding:14px
}
.registrationHelp .panel-heading h4 a {
    color:#000;
    display:block;
    font-size:14px;
    height:100%;
    padding:12px;
    text-decoration:none;
    text-transform:capitalize;
    width:100%
}
.registrationHelp .panel-body {
    font-family:"Gill Sans MT",
    GillSans,
    Calibri,
    "Trebuchet MS",
    sans-serif, sans-serif;
    font-weight:lighter;
    font-style:normal;
    background-color:#eeeeee;
}
.registrationHelp .panel-heading {
    background-color:#eeeeee;
    padding:0;
}
.registrationHelp .panel,
.registrationHelp .panel-heading,
.registrationHelp .panel-body  {
    border:0;
    border-radius:0
}
.registrationHelp .panel-group .panel+.panel { 
    margin:0;
}
.registrationHelp .panel-heading .accordion-toggle:before {
    /* symbol for "opening" panels */
    font-family: 'FontAwesome';  /* essential for enabling glyphicon */
    content: "\f0d7";           /* adjust as needed, taken from bootstrap.css */
    float: left;                /* adjust as needed */
    color: #4F5858;             /* adjust as needed */
    padding-right:6px;
    display:block;
}
.registrationHelp .panel-heading .accordion-toggle.collapsed:before {
    /* symbol for "collapsed" panels */
    content: "\f0da";           /* adjust as needed, taken from bootstrap.css */
}

/* app download prompt */
.app-download-prompt {
    background: #d5e7f7;
    border: 1px solid #337ab7;
    color: #111;
    padding: 1em;
    margin-bottom: 30px;
}
.app-icon-ios {
    height: 40px;
    width: 133px;
    margin-top: 8px;
    margin-right: 4px;
}

.app-icon-android {
    height: 40px;
    width: 133px;
    margin-top: 8px;
    margin-left: 4px
}

.read-more a {
    font-weight: bold;
}
.read-more a:link {
    color: #004d71;
}
.read-more a:visited {
    color: #337ab7;
}

/* go-paperless component */
.paperless-banner-box {
    background: #087108;
    color: #fff;
    padding: 1em;
    margin-bottom: 20px;
    margin-top: 40px;
}
.paperless-banner-box h1 {
    color:#fff;
    font-size: 20px;
    font-weight:bold;
    text-transform: uppercase;
    margin:0px 0px 10px 0px;
}
.paperless-banner-box ul {
    margin-left:-10px;
}

/* paperless legal terms popup */


/* notification preferences pages */
    .notification-preferences {
        background-color:#eeeeee;
        border: solid 1px;
        border-color: #ccc;
        width:90%;
    }
    .notification-preferences > .row {
        margin-left: 0px;
        margin-right: 0px;
    }
    .notification-preferences > .row > div {
        padding: 10px 10px 5px 10px;
    }
    .notification-preferences span>i {
        margin-left: 10px;
    }
    .notification-preferences > .row:not(:first-child) {
        border-top: solid 1px;
        border-color: #ccc;
    }
    .notification-footnote {   
        font-size:smaller;
        font-style: italic;
    }   
    .notification-terms {   
        margin-top: 10px;
        margin-bottom: 10px;
    }   

/* redirect popup component */
#redirectPopup .modal-body > h3 {
    color: #0c233f;
}

/*new CSS*/
.btn-green{background-color: #087108; color: #FFFFFF;}
.btn-green:hover{background-color: #FFFFFF; color: #087108;border: 1px solid #00496d;}

/* Google ReCaptcha v2 */
.grecaptcha-badge {
    display: none !important;
}

/* Skip to Content */
#skiptocontent a {
    padding: 6px;
    position: absolute;
    left: -500px;
    color: white;
    border-bottom-right-radius: 8px;
    background: transparent;
    -webkit-transition: top 1s ease-out,background 1s linear;
    transition: top 1s ease-out,background 1s linear;
    z-index: 100
}

#skiptocontent a:focus, #skiptocontent a:active {
    display: block;
    position: absolute;
    left: 0;
    background: #004d71;
    outline: 0;
    clip: auto;
    -webkit-transition: top .1s ease-in,background .5s linear;
    transition: top .1s ease-in,background .5s linear
}

/* Accessibility */
.header-logo a:focus-visible {
    outline: 2px solid #0c233f;
}

.account-manager a.btn:focus-visible {
    outline: 2px solid #0c233f;
    border-radius: 4px;
    outline-offset: 2px;
}

.cinfin-page-footer a:focus-visible {
    outline: 2px solid #0c233f;
    outline-offset: 2px;
}

.quickpay-form .buttonContainer span:focus-visible {
    outline: 2px solid #0c233f;
    border-radius: 4px;
    outline-offset: 2px;
}

.mobilebanner a.btn:focus-visible {
    outline: 2px solid white;
    border-radius: 4px;
    outline-offset: 2px;
}

.mobile-img a:focus-visible img {
    outline: 2px solid white;
    border-radius: 4px;
    outline-offset: 2px;
}

a:focus-visible .paperless-banner-box {
    outline: 2px solid #0c233f;
    outline-offset: 2px;
}

.left-navigation a:focus-visible {
    outline: 2px solid #0c233f;
    outline-offset: 2px;
}

