.moveall,
.removeall {
  border: 1px solid #ccc !important;
  
}
.moveall:hover,
.removeall:hover {
  background: #efefef;

}

.moveall::after {
  content: attr(title);
}

.removeall::after {
  content: attr(title);
}

.form-control option {
  padding: 10px;
  border-bottom: 1px solid #efefef;
  
}
/*
 *  Bootstrap Duallistbox - v3.0.2
 *  A responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.
 *  http://www.virtuosoft.eu/code/bootstrap-duallistbox/
 *
 *  Made by István Ujj-Mészáros
 *  Under Apache License v2.0 License
 */
 .bootstrap-duallistbox-container .buttons {
    width: 100%;
    margin-bottom: -1px;
    
    }
  
  .bootstrap-duallistbox-container label {
    display: block;
  }
  
  .bootstrap-duallistbox-container .info {
    display: inline-block;
    margin-bottom: 5px;
    font-size: 11px;
   
  }
  
  .bootstrap-duallistbox-container .clear1,
  .bootstrap-duallistbox-container .clear2 {
    display: none;
    font-size: 10px;
  }
  
  .bootstrap-duallistbox-container .box1.filtered .clear1,
  .bootstrap-duallistbox-container .box2.filtered .clear2 {
    display: inline-block;
  }
  
  .bootstrap-duallistbox-container .move,
  .bootstrap-duallistbox-container .remove {
    width: 60%;
  }
  
  .bootstrap-duallistbox-container .btn-group .btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .bootstrap-duallistbox-container select {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  
  .bootstrap-duallistbox-container .moveall,
  .bootstrap-duallistbox-container .removeall {
    width: 40%;
  }
  
  .bootstrap-duallistbox-container.bs2compatible .btn-group > .btn + .btn {
    margin-left: 0;
  }
  
  .bootstrap-duallistbox-container select {       /*filtteritekstin väri*/
    
    width: 100%;
    height: 300px;
    padding: 0;
  }
  
  .bootstrap-duallistbox-container .filter {
    backGround: rgb(255, 255, 200);
    /*background: white;*/
    
    display: inline-block;
    width: 100%;
    height: 31px;
    margin: 0 0 5px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

  }
  
  .bootstrap-duallistbox-container .filter.placeholder {
    color: rgb(170, 170, 170);
    
  }
  
  .bootstrap-duallistbox-container.moveonselect .move,
  .bootstrap-duallistbox-container.moveonselect .remove {
    display:none;
  }
  
  .bootstrap-duallistbox-container.moveonselect .moveall,
  .bootstrap-duallistbox-container.moveonselect .removeall {
    width: 100%;
    color: black;
    background: rgb(248, 247, 243);
  }



  @media print {
    #bckBtn {
      display: none;}
      /*visibility: hidden;*/

  }

  @media print {
    .page-break { 
      display: static; 
      page-break-before: always;
     }
  }

  @media print {
    #logOutBtn{
      display: none;}
  }

  @media print { 
    #logOutBtn2{
    display: none;} 
  }

  @media print {
    #zoomBtn{
      display: none;}
            
  }

  @media print { 
    #etuSivu {
        display: block;
    }
  }




  #etuSivu { 
      display: none;
  }




 /* @media screen and (min-width: 480px) { */
 @media screen and (min-width: 600px) {
   body {
      
      background-image: url(https://s3.eu-central-1.amazonaws.com/matolog.com/Marko/MatLabKuva1.png);
      background-repeat: no-repeat;
      height: 100%;
      background-position: center;
      background-size: cover;
    }
  }


  .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning  { 
    background-color: hsl(351, 68%, 11%) !important;
    background-repeat: repeat-x;
    background-image: -o-linear-gradient(top, #f58400, #d6d2d2);
    background-image: linear-gradient(#f58400, #2f080e);
    border-color: #2f080e #2f080e hsl(351, 68%, 1.5%);
    color: rgb(249, 253, 9) !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.62);
  }
  .btn-warning {
    background-color: #f58400 !important;
    background-repeat: repeat-x;
    background-image: linear-gradient(#f3bd6c, #f58400);
    border-color: #fcbd75  #fcbd75 #f58400;
    color: black !important;
    /*width: 300px !important;*/
   }
   
   .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary  {
   /*.buttons:hover{*/
    background-color: rgb(52, 170, 233) !important;
    background-repeat: repeat-x; 
    background-image: -o-linear-gradient(top, #12d3f5, #2ae904);
    background-image: linear-gradient(#b7e1b7, #374b36);
    border-color: #2f080e #2f080e hsl(351, 68%, 1.5%);
    color: rgb(4, 27, 1) !important;  
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.62);
  }

  .input-warning {
  
    border-color: #ff9800;
    border-radius: 5px;
    font-size: 17px;
    font-weight: bold;
   }

   .input-warning-btn {
  
    background-color: #f58400 !important;
    background-image: linear-gradient(#f3bd6c, #f58400);
    border-radius: 5px;
    font-weight: bold;
   }

   .input-warning-btn:hover {
  
    background-color: #08f7c7 !important;
    background-image: linear-gradient(#f3bd6c, #533008);
    color: rgb(249, 253, 9) !important;
    border-radius: 5px;
    font-weight: bold;
   }

   .digText{
    font-weight: bold;
   }


    #quattroMato{
      color: rgb(0, 0, 0) !important;
      background-color: #02d502 !important;
      background-repeat: repeat-x;
      background-image: linear-gradient(#2ac703, #017001);
      border-color: #e2f0df  #000000 #01bb01;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.62);
    }

    #quattroMato:hover{
    color: rgb(249, 253, 9) !important; 
    background-color: hsl(351, 68%, 11%) !important;
    background-image: -o-linear-gradient(top, #1a9b00, #0d4d00);
    background-image: linear-gradient(#06b406, #021f00);
    border-color: #2f080e #2f080e hsl(351, 68%, 1.5%);
    }


   .list-group button:hover {
    background-color: #f58400;
    font-weight: 750;
  }
  .list-group.item active {
    display:block;
  }

  .list-group button {
    background-color: white; /* Green background */
    border: 1px solid rgb(0, 8, 0); /* Green border */
    color: black; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    /*float: left; /* Float the buttons side by side */
  }
 

 /* @media print {  
    #charts {  
      margin: 1px; 
      top: 1px; 
      bottom: 50px; 
      width: 850px;
      height: 350px;
      padding-bottom: 100mm;
      vertical-align: middle;
    }
 }*/

.kaavio {
  margin: 0px;
  margin-top: 0px;
  page-break-inside: avoid;
 /*background-color: greenyellow;
 /* color: rgb(18, 219, 52);*/
}

.btn-group-xs > .btn, .btn-xs {
  position:relative;
  bottom:-40px;
  padding: .25rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
  z-index:9994;
}


.showT{
  /*background-color: rgb(249, 250, 249);*/
  vertical-align: top;
  background-color: transparent;
  width: 200px;
  margin:10px;
  top:0px;
  height: 10px;
  left:0px;
 
}


.showT1{
  /*background-color: rgb(249, 250, 249);*/
  vertical-align: top;
  width: 200px;
  margin-top:20px;
  margin-left: 15px;
  top:5px;
  height: 1px;
  left:0px;
  background-color:transparent;
}

.showM1{
  /**background-color: rgb(249, 250, 249);*/
  vertical-align: top;
  width: 200px;
  margin-top:20px;
  margin-left: 15px;
  top:10px;
  height: 5px;
  left:0px;
 
  /*color:rgb(10, 243, 29)*/


}

.showS{
  /**background-color: rgb(249, 250, 249);*/
  vertical-align: top;
  width: 250px;
  margin-top:20px;
  margin-left: 15px;
  top:5px;
  height: 10px;
  left:0px;
  /*color:rgb(10, 243, 29)*/
}

.showS1{
  /**background-color: rgb(249, 250, 249);*/
  vertical-align: top;
  width: 250px;
  margin-top:20px;
  margin-left: 15px;
  top:5px;
  height: 10px;
  left:0px;
  color:blue
}

.showS2{
  /**background-color: rgb(249, 250, 249);*/
  vertical-align: top;
  width: 250px;
  margin-top:20px;
  margin-left: 15px;
  top:5px;
  height: 10px;
  left:0px;
  /*color:rgb(10, 243, 29)*/
}

.showS3{
  /**background-color: rgb(249, 250, 249);*/
  vertical-align: top;
  width: 250px;
  margin-top:20px;
  margin-left: 15px;
  top:5px;
  height: 10px;
  left:0px;
  /*color:rgb(10, 243, 29)*/
}

.showCur{
  vertical-align: top;
  width: 220px;
  margin-top:5px;
  margin-left: 20px;
  font-weight: bold;
  color:orange;
  top:5px;
}


/*halkeiluriskin merkitsevyys*/
#lineC1{ 
  vertical-align: top;
  background-color:  rgb(247, 241, 237);
  /*text-align: center;*/
  width: 200px;
  margin-top:3px;
  color:black;
  animation: blinker 1.2s step-start infinite; 
}

/*#lineC1{
  animation: blinker 1.2s step-start infinite; 
}*/



.showCurJatko{
  vertical-align: top;
  width: 220px;
  margin-top:3px;
  color:orange;
  font-weight: bold;
  top:3px;
}

.showCurRes{
  vertical-align: top;
  background-color: rgb(247, 241, 237);
  color: rgb(33, 0, 245);
  width: 200px;
  margin-top:3px;
}

/*curing index tämän hetken arvo*/
.showCur3{
  vertical-align: top;
  text-align: center;
  background-color:  rgb(247, 241, 237);
  color: rgb(33, 0, 245);
  width: 100px;
  margin-top:1px;
  top:1px;
}


#status-area .flash_message {
 
  padding: 5px;
  background: orange;
  color: black;
  border: black;
  border-radius: 5px;
}

#status-area{
  
  padding: 5px;
  background: orange;
  color: black;
  border: black;
  border-radius: 5px;
}


#status-area2 .flash_message {
  padding: 5px;
  background: orange;
  color: black;
  border: black;
  border-radius: 5px;
}

#status-area2{
  padding: 5px;
  background: orange;
  color: black;
  border: black;
  border-radius: 5px;
}


#rapEle{
  z-index: 1;
  
}

/*@media only screen and (max-width: 720px) {*/
/* #chartView {*/
/* #statT {

    position: relative;
    top: 0; 
    left: 0;

    border: 2px solid orange;
    /*transform: translate(-50%, -50%);*/
    /*width: 80%;*/
    
    


    /*background-color: rgb(249, 253, 9);*/
    /*transform:scale(0.5);*/
    /*width: 100vw;*/
    /*transform: translate(-50%, -50%);
    position:fixed;
    transition-duration: 1s;
    max-width: 50%;
    max-height:50%;
    left:50%;
    top:50%;*/
 /*}*/



  /*#chartView{
    left: 0;
      position: fixed;
      overflow: visible;
      -moz-transform-origin: top left;
      -ms-transform-origin: top left;
      -o-transform-origin: top left;
      -webkit-transform-origin: top left;
       transform-origin: top left;
      -moz-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      -webkit-transition: all .2s ease-in-out;
       transition: all .2s ease-in-out;
}*/



































*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}



