:root {
    --primary-color: rgb(102 153 255);
    --rz-primary: #333;
}

.\!bg-primary {
    color: white !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(102 153 255 / var(--tw-bg-opacity)) !important;
}
.\!bg-secondary {
    color: white !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(13 1 73 / var(--tw-bg-opacity)) !important;
}

.\!bg-grey {
    color:white !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(100 100 100 / var(--tw-bg-opacity)) !important;
}
.rz-state-focused {
    color: #333 !important;
}
/* Overlay del Loader */
.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    justify-content: center;
    align-items: center;
    display: grid;
    z-index: 999;
}
/** Color of text when ho
/* Spinner */
.spinner {
    border: 6px solid #f3f3f3; /* Fondo */
    border-top: 6px solid #3498db; /* Color del spinner */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
body {
    background-color: #f3f4f6 !important;
}
.rz-tabview-panel {
    padding:0px 5px 0px 5px !important;
}

/*ToolBarMenu*/
.rz-stack-ToolbarMenu {
    background-color: rgb(5, 39, 103) !important;
}
.rz-sidebar-ToolbarMenu {
    background-color: rgb(5, 39, 103) !important;
}

.rz-menu-ToolbarMenu:not(.rz-profile-menu) {
    /*background-color: rgb(5, 39, 103) !important;*/
    
}
.rz-CardComponent {
    max-width: 500px;
    padding: 20px;
    border-radius: 10px;
}
.rz-CardComponent-Image {
    border-radius: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*GridComponent*/

.rz-datatable {
    border: none;
}
.rz-datatable-emptymessage-row {
    cursor: default;
}
.rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td {
    border-top: var(--rz-grid-border);
}
.rz-datatable-thead th, .rz-grid-table thead th, .rz-datatable-scrollable-header, .rz-datatable-tfoot td, .rz-grid-table tfoot td, .rz-datatable-odd > td, .rz-grid-table-striped tbody tr:not(.rz-expanded-row-content):nth-child(even) > td {
    background-color: white;
 
}
.rz-frozen-cell {
    background-color: white !important;
}
.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td:not(.rz-frozen-cell) {
    background-color: transparent;
    border-right: none;
    cursor: pointer;
}
.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data {
    color: #000;
}
.rz-datatable-data td:not(:last-child), .rz-datatable-data td.rz-composite-cell, .rz-grid-table td:not(:last-child), .rz-grid-table td.rz-composite-cell, .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) {
    border-right: none;
}
.rz-paginator-page.rz-state-active {
    color: var(--primary-color);
}
.rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus, .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover {
    box-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03);
    border: 1px solid var(--primary-color);
}
.rz-paginator-first,
.rz-paginator-prev {
    background-color: #479cc8;
    color: #ffffff;
}
.autoSizeColumn {
    white-space: nowrap;
    width: 1%;
}
.minSizeColumn {
    width: 90px !important;
}
.whites-nowrap {
    white-space: nowrap;
}

.whites-pre-wrap {
    white-space: pre-wrap;
}

/*DialogComponent*/
.rz-dialog {
    background-color: rgba(0, 0, 0, 0.2) !important;
}
.rz-dialog-titlebar {
    background-color: #f3f4f6 !important;
}
.rz-dialog-content {
    background-color: #f3f4f6 !important;
}
.rz-fieldset {
    background-color: #fff !important;
}
.rz-fieldset-legend {
    margin-bottom: 0px !important;
}
.rz-fieldset-content {
    padding-top: 0px !important;
    background-color: #fff !important;
    padding-bottom: 0px !important;
}
.rz-fieldset-content-wrapper {
    padding-bottom:10px;
    background-color: #fff !important;
}

/*ServiceComponent*/
.rz-radzenbadge {
    border-radius: 30px;
    color: white;
    font-size: 10px;
    text-wrap-mode: wrap;
    width: 30px;
    height: 25px;
    margin-top: 10px;
}

/* Botón normal */
.responsive-btn .rz-button-text {
    display: inline;
}

/* Radzen upload component */
.rz-fileupload-row {
    overflow:auto !important;
}

/* Oculta el texto cuando la pantalla es pequeña */
@media (max-width: 640px) {
    .responsive-btn .rz-button-text {
        display: none;
    }

    /* Ajusta el tamaño del botón si lo deseas */
    .responsive-btn {
        padding: 6px !important;
        width: 40px;
        justify-content: center;
    }
}