/* OVERRIDE para que Telerik no cargue Roboto desde Google */

/* Declaración falsa de Roboto para evitar que se busque en Google Fonts */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: local('Arial');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Arial');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Arial');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Arial');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Arial');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: local('Arial');
}

/* Con esto mantienes Material, pero evitas Google Fonts */

.RadAjax .raDiv {
    border-radius: var(--border-radius-size) !important;
}

/* Para Chrome, Safari y otros navegadores basados en WebKit */
.RadForm::-webkit-scrollbar {
    width: 12px; /* Ancho de la barra de desplazamiento vertical */
    height: 12px !important; /* Ancho de la barra de desplazamiento vertical */
    z-index: 20 !important;
    position: absolute !important;
}

.RadForm::-webkit-scrollbar-track {
    background: whitesmoke; /* Color del track (pista) */
    z-index: 20 !important;
}

.RadForm::-webkit-scrollbar-thumb {
    background-color: var(--vColorModulo) !important; /* Color del pulgar al pasar el ratón por encima */
    border-radius: var(--border-radius-size) !important;
    border: 3px solid #f1f1f1; /* Espacio entre el pulgar y el track */
    z-index: 20 !important;
}

    .RadForm::-webkit-scrollbar-thumb:hover {
        background-color: var(--vColorModulo) !important; /* Color del pulgar al pasar el ratón por encima */
        z-index: 20 !important;
    }

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

/* Para Chrome, Safari y otros navegadores basados en WebKit */
.RadGrid .rgDataDiv::-webkit-scrollbar {
    width: 12px; /* Ancho de la barra de desplazamiento vertical */
    height: 12px !important; /* Ancho de la barra de desplazamiento vertical */
    z-index: 20 !important;
    position: absolute !important;
}

.RadGrid .rgDataDiv::-webkit-scrollbar-track {
    background: whitesmoke; /* Color del track (pista) */
    z-index: 20 !important;
}

.RadGrid .rgDataDiv::-webkit-scrollbar-thumb {
    background-color: var(--vColorModulo) !important; /* Color del pulgar al pasar el ratón por encima */
    border-radius: var(--border-radius-size) !important;
    border: 3px solid #f1f1f1; /* Espacio entre el pulgar y el track */
    z-index: 20 !important;
}

    .RadGrid .rgDataDiv::-webkit-scrollbar-thumb:hover {
        background-color: var(--vColorModulo) !important; /* Color del pulgar al pasar el ratón por encima */
        z-index: 20 !important;
    }

.RadGrid .rgDataDiv::-webkit-scrollbar-button {
    display: none !important;
}

.RadLabel_Material {
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
    color: var(--text-color-light) !important;
    padding: 2px 0px !important;
    text-transform: none !important;
}


.RadInput_Material {
    padding: 0px !important;
    text-transform: none !important;
}

    .RadInput_Material .riTextBox, .RadInputMgr_Material {
        font-family: var(--body-font) !important;
        font-size: var(--normal-font-size) !important;
        color: var(--text-color-light) !important;
        border-radius: var(--border-radius-size);
        background: white !important;
        background-color: white !important;
    }

    .RadInput_Material input.riTextBox {
        padding: 8px 10px !important;
    }

    .RadInput_Material .riEmpty, .RadInput_Empty_Material {
        color: #717e84 !important;
        font-style: italic !important;
    }

    .RadInput_Material .riDisabled {
        cursor: no-drop !important;
        background: gainsboro !important;
    }

    .RadInput_Material .riFocused, .RadInput_Focused_Material {
        border-bottom-color: var(--vColorModulo) !important;
        box-shadow: 0 -1px 0 0 var(--vColorModulo) inset;
    }

.RadInputDisabled {
    cursor: no-drop !important;
}


.RadButton {
    border-radius: var(--border-radius-size) !important;
    overflow: hidden !important;
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
    text-transform: none !important;
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
}

    .RadButton .rbDecorated {
        /*background-color: transparent !important;
        background-color: rgba(0, 0, 0, 0) !important;
        color: #fff !important;*/
    }

    .RadButton.rbSkinnedButton {
        /*background-color: var(--vColorModulo) !important;*/
    }

.RadButton_Material.rbButton {
    padding: 0px !important;
}

    .RadButton_Material.rbButton:hover {
        padding: 0px !important;
    }

.RadForm_Material {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
}

.RadWindow {
    padding: 0px !important;
    border-radius: var(--border-radius-size) !important;
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
}

.RadWindow_Material .rwContent {
    border-radius: var(--border-radius-size) !important;
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    position: relative !important;
}

.RadWindow.rwInactiveWindow {
    opacity: 1 !important;
}

.RadGrid {
    line-height: 1 !important;
}

