@import url('https://cdn.reygers.de/fonts/roboto/roboto.css');

html * {
    font-size: 14px;
    color: #5b5b5b;
    font-family: "Roboto",sans-serif;
    font-weight: 300;
}

body {
    margin: 0;
    padding: 0;
}

form div.row {
    padding: 2px 0px;
}

    form div.row label {
        display: inline-block;
        width: 150px;
    }

h1 {
    margin: 0;
    font-size: 200%;
    font-weight: 500;
}

h2 {
    margin: 0;
    font-size: 175%;
    font-weight: 500;
}

h3 {
    margin: 0;
    font-size: 125%;
    font-weight: 500;
}

h4 {
    margin: 0;
    font-size: 100%;
    font-weight: 500;
}

p {
    margin: 10px 0 0 0;
}

strong {
    font-weight: 500;
}

div.spacer {
    height: 10px;
}

input {
    padding: 4px 6px;
    border: 1px solid #cdcdcd;
}

    input:hover {
        border: 1px solid #a7a7a7;
    }

    input.disabled {
        background-color: #f7f7f7;
        color: #999;
        pointer-events: none;
    }

textarea.disabled {
    background-color: #fafafa;
    color: #444;
    pointer-events: none;
}

textarea {
    border: 1px solid #cdcdcd;
}

input[readonly] {
    background-color: #f7f7f7;
    color: #999;
    pointer-events: none;
}

fieldset {
    border: 1px solid #cdcdcd;
}

a {
    text-decoration: none;
    color: #7b7bff;
}

    a:hover {
        color: #3b3bcc;
    }

.evaluationPopup {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -150%);
    width: 500px;
    height: 370px;
    text-align: center;
    background-color: white;
    box-sizing: border-box;
    padding: 10px;
    z-index: 100;
    border: 1px solid black;
    -webkit-box-shadow: 5px 5px 15px 5px #000000;
    box-shadow: 5px 5px 15px 5px #000000;
    font-weight: bold;
}

/*
 * *******************
 * *** Posterdesigner ... ***
 * *******************
 */

.posterContent {
    height: 750px;
    width: 1600px;
}

    .posterContent .left {
        display: inline-block;
        min-width: 62%;
        max-width: 62%;
        height: 100%;
        vertical-align: top;
    }

    .posterContent .right {
        display: inline-block;
        width: 36%;
        border: 1px dotted lightgray;
        height: 100%;
        overflow-y: scroll;
        padding-top: 20px;
    }

        .posterContent .right input {
            font-size: 10px;
        }



.posterWindow {
    min-width: 100%;
    height: 100%;
    border: 2px dotted lightgray;
}

.settings {
    position: relative;
    margin-bottom: 20px;
    padding: 25px 10px 20px 10px;
    border: 1px solid lightgray;
    margin-left: 20px;
    margin-right: 20px;
}

    .settings .setting {
        position: relative;
        margin-bottom: 10px;
    }

    .settings .description {
        position: absolute;
        right: 20px;
        top: -9px;
        background: white;
        font-weight: bold;
        display: inline;
        font-size: 14px;
    }

    .settings .setting .name {
        width: 180px;
        display: inline-block;
        font-weight: bold;
    }

    .settings .setting .value {
        display: inline-block;
    }

.buttons {
}

    .buttons button {
        width: 100%;
        color: white;
        font-weight: bold;
        background-color: #3A9CA4;
        margin-top: 5px;
        margin-bottom: 5px;
    }

table {
    border-collapse: collapse;
}

    table tr:nth-child(even) {
        background: #fafafa;
    }

    table tr th {
        padding: 4px 6px;
        border: 1px solid #cdcdcd;
        background: #f79b6a;
        color: #ffffff;
        font-weight: normal;
        vertical-align: top;
    }

    table tr td {
        padding: 4px 6px;
        border: 1px solid #cdcdcd;
        vertical-align: top;
    }

        table tr td.colspan {
            border-right: none;
            border-left: none;
        }

            table tr td.colspan:first-child {
                border-left: 1px solid #cdcdcd;
            }

            table tr td.colspan:last-child {
                border-left: 1px solid #cdcdcd;
            }

        table tr td.datetime {
            text-align: right;
        }

        table tr td.number {
            text-align: right;
        }

            table tr td.number input {
                text-align: right;
            }

        table tr td.string {
            text-align: left;
        }

        table tr td.icon {
            text-align: center;
        }

            table tr td.icon img {
                vertical-align: middle;
            }


    table tr.linked {
        cursor: pointer;
    }

        table tr.linked:hover td {
            color: #db9a00;
        }

    table.list th {
        background: #ffffff;
        color: #000;
        border: 0;
        text-align: left;
        font-weight: bold;
        padding: 2px 10px 0px 0px;
        vertical-align: top;
    }

    table.list td {
        border: 0;
        padding: 2px 10px 0 0;
    }

    table.list tr:nth-child(even) {
        background: #fff;
    }

