/* Load SpeziaCompleteVariableUpright Variable fonts */
@font-face {
    font-family: SpeziaCompleteVariableUpright;
    font-stretch: 50% 200%;
    font-weight: 1 1000;
    font-display: block;
    src: url("https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2") format("woff2");
}
@font-face {
    font-family: SpeziaMonoCompleteVariable;
    font-stretch: 50% 200%;
    font-weight: 1 1000;
    font-display: block;
    src: url("https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2") format("woff2");
}
.vvd-root, :root {
    --vvd-typography-headline: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333
    SpeziaCompleteVariableUpright;
    --vvd-typography-subtitle: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077
    SpeziaCompleteVariableUpright;
    --vvd-typography-heading-1: 400 condensed 31px / 36px SpeziaCompleteVariableUpright;
    --vvd-typography-heading-2: 400 condensed 27px / 31px SpeziaCompleteVariableUpright;
    --vvd-typography-heading-3: 400 condensed 26px / 36px SpeziaCompleteVariableUpright;
    --vvd-typography-heading-4: 400 condensed 19px / 23px SpeziaCompleteVariableUpright;
    --vvd-typography-heading-5: 400 condensed 20px / 28px SpeziaCompleteVariableUpright;
    --vvd-typography-base: 400 ultra-condensed 14px / 20px SpeziaCompleteVariableUpright;
    --vvd-typography-base-bold: 600 ultra-condensed 14px / 20px SpeziaCompleteVariableUpright;
    --vvd-typography-base-code: 400 ultra-condensed 14px / 20px SpeziaCompleteVariableUpright;
    --vvd-typography-base-condensed: 400 ultra-condensed 12px / 16px SpeziaCompleteVariableUpright;
    --vvd-typography-base-condensed-bold: 600 ultra-condensed 12px / 16px SpeziaCompleteVariableUpright;
    --vvd-typography-base-extended: 400 ultra-condensed 16px / 23px SpeziaCompleteVariableUpright;
    --vvd-typography-base-extended-bold: 600 ultra-condensed 16px / 23px SpeziaCompleteVariableUpright;
}

