:root {
    --Negro: #000000;
    --Rojo: #C80000;
    --Blanco: #ffffff;
    --Azul: #03358f;
    --Verde: #026A22;
    --bgOscuro: #212121;
    --bgMedio: #323232;
    --bgClaro: #585858;
    --bgSelec: #c6dded;
    --bgInput: #F5F5F5;
    --bgScroll: #E8E6E6;
    --bgFocus: #E0F0FB;
    --bgFiltros: #f7f7f7; /* #E8F9FF */
    --bordeTab: #d6d6d6; /* #E8F9FF */
    --bgMain: #ebebeb;
    --bgVerdeClaro: #B7EAB0;
    --bgAzul: #03348f7b;
    --bgRojo: #c800000f;
    --bgVerde: #0e7b2f5f;
    --bgContenido: #ffffff;
    --NegroTrans: rgba(0,0,0,.7);
    --BlancoTrans: rgba(255,255,255,.7);
    --bgEmergente: #E3E3E3;
  }

* {
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--bgMain);
    background-position: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 0;
}

    input[type="checkbox"] {
        cursor: pointer;
        width: auto;
    }

/*Scrollbar*/
::-webkit-scrollbar { width: .5rem; }
    ::-webkit-scrollbar-track { background: var(--bgInput); }
    ::-webkit-scrollbar-thumb { background: var(--bgScroll); }
        ::-webkit-scrollbar-thumb:hover { background: var(--bgClaro); }
/**********/


