@import "media-query-intranet.css";

#container-wrapper-efg {
    margin: 30px 0 0 0;
}

#container-wrapper-defgh-outer {
    background: var(--bg-lightgrey);
}
#container-wrapper-defgh {
    padding-bottom: 50px;
}

#container-wrapper-defgh-inner {
    display: inline-flex;
    justify-content: space-between;
    align-content: flex-start;
    width: 100%;
}

#container-d {
    /*position: static;
    padding-right: 0px;
    padding-top: 75px;
    margin-left: 50px;*/
}
#container-e {
    padding: 0!important;
    max-width: unset;
}

#container-f {
    text-align: left;
    padding-top: 0 !important;
}

#page-INTRANET-AVATAR #container-f {
    padding: 0 !important;
}

/* content */

#container-b h3 {
    color: var(--text-white);
}
h3 span.first_name {
    margin-left: 5px;
}

/*  Icons */

#peer-paging-wrapper,
#welcomelinkextra-wrapper {
	float:left;
}

#peer-paging-wrapper ul,
#welcomelinkextra-wrapper ul {
	margin-bottom:0 !important;
	margin-left:0 !important;
}

#peer-paging-wrapper li,
#welcomelinkextra-wrapper li {
	float:left;
	padding:0 !important;
	margin-left:0 !important;
	list-style:none !important;
	margin: 0 20px 25px 0;
}
        #peer-paging li:after {
            display: none;
        }


#welcomelinkextra-wrapper ul {
    margin-right: 520px;
    /*display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;*/
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 25px;
    margin-bottom: 25px !important;
}

        #welcomelinkextra-wrapper ul li {
            margin: 0!important;
        }


#page-INTRANET-WELCOME #section-a-wrapper {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
    /* -ms-grid-columns: minmax(220px,1fr) minmax(220px,1fr) minmax(220px,1fr);
    grid-template-columns: minmax(220px,1fr) minmax(220px,1fr) minmax(220px,1fr);*/
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    justify-items: start;
    max-width: 880px;
}

#peer-paging-wrapper a,
#welcomelinkextra-wrapper a {
    background: url('../grfx/png/icon-place-an-order.png') no-repeat top center;
    background-image: url('../grfx/svg/icon-place-an-order.svg'), none;
    background-position: top center !important;
    background-size: contain !important;
    display: block;
    width: 100px;
    padding: 160px 20px 20px 20px;
    text-align: center;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: normal;
    text-transform: uppercase;
    font-weight: 600;
    margin-right: 0 !important;
    letter-spacing: 0.5px;
}

    #peer-paging-wrapper a:hover,
    #welcomelinkextra-wrapper a:hover {
        opacity: 0.8;
    }

#peer-detail.intranet-profile,
#peer-paging-wrapper a.intranet-profile {
	background: url('../grfx/png/icon-my-profile.png') no-repeat top center;
	background-image: url('../grfx/svg/icon-my-profile.svg'), none;
}

    #peer-detail.intranet-password,
    #peer-paging-wrapper a.intranet-password,
    #welcomelinkextra-wrapper a.intranet-password {
        background: url('../grfx/png/icon-password.png') no-repeat top center;
        background-image: url('../grfx/svg/icon-password.svg'), none;
    }


    #peer-detail.intranet-avatar,
    #peer-paging-wrapper a.intranet-avatar,
    #welcomelinkextra-wrapper a.intranet-avatar {
        background: url('../grfx/png/icon-my-avatar.png') no-repeat top center;
        background-image: url('../grfx/svg/icon-my-avatar.svg'), none;
    }


    #peer-detail.intranet-email-sig,
    #peer-paging-wrapper a.intranet-email-sig,
    #welcomelinkextra-wrapper a.intranet-email-sig {
        background: url('../grfx/png/icon-emailsig.png') no-repeat top center;
        background-image: url('../grfx/svg/icon-emailsig.svg'), none;
    }

    #peer-detail.intranet-bus-card,
    #peer-paging-wrapper a.intranet-bus-card,
    #welcomelinkextra-wrapper a.intranet-bus-card {
        background: url('../grfx/png/icon-businesscards.png') no-repeat top center;
        background-image: url('../grfx/svg/icon-businesscards.svg'), none;
    }


