/* use to override any styles, sitewide */

/* Circle icons for headers 10/16/2025 */
.title_with_icon{
    display: inline-flex;
    align-items: center;
	margin-bottom: 28px;
}

.title_with_icon div{
    background-color: white;
    border-color: #1f4389;
    border-width: 3px;
    border-style: solid;
    padding: 16px;
    width: 90px;
    height: 90px;
    display: inline-flex;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
    margin-right: 21px;
    min-width: 90px;
}

.title_with_icon img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.title_with_icon h1, .title_with_icon h2, .title_with_icon h3, .title_with_icon h4{
	margin: 0;
}

/* Low emphasis h2 tags 7/30/2025 */
h2.low-em{
    font-size: 22px;
    font-weight: 400;
}

/* ADA: Hide Sort-By until update for Narrow is Complete */
.faq-sort-by {
    display: none;
}

/* fix focus color for FAQ elements */

.card-header .btn:focus{

box-shadow: 0 0 0 0.1rem rgb(0 0 0);

}

/* Opposite corner border visual and simplebox 5/21/2025 */
.corner-hl:before {
	content: "";
	top: 0;
	left: 0;
	width: 220px;
	max-width: 30%;
	border-left: 2px solid #006277;
	border-top: 2px solid #006277;
	position: absolute;
	height: 40px;
	max-height: 36%;
}

.corner-hl:after {
	content: "";
	right: 0;
	bottom: 0;
	width: 220px;
	max-width: 30%;
	border-right: 2px solid #006277;
	border-bottom: 2px solid #006277;
	position: absolute;
	height: 40px;
	max-height: 36%;
}

.corner-hl {
	position: relative;
	padding: 30px;
}

.passive-icon{
    height: 3.7em;
	margin-right: 31px;
	display: inline-block;
	filter: grayscale(1);
}

.reg-flex{
	display: flex;
}

.simple-box {
	color:white;
	padding: 27px;
	margin: 5px;
	margin-top: 50px;
	margin-bottom: 50px;
}

.simple-box a, .simple-box a[href^="tel:"]{
	color:white;
	text-decoration: underline;
}

.simple-box a.button {
    text-decoration: initial;
}

.simple-box a:hover, .simple-box a:focus{
	color:white;
	text-decoration-style: dotted !important;
}

.sb-tory{
	background-color: #3B4985;
}

.sb-lagoon{
	background-color: #006277;
}

.sb-seance{
	background-color: #633E65;
}

.sb-asparagus{
	background-color: #42613E;
}

.sb-endeavor{
	background-color: #1F4389;
}

.sb-acadia{
	background-color: #3B342D;
}

.sb-judge{
	background-color: #5E5349;
}

.sb-oracle{
	background-color: #2F6165;
}

.sb-christalle{
	background-color: #37246B;
}

.sb-mariner{
	background-color: #3C6BB4;
}

/* fix color contrast FAQ placeholder text */

.ms-choice > span.placeholder {color: #757575;}

/* Adjust blockquotes, intended for blogs */
blockquote cite {
    justify-content: flex-start;
}

/* Active nav item hover color & border fix 4/11/2025 */
#nav div.drop ul li a{
	transition:none;
}

#nav div.drop ul li.on a:hover, #nav div.drop ul li.on a:focus{
    color: #3b4985;
}

#nav div.drop ul li[role="presentation"]{
    --navborder: #37246b;
}

#nav div.drop ul li[role="presentation"]::before {
    content: "";
    display:inline-block;
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 1px;
    background-color: transparent;
}

#nav div.drop ul li:hover::before, #nav div.drop ul li:focus-within::before {
    background-color: var(--navborder);
}



#nav div.drop ul li[role="presentation"]::after {
    content: "";
    display:inline-block;
    position:absolute;
    bottom: 0;
    left: 0;
    width:200%;
    height: 1px;
    background-color: transparent;
}

#nav div.drop ul li:hover::after, #nav div.drop ul li:focus-within::after {
    background-color: var(--navborder);
}

/* Safari mobile footer fix 4/8/2025*/
#footer .container .flex-list-h{
	display: flex;
	justify-content: center;
}

/* Accessibility image tablet view fix */

@media (min-width: 992px) {
#footer div.bottom div.accessibility{
		left:360px;
		max-width:280px;
		padding-left:106px;
		position:absolute;
		top: 40px;
	}
}

/* Innovation image edits 3/19/25 */
.img.innovation_img_container:hover, .img.innovation_img_container:focus-within {
    opacity: 0.8;
}

/* FAQ newest/oldest filter background color override */

