@font-face {
    font-family: 'RobotoCL';
    src: url('../ImagesRes/Fonts/RobotoCondensed-Light.woff');
}
@font-face {
    font-family: 'RobotoCR';
    src: url('../ImagesRes/Fonts/RobotoCondensed-Regular.woff');
}
@font-face {
    font-family: 'RobotoCB';
    src: url('../ImagesRes/Fonts/RobotoCondensed-Bold.woff');
}
@font-face {
    font-family: 'RobotoCI';
    src: url('../ImagesRes/Fonts/RobotoCondensed-RegularItalic.woff');
}
@font-face {
    font-family: 'Archivo';
    src: url('../ImagesRes/Fonts/Archivo-Medium.ttf');
}
@font-face {
    font-family: 'ArchivoRegular';
    src: url('../ImagesRes/Fonts/Archivo-Regular.ttf');
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    padding-right: 20px;
    background-color: #DFDFDF;
    font-family: RobotoCR;
    /* font-family: 'RobotoCL' */
    color: #3C3B3B;
    font-size: 14px;
    overflow-x: hidden;
    overflow-y: scroll;
    min-width: 370px;
}
.wrapper {
    max-width: 1440px;
    margin: 0 auto;
    background-color: #DFDFDF;
    /* min-height: 100vh; */
    position: relative;
}
.background {
    width: 100%;
    max-width: 1440px;
    background: radial-gradient(at top, #ECECEC 0%, #DFDFDF 70%);
    padding-bottom: 60%;
}
.headercontent {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}
.topheader {
    position: absolute;
    top: 60px;
    width: 100%;
    height: 51px;
    background: linear-gradient(#FFFFFF, #DFDFDF);
    border-radius: 15px 15px 0px 0px;
    box-shadow: 4px 4px 10px #AAAAAA;
    border-top: 1px solid #FFFFFF;
}
.buttomheader {
    position: absolute;
    top: 118px;
    width: 100%;
    height: 35px;
    background: linear-gradient(#DFDFDF, #FFFFFF);
    border-radius: 0px 0px 15px 15px;
    box-shadow: 4px 4px 10px #AAAAAA;
    border-top: 1px solid #F1F1F1;
}
.topheadersearchfield {
    position: absolute;
    top: 10px;
} 
.topheadersearch {
    position: relative;
    top: 0px;
    width: 80%;
    height: 30px;
    right: 0px;
    background: #FFFFFF;
    border-radius: 15px 0px 0px 15px;
    box-shadow: inset 4px 4px 10px #AAAAAA;
}
.topheadersearchbutton {
    font-family: RobotoCR;
    font-size: 16px;
    position: absolute;
    top: 0px;
    width: 20%;
    height: 30px;
    right: 0px;
    background: linear-gradient(#464646, #424242);
    color: #FFFFFF;
    border-radius: 0px 15px 15px 0px;
    text-align: center;
    line-height: 31px;
    cursor: pointer;
}
.topheadersearchglass {

}
.topheadersearchstring {
    position: absolute;
    top: 4px;
    left: 3%;
    width: 94%;
    border: none;
    color: #918f92;
    font-family: var(--TopHeaderSearchStringFont);
    font-size: 16px;
    background-color: transparent;
}
input.topheadersearchstring::-ms-input-placeholder {
    font-style: italic;
}
input.topheadersearchstring::-moz-placeholder {
    opacity: 1;
    font-style: italic;
}
input.topheadersearchstring::-webkit-input-placeholder {
    font-style: italic;
}
/* CSS FOR NAVBAR */
.navbar {
    overflow: hidden;
    line-height: 50px;
}
.navbar a {
    float: left;
    font-family: 'RobotoCR';
    font-size: 16px;
    color: #3C3B3B;
    text-align: center;
    padding: 0px 16px;
    text-decoration: none;
    width: 120px;
    border-left: 1px solid #C7C7C7;
    left: 20px;
    position: relative;
    line-height: 51px;
}
.navbar a:last-child {
    border-right: 1px solid #C7C7C7;
}
.navbar a:hover {
    color: #858585;
    text-decoration: underline;
    /* font-family: 'RobotoCB'; */
}
/* CSS FOR BURGERMENU*/
.dropdownmenu {
    height: 50px;
    width: 100%;
    padding-left: 13px;
}
.burgermenu {
    display: inline-block;
    cursor: pointer;
    margin: 7px;
}
.bar1, .bar2, .bar3 {
    width: 35px;
    height: 4px;
    background-color: #000000;
    margin: 6px 0;
    transition: 0.3s;
}
.change .bar1 {
    transform: rotate(-45deg) translate(-7px, 7px);
}
.change .bar2 {
    opacity: 0;
}
.change .bar3 {
    transform: rotate(45deg) translate(-7px, -7px);
}
/* CSS FOR DROPDOWN MENU */
.dropdown-content {
    position: absolute;
    background-color: #ECECEC;
    min-width: 160px;
    box-shadow: 4px 4px 10px #AAAAAA;
    z-index: 1;
    opacity: 0.95;
}
.dropdown-content a {
    float: none;
    color: #3C3B3B;
    padding: 0px 10px;
    text-decoration: none;
    display: block;
    text-align: left;
    line-height: 30px;
    font-family: RobotoCR;
    font-size: 14px;
}
.dropdown-content a:hover {
    text-decoration: underline;
    /*font-family: RobotoCB;*/
    color: #858585;
}
/* LOGO & SPROG */
#logo {
    background-image: url('../ImagesRes/System/Logo_Rework.png');
    background-repeat: no-repeat;
    background-size: 183px 30px;
    height: 30px;
    top: 15px;
    position: absolute;
    left: 17px;
    width: 183px;
}
#language {
    position: absolute;
    top: 23px;
    right: 95px;
    font-size: 12px;
    font-family: RobotoCR;
}
#sprsvensk {
    position: absolute;
    top: 13px;
    right: 52px;
    cursor: pointer;
}
#sprengelsk {
    position: absolute;
    top: 13px;
    right: 16px;
    cursor: pointer;
}
/* BREADCRUMS*/
.breadcrums {
    position: absolute;
    left: 21px;
    top: 8px;
    font-size: 12px;
}
.breadcrumroot {
    color: #3C3B3B;
    text-decoration: none;
}
.breadcrumcurrent {
    color: #3C3B3B;
    font-family: RobotoCB;
    text-decoration: none;
}
/* LOG IN */
#loginview 
{
    position: absolute;
    top: 10px;
    right: 79px;
    width: 300px;
    text-align: right;
    font-size: 12px;
    font-family: RobotoCR;
    color: #3C3B3B;
}
.registerhyperlink
{
    text-decoration: none;
}
#loginsplit {
    position: absolute;
    right: 65px;
    top: 7px;
}
#loginstatuspos {
    position: absolute;
    top: 7px;
    right: 20px;
}
.loginstatus {
    text-decoration: none;
    color: #3C3B3B;
    font-size: 12px;
    font-family: RobotoCR;
}
.pagebutton {
    height: 67px;
    border-radius: 15px 15px 0px 0px;
    width: 100%;
    background: linear-gradient(#F0F0F0, #DFDFDF);
    position: absolute;
    bottom: 67px;
}



/* MEDIA CSS STYLES*/
@media screen and (min-width: 841px) {
    .dropdownmenu {
        display: none;
    }
    .topheadersearchfield {
        right: 20px;
        width: 58%;
    }
}
@media screen and (max-width: 840px) {
    .navbar > a {
        display: none;
    }
    .topheadersearchfield {
        right: 20px;
        width: 78%;
    }
}
@media screen and (max-width: 360px) {
    #logo {
        background-size: 90% 90%;
    }
    #language {
    right: 85px;
}
    #sprsvensk {
    right: 42px;
}
    #sprengelsk {
    right: 7px;
}
}