/*  
--------------------------------------------------------------
    Fonts
--------------------------------------------------------------
*/
@font-face{
    font-family: 'Segoe UI';
    src:
            url(../fonts/SegoeUI.ttf) format('truetype'),
            url(../fonts/SegoeUI.eot?#iefix) format('embedded-opentype'), 
            url(../fonts/SegoeUI.woff2) format('woff2'), 
            url(../fonts/SegoeUI.woff) format('woff'),
            url(../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( "/assets/fonts/fa/fa-solid-900.eot" ); */
    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-weight:    400;
    font-style:     normal;
*/
}

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

/*  
--------------------------------------------------------------
    Default settings
--------------------------------------------------------------
*/
body {
    background-color:   white;
    font-family:    'Segoe UI', Arial;
    font-size:      1rem;
    font-weight:    400;
    margin:         0px;
    padding:        0px;
}

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

h1 {
    font-size:          20px;
    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( "../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:          11px;
}

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:          1140px;
    align-items:        center;
    margin:             0px auto;
}

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 {
    max-height: 60px;
}

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

div.background-menubar {
    position:           absolute;
    height:             100%;
    min-width:          100px;
    width:              calc( 100px + ( 100vw - 1140px ) / 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:          12px;
    font-weight:        500;
    letter-spacing:     0.5px;
    width:              100px;
    text-align:         center;
}

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;
}

/*  
--------------------------------------------------------------
    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;
}