:root {
    --serma_color_blue: #0068b4;
    --serma_color_darkblue: #193057;
    --serma_color_border_darkgrey: #9f9f9f;
    --serma_color_background_lightgrey: #f2f2f2;
    --serma_color_radiocheck_grey: #cccccc;
}

/***********************
    Inputs
************************/

input, select {
    max-width:100%;
    -webkit-appearance:none;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    -webkit-touch-callout: none;
    font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin:0px;
}

/* Button */
input[type="button"] {
    text-align: center;
    width: auto;
    min-width: 100px;
    outline: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #ddd;
    background-color: #fff;
    color: var(--serma_color_darkblue);
    -webkit-user-select: none;
}
input[type="button"]:not(:disabled):hover {
    cursor: pointer;
    border: 1px solid var(--serma_color_darkblue);
}
input[type="button"]:not(:disabled):active{
    background-color: #0087FD;
    background-color: var(--serma_color_darkblue);
    color: #ffffff;
}
input[type='button']:disabled{
    background-color: #f2f2f2;
    box-shadow: inset 0 0 0 2px white;
}

input[type="button"].mini {
    height: 40px;
    width: 40px;
    min-width:40px;
}
input[type="button"].mini.edit,
input[type="button"].mini.edit_star,
input[type="button"].mini.save,
input[type="button"].mini.add,
input[type="button"].mini.cancel,
input[type="button"].mini.delete,
input[type="button"].mini.view,
input[type="button"].mini.email,
input[type="button"].mini.moveup,
input[type="button"].mini.movedown,
input[type="button"].mini.check,
input[type="button"].mini.archiv {
    background-position: center;
}