.ContenedorPrincipal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
}

    .Encabezado {
        padding: .3rem;
        height: 5rem;
        background-color: var(--bgContenido);
        overflow: hidden;
    }

        .LogoEncabezado {
            float: left;
            width: 15%;
            text-align: center;
        }

            .LogoEncabezado img {
                margin: 0;
                height: 4.4rem;
            }


        .MenuUsuario {
            position: fixed;
            top: 0;
            right: 0;
            width: 20%;
            max-height: 5rem;
            overflow: hidden;
            transition: max-height .3s ease-out;
            background-color: var(--bgMain);
            box-sizing: border-box;
            z-index: 9;
        }

            .HiddenMenuUsuario {
                cursor: pointer;
                transition: max-height .6s ease-in;
                max-height: 90vh;
            }

            .MenuUsuarioInfo {
                display: block;
                height: 5rem;
                padding: .4rem;
                background-color: var(--bgContenido);
            }

                 .MenuUsuarioInfo table {
                    width: 100%;
                    border: none;
                    text-align: center;
                }

                #NombreUsuario {
                    cursor: pointer;
                    font-size: 1rem;
                    margin-bottom: .3rem;
                    display: block;
                }

                #MiSucursal {
                    cursor: pointer;
                    font-size: .9rem;
                }

                #MiImagen {
                    height:3.6rem;
                    width:3.6rem;
                    border-radius: 50%;
                    border: 1px solid var(--bgClaro);
                    background-image: url('/iconos/usuario.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center;
                }

            .MenuUsuarioItem {
                display: block;
                width: 100%;
                margin-top: .1rem;
                margin-bottom: .1rem;
                background-color: var(--bgInput);
                padding: 1rem;
            }

                .MenuUsuarioItem:hover {
                    cursor: pointer;
                    background-color: var(--bgSelec);
                }

                .MenuUsuarioItem table {
                    width: 100%;
                    border: none;
                }

                .MenuUsuarioItem img {
                    width: 1.3rem;
                }

        .AreaNotificaciones {
            position: fixed;
            top: 0;
            right: 3%;
            padding-left: .3rem;
            padding-right: .3rem;
            width: calc(17% + 5rem);
            max-height: 5rem;
            overflow: hidden;
            transition: max-height .2s ease-out;
            background-color: var(--bgContenido);
            z-index: 8;
            box-sizing: border-box;

            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr;

        }

            .NotificacionIco {
                margin: 1rem;
                cursor: pointer;
                width: 3rem;
                height: 3rem;
                background-image: url('/iconos/campana.png');
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }

                .NotificacionIco span {
                    margin-left: .3rem;
                    position: relative;
                    background-color: var(--Rojo);
                    color: white;
                    font-size: .7rem;
                    padding: .2rem .4rem .2rem .4rem;
                    border: none;
                    border-radius: 10px;
                }

            .ListaNotif {
                background-color: var(--bgMain);
                padding: .2rem;
                overflow-x: hidden;
                overflow-y: auto;
                word-break: break-word;
            }

                .NotificacionItem {
                    background-color: var(--bordeTab);
                    padding: .5rem;
                    box-sizing: border-box;
                }

                .NotificacionItem:hover {
                    background-color: var(--bgSelec);
                }

                    .NotificacionItem table {
                        width: 100%;
                        border: none;
                    }


        .AreaFavoritos {
            position: fixed;
            top: 0;
            right: 7%;
            padding-left: .1rem;
            padding-right: .1rem;
            width: calc(17% + 5rem);
            height: auto;
            max-height: 5rem;
            overflow: hidden;
            transition: max-height .2s ease-out;
            background-color: var(--bgContenido);
            z-index: 7;
            box-sizing: border-box;

            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr;

        }

            .FavoritosIco {
                margin: 1rem 0 1rem .4rem;
                cursor: pointer;
                width: 3rem;
                height: 3rem;
                background-image: url('/iconos/fav_head.png');
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }

            .ListaFav {
                background-color: var(--bgMain);
                padding: .2rem;
                overflow-y: auto;
            }

                .FavoritoItem {
                    background-color: var(--bgInput);
                    padding: .5rem;
                }

                .FavoritoItem:hover {
                    background-color: var(--bgSelec);
                }

                .ListaFav table {
                    cursor: pointer;
                    width: 100%;
                    border: none;
                }

                .tdImagenMenu {
                    width: 3rem;
                    padding: .5rem;
                }

                    .tdImagenMenu img {
                        width: 100%;
                        filter: invert(100%);
                    }

                .tdNombreMenu {
                    width: calc(100% - 3rem);
                    height: 3rem;
                    /*padding: .5rem;*/
                }


    .Estructura {
        display: grid;
        grid-template-columns: 15% 1fr;
        grid-template-rows: 1fr;
        overflow-y: hidden;
    }

    .AreaContenido {
        padding: .4rem;
        padding-top: .2rem;
        overflow: hidden;
    }

        .ContenidoLibre {
            display: block;
            min-height: 100%;
            max-height: 100%;
            padding: .5rem;
            background-color: var(--bgContenido);
            border-radius: .5rem;
            overflow: hidden;
        }

        /*---------- LISTAS ---------*/
        .ContenidoListas {
            min-height: 100%;
            max-height: 100%;
            padding: .5rem;
            background-color: var(--bgContenido);
            border-radius: .5rem;
            overflow: hidden;

            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto 1fr auto ;

        }

            .SubTitulo {
                display: block;
                width: 100%;
                font-size: 1.1rem;
                color: var(--Negro);
                font-weight: bold;
                padding: .4rem .7rem .2rem .7rem;
                border-bottom: 1px solid var(--bgClaro);
                margin-bottom: .2rem;
            }

            .FormTitulo {
                background-color: var(--bgContenido);
                padding:  .3rem .7rem .4rem .7rem;
                font-size: 1.5rem;
                color: var(--Negro);
            }

                .IcoFavorito {
                    margin-top: .3rem;
                    margin-right: .7rem;
                    height: 1.2rem;
                    cursor: pointer;
                }

                .BtnIcoTitulo {
                    background-color: var(--bgMedio);
                    border-radius: .3rem;
                    border: none;
                    padding: .2rem;
                    float: right;
                    margin-left: 1.3rem;
                    }

                    .BtnIcoTitulo img {
                        margin: .2rem;
                        width: 1rem;
                        height: 1rem;
                    }

                .BtnIcoTitulo:hover {
                    background-color: var(--bgClaro);
                    cursor: pointer;
                }

            .AreaFiltros {
                background-color: var(--bgFiltros);
                padding: 0;
                border-radius: .3rem;
                font-size: .9rem;
                color: var(--Negro);
                height: 0;
                overflow: hidden;
            }

                .AreaFiltros select {
                    width: 96%;
                    margin-left: 2vh 2% 2vh 2%;
                    /*margin-left: 2%;*/
                    border: 1px solid var(--bgClaro);
                    background-color: var(--bgInput);
                    padding: .3rem;
                    border-radius: .3rem;
                }

                    .AreaFormModal select:focus {
                        background-color: var(--bgFocus);
                        outline: none;
                    }

                .AreaFiltros input {
                    width: 96%;
                    margin-left: 2vh 2% 2vh 2%;
                    /*margin-left: 2%;*/
                    border: 1px solid var(--bgClaro);
                    background-color: var(--bgInput);
                    padding: .3rem;
                    border-radius: .3rem;
                }

                    .AreaFormModal input:focus {
                        background-color: var(--bgFocus);
                        outline: none;
                    }

            .AreaTablaHead {
                padding: 0;
            }

                .AreaTablaHead table {
                    margin-top: .6rem;
                    background-color: var(--bgOscuro);
                    color: var(--Blanco);
                    font-size: .7rem;
                    width: 100%;
                    padding: 0;
                    border: none;
                }

                .AreaTablaHead table td {
                    background-color: var(--bgOscuro);
                    color: var(--Blanco);
                    font-size: .8rem;
                    width: 100%;
                    text-align: center;
                    padding: .3rem .1rem .3rem .1rem;
                }

            .AreaLista {
                max-height: 100%;
                background-color: var(--Blanco);
                color: var(--Negro);
                padding: 0;
                overflow-y: auto;
            }

                .AreaLista table {
                    font-size: 1rem;
                    width: 100%;
                    padding: 0;
                    border: none;
                }

                .AreaLista table td {
                    padding: .5rem;
                    border-bottom: 1px solid var(--bgMain);
                    word-break: break-word;
                    vertical-align: top;
                }

                .AreaLista table tr {
                    background-color: var(--Blanco);
                }

                .AreaLista table tr:hover {
                    background-color: var(--bgSelec);
                    cursor:pointer;
                }

        .AreaListaNoHover {
                max-height: 100%;
                background-color: var(--Blanco);
                color: var(--Negro);
                padding: 0;
                overflow-y: auto;
            }

            .AreaListaNoHover table {
                    font-size: 1rem;
                    width: 100%;
                    padding: 0;
                    border: none;
            }

            .AreaListaNoHover table td {
                    padding: .5rem;
                    border-bottom: 1px solid var(--bgMain);
                    word-break: break-word;
                    vertical-align: top;
            }

            .AreaListaNoHover table tr {
                    background-color: var(--Blanco);
            }


        .Botonera {
            border-top: 1px solid var(--bgMain);
            padding: 1.2rem .3rem .7rem .3rem;
        }

            .BotonL {
                float: left;
                margin-right: 1.5rem;
                padding: .3rem 1rem .3rem 1rem;
                min-width: 8vw;
                font-size: 1rem;
                font-weight: 200;
            }

                .BotonL img {
                    height: 1rem;
                }

            .BotonR {
                float: right;
                margin-left: 1.5rem;
                padding: .3rem 1rem .3rem 1rem;
                min-width: 8vw;
                font-size: 1rem;
                font-weight: 200;
            }

                .BotonR img {
                    height: 1rem;
                }


