/*MYACCOUNT TOAST ELECTRIC*/

/* fonts*/
@font-face {
    font-family: 'VC_Henrietta';
    src: url('https://toastelectric.utilmate.com/Portals/10/fonts/VCHenrietta-Light.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'VC_Henrietta';
    src: url('https://toastelectric.utilmate.com/Portals/10/fonts/VCHenrietta-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Switzer';
    src: url('https://toastelectric.utilmate.com/Portals/10/fonts/Switzer-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Switzer';
    src: url('https://toastelectric.utilmate.com/Portals/10/fonts/Switzer-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
:root {
    --primary-text-color: #ffb200 !important;
    --primary-color: black !important; /* #1e1a34 !important; */
    --primary-background-color: transparent !important; /* #F9F1E4!important; */
    --secondary-color:  #ffb200 !important;
    --secondary-background-color: #ffb200 !important; /* #F9F1E4 !important; */
    --link-color: #1e1a34 !important;
    --link-hover-color: #ffb200 !important;
    --footer-text-color: #ffffff !important;
    --footer-background-color: #1E1A34 !important;
    --selected-color: #cfcfcf !important;
    --selected-background-color: #f0f0f0 !important;
    --unselect-color: lightgrey !important;
    --unselect-background-color: #f8f8f8 !important;
    --font-family: 'Switzer', sans-serif;
    --header-background-color: transparent !important;
    --header-color: #1E1A34 !important;
    --fixed-navbar-background-color: transparent !important;
    --body-line-height: 20px !important;
    --body-font-size: 14px !important;
    --paragraph-font-size: 18px !important;
    --label-font-size: 14px !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: 14px !important;
    --mobile-paragraph-font-size: 18px !important;
    --mobile-label-font-size: 14px !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: url(https://toastelectric.utilmate.com/Portals/10/Images/GL-2.jpg) !important;
    --body-background-color: #fe933b !important;
    --main-content-background-color: transparent !important;
    --main-content-color: #000000 !important;
    --utilmate-container-width: 75vw !important;
    --pane-background-color: rgb(249, 175, 128, .7) !important;
    --pane-highlight-background-color: #f88c69 !important;
    --pane-color: #ffffff !important;
    --pane-border-color: none !important;
    --pane-border-radius: 50px !important;
    --pane-padding: .1.875rem !important;
    --banner-textbox-size: 50% !important;
    --max-logo-width: min(314px, calc(100vw - 80px)) !important;
    --content-height: calc(90vh - 128px - 150px) !important;
    /* --mobile-label-font-size: 18px !important;
    --mobile-h4-font-size: 26px !important; */
}
body:not(.dnnEditState) #siteWrapper footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw !important;
    transform: none;
}
.Normal,
.NormalDisabled,
.NormalDeleted {
    color: var(--main-content-color);
    font-size: 1em !important;
    font-weight: normal;
    /* line-height: 24px; */
    word-wrap: break-word;
}
h4::first-letter {
    text-transform: uppercase;
}
h4 {
    text-transform: lowercase;
    margin-bottom: 0.5em;
}
header .navbar:not(:has(#AccountPicker)) #logo { /* login screen */
    padding: 20px 0 20px 20px;
}
header .navbar:has(#AccountPicker) { /* Logged area */
    margin: 10px 0 50px 0;
}
header .navbar:has(#AccountPicker) button.navbar-toggle {
    margin: 1.5em 1.2em 0 0 !important
}
#AccountPicker {
    font-size: 16px !important;
}
#AccountPicker .p-menubar-end {
    width: 100%;
}
#AccountPicker .p-menubar-end > div:first-of-type {
    justify-content: space-around;
    margin: 0.5em 0 1em 0;
}
.p-divider {
    height: 50px  !important;
}
.p-divider::before {
    border: 0 !important;
}
#Details > div > div:last-of-type > div > div:last-of-type {
    margin-bottom: 3em !important;
}
#Details > div > div:last-of-type > div:first-of-type > div  {
    display: block;
    margin-bottom: 2em;
}
#dnn_ctr6245_ContentPane {
    margin: 3em 0;
}
@media (min-width: 768px) {
    .navbar .brand  {
        width: 314px !important;
    }
    .account-picker .p-menubar {
        display: grid !important;
    }
    header .navbar:not(:has(#AccountPicker)) #logo {
        padding: 50px 0 50px 20px;
    }
    header .navbar:has(#AccountPicker) { /* Logged area */
        margin: 50px 0 150px 0;
    }
    .utilmate-container:has(#Usage) {
        height: max(140vh, 800px)!important;
    }
}
body {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: var(--body-background-color);
    background-attachment: fixed;
    background-position: center;
    overflow-x: hidden;
}
.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h6, h6, a:not(.p-button-link), p, label, li {
    font-family: 'VC_Henrietta' !important;
    line-height: 1.6em;
}
/* p, input, label, td, th {
    font-size: clamp(12px, 1rem, 24px);
} */
.berry-text {
    color: #c12B48 !important;
}
.cream-text {
    color: #F9F1E4 !important;
}
.plum-text {
    color: #5E1D59 !important;
}
.cofffee-text {
    color: #1E1A34 !important;
}
.utilmate-main-content {
    min-height: calc(100vh - 237px) !important;
    margin-bottom: 100px;
}
.utilmate-container > div {
    padding: 0 1em;
}
@media (min-width: 768px) {
    .utilmate-main-content {
        min-height: calc(100vh - 392px) !important;
        padding: 0;
    }
    .Container13 {
        width: auto !important;
    }
}
.p-dropdown-item-label {
    font-size: var(--mobile-body-font-size);
}
#dnn_ctr1270_ContentPane {
    margin-top: 3em;
}
#dnnMenu span {
    font-family: Switzer !important;
    font-size: 20px;
}
#dnn_ctr1278_ContentPane {
    min-height: 670px;
}
.Container13 {
    border: 0px !important;
    border-radius: 50px 50px;
    background: var(--pane-background-color);
    margin-bottom: 2em;
    width: calc(100vw - 2em);
}
.Container13Content{
    padding: 30px!important;
}
@media (min-width: 40em) {
    .label-static-height {
        padding-top: 8px;
    }
}
/* to change the link & hover  */
a, a:visited , a:link, a:focus, a:active, a:hover {
    font-weight: 600;
    text-decoration: none;
    color: #100E33;
}
a:hover {
    text-decoration: underline;
}
strong {
    color: var(--main-content-color);
}
.account-picker .p-avatar {
    background-color: transparent !important;
    color: #1E1A34 !important;
}
.dashboard-balance-overview {
    outline: 0px !important;
}

