/* 
    UTIL
*/
 /*circle {
    fill: transparent !important ;
    }*/

.card-on-move {

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.cursor-move{
    cursor:move;
}

 
.dropdown-list-200{

    max-height: 200px;
    overflow-y: auto;
}
.dropdown-list-200-absolute{
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
}
 
 .maring-right-10{
    margin-right: 10;
 }
 .out-card-bounds{ 
    margin:  0 -4%; 
    padding: 4%;
    margin-bottom: -5%; 
 }
.card-header-tools{

    height: 15px !important;
    padding: 5px !important;
    margin-top: -8px;

}
 .generic-card{
    width:480px;
    height:480px; 
    min-width:300px;
    min-height:300px; 
 }
 .minimun-generic-card{
    width:300px;
    height:200px; 
    min-width:200px;
    min-height:200px; 
 }

 .box-shadow-bottom{
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
 }

 /*
 =========================

 GEOGRAPHIC FILTER 
 =========================
 */

.btn-zoom-in {
    width: 35px;
    height: 35px;
}
.list-width-250{
max-height: 200px;
overflow-y: auto;
position: absolute;
width: 260px;
}
.list-limit-height{
  max-height: 200px;
  overflow: auto;
}
.row-geographic{
  margin-bottom:10px
}
/*
=================
ZOOM LOCATION
================
*/

.card-zoom-location{
    width:300px;
    height:430px;
    min-width:200px;
    
}
 /*
================
GEOGRAPHIC FILTER
================
 */ 
 .scada-filter-selection{
    padding: 10px 15px;
    
 }
 /*
===================
scada-configuration-directive
===================
 */

 .card-configuration-scada{ 
    width:600px;
    height:400px; 
    min-width:300px;
    min-height:300px; 
}
 
 .card-configuration-scada .nano{

    height: 90%;
     
 }
 .card-configuration-scada .card-body{
 
    height: 99%;
 
}

.card-configuration-scada .params-section{
  
    height:100%;
    margin-bottom: 0px;
    padding-bottom: 0px !important;
  
}
 .card-configuration-scada .params-section .form-control {
    color:black !important;
 }
  .card-configuration-scada .params-section .form-control::-webkit-input-placeholder {
    color:gray !important;
}

  .card-configuration-scada .params-section .form-control:-moz-placeholder { /* Firefox 18- */
    color:gray !important;
}

  .card-configuration-scada .params-section .form-control::-moz-placeholder {  /* Firefox 19+ */
    color:gray !important;
}

.card-configuration-scada .params-section .form-control:-ms-input-placeholder {  
    color:gray !important;
}

.card-body .left-offcanvas-menu{
    height: 100%;
    min-width: 100px;
    
}
/*
===========
SCADA DIAGRAM
==========
*/
.card-diagram-scada{
    width:1200px;
    height:500px; 
    min-width:300px;
    min-height:300px; 
}

.card-diagram-scada .nano{

    height: 90%;
     
 }
 .card-diagram-scada .card-body{
 
    height: 99%;
 
}

.card-diagram-scada .params-section{
  
    min-height:200px; 
  
}

.scadaDiagramOpenTable{
    width:700px;
    height:400px; 
    min-width:300px;
    min-height:300px; 
}
/*
===========00
CARD open table generic
=========
*/
.genericOpenTable{
    width:800px;
    height:500px; 
    min-width:300px;
    min-height:300px; 
}
/*
===========00
SCADA table
=========
*/
#scada-info  .tab-content{
padding: 5px;

}
#scada-info table{
    width: 100%;
    
    margin: 0 auto;
  
    text-transform: capitalize;
}
#scada-info table th{
   min-width: 100px;
    text-align: center;
    padding: 5px;
}

#scada-info table td{
    vertical-align: top;
    
     padding: 5px;
     min-width: 100px;
     text-align: center;
}
/*
================
SCADA DIAGRAM CHART
========
*/
.scada-chart{
    padding:10px;
    margin-bottom: 24px;
    background-color: #ffffff;
    color: #313534;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    width: 780px;
    height: 300px;
}

.chart-expanded {
    position: fixed;
    top: 25%;
    left: 5%;
    width: 90%;
    height: 70%;
    z-index: 10;
}
/*
================
EMERGENCY CONTROL
========
*/
.card-emergency-control{

    width:300px;
    height:350px; 
    min-width:220px;
    min-height:200px; 
}
.card-emergency-control .grips-found-tap{
    float: right;
    margin-top: -10px;
    background: #f1f1f1;
}
.card-emergency-control fieldset legend span{
    top:-5px !important;
}

