/*MYACCOUNT SUPA ENERGY*/
/*STYLES*/
/* fonts */
@font-face {
    font-family: 'museo500';
    src: url('https://umlstwebpublic.blob.core.windows.net/myaccount-files/SUPAenergy/Museo500-regular.ttf') format('truetype'),
		 url('https://umlstwebpublic.blob.core.windows.net/myaccount-files/SUPAenergy/museo500-regular-webfont.woff2') format('woff2'),
         url('https://umlstwebpublic.blob.core.windows.net/myaccount-files/SUPAenergy/museo500-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary-text-color: white !important;
    --primary-color: #50B748 !important;
    --primary-background-color: #50B748 !important;
    --secondary-color: #3F5865 !important;
    --secondary-background-color: #3F5865 !important;
    --link-color: #50B748 !important;
    --link-hover-color: #3F5865 !important;
    --footer-text-color: #ffffff !important;
    --footer-background-color: #6E808B !important; 
    --selected-color: #3F5865 !important;
    --selected-background-color: #f0f0f0 !important; 
    --unselect-color: lightgrey !important;
    --unselect-background-color: #f8f8f8 !important;
    --font-family: 'museo500', sans-serif;
    --header-background-color: #F8F8F9 !important;
    --header-color: #3F5865 !important;
    --fixed-navbar-background-color: #F8F8F9 !important;
    --body-line-height: 30px !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.0rem !important;
    --h6-font-size: 0.75rem !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.6rem !important;
    --mobile-h6-font-size: 1.5rem !important;
    --body-background-image: none !important;
    --body-background-color: #ffffff !important;
    --main-content-background-color: #F8F8F9 !important;
    --main-content-color: #3F5865 !important;
    --utilmate-container-width: 60% !important;
    --pane-background-color: #ffffff !important;
    --pane-color: #3F5865 !important;
    --pane-border-color: none !important;
    --pane-border-radius: 10px !important;
    --pane-padding: 0.5rem !important;
    --banner-textbox-size: 50% !important;
    --max-logo-width: 235px !important;
}

.h1,h1, .h2,h2, .h3,h3, .h4,h4{
	font-family: museo500;
    color: #50B748!important;
    text-transform: capitalize!important;
}
.h5,h5, .h6,h6{
	font-family: museo500;
    color: #3F5865!important;
    text-transform: capitalize!important;
}
body{
    font-family:'museo500';
}
p {
    font-family:'museo500';
}
.Charcoal {
background-color: #33383B;
}
.Container13 {
    border: 0;
    border-radius: 10px!important;
    box-shadow: 29px 29px 60px 0px rgba(0, 0, 0, 0.2);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin-top: 0px!important;
    margin-bottom: 0px!important;
}
.Container13Content {
    padding: 0px!important;
    overflow: auto;
    border-radius: 10px!important;
    margin: 20px;
}
.utilmate-pane {
    border: 0;
    box-shadow: 29px 29px 60px 0px rgba(0, 0, 0, 0.2);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    /* margin-top: 0px!important; */
    /* margin-bottom: 0px!important; */
}

/* 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 #50B748 !important;
}
.utilmate-list-link:hover {
    background-color: rgb(42, 157, 143, .3) !important;
}
.utilmate-list-link img{
    width: 2.2rem;
}
.utilmate-link-icon img{
    width: 2.5rem;
}
.utilmate-link-icon:hover {
    background-color: rgb(42, 157, 143, .3) !important;
}
ul li {
    font-size: var(--paragraph-font-size);
}
ol li {
    font-size: var(--paragraph-font-size);
}
footer .footer-above{
    background-color: var(--main-content-background-color)!important;
}
.border{
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #e2e8f0; 
}

/* BUTTONS */
.p-button.u-button, a.p-button.u-button {
    font-size: 1em!important;
    font-weight: 300!important;
    box-shadow: 10px 10px 0px 0px rgba(79.99999999999997, 182.99999999999997, 71.99999999999997, 0.13)!important;
    border-style: none;
    padding: 18px 24px 18px 24px!important;
}

.p-button.u-button:hover{
    color: #ffffff!important;
    background-color: #3F5865!important;
    box-shadow: -10px -10px 0px 0px rgba(64.00000000000001, 89, 101.00000000000001, 0.15)!important;
}