.MenuLateral {
    transition: all 0.3s;
    background-color: var(--bgOscuro);
    color: white;
}

    .MenuLateral ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 1rem;
        color: #ffffff;
        box-sizing: border-box;
        }

        .MenuLateral ul ul {
            transition: all 0.3s;
            list-style-type: none;
            margin: 0;
            padding: 0;
            opacity: 0;
            position: absolute;
            left: 100%;
            width: 100%;
            visibility: hidden;
            box-sizing: border-box;
			z-index: 2;
            }

            .MenuLateral ul ul li {
                top: -28px;
                padding: 10px;
                border-bottom: 1px solid var(--bgClaro);
                background-color: var(--bgMedio);
                width: 100%;
                box-sizing: border-box;
                }

                .MenuLateral ul ul li:hover {
                    background-color: var(--bgClaro);
                    width: 100%;
                    box-sizing: border-box;
                    }

        .MenuLateral ul li {
            padding: 10px;
            border-bottom: 1px solid var(--bgMedio);
            position: relative;
            width: 100%;
            vertical-align: middle;
            background-color: var(--bgOscuro);
            box-sizing: border-box;
            }

            .MenuLateral ul li img {
                /*width: 15px;*/
                height: 1rem;
                vertical-align: text-top;
                padding-right: 5px;
                }

            .MenuLateral ul li:hover {
                background-color: var(--bgMedio);
                cursor: pointer;
                }

            .MenuLateral ul li:hover > ul {
                opacity: 1;
                visibility: visible;
                }

