/* --- Font Loading --- */

/* Regular */
@font-face {
  font-family: 'Roboto'; src: url('/pictures/fonts/Roboto-Regular.woff') format('woff');
  font-weight: 400; font-style: normal;
}

/* Semibold */
@font-face {
  font-family: 'Roboto'; src: url('/pictures/fonts/Roboto-500.woff') format('woff');
  font-weight: 600; font-style: normal;
}

/* Bold */
@font-face {
  font-family: 'Roboto'; src: url('/pictures/fonts/Roboto-700.woff') format('woff');
  font-weight: 700; font-style: normal;
}


/* --- HTML Main --- */

* { box-sizing: border-box }

html { overflow-y: scroll; }
body {
        margin: 0px; padding: 0px;
        background-color: #E9E9E9;
        color: #000;
        font: 15px Roboto, arial, helvetica, sans-serif;
        }

body.framemargin { margin-right: 26px; }

h1,h2,h3,h4,h5  { color: black; font-family: Roboto, arial, helvetica, sans-serif; }
p               { font: 15px Roboto, arial, helvetica, sans-serif; }
b               { font-weight: bold; }
img             { border: 0px; }
td              { font: 15px Roboto, arial, helvetica, sans-serif; }
pre             { font: 15px Arial, sans-serif; }

form, input     { font: 15px Roboto, arial, helvetica, sans-serif; }

