html, body{
    font-family: 'Roboto', sans-serif;
    background:#15212b;
    color:#fff;
  }

#diagram-content{
position: relative;
display: inline-block;
}

.status-element{
position: absolute;
width: 15px;
height: 15px;
border-radius: 7.5px;
background: #fff;
transform: translateXY(-50%,50%);
cursor: pointer;
}
.status-element span {
font-size: 10px;
position: absolute;
width: 40px;
display: inline-block;
left: 20px;
background: #fff;
text-align: center;
border-radius: 5px;
top: 0;
text-transform: uppercase;
}
.value-0 {
background: rgba(46, 183, 148, .85);
border: 1px solid rgba(46, 183, 148, 1);
}
.value-1 {
background: rgba(156, 204, 101, .85);
border: 1px solid rgba(156, 204, 101, 1);
}
.value-2 {
background: rgba(255, 235, 59, .85);
border: 1px solid rgba(255, 235, 59, 1);
}
.value-3 {
background: rgba(245, 124, 0, .85);
border: 1px solid rgb(245, 124, 0);
}
.value-4 {
background: rgba(183, 28, 28, .85);
border: 1px solid rgb(183, 28, 28);
}
.toggle-fullscreen{
position: absolute;
right: 20px;
bottom: 20px;
z-index: 999;
width: 35px;
height: 35px;
background: #fff;
text-align: center;
line-height: 35px;
border-radius: 20px;
color: #009170;
font-size: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.9);
}
.toggle-fullscreen:hover{
text-decoration: none;
}
.toggle-fullscreen.active .fa-compress{
display: block;
}
.toggle-fullscreen.active .fa-arrows-alt{
display: none;
}
.toggle-fullscreen:not(.active) .fa-arrows-alt{
display: block;
}
.toggle-fullscreen:not(.active) .fa-compress{
display: none;
}
.toggle-fullscreen .fa{
line-height: 35px;
}
#diagram-content.fullscreen-img{
position: fixed;
top: 0;
left: 50%;
/* width: 100%; */
height: 100%;
z-index: 99999;
padding: 0;
width: auto;
transform: translateX(-50%);
}
#diagram-content.fullscreen-img img{
height: 100%;
}
.fullscreen-overlay{
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.75);
z-index: 99998;
}
.fullscreen-overlay.active{
display: inline-block;
}





  .navbar-dark .navbar-nav .nav-link {
    color: #fea050;
    font-size: 14px;
    /* text-transform: uppercase; */
  }
  .equipment-container a span {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-size: 12px;
  }
  .bg-primary{
    background:#2d2f40 !important;
  }
  b{
    color:#fea050;
    text-transform: uppercase;;
    font-size: 13px;
  }
  .equipment-container {
    height: 200px;
    border: 1px solid #2b3346;
    border-radius: 5px;
    position: relative;
  }
  .equipment-container:hover{
    box-shadow: 0 0 10px rgba(0,0,0,.55);
  }
  .equipment-container a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color:#fff;
  }
  h1{
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bolder;
  }
  .equipment-container a h2 {
    color: #fff;
    font-size: 14px;
    text-align: center;
    /* margin-top: 10px; */
    position: relative;
    top: -35px;
  }
  .container {
    /*width: calc(100% - 100px);*/
    max-width: none;
  }
  .equipment-container a .equipment-value {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 3px;
    background: #00BC71;
    border-radius: 10px;
    top: -10px;
    right: 0;
  }
  .green-bg{
background:#00BC71;
}
.yellow-bg{
background:#FFD70E;
}
.orange-bg{
background:#FF7300;
}
.red-bg{
background:#FF1010;
}
  /*

  P-11115 -> 356818
  P-04151 -> 180946
  P-11112 -> 308713
  p-12212 -> 293337

  */
  a.close-hover-panel {
    position: absolute;
    right: -10px;
    top: -10px;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    line-height: 20px;
    color:#01003e !important;
    cursor: pointer;
    z-index: 2;
  }
  .equipment-img-container, .modal-image-container {
    display: inline-block;
    position: absolute;
    height: calc(100% - 50px);
    width: calc(100% - 30px);
    top: 15px;
    left: 15px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .bombb-container .equipment-img-container{
    background-image:url(../../backend/img/designh/diagrama-2.png);
    background-size: contain;
  }
  .bomb-container .equipment-img-container{
    background-image:url(../../backend/img/designh/diagrama-3.png);
  }
  .valv-container .equipment-img-container{
    background-image:url(../../backend/img/designh/diagrama-1.png);
  }
  .modal-image-container.modal-image-container-1{
    background-image:url(../../backend/img/designh/diagrama-1.png);
    background-size: 20% !important;
    height: calc(100% - 250px);
  }
  .modal-image-container.modal-image-container-2{
    background-image:url(../../backend/img/designh/diagrama-2.png);
    background-size: contain;
    height: calc(100% - 200px);
    width: calc(100% - 100px);
    top: 15px;
    left: 60px;
  }
  .modal-image-container.modal-image-container-3{
    background-image: url(../../backend/img/designh/diagrama-3.png);
    background-size: contain;
    height: calc(100% - 250px);
    width: calc(100% - 90px);
    margin-left: 30px;
  }
  #hover-panel-overlay{
    transition: all ease-in-out .3s;
  }