.RadGrid_Material {
    color: black !important;
    border-radius: var(--border-radius-size) !important;
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
}

    .RadGrid_Material .rgMasterTable .rgSelectedCell, .RadGrid_Material .rgSelectedRow {
        background-color: var(--vColorModulo) !important;
        color: white !important;
        font-weight: 400 !important;
    }

    .RadGrid_Material .rgHeader, .RadGrid_Material .rgHeader a {
        color: black !important;
        font-weight: bold !important;
        padding: 2px !important;
        font-size: var(--medium-font-size) !important;
        text-align: center !important;
    }

    .RadGrid_Material .rgCommandCell {
        padding: 7px 15px !important;
        background-color: whitesmoke !important;
        height: auto !important;
        /*border-color: transparent !important;*/
        border-top-left-radius: var(--border-radius-size) !important;
        border-top-right-radius: var(--border-radius-size) !important;
    }

        .RadGrid_Material .rgCommandCell .t-button {
            padding: 5px !important;
            border-radius: 12px !important;
        }

    .RadGrid_Material .rgPagerCell {
        background-color: whitesmoke !important;
        border-bottom-left-radius: var(--border-radius-size) !important;
        border-bottom-right-radius: var(--border-radius-size) !important;
    }

    .RadGrid_Material .rgInput, .RadGrid_Material .rgEditRow > td > [type="text"], .RadGrid_Material .rgEditForm td > [type="text"], .RadGrid_Material .rgBatchContainer > [type="text"], .RadGrid_Material .rgFilterBox {
        width: calc(100% - 45px) !important;
        margin-right: 5px !important;
    }

    .RadGrid_Material .rgFilterRow > td {
        border-top: 1px solid #CFD8DC !important;
        border-bottom: 1px solid #CFD8DC !important;
        padding: 5px 10px !important;
    }

    .RadGrid_Material .rgMultiHeaderRow .rgHeader, .RadGrid_Material .rgMultiHeaderRow .rgResizeCol {
        /*border-left: 0px solid #CFD8DC !important;*/
    }

.RadForm_Material.rfdRoundedCorners.rfdTextbox .rfdTextInput, .RadForm_Material.rfdTextarea.rfdRoundedCorners.rfdTextarea textarea, .RadForm_Material.rfdFieldset.rfdRoundedCorners.rfdFieldset fieldset, .RadForm_Material.rfdRoundedCorners .rfdSelect, .RadForm_Material.rfdRoundedCorners .rfdSelectBox li:first-child, .RadForm_Material.rfdRoundedCorners legend, .RadForm_Material.rfdRoundedCorners .rfdSelectBoxDropDown {
    /*border: 1px solid #CFD8DC;*/
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size);
    color: black;
    border-radius: var(--border-radius-size) !important;
    padding: 6px 12px;
    overflow-y: auto !important;
    box-shadow: 0 0px 0 0 #CFD8DC inset;
}

.RadPicker_Material input.riTextBox, .RadPicker_Material input.riTextBox:hover {
    border: 1px solid #CFD8DC;
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    color: black !important;
    border-radius: var(--border-radius-size) !important;
    padding: 8px 10px !important;
}

.RadGrid_Material .rgFiltered {
    background-color: var(--vColorModulo) !important;
    color: white !important;
}

.RadGrid_Material .rgRow > td, .RadGrid_Material .rgAltRow > td, .RadGrid_Material .rgEditRow > td {
    border-left: 1px solid #CFD8DC !important;
    border-top: 1px solid #CFD8DC !important;
    border-bottom: 1px solid #CFD8DC !important;
    padding: 0px 10px !important;
    min-height: 43px !important;
    text-overflow: ellipsis;
}

.RadGrid_Material .rgHeader, .RadGrid_Material th.rgResizeCol, .RadGrid_Material .rgHeaderWrapper {
    border-left: 1px solid #CFD8DC !important;
    border-bottom: 1px solid #CFD8DC !important;
}

.RadForm_Material.rfdCheckbox .rfdCheckboxChecked, .RadForm_Material.rfdCheckbox .rfdCheckboxUnchecked, .RadForm_Material.rfdRadio .rfdRadioChecked, .RadForm_Material.rfdRadio .rfdRadioUnchecked {
    padding: 0px !important;
}

.rgMultiHeaderRow .rgHeader.rgCheck .rfdCheckboxUnchecked:before {
    top: 0px !important;
    left: -7px !important;
}

RadForm_Material.rfdCheckbox .rfdCheckboxChecked:before, .RadForm_Material.rfdCheckbox .rfdCheckboxUnchecked:before {
    top: 0px !important;
    left: 5px;
}

.RadGrid_Material .rgRow, .RadGrid_Material .rgAltRow, .RadGrid_Material .rgEditRow {
    height: calc(1.53846154em + 22px) !important;
}

.RadGrid_Material .rgPagerCell {
    padding: 3px 12px !important;
}

    .RadGrid_Material .rgPagerCell .rgNumPart a.rgCurrentPage {
        border-bottom: 0px solid white !important;
        color: white !important;
        background: var(--vColorModulo) !important;
        border-radius: 50% !important;
        margin: 2px 5px !important;
        width: 30px !important;
        height: 30px !important;
        text-align: center !important;
        align-content: center;
        padding: 0px !important;
    }

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

.RadGrid .rgPagerCell .rgPagerLabel {
    margin: 0 15px 0 15px !important
}

.RadControl .t-button-icontext .t-text, .RadGrid .t-button-icontext .t-text, .RadTreeList .t-button-icontext .t-text, .RadCalendar .t-button-icontext .t-text {
    padding: 3px 6px 0 5px !important;
}

