html
{
    box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body
{
    font-family: 'Open Sans', sans-serif;
    background-color : rgba( 0, 0, 0, 1 );
    min-width: 1920px;
    height: 100%;
    min-height: 1000px;
    position: absolute;
}

.bg-screen{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%; /* fallback for browsers that don't support vh */
    min-height: 100vh;
    padding-bottom: 5%;
}

.bg-image{
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    /* overflow: hidden; */
    
    background-color: #292929;
}

.bg-image:before {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0px 0 0 -450px;
    
    color: white;
    font-size: 250px;
    content: "\f0c2"; /* cloud */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.bg-image:after {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -350px 0 0 100px;
    
    color: #f18a0c;
    font-size: 200px;
    content: "\f135"; /* rocket */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.container-login {
    height: 100%;
    align-content: center;
    z-index: 1;
}

.panel-login {
    position: relative;
    color: white;
    width: 400px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: rgba(0,0,0,0.5) !important;
}

.header_icon {
    position: absolute;
    right: 15px;
    top: 1.25em;
    width: 16em;
    height: 5em;
    text-align: right;
    color: white;
}

.panel-login-header {
    padding: 0px 15px;
}

.panel-login-header h3{
    color: white;
}

.panel-login-footer {
    background-color: rgba(0,0,0,0.5) !important;
}

.panel-login-footer-icon {
    cursor: pointer;
}

.panel-login-footer-icon-active {
    border: 1px white solid;
}

.input-group-login {
    width: 100%;
    margin-bottom: 15px;
}

.input-group-addon-login {
    width: 40px;
    background-color: #f18a0c;
    color: black;
    border:0 !important;
}

.association-code {
    word-break: break-all;
}

input:focus{
    outline: 0 0 0 0  !important;
    box-shadow: 0 0 0 0 !important;
}

h3
{
    color: #f18a0c;
}

h4
{
    color: #d7dadc;
}

.logo-pos
{
    padding-top: 13px;
    padding-left: 16px;
}
.logo
{
    width:241px;
    height:30px;
    background:
        url('../images/ncpportal.png')
        no-repeat
        left top;
}

.grad{ background-image: linear-gradient(to right, #1362a1, #293949 ); height: 2px; margin-bottom: 5px; }
.bgDark{ background-color: #293949; color: #d7dadc }



.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

input[type=text] {
    background-color: #293949;
    color: white;
}

input[type=password] {
    background-color: #293949;
    color: white;
}

input[type=datetime-local] {
    background-color: #293949;
    color: white;
}

.nav-pills > li.active-all > a
{
    background-color: black;
    color: white;
}

.nav-pills > li.active-purple > a
{
    background-color: #b07aa1;
    color: white;
}

.nav-pills > li.active-blue > a
{
    background-color: #4e79a7;
    color: white;
}

.nav-pills > li.active-green > a
{
    background-color: #59a14e;
    color: white;
}

.nav-pills > li.active-yellow > a
{
    background-color: #edc949;
    color: white;
}

.nav-pills > li.active-orange > a
{
    background-color: #f28e2b;
    color: white;
}

.nav-pills > li.active-cyan > a
{
    background-color: #76b7b2;
    color: white;
}

.nav-pills > li.active-black > a
{
    background-color: #292929;
    color: white;
}

.active div p
{
    color: #f18a0c;
}

.menu_section
{
    position: absolute;
    width: 220px;
    top: 51px;
    bottom: 1px;
    left: 0px;
}

.nov_navbar
{
    margin-bottom: 0px;
    height: 50px;
    background-color: #292929;
    color: grey; 
}

.content_section
{
    position: absolute;
    top: 51px;
    left: 0px;
    width: 1699px;
    bottom: 1px;
    background-color: #293949;
}

.content_section_menu
{
    position: absolute;
    top: 51px;
    left: 221px;
    width: 1478px;
    bottom: 1px;
    background-color: #293949;
}

.cloudia_log_section_send
{
    position: absolute;
    top: 51px;
    right: 0px;
    width: 220px;
    background-color: #293949;
}

.cloudia_log_section
{
    position: absolute;
    top: 86px;
    right: 0px;
    width: 220px;
    bottom: 1px;
    background-color: #293949;
    color: #84919b;
    overflow-y: scroll;
    word-break: break-word;
}

.menu-header
{
    color: white;
    background:#292929;
    height: 68px;
}

.menu-header-truncate
{
    width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-sep-fat
{
    height: 10px;
    width: 100%;
    background-color: black;
}

.menu-sep-thin
{
    height: 1px;
    width: 100%;
    background-color: black;
}

.menu-item
{
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    height: 50px;
    color:#d7dadc !important;
    cursor: pointer;
}

.menu-item-active
{
    color: #d7dadc !important;
    background-color: #1362a1 !important;
}

.menu-item:hover
{
    color: white !important;
    background-color: #1362a1 !important;
}

.menu-icon
{
    /* color:black; */
    /* text-shadow: 1px 1px 1px #ccc; */
    font-size: 1.3em;
}

.menu-text
{
    font-size: 15px;
    line-height: 20px;
    display: inline-block;
    margin-left: 15px;
}

.menu-item-left
{
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    color:#d7dadc;
}
.menu-icon-left
{
    /* color:black; */
    /* text-shadow: 1px 1px 1px #ccc; */
    font-size: 1.3em;
}

.menu-text-left
{
    font-size: 15px;
    line-height: 20px;
    display: inline-block;
    margin-left: 15px;
}

.log-item
{
    box-sizing: border-box;
    width: 100%;
    background-color: red;
    font-size: 14px;
    position: relative;
    border-bottom: 1px solid lightgrey;
    height: 20px;
}

/* 19-07-17 falascu - overwrite bootstrap styling */
.text-success
{
    color: #5cb85c;
}
.text-info
{
    color: #5bc0de;
}
.text-warning
{
    color: #f0ad4e;
}
.text-error
{
    color: #d9534f;
}

.log-SUCCESS
{
    color: white;
    background-color: #5cb85c;
}

.log-INFO
{
    color: white;
    background-color: #5bc0de;
}

.log-WARNING
{
    color: white;
    background-color: #f0ad4e;
}

.log-ERROR
{
    color: white;
    background-color: #d9534f;
}

.time_div
{
    position: absolute;
    left: 0px;
    width: 60px;
    height: 19px;
}

.source_div
{
    position: absolute;
    left: 70px;
    width: 120px;
    height: 19px;
}

.severity_div
{
    position: absolute;
    left: 200px;
    width: 70px;
    height: 19px;
    text-align: center;
}

.msg_div
{
    position: absolute;
    left: 280px;
    right: 0px;
    height: 19px;
}

/*
    content div
*/
.nov_content_wrap{ margin-bottom: 15px; }
.nov_content_header{ padding-left: 15px; height: 30px; line-height: 30px; font-size: 14px; color: #1362a1; border-bottom: 1px solid #1362a1; }
.nov_content_body{ padding: 15px; border: 1px solid black; }
.nov_content_body table{ width:100%; table-layout:fixed; }
.nov_content_body table thead > tr{ border-bottom: 1px solid black; }
.nov_content_body table thead > tr > th{ font-weight: normal; color: #fff; padding: 5px 5px 5px 0px; background-color: #292929 }
.nov_content_body table tbody{ border-bottom: 1px solid gray; }
.nov_content_body table tbody tr:first-child:hover{ background-color: rgba( 179, 217, 255, 0.4 ); }
.nov_content_expand{ margin: 5px 5px 5px 50px; padding: 5px 0px; }

/* nov modal */
.nov_modal_header { background:#292929; border: solid black 1px; }
.nov_modal_header_close { font-size:20px; color: #d7dadc; }
.nov_modal_body { background:#293949; border-left: solid black 1px; border-right: solid black 1px; color: #d7dadc; }
.nov_modal_footer { background:#292929; border: solid black 1px; }

/* Angular ngCloak */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}


/* Scrollbar change */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #146486; }
::-webkit-scrollbar-thumb { background: #888; }
::-webkit-scrollbar-thumb:hover { background: #555; }


/***********************************************************************************
 Other
***********************************************************************************/

/* 18-02-28 falascu - loading spinner - http://tobiasahlin.com/spinkit/ */
/* ++++++ Loading spinner start ++++++ */
.spinner {
    width: 40px;
    height: 40px;
  
    position: relative;
    margin: 5px auto;
  }
  
  .double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #f18a0c;
    /*opacity: 0.6;*/
    position: absolute;
    top: 0;
    left: 0;
    
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
  }
  
  .double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
    background-color: #1362a1;
  }
  
  @-webkit-keyframes sk-bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
  }
  
  @keyframes sk-bounce {
    0%, 100% { 
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 50% { 
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    }
  }
  /* ++++++ Loading spinner end ++++++ */
  


.glow {
    animation: colorchange 5s; /* animation-name followed by duration in seconds*/
     /* you could also use milliseconds (ms) or something like 2.5s */
    -webkit-animation: colorchange 5s; /* Chrome and Safari */
}

@keyframes colorchange
{
  0%   {background: red;}
  25%  {background: white;}
  50%  {background: red;}
  75%  {background: white;}
  100% {background: #d9534f;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
  0%   {background: red;}
  25%  {background: white;}
  50%  {background: red;}
  75%  {background: white;}
  100% {background: #d9534f;}
}



.connecting {
    animation: connect 1.5s infinite; /* animation-name followed by duration in seconds*/
     /* you could also use milliseconds (ms) or something like 2.5s */
    -webkit-animation: connect 1.5s infinite; /* Chrome and Safari */
}

@keyframes connect
{
  0%   {color: yellow;}
  50%  {color: white; opacity: 0.3; }
  100% {color: yellow;}
}

@-webkit-keyframes connect /* Safari and Chrome - necessary duplicate */
{
  0%   {color: yellow;}
  50%  {color: white; opacity: 0.3; }
  100% {color: yellow;}
}

/******************************/


.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten {
  width: 10%;
  height: 100%;
  /*background: red;*/
  margin: 0;
  display: inline-block;
  /*-webkit-box-shadow: 0 0 30px white, inset 0 0 5px rgba(255,255,255, 0.5);*/
  border-radius: 5px;
  -webkit-animation-duration: 0.7s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
.one {
   -webkit-animation-name: first ;
}
.two {
  -webkit-animation-name: second ;
}
.three {
  -webkit-animation-name: third ;
}
.four {
  -webkit-animation-name: fourth ;
}
.five {
  -webkit-animation-name: fifth ;
}
.six {
  -webkit-animation-name: sixth ;
}
.seven {
  -webkit-animation-name: seventh ;
}
.eight {
  -webkit-animation-name: eighth ;
}
.nine {
  -webkit-animation-name: ninth ;
}
.ten {
  -webkit-animation-name: tenth ;
}
@-webkit-keyframes first {
  0%   {opacity:0.2;}
  10%  {opacity:1;}
  20%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes second {
  0%   {opacity:0;}
  10%   {opacity:0.2;}
  20%  {opacity:1;}
  30%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes third {
  0%   {opacity:0;}
  20%  {opacity:0.2;}
  30%  {opacity:1;}
  40%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes fourth {
  0%   {opacity:0;}
  30%  {opacity:0.2;}
  40%  {opacity:1;}
  50%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes fifth {
  0%   {opacity:0;}
  40%  {opacity:0.2;}
  50%  {opacity:1;}
  60%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes sixth {
  0%   {opacity:0;}
  50%  {opacity:0.2;}
  60%  {opacity:1;}
  70%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes seventh {
  0%   {opacity:0;}
  60%  {opacity:0.2;}
  70%  {opacity:1;}
  80%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes eighth {
  0%   {opacity:0;}
  70%  {opacity:0.2;}
  80%  {opacity:1;}
  90%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes ninth {
  0%   {opacity:0;}
  80%  {opacity:0.2;}
  90%  {opacity:1;}
  100% {opacity:0.2;}
}
@-webkit-keyframes tenth {
  0%   {opacity:0;}
  90%  {opacity:0.2;}
  100%  {opacity:1;}
}