@font-face {
    font-family: "Fraunces";
    src: url("resources/font/frauncessoftwonkopszwght.ttf");
}

:root {
    --main-color: #3a743b;
    --color-btn: #98B66E;
    --color-text: #656861;
    --color-gradiente-uno: #8fc33a;
    --color-gradiente-dos: #739b2e;
}

.auth-locked-window .x-window-body {
    background-image: url(../images/Background.jpg);
    background-size: cover;
    background-repeat: repeat;
}

.auth-locked-window .x-form-trigger {
    display: table-cell;
    vertical-align: top;
    cursor: pointer;
    overflow: hidden;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 1.6 !important;
    white-space: nowrap;
}

.x-form-trigger {
    display: table-cell;
    vertical-align: top;
    cursor: pointer;
    overflow: hidden;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 1.6 !important;
    white-space: nowrap;
}

.auth-locked-window .auth-password-trigger:before {

    width: 22px !important;
    height: 22px !important;
    -webkit-mask: url('../images/icons/eye-open.svg') no-repeat center;
    mask: url('../images/icons/eye-open.svg') no-repeat center;
}

#loading {
    position: absolute;
    top: 50%;
    width: 98%;
    margin-top: -70px
}

#loading .title {
    font-family: "Exo", sans-serif;
    font-size: 1.5em;
    color: gray;
    text-align: center;
    white-space: nowrap;
    display: block;
    margin-bottom: 30px;
}

#loading .logo {
    background: url('../images/load-gif.gif') no-repeat center;
    display: block;
    height: 100px;
    padding: 15px;
}


.sencha-dash-dash-headerbar {
    padding: 0 30px 0 0 !important;
    position: fixed;
    width: 100%;
    z-index: 10;
    border: none;
    background-color: #fff !important;
    background-image: -webkit-linear-gradient(top, #fff, #fff) !important;
    border: #fff !important;
}

.sencha-logo .main-logo {
    line-height: 10px;
}

.sencha-logo {
    background-color: #fff;
    /* height: 65px; */
    font-size: 16px;
    color: rgb(29, 28, 28);
    text-align: center;
    padding: 2px;
}



.icon-logo:before {
    /* content:url('../images/logo_view.png') !important; */
    content: url('../images/logoLg-.png') !important;
    top: 2px !important;

}


#app-header {
    background-color: #fff;
    /* background-image: url('../images/header_bg.png'); */
}


#app-header-title {
    padding: 15px 55px 10px 10px !important;
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 0 var(--main-color);
}

#app-header-logo {
    font-size: 26px;
    line-height: 1.1;
    margin: 0 10px !important;
}

.ks-profile-switcher {
    color: white;
    font-size: 21px;
    cursor: pointer;
    margin: 0 15px;
}

#app-header .classic-material-theme-menu-button.x-btn-default-small {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    background-image: var(--main-color) !important;
    background-image: -webkit-linear-gradient(top, var(--main-color), var(--main-color) 50%, var(--main-color) 51%, var(--main-color));
    border-style: none !important;

}

/* .x-message-box .x-container.x-box-item.x-container-default.x-box-layout-ct{
    top: 3px !important;
}   
 */

#app-header .classic-material-theme-menu-button .x-btn-wrap-default-small.x-btn-arrow-right:after {
    display: none;
}

#app-header .x-panel-default {
    border-color: var(--main-color) !important;
    padding: 0;
}

.icon-home {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/home.svg') no-repeat center;
    mask: url('../images/icons/home.svg') no-repeat center;
}

.icon-censos {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/censos.svg') no-repeat center;
    mask: url('../images/icons/censos.svg') no-repeat center;
}


.icon-cross-circle {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/cross-circle.svg') no-repeat center;
    mask: url('../images/icons/cross-circle.svg') no-repeat center;
}

.icon-carpeta {
    background-image: url('../images/icons/carpeta.png') !important;
    width: 16px;
    cursor: pointer;
    background-repeat: no-repeat;
}

.icon-logout {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/logout.svg') no-repeat center;
    mask: url('../images/icons/logout.svg') no-repeat center;
}


/* filter:invert(100%) sepia(21%) saturate(1053%) hue-rotate(41deg) brightness(103%) contrast(101%) */

.icon-settings {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/settings.svg') no-repeat center;
    mask: url('../images/icons/settings.svg') no-repeat center;
}

.icon-parcela {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/parcela.svg') no-repeat center;
    mask: url('../images/icons/parcela.svg') no-repeat center;
}

