/*========== GOOGLE FONTS ==========*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*========== VARIABLES CSS ==========*/
:root {
    --header-height: 50px;
    --nav-width: 230px;
    /*========== Colors ==========*/
    --first-color: #3144B5;
    --first-color-light: #40BAC6;
    --title-color: #19181B;
    --text-color: #A5A1AA;
    --text-color-light: #58555E;
    --container-color: #FFFFFF;
    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;
    --windows-title-font-size: 22px;
    --Titulos-font-size: 24px;
    --large-font-size: 15px;
    --medium-font-size: 14px;
    --normal-font-size: 13px;
    --small-font-size: 12px;
    --smaller-font-size: 11px;
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
    /*========== z index ==========*/
    --z-fixed: 100;
    /*========== COLORES DISTINTIVOS DE SIGEIN ==========*/
    --vColorModulo: #3144B5;
    --vColorMenuActivo: #3144B5;
    --vColorMenuHover: #40BAC6;
    --vColorMenuSeleccion: #40BAC6;
    --vColorButton: #40BAC6;
    --vColorBorderHover: #40BAC6;
    --vColorButtonHover: white;
    /*========== Radius ==========*/
    --border-radius-size: 12px;
}

body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: transparent;
    color: var(--text-color-light) !important;
}

.ctrlBasico {
    float: left;
    padding-right: 10px;
}

.cssFooter {
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 32px;
    color: white !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    background-color: var(--vColorModulo) !important;
    border-color: var(--vColorModulo) !important;
}

.cssComputerBrowser {
    width: 100% !important;
    height: 100% !important;
}

.cssBorderMenu {
    clear: both !important;
    height: 8px !important;
    padding: 0px 5px 5px 5px !important;
    width: 100% !important;
    border-radius: 8px !important;
    background: white !important;
}

.cssBorderSubMenu {
    clear: both !important;
    height: 8px !important;
    width: 100% !important;
    border-radius: 8px !important;
    background: white !important;
}

.cssBorderMenuActive {
    clear: both !important;
    height: 8px !important;
    width: 100% !important;
    border-radius: 8px !important;
    background: var(--vColorModulo) !important;
}

.cssContenedorTablero {
    width: 100%;
    height: 100px;
    margin-bottom: 10px !important;
    transition: 1s ease;
    -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.cssContenedorTableroHide {
    height: 0px !important;
    transition: 1s ease;
    -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    padding: 0px 5px !important;
}

.cssContenedorTableroWindows {
    width: 100% !important;
    height: 55px;
    margin-bottom: 25px !important;
}

.cssContenedor {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.cssContenedorControles {
    border-radius: 12px !important;
    background-color: white !important;
    width: calc(100% - 3px) !important;
    height: calc(100% - 113px) !important;
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) !important;
}

.cssContenedorBackground {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    background-color: white !important;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) !important;
    padding: 10px !important;
}

.cssContenedorPrincipalFull {
    width: 100% !important;
    height: calc(100% - 1px) !important;
    position: absolute !important;
    transition: 1s ease;
    -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.cssContenedorPrincipal {
    width: 100% !important;
    height: calc(100% - 111px) !important;
    position: absolute !important;
    transition: 1s ease;
    -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.cssContenedorPrincipalWindows {
    width: calc(100% - 20px) !important;
    height: calc(100% - 100px) !important;
    position: relative !important;
    background-color: white !important;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) !important;
    padding: 10px !important;
}

.cssContenedorPrincipalWindowsEmpty {
    width: calc(100% - 20px) !important;
    height: calc(100% - 22px) !important;
    position: relative !important;
    background-color: white !important;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) !important;
    padding: 10px !important;
}

.cssContenedorPrincipalBoton {
    width: 100% !important;
    height: calc(100% - 61px) !important;
    margin-bottom: 10px !important;
}

.cssContenedorWindowsControl {
    width: 100%;
    padding: 10px !important;
}