.styled-select-wrapper._brown select.styled-select {background: #5E5349}

/* body class for FAQs */

.faq-wrapper{
border-bottom: solid 1px #c1b6ab;
position: relative;
}

.faq-wrapper::after{
 position: absolute;
  left: 50%;
  bottom: -23px;
  transform: translateY(-50%);
  content: '\f0d7';
  font-family: fontawesome;
  font-size: 22px;
  color: #c1b6ab;
  z-index: 100;
}

.faq-wrapper.opened::after{
transform: rotate(180deg);
bottom: -8px
}

.faqbody{
min-height: 1px;
padding: 1.25rem;
}

/* button class for FAQs */

button.faq {
    color: #5c21c2;
    font-size: 17px;
    white-space: normal;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 5px;
}

button.faq:hover, button.faq:focus {
    text-decoration: underline;
}

/* white text links underlined by default; dotted underlined on hover */
o
.judge a[href^="tel:"], .christalle a[href^="tel:"], .seance a[href^="tel:"], 
.lagoon a[href^="tel:"], .oracle a[href^="tel:"], .acadia a[href^="tel:"], 
.tory a[href^="tel:"], .asparagus a[href^="tel:"], .endeavor a[href^="tel:"], 
.jazzberry a[href^="tel:"] {text-decoration:underline;}

.judge a[href^="tel:"]:hover, .christalle a[href^="tel:"]:hover, .seance a[href^="tel:"]:hover, 
.lagoon a[href^="tel:"]:hover, .oracle a[href^="tel:"]:hover, .acadia a[href^="tel:"]:hover, 
.tory a[href^="tel:"]:hover, .asparagus a[href^="tel:"]:hover, .endeavor a[href^="tel:"]:hover, 
.jazzberry a[href^="tel:"]:hover {text-decoration-style: dotted !important;}

.judge a[href^="tel:"]:focus, .christalle a[href^="tel:"]:focus, .seance a[href^="tel:"]:focus, 
.lagoon a[href^="tel:"]:focus, .oracle a[href^="tel:"]:focus, .acadia a[href^="tel:"]:focus, 
.tory a[href^="tel:"]:focus, .asparagus a[href^="tel:"]:focus, .endeavor a[href^="tel:"]:focus, 
.jazzberry a[href^="tel:"]:focus {text-decoration-style: dotted !important;}

a.white{text-decoration: underline;}
a.white:hover,  a.white-text:focus{text-decoration-style: dotted !important;}
	
a.white-text{text-decoration: underline;}
a.white-text:hover,  a.white-text:focus{text-decoration-style: dotted !important;}

/* Video Play Button Class - 6/10/2024 */
.hyt-play{
    background-color: #ffffffad;
    padding: 10px;
    border-radius: 100px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    font-size: 63px;
    justify-content: center;
    color: #4C6290;
}

/* Wildfire safety islands - 4/9/2024 */
.row-islands{
    background-color: #bfd9f2;
    padding: 22px;
    justify-content: center;
}
.shadow-hover:hover{
        outline: black auto 1px;
}

/* Smart Renewable Energy & BYOD Styles - 4/9/2024 */

    .exp_rate_0{
        background-color: #fff;
    }
    .exp_rate_1{
        background-color: #81A1D5;
    }
    .exp_rate_2{
        background-color: #8CB58C;
    }
    .exp_rate_3{
        background-color: #ffbb45;
    }
    .exp_rate_4{
        background-color: #ffa0ca;
    }

    .dps_phase {
        margin-bottom: 10px;
        position: relative;
        display: none;
    }

    .dps_phase#dps_intro {
        display: block;
    }

    .dps_restart {
        position: absolute;
        color: black;
        font-weight: bolder;
        bottom: 5px;
        right: 15px;
        display: flex;
        align-items: center;
        font-size: 17px;
    }

    .dps_restart img {
        width: 28px;
        margin-right: 5px;
        transition: transform .4s ease-in-out;
    }

    .dps_restart:hover img {
        transform: rotate(180deg);
    }

    .dps_goto {
        cursor: pointer;
    }

    .dps_phase .callout_new {
        background-color: #396cb4;
        margin-right: 5px;
    }

    .dps_phase h2 {
        color: white;
        font-size: 26px;
        text-align: center;
        line-height: 1.5;
        background-color: #36236a;
        padding: 28px;
        border-radius: 10px 10px 0 0;
        margin-bottom: 0;
    }

    .dps_content_box {
        display: flex;
        background-color: #dfdde1;
        padding: 28px;
        padding-bottom: 38px;
        border-radius: 0 0 10px 10px;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }

    @media screen and (max-width:575px) {
        .dps_content_box .row {
            display: flex;
            align-items: center;
            flex-direction: column;
        }
    }


    .dps_content_box img {
        width: 100%;
        margin-bottom: 15px;
    }

    .dps_content_box .dps_text {
        background-color: white;
        padding: 10px;
        border-radius: 10px;
        width: 100%;
        margin-bottom: 20px;
    }

    .dps_text p:last-child {
        margin: 0;
    }

    .dps_question_box {
        display: flex;
        justify-content: space-evenly;
        background-color: #dfdde1;
        padding: 28px;
        border-radius: 0 0 10px 10px;
        flex-wrap: wrap;
    }

    .dps_question_box .dps_text {
        /* background-color: white;
        padding: 10px;
        border: 5px solid #ededed;
        width: 100%; */

        background-color: white;
        padding: 10px;
        border: 5px solid #3a4a87;
        border-radius: 10px;
    }

    .dps_callto_1 {
        background-color: #3b4985;
        border-radius: 7px;
        margin-bottom: 14px;
        padding: 10px;
        font-weight: 500;
        font-size: 18px;
        line-height: 22px;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .dps_callto_1 p::selection {
        background-color: #ffffff;
        color: black;
    }

    .dps_question_box>.row {
        display: flex;
        justify-content: center;
    }

    .dps_question_box button {
        background-color: #ffffff;
        border: none;
        border-radius: 6px;
        padding: 21px 36px;
        font-size: 46px;
        margin: 2px;
        margin-bottom: 34px;
    }

    .dps_question_box button:hover,
    .dps_question_box button:focus {
        background-color: #9fcfe1;
    }

    .dps_project img {
        width: 66px;
    }

    #main a.dps_project:hover,
    #main a.dps_project:focus {
        text-decoration: none;
    }


    .dps_question_box>.row>div {
        margin-bottom: 10px;
    }

    .dps_project_holder {
        display: flex;
        flex-direction: column;
    }

    .dps_project {
        background-color: #ffffff;
        border: none;
        border-radius: 6px;
        padding: 10px 5px 5px 5px;
        font-size: 13px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        /* height: 100%; */
        flex-grow: 111;
    }

    .dps_project_check {
        height: 100%;
    }

    .dps_project:hover:not(.dps_check_locked),
    .dps_project:focus:not(.dps_check_locked) {
        background-color: #9fcfe1;
    }

    .dps_project p {
        text-align: center;
        margin: 0;
        font-weight: 600;
        color: #36236a;
    }

    .dps_project p+p {
        font-weight: 400;
    }

    .dps_checkbox {
        margin-bottom: 10px;
        border: 2px solid #36236a;
        width: 1.5em;
        height: 1.5em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        color: #36236a;
        border-radius: 4px;
        font-size: 18px;
    }

    .dps_checked:after {
        content: "✓";
    }

    .dps_project.dps_project_check.dps_check_locked {
        opacity: 41%;
        text-decoration: line-through;
    }

    .dps_imgs_container {
        display: flex;
        justify-content: center;
        margin-bottom: 24px;
    }

    .dps_imgs {
        display: flex;
        justify-content: space-around;
    }

    .dps_imgs>div {
        display: flex;
        justify-content: center;
    }

    .dps_imgs img {
        width: 100%;
        border-radius: 5px;
    }

    .dps_detail>p {
        color: black;
        font-weight: normal;
    }

    button.dps_greenbutton {
        background-color: #42623f;
        color: white;
    }

    button.dps_greenbutton:hover,
    button.dps_greenbutton:focus {
        background-color: #396cb4;
        background-color: #2d4329;
    }

    .dps_apply {
        display: inline-block;
        text-align: center;
        margin: 10px 10px 0px 10px;
    }

    .white_header {
        background-color: #ffffff;
        color: black;
        padding: 7px;
        border-radius: 5px;
        font-size: 21px;
    }

/* Widen login dropdown, (also edits #top ul.mobile-drop-list) 2/8/2024*/
#top div.dropdown ul.drop-list{
	width: 285px;
}