.icon-lotes {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/lote.svg') no-repeat center;
    mask: url('../images/icons/lote.svg') no-repeat center;
}

.icon-resultEvaluaciones {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/list.svg') no-repeat center;
    mask: url('../images/icons/list.svg') no-repeat center;
}

.icon-report {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/dashboard.svg') no-repeat center;
    mask: url('../images/icons/dashboard.svg') no-repeat center;
}

.icon-map {
    background-image: url('../images/icons/map.png') !important;
    width: 16px;
    cursor: pointer;
    background-repeat: no-repeat;
}

.icon-orden {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/order.svg') no-repeat center;
    mask: url('../images/icons/order.svg') no-repeat center;
}

.icon-fila {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/filas.svg') no-repeat center;
    mask: url('../images/icons/filas.svg') no-repeat center;
}

.icon-finca {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/finca.svg') no-repeat center;
    mask: url('../images/icons/finca.svg') no-repeat center;

}


.icon-plan {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/planEvaluacion.svg') no-repeat center;
    mask: url('../images/icons/planEvaluacion.svg') no-repeat center;

}

.icon-usuarios {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/user.svg') no-repeat center;
    mask: url('../images/icons/user.svg') no-repeat center;

}

.icon-generate {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/generate.svg') no-repeat center;
    mask: url('../images/icons/generate.svg') no-repeat center;

}


.icon-url-bi {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/powerBI.svg') no-repeat center;
    mask: url('../images/icons/powerBI.svg') no-repeat center;
}

.icon-check {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/check-circle.svg') no-repeat center;
    mask: url('../images/icons/check-circle.svg') no-repeat center;
}

.icon-warning {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/warning.svg') no-repeat center;
    mask: url('../images/icons/warning.svg') no-repeat center;
}

.icon-patron {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/Patron.svg') no-repeat center;
    mask: url('../images/icons/Patron.svg') no-repeat center;
}


.icon-refresh {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/refresh.svg') no-repeat center;
    mask: url('../images/icons/refresh.svg') no-repeat center;
}

.icon-refresh-two {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/refresh.svg') no-repeat center;
    mask: url('../images/icons/refresh.svg') no-repeat center;
}

.icon-exit {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/log_logout.svg') no-repeat center;
    mask: url('../images/icons/log_logout.svg') no-repeat center;
}

.icon-parron {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/parron.svg') no-repeat center;
    mask: url('../images/icons/parron.svg') no-repeat center;
}

.icon-filter {
    background-color: var(--main-color);
    height: 18px !important;
    width: 18px !important;
    -webkit-mask: url('../images/icons/filter.svg') no-repeat center;
    mask: url('../images/icons/filter.svg') no-repeat center;
}

.icon-clear-filter {
    background-color: var(--main-color);
    height: 18px !important;
    width: 18px !important;
    -webkit-mask: url('../images/icons/filterClear.svg') no-repeat center;
    mask: url('../images/icons/filterClear.svg') no-repeat center;
}

.icon-excel-report {
    background-image: url('../images/icons/excel.png') !important;
    width: 16px;
    cursor: pointer;
    background-repeat: no-repeat;
}

.icon-unlock {
    height: 16px;
    width: 16px;
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/unlock.svg') no-repeat center;
    mask: url('../images/icons/unlock.svg') no-repeat center;
}

.icon-lock {
    height: 16px;
    width: 16px;
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/lock.svg') no-repeat center;
    mask: url('../images/icons/lock.svg') no-repeat center;
}


.x-form-refresh-trigger {
    background-image: url('https://appdigiproyqas.azurewebsites.net/build/development/MSP/resources/images/grid/refresh.png') !important;
}
/* Mantener la imagen en el estado hover */
.custom-refresh-trigger:hover {
    background-image: url('https://appdigiproyqas.azurewebsites.net/build/development/MSP/resources/images/grid/refresh.png') !important;
}

/* Mantener la imagen en el estado activo (cuando se hace clic) */
.custom-refresh-trigger:active {
    background-image: url('https://appdigiproyqas.azurewebsites.net/build/development/MSP/resources/images/grid/refresh.png') !important;
}

/* Mantener la imagen en el estado enfocado (cuando se selecciona con el teclado) */
.custom-refresh-trigger:focus {
    background-image: url('https://appdigiproyqas.azurewebsites.net/build/development/MSP/resources/images/grid/refresh.png') !important;
}

