/* 
 * ___.           __   
 * \_ |__   _____/  |_ 
 *  | __ \_/ ___\   __\
 *  | \_\ \  \___|  |  
 *  |___  /\___  >__|  
 *      \/     \/      
 *      
 * color scheme for bct: normal color > reduced brightness
 * cyan 39a7db > 2e7a9f
 * rot e6511e > a73f1b
 * hellgrau ececec > acacac
 * dunkelgrau 777777 > 595959
 * placeholder, by armin cecece > cecece
 */
* {
    margin: 0px;
    padding: 0px;
    /* -webkit-appearance: none;*/
}

a {
    color: #39a7db /* bctcyan */;
}

a:hover {
    color: #2e7a9f /* bctcyan */;
}

.bctblue {
    color: #39a7db;
}

.bctred {
    color: #e6511e;
}

.input_infomsg {
    color: white;
    background-color: #39a7db /* bctcyan */;
    line-height: 35px;
    border-radius: 5px;
}

.input_infomsg:not(:empty):before {
    content: url("icons/small/white/full/tick.svg");
    padding-right: 5px;
    min-height: 30px;
    float: left;
}

.input_errormsg {
    color: white;
    background-color: #e6511e /* bctcyan */;
    line-height: 35px;
    border-radius: 5px;
}

.input_errormsg:not(:empty):before {
    content: url("icons/small/white/full/x.svg");
    padding-right: 5px;
    min-height: 30px;
    float: left;
}

.progress {
    color: white;
    background-color: #39a7db /* bctcyan */;
    height: 5px;
    border-radius: 5px;
    margin-top: 2px;
}

.error {
    color: #e6511e;
}

input[type="text"].error, input[type="number"].error {
    color: black;
    border-color: #e6511e;
}

.errordescription {
    color: #e6511e;
    font-style: italic;
}

.clear {
    clear: both;
}

.input_warnmsg {
    color: #000000; /* bctcyan */;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.input_warnmsg:not(:empty):before {
    content: url("icons/small/black/full/warning.svg");
    float: left;
    margin-top: -7px;
    min-height: 30px;
}

.input_notemsg {
    color: #777777; /* bctcyan */;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.input_notemsg:not(:empty):before {
    content: url("icons/small/configweb/full/warning.svg");
    float: left;
    margin-top: -7px;
    min-height: 30px;
}

.errormsg {
    color: #e6511e /* bctcyan */;
}

p {
    font-family: TSTARRegular /* bctfont */, sans-serif;
}

input[type="button"], .linkbutton {
    font-family: TSTARMedium /* bctfont */, sans-serif;
    float: right;
    background-color: #39a7db /* bctcyan */;
    border: 2px solid #39a7db /* bctcyan */;
    color: white;
    padding-top: 2px;
    text-transform: uppercase;
    margin-top: 2px;
    width: auto;
    padding-left: 45px;
    padding-right: 45px;
    border-radius: 5px;
    min-height: 30px;
}

input[type="submit"]:enabled, input[type="button"]:enabled, .linkbutton:enabled
    {
    /* only change cursor to pointer if element is enabled as requested by ajegl*/
    cursor: pointer;
}

/* both <input> and <a> tags. <a> tags need class="savelink", <input> don't  */
input[type="submit"], .linkbutton {
    font-family: TSTARMedium /* bctfont */, sans-serif;
    float: right;
    background-color: #39a7db /* bctcyan */;
    border: 2px solid #39a7db /* bctcyan */;
    color: white;
    padding-top: 2px;
    text-transform: uppercase;
    width: auto;
    padding-left: 45px;
    padding-right: 45px;
    border-radius: 5px;
    min-height: 30px;
    /* damit zwei untereinanderstehende input buttons nicht "streifen" sondern einen minimalabstand haben */
    margin-top: 2px;
}

@media only screen and (max-width: 650px) {
    input[type="button"], input[type="submit"], .linkbutton {
        width: 100%;
    }
}

/* buttons in tabellen sollen nicht rechtsbuendig sein sondern so wie der text (1. spalte: links, 2.-n-te spalte: mittig */
table input[type="submit"] {
    float: none;
}