a.button {
    padding: 5px 10px;
    background: #f0f0f0;
    color: #000;
    display: inline-block;
}

    a.button:hover {
        background: #e7e7e7;
        color: #000;
        cursor: pointer
    }

a.submit {
    background: #e6a400;
    color: #fff;
}

    a.submit:hover {
        background: #db9a00;
    }

.inactive a {
    text-decoration: line-through;
}

.inactive td {
    text-decoration: line-through;
}

button {
    cursor: pointer;
    padding: 5px 10px;
    border: none;
    background: #f0f0f0;
    color: #000;
}

    button:hover {
        background: #e7e7e7;
        color: #000;
    }

    button:disabled {
        color: black;
        cursor: default;
        pointer-events: none;
        background-color:darkcyan;
    }

    button.delete {
        background: #ff3300;
        color: #fff;
    }

    button.submit {
        background: #e6a400;
        color: #fff;
    }

        button.submit:hover {
            background: #db9a00;
        }

    button.green {
        background: #00cc00;
    }

    button.yellow {
        background: #eeee00;
    }

    button.red {
        background: #ff0000;
        color: #fff;
    }

    button.disabled {
        color: #999;
        cursor: default;
        pointer-events: none;
    }

.infoButton {
    background: #f79b6a;
    color: white;
    border: 1px solid black;
}

a.infoButton {
    background: #f79b6a;
    color: white;
}

input.infoButton {
    background: #f79b6a;
    color: white;
}

.bigButton {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-top: 20px;
    padding: 0px;
    background: #e6a400;
    vertical-align: middle;
    color: #fff;
    cursor: pointer;
}

.clear {
    clear: both;
}

form.list div {
    padding: 2px 0px;
}

    form.list div label {
        display: inline-block;
        width: 220px;
    }

form.labelWidth100 div label {
    display: inline-block;
    width: 100px;
}

form.short div label {
    display: inline-block;
    width: 50px;
}

form.list div input {
    width: 370px;
}

form.list div select {
    width: 384px;
    padding: 4px 6px;
}

form.list div.buttons {
    margin: 10px 0 0 0;
}

    form.list div.buttons button {
        margin-left: 10px;
    }

    form.list div.buttons a {
        margin-left: 10px;
    }

form.list select.col_1_2 {
    width: 124px
}

form.list select.col_2_2 {
    margin-left: 5px;
    width: 255px
}

form.list input.col_1_2 {
    width: 110px
}

form.list input.col_2_2 {
    margin-left: 2px;
    width: 240px
}

form.list input.col_1_3 {
    width: 40px;
    text-align: center;
}

form.list input.col_2_3 {
    margin-left: 2px;
    text-align: right;
    width: 70px;
}

form.list input.col_3_3 {
    margin-left: 2px;
    text-align: right;
    width: 221px
}

form.list input.datetime {
    width: 100px;
}

form.list input[type="checkbox"] {
    width: 13px;
}

form.list div.textarea label {
    vertical-align: top;
}

form.list div.textarea textarea {
    resize: none;
}

form.list div.checkboxList label {
    vertical-align: top;
}

form.list div.checkboxList div {
    display: inline-block;
}

form.list div.paragraph label {
    font-weight: bold;
}

div.portraitNameList {
    display: inline;
}

    div.portraitNameList label {
        font-weight: bold;
        width: 120px;
        display: inline-block;
    }

div.pageMsg {
    border: 1px solid;
    padding: 8px 10px;
    background-repeat: no-repeat;
    background-position: 10px center;
    margin-bottom: 10px;
    cursor: pointer;
}

    div.pageMsg.error {
        color: #d8000c;
        background-color: #ffbaba;
        position: sticky;
    }

    div.pageMsg.warning {
        color: #9f6000;
        background-color: #feefb3;
        position: sticky;
    }

    div.pageMsg.info {
        color: #00529b;
        background-color: #bde5f8;
        position: sticky;
    }

    div.pageMsg.success {
        color: #4f8a10;
        background-color: #dff2bf;
        position: sticky;
    }

