@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;
  }
.modal-title{
    color: #218787 !important;
}

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

.nav-background {
    background-image: url("../../../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%;
}

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

}

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

.btnMenu{
    background-color: transparent;
    height: 50px;
    width: 150px;
    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);
}

.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);
}

.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);
}

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

.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;
}

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

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

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

.imgLogo{
    max-width: 70%;
}

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

.imgSistemas{
    max-width: 100%;
}

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

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

.divInterconexion{
    padding-bottom: 120px;
}

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

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

.btnSistemas{
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border: solid 3px;
    border-image: linear-gradient(to right, #948D6E, #D1C7C5) 1;
}

.btnSistemas h4{
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 !important;
    background-color: #948D6E;
    background-image: linear-gradient(to right, #948D6E 0%, #D1C7C5 100%) ;
    background-size: 100%;
    background-repeat: repeat;
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text;
    -moz-text-fill-color: transparent;
    -moz-background-clip: text;
    font-family: 'Avenir-Black';
    font-size: 30px;
}
.btnSistemas h5{
    font-weight: bold;
    padding-top: 10px;
    margin: 0 !important;
    background-color: #948D6E;
    background-image: linear-gradient(to right, #948D6E 0%, #D1C7C5 100%) ;
    background-size: 100%;
    background-repeat: repeat;
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text;
    -moz-text-fill-color: transparent;
    -moz-background-clip: text;
    font-family: 'Avenir-Book';
    font-size: 25px;
}

.btnSistemas:hover{
    background-color: rgba(255, 255, 255, 0.2);
}

.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: 30%;
    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: rgb(35, 37, 60);
}

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

.btnEnviar3{
    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: rgb(35, 37, 60);
}

.btnEnviar3:hover, .btnEnviar3:active{
    color: rgb(35, 37, 60);
    border: 1px solid rgb(35, 37, 60);
    background-color: rgb(207, 207, 207);
}

.btnEnviar4{
    text-align: center;
    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;
}

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

.btnCancel{
    text-align: center;
    height: 150% !important;
    width: 30%;
    color: rgb(35, 37, 60);
    padding: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid rgb(35, 37, 60);
    font-size: medium !important;
    background-color: rgb(255, 0, 0);
}

.btnCancel:hover, .btnCancel:active{
    color: rgb(35, 37, 60);
    border: 1px solid rgb(35, 37, 60);
    background-color: rgb(207, 207, 207);
}
.btnCancel2{
    text-align: center;
    height: 150% !important;
    width: 100%;
    color: rgb(35, 37, 60);
    padding: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid rgb(35, 37, 60);
    font-size: medium !important;
    background-color: rgb(255, 0, 0);
}

.btnCancel2:hover, .btnCancel2:active{
    color: rgb(35, 37, 60);
    border: 1px solid rgb(35, 37, 60);
    background-color: rgb(207, 207, 207);
}

.contenedorTabla{
    background-color: white;
    border-radius: 5px;
    width: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
}

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

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

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

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

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

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

    .imgLogo{
        max-width: 50%;
    }

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

@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;
    }
    
}

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

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

    .navIcon{
        width: 100%;
    }

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

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

}

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

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

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

    .navIcon{
        width: 100%;
    }

    .imgRobotIndex{
        max-width: 10%;
        height: auto;
        padding-top: 10%;
    }

    .imgAgsIndex{
        max-width: 20%;
        padding-top: 5;
    }

}

iframe{
    min-height: 1070px;
    border-radius: 12px;
}
.vertical-menu{
    padding-right: 0 !important;
    color: white !important;
}
.btn-vertical-menu{
    padding: 0 !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    font-family: 'Avenir-Black' !important;
}
.btn-link{
    color: white !important;
}
.btn:focus{
    text-decoration: none !important;
    box-shadow:none !important;
}
.card{
    background-color: rgba(255, 255, 255, 0.1) !important;
 }
.card-header, .card-body{
    padding: 0 !important;
}
.card-body ul{
   list-style: none !important;
   padding: 0 !important;
   font-family: 'Avenir-Book' !important;
}
.card-body ul li{
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: white solid 1px;
    cursor: pointer;
 }
.card-body ul li:hover{
    background-color: rgba(255, 255, 255, 0.3) !important;
}
.card-body ul li a{
    color: white !important;
 } 
.card-body ul li a:active{
   color: white !important;
}

.table-adm tbody{
    background-color: white !important;
}