﻿/*@import 'https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&display=swap';*/

:root {
    /* Color System Swatches */
    /* Misc */
    --kendo-color-app-surface: #1e2027;
    --kendo-color-surface: #40444f;
    --kendo-color-surface-alt: #32343f;
    --kendo-color-on-app-surface: #EFF0F5;
    --kendo-color-subtle: #9497a6;
    --kendo-color-border: rgba(239, 240, 245, .16);
    --kendo-color-border-alt: rgba(239, 240, 245, .24);
    /*  Base */
    --kendo-color-base-subtle: #414762;
    --kendo-color-base-subtle-hover: #4f5366;
    --kendo-color-base-subtle-active: #464E72;
    --kendo-color-base: #4A506E;
    --kendo-color-base-hover: #4A506E;
    --kendo-color-base-active: #52587A;
    --kendo-color-base-emphasis: #6C749D;
    --kendo-color-on-base: #EFF0F5;
    --kendo-color-base-on-surface: #CDD0E0;
    --kendo-color-base-on-subtle: #EFF0F5;
    /* Primary */
    --kendo-color-primary-subtle: #453817;
    --kendo-color-primary-subtle-hover: #5C4C1F;
    --kendo-color-primary-subtle-active: #735E26;
    --kendo-color-primary: #d3ac44;
    --kendo-color-primary-hover: #e0bf66;
    --kendo-color-primary-active: #e1cc93;
    --kendo-color-primary-emphasis: #A18436;
    --kendo-color-on-primary: #1C1D22;
    --kendo-color-primary-on-surface: #CCB066;
    --kendo-color-primary-on-subtle: #EDE3C9;
    /* Secondary */
    --kendo-color-secondary-subtle: #5E668D;
    --kendo-color-secondary-subtle-hover: #6C749D;
    --kendo-color-secondary-subtle-active: #7C84AC;
    --kendo-color-secondary: #7C84AC;
    --kendo-color-secondary-hover: #8F96B8;
    --kendo-color-secondary-active: #A7ACC8;
    --kendo-color-secondary-emphasis: #A7ACC8;
    --kendo-color-on-secondary: #151828;
    --kendo-color-secondary-on-surface: #A7ACC8;
    --kendo-color-secondary-on-subtle: #EFF0F5;
    /* Tertiary */
    --kendo-color-tertiary-subtle: #1F2F5C;
    --kendo-color-tertiary-subtle-hover: #263B73;
    --kendo-color-tertiary-subtle-active: #2E468A;
    --kendo-color-tertiary: #6681CC;
    --kendo-color-tertiary-hover: #7D94D4;
    --kendo-color-tertiary-active: #94A7DC;
    --kendo-color-tertiary-emphasis: #4665B9;
    --kendo-color-on-tertiary: #1C1D22;
    --kendo-color-tertiary-on-surface: #7D94D4;
    --kendo-color-tertiary-on-subtle: #D1D9F0;
    /* Error */
    --kendo-color-error-subtle: #5E1C1C;
    --kendo-color-error-subtle-hover: #6E2121;
    --kendo-color-error-subtle-active: #852828;
    --kendo-color-error: #DD7E7E;
    --kendo-color-error-hover: #E18E8E;
    --kendo-color-error-active: #E59E9E;
    --kendo-color-error-emphasis: #A53131;
    --kendo-color-on-error: #1C1D22;
    --kendo-color-error-on-surface: #E18E8E;
    --kendo-color-error-on-subtle: #F4D7D7;
    /* Success */
    --kendo-color-success-subtle: #1C5F38;
    --kendo-color-success-subtle-hover: #206E41;
    --kendo-color-success-subtle-active: #257E4A;
    --kendo-color-success: #6AD395;
    --kendo-color-success-hover: #89DCAB;
    --kendo-color-success-active: #A9E5C2;
    --kendo-color-success-emphasis: #2F9D5D;
    --kendo-color-on-success: #1C1D22;
    --kendo-color-success-on-surface: #89DCAB;
    --kendo-color-success-on-subtle: #E0F6E9;
    /* Warning */
    --kendo-color-warning-subtle: #474300;
    --kendo-color-warning-subtle-hover: #5C5600;
    --kendo-color-warning-subtle-active: #706900;
    --kendo-color-warning: #D1C975;
    --kendo-color-warning-hover: #D9D28C;
    --kendo-color-warning-active: #DED89C;
    --kendo-color-warning-emphasis: #9E9410;
    --kendo-color-on-warning: #1C1D22;
    --kendo-color-warning-on-surface: #D9D28C;
    --kendo-color-warning-on-subtle: #F2F0D9;
    /* Info */
    --kendo-color-info-subtle: #243A56;
    --kendo-color-info-subtle-hover: #2D486C;
    --kendo-color-info-subtle-active: #365681;
    --kendo-color-info: #5A82BA;
    --kendo-color-info-hover: #658CC3;
    --kendo-color-info-active: #6F96CD;
    --kendo-color-info-emphasis: #456DA5;
    --kendo-color-on-info: #1C1D22;
    --kendo-color-info-on-surface: #658CC3;
    --kendo-color-info-on-subtle: #D1DEEF;
    /* Light */
    --kendo-color-light-subtle: #A7ACC8;
    --kendo-color-light-subtle-hover: #BABED4;
    --kendo-color-light-subtle-active: #CDD0E0;
    --kendo-color-light: #BABED4;
    --kendo-color-light-hover: #CDD0E0;
    --kendo-color-light-active: #E0E1EB;
    --kendo-color-light-emphasis: #A7ACC8;
    --kendo-color-on-light: #2F344C;
    --kendo-color-light-on-surface: #CDD0E0;
    --kendo-color-light-on-subtle: #232739;
    /* Dark */
    --kendo-color-dark-subtle: #232739;
    --kendo-color-dark-subtle-hover: #2F344C;
    --kendo-color-dark-subtle-active: #414762;
    --kendo-color-dark: #2c2f3a;
    --kendo-color-dark-hover: #414762;
    --kendo-color-dark-active: #4A506E;
    --kendo-color-dark-emphasis: #5E668D;
    --kendo-color-on-dark: #E0E1EB;
    --kendo-color-dark-on-surface: #414762;
    --kendo-color-dark-on-subtle: #EFF0F5;
    /* Series A */
    --kendo-color-series-a-subtler: #68273A;
    --kendo-color-series-a: #B54A6A;
    --kendo-color-series-a-bold: #C4788F;
    --kendo-color-series-a-subtle: #953753;
    --kendo-color-series-a-bolder: #D095A6;
    /* Series B */
    --kendo-color-series-b-subtler: #42676B;
    --kendo-color-series-b: #6F9FA4;
    --kendo-color-series-b-bold: #88B0B4;
    --kendo-color-series-b-subtle: #5A8B90;
    --kendo-color-series-b-bolder: #A4C8CB;
    /* Series C */
    --kendo-color-series-c-subtler: #61451A;
    --kendo-color-series-c: #A9782D;
    --kendo-color-series-c-bold: #C18B49;
    --kendo-color-series-c-subtle: #896124;
    --kendo-color-series-c-bolder: #CEA36F;
    /* Series D */
    --kendo-color-series-d-subtler: #3B3F68;
    --kendo-color-series-d: #6269A7;
    --kendo-color-series-d-bold: #767DBC;
    --kendo-color-series-d-subtle: #515790;
    --kendo-color-series-d-bolder: #9197C9;
    /* Series E */
    --kendo-color-series-e-subtler: #51511F;
    --kendo-color-series-e: #9C9C3B;
    --kendo-color-series-e-bold: #BFBF55;
    --kendo-color-series-e-subtle: #7E7E2F;
    --kendo-color-series-e-bolder: #D2D288;
    /* Series F */
    --kendo-color-series-f-subtler: #2E486B;
    --kendo-color-series-f: #5479AB;
    --kendo-color-series-f-bold: #7D99BF;
    --kendo-color-series-f-subtle: #3D608F;
    --kendo-color-series-f-bolder: #A0B4D0;
    /* Typography */

    --kendo-font-family: 'Assistant', serif;
    --kendo-font-size: 16px;
    --kendo-font-size-xs: 12px;
    --kendo-font-size-sm: 14px;
    --kendo-font-size-md: var(--kendo-font-size);
    --kendo-font-size-lg: 18px;
    --kendo-font-size-xl: 20px;
    --kendo-line-height: 1.42;
    --kendo-line-height-xs: 1.2;
    --kendo-line-height-sm: 1.25;
    --kendo-line-height-md: var(--kendo-line-height);
    --kendo-line-height-lg: 1.5;
    --kendo-h1-font-size: calc(var(--kendo-font-size) * 4);
    --kendo-h2-font-size: calc(var(--kendo-font-size) * 3.5);
    --kendo-h3-font-size: calc(var(--kendo-font-size) * 3);
    --kendo-h4-font-size: calc(var(--kendo-font-size) * 2.5);
    --kendo-h5-font-size: calc(var(--kendo-font-size) * 2);
    --kendo-h6-font-size: calc(var(--kendo-font-size) * 1.5);
    --kendo-h1-line-height: calc(var(--kendo-h1-font-size) * 1.25);
    --kendo-h2-line-height: calc(var(--kendo-h2-font-size) * 1.25);
    --kendo-h3-line-height: calc(var(--kendo-h3-font-size) * 1.25);
    --kendo-h4-line-height: calc(var(--kendo-h4-font-size) * 1.25);
    --kendo-h5-line-height: calc(var(--kendo-h5-font-size) * 1.25);
    --kendo-h6-line-height: calc(var(--kendo-h6-font-size) * 1.25);
    --kendo-h1-font-weight: 400;
    --kendo-h2-font-weight: 400;
    --kendo-h3-font-weight: 400;
    --kendo-h4-font-weight: 700;
    --kendo-h5-font-weight: 700;
    --kendo-h6-font-weight: 700;
    /* Border radius */
    --kendo-border-radius-xs: 1px;
    --kendo-border-radius-sm: 2px;
    --kendo-border-radius-md: 4px;
    --kendo-border-radius-lg: 8px;
    --kendo-border-radius-xl: 12px;
    --kendo-border-radius-xxl: 24px;
    --kendo-border-radius-xxxl: 48px;
    --kendo-border-radius-full: 9999px;

    /* Card Gradient */
    --card-gradient: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--kendo-color-on-app-surface) 10%, transparent) 0%, color-mix(in srgb, var(--kendo-color-surface-alt) 10%, transparent) 100%), var(--kendo-color-surface-alt);

}
#blazor-error-ui {
    background: var(--kendo-color-primary-emphasis, #A18436);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.search-rating .k-rating-container .k-rating-item {
    display: inline-flex;
    position: relative;
    padding-block: var(--kendo-spacing-0, 0.125rem);
    padding-inline: var(--kendo-spacing-0, 0.125rem);
    align-items: center;
    vertical-align: middle;
    margin: 0;
    outline: 0;
    overflow: hidden;
    transition: color 200ms ease-out 0s;
}