/* Remove underline from play button focus/active 1/24/2024 */

#main div.box.image a.play:focus {
   text-decoration: none;
}


/* Video Float Styles, Intended to have float-video on the iframe in place of the size class 1/24/2024 */
@media screen and (min-width:992px){
    .float-video {
        height:  211px;
        width: 372px;
    }
}
@media screen and (max-width:991px){
    .float-video {
        margin-bottom: 13px;
        width: 100%;
    }
}
@media screen and (max-width:991px) and (min-width:768px){
    .float-video {
        height: 211px;
    }
}

@media screen and (max-width:767px) and (min-width:576px){
    .float-video {
        height: 245px;
    }
}

@media screen and (max-width:575px) and (min-width:420px){
    .float-video {
        height: 252px;
    }
}

@media screen and (max-width:419px){
    .float-video {
        height: 167px;
    }
}

/* Fixes for Font-Awesome and h2 change 11/28/2023 */
/* fa - fix carets */
#nav ul.main > li.parent a::after {
    font-size: 30px;
    bottom: -7px;
}
/* fa - fix faq */
.card::after {
    font-size: 18px;
    bottom: -22px;
}

.card.open::after {
    bottom: -9px;
}
.leader-box div.accordion.opened:after {
    font-size: 18px;
    bottom: -3px;
}
/* fa - fix Log On Carat (and its dropdown carat) */
#top div.dropdown a.drop-trigger::after{
    font-size: 12px;
}
#top div.dropdown a.drop-trigger.open::before {
    font-size: 29px;
    bottom: -9px;
}
#top a.mobile.drop-trigger:after{
    font-size: 16px;
}
#top a.mobile.drop-trigger.open:before {
    font-size: 29px;
    bottom: -18px;
}
/* fa - fix empty star for recipes */
.fa-star-o::before {
    content: "\f005";
    font-weight:400;
}

/* fa - fix half empty star for recipes */
.fa-star-half-o::before {
    content: "\f5c0";
}

/* fa - fix recipe checkboxes*/
ul.checklist li a:before {
    font-size: 13px;
}
/* fa - fix breadcrumb */
nav.breadcrumb span::before {
    font-size: 10px;
    position: relative;
    bottom: 1px;
    width: 5px;
}

/* video */
span.play, a.play span {
    display: flex;
    justify-content: center;
}

.play .fa-caret-right, .play-full-mobile .fa-caret-right, .play-full .fa-caret-right {
    display: flex;
    align-items: center;
    margin-left: 7px;/* Dev fix may need to be removed */
}

.play .fa-caret-right::before {
    text-indent: 0;
    font-size: 46px;
}
#main a.play:hover {
    text-decoration: none;
}

#main div.box.image a.play {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* h2 fix for box */
.h2 {
    font-size: 28px;
    font-weight: 100;
    line-height: 1.2em;
    margin: 0 0 10px;
}

/* h1 fix for homepage promo */

.tile.copy .h1-style {

	font-size: 36px;
	font-weight: 100;
	line-height: 1.2em;
	margin: 0 0 20px;
}

/* Change Captcha error message to sufficient color contrast text */

div#recaptcha-error {
    color:#a9004c
    }	

/* Add New! in top left corner of element; 11/17/2023 */
.new-item:before{
    content: "New!";
    position: absolute;
    background: #ffffff;
    color: black;
    padding: 4px;
    top: -11px;
    left: -11px;
    z-index: 3;
}

/* tile boxes (centered images) ex: Shift & Save Tips; 11/15/2023 */
.tile-box-main{
    position: relative;
    overflow: hidden;
}
.tile-box-background{
    position: absolute;
    width: 0px;
    min-width: 101%;
    min-height: 101%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
.tile-box-content{
    position: relative;
    padding: 10px;
}
.tile-box-color{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #ffffff69;
}
.tile-box-color > div{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #ffffffe0;
    margin: 19px;
}

	
/* flex-space-between replaced flex_apart. Used to spread contents vertically, particularly as color_col child. 11/1/2023*/	
.flex-space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* hides on large, useful for dividers that aren't needed on large*/
@media screen and (min-width:992px){
    .hide_on_large{
        display: none;
    }
}

/* Rounds corners 10/6/2023*/
.round-corner {
    border-radius: 10px !important;
}

/* Creates white border-like style around image, useful for images with white background that are cropped tightly 10/6/2023 */
.white-around{
    padding: 3%;
    background-color: white;
}
	
.green-buttons .big_menu_button:hover, .green-buttons .big_menu_button:focus-visible {
    box-shadow: 0px 0px 0px 2px white;
	outline: 2px solid black;
	outline-offset: 2px;
}
.blue-buttons .big_menu_button:hover, .blue-buttons .big_menu_button:focus-visible {
    box-shadow: 0px 0px 0px 2px white;
	outline: 2px solid black;
	outline-offset: 2px;
}
input[type="submit"]:hover, input[type="submit"]:focus-visible {
    box-shadow: 0px 0px 0px 2px white;
	outline: 2px solid black;
	outline-offset: 2px;
}


.full-hero .icon-links .link a:focus{
outline: 1px solid black;
}
.full-hero .icon-links .link a:focus{
display: inline-block;
}

/* For manually coloring table rows */

.table-manual tbody {
    background-color: white;
}

.tablerow-dark {
    background-color: #f5f3f2;
}

div.table-wrap.table-manual table tr:nth-child(odd).tablerow-dark {background-color: #f5f3f2;}

/* Align classes, does not work in all cases*/
.vcenter{
    display: flex;
    align-items: center;
}
.hcenter{
    display: flex;
    justify-content: center;
}



/* footer ada color contrast */

#footer div.accessibility a:focus{
outline: 1px solid black;
}

#footer div.follow a:focus{
outline: 1px solid black;
}

#footer ul.col li a {
color: #000000;
}

#footer ul.col li div.accessibility p {
color: #000000;
}

/* footer 100% height fix space at bottom of page */

#page{
height: 100%;
}

/* Fix sharethis hover */
#st-1 .st-btn:hover::after {
content: "";
height: 4px;
width: 100%;
left: 0;
display: block;
position: absolute;
}

#share-menu-id{
z-index: 10;
}

/* change text to black */

.icon-wrap a span.text {
color: #000000;
}


