@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/*BOTONES GUARDAR CANCELAR*/

/*=================================================
   INICIO MODELO DE LAS TABLAS PRINCIPALES
=====================================================*/
/*letras body global */
body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
/*datos generales titulos*/
.photo, .avatarpersonal {
    object-fit: fill !important;
    min-width: 50%;
    min-height: 50%;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
}
/*=====cabecera lado derecho, imagen logo, titulo= Easyload imagen microsoft*/
#header .list {
    list-style: none;
    cursor: pointer;
    font-size: 16px;
}

#header .header-list {
    padding-left: 15px;
    margin: 0;
}

#header .left-header {
    height: 80px;
    float: left;
    padding-top: 0px;
    margin-left: 10px !important;
}

.left-header img {
    margin-top: -7px;
}

.titulo {
    font-family: 'Quattrocento', serif;
    font-weight: 700;
    font-size: 25px;
    margin-left: 10px;
}

/*=====cabecera lado derecho avatar*/
#header .right-header {
    height: 70px;
    padding: 7px;
    float: right;
}

.avatar {
    display: flex;
    vertical-align: top;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
/*tarjeta de informacion del avatar es un content*/
.modal-dialog {
    margin: 0 0;
    float: right !important;
    top: 33px !important;
    position: relative !important;
}

.modal-backdrop {
    position: fixed;
    z-index: 1 !important;
    background: none !important;
    background-color: none !important;
}


.modal-content {
    position: relative !important;
    background-color: #ffffff;
    background-clip: padding-box;
    border-radius: 4px;
    -webkit-box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.25);
    outline: 0;
    width: 228px !important;
    top: 34px !important;
    right: 34px;
    height: 278px !important;
}

.modal-body {
    padding: 0.5rem;
}

.modalcentro {
    text-align: center;
    padding-top: 8px;
}

.modal-content a {
    color: black;
}

.avatarsubmenu {
    vertical-align: middle;
    width: 62px;
    height: 62px;
}
/*nombre en perfil*/
.nombreperfil p {
    margin: 6px 0px 2px 0px;
    width: 210px;
    height: 24px;
    font-weight: 700;
    text-align: center;
}
/*mail perfilusuario*/
.nombreperfil p2 {
    color: dodgerblue;
    text-decoration: underline;
    font-size: 14px;
    font-family: initial;
    width: 210px;
    height: 24px;
    font-weight: 700;
    text-align: center;
}
/*lienas entre el encabezado tarjeta y cambio idioma*/
hr {
    margin-top: 2px !important;
    margin-bottom: 0rem !important;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

.idioma {
    text-align: center;
}

/*pagina internet*/
.paginamodal {
    margin: 5px;
    text-align: center;
}

    .paginamodal p a {
        color: #007bff;
        font-size: 13px;
        font-weight: 600;
        text-decoration: underline;
    }
/*cerrar sesion*/
.salir {
    text-align: center;
    margin-top: 11px;
}

.iconocerrar {
    margin-right: 4px;
}

/*==== termina diseño usuario y carta de datos*/

/*Asterisco para campos requeridos*/
.required label:after {
    content: " *";
    color: red;
    font-weight: 900;
}

.title {
    font-size: 16px;
    font-weight: bolder;
}

.content {
    font-weight: 600;
    color: rgba(0,0,0,.77);
    font-size: 15px;
}
/*titulo de las presentaciones*/
.cabecera {
    margin: auto;
    display: flex;
    margin-top: 5px;
    align-items: center;
    margin-bottom: 15px;
    width: 100% !important;
}

/*======== cabecera y avatar termina======*/

/*centro de sistema inicio imagen y texto incio del sistema*/
.imainicio {
    background-position: center;
    background-size: cover;
    background-repeat: repeat;
    width: 100%;
    height: calc(10vh-120px);
    padding-top: 10px;
}

/*====== clase original ====*/

.fechaTcinicio {
    display: flex;
    flex-flow: row wrap;
    color: black;
    font-weight: 700;
    font-size: 21px;
    font-family: 'fontello';
}

.flag {
    padding-right: 15px;
    width: 3rem;
}

.iconfech {
    padding-right: 15px;
    color: blue;
    vertical-align: text-bottom;
}

.homeinicio {
    position: relative;
    top: 10rem !important;
}

    .homeinicio img {
        width: 34rem !important;
        align-content: center;
    }

/* medias query para pagina inicio*/
/*====Diseño para pantallas medianas======= */
@media(max-width:1280px) and (min-width:767.98px) {

    .body {
        font-family: 'fontello';
    }
    /*titulo e imagenes de logo y microsoft*/
    .left-header img {
        margin-top: 3px !important;
        width: 85px !important;
    }

    .modal-backdrop.show {
        opacity: -.05 !important;
    }
    /*lugar del avatar en el encabeado*/
    #header .right-header.list.support,
    #header .right-header.list.tour {
        display: flow-root !important;
        margin: 4px;
    }
    /*nombre de easyload en cabecera*/
    .titulo span {
        font-size: 25px;
    }
    /*tarjeta usuario*/
    .modal-dialog {
        top: 2px !important;
    }
    /*tamaño de la tajeta con toda la informacion del usuario*/
    .modal-content {
        background-clip: padding-box;
        top: 70px !important;
        right: 15px;
        height: 248px !important;
    }
    /*primera parte de la tarjeta */
    .avatarsubmenu {
        width: 57px;
        height: 57px;
    }

    .modal-content a {
        color: black;
    }
    /*nombre en perfil*/
    .nombreperfil p {
        margin: 2px 0px 2px 0px;
        font-size: 11px;
        padding: 9px;
    }
    /*mail perfilusuario*/
    .nombreperfil p2 {
        font-size: 12px;
    }
    /* lineas tarjeta avatar*/
    hr {
        margin-top: 0rem;
        margin-bottom: 0rem;
    }

    p {
        margin-bottom: 0rem !important;
    }
    /*pagina internet usuario*/
    .paginamodal {
        margin: 4px;
    }
    /*boton cerrar sesion*/
    .e-btn.e-outline.e-primary {
        font-size: 11px;
    }
    /*===== termina header diseño=====*/
    /*diseño del centro de inicio fecha y tipo de cambio*/
    .px3 {
        padding-right: 9px !important;
    }

    .imainicio {
        height: calc(10vh-120px);
        padding-top: 10px;
    }

    /*icono calendario fecha*/
    .iconfech {
        padding-right: 2px;
        font-size: 18px;
        vertical-align: text-bottom;
    }

    .fechaTcinicio {
        font-size: 15px;
    }

    .flag {
        padding-right: 1px;
        width: 2rem;
    }

    .homeinicio {
        top: 237px !important;
    }

        .homeinicio img {
            width: 17rem !important;
        }
    /*==termina diseño portada incio centro===*/
}


