/*  
--------------------------------------------------------------
    Fonts
--------------------------------------------------------------
*/
@font-face{
    font-family: 'Segoe UI';
    src:
            url( "/static/home/fonts/segoeui.ttf" ) format('truetype'),
            url( "/static/home/fonts/segoeui.eot?#iefix" ) format('embedded-opentype'),
            url( "/static/home/fonts/SegoeUI.woff2" ) format('woff2'),
            url( "/static/home/fonts/SegoeUI.woff" ) format('woff'),
            url( "/static/home/fonts/SegoeUI.svg#SegoeUI" ) format('svg');
}
/*
@font-face {
    font-family:    "FontAweSome Regular";
    src:    
            url( ../fonts/fa/fa-regular-400.ttf) format( "truetype" ),
            url( ../fonts/fa/fa-regular-400.eot?#iefix) format( "embedded-opentype" ),
            url( ../fonts/fa/fa-regular-400.woff2) format( "woff2" ),
            url( ../fonts/fa/fa-regular-400.woff) format( "woff" ),
            url( ../fonts/fa/fa-regular-400.svg) format( "svg" );
}

@font-face {
    font-family:    "FontAweSome Solid";
    src:
            url( "../fonts/fa/fa-solid-900.ttf") format( "truetype" ),
            url( "../fonts/fa/fa-solid-900.eot?#iefix") format( "embedded-opentype" ),
            url( "../fonts/fa/fa-solid-900.woff2") format( "woff2" ),
            url( "../fonts/fa/fa-solid-900.woff") format( "woff" ),
            url( "../fonts/fa/fa-solid-900.svg") format( "svg" );
}

@font-face {
    font-family:    "FontAweSome Brands";
    src: url( "/assets/fonts/fa/fa-brands-400.woff" );
    src:    url( "../fonts/fa/fa-brands-400.eot?#iefix") format( "embedded-opentype" ),
            url( "../fonts/fa/fa-brands-400.woff2") format( "woff2" ),
            url( "../fonts/fa/fa-brands-400.woff") format( "woff" ),
            url( "../fonts/fa/fa-brands-400.ttf") format( "truetype" ),
            url( "../fonts/fa/fa-brands-400.svg") format( "svg" );
}
*/
@font-face {
    font-family:    "FontAwesome Solid";
    src:            /* url( "/static/home/fonts/fa-solid-900.eot"),  */
                    url( "/static/home/fonts/fa-solid-900.woff2") format("woff2"),
                    url( "/static/home/fonts/fa-solid-900.ttf") format("truetype"),
                    url( "/static/home/fonts/fa-solid-900.svg") format("svg");
}

@font-face {
    font-family:    "FontAwesome Regular";
    src:            /* url( "/static/home/fonts/fa-regular-400.eot"), */
                    url( "/static/home/fonts/fa-regular-400.woff2") format("woff2"),
                    url( "/static/home/fonts/fa-regular-400.ttf") format("truetype"),
                    url( "/static/home/fonts/fa-regular-400.svg") format("svg");
}

@font-face {
    font-family:    "FontAwesome Brands";
    src:            /* url( "/static/home/fonts/fa-brands-400.eot"), */
                    url( "/static/home/fonts/fa-brands-400.woff2") format("woff2"),
                    url( "/static/home/fonts/fa-brands-400.ttf") format("truetype"),
                    url( "/static/home/fonts/fa-brands-400.svg") format("svg");
}


.fas {
    font-family:    "FontAweSome Solid", "Segoe UI";
    font-style:     normal;
}

@media screen and (min-width: 768px) {
    :root {
        --max-width:                720px;
    }
}

@media screen and (min-width: 992px) {
    :root {
        --max-width:                960px;
    }
}

@media screen and (min-width: 1200px) {
    :root {
        --max-width:                1140px;
    }
}

@media screen and (min-width: 1400px) {
    :root {
        --max-width:                1320px;
    }
}


:root {
    /* dimensions */
    /* --max-width:                1320px;  */

    /* basics */
    --common-background:        #eeeeee;
    --common-background-elem:   #eeeeee59;
    --common-font:              "Segoe UI", DSSegoe, Helvetica, Verdana, Arial, Times;
    /* --common-font-color:        #c3c3c3;     */
    --common-font-color:        #434343;
    --inverse-font-color:       #535353;

    /* fonts */
    --font-normal:              0.9rem;    /* 12pt     */
    --font-small:               0.75rem;     /* 10pt     */
    --font-tiny:                0.66rem;    /* 9.5pt    */
    --font-large:               1.5rem;     /* 14pt     */
    --font-huge:                2rem;       /* 20pt     */
    --weight-slim:              300;
    --weight-normal:            400;
    --weight-bold:              550;
    --weight-strong:            650;

    /* spacing */
    --common-space:             12pt;
    --header-height:            calc( 4 * var( --font-normal ) );
    --content-menu-left:        calc( 4 * var( --font-normal ) );
    --content-menu-open:        calc( 17 * var( --font-normal ) );
    --content-width:            calc( 100% - var( --content-menu-left ) );
    --content-width-open:       calc( 100% - var( --content-menu-open ) );
    --page-min-width:           1280px;
    --page-max-width:           1280px;

    /* header */
    --header-font-color:        white;
    --header-background:        #405060;
    --header-navi-background:   #6080a0;
}

*, ::after, ::before {
    box-sizing: border-box;
}

i.fas {
    font-family:                "FontAwesome Solid";
}

i.far {
    font-family:                "FontAwesome Regular";
}