.ContenedorAvisos {
    position: fixed;
    top: 0;
    left: 40vw;
    width: 20vw;
    height: auto;
    z-index: 99;
}

    .UnAviso {
        display: block;
        border-radius: .7rem;
        padding: .5rem;
        margin-top: .3rem;
        margin-bottom: .3rem;
        background-color: var(--bgVerdeClaro);
        border: 1px solid var(--Verde);
        color: var(--Verde);
        font-weight: bold;
        text-align: center;
        animation-name: desaparece;
        animation-duration: 2.5s;
        opacity: 0;
    }

    @keyframes desaparece {
        0%   {opacity:100;}
        70%  {opacity:100;}
        100% {opacity:0;}
      }


.BloqueoBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--BlancoTrans);
    visibility: visible;
    z-index: 99;
}

    .BloqueoBg img {
        position: absolute;
        top: calc(30% + 2vh);
        left: calc(50% - 3vh);
        width: 6vh;
        height: 6vh;
        opacity: 70%;
    }

    .Spinner {
        position: absolute;
        top: 30%;
        left: calc(50% - 5vh);
        width: 10vh;
        height: 10vh;
        border-radius: 50%;
        box-sizing: border-box;
        border: .5vh solid transparent;
        border-top-color: var(--bgOscuro);
        border-bottom-color: var(--bgOscuro);
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
          0% { transform: rotate(0deg);   border-width: .5vh; }
         50% { transform: rotate(180deg); border-width: .7vh; }
        100% { transform: rotate(360deg); border-width: .5vh; }
    }

.wait {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color: var(--NegroTrans); */
	visibility: hidden;
	z-index: 999;
	cursor: wait;
}

.BloqueMensajes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--BlancoTrans);
    visibility: hidden;
    z-index: 11;
}

    .Mensaje {
        position: absolute;
        top: 20%;
        left: 30%;
        width: 40%;
        min-height: 20%;
        border-radius: 1rem;
        background-color: var(--bgOscuro);

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;

        box-shadow: 6px 6px 11px -2px rgba(0,0,0,0.6);
        -webkit-box-shadow: 6px 6px 11px -2px rgba(0,0,0,0.6);
        -moz-box-shadow: 6px 6px 11px -2px rgba(0,0,0,0.6);

    }

        .MensajeTitulo {
            border-radius: .5rem .5rem 0 0;
            background-color: black;
            font-size: 1.2rem;
            color: white;
            padding: .6rem;
            margin-bottom: .5rem;
        }

        .MensajeCuerpo {
            padding: .6rem;
            color: white;
            font-size: 1.3rem;
            overflow: auto;
        }

            .MensajeCuerpo table {
                width: 100%;
                border: none;
            }

                .MensajeCuerpo table td {
                    vertical-align: top;
                    padding: .5rem;
                    color: #fff;
                    word-break: break-word;
                }

            .MensajeCuerpo img {
                margin-left: 2vh;
                margin-right: 2vh;
                height: 6vh;
            }


        .MensajePie {
            padding: .6rem;
            border-top: 1px solid black;
            margin-top: .5rem;
        }

            .MensajePie button {
                cursor: pointer;
                float: right;
                margin-right: 1rem;
                padding: .3rem 1rem;
                font-size: .9rem;
                min-width: 25%;
            }

.BloqueoModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--NegroTrans);
    display: none;
    z-index: 10;
}

    .FormModal {
        position: fixed;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        background-color: var(--Blanco);
        border-radius: .5rem;
        overflow: hidden;

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;

        box-shadow: 8px 8px 20px 8px rgba(0,0,0,0.74);
        -webkit-box-shadow: 8px 8px 20px 8px rgba(0,0,0,0.74);
        -moz-box-shadow: 8px 8px 20px 8px rgba(0,0,0,0.74);

    }

    .TituloForm {
        background-color: var(--Negro);
        color: var(--Blanco);
        font-size: .9rem;
        padding: .2rem .3rem .2rem .3rem;
        border-radius: .5rem .5rem 0 0;
        box-sizing: border-box;
    }

        .TituloForm table {
            width: 100%;
            border: none;
        }

        .TituloForm img {
            width: 2rem;
            cursor: pointer;
        }

    .BotonesModal {
        padding: .7rem;
        border-radius: 0 0 .5rem .5rem;
        box-sizing: border-box;
        border-top: 1px solid var(--bgClaro);
    }

    .AreaFormModal {
        background-color: var(--Blanco);
        color: var(--Negro);
        font-size: 1.1rem;
        overflow-x: hidden;
        overflow-y: auto;
        padding: .4rem .7rem .4rem .7rem;
        box-sizing: border-box;
    }

        .AreaFormModal table {
            width: 100%;
            border: none;
        }

        .AreaFormModal table tr {
            visibility: visible;
        }

        .AreaFormModal table td {
            padding: .2rem;
            box-sizing: border-box;
            vertical-align: top;
        }

        .LabelInput {
            display: block;
            width: 100%;
            min-height:2rem;
            border: 1px solid var(--bgClaro);
            background-color: var(--bgInput);
            color: var(--Negro);
            padding: .3rem;
            border-radius: .3rem;
        }

        .inputParamOperation {
            display: block;
            width: 100%;
            min-height:2rem;
            border: 1px solid var(--bgClaro);
            background-color: var(--Blanco);
            color: var(--Negro);
            padding: .3rem;
            border-radius: .3rem;
            text-align: center;
        }
        .inputParamOperation:disabled {
            background-color: var(--bgInput);

        }


        .LabelInput::-webkit-outer-spin-button,
        .LabelInput::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .LabelInput[type=number] {
            -moz-appearance: textfield;
        }
        .AreaFormModal input {
            width: 100%;
            border: 1px solid var(--bgClaro);
            background-color: var(--bgInput);
            color: var(--Negro);
            padding: .3rem;
            border-radius: .3rem;
        }

            .AreaFormModal input:focus {
                background-color: var(--bgFocus);
                outline: none;
            }


        .AreaFormModal select {
            width: 100%;
            border: 1px solid var(--bgClaro);
            background-color: var(--bgInput);
            padding: .3rem;
            border-radius: .3rem;
        }

            .AreaFormModal select:focus {
                background-color: var(--bgFocus);
                outline: none;
            }

        .AreaFormModal textarea {
            width: 100%;
            border: 1px solid var(--bgClaro);
            background-color: var(--bgInput);
            padding: .3rem;
            border-radius: .3rem;
        }

            .AreaFormModal textarea:focus {
                background-color: var(--bgFocus);
                outline: none;
            }

        .AreaModalProcesos{
            position: fixed;
            top: 4%;
            left: 10%;
            width:  80%;
            height: 90%;
            background-color: var(--Blanco);
            border-radius: .5rem;
            overflow: hidden;

            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto auto 1fr auto;

            box-shadow: 8px 8px 20px 8px rgba(0,0,0,0.74);
            -webkit-box-shadow: 8px 8px 20px 8px rgba(0,0,0,0.74);
            -moz-box-shadow: 8px 8px 20px 8px rgba(0,0,0,0.74);
        }

