﻿:root {
    /*BASIC SET OF COLORS TO EASILY OVERRIDE THE STYLE */
    /*QuickStyleChange: override those colors*/
    --se-headerLogoUrl: url('/images/Redesign/SurveyEngine/peekator-logo.svg');
    --se-headerLogoLoadingHeight: 48px;
    --se-headerLogoLoadingWidth: 160px;
    --se-headerLogoQuestionHeaderHeight: 30px;
    --se-headerLogoQuestionHeaderWidth: 100px;
    --se-primaryColor: #34B78F;
    --se-primaryLightColor: #63C1A1;
    --se-primaryLighterColor: #D8EDE7;
    --se-primaryDarkColor: #3D9878;
    --se-primaryDarkestColor: #1E8473;
    --se-primaryMintColor: #98dbce;
    --se-darkVioletColor: #221C35;
    /*Other colors used*/
    --se-white: #FFF;
    --se-base-100: #F6F7FA;
    --se-base-200: #E9EDF0;
    --se-base-300: #DADFE2;
    --se-base-400: #C1C9CB;
    --se-base-500: #95A4A8;
    --se-base-600: #77858B;
    --se-base-700: #545E61;
    --se-base-800: #3A474D;
    --se-base-900: #28363C;
    --se-dangerColor: #EA2E58;
    --se-dangerLightColor: #F5E4E9;
    /*ENGINE STYLES*/
    --se-whiteButton: var(--se-white);
    --se-question-header-background: var(--se-base-100);
    --se-progress-bar-color: var(--se-primaryColor);
    --se-progress-bar-background-color: var(--se-base-200);
    --se-question-footer-background: var(--se-white);
    --se-question-footer-border-color: var(--se-base-300);
    --se-question-subTextColor: var(--se-base-700);
    --se-question-testEmblemBgColor: var(--se-darkVioletColor);
    /*PrimaryGreenButton*/
    --se-primaryTextColor: var(--se-base-900);
    --se-primaryButtonColor: var(--se-primaryColor);
    --se-primaryColor-hover: var(--se-primaryLightColor);
    --se-primaryColor-active: var(--se-primaryDarkColor);
    --se-primaryColor-focus: var(--se-primaryColor);
    --se-primaryColor-disabled: var(--se-primaryColor);
    /*Transparent button*/
    --se-secondaryColor: inherit;
    --se-secondaryTextColor: var(--se-base-800);
    --se-secondaryColor-hover: var(--se-base-300);
    --se-secondaryColor-active: var(--se-base-400);
    --se-secondaryColor-focus: var(--se-base-100);
    --se-secondaryColor-disabled: inherit;
    --se-question-body-background: var(--se-white);
    /*Danger/Validation/Errors*/
    --se-dangerColorLight: var(--se-dangerLightColor);
    --se-dangerTextColor: var(--se-base-800);
    /*QuestionStyle*/
    --se-questionTextColor: var(--se-base-900);
    /*SingleSelect*/
    --se-select-item-borderColor: var(--se-base-300);
    --se-select-item-hoverBorderColor: var(--se-primaryColor);
    --se-select-item-selectedBackgroundColor: var(--se-primaryLighterColor);
    --se-select-item-textColor: var(--se-base-900);
    /*Multiple Select*/
    --se-multiselect-item-borderColor: var(--se-base-300);
    --se-multiselect-item-hoverBorderColor: var(--se-primaryColor);
    --se-multiselect-item-selectedBackgroundColor: var(--se-primaryLighterColor);
    --se-multiselect-item-textColor: var(--se-base-900);
    --se-checkbox-background-color: var(--se-primaryColor);
    --se-checkbox-icon-color: var(--se-white);
    /*Info screen*/
    --se-infoScreen-text-color: var(--se-base-800);
    /*TextQuestion*/
    /*Multi text Question*/
    --se-text-transcribeBgColor: var(--se-base-100);
    --se-text-transcribeColor: var(--se-base-700);
    --se-text-transcribeElapsedTimeColor: var(--se-base-900);
    --se-multitext-text-color: var(--se-base-900);
    --se-text-transcribeWaveBarBgColor: var(--se-base-400);
    --se-text-transcribeWaveBarActiveBgColor: var(--se-primaryColor);
    --se-text-transcribeSeekerBgColor: var(--se-darkVioletColor);
    /*ConvoAI*/
    --se-convoai-icon-color: var(--se-base-800);
    --se-convoai-user-bubble-color: var(--se-primaryLighterColor);
    --se-convoai-system-bubble-color: var(--se-white);
    --se-convoai-text-color: var(--se-base-800);
    /*Table*/
    --se-table-stepDefaultColor: var(--se-base-200);
    --se-table-stepDoneColor: var(--se-primaryDarkestColor);
    --se-table-stepInProgressColor: var(--se-primaryLighterColor);
    --se-table-stepInProgressBorderColor: var(--se-primaryColor);
    --se-table-headerBackgroudColor: var(--se-base-100);
    --se-table-sectionBackgroundColor: var(--se-base-200);
    --se-table-borderColor: var(--se-base-300);
    --se-table-text-color: var(--se-base-900);
    --se-table-subText-color: var(--se-base-800);
    --se-table-item-hoverBorderColor: var(--se-primaryColor);
    --se-table-item-selectedBackgroundColor: var(--se-primaryLighterColor);
    --se-table-rowHoverColor: var(--se-base-100);
    --se-table-floatingHeaderBorderColor: var(--se-darkVioletColor);
    /*WWYR*/
    --se-wwyr-versusTextColor: var(--se-base-800);
    --se-wwyr-itemBorderColor: var(--se-base-300);
    --se-wwyr-itemActiveBorderColor: var(--se-primaryColor);
    --se-wwyr-itemActiveBackgroundColor: var(--se-primaryLighterColor);
    --se-wwyr-itemTextColor: var(--se-base-900);
    /*NPS*/
    --se-nps-labelColor: var(--se-base-700);
    --se-nps-item-borderColor: var(--se-base-300);
    --se-nps-item-hoverBorderColor: var(--se-primaryColor);
    --se-nps-item-selectedBackgroundColor: var(--se-primaryLighterColor);
    --se-nps-itemTextColor: var(--se-base-900);
    /*NUMERIC*/
    --se-numeric-currencyColor: var(--se-base-600);
    --se-numeric-star-defaultColor: var(--se-white);
    --se-numeric-star-defaultBorderColor: var(--se-base-300);
    --se-numeric-star-hoverColor: var(--se-primaryLighterColor);
    --se-numeric-star-hoverBorderColor: var(--se-primaryColor);
    --se-numeric-star-activeColor: var(--se-primaryColor);
    --se-numeric-star-activeBorderColor: var(--se-primaryColor);
    /*DATE*/
    --se-date-borderColor: var(--se-base-300);
    --se-date-selectedBackgroundColor: var(--se-base-100);
    --se-date-textColor: var(--se-base-900);
    --se-date-answerBorderColor: var(--se-primaryColor);
    --se-date-answerBackgroundColor: var(--se-primaryLighterColor);
    --se-date-answerhoverBackgroundColor: var(--se-base-100);
    /*MAXDIFF*/
    --se-maxdiff-borderColor: var(--se-base-300);
    --se-maxdiff-headerTextColor: var(--se-base-900);
    --se-maxdiff-textColor: var(--se-base-800);
    --se-maxdiff-headerBackgroudColor: var(--se-base-100);
    --se-maxdiff-rowHoverColor: var(--se-base-100);
    --se-maxdiff-item-hoverBorderColor: var(--se-primaryColor);
    --se-maxdiff-item-selectedBackgroundColor: var(--se-primaryLighterColor);
    /*DTG QUADRANT MATRIX*/
    --se-dtg-legendColor: var(--se-base-700);
    --se-dtg-axisColor: var(--se-base-800);
    --se-dtg-graphBorderColor: var(--se-base-300);
    --se-dtg-quadActiveBg: var(--se-primaryLighterColor);
    --se-dtg-quadBorderColor: var(--se-primaryColor);
    /*VW*/
    --se-vw-itemBorderColor: var(--se-base-300);
    --se-vw-itemHeaderBgColor: var(--se-base-100);
    --se-vw-itemTextColor: var(--se-base-900);
    --se-vw-subTextColor: var(--se-base-600);
    --se-vw-sliderInvalidColor: var(--se-base-500);
    /*GG*/
    --se-gg-borderColor: var(--se-base-300);
    --se-gg-textColor: var(--se-base-900);
    --se-gg-headerBgColor: var(--se-base-100);
    --se-gg-item-borderColor: var(--se-base-300);
    --se-gg-item-hoverBorderColor: var(--se-primaryColor);
    --se-gg-item-selectedBackgroundColor: var(--se-primaryLighterColor);
    /*CONJOINT*/
    --se-conjoint-borderColor: var(--se-base-300);
    --se-conjoint-categoryNameColor: var(--se-base-700);
    --se-conjoint-categoryContentColor: var(--se-base-900);
    --se-conjoint-item-hoverBorderColor: var(--se-primaryColor);
    --se-conjoint-item-selectedBackgroundColor: var(--se-primaryLighterColor);
    /*CONSTANT SUM DISTRIBUTE NUMBERS TO ITEMS*/
    --se-constantSum-itemBorderColor: var(--se-base-300);
    --se-constantSum-itemHeaderBgColor: var(--se-base-100);
    --se-constantSum-textColor: var(--se-base-900);
    --se-constantSum-subTextColor: var(--se-base-700);
    --se-constantSum-footerTextColor: var(--se-base-600);
    --se-constantSum-overSpentPointsColor: var(--se-dangerColor);
    /*HEATMAP*/
    --se-heatmap-headingTextColor: var(--se-base-700);
    --se-heatmap-pointColor: var(--se-primaryColor);
    --se-heatmap-pointBgColor: var(--se-white);
    /*EMBEDED URL*/
    --se-embededUrl-borderColor: var(--se-base-300);
    --se-embededUrl-collapseButtonBorderColor: var(--se-base-300);
    --se-embededUrl-collapseButtonBgColor: var(--se-base-100);
    --se-embededUrl-collapseButtonColor: var(--se-base-800);
    /*order ITEMS*/
    --se-orderItems-itemBorderColor: var(--se-base-300);
    --se-orderItems-itemColor: var(--se-base-900);
    --se-orderItems-activeItemBorderColor: var(--se-primaryColor);
    --se-orderItems-activeItemBgColor: var(--se-primaryLighterColor);
    --se-orderItems-dragHandleColor: var(--se-base-500);
    --se-orderItems-rankedItemsTextColor: var(--se-base-700);
    --se-orderItems-emptyItemTemplateBorder: var(--se-base-300);
    --se-orderItems-ddlTextColor: var(--se-base-600);
    /*Other custom styles*/
    --se-scrollbar-color: var(--se-primaryMintColor);
    /*NumericGrid*/
    --se-numTable-totalBgColor: var(--se-primaryLighterColor);
    --se-numTable-borderColor: var(--se-base-300);
    --se-numTable-text-color: var(--se-base-900);
    --se-numTable-headerBackgroudColor: var(--se-base-100);
    --se-numTable-subText-color: var(--se-base-800);
    --se-numTable-rowHoverColor: var(--se-base-100);
    --se-numTable-item-hoverBorderColor: var(--se-primaryColor);
    --se-numTable-item-selectedBackgroundColor: var(--se-primaryLighterColor);
    --se-numTable-combinedTotalBgColor: var(--se-primaryMintColor);
    --se-numTable-totalPerRowSubTextColor: var(--se-base-600);
    --se-numTable-floatingHeaderBorderColor: var(--se-darkVioletColor);
    /*ANIM*/
    --se-blinkAnim-active-bg: var(--se-primaryLighterColor);
    --se-blinkAnim-active-bg-weak: color-mix(in srgb, var(--se-primaryLighterColor) 60%, transparent);
    --se-blinkAnim-active-bg-weaker: color-mix(in srgb, var(--se-primaryLighterColor) 75%, transparent);
    --se-blinkAnim-active-bg-weakest: color-mix(in srgb, var(--se-primaryLighterColor) 90%, transparent);
    --se-blinkAnim: blinkSelectedAnswer 500ms cubic-bezier(0.22, 1, 0.36, 1) both; /*match blink delay in PeekatorQuestionEngineComponentBase */
}

