.watts-text-green {
    color: var(--watts-green-300)
}

.watts-bg-bold {
    background-color: var(--watts-bg-bold)
}

.watts-bg-brand-bold {
    background-color: var(--watts-bg-brand-bold)
}

.watts-bg-white {
    background-color: var(--watts-white)
}

.watts-text-white {
    color: var(--watts-white)
}

.watts-svg-success-bold {
    filter: invert(35%) sepia(77%) saturate(454%) hue-rotate(47deg) brightness(98%) contrast(85%);
}

.watts-divider {
    margin: var(--watts-spacing-100) 0 var(--watts-spacing-100) 0
}

.watts-skeleton {
    height: var(--watts-spacing-500)
}

.watts-height-150 {
    height: var(--watts-spacing-150)
}

.watts-width-3 {
    width: var(--watts-spacing-300)
}

.watts-img-thumbnail {
    height: var(--watts-spacing-300);
    width: var(--watts-spacing-300)
}

.watts-border-bold {
    border: solid 1px var(--watts-border-bold)
}

.watts-border-bold-left {
    border-left: solid 1px var(--watts-border-bold)
}

.watts-border-bold-right {
    border-right: solid 1px var(--watts-border-bold)
}

.watts-border-bold-bottom {
    border-bottom: solid 1px var(--watts-border-bold)
}

.watts-border-bold-top {
    border-top: solid 1px var(--watts-border-bold)
}

.watts-chip--rectangle {
    border-radius: var(--watts-border-radius-25)
}

body:has(dialog[open]) {
    overflow: hidden
}

code {
    background-color: var(--watts-bg-bold);
    border-radius: .25rem;
    padding: .25rem .5rem
}

pre {
    background-color: var(--watts-bg-bold);
    border-radius: .25rem
}

/* Needs the watts sprite svg to be hooked up for this to work */
.watts-menu__button--active img {
    filter: invert(100%);
}

.gap-075 {
    gap: .75rem;
}

.pointer {
    cursor: pointer;
}

body {
    overflow-x: clip;
}

body:has(.watts-drawer) {
    overflow-y: hidden;
}

body:has(.panel-container .watts-drawer) {
    overflow-y: auto !important;
}

h1 {
    /* title/title-1/regular */
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 133%; /* 15.96px */
}

h2 {
    /* title/title-2/regular */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 125%; /* 17.5px */
}

h4 {
    /* title/title-4/regular */
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 24px */
}

h5 {
    /* title/title-5/bold */
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 133%; /* 31.92px */
}

.watts-brand-text {
    font-size: 83px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    margin-bottom: .5rem;
}

.watts-brand-text-tag {
    font-size: 44px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin-bottom: .5rem;
}

.watts-button-shadow {
    border-radius: var(--watts-border-radius-150);
    background: var(--watts-bg-interactive);
    box-shadow: 0px 5.986px 15.964px 0px rgba(23, 26, 28, 0.10);
}

.watts-button--brand {
    color: var(--watts-neutral-200);
}