@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*
.loader {
  z-index: 9998;
  font-size: 80%;
  height: 5em;
  left: 50%;
  position: fixed;
  top: 50%;
  width: 5em;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}



.loader:before {
  
  border: 0.5em solid rgb(255, 145, 0);
  border-radius: 50%;
  content: "";
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
.loader span {
  clip: rect(0, auto, 2.5em, auto);
  display: block;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: spinner 3s infinite linear;
  animation: spinner 3s infinite linear;
}
.loader span:before, .loader span:after {
  
  background-color: blue;
  border: 0.5em solid blue;
  border-radius: 50%;
  clip: rect(0, auto, 2.5em, auto);
  content: "";
  display: block;
  height: inherit;
  left: inherit;
  position: inherit;
  top: inherit;
  width: inherit;
}
.loader span:before {
  -webkit-animation: firstHalf 3s infinite ease-in;
  animation: firstHalf 3s infinite ease-in;
}
.loader span:after {
  border-color: blue;
  -webkit-animation: secondHalf 3s infinite ease-out;
  animation: secondHalf 3s infinite ease-out;
}

@-webkit-keyframes spinner {
  0% {
    opacity: 0.25;
    clip: rect(0, auto, 2.5em, auto);
  }
  50% {
    clip: rect(0, auto, 2.5em, auto);
  }
  51% {
    clip: rect(0, auto, 5em, auto);
  }
  100% {
    opacity: 1;
    clip: rect(0, auto, 5em, auto);
  }
}
@keyframes spinner {
  0% {
    opacity: 0;
    clip: rect(0, auto, 2.5em, auto);
  }
  50% {
    clip: rect(0, auto, 2.5em, auto);
  }
  51% {
    clip: rect(0, auto, 5em, auto);
  }
  100% {
    opacity: 1;
    clip: rect(0, auto, 5em, auto);
  }
}
@-webkit-keyframes firstHalf {
  0% {
    -webkit-transform: rotate(-180deg);
  }
  50% {
    -webkit-transform: rotate(0);
  }
}
@keyframes firstHalf {
  0% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(0);
  }
}
@-webkit-keyframes secondHalf {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    -webkit-transform: rotate(0);
  }
  51% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}