input[type="submit"].redbutton {
    background-color: #e6511e /* bctcyan */;
    /*opera displays blue border on red buttons in clicked state */
    border: 2px solid #e6511e /* bctcyan */;
}

input[type="submit"].redbutton:hover {
    background-color: #a73f1b /* bctcyan */;
    /*opera displays light red border in hover state */
    border: 2px solid #a73f1b /* bctcyan */;
}

input[type="submit"].greybutton {
    background-color: #ececec /* bctcyan */;
    color: #777777 /* bctcyan */;
    border: 2px solid #777777 /* bctcyan */;
}

input[type="submit"].greybutton:hover {
    background-color: #acacac /* bctcyan */;
    border: 2px solid #acacac /* bctcyan */;
}

input.topmargin[type="submit"], .topmargin {
    margin-top: 50px;
}

.buttonssavecancel {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

.buttonssavecancel input[type="submit"] {
    margin-left: 20px;
    width: 200px;
    /* fixed, da muss man seinen text reinbekommen */
}

.buttonssavecancel input[type="button"] {
    margin-left: 20px;
    width: 200px;
    /* fixed, da muss man seinen text reinbekommen */
}

input[type="submit"]+* {
    clear: both;
}

input[type="button"]+* {
    clear: both;
}

input[type="button"]:hover:enabled, input[type="submit"]:hover:enabled {
    background-color: #2e7a9f /* bctcyan */;
    border: 2px solid #2e7a9f /* bctcyan */;
}

input[type="file"] {
    font-size: 12px;
}

input[type="color"] {
    display: block;
    min-height: 30px;
}

input[type="text"] {
    display: block;
    min-height: 26px;
}

.screentitle {
    margin-top: 1.2px;
}

div.screentitle {
    flex-grow: 10;
    -webkit-flex-grow: 10;
    -moz-flex-grow: 10;
}

div.spacing {
    margin-top: 10px;
}

input[type="password"] {
    display: block;
    min-height: 26px;
}

input[readonly] {
    background-color: #ececec;
    color: #acacac;
}

input[readonly]:focus {
    border-color: #39a7db /* bctcyan */;
}

textarea {
    width: 100%;
    min-height: 100px;
    border: 2px solid #ececec;
    border-radius: 5px;
    color: #777777;
    box-sizing: border-box;
}

div.magnifycontainer.nomarginbottom div, div.magnifycontainer.nomarginbottom input,
    .nomarginbottom, .magnifycontainer div.nomarginbottom, input[type="text"].nomarginbottom,
    magnifycontainer.nomarginbottom div magnifycontainer.nomarginbottom input
    {
    margin-bottom: 0px;
}

input {
    width: 100%;
    box-sizing: border-box;
}

input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
}

input[type="radio"] {
    width: auto;
    margin-right: 10px;
}

/******** checkboxes *********/
label {
    /* line-height: 40px;*/
    
}

.noresults {
    display: none;
}

.results-active {
    display: none;
}

.results li {
    list-style: none;
}
/******** /checkboxes *********/
input {
    font-family: TSTARRegular /* bctfont */, sans-serif;
    font-size: 14px;
    background: transparent;
    border-radius: 5px;
    border: 2px solid #ececec;
    padding-left: 10px; /*login*/
    padding-right: 10px; /*login*/
    color: #777777;
    line-height: 24px;
    /* 22 statt 26: text in input sch�n in mitte rutschen */
    padding-top: 2px; /* text in input sch�n in mitte rutschen */
}

.magnifycontainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.magnifycontainer div:hover {
    background-color: #acacac;
    border-color: #acacac;
}

.magnifycontainer input {
    border-radius: 5px 0 0 5px;
    border-right: 0px;
}

.magnifycontainer div {
    background: url("icons/small/configweb/full/magnifier.svg") no-repeat;
    width: 28px;
    border: 2px solid #ececec;
    border-color: #ececec;
    border-radius: 0 5px 5px 0;
    border-left: 0px;
    background-color: #ececec;
    border-image: none;
    background-position: center center;
    margin-bottom: 15px;
    /* weil text felder auch diesen margin haben */
    /*position: relative;
     float: right;
     top: -32px;
     left: -2px;
     */
    cursor: pointer;
}

