@import 'login-globals.css';

/* Navbar */

.navbar {
    background: #fff;
    display: flex;
    height: var(--navbar-sizing-item-height, 56px);
    justify-content: space-between;
    align-items: center;
}

.form {
    width: 100%;
}

.styleNone {
    display: none;
}

#contact-us-button {
    display: inline-block;
    /*vertical-align: middle;*/
    line-height: var(--typography-lineHeight-base, 24px);
}

.navbar .slot {
    display: flex;
    align-items: center;
}

    .navbar .slot .app-name {
        display: flex;
        align-items: center;
        gap: var(--navbar-spacing-appName-gap, 16px);
    }

.navbar .navbar-panel {
    display: flex;
    align-items: center;
}

.navbar .navbar-panel-item {
    padding: var(--space-md);
    border: none;
    border-radius: 0;
    background-color: #fff;
}

    .navbar .navbar-panel-item span {
        white-space: nowrap;
    }

    .navbar .navbar-panel-item:hover {
        background-color: var(--color-gray-pale);
    }

        .navbar .navbar-panel-item:hover span {
            color: var(--color-primary-active);
        }

    .navbar .navbar-panel-item:active {
        background-color: var(--color-gray-light);
    }

        .navbar .navbar-panel-item:active span {
            color: var(--color-active);
        }

    .navbar .navbar-panel-item:focus-visible {
        height: 54px;
        border: 2px solid var(--color-secondary-focus);
    }

.navbar .items {
    display: flex;
    position: relative;
    height: var(--navbar-sizing-item-height, 56px);
    align-items: center;
    padding: 0px;
    margin: 0px;
}

.navbar .item {
    position: relative;
    display: flex;
    height: var(--navbar-sizing-item-height, 56px);
    justify-content: center;
    align-items: center;
}

    .navbar .item .tab {
        display: flex;
        height: var(--navbar-sizing-item-height, 56px);
        padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
        justify-content: center;
        align-items: center;
        gap: var(--navbar-spacing-item-gap, 8px);
        border-radius: 0px 0px var(--tabs-radius-horizontal-br, 0px) var(--tabs-radius-horizontal-br, 0px);
        background: var(--navbar-color-surface-item-enabled, rgba(77, 77, 77, 0.00));
    }

        .navbar .item .tab:hover,
        .navbar .item.user-tab-item:hover {
            cursor: pointer;
            background: #f1f1f1;
        }

    .navbar .item span:not(.tooltip) {
        display: inline-block;
        max-width: 192px;
        letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
    }

    .navbar .item .tab-leading-icon,
    .navbar .item .tab-trailing-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .navbar .item .tab-trailing-icon,
    .navbar .subitem img {
        width: var(--navbar-sizing-icon-width, 20px);
        height: var(--navbar-sizing-icon-height, 20px);
    }

