/* html, body, and footer */
html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 51px;
}
#container-body {
    margin: 15px 0px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 51px;
    line-height: 50px;
    background-color: #ffffff;
    text-align: center;
    border-top: 1px solid #f5f5f5;
}

/* section */
section {
    background-color: #ffffff;
    padding: 15px 15px;
    margin: 0px 0px 10px 0px;
}
div.single-column {
    max-width: 1024px;
    margin: auto;
}

/* top menu */
#topmenu {
    margin-bottom: 25px;
}
#topmenu .nav-item {
    margin-right: 0.5em;
}

/* titlebar */
nav.navbar {
    background-color: #ffffff;
}
a.navbar-brand {
    vertical-align: baseline;
}

/* configuration bar */
#configuration-bar {
    background-color: #464f58;
    color: white;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
#configuration-bar .btn {
    margin-left:0.5em;
}

/* hyperlinks */
a, a:hover, a:focus, a:active {
    color: inherit; 
}
.hoverPointer {
    cursor: pointer;
}
.list-group-item {
    background: unset;
}

/* buttons */
.btn-primary {
    color: #fff;
    background-color: #26ace2!important;
    border-color: #26ace2!important;
}

.btn-primary-white {
    color: #000;
    background-color: white!important;
    border-color: #26ace2!important;
}

.btn-primary:hover {
    color: #fff;
    background-color: #2397c5!important;
    border-color: #2397c5!important;
}

.btn-primary.btn-underline-thick {
    border-bottom: 5px solid white!important;
}

.btn-outline-primary {
    color: #26ace2!important;
    border-color: #26ace2!important;
}

.btn-outline-primary:hover {
    color: #2397c5;
    border-color: #2397c5!important;
}

.btn-outline-primary.btn-underline-thick {
    border-bottom: 5px solid!important;
}

/* badges */
.badge-outline-secondary {
    background-color: white;
    color: lightslategrey;
    border: 1px solid #868e96;
}


.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

/* tooltips */
.tooltip-inner {
    max-width: 300px!important;
}
.oi-info-tooltip.oi:empty:before {
    display: inline-block;
    background: #afafaf;
    color: white;
    font-size: xx-small;
    width: 0.8em;
    padding: 0.35em;
}

/* spaced borders */
.left.dotted {
    border-left: 1px #333 dotted;
    border-top: none;
}
.left.dotted-spaced {
    background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
    background-position: left;
    background-size: 1px 10px;
    background-repeat: repeat-y;
}

/* loading animation */
@keyframes fadein-fadeout {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.loading {
    animation: fadein-fadeout 2s linear infinite;
}

/* recharts */
.recharts-legend-wrapper {
    height: unset!important;
}
.recharts-label {
    fill: darkgrey;
}
.recharts-label-yaxis {
    text-anchor: end;
    transform: translate(0px, 32px) rotate(-90deg);
}
.recharts-legend-item:hover {
    cursor: pointer;
}
.recharts-yAxis .recharts-cartesian-axis-tick-value:hover {
    cursor: pointer;
}
.recharts-line-disabled {
    display: none;
}

/* spinner */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid #26ace2; /* or 'currentColor' */
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
}
#charts-container .spinner-border {
    margin-top: 10vh;
}

@-webkit-keyframes spinner-border {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
  
@keyframes spinner-border {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}