@font-face {
    font-family: 'Calculator';
    src: url('../fonts/Calculator.ttf');
}

:root {
    --cbtn-top-fl: 128px;
    --cbtn-top-sl: 211px;

    --cbtn-left-fl: 35px;

    --cbtn-right-fl: 42px;

    --cled-top-fl: 29px;
    --cled-left-fl: 40px;

    --cled-left-sl: 146px;

    --cled-left-tl: 256px;

    --cled-left-cl: 391px;

    --cled-left-ql: 472px;
    
    --cbtn-top-fc: 367px;
    --cbtn-right-fc: 179px;
    
    --cbtn-right-sc: 111px;
    
    --cbtn-right-tc: 42px;
    
    --cled-top-fc: 367px;
    --cled-right-fc: 201px;
    
    --cled-right-sc: 132px;
    
    --cled-right-tc: 64px;
}

.cooper .centrar-elementos {
    position: relative;
    display: flex;
    align-items: center;
    height: 417px;
    justify-content: center;
}

.cooper .frente_container {
    position: absolute;
    height: auto;
    width: 582px;
    text-align: center;
    top: 0;
    margin-top: 2px;
}

.cooper .btn-blue {
    position: absolute;
    background-color: black;
    /*border: 2px solid #025bab;*/
    padding: 2px;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-size: 9px;
    border-radius: 10px;
}

.cooper .btn-blue:active,
.cooper .btn-abrir:active,
.cooper .btn-cerrar:active,
.cooper .btn-black:active {
    transform: perspective(600px) translateZ(-75px) rotateZ(-0.5deg) rotateX(-10deg);
}

.cooper .btn-abrir {
    position: absolute;
    background-color: #009f78;
    width: 70px;
    height: 65px;
    border: 7px solid black;
    bottom: 21px;
    left: 28px;
}

.cooper .btn-cerrar {
    position: absolute;
    background-color: #eb123f;
    width: 70px;
    height: 65px;
    border: 7px solid black;
    bottom: 21px;
    left: 125px;
}

.cooper .btn-black {
    position: absolute;
    background-color: #000000;
    width: 60px;
    height: 29px;
    color: white;
    text-transform: uppercase;
    font-size: 7px;
    padding-top: 8px;
    border-radius: 5px;
    text-decoration: none;
}

.cooper .pantalla-cooper {
    font-family: 'Calculator';
    position: absolute;
    display: block;
    top: 118px;
    left: 166px;
    color: black;
    font-size: 17px;
    width: 238px;
    height: 71px;
    text-align: left;
    padding: 3px 7px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.cooper .pantalla-cooper.cerrado {
    background-color: #fb060699;
    color: white !important;
}

.cooper .pantalla-cooper.abierto {
    background-color: #52ce52b5;
}

.cooper .pantalla-cooper span {
    margin-right: 4px;
}

.cooper .pantalla-cooper span:last-child {
    margin-right: 0 !important;
}

.cooper .led {
    position: absolute;
    height: 6px;
    width: 13px;
    background-color: #fff;
    border: 1px solid black;
}

.cooper .led2 {
    position: absolute;
    height: 6px;
    width: 19px;
    background-color: #cecece;
    border: 1px solid black;
}

.cooper .led2.rojo {
    background-color: red;
}

.cooper .led.rojo {
    background-color: red;
}

.cooper .led.verde,
.cooper .led2.verde{
    background-color: green;
}

.cooper #medicion {
    top: var(--cbtn-top-fl);
    left: var(--cbtn-left-fl);
}

.cooper #rest-banderas {
    top: calc(var(--cbtn-top-fl) + 29px);
    left: var(--cbtn-left-fl);
    font-size: 7px;
    padding-left: 5px;
}

.cooper #eventos {
    top: var(--cbtn-top-sl);
    left: var(--cbtn-left-fl);
    padding-left: 3px;
}

.cooper #prueba-lampara {
    top: calc(var(--cbtn-top-sl) + 29px);
    left: var(--cbtn-left-fl);
    font-size: 7px;
    padding-left: 5px;
}

.cooper #ajustes {
    top: var(--cbtn-top-fl);
    right: var(--cbtn-right-fl);
}

.cooper #cont-operaciones {
    top: calc(var(--cbtn-top-fl) + 29px);
    right: 37px;
    font-size: 7px;
}

.cooper #alarmas {
    top: var(--cbtn-top-sl);
    right: var(--cbtn-right-fl);
    padding-left: 3px;
}

.cooper #cambio {
    top: calc(var(--cbtn-top-sl) + 33px);
    right: calc(var(--cbtn-right-fl) + 2px);
}

.cooper #led-control-ok {
    top: var(--cled-top-fl);
    left: var(--cled-left-fl);
}

.cooper #led-control-alimentado {
    top: calc(var(--cled-top-fl) + 12px);
    left: var(--cled-left-fl);
}

.cooper #led-control-bloqueado {
    top: calc(var(--cled-top-fl) + 23px);
    left: var(--cled-left-fl);
}

.cooper #led-rest-abierto {
    top: calc(var(--cled-top-fl) + 34px);
    left: var(--cled-left-fl);
}

.cooper #led-rest-cerrado {
    top: calc(var(--cled-top-fl) + 45px);
    left: var(--cled-left-fl);
}

.cooper #led-falla-fase-a {
    top: var(--cled-top-fl);
    left: var(--cled-left-sl);
}