.custom-refresh-trigger {
    background-image: url('https://appdigiproyqas.azurewebsites.net/build/development/MSP/resources/images/grid/refresh.png') !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none; /* Evita la interacción si es necesario */
}

/* Estilos para cuando el campo está en modo readOnly */
.x-form-item .x-trigger-readonly {
    opacity: 1 !important;  /* Asegura que la imagen sea visible */
    pointer-events: none;   /* Desactiva la interacción en modo readOnly */
}

.icon-edit {

    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/edit.svg') no-repeat center;
    mask: url('../images/icons/edit.svg') no-repeat center;
}

.icon-paises {

    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/Flag.svg') no-repeat center;
    mask: url('../images/icons/Flag.svg') no-repeat center;
}

.icon-colorPrecinto {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/precinto.svg') no-repeat center;
    mask: url('../images/icons/precinto.svg') no-repeat center;
}


.icon-copy-alt {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/copy_alt_light.svg') no-repeat center;
    mask: url('../images/icons/copy_alt_light.svg') no-repeat center;
}

.icon-halitacion {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/habilitar_columna.svg') no-repeat center;
    mask: url('../images/icons/habilitar_columna.svg') no-repeat center;
}

.icon-delete {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/delete.svg') no-repeat center;
    mask: url('../images/icons/delete.svg') no-repeat center;
}

.icon-delete-x3 {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/delX3.svg') no-repeat center;
    mask: url('../images/icons/delX3.svg') no-repeat center;
}

.icon-delete-x4 {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/del_x4.svg') no-repeat center;
    mask: url('../images/icons/del_x4.svg') no-repeat center;
}

.icon-accessability {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/access.svg') no-repeat center;
    mask: url('../images/icons/access.svg') no-repeat center;
}

.icon-hilera {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/hilera.svg') no-repeat center;
    mask: url('../images/icons/hilera.svg') no-repeat center;
}


.icon-save {

    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/save.svg') no-repeat center;
    mask: url('../images/icons/save.svg') no-repeat center;
}

.icon-save.white {
    background-color: white !important;
}

.icon-info {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/info.svg') no-repeat center;
    mask: url('../images/icons/info.svg') no-repeat center;
}
.icon-sub-fundo {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/sub-fundo.svg') no-repeat center;
    mask: url('../images/icons/sub-fundo.svg') no-repeat center;
}

.icon-add {

    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/add.svg') no-repeat center;
    mask: url('../images/icons/add.svg') no-repeat center;
}

.icon-roles {

    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/roles.svg') no-repeat center;
    mask: url('../images/icons/roles.svg') no-repeat center;
}

.icon-circleClose {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/circle-close.svg') no-repeat center;
    mask: url('../images/icons/circle-close.svg') no-repeat center;
}

.icon-search {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/search.svg') no-repeat center;
    mask: url('../images/icons/search.svg') no-repeat center;
}

.icon-export-xls {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/download.svg') no-repeat center;
    mask: url('../images/icons/download.svg') no-repeat center;
}

.icon-transporte {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/truck.svg') no-repeat center;
    mask: url('../images/icons/truck.svg') no-repeat center;
}

.icon-colaboradores {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/colaboradores.svg') no-repeat center;
    mask: url('../images/icons/colaboradores.svg') no-repeat center;
}

.icon-perfil {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/perfil.svg') no-repeat center;
    mask: url('../images/icons/perfil.svg') no-repeat center;
}

.cierre_evaluacion {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/cierreEvaluacion.svg') no-repeat center;
    mask: url('../images/icons/cierreEvaluacion.svg') no-repeat center;
}

.log_errores {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/logErrores.svg') no-repeat center;
    mask: url('../images/icons/logErrores.svg') no-repeat center;
}

.log {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/cierreEvaluacion.svg') no-repeat center;
    mask: url('../images/icons/cierreEvaluacion.svg') no-repeat center;
}

.x-form-year-trigger {
    -webkit-mask: url('../images/icons/eye.svg') no-repeat center;
    mask: url('../images/icons/eye.svg') no-repeat center;
}

.icon-eye {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/eye.svg') no-repeat center;
    mask: url('../images/icons/eye.svg') no-repeat center;
}

/**Inicio**/
.lblFincaSelect {
    margin-bottom: 0px;
    margin-right: 30px;
}

.icon {
    float: right;
    font-size: 500%;
    position: absolute;
    top: 0rem;
    right: -0.3rem;
    opacity: .16;
}

.icon-refresh {

    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/filp.svg') no-repeat center;
    mask: url('../images/icons/filp.svg') no-repeat center;
}