.Buscador {
    width: 100%;
    border: 1px solid var(--bgClaro);
    background-color: var(--Blanco);
    padding: .3rem;
    border-radius: .3rem;
    font-size: 1rem;
}

.Buscador:focus {
    outline: none;
    background-color: var(--bgFocus);
}

.LabelLink {
    display: block;
    cursor: pointer;
    color: var(--Azul);
    text-decoration: underline;
}

.BarraTab {
    height: auto;
    display: block;
}

.TabSel {
    display:inline-table;
    margin: .3rem .2rem 0 0;
    background-color: var(--bgFiltros);
    font-weight: bold;
    color: var(--Negro);
    border-radius: .5rem .5rem 0 0;
    border: 1px solid var(--bordeTab);
    border-bottom: 1px solid var(--bgFiltros);
    padding: .4rem 1rem .4rem 1rem;
    height: auto;
}

.TabNoSel {
    display:inline-table;
    margin: .3rem .2rem 0 0;
    background-color: var(--bgMedio);
    font-weight: 100;
    color: var(--bgMain);
    border-radius: .5rem .5rem 0 0;
    border: 1px solid var(--bgInput);
    cursor: pointer;
    padding: .4rem 1rem .4rem 1rem;
    height: auto;
}

    .TabNoSel:hover {
        background-color: var(--bgClaro);
        color: var(--Blanco);
    }