.search-rating .k-rating-label{
    font-size: var(--kendo-font-size-xs, inherit);
}

.search-item-mpn{
    font-size: var(--kendo-font-size-xs, inherit);
    color: var(--kendo-color-primary, inherit);
}

.save-notification{
    margin-top: 60px;
}
.save-notification .k-notification-content {
    height: 1.4rem;
}

.k-button-gold {
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    color: var(--kendo-color-on-primary, #3d3d3d);
    background-color: var(--kendo-color-primary, #f5f5f5)
}

.k-button-gold:hover {
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    color: var(--kendo-color-on-primary, #3d3d3d);
    background-color: var(--kendo-color-primary-hover, #f5f5f5)
}

.k-button-secondary {
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    color: var(--kendo-color-on-base, #3d3d3d);
    background-color: var(--kendo-color-base, #f5f5f5);
}
.k-button-secondary:hover {
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    color: var(--kendo-color-on-base, #3d3d3d);
    background-color: var(--kendo-color-base-emphasis, #f5f5f5);
}

.k-badge-solid-signup-freemonths {
    border-color: var(--kendo-color-error-subtle-active, #852828);
    background-color: var(--kendo-color-error-emphasis, #A53131);
    color: var(--kendo-color-on-base, #3d3d3d);
}
.k-badge-solid-product-attribute {
    /*border-color: var(--kendo-color-info-subtle-active, #365681);
    background-color: var(--kendo-color-info-emphasis, #456DA5);
    color: var(--kendo-color-on-base, #3d3d3d);*/
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    color: var(--kendo-color-on-base, #3d3d3d);
    background-color: var(--kendo-color-base-emphasis, #f5f5f5);
}

.hero {
    /*background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--kendo-color-primary-emphasis) 70%, transparent) 0%, color-mix(in srgb, var(--kendo-color-primary) 10%, transparent) 100%), var(--kendo-color-primary);*/
    min-height: 200px;}

.filter-white{
    filter: invert(99%) sepia(1%) saturate(0%) hue-rotate(335deg) brightness(112%) contrast(100%);
}

/*.k-picker-solid{
    background-color: var(--kendo-color-surface-alt, #32343f);
}
.k-picker-solid:hover {
    background-color: var(--kendo-color-surface-alt, #32343f);
}*/

/*.search-filter-textbox{
    background-color: var(--kendo-color-base, #4A506E);
}*/

.signup-bucket-header{
    background-image: url("/common/img/woodandflag-sm.png");
    background-repeat: no-repeat;
    background-size: auto auto;
}
.k-mb--31{margin-bottom:var(-13rem)}
.\!k-mb--31{margin-bottom:var(-13rem) !important}
.k-mb--32{margin-bottom:var(-14rem)}
.\!k-mb--32{margin-bottom:var(-14rem) !important}
.k-mb--33{margin-bottom:var(-15rem)}
.\!k-mb--33{margin-bottom:var(-15rem) !important}
.k-mb--34{margin-bottom:var(-16rem)}
.\!k-mb--34{margin-bottom:var(-16rem) !important}

div.k-drawer-container.k-drawer-push.k-drawer-expanded.ai-usage-drawer > div.k-drawer-content
{
    height: calc(100vh - 60px);
    top:60px;
    position:sticky;
}

.material-symbols-outlined-sm {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 16px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 20
}

.material-symbols-outlined-md {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 20
}

.material-symbols-outlined-lg {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 20
}
.custom-loading-colors .k-loader-container-panel {
    background-color: var(--kendo-color-surface, #40444f);
}

#components-reconnect-modal {
    z-index: 10000; /* Ensure it appears above other content */
    display:none;
    background-color: var(--kendo-color-app-surface, #1e2027);
    padding: 2rem;
    border-radius: 0.5rem;
    border: 1px solid var(--kendo-color-border, rgba(239, 240, 245, .16));
    text-align: center;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    margin: 50px 50px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#components-reconnect-modal > div{
    display: none;
}
/* Show "reconnecting..." while retrying */
#components-reconnect-modal.components-reconnect-show > #components-reconnect-message {
    display: block;
}

/* Show "failed" message when in failed state */
#components-reconnect-modal.components-reconnect-failed > #components-reconnect-failed {
    display: block;
}

/* Show "rejected" message when circuit is gone */
#components-reconnect-modal.components-reconnect-rejected > #components-reconnect-rejected {
    display: block;
}
#components-reconnect-modal > #reconnect-reload-button {
    display: block;
}
#components-reconnect-modal > #reconnect-ripple {
    display: inline-block;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

.lds-ripple,
.lds-ripple div {
    box-sizing: border-box;
}
.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ripple div {
    position: absolute;
    border: 4px solid currentColor;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 8px;
        height: 8px;
        opacity: 0;
    }
    4.9% {
        top: 36px;
        left: 36px;
        width: 8px;
        height: 8px;
        opacity: 0;
    }
    5% {
        top: 36px;
        left: 36px;
        width: 8px;
        height: 8px;
        opacity: 1;
    }
    100% {
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

@media print {
    /* Hide the drawer completely */
    .k-drawer {
        display: none !important;
    }

    /* Make content area expand to full width */
    .k-drawer-content {
        width: 100% !important;
        overflow: visible !important;
    }

    /* Ensure body scrolls naturally */
    body {
        overflow: visible !important;
    }
}