/*PrimaryGreenButton*/
.sePrimaryButton .rz-button {
    background-color: var(--se-primaryButtonColor) !important;
    color: var(--se-whiteButton) !important;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem !important;
}

    .sePrimaryButton .rz-button:active {
        background-color: var(--se-primaryColor-active) !important;
        box-shadow: 0 0 0 1px var(--se-whiteButton), 0 0 0 3px rgba(17, 81, 243, 0.20);
    }

    .sePrimaryButton .rz-button:focus {
        background-color: var(--se-primaryColor-focus) !important;
        box-shadow: 0 0 0 1px var(--se-whiteButton), 0 0 0 3px rgba(17, 81, 243, 0.20);
    }

    .sePrimaryButton .rz-button:disabled {
        background-color: var(--se-primaryColor-disabled) !important;
        opacity: 0.5;
    }

.sePrimaryButtonLight .rz-button {
    background-color: var(--se-primaryLighterColor) !important;
    color: var(--secondary-elm-color) !important;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem !important;
}

    .sePrimaryButtonLight .rz-button:not(.rz-state-disabled):active {
        color: var(--se-white) !important;
        background: var(--se-primaryDarkColor);
        box-shadow: 0 0 0 1px var(--se-white), 0 0 0 3px rgba(17, 81, 243, 0.20);
    }

    .sePrimaryButtonLight .rz-button:not(.rz-state-disabled):focus {
        background-color: var(--se-primaryLighterColor);
        box-shadow: 0 0 0 1px var(--se-white), 0 0 0 3px rgba(17, 81, 243, 0.20);
    }

    .sePrimaryButtonLight .rz-button.rz-state-disabled {
        opacity: 0.5;
        background-color: var(--se-primaryLighterColor);
    }

