html {
    -webkit-font-smoothing: antialiased;
    height: 100%;
}

body { 
    font-family: 'Open Sans', sans-serif;
    min-height: 100%;
    
}
.navbar {
    padding: 0.1rem 1rem !important;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 300 !important;
}

/* Block definitions */

.block-light{
    background-color: #F2EFE8;
    color: #0f2a3e;
}

.block-modal{
    background-color: rgba(20, 39, 83, 0.82);
    color: #F2EFE8;
    
}

.block-modal .modal-header{
    border-bottom: solid 1px #FF6F61;
}

.block-modal .close{
    color: #FFF;
    text-shadow: 0 1px 0 #000;
}

.block-modal .close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
    color: #fff;
    text-decoration: none;
    opacity: .75;
}

.block-dark{
    background-color: #0b162f;
    color: #F2EFE8;
}


.hero-block {
    background: -webkit-radial-gradient(50%,cover,transparent,rgba(0,0,0,0.6));
    background-color: #142753;
    color: #F2EFE8;
    font-weight: 300;
}

.hero-block-light {
    
    background-color: #ede9de;
    color: #0b162f;
}
/*---------------*/

td {
    padding: 0.5rem;
}

a {
    color : #F2EFE8;
    transition: color 200ms, background-color 200ms, border-color 200ms; 
}

a:hover {
    color : #B5BCCC;   
}

.message {
    margin-bottom: 15px;
    padding: 4px 12px;
}
.success.message{
    font-weight: bold;
    color: #000033;
    background-color: #ddffdd;
    border-left: 6px solid #4CAF50;
}

.fail.message{
    font-weight: bold;
    color: #000033;
    background-color: #ffdddd;
    border-left: 6px solid #f44336;
}

.fail.message:empty {
    display: none;
 }

.info.message{
    font-weight: bold;
    color: #000033;
    background-color: #e7f3fe;
    border-left: 6px solid #2196F3;
}
.online {
    font-weight: 300;
    color: #4CAF50; 
    padding : 10px;
}

.offline {
    font-weight: 300;
    color: #f44336; 
    padding : 10px;
}

.warning{
    font-weight: 300;
    color: gold; 
    padding : 10px;
}


.menu-style {
    background-color: rgba(242, 239, 232, 0.05) !important;
    border-top: solid 1px rgba(255, 255, 255, 0.15);
    border-bottom: solid 1px rgba(255, 255, 255, 0.15);
}

.menu-style .navbar-toggler {
    color: rgba(255,255,255,.5);
    border-color: rgba(255,255,255,.15);
}

.menu-style .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.3)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.menu-style a {
    text-decoration: none;
    text-transform: uppercase;
}

.device-link {
    width: 200px;
    display: inline;
}

/*
.Divider {
    box-sizing: border-box;
    height: 1px;
}

.link {
    border: solid 1px rgba(0,0,0,.15);
}

.link:hover {
    transition: color 200ms, background-color 200ms, border-color 200ms;
}
*/
.swiper-container {
    width: 100%;
    height: 100%;
}

.number {
    /*font-family: 'Nova Mono', sans-serif;*/
    font-family: 'Saira Condensed', sans-serif;
    font-weight: 300;
    font-size: 20px;
    
}

.content-text {
    font-size:16px;
    max-width: 60em;
    margin: 0px auto;
    padding : 10%;
    padding-bottom : 20px; 
    padding-top : 20px;
    font-weight:300;
    line-height: 1.538;


}

.block-light{
    background-color: #F2EFE8;
    color: #0f2a3e;
}

.modal-xl {
    max-width: 95%;
    
}

.footer {
    font-size: 0.8rem;
  }

.block-border-top {
    background-color: rgba(242, 239, 232, 0.05) !important;
    border-top: solid 1px rgba(255, 255, 255, 0.15);
}

.axis {

    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1rem;
}

.modal-link h2{
    margin : 0px;
    padding : 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    
}

a.modal-link{

    width:100%;
    
    
}

a.modal-link:hover {
    text-decoration: none;
}

.separator {
    background-color: #FF6F61;
    width: 200px ;
    height : 1px;
    margin: 12px auto;
    margin-bottom: 20px;
    /*animation-name: example;
    animation-duration: 10s;*/
    
}

.chart-responsive {
    position: relative; 
    height:70vh; 
    width: 100%; 
    max-height : 380px; 
    max-width: 1000px;
    margin: 0px auto;
}

.chart-responsive-pie {
    position: relative; 
     
    width: 100%; 
    max-height : 300px; 
    max-width: 300px;
    margin: 0px auto;
}