@CHARSET "UTF-8";

.circleOut {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 0;
  height: 0;
}
.circleOut:before {
  position: relative;
  top: -1.8em;
  left: -2em;
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  width: 1em;
  height: 1em;
  border: 0.5em solid white;
  border-radius: 100%;
  content: "";
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: forwards;
          animation-direction: forwards;
}
.circleOut:after {
  position: absolute;
  top: -1.8em;
  left: -2em;
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  width: 2em;
  height: 2em;
  border: 0.2em solid white;
  border-radius: 100%;
  content: "";
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-delay: -.5s;
          animation-delay: -.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: forwards;
          animation-direction: forwards;
}

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

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

@media screen and (min-width:1201px){
 .panel.panel-default.view {height:400px;}
 .panel.panel-default.table {height:770px;}
}

@media screen and (max-width:1200px){
 .panel.panel-default.view {height:730px;}
 .panel.panel-default.table {height:770px;}
}

/* CSS code icons from http://codepen.io/jthiller/pen/icDtL */

.circleOut_alert {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 0;
    height: 0;
}
.circleOut_alert:before {
    position: relative;
    top: -1.8em;
    left: -2em;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 4em;
    height: 4em;
    border: 0.5em solid #ffd200;
    border-radius: 100%;
    content: "";
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
    -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: -2s;
            animation-delay: -2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: forwards;
            animation-direction: forwards;
}
.circleOut_alert:after {
    position: absolute;
    top: -1.8em;
    left: -2em;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 4em;
    height: 4em;
    border: 0.2em solid #ffd200;
    border-radius: 100%;
    content: "";
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
    -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: -1.5s;
            animation-delay: -1.5s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: forwards;
            animation-direction: forwards;
}
.circleOut_alarm {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 0;
    height: 0;
}
.circleOut_alarm:before {
    position: relative;
    top: -2.2em;
    left: -2.5em;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 5em;
    height: 5em;
    border: 0.5em solid #f36700;
    border-radius: 100%;
    content: "";
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
    -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: -2s;
            animation-delay: -2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: forwards;
            animation-direction: forwards;
}
.circleOut_alarm:after {
    position: absolute;
    top: -2.2em;
    left: -2.5em;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 5em;
    height: 5em;
    border: 0.2em solid #f36700;
    border-radius: 100%;
    content: "";
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
    -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: -1.5s;
            animation-delay: -1.5s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: forwards;
            animation-direction: forwards;
}         
.circleOut_critical {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 0;
    height: 0;
}
.circleOut_critical:before {
    position: relative;
    top: -1.4em;
    left: -1.5em;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 3em;
    height: 3em;
    border: 0.3em solid #da0000;
    border-radius: 100%;
    content: "";
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
    -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: -1s;
            animation-delay: -1s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: forwards;
            animation-direction: forwards;
}
.circleOut_critical:after {
    position: absolute;
    top: -1.4em;
    left: -1.5em;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 3em;
    height: 3em;
    border: 0.1em solid #da0000;
    border-radius: 100%;
    content: "";
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
    -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: -.5s;
            animation-delay: -.5s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: forwards;
            animation-direction: forwards;
}           
.circleOut_same {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 0;
    height: 0;
}
.circleOut_same:before {
    position: relative;
    top: -1.4em;
    left: -1.5em;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 3em;
    height: 3em;
    border: 0.3em solid #dc32d3;
    border-radius: 100%;
    content: "";
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
    -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: -1s;
            animation-delay: -1s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: forwards;
            animation-direction: forwards;
}
.circleOut_same:after {
    position: absolute;
    top: -1.4em;
    left: -1.5em;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 3em;
    height: 3em;
    border: 0.1em solid #dc32d3;
    border-radius: 100%;
    content: "";
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
    -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: -.5s;
            animation-delay: -.5s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: forwards;
            animation-direction: forwards;
}