/*MYACCOUNT UTILMATE*/
/*fonts*/
@font-face {
   font-family: 'neue-haas-grotesk-display'; 
    src: url('/Portals/13/fonts/NeueHaasDisplayMedium.ttf') format('truetype');
    font-style: normal;
} 

@font-face {
   font-family: 'Poppins'; 
    src: url('/Portals/13/fonts/Poppins-Regular.ttf') format('truetype');
    font-style: normal;
} 
:root {
    --primary-text-color: white !important;
    --primary-color: #000000 !important;
    --primary-background-color: #000000 !important;
    --secondary-color: #65bec2 !important;
    --secondary-background-color: #65bec2 !important;
    --link-color: #2A9D8F !important;
    --link-hover-color: #2A9D8F !important;
    --footer-text-color: #ffffff !important;
    --footer-background-color: #000000 !important; 
    --selected-color: #2A9D8F !important;
    --selected-background-color: #f0f0f0 !important; 
    --unselect-color: lightgrey !important;
    --unselect-background-color: #f8f8f8 !important;
    --font-family: 'poppins', sans-serif;
    --header-background-color: transparent !important;
    --header-color: #3b3c38 !important;
    --fixed-navbar-background-color: rgb(255 255 255 / 50%) !important;
    --body-line-height: 1.6 !important;
    --body-font-size: 16px !important;
    --paragraph-font-size: 16px !important;
    --label-font-size: 14px !important;
    --h1-font-size: 2.875rem !important;
    --h2-font-size: 1.5rem !important;
    --h3-font-size: 1.125rem !important;
    --h4-font-size: 1.4375rem !important;
    --h5-font-size: 1rem !important;
    --h6-font-size: .9rem !important;
    --mobile-body-font-size: 14px !important;
    --mobile-paragraph-font-size: 14px !important;
    --mobile-label-font-size: 14px !important;
    --mobile-h1-font-size: 2rem !important;
    --mobile-h2-font-size: 2rem !important;
    --mobile-h3-font-size: 1.7rem !important;
    --mobile-h4-font-size: 1.6rem !important;
    --mobile-h5-font-size: 1.5rem !important;
    --mobile-h6-font-size: 1.6rem !important;
    --body-background-image: none !important;
    --body-background-color: #ffffff !important;
    --main-content-background-color: transparent !important;
    --main-content-color: #3b3c38 !important;
    --utilmate-container-width: 60% !important;
    --pane-background-color: #ffffff !important;
    --pane-color: #3b3c38 !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;
}

body{
    font-weight: 400!important;
}
p {
    font-weight: 400!important;
}
.h1, h1 {
    font-family: 'neue-haas-grotesk-display';
    font-weight: 100;
    letter-spacing: 1px;
}
.h2, h2 {
    font-family: 'Poppins';
    font-weight: 200;
    line-height: 1.6;
	margin-bottom: 8px;
	color: #2b2c27!important;
}
.h3, h3 {
    font-family: 'Poppins';
    font-weight: 300;
    line-height: 1.6;
	margin-bottom: 8px;
}
.h4, h4 {
    font-family: 'neue-haas-grotesk-display';
    font-weight: 400;
	letter-spacing: 3px;
	margin-bottom: 8px;
	color: #000000!important;
}
.h5,.h6, h5,h6 {
    font-family: 'neue-haas-grotesk-display';
    font-weight: 200;
	letter-spacing: 3px;
	margin-bottom: 8px;
	color: #000000!important;
}

/* to change the link & hover  */
a, a:visited , a:link, a:focus, a:active { 
    text-decoration: none;
 }
a:hover { 
     text-decoration: underline;
     }
.utilmate-list-link {
    border: 2px solid #000000 !important;
}
.utilmate-list-link:hover {
    background-color: rgb(101, 190, 194, .3) !important;
}
.utilmate-list-link img{
    width: 2.2rem;
}
.utilmate-link-icon img{
    width: 2.5rem;
}
.utilmate-link-icon:hover {
    background-color: rgb(101, 190, 194, .3) !important;
}
ul li {
    font-size: var(--paragraph-font-size);
}
ol li {
    font-size: var(--paragraph-font-size);
}