input:focus {
    border: 2px solid #39a7db /* bctcyan */;
    outline: 0px;
}

input[type="range"] {
    width: 87%;
    border: 0px;
}

input[type="range"]:focus {
    outline: 0px;
}

input:-webkit-autofill {
    /* workaround: transparenter background funktioniert nicht, deshalb wei�. border muss gesetzt sein sonst wird box shadow nicht angewandt */
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    border: 1px solid black;
}

@media only screen and (max-width: 650px) {
    /* mobile */
    input {
        width: 100%;
    }
}

@font-face {
    font-family: TSTARBold;
    src: url("fonts/TSTAR-BoldWeb.woff") format("woff");
}

@font-face {
    font-family: TSTARRegular;
    src: url("fonts/TSTAR-RegularWeb.woff") format("woff");
}

@font-face {
    font-family: TSTARMedium;
    src: url("fonts/TSTAR-MediumWeb.woff") format("woff");
}

@font-face {
    font-family: TSTARMonoRoundReg;
    src: url("fonts/TSTARMonoRoundRegWeb.woff") format("woff");
}

@font-face {
    font-family: TSTARLight;
    src: url("fonts/TSTAR-LightWeb.woff") format("woff");
}

.tstarmedium {
    font-family: TSTARMedium, sans-serif;
}

html {
    color: #777777;
    background: #ffffff;
    font-size: 14px;
    height: 100%;
    font-family: TSTARRegular /* bctfont */, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: subpixel-antialiased;
    /* sonst wird footer font hellgrau */
}

html.loginstyle {
    background: url("img/wallpaper_login.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    -khtml-background-size: cover;
}

body {
    width: 100%;
    height: 100%;
}

h1, h2, h3, h4, h5, h6, h7, h8, h9 {
    font-family: TSTARBold /* bctfont */, sans-serif;
    color: #39a7db /* bctcyan */;
    /* unter h1 immer 15px abstand, damit fliesztext schoen formatiert wird */
    padding-bottom: 15px;
}

/* wenn ein div block vor einem ueberschriftsblock ist, dann auch ein spacing vor der ueberschrift */
div h2, div h3, div h4, div h5, div h6, div h7, div h8, div h9, div h10,
    div h20 {
    padding-top: 15px;
}

h1 {
    font-size: 18px;
}

h2, h3, h4 {
    font-size: 14px;
}

h5 {
    font-size: 12px;
}

h10, h20 {
    display: block;
    font-family: TSTARRegular /* bctfont */;
    color: #777777;
}

h20 {
    font-size: 14px;
}

h21 {
    font-size: 12px;
}

#logo.commend {
    padding-left: 20px;
    padding-top: 28px;
}

#logo.bct {
    padding-left: 20px;
    padding-top: 30px;
}

#logomobile {
    float: left;
    padding-top: 10px;
}

.loginstyle body #maincontainerlightbox #topspacer {
    display: none;
}

#maincontainer {
    min-height: 80%;
}

html.loginstyle body div div div div#nav {
    display: none;
}

.loginstyle #username, .loginstyle #passwordplain, .loginstyle #password
    {
    font-size: 20px;
    /*margin-top: 20px;*/
    height: 39px;
}

.loginstyle #username, .loginstyle #password, .loginstyle #passwordplain,
    .loginstyle #signinbutton {
    width: 320px;
    background-color: #8f8a87;
    color: #373637;
    margin: auto auto;
    margin-bottom: 10px;
    display: block;
}

input[type="submit"]#signinbutton {
    float: none;
}

.loginstyle #signinbutton {
    background-color: #39a7db /* bctcyan */;
    color: white;
    height: 39px;
    text-transform: uppercase;
    font-size: 20px;
    margin-top: 30px;
    width: 320px;
}

@media only screen and (max-width: 650px) {
    .loginstyle #username, .loginstyle #password, .loginstyle #passwordplain,
        .loginstyle #signinbutton {
        width: 100%;
        padding-right: 45px;
    }
}