div.memos {
    max-height: 250px;
    overflow-y: auto;
}

table.memos th {
    border: 1px solid #cdcdcd;
    padding: 4px 6px;
}

    table.memos th.level1 {
        background: #ff0000;
    }

    table.memos th.level5 {
        background: #cccc00;
    }

    table.memos th.level8 {
        background: #00cc00;
    }

table.memos td {
    width: 450px;
    border: 1px solid #cdcdcd;
    padding: 4px 6px;
}

table.photoInfos td {
    vertical-align: middle;
}

div.dia {
    display: none;
}


form.customerData {
    display: inline-block;
}

form.studentCardLayout {
    display: inline-block;
}

form.small div input {
    width: 280px;
}

.width100 {
    width: 100px;
}

.width200 {
    width: 200px;
}

.width300 {
    width: 200px;
}

.width400 {
    width: 300px;
}

.width500 {
    width: 400px;
}

.width600 {
    width: 500px;
}

div.table {
    display: table;
    width: 100%;
}

div.thead {
    display: table-header-group;
}

div.tbody {
    display: table-row-group;
}

div.tr {
    display: table-row;
}

div.td {
    display: table-cell;
    padding: 5px 10px;
    vertical-align: top;
}

div.th {
    display: table-cell;
    font-weight: bold;
    padding: 5px 10px;
    vertical-align: top;
}

    div.th label {
        font-weight: bold;
    }


/* 
 * **************
 * *** Header ***
 * **************
 */
div.header {
    position: fixed;
    background: #f79b6a;
    height: 60px;
    top: 0px;
    width: 100%;
    z-index: 1;
}

    div.header div.title {
        float: left;
        padding: 15px 0 0 15px;
        color: #ffffff;
    }

        div.header div.title h2 {
            color: #ffffff;
        }

    div.header div.logo {
        padding: 0px 10px;
    }

        div.header div.logo img.logoTxt {
            height: 47px;
            margin: 7px 20px 0 0;
            float: right;
        }

        div.header div.logo img.logoIcon {
            height: 58px;
            margin-top: 7px;
            float: right;
        }




/* 
 * ***************
 * *** Content ***
 * ***************
 */
div.page {
    margin-top: 60px;
}

div.navigation {
    position: fixed;
    padding: 10px 15px 10px 15px;
    width: 200px;
}

    div.navigation ul {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 200px;
        background: white;
    }

        div.navigation ul li {
            list-style: none;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid #cdcdcd;
            background: #f79b6a;
        }

            div.navigation ul li.nested {
                padding-left: 20px;
            }

            div.navigation ul li.beginGroup {
                margin-top: 5px;
            }

            div.navigation ul li a {
                text-decoration: none;
                display: block;
                color: white;
                padding: 8px 10px;
                text-decoration: none;
            }

                div.navigation ul li a:hover {
                    background-color: darkorange;
                    color: white;
                }

            div.navigation ul li.disabled {
                background-color: #999;
                cursor: not-allowed;
                pointer-events: none;
            }

div.content {
    margin: 0px 0px 30px 230px;
    padding: 20px 0px 0px 20px;
    display: inline-block;
}

div.reordersContent {
    margin-bottom: 45px;
}

div.legend {
    font-size: 85%;
    padding: 10px 10px;
}

    div.legend sup {
        font-size: 75%;
    }

div#disableAcquiseDiag {
    display: none;
}

/*
 * **************
 * *** Footer ***
 * **************
 */
div.footer {
    background: #f79b6a;
    height: 32px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    color: #ffffff;
}

    div.footer .footerInfo {
        font-size: 12px;
        padding: 8px 10px;
        float: right;
        color: #ffffff;
    }

    div.footer .footerLinks {
        margin: 7px 10px 5px;
        float: right;
    }

        div.footer .footerLinks ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            div.footer .footerLinks ul li {
                display: inline;
            }

            div.footer .footerLinks ul span {
                display: inline;
                color: #ffffff;
                font-size: 80%;
            }

            div.footer .footerLinks ul strong {
                font-size: 100%;
                font-weight: 800;
                color: #ffffff;
            }

            div.footer .footerLinks ul span.horizontalSpacer {
                display: inline;
                color: #cdcdcd;
                font-size: 100%;
            }

            div.footer .footerLinks ul li a {
                color: #ffffff;
                font-size: 80%;
            }
