<%--
~ Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.
~
~ This software is the property of WSO2 Inc. and its suppliers, if any.
~ Dissemination of any information or reproduction of any material contained
~ herein in any form is strictly forbidden, unless permitted by WSO2 expressly.
~ You may not alter or remove any copyright or other notice from copies of this content."
--%>

<%@ page import="org.json.JSONObject" %>
<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page import="org.apache.commons.text.StringEscapeUtils" %>

<%-- Include tenant context --%>
<jsp:directive.include file="../tenant-resolve.jsp"/>

<%-- Branding Preferences --%>
<jsp:directive.include file="./branding-preferences.jsp"/>

<%
    String externalConnectionButtonBaseBackgroundColor = "";
    String externalConnectionButtonBaseBorderRadius = "";
    String externalConnectionButtonBaseFontColor = "";
    String primaryColor = "";
    String secondaryColor = "";
    String pageBackgroundColor = "";
    String pageFontColor = "";
    String footerBorderColor = "";
    String footerFontColor = "inherit";
    String headingFontColor = "inherit";
    String inputBaseBackgroundColor = "";
    String inputBaseBorderColor = "";
    String inputBaseBorderRadius = "";
    String inputBaseFontColor = "inherit";
    String inputBaseLabelFontColor = "inherit";
    String loginBoxBackgroundColor = "";
    String loginBoxBorderColor = "";
    String loginBoxBorderRadius = "";
    String loginBoxBorderWidth = "";
    String loginBoxFontColor = "inherit";
    String primaryButtonBaseFontColor = "";
    String primaryButtonBaseBorderRadius = "";
    String secondaryButtonBaseFontColor = "";
    String secondaryButtonBaseBorderRadius = "";
    String typographyFontFamily = "";
    String typographyFontFamilyImportURL = "";

    // Preferences response object pointer keys.
    String ELEMENT_STATE_BASE_KEY = "base";
    String BUTTONS_KEY = "buttons";
    String BUTTONS_PRIMARY_KEY = "primary";
    String BUTTONS_SECONDARY_KEY = "secondary";
    String BUTTONS_EXTERNAL_CONNECTION_KEY = "externalConnection";
    String COLORS_KEY = "colors";
    String COLORS_PRIMARY_KEY = "primary";
    String COLORS_SECONDARY_KEY = "secondary";
    String FOOTER_KEY = "footer";
    String LOGIN_BOX_KEY = "loginBox";
    String PAGE_KEY = "page";
    String BACKGROUND_KEY = "background";
    String BACKGROUND_COLOR_KEY = "backgroundColor";
    String BORDER_KEY = "border";
    String BORDER_COLOR_KEY = "borderColor";
    String BORDER_RADIUS_KEY = "borderRadius";
    String BORDER_WIDTH_KEY = "borderWidth";
    String FONT_KEY = "font";
    String FONT_COLOR_KEY = "color";
    String FONT_FAMILY_KEY = "fontFamily";
    String FONT_FAMILY_IMPORT_URL = "importURL";
    String HEADING_KEY = "heading";
    String INPUTS_KEY = "inputs";
    String INPUT_LABELS_KEY = "labels";
    String TYPOGRAPHY_KEY = "typography";

    // Extract the attributes from the `theme` object.
    // If null, check for `colors` object to check if the user is on the deprecated document version.
    if (theme != null) {
        if (theme.has(COLORS_KEY)) {

            JSONObject colorPalette = theme.getJSONObject(COLORS_KEY);

            if (colorPalette != null) {
                if (colorPalette.has(COLORS_PRIMARY_KEY)
                    && !StringUtils.isBlank(colorPalette.getString(COLORS_PRIMARY_KEY))) {

                    primaryColor = colorPalette.getString(COLORS_PRIMARY_KEY);
                }
                if (colorPalette.has(COLORS_SECONDARY_KEY)
                    && !StringUtils.isBlank(colorPalette.getString(COLORS_SECONDARY_KEY))) {

                    secondaryColor = colorPalette.getString(COLORS_SECONDARY_KEY);
                }
            }
        }

        if (theme.has(PAGE_KEY)) {

            JSONObject pageBody = theme.getJSONObject(PAGE_KEY);

            if (pageBody != null) {
                if (pageBody.has(BACKGROUND_KEY)
                    && pageBody.getJSONObject(BACKGROUND_KEY).has(BACKGROUND_COLOR_KEY)
                    && !StringUtils.isBlank(pageBody.getJSONObject(BACKGROUND_KEY).getString(BACKGROUND_COLOR_KEY))) {

                    pageBackgroundColor = pageBody.getJSONObject(BACKGROUND_KEY).getString(BACKGROUND_COLOR_KEY);
                }
                if (pageBody.has(FONT_KEY)
                    && pageBody.getJSONObject(FONT_KEY).has(FONT_COLOR_KEY)
                    && !StringUtils.isBlank(pageBody.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY))) {

                    pageFontColor = pageBody.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY);
                }
            }
        }

        if (theme.has(FOOTER_KEY)) {

            JSONObject footer = theme.getJSONObject(FOOTER_KEY);

            if (footer != null) {
                if (footer.has(BORDER_KEY)
                    && footer.getJSONObject(BORDER_KEY).has(BORDER_COLOR_KEY)
                    && !StringUtils.isBlank(footer.getJSONObject(BORDER_KEY).getString(BORDER_COLOR_KEY))) {

                    footerBorderColor = footer.getJSONObject(BORDER_KEY).getString(BORDER_COLOR_KEY);
                }
                if (footer.has(FONT_KEY)
                    && footer.getJSONObject(FONT_KEY).has(FONT_COLOR_KEY)
                    && !StringUtils.isBlank(footer.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY))) {

                    footerFontColor = footer.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY);
                }
            }
        }

        if (theme.has(TYPOGRAPHY_KEY)) {

            JSONObject typography = theme.getJSONObject(TYPOGRAPHY_KEY);

            if (typography != null) {
                if (typography.has(FONT_KEY)) {
                    if (typography.getJSONObject(FONT_KEY).has(FONT_FAMILY_KEY)
                        && !StringUtils.isBlank(typography.getJSONObject(FONT_KEY).getString(FONT_FAMILY_KEY))) {

                        typographyFontFamily = typography.getJSONObject(FONT_KEY).getString(FONT_FAMILY_KEY);
                    }
                    if (typography.getJSONObject(FONT_KEY).has(FONT_FAMILY_IMPORT_URL)
                        && !StringUtils.isBlank(typography.getJSONObject(FONT_KEY).getString(FONT_FAMILY_IMPORT_URL))) {

                        typographyFontFamilyImportURL = typography.getJSONObject(FONT_KEY).getString(FONT_FAMILY_IMPORT_URL);
                    }
                }
                if (typography.has(HEADING_KEY)
                    && typography.getJSONObject(HEADING_KEY).has(FONT_KEY)
                    && typography.getJSONObject(HEADING_KEY).getJSONObject(FONT_KEY).has(FONT_COLOR_KEY)
                    && !StringUtils.isBlank(typography.getJSONObject(HEADING_KEY).getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY))) {

                    headingFontColor = typography.getJSONObject(HEADING_KEY).getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY);
                }
            }
        }

        if (theme.has(BUTTONS_KEY)) {

            JSONObject buttons = theme.getJSONObject(BUTTONS_KEY);

            if (buttons != null) {
                if (buttons.has(BUTTONS_PRIMARY_KEY)) {

                    JSONObject primaryButton = buttons.getJSONObject(BUTTONS_PRIMARY_KEY);

                    if (primaryButton.has(ELEMENT_STATE_BASE_KEY)) {

                        JSONObject primaryButtonBase = primaryButton.getJSONObject(ELEMENT_STATE_BASE_KEY);

                        if (primaryButtonBase.has(BORDER_KEY)
                            && primaryButtonBase.getJSONObject(BORDER_KEY).has(BORDER_RADIUS_KEY)
                            && !StringUtils.isBlank(primaryButtonBase.getJSONObject(BORDER_KEY).getString(BORDER_RADIUS_KEY))) {

                            primaryButtonBaseBorderRadius = primaryButtonBase.getJSONObject(BORDER_KEY).getString(BORDER_RADIUS_KEY);
                        }
                        if (primaryButtonBase.has(FONT_KEY)
                            && primaryButtonBase.getJSONObject(FONT_KEY).has(FONT_COLOR_KEY)
                            && !StringUtils.isBlank(primaryButtonBase.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY))) {

                            primaryButtonBaseFontColor = primaryButtonBase.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY);
                        }
                    }
                }
                if (buttons.has(BUTTONS_SECONDARY_KEY)) {

                    JSONObject secondaryButton = buttons.getJSONObject(BUTTONS_SECONDARY_KEY);

                    if (secondaryButton.has(ELEMENT_STATE_BASE_KEY)) {

                        JSONObject secondaryButtonBase = secondaryButton.getJSONObject(ELEMENT_STATE_BASE_KEY);

                        if (secondaryButtonBase.has(BORDER_KEY)
                            && secondaryButtonBase.getJSONObject(BORDER_KEY).has(BORDER_RADIUS_KEY)
                            && !StringUtils.isBlank(secondaryButtonBase.getJSONObject(BORDER_KEY).getString(BORDER_RADIUS_KEY))) {

                            secondaryButtonBaseBorderRadius = secondaryButtonBase.getJSONObject(BORDER_KEY).getString(BORDER_RADIUS_KEY);
                        }
                        if (secondaryButtonBase.has(FONT_KEY)
                            && secondaryButtonBase.getJSONObject(FONT_KEY).has(FONT_COLOR_KEY)
                            && !StringUtils.isBlank(secondaryButtonBase.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY))) {

                            secondaryButtonBaseFontColor = secondaryButtonBase.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY);
                        }
                    }
                }
                if (buttons.has(BUTTONS_EXTERNAL_CONNECTION_KEY)) {

                    JSONObject externalConnectionButton = buttons.getJSONObject(BUTTONS_EXTERNAL_CONNECTION_KEY);

                    if (externalConnectionButton.has(ELEMENT_STATE_BASE_KEY)) {

                        JSONObject externalConnectionButtonBase = externalConnectionButton.getJSONObject(ELEMENT_STATE_BASE_KEY);

                        if (externalConnectionButtonBase.has(BACKGROUND_KEY)
                            && externalConnectionButtonBase.getJSONObject(BACKGROUND_KEY).has(BACKGROUND_COLOR_KEY)
                            && !StringUtils.isBlank(externalConnectionButtonBase.getJSONObject(BACKGROUND_KEY).getString(BACKGROUND_COLOR_KEY))) {

                            externalConnectionButtonBaseBackgroundColor = externalConnectionButtonBase.getJSONObject(BACKGROUND_KEY).getString(BACKGROUND_COLOR_KEY);
                        }
                        if (externalConnectionButtonBase.has(BORDER_KEY)
                            && externalConnectionButtonBase.getJSONObject(BORDER_KEY).has(BORDER_RADIUS_KEY)
                            && !StringUtils.isBlank(externalConnectionButtonBase.getJSONObject(BORDER_KEY).getString(BORDER_RADIUS_KEY))) {

                            externalConnectionButtonBaseBorderRadius = externalConnectionButtonBase.getJSONObject(BORDER_KEY).getString(BORDER_RADIUS_KEY);
                        }
                        if (externalConnectionButtonBase.has(FONT_KEY)
                            && externalConnectionButtonBase.getJSONObject(FONT_KEY).has(FONT_COLOR_KEY)
                            && !StringUtils.isBlank(externalConnectionButtonBase.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY))) {

                            externalConnectionButtonBaseFontColor = externalConnectionButtonBase.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY);
                        }
                    }
                }
            }
        }

        if (theme.has(LOGIN_BOX_KEY)) {

            JSONObject loginBox = theme.getJSONObject(LOGIN_BOX_KEY);

            if (loginBox != null) {
                if (loginBox.has(BACKGROUND_KEY)
                    && loginBox.getJSONObject(BACKGROUND_KEY).has(BACKGROUND_COLOR_KEY)
                    && !StringUtils.isBlank(loginBox.getJSONObject(BACKGROUND_KEY).getString(BACKGROUND_COLOR_KEY))) {

                    loginBoxBackgroundColor = loginBox.getJSONObject(BACKGROUND_KEY).getString(BACKGROUND_COLOR_KEY);
                }
                if (loginBox.has(BORDER_KEY)) {
                    if (loginBox.getJSONObject(BORDER_KEY).has(BORDER_COLOR_KEY)
                        && !StringUtils.isBlank(loginBox.getJSONObject(BORDER_KEY).getString(BORDER_COLOR_KEY))) {

                        loginBoxBorderColor = loginBox.getJSONObject(BORDER_KEY).getString(BORDER_COLOR_KEY);
                    }
                    if (loginBox.getJSONObject(BORDER_KEY).has(BORDER_RADIUS_KEY)
                        && !StringUtils.isBlank(loginBox.getJSONObject(BORDER_KEY).getString(BORDER_RADIUS_KEY))) {

                        loginBoxBorderRadius = loginBox.getJSONObject(BORDER_KEY).getString(BORDER_RADIUS_KEY);
                    }
                    if (loginBox.getJSONObject(BORDER_KEY).has(BORDER_WIDTH_KEY)
                        && !StringUtils.isBlank(loginBox.getJSONObject(BORDER_KEY).getString(BORDER_WIDTH_KEY))) {

                        loginBoxBorderWidth = loginBox.getJSONObject(BORDER_KEY).getString(BORDER_WIDTH_KEY);
                    }
                }
                if (loginBox.has(FONT_KEY)
                    && loginBox.getJSONObject(FONT_KEY).has(FONT_COLOR_KEY)
                    && !StringUtils.isBlank(loginBox.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY))) {

                    loginBoxFontColor = loginBox.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY);
                }
            }
        }

        if (theme.has(INPUTS_KEY)) {

            JSONObject inputs = theme.getJSONObject(INPUTS_KEY);

            if (inputs.has(ELEMENT_STATE_BASE_KEY)) {

                JSONObject inputsBase = inputs.getJSONObject(ELEMENT_STATE_BASE_KEY);

                if (inputsBase.has(BACKGROUND_KEY)
                    && inputsBase.getJSONObject(BACKGROUND_KEY).has(BACKGROUND_COLOR_KEY)
                    && !StringUtils.isBlank(inputsBase.getJSONObject(BACKGROUND_KEY).getString(BACKGROUND_COLOR_KEY))) {

                    inputBaseBackgroundColor = inputsBase.getJSONObject(BACKGROUND_KEY).getString(BACKGROUND_COLOR_KEY);
                }
                if (inputsBase.has(BORDER_KEY)) {
                    if (inputsBase.getJSONObject(BORDER_KEY).has(BORDER_COLOR_KEY)
                        && !StringUtils.isBlank(inputsBase.getJSONObject(BORDER_KEY).getString(BORDER_COLOR_KEY))) {

                        inputBaseBorderColor = inputsBase.getJSONObject(BORDER_KEY).getString(BORDER_COLOR_KEY);
                    }
                    if (inputsBase.getJSONObject(BORDER_KEY).has(BORDER_RADIUS_KEY)
                        && !StringUtils.isBlank(inputsBase.getJSONObject(BORDER_KEY).getString(BORDER_RADIUS_KEY))) {

                        inputBaseBorderRadius = inputsBase.getJSONObject(BORDER_KEY).getString(BORDER_RADIUS_KEY);
                    }
                }
                if (inputsBase.has(FONT_KEY)
                    && inputsBase.getJSONObject(FONT_KEY).has(FONT_COLOR_KEY)
                    && !StringUtils.isBlank(inputsBase.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY))) {

                    inputBaseFontColor = inputsBase.getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY);
                }
                if (inputsBase.has(INPUT_LABELS_KEY)
                    && inputsBase.getJSONObject(INPUT_LABELS_KEY).has(FONT_KEY)
                    && inputsBase.getJSONObject(INPUT_LABELS_KEY).getJSONObject(FONT_KEY).has(FONT_COLOR_KEY)
                    && !StringUtils.isBlank(inputsBase.getJSONObject(INPUT_LABELS_KEY).getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY))) {

                    inputBaseLabelFontColor = inputsBase.getJSONObject(INPUT_LABELS_KEY).getJSONObject(FONT_KEY).getString(FONT_COLOR_KEY);
                }
            }
        }
    } else if (colors != null) {
        if (colors.has("primary") && !StringUtils.isBlank(colors.getString("primary"))) {
            primaryColor = colors.getString("primary");
        }
    }