/*====== media query para pantallas menores de 767.98px menores de 500px============*/
@media(max-width:767.98px) and (min-width:500px) {

    .body {
        font-family: 'fontello';
    }

    #header.header-section {
        height: 94px !important;
    }

    #header .left-header {
        height: 75px;
    }
    /*titulo e imagenes de logo y microsoft*/
    .left-header img {
        margin-top: 1px !important;
        width: 80px !important;
    }

    .modal-backdrop.show {
        opacity: -.05 !important;
    }
    /*lugar del avatar en el encabeado*/
    #header .right-header {
        height: 60px !important;
        padding: 11px !important;
    }

        #header .right-header.list.support,
        #header .right-header.list.tour {
            display: flow-root !important;
            margin: 0px !important;
        }
    /*nombre de easyload en cabecera*/
    .titulo span {
        font-size: 25px;
    }
    /*tarjeta usuario*/
    .modal-dialog {
        top: 2px !important;
    }

    .avatar {
        width: 46px;
        height: 46px;
    }
    /*tamaño de la tajeta con toda la informacion del usuario*/
    .modal-content {
        background-clip: padding-box;
        top: 70px !important;
        right: 15px;
        height: 248px !important;
    }
    /*primera parte de la tarjeta */
    .avatarsubmenu {
        width: 57px;
        height: 57px;
    }

    .modal-content a {
        color: black;
    }
    /*nombre en perfil*/
    .nombreperfil p {
        margin: 2px 0px 2px 0px;
        font-size: 11px;
        padding: 9px;
    }
    /*mail perfilusuario*/
    .nombreperfil p2 {
        font-size: 12px;
    }
    /* lineas tarjeta avatar*/
    hr {
        margin-top: 0rem;
        margin-bottom: 0rem;
    }

    p {
        margin-bottom: 0rem !important;
    }
    /*pagina internet usuario*/
    .paginamodal {
        margin: 4px;
    }
    /*boton cerrar sesion*/
    .e-btn.e-outline.e-primary {
        font-size: 11px;
    }
    /*===== termina header diseño=====*/
    /*diseño del centro de inicio fecha y tipo de cambio*/
    .px3 {
        padding-right: 9px !important;
    }

    .imainicio {
        height: calc(10vh-120px);
        padding-top: 8px;
    }

    /*icono calendario fecha*/
    .iconfech {
        padding-right: 2px;
        font-size: 15px;
        vertical-align: text-bottom;
    }

    .fechaTcinicio {
        font-size: 13px;
    }

    .flag {
        padding-right: 1px;
        width: 18px;
    }

    .homeinicio {
        top: 295px !important;
    }

        .homeinicio img {
            width: 15rem !important;
        }
}
/*==termina query para pantañas pequeñas===*/

/*fin imagen y texto incio del sistema*/