.imgEmpleado {
    width: 50px;
    height: 50px;
    margin: auto;
    padding: 10px;
    border-radius: 50%;
    background-image: url("/iconos/usuario.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.fotoEmpleado {
    width: 175px;
    height: 175px;
    margin: auto;
    padding: 10px;
    border-radius: 50%;
    background-image: url("/iconos/usuario.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/*  Revisar si esta en uso  */
.imgUsuario {
    width: 50%;
    max-width: 3rem;
    border-radius: 50%;
}

.botonFlotante {
    border-radius: 50%;
    position: absolute;
    bottom: 10px;
    right: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 1rem;
    background-color: var(--bgMedio);
    border: 2px solid;
    border-color: var(--bgOscuro);
    color: var(--Blanco);
    margin-right: .3rem;
}

    .botonFlotante:hover {
        background-color: var(--bgOscuro);
    }

.contenedorDocumentos {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
}
    .areaDocumentos {
        overflow: hidden;
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr;
        position: relative;
    }

#TablaCambiaPass {
    border: none;
    width: 80%;
    margin-left: 10%;
    font-size: 1rem;
    margin-top: .7rem;
    margin-bottom: .7rem;
}

    #TablaCambiaPass td {
        width: 70%;
        padding: .4rem .7rem .4rem .7rem;
        vertical-align: top;
    }


.TreeView {
    width: 100%;
    border: none;
    color: var(--Negro);
    box-sizing: border-box;
}

    .TreeView span {
        display: block;
        font-size: 1.2rem;
    }

        .TreeView span:hover {
            cursor: pointer;
        }

    .TreeView p:hover {
        cursor: pointer;
        text-decoration: underline;
    }

    .TreeView td {
        vertical-align: top;
        font-size: 1.1rem;
        padding: .3rem .7rem .3rem .7rem;
        width: calc(100% - 2rem);
    }



/* Mis Datos */

.MisDatosPrincipal{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;

}

    .imgMisDatos {
        width: 150px;
        height: 150px;
        margin: auto;
        padding: 10px;
        border-radius: 50%;
        background-image: url("../iconos/usuario_big.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .InformacionPrincipal{
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        overflow: hidden;
    }

        .PrincipalMisDatos{
            width: 100%;
            height: 100%;
            overflow: auto;
            /* background-color: var(--bgFiltros); */
        }

        .MisDatosImg{
            width: 10%;
            text-align: center;
            vertical-align: top;
        }
            .MisDatosImg img{
                width: 1rem;
                height: 1rem;
            }

        .TablaMisDatos {
            width: 100%;
            margin-bottom: 1.5rem;
            border: none;
        }

            .TablaMisDatos td {
                border-bottom: .7rem solid var(--Blanco);
            }

            .TablaMisDatos tr:hover {
                background-color: var(--bgInput);
            }

/*----------- BUSCADOR EMERGENTE --------------- */

.BgBuscadorEmergente {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--BlancoTrans);
    display: none;
    z-index: 90;
}

    .ContenedorBuscador {
        position: fixed;
        top: 10%;
        left: 20%;
        width: 60%;
        height: 74%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr;
        overflow: hidden;
        padding: .2rem .5rem 1rem .5rem;
        border-radius: .5rem;
        background-color: var(--bgScroll);
        border: 1px solid var(--bgClaro);

        box-shadow: 6px 6px 11px -2px rgba(0,0,0,0.6);
        -webkit-box-shadow: 6px 6px 11px -2px rgba(0,0,0,0.6);
        -moz-box-shadow: 6px 6px 11px -2px rgba(0,0,0,0.6);

    }

        #BE_Titulo {
            font-size: 1.3rem;
            color: var(--bgOscuro);
        }

        .BE_TituloBuscador {
            color: var(--bgOscuro);
        }

            .BE_TituloBuscador table {
                width: 100%;
                border: none;
            }

            .BE_TituloBuscador img {
                width: 2rem;
                cursor: pointer;
                filter: invert(100%);
            }

        .BE_Buscador {
            padding: .2rem 0 .5rem 0;
            width: 100%;
        }

            .BE_Buscador input {
                width: 96%;
                margin-left: 2%;
                padding: .4rem;
                border-radius: .3rem;
                font-size: 1.1rem;
                border: none;
                background-color: var(--Blanco);
                color: var(--Negro);
            }

            .BE_Buscador input:focus {
                outline: none;
            }

        .BE_TblHeaders {
            width:100%;
            margin-top: .3rem;
        }

            .BE_TblHeaders table {
                width:100%;
                border: none;
            }

                .BE_TblHeaders table td {
                    padding: .5rem 0 .5rem 0;
                    text-align: center;
                    border: none;
                    background-color: var(--bgMedio);
                    color: var(--Blanco);
                    font-size: .8rem;
                }

        .BE_Lista {
            width: 100%;
            background-color: var(--Blanco);
            color: var(--bgOscuro);
            overflow-y: auto;
        }

        .BE_Lista table {
            width: 100%;
        }

            .BE_Lista table tr {
                background-color: var(--Blanco);
                cursor: pointer;
            }

                .BE_Lista table tr:hover {
                    background-color: var(--bgSelec);
                }

            .BE_Lista table td {
                padding: .6rem .2rem .6rem 1rem;
                border-bottom: 1px solid var(--bgMain);
            }

.ContenedorConTabs {
    width: 100%;
    height: 100%;
    background-color: var(--Blanco);
    box-sizing: border-box;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
}


/* Form Nuevo Cliente */
.AreaContacto{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
}

.background-negro:hover{
    background-color: var(--Negro);
    color: var(--Blanco);
}


/* UI */
.required {
    font-weight: bold;
    color: #9d0000;
}

.invalid {
    border: 2px solid #9d0000 !important;
}

.invalid_message {
    font-size: x-small;
    color: #9d0000;
    font-weight: bold;
}

.scrollable {
	max-height: 100%;
	background-color: var(--Blanco);
	color: var(--Negro);
	padding: 0;
	overflow-y: auto;
}

.contenidoTabla {
    font-size: 1rem;
    width: 100%;
    padding: 0;
    border: none;
    margin-top: 0;
  }

  .contenidoTabla thead {
    background-color: var(--bgOscuro);
    color: var(--Blanco);
    font-size: .8rem;
    width: 100%;
    padding: .3rem .1rem .3rem .1rem;
    border: none;
    font-weight: normal;
  }

  .contenidoTabla thead th {
    background-color: var(--bgOscuro);
    color: var(--Blanco);
    font-size: .8rem;
    width: 100%;
    text-align: center;
    padding: .5rem .1rem .5rem .1rem;
    font-weight: normal;
    position: sticky; top: 0; z-index: 1;
  }

  .contenidoTabla tbody {
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--Blanco);
    color: var(--Negro);
    padding: 0;
  }

  .contenidoTabla tbody td {
    padding: .7rem;
    border-bottom: 1px solid var(--bgMain);
  }

  .contenidoTabla tbody tr {
    background-color: var(--Blanco);
  }

  .contenidoTabla tbody tr:hover {
    background-color: var(--bgSelec);
  }

