/*
* Notice: This source file was originally developed by Automatik IT, to make development of new projects more efficient, internally and externally for various clients.
* The functionality in this file is provided in source form instead of as a binary (NuGet Package etc.) to allow clients of Automatik IT to make changes on their own.
* Clients of Automatik IT have the right to modify this file and have ownership of the changes they make.
* Exclusive ownership of the original source file is not granted, as it's used in various projects for the sake of efficiency.
*/


/* Page header navigation */
body > include-partial > header {
    /*
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
        */
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    color: #FFF;
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    /*
    height: 148px;
    */
}


    body > include-partial > header > nav {
        display: flex;
        flex-direction: column;
        min-height: 64px;
    }


/* Hide on small screens (until the menu-button is clicked) */
@media screen and (max-width: 1024px) {

    body > include-partial > header > nav:not(.ShowMenu) {
        display: none;
    }
}


/* Logo in the menu */
body > include-partial > header > nav > .Logo {
    /*max-height: 42px;*/
    /* fill-opacity: 0.94; */
    /* min-width: 260px; */
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    /*margin: 10px 0 0 10px;*/
}



body > include-partial > header > nav .Logo a {
    justify-content: flex-start;
}


body > include-partial > header > nav .Logo svg {
    /*height: 82px;*/
    height: 73.905489px;
    width: 155.526679px;
    opacity: 1;
    /*filter: grayscale(0%);
            transition: opacity 2s, filter 2s;*/
}
/*
        body > include-partial > header > nav .Logo.Gray svg {
            opacity: .3;
            filter: grayscale(100%);
        }
        */
/*
            body > include-partial > header > nav .Logo.Gray svg:hover {
                opacity: 1;
                filter: grayscale(0%);
                transition: opacity 0.4s, filter 0.4s;
            }
        */


/* Links in the navigation */
body > include-partial > header > nav a {
    color: rgba(255,255,255,.86) !important;
    font-size: 18px;
    font-family: Raleway, Arial, sans-serif;
    letter-spacing: .9px;
    text-decoration: none;
    line-height: 1;
    -webkit-transition: color 0.3s, -webkit-transform 0.3s;
    /* transition: color 0.3s, transform 0.3s; */
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /*
            border-bottom: 1px solid rgba(255,255,255,0);
                */
}







.TopNavigationBar {
    z-index: 1;
    margin-top: 0 !important;
    display: flex;
    /*margin-left: 220px;*/
    /*    position: absolute;
    left: 0;
    */
    width: 100%;
    padding-left: 220px;
}

    .TopNavigationBar > .TabbedNavigation {
        flex-grow: 1;
        margin-top: 0;
        padding: 0px 18px 0 0 !important;
    }


        /* Hide the TabbedNavigation on small screens (until the menu-button is clicked) */
        /*
@media screen and (max-width: 1024px) {

    .TopNavigationBar > .TabbedNavigation {
        display: none;
    }
}
*/


        .TopNavigationBar > .TabbedNavigation a {
            text-transform: none;
            font-size: 20px !important;
        }

            .TopNavigationBar > .TabbedNavigation a.Active {
                border-bottom: 2px solid #009edd !important;
                padding-bottom: 8px !important;
            }



        .TopNavigationBar > .TabbedNavigation > li a.Active {
            color: rgba(255,255,255,.86);
            border-bottom: 2px solid rgba(255,255,255,.86);
            padding-bottom: 7px;
        }



.UserMenu {
    /*
    flex: 3 auto 100%;
    */
    padding-right: 8px;
    color: rgba(255,255,255,.4);
    flex-grow: 0;
    /*
    display: flex;
    justify-content: flex-end;
        
    flex-wrap: wrap;
        */
    z-index: 100;
}



    .UserMenu > ul {
        padding: 0;
        display: flex;
        /*
    flex-wrap: wrap;
    */
        justify-content: flex-end;
        /*align-items: center;*/
        align-items: flex-start;
        list-style: none;
        line-height: 14px;
        margin: 0;
    }

    /*
    .UserMenu li {
        margin-left: 15px;
        margin-right: 15px;
        
    }
    */
    .UserMenu li {
        padding-bottom: 8px;
        margin-left: 1px;
        margin-right: 1px;
    }

body > include-partial > header > nav .UserMenu li a {
    color: rgba(255,255,255,.5);
    /*
    padding-top: 12px;
    */
    margin-left: 8px;
    margin-right: 8px;
}

body > include-partial > header > nav .UserMenu a .Icon {
    font-size: 28px;
    /*
    padding-left: 8px;
    padding-right: 8px;
        */
}