.seLinkButton .rz-button {
    background-color: inherit !important;
    color: var(--se-base-800) !important;
    padding: 0px;
    border: 0px;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

    .seLinkButton .rz-button .rz-button-text {
        padding: 0px !important;
    }

    .seLinkButton .rz-button:not(.rz-state-disabled):active {
        color: var(--se-primaryColor) !important;
        box-shadow: 0 0 0 1px var(--se-white), 0 0 0 3px rgba(17, 81, 243, 0.20);
        background-image: none;
    }

    .seLinkButton .rz-button:not(.rz-state-disabled):focus {
        color: var(--se-primaryColor) !important;
        box-shadow: 0 0 0 1px var(--se-white), 0 0 0 3px rgba(17, 81, 243, 0.20);
    }

    .seLinkButton .rz-button.rz-state-disabled {
        opacity: 0.5;
    }

/*Secondary transparent button*/
.seSecondaryButton .rz-button {
    background-color: var(--se-secondaryColor) !important;
    color: var(--se-secondaryTextColor) !important;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem !important;
}

    .seSecondaryButton .rz-button:active {
        background-color: var(--se-secondaryColor-active) !important;
        box-shadow: 0 0 0 1px var(--se-whiteButton), 0 0 0 3px rgba(17, 81, 243, 0.20);
    }

    .seSecondaryButton .rz-button:focus {
        background-color: var(--se-secondaryColor-focus) !important;
        box-shadow: 0 0 0 1px var(--se-whiteButton), 0 0 0 3px rgba(17, 81, 243, 0.20);
    }

    .seSecondaryButton .rz-button:disabled {
        background-color: var(--se-secondaryColor-disabled) !important;
        opacity: 0.5;
    }

/*Override button paddings*/
.rz-button .rz-button-text {
    padding: 0px 8px !important;
}

.rz-button .rz-button-box {
    gap: 2px !important;
}

/*Override checkbox color-profile with my variable*/
.rz-chkbox-box.rz-state-active {
    background-color: var(--se-checkbox-background-color) !important;
}

    .rz-chkbox-box.rz-state-active .rzi {
        color: var(--se-checkbox-icon-color) !important;
    }

/*Override radzen slider colors with our varibales*/
.rz-slider-range {
    background-color: var(--se-primaryColor) !important;
    border: var(--se-primaryColor) !important;
}

.rz-slider-handle {
    background-color: var(--se-primaryColor) !important;
}

.rz-slider:not(.rz-state-disabled) .rz-slider-handle:hover, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:active {
    background-color: var(--se-primaryLightColor) !important;
}

/* Default page scrollbar color override*/
:root {
    --rz-scrollbar-color: var(--se-scrollbar-color) !important;
}

/*Override colors on input hovering */
.rz-html-editor:not(.rz-state-disabled):focus,
.rz-html-editor:not(.rz-state-disabled):focus-within,
.rz-html-editor:not(.rz-state-disabled):active {
    border: 1px solid var(--se-primaryColor) !important;
}

.rz-switch:not(.rz-state-disabled):focus,
.rz-switch:not(.rz-state-disabled):focus-within,
.rz-switch:not(.rz-state-disabled):active {
    border: 1px solid var(--se-primaryColor) !important;
}

.rz-numeric:not(.rz-state-disabled):focus,
.rz-numeric:not(.rz-state-disabled):focus-within,
.rz-numeric:not(.rz-state-disabled):active {
    border: 1px solid var(--se-primaryColor) !important;
}

.rz-dropdown:not(.rz-state-disabled):focus,
.rz-dropdown:not(.rz-state-disabled):focus-within,
.rz-dropdown:not(.rz-state-disabled):active {
    border: 1px solid var(--se-primaryColor) !important;
}

.rz-textarea:not(:disabled):not(.rz-state-disabled):not(.invalid):focus,
.rz-textarea:not(:disabled):not(.rz-state-disabled):not(.invalid):focus-within,
.rz-textarea:not(:disabled):not(.rz-state-disabled):not(.invalid):active,
.rz-textbox:not(:disabled):not(.rz-state-disabled):not(.invalid):focus,
.rz-textbox:not(:disabled):not(.rz-state-disabled):not(.invalid):focus-within,
.rz-textbox:not(:disabled):not(.rz-state-disabled):not(.invalid):active,
.rz-datepicker > .rz-inputtext.rz-inputtext:not(:disabled):not(.rz-state-disabled):not(.invalid):focus,
.rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):not(.invalid):focus-within,
.rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):not(.invalid):active {
    border: 1px solid var(--se-primaryColor);
}

