/* Custom */



/* Show */

/* --- Kalender ---*/
.ModulAppointment .AppointCalenderOverview {
    margin: 0 0 20px 0;
}

.ModulAppointment #AppointCalenderTableWrapper {
    display: table;
    margin: 0 auto;
    border: 1px solid #666;
}

.ModulAppointment .AppointCalenderOverview .AppointCalenderTableHeader {
    background: #eee;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .ModulAppointment .AppointCalenderOverview .AppointCalenderTableHeader a {
        padding: 3px 5px;
        display: inline-block;
    }

        .ModulAppointment .AppointCalenderOverview .AppointCalenderTableHeader a span {
            font-size: 140%;
            color: #0060A6;
        }

        .ModulAppointment .AppointCalenderOverview .AppointCalenderTableHeader a.AppointCalenderTableHeaderLeft {
        }

        .ModulAppointment .AppointCalenderOverview .AppointCalenderTableHeader a.AppointCalenderTableHeaderRight {
        }

    .ModulAppointment .AppointCalenderOverview .AppointCalenderTableHeader .AppointCalenderTableHeaderCaption {
        display: inline-block;
        font-weight: bold;
        padding: 2px 0;
    }

.ModulAppointment .AppointCalenderOverview .AppointCalenderTable {
    display: table;
    table-layout: fixed;
}

    .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow {
        display: table-row;
    }

        .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow .AppointCalenderCell {
            display: table-cell;
            background: #eee;
            text-align: center;
            border-bottom: 2px solid #eee;
        }

            .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow .AppointCalenderCell span,
            .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow .AppointCalenderCell a {
                display: inline-block;
                min-width: 25px;
                padding: 6px 8px;
                text-decoration: none;
                color: #000;
            }

        .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow.AppointCalenderRowCaption .AppointCalenderCell {
            border-bottom: 1px solid #999;
            border-top: 1px solid #333;
            padding-bottom: 1px !important;
            padding-top: 1px !important;
        }

            .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow.AppointCalenderRowCaption .AppointCalenderCell span {
                padding: 1px 4px !important;
            }

        .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow .AppointCalenderCell.AppointCalenderCellDay {
            background-image: linear-gradient(45deg, #ccc 0%, #eee 50%);
            border-color: #bbb;
        }

        .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow .AppointCalenderCell.AppointCalenderCellPast {
            background-image: linear-gradient(45deg, #ddd 0%, #eee 50%);
            border-color: #ccc;
        }

            .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow .AppointCalenderCell.AppointCalenderCellPast span,
            .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow .AppointCalenderCell.AppointCalenderCellPast a {
                color: #aaa;
            }

        .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow .AppointCalenderCell.AppointCalenderCellToday {
            border-color: #52a858;
        }

            .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow .AppointCalenderCell.AppointCalenderCellToday span,
            .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow .AppointCalenderCell.AppointCalenderCellToday a {
                font-weight: bold;
            }

        .ModulAppointment .AppointCalenderOverview .AppointCalenderTable .AppointCalenderRow .AppointCalenderCell.AppointCalenderCellEvent {
            background-image: linear-gradient(45deg, #4db35a 0%, #a0f2ab 50%);
        }

AppointCalenderCelToday .ModulAppointment .AppointNoEvents {
    font-weight: bold;
}

/* --- \Kalender ---*/

.layout-start .ModulAppointment {
    padding: 0 0 7px 0;
}

.layout-start .ModulAppointment .AppointEventMonthSeperator {
    display: none;
    visibility: hidden;
}

.ModulAppointment {

}

    .ModulAppointment .AppointmentEntries {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 460px));
        column-gap: 35px;
        row-gap: 15px;
    }

    .ModulAppointment .AppointEventMonthSeperator {
        grid-column: 1 / -1;
        margin: 25px 0 0 10px;
        font-weight: 500;
    }



    .ModulAppointment .AppointEventBox {
        background: #e5eff5;
        text-decoration: none;
        color: #000;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
        position: relative;
        display: flex;
        cursor: pointer;
    }
        .ModulAppointment .AppointEventBox:hover {
            background: #d6e7f2;
        }

        .ModulAppointment .AppointEventBox .AppointEventDate {
            bottom: 0px;
            margin: 20px 20px 0 20px;
            background-color: white;
            text-align: center;
            align-self: flex-end;
        }

            .ModulAppointment .AppointEventBox .AppointEventDate:after {
                content: '';
                display: block;
                height: 4px;
                width: 100%;
                background-color: #004f9e;
            }

            .ModulAppointment .AppointEventBox .AppointEventDate .AppointEventDay {
                font-size: 220%;
                font-weight: 500;
                display: block;
                padding: 20px 25px 0px 25px;
                font-family: Poppins;
            }

            .ModulAppointment .AppointEventBox .AppointEventDate .AppointEventMonth {
                font-size: 110%;
                display: block;
                padding: 0px 25px 20px 25px;
                font-family: Inter;
            }

        .ModulAppointment .AppointEventBox .AppointEventEventInfos {
            margin: 20px 10px 0 10px;
            font-family: Poppins;
            font-size: 80%;
        }

            .ModulAppointment .AppointEventBox .AppointEventEventInfos .AppointEventName {
                font-family: Poppins;
                font-weight: 500;
                font-size: 140%;
            }

            .ModulAppointment .AppointEventBox .AppointEventEventInfos .AppointEventOrganizer {
                margin: 0 0 22px 0;
            }

            .ModulAppointment .AppointEventBox .AppointEventEventInfos .AppointEventTime {
                margin: 0 0 7px 0;
            }

                .ModulAppointment .AppointEventBox .AppointEventEventInfos .AppointEventTime span {
                    margin: 0 5px 0 0;
                }

            .ModulAppointment .AppointEventBox .AppointEventEventInfos .AppointEventPlace {
                margin: 0 0 15px 0;
            }

                .ModulAppointment .AppointEventBox .AppointEventEventInfos .AppointEventPlace span {
                    margin: 0 6px 0 2px;
                }



    .ModulAppointment .AppointEventHide {
        margin: 0 0 5px 40px;
        overflow: hidden;
        display: block;
    }

    /* --- New Appointment --- */

    .ModulAppointment .AppointAddInputHeadline,
    .ModulAppointment .AppointAddInputInfomation {
        text-align: center;
    }

    .ModulAppointment .AppointAddInputHeadline{
        font-weight: 600;
        padding: 0 0 10px 0;
    }

    .ModulAppointment .AppointAddInputTable {
        display: table;
        margin: 0 auto;
        border-collapse: collapse;
    }

        .ModulAppointment .AppointAddInputTable .AppointAddInputRow {
            display: table-row;
        }

            .ModulAppointment .AppointAddInputTable .AppointAddInputRow .AppointAddDesc,
            .ModulAppointment .AppointAddInputTable .AppointAddInputRow .AppointAddInput {
                display: table-cell;
                padding: 0 0 5px 0;
                vertical-align: top;
            }

            .ModulAppointment .AppointAddInputTable .AppointAddInputRow .AppointAddDesc {
                text-align: right;
                padding: 0 15px 0 0;
            }

    /* --- ENDE --- \New Appointment --- */
    /* --- Upload (Info/Flyer) --- */
    .ModulAppointment .AppointAddInput .AppointAddInputContainer {
        margin: 7px 0 0 0;
    }

        .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerSelectedFile {
            display: none;
        }

        .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadProgress {
            display: none;
            padding: 5px;
            border: 1px solid #aaa;
        }

            .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadProgress .AppointFileUploadContainer {
            }

                .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadProgress .AppointFileUploadContainer .AppointFileUploadText {
                    display: inline-block;
                    vertical-align: middle;
                    margin: 0px 5px 3px 0;
                }

                .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadProgress .AppointFileUploadContainer #AppointFileUploadProgressBar {
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    vertical-align: middle;
                }

            .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadProgress .AppointFileUploadButton {
                text-align: center;
            }

                .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadProgress .AppointFileUploadButton #AppointFileUploadAbort {
                    text-decoration: none;
                    color: #f00;
                }

        .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadFinish {
            display: none;
            padding: 5px;
            border: 1px solid #aaa;
            width: 220px;
        }

            .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadFinish #AppointFileUploadFinishButton {
                text-align: right;
            }

                .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadFinish #AppointFileUploadFinishButton #AppointFileUploadDeleteFile {
                    text-decoration: none;
                    color: #de0000;
                }

            .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadFinish .AppointFileUploadFinishTitle {
                text-align: center;
                font-weight: bold;
            }

            .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadFinish #AppointFileUploadFinishFilename,
            .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadFinish #AppointFileUploadFinishFilesize,
            .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadFinish #AppointFileUploadFinishFiletype,
            .ModulAppointment .AppointCheck #AppointFileUploadFinishFilename,
            .ModulAppointment .AppointCheck #AppointFileUploadFinishFilesize,
            .ModulAppointment .AppointCheck #AppointFileUploadFinishFiletype {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerUploadFinish #AppointFileUploadFinishInputIdentifier {
                display: none;
            }

        .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerError {
            display: none;
            padding: 5px;
            border: 1px solid #aaa;
            width: 220px;
            max-height: 200px;
            overflow: hidden;
        }

            .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerError .AppointFileUploadErrorButton {
                text-align: right;
            }

                .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerError .AppointFileUploadErrorButton #AppointFileUploadError {
                    text-decoration: none;
                    color: #0060a6;
                }

            .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerError .AppointFileUploadErrorContainer {
            }

                .ModulAppointment .AppointAddInput .AppointAddInputContainer#AppointFileUploadContainerError .AppointFileUploadErrorContainer .AppointFileUploadErrorTitle {
                    display: inline;
                    color: #f00;
                    font-weight: bold;
                }

    .ModulAppointment .AppointAddInput #AppointFileUploadContainerError.AppointAddInputContainer .AppointFileUploadErrorContainer #AppointFileUploadErrorMessage {
        color: #f00;
        display: inline;
    }

    .ModulAppointment .AppointAddInput .AppointAddInputContainer .AppointAddInputFileUpload {
    }

    /* --- ENDE - Upload (Info/Flyer) - ENDE --- */

    .ModulAppointment .AppointAddInputHeadline.AppointCheck {
        font-weight: 600;
    }

    .ModulAppointment .AppointAddInputTable.AppointCheck {
        margin: 20px auto 0 auto;
    }

    .ModulAppointment .AppointCheck .AppointAddDesc {
        font-weight: bold;
    }

    .ModulAppointment .AppointCheck .AppointAddInput {
        width: 300px;
    }

    .ModulAppointment .AppointCheck .AppointAddInputRow {
        border: 10px solid transparent;
    }


    .ModulAppointment .AppointCheck .AppointAddInput .AppointAddCheckField {
        display: inline-block;
        max-width: 100%;
    }