div.table-wrap table{background:#f5f3f2;color:#000000;width:100%;}
div.table-wrap.tips table{background:#fff;color:#000000;width:100%;}
div.table-wrap.lvm table{background:#fff;color:#000000;width:100%;}

body{color:#000000;
}

textarea{
color:#000000;
font-family:Ubuntu, Helvetica, Arial, Verdana, sans-serif;
height:100px;
padding:5px;
resize:vertical;
width:100%;
}

input[type="text"],
input[type="password"]{
color:#000000;
font-family:Ubuntu, Helvetica, Arial, Verdana, sans-serif;
height:24px;
padding:5px;
width:100%;
}

select{
color:#000000;
font-family:Ubuntu, Helvetica, Arial, Verdana, sans-serif;
padding:5px;
height:32px;
width:100%;
font-weight: normal;
}

/* change link color */

.stripe a:hover, .stripe a:focus { color:#FFF; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color:#6c31d2; }
h1 a:hover, h1 a:focus, h2 a:hover, h2 a:focus,
h3 a:hover, h3 a:focus, h4 a:hover, h4 a:focus,
h5 a:hover, h5 a:focus, h6 a:hover, h6 a:focus { color:#6c31d2; }

a{color:#6c31d2;text-decoration:none;}
a:hover,
a:focus{color:#6c31d2;outline:none;text-decoration:none;}
a{
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}

a:focus{text-decoration:underline;}


a[href^="tel:"] {
color: #6c31d2;
text-decoration: none;
font-weight:inherit !important;
white-space: nowrap;
}

/* logo focus border */

#header a.logo:focus{outline: solid 1px dimgrey} 
#header a.logo:focus{display:inline-block} 

/* nav bar color change */
/* IGX Modified - START | Commented out due to conflicts with banner redesign. */
/* #nav ul.main > li > a{background:#342068}
#nav {background:#342068}
#nav ul.main > li.on > a,
#nav ul.main > li > a:hover,
#nav ul.main > li > a:focus{background:#6B759E} */
/* IGX Modified - END */

/* social background color chabge */

#header div.follow a{
background:url(/PreBuilt/img/social-bg.png) no-repeat center center;
display:inline-block;
color:#fff;
font-size:13px;
height:30px;
line-height:30px;
margin:0 0 0 5px;
text-align:center;
width:30px;
}

#header div.follow a:focus{
background:url(/PreBuilt/img/social-bg.png) no-repeat center center;
display:inline-block;
color:#000;
font-size:13px;
height:30px;
line-height:30px;
margin:0 0 0 5px;
text-align:center;
width:30px;
}

#main div.follow a{
background:url(/PreBuilt/img/social-bg.png) no-repeat center center;
display:inline-block;
color:#fff;
font-size:13px;
height:30px;
line-height:30px;
margin:2px;
text-align:center;
width:30px;
}

/* Recipe Search placeholder color override */

div.search.side input::placeholder {color: #534946;}

/* Placeholder color Override */

input::placeholder {
    color: #534946;
    opacity: 1;
}

div.box.hero div.desc {
padding: 20px;
}

div.box.hero div.desc .h1,
div.box.hero div.desc h1 {
    font-size: 1.7rem;
    line-height: 2.0rem;
}

div.box.hero div.desc p.text {
    display: block;
}

@media (min-width: 992px) {
div.box.hero div.desc {
    padding: 35px 45px;
}

    div.box.hero div.desc .h1,
    div.box.hero div.desc h1 {
        font-size: 2.5rem;
        line-height: 3.0rem;
    }
}

div.search.side input[type=submit] {
border: 1px solid #23ADBB;
bottom: 0;
top: auto;
}

ul.tab-nav-buttons {
display: flex;
list-style: none;
margin: 0;
margin-left: -26px;
padding: 0;
}

ul.tab-nav-buttons li {
    margin: 0;
    padding: 0 2px;
    text-align: center;
    width: 50%;
}

@media screen and (min-width:992px) {
ul.tab-nav-buttons li {
    width: 33.33333%;
}
}

ul.tab-nav-buttons li button {
background: #015e72;
border: none;
color: #fff;
display: block;
font-size: 18px;
font-weight: normal;
padding: 10px;
width: 100%;
}

ul.tab-nav-buttons li:first-child button {
background: #633E65;
}

ul.tab-nav-buttons li.active button {
border-bottom: none;
min-height: 44px;
padding-bottom: 14px;
font-weight: 500;
}

ul.tab-nav-buttons li button:focus {
    box-shadow: 0px 0px 0px 2px white;
	outline: 2px solid black;
	outline-offset: 2px;
}

/* ADA: FAQ Formatting */
.card-header h3 .btn-link {
color: #5c21c2;
font-size: 17px;
white-space: normal;
text-align: left;
}

/* ADA: Event Calendar */
div.content div.items div.item.event p.date {
background: #1F4389;
color: #fff;
left: 0;
line-height: 16px;
padding: 5px;
position: absolute;
top: 0;
text-align: center;
width: 50px;
}

div.content div.items div.item.event p.date span.month {
    display: block;
}

div.content div.items div.item.event p.date span.day {
    display: block;
    font-weight: 600;
    font-size: 30px;
    line-height: 30px;
}


/* ADA: Italics */
#footer ul.col.alt li p {
font-style: normal;
}


/* Breadcrumb Overrides */
nav.breadcrumb {
padding: 0 0;
background: rgba(0, 0, 0, 0);
margin: -6px 0 6px;
}

nav.breadcrumb ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

nav.breadcrumb li {
    display: inline;
}

/* nav.breadcrumb li + li::before {
display: inline-block;
margin: 0 7px;
content: "\f105";
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
} */

nav.breadcrumb [aria-current="page"] {
    font-weight: 700;
    text-decoration: none;
}
/* Round Button Overrides*/

.center-col {
display: flex;
align-items: stretch;
justify-content: space-around;
}

.button {
background: #37246b;
color: #fff;
display: inline-block;
font-weight: 500;
padding: 5px 30px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}

.button.on,
.button:hover,
.button:focus {
    box-shadow: 0px 0px 0px 2px white;
	outline: 2px solid black;
	outline-offset: 2px;
	transition: none;
}

.button-large a {
padding: 17px;
width: 100%;
border-radius: 67px;
font-weight: bold;
font-size: 17px;
display: flex;
align-content: space-around;
align-items: center;
justify-content: space-around;
}

.button-large {
    margin: 13px 5px;
    display: flex;
    text-align: center;
    align-items: stretch;
    width: calc(100% - 37px);
    min-width: fit-content;
}

@media screen and (max-width:500px) {
.button-large a {
    font-size: 14px;
}
}

@media screen and (max-width:400px) {
.button-large a {
    font-size: 12px;
}
}

/* image buttons 11/1/2023 */
.image_button{
    padding: 10px;
    background: white;
}
.image_button:hover {
    opacity: 0.8;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
}

/* Deprecated Round Button Overrides*/
a.button-L p {
color: white;
}

.button-L {
padding: 3px 6px;
display: flex;
background: #37246b;
color: white;
font-weight: bold;
border-radius: 67px;
height: 4em;
text-align: center;
margin: 5px 27px 25px;
}

.button-L p {
    margin: auto;
    font-weight: bold;
    font-size: 17px;
    line-height: 22px;
}

.button-L:hover {
    opacity: 0.8;
}

.bottom-margin {
margin-bottom: 12px;
}

.button-L-short {
height: 100%;
}

@media screen and (min-width:575px) and (max-width:991px) {
.button-L {
    margin: 13px 5px;
    padding: 8px;
}
}

@media screen and (max-width:575px) {

.button-L {
    margin: 5px -1px 25px;
}
}

@media screen and (max-width:376px) {

.button-L p {
    font-size: 14px;
}
}


/* Chevron Overrides*/
.chevron-parent {
margin-top: 59px;
margin-bottom: 70px;
text-align: center;
color: white;
}

.chevron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 110%;
}

.center-in-previous-sibling {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

@media screen and (min-width:992px) {
.chevron-parent {
    padding: 0 2%;
    font-size: 20px;
    line-height: 30px;
}
}

@media screen and (min-width:575px) and (max-width:991px) {
.chevron-parent {
    margin-bottom: 43px;
}
}

@media screen and (max-width:767px) {
.chevron-parent {
    margin-top: 37px;
    margin-bottom: 40px;
}
}

@media screen and (max-width:575px) {
.chevron-parent {
    font-size: 10px;
    line-height: 14px;
}
}

@media screen and (max-width:376px) {
.chevron-parent {
    font-size: 8px;
}
}

/* Right/Left Image Overrides*/
.left-img-container {
float: left;
clear: left;
margin: 0 24px 0 0;
}

.right-img-container {
float: right;
clear: right;
margin: 0 0 0 24px;
}

.left-img-container>img, 
.left-img-container>a img {
margin-bottom: 20px;
}
.right-img-container>img, 
.right-img-container>a img {
margin-bottom: 20px;
}

.float-img-icon {
width: 92px;
}

.float-img-small {
width: 192px;
}

.float-img-medium {
width: 300px;
}

.float-img-large {
width: 372px;
}

.float-img-extra-large {
width: 593px
}

@media screen and (max-width:991px) {
.left-img-container {
    text-align: center;
    float: none;
    margin: auto;
}

    .left-img-container > img {
        display: inline-block;
        margin-bottom: 20px;
    }

.right-img-container {
    text-align: center;
    float: none;
    margin: auto;
}

    .right-img-container > img {
        display: inline-block;
        margin-bottom: 20px;
    }

.float-img-medium {
    width: 70%;
}

.float-img-large {
    width: 75%;
}

.float-img-extra-large {
    width: 80%;
}
}

/* Homepage Overrides 2/16/2022*/
@media screen and (min-width:992px) {
.image-boxes {
    margin-bottom: -30px;
    margin-top: 50px;
}

.full-hero:not(.gutter-igx) {
    margin-bottom: 25px;
}

.stripe {
    margin: 50px 0;
}

.tiles {
    margin-bottom: 38px;
}

.icon-wrap {
    margin: 19px 0 -12px 0;
}

.stripe + .container .icon-wrap {
    margin: 0 0 50px 0;
}

.tiles .tile {
    height: 260px;
}
}

/* Form Carrot Fix */
select.styled-select {
z-index: 1;
background: transparent;
}

/* Highlight Override 03/29/2023 */
.heco-highlight {
padding: 0.1em 0.2em;
background: #ffd500;
font-weight: 500;
}


/* Dropdown Menu (No Animation) Overrides*/
.dropdown-nav-wgt {
background-color: #006277;
color: white;
padding: 16px 4px;
font-size: 16px;
/*border-radius: 5px;*/
text-align: center;
display: inline-block;
}

.dropdown-wgt {
position: relative;
display: inline-block;
margin: 10px 5px;
}

.dropdown-item-wgt {
display: none;
position: absolute;
background-color: white;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 1px solid black;
}

.dropdown-item-wgt a {
    color: #3b4985;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

    .dropdown-item-wgt a:hover {
        background-color: #e2e5eb;
    }

.dropdown-wgt:hover .dropdown-item-wgt {
display: block;
}

.dropdown-wgt:focus .dropdown-item-wgt {
display: block;
}

.dropdown-wgt:focus-within .dropdown-item-wgt {
display: block;
}

.dropdown-wgt:hover .dropdown-nav-wgt {
opacity: 0.8;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

.dropdown-wgt:focus-within .dropdown-nav-wgt {
opacity: 0.8;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

@media screen and (max-width:767px) {
.dropdown-item-wgt {
    display: block;
    position: static;
    box-shadow: none;
}

.dropdown-wgt {
    position: static
}

    .dropdown-wgt .dropdown-nav-wgt {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* Dropdown Style A*/
.dropdown-cell-a {
padding: 0 20px 10px 20px;
border-color: #633E65;
border-style: solid;
border-width: 1px;
margin: 0px -6px;
margin-bottom: 12px;
}

.dropdown-cell-a div.accordion.opened {
    border-bottom: none !important;
}

    .dropdown-cell-a div.accordion.opened:after {
        bottom: 0px;
        content: none;
    }

.dropdown-cell-a h3 {
    width: 93%;
    font-size: 18px;
    font-weight: 500;
    color: #37246B;
padding-right: 51px;
}

.dropdown-cell-a .roll-dropdown-icon {
    height: 50px;
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    margin-top: 8px;
}

/* Dropdown Style B */
.dropdown-cell-b {
    padding: 0 20px 10px 20px;
    border-color: #633E65;
    border-style: solid;
    border-width: 1px;
    margin: 0px -6px;
    margin-bottom: 12px;
    width:100%;
}

.dropdown-accordion-b.dropdown-opened-b .dropdown-section-b {
    visibility: visible;
}

.dropdown-section-b {
    max-height: none;
    /*visibility: hidden;*/
    overflow: hidden;
    transition: visibility .5s, max-height 0.5s;
}
.dropdown-cell-b h3 {
    width: 93%;
    font-size: 18px;
    font-weight: 500;
    color: #37246B;
    padding-right: 51px;
}

.dropdown-cell-b .dropdown-toggle-b>h2 {
    width: 93%;
    font-size: 18px;
    font-weight: 500;
    color: #37246B;
    padding-right: 51px;
}

.dropdown-cell-b .roll-dropdown-icon {
	height: 50px;
	-webkit-transition: -webkit-transform .4s ease-in-out;
	transition: transform .4s ease-in-out;
	margin-top: 8px;
}

.dropdown-opened-b .roll-dropdown-icon {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.nomargin-paragraph p{
    margin-bottom: 0;
}

/* Content Button Overrides*/
.content_button {
background-color: #ebe9f0;
border-color: #968cb1;
border-style: solid;
border-width: 1px;
padding: 17px 17px 0px 17px;
margin-bottom: 12px;
}

.content_button > .col-lg-8 > p {
    font-weight: 600;
    margin: 0;
    margin-top: 5px;
    margin-bottom: 17px;
}
/* Color Col Overrides */
.color_row {
display: flex;
align-items: stretch;
}

.color_col {
padding: 7px;
/*background-color: green;*/
}

.color_col>div{
    border-style: solid;
border-width: 1px;
padding: 20px;height: 100%;
width: 100%;
}
.color_col.red_col>div{
background-color: #f0e9e9;
border-color: #a14141;
}
.color_col.orange_col>div{
background-color: #efe8e2;
border-color: #9f6a00;
}
.color_col.yellow_col>div{
background-color: #fffce7;
border-color: #beab00;
}
.color_col.green_col>div{
background-color: #e9efe2;
border-color: #93b26f;
}
.color_col.blue_col>div{
background-color: #e2f3f6;
border-color: #2c90a6;
}
.color_col.purple_col>div{
background-color:#ebe9f0;
border-color:#4e3d7c;
}
.color_col.seafoam_col>div{
background-color: #daf5ed;
    border-color: #41a184;
}
.color_col.brown_col>div{
background-color: #f1ede8;
    border-color: #9f8463;
}
.color_col.violet_col>div{
background-color: #ebecf3;
    border-color: #6d7cb3;
}
.color_col.pink_col>div{
    background-color: #f3eff3;
    border-color: #ad6caf;
}
.color_col.deepblue_col>div{
background-color: #ecf1f7;
    border-color: #577fc1;
}

.color_col.deepgreen_col>div{
background-color: #edf7ec;
    border-color: #4e9f45;
}
.color_col.berry_col>div{
    background-color: #efe8eb;
    border-color: #b95b7d;
}
/* special column with different formatting */
.white_col>div {
    background-color: white;
    padding: 20px;
    height: 100%;
}


.color_col hr {
    margin: 10px 0;
}

.color_col.passive_col>div{
	background-color: #ffffff;
	border-color: #CDC6BA;
	border-width: 2px;
}

.passive-icon{
    height: 3.7em;
	margin-right: 31px;
	display: inline-block;
	filter: grayscale(1);
}

/* Leadership Page Overrides*/
.leader-cell {
padding: 0 20px 40px 20px;
}

.opened .roll-dropdown-icon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

.opened {
border-bottom: 1px solid #C1B6AB !important;
}

.leader-box {
margin-top: 60px;
}

.drop100.w100 {
margin-bottom: 5px;
}

.roll-dropdown-icon {
position: relative;
margin-right: 20px;
margin-top: -28px;
height: 50px;
-webkit-transition: -webkit-transform .4s ease-in-out;
transition: tranRsform .4s ease-in-out;
}

.toggle {
cursor: pointer;
}

@media screen and (max-width:1199px)and (min-width:992px) {
.roll-dropdown-icon {
    height: 40px;
}
}

div.section {
padding: 0px 0px 1px 0px !important;
}

.dropdown-icon-container {
text-align: right;
height: 0px;
margin-bottom: 3px;
}

/* IGP Stakeholder Overrides */
.igp_email_box {
background-color: #ebe9f0;
border-color: #968cb1;
border-style: solid;
border-width: 1px;
padding: 17px 17px 0px 17px;
margin-bottom: 12px;
}

.igp_email_box > .col-lg-8 > p {
    font-weight: 600;
    margin: 0;
    margin-top: 5px;
    margin-bottom: 17px;
}

.igp_safety_box {
background-color: #e9efe2;
border-color: #c9d8b6;
border-style: solid;
border-width: 1px;
padding: 17px 17px 0px 17px;
margin-bottom: 12px;
}



.igp-dropdown-cell {
padding: 0 20px 10px 20px;
border-color: #633E65;
border-style: solid;
border-width: 1px;
margin: 0px -6px;
margin-bottom: 12px;
}

.igp-dropdown-cell div.accordion.opened {
    border-bottom: none !important;
}

    .igp-dropdown-cell div.accordion.opened:after {
        bottom: 0px;
        content: none;
    }

.igp-dropdown-cell h3 {
    width: calc(100% - 70px);
    font-size: 18px;
    font-weight: 500;
    color: #37246B;
}

.igp-dropdown-cell .roll-dropdown-icon {
    height: 50px;
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    margin-top: 8px;
}

/* IGP Overrides*/

.callout_new {
color: #FFFFFF;
font-weight: 700;
padding: 0.25rem;
background-color: #2D6415
}

.promo_igp_library {
border-color: #633E65;
border-style: solid;
border-width: 2px;
padding: 16px;
margin: 20px 20px 30px 20px;
}

.promo_igp_library .row > div {
    padding: 10px;
    padding-bottom: 0;
}

.igp_purple_box {
padding: 7px;
/*background-color: purple;*/
}

.igp_blue_box {
padding: 7px;
/*background-color: blue;*/
}

.igp_green_box {
padding: 7px;
/*background-color: green;*/
}

.igp_purple_box > div {
background-color: #ebe9f0;
border-color: #4e3d7c;
border-style: solid;
border-width: 1px;
padding: 20px;
height: 100%;
width: 100%;
}

.igp_blue_box > div {
background-color: #e2f3f6;
border-color: #2c90a6;
border-style: solid;
border-width: 1px;
padding: 20px;
height: 100%;
width: 100%;
}

.igp_green_box > div {
background-color: #e9efe2;
border-color: #93b26f;
border-style: solid;
border-width: 1px;
padding: 20px;
height: 100%;
width: 100%;
}

.igp_green_box hr {
margin: 10px 0;
}

.igp_blue_box .row {
justify-content: space-around;
}

.split-column-box {
display: flex;
flex-wrap: wrap;
/*background-color: Blue;*/
flex-direction: column;
height: 381px;
align-content: space-around;
}

.split-column-box > div {
    /*background-color: Red;*/
    width: 45%;
}

.split-column-box hr {
    margin: 10px 0;
}

.split-column-box p {
    margin-bottom: 0;
}

a:focus .imgbtn {
	opacity: 0.8;
    box-shadow: 0px 0px 0px 2px white;
	outline: 2px solid black;
	outline-offset: 2px;
	transition: none;
}

.working_image {
width: 100px;
}

.show_on_small {
display: none;
}

.igp_today {
border-color: black;
border-style: solid;
border-width: 1px;
padding: 20px;
margin: 36px 0;
}

@media screen and (min-width:1200px) {
.promo_right_from_vid {
    height: 395.766px;
}

.split-column-box {
    height: 322px
}
}

@media screen and (min-width:992px) {
.igp_blue_box {
    height: 419px;
}

.igp_green_box {
    height: 419px;
}
}

@media screen and (max-width:1199px)and (min-width:992px) {
.promo_right_from_vid {
    height: 332.266px;
}

.igp_blue_box {
    height: 477px;
}

.igp_green_box {
    height: 477px;
}
}

@media screen and (max-width:575px) {
.split-column-box > div {
    width: auto;
}

.split-column-box {
    height: auto;
}

.show_on_small {
    display: block;
}
}

/* Lightbox Overrides*/
.lb-black {
position: fixed;
bottom: 0;
left: 0;
background: #000;
width: 100%;
height: 100%;
z-index: 1000;
opacity: 40%;
}

.lb-inner {
position: fixed;
background: #FFF;
padding: 0px;
width: 77%;
/*max-width: 500px;*/
top: 50%;
left: 50%;
z-index: 1001;
transform: translate(-50%, -50%);
max-width: 99%;
max-height: 99%;
}

.lb-header {
background: #1F4389;
color: white;
width: 100%;
padding: 10px 20px 3px 20px;
position: relative;
}

.lb-header > h2 {
    padding-right: 22px;
}

.lb-text {
padding: 20px;
/*max-height: 500px;*/
overflow: scroll;
overflow-x: auto;
overflow-y: auto;
width: 100%;
}

.lb-x {
font-family: Arial, Baskerville, monospace;
color: #DDD;
position: absolute;
top: 13px;
right: 13px;
font-size: 43px;
cursor: pointer;
}

.lb-x:hover {
    color: white;
}

@media screen and (max-width:767px){
  .lb-text{
    width: 100%;
    padding: 0;
  }
  .lb-inner{
    width: 99%;
  }
}

.popup-source {
cursor: pointer;
}

/* Key Stakeholder Documents Overrides "IGP" */

#catalogue-searchbar {
width: 100%;
font-size: 16px;
padding: 20px;
border: 1px solid #61514C;
margin-bottom: 12px;
height: 50px;
color: #61514C;
}

#catalogue-list {
list-style-type: none;
padding: 10px 0 0 0;
margin: 0;
}

#catalogue-list > li {
    border-color: #37246b;
    color: #37246b;
    border-style: solid;
    border-width: 1px;
    padding: 20px;
}

    #catalogue-list > li:hover {
        background: lavender;
    }

#catalogue-list p {
    margin-bottom: 10px;
}

    #catalogue-list p:last-of-type {
        margin: 0;
    }

#doc-type-box {
padding: 0;
display: flex;
flex-wrap: wrap;
}

.row-baseline {
align-items: baseline;
}

.catalogue-date > input {
height: 50px;
border: 1px solid #61514C;
margin-left: 10px;
margin-bottom: 20px;
}

.catalogue_date {
height: 32px;
}

.search-label {
font-size: 16px;
font-weight: 450;
padding-bottom: 10px;
}

#working-groups {
height: 50px;
}

.pointer {
cursor: pointer;
}

.no-transparent {
opacity: 1 !important;
}

.no-transparent:hover {
    opacity: 1 !important;
}

.throughline {
background: #37246b;
width: 100%;
margin-top: -15px;
}

.doc-type {
border: 1px solid #37246b;
border-radius: 5px;
background-color: lavender;
width: fit-content;
padding: 5px;
display: inline-block;
margin-left: 5px;
margin: 4px 0 4px 5px;
}

/*dropdowns*/
.searchprevious-cell {
padding: 0 20px 0px 20px;
border-color: #633E65;
border-style: solid;
border-width: 1px 0 0 0;
margin: 0px 12px;
margin-top: 20px;
}

.searchprevious-cell div.accordion.opened {
    border-bottom: none !important;
}

    .searchprevious-cell div.accordion.opened:after {
        bottom: 0px;
        content: none;
    }

.searchprevious-cell ul {
    list-style-type: disc;
}

.opened .roll-dropdown-icon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

.dropdown-icon-container {
text-align: right;
height: 0px;
margin-bottom: 3px;
}

.searchprevious-cell .roll-dropdown-icon {
height: 50px;
-webkit-transition: -webkit-transform .4s ease-in-out;
transition: transform .4s ease-in-out;
margin-top: 8px;
}

#doc-type-box > input[type=checkbox] {
height: 20px;
width: 16%;
vertical-align: middle;
margin-bottom: 10px;
display: inline-block;
}

#doc-type-box > label {
display: inline-block;
margin-left: 1%;
width: 83%;
}