/*===== Tablas diseño ====*/
/* Sombra de todo el cuadro principal*/
.rowtablaprincipal {
    display: flex;
    flex-wrap: wrap;
    background: #ffffff !important;
    margin-bottom: 5px;
    box-shadow: none !important;
    border: none !important;
    margin: 5px 0px 0px 0px !important;
}

.form-row {
    margin-right: 1px !important;
    margin-left: 1px !important;
}

.fieldset {
    min-width: 0;
    padding-top: 5px !important;
    margin: 0;
    border: 0;
    background: #ffffff !important;
}

/*Diseño toolbar tablas */
.e-toolbar {
    background: #ffffff !important;
}

    .e-toolbar .e-toolbar-items {
        background: #ffffff !important;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .e-toolbar .e-tbar-btn:active {
        border-color: none !important;
        border: none !important;
    }

    .e-toolbar .e-tbar-btn:focus {
        border-color: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .e-toolbar .e-tbar-btn:hover {
        border-color: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    /*Diseño toolbar de los que tienen accion*/
    .e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay {
        background: #ffffff !important;
        opacity: 100% !important;
        border: #e7e7e7 !important;
    }
    /*color botones letras negras e iconos de la barra tool bar*/
    .e-toolbar .e-tbar-btn.e-btn .e-icons {
        color: #007bff !important;
    }

        .e-toolbar .e-tbar-btn.e-btn .e-icons:active {
            color: #0069d9 !important;
        }

    .e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay .e-icons {
        color: #007bff !important;
        opacity: 100% !important;
    }
/*color letras*/
.e-tbar-btn-text {
    color: #000000 !Important;
}
/*diseño botones toolbar*/
.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
    background: #ffffff !important;
    color: #000000 !important;
}
/*formato al seleccionar el boton tool bar*/
.e-toolbar .e-toolbar-item .e-tbar-btn.e-btn:hover {
    background: #f2f2f2 !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top: 1px solid #f2f2f2;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    border-bottom: 3px solid #007bff !important;
}

.e-toolbar .e-toolbar-item .e-tbar-btn.e-btn:focus {
    background: #f2f2f2 !important;
    box-shadow: none !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top: 1px solid #f2f2f2;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    border-bottom: 3px solid #007bff !important;
}
/*al dar click en botones de toolbar se pone la ralla inferior verde*/
.e-toolbar .e-toolbar-item .e-tbar-btn.e-btn:active {
    background: #f2f2f2 !important;
    box-shadow: none !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom: 2px solid #0069d9 !important;
}
/*GRID Diseño linea inferior y superior de la segunda barra (grid)menu donde estan los campos, */
.e-grid .e-toolbar {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    /*border-top: 1px solid #ced4da !important;
    margin-top:1px !important;*/
    border-radius: 0;
}

.e-grid .e-gridheader {
    background-color: #747679 !important;
    color: #000000 !important;
    font-size: small !important;
}

.e-grid .e-gridheadercontent {
    font-size: smaller !important;
    font-weight: 300 !important;
}

.e-grid .e-gridheader tr:first-child th {
    background: #747679 !important;
}

.e-grid th.e-headercell[aria-sort=descending] .e-headertext {
    color: #ffffff !important;
    opacity: 1;
}

.e-grid th.e-headercell[aria-sort=ascending] .e-headertext {
    color: #ffffff !important;
    opacity: 1;
}

.e-grid .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow) {
    color: #ffffff;
}

.e-grid .e-headercelldiv {
    font-size: 11px;
    font-weight: 200;
    /*height: 21px;*/
    line-height: 21px;
    overflow: hidden;
    padding: 0 0.4em;
    text-transform: none;
    user-select: none;
    color: #ffffff !important;
}

.e-grid.e-responsive .e-rowcell {
    text-overflow: unset !important;
    white-space: nowrap;
}
/*fondo gris segunda icono flecha barra*/
.e-detailrowcollapse .e-icons {
    color: black !important;
    font-size: 15px !important;
}

.e-grid .e-icon-grightarrow {
    font-size: 15px;
    padding: 0px !important;
    text-decoration: none !important;
    text-indent: 5px;
}

.e-grid .e-icon-gdownarrow {
    font-size: 15px !important;
    padding: 0px !important;
    text-decoration: none !important;
    text-indent: 5px !important;
}
/*flecha grid al expandirse*/
.e-grid .e-detailrowexpand:active {
    background-color: #ffffff !important;
}

.e-grid .e-detailrowcollapse:not(.e-editedbatchcel):not(.e-updatedtd):active {
    background-color: #ffffff !important;
}

.e-grid .e-content {
    background: #ffffff !important;
}

.e-grid .e-detailcell {
    border-color: #f2f2f2 !important;
    background-color: #ffffff !important;
}

