/**
  * Archivo de estilos únicamente aplicable al CPIP
  */

#logoHead {
    fill: #020766;
    stroke: white;
    stroke-width: 0.26458332px;
    filter: drop-shadow(7px 7px 3px #444986);
    width: 15rem;
}

.htitle {
    padding: 3px;
    padding-left: 1rem;
    min-width: 30rem;
    background-color: rgba(47, 47, 75, 0.3);
    transform: skewX(-20deg);
    border-radius: 3px;
    filter: drop-shadow(1px 1px 2px white);
}

.htitleup {
    color: white;
    font-size: 1.1rem;
}

.htitleup>span {
    filter: drop-shadow(3px 3px 1px #444986);
}

.htitledown>span {
    filter: drop-shadow(1px 1px 2px white);
}

.htitledown {
    margin-top: 3px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgb(30, 30, 75);
}

.hd-olipump {
    position: absolute;
    top: 0px;
    left: 42rem;
    filter: drop-shadow(3px 3px 3px rgb(15, 25, 44)) blur(0.5px);
}

#oilpump {
    width: 5rem;
    fill: rgba(255, 255, 255, 0.75);
    stroke: rgb(30, 30, 75);
    stroke-width: 7px;
}

#oiltower {
    width: 5.5rem;
    fill: rgba(255, 255, 255, 0.75);
    stroke: rgb(30, 30, 75);
    stroke-width: 7px;
}

.hd-oiltower {
    position: absolute;
    top: 0px;
    right: 0px;
    filter: drop-shadow(3px 3px 3px rgb(15, 25, 44)) blur(0.5px);
    -webkit-filter: drop-shadow(3px 3px 3px rgb(15, 25, 44)) blur(0.5px);
}

#app-content {
    border-radius: 4rem 0 0 0;
    border-left: 4px double rgb(8, 54, 139);
    filter: drop-shadow(0 0 5px gray);
}

.IQModTitle {
    background-color: rgb(217, 221, 232);
    background-color: #e3e8ec;
    transform: skewX(-20deg);
    border-radius: 3px;
    filter: drop-shadow(2px 2px 2px rgb(53, 51, 51));
}

.btn-primary {
    color: #fff;
    background-color: #458cc7;
    border-color: #3e6f9a;
}

#mainDataOptions nav {
    background-color: #e3e8ec;
    border-radius: 5px;
    filter: drop-shadow(2px 2px 2px rgb(53, 51, 51));
}

#app-hcont {
    flex-direction: row;
    align-items: center;
    padding: 10px;
    padding-bottom: 20px;
}

body.iqnologin #app-content {
    border-radius: 0;
    border-left: none;
    filter: none;
}


/** 
    Para Tablets
*/

@media screen and (max-width: 1120px) {
    #app-content {
        border-radius: 0;
        border-left: none;
        filter: none;
    }
}


/* Para Fablets */

@media screen and (max-width: 800px) {
    #app-header {
        justify-content: center;
    }
    #app-hcont {
        flex-direction: column;
        padding: 5px;
        padding-bottom: 10px;
    }
    .hd-olipump {
        left: 0.5rem;
    }
    .htitleup {
        order: 1;
        margin-top: 5px;
    }
    .htitle {
        text-align: center;
        background-color: rgba(47, 47, 75, 0.4);
    }
    #oilpump {
        width: 7.5rem;
        fill: rgba(255, 255, 255, 0.3);
    }
    #oiltower {
        width: 8.5rem;
        fill: rgba(255, 255, 255, 0.3);
    }
}

@media screen and (max-width: 480px),
       screen and (max-height: 480px) {
    .hd-olipump {
        display: none;
    }
    .htitleup {
       display: none;
    }
    .htitle {
       display: none;
    }
    #oilpump {
        display: none;
    }
    #oiltower {
        display: none;
    }
}