@media screen and (max-width:464px) {
.catalogue-date > label {
  height: auto;
}
.catalogue-date > input {
  display: block;
  /*margin-bottom: 20px;*/
  margin-left: 0px;
}
}
@media screen and (min-width:992px) {
#doc-type-box {
  padding: 0 20px 20px 10px;
  height: 200px;
  width: 110%;
  overflow: auto;
  align-items: center;
  /*display: flex;*/
  flex-direction: row;
  /*flex-wrap: wrap;*/
}
}
@media screen and (max-width:991px) {
#doc-type-box > input[type=checkbox] {
  width: 7%;
  height: 18px;
  margin: auto 0;
}
#doc-type-box > label {
  width: 89%;
  margin: 4px 0 4px 2%;
}
}

/* News Release float-right image fix
Only affects float-right images that aren't in nested rows, 
i.e. bootstrap rows inside the main  class="content" container */


@media (min-width: 768px) {
.img.float-right:not(div.row div.row .img) {
    margin-left: 0px;
}
}

@media (min-width: 992px) {
.img.float-right:not(div.row div.row .img) {
    margin-left: 24px;
}
}


/* Begin 1/5/2023 NG */

#top div.dropdown a.drop-trigger:after {
transition: all 0.2s ease-in-out;
}

#top div.dropdown a.drop-trigger.open:after {
transform: rotate(180deg);
}