/*Datepicker*/

.rz-calendar-view td .rz-state-default.rz-state-focused {
    background-color: var(--se-primaryLighterColor) !important;
}

/*Override textbox hover in case of rz-form-field */
.rz-form-field-content:has(.rz-textbox:focus),
.rz-form-field-content:has(.rz-textbox:focus-within),
.rz-form-field-content:has(.rz-textbox:active) {
    border: 1px solid var(--se-primaryColor) !important;
}

/*override ddl selected color*/
.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight {
    background-color: var(--se-primaryLighterColor) !important;
}

@media screen and (max-width:768px) {
    input,
    select,
    textarea,
    .rz-inputtext,
    .rz-textarea,
    .rz-inputtextarea,
    /* Numeric */
    .rz-numeric input,
    .rz-numeric .rz-inputtext,
    /* Date/Time */
    .rz-datepicker .rz-inputtext,
    .rz-timepicker .rz-inputtext,
    /* Dropdowns / Combo / Autocomplete */
    .rz-dropdown .rz-dropdown-label, /* visible label text */
    .rz-dropdown .rz-inputtext, /* editable dropdown input */
    .rz-dropdown-filter, /* dropdown filter box */
    .rz-autocomplete .rz-inputtext,
    .rz-multiselect .rz-inputtext,
    .rz-multiselect-filter,
    /* Lookup + grid filters/search */
    .rz-lookup-search input,
    .rz-column-filter input,
    .rz-grid-filter input,
    .rz-filterbar input {
        font-size: 16px !important;
    }
}

