@font-face {
    font-family: 'Avenir-Black';
    src: url('../../../../fonts/AvenirLTStd-Black.otf');
}
@font-face {
    font-family: 'Avenir-Book';
    src: url('../../../../fonts/AvenirLTStd-Book.otf');
}

html {
    min-height: 100%;
    position: relative;
}

body{
    background-image:url(../../../../Img/background2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    font-family: 'Avenir-Black';
    margin: 0;
    padding: 0;
    border: none;
}

h3, h5, a, a:hover, a:link, a:visited, a:active{
    color:rgb(207, 207, 207);
    padding-bottom: 2%;
    text-decoration:none;
}

button{
    font-family: 'Avenir-Book';
}


button:active {
    outline: none;
    border: none;
    color: rgb(207, 207, 207);
    background-color: blue;
}

ul {
    margin: 0px;
    padding-left: 23px;
}

li{
    list-style-type:circle;
    color: rgb(120, 230, 230);
    font-size: 2rem;
}

hr {
    width: 60%;
    border: 0; 
    height: .1px; 
    text-align: center; 
    background-color: rgb(120, 230, 230);
}

select, option {
    color:rgb(0, 157, 152);
}

footer{
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: 1%;
    background-color: #3c3c3c;
    font-family: 'Avenir-Book';
}

input{
    font-family: "Avenir-Book";
}

label{
    font-family: "Avenir-Book";
    color: rgb(207, 207, 207);
}

.footerText{
    color:rgb(207, 207, 207);
    font-size: .7rem;
}

.footerText2{
    color:rgb(207, 207, 207);
    font-size: 1rem;
}

.footerBorder{
    border-top: 2px solid rgb(180, 165, 112);
    width: 100%;
}

.liFuncionarios{
    list-style-type:circle;
    color: rgb(180, 165, 112);
    font-size: 2rem;
}

.divSeparador{
    width:101%; 
    background-color: rgb(207, 207, 207);
    padding: 7px; 
    left: 0; 
    right: 0;
}

.divBuscador{
    width:101%; 
    background-color: rgba(60, 60, 60, .85);
    padding-bottom: 50px; 
    left: 0; 
    right: 0;
}

.cursor{
    cursor: pointer;
}

.style{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.style2{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color:rgb(0, 157, 152);
}

.divBuscador{
    width: 70%;
}

.navIcon{
    padding: 20px;
    padding-left: 60px;

}

.colorDropdown{
    color: rgb(60, 60, 60) !important;
    
}

.colorDropdown:active{
    background-color: rgb(207, 207, 207) !important;
}

.imgLogo{
    max-width: 70%;
}

.imgRobot{
    max-width: 30%;
    height: auto;
    padding-top: 40%;
    float: left;
    margin: 100px;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;
    animation-name: robot;
}

.imgRobot2{
    max-width: 50%;
    height: auto;
    padding-top: 20%;

    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 3s;
    animation-name: robot;
}

@keyframes robot {
    from {
        transform: translateY(20px) scale(1); /* baja y grande */
    }
    to {
        transform: translateY(0) scale(1);   /* normal */
    }
}

.btnEnviar{
    text-align: center;
    height: 150% !important;
    width: 100%;
    color: rgb(120, 230, 230);
    padding: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid rgb(120, 230, 230);
    font-size: medium !important;
}

.btnEnviar:hover, .btnEnviar:active{
    color: rgb(120, 230, 230);
    border: 1px solid rgb(120, 230, 230);
    background-color: rgb(207, 207, 207);
}

.btnEnviar2{
    text-align: center;
    height: 150% !important;
    width: 100%;
    color: rgb(120, 230, 230);
    padding: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid rgb(120, 230, 230);
    font-size: medium !important;
    background-color: #262C44 !important;
}

.btnEnviar2:hover, .btnEnviar2:active{
    color: rgb(120, 230, 230);
    border: 1px solid rgb(120, 230, 230);
    background-color: rgb(207, 207, 207);
}

.imgAgs{
    max-width: 90%;
    padding-top: 5;
}

.imgAgs2{
    max-width: 80%;
    padding-top: 5;
}

.margen{
    margin-bottom: 10px;
    margin-top: 10px;
}

.imgSistemas{
    max-width: 100%;
}

.imgBottom{
    padding-top: 10%;
    padding-bottom: 40px;
}

.table td, .table th{
    border: 0px;
    padding: 5px;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{
    border-top: 0px;
}

#navFuncionario{
    color: rgb(120, 230, 230)
}

.imgTitle, .imgTitle2{
    width: 110%; 
    padding-left: 20%; 
    padding-top: 10px;
}

.icons{
    max-width: 18px;
}

.fontColor{
    color:rgb(207, 207, 207);
    text-align: left;
    font-size: 12px;
}

.fontColorDecline{
    color:rgb(255, 74, 50);
}

.fontColorCheck{
    color:rgb(120, 230, 230);
}

.btnMenu{
    background-color: transparent;
    height: 50px;
    margin-right: 10px;
    padding: 3px;
    font-size: small;
}

.btnMenu:hover, .btnMenu:active, .btnMenu:focus{
    background-color: rgba(207, 207, 207, 0.2);
    color: rgb(120, 230, 230);
}

.btnTab{
    color:rgb(207, 207, 207);
    border: 0px;
}

.btnTab:hover, .btnActiveTab, .btnTab:active{
    border-bottom: 3px solid rgb(207, 207, 207);
    color:rgb(207, 207, 207);
    outline: none;
}

.btnServidor{
    color:rgb(120, 230, 230);
    border-bottom: 3px solid rgb(120, 230, 230);
}

.btnServidor:hover, .btnActiveServidor{
    border: 1px solid rgb(120, 230, 230);
    border-bottom: 3px solid rgb(120, 230, 230);
    color:rgb(120, 230, 230);
}

.btnEstadisticas{
    color:rgb(207, 207, 207);
    border-bottom: 3px solid rgb(207, 207, 207);
}

.btnEstadisticas:hover, .btnActiveEstadisticas{
    border: 1px solid rgb(207, 207, 207);
    border-bottom: 3px solid rgb(207, 207, 207);
    color:rgb(207, 207, 207);
}

.btnEvolucion{
    color:rgb(198, 193, 213);
    border-bottom: 3px solid rgb(198, 193, 213);
}

.btnEvolucion:hover, .btnActiveEvolucion{
    border: 1px solid rgb(198, 193, 213);
    border-bottom: 3px solid rgb(198, 193, 213);
    color:rgb(198, 193, 213);
}

.btnEstadisticasEvolucion{
    color:rgb(243, 146, 0);
    border-bottom: 3px solid rgb(243, 146, 0);
}

.btnEstadisticasEvolucion:hover, .btnActiveEstadisticasEvolucion{
    border: 1px solid rgb(243, 146, 0);
    border-bottom: 3px solid rgb(243, 146, 0);
    color:rgb(243, 146, 0);
}
.btnRegresar{
    color:rgb(243, 146, 0);
    border-bottom: 3px solid rgb(243, 146, 0);
    width: 100%;
    font-size: medium;
}

.btnRegresar:hover{
    border: 1px solid rgb(243, 146, 0);
    border-bottom: 3px solid rgb(243, 146, 0);
    color:rgb(243, 146, 0);
}
.btnFunCiu{
    max-width: 60%
}

.divInterconexion{
    padding-bottom: 120px;
}

.imgPde, .imgPde2{
    width: 90%; 
    padding-left: 50px;
}

.card{
    background-color: rgb(60, 60, 60);
    font-family: 'Avenir-Book';
}

.card-header{
    padding: .2rem;
}

.card-body{
    padding-left: 25px; 
    padding-right: 25px;
}

.btnAccordion, .btnAccordion:hover, .btnAccordion:focus{
    color: rgb(207, 207, 207);
    text-decoration:none;
    font-size: 13px;
    text-align: left;
}

.iconAdd{
    max-width: 16%;
}

.graficas{
    width: 100%;
    margin: auto;
}

.formDeclaracion{
    font-size: 1.5rem;
}

.liDeclaracion{
    list-style-type:none; 
    font-family: 'Avenir-Book'; 
    font-size: 1.6rem; 
    color: rgb(198, 193, 203);
    padding-bottom: 7px;
    padding-top: 7px;
}

.nav-background {
    background-image: url("../../../../Funcionarios/imgV2/nav_bar.png");
    background-size: cover;
    border-bottom: 2px solid rgb(180, 165, 112);
    width: 101%;
    /* Workaround for some mobile browsers */
    min-height: 100%;
}

.colorModal{
    background-color: rgb(60, 60, 60);
}

.login .image {
    position:relative;
    margin:auto;

    top:-50px;
    width:150px;
    height:50px;
}

.image {
    background-color:transparent;
}

.imgIconPde{
    width: 30%;
}

.imgIconSesea{
    width: 20%;
}

.paddTxtFuncionario{
    padding-left: 6%;
}

#semaforo{
    color:rgb(207, 207, 207); 
    text-align: left;
    font-family: 'Avenir-Book';
    font-size: 1.5rem;
}

#titleEntes{
    color: rgb(120, 230, 230);
    text-align: left;
    margin-left: 2%;
    font-family: 'Avenir-Book';
}

