@font-face {
    font-family: SBSansText;
    src: url("/sl_static/fonts/SBSansText-Regular.ttf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: SBSansText;
    src: url("/sl_static/fonts/SBSansText-Bold.ttf") format("opentype");
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: SBSansText;
    src: url("/sl_static/fonts/SBSansText-BoldItalic.ttf") format("opentype");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: SBSansText;
    src: url("/sl_static/fonts/SBSansText-Italic.ttf") format("opentype");
    font-style: italic;
}

@font-face {
    font-family: SBSansDisplay;
    src: url("/sl_static/fonts/SBSansDisplay-Regular.ttf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: SBSansDisplay;
    src: url("/sl_static/fonts/SBSansDisplay-Bold.ttf") format("opentype");
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: SBSansDisplay;
    src: url("/sl_static/fonts/SBSansDisplay-SemiBold.ttf") format("opentype");
    font-weight: 600;
    font-display: swap;
}

/*Desktop*/
@media only screen and (min-width: 780px) {
    body {
        width: 1174px;
        height: 900px;
        display: flex;
        margin: 0 auto;
        background: #F6F8FA;
    }

    #main {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0;

        position: absolute;
    }

    #navbar {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0;

        height: 114px;
        margin-bottom: 24px;
    }

    #content-frame {
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        min-height: 568px;
    }

    #content-title-frame {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 24px;
    }

    #content-application-label {
        background: rgba(0, 0, 0, 0.04);
        border-radius: 8px;
        padding: 8px 12px 8px 12px;

        color: rgba(3, 22, 23, 0.55);
        font-family: SBSansText, sans-serif;
        font-size: 13px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.3px;
        text-align: left;
    }

    #content-conversation-title-frame {
        display: flex;
        flex-direction: row;
        align-items: flex-start;

        gap: 24px;

        max-width: 780px;
    }

    #content-conversation-title-avatar {
        width: 80px;
        height: 80px;
    }

    #content-conversation-title-avatar img {
        width: 80px;
        height: 80px;
        border-radius: 20px;
    }

    #content-body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    #content-conversation-title-text {
        color: rgb(3, 22, 23);
        font-family: SBSansDisplay, sans-serif;
        font-size: 62px;
        font-weight: 600;
        line-height: 70px;
        letter-spacing: -0.1px;
        text-align: left;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 2px 0px 0px 0px;

        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #content-conversation-info-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

    #content-conversation-info-stub-item {
        display: none;
    }

    #content-conversation-info-organizer-name-card {
        min-height: 122px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        background: rgb(255, 255, 255);
        border-radius: 24px;
        justify-content: space-between;
        padding: 20px;
        gap: 13px;
    }

    #content-conversation-info-organizer-name-icon {
        width: 36px;
        height: 36px;
    }

    #content-conversation-info-organizer-name-icon img {
        width: 36px;
        height: 36px;
    }

    #content-conversation-info-organizer-name-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    #content-conversation-info-organizer-name-fullname {
        width: 209px;
        color: rgb(0, 0, 0);
        font-family: SBSansDisplay, sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #content-conversation-info-organizer-name-description {
        color: rgba(3, 22, 23, 0.55);
        font-family: SBSansText, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #content-conversation-info-participants-card {
        min-height: 122px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        background: rgb(255, 255, 255);
        border-radius: 24px;
        justify-content: space-between;
        padding: 20px 20px 22px 20px;
        gap: 35px;
    }

    #content-conversation-info-participants-icon {
        width: 36px;
        height: 36px;
    }

    #content-conversation-info-participants-icon img {
        width: 36px;
        height: 36px;
    }

    #content-conversation-info-participants-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    #content-conversation-info-participants-count {
        width: 209px;
        color: rgb(0, 0, 0);
        font-family: SBSansDisplay, sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #content-conversation-info-participants-description {
        color: rgba(3, 22, 23, 0.55);
        font-family: SBSansText, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #content-conversation-info-amount-card {
        min-height: 122px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        background: rgb(255, 255, 255);
        border-radius: 24px;
        justify-content: space-between;
        padding: 20px;
        gap: 39px;
    }

    #content-conversation-info-personal-amount-card {
        min-height: 122px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        background: rgb(255, 255, 255);
        border-radius: 24px;
        justify-content: space-between;
        padding: 20px;
        gap: 13px;
    }

    #content-conversation-info-amount-icon {
        width: 36px;
        height: 36px;
    }

    #content-conversation-info-amount-icon img {
        width: 36px;
        height: 36px;
    }

    #content-conversation-info-amount-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    #content-conversation-info-amount-description {
        color: rgba(3, 22, 23, 0.55);
        font-family: SBSansText, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #content-conversation-info-amount-text {
        height: 47px;
        width: 209px;
        color: rgb(0, 0, 0);
        font-family: SBSansDisplay, sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #go-to-conversation-button {
        display: none;
    }

    #disabled-go-to-conversation-button {
        display: none;
    }

    #switch-to-application-frame {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24px;

        background: rgb(255, 255, 255);
        border-radius: 24px;
        padding: 24px;
    }

    #alert-frame {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24px;

        margin-top: 8px;

        background: rgb(255, 255, 255);
        border-radius: 24px;
        padding: 24px;
    }

    #orange-alert {
        height: 64px;
        width: 64px;
    }

    #gray-alert {
        height: 64px;
        width: 64px;
    }

    #alert-text-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }

    #alert-title {
        color: rgb(0, 0, 0);
        font-family: SBSansDisplay, sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0.013em;
        text-align: left;
        padding: 0;
    }

    #alert-description {
        color: rgba(3, 22, 23, 0.55);
        font-family: SBSansText, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: left;
        padding: 0;
    }

    #switch-to-application-text-frame {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 67px;
        max-width: 528px;
    }

    #switch-to-application-text-title-frame {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }

    #switch-to-application-text-title {
        color: rgb(0, 0, 0);
        font-family: SBSansDisplay, sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0.3px;
        text-align: left;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #switch-to-application-text-arrow {
        width: 80px;
        height: 24px;
    }

    #switch-to-application-text-arrow img {
        width: 80px;
        height: 24px;
    }

    #switch-to-application-text-description {
        color: rgba(3, 22, 23, 0.7);
        font-family: SBSansText, sans-serif;
        font-style: normal;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: left;
    }

    #switch-to-application-text-description a {
        color: #148F2B;
        text-decoration: none;
    }

    #switch-to-application-qr {
        height: 180px;
        width: 180px;
        border-radius: 4px;
    }

    #background {
        z-index: -1;
        position: relative;
        width: 833px;
        height: 816px;
        top: -31px;
        left: 520px;
    }

    #error-background {
        z-index: -1;
        position: relative;
        width: 833px;
        height: 816px;
        top: -31px;
        left: 520px;
    }

    #background-group-2 {
        position: absolute;
        width: 657px;
        height: 680px;
        left: 0px;
        top: 136px;

        opacity: 0.7;
    }

    #background-group-2-ellipse-3 {
        position: absolute;
        width: 298px;
        height: 396px;
        left: 126px;
        top: 258px;

        background: linear-gradient(90deg, #148F2B 1.94%, #FFFF00 100%);
        opacity: 0.6;
        filter: blur(125px);
        transform: rotate(61.88deg);

    }

    #background-group-2-ellipse-4 {
        position: absolute;
        width: 298px;
        height: 396px;
        left: 294px;
        top: 90px;


        background: linear-gradient(90deg, #B7A7F1 1.94%, #736DC8 100%);
        opacity: 0.6;
        filter: blur(125px);
        transform: rotate(-22.63deg);
    }

    #background-group-2-ellipse-5 {
        position: absolute;
        width: 328px;
        height: 437px;
        left: 86px;
        top: -8px;

        background: linear-gradient(90deg, #D8FAFA 1.94%, #81ECEA 100%);
        opacity: 0.6;
        filter: blur(125px);
        transform: rotate(76.3deg);
    }

    #background-group-3 {
        position: absolute;
        width: 657px;
        height: 680px;
        left: 155px;
        top: 0px;

        opacity: 0.7;
    }

    #background-group-3-ellipse-3 {
        position: absolute;
        width: 298px;
        height: 396px;
        left: 126px;
        top: 258px;

        background: linear-gradient(90deg, #148F2B 1.94%, #FFFF00 100%);
        opacity: 0.6;
        filter: blur(125px);
        transform: rotate(61.88deg);
    }

    #background-group-3-ellipse-4 {
        position: absolute;
        width: 298px;
        height: 396px;
        left: 296px;
        top: 90px;

        background: linear-gradient(90deg, #B7A7F1 1.94%, #736DC8 100%);
        opacity: 0.6;
        filter: blur(125px);
        transform: rotate(-22.63deg);
    }

    #background-group-3-ellipse-5 {
        position: absolute;
        width: 328px;
        height: 437px;
        left: 86px;
        top: -6px;

        background: linear-gradient(90deg, #D8FAFA 1.94%, #81ECEA 100%);
        opacity: 0.6;
        filter: blur(125px);
        transform: rotate(76.3deg);
    }

    #male-with-laptop {
        margin-left: 780px;
        margin-top: -350px;
        width: 394px;
        height: 394px;
    }

    #man-with-loupe {
        margin-left: 780px;
        margin-top: -566px;
        width: 394px;
        height: 610px;
    }

    #woman-with-reaction {
        margin-left: 780px;
        margin-top: -566px;
        width: 394px;
        height: 610px;
    }

    #footer {
        width: 100%;
        /* Auto layout */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 24px 0 56px 0;

        border-top: 1px solid rgba(0, 0, 0, 0.12);
    }

    #footer-left-column {
        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;

        max-width: 448px;
    }

    #footer-license-text {
        font-family: SBSansText, sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 13px;
        line-height: 16px;
        /* or 146% */
        letter-spacing: -0.3px;

        /* active/20 */
        color: rgba(3, 22, 23, 0.7);
    }

    #footer-copyright-text {
        font-family: SBSansText, sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 13px;
        line-height: 16px;
        /* or 146% */
        letter-spacing: -0.3px;

        /* active/20 */
        color: rgba(3, 22, 23, 0.7);
    }

    #footer-copyright-text a {
        color: rgba(3, 22, 23, 0.7);
    }

    #footer-right-column {
        max-width: 157px;
        margin-right: 183px;
    }

    #footer-legal-address {
    }

    #footer-legal-address-text {
        font-family: SBSansText, sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 13px;
        line-height: 16px;
        /* or 146% */
        letter-spacing: -0.3px;

        /* active/20 */
        color: rgba(3, 22, 23, 0.7);
    }

    #footer-address {
        height: 48px;
    }

    #footer-address-text {
        width: 163px;
        height: 38px;
        font-family: SBSansText, sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 19px;
        /* or 146% */
        letter-spacing: 0.1px;

        /* active/20 */
        color: rgba(3, 22, 23, 0.7);
    }

    #cookies-frame {
        z-index: 4;
        bottom: 32px;
        margin-left: -20px;
        position: fixed;
        background: rgb(255, 255, 255);
        border-radius: 16px;
        box-shadow: 0 4px 40px 10px rgba(0, 0, 0, 0.1);
        display: none;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 14px 24px 14px 24px;
        gap: 20px;
    }

    #cookies-text-frame {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 990px;
        flex: auto;
        order: 0;
        flex-grow: 1;
        gap: 10px;
    }

    #cookies-main-text {
        color: rgba(3, 22, 23, 0.7);
        font-family: SBSansText, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: left;
        padding-right: 20px;
        flex: auto;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    #cookies-main-text a {
        color: #148F2B;
        text-decoration: none;
    }

    #cookies-sub-text {
        color: rgba(3, 22, 23, 0.55);
        font-family: SBSansText, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: left;
        padding: 0px;
        flex: auto;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }

    #cookies-sub-text a {
        color: rgba(3, 22, 23, 0.55);
    }

    #cookies-button {
        width: 156px;
        height: 61px;
        border: 1px solid rgba(3, 22, 23, 0.7);
        border-radius: 12px;
        box-sizing: border-box;
        padding: 0;
        flex: none;
        order: 1;
        flex-grow: 0;
        background: #FFFFFF;
        color: rgb(3, 22, 23);
        font-family: SBSansDisplay, sans-serif;
        font-weight: 600;
        font-size: 18px;
        cursor: pointer;
    }

    #mobile-distribution-main-frame {
        display: none;
    }

    #mobile-footer {
        display: none;
    }

    #mobile-cookies-text-frame {
        display: none;
    }
}