#top div.desktop div.search {
background: url(https://www.hawaiianelectric.com/content/img/search.png) no-repeat left center;
padding-left: 30px;
}

#top div.mobile div.menu button {
background: transparent;
/* IGX Modified - START | Commented out due to conflicts with nav redesign. */
/* color: #fff; */
/* IGX Modified - END */
border: none;
line-height: 40px;
padding: 10px 0;
text-decoration: none;
text-transform: uppercase;
width: 100%;
}

#top div.mobile div.menu button i:nth-child(2) {
    display: none;
}

#top div.mobile div.menu button.opened i:nth-child(1) {
    display: none;
}

#top div.mobile div.menu button.opened i:nth-child(2) {
    display: inline;
}

#top a.mobile.drop-trigger {
line-height: 40px;
overflow: hidden;
position: relative;
text-decoration: none;
}

#top a.mobile.drop-trigger.open:before {
    color: #4C6290;
    content: "\f0d8";
    /*bottom: -14px;*/
    font-family: FontAwesome;
    /*font-size: 40px;*/
    left: 50%;
    margin-left: -15px;
    position: absolute;
    text-align: center;
    width: 30px;
}

#top a.mobile.drop-trigger:after {
    color: #fff;
    content: "\f0d7";
    display: inline-block;
    font-family: FontAwesome;
    margin-left: 8px;
    position: relative;
    transition: all 0.2s ease-in-out;
}