@keyframes secondHalf {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    transform: rotate(0);
  }
  51% {
    opacity: 1;
  }
  100% {
    transform: rotate(180deg);
  }
}
*/
/*.rangeSlider{
  margin-top: 20px;
  margin-left: 10px;
  width: 890px;
  background:orange !important;
  color:blue !important;
  border: orange !important;
}*/

/*.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
/*.row:after {
  content: "";
  display: table;
  clear: both;
}*/



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

/*#refVahvistus{
  z-index: 9999;
}*/

.alarmSlider{
  width: 90%;
}

.emailWarning{
  color: red;
}

.badge{
   pointer-events: none;
}
.hide_block{
  display:none !important;
  }

.display_block{
  display:block !important;
}

.qLoader {

  position: fixed;
  left: 50%;
  top: 50%;
  border: 20px solid #f3f3f3;
  border-radius: 10%;
  border-top: 30px solid  rgb(255, 174, 0);
  border-bottom: 8px solid rgb(255, 174, 0);
  border-left: 8px solid rgb(252, 186, 45);
  border-right: 8px solid rgb(252, 186, 0);
  width: 45px;
  height: 50px;
  /*-webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;*/
 /* -webkit-animation: blinker 0.8s step-start infinite; */
  /*animation: blinker 0.8s step-start infinite; */
  opacity: 0.6;
  transform: translate(-50%, -50%);
  z-index: 99999;
  
}