%>

<% if (theme != null || !StringUtils.isBlank(primaryColor)) { %>

<%
    // `inherit` doesn't work properly when the input is autofilled.
    // So we need to add an explicit fallback.
    if (StringUtils.equals(inputBaseFontColor, "inherit")) {
        if (StringUtils.equals(loginBoxFontColor, "inherit")) {
            inputBaseFontColor = pageFontColor;
        } else {
            inputBaseFontColor = loginBoxFontColor;
        }
    }
%>

<style type="text/css">

    <%
        if (!StringUtils.isBlank(typographyFontFamilyImportURL)) {
    %>
        @import url("<%= typographyFontFamilyImportURL %>");
    <%
        }
    %>
    :root {
        --asg-primary-color: <%= StringEscapeUtils.escapeHtml4(primaryColor) %>;
        --asg-secondary-color: <%= StringEscapeUtils.escapeHtml4(secondaryColor) %>;
        --asg-primary-background-color: <%= StringEscapeUtils.escapeHtml4(pageBackgroundColor) %>;
        --asg-primary-text-color: <%= StringEscapeUtils.escapeHtml4(pageFontColor) %>;
        --asg-footer-text-color: <%= StringEscapeUtils.escapeHtml4(footerFontColor) %>;
        --asg-footer-border-color: <%= StringEscapeUtils.escapeHtml4(footerBorderColor) %>;
        --asg-primary-font-family: <%= StringEscapeUtils.escapeHtml4(typographyFontFamily) %>;
        --asg-heading-text-color: <%= StringEscapeUtils.escapeHtml4(headingFontColor) %>;
        --asg-primary-button-base-text-color: <%= StringEscapeUtils.escapeHtml4(primaryButtonBaseFontColor) %>;
        --asg-primary-button-base-border-radius: <%= StringEscapeUtils.escapeHtml4(primaryButtonBaseBorderRadius) %>;
        --asg-secondary-button-base-text-color: <%= StringEscapeUtils.escapeHtml4(secondaryButtonBaseFontColor) %>;
        --asg-secondary-button-base-border-radius: <%= StringEscapeUtils.escapeHtml4(secondaryButtonBaseBorderRadius) %>;
        --asg-external-login-button-base-background-color: <%= StringEscapeUtils.escapeHtml4(externalConnectionButtonBaseBackgroundColor) %>;
        --asg-external-login-button-base-text-color: <%= StringEscapeUtils.escapeHtml4(externalConnectionButtonBaseFontColor) %>;
        --asg-external-login-button-base-border-radius: <%= StringEscapeUtils.escapeHtml4(externalConnectionButtonBaseBorderRadius) %>;
        --asg-login-box-background-color: <%= StringEscapeUtils.escapeHtml4(loginBoxBackgroundColor) %>;
        --asg-login-box-border-color: <%= StringEscapeUtils.escapeHtml4(loginBoxBorderColor) %>;
        --asg-login-box-border-width: <%= StringEscapeUtils.escapeHtml4(loginBoxBorderWidth) %>;
        --asg-login-box-border-style: solid;
        --asg-login-box-border-radius: <%= StringEscapeUtils.escapeHtml4(loginBoxBorderRadius) %>;
        --asg-login-box-text-color: <%= StringEscapeUtils.escapeHtml4(loginBoxFontColor) %>;
        --asg-input-field-base-text-color: <%= StringEscapeUtils.escapeHtml4(inputBaseFontColor) %>;
        --asg-input-field-base-background-color: <%= StringEscapeUtils.escapeHtml4(inputBaseBackgroundColor) %>;
        --asg-input-field-base-label-text-color: <%= StringEscapeUtils.escapeHtml4(inputBaseLabelFontColor) %>;
        --asg-input-field-base-border-color: <%= StringEscapeUtils.escapeHtml4(inputBaseBorderColor) %>;
        --asg-input-field-base-border-radius: <%= StringEscapeUtils.escapeHtml4(inputBaseBorderRadius) %>;
        --language-selector-background-color: <%= StringEscapeUtils.escapeHtml4(pageBackgroundColor) %> !important;
        --language-selector-text-color: <%= StringEscapeUtils.escapeHtml4(pageFontColor) %> !important;
        --language-selector-border-color: <%= StringEscapeUtils.escapeHtml4(primaryColor) %> !important;
    }

    /*-----------------------------
                Page
    ------------------------------*/

    /* Default Page */
    .login-portal.layout {
        color: var(--asg-primary-text-color);
        background: var(--asg-primary-background-color);
    }

    /* Default Page with Blurred Patch */
    .login-portal.layout .page-wrapper {
        background: var(--asg-primary-background-color);
    }

    /* Error, Success Pages */
    .login-portal.layout .page-wrapper.success-page, .login-portal.layout .page-wrapper.error-page {
        background: var(--asg-primary-background-color);
    }

    /*-----------------------------
                Typography
    ------------------------------*/

    .ui.header {
        color: var(--asg-heading-text-color);
    }

    /* Primary Text */
    .text-typography.primary {
        color: var(--asg-primary-color);
    }

    /*-----------------------------
                Icons
    ------------------------------*/

    /* Primary Icons */
    i.icon.primary {
        color: var(--asg-primary-color);
    }

    /*-----------------------------
                Buttons
    ------------------------------*/

    /* Primary */
    .ui.primary.button {
        background: var(--asg-primary-color);
        color: var(--asg-primary-button-base-text-color);
        border-radius: var(--asg-primary-button-base-border-radius);
    }

    .ui.primary.button:hover, .ui.primary.button:focus, .ui.primary.button:active {
        background: var(--asg-primary-color);
        filter: brightness(0.85);
    }

    /* Secondary */
    .ui.secondary.button {
        background: var(--asg-secondary-color);
        color: var(--asg-secondary-button-base-text-color);
        border-radius: var(--asg-secondary-button-base-border-radius);
    }

    .ui.secondary.button:hover, .ui.secondary.button:focus, .ui.secondary.button:active {
        background: var(--asg-secondary-color);
        filter: brightness(0.85);
    }

    /* External Connections */
    .login-portal.layout .center-segment>.ui.container>.ui.segment .social-login .ui.button {
        background: var(--asg-external-login-button-base-background-color);
        color: var(--asg-external-login-button-base-text-color);
        border-radius: var(--asg-external-login-button-base-border-radius);
    }

    .login-portal.layout .center-segment>.ui.container>.ui.segment .social-login .ui.button:hover,
    .login-portal.layout .center-segment>.ui.container>.ui.segment .social-login .ui.button:focus,
    .login-portal.layout .center-segment>.ui.container>.ui.segment .social-login .ui.button:active {
        background: var(--asg-external-login-button-base-background-color);
        filter: brightness(0.85);
    }

    /*-----------------------------
                Inputs
    ------------------------------*/

    /* Input */
    .ui.form input:not([type]), .ui.form input[type=date], .ui.form input[type=datetime-local], .ui.form input[type=email], .ui.form input[type=file], .ui.form input[type=number], .ui.form input[type=password], .ui.form input[type=search], .ui.form input[type=tel], .ui.form input[type=text], .ui.form input[type=time], .ui.form input[type=url],
    .ui.form .field.error input:not([type]), .ui.form .field.error input[type=date], .ui.form .field.error input[type=datetime-local], .ui.form .field.error input[type=email], .ui.form .field.error input[type=file], .ui.form .field.error input[type=number], .ui.form .field.error input[type=password], .ui.form .field.error input[type=search], .ui.form .field.error input[type=tel], .ui.form .field.error input[type=text], .ui.form .field.error input[type=time], .ui.form .field.error input[type=url], .ui.form .field.error select, .ui.form .field.error textarea, .ui.form .fields.error .field input:not([type]), .ui.form .fields.error .field input[type=date], .ui.form .fields.error .field input[type=datetime-local], .ui.form .fields.error .field input[type=email], .ui.form .fields.error .field input[type=file], .ui.form .fields.error .field input[type=number], .ui.form .fields.error .field input[type=password], .ui.form .fields.error .field input[type=search], .ui.form .fields.error .field input[type=tel], .ui.form .fields.error .field input[type=text], .ui.form .fields.error .field input[type=time], .ui.form .fields.error .field input[type=url], .ui.form .fields.error .field select, .ui.form .fields.error .field textarea,
    .ui.form .field.error input:not([type]):focus, .ui.form .field.error input[type=date]:focus, .ui.form .field.error input[type=datetime-local]:focus, .ui.form .field.error input[type=email]:focus, .ui.form .field.error input[type=file]:focus, .ui.form .field.error input[type=number]:focus, .ui.form .field.error input[type=password]:focus, .ui.form .field.error input[type=search]:focus, .ui.form .field.error input[type=tel]:focus, .ui.form .field.error input[type=text]:focus, .ui.form .field.error input[type=time]:focus, .ui.form .field.error input[type=url]:focus, .ui.form .field.error select:focus, .ui.form .field.error textarea:focus,
    .ui.form input:not([type]):focus, .ui.form input[type=date]:focus, .ui.form input[type=datetime-local]:focus, .ui.form input[type=email]:focus, .ui.form input[type=file]:focus, .ui.form input[type=number]:focus, .ui.form input[type=password]:focus, .ui.form input[type=search]:focus, .ui.form input[type=tel]:focus, .ui.form input[type=text]:focus, .ui.form input[type=time]:focus, .ui.form input[type=url]:focus,
    .ui.input.addon-wrapper,
    .ui.input.addon-wrapper:focus-within,
    .ui.selection.dropdown,
    .ui.selection.dropdown:hover {
        color: var(--asg-input-field-base-text-color);
        background: var(--asg-input-field-base-background-color);
        border-color: var(--asg-input-field-base-border-color);
        border-radius: var(--asg-input-field-base-border-radius);
    }

    /* Autofilled */
    .ui.form .field.field input:-webkit-autofill {
        color: var(--asg-input-field-base-text-color) !important;
        -webkit-text-fill-color: var(--asg-input-field-base-text-color) !important;
        box-shadow: 0 0 0 100px var(--asg-input-field-base-background-color) inset!important;
        -webkit-box-shadow: 0 0 0 100px var(--asg-input-field-base-background-color) inset!important;
        border-color: var(--asg-input-field-base-border-color) !important;
    }

    /* Autofilled:Focus */
    .ui.form .field.field input:-webkit-autofill:focus {
        color: var(--asg-input-field-base-text-color) !important;
        -webkit-text-fill-color: var(--asg-input-field-base-text-color) !important;
        box-shadow: 0 0 0 100px var(--asg-input-field-base-background-color) inset!important;
        -webkit-box-shadow: 0 0 0 100px var(--asg-input-field-base-background-color) inset!important;
        border-color: var(--asg-input-field-base-border-color) !important;
    }

    /* Autofilled:Error */
    .ui.form .error.error input:-webkit-autofill {
        color: var(--asg-input-field-base-text-color) !important;
        -webkit-text-fill-color: var(--asg-input-field-base-text-color) !important;
        box-shadow: 0 0 0 100px var(--asg-input-field-base-background-color) inset!important;
        -webkit-box-shadow: 0 0 0 100px var(--asg-input-field-base-background-color) inset!important;
        border-color: var(--asg-input-field-base-border-color) !important;
    }

    /* Input Labels */
    .ui.form .field>label {
        color: var(--asg-input-field-base-label-text-color);
    }

    /* Input Addon Icons */
    .ui.form .field .ui.input {
        color: var(--asg-input-field-base-text-color);
    }

    /* Dropdowns */
    .ui.selection.active.dropdown .menu {
        background: var(--asg-input-field-base-border-color);
    }

    .ui.selection.dropdown .menu>.item {
        color: var(--asg-input-field-base-text-color);
        background: var(--asg-input-field-base-background-color);
        border-color: var(--asg-input-field-base-border-color);
    }

    /* Checkbox */
    .ui.checkbox .box:before, .ui.checkbox label:before {
        background: var(--asg-input-field-base-background-color);
        border-color: var(--asg-input-field-base-border-color);
    }

    .ui.checkbox input:focus~.box:before, .ui.checkbox input:focus~label:before {
        background: var(--asg-input-field-base-background-color);
        border-color: var(--asg-input-field-base-border-color);
    }

    .ui.checkbox input:checked:focus~.box:before, .ui.checkbox input:checked:focus~label:before, .ui.checkbox input:not([type=radio]):indeterminate:focus~.box:before, .ui.checkbox input:not([type=radio]):indeterminate:focus~label:before {
        background: var(--asg-input-field-base-background-color);
        border-color: var(--asg-input-field-base-border-color);
    }

    .ui.checkbox input:checked~label:before {
        background: var(--asg-input-field-base-background-color);
        border-color: var(--asg-input-field-base-border-color);
    }

    .ui.checkbox .box:hover::before, .ui.checkbox label:hover::before {
        background: var(--asg-input-field-base-background-color);
        border-color: var(--asg-input-field-base-border-color);
    }

    .ui.checkbox input:checked~.box:after, .ui.checkbox input:checked~label:after {
        color: var(--asg-input-field-base-text-color);
    }

    .ui.checkbox input:checked:focus~.box:after, .ui.checkbox input:checked:focus~label:after, .ui.checkbox input:not([type=radio]):indeterminate:focus~.box:after, .ui.checkbox input:not([type=radio]):indeterminate:focus~label:after {
        color: var(--asg-input-field-base-text-color);
    }

    /*-----------------------------
            Login Box
    ------------------------------*/

    .login-portal.layout .center-segment>.ui.container>.ui.segment {
        background: var(--asg-login-box-background-color);
        border-width: var(--asg-login-box-border-width) !important;
        border-color: var(--asg-login-box-border-color);
        border-style: var(--asg-login-box-border-style);
        border-radius: var(--asg-login-box-border-radius);
        color: var(--asg-login-box-text-color);
    }

    .login-portal.layout .external-link-container.text-small {
       color: var(--asg-login-box-text-color);
    }

    .login-portal.layout .center-segment>.ui.container>.ui.segment .ui.checkbox label,
    .login-portal.layout .center-segment>.ui.container>.ui.segment .ui.checkbox+label {
        color: var(--asg-input-field-base-label-text-color);
    }

    .login-portal.layout .center-segment>.ui.container> .ui.bottom.attached.message {
        border-bottom-right-radius: var(--asg-login-box-border-radius);
        border-bottom-left-radius: var(--asg-login-box-border-radius);
    }

    /* Login Box Links */
    .login-portal.layout .clickable-link {
        color: var(--asg-primary-color);
    }

    /* Misc Text */
    .ui.divider {
        color: var(--asg-login-box-text-color);
    }

    .login-portal.layout .portal-tagline-description {
        color: var(--asg-login-box-text-color);
    }

    .login-portal.layout .center-segment>.ui.container>.ui.segment .ui.list .list > .item .header, .ui.list > .item .header {
        color: var(--asg-login-box-text-color);
    }

    .login-portal.layout .center-segment>.ui.container>.ui.segment .login-portal-app-consent-request {
        color: var(--asg-login-box-text-color);
    }

    /*-----------------------------
         Login Screen Footer
    ------------------------------*/

    .login-portal.layout .footer {
        border-color: var(--asg-footer-border-color);
    }

    .login-portal.layout .footer .ui.text.menu .item {
        color: var(--asg-footer-text-color);
    }

    .login-portal.layout .footer .ui.text.menu .item:not(.no-hover):hover {
        color: var(--asg-primary-color);
    }

    /*-----------------------------
            Anchor Tags
    ------------------------------*/

    /* Anchor Tags */
    a {
        color: var(--asg-primary-color);
    }

    a:hover, a:focus, a:active {
        color: var(--asg-primary-color);
        filter: brightness(0.85);
    }
    /*-----------------------------
            Fonts
    ------------------------------*/

    /* Body */
    body {
        font-family: var(--asg-primary-font-family);
    }

    /* Headings */
    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: var(--asg-primary-font-family);
    }

    .ui.header {
        font-family: var(--asg-primary-font-family);
    }

    /* Inputs */
    .ui.form input:not([type]),
    .ui.form input[type="date"],
    .ui.form input[type="datetime-local"],
    .ui.form input[type="email"],
    .ui.form input[type="number"],
    .ui.form input[type="password"],
    .ui.form input[type="search"],
    .ui.form input[type="tel"],
    .ui.form input[type="time"],
    .ui.form input[type="text"],
    .ui.form input[type="file"],
    .ui.form input[type="url"] {

        font-family: var(--asg-primary-font-family);
    }

    .ui.input > input {
        font-family: var(--asg-primary-font-family);
    }

    /* Search */
    .ui.search > .results .result .title {
        font-family: var(--asg-primary-font-family);
    }

    .ui.search > .results > .message .header {
        font-family: var(--asg-primary-font-family);
    }

    .ui.category.search > .results .category > .name {
        font-family: var(--asg-primary-font-family);
    }

    /* Menus */
    .ui.menu {
        font-family: var(--asg-primary-font-family);
    }

    /* Message */
    .ui.message .header {
        font-family: var(--asg-primary-font-family);
    }

    /* Table */
    .ui.sortable.table thead th:after {
        font-family: var(--asg-primary-font-family);
    }

    /* Button */
    .ui.button {
        font-family: var(--asg-primary-font-family);
    }

    /* Text Container */
    .ui.text.container {
        font-family: var(--asg-primary-font-family);
    }

    /* List */
    .ui.list .list > .item .header,
    .ui.list > .item .header {
        font-family: var(--asg-primary-font-family);
    }

    /* Steps */
    .ui.steps .step .title {
        font-family: var(--asg-primary-font-family);
    }

    /* Accordion */
    .ui.accordion .title:not(.ui) {
        font-family: var(--asg-primary-font-family);
    }

    /* Modal */
    .ui.modal > .header {
        font-family: var(--asg-primary-font-family);
    }

    /* Popup */
    .ui.popup > .header {
        font-family: var(--asg-primary-font-family);
    }

    /* Cards */
    .ui.cards > .card > .content > .header,
    .ui.card > .content > .header {
        font-family: var(--asg-primary-font-family);
    }

    /* Items */
    .ui.items > .item > .content > .header {
        font-family: var(--asg-primary-font-family);
    }

    /* Statistics */
    .ui.statistics .statistic > .value,
    .ui.statistic > .value {
        font-family: var(--asg-primary-font-family);
    }
</style>
<% } %>