.icon-campania {

    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/campania.svg') no-repeat center;
    mask: url('../images/icons/campania.svg') no-repeat center;
}

.icon-operacion {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/operacion.svg') no-repeat center;
    mask: url('../images/icons/operacion.svg') no-repeat center;
}

.icon-caracteristicas {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/caracteristicas.svg') no-repeat center;
    mask: url('../images/icons/caracteristicas.svg') no-repeat center;
}

.icon-puntos-inspeccion {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/punto-inspeccion.svg') no-repeat center;
    mask: url('../images/icons/punto-inspeccion.svg') no-repeat center;
}

.icon-modelo-inspeccion {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/modelo-inspeccion.svg') no-repeat center;
    mask: url('../images/icons/modelo-inspeccion.svg') no-repeat center;
}

.icon-evalucion {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/evalucion.svg') no-repeat center;
    mask: url('../images/icons/evalucion.svg') no-repeat center;
}

.icon-vivero {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/Vivero.svg') no-repeat center;
    mask: url('../images/icons/Vivero.svg') no-repeat center;
}

.icon-tipoSiembra {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/tipoSiembra.svg') no-repeat center;
    mask: url('../images/icons/tipoSiembra.svg') no-repeat center;
}

.icon-tipoCultivo {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/tipoCultivo.svg') no-repeat center;
    mask: url('../images/icons/tipoCultivo.svg') no-repeat center;
}

.icon-fenologia {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/Fenologia.svg') no-repeat center;
    mask: url('../images/icons/Fenologia.svg') no-repeat center;
}

.icon-variedad {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/Variedad.svg') no-repeat center;
    mask: url('../images/icons/Variedad.svg') no-repeat center;
}

.icon-success {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/success.svg') no-repeat center;
    mask: url('../images/icons/success.svg') no-repeat center;
}

.icon-error {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/error.svg') no-repeat center;
    mask: url('../images/icons/error.svg') no-repeat center;
}

.icon-generar-orden {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/generar-orden.svg') no-repeat center;
    mask: url('../images/icons/generar-orden.svg') no-repeat center;
}

.icon-liberar-orden {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/liberar-orden.svg') no-repeat center;
    mask: url('../images/icons/liberar-orden.svg') no-repeat center;
}

.icon-refresh {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/liberar-orden.svg') no-repeat center;
    mask: url('../images/icons/liberar-orden.svg') no-repeat center;
}

.icon-white {
    width: 18px;
    height: 18px;
    background-color: white;
}

.icon-reasignar {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/reasignar.svg') no-repeat center;
    mask: url('../images/icons/reasignar.svg') no-repeat center;
}

.icon-send {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/send.svg') no-repeat center;
    mask: url('../images/icons/send.svg') no-repeat center;
}

.icon-calendar {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/calendar.svg') no-repeat center;
    mask: url('../images/icons/calendar.svg') no-repeat center;
}

.icon-altitud {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/altitud.svg') no-repeat center;
    mask: url('../images/icons/altitud.svg') no-repeat center;
}

.icon-caracterizacion {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/caracteristicas_name.svg') no-repeat center;
    mask: url('../images/icons/caracteristicas_name.svg') no-repeat center;
}

.icon-ver {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/ver.svg') no-repeat center;
    mask: url('../images/icons/ver.svg') no-repeat center;
}

.icon-file {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/file.svg') no-repeat center;
    mask: url('../images/icons/file.svg') no-repeat center;
}

.icon-trampa {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/trampa.svg') no-repeat center;
    mask: url('../images/icons/trampa.svg') no-repeat center;
}

.icon-time {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/time.svg') no-repeat center;
    mask: url('../images/icons/time.svg') no-repeat center;
}

.icon-menu-vertical {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/menu-vertical.svg') no-repeat center;
    mask: url('../images/icons/menu-vertical.svg') no-repeat center;
}

.icon-ver.white {
    background-color: white !important;
}

.icon-file.white {
    background-color: white !important;
}

/* 
 
.x-window-body.x-window-body-default.x-window-body-default.x-noborder-trbl{
    margin: 0px !important;
    top: -10px !important;
} */

.conteinerToast {
    display: flex;
    align-items: center;
    /* margin: 5px; */
}

.circleToast {
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    background: #6B8C21;
    border-radius: 100px;
    color: #fff;

}

.circleToast i {
    background-color: #fff;
    margin-left: 5px;
}

.contentToast {
    margin-left: 20px;
}