ul li {
    font-size: var(--paragraph-font-size);
}
ol li {
    font-size: var(--paragraph-font-size);
}
#dnn_Grid4BPane:has(.DnnModule-6062) .p-accordion-header-text {
    font-size: 20px;
}
.utilmate-main-content .utilmate-container .DnnModule-1265 {
    margin: 0 10%;
}
.terms-priv {
    display: none;
}
/*********************
Buttons
**********************/
.p-button.u-button{
    /* height: 64px !important; */
    background: #100E33 !important;
    border-radius: 12px;
    border: 0px!important;
    font-family: Switzer, VC_Henrietta !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    transition: 0.4s;
    display: inline-block;
    padding: 1em 1.5em !important;
    /* line-height: 64px !important; */
    text-align: center !important;
    color: #fff !important;
    /* width: 50% !important; */
}
.p-button.u-button.large{
    font-size: 22px !important;
}
.p-button.u-button:hover{
    color:#FFB200 !important;
}
.p-button.u-button-unselect, a.p-button.u-button-unselect {
    background:#f8f8f8!important;
}

.p-datatable .p-datatable-header, .p-datatable .p-datatable-footer {
    background: transparent !important;
}
.p-card {
    background: transparent !important;
}
.p-accordion .p-accordion-content {
    padding: 0 0rem 1.125rem;
    color: var(--main-content-color) !important;
    background: transparent !important;
}
.p-accordion .p-accordion-tab {
    border-bottom: 0px !important;
}
/* LOGIN */
.utilmate-main-content:has(#Login) {
    min-height: calc(100vh - 187px - 50px) !important;
    margin: 1em;
    align-content: center;
}
.tw-grid:has(#dnn_ctr1234_ContentPane) > div:first-of-type {
    align-self: center;
}
#dnn_ctr1238_ContentPane {
    padding: 4.3em;
}
#dnn_ctr6064_ContentPane * {
    font-size: 20px !important;
    line-height: 40px !important;
    color: var(--primary-color)
}
#dnn_ctr6064_ContentPane h3 {
    font-size: 36px !important;
    line-height: 48px !important;
}
#dnn_ctr6064_HtmlModule_lblContent img {
    margin-top: 1.5em;
}
#Login .login-layout,
#Login .reset-password-layout {
    display: block !important;
    text-align: center !important;
}
#Login input {
    font-size: var(--body-font-size);
}
#Login button {
    width: 100% !important;
}
#Login button:first-of-type {
    margin: 0 !important;
}
#Login .login-layout .forgot-password-link *,
#Login .cancel-password-link *,
#Login .reset-password-description {
    padding-inline: 0 !important;
    font-family: Switzer !important;
    font-size: 15px !important;
}

