/* used for animation */
@keyframes lazy-fade-in {
    from {opacity: 0.1; transform: scale(.7,.7)}
    to {opacity: 1;}
}
.reveal-on-scroll{
    opacity:0.1;
}
.revealed-on-scroll{
    animation: lazy-fade-in 1.4s;
}

/* for the carousel */
.carousel-container{
    display: flex;
    overflow-x: hidden;
    /*height: 55vh;*/
    padding-bottom: 100px;
}
@media(min-width:768px){
    .carousel-container{
        max-width:70%;
        margin:auto;
    }
}
.carousel-container .carousel-panel{
    flex-shrink: 0;
    width: 100%;
    margin:0;
    padding:20px;
}
.carousel-container .carousel-panel{
    transform:translateX(-0%);
    transition: all 0.5s;
    transition-timing-function: ease-in-out;
}
.carousel-panel.no-padding{
    padding:0;
}
.carousel-container .answer{
    min-height:82px; /* gives you enough height for a textbox and a validation warning */
}

.progress-pointer{
    background: #2e3347;
    color:white;
    font-weight:800;
    margin-bottom:10px;
    display:inline-block;
    padding:2px 12px;
    border-radius:20px;
    position: relative;
    margin-left: -40px;
    transition:all 0.5s;
}

.progress-pointer:after {
    content: " ";
    position: absolute;
    right: 20px;
    bottom: -8px;
    border-top: 8px solid #2e3347;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: none;
}

/* custom dropdowns */
.ui-selectmenu-button {
    font-size:16px;
    font-family: 'Open Sans';
    border:1px solid #ccc;
    height: 60px;
    padding:0;
    border-radius: 0px;
    width:100%;
    text-align:left;
    background:white;
}

.ui-selectmenu-button .ui-selectmenu-icon.ui-icon.ui-icon-triangle-1-s {
    width: 60px;
    height: 60px;
    background: #2e3347 url(../../uploads/00001316/icons/Dropdown-Arrow.svg) no-repeat;
    background-position: 16px 24px;
    margin:0;

}
.ui-selectmenu-button .ui-selectmenu-text {
    margin: 18px;
    display:block;
    /* remove ellipsis text by using display:inline-block */
    white-space: nowrap;
    overflow: scroll;
    text-overflow: ellipsis;
}
.ui-selectmenu-menu{
    max-height:13em;
    overflow-y:scroll;
    border-radius:0px;
}

.ui-selectmenu-menu::-webkit-scrollbar {
    -webkit-appearance: none;
}

.ui-selectmenu-menu::-webkit-scrollbar:vertical {
    width: 11px;
}

.ui-selectmenu-menu::-webkit-scrollbar:horizontal {
    height: 11px;
}

.ui-selectmenu-menu::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid #f4f4f4; /* have to change if its on white background */
    background-color: rgba(0, 0, 0, .5);
}

