/*MYACCOUNT PLAN ENERGY*/
/*Plan Energy Group styles */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;1,100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100&display=swap');

@import url("https://use.typekit.net/djm6lmd.css");
.h1,.h2,.h3,.h4,.h5,.h6, h1,h2,h3,h4,h5,h6{
font-family: "natom-pro",sans-serif !important;
font-weight: 400;
}

/*root*/
:root {
    --primary-text-color: white !important;
    --primary-color: #FFD416 !important;
    --primary-background-color: #FFD416 !important;
    --secondary-color: #000000 !important;
    --secondary-background-color: #000000 !important;
    --link-color: #FFD416 !important;
    --link-hover-color: #000000 !important;
    --footer-text-color: #ffffff !important;
    --footer-background-color: #383838!important; 
    --selected-color: #000000 !important;
    --selected-background-color: #f0f0f0 !important; 
    --unselect-color: lightgrey !important;
    --unselect-background-color: #f8f8f8 !important;
    --font-family: 'Roboto', sans-serif;
    --header-background-color: #383838 !important;
    --header-color: #ffffff !important;
    --fixed-navbar-background-color: rgb(0 0 0 / 100%) !important;
    --body-line-height: 24px !important;
    --body-font-size: 16px !important;
    --paragraph-font-size: 16px !important;
    --label-font-size: 16px !important;
    --h1-font-size: 2rem !important;
    --h2-font-size: 1.5rem !important;
    --h3-font-size: 1.375rem !important;
    --h4-font-size: 1.25rem !important;
    --h5-font-size: 1.125rem !important;
    --h6-font-size: 1rem !important;
    --mobile-body-font-size: 16px !important;
    --mobile-paragraph-font-size: 16px !important;
    --mobile-label-font-size: 16px !important;
    --mobile-h1-font-size: 2.5rem !important;
    --mobile-h2-font-size: 2rem !important;
    --mobile-h3-font-size: 1.9rem !important;
    --mobile-h4-font-size: 1.8rem !important;
    --mobile-h5-font-size: 1.7rem !important;
    --mobile-h6-font-size: 1.5rem !important;
    --body-background-image: none !important;
    --body-background-color: #ffffff !important;
    --main-content-background-color: transparent !important;
    --main-content-color: #000000 !important;
    --utilmate-container-width: 60% !important;
    --pane-background-color: #ffffff !important;
    --pane-color: #000000 !important;
    --pane-border-color: none !important;
    --pane-border-radius: 2px !important;
    --pane-padding: .5rem !important;
    --banner-textbox-size: 50% !important;
    --max-logo-width: 235px !important;
}
.utilmate-media-banner {
    margin-top: -14px;
}
/* to change the link & hover  */
a, a:visited , a:link, a:focus, a:active { 
    font-weight: 600; 
    text-decoration: none;
 }
a:hover { 
     font-weight: 600; text-decoration: underline;
     }
.utilmate-list-link {
    border: 2px solid #FFD416 !important;
}
.utilmate-list-link:hover {
    background-color: #FFD416 !important;
}
.utilmate-list-link img{
    width: 2.2rem;
}
.utilmate-link-icon img{
    width: 2.5rem;
}
.utilmate-link-icon:hover {
    background-color: #FFD416 !important;
}
ul li {
    font-size: var(--paragraph-font-size);
}
ol li {
    font-size: var(--paragraph-font-size);
}

.utilmate-media-dynamic-textbox-background{
    background-color: rgb(255 255 255 / 70%);
    border-radius: 10px;
    padding:20px;
}


/*********************
Buttons
**********************/
.p-button.u-button{
    background: linear-gradient(90deg, rgba(255, 212, 25, 1) 0%, rgba(255, 212, 25, 1) 35%, rgba(255, 230, 117, 1) 75%) !important;
    border: none!important;
    color: #000 !important;
    padding: 2px 20px 2px 20px!important;
    font-size: 16px!important;
    box-shadow: 2px 3px 8px 0px rgb(141 140 140 / 60%)!important;
    border-radius: 0px!important;
    line-height: 38px!important;
    text-align: center!important;
    text-decoration: none!important;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow!important;
    font-family: Roboto!important;
    font-weight: 400!important;
}

.p-button.u-button:hover{
    background: #fff !important;
}