/*@-webkit-keyframes fadeIn {*/
/*    0% {opacity: 0;}*/
/*    100% {opacity: 1;}*/
/*}*/

/*@keyframes fadeIn {*/
/*    0% {opacity: 0;}*/
/*    100% {opacity: 1;}*/
/*}*/

/*.fadeIn {*/
/*    -webkit-animation-name: fadeIn;*/
/*    animation-name: fadeIn;*/
/*    -webkit-animation-duration: 2s;*/
/*    animation-duration: 2s;*/
/*    -webkit-animation-fill-mode: both;*/
/*    animation-fill-mode: both;*/
/*}*/

/*@-webkit-keyframes fadeOut {*/
/*    0% {opacity: 1;}*/
/*    100% {opacity: 0;}*/
/*}*/

/*@keyframes fadeOut {*/
/*    0% {opacity: 1;}*/
/*    100% {opacity: 0;}*/
/*}*/

/*.fadeOut {*/
/*    -webkit-animation-name: fadeOut;*/
/*    animation-name: fadeOut;*/
/*    -webkit-animation-duration: 3s;*/
/*    animation-duration: 3s;*/
/*    -webkit-animation-fill-mode: both;*/
/*    animation-fill-mode: both;*/
/*}*/

.fontpareja {
    font-family: 'Courier New', monospace !important;
    width: 3em !important;
}

.start-4-rem {
    left: 4rem !important;
}

.top-10 {
    top: 10% !important;
}

.top-15 {
    top: 15% !important;
}

.blink_me {
    animation: blinker 1s linear infinite;
}

.blink_me2 {
    animation: blinker 1.5s linear infinite;
}