.RadComboBox_Material {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    border-bottom: 1px solid #CFD8DC;
    border-radius: var(--border-radius-size) !important;
}

RadComboBox_Material:hover {
    border-color: transparent !important;
    border-bottom: 1px solid #CFD8DC !important;
}

.RadComboBox_Material .rcbInner {
    cursor: pointer !important;
    border-color: transparent !important;
    border-radius: var(--border-radius-size) !important;
}

    .RadComboBox_Material .rcbInner .rcbInput {
        cursor: pointer !important;
    }

.RadComboBox_Material .rcbHovered {
    border-bottom: 1px solid #CFD8DC;
}

.RadComboBox .rcbDisabled {
    background-color: gainsboro !important;
}

    .RadComboBox .rcbDisabled .rcbInput {
        cursor: no-drop !important;
    }

.RadCalendar span.rcTitle {
    padding: 10px 0 !important;
}

.RadCalendar_Material .rcTitlebar {
    border-color: var(--vColorModulo) !important;
    background-color: var(--vColorModulo) !important;
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    color: white !important;
    border-top-left-radius: var(--border-radius-size) !important;
    border-top-right-radius: var(--border-radius-size) !important;
}

.RadCalendar_Material .rcPrev, .RadCalendar_Material .rcNext, .RadCalendar_Material .rcFastPrev, .RadCalendar_Material .rcFastNext {
    border-color: var(--vColorModulo) !important;
    background-color: var(--vColorModulo) !important;
    font-family: var(--body-font) !important;
    color: white !important;
}

.RadCalendar_Material {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    border-radius: var(--border-radius-size) !important;
    box-shadow: 0 0px 0 0 #CFD8DC inset !important;
    border: 1px solid #CFD8DC !important;
}

    .RadCalendar_Material .rcSelected a {
        color: white !important;
        background-color: var(--vColorModulo) !important;
    }

    .RadCalendar_Material .rcWeek th {
        font-weight: bold !important;
    }

.RadCalendarMonthView_Material {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    border-radius: var(--border-radius-size) !important;
}

    .RadCalendarMonthView_Material .rcSelected a {
        color: white !important;
        background-color: var(--vColorModulo) !important;
        font-weight: bold !important;
    }


    .RadCalendarMonthView_Material a {
        border-radius: var(--border-radius-size) !important;
    }

    .RadCalendarMonthView_Material #rcMView_Today {
        background-color: var(--vColorModulo) !important;
        color: white !important;
        border-radius: var(--border-radius-size) !important;
        overflow: hidden !important;
        text-transform: none !important;
        font-family: var(--body-font) !important;
        cursor: pointer !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
        transition: 0.3s all ease !important;
    }

    .RadCalendarMonthView_Material #rcMView_OK {
        background-color: var(--vColorModulo) !important;
        color: white !important;
        border-radius: var(--border-radius-size) !important;
        overflow: hidden !important;
        text-transform: none !important;
        font-family: var(--body-font) !important;
        cursor: pointer !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
        transition: 0.3s all ease !important;
    }

    .RadCalendarMonthView_Material #rcMView_Cancel {
        background-color: var(--vColorModulo) !important;
        color: white !important;
        border-radius: var(--border-radius-size) !important;
        overflow: hidden !important;
        text-transform: none !important;
        font-family: var(--body-font) !important;
        cursor: pointer !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
        transition: 0.3s all ease !important;
    }

    .RadCalendarMonthView_Material td.rcButtons {
        border-bottom-left-radius: var(--border-radius-size) !important;
        border-bottom-right-radius: var(--border-radius-size) !important;
    }

.RadMenu_Material .rmPopup, .RadMenu_Material .rmGroup {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    border-radius: var(--border-radius-size) !important;
    padding: 0px !important;
}

    .RadMenu_Material .rmPopup .rmFocused > .rmLink, .RadMenu_Material .rmGroup .rmFocused > .rmLink {
        box-shadow: 0 0 0 0px rgba(178, 192, 198, 0.5) inset !important;
    }

    .RadMenu_Material .rmPopup .rmLink:hover, .RadMenu_Material .rmGroup .rmLink:hover {
        border-color: var(--vColorModulo) !important;
        color: white !important;
        background-color: var(--vColorModulo) !important;
        border-radius: var(--border-radius-size) !important;
    }


.RadToolTip_Material {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    border-radius: var(--border-radius-size) !important;
    padding: 0px !important;
    background-color: var(--vColorModulo) !important;
    border-color: var(--vColorModulo) !important;
    opacity: 1 !important;
    margin: 10px !important;
}

    .RadToolTip_Material .rtRelativeWrapper {
        padding: 1px !important;
        border-radius: var(--border-radius-size) !important;
    }

    .RadToolTip_Material .rtCalloutTopRight:before, .RadToolTip_Material .rtCalloutTopCenter:before, .RadToolTip_Material .rtCalloutTopLeft:before {
        border-bottom-color: var(--vColorModulo) !important;
    }

.RadGrid_Material .rgPagerCell .RadInput, .RadGrid_Material .rgPagerCell .RadComboBox, .RadGrid_Material .rgPagerCell .RadDropDownList {
    background-color: white !important;
}

