:root {
    /** CSS DARK THEME PRIMARY COLORS */
    --color-primary-100: #382bf0;
    --color-primary-200: #5e43f3;
    --color-primary-300: #7a5af5;
    --color-primary-400: #9171f8;
    --color-primary-500: #a688fa;
    --color-primary-600: #ba9ffb;
    /** CSS DARK THEME SURFACE COLORS */
    --color-surface-100: #121212;
    --color-surface-200: #282828;
    --color-surface-300: #3f3f3f;
    --color-surface-400: #575757;
    --color-surface-500: #717171;
    --color-surface-600: #8b8b8b;
    /** CSS DARK THEME MIXED SURFACE COLORS */
    --color-surface-mixed-100: #2c1e62;
    --color-surface-mixed-200: #443473;
    --color-surface-mixed-300: #5a4a83;
    --color-surface-mixed-400: #716295;
    --color-surface-mixed-500: #887aa6;
    --color-surface-mixed-600: #9f93b7;
}

body {
    background-color: var(--color-surface-mixed-100);
    color: rgb(159, 147, 183);

}

.footer {
    background-color: var(--color-surface-mixed-200);
    color: rgb(159, 147, 183);
}

.table {
    background-color: var(--color-surface-mixed-200);
    color: white !important;
}

tr {
    border-radius: 15px;
}

th {
    color: white !important;
}

.datatable-sorter::before {
    border-top-color: var(--color-primary-600);
}

.datatable-sorter::after {
    border-bottom-color: var(--color-primary-600);
}

.datatable-input {
    background-color: var(--color-surface-200);
    border-radius: 15px;
    border-color: var(--color-surface-mixed-100);
    color: white;
}

.datatable-selector {
    background-color: var(--color-surface-200);
    border-radius: 15px;
    border-color: var(--color-surface-mixed-100);
    color: rgb(139, 139, 139);
}

.datatable-active > button {
    background-color: var(--color-primary-600);
}

pre {
    /*background-color: var(--color-surface-100);*/
}

a {
    color: white;
    border-bottom: 1px solid white !important;
    border-bottom-color: var(--color-surface-300);
}

a:hover {
    color: var(--color-primary-600);
}

a[target=_blank]:after {
    content: "\f08e";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-left: 5px;
    border-bottom: 0;
}

@font-face {
    font-family: e-ukraine;
    font-style: normal;
    src: url(./fonts/e-Ukraine-Light.c2f9f1bd.woff) format("woff");
    font-weight: 300
}

@font-face {
    font-family: e-ukraine;
    font-style: normal;
    src: url(./fonts/e-Ukraine-Regular.d6f9c4dc.woff) format("woff");
    font-weight: 400
}

@font-face {
    font-family: e-ukraine;
    font-style: normal;
    src: url(./fonts/e-Ukraine-Medium.3c0036d2.woff) format("woff");
    font-weight: 500
}

@font-face {
    font-family: e-ukraine-heading;
    font-style: normal;
    src: url(./fonts/e-Ukraine-Regular.d6f9c4dc.woff) format("woff");
    font-weight: 400
}

@font-face {
    font-family: 'FontAwesome';
    src: url('./fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2');
}

body {
    font-family: e-Ukraine, sans-serif;
}

.test-outcome-passed {
    background-color: darkslategrey;
    background-color: #184d00;
    color: white;
}

.test-outcome-failed {
    background-color: darkred;
    color: white;
}


table.results {
    width: 100%;
    border-radius: 10px;
    padding: 10px;
}

pre {
    white-space: break-spaces;
}