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

:root {
    --btn-width: 37px;
    --btn-height: 34px;
    --led-width: 13px;
    --led-height: 13px;
}

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

.abb .frente_container {
    position: absolute;
    width: 470px;
    text-align: center;
    top: 1px;
}

.abb .frente_container img {
    width: 100%;
    height: auto;
}

.abb .pantalla-abb {
    font-family: 'Calculator';
    position: absolute;
    display: block;
    top: 108px;
    left: 76px;
    color: black;
    font-size: 15px;
    width: 339px;
    height: 62px;
    text-align: left;
    padding: 3px 7px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    border-radius: 3px;
    padding-top: 6px;
}

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

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

.abb .pantalla-abb span{
    margin-right: 15px;
    line-height: 15px;
}

.abb .pantalla-abb let{
    display: block;
    line-height: 14px;
}

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

.abb .btn-red {
    position: absolute;
    background-color: #fa3e48;
    border-radius: 2px;
    line-height: calc(var(--btn-height) - 2px);
    color: white;
    text-decoration: none;
    width: var(--btn-width);
    height: var(--btn-height);
    text-align: center;
    border: 1px solid white;
    font-size: 8px;
}

.abb .btn-green {
    position: absolute;
    background-color: #009665;
    border-radius: 2px;
    line-height: calc(var(--btn-height) - 2px);
    color: white;
    text-decoration: none;
    width: var(--btn-width);
    height: var(--btn-height);
    text-align: center;
    border: 1px solid white;
    font-size: 8px;
}

.abb .btn-blue {
    position: absolute;
    background-color: #0099d2;
    border-radius: 2px;
    line-height: calc(var(--btn-height) - 2px);
    color: white;
    text-decoration: none;
    width: var(--btn-width);
    height: var(--btn-height);
    text-align: center;
    border: 1px solid white;
    font-size: 8px;
}

.abb .btn-sq-blue{
    position: absolute;
    background-color: #0099d2;
    border-radius: 2px;
    border: 1px solid white;
    width: 30px;
    height: 16px;
}

.abb .btn-red:active,
.abb .btn-sq-blue:active,
.abb .btn-green:active,
.abb .btn-blue:active {
    transform: perspective(600px) translateZ(-75px) rotateZ(-0.5deg) rotateX(-10deg);
}

.abb .led {
    position: absolute;
    width: var(--led-width);
    height: var(--led-height);
    background-color: black;
    border-radius: 50%;
}

#abb_open{
    top: 345px;
    right: 94px;
}

#abb_close{
    top: 417px;
    right: 94px;
}

#abb_hl-off{
    top: 260px;
    right: 199px;
}

#abb_hl-on{
    top: 260px;
    right: 142px;
}

#abb_remote_blocked{
    top: 240px;
    right: 372px;
}

#abb_ground_blocked{
    top: 272px;
    right: 372px;
}

#abb_reclose_blocked{
    top: 304px;
    right: 372px;
}

#abb_alt_1{
    top: 336px;
    right: 372px;
}

#abb_counters{
    top: 368px;
    right: 372px;
}

#abb_prog_1{
    top: 400px;
    right: 372px;
}

#abb_prog_2{
    top: 438px;
    right: 372px;
}

#abb_led_open{
    top: 369px;
    right: 73px;
}

#abb_led_close{
    top: 441px;
    right: 73px;
}

#abb_led_remote_blocked{
    top: 242px;
    right: 414px;
}

#abb_led_ground_blocked{
    top: 274px;
    right: 414px;
}

#abb_led_reclose_blocked{
    top: 306px;
    right: 414px;
}

#abb_led_alt_1{
    top: 337px;
    right: 414px;
}

#abb_led_counters{
    top: 369px;
    right: 414px;
}

#abb_led_prog_1{
    top: 401px;
    right: 414px;
}

#abb_led_prog_2{
    top: 441px;
    right: 414px;
}

#abb_led_self_check{
    top: 241px;
    right: 30px;
}

#abb_led_hot_line{
    top: 241px;
    right: 134px;
}

#abb_led_pickup{
    top: 43px;
    left: 46px;
}

#abb_led_lockout{
    top: 68px;
    left: 46px;
}

#abb_led_phase_oc{
    top: 68px;
    left: 159px;
}

#abb_led_ground_oc{
    top: 68px;
    left: 274px;
}

#abb_led_user_1{
    top: 43px;
    right: 69px;
}

#abb_led_user_2{
    top: 68px;
    right: 69px;
}

@media (min-width: 1300px){
    .abb .frente_container {
        transform: scale(1.1);
        top: 31px;
    }
}

@media (min-width: 1600px){
    .abb .frente_container {
        transform: scale(1.35);
        top: 96px;
    }
}

.centrar-text{
    text-align: center !important;
}


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

.led.verde{
    background-color: green;
}