/* used for single product view */
ul.tick-bulleted{
    list-style-type:none;
    padding:0;
    margin:0;

}
ul.tick-bulleted li{
    text-indent:-15px;
    margin:0 0 30px 40px;
}
ul.tick-bulleted .fa{
    text-indent:0;
}
ul.tick-bulleted li:before{
    content: "\f058";
    display: inline-block;
    margin-right:15px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.single-coverage small{
    font-weight:700;
    padding-top:30px;
    display:inline-block;
    text-indent:0;
    font-size:12px;
}

@media (min-width:768px){
    .desktop-l-b-tick li{
        padding-right: 20px;
    }
    .desktop-l-b-tick{
        border-left:2px solid white;
    }
    .desktop-l-b-tick:before{
        content:"";
        width:15px;
        height:15px;
        position:absolute;
        top:20px;
        left:-8px;
        border-right:2px solid white;
        border-top:2px solid white;
        background:#81327d;
        transform:rotate(45deg);
    }
    .life .desktop-l-b-tick:before{
        background:#1e5cac;
    }
    .single-coverage hr{
        width:50%;
        border:2px solid white;
        margin:20px 0;
    }
    .single-coverage .btn{
        background:white !important;
    }
    .life .single-coverage .btn{
        color:#106ab7;
    }

}

/*=== use circle close icon when showing an expanded fa-info icon with data-toggle collapse set, when not collapsed. */
.fa.fa-info-circle[data-toggle="collapse"][aria-expanded="true"]:before {
    content: "\f05a";   /* x icon */
}
/* end circle close amends =============================== */




/* experimental collapse for hover tips */
.collapse.overlay, .collapsing.overlay{
    background:#763081;
    color:white;
    width:70%;
    z-index:5000;
    margin:10%;
    position:fixed;
    top:0;
    box-shadow:0px 2px 3px rgba(0,0,0,0.5);

}
.collapse.overlay .pull-right, .collapsing.overlay .pull-right{
    font-size:25px;
    padding: 5px 2px 0 0;
}
.collapse.overlay p, .collapsing.overlay p{
    padding:20px 40px 20px 20px;
}
/* ============== end experimental collapse */


.f24{
    font-size:24px
}
.w400{
    font-weight:400;
}
/* used for animation */
@keyframes lazy-fade-in {
    from {opacity: 0.1; transform: scale(.7,.7)}
    to {opacity: 1;}
}
.reveal-on-scroll{
    opacity:0.1;
}
.revealed-on-scroll{
    animation: lazy-fade-in 1.4s;
}

/* for the carousel */
.carousel-container{
    display: flex;
    overflow-x: hidden;
}
@media(min-width:768px){
    .carousel-container{
        max-width:70%;
        margin:auto;
    }
}
.carousel-container .carousel-panel{
    flex-shrink: 0;
    width: 100%;
    margin:0;
    padding:20px;
}
.carousel-container .carousel-panel{
    transform:translateX(-0%);
    transition: all 0.5s;
    transition-timing-function: ease-in-out;
}
.carousel-panel.no-padding{
    padding:0;
}
.carousel-container .answer{
    min-height:82px; /* gives you enough height for a textbox and a validation warning */
}

.progress-pointer{
    background: #2e3347;
    color:white;
    font-weight:800;
    margin-bottom:10px;
    display:inline-block;
    padding:2px 12px;
    border-radius:20px;
    position: relative;
    margin-left: -40px;
    transition:all 0.5s;
}

.progress-pointer:after {
    content: " ";
    position: absolute;
    right: 20px;
    bottom: -8px;
    border-top: 8px solid #2e3347;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: none;
}

/* custom dropdowns */
.ui-selectmenu-button {
    font-size:16px;
    font-family: 'Open Sans';
    border:1px solid #ccc;
    height: 60px;
    padding:0;
    border-radius: 0px;
    width:100%;
    text-align:left;
    background:white;
}

.ui-selectmenu-button .ui-selectmenu-icon.ui-icon.ui-icon-triangle-1-s {
    width: 60px;
    height: 60px;
    background: #2e3347 url(../../uploads/00001316/icons/Dropdown-Arrow.svg) no-repeat;
    background-position: 16px 24px;
    margin:0;

}
.ui-selectmenu-button .ui-selectmenu-text {
    margin: 18px;
    display:block;
    /* remove ellipsis text by using display:inline-block */
    white-space: nowrap;
    overflow: scroll;
    text-overflow: ellipsis;
}
.ui-selectmenu-menu{
    max-height:13em;
    overflow-y:scroll;
    border-radius:0px;
}

.ui-selectmenu-menu::-webkit-scrollbar {
    -webkit-appearance: none;
}

.ui-selectmenu-menu::-webkit-scrollbar:vertical {
    width: 11px;
}

.ui-selectmenu-menu::-webkit-scrollbar:horizontal {
    height: 11px;
}

.ui-selectmenu-menu::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid #f4f4f4; /* have to change if its on white background */
    background-color: rgba(0, 0, 0, .5);
}

/* used for single product view */
.single-coverage{
    text-align:center;
}
.single-coverage .coverage-header{
    background:white;
    color:#1169b6;
}
.single-coverage .coverage-header h2{
    font-size:22px;
    font-weight:400;
}

.single-coverage .coverage-header .buttonState{
    background:#1267b5;
    color:white;
    padding:12px 10px;margin:0;height:auto;
    border:none;
    border-radius:50px;
}
.single-coverage .coverage-header .buttonState.active, 
.single-coverage .coverage-header .buttonState:active, 
.single-coverage .coverage-header .buttonState:hover{
    border:none;
    font-weight:700;
    box-shadow:0px 2px 3px rgba(0,0,0,0.3);
}
.single-coverage .coverage-header .quoted-rate{
    margin-top:20px;
    font-size:20px;
}
.single-coverage .coverage-header .quoted-rate span[class^="ajaxRate"]{
    font-size:36px;
    font-weight:700;
}