input[type=submit]
        {
        color: black;
        background: linear-gradient(to bottom, #fcfcfc 4%, #e3e3e3 81%);
        padding: 5px 30px;
        min-width: 145px;
        font-weight: 600;
        border: 1px solid #9e9e9e;
        background-color: #e9e9e9;
        border-radius: 4px;
        }

input[type=submit]:disabled
        {
        color: #6d6d6d;
        }

input[type=submit]:hover { background: linear-gradient(to bottom, #f9f9f9 4%, #d7d7d7 96%); background-color: #e0e0e0; cursor: pointer; }

input[type=submit].mainpage-button
        {
        min-width: 162px;
        }

input[type=file] { background-color: #FFF; }

input:focus { color: black; background-color: #FFC; }

input::placeholder { color: #d0d0d0; }

select      { font: 15px Roboto, arial, helvetica, sans-serif; min-width: 130px; }

textarea    { font: 15px Roboto, arial, helvetica, sans-serif; }

label {
    display: inline-block;
    vertical-align: text-top;
    margin-top: -2px;
    padding-bottom: 5px;
}


/* --- Links --- */

a:link,a:visited,a:active { color:#006; text-decoration: none; font-weight: bold; }
a:hover         { background-color: #ededed; text-decoration: none; }
a:hover img     { background-color: transparent; }
a.hoverbox      { display: inline-block; }
a.disabled      { color: #ccc; }


/* --- Table Formattings --- */

.indextablerow td { background: none; border-bottom: 1px solid #c6c6c6; }

table.frontbg { background-color: #fafafa; }

th { background-color: #e8e8e8; font-weight: bold; text-align: left; border-bottom: 1px solid white; }
th.right { text-align: right; }
th.center { text-align: center; }
tr.colored, td.colored      { background-color: #f6f6f6; }

table.right-spacing td { padding: 0px 12px 9px 0px; }

div.objprofile  { margin-bottom: 27px; padding: 12px; font-weight: bold; border-bottom: 2px solid #d4d4d4; background: linear-gradient(to bottom, #fff 4%, #eee 100%); background-color: #FFF; }
td.objprofile  { margin-bottom: 27px; padding: 12px; font-weight: bold; border-bottom: 2px solid #e8e8e8; background: linear-gradient(to bottom, #fff 4%, #eee 100%); background-color: #FFF; }

td.separator { background-color: #e9e9e9; font-weight: bold; text-align: left; border-bottom: 1px solid white; }

/*
ul#objtopnav    { margin: 0px; padding: 0px; list-style:none; }
ul#objtopnav li { margin: 0px; padding: 12px 0px; }
ul#objtopnav a  { background-color: #FFF; margin: 0px; padding: 12px 22px; border-right: 1px solid white; }
ul#objtopnav a:hover { background-color: #f4f7fd; }
ul#objtopnav #selected { background-color: #3399ff; color: white; font-weight: 600; }
*/

.objtopnav { display: flex; flex-flow: row nowrap; justify-content: space-between; margin: 0px; padding: 0px; background-color: #FFF; border-bottom: 2px solid #e0e0e0; }

.objtopnav ul { display: flex; margin: 0px; padding: 0px; list-style: none; }
.objtopnav li { display: block; margin: 0px; padding: 0px; background-color: #FFF; border-right: 0px solid #ddd; }
.objtopnav li.textheader { display: block; padding: 12px 28px 12px 28px; }
.objtopnav li a { display: block; margin: 0px; padding: 12px 28px 12px 28px; }
.objtopnav li a:hover { background-color: #f4f7fd;  }
.objtopnav li a.selected { color: #FFF; background-color: #3492ff;  font-weight: 700; text-shadow: 0px 1px 0px #000000; }

.objtopnav .help { margin: 0px; padding: 0px; }
.objtopnav .help a { display: block; height: 40px; width: 40px; }
.objtopnav .help a:hover { background-color: #f4f7fd; }
.objtopnav .help a img { margin: 0px; padding: 0px; }
.objtopnav .help a img:hover { background-color: #f4f7fd; }

td.showerr      { color: black; background-color: white; }
td.hint         { color: black; background-color: #FFDD88; font-weight: bold; }
td.error        { color: white; background-color: #AF0F24; font-weight: bold; }
td.error a:link, td.error a:visited, td.error a:active { text-decoration: underline; color: white; }
td.error a:hover { background-color: #600; }

div.hint        { color: black; background: #FFDD88; font-weight: bold; }
div.error       { color: white; background: #AF0F24; font-weight: bold; }
span.error      { color: white; background: #AF0F24; font-weight: bold; }

td.helpcaption  { font-weight: bold; }


/* --- IDs and Classes --- */

.header { display: flex; flex-flow: row wrap; justify-content: space-between; margin-bottom: 27px; background-color: #186ac5; background: linear-gradient(to right, #1d81f2 0%, #186ac5 80%);}
.header a:link, .header a:active, .header a:visited { color: #FFF; font-weight: 600; }
.header a:hover, .header a:hover img { background-color: #07468d; }

.dialogcontainer { margin: 100px auto 32px auto; width: 450px; }
.dialoglogin { margin-bottom: 20px; padding-bottom: 15px; min-height: 200px; background-color: #fafafa; }
.dialogmodal { margin: 100px auto 20px auto; padding: 30px; background-color: #fafafa; }

#product { margin: 25px 0px 10px 20px; }
#controlpanel { margin: 35px 37px 18px 0px; padding: 0px; color: #FFF; }
.controlitem { margin: 0px 0px 0px 22px; padding: 0px; display: inline-block; }
.controlicon {  margin: 0px 8px -3px 0px; }
.icon-eye { margin-bottom: -5px; }

.interface { display: flex; flex-flow: row nowrap; margin-bottom: 28px; }

.nav { flex: 0 0 215px; margin-right: 32px; padding-top: 0px; box-shadow: 2px 2px 4px #dfdfdf; }
.nonav { margin-left: 19px; padding-top: 0px; }

.object { flex: 0 0 210px; background-color: #f5f5f5; text-align: center; box-shadow: 2px 2px 4px #e0e0e0; }

.content { flex: 1 0 0; margin-right: 26px; background-color: #fbfbfb; box-shadow: 2px 2px 4px #e0e0e0; }

.form { margin: 24px 24px 24px 24px; background-color: #fbfbfb; }

.small { font-family: Roboto, arial, helvetica, sans-serif; font-size: 11px; }

.showerrhint { color: #888888; }
.showerrwarning { color: #EE7E47; }
.showerrerror { color: #AF0F24; }
.showerrfatalerror { color: #FF0000; }
.showerrcriticalerror { color: #FF0000; }

.shadow { box-shadow: 3px 3px 2px 0px #DFDFDF; }

.icon-alignment { vertical-align: top; }
.icons-nowrap { white-space: nowrap; }

.bottom-spacing { margin-bottom: 10px; }

.speedin {
    display: inline-block;
    background-color: #d7e9ff;
    background: linear-gradient(to bottom, #d7e9ff 32%, #c5dcfb 100%);
    border-top: 2px solid #004ecc;
    width: 7px;
}

.speedout {
    display: inline-block;
    background-color: #fed1c3;
    background: linear-gradient(to bottom, #fed1c3 32%, #fcbeac 100%);
    border-top: 2px solid #ea3200;
    width: 7px;
}

.speedin-flatline {
    display: inline-block;
    background-color: #d7e9ff;
    background: linear-gradient(to bottom, #d7e9ff 32%, #c5dcfb 100%);
    border-top: 1px solid #c5dcfb;
    width: 7px;
}

.speedout-flatline {
    display: inline-block;
    background-color: #fed1c3;
    background: linear-gradient(to bottom, #fed1c3 32%, #fcbeac 100%);
    border-top: 1px solid #fcbeac;
    width: 7px;
}

/* --- Navigation --- */

ul.navigation { margin: 0px; padding: 0px; list-style: none; background-color: #FFF; }
ul.navigation li { }
ul.navigation li a { background-color: #FFF; color: #333; display: block; padding: 13px 8px 12px 56px; font: 15px Roboto, sans-serif; font-weight: 600; text-decoration: none; }

ul.navigation li a.icon-mainpage { background: url(/pictures/icon-mainpage.svg) no-repeat 21px 10px; }
ul.navigation li a.icon-mainpage-white { background: url(/pictures/icon-mainpage-white.svg) no-repeat 21px 10px; }
ul.navigation li a.icon-usermanager { background: url(/pictures/icon-usermanager.svg) no-repeat 21px 10px; }
ul.navigation li a.icon-usermanager-white { background: url(/pictures/icon-usermanager-white.svg) no-repeat 21px 10px; }
ul.navigation li a.icon-network { background: url(/pictures/icon-network.svg) no-repeat 21px 10px; }
ul.navigation li a.icon-network-white { background: url(/pictures/icon-network-white.svg) no-repeat 21px 10px; }
ul.navigation li a.icon-services { background: url(/pictures/icon-services.svg) no-repeat 21px 10px; }
ul.navigation li a.icon-services-white { background: url(/pictures/icon-services-white.svg) no-repeat 21px 10px; }
ul.navigation li a.icon-system { background: url(/pictures/icon-system.svg) no-repeat 21px 10px; }
ul.navigation li a.icon-system-white { background: url(/pictures/icon-system-white.svg) no-repeat 21px 10px; }
ul.navigation li a.icon-information { background: url(/pictures/icon-information.svg) no-repeat 21px 10px; }
ul.navigation li a.icon-information-white { background: url(/pictures/icon-information-white.svg) no-repeat 21px 10px; }
ul.navigation li a.icon-groupware { background: url(/pictures/icon-groupware.svg) no-repeat 23px 10px; }
ul.navigation li a.icon-groupware-white { background: url(/pictures/icon-groupware-white.svg) no-repeat 23px 10px; }

ul.navigation li a:hover { background-color: #f4f7fd; }
ul.navigation li a.selected { background-color: #3492ff; color: white; }
ul.navigation li a.disabled { color: #ccc; }
ul.navigation li a.disabled:hover { background-color: #f4f7fd; }

ul.navigation_second { margin: 0px; padding: 0px; list-style: none; }
ul.navigation_second li a { background-color: #FFF; color: #333; display: block; padding: 13px 8px 11px 56px; font: 15px Roboto, sans-serif; font-weight: 600; text-decoration: none; }
ul.navigation_second li a:hover { background-color: #f4f7fd; }
ul.navigation_second li a.selected { background-color: #3492ff; color: white; 
text-shadow: 0px 1px 1px #000; }
ul.navigation_second li a.disabled { color: #AEBAD4; }
ul.navigation_second li a.icon-arrow { background: url(/pictures/icon-arrow-right.svg) no-repeat 24px 13px; background-color: #FFF; }
ul.navigation_second li a.icon-arrow:hover { background-color: #f4f7fd; }
ul.navigation_second li a.icon-arrow-down { background: url(/pictures/icon-arrow-down.svg) no-repeat 24px 13px; background-color: #3492ff; }

ul.navigation_third { margin: 0px; padding: 0px; list-style: none; }
ul.navigation_third li a { background-color: #FFF; color: #333; display: block; padding: 13px 8px 11px 74px; font: 15px Roboto, sans-serif; font-weight: 400; text-decoration: none; }
ul.navigation_third li a:hover { background-color: #f4f7fd; }
ul.navigation_third li a.selected { background-color: #3492ff; color: white; text-shadow: 0px 1px 0px #000; }
ul.navigation_third li a.disabled { color: #AEBAD4; }
ul.navigation_third li a.icon-arrow { background: url(/pictures/icon-arrow-right.svg) no-repeat 49px 13px; background-color: #FFF; }
ul.navigation_third li a.icon-arrow:hover { background-color: #f4f7fd; }
ul.navigation_third li a.icon-arrow-down { background: url(/pictures/icon-arrow-down.svg) no-repeat 49px 13px; background-color: #3492ff; }

ul.navigation_fourth { margin: 0px; padding: 0px; list-style: none; }
ul.navigation_fourth li a { background-color: #FFF; color: #333; display: block; padding: 13px 8px 11px 90px; font: 15px Roboto, sans-serif; font-weight: 400; text-decoration: none; }
ul.navigation_fourth li a:hover { background-color: #f4f7fd; }
ul.navigation_fourth li a.selected { background-color: #3492ff; color: white; text-shadow: 0px 1px 1px #000; }
ul.navigation_fourth li a.disabled { color: #AEBAD4; }

#queue { display: block; padding: 11px; background-color: #ffff52; font: bold 15px Roboto, sans-serif; }
#pii_visible { display: block; padding: 11px; background-color: #ffffc0; }

/* Responsive code for tablets and smartphones */

@media only screen and (max-width: 1024px) {
    .dialogcontainer {
        margin: 80px auto; padding: 0px;
        width: 68%;
    }
}

@media only screen and (max-width: 480px) {
    .dialogcontainer {
        margin: 10px auto;
        padding: 0px;
        padding-right: 0px;
        width: 90%;
    }

    .mobile-input { width: 150px; }
}