.navbar .tab-items {
    position: absolute;
    left: 0%;
    top: 100%;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    margin: 0px;
    padding: var(--list-spacing-padding-default-modal-top, 0px) var(--list-spacing-padding-default-modal-right, 0px) var(--list-spacing-padding-default-modal-bottom, 0px) var(--list-spacing-padding-default-modal-left, 0px);
    gap: var(--list-spacing-padding-default-modal-gap, 0px);
    border-radius: var(--list-radius, 4px);
    border: 1px solid var(--list-color-border, #E6E6E6);
    background: var(--listItem-color-background-enabled, #FFF);
    list-style: none;
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.08);
}

    .navbar .item .tab-items .subitem,
    .navbar .tab-items .subitem {
        display: flex;
        align-items: center;
        align-self: stretch;
        min-height: var(--listItem-spacing-standard-min-height, 40px);
        border-radius: var(--listItem-radius-standard, 0px);
        border: 0px solid var(--listItem-color-border-enabled, #E6E6E6);
        background: var(--listItem-color-background-enabled, #FFF);
    }

@media (min-width: 1001px) {
    .navbar .tab-items .subitem-content {
        padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
    }
}

.navbar .subitem .subitem-content {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex: 1;
}

.navbar .item .tab-items .subitem span,
.navbar .tab-items .subitem {
    letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
    flex: 1 0 0;
    white-space: nowrap;
}

    .navbar .item .tab-items .subitem .subitem-leading-icon,
    .navbar .item .tab-items .subitem .subitem-trailing-icon,
    .navbar .tab-items .subitem img {
        display: flex;
        justify-content: center;
        align-items: center;
    }



/* Navbar username tab  */

.navbar .item.user-tab-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    border: none;
    border-radius: var(--radius-none);
    background-color: var(--neutrals-color-neutral-0);
}

@media (min-width: 1024px) {
    .navbar .slot .app-name {
        padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .navbar .item .tab,
    .navbar .item.user-tab-item,
    .navbar .navbar-panel-item.button {
        padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
    }
}

@media (max-width: 1023px) {
    .navbar .slot .app-name,
    .navbar .item .tab,
    .navbar .item.user-tab-item,
    .navbar .navbar-panel-item.button {
        padding: var(--space-md);
    }
}

.navbar .item.user-tab-item .tab-leading-icon {
    width: var(--avatar-sizing-small, 32px);
    height: var(--avatar-sizing-small, 32px);
    border-radius: var(--avatar-radius, 320px);
    background: var(--avatar-color-background, #E6E6E6);
}

    .navbar .item.user-tab-item .tab-leading-icon img {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

.navbar .item.user-tab-item .tab-items .subitem .subitem-leading-icon {
    height: var(--icon-sizing-lineHeight-bodyDefault, 24px);
    padding: var(--listItem-spacing-standard-padding-leading-top, 0px) var(--listItem-spacing-standard-padding-leading-right, 0px) var(--listItem-spacing-standard-padding-leading-bottom, 0px) var(--listItem-spacing-standard-padding-leading-left, 0px);
    gap: var(--listItem-spacing-standard-padding-leading-gap, 0px);
}

    .navbar .item.user-tab-item .tab-items .subitem .subitem-leading-icon img {
        width: var(--icon-sizing-sm-width, 20px);
        height: var(--icon-sizing-sm-height, 20px);
        flex-shrink: 0;
    }

@media (min-width: 1280px) and (max-width: 1439px) {
    .navbar .item.user-tab-item span:not(.tooltip) {
        max-width: 144px;
    }
}

@media (min-width: 1048px) and (max-width: 1279px) {
    .navbar .item.user-tab-item span:not(.tooltip) {
        max-width: 96px;
    }
}

@media (min-width: 1001px) and (max-width: 1047px) {
    .navbar .item.user-tab-item span:not(.tooltip) {
        max-width: 84px;
    }
}

@media (min-width: 1001px) {
    .navbar .slot {
        gap: var(--space-lg);
    }
}

@media (max-width: 1000px) {
    .navbar .slot {
        gap: var(--space-sm);
    }

    .navbar .item.user-tab-item .tooltip-container,
    .navbar .item.user-tab-item .tab-trailing-icon,
    .navbar .subitem span {
        display: none;
    }

    .navbar .subitem-content {
        justify-content: center;
        flex-wrap: wrap;
        padding: var(--space-sm) var(--space-md);
    }
}





/* Footer */

.footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 40px 24px 40px;
    gap: 10px;
    background: url('../images/overlay_footer-light.svg') top right / cover no-repeat;
}

    .footer .content {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        gap: var(--footer-spacing-itemGap, 32px);
    }

        .footer .content .logo {
            position: relative;
            display: flex;
            width: 135.43px;
            height: 32px;
            padding: 4px 0px;
            justify-content: center;
            align-items: center;
        }

            .footer .content .logo .overlay {
                display: flex;
                width: 135.525px;
                height: 24px;
                padding: 0px 0.74px 0px 0.816px;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .footer .content .logo .image {
                width: 133.969px;
                height: 24px;
                flex-shrink: 0;
            }

        .footer .content .links-container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            align-content: flex-end;
            gap: 16px;
            flex: 1 0 0;
            flex-wrap: wrap;
            align-self: stretch;
        }

            .footer .content .links-container .links {
                display: flex;
                align-self: stretch;
                align-items: center;
                align-content: center;
                gap: 16px;
                flex: 1 0 0;
                flex-wrap: wrap;
                padding: 0;
                margin: 0;
            }

                .footer .content .links-container .links .link {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    min-width: var(--button-spacing-standard-discreet-min-width, 20px);
                    min-height: var(--button-spacing-standard-discreet-min-height, 20px);
                    padding: var(--button-spacing-standard-discreet-padding-top, 4px) var(--button-spacing-standard-discreet-padding-right, 4px) var(--button-spacing-standard-discreet-padding-bottom, 4px) var(--button-spacing-standard-discreet-padding-left, 4px);
                    gap: var(--button-spacing-standard-discreet-padding-gap, 8px);
                    border-radius: var(--button-radius-standard-discreet, 4px);
                    background: var(--button-color-discreet-background-enabled, rgba(5, 87, 213, 0.00));
                }

                    .footer .content .links-container .links .link span {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        overflow: hidden;
                        color: var(--button-color-discreet-content-enabled, #0557D5);
                        text-align: center;
                        text-overflow: ellipsis;
                        letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
                    }

                    .footer .content .links-container .links .link .link-trailing-icon {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                    }

                        .footer .content .links-container .links .link .link-trailing-icon img {
                            width: var(--icon-sizing-sm-width, 20px);
                            height: var(--icon-sizing-sm-height, 20px);
                        }

            .footer .content .links-container .copyright {
                display: flex;
                height: 32px;
                justify-content: flex-end;
                align-items: center;
                gap: 10px;
            }

                .footer .content .links-container .copyright span {
                    text-align: right;
                    color: var(--footer-color-content, #333);
                    letter-spacing: var(--typography-spacing-letter-sm, 0.26px);
                    font-weight: 600;
                }

    .footer .link .link-items {
        position: absolute;
        left: -10%;
        bottom: 110%;
        width: 120%;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        margin: 0px;
        padding: var(--button-spacing-standard-discreet-padding-top, 4px) var(--button-spacing-standard-discreet-padding-right, 4px) var(--button-spacing-standard-discreet-padding-bottom, 4px) var(--button-spacing-standard-discreet-padding-left, 4px);
        gap: var(--button-spacing-standard-discreet-padding-gap, 8px);
        border-radius: var(--list-radius, 4px);
        border: 1px solid var(--list-color-border, #E6E6E6);
        min-height: var(--button-spacing-standard-discreet-min-height, 20px);
        background: var(--listItem-color-background-enabled, #FFF);
        box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.08);
    }

        .footer .link .link-items .subitem {
            display: flex;
            align-items: center;
            align-self: stretch;
            padding: var(--button-spacing-standard-discreet-padding-top, 4px) var(--button-spacing-standard-discreet-padding-right, 4px) var(--button-spacing-standard-discreet-padding-bottom, 4px) var(--button-spacing-standard-discreet-padding-left, 4px);
            gap: var(--button-spacing-standard-discreet-padding-gap, 8px);
            border-radius: var(--listItem-radius-standard, 0px);
            border: 0px solid var(--listItem-color-border-enabled, #E6E6E6);
            background: var(--listItem-color-background-enabled, #FFF);
        }

            .footer .link .link-items .subitem span {
                letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
                text-align: left !important;
                flex: 1 0 0;
            }

                .footer .link .link-items .subitem span:hover {
                    cursor: pointer;
                }

    .footer .link .dropdown-toggle:checked ~ .link-items {
        display: flex;
    }

@media(min-width: 766px) {
    .footer .content .links-container .links .link .contact-us-footer-button {
        display: none;
    }
}




/* Banner */

.banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    padding: 80px var(--space-lg);
    gap: 16px;
    background: url('content/banner-bg.webp') #FFF 50% / cover no-repeat;
}

    .banner .row {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 300px;
        gap: 10px;
    }

        .banner .row.main-header {
            max-width: 785px;
        }

            .banner .row.main-header span {
                flex: 1 0 0;
                text-align: center;
                letter-spacing: var(--typography-spacing-letter-negative-lg, -0.48px);
            }

        .banner .row.sub-header {
            max-width: 800px;
            padding-bottom: 32px;
        }

            .banner .row.sub-header span {
                text-align: center;
            }





/* Card  */

.card-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 24px;
    background: #FFF;
    padding: 0px 24px 80px 24px;
}

    .card-view .section-title {
        display: flex;
        align-items: flex-start;
        margin: 24px auto 0px auto;
    }

.card-row {
    display: grid;
    align-items: stretch;
    align-content: flex-start;
    align-self: stretch;
    gap: 24px;
    place-items: center;
}

@media (max-width: 655px) {
    .card-row.agent-card-row {
        grid-template-columns: 1fr;
        max-width: 324px;
    }

    .use-case-card-row {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 656px) and (max-width: 979px) {
    .card-row.agent-card-row {
        grid-template-columns: repeat(2, 1fr);
        max-width: 708px;
    }

    .use-case-card-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 980px) and (max-width: 1319px) {
    .card-row.agent-card-row {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1100px;
    }

    .use-case-card-row {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (min-width: 1320px) and (max-width: 1439px) {
    .card-row.agent-card-row {
        grid-template-columns: repeat(4, 1fr);
    }

    .use-case-card-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1440px) {
    .card-row.agent-card-row {
        grid-template-columns: repeat(4, 342px);
    }

    .use-case-card-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.card-layout-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.card-layout-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.card-layout-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.card {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 300px;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    justify-content: space-between;
    border-radius: 4px;
    border: 1px solid var(--card-color-border-enabled, #E6E6E6);
    background: var(--card-color-container-enabled, #FFF);
    box-shadow: 0px 4px 16px 0px var(--functional-shadow-levelOne-color, rgba(0, 0, 0, 0.04));
}

    .card .data {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

        .card .data .text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            align-self: stretch;
            letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
        }







    /* Agent Card  */

    .card.agent {
        max-width: 342px;
    }

        .card.agent .data .title {
            display: flex;
            align-items: center;
            align-self: stretch;
            gap: 16px;
        }







    /* Use Case Card  */

    .card.use-case .data .icon img {
        width: 32px !important;
        height: 32px !important;
    }

    .card.use-case .data .title {
        align-self: stretch;
        color: #000;
    }

    .card.use-case .data .text {
        color: #000;
    }






/* Section Image Orientation  */

.img-on-left {
    flex-direction: row-reverse;
}

.img-on-right {
    flex-direction: row;
}

.single-column {
    flex-direction: column;
}





/* Button Container */

.button-container {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

    .button-container .button .text {
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        align-self: center !important;
        letter-spacing: var(--typography-spacing-letter-lg, 0.32px) !important;
    }

    .button-container .button .icon {
        align-self: center !important;
        width: var(--icon-sizing-sm-width, 20px);
        height: var(--icon-sizing-sm-height, 20px);
    }





/* Accordion */

.accordion-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

    .accordion-container .accordion-header {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        gap: var(--accordion-spacing-standard-expanded-header-padding-gap, 8px);
        padding: var(--accordion-spacing-standard-expanded-header-padding-top, 12px) var(--accordion-spacing-standard-expanded-header-padding-right, 12px) var(--accordion-spacing-standard-expanded-header-padding-bottom, 12px) var(--accordion-spacing-standard-expanded-header-padding-left, 8px);
        background: var(--accordion-color-expanded-background-enabled, #FFF);
    }

        .accordion-container .accordion-header .accordion-header-button {
            height: var(--icon-sizing-lineHeight-bodyDefault, 24px);
            padding: 0px;
            background: unset;
            min-width: unset;
            min-height: unset;
            border: none;
        }

            .accordion-container .accordion-header .accordion-header-button img {
                width: var(--icon-sizing-sm-width, 20px);
                height: var(--icon-sizing-sm-height, 20px);
            }

        .accordion-container .accordion-header .text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex: 1 0 0;
        }

    .accordion-container .accordion-body {
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        gap: var(--accordion-spacing-standard-expanded-body-padding-gap, 24px);
        padding: var(--accordion-spacing-standard-expanded-body-padding-top, 8px) var(--accordion-spacing-standard-expanded-body-padding-right, 12px) var(--accordion-spacing-standard-expanded-body-padding-bottom, 16px) var(--accordion-spacing-standard-expanded-body-padding-left, 36px);
    }

        .accordion-container .accordion-body .text {
            align-self: stretch;
            flex: 1 0 0;
            letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
        }

    .accordion-container.accordion-expanded .accordion-body {
        display: flex;
    }

    .accordion-container.accordion-collapsed .accordion-header {
        border-bottom: 1px solid var(--accordion-color-divider-enabled, #E6E6E6);
        background: var(--accordion-color-header-collapsed-background-enabled, #F6F7FB);
    }

        .accordion-container.accordion-collapsed .accordion-body,
        .accordion-container.accordion-collapsed .accordion-header .accordion-header-button .expand-image,
        .accordion-container.accordion-expanded .accordion-header .accordion-header-button .collapse-image {
            display: none !important;
        }

    .accordion-container .accordion-header:hover {
        cursor: pointer;
    }

    .accordion-container.accordion-expanded:hover .accordion-header {
        background: var(--accordion-color-expanded-background-hover, #EAECF6) !important;
    }

    .accordion-container.accordion-expanded .accordion-header:active {
        background: var(--accordion-color-expanded-background-pressed, #DFE3F1) !important;
    }

    .accordion-container.accordion-collapsed:hover .accordion-header {
        border-bottom: 1px solid var(--accordion-color-divider-hover, #D9D9D9) !important;
        background: var(--accordion-color-header-collapsed-background-hover, #EAECF6) !important;
    }

    .accordion-container.accordion-collapsed:active .accordion-header {
        border-bottom: 1px solid var(--accordion-color-divider-pressed, #CCC) !important;
        background: var(--accordion-color-header-collapsed-background-pressed, #DFE3F1) !important;
    }




/* Promoted Content  */

.promoted-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 24px;
    background: #FFF;
    padding: 80px 24px 24px 24px;
}

    .promoted-content .section-title {
        display: flex;
        align-items: flex-start;
        margin: 0px auto 0px auto;
    }

    .promoted-content .section-content {
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        align-self: stretch;
        flex-wrap: wrap;
        padding: 40px;
        gap: 80px;
        border-radius: 12px;
        margin: auto;
    }

        .promoted-content .section-content .content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex: 1 0 0;
            min-width: 300px;
            max-width: 600px;
            gap: 16px;
        }

            .promoted-content .section-content .content span,
            .promoted-content .section-content .content strong {
                align-self: stretch;
            }

                .promoted-content .section-content .content span.text {
                    letter-spacing: var(--typography-spacing-letter-xl, 0.4px);
                }

                .promoted-content .section-content .content span.timestamp {
                    letter-spacing: var(--typography-spacing-letter-md, 0.28px);
                }

        .promoted-content .section-content .content-image {
            flex: unset;
            height: 382.5px;
            min-width: 300px;
            min-height: 168.75px;
            aspect-ratio: 680.00/382.50;
            background: url('content/upper-section-img.png') lightgray 50% / cover no-repeat;
        }




/* Content Highlight  */

.content-highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 80px;
    padding: 80px var(--space-lg);
}

@media (max-width: 1024px) {
    .content-highlight {
        padding: 40px var(--space-md);
    }
}

.content-highlight.home-padding {
    padding-top: 0px !important;
}

.content-highlight .section-content {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    align-self: stretch;
    flex-wrap: wrap;
    gap: 80px;
    margin: auto;
}

    .content-highlight .section-content.card-row-container {
        gap: 24px;
    }

        .content-highlight .section-content.card-row-container .text-icon-button-container {
            justify-content: center;
        }

    .content-highlight .section-content .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1 0 0;
        gap: 24px;
    }

.content-highlight.double-column .section-content {
    gap: 24px;
}

    .content-highlight.double-column .section-content .content {
        min-width: 300px;
        max-width: 800px;
        padding: 80px 16px 0px 0px;
    }

.content-highlight .section-content .content span,
.content-highlight .section-content .content strong {
    align-self: stretch;
}

    .content-highlight .section-content .content span.text {
        letter-spacing: var(--typography-spacing-letter-xl, 0.4px);
    }

.content-highlight .section-content .content-image {
    max-width: 800px;
    width: 100%;
    height: auto;
    aspect-ratio: 800.00/442;
    background: url('content/lower-section-img.png') #FFFFFF00 0px 0px / 100% 100% no-repeat;
}



/* Formatted content */

.page-background {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    padding-top: 40px;
    background: url('content/product-details-bg.webp') #fff 50% / cover no-repeat;
}

    .page-background.min-gap {
        gap: var(--space-lg);
    }

.formatted-content-header,
.formatted-content-section,
.tabs-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    align-self: stretch;
    padding: 0 var(--space-lg);
    background: unset;
}

.tabs-section {
    margin-top: -8px;
}

.formatted-content-section.formatted-content-section-gap {
    margin-bottom: 48px;
}

@media (max-width: 1024px) {
    .formatted-content-header,
    .formatted-content-section,
    .tabs-section {
        padding: 0 var(--space-md);
    }
}

.formatted-content-header .section-content,
.formatted-content-section .section-content {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
}

    .formatted-content-header .section-content.min-gap {
        gap: var(--space-lg);
    }





/* Formatted Content header */

.formatted-content-header .section-content {
    flex-direction: column;
}

    .formatted-content-header .section-content .content-header {
        display: flex;
        flex-direction: row;
        flex: 1 0 0;
        align-self: stretch;
        gap: 16px;
    }

        .formatted-content-header .section-content .content-header > .icon {
            display: flex;
            width: var(--icon-sizing-lg-width, 32px);
            justify-content: center;
            align-items: center;
        }

        .formatted-content-header .section-content .content-header .button-container {
            justify-content: flex-end;
            gap: 8px;
            flex: 1 0 0;
            flex-wrap: nowrap;
        }

    .formatted-content-header .section-content .title {
        margin: 0px;
    }

.formatted-content-header .content-header .button-container {
    flex-wrap: wrap !important;
}

    .formatted-content-header .content-header .button-container .button span {
        white-space: nowrap;
    }



/* Formatted Content Section */

.formatted-content-section .section-content.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

    .formatted-content-section .section-content.tab-content.content-active {
        display: flex;
        flex-wrap: wrap;
    }

.formatted-content-section .section-content {
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    max-width: var(--container-max-width, 1440px);
    row-gap: 80px;
    flex-direction: row;
}

    .formatted-content-section .section-content .content {
        display: flex;
        min-width: 300px;
        max-width: 700px;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        flex: 1 0 0;
    }

        .formatted-content-section .section-content .content > .text {
            align-self: stretch;
            letter-spacing: var(--typography-spacing-letter-xl, 0.4px);
        }

        .formatted-content-section .section-content .content .points {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            flex: 1 0 0;
        }

            .formatted-content-section .section-content .content .points .title,
            .formatted-content-section .section-content .content .points .text,
            .formatted-content-section .section-content .content .points .list {
                align-self: stretch;
                margin: 0px;
            }

    .formatted-content-section .section-content .section-graphic {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

        .formatted-content-section .section-content .section-graphic img {
            width: 100%;
            height: auto;
            max-width: 584px;
            aspect-ratio: 584/429;
            background-position-x: 0px;
            background-position-y: 0px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

@media(max-width: 965px) {
    .formatted-content-section .section-content {
        gap: 16px;
    }
}

@media(max-width: var(--container-max-width, 1440px)) {
    .formatted-content-section .section-content {
        gap: 80px;
    }
}



/* Tabs */
.tabs-section .tabs-container {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    height: 40px;
    padding: var(--tabs-spacing-tabList-line-top, 0px) var(--tabs-spacing-tabList-line-right, 0px) var(--tabs-spacing-tabList-line-bottom, 0px) var(--tabs-spacing-tabList-line-left, 0px);
    gap: var(--tabs-spacing-tabList-line-gap, 0px);
    border-bottom: 3px solid var(--tabs-color-border-enabled, #E6E6E6);
}

.tabs-section .tab-item {
    display: flex;
    min-width: var(--tabs-sizing-min-width, 40px);
    min-height: var(--tabs-sizing-min-height, 40px);
    align-items: center;
    border-radius: var(--tabs-radius-horizontal-tl, 0px) var(--tabs-radius-horizontal-tr, 0px) var(--tabs-radius-horizontal-br, 0px) var(--tabs-radius-horizontal-bl, 0px);
    padding: var(--tabs-spacing-padding-top, 8px) var(--tabs-spacing-padding-right, 16px) var(--tabs-spacing-padding-bottom, 8px) var(--tabs-spacing-padding-left, 16px);
    border: none;
    border-bottom: 3px solid transparent;
    background: var(--tabs-color-background-enabled, rgba(255, 255, 255, 0.00));
}

    .tabs-section .tab-item:hover {
        cursor: pointer;
    }

    .tabs-section .tab-item.tab-active:hover {
        cursor: unset;
    }

    .tabs-section .tab-item:active {
        background: var(--tabs-color-background-pressed, #DFE3F1);
        border-bottom: 3px solid var(--tabs-color-border-pressed, #CCC);
        padding-bottom: 5px;
    }

    .tabs-section .tab-item.tab-active:active {
        background: unset;
    }

    .tabs-section .tab-item.tab-active {
        padding-bottom: 5px;
        border-bottom: 3px solid var(--tabs-color-border-selected-enabled, #0557D5);
    }

    .tabs-section .tab-item span {
        color: var(--tabs-color-label-enabled, #4D4D4D);
        white-space: nowrap;
    }

    .tabs-section .tab-item.tab-active span {
        color: var(--tabs-color-label-selected-enabled, #333);
    }



/* Trial Banner */
.notification-banner,
.error-banner {
    display: flex;
    padding: var(--banner-spacing-padding-top, 8px) var(--banner-spacing-padding-right, 16px) var(--banner-spacing-padding-bottom, 8px) var(--banner-spacing-padding-left, 16px);
    justify-content: space-between;
    gap: var(--banner-spacing-padding-gap, 8px);
    border-radius: var(--banner-radius, 0px);
    background: var(--banner-background-color, #5C6064);
    box-shadow: 0px 8px 20px 0px var(--banner-box-shadow-color, rgba(0, 0, 0, 0.08));
    box-sizing: border-box;
}

    .notification-banner.hidden {
        display: none;
    }

    .notification-banner .banner-content,
    .error-banner .banner-content {
        text-align: center;
        flex: 1 0 0;
        align-self: center;
    }

    .notification-banner .action-button,
    .search-field .search-clear-button {
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        background: none;
        cursor: pointer;
    }

    .notification-banner .action-button,
    .error-banner .action-button {
        width: var(--iconButton-sizing-small-width, 32px);
        height: var(--iconButton-sizing-small-height, 32px);
        padding: var(--iconButton-padding-small, 4px);
    }

/* Error Banner */

.error-banner {
    background: var(--banner-error-background-color, rgba(189, 1, 0, 1));
    box-shadow: 0px 8px 20px 0px var(--banner-box-shadow-color, rgba(0, 0, 0, 0.08));
    align-self: stretch;
}

    .error-banner .banner-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: var(--banner-text-max-text, 1200px);
        padding: 0px 8px;
        gap: 8px;
    }

        .error-banner .banner-content .error-icon {
            padding: 3px 0px;
            width: var(--banner-sizing-icon-width, 16px);
            height: var(--banner-sizing-icon-height, 16px);
            align-self: baseline;
        }

        .error-banner .banner-content .banner-text {
            color: var(--banner-color-text, #FFF);
            text-align: left;
        }

            .error-banner .banner-content .banner-text span {
                margin: 0px;
                color: var(--banner-color-text, #FFF);
                text-align: left;
            }

        .error-banner .banner-content button {
            min-height: var(--button-spacing-small-secondary-min-height, 32px);
            min-width: var(--button-spacing-small-secondary-min-width, 64px);
            height: var(--button-spacing-small-secondary-height, 32px);
            padding: var(--button-spacing-small-secondary-padding-top, 4px) var(--button-spacing-small-secondary-padding-right, 8px) var(--button-spacing-small-secondary-padding-bottom, 4px) var(--button-spacing-small-secondary-padding-left, 8px);
            background: var(--button-color-secondary-background-enabled, rgba(5, 87, 213, 0.00));
            border: 1px solid var(--button-color-secondary-border-enabled-error-button, rgba(230, 230, 230, 1));
        }

            .error-banner .banner-content button span {
                color: var(--button-color-secondary-content-enabled-error-button, rgba(255, 255, 255, 1));
            }

    .error-banner .action-button {
        min-width: var(--iconButton-sizing-small-width, 32px);
        min-height: var(--iconButton-sizing-small-height, 32px);
        border-radius: var(--radius-circle, 50%);
        background: var(--button-color-secondary-background-enabled, rgba(5, 87, 213, 0.00));
        border: transparent !important;
    }

        .error-banner .action-button:hover {
            background: var(--button-color-secondary-background-hover-error-button, rgba(255, 255, 255, 0.08));
            border: transparent !important;
        }

        .error-banner .action-button:active {
            background: var(--button-color-secondary-background-pressed-error-button, rgba(255, 255, 255, 0.16));
            border: transparent !important;
        }

        .error-banner .action-button svg {
            width: 24px;
            height: 24px;
        }

        .error-banner .action-button:hover svg,
        .error-banner .action-button:active svg {
            width: 21px;
            height: 21px;
        }

/* Search input */

.search-container {
    position: relative;
    width: 800px;
    max-width: 800px;
    height: 40px;
    display: flex;
    margin: 0 auto;
    align-items: flex-start;
}

.search-input {
    width: 100%;
    padding: 8px 36px;
    border: 1px solid var(--textField-color-border-enabled);
    border-radius: var(--button-radius-standard-primary);
    background: var(--textField-color-background-enabled);
    transition: all 0.3s ease;
}

    .search-input:hover {
        border-color: var(--input-border-hover);
    }

    .search-input:active {
        border-color: var(--input-border-active);
    }

    .search-input:focus {
        border-color: var(--input-border-hover);
        outline: 2px solid var(--input-outline-focus);
        outline-offset: 4px;
    }

.search-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    cursor: pointer;
}

.clear-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    cursor: pointer;
}

    .clear-icon.hidden {
        display: none;
    }

    .search-icon img,
    .clear-icon img {
        vertical-align: middle;
    }

/* Product Cards */

.card-controls {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: var(--textField-spacing-standard-min-height);
}

    .card-controls .filter-button img {
        vertical-align: middle;
    }

    .card-controls .filter-button.hidden {
        visibility: hidden;
    }

    .card-controls .grouped-controls {
        display: flex;
        flex-direction: row;
        flex-grow: 0;
        gap: 16px;
    }

    .card-controls .form .input-field-container {
        border-radius: var(--button-radius-standard-primary, 4px);
        cursor: pointer;
    }

        .card-controls .form .input-field-container:focus-visible {
            outline: 1px solid var(--input-outline-focus);
        }

        .card-controls .form .input-field-container .input-field {
            background-color: transparent;
            border: none;
            padding: var(--textField-spacing-standard-padding-top, 4px) 0px var(--textField-spacing-standard-padding-bottom) 16px;
        }

            .card-controls .form .input-field-container .input-field .sort-select-label {
                display: flex;
                align-items: center;
            }

            .card-controls .form .input-field-container .input-field .label-text,
            .card-controls .form .input-field-container .input-field select {
                color: var(--button-color-secondary-content-enabled);
                letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
            }

    .card-controls .input-field-container .input-field select.form-input.sort-select {
        padding: 0 30px 0 6px;
        background-position-x: 92%;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
    }

        .card-controls .input-field-container .input-field select.form-input.sort-select option {
            color: var(--typography-color-default-neutral);
        }

            .card-controls .input-field-container .input-field select.form-input.sort-select option.hidden {
                display: none;
            }

.view-controls {
    display: flex;
    flex-direction: row;
    height: var(--textField-spacing-standard-min-height);
    padding: 0;
}

    .view-controls .view-button {
        box-sizing: border-box;
    }

.section-content .product-grid {
    display: grid;
    gap: var(--space-lg);
    flex: 1 1 auto;
}

@media (max-width: 655px) {
    .section-content .product-grid {
        grid-template-columns: 1fr;
        max-width: 324px;
        margin: 0 auto;
    }

    .product-card {
        min-width: 300px;
        max-width: 342px;
    }

    .product-card-container.filter-visible .product-grid {
        grid-template-columns: 1fr;
    }

    .section-content .filter-button span.text {
        display: none;
    }
}

@media (min-width: 656px) and (max-width: 979px) {
    .section-content .product-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 708px;
        margin: 0 auto;
    }

    .product-card {
        min-width: 300px;
        max-width: 342px;
    }

    .product-card-container.filter-visible .product-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 980px) and (max-width: 1319px) {
    .section-content .product-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1100px;
        margin: 0 auto;
    }

    .product-card {
        min-width: 300px;
        max-width: 342px;
    }

    .product-card-container.filter-visible .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (min-width: 1320px) and (max-width: 1439px) {
    .section-content .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .product-card {
        min-width: 300px;
        max-width: 342px;
    }

    .product-card-container.filter-visible .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1440px) {
    .section-content .product-grid {
        grid-template-columns: repeat(4, 342px);
    }

    .product-card {
        max-width: 342px;
        width: 342px;
    }

    .product-card-container.filter-visible .product-grid {
        grid-template-columns: repeat(3, 342px);
    }
}

.section-content .product-grid.hidden {
    display: none;
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    height: 240px;
    padding: var(--space-md);
    background: var(--card-color-container-enabled);
    border-radius: var(--textField-radius-standard);
    box-shadow: 0px 4px 16px 0px var(--functional-shadow-levelOne-color, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--card-color-border-enabled);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

    .product-card .product-card-header {
        display: flex;
        height: 54px;
        gap: 16px;
    }

    .product-card .product-card-name {
        overflow: hidden;
    }

    .product-card .product-card-header h3,
    .product-card .product-card-header h4 {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-card .product-card-header h4 {
        line-height: var(--typography-lineHeight-base, 24px);
    }

    .product-card .product-card-header .icon {
        align-self: center;
    }

    .product-card .product-card-header .application-icon {
        width: 56px;
        height: 56px;
    }

    .product-card .product-card-header .api-icon {
        width: 20px;
        height: 20px;
    }

    .product-card .product-card-header .use-case-icon {
        width: var(--icon-sizing-md-width, 24px);
        height: var(--icon-sizing-md-height, 24px);
    }

    .product-card .product-card-content {
        display: -webkit-box;
        height: 72px;
        margin: 0;
        letter-spacing: var(--typography-spacing-letter-none, 0.32px);
        overflow: hidden;
        text-overflow: ellipsis;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .product-card mark {
        background-color: lightblue;
        padding: 0 var(--space-xxs);
        border-radius: 4px;
    }

.product-card-buttons {
    display: flex;
    justify-content: space-between;
    height: 32px;
}

    .product-card-buttons .icon {
        display: flex;
    }

        .product-card-buttons .icon .learn-more-icon {
            align-self: center;
        }

    .product-card-buttons .button.button-small {
        position: relative;
    }

        .product-card-buttons .button.button-small .button-tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 4px;
            padding: var(--space-xs) var(--space-sm);
            border: 1px solid var(--textField-color-help-enabled);
            border-radius: 4px;
            background-color: var(--typography-color-default-neutral);
            color: var(--neutrals-color-neutral-0);
            letter-spacing: 0.28px;
            white-space: nowrap;
            transition: opacity 0.2s ease;
            opacity: 0;
            z-index: 1000;
            cursor: text;
        }

        .product-card-buttons .button.button-small:hover .button-tooltip {
            opacity: 1;
        }

.filter-panel {
    display: none;
    overflow: hidden;
}

.product-card-container.filter-visible {
    gap: var(--space-lg);
}

    .product-card-container.filter-visible .filter-panel {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        max-width: 320px;
        padding: var(--space-md);
        background: var(--card-color-container-enabled);
        border-radius: var(--textField-radius-standard);
        box-shadow: 0px 4px 16px 0px var(--functional-shadow-levelOne-color, rgba(0, 0, 0, 0.04));
        border: 1px solid var(--card-color-border-enabled);
        box-sizing: border-box;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .product-card-container.filter-visible .toggle {
        display: flex;
        flex-direction: column;
        letter-spacing: var(--typography-spacing-letter-md, 0.28px);
    }

        .product-card-container.filter-visible .toggle.hidden {
            display: none;
        }

    .product-card-container.filter-visible .toggle-slider {
        display: inline-block;
        width: 48px;
        height: 24px;
        background: var(--checkbox-color-control-border-enabled);
        border-radius: 20px;
        position: relative;
        cursor: pointer;
        vertical-align: middle;
    }

        .product-card-container.filter-visible .toggle-slider::before {
            content: "";
            position: absolute;
            top: 4px;
            left: 4px;
            width: 16px;
            height: 16px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s;
        }

    .product-card-container.filter-visible .toggle input:checked + .toggle-slider {
        background: var(--color-primary-hover);
    }

        .product-card-container.filter-visible .toggle input:checked + .toggle-slider::before {
            transform: translateX(24px);
        }

.filter-panel .filter-panel-header {
    display: flex;
    justify-content: space-between;
}

.filter-panel .filter-panel-title {
    margin: 0;
    letter-spacing: var(--typography-spacing-letter-2x);
}

.filter-panel .action-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--iconButton-sizing-small-width, 32px);
    height: var(--iconButton-sizing-small-height, 32px);
    padding: var(--iconButton-padding-small, 4px);
    border: none;
    background: none;
    cursor: pointer;
}

.filter-panel .filter-category {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: none;
    letter-spacing: var(--typography-spacing-letter-md);
}

    .filter-panel .filter-category.country-container.hidden {
        display: none;
    }

    .filter-panel .filter-category .checkbox-field {
        position: relative;
        padding: var(--space-xs) var(--space-sm);
        gap: var(--space-sm);
    }

    .filter-panel .filter-category input {
        width: 20px;
        height: 20px;
        margin: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        outline: none;
    }

        .filter-panel .filter-category input:checked {
            background: var(--checkbox-background-checked);
            border-color: var(--checkbox-background-checked);
        }

    .filter-panel .filter-category .checkbox-field:has(input:checked)::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 15px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        z-index: 3;
        pointer-events: none;
    }

    .filter-panel .filter-category label {
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        max-width: 160px;
    }

    .filter-panel .filter-category .checkbox-field:has(input:checked) label {
        font-weight: var(--typography-font-weight-medium, 500);
    }

.filter-panel .country-checkbox-container {
    max-height: 200px;
    overflow-y: scroll;
}

.filter-panel label {
    flex: 1;
}

.filter-panel .reset-button {
    width: fit-content;
}

.product-card-container .no-products-container {
    display: flex;
    flex: 1;
    justify-content: center;
    text-align: center;
    padding: var(--space-lg);
}

    .product-card-container .no-products-container.hidden {
        display: none;
    }

/* Search Box */
.search-field {
    display: flex;
    flex-direction: row;
    gap: var(--space-sm);
    width: 100%;
    max-width: 800px;
    height: 40px;
    min-width: var(--textField-spacing-standard-min-width, 40px);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--textField-color-border-enabled, #808080);
    border-radius: var(--radius-sm);
    background: var(--textField-color-background-enabled, #FFF);
    align-items: center;
    align-self: center;
}

    .search-field:focus-within {
        border-color: var(--textField-color-border-pressed, #013D98);
    }


    .search-field .search-icon-container {
        width: var(--textField-sizing-icon-standard-width, 16px);
        height: var(--textField-sizing-icon-standard-height, 16px);
    }

    .search-field .search-clear-button {
        min-width: var(--textField-sizing-icon-standard-width, 16px);
        min-height: var(--textField-sizing-icon-standard-height, 16px);
        padding: var(--space-none);
    }

        .search-field .search-clear-button.hidden {
            display: none;
        }

        .search-field .search-clear-button .search-clear-icon {
            width: var(--textField-sizing-icon-standard-width, 16px);
            height: var(--textField-sizing-icon-standard-height, 16px);
            border-radius: var(--radius-circle);
        }

        .search-field .search-clear-button:hover .search-clear-icon {
            background-color: var(--clear-button-background-color-hover, rgba(5, 87, 213, 0.08));
        }

            .search-field .search-clear-button:hover .search-clear-icon path {
                fill: var(--clear-button-color-icon-hover, #013D98);
            }

    .search-field .search-text {
        display: flex;
        align-items: center;
        flex: 1 0 0;
        align-self: stretch;
        border: none;
        outline: none;
    }

.use-case-text-container {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
    line-clamp: 9;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .use-case-text-container p {
        margin-top: 0px;
        margin-bottom: 24px;
    }



/* Responsiveness for home */
@media (max-width: 1024px) {
    .banner,
    .promoted-content,
    .card-view {
        padding-left: 16px;
        padding-right: 16px;
    }

    .banner,
    .card-view {
        padding-bottom: 40px;
    }

    .banner,
    .promoted-content,
    .content-highlight.home-padding .section-content .content {
        padding-top: 40px;
    }

    .footer {
        padding: 24px 16px;
    }

    .content-highlight.home-padding {
        gap: 40px;
    }
}

/* Responsiveness for Product Details */
@media (max-width: 1024px) {
    .formatted-content-section .section-content .content {
        max-width: 100%;
    }

    .formatted-content-section .section-content {
        justify-content: center;
    }

    .formatted-content-section.formatted-content-section-gap {
        margin-bottom: 8px;
    }
}





/* Login and Register Page Styles */

/* Login Container */

.layout-container.login-layout-container main,
.layout-container.register-layout-container main {
    padding: 16px 0px;
}

/* Navbar */

.layout-container.login-layout-container .navbar,
.layout-container.register-layout-container .navbar {
    padding-left: 16px;
    background: unset;
}

    .layout-container.login-layout-container .navbar .slot,
    .layout-container.register-layout-container .navbar .slot {
        gap: 16px;
    }

        .layout-container.login-layout-container .navbar .slot .app-name,
        .layout-container.register-layout-container .navbar .slot .app-name {
            height: 30px;
            padding: 0px;
            gap: var(--navbar-spacing-appName-gap, 16px);
        }

            .layout-container.login-layout-container .navbar .slot .app-name .company-name,
            .layout-container.register-layout-container .navbar .slot .app-name .company-name {
                width: 91px;
                height: 16px;
                flex-shrink: 0;
            }

    .layout-container.login-layout-container .navbar .tabs,
    .layout-container.register-layout-container .navbar .tabs {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        margin: 0px;
        padding: 0px;
    }

        .layout-container.login-layout-container .navbar .tabs .item,
        .layout-container.register-layout-container .navbar .tabs .item {
            padding: 0px 16px;
        }

            .layout-container.login-layout-container .navbar .tabs .item:hover,
            .layout-container.register-layout-container .navbar .tabs .item:hover {
                cursor: pointer;
                background: var(--navbar-color-surface-item-hover, rgba(255, 255, 255, 0.08));
            }

            .layout-container.login-layout-container .navbar .tabs .item:active,
            .layout-container.register-layout-container .navbar .tabs .item:active {
                background: var(--navbar-color-surface-item-pressed, rgba(255, 255, 255, 0.12));
            }

            .layout-container.login-layout-container .navbar .tabs .item .tab,
            .layout-container.register-layout-container .navbar .tabs .item .tab {
                padding: unset;
                background: var(--navbar-color-surface-item-enabled, rgba(236, 244, 255, 0.00));
            }

                .layout-container.login-layout-container .navbar .tabs .item .tab:hover,
                .layout-container.register-layout-container .navbar .tabs .item .tab:hover {
                    background: unset;
                }

                .layout-container.login-layout-container .navbar .tabs .item .tab span,
                .layout-container.register-layout-container .navbar .tabs .item .tab span {
                    color: var(--navbar-color-content-item-enabled, #333);
                }

/* Footer  */

.layout-container.login-layout-container .footer,
.layout-container.register-layout-container .footer {
    background: var(--footer-background);
}

    .layout-container.login-layout-container .footer .content .logo,
    .layout-container.register-layout-container .footer .content .logo {
        height: unset;
        align-self: stretch;
    }

/* Login modal tabs */

.modal-container.login-modal .modal .tabs-section {
    margin-top: unset;
    padding: 0px;
}

.modal-container.login-modal .modal .tab-content {
    display: none;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

    .modal-container.login-modal .modal .tab-content.content-active {
        display: flex;
    }



/* Register pages */

.step-welcome .register-form-container .form-content .form-inner-container .form-header.step-welcome {
    margin-bottom: -16px;
}


/* Responsiveness */

@media(max-width: 1279px) {
    .layout-container.login-layout-container .navbar-container,
    .layout-container.register-layout-container .navbar-container {
        padding: 0px 24px;
    }

    .layout-container.login-layout-container .footer,
    .layout-container.register-layout-container .footer {
        padding: 0px 24px;
        padding-bottom: 16px;
        background: unset !important;
    }

        .layout-container.login-layout-container .footer .content,
        .layout-container.register-layout-container .footer .content {
            flex-direction: column;
            gap: 16px;
        }

            .layout-container.login-layout-container .footer .content .links-container,
            .layout-container.register-layout-container .footer .content .links-container {
                flex-direction: column;
                align-items: flex-start;
                align-content: flex-start;
                gap: 16px;
            }

                .layout-container.login-layout-container .footer .content .links-container .links,
                .layout-container.register-layout-container .footer .content .links-container .links {
                    gap: 8px;
                }
}

@media(max-width: 767px) {
    .layout-container.login-layout-container .navbar-container,
    .layout-container.register-layout-container .navbar-container {
        padding: 0px 40px;
    }

    .layout-container.login-layout-container .navbar,
    .layout-container.register-layout-container .navbar {
        height: 56px;
        align-self: stretch;
        padding: 0px !important;
    }

        .layout-container.login-layout-container .navbar .tabs,
        .layout-container.register-layout-container .navbar .tabs {
            display: none;
        }

    .layout-container.login-layout-container .footer,
    .layout-container.register-layout-container .footer {
        justify-content: center;
        align-self: stretch;
        padding: 16px 0px;
        gap: 16px;
    }

        .layout-container.login-layout-container .footer .content,
        .layout-container.register-layout-container .footer .content {
            flex-direction: column;
            gap: 16px;
        }

            .layout-container.login-layout-container .footer .content .links-container,
            .layout-container.register-layout-container .footer .content .links-container {
                flex-direction: column;
                gap: 16px;
            }

                .layout-container.login-layout-container .footer .content .links-container .links,
                .layout-container.register-layout-container .footer .content .links-container .links {
                    align-items: flex-start;
                    align-content: flex-start;
                    gap: 8px;
                }

                .layout-container.login-layout-container .footer .content .links-container .copyright,
                .layout-container.register-layout-container .footer .content .links-container .copyright {
                    flex-direction: column;
                    justify-content: center;
                    align-self: flex-start;
                }

    .error-banner .banner-content .error-icon {
        display: none;
    }
}



/* Login page background images */

@media(min-width: 768px) {
    .layout-container.register-layout-container,
    .layout-container.login-layout-container.privacy-policy-container,
    .layout-container.login-layout-container.maintenance-layout-container,
    .layout-container.login-layout-container.step-2fa-preference {
        background: var(--background-overlay), url('../images/background_self_register.webp') lightgray top right / cover no-repeat;
    }

    .layout-container.login-layout-container.step-login,
    .layout-container.login-layout-container.step-password {
        background: var(--background-overlay), url('../images/background_general.webp') lightgray top right / cover no-repeat;
    }

    .layout-container.login-layout-container.step-forget-password {
        background: var(--background-overlay), url('../images/background_forgot_password.webp') lightgray top right / cover no-repeat;
    }

    .layout-container.login-layout-container.step-verification-code,
    .layout-container.login-layout-container.step-new-password,
    .layout-container.login-layout-container.step-password-reset-success {
        background: var(--background-overlay), url('../images/background_verification_code.webp') lightgray top right / cover no-repeat;
    }

    .layout-container.login-layout-container.step-forget-username,
    .layout-container.login-layout-container.step-forget-username-success {
        background: var(--background-overlay), url('../images/background_forgot_username.webp') lightgray top right / cover no-repeat;
    }

    .layout-container.login-layout-container.step-error {
        background: var(--background-overlay), url('../images/background_error_pages.webp') lightgray top right / cover no-repeat;
        background-attachment: fixed, fixed;
    }
}

@media(max-width: 767px) {
    .layout-container.register-layout-container,
    .layout-container.login-layout-container {
        background: var(--mobile-background);
    }
}