.e-grid [aria-selected] + tr .e-detailindentcell {
    border-color: #bdbdbd !important;
    background-color: #bdbdbd !important;
}

.e-grid-min-height .e-gridheader .e-headercell .e-headercelldiv {
    height: none !important;
}

.e-grid .e-gridheader .e-sortfilter .e-headercelldiv {
    padding: 0 0 0 0 !important;
}
/*Grids agrupados en Reporte Diseño*/
.e-grid .e-groupcaption {
    border-style: solid;
    border-width: 1px 0 0;
    display: table-cell;
    font-size: 14px;
    line-height: 14px;
    overflow: hidden;
    padding: 0.7em;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    color: #007bff !important;
    font-weight: bolder !important;
    font-family: emoji !important;
}

/*==============Navs diseño de todas las presentaciones Internas============================*/
/* Diseño de Tabs*/

.nav-tabs {
    border-bottom: .5px solid #ced4da !important;
    margin-top: -5px !important;
}

    .nav-tabs .nav-link {
        border: none;
        color: #054197 !important;
        font-weight: 600 !important;
    }

.nav-link {
    display: block;
    padding: 0.25rem 1rem;
    margin-top: 2px;
}

.nav-tabs .nav-item .nav-link.active {
    color: #000000 !important;
    font-weight: bolder;
    background-color: #f2f2f2 !important;
    border-bottom: 2px solid #0D7ABD !important;
}
/*=========== Tabs Diseño de todas las presentaciones=========================*/
.e-tab .e-content .e-item {
    background: #ffffff !important;
    color: #000000 !important;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    display: inherit !important;
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont" !important;
    font-size: 14px !important;
    text-transform: capitalize !important;
    color: #060B5F !important;
    font-weight: 600 !important;
}

.e-tab .e-content > .e-item.e-active {
    background: #FFFFFF;
    display: block;
}
/*letra tab activa y tamaño de letra*/
.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text {
    color: #000000 !important;
    font-weight: 600 !important;
}
/*letra tab cuando no esta seleccionado*/
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: #000000 !important;
    font-weight: 300;
    border-radius: 0 !important;
    border: .5px solid transparent !important;
}
/*tab sin separacion para que se vea una linea continua */
.e-tab .e-tab-header .e-toolbar-item.e-active {
    margin: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    border-radius: 4px 4px 0 0;
}

.e-tab .e-tab-header .e-toolbar-item:not(.e-separator) {
    height: 32px !important;
    margin: 0px !important;
    min-height: 32px !important;
    min-width: auto !important;
    padding: 0 !important;
    border-bottom: 1px solid #ced4da !important;
}
/* linea tab cuando no esta seleccionado*/
.e-tab .e-tab-header .e-toolbar-item {
    background: transparent !important;
    border: none !important;
}
/*fondo y linea del tab al estar seleccionado*/
.e-tab .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active {
    border-bottom: 2px solid #0D7ABD !important;
    background: #f2f2f2 !important;
}

.e-tab .e-tab-header {
    border-bottom: 0px !important;
    border-style: solid !important;
    border-color: transparent !important
}

e-tab .e-tab-header:not(.e-vertical)::before {
    border-width: 0 0 1px 0 !important;
}

.e-tab .e-tab-header::before {
    border-bottom: 1px !important;
    border-color: #ced4ba !important;
    border-style: solid !important;
}