/*
	Progress bar
	<progress id="progress" class="progress progress-success" max="100" value="10"></progress>

*/
.progress {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	border-radius: 10px;
	height: 1rem;
}

.progress::-webkit-progress-bar {
	background-color: #f0f0f0;
}

.progress::-webkit-progress-bar, .progress::-webkit-progress-value {
	border-radius: 10px;
}

.progress::-moz-progress-bar {
	border-radius: 10px;
}

.progress-success::-webkit-progress-value {
	background: #18e23c;
}

 ul.tree-component {
	 list-style-type: none;
	 padding-inline-start: 0 !important;
 }

ul.tree-component ul {
	list-style-type: none;
}

ul.tree-component li {
	vertical-align: top;
	font-size: 14px;
	padding: .3rem .7rem .3rem .7rem;
}

ul.tree-component li .inactive {
	color: var(--Rojo) !important;
}

.caret {
	cursor: pointer;
	user-select: none; /* Prevent text selection */
	padding: .3rem .7rem .3rem .7rem;
}

.caret:hover {
	text-decoration: underline;
}

/* Create the caret/ + sign with a unicode, and style it */
.caret::before {
	content: "\002B";
	color: black;
	display: inline-block;
	padding: .3rem .7rem .3rem .7rem;
}

/* the caret/ - sign with a unicode clicked on (using JavaScript) */
.caret-down::before {
	content: "\002D";
}

/* Hide the nested list */
.nested {
	display: none;
}

.hidden {
	visibility: hidden;
}

/* Show the nested list when the user clicks on the caret/ +- (with JavaScript) */
.active {
	display: block;
	color: var(--Negro) !important;
}

.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: auto;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 15px;

	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	top: -50px;
	right: -50%;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
}

.tooltip .tooltiptext::before {
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #000000;
	bottom: -6px;
	content: "";
	height: 0;
	left: 50%;
	margin-left: -6px;
	position: absolute;
	width: 0;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.card {
	border-radius: 14px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .03), 0px 2px 30px 0px rgba(0, 0, 0, .08), 0px 0px 1px 0px rgba(0, 0, 0, .3);
}

.cancelledRow {
	color: var(--Rojo) !important;
	background-color: var(--bgRojo) !important;
}

/** Form Builder **/


.form-group {
    margin: 1rem;
}

.form-group-inline {
    margin: 1rem;
    display: flex;
}

.label-form-group {
    display: inline-block;
    margin-top: .5rem;
}

.label-form-group-inline {
    display: inline-block;
    margin-top: .5rem;
    width: 20%;
}

.LabelInputNumber {
    display: block;
    width: 100%;
    min-height:2rem;
    border: 1px solid var(--bgClaro);
    background-color: var(--bgInput);
    color: var(--Negro);
    padding: .3rem;
    border-radius: .3rem;
    -moz-appearance: textfield !important;
}

.LabelInputRadio {
    display: block;
    width: 100%;
    min-height: 2rem;
    color: var(--Negro);
    padding: .3rem;
    border-radius: .3rem;
}

.LabelInputCheck {
    display: inline;
    width: 100%;
    min-height: 2rem;
    padding: .3rem;
    border-radius: .3rem;
}

/*** Card Component ***/

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.card-container {
    padding: 2px 16px;
}

/** Draggable Component **/
.card-draggable {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    padding: 0.7rem;
    list-style-type: none;
}

.drag-container {
    padding: 15px;
}

.drag-over {
    background-color: var(--bgFocus);
}