@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

* {
    box-sizing: border-box;
}

:root {
    /* Base font size */
    font-size: 10px;
    /* Heading height variable*/
    --bs-body-font-size: 11px;
    --heading-height: 30em;
    --color-neutral-border: /*rgba(255, 255, 255, 0.06)*/ #FFFFFF33;
}

body {
    font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--bs-body-font-size);
    /*font-family: 'Roboto', Arial, sans-serif;*/
    background: linear-gradient(135deg, #000 0%, #101010 100%);
    min-height: 100vh;
    margin: 0;
}

.headerborderbottom {
    border-bottom: 1px solid var(--color-neutral-border);
}

header.top-head {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: var(--heading-height);
}

/* Create angled background with 'before' pseudo-element. Picture: https://images.unsplash.com/photo-1495464101292-552d0b52fe41?auto=format&fit=crop&w=1350&q=80 */
header.top-head::before {
    content: '';
}

main {
    /*padding: calc(var(--heading-height) + 1.5vw) 4em 0;*/
}

details summary {
    color: white;
    font-size: medium;
}

h1 {
    font-size: calc(2.8em + 2.6vw);
    font-weight: 700;
    letter-spacing: .01em;
    padding: 1rem 0 0 0;
    text-shadow: .022em .022em .022em #111;
    color: #fff;
}

p {
    font-size: calc(2em + .25vw);
    font-weight: 400;
    line-height: 2;
    margin-bottom: 1.5em;
    color: #fcfcfc;
}

a {
    color: #b50404;
}



.widget-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}



.backlogo::before {
    content: '';
    width: 100%;
    height: calc(var(--heading-height) + 10em);
    display: block;
    position: absolute;
    left: 0;
    z-index: -1;
    transform: skewY(-3.5deg);
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('../../../brand/logotype/png/home_wgelement.png') no-repeat center, linear-gradient(#4e4376, #2b5876);
    background-size: cover;
    border-bottom: .2em solid #fff;
}

/*table*/
.table-dark-keyvalue {
    font-size: 1.2rem;
    float: left;
    width: 90%;
    border: none !important;
}

th, td {    
    vertical-align: middle;
    padding: 1rem;
    text-align: left;
}

tbody tr.rowkeyvalue:nth-child(even) {
    background-color: #101010;
}

tbody tr.rowkeyvalue:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/*[/table]*/

/*@media*/
@media screen and (min-width: 800px) {
    .table-data-general {
        max-width: 60rem;
        margin: 0 auto;
    }
}

/*[/@media]*/

/*WebKit Scrollbar*/
::-webkit-scrollbar-button {
    background-image: /*url('')*/ none;
    background-repeat: no-repeat;
    width: /*5px*/ auto;
    height: /*0*/ auto;
}

::-webkit-scrollbar-track {
    background-color: /*#ecedee #32312e*/ none;
    box-shadow: 0px 0px 3px #000 inset;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: #646464;
    box-shadow: 0px 1px 1px #666 inset;
    background-image: none;
    background-position: 0 0;
    background-repeat: no-repeat;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #b50404;
}

::-webkit-resizer {
    background-image: url('');
    background-repeat: no-repeat;
    width: 4px;
    height: 0px
}

::-webkit-scrollbar {
    width: 6px;
    background: #000;
    position: absolute;
}