.cooper #led-falla-fase-b {
    top: calc(var(--cled-top-fl) + 12px);
    left: var(--cled-left-sl);
}

.cooper #led-falla-fase-c {
    top: calc(var(--cled-top-fl) + 23px);
    left: var(--cled-left-sl);
}

.cooper #led-falla-tierra {
    top: calc(var(--cled-top-fl) + 34px);
    left: var(--cled-left-sl);
}

.cooper #led-falla-tierra-sens {
    top: calc(var(--cled-top-fl) + 45px);
    left: var(--cled-left-sl);
}

.cooper #led-alarma {
    top: var(--cled-top-fl);
    left: var(--cled-left-tl);
}

.cooper #led-arriba-disp-min {
    top: calc(var(--cled-top-fl) + 12px);
    left: var(--cled-left-tl);
}

.cooper #led-indicador-1 {
    top: calc(var(--cled-top-fl) + 23px);
    left: var(--cled-left-tl);
}

.cooper #led-indicador-2 {
    top: calc(var(--cled-top-fl) + 34px);
    left: var(--cled-left-tl);
}

.cooper #led-indicador-3 {
    top: calc(var(--cled-top-fl) + 45px);
    left: var(--cled-left-tl);
}

.cooper #led-volt-fase-a {
    top: var(--cled-top-fl);
    left: var(--cled-left-cl);
}

.cooper #led-volt-fase-b {
    top: calc(var(--cled-top-fl) + 12px);
    left: var(--cled-left-cl);
}

.cooper #led-volt-fase-c {
    top: calc(var(--cled-top-fl) + 23px);
    left: var(--cled-left-cl);
}

.cooper #led-disp-por-frec {
    top: calc(var(--cled-top-fl) + 34px);
    left: var(--cled-left-cl);
}

.cooper #led-disp-por-volt {
    top: calc(var(--cled-top-fl) + 45px);
    left: var(--cled-left-cl);
}

.cooper #led-indicador-4 {
    top: var(--cled-top-fl);
    left: var(--cled-left-ql);
}

.cooper #led-indicador-5 {
    top: calc(var(--cled-top-fl) + 12px);
    left: var(--cled-left-ql);
}

.cooper #led-indicador-6 {
    top: calc(var(--cled-top-fl) + 23px);
    left: var(--cled-left-ql);
}

.cooper #led-indicador-7 {
    top: calc(var(--cled-top-fl) + 34px);
    left: var(--cled-left-ql);
}

.cooper #led-indicador-8 {
    top: calc(var(--cled-top-fl) + 45px);
    left: var(--cled-left-ql);
}

.cooper #disp-a-tierra-bloqueado {
    top: var(--cbtn-top-fc);
    right: var(--cbtn-right-fc);
}

.cooper #perfil-alt-1 {
    top: calc(var(--cbtn-top-fc) + 37px);
    right: var(--cbtn-right-fc);
}

.cooper #perfil-normal {
    top: calc(var(--cbtn-top-fc) + 74px);
    right: var(--cbtn-right-fc);
}

.cooper #sin-recierre {
    top: var(--cbtn-top-fc);
    right: var(--cbtn-right-sc);
}

.cooper #perfil-alt-2 {
    top: calc(var(--cbtn-top-fc) + 37px);
    right: var(--cbtn-right-sc);
}

.cooper #opcion-2 {
    top: calc(var(--cbtn-top-fc) + 76px);
    right: var(--cbtn-right-sc);
}

.cooper #bloq-oper-remota {
    top: var(--cbtn-top-fc);
    right: var(--cbtn-right-tc);
}

.cooper #perfil-alt-3 {
    top: calc(var(--cbtn-top-fc) + 37px);
    right: var(--cbtn-right-tc);
}

.cooper #opcion-3 {
    top: calc(var(--cbtn-top-fc) + 76px);
    right: var(--cbtn-right-tc);
}

.cooper #led-disp-a-tierra-bloqueado{
    top: var(--cled-top-fc);
    right: var(--cled-right-fc);
}

.cooper #led-perfil-alt-1{
    top: calc(var(--cled-top-fc) + 37px);
    right: var(--cled-right-fc);
}

.cooper #led-perfil-normal{
    top: calc(var(--cled-top-fc) + 76px);
    right: var(--cled-right-fc);
}

.cooper #led-sin-recierre{
    top: var(--cled-top-fc);
    right: var(--cled-right-sc);
}

.cooper #led-perfil-alt-2{
    top: calc(var(--cled-top-fc) + 37px);
    right: var(--cled-right-sc);
}

.cooper #led-opcion-2{
    top: calc(var(--cled-top-fc) + 76px);
    right: var(--cled-right-sc);
}

.cooper #led-bloq-oper-remota{
    top: var(--cled-top-fc);
    right: var(--cled-right-tc);
}

.cooper #led-perfil-alt-3{
    top: calc(var(--cled-top-fc) + 37px);
    right: var(--cled-right-tc);
}

.cooper #led-opcion-3{
    top: calc(var(--cled-top-fc) + 76px);
    right: var(--cled-right-tc);
}


@media (min-width: 1600px) {
    .cooper .frente_container {
        transform: scale(1.4) !important;
        top: 105px !important;
    }
}

@media (min-width: 1300px) {
    .cooper .frente_container {
        transform: scale(1.25);
        top: 70px;
    }
}