.RadComboBoxDropDown_Material {
    max-height: 300px !important;
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    border-radius: var(--border-radius-size) !important;
}

    .RadComboBoxDropDown_Material .rcbList {
        padding: 8px !important;
    }

    .RadComboBoxDropDown_Material .rcbHovered {
        background-color: var(--vColorModulo) !important;
        color: white !important;
        border-radius: var(--border-radius-size) !important;
    }

.rcbTemplate:hover {
    background-color: var(--vColorModulo) !important;
    color: white !important;
    border-radius: var(--border-radius-size) !important;
}

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

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

.RadForm_Material .rfdCheckboxChecked:before, .RadForm_Material .rfdRadioChecked:before, .RadForm_Material .rfdCheckboxUnchecked:hover:before, .RadForm_Material .rfdRadioUnchecked:hover:before, .RadForm_Material .rfdCheckboxChecked .rfdRippleContainer, .RadForm_Material .rfdRadioChecked .rfdRippleContainer, .RadForm_Material .rfdCheckboxUnchecked:hover .rfdRippleContainer, .RadForm_Material .rfdRadioUnchecked:hover .rfdRippleContainer {
    color: var(--first-color-light) !important;
}

.rgMultiHeaderRow .rgHeader.rgCheck .rfdCheckboxChecked:before {
    top: 0px !important;
    left: -7px !important;
}

.RadForm_Material.rfdCheckbox .rfdCheckboxChecked:before {
    top: 0px !important;
    left: 5px;
}

.RadForm_Material .rfdCheckboxChecked .t-ripple-effect-icon, .RadForm_Material .rfdCheckboxUnchecked .t-ripple-effect-icon {
    width: 0px !important;
    height: 0px !important;
}

.RadButton_Material.k-switch-on .k-switch-container {
    color: #fff !important;
    background: #5CB85C !important;
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    width: 25px !important;
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    border-radius: var(--border-radius-size) !important;
}

.RadButton_Material.k-switch-off .k-switch-container {
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    width: 25px !important;
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    border-radius: var(--border-radius-size) !important;
}

.k-switch-handle {
    width: 25px !important;
    height: 25px !important;
}

.k-switch-on .k-switch-handle {
    left: calc(100% - 25px) !important;
}

.k-switch-label-on, .k-switch-label-off {
    text-transform: none !important;
}

.k-switch-label-on {
    left: 15px !important;
}

.k-switch-label-off {
    right: 11px !important;
}

.RadGrid_Material .rgHeaderDiv {
    margin-right: 0px !important;
}

.RadForm_Material.rfdRoundedCorners .rfdSkinnedButton, .RadForm_Material.rfdRoundedCorners .rfdSelect:hover, .RadForm_Material.rfdRoundedCorners .rfdSelect:active, .RadForm_Material.rfdRoundedCorners .rfdSelect:focus, .RadForm_Material.rfdRoundedCorners .rfdSelectBox, .RadForm_Material.rfdRoundedCorners .rfdSelectBox ul {
    background-color: white !important;
    color: #FFA500 !important;
    border: 0px solid #FFA500 !important;
    height: 33px !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0.12),0 0px 0px rgba(0,0,0,0.2) !important;
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    text-transform: none !important;
    border-radius: var(--border-radius-size) !important;
}


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

.RadGrid_Material .rgEditRow, .RadGrid_Material .rgFilterRow, .RadGrid_Material .rgGroupHeader {
    border: 1px solid #CFD8DC !important;
}

.RadWindow div.rwExternalContent iframe {
    background-color: ghostwhite !important;
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    text-transform: none !important;
    border-radius: var(--border-radius-size) !important;
    padding: 0px !important;
}

.TelerikModalOverlay {
    opacity: 0.7 !important;
}

.RadTabStrip {
    overflow-y: auto !important;
}

.RadTabStrip_Material {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    text-transform: none !important;
    border-radius: var(--border-radius-size) !important;
}

    .RadTabStrip_Material.rtsLeft {
        box-shadow: 0px 0 0px rgba(0, 0, 0, 0.2) !important;
    }

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

    .RadTabStrip_Material .rtsLevel1 {
        border-color: #40BAC6 !important;
        background-color: white !important;
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1) !important;
        border-radius: var(--border-radius-size) !important;
        width: 100% !important;
    }

        .RadTabStrip_Material .rtsLevel1 .rtsLink {
            background-color: transparent !important;
            color: #A5A1AA !important;
            border-radius: var(--border-radius-size) !important;
            font-weight: bold !important;
            padding: 6px 5px 6px 5px !important;
            margin-bottom: 3px !important;
        }

    .RadTabStrip_Material .rtsSelected .rtsLink {
        background-color: var(--vColorModulo) !important;
        color: white !important;
        font-weight: bold !important;
    }

    .RadTabStrip_Material.rtsHorizontal .rtsSelected .rtsLink:before {
        border-bottom: 3px solid #3144B5 !important;
    }

    .RadTabStrip_Material.rtsVertical .rtsSelected .rtsLink:before {
        border-right: 0px !important;
    }

.RadButton.rbDisabled, rfdInputDisabled {
    cursor: no-drop !important;
}

.RadSwitch.RadButton.rbDisabled :hover {
    color: #455A64 !important;
    background-color: white !important;
}