.conteinerToast p {
    padding: 5px;
    font-weight: 600;
    line-height: 2px;
}

.contentToast p:nth-child(1) {
    font-size: 18px;
    color: #4A7337;

}

.contentToast p:nth-child(2) {
    font-size: 14px;
}



.default {
    box-shadow: 0px 0px 0.5px 0.4px var(--main-color) !important;
}

#container {
    width: 100%;
    display: flex;
}

.x-panel-header-light {
    background-image: none;
    background-color: #f1ffeb !important;
}

#dataHeader {
    top: 0px !important
}

.kpi-card {
    overflow: hidden;
    position: relative;
    /* box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.75); */

    display: inline-block;
    float: left;
    padding: 0.9em;
    /* border-radius: 0.9em; 
    border-top-left-radius: 250px !important;
    border-bottom-right-radius: 250px !important;
*/
    width: 190px;
    min-width: 80px;
    margin-left: 0.8em;
    margin-right: 0.8em;
    margin-top: 0.8em;

}

.card__action-bar {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    padding: 0 8px;
    border-top: 1.5px solid #cac0c0b6;
    boz-sizing: border-box;
    height: 20px;
    transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.card__text {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 0.8rem;
    display: block;
    left: 0;
    right: 0;
    padding: 8px 0px 8px 0px;
    top: 0;
    margin: 0;
    line-height: 1.0;
    /* position: absolute; */
    color: #000;
    overflow: hidden;
    transition: width 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: delay 0.1s;
    word-wrap: break-word;
    text-align: center;
}

.card-value {
    display: block;
    font-size: 2.15em;
    margin: 1px 6px;
    text-align: center;
}

.card-text {
    display: block;
    font-size: 12px;

}


.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#gridListCaracteristias .x-column-header-text-inner {
    font-size: 0.73rem;
}

.clearSelecion {
    position: absolute;
    top: -4px;
    z-index: 9999;
    padding: 3px;
    margin: auto 80%;
    height: 25px;
    line-height: 16px;
    width: 25px;
    font-size: 2em;
    font-weight: bold;
    border-radius: 50%;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    cursor: pointer;
}

.resize-circle {
    position: absolute;
    background-color: var(--color-btn);
    border: .1px solid var(--color-btn);
    border-radius: 50%;
    color: #aaa;
    cursor: pointer;
    width: 25px;
}

/* indicadore */

/* .indicadorHeader {
    background: #4A7337;
    
    border: 1px solid #4A7337;
    border-radius: 20px 20px 20px 0px;
    text-align: center;
    vertical-align: middle;
    align-items: center;
    color: white;
    display: flex;
    justify-content: center;
 
} 
*/
.indicadorHeaderimg {
    width: 40px;
    height: 40px;
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
    padding: 10px;
}

.btnJerarquia {
    opacity: 0.3;
}

.active,
.btnJerarquia:hover {
    opacity: 1;
    filter: invert(48%) sepia(32%) saturate(508%) hue-rotate(71deg) brightness(94%) contrast(84%);
}

.textTooltip {
    font-size: 10px;
    margin: 0 !important;
}

.textTooltip div {
    font-size: 10px;
    margin: 0 !important;
}

.myLegendItem {
    font-size: 10px !important;
}

.chartScroll {
    overflow-x: auto;
}

.dot {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    display: inline-block;
    font-size: 10px;
    margin: 0 !important;
}

.pTolltip {
    margin: 0px !important;
}

.text-pesoPromedio {
    color: rgb(169, 132, 103);
}

.text-diametroPromedio {
    color: rgb(38, 70, 83);
}

.mapa-table {
    color: white;
    font-size: 8px;
    line-height: 2px !important;
}

.mapa-table tr td {
    height: 15px;
    width: 15px;
}

.mapa-table .label {
    /* width: 32px; */
    margin: 1em;
    /* height: 150px; */
    /* you need to know the max height  or you get overflow */
    /* background: rgba(255, 0, 0, .5); */
    white-space: nowrap;
    display: inline-block;
    position: relative;
}

.mapa-table .label-text {
    /* border: 1px solid green;
    border-right: 10px solid black; */
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    /* height: 32px; */
    /* line-height: 32px; */
    padding: 0 1em;
    transform-origin: top left;
    transform: rotate(-90deg) translateX(-100%);
}

.mapa-table thead {
    line-height: 10px !important;
    color: black;
}

.mapa-table .textFila {
    color: black;
    line-height: 10px !important;
}

