@font-face {
    font-family: FuturaLTBook;
    src: url("../fonts/ufonts.com_futura-lt-book.ttf") format("opentype");
}

*{
    margin: 0;
    padding: 0;
    font-family: FuturaLTBook;
}

.container-fluid{
    padding: 0;
    margin: 0;
}

.row{
    width: 100%;
    margin: 0;
}

/*Extra small devices (portrait phones, less than 1920px)*/
@media only screen and (max-width: 414px){




}

/***********************************************************************************************
************************************************************************************************
************************************************************************************************
************************************************************************************************
************************************************************************************************
************************************************************************************************
************************************************************************************************
***********************************************************************************************/

@media only screen and (min-width: 1024px) {

/**************************************************************************
********************* Estilos Header***************************************
**************************************************************************/

.header{
    height: 6.78vh;
    background-color: #39597F;
    width: 100vw;
}

.div-header-logo{
    background-color: #7DCCF3;
    height: 100%;
    width: 13%;
    text-align: center;
    padding-top: .5vh;
}

.img-logo{
    height: 80% ;
}

.div-header-elements{
    width: 87%;
    height: 100%;
}

.header-elements{
    height: 100%;
}

.div-header-inicio{
    height: 100%;
    padding: 0;
    color: #E1F6FF;
    font-size: 1.2vw;
    padding-top: .7vw;
    cursor: pointer;
    text-align: center;
}

.icon-inicio{
    height: 4vh;
    margin-right: .3vw;
}

.div-header-inicio:hover{
    height: 100%;
    padding: 0;
    background-color: #263F5E;
    color: #E1F6FF;
    font-size: 1.2vw;
    padding-top: .7vw;
    cursor: pointer;
}

.div-header-fecha{
    height: 100%;
    padding: 0;
    padding-top: 1vh;
    color: #E1F6FF;
    font-size: 2.2vh;
    padding-top: 1.4vh;
    cursor: pointer;
    text-align: center;
}

.row-header-config{
    height: 100%;
}

.div-header-config{
    background-color: #fff;
    height: 75%;
    margin-top: .8vh;
    padding: 0;
}

.row-config{
    height: 100%;
}

.div-name{
    margin: 0;
    width: 70%;
    height: 100%;
    text-align: center;
    padding-top: 1.1vh;
    font-size: 1.5vh;
}

.div-icon-engrane{
    width: 30%;
    height: 100%;
    padding-top: .2vh;
    text-align: center;
    background-color: #BCC9CB;
    cursor: pointer;
    border: none;
}

.div-icon-engrane:hover{
    width: 30%;
    height: 100%;
    text-align: center;
    background-color: #F9E7CF;
    cursor: pointer;
}

.icon-configuracion{
    height: 5vh;
}

.div-series{
    margin: 0;
    width: 50%;
    height: 100%;
    text-align: center;
    padding-top: .3vh;
    background-color: #9CB6CB;
    cursor: pointer;
    border: none;
}

.div-series:hover{
    background-color: #F9E7CF;
    cursor: pointer;
}


.icon-out{
    height: 4.5vh;
}

.div-out{
    margin: 0;
    width: 50%;
    height: 100%;
    text-align: center;
    padding-top: .3vh;
    background-color: #CCEAF9;
    cursor: pointer;
    border: none;
}

.div-out:hover{
    background-color: #F9E7CF;
    cursor: pointer;
}

.icon-series{
    height: 4vh;
}

.link-header{
    color: #fff;
}

.link-header:hover{
    color: #fff;
}

/**************************************************************************
********************* Final Estilos Header*********************************
**************************************************************************/

/**************************************************************************
********************* Estilos Menu ****************************************
**************************************************************************/

.div-menu{
    background-color: #39597F;
    height: 100%;
    width: 13%;
    padding-top: 1vh;
}

.div-item-color{
    height: 100%;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.div-item-icon{
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    padding-top: .7em;
    cursor: pointer;
}

.icon-menu{
    max-height: 80%;
    color: #E2E3E4;
}

.fa{
    height: 100%;
}

.div-item-text{
    padding-left: 0;
    padding-right: 0;
    padding-top: 1.2vh;
    margin: 0;
    padding-left: .7vw;
    color: #ECFFFF;
    font-size: 1.1vw;
    cursor: pointer;
}

.menu-item-row{
    height: 100%;
}

.menu-item{
    width: 100%;
    height: 6.5%;
    background-color: #39597F;
    border: none;
}

.menu-item:hover{
    width: 105%;
    height: 6.5%;
    background-color: #263F5E;
    overflow: visible;
}

.menu-item:hover .line-color{
    background-color: #D78C2F;
    width: 50%;
    height: 100%;
    cursor: pointer;
}

.menu-item-elements{
    height: 100%;
}

/**************************************************************************
********************* Final Estilos Menu **********************************
**************************************************************************/

/**************************************************************************
********************* Estilos Notificaciones ******************************
**************************************************************************/

.div-notificaciones{
    background-color: #DDDDDD;
    width: 4%;
    height: 100%;
}

.row-notifi{
    height: 7vh;
    padding-top: .5vh;
}

.icon-graybell{
    width: 80%;
    margin: auto;
}

/**************************************************************************
********************* Final Estilos Notificaciones ************************
**************************************************************************/

/**************************************************************************
********************* Estilos Footer***************************************
**************************************************************************/

.footer{
    height: 5vh;
    background-color: #B7B7B7;
    width: 100vw;
}

.row-footer{
    height: 100%;
}

.footer-text{
    text-align: center;
    font-size: 1.7vh;
    padding-top: 1vh;
}

a:hover, a:visited, a:link, a:active{
    text-decoration: none;
    color: none;
}

.link-footer{
    color: #474C4C;
}
  
/**************************************************************************
********************* Final Estilos Footer*********************************
**************************************************************************/
}