@media only screen and (min-width: 768px) {
    .vvd-root, :root {
        --vvd-typography-heading-1: 400 condensed 39px / 43px SpeziaCompleteVariableUpright;
        --vvd-typography-heading-2: 400 condensed 29px / 34px SpeziaCompleteVariableUpright;
        --vvd-typography-heading-4: 400 condensed 20px / 25px SpeziaCompleteVariableUpright;
        --vvd-typography-heading-5: 400 condensed 20px / 28px SpeziaCompleteVariableUpright;
    }
}
:root {
    /**
       * Define the Vivid color palette as CSS variables.
       * See: Vivid UI Kit 3.0
       * Colors are defined as rgb triplets, which is needed to be able to adjust alpha values:
       * E.g. color: rgba(--dp-color-black-rgb, 0.5);
       */
    --dp-color-black-rgb: 0, 0, 0;
    --dp-color-white-rgb: 255, 255, 255;
    --dp-color-purple-rgb: 135, 30, 255;
    --dp-color-magenta-rgb: 214, 33, 156;
    --dp-color-blue-rgb: 128, 199, 245;
    --dp-color-orange-rgb: 250, 116, 84;
    --dp-color-peach-rgb: 252, 172, 152;
    --dp-color-neutral-50-rgb: 242, 242, 242;
    --dp-color-neutral-100-rgb: 230, 230, 230;
    --dp-color-neutral-200-rgb: 204, 204, 204;
    --dp-color-neutral-300-rgb: 179, 179, 179;
    --dp-color-neutral-400-rgb: 146, 146, 146;
    --dp-color-neutral-500-rgb: 117, 117, 117;
    --dp-color-neutral-600-rgb: 102, 102, 102;
    --dp-color-neutral-700-rgb: 77, 77, 77;
    --dp-color-neutral-800-rgb: 51, 51, 51;
    --dp-color-neutral-900-rgb: 26, 26, 26;
    --dp-color-neutral-950-rgb: 13, 13, 13;
    --dp-color-purple-50-rgb: 245, 240, 253;
    --dp-color-purple-100-rgb: 236, 226, 250;
    --dp-color-purple-200-rgb: 220, 193, 252;
    --dp-color-purple-300-rgb: 203, 161, 250;
    --dp-color-purple-400-rgb: 178, 123, 242;
    --dp-color-purple-500-rgb: 153, 65, 255;
    --dp-color-purple-600-rgb: 135, 30, 255;
    --dp-color-purple-700-rgb: 100, 5, 209;
    --dp-color-purple-800-rgb: 68, 2, 145;
    --dp-color-purple-900-rgb: 38, 4, 77;
    --dp-color-purple-950-rgb: 20, 6, 35;
    --dp-color-magenta-50-rgb: 255, 237, 251;
    --dp-color-magenta-100-rgb: 255, 220, 247;
    --dp-color-magenta-200-rgb: 248, 185, 231;
    --dp-color-magenta-300-rgb: 251, 143, 216;
    --dp-color-magenta-400-rgb: 229, 96, 187;
    --dp-color-magenta-500-rgb: 214, 33, 156;
    --dp-color-magenta-600-rgb: 187, 30, 137;
    --dp-color-magenta-700-rgb: 143, 22, 105;
    --dp-color-magenta-800-rgb: 98, 2, 86;
    --dp-color-magenta-900-rgb: 50, 8, 44;
    --dp-color-magenta-950-rgb: 29, 3, 26;
    --dp-color-blue-50-rgb: 232, 244, 251;
    --dp-color-blue-100-rgb: 211, 233, 252;
    --dp-color-blue-200-rgb: 157, 210, 254;
    --dp-color-blue-300-rgb: 101, 186, 255;
    --dp-color-blue-400-rgb: 41, 151, 240;
    --dp-color-blue-500-rgb: 2, 118, 213;
    --dp-color-blue-600-rgb: 14, 101, 194;
    --dp-color-blue-700-rgb: 9, 74, 158;
    --dp-color-blue-800-rgb: 14, 48, 109;
    --dp-color-blue-900-rgb: 7, 25, 57;
    --dp-color-blue-950-rgb: 4, 13, 29;
    --dp-color-green-50-rgb: 225, 248, 229;
    --dp-color-green-100-rgb: 207, 238, 212;
    --dp-color-green-200-rgb: 134, 224, 144;
    --dp-color-green-300-rgb: 83, 202, 106;
    --dp-color-green-400-rgb: 48, 168, 73;
    --dp-color-green-500-rgb: 28, 135, 49;
    --dp-color-green-600-rgb: 22, 118, 41;
    --dp-color-green-700-rgb: 21, 89, 35;
    --dp-color-green-800-rgb: 24, 58, 30;
    --dp-color-green-900-rgb: 10, 30, 17;
    --dp-color-green-950-rgb: 6, 15, 9;
    --dp-color-red-50-rgb: 255, 238, 242;
    --dp-color-red-100-rgb: 254, 223, 223;
    --dp-color-red-200-rgb: 255, 187, 187;
    --dp-color-red-300-rgb: 254, 150, 150;
    --dp-color-red-400-rgb: 247, 89, 89;
    --dp-color-red-500-rgb: 230, 29, 29;
    --dp-color-red-600-rgb: 205, 13, 13;
    --dp-color-red-700-rgb: 159, 2, 2;
    --dp-color-red-800-rgb: 110, 0, 0;
    --dp-color-red-900-rgb: 62, 0, 4;
    --dp-color-red-950-rgb: 37, 0, 4;
    --dp-color-orange-50-rgb: 254, 239, 235;
    --dp-color-orange-100-rgb: 253, 224, 216;
    --dp-color-orange-200-rgb: 248, 191, 177;
    --dp-color-orange-300-rgb: 248, 155, 133;
    --dp-color-orange-400-rgb: 237, 107, 74;
    --dp-color-orange-500-rgb: 211, 66, 4;
    --dp-color-orange-600-rgb: 187, 55, 0;
    --dp-color-orange-700-rgb: 137, 48, 0;
    --dp-color-orange-800-rgb: 91, 33, 2;
    --dp-color-orange-900-rgb: 45, 19, 5;
    --dp-color-orange-950-rgb: 25, 9, 0;
    --dp-color-yellow-50-rgb: 253, 245, 212;
    --dp-color-yellow-100-rgb: 253, 234, 160;
    --dp-color-yellow-200-rgb: 250, 204, 75;
    --dp-color-yellow-300-rgb: 250, 159, 0;
    --dp-color-yellow-400-rgb: 224, 121, 2;
    --dp-color-yellow-500-rgb: 190, 87, 2;
    --dp-color-yellow-600-rgb: 166, 76, 3;
    --dp-color-yellow-700-rgb: 137, 48, 0;
    --dp-color-yellow-800-rgb: 82, 40, 1;
    --dp-color-yellow-900-rgb: 42, 21, 2;
    --dp-color-yellow-950-rgb: 21, 11, 1;

    /* Router Link cards title color */
    --dev-docs-card-title-text-color: #2b9efa;

    /* <hr> color */
    --dp-hr-color: linear-gradient(90deg, #7fc6f4, #d5279b);
    --dp-hr-line-color: #999999;

    /* Homepage code toolbar bg color */
    --dp-brand-listing-bg: linear-gradient(89.47deg, #5d00cf 4.85%, #7300ff 47.78%, #ffa58b 111.46%);
    --dp-homepage-card-title-font: var(--vvd-typography-base-bold);
    --dp-source-link-color: #b77ef9;
    --dp-anchor-color: #b77ef9;
    --dp-homepage-subtitle-font: 23px;
    --dp-homepage-usecase-card-bg: rgba(255, 255, 255, 0.1);

    /* Search section bg color */
    --dp-search-section-bg: linear-gradient(90deg, #6328ab 4.86%, #ffa58b 96.11%);
    --dp-search-link-text-line: underline;
    --dp-search-link-text-thickness: 1px;
    --dp-search-link-text-weight: 200;
    --dp-content-text-weight: 300;
    --dp-card-section-font-stretch: ultra-condensed;
    --dp-featured-products-font-weight: 500;
    --dp-doc-anchor-color: #871eff;
    --dp-start-building-bg: #0d0d0d;
    --dp-thin-font-weight: 100;
    --dp-start-building-btn-border: none;
    --dp-start-building-btn-color: white;
    --dp-start-building-btn-icon: #0d0d0d;
    --dp-sdk-section-bg: linear-gradient(90deg, rgba(135, 40, 251, 0.7) 4.86%, rgba(255, 165, 139, 0.7) 96.11%);;
    --dp-card-title-font-size: 20px;
    --dp-mobile-start-building-img-padding: 16px 0 0 0;
    --dp-desktop-start-building-img-padding: 12.8px;

    /* Desktop Navbar */
    --portal-logo-desktop-bg-image: url('/branding/vonage/assets/desktop-logo.svg');
    --portal-logo-desktop-bg-width: 233px;
    --portal-logo-desktop-bg-height: 32px;
    /* Top Bar */
    --portal-top-navbar-desktop-bg-color: var(--vvd-color-neutral-900);
    --portal-top-navbar-desktop-text-color: var(--vvd-color-neutral-300);
    /* Main Bar */
    --portal-main-navbar-desktop-bg-color: var(--vvd-color-canvas-text);
    --portal-main-navbar-desktop-text-color: var(--vvd-color-canvas);

    /* Mobile Navbar */
    --portal-navbar-mobile-bg-color: var(--vvd-color-neutral-900);
    --portal-navbar-mobile-text-color: var(--vvd-color-neutral-300);
    --portal-logo-mobile-bg-image: url('/branding/vonage/assets/mobile-logo.svg');
    --portal-logo-mobile-bg-width: 177px;
    --portal-logo-mobile-bg-height: 32px;

    /* Footer */
    --dp-footer-logo: url(/branding/vonage/assets/footer-logo.png);
    --dp-footer-logo-width: 220px;
    --dp-footer-logo-height: 88px;
    --dp-footer-logo-alignment: center;
    --dp-social-links-justify-content: space-around;

    /* User Initials Avatar */
    --portal-user-avatar-text-color: var(--vvd-color-canvas);
    --portal-user-avatar-bg-color: var(--vvd-color-cta-500);
    /* Tutorial and UseCase Page Card Hover Color */
    --dev-docs-card-hover-color: aliceblue;

    /* Adding font weight 200 for p,a:not([type='button']),ul,li,figcaption as in dev-docs these tags must have 200 font-weight and vvd-typography-base is using 400 weight*/
    --dev-docs-general-tags-font-weight: 200;

    /* Left Sidebar */
    --dp-left-side-bar-view-all-docs-color: var(--vvd-color-neutral-600);

    --dp-left-side-bar-item-depth-1-font: var(--vvd-typography-base-condensed-bold);
    --dp-left-side-bar-item-depth-1-color: var(--vvd-color-neutral-500);
    --dp-left-side-bar-item-depth-1-font-letter-spacing: 2px;
    --dp-left-side-bar-item-depth-2-font: var(--vvd-typography-base-bold);
    --dp-left-side-bar-item-depth-2-color: var(--vvd-color-neutral-800);

    --dp-left-side-bar-item-link: var(--vvd-color-cta-500);
    --dp-left-side-bar-item-active-bg-color: var(--vvd-color-neutral-100);
    --dp-left-side-bar-item-active-color: var(--vvd-color-neutral-800);

    --dp-left-side-bar-anchor-hover-text-decoration: underline;
    --dp-left-side-bar-anchor-color: unset;

    --dp-left-side-bar-list-title-font: var(--vvd-typography-base-extended-bold);

    /* Tutorials Section */
    --dev-docs-tutorial-lang-header: linear-gradient(90deg, #8728fb, #fea18c);
    --dev-docs-tutorial-active-chapter: var(--vvd-color-canvas-text);
    --dev-docs-left-navigation-title: var(--vvd-color-cta-600);

    /* Blog Page */
    --dp-hr-line-bg-color: var(--vvd-color-neutral-300);
    --dp-hr-line-gradient-color: linear-gradient(to right, #7fc6f4, #d5279b);
    --dp-font-heavy: 400;
    --dp-blog-page-bg: linear-gradient(135deg, rgba(127, 198, 244, 0.3), rgba(213, 39, 155, 0.1)) fixed;
    --dp-blog-card-title: 16px;
    --dp-blog-card-content-font-weight: 200;
    --dp-blog-card-padding: 32px;

    /* All API Page */
    --dev-docs-api-icon-chevron: rgb(196, 205, 213);
    /* Portal Search bar background */
    --portal-search-box-background: linear-gradient(269.39deg, #9dd2fe 0.06%, #8728fb 98.4%);

    /* Product Page */
    --dev-docs-product-page-chevron-icon-color: rgb(230, 230, 230);
    --dev-docs-discover-section-bg: rgb(41, 151, 240);
    --dev-docs-build-section-hover-color: rgb(232, 244, 251);
    --dev-docs-build-section-bg: var(--dp-color-cta-500);
    --dev-docs-manage-section-bg: var(--dp-color-cta-500);
    --dev-docs-manage-section-hover-color: rgb(254, 239, 235);
    --dev-docs-product-page-signup-bg-color: #1a1a1a;
    --dev-docs-discover-hover-color: rgb(245, 240, 253);
    --dev-docs-product-description-font-weight: 500;
    --dev-docs-product-description-font-stretch: 50%;
    --dev-docs-product-header-line-bg: linear-gradient(to right, #6328ab, #ffa58b);
    --dev-docs-product-nav-cards-bg: linear-gradient(90deg, #6328AB 4.86%, #FFA58B 96.11%);
    --dev-docs-related-cards-bg: rgb(245, 240, 253);
    --dev-docs-code-example-bg: rgb(242, 242, 242);

    /* Changelogs Page */
    --dev-docs-changelog-title-font-stretch: 50%;

    /* API Specs */
    --dev-docs-api-spec-required-font: 400 ultra-condensed 8px / 12px SpeziaCompleteVariableUpright;
    --dev-docs-parameter-type-info-font: 600 ultra-condensed 10px/ 20px SpeziaCompleteVariableUpright;
    --dev-docs-api-content-type-font: 400 condensed 10px / 14px monospace;
    --dev-docs-api-content-type-label-font: 600 ultra-condensed 8px / 14px SpeziaCompleteVariableUpright;

    /* Accordion Hover Color */
    --vvd-accordion-item-accent-faint: rgb(var(--dp-color-neutral-50-rgb));
    --vvd-accordion-item-accent-soft: rgb(var(--dp-color-neutral-50-rgb));

    /* tabs Hover Color*/
    --vvd-tabs-accent-primary: rgb(var(--dp-color-neutral-50-rgb));
    --vvd-tab-accent-faint: rgb(var(--dp-color-neutral-50-rgb));

    /* Documentation Page */
    --dev-docs-search-input-box-font: 400 ultra-condensed 16px / 24px SpeziaWebVariable, sans-serif;
}