/*Diseño de botones en todos los modulos*/
/*botones azules de todos */
.e-btn {
    background-color: #007bff !important;
    color: #ffffff !important;
    border-color: #007bff !important;
    outline: none !important;
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*separacion de botones*/
.e-btn, .e-css.e-btn {
    -webkit-font-smoothing: none !important;
    border-radius: 4px;
    display: inline-block;
    font-family: "Helvetica Neue","Helvetica","Arial",sans-serif,"-apple-system","BlinkMacSystemFont";
    font-size: 14px;
    font-weight: 400;
    justify-content: center;
    line-height: 1.6;
    outline: none;
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    margin-inline: 2px !important;
}

.e-btn, .e-css.e-btn {
    -webkit-tap-highlight-color: transparent !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
    box-shadow: none !important;
    color: #ffffff !important;
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

    .e-btn:hover {
        background-color: #0069d9 !important;
        border-color: #0069d9 !important;
        color: #ffffff;
        box-shadow: 1px 1px 1px 1px rgba(133,206,249,.75) !important;
    }

    .e-btn:active {
        background-color: #0069d9 !important;
        border-color: #0069d9 !important;
        outline: none !important;
        box-shadow: 1px 1px 1px 1px rgba(133,206,249,.75) !important;
        color: #ffffff !important;
    }

    .e-btn:focus {
        background-color: #007bff !important;
        border-color: #007bff !important;
        color: #ffffff;
        box-shadow: 1px 1px 1px 1px rgba(133,206,249,.75) !important;
    }

    .e-btn:disabled{
        background-color: rgba(108,117,125,.65) !important;
        border-color: rgba(0,0,0,0) !important;
        box-shadow: none !important;
        color: #fff !important;
    }

    .e-btn.e-outline.e-primary,
    .e-css.e-btn.e-outline.e-primary,
    .e-btn.e-outline.e-danger {
        background-color: transparent;
        border-color: #007bff !important;
        color: #ffffff !important;
    }

/*icono de paginado*/
.e-pager .e-icons::before {
    color: #007bFF !important;
}
/* tabla */
.interno .e-grid {
    margin: 10px 0px 10px 5px !important;
}

/*color texto y botones add delete etc..... en tablas internas*/
.interno .e-toolbar .e-tbar-btn {
    color: #000000 !important;
}


/*=================================================
  FIN MODELO DE LAS TABLAS PRINCIPALES
=====================================================*/

/*letras del menu */
.e-menu-wrapper .e-ul .e-menu-item .e-menu-url, .e-menu-container .e-ul .e-menu-item .e-menu-url {
    color: white !important;
}
/*checkbox de proveedores*/
#Operacion .checkbox-control {
    margin: 1% 0 0% 10px !important;
}


/*botones azules dentro de tablas */
.e-input-group.e-control-container.valid.modified, .e-float-input.e-control-container.valid.modified {
    outline: 1px solid #ced4da !important;
}

.e-input-group.e-success .e-input-group-icon, .e-input-group.e-control-wrapper.e-success .e-input-group-icon {
    border: 1px solid #ced4da !important;
}

.e-input-group:not(.e-disabled) .e-input-group-icon:active, .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:active {
    background: #007bff !important;
    color: #ffffff !important;
    box-shadow: inset 0 3px 5px rgb(190 237 250 / 25%);
}

.e-input-group:not(.e-disabled) .e-input-group-icon:active, .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    background: #007bff !important;
    color: #ffffff !important;
}

.e-input-group.e-disabled .e-input-group-icon, .e-input-group.e-control-wrapper.e-disabled .e-input-group-icon {
    background: Transparent !important;
    border: 1px solid #f2f2f2 !important;
}

.e-input-group.e-disabled:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error) {
    border: 1px solid #0069d9 !important;
    box-shadow: 0 0 0 3px rgb(0 123 255 / 25%) !important;
}


.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1200;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


/*letras respuesta pestaña principal informacion empleado*/
.content {
    font-weight: 400;
    color: rgb(0, 0, 255,100%);
    font-size: 15px
}
/*pie de pagina colores lineas y paginas numero*/
.e-pager {
    background-color: #ffffff;
}

    .e-pager .e-icons::before {
        color: #007bff !important;
        opacity: 2;
    }
    /*numeracion pagina y flechas cuadro*/
    .e-pager .e-pagercontainer {
        border-color: #bdbdbd;
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        display: inline-block;
        margin: 0 0 -3px 2px;
        overflow: hidden;
        color: #007bff;
    }

    .e-pager .e-currentitem {
        background: #007bff;
        color: #ffffff;
        opacity: 1;
    }
    /*letras pie pagina izq*/
    .e-pager .e-pagerconstant {
        display: inline-block;
        margin: 11px 0 6px 8px;
        overflow: hidden;
        width: auto;
        color: #007bff;
        font-weight: bold;
    }
    /*letras pie pagina derecha*/
    .e-pager div.e-parentmsgbar {
        float: right;
        padding-bottom: 9px;
        padding-right: 0;
        padding-top: 10px;
        color: #007bff;
        font-weight: bold;
    }
/*botones filtros*/
.e-btn.e-primary:active, .e-css.e-btn.e-primary:active {
    background-color: #0062cc;
    border-color: #005cbf;
    color: #ffffff !important;
    outline: #6c757d 0 solid !important;
    box-shadow: 0 0 0 0.25em rgb(0 92 191 / 18%) !important;
}

.e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item button.e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-color-content, .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-color-content {
    line-height: 30px !important;
    background: #ffffff !important;
}

    .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item button.e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-color-content, .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-color-content:hover {
        line-height: 30px;
        background: #ffffff !important;
        border-radius: 4px !important;
        color: #0069d9 !important;
    }

.e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-color-content::after, .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-color-content::after {
    content: "";
    height: 100% !important;
    position: absolute;
    right: 0;
    width: 1px;
}

.e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item button.e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-color-content, .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-color-content {
    line-height: 33px;
    background: #ffffff !important;
}

.e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn .e-btn-icon.e-caret, .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn .e-btn-icon.e-caret {
    font-size: 18px !important;
    background: #ffffff !important;
    height: 30px !important;
}
/*diseño de switch*/
.e-switch-wrapper .e-switch-inner {
    background-color: #ced4da !important;
    border-color: #007bff !important;
}

