html {
    width: 100%;
    display: inline-block;
    margin: 0px auto;
}

body {
    /* FIX: navbar-fixed-top block top content */
    padding-top: 65px; 
    font-size: 1.7rem;
}

.exec_freq_list input[type='checkbox'] {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
.exec_freq_list input[type='checkbox']:checked {
    background: #000;
}

.content {
   /* width: 80%; */
}

/*
.container-fluid {
    padding-right: 15px;
}
*/

.inline-headers h1, .inline-headers h2, .inline-headers h3, .inline-headers h4 {
    display: inline-block;
    vertical-align: baseline;
}

.fit-img{
    max-height:100%;
    max-width:100%;
    height:auto;
    width:auto;
}

span.glyphicon {
    font-size: 20px;
}


@media (min-width: 992px) {
    html {
        width:90%;
        display: inline-block;
        margin-left:auto;
        margin-right:auto;
    }
}


/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.loading-modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('/static/img/loading.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .loading-modal {
    display: block;
}


.chk-box-lg input[type='checkbox'] {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
.chk-box-lg input[type='checkbox']:checked {
    background: #000;
}
.table-wrapper-scroll-y {
  display: block;
  max-height: 600px;
  overflow-y: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.canvas_status_bar {
    position: absolute; 
    left:20px; 
    top:20px;
    background: orange;
}


/* DataTable */
thead, th {text-align: center;}
.dt-body-center {text-align: center;}


span.debug {
    color: gray;
}
span.info {
    color: blue;
}
span.warn {
    color: orange;
}
span.error {
    color: red;
}
span.fatal {
    color: darkred;
}