.eclipse {
    width: 15px;
    height: 15px;
    color: white;
    font-size: 8px;
    border-radius: 50%;
    margin: 0x;
    padding: 0;
    background: #ECECEC;
    text-align: center;
}

.centerMap {
    line-height: 200px;
    /* height: 100% !important; */

    text-align: center;
}

.centerMap p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

.centerMap div {
    position: absolute;
    top: 25%;
    width: 100%;
    text-align: center;
}

.centerMap div p {
    padding: 10px;
    color: gray;
    background-color: white;
    font: 300 13px helvetica, arial, verdana, sans-serif;

}

#idImagenAcordeon-button {
    /* padding: 0px !important;
    background-color: transparent !important; */
    border-color: #fff !important;
    background-color: #f5f5f5 !important;
    background-image: -webkit-linear-gradient(top, #f6f6f6, #f5f5f5 50%, #e9e9e9 51%, #f5f5f5) !important;
}


#idImagenAcordeon-button .x-btn-inner-default-small {
    font: bold 12px/16px helvetica, arial, verdana, sans-serif;
    color: #000 !important;
    padding: 0 5px;
    max-width: 100%;
}



/* Add a border and shadow to the rounded rectangle */
.mapboxgl-popup-content {
    border: 1px solid #929292;
    padding: 0px !important;
    box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, .1)
}

/* Move the content above the :before element so rotated rectangle doesn't cover content */
.mapboxgl-popup-content div {
    position: relative;
    z-index: 5;
}

/* This is the new tip */
.mapboxgl-popup-content:before {
    content: '';
    position: absolute;
    /* I've found 9px looks better than 10px */
    top: -webkit-calc(100% - 9px);
    top: calc(100% - 9px);
    left: calc(50% - 10px);
    height: 20px;
    width: 20px;
    background: white;
    transform: rotate(45deg);
    border-bottom: inherit;
    border-right: inherit;
    /* The shadow is translated down a bit so it doesn't show inside the pop-up */
    box-shadow: 4px 4px 4px -1px rgba(0, 0, 0, 0.1);
    z-index: 4;
}

/* Since the new tip is absolutely-positioned, it doesn't force the rectangle up on its own */
.mapboxgl-popup {
    margin-top: -10px;
}

/* Hide the old tip */
.mapboxgl-popup-tip {
    display: none;
}

.mapboxgl-popup-content {
    border-radius: 10px !important;
}

.modalMap {
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    overflow: auto;
    display: grid;
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content;
    text-align: left;
    max-height: 250px;
    margin-left: 10px;
}

.modalMap p {
    margin: 0;
    color: rgb(47, 48, 49);
    font-weight: 400;
}

.modalMap .titulo {
    font-size: 12px;
    font-weight: 600;
    border-bottom: #929292 solid 0.2px;
}

.modalMap .point {
    font-size: 10px;
    color: rgb(47, 48, 49);
    font-weight: 400;
}

.modalMap .accordion {

    /* max-width: 600px; */
    margin: 0 auto;
}

.modalMap .accordion-item {
    /* border: 1px solid #ccc; */
    border-top: none;
}

.modalMap .accordion-item:first-child {
    border-top: 1px solid #ccc;
}

.modalMap .accordion-item input[type="checkbox"] {
    display: none;
}

.modalMap .accordion-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    overflow: hidden;
    margin-left: 2px;
    margin-top: 10px;
    max-width: 200px;
    text-overflow: ellipsis;
}

.modalMap .accordion-item label span {
    text-overflow: ellipsis;
    overflow: hidden;

}

.modalMap .accordion-item-content p {
    margin: 0;
}

.modalMap .accordion-item-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.modalMap .accordion-item input[type="checkbox"]:checked~.accordion-item-content {
    max-height: 500px;
    /* Adjust the height as needed */
    transition: max-height 0.2s ease-in;
}

.modalMap .accordion-item-image {
    width: 60px;
    height: 40px;
    margin-right: 10px;
    border-radius: 3px;
}

.modalMap .accordion-card {
    margin: 4px 15px 15px 20px;
    background-color: #f5f8fc;
    display: flex;
    align-items: center;
    border-radius: 3px;
}

.modalMap .accordion-card-left-bar {
    width: 4px;
    height: 36px;
    background-color: rgb(112, 115, 116);
    /* Set your desired color here */
    margin-right: 10px;
}

.modalMap .accordion-card-content {
    flex: 1;
    margin: 10px;
}

.modalMap .accordion-card-content p.text-title {
    text-align: inherit;
    font-weight: 500;
    line-height: normal;
}