#top a.mobile.drop-trigger.open:after {
    opacity: .4;
    transform: rotate(180deg);
}

#top ul.mobile-drop-list {
background: #4C6290;
display: none;
left: 50%;
list-style: none;
margin: 0 0 0 -115px;
padding: 15px 0 0 0;
position: absolute;
top: 60px;
width: 285px;
z-index: 9;
}

#top ul.mobile-drop-list li {
    margin: 0;
    padding: 0;
}

    #top ul.mobile-drop-list li a {
        background: transparent;
        display: block;
        font-size: 14px;
        height: auto;
        padding: 7px 15px;
        width: 100%;
    }

        #top ul.mobile-drop-list li a:hover,
        #top ul.mobile-drop-list li a:focus {
            background: #37246B;
        }

#header div.follow ul {
list-style: none;
margin: 0;
padding: 0;
}

#header div.follow ul li {
    display: inline;
    margin: 0;
    padding: 0;
}

#left div.search {
background-image: url(https://www.hawaiianelectric.com/content/img/search.png);
background-repeat: no-repeat;
background-position: 10px center;
padding-left: 40px;
}

ul.nav li button.trigger {
background: transparent;
/* IGX Modified - START | Commented out due to conflicts with nav redesign. */
/* color: #fff; */
/* IGX Modified - END */
border: none;
display: block;
height: 30px;
line-height: 30px;
padding: 0;
position: absolute;
right: 5px;
text-align: center;
top: 7px;
width: 30px;
}