.SecondNavigationBar {
    display: flex;
    /* margin-left: 220px; */
    /*position: absolute;
    top: 50px;
    width: 100%;*/
    /*padding-left: 220px;*/
}


    .SecondNavigationBar > .MainMenu {
        display: flex;
        /*
        height: 76px;
        */
        flex-grow: 1;
        justify-content: flex-start;
        margin-top: 10px;
        /*background-color: rgba(4,171,237, .92);*/
        z-index: 100;
        margin-left: 220px;
    }

body > include-partial > header > nav .MainMenu > ul {
    display: flex;
    flex-grow: 1;
    /*
            flex-wrap: wrap;
                */
    margin: 0;
    padding: 0;
}

    body > include-partial > header > nav .MainMenu > ul > li {
        position: relative;
        display: block;
        text-align: center;
        /*height: 50px;*/
        /*
                margin-left: 12px;
                margin-right: 12px;
                    */
        display: flex;
        align-items: baseline;
    }

        body > include-partial > header > nav .MainMenu > ul > li:first-child a {
            padding-left: 0;
        }

        body > include-partial > header > nav .MainMenu > ul > li:last-child a {
            padding-right: 0;
        }


/*
                body > include-partial > header > nav .MainMenu > ul > li.Current {
                    background-color: rgba(0,0,0,.4);
                }
                */

.SecondNavigationBar > .MainMenu li a {
    padding-bottom: 16px;
    padding-left: 12px;
    padding-right: 12px;
}


    .SecondNavigationBar > .MainMenu li a .Icon {
        font-size: 34px;
    }


.SecondNavigationBar > .MainMenu li.Current a {
    font-weight: 700;
}






/* Bracket showing grouping the block links */

.LabeledGroupStart:after {
    content: '';
    width: calc(100% - 4px);
    height: 10px;
    border: solid rgba(255,255,255,.6);
    border-width: 0 0 1px 1px;
    bottom: 16px;
    position: absolute;
    right: 0;
}


.LabeledGroupMiddle {
    display: block;
    color: rgba(255,255,255,.6);
    width: 100%;
    height: 7px;
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    font-size: 11px;
    display: flex;
    text-transform: uppercase;
    letter-spacing: .11em;
}


    .LabeledGroupMiddle:before {
        content: '';
        color: rgba(255,255,255,.6);
        border: solid rgba(255,255,255,.6);
        border-width: 0 0 1px 0;
        font-size: 14px;
        display: inline-block;
        /* 3px instead of 2 to compensate for G at the end */
        margin-right: 3px;
        flex-grow: 1;
    }


    .LabeledGroupMiddle:after {
        content: '';
        color: rgba(255,255,255,.6);
        border: solid rgba(255,255,255,.6);
        border-width: 0 0 1px 0;
        font-size: 14px;
        display: inline-block;
        margin-left: 2px;
        flex-grow: 1;
    }


.LabeledGroupEnd:after {
    content: '';
    width: calc(100% - 4px);
    height: 10px;
    border: solid rgba(255,255,255,.6);
    border-width: 0 1px 1px 0;
    bottom: 16px;
    position: absolute;
    left: 0;
}









body > include-partial > header > nav .MainMenu li.LabeledGroupStart.Current a > span,
body > include-partial > header > nav .MainMenu li.LabeledGroupStart a:hover > span,
body > include-partial > header > nav .MainMenu li.LabeledGroupStart a:active > span,
body > include-partial > header > nav .MainMenu li.LabeledGroupStart a:focus > span,
body > include-partial > header > nav .MainMenu li.Current .LabeledGroupMiddle ~ a > span,
body > include-partial > header > nav .MainMenu li .LabeledGroupMiddle ~ a:hover > span,
body > include-partial > header > nav .MainMenu li .LabeledGroupMiddle ~ a:active > span,
body > include-partial > header > nav .MainMenu li .LabeledGroupMiddle ~ a:focus > span,
body > include-partial > header > nav .MainMenu li.LabeledGroupEnd.Current a > span,
body > include-partial > header > nav .MainMenu li.LabeledGroupEnd a:hover > span,
body > include-partial > header > nav .MainMenu li.LabeledGroupEnd a:active > span,
body > include-partial > header > nav .MainMenu li.LabeledGroupEnd a:focus > span {
    padding-bottom: 6px;
}


/* Divider between icons */
body > include-partial > header > nav .Separator {
    display: block;
    background: linear-gradient(rgba(51,51,51,0), rgba(51,51,51,0.5), rgba(102,102,102,0));
    height: 38px;
    width: 1px;
    margin: 0 2px;
}



body > include-partial > header > nav .MainMenu li a:hover,
body > include-partial > header > nav .MainMenu li a:focus,
body > include-partial > header > nav .UserMenu li a:hover,
body > include-partial > header > nav .UserMenu li a:focus {
    color: #fff;
    outline: none;
}


