@keyframes anim-bg {
  from {
    opacity: 1;
  }
  to {
    opacity: .5
  }
}

@keyframes anim-all {
  from {
    opacity: 0;
    margin-top: 50px;
  }
  to {
    opacity: 1;
    margin-top: 20px;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes loading-icon{
  0% {
    color: #a2a2a2;
  }
  25% {
    color: #ff7a5a;
  }
  50% {
    color: #a2a2a2;
  }
  100% {
    color: #a2a2a2;
  }
}

@keyframes blinking{
  0%{
    background-color: #f3ff39;
  }
  50%{
    background-color: transparent;
  }
  100%{
    background-color: #f3ff39;
  }
}

@keyframes slideDown{
  from{
    top: 0;
  }
  to{
    top: 100%;
  }
}

@keyframes slideUp{
  from{
    top: 100%;
  }
  to{
    top: 0;
  }
}

html,body{
  background-color: #02182b;
}
hr{
  border-top: 1px solid #a2a2a2;
}
table tr th,table tr td{
  vertical-align: top;
}
label{
  text-transform: uppercase;
  font-weight: normal;
}
.background-img{
  position: fixed;
  left: 0;
  top: 0;
  background-image: url(../img/bg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .2;
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
}
.tiny-text{
    font-size: small;    
}
.blue-text{
    color: blue;   
}
.diagram-container{
    padding: 5px 0;
    display: inline-block;
}
.diagram-container table tr td{
    padding: 5px;
    max-width: 200px;
    vertical-align: middle;
}
table tr td.bordered{
    border: 1px solid #000;
    background-color: #fff;
    text-align: left;
}
.justify-text{
  text-align: justify;
}
.root-container{
  position: relative;
  height: 100vh;
}
.box-input{
  color: #fff;
}
.captcha-field{
  color: #69430a;
  border-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  padding: 15px;
  background-color: #ffd96f;
}
.captcha-input{
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.copyright-text{
  text-align: center;
  font-size: small;
  color: grey;
  margin: 20px 0px;
}
.logo-img{
  height: 70px;
}
.text-advice{
  color: #ff9800;
}
.mini-star{
  color: #ffc66d;
}
.title-line{
  color: #fff;
}
.title-line h3:first-child{
  margin-bottom: 0px;
}
.title-line h3:last-child{
  margin-top: 0px;
}
.title-line h2{
  margin-top: 0px;
  font-weight: bold;
}
.no-margin{
  margin: 0px;
}
.small-icon{
  font-size: xx-small;
  color: #a2a2a2;
}
.panel{
  opacity: 0;
}
.panel-default-trans{
  background-color: rgba(255,255,255, .7);
}
.fa-rotate-45 {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.table-no-border,
.table-no-border>tbody>tr>td,
.table-no-border>tbody>tr>th,
.table-no-border>tfoot>tr>td,
.table-no-border>tfoot>tr>th,
.table-no-border>thead>tr>td,
.table-no-border>thead>tr>th{
      border:0px !important;
}

ol.roman {
  list-style-type: upper-roman;
}

ol.roman>li{
  font-weight: bolder;
  font-size: large;
}
ol.number{
  padding-left: 21px;
}
ol.letter{
  list-style-type:upper-alpha;
  padding-left: 21px;
}
ol.small-letter{
  list-style-type:lower-alpha;
  padding-left: 21px;
}
ol.big-letter{
  list-style-type:upper-alpha;
}
ol.big-letter>li{
  font-weight: bolder;
  font-size: large;
}

.result-container{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  min-height: 100%;
}

.result-container .title-line{
  color: #000;
}

.result-container .close-btn{
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px;
  color: #555;
  display: block;
  z-index: 100;
}

.result-container .close-btn:hover{
  color: red;
}

.slide-down{
  animation-name: slideDown;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.slide-up{
  animation-name: slideUp;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.loader-animate1{
  animation-name: loading-icon;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
.loader-animate2{
  animation-name: loading-icon;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: .5s;
}
.loader-animate3{
  animation-name: loading-icon;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}
.blink-animate{
  animation-name: blinking;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-delay: .5s;
}

h1{
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}
.cd-notif {
  color: #fff;
  margin-bottom: 20px;
  margin-top:100px;
}
#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
}

#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	background: rgba(41, 59, 216, 0.562);
	display: inline-block;
}

#clockdiv div > span{
	padding: 15px;
	border-radius: 3px;
	background: #0606068c;
	display: inline-block;
}

.smalltext{
	padding-top: 5px;
	font-size: 16px;
}