/*
 * **************
 * *** AboveFooter ***
 * **************
 */
div.aboveFooter {
    height: 32px;
    position: fixed;
    bottom: 45px;
    width: 100%;
    left: 0;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0);
    display: inline-flex;
}

    div.aboveFooter .aboveButton {
        margin-top: 2px;
        display: inline-block;
    }
/* 
 * *****************
 * *** Web-Pages ***
 * *****************
 */

form.login {
    width: 450px;
    margin: auto;
}

form.reorder div.head {
    margin-bottom: 20px;
}

    form.reorder div.head label {
        display: inline-block;
        width: 100px;
    }

    form.reorder div.head div.count {
        display: inline-block;
        width: 30px;
    }

    form.reorder div.head div.buttons {
        display: inline;
    }

form.confirmReorder {
    margin-top: 20px;
}

form.upload {
    display: inline;
}

img.selectableStudentCard {
    border: 1px solid #cdcdcd;
    width: 400px;
}

img.studentCard {
    border: 1px solid #cdcdcd;
    width: 400px;
}

div.portraitNameList button {
    margin-left: 120px;
    display: inline;
}

div.schoolData div.upload span {
    display: inline-block;
    width: 90px;
    vertical-align: top;
}

div.schoolData div.upload div.preview {
    display: inline-block;
    width: 120px;
}

div.schoolData div.upload span {
    width: 100px;
    display: inline-block;
    margin-top: 10px;
}

div.schoolData div.upload div.preview img {
    display: inline-block;
    width: 100px;
    max-height: 36px;
    object-fit: contain;
}

div.schoolData div.upload div.preview span.missing {
    display: inline-block;
    width: 120px;
    font-style: italic;
    text-align: center;
    vertical-align: middle;
}

div.schoolData div.upload div.input {
    display: inline-block;
    vertical-align: top;
}

div.schoolData div.textCorrection {
    display: inline-block;
    position: absolute;
    margin-left: 40px;
    margin-top: 20px;
}

    div.schoolData div.textCorrection span {
        display: inline-block;
        width: 100px;
        vertical-align: top;
        margin-top: 30px;
    }

    div.schoolData div.textCorrection textarea {
        resize: none;
        width: 250px;
        height: 75px;
        box-shadow: 5px 5px 5px grey;
        z-index: 0;
    }

div.schoolData .bigButton {
    display: inline-block;
    margin-top: 20px;
    padding: 0px;
    background: #e6a400;
    color: #fff
}

div.schoolData .td {
    display: inline-block;
}

div.schoolData .logo {
    display: inline-table;
    width: 100px;
    margin-left: 20px;
}

div.schoolData .seal {
    width: 100%;
    margin-top: 10px;
}

div.confirmLayout {
    margin-top: 20px;
    border: 1px solid #cdcdcd;
    padding: 10px;
    margin-left: 10px;
    display: inline-block;
}

div.nextAppointment {
    margin-top: 20px;
    border: 1px solid black;
    padding: 5px;
    display: table;
    position: absolute;
    top: 70px;
    right: 80px;
}

div.validityHeading {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 20px;
}

div.reorderButton {
    width: 400px;
    margin-top: 20px;
}

div.portraitButtons {
    margin-top: 20px;
    margin-left: 0px;
}

    div.portraitButtons input {
        border: none;
        background: #f0f0f0;
        color: #000;
        cursor: pointer;
    }

        div.portraitButtons input:hover {
            background: #e7e7e7;
            color: #000;
            cursor: pointer;
        }

.portraitButton:not(:first-child) {
    margin-left: 110px;
}

div.layout {
    display: inline-block;
}

div.portraitButtons .bigButton {
    width: 200px;
    height: 80px;
    font-size: 20px;
    background: #f0f0f0;
    font-weight: bold;
}