/* Telephone number links */
/*
a[href^='tel:']:before {
    display: inline-block;
    content: '✆';
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    margin-right: 4px;
    border-radius: 50%;
}
*/

.TelIcon {
    width: 20px;
    height: 20px;
    position: relative;
    /* top: -2px; */
    /* left: -5px; */
    margin-right: 4px;
}

/* Email links */
/*
a[href^='mailto:']:before {
    display: inline-block;
    content: '?';
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    margin-right: 4px;
    border-radius: 50%;
}
*/


/* Language menu */
body > include-partial > header > nav .LanguageSelector {
    list-style: none;
}


    /* Language menu list item */
    body > include-partial > header > nav .LanguageSelector li {
        display: inline-block;
    }


    /* Language menu links */
    body > include-partial > header > nav .LanguageSelector a {
        padding: 0 4px 0 4px;
    }



/* Default styles for all screen sizes - Working smallest possible */
/*
body > include-partial > header > nav a:hover span {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.86);
}
        */

body > include-partial > header > nav .MainMenu li a > span {
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0);
}


body > include-partial > header > nav .MainMenu li.Current a > span,
body > include-partial > header > nav .MainMenu li a:hover > span,
body > include-partial > header > nav .MainMenu li a:active > span,
body > include-partial > header > nav .MainMenu li a:focus > span {
    color: #FFF;
    padding-bottom: 15px;
    /*font-weight: 700; Makes each expand slightly on hover */
    /*transform: translate3d(0,8px,0);*/
    border-bottom: 1px solid rgba(255,255,255,.86);
}




body > include-partial > header > nav a span:nth-child(2) {
    /*display: none;*/
    padding-top: 10px;
}

body > include-partial > header > nav .UserMenu a span:nth-child(2) {
    display: none;
}


@media screen and (min-width: 1441px) {
    body > include-partial > header > nav a span:nth-child(2) {
        /*display: block;*/
        /*

        padding-top: 0;*/
    }
}



/* Making it responsive */
@media screen and (max-width: 1000px) {

    body > include-partial > header > nav > ul > li:nth-child(2),
    body > include-partial > header > nav > ul > li:nth-child(3) {
        display: none;
    }

    /*
body > include-partial > header > nav > ul {
    flex-direction: column;

	align-items: left;

  }
*/

}


/* ROLE SELECTION */

/*
.SelectedUserOrganizationRoleAs {
    display: block;
    margin-left: 58px;
    margin-bottom: 5px;
    color: rgba(255,255,255,.86);
    font-size: 18px;
    font-style: italic;
    display: none;
}
    */
.SelectedUserOrganizationRoleVerticalDivider {
    border-top: 1px solid rgba(255,255,255,.6);
    width: 60px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}



#SelectedUserOrganizationRole {
    background: none !important;
    color: #FFF;
    margin: 0;
    position: absolute;
    top: 67px;
    left: 16px;
    width: 180px;
    font-size: 20px;
    margin-top: 38px !important;
    margin-left: 0 !important;
    box-shadow: none !important;
}

.SelectedUserOrganizationRoleUpdateControl .select2-container {
    border-bottom: none;
}

/*
    .SelectedUserOrganizationRoleUpdateControl .select2-selection {
        
    }*/


/* AUTOMATIK IT */
#OrganizationName {
    text-align: center;
    font-size: 15px;
    text-transform: uppercase;
    /* color: rgba(255,255,255,.76); */
    letter-spacing: 1px;
}

/* DPO */
#RoleName {
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1.1px;
}




/*
.UserOrganizationRole > span:first-child {
    display: none;
}
        */
/*
.UserOrganizationRole > span {
    white-space: nowrap;
}
*/

.select2-dropdown {
    min-width: 260px !important;
}



.SelectedUserOrganizationRoleUpdateControl:hover {
    background-color: transparent;
}

.SelectedUserOrganizationRoleUpdateControl fieldset {
    border: none;
    padding: 0;
    margin: 0;
}


form.SelectedUserOrganizationRoleUpdateControl fieldset > ul > li {
    margin-top: 0;
}


#UserUpdate li.Select {
    border-bottom: none;
}


body > include-partial > header .Count {
    position: absolute;
    bottom: 12px;
    left: 20px;
    font-size: 12px;
    font-weight: bold;
    background: rgba(51,51,51,0.55);
    color: rgba(255,255,255,0.9);
    line-height: 1em;
    padding: 2px 4px;
    border-radius: 10px;
    /* border: solid 1px #fff; */
    text-align: center;
}


/* Make responsive */

/* Hide the menu button by default */
.MenuButton {
    display: none;
    font-size: 34px;
    flex-grow: 1;
    text-align: right;
    margin-right: 16px;
    cursor: pointer;
    z-index: 101;
    color: rgba(255,255,255,.86);
}