.blink_color {
    animation: blinkerColor 1.5s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

@keyframes blinkerColor {
    0% { border-color: #096b72; }
    100% { border-color: red; }
}

/*
Para el diseño de puertas y que paresca un plano me base en este codigo: html css floor plan https://codepen.io/oliviale/pen/moLrBq
*/

.edificio {
    /*border: 7px solid #d3d3d3;*/
    border: 3px solid cadetblue;
    box-sizing: border-box !important;
    grid-area: 1 / 1;
    /*padding: 20px;*/
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
    /*margin-bottom: 10px;*/
}

.edificio .nombre-edificio {
    text-transform: uppercase;
    color: inherit;
    font-weight: bold !important;
    /*font: 9pt/0 'Arial, Helvetica, sans-serif';*/
    font: 8pt/1 "Poppins", sans-serif;
    padding: 0 4px;
    margin-right: auto !important;
    width: auto;
    border-bottom: 0px;
}

.espacio {
    /*border-top: 5px solid #096b72;*/
    /*border-left: 5px solid #096b72;*/
    /*border-bottom: 5px solid #096b72;*/
    border: 5px solid;
    position: relative;
    padding: 12px;
    /*margin-top: 5px;*/
    /*margin-left: 5px;*/
    /*margin-right: 5px;*/
    margin-bottom: 20px;
    min-height: 200px !important;
}

.espacio-borde-normal {
    border-color: #096b72;
}

.espacio-borde-rojo {
    border-color: #ff0000;
}

.espacio-borde-offline {
    border-color: #adb5bd;
    /*border-color: #6c757d;*/
}

/*.espacio:after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: -5px;*/
/*    bottom: -5px;*/
/*    right: -5px;*/
/*    border-right: 5px solid;*/
/*    !*border-image: linear-gradient(to bottom, grey 80%, #d3d3d3 80%, #d3d3d3 90%, grey 90%) 1;*!*/
/*    border-image: linear-gradient(to bottom, #096b72 78%, #d3d3d3 78%, #d3d3d3 90%, #096b72 90%) 1;*/
/*}*/

/*.espacio .door-ver:nth-child(1) {*/
.espacio .door-ver {
    right: -5px;
    bottom: 10px;
    transform: scaleX(-1);
}

.espacio .door-hor {
    bottom: -5px;
    /*left: 40px;*/
    right: 10px;
    transform: rotate(180deg);
}

.espacio .door-hor-close {
    right: 10px;
    /*bottom: -5px;*/
    bottom: -6px;
    transform: scaleX(-1);
}

.espacio .door-close-bottom {
    right: 10px;
    bottom: -5px;
    transform: scaleX(-1);
}

.espacio .door {
    right: 10px;
    bottom: -5px;
}

.door-ver {
    position: absolute;
    background: #fff;
    /*height: 45px;*/
    /*width: 35px;*/
    height: 30px;
    width: 25px;
    overflow: hidden;
    z-index: 10;
}

.door-ver::before {
    content: "";
    position: absolute;
    background: #fff;
    height: 4px;
    /*width: 33px;*/
    width: 20px;
    border: 1px solid #096b72;
}

.door-ver::after {
    content: "";
    position: absolute;
    /*width: inherit;*/
    /*width: 80px;*/
    /*height: 130px;*/
    /*right: -1px;*/
    /*bottom: 0.5px;*/
    width: 50px;
    height: 60px;
    right: 4px;
    bottom: 0px;
    border-radius: 50%;
    border: 1px solid #096b72;
}

.door-hor {
    position: absolute;
    background: #fff;
    width: 30px;
    height: 25px;
    overflow: hidden;
    z-index: 10;
}

.door-hor::before {
    content: "";
    position: absolute;
    background: #fff;
    width: 4px;
    height: 20px;
    border: 1px solid #096b72;
}

.door-hor::after {
    content: "";
    position: absolute;
    /*width: inherit;*/
    /*height: 80px;*/
    /*width: 130px;*/
    /*right: -1px;*/
    /*bottom: -0.5px;*/
    height: 50px;
    width: 60px;
    right: 0px;
    bottom: 4px;
    border-radius: 50%;
    border: 1px solid #096b72;
}

.door-hor-close {
    position: absolute;
    background: #fff;
    height: 8px;
    /*height: 5px;*/
    width: 35px;
    overflow: hidden;
    z-index: 10;
}

.door-hor-close::before {
    content: "";
    position: absolute;
    background: #fff;
    height: 8px;
    /*height: 5px;*/
    width: 35px;
    border: 2px solid #096b72;
    /*border: 1px solid #096b72;*/
}

.door-hor-close::after {
    content: "";
    position: absolute;
    height: 8px;
    width: 35px;
}

.door-open {
    position: absolute;
    color: #ff0000;
    background: #fff;
    overflow: hidden;
    z-index: 10;
}

.door-open-offline {
    position: absolute;
    color: #adb5bd;
    background: #fff;
    overflow: hidden;
    z-index: 10;
}

.door-closed {
    position: absolute;
    color: #096b72;
    background: #fff;
    overflow: hidden;
    z-index: 10;
}

.door-closed-offline {
    position: absolute;
    color: #adb5bd;
    background: #fff;
    overflow: hidden;
    z-index: 10;
}

.door-error {
    position: absolute;
    color: #ffa500;
    background: #fff;
    overflow: hidden;
    z-index: 10;
}

.door-close-bottom {
    position: absolute;
    background: #fff;
    height: 5px;
    width: 46px;
    overflow: hidden;
    z-index: 10;
}

.espacio .nombre-espacio {
    /*bottom: 5px;*/
    bottom: -15px;
    left: 5px;
}

.espacio .nombre-espacio-offline {
    /*bottom: 5px;*/
    bottom: -15px;
    left: 5px;
}

.espacio .nombre-espacio-edificio {
    top: -15px;
    left: -5px;
    /*transform: rotate(270deg);*/
}

.espacio .puerta-abierta {
    /*bottom: 5px;*/
    bottom: -15px;
    right: 5px;
}

.espacio-edificio-leyenda {
    text-transform: uppercase;
    font-weight: bold !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: grey;
    /*padding-left: 10px;*/
    margin: auto;
    padding: 0 4px;
    /*opacity: 0.2;*/
    /*position: absolute;*/
    /*bottom: 5px;*/
    /*left: 5px;*/
    /*top: 5px;*/
    /*left: 35px;*/
}

.nombre-espacio {
    text-transform: uppercase;
    /*font-weight: bold !important;*/
    /*font: 600 14px/1 "Poppins", sans-serif;*/
    font: 600 13px/1 "Poppins", sans-serif;
    color: #096b72;
    /*opacity: 0.3;*/
    width: 140px;
    word-wrap: normal;
    position: absolute;
}

.nombre-espacio-nowrap {
    text-transform: uppercase;
    font: 600 13px/1 "Poppins", sans-serif;
    color: #096b72;
    position: absolute;
}

.nombre-espacio-offline {
    text-transform: uppercase;
    /*font-weight: bold !important;*/
    /*font: 600 14px/1 "Poppins", sans-serif;*/
    font: 600 13px/1 "Poppins", sans-serif;
    /*color: #096b72;*/
    color: #adb5bd;
    /*color: #6c757d;*/
    /*opacity: 0.3;*/
    width: 140px;
    word-wrap: normal;
    position: absolute;
}

.nombre-espacio-edificio {
    text-transform: uppercase;
    /*font-weight: bold !important;*/
    /*font: 600 14px/1 "Poppins", sans-serif;*/
    font: 600 10px/1 "Poppins", sans-serif;
    color: #096b72;
    /*opacity: 0.3;*/
    width: 250px;
    word-wrap: normal;
    position: absolute;
}

.puerta-abierta {
    text-transform: uppercase;
    /*font-weight: bold !important;*/
    /*font: 600 14px/1 "Poppins", sans-serif;*/
    font: 600 13px/1 "Poppins", sans-serif;
    color: #096b72;
    /*opacity: 0.3;*/
    width: 140px;
    word-wrap: normal;
    position: absolute;
}

.persona {
    color: #096b72;
    font-size: 2.7em !important;
    margin-top: 0.1em !important;
    /*width: 15px !important;*/
    /*height: auto !important;*/
}

.persona-highlight {
    color: green;
    /*font-size: 2.7em !important;*/
    /*width: 15px !important;*/
    /*height: auto !important;*/
}

.persona-not-highlight {
    color: grey;
    width: 15px !important;
    height: auto !important;
}

.nombre-activo {
    /*font-size: 50%;*/
    font: 7pt/1 "Poppins", sans-serif;
    text-align-last: center !important;
    text-align: center !important;
}

.dropdown-ancho {
    min-width: 400px !important;
}

.timeline-left-wider {
    width: 150px !important;
}

.timeline-icon-wider {
    left: 165px !important;
}

.timeline-event-wider {
    padding-left: 215px !important;
}

.timeline-modern-wider::before {
    left: 178px !important;
}

.border-primary-dark {
    --bs-border-opacity: 1;
    border-color: #454c53 !important;
}