.portraitButtons a {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.portraitButtons p {
    vertical-align: middle;
    display: inline-block;
    font-size: 14px;
    background: #f0f0f0;
    color: black;
    padding: 9px;
    margin-bottom: 12px;
}

    .portraitButtons p:hover {
        background: #e7e7e7;
        color: #000;
        cursor: pointer;
    }

.layoutCheckBox {
    display: block;
    margin: auto;
    transform: scale(1.5);
    margin-top: 5px;
    margin-bottom: 5px;
}

.layoutTextBox {
    display: block;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
}

.portraitSelection {
    display: block;
}

.portraits input {
    width:80%;
}

.certHeadings .option {
    display: inline-block;
    margin-left: 20px;
    text-align: center;
}

.option .optionCheckBox {
    margin: auto;
}

.certLayouts {
    margin-top: 20px;
}

/*
 * *******************
 * *** Tooltip ... ***
 * *******************
 */
.tooltip {
    max-width: 480px;
}

    .tooltip .tooltipText {
        font-weight: normal;
        z-index: 10;
        display: none;
        padding: 14px 20px;
        margin-top: 0px;
        margin-left: 28px;
        border-radius: 2px;
        box-shadow: 5px 5px 8px #CCC;
    }

    .tooltip:hover .tooltipText {
        display: inline;
        position: absolute;
        color: #111;
        border: 1px solid #DCA;
        background: #fffAF0;
        text-align: left;
    }

        .tooltip:hover .tooltipText ul {
            margin: 0;
            padding: 0;
        }

    .tooltip table th {
        background: none;
        vertical-align: top;
    }

    .tooltip table td {
        background: none;
        vertical-align: top;
    }

        .tooltip table td:nth-child(even) {
            background: none;
        }

    .tooltip table tr {
        background: none;
    }

        .tooltip table tr:nth-child(even) {
            background: none;
        }

/*
 * *******************
 * *** Zeugnismappen ... ***
 * *******************
 */

.certContent {
    margin-left: 70px;
}

    .certContent .help {
        font-size: 45px;
        color: #f79b6a;
        font-weight: 800;
        margin-left: 10px;
        display: inline;
        vertical-align: middle;
    }

.certLayoutGallery {
    margin-top: 40px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

    .certLayoutGallery .infoButton {
        font-weight: 400;
    }

.certAction {
    margin-top: 10px;
    text-align: center;
}

.certLayoutGallery img {
    width: 800px;
    height: 568px;
    border: 2px dotted black;
    box-sizing: border-box;
}

.certProgress {
    width: 800px;
    line-height: 15px;
    border-radius: 16px;
    background-color: #f1f1f1;
    margin-left: 70px;
    margin-right: auto;
    margin-top: 20px;
    border: 1px solid black;
    font-size: 0px;
    vertical-align: middle;
}

    .certProgress a:hover {
        color: white;
    }

    .certProgress a {
        color: inherit;
        font-weight: inherit;
        font-size: inherit;
    }

.certProgressGreen {
    background-color: #f79b6a;
    text-align: center;
    border-radius: 16px;
    font-size: 16px;
    display: inline-block;
    box-sizing: inherit;
    color: white;
    font-size: 0px;
}

.certProgress .step {
    display: inline-block;
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: 400;
}

.certProgress .current {
    color: white;
}

.certProgress .previous {
    color: darkgray;
}

.certProgress .next {
    color: black;
    background-color: #f1f1f1;
    display: inline-block;
    width: 25%;
    border-radius: 16px;
    text-align: center;
}

.loadingArea form {
    display: inline-block;
    margin-left: 5px;
}

.loadingCircle {
    width: 45px;
    height: 45px;
    vertical-align: bottom;
    margin-bottom: 5px;
    margin-left: 5px;
}

.certCustomizing {
    margin-left: 40px;
    margin-top: 40px;
    display: inline-block;
    vertical-align: top;
}

    .certCustomizing .heading {
        background-color: white;
        border: 1px solid black;
        text-align: center;
        font-size: 20px;
        padding: 10px;
        font-weight: 600;
        margin-left: auto;
        margin-right: auto;
    }

    .certCustomizing .infoButton {
        font-weight: 400;
        display: inline-block;
    }


    .certCustomizing .options {
        padding: 15px;
        border: 2px solid #ededed;
        margin-top: 20px;
    }

    .certCustomizing .optionGroup {
        height: 470px;
        overflow: auto;
        border: 1px solid black;
    }

    .certCustomizing .option:not(:first-of-type) {
        margin-top: 20px;
    }

    .certCustomizing .option .preText {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .certCustomizing .option .optionItem:not(:last-of-type) {
        margin-bottom: 20px;
    }

    .certCustomizing .option .smallInput {
        width: 45px;
    }

    .certCustomizing .option .inline {
        display: inline-block;
        margin-right: 20px;
    }

    .certCustomizing .option .infoButton {
        margin-top: 5px;
        margin-bottom: 5px;
        font-weight: 400;
        font-size: 15px;
        border: 1px solid black;
    }

    .certCustomizing .infoText {
        font-size: 16px;
        margin-top: 40px;
        border: 2px solid #ededed;
        padding: 10px;
        width: 350px;
        font-weight: 400;
    }

        .certCustomizing .infoText .infoIcon {
            font-size: 34px;
            color: #f79b6a;
            position: absolute;
            margin-top: -37px;
            margin-left: -24px;
        }

.colorbox {
    width: 50px;
    height: 20px;
    border: 1px solid black;
    padding: 0px;
}

.owl-nav span {
    font-size: 80px;
    font-weight: 800;
}

.owl-prev, .owl-next {
    width: 25px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block !important;
    border: 0px solid black;
}

.owl-prev {
    left: -50px;
}

.owl-next {
    right: -50px;
}


/*modal images: https://www.w3schools.com/howto/howto_css_modal_images.asp*/
.modalImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

    .modalImg:hover {
        opacity: 0.7;
    }
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}
/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px
}
/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}
/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

    .close:hover, .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