.single-coverage .coverage-header .quoted-rate span[class^="ajaxRate"]:before{
    /* 
    content:"$";
    font-size:18px;
    vertical-align:super; 
    */
}
ul.mobile-bordered{
    list-style-type:none;
    padding:0;
}
ul.mobile-bordered li{
    border-bottom:1px solid #578fc1;
    padding:15px 5px;
}
ul.mobile-bordered li:last-of-type{
    border:none;
}
.desktop-l-b-tick ul.mobile-bordered li:last-of-type{
        border-bottom:1px solid #578fc1;
}
.single-coverage .bg-filled .btn{
	background:white;
	color:#0f73be;
}
.arrowed{
    display:block;
    color:white;
    font-weight:700;
    text-indent: 0;
}
.arrowed:before{
    content: "\f0a9";
    display: inline-block;
    margin-right:15px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.single-coverage small{
    font-weight:700;
    padding-top:15px;
    display:inline-block;
    text-indent:0;
    font-size:14px;
    line-height: 16px;
}

@media (min-width:768px){
    .single-coverage .coverage-header, .single-coverage .coverage-header label{
        background:none;
        color:white;
        box-shadow:none;
        text-align:left;
        padding:0;
    }
    .single-coverage .coverage-header h2{
        margin-bottom:30px;
    }
    
    .single-coverage .coverage-header .buttonState{
        background:white;
        color:#1960b0;
        margin-right:2px;
        padding:12px 10px;
        margin:1.5%;
    }
    .single-coverage .coverage-header .buttonState.active,
    .single-coverage .coverage-header .buttonState:hover,
    .single-coverage .coverage-header .buttonState:active
    {
        background:white;
        color:#1960b0;
    }

    .desktop-l-b-tick li{
        padding-right: 20px;
        font-size: 18px;
    }
    .desktop-l-b-tick{
        border-left:2px solid white;
    }
    .desktop-l-b-tick:before{
        content:"";
        width:15px;
        height:15px;
        position:absolute;
        top:20px;
        left:-8px;
        border-right:2px solid white;
        border-top:2px solid white;
        background:#81327d;
        transform:rotate(45deg);
    }
    .life .desktop-l-b-tick:before{
        background:#1e5cac;
    }
    .single-coverage .btn{
        background:white !important;
    }
    .life .single-coverage .btn{
        color:#106ab7;
        margin-top:30px;
    }
    ul.mobile-bordered li, .desktop-l-b-tick ul.mobile-bordered li:last-of-type{
        border:none;
        padding:0;
    }

    ul.desktop-tick-bulleted{
        list-style-type:none;
        padding:0;
        margin:0;

    }
    ul.desktop-tick-bulleted li{
        text-indent:-15px;
        margin:0 0 30px 40px;
    }
    ul.desktop-tick-bulleted .fa{
        text-indent:0;
    }
    ul.desktop-tick-bulleted li:before{
        content: "\f058";
        display: inline-block;
        margin-right:15px;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .hidden-desktop{
        display:none;
    }

}

/*=== use circle close icon when showing an expanded fa-info icon with data-toggle collapse set, when not collapsed. */
.fa.fa-info-circle[data-toggle="collapse"][aria-expanded="true"]:before {
    content: "\f05a";   /* x icon */
}
/* end circle close amends =============================== */




/* experimental collapse for hover tips */
.collapse.overlay, .collapsing.overlay{
    background:#333;
    color:white;
    width:70%;
    z-index:5000;
    margin:10%;
    position:fixed;
    top:0;
    box-shadow:0px 2px 3px rgba(0,0,0,0.5);

}
.collapse.overlay .pull-right, .collapsing.overlay .pull-right{
    font-size:25px;
    padding: 5px 14px 0 0;
}
.collapse.overlay p, .collapsing.overlay p{
    padding:20px 40px 20px 20px;
}
/* ============== end experimental collapse */



/* = custom accordions ================================= */
.aicpa-accordion{
    border-bottom:1px solid #ccc;
}
.aicpa-accordion .panel-default:first-of-type .panel-heading {
    border-color: #fff;
}
.aicpa-accordion .panel-default{
    border:none;
    box-shadow:none;
}
.aicpa-accordion .panel-default>.panel-heading{
    background:none;
    color: #813b79;
    border-radius:0;
    border: none;
    border-top: 1px solid #ccc;
    padding:20px 0;
 
}
.life .aicpa-accordion .panel-default>.panel-heading{
    color:#0076C0;
}
.aicpa-accordion .panel-title .text{
    font-weight: 400;
    text-decoration:none;
    display:inline-block;
    width:80%;
    font-size: 22px;
    line-height: 26px;
    min-height:45px;
}
.aicpa-accordion .panel-title .icon{
    display:inline-block;
    width:60px;
    height:60px;
    float:right;
    background: url('/../uploads/00001316/icons/plus-icon-export.svg') no-repeat;
    background-position:center;
    background-size:contain;
    transform: rotate(0deg);
    transition:all 0.4s;
}
.aicpa-accordion .panel-title .icon[data-toggle="collapse"][aria-expanded="true"]{
    transform: rotate(-45deg);    
}

.aicpa-accordion .panel-default>.panel-heading+.panel-collapse>.panel-body{
    border-color:transparent;
}
.aicpa-accordion .panel-body{
    font-weight: 400;
    color: rgba(0,0,0,0.80);
    font-size: 16px;
    padding:0 0px 30px;
}
.aicpa-accordion.panel-group{
    margin-bottom:50px;
}
@media(min-width:768px){
    .aicpa-accordion .panel-title .text{
        font-size: 32px;
        line-height: 38px;
        min-height:59px;
    }    
    .aicpa-accordion .panel-body{
        font-size: 18px;
         padding:0 30px 30px;
    }
}

/* end custom accordions =================================== */

@media(max-width:767px){
#trLifeWrapper .coverage-table .invisible-single-desktop a{
    background: white !important;
    color: #1072be !important;
    }
}