@layer addon {
    .templateContent {
        .container {
            grid-template-columns: repeat(12, 1fr);
            @media (max-width: 56em) {
                .inner {
                    grid-column: 2 / span 10;
                }
            }
            @media (--max-fablet) {
                .inner {
                    grid-column: 2 / span 10;
                }
            }
            .inner {
                .embedCode {
                    .ot-sdk-cookie-policy {
                        section {
                            display: flex;
                            flex-wrap: wrap;
                        }
                        .ot-sdk-cookie-policy-title {
                            font-size: var(--l-fontsize) !important;
                            line-height: var(--l-lineheight) !important;
                            color: var(--color2) !important;
                            font-weight: bold !important;
                        }
                        h4.ot-sdk-cookie-policy-group {
                            font-family: var(--font-basic) !important;
                            font-size: var(--m-fontsize) !important;
                            color: var(--color2) !important;
                        }
                        .ot-sdk-cookie-policy-group-desc,
                        #cookie-policy-description {
                            font-family: var(--font-basic) !important;
                            font-size: var(--fontsize) !important;
                            color: var(--font-color) !important;
                            line-height: var(--lineheight) !important;
                        }
                        #cookie-policy-description {
                            margin-bottom: var(--padding) !important;
                        }
                    }

                    section {
                        display: initial;
                    }


                    .ub-style * {
                        font-family: var(--font-basic);
                    }
                    
                    .ub-form-section {
                        display: flex;
                        max-width: 100%;
                        background: none;
                        padding: 0;
                    }
                    
                    .ub-form-question {
                        margin-bottom: 20px;
                    }

                    .ub-portal-title,
                    .ub-form-title {
                        font-size: var(--l-fontsize);
                        line-height: var(--l-lineheight);
                        color: var(--color2);
                    }
                    .ub-portal-login-header,
                    .ub-section-title {
                        color: var(--font-color);
                        font-family: var(--font-sub);
                        font-weight: 500;
                        font-size: var(--m-fontsize);
                        line-height: var(--m-lineheight);
                    }
                    .ub-section-counter {
                        color: var(--color2);
                        font-weight: bold;
                        font-size: var(--fontsize);
                        line-height: var(--lineheight);
                    }
                    .ub-list-item-link:hover {
                        color: var(--color2);
                    }
                    --ubLinkColor: var(--color1);
                    --ubLinkColorHover: var(--color2);
                    --ubMenuItemIconColorActive: var(--color1);
                    --ubMenuItemTextColorActive: var(--color1);

                    .ub-input-label {
                        font-family: var(--font-sub);
                        color: var(--color1);
                        font-size: var(--fontsize);
                        font-weight: 600;
                        margin-bottom: 3px;
                    }
                    input, select, textarea {
                        line-height: 20px;
                        min-height: 20px;
                    }

                    .ub-question-field {
                        display: flex;
                        flex-wrap: wrap;
                        font-family: var(--font-sub);
                        input, select, textarea {
                            font-family: var(--font-sub);
                            border-radius: var(--button-radius);
                            border: 1px solid var(--form-color);
                        }
                        input[type=checkbox] {
                            appearance:initial;
                            border-radius: 5px;
                            margin-right: 10px;
                        }
                        .ub-input-checkbox-label {
                            display: inline;
                        }
                        .ub-field-status {
                            width: 100%;
                        }
                    }

                    .ub-button {
                        position: relative;
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                        column-gap: calc(var(--gutter) / 2);
                        padding: var(--button-padding);
                        border-radius: var(--button-radius);
                        border: 0;
                        font-family: var(--font-basic);
                        font-size: var(--fontsize);
                        line-height: 1;
                        font-weight: 500;
                        text-decoration: none;
                        text-decoration-color: currentcolor;
                        cursor: pointer;
                        transition: var(--transition);
                        background-color: var(--color2);
                        color: var(--color-light);

                        &:hover {
                            @media (hover: hover) {
                                background-color: var(--color1);
                                color: var(--color-light);
                            }
                        }
                    }
                }
            }
        }
    }

    .templateContent.themeColor1 {
        &:first-of-type {
            .container {
                background-color: transparent;
                row-gap: var(--section);
                .inner {
                    text-align: center;
                    align-items: center;
                    grid-column: 2 / span 10;
                    .title {
                        color: var(--color-light);
                        font-size: var(--xl-fontsize);
                        line-height: var(--xl-lineheight);
                    }
                }
            }
        }
    }
    
    .templateContent.themeColor1 + .templateContent.themeColor2 {
        .container {
            border-radius: var(--section-radius) var(--section-radius) 0 0;
            overflow: hidden;
        }
    }
}