/* Forms */

table input {
	height:40px;
}

h3.intranet-avatar-heading {
    margin-top: 0px;
    margin-bottom: 0 !important;
}
h3.intranet-avatar-heading,
#int-chg-password-form-wrapper h3,
#int-profile-form-wrapper h3 {
    font-size: 30px !important;
    font-size: 3.0rem !important;
    line-height: 40px !important;
    line-height: 4.0rem !important;
    /*border-top: 1px solid var(--footer-bg-grey);*/
    padding: 20px 0 20px 0;
}

#int-chg-password-form-wrapper input[type="submit"],
#int-profile-form-wrapper input[type="submit"] {
    width: 100%;
    max-width: 100% !important;
}

#int-chg-password-form-wrapper input,
#int-profile-form-wrapper input,
#change-password-form input {
    width: 100%;
}

/* Fake Buttons */
a.logout-link {
    display: block;
    font-size: 12px;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    margin: 0;
    padding: 0 10px 0 10px;
    height: 50px;
    border: none;
    cursor: pointer;
    background-color: #2f3640;
    color: white;
    text-transform: uppercase;
    line-height: 50px;
    font-weight: bold;
    -webkit-appearance: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    float: right;
    white-space: nowrap;
}


   /* a.download-link:hover,
    a.template-order-list-newtemplate:hover,
    a.delivery-add:hover,
    a.delivery-delete:hover,
    a.delivery-edit:hover,
    a.template-add-to-basket:hover,
    a.template-remove:hover,
    a.template-details:hover,
    #container-f a.standard-import:hover,*/
    a.logout-link:hover {
        background-color: #222 !important;
    }
 
a.logout-link {
	width:70px;
	text-align:center;
}


/* Account Window */

#accountinfo-wrapper {
    float: right;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 25px;
    margin-top: 10px;
}

.logout-link-label {
	float:right;
	margin-left:25px;
    display:none;
}


#accountinfo-wrapper .lastsignin,
#accountinfo-wrapper .accountcode {
    letter-spacing: 1.0px;
    min-width: 215px;
    padding: 3px 0;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 200;
}

.label-lastsignin, .label-accountcode {
    display: flex;
    column-gap: 10px;
}

/* -------------------------------- */
/*  SIDE NAVIGATION  */
/* -------------------------------- */

/*#hidemenu,
#showmenu {
    position: absolute;
    top: 10px;
    left: 50px;
    font-size: 12px;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-weight: 400;
    background: url('../grfx/png/left-arrow-long.png') no-repeat left center;
    background-image: url('../grfx/svg/left-arrow-long.svg'), none;
    background-size: 9px;
    padding-left: 20px;
    line-height: 30px;
    cursor: pointer;
    z-index: 10;
    top: 85px;
}

#showmenu {
    background: url('../grfx/png/right-arrow-long.png') no-repeat left center;
    background-image: url('../grfx/svg/right-arrow-long.svg'), none;
    background-size: 9px;
}*/

#ordering,
#intranetnav {
    margin: 0;
    position: relative;
    overflow: hidden;
    -webkit-transition: all .1s ease-in-out, left .5s ease-in-out;
    transition: all .1s ease-in-out, left .5s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: var(--navigation-bg-color);
    border: 1px solid var(--navigation-border-color);
    -webkit-border-radius: var(--radius-box);
    -moz-border-radius: var(--radius-box);
    border-radius: var(--radius-box);
}

#ordering.hide,
#intranetnav.hide {
	left:-350px;
	opacity:0;
}