/*  
--------------------------------------------------------------
    Default settings
--------------------------------------------------------------
*/
body {
    background-color:   white;
    font-family:    var( --common-font );
    font-size:      var( --font-normal );
    font-weight:    var( --weight-normal );
    margin:         0px;
    padding:        0px;
}

.text-center {
    text-align: center !important;
}

h1 {
    font-size:          var( --font-huge );
    text-transform:     uppercase;
    color:              #43a2d1;
}

/*  
--------------------------------------------------------------
    Main sections
--------------------------------------------------------------
*/
div.header {
    display:    block;
    width:      100%;
    position:   fixed;
    top:        0px;
    height:     110px;
    background-color: #43a2d1;
    background-image: url( "/static/frontend/img/header_BG.jpg" );
    background-repeat: no-repeat;
    background-position: center;
    background-size:    cover;
    text-align: center;
    z-index:    100;
}

div.menubar {
    display:    block;
    position:   relative;
    top:        110px;
    height:     30px;
    width:      100%;
    background-color:   #43a2d1;
}

div.breadcrumbs {
    display:    block;
    position:   relative;
    top:        110px;
    width:      100%;
    background-color:   white;
    height:     30px;
    color:      #444;
    font-size:  var( --font-small );
}

div.system-messages {
    /* border:     1px solid red; */
    width:      100%;
    position:   relative;
    top:        120px;
    /* display:    none;    */
}

div.system-messages .container {
    background-color:   #eee;
    padding-left:       20px;
    padding-right:      20px;
    display:            none;
}

div.content {
    display:    block;
    position:   relative;
    top:        120px;
    min-height: 960px;
}

div.footer {
    display:    none;
    position:   fixed;
    bottom:     0px;
    height:     60px;
    width:      100%;
    background-color:   #444;
    z-index:    -10;
}

div.container {
    position:           relative;
    display:            flex;
    height:             100%;
    max-width:          var( --max-width );
    align-items:        center;
    margin:             0px auto;
}

div.main-content {
    display:            block;
    max-width:          var( --max-width );
    margin:             0px auto;
    padding-bottom:     calc( 8 * var( --common-space ));
    position:           relative;
    top:                calc( 8 * var( --common-space ));
}

div.header-line {
    width:      100%;
    display:    block;
}

div.content .container {
    display:    block;
}

/*  
--------------------------------------------------------------
    Header settings
--------------------------------------------------------------
*/
div.header div {
    max-height:     60px;
    margin-top:     25px;
    margin-bottom:  25px;
}

div.header .container {
    justify-content:    space-between;
}

div.product-logo {
    width:          150px;
}

div.product-logo .st0 {
    fill:           #43a2d1;
}

div.company-logo {
    width:          100px;
}

img.company-logo {
    max-height:      50px;
}

/*  
--------------------------------------------------------------
    Menu settings
--------------------------------------------------------------
*/
div.menubar .container {
    justify-content:    space-between;
}

div.background-menubar {
    position:           absolute;
    height:             100%;
    min-width:          100px;
    width:              calc( 100px + ( 100vw - var( --max-width ) ) / 2 );
    right:              0px;
    top:                0px;
    background-color:   #006090;
}

ul.menubar {
    display:            flex;
    flex-direction:     row;
    list-style:         none;
    padding:            0px;
    margin:             auto 0px auto 0px;
}

ul.menubar.logout {
    /* margin-left:        auto; */
}

ul.menubar li, ul.menubar li > a {
    /* margin-right:       25px; */
    color:              white;
    text-transform:     uppercase;
    text-decoration:    none;
    font-size:          var( --font-normal );
    font-weight:        500;
    letter-spacing:     0.5px;
    text-align:         center;
}

ul.menubar li {
    padding-left:       calc( 0.75 * var( --common-space ) );
    padding-right:      calc( 0.75 * var( --common-space ) );
    /* border-left:        1px solid white; */
    /* text-align:         left;            */
    /* width:              100px;           */
}

ul.menubar li:first-child {
    padding-left:       unset;
}

ul.menubar li:last-child {
    margin-right:       0px;
}

ul.menubar.logout li {
    width:              100px;
    text-align:         center;
    margin-right:       0px;
}

/*  
--------------------------------------------------------------
    Breadcrumbs settings
--------------------------------------------------------------
*/
div.breadcrumbs a {
    text-decoration:    none;
    font-size:          var( --font-small );
}

/*  
--------------------------------------------------------------
    Footer settings
--------------------------------------------------------------
*/
div.footer-logo img {
    height:             40px;
    max-height:         40px;
}

div.footer-disclaimer {
    margin-left:        25px;
    line-height:        15px;
    font-size:          10px;
    color:              white;
}

/*  
--------------------------------------------------------------
    Button styles
--------------------------------------------------------------
*/
.btn, input[type="button"], input[type="reset"], input[type="submit"] {
    background-color: #43a2d1;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    margin-bottom: 20px;
    width: auto;
    outline: 0;
    position: relative;
    text-align: center;
    text-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-transition: background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out;
    transition: background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out;
}

.btn.btn-rounded {
    font-weight: 600;
    font-size: 17px;
    cursor: pointer;
    padding: 0 25px;
    border-radius: 30px;
    width: 182px;
    height: 35px;
    line-height: 35px;
    text-transform: uppercase;
    margin-bottom: 0;
}

div.debug {
    clear:      both;
    white-space: pre;
    display:    none;
    unicode-bidi: embed;
    font-family: monospace;    
}

/*  
--------------------------------------------------------------
    Common styles
--------------------------------------------------------------
*/
a {
    cursor:             pointer;
    text-decoration:    none;
}
i {
    font-style:     normal;
    font-weight:    400;
}