/*Desktop*/
@media only screen and (min-width: 780px) and (max-width: 1214px) {
    #cookies-frame {
        margin-left: 5px;
        margin-right: 5px;
    }
}

/*Desktop + laptop*/
@media only screen and (min-width: 780px) and (max-width: 1024px) {
    body {
        width: 780px;
        height: 900px;
        display: flex;
        margin: 0 auto;
        background: #F6F8FA;
    }

    #content-frame {
        min-height: 0;
        word-break: break-word;
    }

    #male-with-laptop {
        display: none;
    }

    #man-with-loupe {
        display: none;
    }

    #woman-with-reaction {
        display: none;
    }

    #footer {
        max-width: 780px;
        margin-top: 44px;
    }

    #cookies-frame {
        max-width: 732px;
        margin-left: 0;
        margin-right: 0;
    }

    #footer-right-column {
        max-width: 157px;
        margin: 0;
    }
}

/*Mobile*/
@media only screen and (max-width: 780px) {
    body {
        display: block;
        margin: 0 auto;
        background: url("/sl_static/img/mob_background.webp") no-repeat scroll;
        background-size: 100% 100%;
    }

    #main {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
        margin-left: max(5%, 20px);
        margin-right: max(5%, 20px);
    }

    #navbar {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0;

        margin-top: 24px;
        margin-bottom: 20px;
    }

    #logo a img {
        width: 157px;
        height: 24px;
    }

    #content-frame {
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        word-break: break-word;
    }

    #content-title-frame {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;
    }

    #content-application-label {
        background: rgba(0, 0, 0, 0.04);
        border-radius: 8px;
        padding: 8px 12px 8px 12px;;

        color: rgba(3, 22, 23, 0.55);
        font-family: SBSansText, sans-serif;
        font-size: 13px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.3px;
        text-align: left;
    }

    #content-conversation-title-frame {
        display: flex;
        flex-direction: row;
        align-items: flex-start;

        gap: 20px;
    }

    #content-conversation-title-avatar {
        width: 60px;
        height: 60px;
    }

    #content-conversation-title-avatar img {
        width: 60px;
        height: 60px;
        border-radius: 16px;
    }

    #content-body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    #content-conversation-title-text {
        color: rgb(3, 22, 23);
        font-family: SBSansDisplay, sans-serif;
        font-size: 34px;
        font-weight: 600;
        line-height: 40px;
        letter-spacing: -0.1px;
        text-align: left;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 0;

        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #content-conversation-info-row {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 28px;
        overflow-x: auto;
        scrollbar-width: none;

        margin-left: calc(-1 * max(5%, 20px));
        width: calc(100% + max(10%, 40px));
    }

    #content-conversation-info-row::-webkit-scrollbar {
        display: none;
    }

    #content-conversation-info-organizer-name-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        background: rgb(255, 255, 255);
        border-radius: 24px;
        justify-content: space-between;
        padding: 20px;
        gap: 13px;

        margin-left: max(5%, 20px);
    }

    #content-conversation-info-organizer-name-icon {
        display: none;
        width: 36px;
        height: 36px;
    }

    #content-conversation-info-organizer-name-icon img {
        width: 36px;
        height: 36px;
    }

    #content-conversation-info-organizer-name-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        justify-content: space-between;
        gap: 4px;
    }

    #content-conversation-info-organizer-name-fullname {
        width: 204px;
        color: rgb(0, 0, 0);
        font-family: SBSansDisplay, sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0.013em;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #content-conversation-info-organizer-name-description {
        color: rgba(3, 22, 23, 0.55);
        font-family: SBSansText, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #content-conversation-info-participants-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        background: rgb(255, 255, 255);
        border-radius: 24px;
        justify-content: space-between;
        padding: 20px 20px 22px 20px;
        gap: 35px;
    }

    #content-conversation-info-participants-icon {
        display: none;
        width: 36px;
        height: 36px;
    }

    #content-conversation-info-participants-icon img {
        width: 36px;
        height: 36px;
    }

    #content-conversation-info-participants-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        justify-content: space-between;
        gap: 4px;
    }

    #content-conversation-info-participants-count {
        width: 204px;
        color: rgb(0, 0, 0);
        font-family: SBSansDisplay, sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0.013em;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #content-conversation-info-participants-description {
        color: rgba(3, 22, 23, 0.55);
        font-family: SBSansText, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #content-conversation-info-amount-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        background: rgb(255, 255, 255);
        border-radius: 24px;
        justify-content: space-between;
        padding: 20px;
        gap: 39px;

        margin-right: calc(max(calc(0.05 * 100% / 1.1), 20px) - 8px);
    }

    #content-conversation-info-personal-amount-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        background: rgb(255, 255, 255);
        border-radius: 24px;
        justify-content: space-between;
        padding: 20px;
        gap: 13px;

        margin-right: calc(max(calc(0.05 * 100% / 1.1), 20px) - 8px);
    }

    #content-conversation-info-amount-icon {
        display: none;
        width: 36px;
        height: 36px;
    }

    #content-conversation-info-amount-icon img {
        width: 36px;
        height: 36px;
    }

    #content-conversation-info-amount-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        justify-content: space-between;
        gap: 4px;
    }

    #content-conversation-info-amount-description {
        color: rgba(3, 22, 23, 0.55);
        font-family: SBSansText, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #content-conversation-info-amount-text {
        width: 204px;
        color: rgb(0, 0, 0);
        font-family: SBSansDisplay, sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0.013em;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #content-conversation-info-stub-item {
        width: 1px;
        height: 1px;
        padding-left: 1px;
    }

    #go-to-conversation-button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        padding: 20px;

        background: #031617;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border-radius: 12px;

        font-family: SBSansDisplay, sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 21px;
        letter-spacing: 0.01em;
        /* hanging-punctuation is currently only supported in Safari. */
        hanging-punctuation: first last;

        color: #FFFFFF;

        text-decoration: none;
    }
    #disabled-go-to-conversation-button {
        margin-top: 28px;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        padding: 20px;

        background: rgba(3, 22, 23, 0.08);
        border-radius: 12px;

        font-family: SBSansDisplay, sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 21px;
        letter-spacing: 0.01em;
        /* hanging-punctuation is currently only supported in Safari. */
        hanging-punctuation: first last;

        color: rgba(38, 38, 38, 0.35);

        text-decoration: none;
    }

    #switch-to-application-frame {
        display: none;
    }

    #alert-frame {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 20px;

        margin-top: 8px;

        background: rgb(255, 255, 255);
        border-radius: 24px;
        padding: 20px;
    }

    #orange-alert {
        height: 40px;
        width: 40px;
    }

    #gray-alert {
        height: 40px;
        width: 40px;
    }

    #alert-text-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }

    #alert-title {
        color: rgb(0, 0, 0);
        font-family: SBSansDisplay, sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0.013em;
        text-align: left;
        padding: 0;
    }

    #alert-description {
        color: rgba(3, 22, 23, 0.55);
        font-family: SBSansText, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: left;
        padding: 0;
    }

    #mobile-distribution-main-frame {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .mobile-delimiter {
        padding: 0;
        height: 1px;
        background: #D9D9D9;
        margin-top: 36px;
        margin-bottom: 36px;
    }

    #mobile-distribution-frame {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        gap: 28px;
    }

    #distribution-description-frame {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0px;
        gap: 8px;
    }

    #distribution-description-p1 {
        font-family: SBSansDisplay, sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 23px;
        /* identical to box height */
        display: flex;
        align-items: center;
        letter-spacing: 0.013em;
        /* hanging-punctuation is currently only supported in Safari. */
        hanging-punctuation: first last;

        /* active/30 */
        color: #031617;
    }

    #distribution-description-p2 {
        font-family: SBSansText, sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        line-height: 22px;
        /* or 147% */
        letter-spacing: -0.3px;

        /* active/20 */
        color: rgba(3, 22, 23, 0.7);
    }


    #distribution-store-buttons-frame {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0px;
        gap: 16px;
        height: 136px;
    }

    #distribution-android-store {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 19px 0px 19px 0px;
        gap: 12px;

        background: rgba(255, 255, 255, 0.9);
        /* shadow/small */
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
        border-radius: 12px;

        height: 22px;

        font-family: SBSansDisplay, sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 15px;
        line-height: 22px;

        /* active/30 */
        color: #031617;
        text-decoration: none;
    }

    #distribution-ios-store {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 19px 0px 19px 0px;
        gap: 12px;

        background: rgba(255, 255, 255, 0.9);
        /* shadow/small */
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
        border-radius: 12px;

        height: 22px;

        font-family: SBSansDisplay, sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 15px;
        line-height: 22px;

        /* active/30 */
        color: #031617;
        text-decoration: none;
    }

    #background {
        display: none;
        z-index: -1;
        position: relative;
        width: 833px;
        height: 816px;
        top: -31px;
        left: 520px;
    }

    #male-with-laptop {
        display: none;
    }

    #man-with-loupe {
        display: none;
    }

    #woman-with-reaction {
        display: none;
    }

    #footer {
        display: none;
    }

    #mobile-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        margin-top: 36px;
        padding-top: 24px;
        padding-bottom: 56px;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
        gap: 28px;


        color: rgba(3, 22, 23, 0.55);
        font-family: SBSansText, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: -0.3px;
        text-align: left;
    }

    #mobile-footer-copyright-text a {
        color: rgba(3, 22, 23, 0.55);
    }

    #cookies-text-frame {
        display: none;
    }

    #cookies-frame {
        display: none;
        z-index: 4;
        bottom: min(1%, 20px);
        position: fixed;
        background: rgb(255, 255, 255);
        border-radius: 16px;
        box-shadow: 0px 4px 40px 10px rgba(0, 0, 0, 0.1);
        /*display: flex;*/
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 16px;
        margin-right: max(5%, 20px);
        gap: 16px;
    }

    #mobile-cookies-text-frame {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
        flex: auto;
        order: 0;
        flex-grow: 1;
        gap: 10px;
    }

    #mobile-cookies-main-text {
        color: rgba(38, 38, 38, 0.7);
        font-family: SBSansText, sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: -0.3px;
        text-align: left;
        padding: 0;
        flex: auto;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    #mobile-cookies-main-text a {
        color: #148F2B;
        text-decoration: none;
    }

    #mobile-cookies-sub-text {
        display: none;
        color: rgba(38, 38, 38, 0.7);
        font-family: SBSansText, sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: -0.3px;
        text-align: left;
        padding: 0;
        flex: auto;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    #mobile-cookies-sub-text a {
        color: rgba(3, 22, 23, 0.55);
    }

    #cookie-more-details-button {
        color: rgba(3, 22, 23, 0.7);
        font-family: SBSansText, sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: -0.3px;
        text-align: left;
        padding: 0px;
        flex: none;
        order: 0;
        flex-grow: 0;
        margin: 0px 2px;
        border: none;
        outline: none;
        cursor: pointer;
        background: #FFFFFF;
        width: fit-content;
        border-bottom: 2px dotted rgba(3, 22, 23, 0.7);
    }

    #cookies-button {
        border: 1px solid rgba(3, 22, 23, 0.7);
        border-radius: 10px;
        box-sizing: border-box;
        padding: 12px;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
        background: #FFFFFF;
        color: rgb(3, 22, 23);
        font-family: SBSansDisplay, sans-serif;
        font-weight: 600;
        font-size: 14px;
        line-height: 17px;
    }
}