.card-emergency-op-window {
    width:400px;
    height:500px; 
    min-width:220px;
    min-height:200px;    
}
.card-emergency-control li a{
    text-align: left !important;
}
.card-press-pipe{
position: fixed !important;
 padding: 15px;
  top: 15% !important;
   left: 15% !important;
    width: 300px; min-height: 200px;

}
.card-isolate-pipe{
     width: 300px;
     height:420px; 
     min-height: 200px;
     position: fixed !important;
      padding: 15px;
       top: 15% !important;
       left: 15% !important;

}



body.isMobile .card-isolate-pipe  .col-md-3{
    width: 25% !important;
    float: left !important;
    text-align: center !important;
}

.card-emergency-query{
     width: 80%;
    height: 400px;
    top: 100px !important;
    left: 100px !important;
    position: fixed !important;
    z-index:100;
}
 
.card-emergency-detail{
    position: fixed !important;
    padding: 15px; 
    top: 15% !important; 
    left: 15% !important;
    width: 950px; 
    height:500px;
    min-height: 200px; 
}

.popOver-infoShow{
    
    position: absolute; 
    background: white;
    z-index: 10;
    width: 95%;

}

body:not(.isMobile) .card-emergency-control{
    margin-left:-15px;margin-right:-15px;margin-top:-10px;
}
.card-emergency-control .group-box{
    
    border: 1px solid #c0c0c0; 
    margin: 0 2px;  
    margin-bottom: 15px;
}

.card-emergency-control .group-box>header{
    display: block;
    width: auto;
    padding: 0px;
    margin-top: -14px;  
    color: #313534;
    border: 0;     

}

.card-emergency-control .group-box>header span {
  padding: 3px;
  background: white;
  height: 10px; 

}
 
/*
==================
OPEN DIALOG FORM
===================
*/

.open-dialog-modal{
    width:100%;
    height:100%;
    position:fixed;
    display:block;
    top:0px;
    left:0px;
    background-color: rgba(10,10,10,0.5);
    z-index: 10000;
}
/*
--------------
*/

 #pinMapWrapper .btn-action i{

    font-size:  large !important;
    font-weight: bolder !important;
 }

 #pinMapWrapper .btn-config {

    width: 30px;
    height: 30px;
    margin-top: -50px;
 }
  #pinMapWrapper .btn-config i{

    line-height:20px;
 }
 .info-row{
    margin-bottom: 2px;
    background: rgba(253, 253, 253, 0.2);
    padding: 4px;
    border-bottom:thin #f1f1f1 solid;
    cursor:pointer;
    width: 100%;
    height:30px;
    overflow: hidden;
 }

 .animation-slide-up{
      -webkit-animation: slide-up 0.3s ease-out;
    -moz-animation: slide-up 0.3s ease-out;
    -ms-animation: slide-up 0.3s ease-out;
    -o-animation: slide-up 0.3s ease-out;
    animation: slide-up 0.3s ease-out;
 }
 .pulsate {
    
    -webkit-animation-name: pulsate; 
    animation-name: pulsate; 
}
 
.animate-once {
    
  
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    
     animation-duration: 1s;
    animation-fill-mode: forwards;

}
.pulse { 
    -webkit-animation-name: pulse; 
    animation-name: pulse; 
  
}

@-webkit-keyframes pulse { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(1.1); } 
    100% { -webkit-transform: scale(1); } 
} 
@keyframes pulse { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.1); } 
    100% { transform: scale(1); } 
} 

 @-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

@keyframes pulsate {
    0% {transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}
@-webkit-keyframes pulsate_once {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    99% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
    100% {-webkit-transform: scale(1, 1); opacity: 1;}
}

@keyframes pulsate_once {
    0% {transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    99% {transform: scale(1.2, 1.2); opacity: 0.0;}
    100% {transform: scale(1, 1); opacity: 1;}
}



.truncate {
 width:99%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.line-progress{
    position: relative;
    height: 4px;
    display: block;
    width: 100%;
    background-color: #acece6;
    border-radius: 2px; 
    overflow: hidden;
}

.line-progress  .indeterminate {
    background-color: #26a69a;
}

.line-progress .indeterminate:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%
    }
    60% {
        left: 100%;
        right: -90%
    }
    100% {
        left: 100%;
        right: -90%
    }
}
@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%
    }
    60% {
        left: 100%;
        right: -90%
    }
    100% {
        left: 100%;
        right: -90%
    }
}