#qLoaderText{
  
  position: fixed;
  left: 50%; 
  top:56%;
  font-family: 'Lato';
  font-size: 13px;
  letter-spacing: 3px;
  /*vertical-align: middle;*/
  text-align: center;
  color: black;
  display: inline-block;
  animation: blinker 0.8s step-start infinite; 
  transform: translate(-50%, -50%);
}

.qLoaderReady {

  position: fixed;
  left: 50%;
  top: 50%;
  border: 20px solid #f3f3f3;
  border-radius: 10%;
  border-top: 30px solid  rgb(13, 232, 2);
  border-bottom: 8px solid rgb(13, 232, 2);
  border-left: 8px solid rgb(13, 232, 2);
  border-right: 8px solid rgb(13, 232, 2);
  width: 45px;
  height: 50px;
  /*-webkit-animation: spin 0.3s linear infinite;
  animation: spin 0.3s linear infinite;*/
  opacity: 0.8;
  /*animation: blinker 1.2s step-start infinite;*/
  transform: translate(-50%, -50%);
}


/*.loader {

  position: fixed;
  left: 35%;
  top: 40%;
  border: 20px solid #f3f3f3;
  border-radius: 10%;
  border-top: 30px solid  rgb(255, 174, 0);
  border-bottom: 8px solid rgb(255, 174, 0);
  border-left: 8px solid rgb(252, 186, 45);
  border-right: 8px solid rgb(252, 186, 0);
  width: 45px;
  height: 50px;
  /*-webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  opacity: 0.8;

}
#loaderText{
  
  position: fixed;
  left: 35%; 
  top:50%;
  font-family: 'Lato';
  font-size: 13px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: black;
  display: inline-block;
  animation: blinker 0.8s step-start infinite;
}*/

.dotGreen {
  height: 12px;
  width: 12px;
  background-color: rgb(54, 245, 6);
  border-radius: 50%;
  display: inline-block;
}

.dotYellow {
  height: 12px;
  width: 12px;
  background-color: rgb(255, 239, 8);
  border-radius: 50%;
  display: inline-block;

}.dotRed {
  height: 12px;
  width: 12px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}
#senCaDateMan {
  border-radius: 3px;
  height:38px;
  background-color: rgb(243, 243, 243);
  background-color: lightgreen;  
  animation: blinker 1.2s step-start infinite

}

#senCaDate {
  background-color: lightgreen;
}

#senCaDateMan2 {
background-color: lightgreen;  
animation: blinker 1.2s step-start infinite
}