/* ANIM */

@keyframes blinkSelectedAnswer {
    0% {
        background-color: var(--se-blinkAnim-active-bg);
    }

    20% {
        background-color: var(--se-blinkAnim-active-bg-weak);
    }

    40% {
        background-color: var(--se-blinkAnim-active-bg);
    }

    60% {
        background-color: var(--se-blinkAnim-active-bg-weaker);
    }

    75% {
        background-color: var(--se-blinkAnim-active-bg);
    }

    90% {
        background-color: var(--se-blinkAnim-active-bg-weakest);
    }

    100% {
        background-color: var(--se-blinkAnim-active-bg);
    }
}

@media (hover: hover) and (pointer: fine) {
    .sePrimaryButton .rz-button:hover {
        background-color: var(--se-primaryColor-hover) !important;
    }

    .sePrimaryButtonLight .rz-button:not(.rz-state-disabled):hover {
        color: var(--se-white) !important;
        background-color: var(--se-primaryLightColor) !important;
    }

    .seLinkButton .rz-button:not(.rz-state-disabled):hover {
        color: var(--se-primaryColor) !important;
    }

    .seSecondaryButton .rz-button:hover {
        background-color: var(--se-secondaryColor-hover) !important;
    }

    .rz-switch:not(.rz-state-disabled):hover,
    .rz-dropdown:not(.rz-state-disabled):hover,
    .rz-textarea:not(:disabled):not(.rz-state-disabled):not(.invalid):hover,
    .rz-textbox:not(:disabled):not(.rz-state-disabled):not(.invalid):hover,
    .rz-numeric:not(.rz-state-disabled):hover,
    .rz-html-editor:not(.rz-state-disabled):hover {
        border: 1px solid var(--se-primaryColor) !important;
    }

    .rz-form-field-content:has(.rz-textbox:not(:disabled):not(.rz-state-disabled):not(.invalid):hover) .rz-textbox {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .rz-form-field-content:has(.rz-textbox:hover) {
        border: 1px solid var(--se-primaryColor) !important;
    }

    /*Datepicker*/
    .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):not(.invalid):hover {
        border: 1px solid var(--se-primaryColor) !important;
    }

    .rz-calendar-view td .rz-state-default:hover {
        background-color: var(--se-base-300) !important;
    }

    .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):hover {
        background-color: var(--se-base-300) !important;
    }

    /*override ddl selected color*/

    .rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-autocomplete-items li:hover, .rz-dropdown-items li:hover, .rz-multiselect-items li:hover, .rz-dropdown-item:hover {
        background-color: var(--se-base-300) !important;
    }
}