.Container12:has(#dnn_ctr1234_ModuleContent) {
    border: 0px !important;
    border-radius: 50px;
    background: var(--pane-background-color);
}
#Products > div > :not(div:first-of-type)  {
    background: var(--pane-background-color);
    border-radius: 50px;
    padding: 2em;
    margin: 2em auto 0 auto;
    width: fit-content;
}
#Products > div > :not(div:first-of-type) div {
    box-shadow: none;
}
#Products table tr > td:first-of-type {
    text-align: left;
}
.Container12Content{
    padding: 30px!important;
}
.Container12:has(#dnn_ctr1234_ModuleContent)  p {
    font-family: Switzer !important;
    font-size: 15px !important;
}
.Container12:has(#dnn_ctr1234_ModuleContent)  img {
    border-radius: var(--pane-border-radius);
}
.Container12:has(#dnn_ctr1234_ModuleContent)  a.p-button.u-button {
    width: calc(100% - 42px) !important;
    margin: 0 21px !important;
}
/* CREATE AN ACCOUNT */
#dnn_ctr1237_HtmlModule_lblContent a {
    font-family: 'Switzer';
}
/* DASHBOARD */
#Dashboard > div:first-of-type {
    display: block;
}
#Dashboard > div > div:last-of-type {
    display: none;
}
#Details .customer-account-details >  div:last-of-type,
#Details .customer-details > div:nth-child(5) > div:last-of-type { /* My contacts section */
    justify-content: center;
}
#ChangePassword {
    text-align: start;
}
#ChangePassword > div > div:last-of-type {
    text-align: center !important;
}
#dnn_ctr6245_HtmlModule_lblContent {
    margin-left: 5em;
    width: 22em;
}
#dnn_ctr6245_HtmlModule_lblContent .p-accordion-header-text {
    font-size: var(--h4-font-size);
}
@media(min-width: 768px) {
    #dnn_LeftA7Pane:has(#dnn_ctr6245_ContentPane) {
        position: relative;
        left: 1.5em;
        width: calc(var(--utilmate-container-width, 75vw) / 2 - 4em)
    }
    #dnn_ctr6061_ContentPane {
        margin-top: 3em;;
    }
}
/*MOVE IN FORM */
.p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
    background: transparent !important;
}
/* Instant Payment */
.utilmate-pane:has(#dnn_ctr1267_ContentPane),
.utilmate-pane:has(#dnn_ctr1269_ContentPane),
.utilmate-pane:has(#dnn_ctr1246_ContentPane) {
    padding-top: 1em;
}
#InstantPayment input {
    max-width: 30em;
}
/* Payment Options */
#dnn_ctr1271_ModuleContent .p-accordion-content p:has(a.p-button) {
    text-align: center;
    margin-top: 2em;
}
#dnn_ctr1271_ModuleContent .p-accordion-content p:last-of-type a {
    margin-bottom: 1em;
}
#PaymentHistory table {
    min-width: unset !important;
}
#PaymentHistory th,
#PaymentHistory tr,
#PaymentHistory td
{
    background: transparent;
    border-color: var(--main-content-color);
    padding: 0 1em;
}
#PaymentHistory thead {
    background: var(--pane-highlight-background-color);
    padding: 0 1em;
}
.p-datatable-header {
    border: none !important;
}

#Sites .tw-text-gray-400 {
    color: black !important
}
#Sites .p-card, #Sites .p-card > .fs-larger {
    color: #1E1A34 !important;
}
#dnn_ctr1279_ModuleContent .slider-badge,
#dnn_ctr1279_ModuleContent .p-slider,
#dnn_ctr1279_ModuleContent .p-inputswitch-slider,
#Sites .p-badge {
    color: var(--primary-color);
    background: #c12B48 !important;
}

/* Menu */
#dnnMenu .dropdown-menu li > a,
#dnnMenu .dropdown-menu li.active > a {
    color: var(--header-color) !important;
}
@media only screen and (min-width:768px) {
    /* Break navbar out of container to use full viewport width */
    #navbar {
        float: none !important;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        display: flex;
        justify-content: center;
    }

    #dnnMenu {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #dnnMenu .topLevel {
        width: 95vw;
        max-width: 95vw;
        margin: 0 auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
}
/* Help */
#BusinessFeedback > div > div:last-of-type {
    text-align: center !important;
}
#BusinessFeedback > div > div:has(.p-checkbox) {
    justify-content: start;
}
#dnn_ctr1246_HtmlModule_lblContent {
    text-align: center;
}
#faqLink {
    color: white;
}
#faqLink:hover {
    color: #c12B48;
}
#faqLink:visited {
    color: lightgray;
}
/* Your properties  */
/* .Container13:has(#dnn_ctr1282_ContentPane) {
    width: 66vw;
} */
.DnnModule-1282 {
    display: grid;
    justify-content: center;
}
/*USAGE DIALS */
.main-svg {
    background-color: transparent !important;
}
.utilmate-container:has(#Usage) {
    height: 100vh;
}
/* .DnnModule-1278 {
    height: 10vh;
}
*/
#Usage > div > button {
    margin-top: 50px;
}
#Usage > div > div:has(#CURRENT_YEAR),
#Usage div[aria-label="DAY"] {
    display: none;
}
#Usage div[aria-label="MONTH"] {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.p-datepicker-calendar th {
    text-align: center;
}
.p-datepicker-title {
    font-size: var(--mobile-paragraph-font-size);
}