ul.nav li button.trigger:after {
    content: "\f067";
    cursor: default;
    font-family: FontAwesome;
}

ul.nav li.open > button.trigger:after {
content: "\f068";
}

ul.nav li ul li button.trigger {
font-size: 12px;
top: 3px;
}

ul.side-nav > li > button.trigger {
background: transparent;
border: none;
display: block;
line-height: 32px;
height: 32px;
padding: 0;
position: absolute;
right: 0;
text-align: center;
top: 6px;
width: 32px;
}

.visually-hidden {
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
white-space: nowrap;
width: 1px;
}

/*
Survey Button
*/
div.surveyBtnDiv {
position: fixed;
right: -74px;
bottom: 60px;
z-index: 100;
transform: rotate(-90deg);
-webkit-transform-origin: top left;
}

button#openSurveyBtn {
background-color: #342068;
border: 0px;
color: #fff;
padding: 8px 10px;
font-weight: 500;
font-size: 16px;
border-radius: 5px 5px 0px 0px;
letter-spacing: 1px;
outline: none;
}

button#openSurveyBtn.on ,button#openSurveyBtn:hover, button#openSurveyBtn:focus {
opacity: 1;
background-color: #6B759E;
}

.surveyPopupBox {
position: relative;
}

@media (min-width: 576px) {
.surveyPopupBox {
    max-width: 80vw;
    margin: 0 auto;
}
}

/*
1/13/2025 - POST homepage refresh
main nav left separator highlight fix
 */
#nav ul.main > li:not(:first-child):hover:before,
#nav ul.main > li.parent.on:not(:first-child) > a:before,
#nav ul.main > li.parent:not(:first-child) > a:hover:before, 
#nav ul.main > li.parent:not(:first-child) > a:focus:before {
    content: " ";
    position: absolute;
    border-left: 0.5px #342068 solid;
    top: 23%;
    left: 0px;
    height: 55%;
    margin-top: auto;
    margin-bottom: auto;
}

#nav ul.main > li.parent:not(:first-child) {
    margin-left: -0.5px;
    margin-right: -0.5px;
}

#nav ul.main > li.parent:first-child {
    margin-right: -0.5px;
}

#nav ul.main > li.parent:last-child {
    margin-left: -0.5px;
}

#nav ul.main > li.parent > a {
    transition: before 0ms;
}

/*
1/23/2025 - POST homepage refresh
Home page and section front mobile hero link ADA fix
 */
#main .mobile-hero .title a:not(.button):hover,
#main .mobile-hero .title a:not(.button):focus {
    text-decoration-style: dotted;
}

#main .mobile-hero .box:not(.beige, .orange, .stark, .sushi, .tangerine) a:not(.button) {
    text-decoration: underline;
}

#main .mobile-hero .box:not(.beige, .orange, .stark, .sushi, .tangerine) a:not(.button):hover,
#main .mobile-hero .box:not(.beige, .orange, .stark, .sushi, .tangerine) a:not(.button):focus {
    text-decoration-style: dotted;
}


/* 8/21/2025: ADA: Skipping to Content/Navigation  */
#skip {
    position: absolute;
}

#skip:focus {
    opacity: 1;
    z-index: 999;
}

#skip a {
    position: relative;
    display: inline-block;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #e8e4dc;
    height: 30px;
    line-height: 30px;
    margin-left: 12px;
    margin-top: 12px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 3px;
    box-shadow: white 0 0 0 2px;
    outline-offset: 2px;
    outline: 2px solid black;
}


#skip a:focus {
    pointer-events: auto;
    opacity: 1;
}

/*
9/30/2025 - Event Detail Page adjustment:
*/
ul.event-detail-label li {
    padding-left: 120px;
}

/*
1/27/2025 - Mobile side nav adjustment
*/
@media (max-width: 767px) {
    div#main > div.container div.row:has(div.content):not(:has(#recipe-search), :has(> div:first-child div.content)) {
        flex-direction: column-reverse;
    }
}