.rwOkBtn {
    background-color: white !important;
    color: var(--vColorModulo) !important;
    border-radius: var(--border-radius-size) !important;
    overflow: hidden !important;
    text-transform: none !important;
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
    width: 120px !important;
    height: 32px !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
    transition: 0.3s all ease !important;
    border-color: white !important;
}

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

.rwCancelBtn {
    background-color: white !important;
    color: var(--vColorModulo) !important;
    border-radius: var(--border-radius-size) !important;
    overflow: hidden !important;
    text-transform: none !important;
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
    width: 120px !important;
    height: 32px !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2) !important;
    transition: 0.3s all ease !important;
    border-color: white !important;
}

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

.RadMultiPage .rmpView {
    position: relative !important;
}

.k-switch {
    width: 68px !important
}

html .RadUpload_Material .ruSelectWrap .ruFileWrap {
    border-radius: 12px !important;
}

html .RadUpload_Material .ruSelectWrap .ruBrowse {
    background-color: var(--vColorModulo) !important;
    color: white !important;
    border-radius: var(--border-radius-size) !important;
    overflow: hidden !important;
    text-transform: none !important;
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
}

    html .RadUpload_Material .ruSelectWrap .ruBrowse :hover {
        background-color: white !important;
        color: var(--vColorModulo) !important;
    }


.RadEditor_Material {
    border-radius: var(--border-radius-size) !important;
    overflow: hidden !important;
    text-transform: none !important;
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
}

.cssRadEditor_ScrollY {
    overflow-y: scroll !important;
}

.reContent iframe {
    padding: 5px !important;
    width: calc(100% - 15px) !important;
    height: calc(100% - 10px) !important;
}

.RadColorPicker_Material {
    border-radius: var(--border-radius-size) !important;
    text-transform: none !important;
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
}

    .RadColorPicker_Material .rcpIcon, .RadColorPicker_Material .rcpIcon a, .RadColorPicker_Material .rcpButton {
        border-radius: var(--border-radius-size) !important;
    }

    .RadColorPicker_Material .rcpIcon {
        padding: 7px 0 !important;
        width: 6.142857em !important;
    }

        .RadColorPicker_Material .rcpIcon em {
            margin: -5px -40px 0px !important;
            border-radius: var(--border-radius-size) !important;
            width: 50px !important;
            height: 29px !important;
        }

    .RadColorPicker_Material .rcpPalette {
        border-radius: var(--border-radius-size) !important;
    }


.RadPicker_Material {
    padding: 0px !important;
    text-transform: none !important;
}

    .RadPicker_Material .riTextBox, .RadInputMgr_Material {
        font-family: var(--body-font) !important;
        font-size: var(--normal-font-size) !important;
        color: var(--text-color-light) !important;
        border-radius: var(--border-radius-size);
    }

    .RadPicker_Material input.riTextBox {
        padding: 8px 10px !important;
        border: 1px solid #CFD8DC !important;
        border-top: 0px !important;
        border-left: 0px !important;
        border-right: 0px !important;
    }

    .RadPicker_Material .riDisabled {
        cursor: no-drop !important;
        background: gainsboro !important;
    }

    .RadPicker_Material:hover
    .RadInput:not(.RadInputDisabled) {
        background-color: transparent !important;
        box-shadow: none !important;
        border-color: #CFD8DC !important;
    }

    .RadPicker_Material:hover input.riTextBox {
        border-bottom: 2px solid !important;
        border-bottom-color: var(--vColorModulo) !important;
        box-shadow: 0 -1px 0 0 var(--vColorModulo) inset;
    }

    .RadPicker_Material .RadInput:before {
        border: none !important;
    }

.RadInputDisabled {
    cursor: no-drop !important;
}


.RadListBox_Material {
    border-radius: var(--border-radius-size) !important;
    text-transform: none !important;
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
    height: 38px !important;
}

.RadListBox.rlbFixedHeight .rlbGroup {
    border-radius: var(--border-radius-size) !important;
}

.RadListBox_Material .rlbItem {
    padding: 8px 13px !important;
    border-radius: var(--border-radius-size) !important;
}

.RadListBox_Material .rlbSelected.rlbItem {
    color: #455A64 !important;
}

.RadListBox_Material .rlbSelected.rlbItem {
    overflow: hidden !important;
}

.RadListBox_Material .rlbGroup, .RadListBox_Material .rlbTemplateContent {
    overflow: hidden !important;
}



.RadTabStrip.rtsDisabled, .RadTabStrip .rtsDisabled, .RadTabStrip .rtsDisabled .rtsLink {
    cursor: no-drop !important;
}

.RadUploadProgressArea_Material {
    border-radius: var(--border-radius-size) !important;
    text-transform: none !important;
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
}

    .RadUploadProgressArea_Material .ruBody {
        height: calc(100% - 20px) !important;
    }

    .RadUploadProgressArea_Material .ruProgressBar {
        height: 20px !important;
        border-radius: var(--border-radius-size) !important;
    }

    .RadUploadProgressArea_Material .ruProgress {
        height: 20px !important;
        border-radius: var(--border-radius-size) !important;
        background: var(--vColorModulo) !important;
    }

.RadUploadProgressArea .ruProgressBar {
    margin-bottom: 15px !important;
}