::-webkit-input-placeholder {
    color: #cecece;
}

::-moz-placeholder {
    color: #cecece;
}

:-ms-input-placeholder {
    color: #cecece;
}

input:-moz-placeholder {
    color: #cecece;
}
/*
 .maincontainerlightboxactive {
 background-color: black;
 opacity: 0.75;
 -moz-opacity: 0.75;
 }*/
.transparent50 {
    background: transparent;
    opacity: 0.50;
    -moz-opacity: 0.50;
}

.container {
    margin: auto;
    max-width: 1120px;
    display: -webkit-flex;
    display: flex;
}
/* MENU ************************/
.nav {
    cursor: pointer;
    min-width: 220px;
    text-transform: uppercase;
    padding-left: 20px;
    display: block;
}

.nav a {
    text-decoration: none;
    color: white;
    display: block;
    /* damit der gesamte menupunkt klickbar wird und nicht nur der text des linkes */
}

.nav ul.sticky {
    position: fixed;
    width: 220px;
    top: 20px;
}

.nav ul.reduce {
    background-color: red;
}

.nav .highlight a {
    /* aktuell ausgewahelter menupunkt (nur der linktext) */
    background-color: white;
    color: black;
    font-weight: bold;
}

.nav2 {
    /* zwischenraume zwischen 2nd level menupunkten     */
    background-color: #ececec;
}

.nav2 li a {
    /* 2nd level */
    background-color: #ececec;
    color: #777777;
}

.nav ul li:hover .actioncounter {
    background-color: white;
}

.nav>ul>li>a:hover, .nav2>li>a:hover {
    background-color: white;
    color: #000;
}

.nav ul li:first-child {
    margin-top: 0px;
    /* erstes element im menu mit 0pixel abstand ganz oben anordnen, insb. für 2nd level */
}

.nav ul li {
    /* 1. level */
    background-color: white;
    color: black;
    margin-top: 2px;
    background-color: black;
    color: white;
    line-height: 28px;
    text-align: center;
    list-style: none;
}

ul.nav2 {
    display: none; /* wird per javascript ausgeklappt */
}

.actioncounter {
    background-color: #fff;
    border-radius: 50%;
    color: #000;
    float: right;
    font-size: 10px;
    height: 18px;
    line-height: 18px;
    margin-top: 3px;
    font-family: TSTARMonoRoundReg /* bctfont */;
    width: 18px;
    margin-left: -23px;
    margin-top: 5px;
    margin-right: 3px;
    margin-right: 5px;
    /*  top: -28px; wird über link (display:block) wieder zurück rauf geschoben */
    position: relative;
    /* das element wird relativ zum link block (link sollte block haben damit er über die gesamte länge des menupunktes erstreckt und nicht nur so lange wie sein text ist) angeordnet damit es dann darübergeschoben werden kann (negativer top)*/
}

.nav li.rebootneeded {
    background-color: #39a7db /* bctcyan */;
}
/* MENU ************************/
/* TOP ************************/
#top {
    background: #39a7db /* bctcyan */;
    height: 115px;
    padding-bottom: 5px;
    height: 85px;
    font-family: TSTARMedium /* bctfont */, sans-serif;
}

#mobilemaininmenu {
    font-family: TSTARMedium /* bctfont */, sans-serif;
}

#topspacer {
    height: 20px;
}

.stdspacer {
    height: 50px;
}

.logo {
    display: inline-block;
}

.loginform {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 30%;
}

@media only screen and (max-height: 400px) {
    .loginform {
        position: relative;
    }
}

.login_error {
    color: #e6511e;
    margin: auto;
    width: 320px;
    padding-left: 15px;
}

@media only screen and (max-width: 650px) {
    .login_error {
        width: auto;
    }
}

.headertextinfo {
    text-transform: uppercase;
    display: inline-block;
    line-height: 32px;
    color: white;
    /* ... if text is too long */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    /* /... if text is too long */
}

.white {
    color: white;
}

.loginoutbutton {
    width: 150px /* french logout string 'se désinscrire' needs space  */;
    background-color: black;
    color: white;
    text-align: center;
    height: 30px;
    line-height: 32px;
    text-transform: uppercase;
}