/* selectable img https://codepen.io/codesnips/pen/QNYoyv */
.selectable .ui-selecting {
    border: 2px solid #0000ff;
    cursor: pointer;
}

.selectable .ui-selected {
    border: 2px solid #0000ff;
    -webkit-box-shadow: 0px 0px 8px 0px blue;
    -moz-box-shadow: 0px 0px 8px 0px blue;
    box-shadow: 0px 0px 8px 0px blue;
}

.selectable img {
    margin: 5px;
    padding: 5px;
    border: 2px solid #ffffff;
    cursor: pointer;
}

.selected-items {
    border: 2px solid #0000ff;
    line-height: 32px;
    cursor: pointer;
}




/* W3.CSS 4.12 November 2018 by Jan Egil and Borge Refsnes */
.w3-badge, .w3-tag {
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center
}

.w3-badge {
    border-radius: 50%
}

.w3-tooltip, .w3-display-container {
    position: relative
}

    .w3-tooltip .w3-text {
        display: none
    }

    .w3-tooltip:hover .w3-text {
        display: inline-block
    }

.w3-display-bottommiddle {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%)
}

.w3-display-container:hover .w3-display-hover {
    display: block
}

.w3-display-container:hover span.w3-display-hover {
    display: inline-block
}

.w3-display-hover {
    display: none
}

.w3-border-0 {
    border: 0 !important
}

.w3-border {
    border: 2px solid #f79b6a !important
}

.w3-section, .w3-code {
    margin-top: 16px !important;
    margin-bottom: 16px !important
}

.w3-left {
    float: left !important;
    font-weight: bold;
    height: 130px;
    color: black;
    font-size: x-large;
}

.w3-right {
    float: right !important;
    font-weight: bold;
    height: 130px;
    color: black;
    font-size: x-large;
}

.w3-button:hover {
    color: #000 !important;
    background-color: #ccc !important
}

.w3-transparent, .w3-hover-none:hover {
    background-color: transparent !important
}

.w3-hover-none:hover {
    box-shadow: none !important
}

.w3-petrol, .w3-hover-petrol:hover {
    color: #fff !important;
    background-color: #f79b6a !important
}

.mySlides {
    display: none
}

.w3-left, .w3-right, .w3-badge {
    cursor: pointer
}

.w3-badge {
    height: 13px;
    width: 13px;
    padding: 0;
}

table.fixedHeader thead {
    background: #fff;
}

table.fixedHeader tr:nth-child(1) th {
    position: sticky;
    top: 60px;
}


table.fixedHeader tr:nth-child(2) th {
    position: sticky;
    top: 85px;
}

    table.fixedHeader thead tr th {
        border: 0;
    }


/* Login */
.loginLoading {
    margin-top: 20px;
}

/* Datenschutz, AGBs usw. */
.infoPanel {
    width: 70%;
    background-color: rgba(240,240,240,0.6);
    padding: 20px;
}

    .infoPanel p {
        margin: 15px;
    }

/* searchable */
.searchableColor {
    background: rgb(58, 156, 164);
}

.searchableAscending {
    background: rgba(0, 0, 0, 0) linear-gradient(rgba(58, 156, 164, 1) 0%, rgba(58, 156, 164, 0.3) 100%) repeat scroll 0% 0%;
}

.searchableDescending {
    background: rgba(0, 0, 0, 0) linear-gradient(rgba(58, 156, 164, 0.3) 0%, rgba(58, 156, 164, 1) 100%) repeat scroll 0% 0%;
}