#titleEntesFuncionario{
    color: rgb(180, 165, 112);
    text-align: left;
    margin-left: 2%;
    font-family: 'Avenir-Book';
}

#leyenda{
    text-align: left;
    display: none;
    color:rgb(120, 230, 230);
    font-family: "Avenir-Book";
}

#imgFuncionario{
    width: 7%;
}

#modalLogin{
    color: white; 
    padding-left: 13px;
    font-family: "Avenir-Book";
}

@media screen and (max-width: 1300px) { 

    /* Principal */
    .imgRobot{
        max-width: 25% !important;
        height: auto;
        /* padding-top: 50%; */
    }

    /* Principal S1 */
    .imgRobot2{
        max-width: 50%;
        height: auto;
        padding-top: 30%;
    }

    .imgLogo{
        max-width: 50%;
    }

    .paddTxtFuncionario{
        padding-left: 7%;
    }

    ul {
        margin: 0px;
        padding-left: 40px;
    }
}

@media screen and (max-width: 990px){

    /* Principal */
    h5{
        padding-left:0% !important;
    }

    .navIcon{
        width: 100%;
    }

    .btnFunCiu{
        width: 50%;
    }

    .imgRobot{
        max-width: 20%;
        margin: 70px;
    }

    .paddTxtFuncionario{
        padding-left: 7%;
    }

}

