/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    background-color: #ebebeb;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #6d6d6d; 
}
/**administration**/
.action {
    margin-top: .5rem !important;
}
.w-60p {
    width: 60%;
}
img.admin-img {
    height: 100px;
}
img.arrow-img {
    height: 40px;
}
.card.selected {
    border-color: #088FD1;
    border-width: 2px;
}
.project-card img.card-img-bottom {
    height: 130px;
    object-fit: contain;
}
.h-400px{
    height: 400px;
}
.h-80{
    height: 80vh;
}
.h-65{
    height: 65vh;
}
.h-75v{
    height: 75vh;
}
.h-49p{
    height: 49%;
}
.w-80{
    width: 80%;
}
.border-right{
    border-right: 1px solid #DADADA;
}
/**administration**/

/**data-ingestion**/
.data-card {
    border: 1px solid #DADADA;
    border-radius: 5px;
    height: calc(100vh - 130px);
}
.breadcrumb-item+.breadcrumb-item::before{
    content: ">";
}
/**data-ingestion**/
.object-fit-contain {
    object-fit: contain;
}
.data-card.scroll-content {
    height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.overflow-y-auto{
    overflow-y: auto;
    overflow-x: hidden;
}
.h-81 {
    height: 81vh;
}
.graph-img{
    height: 400px;
    width: 100%;
    object-fit: fill;
}
/**data-management**/
label.form-label-heading {
    color: #088FD1 !important;
    font-weight: 700;
}
/**data-management**/
/**signal analyzer**/
.operator {
    width: 15px;
    display: inline-block;
    background: #f8f8f8;
    margin-right: 5px;
    text-align: center;
}
/**signal analyzer**/
@keyframes flash-red {
    0%, 100% { background-color: red; }
    50% { background-color: transparent; }
}
@keyframes flash-yellow {
    0%, 100% { background-color: yellow; }
    50% { background-color: transparent; }
}
.flashing-circle {
    width: 50px;
    height: 50px;
    border: 2px solid black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 1em;
}
.flashing-yellow {
    animation: flash-yellow 1s infinite;
}
.flashing-red {
    animation: flash-red 1s infinite;
}
.notice {
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #7f7f84;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
       -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
            box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}
.notice-danger {
    border-color: #d73814;
}
.notice-danger>strong {
    color: #d73814;
}
.notice-warning {
    border-color: #FEAF20;
}
.notice-warning>strong {
    color: #FEAF20;
}
.vs-alert .alert{
    display: flex;
    align-items: center;
    position: relative;
}
.vs-alert .alert-warning {
    background: #FFEA00;
    border: 2px solid #FFD700;
}
.vs-alert .alert-danger {
    background: #FAA0A0;
    border: 2px solid #880808;
}
.vs-alert .alert-img-box{
    height: 100%;
    position: absolute;
    left: 0;
    width: 70px;
    align-items: center;
    text-align: center;
    display: flex;
    justify-content: center;
}
.vs-alert .alert span {
    margin-left: 60px;
}
.bg-danger{
    background: #880808 !important;
}
.bg-warning{
    background: #FFD700 !important;
}
/**visualizarion**/
.alert-img{
    height: 50px;
}
@keyframes blink {
    0%, 100% {opacity: 1;}
    50% {opacity: 0;}
  }
  .alert-img {
    animation: blink 1s linear infinite;
  }
.alert-box {
    min-height: 85px;
    display: flex;
    align-items: center;
}
.trafficlight{
    background: #222;
    background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
    width: 140px;
    height: 300px;
    border-radius: 20px;
    position: relative;
    border: solid 5px #333;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
  }
  
  /* .trafficlight:before{
    background: #222;
    background-image: radial-gradient(#444, #000);
    content: "";
    width: 170px;
    height: 150px;
    margin: 0 auto;
    top: -20px;
    margin-left: 0px;
    border-radius: 50%;
    z-index: -1;
  } */
  
  .protector{
    background: transparent;
    width: 180px;
    height: 0;
    position: absolute;
    top: 20px;
    left: -35px;
    border-right: solid 30px transparent;
    border-left: solid 30px transparent;
    border-top: solid 90px #111;
    border-radius: 10px;
    z-index: -1;
  }
  
  .protector:nth-child(2){
    top: 140px;
  }
  
  .protector:nth-child(3){
    top: 260px;
  }
  
  .red{
    background: red;
    background-image: radial-gradient(brown, transparent);
    background-size: 5px 5px; 
    width: 70px;
    height: 70px;
    border-radius: 50%;  
    border: dotted 2px red;
    box-shadow: 
      0 0 20px #111 inset,
      0 0 10px red;
      opacity: 0.2;
  }
  .red.on{
    animation: 1s red infinite;
    opacity: 1;
  }
  .yellow{
    background: yellow;
    background-image: radial-gradient(orange, transparent);
    background-size: 5px 5px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: dotted 2px yellow;
    box-shadow: 
      0 0 20px #111 inset,
      0 0 10px yellow;
      opacity: 0.2;
  }
  .yellow.on{
    animation: 1s yellow infinite;
    opacity: 1;
  }
  .green{
    background: green;
    background-image: radial-gradient(lime, transparent);
    background-size: 5px 5px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: dotted 2px lime;
    box-shadow: 
      0 0 20px #111 inset,
      0 0 10px lime;
      opacity: 0.2;
    
  }
  .green.on{
    animation: 1s green infinite;
    opacity: 1;
  }
  @keyframes red{
    0%{opacity: 1}
    20%{opacity: 1}
    40%{opacity: 1}
    60%{opacity: .1}
    80%{opacity: .1}
    100%{opacity: .1}
  }
  
  @keyframes yellow{
    0%{opacity: .1}
    20%{opacity: .1}
    40%{opacity: 1}
    50%{opacity: .1}
    60%{opacity: .1}
    80%{opacity: .1}
    100%{opacity: .1}
  }
  
  @keyframes green{
    0%{opacity: .1}
    20%{opacity: .1}
    40%{opacity: .1}
    60%{opacity: 1}
    80%{opacity: 1}
    83%{opacity: .1}
    86%{opacity: 1}
    89%{opacity: .1}
    93%{opacity: 1}
    96%{opacity: .1}
    100%{opacity: 1}
  }
  /**visualizarion**/

  /*progress bar**/
.ctm-progress .progress {
    position: relative;
    height: 18px;
}
.ctm-progress .progress label {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}