.loginoutbutton {
    text-decoration: none;
}

.loginoutbutton:hover {
    color: black;
    background-color: white;
    cursor: pointer;
}

.languageselector {
    font-size: 0px;
    /* workaround weil zwischen den li elementen im languageselector sonst ein paar pixel abstand
     * gerendert werden w�rden: siehe http://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
}

.languageselector ul {
    padding: 0px;
    border: 0px;
    margin: 0px;
    outline: 0px;
}

.languageselector li, .languageselector li a {
    font-size: 14px;
    background-color: white;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 32px;
    width: 30px;
    height: 30px;
    display: inline-block;
    list-style: none;
    text-align: center;
    color: black;
}

.languageselector li.active, .languageselector li.active a {
    background-color: black;
    color: white;
    text-decoration: none;
}

.languageselector li a:hover {
    background-color: black;
    color: white;
}

#onetwothreecontainer {
    margin: auto; /* this centers container */
    max-width: 1100px;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    padding-right: 20px;
}

#one {
    min-width: 200px;
}

#three {
    width: 100%;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.headertextvalues {
    color: black;
    padding-right: 10px;
}

#four {
    min-width: 150px;
}

#four a {
    text-decoration: none;
}

#five {
    min-width: 30px;
}

#six {
    min-width: 120px;
}
/* TOP ************************/
/* TABELLEN ************************/
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px;
    font-size: 14px;
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
}

th {
    color: #777777;
    height: 30px;
    background-color: #ececec;
    font-family: TSTARMedium /* bctfont */, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    padding-left: 2px;
    padding-right: 2px;
    border-right: 2px solid white;
}

th a {
    text-decoration: none;
    color: #777777;
}

th a:hover {
    color: #39a7db /* bctcyan */;
}

th:first-child {
    /* runde ecken links oben in tabelle */
    border-radius: 5px 0px 0px 5px;
    text-align: left;
    padding-left: 10px;
}

th:last-child {
    /* runde ecken rechts oben in tabelle */
    border-radius: 0px 5px 5px 0px;
    /* text-align: right; schaut nicht gut aus zB bei https://192.168.233.115:8080/config/services */
    padding-right: 10px;
}

th.crud {
    width: 10px;
}

tr {
    
}

td {
    border-bottom: 1px solid #ececec;
    text-align: center;
    padding-left: 2px;
    padding-right: 2px;
    font-family: TSTARRegular /* bctfont */, sans-serif;
    height: 30px;
    /* interpreted as min-height in tables */
}

td:first-child {
    text-align: left;
    padding-left: 10px;
}

tr:last-child td {
    border-bottom: none;
}

td.ok {
    background-image: url("icons/small/configweb/full/tick.svg");
}

td.notok {
    background-image: url("icons/small/configweb/full/x.svg");
}

.center {
    text-align: center;
}

td.center {
    text-align: center;
    padding-left: 0px;
}

table.vertical td {
    text-align: left;
    height: 30px;
}

table.vertical th {
    width: 200px;
    height: 30px;
    text-align: center;
}

/* /TABELLEN ************************/
/* CRUD *****************************/
a.crud {
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background-color: #ececec;
    display: inline-block;
    position: relative;
    top: 2px;
    cursor: pointer;
}

a.crud:hover {
    background-color: #acacac;
}

a.crud.edit {
    background-image: url("icons/small/configweb/full/edit.svg");
}

a.crud.magnifier {
    background-image: url("icons/small/configweb/full/magnifier.svg");
}

a.crud.info {
    background-image: url("img/icoinfo.svg");
}

a.crud.document {
    background-image: url("img/icodocumentdarkgray.svg");
}

a.crud.repair {
    background-image: url("/static/icons/small/configweb/full/plaster.svg");
    background-size: cover;
}

.hooktiny {
    background-image: url("img/ichohooktinygray.svg");
}

.hooktiny:hover {
    background-color: #acacac;
    background-image: url("img/icohooktinyred.svg");
}

