* 
    margin: 0;
    padding: 0;
}
body {
    font-family:'Open Sans', sans-serif;
    color: #1f2636;
    font-size: 14px;
    padding-bottom: 40px;
    text-align: left;
}
header {
    background: #0db9f0;
    color: #fff;
    margin: -40px;
    margin-bottom: 40px;
    text-align: center;
    padding: 40px 0;
}
h1 {
    font-weight: 100;
    font-size: 95%;
}
h2 {
    margin-bottom:10px;
}
.wrapper {
    background: #fff;
    padding: 40px;
}
article {
    margin-bottom: 10px;
}
.tab-pane {
    padding-top: 10px;
}
.field-title {
    width: 100px;
}

#AuthCont {
   border: 2px;
   border-style: solid;
   border-radius: 25px;
   text-align: center;
   padding: 10px;
}

th,td {
   padding: 5px;
}

#AuthBut {
   position: absolute;
   left: 0px;
   top: 200px;
   width: 200px;
   height: 100px;

}

#Company {
   position: absolute;
   left: 0px;
   top: 3px;
   width: 200px;
   height: 100px;
}

#Argility {
   position: absolute;
   right: 0px;
   top: 20px;
   width: 150px;
/* Height definition does not change theheight */
}

#Ceres {
   position: absolute;
   right: 120px;
   top: 1px;
   bottom: 0px;
   width: 100px;
   padding: 2px;
}

/* 
#HeaderBlock {
   background-color:  grey;
   color:  white;
}
*/


/* 
#Article {
   background-color:  lightgrey;
   color:  black;
}
*/

#FullLegend {
    font-size: 10px;
}
#LegendLeft li {
   text-align: left;
}

#LegendRight li {
   text-align: justify;
}

.BadMessage  {
  transition: all linear 0.5s;
  background-color: red;
  height: 100px;
  width: 50%;
  position: relative;
  left: 0;
}

.ng-hide {
  height: 100px;
  width: 50px;
  background-color: green;
  top: 0;
  left: 900px;
}

#TextButtons{
   position: absolute;
   bottom: 10px;
   left: 350px;
   width: 290px;
}
#TextAreaGood{
   background-color: lightgreen;
}

#TextAreaBad{
   background-color:orange;
}

#TextEnt{
   position: absolute;
   bottom: 65px;
   height: 250px;
   left: 0px;
   right: 0px;
}

#LNBut{
   margin:  0  20px  0 20px ;
}

#Red{
   color: red;
}

#Orange{
   color: orange;
}

#Olive{
   color: LimeGreen;
}

#Green{
   color: Lime;
}

q{
    color: red;
    font-family: courier;
    font-size: 110%;
}

div.r{
    text-align: left;
    color: red;
    font-family: courier;
    font-size: 110%;
}


/* 
#Polar{
   background-color: lightgrey;
}
*/




/* ----------------------- ANIMATION ---------------------- */
/* https://github.com/daneden/animate.css */

/* when hiding the picture */
.ng-hide-add         { animation:0.5s lightSpeedOut ease; }

/* when showing the picture */
.ng-hide-remove      { animation:0.5s flipInX ease; }

/* ANIMATIONS (FROM ANIMATE.CSS) ======================== */
/* flip in */
@keyframes flipInX {
  0% {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    transform: perspective(400px);
    transform: perspective(400px);
    transform: perspective(400px);
  }
}

/* light speed out */
@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
}