.cssContenedorBotones {
    background-color: white !important;
    border-color: #CFD8DC;
    border-width: 1px;
    border-style: solid;
    width: 100% !important;
    border-radius: var(--border-radius-size);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    height: 51px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.cssContenedorTitulo {
    background-color: var(--vColorModulo) !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-shadow: white 0px 2px 10px;
    border-radius: 10px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}


.cssContenedorTituloAnimation {
    background-color: var(--vColorModulo) !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 12px !important;
    border: solid 1px rgba(0, 0, 0, 0.1) !important;
    transition: 1s ease;
    animation: gradient 15s ease infinite;
    cursor: pointer !important;
}

    .cssContenedorTituloAnimation:hover {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
        transition: 1s ease;
        opacity: 0.9;
    }

.cssCRUD {
    display: flex;
    justify-content: center;
    align-content: center;
}

.cssMenuTableroContador {
    border: solid 1px rgba(0, 0, 0, 0.1) !important;
    background-color: var(--vColorModulo) !important;
    height: 100px;
    max-height: 100px;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 8px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.cssMenuTableroContadorAnimation {
    border: solid 1px rgba(0, 0, 0, 0.1) !important;
    background-color: var(--vColorModulo) !important;
    height: 100px;
    max-height: 100px;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 8px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    transition: 1s ease;
    animation: gradient 15s ease infinite;
    cursor: pointer !important;
}

    .cssMenuTableroContadorAnimation:hover {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        transition: 1s ease;
        opacity: 0.6;
    }

.cssMenuTableroContadorSeleccion {
    border: solid 1px rgba(0, 0, 0, 0.1) !important;
    background-color: var(--vColorMenuSeleccion) !important;
    height: 100px;
    max-height: 100px;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 8px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    transition: 1s ease;
    animation: gradient 15s ease infinite;
    cursor: pointer !important;
}

    .cssMenuTableroContadorSeleccion:hover {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        transition: 1s ease;
        opacity: 0.6;
    }

.counterTablero {
    width: 100%;
    font-size: 40px;
    height: 55px;
    font-family: var(--body-font) !important;
    border-radius: 12px;
    padding: 0px !important;
    color: white !important;
    transition: 1s ease;
    -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.ctrlBasico {
    transition: 1s ease;
    -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.cssLabelTablero {
    font-size: 13px !important;
    font-weight: bold !important;
    color: white !important;
}

.cssTitulos {
    color: white !important;
    text-wrap: nowrap !important;
    font-weight: bold !important;
    font-size: x-large !important;
    font-family: var(--body-font) !important;
}

    .cssTitulos > i {
        margin-right: 10px;
    }

.cssContenedorMenuModulo {
    width: 100%;
    height: 100%;
    padding-left: 5px;
    padding-right: 5px;
    overflow-y: auto;
}

    .cssContenedorMenuModulo::-webkit-scrollbar {
        display: none !important;
    }

.cssIframe {
    overflow-y: auto;
    border-radius: 12px !important;
    background-color: white !important;
}

    .cssIframe::-webkit-scrollbar {
        display: none !important;
    }

.cssIconoMenu {
    width: 35px !important;
    text-align: center !important;
}

.cssIconoMenuGrid {
    width: 40px !important;
    margin-left: 15px !important;
    text-align: center !important;
}

button:disabled, button:disabled > span, button:disabled > span::before {
    cursor: no-drop !important;
}

.cssRadButton {
    background-color: var(--vColorModulo) !important;
    color: white !important;
    border: 0px solid var(--vColorModulo) !important;
    font-size: var(--medium-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButton:hover {
        background-color: #40BAC6 !important;
        color: white !important;
    }

.cssRadButtonGeneral {
    text-align: center !important;
    padding-left: 50px !important;
    background-color: white !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    color: var(--vColorModulo) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonGeneral:hover {
        background-color: var(--vColorModulo) !important;
        color: white !important;
        border: 1px solid var(--vColorModulo) !important;
    }

.cssRadButtonProfileImagen {
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
}

.cssRadButtonPost {
    height: 35px !important;
    background-color: #0062CC !important;
    color: white !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonPost:hover {
        background-color: white !important;
        color: #0062CC !important;
        border: 1px solid #0062CC !important;
    }

.cssRadButtonSave {
    height: 35px !important;
    background-color: white !important;
    color: #0062CC !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonSave:hover {
        background-color: #0062CC !important;
        color: white !important;
        border: 1px solid #0062CC !important;
    }



.cssRadButtonSend {
    background-color: white !important;
    color: #007BFF !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonSend:hover {
        background-color: #007BFF !important;
        color: white !important;
        border: 1px solid #007BFF !important;
    }

.cssRadButtonSendGrid {
    background-color: white !important;
    color: #007BFF !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 30px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonSendGrid:hover {
        background-color: #007BFF !important;
        color: white !important;
        border: 1px solid #007BFF !important;
    }



.cssRadButtonPrint {
    background-color: white !important;
    color: #217346 !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonPrint:hover {
        background-color: #217346 !important;
        color: white !important;
        border: 1px solid #217346 !important;
    }

.cssRadButtonPrintMasivo {
    background-color: white !important;
    color: #217346 !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonPrintMasivo:hover {
        background-color: #217346 !important;
        color: white !important;
        border: 1px solid #217346 !important;
    }

.cssRadButtonPrintFormulario {
    background-color: #007BFF !important;
    color: white !important;
    border: 0px solid #007BFF !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonPrintFormulario:hover {
        background-color: white !important;
        color: #007BFF !important;
        border: 1px solid rgba(0,0,0,0.12) !important;
    }

.cssRadButtonRefresh {
    background-color: white !important;
    color: #17A2B8 !important;
    border: 0px solid #17A2B8 !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonRefresh:hover {
        background-color: #17A2B8 !important;
        color: white !important;
        border: 0px solid #17A2B8 !important;
    }

.cssRadButtonShowHide {
    background-color: white !important;
    color: var(--vColorModulo) !important;
    border: 0px solid var(--vColorModulo) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonShowHide:hover {
        background-color: var(--vColorModulo) !important;
        color: white !important;
        border: 0px solid var(--vColorModulo) !important;
    }

.cssRadButtonHelp {
    background-color: white !important;
    color: #007BFF !important;
    border: 0px solid #007BFF !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
    cursor: help !important;
}

    .cssRadButtonHelp:hover {
        background-color: #007BFF !important;
        color: white !important;
        border: 0px solid #007BFF !important;
    }

.cssRadButtonImportar {
    background-color: white !important;
    color: #455A64 !important;
    border: 0px solid #455A64 !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonImportar:hover {
        background-color: #455A64 !important;
        color: white !important;
        border: 0px solid #455A64 !important;
    }

.cssRadButtonAdvancedSearch {
    background-color: white !important;
    color: var(--vColorModulo) !important;
    border: 0px solid var(--vColorModulo) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonAdvancedSearch:hover {
        background-color: var(--vColorModulo) !important;
        color: white !important;
        border: 0px solid var(--vColorModulo) !important;
    }

.cssRadButtonWarning {
    background-color: yellow !important;
    color: orangered !important;
    border: 1px solid yellow !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

    .cssRadButtonWarning:hover {
        background-color: orangered !important;
        color: yellow !important;
        border: 0px solid orangered !important;
    }

.cssRadButtonDescargar {
    background-color: white !important;
    color: #455A64 !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonDescargar:hover {
        background-color: #455A64 !important;
        color: white !important;
        border: 0px solid #455A64 !important;
    }

.cssRadButtonDescargarMasivo {
    background-color: white !important;
    color: #455A64 !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonDescargarMasivo:hover {
        background-color: #455A64 !important;
        color: white !important;
        border: 0px solid #455A64 !important;
    }

.cssRadButtonExcel {
    background-color: white !important;
    color: #217346 !important;
    border: 0px solid #217346 !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonExcel:hover {
        background-color: #217346 !important;
        color: white !important;
        border: 0px solid #217346 !important;
    }

.cssRadButtonTimeLine {
    background-color: white !important;
    color: black !important;
    border: 0px solid black !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonTimeLine:hover {
        background-color: black !important;
        color: white !important;
        border: 0px solid black !important;
    }

.cssRadButtonModulo {
    background-color: white !important;
    color: var(--vColorModulo) !important;
    border: 0px solid var(--vColorModulo) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonModulo:hover {
        background-color: var(--vColorModulo) !important;
        color: white !important;
        border: 0px solid var(--vColorModulo) !important;
    }

.cssRadButtonSent {
    background-color: white !important;
    color: #007BFF !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonSent:hover {
        background-color: #007BFF !important;
        color: white !important;
        border: 0px solid #007BFF !important;
    }

.cssRadButtonSentGrid {
    background-color: white !important;
    color: #007BFF !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 30px !important;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

    .cssRadButtonSentGrid:hover {
        background-color: #007BFF !important;
        color: white !important;
        border: 0px solid #28A745 !important;
    }

.cssRadButtonHeaderSave {
    background-color: white !important;
    color: #0062CC !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonHeaderSave:hover {
        background-color: #0062CC !important;
        color: white !important;
        border: 0px solid #0062CC !important;
    }

.cssRadButtonAgregar {
    background-color: white !important;
    color: #5CB85C !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonAgregar:hover {
        background-color: #5CB85C !important;
        color: white !important;
        border: 0px solid #5CB85C !important;
    }

.cssRadButtonAgregarGrid {
    background-color: white !important;
    color: #5CB85C !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 30px !important;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

    .cssRadButtonAgregarGrid:hover {
        background-color: #5CB85C !important;
        color: white !important;
        border: 0px solid #5CB85C !important;
    }

.cssRadButtonEditarFormulario {
    background-color: #FFA500 !important;
    color: white !important;
    border: 0px solid rgba(0,0,0,0.12) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonEditarFormulario:hover {
        background-color: white !important;
        color: #FFA500 !important;
        border: 1px solid rgba(0,0,0,0.12) !important;
    }

.cssRadButtonEditar {
    background-color: white !important;
    color: #FFA500 !important;
    border: 0px solid rgba(0,0,0,0.12) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonEditar:hover {
        background-color: #FFA500 !important;
        color: white !important;
        border: 0px solid #FFA500 !important;
    }

.cssRadButtonEdit {
    background-color: white !important;
    color: #FFA500 !important;
    border: 0px solid #FFA500 !important;
    font-size: var(--large-font-size) !important;
    height: 30px !important;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

    .cssRadButtonEdit:hover {
        background-color: #FFA500 !important;
        color: white !important;
        border: 0px solid #FFA500 !important;
    }


.cssRadButtonCopy {
    background-color: white !important;
    color: #28A745 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 30px !important;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

    .cssRadButtonCopy:hover {
        background-color: #28A745 !important;
        color: white !important;
        border: 0px solid #28A745 !important;
    }

.cssRadButtonFooterCopy {
    height: 100% !important;
    color: #28A745 !important;
    background-color: white !important;
    border: 0px solid #28A745 !important;
    font-size: var(--large-font-size) !important;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

    .cssRadButtonFooterCopy:hover {
        color: white !important;
        background-color: #28A745 !important;
        border: 0px solid #28A745 !important;
    }


.cssRadButtonEliminar {
    background-color: white !important;
    color: #FF4C4C !important;
    border: 0px solid #FF4C4C !important;
    font-size: var(--large-font-size) !important;
    height: 30px !important;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

    .cssRadButtonEliminar:hover {
        background-color: #FF4C4C !important;
        color: white !important;
        border: 0px solid #FF4C4C !important;
    }

.cssRadButtonEliminarMasivo {
    background-color: white !important;
    color: #FF4C4C !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonEliminarMasivo:hover {
        background-color: #FF4C4C !important;
        color: white !important;
        border: 0px solid #FF4C4C !important;
    }


.cssRadButtonEliminarFormulario {
    background-color: #FF4C4C !important;
    color: white !important;
    border: 0px solid rgba(0,0,0,0.12) !important;
    font-size: var(--large-font-size) !important;
    height: 35px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonEliminarFormulario:hover {
        background-color: white !important;
        color: #FF4C4C !important;
        border: 1px solid rgba(0,0,0,0.12) !important;
    }

.cssRadButtonCopiar {
    background-color: white !important;
    color: #28A745 !important;
    border: 0px solid #28A745 !important;
    font-size: var(--large-font-size) !important;
    height: 30px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonCopiar:hover {
        background-color: #28A745 !important;
        color: white !important;
        border: 0px solid #28A745 !important;
    }

.cssRadButtonMoreOptions {
    background-color: white !important;
    color: var(--vColorModulo) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-size: var(--large-font-size) !important;
    height: 30px !important;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

    .cssRadButtonMoreOptions:hover {
        background-color: var(--vColorModulo) !important;
        color: white !important;
        border: 0px solid var(--vColorModulo) !important;
    }

.cssRadButtonBuscar {
    text-align: center !important;
    padding-left: 50px !important;
    background-color: var(--vColorModulo) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    color: white !important;
    font-size: var(--medium-font-size) !important;
    height: 38px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonBuscar:hover {
        background-color: white !important;
        color: var(--vColorModulo) !important;
        border: 1px solid var(--vColorModulo) !important;
    }

.cssRadButtonWindows {
    text-align: center !important;
    background-color: var(--vColorModulo) !important;
    border: 0px solid var(--vColorModulo) !important;
    color: white !important;
    font-size: var(--medium-font-size) !important;
    height: 100% !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
    border-radius: 40% !important;
}

    .cssRadButtonWindows:hover {
        background-color: white !important;
        color: var(--vColorModulo) !important;
        border: 1px solid var(--vColorModulo) !important;
    }

.cssRadButtonWindowsClose {
    text-align: center !important;
    background-color: #FF4C4C !important;
    border: 0px solid #FF4C4C !important;
    color: white !important;
    font-size: var(--large-font-size) !important;
    height: 100% !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
    border-radius: 40% !important;
}

    .cssRadButtonWindowsClose:hover {
        background-color: white !important;
        color: #FF4C4C !important;
        border: 1px solid #FF4C4C !important;
    }

.cssRadButtonWindowsHelp {
    text-align: center !important;
    background-color: #007BFF !important;
    border: 0px solid #007BFF !important;
    color: white !important;
    font-size: var(--large-font-size) !important;
    height: 100% !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
    border-radius: 40% !important;
    cursor: help !important;
}

    .cssRadButtonWindowsHelp:hover {
        background-color: white !important;
        color: #007BFF !important;
        border: 1px solid #007BFF !important;
    }

.cssRadButtonWindowsEditar {
    text-align: center !important;
    background-color: #FFA500 !important;
    border: 0px solid #FFA500 !important;
    color: white !important;
    font-size: var(--large-font-size) !important;
    height: 100% !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
    border-radius: 40% !important;
}

    .cssRadButtonWindowsEditar:hover {
        background-color: white !important;
        color: #FFA500 !important;
        border: 1px solid #FFA500 !important;
    }

.cssRadButtonWindowsSave {
    text-align: center !important;
    background-color: #0062CC !important;
    border: 0px solid #0062CC !important;
    color: white !important;
    font-size: var(--large-font-size) !important;
    height: 100% !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
    border-radius: 40% !important;
    cursor: pointer !important;
}

    .cssRadButtonWindowsSave:hover {
        background-color: white !important;
        color: #0062CC !important;
        border: 1px solid #0062CC !important;
    }

.cssRadButtonWindowsOther {
    color: white !important;
    height: 100% !important;
    cursor: pointer !important;
    text-align: center !important;
    border-radius: 40% !important;
    background-color: #C5C5C5 !important;
    border: 0px solid #C5C5C5 !important;
    font-size: var(--large-font-size) !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
}

    .cssRadButtonWindowsOther:hover {
        color: #C5C5C5 !important;
        background-color: white !important;
        border: 1px solid #C5C5C5 !important;
    }

.cssFrozenColumn {
    background-color: white !important;
}

.rgDataDiv {
    height: calc(100% - 197px) !important;
    position: relative;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

    .rgDataDiv::-webkit-scrollbar {
        width: 0px !important;
    }

.cssCRUD {
    width: calc(100% - 6px) !important;
    height: calc(100% - 6px) !important;
    padding: 3px !important;
}

.statusActive {
    color: var(--vColorModulo) !important;
}

.statusInactive {
    color: whitesmoke !important;
}

#ctl00_ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderContexto_ContentPlaceHolder1_grdCRUD_ctl00_Header {
    font-size: large !important;
    height: 111px !important;
}

#ctl00_ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderContexto_ContentPlaceHolder1_grdCRUD {
    background-color: whitesmoke !important;
}

#ctl00_ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderContexto_ContentPlaceHolder1_grdCRUD_GridData {
    background-color: white !important;
}

#ctl00_ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderContexto_ContentPlaceHolder1_grdCRUD_ctl00_Pager {
    background-color: whitesmoke !important;
    display: none !important;
}

.fixed-column {
    position: absolute !important;
    right: 0;
    background-color: whitesmoke !important;
    z-index: 1 !important;
    width: 201px;
    border: 1px solid #CFD8DC !important;
}

.fixed-column-header {
    position: absolute !important;
    right: 1px !important;
    background-color: whitesmoke !important;
    z-index: 1 !important;
    width: 201px;
    height: calc(100% - 94px) !important;
    display: flex !important;
    justify-content: center !important;
    border: 1px solid #CFD8DC !important;
    z-index: 1;
}

.cssRadWindow {
    box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.1) !important;
    background-color: whitesmoke !important;
    padding: 0px !important;
    border-radius: 12px !important;
}

.cssWindows {
    width: 100%;
    height: 100%;
    background-color: ghostwhite !important;
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    border-radius: var(--border-radius-size) !important;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 2.0s;
    animation-duration: 2.0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    padding: 0px !important;
    position: absolute !important;
}

.cssWindowsHead {
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    height: 40px;
    padding: 10px 15px 10px 15px;
    background-color: white !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.cssWindowsHeadTitle {
    width: 100%;
    font-size: var(--windows-title-font-size) !important;
    text-align: center !important;
    padding: 3px 0px !important;
    font-weight: 500 !important;
    letter-spacing: .1rem !important;
}

    .cssWindowsHeadTitle i {
        padding-right: 10px !important;
    }

.cssWindowsBody {
    width: calc(100% - 12px) !important;
    height: calc(100% - 137px) !important;
    display: flex !important;
    padding: 10px 0px !important;
    gap: 10px !important;
}

.cssWindowsBodyFrame {
    width: 100% !important;
    height: 100% !important;
    padding: 0px !important;
    display: flex !important;
}

.cssWindowsBodyButton {
    width: calc(100% - 40px) !important;
    height: calc(100% - 84px) !important;
    display: flex !important;
    padding: 10px !important;
}

.cssWindowsFooter {
    width: 100% !important;
    height: 45px !important;
    padding-top: 11px !important;
    position: relative !important;
    background-color: white !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.09) !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) !important;
}

.cssLabelInput {
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
    color: var(--vColorModulo) !important;
    font-weight: bold !important;
}

.cssObligatorio {
    border: 2px solid red !important;
    border-radius: 12px !important;
}

    .cssObligatorio:hover {
        border: 2px solid red !important;
        border-radius: 12px !important;
    }

.cssHoveredStyle {
    border-bottom: 1px solid var(--vColorModulo) !important;
    border-radius: 12px !important;
    box-shadow: 0 -1px 0 0 var(--vColorModulo) inset !important;
}

.cssFocusedStyle {
    border-bottom: 1px solid var(--vColorModulo) !important;
    box-shadow: 0 -1px 0 0 var(--vColorModulo) inset !important;
}

.cssContenedorWindows_Row_1 {
    width: calc(100% - 15px) !important;
    height: 80PX !important;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 20px !important;
    row-gap: 10px !important;
    grid-template-rows: 2fr;
}

.cssContenedorWindows_Row_2 {
    width: calc(100% - 15px) !important;
    height: 80PX !important;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px !important;
    row-gap: 10px !important;
    grid-template-rows: 2fr;
}

.cssContenedorWindows_Row_3 {
    width: calc(100% - 15px) !important;
    height: 80PX !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px !important;
    row-gap: 10px !important;
    grid-template-rows: 2fr;
}
.cssContenedorWindows_Row_center {
    width: calc(100% - 15px) !important;
    display: grid;
    grid-template-columns: 1fr 320px 1fr; /* columna central fija */
    align-items: center;
}
.cssContenedorWindows_Row_center .cssContenedorWindowsControl {
        grid-column: 2;
        text-align: center;
}
.fa-asterisk {
    color: red !important;
}

.cssReadOnly {
    opacity: 1 !important;
}

.cssRadComboBox {
    background-color: white !important;
}

.cssImageWrapper {
    border-radius: 50% !important;
    height: 50px !important;
    max-width: 50px !important;
    width: auto !important;
    position: relative !important;
    padding: 0px !important;
}

.RadToolTipHelp {
    max-width: 500px !important;
    width: calc(100% - 20px) !important;
}

.RadToolTipMargin {
    margin: -3px !important;
}

.RadToolTipOptions {
    margin: 0 !important;
}

#RadToolTipWrapper_ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderContexto_rttAyuda {
    height: fit-content !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    max-width: 500px !important;
    width: calc(100% - 20px);
}

form .RadToolTipMin {
    height: fit-content !important;
    width: fit-content !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
}

form .RadToolTipDesign {
    top: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    right: 0px !important;
    margin: auto !important;
}

.cssDisabledControl {
    pointer-events: none !important; /* Evita interacciones */
    opacity: 0.5 !important; /* Cambia la opacidad para dar un aspecto de deshabilitado */
    background-color: #f0f0f0 !important; /* Color de fondo más claro */
    cursor: not-allowed !important; /* Cambia el cursor */
}

.cssHelp {
    width: 100% !important;
    text-align: center !important;
    height: 40px !important;
}

.cssPercepciones {
    font-weight: bold !important;
    color: black !important;
    background: radial-gradient(788px at 0.7% 3.4%, rgb(164, 231, 192) 0%, rgb(255, 255, 255) 90%);
}

.cssDeducciones {
    font-weight: bold !important;
    color: black !important;
    background: linear-gradient(89deg, rgb(253, 220, 155) 26.2%, rgb(255, 215, 165) 48.5%);
}

.cssNeto {
    font-weight: bold !important;
    color: black !important;
    background: radial-gradient(circle at 10% 20%, rgb(254, 255, 165) 0%, rgb(255, 232, 182) 90%);
}

.imageWrapper {
    text-align: center !important;
    min-height: 50px !important;
}

.cssImagenWrapper {
    padding: 0px !important;
    width: auto !important;
    text-align: center !important;
    max-height: 80px !important;
}

.fixed-column-empleado {
    height: 60px !important;
    width: 181px !important;
}

.cssImagenPerfil {
    position: absolute;
    top: 35px;
    left: 55px;
}

.RadAjaxPanel {
    height: 100% !important;
}

.rtlHeader {
    border-top-left-radius: var(--border-radius-size) !important;
    border-top-right-radius: var(--border-radius-size) !important;
}

.cssWarning {
    border-radius: 12px !important;
    border: 2px solid orange !important;
}

.cssImagenPerfilHover {
    position: relative !important;
    top: 0px !important;
    left: 0px !important;
    transition: 1s ease !important;
    animation: gradient 15s ease infinite !important;
    cursor: pointer !important;
}

    .cssImagenPerfilHover:hover {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        transition: 1s ease;
        opacity: 0.6;
    }

.cssLogoHover {
    transition: 1s ease !important;
    animation: gradient 15s ease infinite !important;
    cursor: pointer !important;
}

    .cssLogoHover:hover {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        transition: 1s ease;
        opacity: 0.6;
    }

textarea {
    resize: none !important;
    padding: 15px !important;
    font-size: 15px;
    text-align: justify !important;
    border: 1px solid var(--vColorModulo) !important;
}

.cssImagenModulo {
    border-radius: var(--border-radius-size);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) !important;
}

body.loading-buttons * {
    pointer-events: none !important;
}

body.loading-buttons {
    cursor: wait !important;
    opacity: 0.7;
}

.cssBtnPublish {
    background-color: whitesmoke !important;
    border-radius: 12px !important;
    border-width: 0px !important;
    color: #A5A1AA !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12), 0 0px 0px rgba(0,0,0,0.2) !important;
    text-align: left !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    height: 35px !important;
}

.cssBtnPublishFunction {
    text-align: center !important;
}

.cssBtnPublishHovered {
    background: #3144B5 !important;
    color: white !important;
    animation: gradient 15s ease infinite !important;
}

.cssBtnCancelarHovered {
    color: #3144B5 !important;
    animation: gradient 15s ease infinite !important;
    border: 2px solid #3144B5 !important;
}

.cssLabel {
    font-size: 14px !important;
    font-family: var(--body-font) !important;
}

.cssTextArea {
    font-family: var(--body-font) !important;
    border-radius: 12px !important;
    resize: none !important;
    font-size: 20px;
    border-width: 0px !important;
}

    .cssTextArea::placeholder {
        font-style: normal !important;
    }

    .cssTextArea::-webkit-input-placeholder {
        font-style: normal !important;
    }

    .cssTextArea:-moz-placeholder {
        font-style: normal !important;
    }

    .cssTextArea::-moz-placeholder {
        font-style: normal !important;
    }

    .cssTextArea:-ms-input-placeholder {
        font-style: normal !important;
    }

.cssTextAreaActive {
    border-radius: 12px !important;
    resize: none !important;
    font-size: 14px !important;
    border-width: 0px !important;
}


/* Botón flotante */
.krakenia-float {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background-color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.3s ease;
}

    .krakenia-float:hover {
        transform: scale(1.1);
    }

    /* Ícono */
    .krakenia-float img {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        padding-top: 1px;
    }

/* Tooltip */
.krakenia-tooltip {
    position: absolute;
    right: 75px;
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    text-align: justify !important;
}

/* Mostrar tooltip al hacer hover */
.krakenia-float:hover .krakenia-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* Mostrar tooltip automáticamente */
.krakenia-tooltip.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto;
}

/* =========================================================
   Modernizacion controlada de botones globales
   Archivo: WebApp\Assets\Style\Main.css
   ========================================================= */

.cssRadButton,
.cssRadButtonGeneral,
.cssRadButtonPost,
.cssRadButtonSave,
.cssRadButtonSend,
.cssRadButtonSendGrid,
.cssRadButtonPrint,
.cssRadButtonPrintMasivo,
.cssRadButtonPrintFormulario,
.cssRadButtonRefresh,
.cssRadButtonShowHide,
.cssRadButtonHelp,
.cssRadButtonImportar,
.cssRadButtonAdvancedSearch,
.cssRadButtonWarning,
.cssRadButtonDescargar,
.cssRadButtonDescargarMasivo,
.cssRadButtonExcel,
.cssRadButtonTimeLine,
.cssRadButtonModulo,
.cssRadButtonSent,
.cssRadButtonSentGrid,
.cssRadButtonHeaderSave,
.cssRadButtonAgregar,
.cssRadButtonAgregarGrid,
.cssRadButtonEditarFormulario,
.cssRadButtonEditar,
.cssRadButtonEdit,
.cssRadButtonCopy,
.cssRadButtonFooterCopy,
.cssRadButtonEliminar,
.cssRadButtonEliminarMasivo,
.cssRadButtonEliminarFormulario,
.cssRadButtonCopiar,
.cssRadButtonMoreOptions,
.cssRadButtonBuscar {
    border-radius: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.cssRadButton .rbText,
.cssRadButtonGeneral .rbText,
.cssRadButtonPost .rbText,
.cssRadButtonSave .rbText,
.cssRadButtonSend .rbText,
.cssRadButtonSendGrid .rbText,
.cssRadButtonPrint .rbText,
.cssRadButtonPrintMasivo .rbText,
.cssRadButtonPrintFormulario .rbText,
.cssRadButtonRefresh .rbText,
.cssRadButtonShowHide .rbText,
.cssRadButtonHelp .rbText,
.cssRadButtonImportar .rbText,
.cssRadButtonAdvancedSearch .rbText,
.cssRadButtonWarning .rbText,
.cssRadButtonDescargar .rbText,
.cssRadButtonDescargarMasivo .rbText,
.cssRadButtonExcel .rbText,
.cssRadButtonTimeLine .rbText,
.cssRadButtonModulo .rbText,
.cssRadButtonSent .rbText,
.cssRadButtonSentGrid .rbText,
.cssRadButtonHeaderSave .rbText,
.cssRadButtonAgregar .rbText,
.cssRadButtonAgregarGrid .rbText,
.cssRadButtonEditarFormulario .rbText,
.cssRadButtonEditar .rbText,
.cssRadButtonEdit .rbText,
.cssRadButtonCopy .rbText,
.cssRadButtonFooterCopy .rbText,
.cssRadButtonEliminar .rbText,
.cssRadButtonEliminarMasivo .rbText,
.cssRadButtonEliminarFormulario .rbText,
.cssRadButtonCopiar .rbText,
.cssRadButtonMoreOptions .rbText,
.cssRadButtonBuscar .rbText {
    color: inherit !important;
    font-weight: 800 !important;
}

.cssRadButton .rbPrimaryIcon,
.cssRadButton .rbSecondaryIcon,
.cssRadButtonGeneral .rbPrimaryIcon,
.cssRadButtonGeneral .rbSecondaryIcon,
.cssRadButtonPost .rbPrimaryIcon,
.cssRadButtonPost .rbSecondaryIcon,
.cssRadButtonSave .rbPrimaryIcon,
.cssRadButtonSave .rbSecondaryIcon,
.cssRadButtonSend .rbPrimaryIcon,
.cssRadButtonSend .rbSecondaryIcon,
.cssRadButtonSendGrid .rbPrimaryIcon,
.cssRadButtonSendGrid .rbSecondaryIcon,
.cssRadButtonPrint .rbPrimaryIcon,
.cssRadButtonPrint .rbSecondaryIcon,
.cssRadButtonPrintMasivo .rbPrimaryIcon,
.cssRadButtonPrintMasivo .rbSecondaryIcon,
.cssRadButtonPrintFormulario .rbPrimaryIcon,
.cssRadButtonPrintFormulario .rbSecondaryIcon,
.cssRadButtonRefresh .rbPrimaryIcon,
.cssRadButtonRefresh .rbSecondaryIcon,
.cssRadButtonShowHide .rbPrimaryIcon,
.cssRadButtonShowHide .rbSecondaryIcon,
.cssRadButtonHelp .rbPrimaryIcon,
.cssRadButtonHelp .rbSecondaryIcon,
.cssRadButtonImportar .rbPrimaryIcon,
.cssRadButtonImportar .rbSecondaryIcon,
.cssRadButtonAdvancedSearch .rbPrimaryIcon,
.cssRadButtonAdvancedSearch .rbSecondaryIcon,
.cssRadButtonWarning .rbPrimaryIcon,
.cssRadButtonWarning .rbSecondaryIcon,
.cssRadButtonDescargar .rbPrimaryIcon,
.cssRadButtonDescargar .rbSecondaryIcon,
.cssRadButtonDescargarMasivo .rbPrimaryIcon,
.cssRadButtonDescargarMasivo .rbSecondaryIcon,
.cssRadButtonExcel .rbPrimaryIcon,
.cssRadButtonExcel .rbSecondaryIcon,
.cssRadButtonTimeLine .rbPrimaryIcon,
.cssRadButtonTimeLine .rbSecondaryIcon,
.cssRadButtonModulo .rbPrimaryIcon,
.cssRadButtonModulo .rbSecondaryIcon,
.cssRadButtonSent .rbPrimaryIcon,
.cssRadButtonSent .rbSecondaryIcon,
.cssRadButtonSentGrid .rbPrimaryIcon,
.cssRadButtonSentGrid .rbSecondaryIcon,
.cssRadButtonHeaderSave .rbPrimaryIcon,
.cssRadButtonHeaderSave .rbSecondaryIcon,
.cssRadButtonAgregar .rbPrimaryIcon,
.cssRadButtonAgregar .rbSecondaryIcon,
.cssRadButtonAgregarGrid .rbPrimaryIcon,
.cssRadButtonAgregarGrid .rbSecondaryIcon,
.cssRadButtonEditarFormulario .rbPrimaryIcon,
.cssRadButtonEditarFormulario .rbSecondaryIcon,
.cssRadButtonEditar .rbPrimaryIcon,
.cssRadButtonEditar .rbSecondaryIcon,
.cssRadButtonEdit .rbPrimaryIcon,
.cssRadButtonEdit .rbSecondaryIcon,
.cssRadButtonCopy .rbPrimaryIcon,
.cssRadButtonCopy .rbSecondaryIcon,
.cssRadButtonFooterCopy .rbPrimaryIcon,
.cssRadButtonFooterCopy .rbSecondaryIcon,
.cssRadButtonEliminar .rbPrimaryIcon,
.cssRadButtonEliminar .rbSecondaryIcon,
.cssRadButtonEliminarMasivo .rbPrimaryIcon,
.cssRadButtonEliminarMasivo .rbSecondaryIcon,
.cssRadButtonEliminarFormulario .rbPrimaryIcon,
.cssRadButtonEliminarFormulario .rbSecondaryIcon,
.cssRadButtonCopiar .rbPrimaryIcon,
.cssRadButtonCopiar .rbSecondaryIcon,
.cssRadButtonMoreOptions .rbPrimaryIcon,
.cssRadButtonMoreOptions .rbSecondaryIcon,
.cssRadButtonBuscar .rbPrimaryIcon,
.cssRadButtonBuscar .rbSecondaryIcon {
    color: inherit !important;
}

.cssRadButton:hover,
.cssRadButtonGeneral:hover,
.cssRadButtonPost:hover,
.cssRadButtonSave:hover,
.cssRadButtonSend:hover,
.cssRadButtonSendGrid:hover,
.cssRadButtonPrint:hover,
.cssRadButtonPrintMasivo:hover,
.cssRadButtonPrintFormulario:hover,
.cssRadButtonRefresh:hover,
.cssRadButtonShowHide:hover,
.cssRadButtonHelp:hover,
.cssRadButtonImportar:hover,
.cssRadButtonAdvancedSearch:hover,
.cssRadButtonWarning:hover,
.cssRadButtonDescargar:hover,
.cssRadButtonDescargarMasivo:hover,
.cssRadButtonExcel:hover,
.cssRadButtonTimeLine:hover,
.cssRadButtonModulo:hover,
.cssRadButtonSent:hover,
.cssRadButtonSentGrid:hover,
.cssRadButtonHeaderSave:hover,
.cssRadButtonAgregar:hover,
.cssRadButtonAgregarGrid:hover,
.cssRadButtonEditarFormulario:hover,
.cssRadButtonEditar:hover,
.cssRadButtonEdit:hover,
.cssRadButtonCopy:hover,
.cssRadButtonFooterCopy:hover,
.cssRadButtonEliminar:hover,
.cssRadButtonEliminarMasivo:hover,
.cssRadButtonEliminarFormulario:hover,
.cssRadButtonCopiar:hover,
.cssRadButtonMoreOptions:hover,
.cssRadButtonBuscar:hover {
    transform: translateY(-1px) !important;
}

.cssRadButton:active,
.cssRadButtonGeneral:active,
.cssRadButtonPost:active,
.cssRadButtonSave:active,
.cssRadButtonSend:active,
.cssRadButtonSendGrid:active,
.cssRadButtonPrint:active,
.cssRadButtonPrintMasivo:active,
.cssRadButtonPrintFormulario:active,
.cssRadButtonRefresh:active,
.cssRadButtonShowHide:active,
.cssRadButtonHelp:active,
.cssRadButtonImportar:active,
.cssRadButtonAdvancedSearch:active,
.cssRadButtonWarning:active,
.cssRadButtonDescargar:active,
.cssRadButtonDescargarMasivo:active,
.cssRadButtonExcel:active,
.cssRadButtonTimeLine:active,
.cssRadButtonModulo:active,
.cssRadButtonSent:active,
.cssRadButtonSentGrid:active,
.cssRadButtonHeaderSave:active,
.cssRadButtonAgregar:active,
.cssRadButtonAgregarGrid:active,
.cssRadButtonEditarFormulario:active,
.cssRadButtonEditar:active,
.cssRadButtonEdit:active,
.cssRadButtonCopy:active,
.cssRadButtonFooterCopy:active,
.cssRadButtonEliminar:active,
.cssRadButtonEliminarMasivo:active,
.cssRadButtonEliminarFormulario:active,
.cssRadButtonCopiar:active,
.cssRadButtonMoreOptions:active,
.cssRadButtonBuscar:active {
    transform: translateY(0) !important;
}

.cssRadButton[disabled],
.cssRadButton.rbDisabled,
.cssRadButton.RadButton.rbDisabled,
.cssRadButtonGeneral[disabled],
.cssRadButtonGeneral.rbDisabled,
.cssRadButtonGeneral.RadButton.rbDisabled,
.cssRadButtonPost[disabled],
.cssRadButtonPost.rbDisabled,
.cssRadButtonPost.RadButton.rbDisabled,
.cssRadButtonSave[disabled],
.cssRadButtonSave.rbDisabled,
.cssRadButtonSave.RadButton.rbDisabled,
.cssRadButtonSend[disabled],
.cssRadButtonSend.rbDisabled,
.cssRadButtonSend.RadButton.rbDisabled,
.cssRadButtonPrint[disabled],
.cssRadButtonPrint.rbDisabled,
.cssRadButtonPrint.RadButton.rbDisabled,
.cssRadButtonRefresh[disabled],
.cssRadButtonRefresh.rbDisabled,
.cssRadButtonRefresh.RadButton.rbDisabled,
.cssRadButtonAgregar[disabled],
.cssRadButtonAgregar.rbDisabled,
.cssRadButtonAgregar.RadButton.rbDisabled,
.cssRadButtonEliminar[disabled],
.cssRadButtonEliminar.rbDisabled,
.cssRadButtonEliminar.RadButton.rbDisabled,
.cssRadButtonEliminarMasivo[disabled],
.cssRadButtonEliminarMasivo.rbDisabled,
.cssRadButtonEliminarMasivo.RadButton.rbDisabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.cssRadButtonAgregar {
    background: #ffffff !important;
    color: #5CB85C !important;
    border: 1px solid rgba(92, 184, 92, .35) !important;
}

.cssRadButtonAgregar:hover {
    background: rgba(92, 184, 92, .10) !important;
    color: #3f9f3f !important;
    border-color: rgba(92, 184, 92, .55) !important;
    box-shadow: 0 12px 24px rgba(92, 184, 92, .16) !important;
}

.cssRadButtonAgregar:active {
    background: #5CB85C !important;
    color: #ffffff !important;
    border-color: #5CB85C !important;
    box-shadow: 0 6px 14px rgba(92, 184, 92, .24) !important;
}

.cssRadButtonAgregarGrid,
.cssRadButtonCopy,
.cssRadButtonCopiar,
.cssRadButtonFooterCopy {
    background: #ffffff !important;
    color: #28A745 !important;
    border: 1px solid rgba(40, 167, 69, .32) !important;
}

.cssRadButtonAgregarGrid:hover,
.cssRadButtonCopy:hover,
.cssRadButtonCopiar:hover,
.cssRadButtonFooterCopy:hover {
    background: rgba(40, 167, 69, .10) !important;
    color: #218838 !important;
    border-color: rgba(40, 167, 69, .52) !important;
    box-shadow: 0 12px 24px rgba(40, 167, 69, .16) !important;
}

.cssRadButtonEliminar {
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #FF4C4C !important;
    border: 1px solid rgba(255, 76, 76, .35) !important;
}

.cssRadButtonEliminarMasivo {
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #FF4C4C !important;
    border: 1px solid rgba(255, 76, 76, .35) !important;
}
.cssRadButtonEliminar:hover,
.cssRadButtonEliminarMasivo:hover {
    background: rgba(255, 76, 76, .10) !important;
    color: #e03131 !important;
    border-color: rgba(255, 76, 76, .55) !important;
    box-shadow: 0 12px 24px rgba(255, 76, 76, .16) !important;
}

.cssRadButtonEliminar:active,
.cssRadButtonEliminarMasivo:active {
    background: #FF4C4C !important;
    color: #ffffff !important;
    border-color: #FF4C4C !important;
    box-shadow: 0 6px 14px rgba(255, 76, 76, .24) !important;
}


.cssRadButtonEliminarFormulario {
    border-radius: 12px !important;
    background: #FF4C4C !important;
    color: #ffffff !important;
    border: 1px solid #FF4C4C !important;
}

.cssRadButtonEliminarFormulario:hover {
    background: #ffffff !important;
    color: #FF4C4C !important;
    border-color: rgba(255, 76, 76, .55) !important;
}

.cssRadButtonEditar,
.cssRadButtonEdit,
.cssRadButtonEditarFormulario {
    background: #ffffff !important;
    color: #FFA500 !important;
    border: 1px solid rgba(255, 165, 0, .36) !important;
}

.cssRadButtonEditar:hover,
.cssRadButtonEdit:hover,
.cssRadButtonEditarFormulario:hover {
    background: rgba(255, 165, 0, .12) !important;
    color: #e69500 !important;
    border-color: rgba(255, 165, 0, .58) !important;
    box-shadow: 0 12px 24px rgba(255, 165, 0, .16) !important;
}

.cssRadButtonSave,
.cssRadButtonHeaderSave,
.cssRadButtonPost,
.cssRadButtonPrintFormulario {
    background: #ffffff !important;
    color: #0062CC !important;
    border: 1px solid rgba(0, 98, 204, .34) !important;
}

.cssRadButtonSave:hover,
.cssRadButtonHeaderSave:hover,
.cssRadButtonPost:hover,
.cssRadButtonPrintFormulario:hover {
    background: rgba(0, 98, 204, .10) !important;
    color: #0056b3 !important;
    border-color: rgba(0, 98, 204, .56) !important;
    box-shadow: 0 12px 24px rgba(0, 98, 204, .16) !important;
}

.cssRadButtonSend,
.cssRadButtonSendGrid,
.cssRadButtonSent,
.cssRadButtonSentGrid,
.cssRadButtonHelp {
    background: #ffffff !important;
    color: #007BFF !important;
    border: 1px solid rgba(0, 123, 255, .34) !important;
}

.cssRadButtonSend:hover,
.cssRadButtonSendGrid:hover,
.cssRadButtonSent:hover,
.cssRadButtonSentGrid:hover,
.cssRadButtonHelp:hover {
    background: rgba(0, 123, 255, .10) !important;
    color: #0069d9 !important;
    border-color: rgba(0, 123, 255, .56) !important;
    box-shadow: 0 12px 24px rgba(0, 123, 255, .16) !important;
}

.cssRadButtonRefresh {
    background: #ffffff !important;
    color: #17A2B8 !important;
    border: 1px solid rgba(23, 162, 184, .34) !important;
}

.cssRadButtonRefresh:hover {
    background: rgba(23, 162, 184, .10) !important;
    color: #138496 !important;
    border-color: rgba(23, 162, 184, .56) !important;
    box-shadow: 0 12px 24px rgba(23, 162, 184, .16) !important;
}

.cssRadButtonPrint,
.cssRadButtonPrintMasivo,
.cssRadButtonExcel {
    background: #ffffff !important;
    color: #217346 !important;
    border: 1px solid rgba(33, 115, 70, .34) !important;
}

.cssRadButtonPrint:hover,
.cssRadButtonPrintMasivo:hover,
.cssRadButtonExcel:hover {
    background: rgba(33, 115, 70, .10) !important;
    color: #1b5e39 !important;
    border-color: rgba(33, 115, 70, .56) !important;
    box-shadow: 0 12px 24px rgba(33, 115, 70, .16) !important;
}

.cssRadButtonImportar,
.cssRadButtonDescargar,
.cssRadButtonDescargarMasivo {
    background: #ffffff !important;
    color: #455A64 !important;
    border: 1px solid rgba(69, 90, 100, .32) !important;
}

.cssRadButtonImportar:hover,
.cssRadButtonDescargar:hover,
.cssRadButtonDescargarMasivo:hover {
    background: rgba(69, 90, 100, .10) !important;
    color: #37474F !important;
    border-color: rgba(69, 90, 100, .54) !important;
    box-shadow: 0 12px 24px rgba(69, 90, 100, .14) !important;
}

.cssRadButtonGeneral,
.cssRadButton,
.cssRadButtonShowHide,
.cssRadButtonAdvancedSearch,
.cssRadButtonModulo,
.cssRadButtonMoreOptions {
    background: #ffffff !important;
    color: var(--vColorModulo) !important;
    border: 1px solid var(--vColorModulo) !important;
}

.cssRadButtonGeneral:hover,
.cssRadButton:hover,
.cssRadButtonShowHide:hover,
.cssRadButtonAdvancedSearch:hover,
.cssRadButtonModulo:hover,
.cssRadButtonMoreOptions:hover {
    background: #ffffff !important;
    color: var(--vColorModulo) !important;
    border-color: var(--vColorModulo) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .12) !important;
}

.cssRadButtonBuscar {
    border-radius: 14px !important;
    background: var(--vColorModulo) !important;
    color: #ffffff !important;
    border: 1px solid var(--vColorModulo) !important;
}

.cssRadButtonBuscar:hover {
    background: #ffffff !important;
    color: var(--vColorModulo) !important;
    border-color: var(--vColorModulo) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .12) !important;
}

.cssRadButtonWarning {
    background: #fff7cc !important;
    color: orangered !important;
    border: 1px solid rgba(255, 193, 7, .55) !important;
}

.cssRadButtonWarning:hover {
    background: orangered !important;
    color: yellow !important;
    border-color: orangered !important;
    box-shadow: 0 12px 24px rgba(255, 69, 0, .16) !important;
}

.cssRadButtonTimeLine {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid rgba(0, 0, 0, .28) !important;
}

.cssRadButtonTimeLine:hover {
    background: rgba(0, 0, 0, .08) !important;
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .45) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12) !important;
}

/* =========================================================
   Preservacion de dimensiones originales de botones
   ========================================================= */

.cssRadButton { height: 35px !important; }
.cssRadButtonGeneral { padding-left: 50px !important; height: 35px !important; }
.cssRadButtonPost { height: 35px !important; }
.cssRadButtonSave { height: 35px !important; }
.cssRadButtonSend { height: 35px !important; }
.cssRadButtonSendGrid { height: 30px !important; }
.cssRadButtonPrint { height: 35px !important; }
.cssRadButtonPrintMasivo { height: 35px !important; }
.cssRadButtonPrintFormulario { height: 35px !important; }
.cssRadButtonRefresh { height: 35px !important; }
.cssRadButtonShowHide { height: 35px !important; }
.cssRadButtonHelp { height: 35px !important; }
.cssRadButtonImportar { height: 35px !important; }
.cssRadButtonAdvancedSearch { height: 35px !important; }
.cssRadButtonWarning { height: 35px !important; }
.cssRadButtonDescargar { height: 35px !important; }
.cssRadButtonDescargarMasivo { height: 35px !important; }
.cssRadButtonExcel { height: 35px !important; }
.cssRadButtonTimeLine { height: 35px !important; }
.cssRadButtonModulo { height: 35px !important; }
.cssRadButtonSent { height: 35px !important; }
.cssRadButtonSentGrid { height: 30px !important; }
.cssRadButtonHeaderSave { height: 35px !important; }
.cssRadButtonAgregar { height: 35px !important; }
.cssRadButtonAgregarGrid { height: 30px !important; }
.cssRadButtonEditarFormulario { height: 35px !important; }
.cssRadButtonEditar { height: 35px !important; }
.cssRadButtonEdit { height: 30px !important; }
.cssRadButtonCopy { height: 30px !important; }
.cssRadButtonFooterCopy { height: 100% !important; }
.cssRadButtonEliminar { height: 30px !important; }
.cssRadButtonEliminarMasivo { height: 35px !important; }
.cssRadButtonEliminarFormulario { height: 35px !important; }
.cssRadButtonCopiar { height: 30px !important; }
.cssRadButtonMoreOptions { height: 30px !important; }
.cssRadButtonBuscar { padding-left: 50px !important; height: 38px !important; }
.cssRadButtonProfileImagen {
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
}