html {
    font-size: 14px;
}

:root {
    --text-color-green: #28a745;
    --text-color-red: #dc143c;
    --link-color: #0366d6;
}

/* Provide sufficient contrast against white background */
a {
    color: var(--link-color);
}

.bottom-shadow {
    box-shadow: 0 .2rem .1rem -.1rem rgba(0, 0, 0, .05);
}

/* Sticky footer styles
-------------------------------------------------- */
/*html {
    position: relative;
    min-height: 100%;
}
*/
body {
    /* Margin bottom by footer height */
    /*margin-bottom: 40px;*/
}

.footer {
    width: 100%;
    white-space: nowrap;
    height: 40px; /* Vertically center the text there */
}

/*
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}
*/
.axis text {
    font: 10px sans-serif;
}

.axis line,
.axis path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.axis--x path {
    display: none;
}

.axis--y path {
    display: none;
}

.table-fixed-head {
    overflow-y: auto;
    height: 100px;
}

    .table-fixed-head th {
        position: sticky;
        top: 0;
    }

.dl-horizontal dt {
    text-align: left;
}

blink, .blink {
    -webkit-animation: blink 1s step-end infinite;
    -moz-animation: blink 1s step-end infinite;
    -o-animation: blink 1s step-end infinite;
    animation: blink 1s step-end infinite;
}

@-webkit-keyframes blink {
    67% {
        opacity: 0
    }
}

@-moz-keyframes blink {
    67% {
        opacity: 0
    }
}

@-o-keyframes blink {
    67% {
        opacity: 0
    }
}

@keyframes blink {
    67% {
        opacity: 0
    }
}

/* font-sizes */
.font-large {
    font-size: large;
}

.font-x-large {
    font-size: x-large;
}

/* https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element */
.state.none {
    color: gray;
}

.state.InProcess {
    background: no-repeat center url("/icons/reload.svg");
    filter: invert(26%) sepia(100%) saturate(2431%) hue-rotate(108deg) brightness(101%) contrast(101%);
}

.state.Completed {
    background: no-repeat center url("/icons/check.svg");
    filter: invert(26%) sepia(100%) saturate(2431%) hue-rotate(108deg) brightness(101%) contrast(101%);
}

.state.Failed {
    background: no-repeat center url("/icons/circle-warning.svg");
    filter: invert(47%) sepia(41%) saturate(5449%) hue-rotate(332deg) brightness(101%) contrast(117%);
}

.state.Canceled {
    background: no-repeat center url("/icons/close.svg");
    filter: invert(88%) sepia(44%) saturate(2802%) hue-rotate(335deg) brightness(99%) contrast(99%);
}

.state.UnrecoverableError {
    background: no-repeat center url("/icons/broken.svg");
    filter: invert(38%) sepia(28%) saturate(2596%) hue-rotate(338deg) brightness(86%) contrast(91%);
}

/* datatables */
.my-dt-search div {
    text-align: left !important;
}

    .my-dt-search div label {
        width: 100%;
        display: flex;
    }


        .my-dt-search div label input {
            width: unset !important;
            flex-grow: 1;
        }

/* tabs */
.error-tab {
    color: red !important;
}

/* table td width for typical cases */
th.name {
    width: 350px;
}

th.name-medium {
    width: 170px;
}

th.name-small {
    width: 40px;
}

th.icon {
    width: 24px;
}

/* svg colors */
img.svg-red {
    filter: invert(21%) sepia(75%) saturate(5308%) hue-rotate(338deg) brightness(86%) contrast(101%);
}

img.svg-green {
    filter: invert(52%) sepia(48%) saturate(3228%) hue-rotate(97deg) brightness(94%) contrast(69%);
}