.pca-container {
display: inline-block;
width: 100%;
text-align: center;
padding: 20px 0;
}

.pca-container-image {
width: 30px;
height: 30px;
display: inline-block;
border-radius: 50%;
background: gray;
line-height: 31px;
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}

.pca-container-image:before {
position: absolute;
content: '';
width: calc(100% + 8px);
padding: 5px;
border: 1px solid;
height: calc(100% + 8px);
border-radius: 50%;
left: -4.5px;
top: -4.5px;
}
.pca-container-image-1:before {
left: -4px;
}

.pca-container-image-3:before {
left: -4px;
}
.modal-text-container h2 {
border-bottom: 1px solid;
padding: 20px 0px 0 0;
text-transform: uppercase;
margin-left: 20px;
}
.pca-container-image-0{
background:#00BC71;
color:#00BC71;
}
.pca-container-image-1{
background:#FFD70E;
color:#FFD70E;
}
.pca-container-image-2{
background:#FF7300;
color:#FF7300;
}
.pca-container-image-3{
background:#FF1010;
color:#FF1010;
}
.pca-container span{
color:#15212b;
font-weight: bold;
}
.pca-container p {
margin: 0;
}
.modal-image-container {
background-size: contain;
}

.table-row span {
padding: 1px 3px 1px 6px;
width: calc(100% / 6);
text-align: center;
font-size: 13px;
}

.table-row a:hover {
color: #fea050 !important;
text-decoration: underline;
}

.table-row a {
color: #fff !important;
font-weight: bold;
text-decoration: underline;
}


.table-row span:nth-child(1) {
text-align: left;
}
.table-row span:nth-child(2) {

}
.table-row span:nth-child(3) {

}
.table-row span:nth-child(4) {

}
.table-row span:nth-child(5) {

}
.full-height-cell{
line-height: 42px;
}
#diagram-content img{
height: calc(100% - 40px);
width: calc(100% - 140px);
margin-left: 70px;
}
.diagram-container-type {
background:#2d2f40;
display: inline-block;
width: 100%;
height: 230px;
border-radius: 10px;
margin-bottom: 15px;

}

.diagram-container-type .diagram-container-img-1,
.diagram-container-type .diagram-container-img-2,
.diagram-container-type .diagram-container-img-3 {
display: inline-block;
width: calc(100% - 30px);
height: calc(100% - 30px);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 25px 15px 15px 15px;
/* padding-top: 10px; */
}
.diagram-container-type .diagram-container-img-1{
background-image: url(../../backend/img/pala.svg);
}
.diagram-container-type .diagram-container-img-2 {
background-image: url(../../backend/img/camion.svg);
height: calc(100% - 40px);
margin: 30px 15px 15px 15px;
}
.diagram-container-type .diagram-container-img-3{
background-image: url(../../backend/img/img-diagramas-correas-02.png);
}
.diagram-container-type-process-img{
background-image: url(../../backend/img/diagrama-process-painted.svg);
display: inline-block;
width: calc(100% - 30px);
height: calc(100% - 30px);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 15px;
}
.diagram-container-type h3 {
position: absolute;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
left: 25px;
top: 10px;
}
.diagram-container-type h3 span {
position: relative;
width: 4px;
height: 12px;
background: greenyellow;
border-radius: 1px;
top: 2px;
margin-right: 4px;
display: inline-block;
float: left;
}
.diagram-container-type h3 a{
color:#fff;
}