a.crud.documenthook {
    background: url("img/icodocumentdarkgray.svg") no-repeat scroll center
        center, url("img/icohooktinygray.svg") no-repeat scroll 80% 40%
        rgba(0, 0, 0, 0);
    background-color: #ececec;
}

a.crud.documenthook:hover {
    background: url("img/icohooktinycyan.svg") no-repeat scroll 80% 40%,
        url("img/icodocumentdarkgray.svg") no-repeat scroll center
        center;
    background-color: #acacac;
}

a.crud.documentcross {
    background: url("img/icodocumentdarkgray.svg") no-repeat scroll center
        center, url("img/icocrosstinygray.svg") no-repeat scroll 70% 50%
        rgba(0, 0, 0, 0);
    background-color: #ececec;
}

a.crud.documentcross:hover {
    background: url("img/icocrosstinyred.svg") no-repeat scroll 70% 50%,
        url("img/icodocumentdarkgray.svg") no-repeat scroll center
        center;
    background-color: #acacac;
}

a.crud.delete {
    background-color: #e6511e;
    background-image: url("icons/small/white/full/waste.svg");
}

a.crud.delete:hover {
    background-color: #a73f1b;
}

a.crud.print {
    background-image: url("img/icoprint.svg");
}

a.star {
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    top: 2px;
    cursor: pointer;
    background-image: url("icons/small/configweb/full/home.svg");
}

a.star:hover {
    background-image: url("icons/small/home.svg");
}

a.star.set {
    background-image: url("icons/small/configweb/home.svg");
}

