﻿h1 {
    font-weight: normal;
    font-size: 2.2em;

    transition: font-size .3s;
    -moz-transition: font-size .3s;
    -webkit-transition: font-size .3s;
}
#portal-header {
    background: white;
    height: 100px;
    min-height: 100px;
    border-bottom: 1px solid #DDDDDD;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 30px;

    transition: min-height .3s, height .3s, margin-bottom .3s;
    -moz-transition: min-height .3s, height .3s, margin-bottom .3s;
    -webkit-transition: min-height .3s, height .3s, margin-bottom .3s;
}

#portal-header .container {
    display: -ms-grid;
    display: grid;
    
    grid-template-columns: auto 46px;
    -ms-grid-columns: minmax(0, 1204px) 46px;
    grid-template-rows: 32px 67px auto;
    -ms-grid-rows: 32px 67px auto;    
}
body.wide #portal-header .container {
    -ms-grid-columns: minmax(0, 1654px) 46px;
}

/*ALBIXON:2023-04-04>>*/
.company-logo {
    align-self: center;
    grid-column: 1;
    grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    margin-left: -140px;    /*AX: -70px*/
    margin-top: -30px;      /*AX*/
    display: block;
    position: relative;
}
.company-logo img {
    max-width: 100px;       /*AX: 50px*/
    /*AX: border-right: 1px solid #f8f8f8;*/
    padding-right: 10px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
}
/*
.company-logo {
    align-self: center;
    grid-column: 1;
    grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    margin-left: -70px;
    display: block;
    position: relative;
}
.company-logo img {
    max-width: 50px;
    border-right: 1px solid #f8f8f8;
    padding-right: 10px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
}
*/
/*ALBIXON:2023-04-04<<*/

.header-menu {
    padding-top: 15px;
    box-sizing: border-box;
    height: 32px;
    opacity: 1;

    transition: opacity .3s, height .3s, padding .3s;
    -moz-transition: opacity .3s, height .3s, padding .3s;
    -webkit-transition: opacity .3s, height .3s, padding .3s;

    width: 100%;
    grid-column-start: 1;
    grid-column-end: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-row: 1;
    -ms-grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-self: flex-end;
    flex-grow: 1;
}
.header-menu a, .submenu-header:not(#user-management-menu-header) {
    text-transform: uppercase;
    font-size: 0.9em;
    margin-right: 25px;
}

#userinfo {
    font-size: 1.1em;
    margin-left: auto;
    flex-basis: auto;
    
}
.user-management, .submenu-header {
    cursor: pointer;
    padding: 0px 5px;
}
.submenu-header {
    color: #888888;
    display: inline;
}
.user-management .icon, .submenu-header .icon {
    background: url(../Images/Portal/Arrow.svg) no-repeat right center;
    width: 9px;
    height: 5px;
    display: inline-block;
    vertical-align: middle;
    transition: transform .3s;
    -moz-transition: transform .3s;
    -webkit-transition: transform .3s;
}
.user-management.menu-visible .icon, .submenu-header.menu-visible .icon {
    transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
}
.user-management-menu, .submenu {
    display: none;
    background: white;
    padding: 2px 0px 5px 0px;
    z-index: 2;
}
#userinfo a, .submenu a {
    text-transform: none;
    display: block;
    padding: 1px 5px;
}


.new-button {
    grid-column: 2;
    -ms-grid-column: 2;
    grid-row: 3;
    -ms-grid-row: 3;
    display: block;
    margin-top: -25px;

    padding: 1px;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 100%;
    text-align: center;
    font-size: 35px;
    color: white;
    background-color: #f18b03;
    box-shadow: 0 3px 10px 0 rgba(0,0,0,.2);
    transition: box-shadow 150ms cubic-bezier(.4,0,1,1), margin-top .3s, width .3s, height .3s, font-size .3s;
    -moz-transition: box-shadow 150ms cubic-bezier(.4,0,1,1), margin-top .3s, width .3s, height .3s, font-size .3s;
    -webkit-transition: box-shadow 150ms cubic-bezier(.4,0,1,1), margin-top .3s, width .3s, height .3s, font-size .3s;
}
.new-button:hover {
    color: white;
    box-shadow: 0 6px 12px rgba(0,0,0,.3);
}
.new-button:focus {
    color: white;
}

#portal-header .container h1 {
    grid-column: 1;
    -ms-grid-column: 1;
    grid-row: 2;
    -ms-grid-row: 2;
    align-self: center;
    white-space: nowrap;
    display: block;
}