.RadButton_Material .rbToggleCheckboxChecked, .RadButton_Material .rbToggleCheckboxFilled, .RadButton_Material.rbCheckBox .rbToggleCheckboxChecked.rbIcon, .RadButton_Material.rbRadioButton .rbToggleRadioChecked.rbIcon, .RadButton_Material.rbToggled .rbToggleCheckBoxChecked.rbIcon, .RadButton_Material.rbToggled .rbToggleRadioChecked.rbIcon, .RadButton_Material .rbText.rbToggleCheckboxChecked:before, .RadButton_Material .rbText.rbToggleRadioChecked:before, .RadButton_Material .rbText.rbToggleCheckbox .rbRippleContainer, .RadButton_Material .rbText.rbToggleRadio .rbRippleContainer {
    color: var(--vColorModulo) !important;
}

    .RadButton_Material .rbToggleCheckbox:before, .RadButton_Material .rbToggleCheckboxChecked:before, .RadButton_Material .rbToggleCheckBoxChecked:before, .RadButton_Material .rbToggleCheckboxFilled:before, .RadButton_Material .rbToggleRadio:before, .RadButton_Material .rbToggleRadioChecked:before, .RadButton_Material.RadButton span.rbText.rbToggleCheckbox:before, .RadButton_Material.RadButton span.rbText.rbToggleCheckboxChecked:before, .RadButton_Material.RadButton span.rbText.rbToggleRadio:before, .RadButton_Material.RadButton span.rbText.rbToggleRadioChecked:before {
        font-size: 20px !important;
    }

.RadOrgChart {
    white-space: normal !important;
    text-align: center !important;
}

.RadOrgChart_Material {
    font-family: var(--body-font) !important;
}

    .RadOrgChart_Material .rocGroup {
        padding: 0 13px 13px !important;
        border-radius: 12px !important;
        background: #f4f7f8 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.2) !important;
        min-width: 350px !important;
    }

.RadOrgChart .rocItem {
    padding-left: 5.66666667em;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.2) !important;
}

.RadOrgChart .rocItemText {
    font-weight: bold !important;
    text-wrap: nowrap !important;
}

.rocToolbar_Material .rocToolbarButton {
    display: none !important;
}

.rocNodeFields {
    text-align: center !important;
    font-weight: bold !important;
    font-size: 15px !important;
}

.RadOrgChart_Material .rocItemField {
    margin-top: 10px !important;
    margin-bottom: 0px !important;
}

