/* abel-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'NEN-3225';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/NEN-3225Sans-Upright-vet.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

  
* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: clamp(14px,1.37vw,16px); line-height: 1.7; height: 100%; scroll-behavior: smooth;}
body {
    font-size: 1rem; 
    color: #222c4e;
    font-family: arial, helvetica, sans-serif;
    height: 100%;
    background: linear-gradient(to bottom, #aaa, #bbb) fixed;
    line-height: 1.4;
}
.page {
    margin: 0 auto; 
    max-width: 73rem;
    background: url(/img/bg.webp) center top / 73rem auto no-repeat fixed, url(/img/asfalt.webp) center top / 73rem auto repeat-y fixed;
    min-height: 100%;
    overflow: auto;
    position: relative;
}
body::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(/img/noise.webp);
    z-index: 1;
    filter: invert(1);
    opacity: 0.5;

}
.branding {
    position: fixed;
    margin-right: 21.6rem;
    right: 50%;
    top: 0.85rem;
    font-family: 'NEN-3225';
    line-height: 1;
    border-radius: 0.6rem; 
    background: #222c4e;
    box-shadow: inset 0.15rem 0.15rem 0.15rem rgba(255,255,255,.4),inset -0.15rem -0.15rem 0.15rem rgba(0,0,0,.5);
    padding: 1.05rem 0.7rem 0.7rem;
    z-index: 2;
}
.branding a {
    display: block;
    color: white;
    text-decoration: none;
    transform: scaleY(1.4)
}
.branding a span {display: block; font-size: 1rem;}
.branding a span:nth-child(2) {font-size: 1.5rem; letter-spacing: -0.05rem;}
.logout, button, input[type="submit"] {
    display: inline-block;
    background: #222c4e;
    color: white;
    text-decoration: none;
    padding: 0.3rem 0.8rem 0.4rem;
    border-radius: 0.35rem; 
    font-size: 0.92rem;
    border: 0;
    height: 2.05rem;
    font-family: arial, helvetica, sans-serif;
    cursor: pointer;
}
.login_button {
    position: fixed;
    margin-left: 20.2rem;
    left: 50%;
    top: 38.65rem;
    height: 1.4rem;
    padding: 0.05rem 0 0.1rem;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    transform: skewY(10deg) rotate(4deg);
    display: block;
    width: 6.6rem;
    z-index: 2;
}
.sidebar1 {
    position: fixed;
    margin-right: 21.6rem;
    right: 50%;
    background: white;
    width: 11.85rem;
    height: 20.2rem;
    top: 11.7rem;
    border: 0.35rem solid #222c4e;
    border-radius: 1rem;
    font-size: 0.92rem;
    text-align: center;
    padding: 1.5rem 1.25rem;
    line-height: 1.3;
    z-index: 2;
} 
.sidebar1::after {
    content: "";
    position: fixed;
    margin-right: 25.2rem;
    right: 50%;
    background: #222c4e;
    width: 4.8rem;
    height: 4.4rem;
    top: 31.8rem;
}
.sidebar1 h2 {margin: 0 0 0.75rem;}
.sidebar1 ul {text-align: left;}
.sidebar2 {
    position: fixed;
    margin-left: 21.3rem;
    left: 50%;
    background: white;
    width: 14rem;
    top: 6.3rem;
    border-radius: 1rem;
    padding: 1.1rem 1.25rem 1.35rem;
    font-size: 0.92rem;
    z-index: 2;
}
.sidebar2 ul {margin-left: 1em;}
.sidebar2 ul li.active > a {color: #b35d09;}
.sidebar2 ul a {font-weight: bold; text-decoration: none;}

.header {
    position: absolute;
    width: 39rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.35rem; 
    background: #fa9b04; 
    margin-top: 0.85rem; 
    margin-bottom: 3.75rem;
    box-shadow: inset 0.15rem 0.15rem 0.15rem rgba(255,255,255,.5),inset -0.15rem -0.15rem 0.15rem rgba(0,0,0,.4);
    z-index: 3;
    margin-left: 0.3rem;
}
.header nav ul {
    display: flex; 
    flex-wrap: wrap;
    padding: 0.17rem 0.6rem 0.22rem;
}
.header nav ul li {list-style: none;}
.header nav ul li a {
    padding: 0 0.45rem 0; 
    display: block; 
    color: #13235b; 
    text-decoration: none; 
    font-weight: bold; 
    text-transform: lowercase;
}
.header nav ul li.active > a,
.header nav ul li a:hover {color: white;}
 .header.second {background: #222c4e; top: 2rem; display: none;}
.loggedin .header.second {display: block;}
.header.second nav ul li a {color: white;}
.header.second nav ul li.active > a,
.header.second nav ul li a:hover {color: #fa9b04;}
.content {
    width: 100%;
    background: rgba(255,255,255,1); 
    border-radius: 1rem;
    padding: 1.75rem 1.75rem;
    font-size: 0.92rem;
    margin: 0 auto; 
    max-width: 39rem; 
    z-index: 2; 
    position: relative; 
    margin-top: 6.3rem;
    margin-bottom: 5rem;
    transform: translateX(0.3rem);
}
.content img {width: 100%; display: block; margin-bottom: 0.25rem;}
.has_content ul,
.has_content ol,
.has_content p {margin-bottom: 1.4em;}
.has_content ul {margin-left: 1em;}
.has_content ol {margin-left: 1.65em;}
.sidebar1 a,
.sidebar2 a,
.content a {color: #222c4e;}
.sidebar1 a:hover,
.sidebar2 a:hover,
.content a:hover {color: #b35d09;}
h1, h2, h3 {margin-top: 1.4em; line-height: 1.2;}
h1 {font-size: 1.5rem; margin-bottom: 1rem;}
h2 {font-size: 1.1rem; margin-bottom: 0.5rem;}
h3 {font-size: 0.92rem; margin-bottom: 0.15rem;}
.content > .breadcrumbs + *,
.content > *:first-child {margin-top: 0;}

ul.breadcrumbs {margin: 0 0 0.1rem!important; display: flex; opacity: 0.5; font-size: 0.75rem; }
ul.breadcrumbs li {list-style: none;}
ul.breadcrumbs li::before {content: "›"; display: inline-block; margin: 0 0.45rem;}
ul.breadcrumbs li:first-child:before {content: none;}
ul.breadcrumbs li a {text-decoration: none;}

ul.sectionlist li span {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;}

hr {background: #222c4e; height: 1px; margin: 0.75rem 0 0.5rem; border: 0; opacity: 0.25;}

.letters {
    background: #222c4e; 
    border-radius: 0.3rem;
    display: flex; 
    flex-wrap: wrap;
    padding: 0 0.25rem;
}
.letters span {
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-between; 
    width: 50%;
}
.letters a {
    cursor: pointer; 
    color: white; 
    display: block; 
    font-weight: bold; 
    padding: 0.2rem 0.3rem 0.25rem;
    flex: 1 1 0px;
    text-align: center;
}
.letters a.active,
.letters a:hover {color: #fa9b04;}

@media (max-width: 40rem) {
    .letters {padding: 0.15rem 0;}
    .letters span {padding: 0 0.25rem; width: 100%;}
    .letters a {
        padding: 0.2rem 0.4rem 0.25rem;
    }
}

.has_content ul.downloadlist, .has_content ul.downloadlist ul {margin: 0;}
.has_content ul.downloadlist li {list-style: none; border-top: 1px dotted #fa9b04;}
.has_content ul.downloadlist > li {display: none;}
.has_content ul.downloadlist > li > a {font-weight: bold;}
.has_content ul.downloadlist li.active {display: block;}
.has_content ul.downloadlist li a {text-decoration: none; display: block; padding: 0.25rem 0; cursor: pointer;}
.has_content ul.downloadlist ul {display: none;}
.has_content ul.downloadlist ul.active {display: block;}
.has_content ul.downloadlist ul li {padding-left: 1rem;}


form > div {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.75rem;
    max-width: 20rem;
}
form > div label {margin-bottom: 0.25rem;}
form > div input, form > div textarea {
    font-size: 1rem;
    font-family: arial, helvetica, sans-serif;
    color: #222c4e;;
    border: 1px solid rgba(0, 18, 77, 0.25);;
    border-radius: 0;
    background: white;
    padding: 0.5rem;
    font-size: 0.92rem;
}
form > div input[type="submit"] {margin-top: 0.5rem;}

@media (max-width: 62rem) {
    .page {padding: 1rem;}
    .container, .header, .content {
        width: 100%;
        max-width: 39rem; 
        margin: 0 auto;
        transform: none;
        left: 0;
        position: relative;
    }
    .branding {
        position: relative; 
        right: auto;
        display: inline-block;
        top: auto;      
        margin: 0 0 1rem;
    }
    .sidebar2 {
        position: relative; 
        left: auto; 
        margin: 1rem 0;
        top: auto;
        padding: 1.25rem 1.75rem 1.5rem;
    }
    .content {
        margin-top: 1.75rem;
        margin-bottom: 1.75rem;
        padding: 1.5rem 1.75rem;
    }
    .header.second {top: 0;}
    .header nav ul {padding: 0.3rem 0.6rem 0.35rem;}
    .header nav ul li a {padding-top: 0.1rem; padding-bottom: 0.1rem;}
}