@import "shared.css";

@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: 100 700;
    src: url("../fonts/matoutlined.woff2") format("woff2");
}

:root {
    --rz-icon-font-family: "Material Symbols Outlined";
}

html,
body {
    font-family: "Nunito Sans", sans-serif;
    background-color: transparent;
}

.rz-my-12.rz-mx-auto.elen-overlay {
    background: var(--background-widget, #000);
}

.rz-selectbutton .rz-button.rz-button-lg.rz-state-active {
    background-color: var(--colors-success-success-container-2);
    color: var(--colors-success-on-success-container-2);
}

.rz-selectbutton {
    color: var(--colors-primary-on-primary-container);
}

.rz-selectbutton .rz-button.rz-button-lg {
    border-color: var(--colors-outlines-outline-inverted);
}

.rz-selectbutton .rz-button.rz-button-lg {
    color: var(--colors-primary-on-primary-container);
}

.rz-button.rz-primary.rz-shade-default.ep-action-button {
    background-color: var(--widget-button-bg, #100b26);
    color: #fff;
}

.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(
    :active
  ) {
    background-color: transparent !important;
}

.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active {
    background-color: transparent !important;
}

.rz-button.rz-primary.rz-shade-default {
    background-color: transparent;
    color: var(--colors-primary-on-primary);
}

.rz-splitbutton:hover {
    border: 1px solid var(--colors-outlines-outline-dark);
}


.rz-splitbutton {
    border: 1px solid var(--colors-outlines-outline);
    border-radius: 24px;

    .rz-button.rz-variant-outlined.rz-primary.rz-shade-default {
        box-shadow: none;
    }

    .rz-button.rz-variant-outlined.rz-primary.rz-shade-default:active {
        box-shadow: none;
    }

    .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover:not(:active) {
        background-color: transparent;
    }

    .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):active {
        background-color: transparent;
    }


}

.rz-chkbox-box .rzi {
    border-radius: 4px;
}

.valid.modified:not([type="checkbox"]) {
    outline: none !important;
}

.rz-spinner, .rz-textarea {
    outline: none !important;
    border-radius: 4px;
    border: 1px solid var(--colors-outlines-outline-variant, #DBDADE);
    background: var(--colors-surface-surface, #FFF);

    > input {
        outline: none !important;
    }
}

.rz-switch.valid.rz-switch-checked .rz-switch-circle::before {
    background-color: var(--colors-primary-on-primary-container) !important;
}

.rz-switch.rz-switch-checked .rz-switch-circle {
    background: var(--colors-primary-primary, #0D0B22);
}

.rz-switch .rz-switch-circle {
    background: var(--colors-surface-on-surface-variant, #6E6D7A);
}

.rz-switch {
    height: 1.4rem;
    width: 2.4rem;
}

.rz-alert {
    max-width: 380px;
}

.rz-switch .rz-switch-circle:before {
    left: 2px;
}

.rz-switch.rz-switch-checked .rz-switch-circle:before {
    transform: translateX(0.9rem);
}

.rz-spinner:not(:disabled):not(.rz-state-disabled):hover {
    box-shadow: none;
    border: 1px solid var(--colors-outlines-outline-dark);
}

.rz-textarea:not(:disabled):not(.rz-state-disabled):hover {
    box-shadow: none;
    border: 1px solid var(--colors-outlines-outline-dark);
}

.rz-textarea:not(:disabled):not(.rz-state-disabled):focus {
    box-shadow: none !important;
    border-radius: 4px;
    border: 1px solid var(--colors-outlines-outline-dark, #0D0B22);
}

.rz-spinner:not(:disabled):not(.rz-state-disabled):focus {
    box-shadow: none !important;
    border-radius: 4px;
    border: 1px solid var(--colors-outlines-outline-dark, #0D0B22);
}

.rz-spinner:focus-within:not(.rz-state-disabled) {
    box-shadow: none !important;
    border: 1px solid var(--colors-outlines-outline-dark, #0D0B22);
}

.rz-menu-list {
    padding: 24px;
    background-color: var(--colors-surface-surface);
}

.rz-menuitem {
    color: var(--colors-surface-on-surface);
}


.rz-column-title {
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 140% !important;
    letter-spacing: -0.12px !important;
    text-transform: uppercase !important;
    color: var(--rz-grid-header-text-color) !important;
}

.ep-action-button {
    color: var(--Primary-900, #100b26);
}

.wg-txt-title {
    color: var(--Neutral-100, #fff);
}

.ep-default-button {
    border: 1px solid var(--Neutral-300, #dfdfdf);
    color: var(--Primary-900, #100b26);
}

.ep-widget-status-buttons-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.rz-tabview-nav > li > a:not(.rz-state-disabled):active:before {
    opacity: 0;
}

.rz-tabview.rz-tabview-top > .rz-tabview-panels {
    border: none;
}

.rz-tooltip-content {
    background-color: var(--colors-primary-primary);
    color: var(--colors-primary-on-primary);
}

.rz-dialog-content {
    height: 100%;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav li {
    ::before {
        /*display: none !important;*/
    }
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    background-color: var(--colors-surface-surface) !important;
    color: var(--colors-surface-on-surface) !important;
    border: 1px solid var(--colors-outlines-outline-variant, #DBDADE);
    transition: none;

    ::before {
        content: '';
        width: 20px; /* Diameter of the circle */
        height: 20px;
        border: 1px solid var(--colors-outlines-outline-dark, #0D0B22);
        border-radius: 50%; /* Makes it a circle */
        background-color: transparent; /* Makes the inside hollow */
        margin-right: 8px; /* Adds spacing between the circle and the text */
        vertical-align: middle; /* Aligns it with the text */
        transition: none;

    }

    ::after {
        content: '';
        position: absolute;
        top: 25px;
        left: 26px;
        transform: translate(-50%, -50%);
        width: 12px; /* Diameter of the filled dot */
        height: 12px;
        background-color: var(--colors-surface-on-surface, #FFF); /* Filled dot color */
        border-radius: 50%; /* Makes it a circle */
        transition: none;

    }
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav li {
    background-color: var(--colors-primary-primary) !important;
    display: flex;
    min-width: 160px;
    justify-content: center;
    align-items: center;
    border-radius: 8px 8px 0px 0px;
    color: var(--colors-primary-on-primary) !important;

    ::before {
        content: '';
        display: inline-block;
        width: 17px; /* Diameter of the circle */
        height: 17px;
        border: 1px solid var(--colors-surface-surface, #FFF);
        border-radius: 50%; /* Makes it a circle */
        background: var(--colors-primary-primary, #0D0B22);
        margin-right: 8px; /* Adds spacing between the circle and the text */
        vertical-align: middle; /* Aligns it with the text */
        pointer-events: none;

    }
}

.ep-header {
    background: var(--widget-header-bg, #100b26);
}

.rz-calendar-view td .rz-state-default.rz-state-focused {
    background: none;
    border-color: var(--colors-primary-primary);
    border: 1px solid;
    box-shadow: none;
    color: var(--rz-text-color);
}

.rz-calendar-header, .rz-calendar-view-container {
    background-color: var(--colors-surface-surface) !important;
}

.rz-calendar-view td .rz-state-active, .rz-calendar-view th .rz-state-active {
    border-radius: 0px !important;
}

.rz-calendar-view td span.rz-state-default {
    width: 100%;
    border-radius: 4px !important;
}

.rz-calendar-year-dropdown, .rz-calendar-month-dropdown {
    border-radius: 4px !important;
    border: 1px solid var(--colors-outlines-outline-variant, #DBDADE) !important;
    background: var(--colors-surface-surface, #FFF) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;

    .rz-dropdown-trigger .rzi-chevron-down {
        display: none;
    }

    .rz-dropdown-label {
        color: var(--colors-surface-on-surface, #000) !important;
    }

}

.ep-panel {
    background-color: var(--Neutral-100, #ffffff);
}

.head-popup {
    background: var(--widget-head-popup, #fff);
}

.wg-label {
    color: var(--widget-wg-label, #fff);
}

.rz-dropdown-filter {
    color: var(--Neutral-900);
}

.rz-grid-table {
    background-color: var(--colors-surface-surface) !important;
}

.rz-grid-table thead th {
    background: var(--colors-surface-surface-container-low);
    color: var(--colors-surface-on-surface-variant);
}

.rz-grid-table td {
    padding: 12px 4px;
}

.rz-datatable-loading {
    background-color: var(--colors-surface-surface-transparency) !important;
}

.rz-grid-table tr:hover td {
    color: var(--colors-surface-on-surface);
    cursor: pointer;
    background-color: var(--colors-surface-surface-container-low) !important;
}

.rz-grid-table thead th:first-child {
    /* Add your styles for the first th here */
    border-top-left-radius: 16px;
}

.rz-grid-table thead th:last-child {
    /* Add your styles for the last th here */
    border-top-right-radius: 16px;

}

.rz-data-row {
    color: var(--colors-surface-on-surface);
}

.rz-data-row > td {
    background-color: var(--colors-surface-surface) !important;
}

ul.rz-dropdown-items li {
    position: relative;
    padding: 10px 12px; /* Optional: Add some spacing for a cleaner look */
}

.rz-button.rz-variant-text.rz-primary.rz-shade-default {
    color: var(--colors-primary-on-primary);
}

.rz-button-text {
    text-transform: capitalize;
}

.rz-button {
    box-shadow: none;
    letter-spacing: normal;
}

.rz-button.rz-primary.rz-shade-darker {
    background-color: var(--colors-surface-surface-container);
    color: var(--colors-surface-on-surface);
}

ul.rz-dropdown-items li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 10px; /* Adjust this value to control the border's starting position */
    right: 10px; /* Adjust this value to control the border's ending position */
    bottom: 0; /* Position the border at the bottom of the <li> */
    height: 1px; /* Border height */
    background-color: #a39f9f69; /* Border color */
}

.ep-dropdown-template {
    background: transparent;
}

.ep-item-dropdown {
    color: var(--dropdown-text-color, #100b26);
}

.ep_fiat_txt {
    color: var(--Neutral-500-Dark, #959595);
}

.elen-headline3 {
    color: var(--widget-headline, #100b26);
    text-align: center;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.34px;
}

.wg-default {
    font-family: "Nunito Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.15px;
}

.wg-merchant {
    color: var(--widget-merchant, #100b26);
}

.divider {
    background-color: var(--divider-color, #efefef);
}

.wg-input-border {
    border: 1px solid var(--Neutral-600, #6e6e6e);
}

.wg-input-textbox {
    color: var(--rz-black, #000000);
}

.rz-grid-table td {
    white-space: normal !important;
    word-break: break-word !important;
}

.rz-datatable-emptymessage {
    background-color: var(--colors-secondary-on-secondary) !important;
}

.rz-paginator {
    background-color: var(--colors-surface-surface) !important;
}

.rz-pager {
    background-color: var(--colors-surface-surface) !important;
}

.rz-pager {
    background-color: var(--colors-surface-surface);
}

.rz-numeric input[type=text] {
    background-color: var(--colors-surface-surface);
    color: var(--colors-surface-on-surface);
    border: 1px solid var(--colors-outlines-outline-variant, #DBDADE);
    border-radius: 4px;
}

.rz-numeric:not(:disabled):not(.rz-state-disabled):focus {
    box-shadow: none !important;
}

.rz-numeric:not(:disabled):not(.rz-state-disabled):hover {
    border: 1px solid var(--colors-outlines-outline-dark);
}

.rz-numeric:focus-within:not(.rz-state-disabled) {
    border: none;
}

.rz-sortable-column .rzi-sort {
    color: var(--colors-surface-on-surface) !important;
}

.rz-sortable-column .rzi-sort:before {
    color: var(--colors-surface-on-surface-low);
}

.rz-dropdown-item {
    font-size: 15px;
}

.rz-dropdown-item.rz-state-highlight {
    background-color: var(--colors-primary-primary) !important;
    color: var(--colors-primary-on-primary) !important;
}

.rz-dropdown-items-wrapper {
    padding-left: 24px;
    padding-right: 24px;
    max-height: 420px !important;
    height: fit-content !important;
    width: auto;
    background: var(--colors-surface-surface) !important;
    color: var(--colors-surface-on-surface) !important;
}
.rz-dropdown-item:hover{
    cursor: pointer;    
}

.bg-transparent {
    background-color: transparent !important;
}

.rz-dropdown-panel {
    width: auto !important;
    max-width: 320px !important;
    background-color: var(--colors-surface-surface) !important;
    color: var(--colors-surface-on-surface) !important;
}

.rz-tabview .rz-tabview-nav li a {
    text-transform: capitalize !important;
}

.rz-tabview ul {
    overflow: auto;
    max-width: 95%;
}

.rz-tabview-panels {
    height: 100% !important;
}

.rz-tabview-panel {
    height: 100% !important;
}

.rz-tabview {
    height: 100% !important;
}

.rz-dialog, .rz-dialog-titlebar, .rz-dialog-title {
    background-color: var(--colors-surface-surface) !important;
    color: var(--colors-surface-on-surface) !important;
}

.rz-textbox {
    background: var(--colors-surface-surface, #FFF);
    border: 1px solid var(--colors-outlines-outline-variant) !important;
}

.rz-textbox:disabled {
    border: 1px solid var(--colors-outlines-outline-variant) !important;
}

.rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
    border: 1px solid var(--colors-outlines-outline-variant);
    box-shadow: 0 0 0 1px var(--colors-outlines-outline-inverted);
}

.rz-textbox:not(:disabled):not(.rz-state-disabled):hover {
    border: 1px solid var(--colors-outlines-outline-variant);
    box-shadow: 0 0 0 1px var(--colors-outlines-outline-inverted);
}
.rz-numeric {
    background: var(--colors-surface-surface, #FFF);
    border: 1px solid var(--colors-outlines-outline-variant) !important;
}

.rz-numeric:disabled {
    border: 1px solid var(--colors-outlines-outline-variant) !important;
}

.rz-numeric:not(:disabled):not(.rz-state-disabled):focus {
    border: 1px solid var(--colors-outlines-outline-variant);
    box-shadow: 0 0 0 1px var(--colors-outlines-outline-inverted);
}

.rz-numeric:not(:disabled):not(.rz-state-disabled):hover {
    border: 1px solid var(--colors-outlines-outline-variant);
    box-shadow: 0 0 0 1px var(--colors-outlines-outline-inverted);
}



.rz-fileupload-buttonbar {
    background-color: transparent;
}

.rz-fileupload-choose {
    background: transparent !important;
    justify-content: center !important;

}

.rz-inverted-text .rz-fileupload-buttonbar {
    padding: 0px !important;

    span {
        padding: 0px !important;
        display: flex;
        color: var(--colors-primary-primary-inverted) !important;
        text-align: center;
        font-family: "Nunito Sans";
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 21px */
        letter-spacing: -0.15px;
    }
}

.rz-fileupload-buttonbar {
    padding: 0px !important;

    span {
        padding: 0px !important;
        display: flex;
        color: var(--colors-primary-primary) !important;
        text-align: center;
        font-family: "Nunito Sans";
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 21px */
        letter-spacing: -0.15px;
    }
}

.file-upload-hovering {
    > div {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
}

.file-upload-hovering > div > span {
    display: flex !important;
    height: 100% !important;
    width: 100%;
    justify-content: center !important;
    align-items: center !important;
}


.rz-button:not(.rz-state-disabled):active {
    box-shadow: none !important;
}

.rz-fileupload-choose input[type=file] {
    width: 100%;
}

.rz-fileupload-files {
    background-color: transparent !important;
}

.rz-fileupload-row > div:nth-of-type(1) > img {
    width: 64px !important;
    height: auto !important
}

.rz-fileupload-row > div:nth-of-type(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.rz-fileupload-row > div:nth-of-type(3) {
    display: none !important;
}

input {
    color: var(--colors-surface-on-surface);
}

.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled):after {
    background-color: transparent !important;
}

.rz-dropdown:not(:disabled):not(.rz-state-disabled):hover {
    border: 1px solid;
}

.rz-dropdown:not(:disabled):not(.rz-state-disabled):focus {
    border-color: var(--colors-primary-primary);
    box-shadow: none !important;
}

.rz-chkbox-box {
    color: var(--colors-primary-on-primary);
}

.rz-chkbox-box.rz-state-active {
    border: none;
    background-color: var(--colors-primary-on-primary);
}

.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled) {
    background-color: transparent;
    /*border: none;*/
    border-color: var(--colors-primary-on-primary);
}

.rz-chkbox-box:hover:not(.rz-state-disabled):after {
    background-color: var(--rz-input-highlight-color) !important;
}

.rz-chkbox-box {
    border-radius: 4px;
}

.rz-datepicker-inline {
    border: none !important;
}

.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled):after {
    opacity: 0.3;
}

.rz-steps {
    height: 80% !important;
}

.rz-steps .rz-state-highlight .rz-steps-number {
    background-color: var(--colors-primary-primary) !important;
    color: var(--colors-primary-on-primary) !important;
}

.rz-steps .rz-state-highlight .rz-steps-title {
    color: var(--colors-primary-primary) !important;
}

.rz-steps-number {
    border: 1px solid var(--colors-primary-primary) !important;
    background-color: transparent;
    color: var(--colors-primary-primary) !important;
}

.rz-steps .rz-menuitem-link:hover {
    color: var(--colors-primary-primary) !important;
}
.rz-grid-table thead th .rz-column-title {
    padding: 0rem 1rem !important;
}
.rz-pager-page.rz-state-active {
    color: var(--colors-primary-primary) !important;
}

.rz-dialog-titlebar-close .rzi-times:before {
    color: var(--colors-surface-on-surface) !important;
}
.rz-badge-primary.rz-shade-default {
    background-color: var(--colors-surface-surface-container-low) !important;
    color: var(--colors-surface-on-surface) !important;
}
.rz-badge-pill {
    padding: 6px !important;
    text-transform: none !important;
    font-weight: bold;
}