.RadOrgChart .rocItem, .RadOrgChart .rocItemTemplate {
    width: 340px !important;
    height: 105px !important;
    padding-top: 7px !important;
    padding-bottom: 0px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.RadOrgChart .rocItemWrap {
    width: 340px !important;
}

.RadOrgChart_Material .rocNodeList {
    margin-top: 0px !important;
}

.RadOrgChart .rocItemList {
    display: flex !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    transition: 1s ease !important;
}

.RadOrgChart_Material .rocItemWrap {
    margin: 10px 10px 0px 10px;
    transition: 1s ease !important;
}

.RadSearchBox_Material .rsbInner {
    border-radius: 8px !important;
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
}

.RadSearchBox_Material .rsbButtonSearch {
    background: linear-gradient(to right, #3144B5, #45E0A3);
    color: white !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}


.RadCalendarMultiView_Material .rcMainTable {
    border-collapse: collapse;
    background-color: white;
    border-radius: 12px !important;
}

.RadCalendarMultiView_Material td.rcLastRow {
    border-bottom: 1px solid var(--vColorModulo) !important;
}

.RadCalendar_Material .rcTitlebar {
    border-color: transparent !important;
    background-color: var(--vColorModulo) !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    padding: 0px !important;
}

.RadCalendarMultiView_Material .rcMainTable .rcTitle {
    padding: 7px 0 !important;
    background-color: var(--vColorModulo) !important;
}

.RadCalendar .rcRow:first-child td, .RadCalendar .rcRow:first-child th {
    padding-top: 0px !important;
}

.RadCalendar .rcRow th + td, .RadCalendar .rcRow td:first-child {
    padding-top: 0px !important;
}

.RadCalendar_Material .rcWeek th {
    padding: 5px 9px 5px 9px !important;
}

.RadCalendar .rcRow:last-child td, .RadCalendar .rcRow:last-child th {
    padding-bottom: 2px !important;
}

.RadCalendar_Material .rcRow a, .RadCalendar_Material .rcRow span {
    padding: 4px !important;
}

.RadHtmlChart_Material {
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
}

    .RadHtmlChart_Material text {
        font-family: var(--body-font) !important;
        font-weight: bold !important;
        fill: rgb(69, 90, 100) !important;
        color: rgb(69, 90, 100) !important;
        font-size: small !important;
    }


.RadHtmlChart svg g g template {
    font-weight: bold !important;
}

.RadSlider .rslHorizontal {
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
}

.RadSlider_Material .rslItem, .RadSlider_Material .rslLargeTick span {
    font-family: var(--body-font) !important;
    font-size: var(--medium-font-size) !important;
    font-weight: 500;
}

.RadSlider_Material .rslSelectedregion {
    background-color: var(--vColorModulo) !important;
}

.RadSlider_Material .rslTrack a.rslDraghandle:after {
    background-color: var(--vColorModulo) !important;
}

.RadSlider_Material .rslHorizontal.rslMiddle a.rslHandle {
    top: 2.0em !important;
}

.RadSlider_Material .rslSelectedregion {
    background-color: var(--vColorModulo) !important;
    height: 5px !important;
}

.RadSlider .rslHorizontal.rslMiddle .rslTrack {
    height: 5px !important;
}

.RadSlider_Material .rslTrack a.rslDraghandle:after {
    width: 15px !important;
    height: 15px !important;
}

.ruUploadProgress {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
}

.RadUpload .ruFileLI .ruButton {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    font-weight: bold;
}

.RadTreeList_Material {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    border-radius: var(--border-radius-size) !important;
}

    .RadTreeList_Material tr.rtlHeader th {
        color: black !important;
        font-weight: bold !important;
        font-size: var(--medium-font-size) !important;
    }

    .RadTreeList_Material .rtlREdit, .RadTreeList_Material .rtlR, .RadTreeList_Material .rtlA {
        font-family: var(--body-font) !important;
        font-size: var(--normal-font-size) !important;
    }

.RadTreeList tr.rtlHeader .rtlCF {
    padding-left: 53px !important;
}

.RadTreeList_Material .rtlRSel {
    background-color: var(--vColorModulo) !important;
    color: white !important;
}

.RadTreeList_Material .rtlREdit td, .RadTreeList_Material .rtlR td, .RadTreeList_Material .rtlA td {
    padding: 0px 15px !important;
}

.RadTreeList .rtlTable td.rtlL {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.RadTreeList_Material .rtlExpandIcon:before, .RadTreeList_Material .rtlCollapseIcon:before, .RadTreeList_Material .t-i-arrow-down:before {
    color: var(--vColorModulo) !important;
    font-size: 20px !important;
    font-weight: bold !important;
}

.RadForm_Material .rfdCheckboxChecked:before, .RadForm_Material .rfdRadioChecked:before, .RadForm_Material .rfdCheckboxUnchecked:hover:before, .RadForm_Material .rfdRadioUnchecked:hover:before, .RadForm_Material .rfdCheckboxChecked .rfdRippleContainer, .RadForm_Material .rfdRadioChecked .rfdRippleContainer, .RadForm_Material .rfdCheckboxUnchecked:hover .rfdRippleContainer, .RadForm_Material .rfdRadioUnchecked:hover .rfdRippleContainer {
    color: var(--first-color-light) !important;
}

.RadTreeList_Material .rtlREdit, .RadTreeList_Material .rtlR, .RadTreeList_Material .rtlA {
    height: calc(1.53846154em + 15px) !important;
}

    .RadTreeList_Material .rtlR td, .RadTreeList_Material .rtlA td, .RadTreeList_Material .rtlREdit td, .RadTreeList_Material .rtlEditForm {
        border: solid 1px #CFD8DC !important;
    }

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

.RadTabStrip .rtsUL {
    padding: 0px 5px !important;
    height: auto !important;
    overflow-y: auto !important;
}

.rtsVertical .rtsLevel {
    height: auto !important;
    display: contents !important;
    vertical-align: bottom !important;
}

.rtsLevel.rtsLevel2 > .rtsUL {
    background-color: #eeeeee !important;
    border-radius: 12px;
    padding: 5px 5px 3px 5px !important;
    margin: 0px 0px 5px 15px !important;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    transition: 1s all ease !important;
    width: calc(100% - 30px) !important;
}

.RadTabStrip_Material .rtsLevel1 ~ .rtsLevel {
    border-color: #40BAC6 !important;
    background-color: white !important;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1) !important;
    border-radius: var(--border-radius-size) !important;
    width: 100% !important;
}

    .RadTabStrip_Material .rtsLevel1 ~ .rtsLevel .rtsLink {
        background-color: transparent !important;
        color: #A5A1AA !important;
        border-radius: var(--border-radius-size) !important;
        font-weight: bold !important;
        padding: 6px 5px 6px 5px !important;
        margin-bottom: 3px !important;
    }

    .RadTabStrip_Material .rtsLevel1 ~ .rtsLevel .rtsSelected .rtsLink {
        background-color: var(--vColorModulo) !important;
        color: white !important;
        font-weight: bold !important;
    }

.RadTabStrip_Material.rtsHorizontal .rtsLevel1 ~ .rtsLevel .rtsSelected .rtsLink:before {
    border-bottom: 3px solid #3144B5 !important;
}

.RadTabStrip_Material.rtsVertical .rtsLevel1 ~ .rtsLevel .rtsSelected .rtsLink:before {
    border-right: 0px !important;
}

.RadTabStrip .rtsLevel1 ~ .rtsLevel .rtsHovered .rtsLink {
    text-decoration: none !important;
}

.RadTabStrip_Material .rtsHovered .rtsLink {
    background-color: var(--vColorModulo) !important;
    color: white !important;
}


.RadPanelBar {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    text-transform: none !important;
    border-radius: var(--border-radius-size) !important;
    border: 0px !important;
    font-weight: bold !important;
    color: #A5A1AA !important;
}

.RadPanelBar_Material .rpRootLink, .RadPanelBar_Material .rpHeaderTemplate {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    text-transform: none !important;
    border-radius: var(--border-radius-size) !important;
    border: 0px !important;
    font-weight: bold !important;
    color: #A5A1AA;
    padding: 6px 5px 6px 5px !important;
    margin-bottom: 3px !important;
}

.RadPanelBar_Material .rpSelected.rpLink {
    background-color: var(--vColorModulo) !important;
    color: white !important;
    border-radius: var(--border-radius-size) !important;
}

.RadPanelBar_Material .rpHovered {
    background-color: var(--vColorModulo) !important;
    color: white !important;
    border-radius: var(--border-radius-size) !important;
}

.RadPanelBar_Material .rpExpanded {
    background-color: var(--vColorModulo) !important;
    color: white !important;
    border-radius: var(--border-radius-size) !important;
}

    .RadPanelBar_Material .rpExpanded.rpRootLink + .rpSlide > .rpGroup {
        background-color: #eeeeee !important;
        border-radius: 12px;
        padding: 5px 5px 3px 5px !important;
        margin: 0px 0px 5px 15px !important;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        transition: 1s all ease !important;
        width: calc(100% - 20px) !important;
    }

    .RadPanelBar_Material .rpExpanded .rpExpandHandle {
        color: white !important;
    }

.RadPanelBar_Material .rpExpandable .rpExpandHandle {
    top: 0px !important;
}

.RadPanelBar_Material .rpExpanded.rpRootLink + .rpSlide > .rpGroup {
    border-bottom: 0px solid #CFD8DC !important;
}

.RadPanelBar .rpGroup .rpLink {
    margin-bottom: 3px !important;
    font-weight: 500 !important;
}

.RadPanelBar_Material .rpFocused {
    box-shadow: 0 0 0 0px rgba(178, 192, 198, 0.5) inset !important;
}

.RadPanelBar_Material {
    position: relative;
    overflow-y: auto !important;
    border-radius: 12px !important;
}

.RadAutoCompleteBox .p-icon:before, .RadCloudUpload .p-icon:before, .RadComboBox .p-icon:before, .RadComboBoxDropDown .p-icon:before, .RadDropDownList .p-icon:before, .RadPanelBar .rpExpandHandle .p-icon:before, .RadScheduler .p-icon:before, .RadRotator .p-icon:before, .RadSpreadsheet .p-icon:before {
    font-size: 23px !important;
}

.RadSearchBox_Material .rsbInput {
    width: 100px !important;
}

.RadGrid_Material .rgGroupPanel, .RadGrid_Material .rgGroupPanel caption {
    background: #f4f7f8 !important;
    color: black !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    padding: 5px 30px !important;
}

.RadPanelBar.rpDisabled, .RadPanelBar .rpDisabled {
    cursor: not-allowed !important;
}

.RadProgressBar_Material .rpbStateSelected, .RadProgressBar_Material .rpbStateSelected:hover, .RadProgressBar_Material .rpbStateSelected:link, .RadProgressBar_Material .rpbStateSelected:visited, .RadProgressBar_Material .rpbChunk.rpbStateSelected {
    border-color: var(--vColorModulo) #f8fafb var(--vColorModulo) var(--vColorModulo) !important;
    border-radius: var(--border-radius-size) !important;
}

    .RadProgressBar_Material .rpbStateSelected, .RadProgressBar_Material .rpbStateSelected:hover, .RadProgressBar_Material .rpbStateSelected:link, .RadProgressBar_Material .rpbStateSelected:visited {
        background-color: var(--vColorModulo) !important;
        border-radius: var(--border-radius-size) !important;
    }

.RadProgressBar_Material {
    background-color: #CFD8DC;
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    color: var(--text-color-light) !important;
    border-color: transparent !important;
    border-radius: var(--border-radius-size) !important;
    height: 35px !important;
}

.RadProgressBar .rpbLabelWrapper {
    border: 0px solid transparent !important;
}

.RadProgressBar_Material .rpbLabel {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    color: var(--text-color-light) !important;
    font-weight: bold !important;
}

.RadProgressBar_Material.rpbHorizontal .rpbLabel {
    padding: 9px 9px 0 !important;
}

.RadGrid_Material td.rgGroupCol, .RadGrid_Material td.rgExpandCol {
    padding: 0px !important;
}

.RadComboBoxDropDown_Material .rcbItem > label, .RadComboBoxDropDown_Material .rcbHovered > label, .RadComboBoxDropDown_Material .rcbSelected > label, .RadComboBoxDropDown_Material .rcbDisabled > label, .RadComboBoxDropDown_Material .rcbCheckAllItems > label, .RadComboBoxDropDown_Material .rcbCheckAllItemsHovered > label {
    cursor: pointer !important;
}

.RadCalendarTimeView_Material th {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    background-color: var(--vColorModulo) !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.RadCalendarTimeView_Material td.rcSelected a {
    color: var(--vColorModulo) !important;
    font-weight: bold !important;
}

.RadCalendarTimeView_Material a {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
}

.RadCalendarTimeView_Material {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    border-radius: 12px !important;
}

.RadPicker_Material input.riTextBox {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    text-align: center !important;
}