/* neutralize hover/focus styling on mobiles for checkbox and radios */
@media (hover: none), (pointer: coarse) {
    /* Radios */
    .rz-radiobutton,
    .rz-radiobutton-box,
    .rz-radio-btn {
        outline: none !important;
    }

        .rz-radiobutton:focus,
        .rz-radiobutton:focus-visible,
        .rz-radiobutton-box:focus-within {
            outline: none !important;
            box-shadow: none !important;
        }

        .rz-radiobutton-box:hover:not(.rz-state-disabled):not(.rz-state-active),
        .rz-radio-btn:hover .rz-radiobutton-box:not(.rz-state-disabled):not(.rz-state-active),
        .rz-radio-btn:has(.rz-textbox:is(:hover, :focus, :active)) .rz-radiobutton-box:not(.rz-state-disabled):not(.rz-state-active) {
            border-color: var(--rz-input-border-color, #C1C9CB) !important;
            box-shadow: none !important;
            background-color: var(--rz-input-background-color, #FFF) !important;
        }

        .rz-radiobutton-box:hover::before,
        .rz-radiobutton-box:focus-within::before,
        .rz-radio-btn:hover .rz-radiobutton-box::before {
            display: none !important;
            opacity: 0 !important;
        }

    /* Checkboxes */
    .rz-chkbox,
    .rz-chkbox-box,
    .rz-checkbox {
        outline: none !important;
    }

        .rz-chkbox:focus,
        .rz-chkbox:focus-visible,
        .rz-chkbox-box:focus-within {
            outline: none !important;
            box-shadow: none !important;
        }

        .rz-chkbox-box:hover:not(.rz-state-disabled):not(.rz-state-active),
        .rz-checkbox:hover .rz-chkbox-box:not(.rz-state-disabled):not(.rz-state-active),
        .rz-checkbox:has(.rz-textbox:is(:hover, :focus, :active)) .rz-chkbox-box:not(.rz-state-disabled):not(.rz-state-active) {
            border-color: var(--rz-input-border-color, #C1C9CB) !important;
            box-shadow: none !important;
            background-color: var(--rz-input-background-color, #FFF) !important;
        }

        .rz-chkbox-box:hover::before,
        .rz-chkbox-box:focus-within::before,
        .rz-checkbox:hover .rz-chkbox-box::before {
            display: none !important;
            opacity: 0 !important;
        }

    /* Optional: also null focus ring variables on touch */
    :root {
        --rz-outline-focus: none;
    }
}