@media screen and (max-width: 800px) {

    /* Principal */
    h5{
        padding-left:0% !important;
    }

    .imgPde2{
        max-width: 70%;
        padding-left: 25px;
    }

    .imgTitle2{
        max-width: 100%;
        padding-left: 10%; 
        padding-top: 5px;
    }

    .navIcon{
        width: 100%;
    }

    .paddTxtFuncionario{
        padding-left: 4%;
    }

    .imgRobot, .imgRobot2, .imgAgs2{
        display:none !important;
    }

    .footerText{
        font-size: .5rem;
    }

}

@media screen and (max-width: 764px) {

    /* Principal S1 */
    .imgPde{
        max-width: 45%; 
    }

    .imgPde2{
        max-width: 70%;
        padding-left: 25px;
    }

    .imgTitle2{
        max-width: 100%;
        padding-left: 10%; 
        padding-top: 5px;
    }

    .imgAgs{
        max-width: 100%;
    }

    .imgIconPde{
        width: 40% !important;
    }

    .imgIconSesea{
        width: 30% !important;
    }

    .imgTitle{
        width: 50%; 
        padding-top: 10px;
    }

    .iconAdd{
        max-width: 2%;
    }

    .navIndex{
        width: 50%;
    }

    #accordionExample{
        padding-left: 10px;
    }

    #imgFuncionario{
        width: 3%;
    }

}

@media screen and (max-width: 400px){

    /* Principal */
    h5{
        padding-left:0% !important;
    }

    .imgAgs{
        padding-left: 0px;
        max-width: 100%;
    }

    .imgLogo{
        max-width: 40%;
    }

    .navIcon{
        width: 80%;
    }

    .footerText{
        font-size: .3rem;
    }

    .navIndex{
        width: 60%;
    }
    
}