.modalMap .accordion-card-content p.text-sub-title {
    font-size: 14px;
    color: rgb(112, 115, 116);
    line-height: normal;
}

.preloader {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 999;
    opacity: 0.4;
    background: #c1bebe;
}

.preloader:before {
    content: "";
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top-color: var(--main-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.hidden {
    display: none;
}



.mapTrampas .x-panel-body {
    border: 1px solid #ccc !important;
    background-color: #fff !important;
}

.mapTrampas .x-panel-header-default {
    background-color: #fff !important;
    border-color: #ccc !important;
}

.mapTrampas .x-panel-default {
    border-color: #ccc !important;
}

.mapTrampas .x-panel-header-title-default {
    color: #333333;
    font-size: 13px;
    font-weight: bold;
    font-family: helvetica, arial, verdana, sans-serif;
    line-height: 16px;
}

.mapTrampas .x-panel-header-default .x-tool-tool-el {
    background-color: #333333;
}

.modal-seleccion {
    background-color: #333333cc;
    height: 40px;
    /* width:200px; */
    max-width: 500px;
    border-radius: 2px;
    z-index: 999;
    position: absolute;
    margin-left: 30px;
}

.cultivo-header {
    width: 271px;
    height: 48px;
    background: #f5f8fc;
    border-radius: 8px;
    margin: 10px;
    padding: 5px;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: #d9800a;
    display: grid;
}

.icon-text-container {
    vertical-align: middle;
    width: 56px;
    height: 56px;
    /* margin: 12px 15px 0 0;*/
}

.icon-text-container_xs {
    vertical-align: middle;
    width: 30px;
    height: 30px;
    /* margin: 12px 15px 0 0;*/
}

.icon {
    margin-right: 10px;
    /* Add additional styles for the icon container as needed */
}

.text {
    display: inline-block;
    text-align: left;
    margin-left: 10px;
}

/* 
.card {
    position: relative;
    flex: 0 0 300px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 16px;
    overflow: hidden;
  } */




.card {
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    /* Nueva línea */
}

/* .card :hover {
    background-color: #fff9f2;
} */

.bar {
    width: 4px;
    background-color: #ff0000;
    border-radius: 0 16px 16px 0;
    height: 54px;
    margin-top: 6px;
}

.card-content {
    flex-grow: 1;
    padding: 2px;
}

.card-body {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    height: 20px;
    margin-top: 10px;
}

.card-header {
    display: flex;
    align-items: center;
    /* background-color: #f5f5f5; */
    padding: 5px;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

.title span {
    font-weight: bold;
}

.btn {
    background-color: #e0e0e0;
    padding: 4px 8px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    width: 20px;
}

.btn:hover {
    background-color: #cac8c8;
}

.section {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.icon {
    margin-right: 10px;
    /* Agrega estilos adicionales para el icono */
}

.icon-btn {
    width: 16px;
    height: 16px;
}

.mapTrampas .panel-Plaga .x-panel-header-default .x-tool-tool-el {
    background-color: transparent;
}


a.mapboxgl-ctrl-logo {
    display: none !important;
}

.mapboxgl-ctrl-attrib-inner {
    display: none;
}

.fbar-light {
    background-color: #e8f0e8 !important;
}

.puntoFijo .card-puntoFijo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    margin: 5px;
    border-radius: 5px;
}

.puntoFijo .card-puntoFijoLote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.puntoFijo .card-text {
    display: block;
    font-size: 12px;
    display: grid;
}

.card-puntoFijoLote.x-view-item-focused {
    background-color: antiquewhite !important;
}

.card-puntoFijoLote .hidden {
    display: none;
}



.circlePackingList {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circlePackingList .text {
    color: #fff;
    font-size: 70px;
    font-weight: bold;
    transform: translate(4%, -10%);
    text-align: center;
    margin: auto;
}

.separadorDiv {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--main-color);

}

.my-panel-shadow {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* Estilos personalizados para ComboBox */
.my-combobox {

    /* Estilos para el campo de entrada */
    .x-form-field {
        background-color: #fff;
        border-radius: 4px;
        padding: 5px;
        margin: 5px 0;
        font-family: Arial, sans-serif;
        font-size: 16px !important;

        color: #333;
    }

    .x-form-field .x-list-plain .x-boundlist-item {
        font: normal 15px helvetica, arial, verdana, sans-serif !important;
        line-height: 25px !important;
    }


}

.my-combobox .x-form-field .x-list-plain .x-boundlist-item {
    font: normal 15px helvetica, arial, verdana, sans-serif !important;
    line-height: 25px !important;
}




.header-custtom .x-panel-header-title-light {
    font: 600 18px/24px Roboto, sans-serif;
    padding: 8px 0;
}

.header-custtom .x-panel-header-title-default {
    font: 600 18px/24px Roboto, sans-serif;
    padding: 8px 0;
}

#rptPackingList.cardLoader {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 100px /2);
    top: calc(30% - 100px / 8);
}



#rptPackingList .loader {
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid var(--main-color);
    width: 80px;
    height: 80px;
    animation: spin 1s linear infinite;

    /* i added this: */
    position: absolute;
    /* left: calc(50% - 100px /10); 
    top: calc(50% - 100px / 8); */
    left: calc(50% - 100px /60);
    top: calc(50% - 100px / 100);
}

@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.icon-error-export {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/export.svg') no-repeat center;
    mask: url('../images/icons/export.svg') no-repeat center;
}


.pinpaper-cross {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/pinpaper-cross.svg') no-repeat center;
    mask: url('../images/icons/pinpaper-cross.svg') no-repeat center;
    height: 18px !important;
    width: 18px !important;
}


.pinpaper-check {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/pinpaper-check.svg') no-repeat center;
    mask: url('../images/icons/pinpaper-check.svg') no-repeat center;
    height: 14px !important;
    width: 18px !important;
}

.icon-question-circle {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/question-circle.svg') no-repeat center;
    mask: url('../images/icons/question-circle.svg') no-repeat center;
}
 
.icon-file-evaluacion {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/icon-file-evaluacion.svg') no-repeat center;
    mask: url('../images/icons/icon-file-evaluacion.svg') no-repeat center;
}

.icon-file-log {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/icon-file-log.svg') no-repeat center;
    mask: url('../images/icons/icon-file-log.svg') no-repeat center;
}

.icon-topi {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/topi.svg') no-repeat center;
    mask: url('../images/icons/topi.svg') no-repeat center;
}

.icon-flujo {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/flujo.svg') no-repeat center;
    mask: url('../images/icons/flujo.svg') no-repeat center;
}

.icon-varita {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/varita.svg') no-repeat center;
    mask: url('../images/icons/varita.svg') no-repeat center;
}

.icon-aproUser {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/aproUser.svg') no-repeat center;
    mask: url('../images/icons/aproUser.svg') no-repeat center;
}

.icon-file-seating-log {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/icon-file-seating-log.svg') no-repeat center;
    mask: url('../images/icons/icon-file-seating-log.svg') no-repeat center;
}

.icon-group {
    background-color: var(--main-color);
    -webkit-mask: url('../images/icons/group.svg') no-repeat center;
    mask: url('../images/icons/group.svg') no-repeat center;
}

.x-form-text.inputFormatDecimal {
    font-size: 20px !important;
    /* Cambiar el tamaño de fuente según sea necesario */
}

.x-statusbar .x-status-check {
    color: var(--main-color) !important;
    font-weight: 600 !important;
    font-size: 15px !important
}


.text-primary-black {
    color: black !important;
    font-weight: 200;
    font-size: 12px !important;
    padding: 1px !important;
}

.btn-color-yellow {
    background-color: rgb(174, 120, 7) !important;
    color: #F2F2F2 !important;
    font-size: 12px !important;
    padding: 1px !important;
}


.btn-color-gray {
    background-color: #8a8a8a !important;
    color: #F2F2F2 !important;
    font-size: 12px !important;
    padding: 1px !important;
}


.btn-color-green {
    background-color: var(--main-color) !important;
    color: #F2F2F2 !important;
    font-size: 12px !important;
    padding: 1px !important;
}

.duplicated-row {
    background-color: yellow !important;
}

.x-form-cb .centerCheck {
    left: 32px !important;
}

.x-panel-body-default .headerColumn{
    background-color: rgb(245, 245, 245) !important;
}

.x-statusbar .x-status-alert {
    padding-left: 25px;
    background: transparent url('../images/icons/alert.png') no-repeat ;
    color: #a47822;
}

.cell-warning {
    background-color: #7d9145e7 !important; /* Rojo claro */
    color: #000 !important;
    font-weight: bold;
}


.microsoft-icon {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

.microsoft-login-btn {
    background-color: #2f6f3e !important;
    color: white !important;
    font-weight: bold;
    border-radius: 4px;
    padding: 10px;
}