/* /CRUD *****************************/
/* PAGINATOR *************************/
.flexcontainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.flexwrap {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.flexcontainer-reverse {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flexwrap-reverse {
    flex-wrap: wrap-reverse;
    -webkit-flex-wrap: wrap-reverse;
}

.twocols {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.twocols>div {
    width: 50%;
}

.twocols>div:first-child {
    width: 48%;
    margin-right: 2%;
}

@media only screen and (max-width: 650px) {
    .twocols>div {
        width: 100%;
    }
}

.flexspaceinbetween {
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.textcenter {
    text-align: center;
}

.paginatorcounter-infotext {
    position: relative;
    height: 40px; /* nur ohne ueberschrift todo */
}

.paginatorcounter-infotext span {
    position: absolute;
    bottom: 0;
    text-align: right;
    width: 100%;
    font-size: 14px;
}

.paginator-pages {
    width: 100%;
    background-color: #ececec;
}

.paginator-pages a {
    color: #777777;
    text-decoration: none;
}

.paginator-first, .paginator-previous, .paginator-last, .paginator-next
    {
    width: 50px;
    cursor: pointer;
}

.paginator-first {
    background: url("img/icofirst.svg") no-repeat center;
    border-radius: 5px 0px 0px 5px;
    background-color: #ececec;
}

.paginator-first:hover {
    background-color: #acacac;
    color: white;
}

.paginator-first.disabled {
    background: url("img/icofirstlight.svg") no-repeat center;
    pointer-events: none;
    background-color: #ececec;
    cursor: default;
}

.paginator-last {
    background: url("img/icolast.svg") no-repeat center;
    border-radius: 0px 5px 5px 0px;
    background-color: #ececec;
}

.paginator-last:hover {
    background-color: #acacac;
    color: white;
}

.paginator-last.disabled {
    background: url("img/icolastlight.svg") no-repeat center;
    background-color: #ececec;
    pointer-events: none;
    cursor: default;
}

.paginator-previous {
    background: url("img/icoprevious.svg") no-repeat center;
    border-left: 2px white solid;
    border-right: 2px white solid;
    background-color: #ececec;
}

.paginator-previous.disabled {
    background: url("img/icopreviouslight.svg") no-repeat center;
    background-color: #ececec;
    pointer-events: none;
    cursor: default;
}

.paginator-previous:hover {
    background-color: #acacac;
    color: white;
}

.paginator-next {
    background: url("img/iconext.svg") no-repeat center;
    border-left: 2px white solid;
    border-right: 2px white solid;
    background-color: #ececec;
}

.paginator-next:hover {
    background-color: #acacac;
    color: white;
}

.paginator-next.disabled {
    background: url("img/iconextlight.svg") no-repeat center;
    background-color: #ececec;
    pointer-events: none;
    cursor: default;
}

.paginatorcontainer {
    height: 30px;
    font-family: TSTARMedium /* bctfont */, sans-serif;
}

.paginator-current {
    font-weight: bold;
    color: black;
}

.paginator-gotopage {
    background-color: #ececec;
    float: left;
    margin: 0;
    margin-left: 15px;
    padding: 0;
    border: 0px;
    text-align: center;
    width: 40px;
    height: 16px;
    position: relative;
    border-radius: 0px;
    line-height: 18px;
    font-size: 14px;
}

input.paginator-gotopage {
    min-height: initial;
}

.paginator-gotopage:focus {
    border-radius: 0px;
    -moz-outline-radius: 0px;
    -webkit-outline-radius: 0px;
}

.numbers {
    display: inline-block;
    width: 50px;
    height: 23px;
    padding-top: 7px;
    cursor: pointer;
}

.numbers:hover {
    background-color: #acacac;
    color: white;
}

.numbers.active {
    background-color: #777777;
    color: white;
    width: 90px;
    text-align: left;
}

.numbers.active a {
    color: white;
}

.paginator-onlyonepage {
    color: #777777;
    display: block;
    margin-top: 7px;
}
/* /PAGINATOR *************************/
.description {
    font-size: 12px;
}

#main {
    flex-grow: 4;
    /* main should utilize all available space. a width of 100% would be interpreted as 100% of browser width, not as remaining available space */
    -webkit-flex-grow: 4;
    /* seitlicher abstand links und rechts. oben sollen die �berschriften b�ndig mit dem menu links sein */
    padding-left: 20px;
    padding-right: 20px;
    /* /seitlicher abstand links und rechts. oben sollen die �berschriften b�ndig mit dem menu links sein */
    min-height: 300px;
}

div.genericbutton {
    display: block;
    line-height: 26px;
    float: right;
}

a.genericbutton {
    text-transform: uppercase;
    background-color: #ececec;
    padding-left: 45px;
    padding-right: 30px;
    min-height: 25px;
    padding-top: 5px;
    float: right;
    border-radius: 5px;
    font-family: TSTARBold /* bctfont */, sans-serif;
    margin-top: -14px;
    text-decoration: none;
}

a.genericbutton.center {
    float: none;
    padding-bottom: 15px;
}

a.genericbutton:hover {
    background-color: #acacac;
    color: #ececec;
    cursor: pointer;
}

.genericbutton.red {
    background-color: #e6511e;
    color: white;
}

.genericbutton.red a {
    font-family: TSTARBold /* bctfont */, sans-serif;
}

.genericbutton.cyan {
    background-color: #39a7db /* bctcyan */;
    color: white;
}

.genericbutton.cyan:hover {
    background-color: #2e7a9f /* bctcyan */;
    color: white;
}

.genericbutton.big {
    padding-bottom: 10px;
    padding-top: 20px;
    padding-right: 40px;
}

.genericbutton.red:hover {
    background-color: #a73f1b;
}

.genericbutton.plus {
    background: url("icons/small/configweb/full/plus.svg") no-repeat center
        center;
    background-color: #ececec;
    padding-left: 0px;
    /*background-size: 70%;*/
    margin-left: 10px;
    margin-top: -2px;
}

.genericbutton.questionmark {
    padding-left: 0px;
    background: url("img/icoquestionmark.svg") no-repeat;
    border-radius: 0px;
    padding-right: 25px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-left: 10px;
}

a.genericbutton.questionmark:hover {
    background: url("img/icoquestionmarkblackonwhite.svg") no-repeat;
}

#mobilemenuswitch {
    display: none;
}

#mobiletop {
    display: none;
}

#menuleave {
    float: right;
}

#menuenter {
    float: right;
    padding-top: 4px;
}

#mobilemaininmenu {
    display: none;
}
/* FOOTER *************************/
.loginstyle body div#footercontainer {
    /*#footercontainer {*/
    bottom: 0;
    position: fixed;
    width: 100%;
}