input[type="button"].edit {
    background-image: url('../img/item-edit_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].edit:not(:disabled):active {
    background-image: url('../img/item-edit_32x32_white.png');
}

input[type="button"].edit_star {
    background-image: url('../img/star-edit_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].edit_star:not(:disabled):active {
    background-image: url('../img/star-edit_32x32_white.png');
}
input[type="button"].save {
    background-image: url('../img/item-save_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].save:not(:disabled):active {
    background-image: url('../img/item-save_32x32_white.png');
}
input[type="button"].add {
    background-image: url('../img/item-new_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].add:not(:disabled):active {
    background-image: url('../img/item-new_32x32_white.png');
}
input[type="button"].cancel {
    background-image: url('../img/item-abbort_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].cancel:not(:disabled):active {
    background-image: url('../img/item-abbort_32x32_white.png');
}
input[type="button"].delete {
    background-image: url('../img/delete_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].delete:not(:disabled):active {
    background-image: url('../img/delete_32x32_white.png');
}
input[type="button"].view {
    background-image: url('../img/item-view_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].view:not(:disabled):active {
    background-image: url('../img/item-view_32x32_white.png');
}
input[type="button"].email {
    background-image: url('../img/email_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].email:not(:disabled):active {
    background-image: url('../img/email_32x32_white.png');
}
input[type="button"].search {
    background-image: url('../img/lupe.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].search:not(:disabled):active {
    background-image: url('../img/lupe_white.png');
}
input[type="button"].moveup {
    background-image: url('../img/arrowUp_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].moveup:not(:disabled):active {
    background-image: url('../img/arrowUp_32x32_white.png');
}
input[type="button"].movedown {
    background-image: url('../img/arrowDown_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].movedown:not(:disabled):active {
    background-image: url('../img/arrowDown_32x32_white.png');
}
input[type="button"].form {
    background-image: url('../img/item_32x32_blue.png');
    background-image: url('../img/item-view_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].form:not(:disabled):active {
    background-image: url('../img/item_32x32_white.png');
}
input[type="button"].passwordreset {
    background-image: url('../img/user_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].passwordreset:not(:disabled):active {
    background-image: url(../img/user_32x32_white.png);
}
input[type="button"].refresh {
    background-image: url('../img/refresh_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].refresh:not(:disabled):active {
    background-image: url('../img/refresh_32x32_white.png');
}
input[type="button"].excel {
    background-image: url('../img/excel_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].excel:not(:disabled):active {
    background-image: url('../img/excel_32x32_white.png');
}

input[type="button"].check {
    background-image: url('../img/check_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].check:not(:disabled):active {
    background-image: url('../img/check_32x32_white.png');
}
input[type="button"].archiv {
    background-image: url('../img/item-archiv_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}

input[type="button"].archiv:not(:disabled):active {
    background-image: url('../img/item-archiv_32x32_white.png');
}

input[type="button"].wiedervorlage {
    background-image: url('../img/wiedervorlage_32x32.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
}
input[type="button"].wiedervorlage + span[class="countActiveWiedervorlagen"] {
    background-color: #cce0ff;
    box-sizing: border-box;
    position: relative;
    margin-left: -20px;
    margin-top: -5px;
    vertical-align: middle;
    border-radius: 25px;
    border: 1px solid #0087fd;
    border: 1px solid var(--serma_color_darkblue);
    height: 20px;
    line-height: 18px;
    padding-left: 3px;
    padding-right: 3px;
    text-align: center;
    display: none;
}

input[type="button"].wiedervorlage:not(:disabled):active {
    background-image: url('../img/wiedervorlage_32x32_white.png');
}

input[type="button"].copy {
    background-image: url('../img/copy_32x32_blue.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 36px;
    height: 40px;
    width: 40px;
    min-width: 40px;
    background-position: center;
    line-height: 0;
    text-indent: -9999px;
}

/* rb 2022-01-03 von 800 auf 767 geändert */
/*@media all and (max-width: 800px) {*/
@media all and (max-width: 767px) {
    input[type="button"].edit.canshrink,
    input[type="button"].save.canshrink,
    input[type="button"].add.canshrink,
    input[type="button"].cancel.canshrink,
    input[type="button"].delete.canshrink,
    input[type="button"].view.canshrink,
    input[type="button"].email.canshrink,
    input[type="button"].print.canshrink,
    input[type="button"].moveup.canshrink,
    input[type="button"].movedown.canshrink,
    input[type="button"].wiedervorlage.canshrink {
        height: 40px;
        width: 40px;
        min-width: 40px;
        background-position: center;
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
    }
    input[type="button"].wiedervorlage + span[class="countActiveWiedervorlagen"] {
        display: inline-block;
    }
}
@media all and (max-width: 990px) {
    input[type="button"].edit.canshrink990,
    input[type="button"].save.canshrink990,
    input[type="button"].add.canshrink990,
    input[type="button"].cancel.canshrink990,
    input[type="button"].delete.canshrink990,
    input[type="button"].view.canshrink990,
    input[type="button"].email.canshrink990,
    input[type="button"].print.canshrink990,
    input[type="button"].form.canshrink990,
    input[type="button"].moveup.canshrink990,
    input[type="button"].movedown.canshrink990,
    input[type="button"].wiedervorlage.canshrink990,
    input[type="button"].excel.canshrink990,
    input[type="button"].refresh.canshrink990 {
        height: 40px;
        width: 40px;
        min-width: 40px;
        background-position: center;
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
    }
    input[type="button"].wiedervorlage + span[class="countActiveWiedervorlagen"] {
        display: inline-block;
    }
}
/* rb 2018-04-04 add /  ig 2022-06-02 remove XD */
/*@media all and (max-width: 685px) {
    .EditControls > .historyDates {
        display: none;
    }
}*/

/* Text */
input[type="text"],
input[type="email"],
input[type="date"] {
    height: 21px;
    padding: 1px;
    border: 1px solid #ddd;
    border: 1px solid var(--serma_color_border_darkgrey);
    background-color: #fff;
    -webkit-user-select: text;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus {
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 10px #7da3be;
    -moz-box-shadow: 0 0 10px #7da3be;
    -webkit-box-shadow: 0 0 10px #7da3be;
    border: 1px solid var(--serma_color_darkblue);
}
input[type='text']:disabled,
input[type='email']:disabled,
input[type='date']:disabled {
    background-color: #f2f2f2;
    box-shadow: inset 0 0 0 2px white;
}

/* Password */
input[type="password"] {
    height: 21px;
    padding: 1px;
    border: 1px solid #ddd;
    border: 1px solid var(--serma_color_border_darkgrey);
    background-color: #fff;
    -webkit-user-select: text;
}
input[type="password"]:focus {
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 10px #7da3be;
    -moz-box-shadow: 0 0 10px #7da3be;
    -webkit-box-shadow: 0 0 10px #7da3be;
    border: 1px solid var(--serma_color_darkblue);
}
input[type='password']:disabled {
    background-color: #f2f2f2;
    box-shadow: inset 0 0 0 2px white;
}

/* Datumsfeld mit DatePicker */
input[type="text"][alt^="date"] {
    width: 85px;
}
input[type="text"][alt^="date"] + span{
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    margin-left: -18px;
    vertical-align: middle;
    width: 16px;
    height: 15px;
    margin-bottom: 1px;
    background-image: url(../img/calender_16x16.png);
    background-image: url(../img/calender_16x16-sermablau.png);
    background-position: right;
    background-repeat: no-repeat;
}
input[type="text"][alt^="date"] + span:hover {
    cursor:pointer;
    box-shadow: 0 0 10px #7da3be;
	-moz-box-shadow: 0 0 10px #7da3be;
	-webkit-box-shadow: 0 0 10px #7da3be; 
}
input[type="text"][alt^="date"]:disabled + span {
    display:none;
}
input[type="text"][alt^="date"]::-ms-clear {
    display: none;
    width:0;
    height:0;
}

/* Datepicker overlay */
.datepicker-wrapper {
    cursor:default;
    position:absolute;
    top: 105%;
    left: 18px;
}
.datepicker-calendar {
    font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #000000;
    padding: 2px;
    display: none;
    position: absolute;
    top: 105%;
    right: 0;
    z-index: 10000;
    background-color: #fff;
    box-shadow: 0 0 10px #7da3be;
    -moz-box-shadow: 0 0 10px #7da3be;
    -webkit-box-shadow: 0 0 10px #7da3be;
    border: 1px solid var(--serma_color_darkblue);
}
.open .datepicker-calendar {
    display: block;
    position: absolute;
}
.datepicker-calendar .datepicker-months {
    color: var(--serma_color_darkblue);
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 1px;
    text-align: center;
    font-size: 115%;
    width: 57%;
    float: left;
}
.datepicker-calendar .datepicker-years {
    color: var(--serma_color_darkblue);
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 1px;
    text-align: center;
    font-size: 115%;
    width: 38%;
    float: right;
}
.datepicker-calendar .datepicker-prev-month,
.datepicker-calendar .datepicker-next-month,
.datepicker-calendar .datepicker-prev-year,
.datepicker-calendar .datepicker-next-year {
    color: var(--serma_color_darkblue);
    text-decoration: none;
    padding: 0 .4em;
    cursor: pointer;
}
.datepicker-calendar .datepicker-prev-month,
.datepicker-calendar .datepicker-prev-year {
	float: left;
}
.datepicker-calendar .datepicker-next-month,
.datepicker-calendar .datepicker-next-year {
	float: right;
}
.datepicker-calendar .datepicker-prev-month:hover,
.datepicker-calendar .datepicker-next-month:hover,
.datepicker-calendar .datepicker-prev-year:hover,
.datepicker-calendar .datepicker-next-year:hover {
    box-shadow: 0 0 10px #7da3be ;
    -moz-box-shadow: 0 0 10px #7da3be ;
    -webkit-box-shadow: 0 0 10px #7da3be ; 
}
.datepicker-calendar table {
	border-collapse: collapse;
	padding: 0;
	width: 100%;
}
.datepicker-calendar thead {
    font-size: 90%;
}
.datepicker-calendar th,
.datepicker-calendar td {
    width: 14.3%;
}
.datepicker-calendar th {
	text-align: center;
    padding: 5px;
}
.datepicker-calendar td {
	text-align: right;
	padding: 1px;
}
.datepicker-calendar .datepicker-day {
    display: block;
    color: var(--serma_color_darkblue);
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 5px;
    cursor: pointer;
}
.datepicker-calendar .datepicker-day:hover {
    box-shadow: 0 0 10px #7da3be;
    -moz-box-shadow: 0 0 10px #7da3be;
    -webkit-box-shadow: 0 0 10px #7da3be;
    border: 1px solid var(--serma_color_darkblue);
}
.datepicker-calendar .today .datepicker-day {
    background-color: #ddd;
    box-shadow: inset 0 0 0 2px white;
}
.datepicker-calendar .selected .datepicker-day {
    background-color: var(--serma_color_darkblue);
    color: #fff;
    box-shadow: inset 0 0 0 2px white;
}
.datepicker-calendar .disabled .datepicker-day,
.datepicker-calendar .disabled .datepicker-day:hover {
    background-color: #ddd;
    border: 1px dotted #ccc;
    color: #000000;
    cursor: default;
}
.datepicker-calendar .datepicker-today {
    color: var(--serma_color_darkblue);
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 1px;
    text-align: center;
    font-size: 120%;
    width: 100%;
    margin: 1px;
}
.datepicker-calendar .datepicker-today:hover {
    box-shadow: 0 0 10px #7da3be;
    -moz-box-shadow: 0 0 10px #7da3be;
    -webkit-box-shadow: 0 0 10px #7da3be;
    border: 1px solid var(--serma_color_darkblue);
}

/* Checkbox */
input[type="checkbox"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border:none;
    border-radius: 0;
    font-size: 1em;  
}
input[type='checkbox']:checked,
input[type='checkbox']:not(:checked){
    background: transparent;
    position: absolute;
    visibility: hidden;
    margin:0;
    padding:0;
}

input[type='checkbox']:checked + label::before, 
input[type='checkbox']:not(:checked) + label::before{
    content:' ';
    display:inline-block;
    width: 16px;
    height:16px;
    border: 1px solid #bbb;
    background: white;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
    vertical-align: bottom;
    position: relative;
    top: -1px;
    margin-right: 5px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}
    input[type='checkbox']:not(:disabled):hover + label::before {
        border: 1px solid var(--serma_color_darkblue);
        cursor: pointer;
    }
    input[type='checkbox']:checked + label::before {
        background: var(--serma_color_darkblue);
        box-shadow: inset 0 0 0 2px white;
    }
input[type='checkbox']:disabled + label::before{
    background-color: #f2f2f2;
    box-shadow: inset 0 0 0 2px white;
}
    input[type='checkbox']:checked:disabled + label::before {
        background: var(--serma_color_darkblue);
        box-shadow: inset 0 0 0 2px white;
    }
/* Spezialfall: Labels werden unter der Checkbox dargestellt. */
.checkboxBox.row2 {
     margin-top: 5px;
}

/* Select */
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border:none;
    border-radius: 0;
    border: 1px solid #ddd;
    background-color:#fff;
    background-image:url(../img/arrow-down_16x16.png);
    background-position: right;
    background-repeat: no-repeat;
    padding-right:20px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 1px;
    height: 21px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;  
}
    select:not(:disabled):hover {
        cursor: pointer;
        box-shadow: 0 0 10px #7da3be;
        -moz-box-shadow: 0 0 10px #7da3be;
        -webkit-box-shadow: 0 0 10px #7da3be;
        border: 1px solid var(--serma_color_darkblue);
    }
select:disabled {
    background-color: #f2f2f2;
    box-shadow: inset 0 0 0 2px white;
    background-image: none;
}
select::-ms-expand {
    display:none;
}
select > option:hover {
    cursor:pointer;
}

/* Number */
input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border:none;
    border-radius: 0;
    border:1px solid #ddd;
    background-color: #fff;
    -webkit-user-select:text;
}
    input[type="number"]:focus {
        outline: none;
        background-color: #fff;
        box-shadow: 0 0 10px #7da3be;
        -moz-box-shadow: 0 0 10px #7da3be;
        -webkit-box-shadow: 0 0 10px #7da3be;
        border: 1px solid var(--serma_color_darkblue);
    }
input[type='number']:disabled {
    background-color: #f2f2f2;
    box-shadow: inset 0 0 0 2px white;
}

/* Textarea mit Expand-Button */
textarea {
    max-width: 100%;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin: 0px;
    -moz-appearance: none;
    appearance: none;
    padding: 1px;
    border: 1px solid #ddd;
    border: 1px solid var(--serma_color_border_darkgrey);
    background-color: #fff;
    -webkit-user-select: text;
    overflow: auto;
    resize: none;
    outline: none;
}
    textarea:not([readonly]):focus {
        outline: none;
        background-color: #fff;
        box-shadow: 0 0 10px #7da3be;
        -moz-box-shadow: 0 0 10px #7da3be;
        -webkit-box-shadow: 0 0 10px #7da3be;
        border: 1px solid var(--serma_color_darkblue);
    }
textarea[readonly] {
    background-color: #f2f2f2;
    box-shadow: inset 0px 0px 0px 2px white;
    -moz-box-shadow: inset 0 0 0 2px white;
	-webkit-box-shadow: inset 0 0 0 2px white;
    color:gray;
}
textarea:disabled {
    background-color: #f2f2f2;
    box-shadow: inset 0px 0px 0px 2px white;
    -moz-box-shadow: inset 0 0 0 2px white;
	-webkit-box-shadow: inset 0 0 0 2px white;
    color:gray;
}

textarea[alt^="expandable"]{
     max-width:100%;
    -webkit-appearance:none;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    -webkit-touch-callout: none;
    font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin:0px;
    -moz-appearance: none;
    appearance: none;

    height: 21px;
    padding: 1px;
    border:1px solid #ddd;
    background-color: #fff;
    -webkit-user-select:text;

    overflow: auto;
    resize: none;
    outline:none;

    width: calc(100% - 22px);
    max-width:100%; 
}
textarea[alt^="expandable"]:not([readonly]):focus,
textarea[alt^="expandable"].expand {
    height:200px;
    box-sizing: border-box;
    resize: none;
}
textarea[alt^="expandable"]:not([readonly]) + span,
textarea[alt^="expandable"].expand + span{
    background-color: #ffffff;
    box-shadow: none;
}
textarea[alt^="expandable"][readonly] {
    background-color: #f2f2f2;
    box-shadow: inset 0px 0px 0px 2px white;
    -moz-box-shadow: inset 0 0 0 2px white;
	-webkit-box-shadow: inset 0 0 0 2px white;
    color:gray;
}
textarea[alt^="expandable"] + span {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    float:right;
    width: 22px;
    height: 21px;

    background-image: url('../img/arrow-down_16x16.png');
    background-position: center;
    background-repeat: no-repeat;

    border:1px solid #ddd;
    background-color: #f2f2f2;
    box-shadow: inset 0 0 0 2px white;
}
textarea[alt^="expandable"]:not([readonly]):focus + span,
textarea[alt^="expandable"] + span.active {
    background-image: url('../img/arrow-up_16x16.png');
}
textarea[alt^="expandable"] + span:hover {
    cursor:pointer;
    box-shadow: 0 0 10px #7da3be;
	-moz-box-shadow: 0 0 10px #7da3be;
	-webkit-box-shadow: 0 0 10px #7da3be; 
}

/* Trafficlights */
.trafficlight:after{
    content: '';
    display: inline-block;
    background: green;
    background-image: radial-gradient(lime, transparent);
    background-size: 5px 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: dotted 2px lime;
    box-shadow: 0 0 8px #111 inset, 0 0 5px lime;
}
.trafficlight.green:after{
    background: green;
    background-image: radial-gradient(lime, transparent);
    border: dotted 2px lime;
    box-shadow: 0 0 8px #111 inset, 0 0 5px lime;
}
.trafficlight.red:after {
    background: red;
    background-image: radial-gradient(lightsalmon, transparent);
    border: dotted 2px lightsalmon;
    box-shadow: 0 0 8px #111 inset, 0 0 5px lightsalmon;
}
.trafficlight.yellow:after{
  background: yellow;
  background-image: radial-gradient(orange, transparent);
  border: dotted 2px yellow;
  box-shadow: 0 0 8px #111 inset, 0 0 5px yellow;
}
.trafficlight.gray:after{
  background: gray;
  background-image: radial-gradient(gray, transparent);
  border: dotted 2px gray;
  box-shadow: 0 0 8px #111 inset, 0 0 5px gray;
}


/* Bigger Inputs */
input[type="email"].input_field,
input[type="password"].input_field{
	position: relative;
    z-index: 10;
	display: inline-block;
    width: 100%;
    max-width:100%;
    height:30px;
    padding:0;
	border: none;
	border-radius: 0;
    line-height:20px;
    text-indent:5px;
    font-size:16px;
	-webkit-appearance: none;
	background: transparent;
	color: #000000;
	opacity: 1;
}
input[type="email"].input_field:focus,
input[type="password"].input_field:focus {
	outline: none;
    background-color: transparent;
    box-shadow:none;
	-moz-box-shadow: none ;
	-webkit-box-shadow: none ; 
	border: none;
}
input[type="email"].input_field:focus + .input_label::before,
input[type="password"].input_field:focus + .input_label::before{
	-webkit-transform: rotate3d(1, 0, 0, 0deg);
	transform: rotate3d(1, 0, 0, 0deg);
}
input[type="email"].input_field:not(:disabled):focus + .input_label::after,
input[type="password"].input_field:not(:disabled):focus + .input_label::after{
	-webkit-transform: rotate3d(1, 0, 0, -90deg);
	transform: rotate3d(1, 0, 0, -90deg);
}
input[type="email"].input_field:disabled,
input[type="password"].input_field:disabled {
    box-shadow:none;
}
input[type="email"].input_field:disabled + .input_label::after,
input[type="password"].input_field:disabled + .input_label::after{
    background: none;
}

.input_label {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    color: var(--serma_color_darkblue);
    text-align: left;
    font-weight: bold;
    font-size: 95%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    padding-top: 0.5em;
    padding-bottom: 1.5em;
}
    .input_label::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 100%;
        height: 26px;
        background: #ffffff;
        border-bottom: 3px solid var(--serma_color_darkblue);
        -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
    }
    .input_label::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--serma_color_darkblue);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
    }

.input_button,
input[type="button"].input_button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    width: 100%;
    height: 30px;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    background: transparent;
    border: 3px solid var(--serma_color_darkblue);
    color: var(--serma_color_darkblue);
    font-size: 18px;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 5px;
    background-position: 50% 50% !important;
    background-size: 0% 0% !important;
    background-image: linear-gradient(var(--serma_color_darkblue), var(--serma_color_darkblue));
    background-repeat: no-repeat;
    transition: background-size 0.4s, color 0.4s;
}
.input_button:not(:disabled):hover,
.input_button:not(:disabled):focus,
input[type="button"].input_button:not(:disabled):hover,
input[type="button"].input_button:not(:disabled):focus {
    background-size: 100% 100% !important;
    color: #ffffff;
    border: 3px solid var(--serma_color_darkblue);
}
.input_button:not(:disabled):active,
input[type="button"].input_button:not(:disabled):active {
    background-size: 0% 0% !important;
    color: #0087FD;
    color: var(--serma_color_darkblue);
    background-color: transparent;
}
.input_button:disabled,
input[type="button"].input_button:disabled {
    background-image: linear-gradient(#fafafa, #fafafa);
    border: 3px solid #000000;
    color: var(--serma_color_darkblue);
}


/***********************
    Forms
************************/

/* Loginscreen */
.login.startanimation {
    -webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
}

.login_forms {
	position: relative;
	z-index: 1;
	display: inline-block;
	width: 100%;
    max-height: 100%;
	vertical-align: top;
}
input[type="text"].login_input_field,
input[type="number"].login_input_field,
input[type="email"].login_input_field,
input[type="password"].login_input_field {
	position: relative;
    z-index: 10;
	display: inline-block;
    width: 100%;
    max-width:100%;
    height:30px;
    padding:0;
	border: none;
	border-radius: 0;
    line-height:20px;
    text-indent:5px;
    font-size:16px;
	-webkit-appearance: none;
	background: #ffffff;
	color: #000000;
	opacity: 1;
}
input[type="password"].login_input_field.hidden {
    display:none;
}

.login_kontrollnummer > div{
     float:left;
}
.login_kontrollnummer_1 {
    width:55px;
}
.login_kontrollnummer_1 > select {
    width:55px;
    height:30px;
    font-size:16px;
    /*background-color: transparent;*/
    background-color: #ffffff;
    border: 1px solid transparent;
}
.login_kontrollnummer_1 > select:hover,
.login_kontrollnummer_1 > select:not(:disabled):hover {
    background-color: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
.login_kontrollnummer_2 {
    width:20px;
}
.login_kontrollnummer_3 {
    width:25px;
}
.login_kontrollnummer_4 {
    width:45px;
}
.login_kontrollnummer_spacer {
    height:30px;
    width:20px;
    line-height:30px;
    text-indent:5px;
    font-size:18px;
    background: transparent;
	color: #000000;
}

.login_forms .switch {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 32px;
}
.login_forms .switch input {
    display:none;
}
.login_forms .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    -webkit-transition: .4s;
    transition: .4s;
    border: 3px solid #0087FD;
    border: 3px solid var(--serma_color_darkblue);
    line-height: 26px;
    font-size: 16px;
}
.login_forms .slider > span:nth-child(1) {
    position: absolute;
    top:0px;
    left:0px;
    right:50%;
    bottom:0px;
    z-index:1;
    text-align:center;
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
}
.login_forms .slider > span:nth-child(2) {
    position: absolute;
    top:0px;
    left:50%;
    right:0px;
    bottom:0px;
    z-index:1;
    text-align:center;
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
}
.login_forms .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width:48%;
    top: 3px;
    left: 4px;
    bottom: 4px;
    background-color: #FFFFFF;
    -webkit-transition: .4s;
    transition: .4s;
}
.login_forms input:not(:checked) + .slider > span:nth-child(1) {
    color: #0087FD;
    color: var(--serma_color_darkblue);
}
.login_forms input:checked + .slider > span:nth-child(2) {
    color: #0087FD;
    color: var(--serma_color_darkblue);
}
.login_forms input:checked + .slider:before {
    -webkit-transform: translateX(calc(104%));
    -ms-transform: translateX(104%);
    transform: translateX(104%);
}

/*input[type="text"].login_input_field:focus,
input[type="number"].login_input_field:focus,
input[type="email"].login_input_field:focus,
input[type="password"].login_input_field:focus {
	outline: none;
    background-color: transparent;
    box-shadow:none;
	-moz-box-shadow: none ;
	-webkit-box-shadow: none ; 
	border: none;
}*/
.login_input_label {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    color: var(--serma_color_darkblue);
    text-align: left;
    font-weight: bold;
    font-size: 95%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*pointer-events: none;*/
    padding-top: 0.5em;
    padding-bottom: 1.5em;
}
    .login_input_label::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 100%;
        height: 26px;
        background: #ffffff;
        border-bottom: 3px solid var(--serma_color_darkblue);
        -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        */
    }
    .login_input_label::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--serma_color_darkblue);
        /*-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;*/
    }
/*
input[type="text"].login_input_field:focus + .login_input_label::before,
input[type="number"].login_input_field:focus + .login_input_label::before,
input[type="email"].login_input_field:focus + .login_input_label::before,
input[type="password"].login_input_field:focus + .login_input_label::before{
	-webkit-transform: rotate3d(1, 0, 0, 0deg);
	transform: rotate3d(1, 0, 0, 0deg);
}
input[type="text"].login_input_field:focus + .login_input_label::after,
input[type="number"].login_input_field:focus + .login_input_label::after,
input[type="email"].login_input_field:focus + .login_input_label::after,
input[type="password"].login_input_field:focus + .login_input_label::after{
	-webkit-transform: rotate3d(1, 0, 0, -90deg);
	transform: rotate3d(1, 0, 0, -90deg);
}
*/

.login_input_button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    width: 100%;
    height: 30px;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    background: transparent;
    border: 3px solid var(--serma_color_darkblue);
    color: var(--serma_color_darkblue);
    font-size: 18px;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 5px;
    background-position: 50% 50% !important;
    background-size: 0% 0% !important;
    background-image: linear-gradient(var(--serma_color_darkblue), var(--serma_color_darkblue));
    background-repeat: no-repeat;
    transition: background-size 0.4s, color 0.4s;
}
.login_input_button:hover, .login_input_button:focus  {
    background-size: 100% 100% !important;
    color: #ffffff;
}
.login_input_button:active {
    background-size: 0% 0% !important;
    color: #ffffff;
}
.login_msg{
    text-align: justify;
}

.login.finished {
    /*visibility: hidden;*/
    opacity: 0;
    /*-webkit-transition: visibility 0s 2s;
    transition: visibility 0s 2s;*/
    -webkit-animation: fadeout 2s 0.6s;
    -moz-animation: fadeout 2s 0.6s;
    -ms-animation: fadeout 2s;
    -o-animation: fadeout 2s 0.6s;
    animation: fadeout 2s;
    display:none;
}
.login.finished .login_input_button{
    background-image: linear-gradient(#70db70, #70db70);
    border: 3px solid #70db70;
    color: #70db70;
}
.login.finished .login_input_button:hover,.login.finished .login_input_button:focus {
    color: #ffffff;
}

.login.passed .login_input_button{
    background-image: linear-gradient(#70db70, #70db70);
    border: 3px solid #70db70;
    color: #70db70;
}
.login.passed .login_input_button:hover, .login.passed .login_input_button:focus {
    color: #ffffff;
}

.login.failed .login_input_button{
    background-image: linear-gradient(#ff4d4d, #ff4d4d);
    border: 3px solid #ff4d4d;
    color: #ff4d4d;
}
.login.failed .login_input_button:hover, .login.failed .login_input_button:focus {
    color: #ffffff;
}

/* FileViewer */
#modalFileView {
    display: none;
    position: fixed;
    z-index: 2000000;
    padding-top: 70px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
}
#modalFileView.show {
    display: block;
}
#modalFileView.hide {
    display: none;
}
#modalFileView > div {
    position:absolute;
    top:60px;
    left:0px;
    right:0px;
    bottom:60px;
    overflow-x: hidden;
    overflow-y:visible;
    -webkit-overflow-scrolling: touch;
}
.modalFileViewContent {
    margin: auto;
    display: block;
    -webkit-animation: zoom 0.6s;
    -moz-animation: zoom 0.6s;
    -ms-animation: zoom 0.6s;
    -o-animation: zoom 0.6s;
    animation: zoom 0.6s;
    background-color:#ffffff;
}
img.modalFileViewContent {
    width:800px;
    max-width:90%;
}
object.modalFileViewContent {
    width:90%;
    min-height:100%;
}
.modalFileViewClose {
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 2000000;
    width: 42px;
    height: 42px;
    font-size: 32px;
    font-weight: bold;
    color: #0087FD;
    color: var(--serma_color_darkblue);
    text-align: center;
    border: 4px solid #0087FD;
    border: 4px solid var(--serma_color_darkblue);
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 1;
}
.modalFileViewClose:hover,
.modalFileViewClose:focus {
    box-shadow: 0 0 5px #7da3be;
    -moz-box-shadow: 0 0 5px #7da3be;
    -webkit-box-shadow: 0 0 5px #7da3be;
}

/* Progress Modal */
#progressmodal {
    visibility:hidden;
    position: fixed;
    z-index:99999;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    height:100%;
    background-color:rgba(0,0,0,0.4); 
    display: -webkit-box;
    display: -moz-box;
    display: -ms-fb;
    display: -moz-flex;
	display: -webkit-flex;
	display: flex;
    align-items: center;
    -webkit-box-align-content: center;
    -webkit-align-content: center;
    -ms-flex-align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
}
#progressmodal.visible {
    visibility:visible;
}
#progressmodal > div {
    width: 80%;
}
#progressmodal #progresstext {
    font-size:30px;
    color:#FFFFFF;
    text-align:center;
}
progress:not(#auto) {
    background-color: #f3f3f3;
    border: 0;
    width: 100%;
    height: 18px;
    border-radius: 9px;
    color: #0087fD;
    color: var(--serma_color_darkblue);
}
progress#auto {
    width: 100%;
    height: 36px;
}
progress:not(#auto)::-webkit-progress-bar {
    background-color: #f3f3f3;
    border-radius: 9px;
}
progress:not(#auto)::-webkit-progress-value {
    background: #0087fD;
    background: var(--serma_color_darkblue);
    border-radius: 9px;
}
progress:not(#auto)::-moz-progress-bar {
    background: #0087fD;
    background: var(--serma_color_darkblue);
    border-radius: 9px;
}

/* Loading Modal */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-fb;
    display: -moz-flex;
	display: -webkit-flex;
	display: flex;
    align-items: center;
    -webkit-box-align-content: center;
    -webkit-align-content: center;
    -ms-flex-align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
    -webkit-transform: translate3d(0px,0px,0px);
    visibility: unset;
}
#loading.visible {
    visibility: unset;
}
#loading.notvisible {
    visibility: hidden;
}
@-webkit-keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }
@keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }
.uil-default-css { 
    position: relative;
    background:none;
    width:200px;
    height:200px;
    transform:scale(0.99);
}
.uil-default-css > div {
    top:80px;
    left:93px;
    width:14px;
    height:40px;
    background:#00b2ff;
    border-radius:10px;
    position:absolute;
}
.uil-default-css > div:nth-of-type(1){
    -webkit-transform:rotate(0deg) translate(0,-60px);
    transform:rotate(0deg) translate(0,-60px);
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.uil-default-css > div:nth-of-type(2){
    -webkit-transform:rotate(30deg) translate(0,-60px);
    transform:rotate(30deg) translate(0,-60px);
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.4166666666666667s;
    animation-delay: -0.4166666666666667s;
}
.uil-default-css > div:nth-of-type(3){
    -webkit-transform:rotate(60deg) translate(0,-60px);
    transform:rotate(60deg) translate(0,-60px);
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.33333333333333337s;
    animation-delay: -0.33333333333333337s;
}
.uil-default-css > div:nth-of-type(4){
    -webkit-transform:rotate(90deg) translate(0,-60px);
    transform:rotate(90deg) translate(0,-60px);
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
}
.uil-default-css > div:nth-of-type(5){
    -webkit-transform:rotate(120deg) translate(0,-60px);
    transform:rotate(120deg) translate(0,-60px);
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.16666666666666669s;
    animation-delay: -0.16666666666666669s;
}
.uil-default-css > div:nth-of-type(6){
    -webkit-transform:rotate(150deg) translate(0,-60px);
    transform:rotate(150deg) translate(0,-60px);
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.08333333333333331s;
    animation-delay: -0.08333333333333331s;
}
.uil-default-css > div:nth-of-type(7){
    -webkit-transform:rotate(180deg) translate(0,-60px);
    transform:rotate(180deg) translate(0,-60px);
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.uil-default-css > div:nth-of-type(8){
    -webkit-transform:rotate(210deg) translate(0,-60px);
    transform:rotate(210deg) translate(0,-60px);
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.08333333333333337s;
    animation-delay: 0.08333333333333337s;
}
.uil-default-css > div:nth-of-type(9){
    -webkit-transform:rotate(240deg) translate(0,-60px);
    transform:rotate(240deg) translate(0,-60px);
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.16666666666666663s;
    animation-delay: 0.16666666666666663s;
}
.uil-default-css > div:nth-of-type(10){
    -webkit-transform:rotate(270deg) translate(0,-60px);
    transform:rotate(270deg) translate(0,-60px);
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}
.uil-default-css > div:nth-of-type(11){
    -webkit-transform:rotate(300deg) translate(0,-60px);
    transform:rotate(300deg) translate(0,-60px);
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.33333333333333337s;
    animation-delay: 0.33333333333333337s;
}
.uil-default-css > div:nth-of-type(12){
    -webkit-transform:rotate(330deg) translate(0,-60px);
    transform:rotate(330deg) translate(0,-60px);
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.41666666666666663s;
    animation-delay: 0.41666666666666663s;
}

/* Tooltips */
.tooltip {
    cursor: pointer;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; 
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgba(0, 135, 253, 0.5);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    opacity: 0;
     -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;  
    border-width: 5px;
    border-style: solid;
}
.tooltip.active .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.tooltip.top .tooltiptext{
    bottom: 125%;
    left: 50%; 
    margin-left: -60px;
}
.tooltip.top .tooltiptext::after{
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: rgba(0, 135, 253, 0.5) transparent transparent transparent;
}
.tooltip.left .tooltiptext {
    top: -5px;
    right: 125%; 
}
.tooltip.left .tooltiptext::after {
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-color: transparent transparent transparent rgba(0, 135, 253, 0.5);
}
.tooltip.right .tooltiptext {
    top: -5px;
    left: 125%;
}
.tooltip.right .tooltiptext::after {
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-color: transparent rgba(0, 135, 253, 0.5) transparent transparent;
}
.tooltip.bottom .tooltiptext {
    top: 125%;
    left: 50%; 
    margin-left: -60px;
}
.tooltip.bottom .tooltiptext::after {
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: transparent transparent rgba(0, 135, 253, 0.5) transparent;
}

/***********************************
	FlexBox
	Browserunterstützung: Chrome 21+ / Safari 6.1+ / Firefox 22+ / Opera 12.1+ / IE 11+ / Android 4.4+ / iOS 7.1+
    Fallbacks für: iOS 6, Safari 3.1-6, Firefox 19, IE10

    Browserunterstützung theoretisch: Chrome 20+, Safari 3.1+, Firefox 2+, Opera 121+, IE 10+, iOS 3.2+, Android 2.1+
 ***********************************/
.fb {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-fb;
    display: -moz-flex;
	display: -webkit-flex;
	display: flex;
}

/*Darstellung als Zeilen/Spalten (verwirrend: vertauscht aber ist so)*/
.fb.rows{
    -webkit-box-direction: column;
    -webkit-box-orient: vertical;
    -moz-box-direction: column;
    -ms-flexbox-direction: column;
    -ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.fb.cols{
    -webkit-box-direction: row;
    -webkit-box-orient: horizontal;
    -moz-box-direction: row;
    -ms-flexbox-direction: row;
    -ms-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;
}

/*Positionierung aller Items*/
.fb.full > * {
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
    max-width:100%;
}
.fb.start{
    -webkit-box-align-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-align-content: flex-start;
    align-content: flex-start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
.fb.start > * {
    margin-right:5px;
} 
.fb.end{			
    -webkit-box-align-content: flex-end;
    -webkit-align-content: flex-end;
    -ms-flex-align-content: flex-end;
    align-content: flex-end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.fb.end > * {
    margin-left:5px;
} 
.fb.center{		
    -webkit-box-align-content: center;
    -webkit-align-content: center;
    -ms-flex-align-content: center;
    align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.fb.spacebetween{		
    -webkit-box-align-content: space-between;
    -webkit-align-content: space-between;
    -ms-flex-align-content: space-between;
    align-content: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.fb.spacearound{			
    -webkit-box-align-content: space-around;
    -webkit-align-content: space-around;
    -ms-flex-align-content: space-around;
    align-content: space-around;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

/*Positionierung einzelner Items*/
.fb .self-start{
	-webkit-align-self: flex-start;
    align-self: flex-start;
}
.fb .self-end{
	-webkit-align-self: flex-end;
    align-self: flex-end;
}
.fb .self-center{
	-webkit-align-self: center;
    align-self: center;
}
.fb .self-stretch{
    -webkit-align-self: stretch;
    align-self: stretch;
}
.fb .self-baseline{
    -webkit-align-self: baseline;
    align-self: baseline;
}

/*Größenverhältnisse einzelner Items*/
.fb .self-flex-1 {
   -webkit-flex: 1 0 0%;
   flex: 1 0 0%;
}
.fb .self-flex-2 {
    -webkit-flex: 2 0 0%; 
   flex: 2 0 0%;
}
.fb .self-flex-3 {
    -webkit-flex: 3 0 0%; 
   flex: 3 0 0%;
}
.fb .self-flex-4 {
    -webkit-flex: 4 0 0%; 
   flex: 4 0 0%;
}
.fb .self-flex-5 {
    -webkit-flex: 5 0 0%; 
   flex: 5 0 0%;
}
.fb .self-flex-6 {
    -webkit-flex: 6 0 0%; 
   flex: 6 0 0%;
}
.fb .self-flex-7 {
    -webkit-flex: 7 0 0%; 
   flex: 7 0 0%;
}

.fb .fixed-25 {
    width:25px;
}
.fb .fixed-30 {
    width:30px;
}
.fb .fixed-35 {
    width:35px;
}
.fb .fixed-40 {
    width:40px;
}
.fb .fixed-50 {
    width:50px;
}
.fb .fixed-55 {
    width:55px;
}
.fb .fixed-60 {
    width:60px;
}
.fb .fixed-70 {
    width:70px;
}
.fb .fixed-75 {
    width:75px;
}
.fb .fixed-100 {
    width:100px;
}
.fb .fixed-110 {
    width:110px;
}
.fb .fixed-120 {
    width:120px;
}
.fb .fixed-130 {
    width:130px;
}
.fb .fixed-150 {
    width:150px;
}
.fb .fixed-146 {
    width:146px;
}
.fb .fixed-180 {
    width:180px;
}
.fb .fixed-200 {
    width:200px;
}
.fb .fixed-220 {
    width:220px;
}
.fb .fixed-300 {
    width:300px;
}

.fb.keepsize, .fb .keepsize {
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.fb.shrinkandgrow, .fb .shrinkandgrow {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}
.fb.grow, fb .grow {
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    /*Bugfix!*/
    width:1px;
}
.fb.shrink, .fb .shrink,
.fb.wrap .shrink {
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
}

/*Reihenfolge einzelner Items*/
.fb .self-order-before {
    -webkit-box-ordinal-group: -1;  
    -moz-box-ordinal-group: -1;     
    -ms-flex-order: -1; 
	-webkit-order: -1;
	order: -1;
}
.fb .self-order-after {
    -webkit-box-ordinal-group: 1;  
    -moz-box-ordinal-group: 1;     
    -ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
}
.fb .self-order-1{
    -webkit-box-ordinal-group: 1;  
    -moz-box-ordinal-group: 1;     
    -ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
}
.fb .self-order-2 {
    -webkit-box-ordinal-group: 2;  
    -moz-box-ordinal-group: 2;     
    -ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
}
.fb .self-order-3{
    -webkit-box-ordinal-group: 3;  
    -moz-box-ordinal-group: 3;     
    -ms-flex-order: 3;
	-webkit-order: 3;
	order: 3;
}

/*Umbruch*/
.fb.wrap{
    -moz-box-wrap: wrap;
    -webkit-box-wrap: wrap;
    -ms-flexbox-wrap: wrap;
    -ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap:wrap;
}
.fb.wrap > * {
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
}
.fb.wrap-fixed{
    flex-flow: row wrap;
    align-items: space-around;
    align-content: flex-start;
}

.fb.nowrap{
    -moz-box-wrap: nowrap;
    -webkit-box-wrap: nowrap;
    -ms-flexbox-wrap: nowrap;
    -ms-flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
	flex-wrap:nowrap;
}

/* dynamisch langer Text innerhalb eines Flexbox Items*/
.fbinfinitetext {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-fb;
    display: -moz-flex;
	display: -webkit-flex;
	display: flex;
}
.fbinfinitetext > *{
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    /*Bugfix!*/
    width:1px;
}

/***********************
    Animations
************************/

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
@-moz-keyframes zoom{
    from {-moz-transform:scale(0)} 
    to {-moz-transform:scale(1)}
}
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}
@-ms-keyframes zoom {
    from {-ms-transform:scale(0)} 
    to {-ms-transform:scale(1)}
}
@-o-keyframes zoom {
   from {-o-transform:scale(0)} 
    to {-o-transform:scale(1)}
}

/***********************
    General
************************/
/* preventbody from scrolling */
.fixbody {
    overflow: hidden;
    position:fixed;
}
.divider{
    border-bottom: 1px solid #ddd;
}
.cuttext{
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 4px;
}
.hidden{
    display:none;
}
.greentext {
    color:green;
}
.orangetext {
    color:orange;
}
.redtext {
    color:red;
}
.bluetext {
    color:blue;
}

/* DialogBox Yes No */
.Yes_No {
    position:fixed;
    top:0px;
    z-index:10000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.Yes_No_Content {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Yes_No_Wrapper_NewInfo2 {
    width: 80%;
    max-height: 80%;
    overflow-y: scroll;
    overflow-x: hidden;
}
.Yes_No_Wrapper_NewInfo3 {
    width: 80%;
    max-width:680px;
    max-height: 90%;
    overflow-y: scroll;
    overflow-x: hidden;
}
.Yes_No_Wrapper_NewInfoFull {
    width: 100%;
    max-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
.Yes_No_Wrapper_NewInfo {
    border: 0;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,1);
    background: #fbfbfb;
    padding: 20px;
}
.Yes_No_Wrapper_NewInfo.forFull {
    padding-top:60px;
}

.Yes_No_Wrapper {
    width: 300px;
    /* rb 2018-04-16, bisheriger Zustand */
    /*border: 1px solid #a9a9a9;
border-radius: 5px;
box-shadow: 2px 2px 2px 2px #888888; */
    /* rb 2018-04-16 Version 2 Modal Dialog */
    /* rb 2018-04-16, weiße Box, eckig, nur schwarzer Schatten, analog Anmelde-Box*/
    border: 0;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,1);
    background: #fbfbfb;
    padding: 20px;
}
.Yes_No_Wrapper > *,
.Yes_No_Wrapper_NewInfo > *{
    margin-bottom: 5px;
}
.Yes_No_Wrapper > .Question,
.Yes_No_Wrapper_NewInfo > .Question {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-fb;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
}
.Yes_No_Wrapper > .Question > *,
.Yes_No_Wrapper_NewInfo > .Question > * {
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    /*Bugfix!*/
    width: 1px;
}
.Yes_No_Wrapper > .Answers,
.Yes_No_Wrapper_NewInfo > .Answers {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-fb;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: row;
    -webkit-box-orient: horizontal;
    -moz-box-direction: row;
    -ms-flexbox-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-align-content: center;
    -webkit-align-content: center;
    -ms-flex-align-content: center;
    align-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.Yes_No_Wrapper > .Answers > *,
.Yes_No_Wrapper_NewInfo > .Answers > * {
    -webkit-align-self: center;
    align-self: center;
}
.Yes_No_Wrapper > .Answers > *:not(:last-child),
.Yes_No_Wrapper_NewInfo > .Answers > *:not(:last-child) {
    margin-right: 50px;
}


.Yes_No_Wrapper_NewInfo > .Answers.wrap{
    -moz-box-wrap: wrap;
    -webkit-box-wrap: wrap;
    -ms-flexbox-wrap: wrap;
    -ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap:wrap;
}
.Yes_No_Wrapper_NewInfo > .Answers.wrap > * {
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
}
.Yes_No_Wrapper_NewInfo > .Answers > * {
    padding-bottom:5px;
}

.Yes_No_Second {
    position: fixed;
    top: 0px;
    z-index: 20000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}