/* Collapse navigation on small screens */
@media screen and (max-width: 1024px) {
    body > include-partial > header .MainMenu {
        display: none;
    }

    .UserMenu {
        display: none;
    }


    .MenuButton {
        display: block;
        width: 40%;
        box-sizing: border-box;
    }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1024px) {

    .Content {
        margin-left: 4px;
        margin-right: 4px;
    }


    /* TODO: Move */
    .MajorMinorWindowsContainer {
        flex-wrap: wrap;
    }



    body header > nav.ShowMenu {
        height: initial;
        /*flex-direction: column;*/
        /*align-items: flex-end;*/
        flex-wrap: wrap;
    }


    body > include-partial > header > nav.ShowMenu .Logo {
        align-self: flex-start;
        width: 50%;
        box-sizing: border-box;
    }


    /*
        body header > nav.Responsive .MenuButton {
            position: absolute;
            right: 0;
            top: 0;
        }
    */

    body > include-partial > header > nav.ShowMenu .MainMenu {
        margin-top: 80px;
    }


    body > include-partial > header > nav.ShowMenu .MainMenu,
    body > include-partial > header > nav.ShowMenu .UserMenu {
        display: flex;
        /*position: absolute;*/
        margin-right: 24px;
        right: 24px;
        /*background-color: rgba(255,255,255,1);*/
        /*width: 290px;*/
        width: 100%;
        margin-left: auto;
        flex-grow: 0;
        padding-right: 0;
    }

    body > include-partial > header > nav.ShowMenu::before {
        content: '';
        position: fixed;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        /*
            background: radial-gradient(at right 30%, rgba(4,171,237,1) 0%,rgba(4,171,237,0.641) 90%,rgba(4,171,237,0) 100%);
                */
        background: radial-gradient(at right 30%, rgba(4,171,237,1) 0%,rgba(4,171,237,0.85) 70%,rgba(4,171,237,0.2) 100%);
        z-index: 1;
    }


    body > include-partial > header > nav.ShowMenu .MainMenu > ul,
    body > include-partial > header > nav.ShowMenu .UserMenu > ul {
        flex-direction: column;
        margin-left: auto;
        flex-grow: 0;
        width: 290px;
    }

    .SupportTel {
        display: none;
    }

    body > include-partial > header > nav.ShowMenu .MainMenu > ul > li,
    body > include-partial > header > nav.ShowMenu .UserMenu > ul > li {
        height: auto;
        margin-right: 0;
        margin-top: 2px;
        margin-left: 0;
        padding-bottom: 0;
    }

        body > include-partial > header > nav.ShowMenu .MainMenu > ul > li a,
        body > include-partial > header > nav.ShowMenu .UserMenu > ul > li a {
            flex-direction: row;
            padding-left: 0;
            padding-right: 0;
            font-size: 24px;
            padding-bottom: 8px;
            margin-bottom: 8px;
            margin-left: 0;
        }

            body > include-partial > header > nav.ShowMenu .MainMenu > ul > li a > span:nth-child(2),
            body > include-partial > header > nav.ShowMenu .UserMenu > ul > li a > span:nth-child(2) {
                display: inline-block;
                margin-left: 16px;
                flex-grow: 1;
                text-align: left;
            }

            body > include-partial > header > nav.ShowMenu .UserMenu > ul > li a > span.Icon {
                font-size: 34px;
            }
    /*
    body > include-partial > header > nav.Responsive .UserMenu {
        display: flex;
    }
                    */


    /* Role menu */
    body > include-partial > header > nav .SelectedUserOrganizationRoleUpdateControl {
        display: none;
    }

    body > include-partial > header > nav.ShowMenu .SelectedUserOrganizationRoleUpdateControl {
        display: block;
        position: initial;
        margin-left: auto;
        width: 290px;
        margin-right: 24px;
    }

    .select2-container--open {
        z-index: 202;
    }
}


.ContactInfo {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    font-size: 18px;
    color: rgba(255,255,255,.5);
    margin: 0 9px 0 9px;
}


    .ContactInfo p {
        margin-top: 8px;
        margin-bottom: 0;
        text-align: right;
    }

        .ContactInfo p:first-child {
            margin-top: 0;
        }


body > include-partial > header > nav .ContactInfo p a {
    align-items: flex-start;
    color: rgba(255,255,255,.8);
    padding-bottom: 0;
    display: inline;
}


body > include-partial > header > nav .ContactInfo p .TooltipButton {
    padding-bottom: 0;
    vertical-align: bottom;
}

    body > include-partial > header > nav .ContactInfo p .TooltipButton span {
        font-size: 20px;
        vertical-align: bottom;
        padding-right: 0;
    }