.e-switch-wrapper .e-switch-on {
    background-color: #f2f2f2 !important;
    color: #007bff !important;
}

.e-switch-wrapper .e-switch-off {
    background-color: #ced4da !important;
    color: #007bff !important;
}

.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: #ced4da !important;
}

.e-switch-wrapper .e-switch-handle {
    background-color: #007bff !important;
}
/*icono check box*/
.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
    background-color: #f2f2f2 !important;
    border-color: #007bff !important;
}

.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check, .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
    background-color: #007bff !important;
    border-color: rgba(0, 123, 255, 0.25) !important;
    box-shadow: 0 0 0 3px rgb(0 123 255 / 25%) !important;
    color: #ffffff !important;
}

.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check {
    border-color: rgba(0, 123, 255, 0.25) !important;
    box-shadow: 0 0 0 3px rgb(0 123 255 / 25%) !important;
    background-color: #007bff !important;
}

.e-checkbox-wrapper .e-check, .e-css.e-checkbox-wrapper .e-check {
    font-size: 9px !important;
    color: #ffffff !important;
    background-color: #007bff !important;
}
/*Titulos de separacion de informacion en forms*/
.title-module-span {
    color: #000000 !important;
    font-weight: bolder !important;
    font-family: 'Century Gothic' !important;
    background-color: #f2f2f2 !important;
    border-bottom: 6px solid #0D7ABD !important;
    margin-bottom: 5px;
    border-top: 10px !important;
    height: 35px;
    font-size: 15px !important;
    padding-top: 5px !important;
    width:100%;
}

/*Estilos para la tablas dentro de los combobox Templates*/
.combobox-template-wrapper {
    table-layout: auto;
    max-width: 500px
}


.header-combobox-template {
    background: #747579;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    border-style: solid;
    position: relative;
    padding: 0 12px 0;
    border-width: 1px !important
}

.rowcell-combobox-template {
    border-color: #dee2e6;
    border-style: solid;
    border-width: 1px 0 0;
    font-size: 14px;
    line-height: 21px;
    padding: 7px 12px;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
}
/*Busqueda de datos en tarifas, facturas clientes */
.e-accordion .e-acrdn-item.e-expand-state.e-select {
    border-color: rgba(0,0,0,.13);
    border-top-style: none !important;
    border-right-style: solid !important;
    border-left-style: solid !important;
    border-bottom-style: none !important;
    border-width: 0 0 1px 0;
}