@media only screen and (max-height: 600px) {
    .loginstyle body div#footercontainer {
        display: none;
    }
    .loginstyle body div#footercontentspacer {
        display: none;
    }
}

#footer {
    height: 165px;
    background-color: #ececec;
    font-size: 14px;
}

#innerfooter {
    width: 1120px;
}

#footerlogo, #footeraddress, #footerphonenumbers, #footerofficialnumbers
    {
    padding-top: 25px;
}

@media only screen and (max-width: 700px) {
    #footerlogo {
        display: none;
    }
}

#footerspacer {
    width: 80px;
}

#footerlineone {
    height: 115px;
}

#footercontentspacer {
    height: 80px;
}

@media only screen and (max-width: 940px) {
    #footerofficialnumbers {
        display: none;
    }
}

@media only screen and (max-width: 515px) {
    #footerphonenumbers {
        display: none;
    }
    #footerspacer {
        width: 20px;
    }
    #footer {
        height: 140px;
    }
    #footeraddress {
        width: 230px;
    }
    #footerlineone {
        height: 90px;
    }
}
/* /FOOTER *************************/
@media only screen and (max-width: 650px) {
    /* iphone5 retina: 640px width */
    .notmobile {
        display: none;
    }
    #nav {
        padding-left: 0px;
    }
    .container {
        display: block;
    }
    .menu {
        display: block;
        width: 100%;
        height: auto;
    }
    .content {
        display: block;
        width: 100%;
    }
    #topspacer {
        height: 0px;
    }
    #three {
        min-width: 160px;
        text-align: left;
    }
    #mobilemenuswitch {
        display: block;
        padding-top: 10px;
    }
    #mobiletop {
        display: block;
        padding-top: 18px;
        padding-left: 20px;
        padding-right: 20px;
        margin: auto;
    }
    #onetwothreecontainer {
        display: none;
    }
    #main, #mobilemaininmenu {
        margin: auto;
    }
    #main {
        padding-top: 20px;
    }
    .headertextinfo {
        color: #767676;
    }
    #three {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

#thumbnail img {
    max-width: 128px;
    max-height: 128px;
    margin: 10px;
}

.drop-area {
    width: 100px;
    height: 25px;
    text-align: center;
}

.cameraimage640x480 {
    width: 100%;
    max-width: 640px;
    max-height: 480px;
}

.screenimage800x480 {
    width: 100%;
    max-width: 800px;
    max-height: 480px;
}

.screenimage_max {
    width: 100%;
}

.color {
    width: 60px;
}

.button1col, input[type="submit"].button1col, input[type="button"].button1col
    {
    width: 30px;
}

.button2col, input[type="submit"].button2col, input[type="button"].button2col
    {
    min-width: 60px;
}

.button3col, input[type="submit"].button3col, input[type="button"].button3col
    {
    min-width: 90px;
}

.button4col, input[type="submit"].button4col, input[type="button"].button4col
    {
    min-width: 120px;
}

.button5col, input[type="submit"].button5col, input[type="button"].button5col
    {
    min-width: 150px;
}

.button6col, input[type="submit"].button6col, input[type="button"].button6col
    {
    min-width: 180px;
}

.button7col, input[type="submit"].button7col, input[type="button"].button7col
    {
    min-width: 210px;
}

.button8col, input[type="submit"].button8col, input[type="button"].button8col
    {
    min-width: 240px;
}

.button9col, input[type="submit"].button9col, input[type="button"].button9col
    {
    width: 270px;
}

.button10col, input[type="submit"].button10col, input[type="button"].button10col
    {
    min-width: 300px;
}

.button11col, input[type="submit"].button11col, input[type="button"].button11col
    {
    min-width: 330px;
}

.button12col, input[type="submit"].button12col, input[type="button"].button12col
    {
    min-width: 360px;
}

.divspacer {
    width: 20px;
    height: 20px;
}

.divspacer10 {
    width: 10px;
    height: 10px;
}

.zerowidth {
    width: 0px;
}

.crossbackground {
    background-image: url("img/crossicong.png");
}