html, body {
    background-color: var(--rz-body-background-color);
    color: var(--rz-text-color);
}

:root {
    --rz-text-font-family: "Lexend Deca", sans-serif;
    --rz-root-font-size: 17px;
    
    /*Base Colors*/
    --rz-base-50: #fcffff;
    --rz-base-100: #f1f4f4;
    --rz-base-200: #dce3e3;
    --rz-base-300: #b8c6c6;
    --rz-base-400: #9cb0b0;
    --rz-base-500: #809999;
    --rz-base-600: #667f7f;
    --rz-base-700: #4f6363;
    --rz-base-800: #405050;
    --rz-base-900: #222a2a;
    
    /*Primary Colors*/
    --rz-primary: #ff864d;
    --rz-primary-light: #ff925f;
    --rz-primary-dark: #b33900;
    --rz-primary-darker: #802900;
    --rz-on-primary: var(--rz-base-900);
    --rz-on-primary-light: var(--rz-base-900);
    --rz-on-primary-dark: var(--rz-text-contrast-color);
    --rz-on-primary-darker: var(--rz-text-contrast-color);

    --rz-danger: var(--rz-primary-darker);
    --rz-danger-lighter: var(--rz-primary-darker);
    --rz-on-danger: var(--rz-on-primary-darker);
    --rz-on-danger-lighter: var(--rz-on-primary-darker);

    /*Headings*/
    --rz-text-h6-font-size: clamp(1.1rem, 1.667vw, 1.25rem);
    --rz-text-h1-font-weight: 500;
    --rz-text-h2-font-weight: 500;
    --rz-text-h3-font-weight: 500;
    --rz-text-h4-font-weight: 500;
    --rz-text-h5-font-weight: 500;
    --rz-text-h6-font-weight: 500;

    /*Link*/
    --rz-link-color: var(--rz-primary);
    --rz-link-hover-color: var(--rz-primary-light);

    /*Notifications*/
    --rz-notification-success-background-color: var(--rz-base-hover);

    /*Sidebar*/
    --rz-sidebar-background-color: var(--rz-base);
    --rz-panel-menu-item-background-color: var(--rz-sidebar-background-color);
    --rz-sidebar-toggle-background-color: var(--rz-sidebar-background-color);
    --rz-sidebar-toggle-hover-background-color: var(--rz-sidebar-toggle-background-color);
    --rz-sidebar-toggle-hover-color: var(--rz-primary);
    --rz-sidebar-toggle-border: none;
    --rz-sidebar-toggle-margin-inline-end: 0;
    --rz-panel-menu-item-padding-block: 1.2rem;
    --rz-panel-menu-item-padding-inline: 1rem;
    --rz-panel-menu-icon-margin-inline: 0 1rem;
    --rz-panel-menu-item-border: none;
    --rz-panel-menu-item-active-background-color: var(--rz-primary);
    --rz-panel-menu-item-active-indicator: var(--rz-primary);
    --rz-panel-menu-item-active-color: var(--rz-on-primary);
    --rz-panel-menu-item-hover-background-color: var(--rz-panel-menu-item-active-background-color);
    --rz-panel-menu-item-hover-color: var(--rz-on-primary);
    --rz-panel-menu-font-weight: 400;
    --rz-panel-menu-item-2nd-level-background-color: var(--rz-panel-menu-item-background-color);
    --rz-panel-menu-item-2nd-level-padding-block: 0.75rem;

    /*Card*/
    --rz-card-shadow: none;
    
    /*Grid*/
    --rz-grid-background-color: var(--rz-body-background-color);
    --rz-grid-stripe-odd-background-color: var(--rz-body-background-color);
    --rz-grid-stripe-background-color: var(--rz-grid-stripe-odd-background-color);
    --rz-grid-header-background-color: var(--rz-base);
    --rz-grid-header-color: var(--rz-text-color);
    --rz-grid-header-cell-border-bottom: none;
    --rz-grid-header-cell-border: none;
    --rz-grid-right-cell-border: none;
    --rz-grid-cell-border: none;
    --rz-grid-cell-padding: 1rem;
    --rz-grid-column-resizer-helper-background-color: var(--rz-base-hover);
    --rz-grid-hover-background-color: var(--rz-base-alternate);
    --rz-grid-hover-color: var(--rz-grid-cell-color);
    --rz-grid-selected-background-color: var(--rz-grid-hover-background-color);

    /*Checkbox and Switch*/
    --rz-checkbox-checked-background-color: var(--rz-primary);
    --rz-checkbox-checked-border: none;
    --rz-checkbox-checked-hover-background-color: var(--rz-primary-light);
    --rz-checkbox-checked-hover-border: none;
    --rz-checkbox-border-width: 1px;
    --rz-switch-checked-background-color: var(--rz-primary);

    /*Button and Badge*/
    --rz-button-hover-shadow: none;
    --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
    --rz-badge-font-weight: 400;

    /*Dialog*/
    --rz-dialog-background-color: var(--rz-body-background-color);

    /*Alert*/
    --rz-alert-box-shadow: none;
    
    /*Forms*/
    /*Form Field Filled*/
    --rz-form-field-filled-background-color: var(--rz-base);
    --rz-form-field-filled-border: none;
    --rz-form-field-filled-hover-border: none;
    --rz-form-field-filled-focus-border: none;
    --rz-form-field-filled-height: 4.3rem;
    --rz-form-field-filled-label-floating-top: 0.35rem;
    --rz-form-field-filled-padding-inline: 0.8rem;
    --rz-input-shadow: none;
    --rz-form-field-filled-hover-shadow: none;
    
    /*Input Disabled*/
    --rz-input-disabled-border: none;

    /*Form Field Label / Input Border Block End*/
    --rz-form-field-label-focus-color: var(--rz-input-placeholder-color);
    --rz-input-hover-border-block-end: var(--rz-input-border-block-end);
    --rz-input-focus-border-block-end: 1px solid transparent;

    /*Text Area Padding*/
    --rz-text-area-padding-block: 0.8rem;
    --rz-text-area-padding-inline: 0.8rem;

    /*Form Field Filled Numeric Padding*/
    --rz-form-field-filled-numeric-padding-inline: 0.8rem;
    --rz-numeric-button-background-color: var(--rz-primary);
    --rz-numeric-button-color: var(--rz-on-primary);

    /*Dropdown*/
    --rz-dropdown-item-padding: 0.8rem;
    --rz-dropdown-item-selected-background-color: var(--rz-primary);
    --rz-dropdown-item-selected-color: var(--rz-on-primary);
    --rz-dropdown-item-hover-background-color: var(--rz-base-hover);
    --rz-dropdown-item-hover-color: var(--rz-text-color);
    --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-light);
    --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-light);

    /*Datepicker Calendar*/
    --rz-datepicker-calendar-today-color: var(--rz-link-color);
    --rz-datepicker-calendar-selected-background-color: var(--rz-primary);
    --rz-datepicker-calendar-selected-color: var(--rz-on-primary);
    --rz-datepicker-calendar-hover-background-color: var(--rz-base-hover);
    --rz-datepicker-calendar-hover-color: var(--rz-text-color);
    --rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary-light);
    --rz-datepicker-calendar-selected-hover-color: var(--rz-on-primary-light);
    
    /*FileUpload*/
    --rz-upload-choose-background-color: var(--rz-primary);
    --rz-upload-choose-hover-background-color: var(--rz-primary-light);
    --rz-upload-choose-active-background-color: var(--rz-primary);
    --rz-upload-choose-color: var(--rz-on-primary);
    --rz-upload-choose-hover-color: var(--rz-on-primary-light);
    --rz-upload-choose-active-color: var(--rz-on-primary);

    /*Security Code*/
    --rz-security-code-input-min-height: 4rem;

    /*Menu*/
    --rz-menu-top-item-padding-block: 1.2rem;
    --rz-menu-top-item-padding-inline: 0.8rem;
    --rz-menu-item-padding-block: 1.0rem;
    --rz-menu-item-padding-inline: 0.8rem;
    --rz-menu-top-item-hover-color: var(--rz-link-color);
    --rz-menu-top-item-icon-hover-color: var(--rz-link-color);
    --rz-menu-top-item-selected-color: var(--rz-link-color);
    --rz-menu-item-hover-background-color: var(--rz-primary);
    --rz-menu-item-hover-color: var(--rz-on-primary);
}

a {
    color: var(--rz-link-color);
    text-decoration: none;
}

a:hover {
    color: var(--rz-link-hover-color);
    text-decoration: var(--rz-link-hover-text-decoration);
}

.rz-form-field-content .rz-dropdown-label {
    padding-block: 0.6rem;
}

.rz-button {
    font-weight: 400;
}

.rz-button-md {
    height: 48px;
}

@media (max-width: 991px) {
    :root {
        --rz-root-font-size: 18px;
    }

    .rz-button-md {
        height: 58px;
    }
}

.rz-grid-table thead {
    height: 70px;
}

.rz-grid-table thead th {
    padding: 0.5rem;
}

.rz-dialog {
    min-width: 768px;
    max-height: 80%;
}

.rz-timepicker .rz-button.rz-secondary {
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
}

@media (pointer: coarse) {
    .rz-layout::-webkit-scrollbar, .rz-layout ::-webkit-scrollbar, .rz-scrollbars::-webkit-scrollbar, .rz-scrollbars ::-webkit-scrollbar {
        display: none;
    }
}