.e-accordion {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: #fff;
    border: 1px solid rgba(0,0,0,.13);
    border-radius: 4px;
    width: 100% !important;
    margin-bottom: 3px !important;
}
/*Alineacion texto en combo box form*/
.e-float-input.e-disabled input, .e-float-input.e-control-wrapper.e-disabled input, .e-float-input input[disabled], .e-float-input.e-control-wrapper input[disabled] {
    color: #6c757d !important;
    text-align: center !important;
}
/*diseño bloqueo de campos numerico*/
.e-input[disabled], .e-input-group .e-input[disabled], .e-input-group.e-control-wrapper .e-input[disabled] {
    -webkit-text-fill-color: #6c757d !important;
    background: #e9ecef !important;
    border-color: #0069d9 !important;
}
/*validez y vigencia campos dentro  yborde*/
.e-input-group.e-error, .e-input-group.e-control-wrapper.e-error, .e-input-group.e-error:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
    border-color: #dc3545 !important;
}
/* Diseño dentro de form y fetch para numeros letras y popups*/
.textnumeric {
    text-align: center !important;
    color: blue !important;
    padding: 0px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
/*alineacion de numeros en textbox*/
.align-numeric {
    text-align: right !important;
    padding-right: 3px !important;
    font-weight: 700 !important;
}


/*color letras span con Css*/
.textospan {
    font-size: 13px !important;
    text-align: left !important;
    font-family: 'Century Gothic' !important;
}

.gap-campos {
    text-align: center !important;
    font-size: 14px !important;
    font-family: 'Century Gothic' !important;
    padding-left: 5px !important;
}
/*estilo de la fila con color para Css*/
.gap-10 {
    flex-wrap: wrap;
    padding-top: 10px !important;
    background: #F9F9FE;
}
/*espacios entre lineas*/
.gap-espacio {
    position: relative;
    padding-top: 5px !important;
}
/*formato para campos en costos*/

.formattext {
    font-size: 13px !important;
    text-align: center !important;
    font-family: 'Century Gothic' !important;
}

/* centrar campos fechas date range*/
.e-input-group.e-error input.e-input, .e-input-group.e-control-wrapper.e-error input.e-input {
    border-color: #dc3545 !important;
    text-align: center !important;
}

/*popup*/
.e-dropdownbase.e-list-item .e-item-focus {
    background-color: white;
    color: black;
    font-family: 'Century Gothic';
}

.e-content.e-dropdownbase {
    max-height: 250px !important;
    padding: 0px 0px 1px 0px !important;
}

.e-multi-column.e-ddl.e-popup.e-popup-open th {
    padding-right: 0px !important;
    text-overflow: unset;
    line-height: 25px !important;
}

.head {
    color: #ffffff !important;
    font-size: 12px !important;
    font-family: 'Century Gothic' !important;
    background: #007bff !important;
    text-align: center !important;
    column-width: auto !important;
    padding-right: 0px !important;
}

.e-dropdownbase .e-list-item {
    color: black !important;
    font-size: 11px !important;
    font-family: 'Century Gothic' !important;
}

.e-ddl.e-control.e-lib.e-popup.e-multi-column.e-popup-open {
    visibility: visible;
    max-height: 350px;
    z-index: 1201;
}

.e-dropdownbase .e-list-item.e-item-focus, .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover, .e-dropdownbase .e-list-item.e-hover {
    background-color: #007bff !important;
    color: #ffffff !important;
}

/*Icono de importacion*/
.e-importIcon::before {
    content: '\e77a';
}


/*======== Css Grid para tablarero Tarifas==========*/
.posicionamientoFijo {
    position: sticky;
    left: 27px;
    max-width: 93vw;
    width: 100%;
}
/*alineacion de numeros en textbox*/
.porcentaje .e-combobox {
    font-weight: 700 !important;
    padding-right: 3px;
    text-align: center !important;
}

.precio .e-numerictextbox {
    font-weight: 600 !important;
    text-align: right !important;
    padding-right: 3px !important;
}

/*color letras span con Css*/
.textoCorto .e-combobox {
    text-align: center !important;
    color: blue !important;
    font-weight: 600 !important;
}

.divisa .e-combobox {
    text-align: center !important;
    font-weight: 600 !important;
}

/*Color Kgm cbm */
.kgcbm .e-numerictextbox {
    text-align: center !important;
    color: blue !important;
    font-weight: 600 !important;
}
/*grid para los campos generales que se acomoden automatico segun el tamaño de la pantalla*/
.tarifas-grid {
    background: #f2f2f2;
    display: grid !important;
    gap: 8px !important;
    padding-bottom: 3px !important;
    width: 100% !important;
    grid-template-columns: repeat( auto-fit, minmax(150px, 1fr)) !important;
}

    .tarifas-grid > div {
        font-weight: 600 !important;
        font-size: 14px !important;
        font-family: 'Century Gothic';
        color: #14181C !important;
        display: flex !important;
        justify-content:flex-end !important;
        flex-direction:column !important;
        height:100% !important;
        text-align: center !important;
        padding: 3px;
    }


/*grid para los campos de precios */
.tarifascostos-grid {
    background: #f2f2f2;
    display: grid !important;
    gap: 8px;
    padding-bottom: 3px !important;
    width: 100% !important;
    grid-template-columns: repeat( auto-fit, minmax(110px, 1fr)) !important;
}

    .tarifascostos-grid > div {
        font-weight: 600 !important;
        font-size: 14px !important;
        font-family: 'Century Gothic';
        color: #14181C;
        display: flex !important;
        justify-content: flex-end !important;
        flex-direction: column !important;
        height: 100% !important;
        text-align: center !important;
        max-width:220px !important;
        
       
    }

    .tarifasterrestres-grid > div {
        font-weight: 600 !important;
        font-size: 14px !important;
        font-family: 'Century Gothic';
        color: #14181C;
        display: flex !important;
        justify-content: space-between !important;
        flex-direction: row !important;
        height: 100% !important;
        text-align: center !important;
        max-width: 110px !important;
    }

.e-float-input input:valid ~ label.e-float-text, 
.e-float-input input:valid ~ label.e-float-text.e-label-top, 
.e-float-input input ~ label.e-float-text.e-label-top, 
.e-float-input.e-control-wrapper input:valid ~ label.e-float-text, 
.e-float-input.e-control-wrapper input:valid ~ label.e-float-text.e-label-top, 
.e-float-input.e-control-wrapper input ~ label.e-float-text.e-label-top{
    font-weight:700 !important;
    user-select:text !important;
    text-align:center !important;
}

.fileHidden {
    display: none;
}

.e-grid .e-filtered::before {
    color: white !important;
}

.custom-dropDown.e-dropdown-btn, .cldp-btn.e-btn{
    background: #ffffff !important;
    color: #000000 !important;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    border:1px solid#007bff;
}
.cldp-btn.e-btn:disabled {
    background: rgba(108,117,125,.65) !important;
}
.cldp-btn.e-btn:disabled .e-btn-icon{
    color:white !important;
    }
.custom-dropDown.e-dropdown-btn[disabled]{
    background: #f2f2f2 !important;
    border-color: #f2f2f2 !important;
    font-weight:bolder;
}
.custom-dropDown.e-dropdown-btn:hover{
    background: none !important;
    font-weight:bolder;
}
.custom-dropDown.e-dropdown-btn .e-btn-icon,.cldp-btn.e-btn .e-btn-icon{
    color:#007bff !important;
}
.custom-white-btn.e-btn {
    background: #ffffff !important;
    color: #000000 !important;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    border: 1px solid#007bff;
}
..custom-white-btn.e-btn[disabled] {
    background: #f2f2f2 !important;
    border-color: #f2f2f2 !important;
    font-weight: bolder;
}

.custom-white-btn.e-btn:hover {
    background: none !important;
    font-weight: bolder;
}

.custom-white-btn.e-btn .e-btn-icon, .cldp-btn.e-btn .e-btn-icon {
    color: #007bff !important;
}

.dialog-full-view.e-dialog{
    top: 0px !important;
    max-height: none !important;
    border: none !important;
    border-radius: 0px !important;
}
.dialog-full-view.e-dialog .e-dlg-content{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 1rem !important ;
    padding-right: 1rem !important ;
}
.custom-dialog-blue.e-dialog {
    border-radius: 10px !important;
}

    .custom-dialog-blue.e-dialog .e-dlg-header {
        width: 100%;
    }

    .custom-dialog-blue .e-dlg-header * {
        color: white !important;
        font-weight: 500;
    }

    .custom-dialog-blue .e-dlg-header-content {
        border-radius: 10px 10px 0 0 !important;
        background: #0D7ABD;
    }

    .custom-dialog-blue .e-dlg-content {
        border-radius: 0px 0px 10px 10px !important;
    }

.ct-center .e-textbox {
    text-align: center;
    padding-left: 0px !important;
}

.ct-right .e-numerictextbox {
    text-align: right;
    padding-right: 10px !important;
}
/*Usado para ocultar el buscador en tipos de filtros diferentes de excel, usados nomalment en los enum tipo checkbox en los grids*/
.e-filter-popup:not(.e-excelfilter) .e-dlg-content .e-searchcontainer .e-searchbox {
    display: none;
}
/*usado param la seleccion manual del grid*/
.active-row {
    background: rgba(0,0,0,.17) !important
}

/*spinner overlai blanco y texto grande*/
.e-spin-overlay.custom-white {
    background-color: #a0a0a096 !important;
}
.e-spinner-pane.custom-white .e-spinner-inner .e-spin-label {
    font-weight: bolder !important;
}

/*panel de texto diagonal*/
.aviso-diagonal {
    width: 100%;
    background: transparent;
    position: absolute;
    top: 45%;
    left: 0%;
    transform: rotate(25deg);
    text-align: center;
    color: #fff;
    vertical-align: middle;
    z-index: 2;
}
    .aviso-diagonal p {
        font-family: century gothic;
        padding-right: 60px;
        width: 100%;
        font-size: 44px;
        color: red;
        letter-spacing: 0.4em;
        font-weight: bolder;
    }

    .main-stat-emb {
        border-radius: 6px;
        display: flex;
        height: 20px;
        align-items: center;
        justify-content: center;
    }

.main-stat-emb-ACTIVA {
    background: #27ae60 !important;
    color: #ffffff !important;
}

.main-stat-emb-TERMINADA {
    background: #3498db !important;
    color: #ffffff !important;
}

.main-stat-emb-CANCELADA {
    background: #cb4335 !important;
    color: #ffffff !important;
}

.main-stat-emb-PENDIENTE {
    background: #ffdd23 !important;
    color: #6c757d !important;
}
.cu-d-content .e-dlg-header {
    display: contents !important;
}
.cabecera-span {
    font-family: 'Century Gothic';
    font-weight: bolder;
}

.fixed-scroller {
    height: calc(100vh - 160px);
    overflow: auto;
}

.cot-manual-ids {
    color: blue;
    font-weight: bolder;
}
.cot-manual-secondary-ids {
    color: #940404;
    font-weight: bolder;
}

.e-costoExtra::before {
    content: url("/Images/blue-coin.svg");
}

/*Colores para las ventas y costos todos locos*/
.color-manual {
    background-color: #c3dff9;
}

.color-extra {
    background-color: #ffda89;
}

.color-demora {
    background-color: #ffb7ad;
}
.sop-orange {
    background: orange !important;
}

/*quita los checkbox delos grid que tengal la clase hide-check-all*/
.hide-check-all.e-grid .e-headerchkcelldiv .e-checkbox-wrapper{
    display : none !important;
}
/*quita los checkbox espesificos del grid
    uso sugerido con QueryCellInfo de los grids
*/
.e-rowcell.e-hide-s-check .e-checkbox-wrapper {
    display: none;
}