.MAInfo {
    color: #f00;
    font-weight: bold;
    margin: 10px 0 0 0;
    width: auto !important;
}

.MAMandatory {
    color: #f00;
    font-weight: bold;
    width: 10px !important;
}

.MAReport {
    color: #f00;
    width: auto !important;
}


@media all and (max-width: 1000px) {
    .ModulAppointment {
        grid-template-columns: repeat(auto-fit, minmax(320px, 100%));
    }
}


    /* Show - Sidebar */

    .SidebarModulAppointment {
    }

        .SidebarModulAppointment ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }

        .SidebarModulAppointment > ul {
            margin: 10px 0 5px 0;
        }

            .SidebarModulAppointment > ul:first-child {
                margin: 5px 0 5px 0;
            }

        .SidebarModulAppointment ul li .AppointEventHeader {
            display: block;
            font-variant: small-caps;
            font-weight: bold;
        }

        .SidebarModulAppointment ul li ul {
            padding: 0 0 0 3px;
            margin: 0 0 0 3px;
            border-left: 1px solid #0060a6;
        }

            .SidebarModulAppointment ul li ul li {
                margin: 0px 0 0px 0;
                padding: 7px 0 8px 0;
                border-bottom: 1px solid #0060a6;
            }

                .SidebarModulAppointment ul li ul li:last-child {
                    border-bottom: unset;
                }

                .SidebarModulAppointment ul li ul li span {
                    display: block;
                }

                    .SidebarModulAppointment ul li ul li span.AppointEventTopRow span {
                        display: inline-block;
                    }

                        .SidebarModulAppointment ul li ul li span.AppointEventTopRow span.AppointEventEvent {
                            font-weight: bold;
                            padding: 0 3px 0 0;
                        }

                        .SidebarModulAppointment ul li ul li span.AppointEventTopRow span.AppointEventOrganizer {
                            font-size: 80%;
                        }

                    .SidebarModulAppointment ul li ul li span.AppointEventDateTime {
                        padding: 5px 0 0 0;
                        font-size: 80%;
                        color: #666;
                    }

    /* Edit */
    .ui-autocomplete {
        z-index: 9999;
    }

    .MAEventList {
        float: left;
        width: 900px;
    }

    .MAEventListRowHead {
        border-bottom: 1px dashed #666;
        margin-top: 15px;
    }

        .MAEventListRowHead div {
            font-weight: bold;
            background-color: #fff !important;
        }

    .MAEventListRow {
        float: left;
        width: 900px;
        height: 20px;
    }

    .MAEventRowDiable {
        background-image: url(../img/MiniCMS/MADisableBackground.png);
        background-repeat: repeat-y;
    }

    .MAEventListRow div {
        float: left;
        clear: none;
        height: 20px;
    }

    .MAEventListRow:hover div {
        background-color: #ddd;
    }

    .MAEventListRow .MAEventDate {
        width: 80px;
        border-right: 1px dashed #666;
    }

    .MAEventListRow .MAEventTime {
        width: 60px;
        border-right: 1px dashed #666;
    }

    .MAEventListRow .MAEventPlace {
        width: 220px;
        border-right: 1px dashed #666;
        text-align: left;
        overflow: hidden;
    }

    .MAEventListRow .MAEventEvent {
        width: 263px;
        border-right: 1px dashed #666;
        text-align: left;
        overflow: hidden;
    }

    .MAEventListRow .MAEventOrganizer {
        width: 180px;
        border-right: 1px dashed #666;
        text-align: left;
        overflow: hidden;
    }

    .MAEventListRow .MAEventActiv {
        width: 51px;
    }

        .MAEventListRow .MAEventActiv .MAEventActivTrue {
            background-image: url(../img/MiniCMS/Icons00C000.png);
            background-repeat: no-repeat;
            background-position: -64px -144px;
            margin: 0 0 0 18px;
            float: left;
            height: 16px;
            width: 16px;
        }

        .MAEventListRow .MAEventActiv .MAEventActivFalse {
            background-image: url(../img/MiniCMS/IconsC00000.png);
            background-repeat: no-repeat;
            background-position: -96px -128px;
            margin: 0 0 0 18px;
            float: left;
            height: 16px;
            width: 16px;
        }

    .MAEventListRow .MAEventListEditButtons {
        width: 20px;
    }

    .MAEventAddInputRange {
        display: table;
        margin: 0 auto;
        clear: both
    }

    .MAEventAddInputRow {
        float: left;
        clear: both;
    }

    .MAEventAddInputRowActivate {
        margin: 20px 0 0 0;
    }

    .MAEventAddDesc {
        float: left;
        width: 150px;
        text-align: right;
        margin: 9px 0 0 0;
    }

    .MAEventAddInput {
        float: left;
        margin: 0 0 0 10px;
    }

        .MAEventAddInput > input {
            width: 160px;
        }

        .MAEventAddInput textarea {
            width: 220px;
        }

        .MAEventAddInput .EditModernInputBox {
            margin: 2px 0 0 0;
        }

        .MAEventAddInput .MAEventAddInputFileUpload {
            border: 1px solid #666;
            box-shadow: 0 0 5px 0 #999;
            margin: 2px 0 0 0;
            padding: 5px;
            text-align: left;
        }

            .MAEventAddInput .MAEventAddInputFileUpload .MAEventAddInputFileUploadStatus {
                text-align: center;
                font-weight: bold;
            }

            .MAEventAddInput .MAEventAddInputFileUpload .MAEventAddInputFileUploadPreview {
                text-align: center;
                margin: 0 0 10px 0;
            }

            .MAEventAddInput .MAEventAddInputFileUpload .MAEventAddInputFileUploadFileName {
            }

                .MAEventAddInput .MAEventAddInputFileUpload .MAEventAddInputFileUploadFileName input {
                    padding: 1px;
                    box-shadow: 0 0 1px 0 #bbb;
                }

            .MAEventAddInput .MAEventAddInputFileUpload .MAEventAddInputFileUploadFileName {
                margin: 0 0 2px 0;
            }

            .MAEventAddInput .MAEventAddInputFileUpload .MAEventAddInputFileUploadDeleteFile {
                display: table;
                margin: 10px auto 0 auto;
            }

                .MAEventAddInput .MAEventAddInputFileUpload .MAEventAddInputFileUploadDeleteFile .MAEventAddInputFileUploadDeleteFileLabel {
                    display: inline-block;
                    margin: 8px 0 0 5px;
                }

        .MAEventAddInput .MAEventAddInputFileUploadSelect {
            margin: 9px 0 0 0;
        }

        .MAEventAddInput #MAEventAddInputFileUploadSelected {
            display: none;
            width: 220px;
        }

            .MAEventAddInput #MAEventAddInputFileUploadSelected #MAEventAddInputFileUploadSelectedButton {
                text-align: center;
            }

                .MAEventAddInput #MAEventAddInputFileUploadSelected #MAEventAddInputFileUploadSelectedButton #MAEventAddInputFileUploadSelectedLink {
                    text-decoration: none;
                    color: #de0000;
                }

            .MAEventAddInput #MAEventAddInputFileUploadSelected .MAEventAddInputFileUploadSelectedTitle {
                text-align: center;
                font-weight: bold;
            }

        .MAEventAddInput #MAEventAddInputFileUploadError {
            display: none;
            width: 220px;
            max-height: 200px;
            overflow: hidden;
        }

            .MAEventAddInput #MAEventAddInputFileUploadError .MAEventAddInputFileUploadErrorButton {
                text-align: right;
            }

                .MAEventAddInput #MAEventAddInputFileUploadError .MAEventAddInputFileUploadErrorButton #MAEventAddInputFileUploadErrorLink {
                    text-decoration: none;
                    color: #0060a6;
                }

            .MAEventAddInput #MAEventAddInputFileUploadError .MAEventAddInputFileUploadErrorContainer {
            }

                .MAEventAddInput #MAEventAddInputFileUploadError .MAEventAddInputFileUploadErrorContainer .MAEventAddInputFileUploadErrorTitle {
                    display: inline;
                    color: #f00;
                    font-weight: bold;
                }

                .MAEventAddInput #MAEventAddInputFileUploadError .MAEventAddInputFileUploadErrorContainer #MAEventAddInputFileUploadErrorMessage {
                    color: #f00;
                    display: inline;
                }

        .MAEventAddInput .CheckboxSlide {
            margin: 5px 0 0 0;
        }

    .MAContainerConfigConfig {
        display: table;
        margin: 0 auto;
    }

    .MAConfFunctionShowWeekdays,
    .MAConfFunctionShowCalendar,
    .MAConfFunctionShowFileUpload,
    .MAConfFunctionMail {
        display: table;
        margin: 10px 0 0;
        max-width: 450px;
    }

        .MAConfFunctionShowWeekdays .ConfSetting,
        .MAConfFunctionShowCalendar .ConfSetting,
        .MAConfFunctionShowFileUpload .ConfSetting,
        .MAConfFunctionMail .ConfSetting {
            margin: 4px 20px 0;
        }

            .MAConfFunctionShowWeekdays .ConfSetting input.ModernInput,
            .MAConfFunctionShowCalendar .ConfSetting input.ModernInput,
            .MAConfFunctionShowFileUpload .ConfSetting input.ModernInput,
            .MAConfFunctionMail .ConfSetting input.ModernInput {
                width: 220px;
            }

            .MAConfFunctionShowWeekdays .ConfSetting > label,
            .MAConfFunctionShowCalendar .ConfSetting > label,
            .MAConfFunctionShowFileUpload .ConfSetting > label {
                display: inline-block;
                margin: 5px 0 0 5px;
            }


@media all and (max-width: 980px) {

    .ModulAppointment .AppointmentEntries {
        grid-template-columns: repeat(auto-fit, minmax(320px,100%));
    }

}