#ordering {
	margin-top:0;
}

    #ordering a,
    #intranetnav a {
        padding: 5px 0px 5px 0;
        display: block;
        letter-spacing: 0.1px;
        font-weight: 500;
        color: var(--nav-black);
        font-size: 14px;
        font-size: 1.4rem;
        line-height: 18px;
        line-height: 1.8rem;
    }
    #ordering li.active > a,
    #intranetnav li.active > a {
        font-weight: 600;
        position: relative;
    }
    #ordering > li.active:NOT(:first-child),
    #intranetnav > li.active:NOT(:first-child) {
        display: block;
        width: 100%;
        background-color: var(--text-white);
    }

    #ordering :NOT(:first-child) a.active,
    #intranetnav :NOT(:first-child) a.active {
        color: var(--button-red);
        background-color: var(--text-white);
    }
        #ordering :NOT(:first-child) a.active:before,
        #intranetnav :NOT(:first-child) a.active:before {
            content: "";
            position: absolute;
            display: block;
            left: 0;
            top: calc(50% - 5px);
            width: 1px;
            height: 10px;
            border-left: 4px solid var(--button-red);
        }

#intranetnav > li:NOT(:first-child) > a:hover,
#intranetnav > li:NOT(:first-child) > a.active {
    color: var(--button-red);
    background-color: var(--text-white) !important;
}

/* Level 1 */
#intranetnav li {
    display: block;
    width: 100%;
}
        #intranetnav > li > a {
            position: relative;
            color: var(--nav-pink);
            letter-spacing: 0;
            padding: 16px 27px;
            border-top: 1px solid var(--navigation-border-color);

        }

#intranetnav > li:first-child {
    display: block;
    /*background: none;*/
}

    #intranetnav > li:first-child > a {
        font-size: 17px !important;
        font-size: 1.7rem !important;
        line-height: 21px !important;
        line-height: 2.1rem !important;
        font-weight: 500;
        color: var(--p-main);
        padding: 16px 27px;
        overflow: hidden;
        border-top: none;
    }

        /* Level 2 */
#ordering > li.active:NOT(:first-child) > a:before,
#intranetnav > li.active:NOT(:first-child) > a:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: calc(50% - 5px);
    width: 1px;
    height: 10px;
    border-left: 4px solid var(--button-red);
}
    #intranetnav > li.extra-welcome.active > a:before {
        content: "";
        display: none;
    }
#intranetnav > li > ul.navigation-level-1 {
    display: none;
}
            /* Level 3 */
            #ordering > li > ul,
            #intranetnav > li > ul {
                font-size: 13px;
                font-size: 1.3rem;
            }


    #ordering > li > ul a,
    #intranetnav > li > ul a {
        /*padding: 0 20px 0 40px;
        line-height: normal;
        margin: 5px 0 5px 0;*/
        padding: 0px 0px 0px 20px;
        margin: 5px 0 5px 0;
        line-height: normal;
        font-size: 14px;
        font-size: 1.4rem;
    }
#ordering a:hover, 
#intranetnav a:hover {
    color: var(--dark-red);
}

        #ordering > li > ul a.active,
        #intranetnav > li > ul a.active {
            color: var(--dark-red);
        }

/* Level 4 */

#ordering > li > ul > li > ul a,
#intranetnav > li > ul > li > ul a {
	padding-left:60px;
}

    #ordering > li > ul > li > ul a.active,
    #intranetnav > li > ul > li > ul a.active {
        color: var(--dark-red);
    }

/* Level 5 */

#ordering > li > ul > li > ul > li > ul a,
#intranetnav > li > ul > li > ul > li > ul a {
	padding-left:80px;
}

#ordering > li > ul > li > ul > li > ul a.active,
#intranetnav > li > ul > li > ul > li > ul a.active {
	padding-left:75px;
	border-left:5px solid #222;
}


/* make h3 smaller */
#container-e h3,
#container-e #section-a-wrapper h3,
#container-e #section-b-wrapper h3,
#container-e #section-c-wrapper h3,
#container-e #section-d-wrapper h3,
#container-e #section-e-wrapper h3 {
    font-size: 30px !important;
    font-size: 3.0rem !important;
    line-height: 36px !important;
    line-height: 3.6rem !important;
    margin-bottom: 20px;
}