
#toast-container button {
    width: auto;
}


.fancybox-content .reservation-form{
    max-width: 800px;
}
.cke_dialog_background_cover {
    z-index: 99999 !important;
}
.cke_dialog_container {
    z-index: 100000 !important;
}
.tx-ig-reservations {
    .calendar-nav {
        display: flex;
        align-items: center;

        .date-select {
            width: 55%;
        }

        .date-prev {
            flex-grow: 1;
        }

        .date-next {
            text-align: right;
            flex-grow: 1;
        }
    }

    .calendar-day .calendar-col,
    .calendar-rows-1 .calendar-col {
        width: 100%;
    }

    .calendar-rows-5 .calendar-col {
        width: 20%;
    }

    .calendar-rows-7 .calendar-col {
        width: 14.28571%;
    }

    .calendar-header {
        padding: 2px 5px;
    }

    .calendar-header-day,
    .calendar-header-date {
        font-size: 16px;
    }

    .calendar .ig-reservations-calendar-table {
        border-left: 1px solid #e8e4e2;
    }

    .ig-reservations-calendar-table .calendar-col {
        border: 1px solid #e8e4e2;
        border-left: 0;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        @include box-sizing;

        &.today {
            background-color: #dedede;
        }
    }

    .timeslot {
        align-items: flex-start;
        height: $igReservationEntryHeight;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
        @include box-sizing;

        .timeslot-title {
            vertical-align: middle;
        }

        .timeslot-name div {
            line-height: normal;
        }
    }

    .calendar-day .timeslot {
        height: $igReservationDayViewEntryHeight;
	align-items: center;
    }

    .unassigned-events-link {
	text-align: center;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	.icon {
            margin-right: 3px;
	}
    }



    .icon-size-small {
        padding-top: 2px;
    }

    .icon-size-small {
	display: inline-block;
        width: 16px;
        height: 16px;
    }

    .icon-size-small svg {
        width: 16px;
        height: 16px;
        vertical-align: top;
        display: block;
    }
    .icon svg g.icon-color {
        fill: #fff;
    }
    .dp-multiSelectBox .icon svg g.icon-color {
        fill: #000;
    }
    @keyframes spinner {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .icon.icon-spin svg g.icon-color {
        fill: #000;
        transform-origin: 8px 8px 0;
        animation: spinner 1s linear infinite;
    }


    .button {
        background-color: $igReservationButtonDefaultBackgroundColor;
        color: $igReservationButtonDefaultColor;
        padding: 3px;
	display: inline-block;
    }
    .button:hover {
	background-color: $igReservationButtonDefaultBackgroundColorHover;
    }
    .container-button {
	display: inline-block;
    }

    .button-large {
        background-color: $igReservationButtonDefaultBackgroundColor;
        color: $igReservationButtonDefaultColor;
        padding: 10px;
	display: inline-block;
    }
    .button-large:hover {
	background-color: $igReservationButtonDefaultBackgroundColorHover;
    }
    .button-show {
        background-color: $igReservationButtonShowBackgroundColor;
	color: $igReservationButtonShowColor;
    }
    .button-show .icon svg g.icon-color {
	fill: $igReservationButtonShowColor;
    }
    .button-show:hover {
        background-color: $igReservationButtonShowBackgroundColorHover;
    }


    .button-delete {
        background-color: $igReservationButtonDeleteBackgroundColor;
	color: $igReservationButtonDeleteColor;
    }
    .button-delete .icon svg g.icon-color {
	fill: $igReservationButtonDeleteColor;
    }
    .button-delete:hover {
        background-color: $igReservationButtonDeleteBackgroundColorHover;
    }
    .button-menu:hover {
        background-color: $igReservationButtonMenuBackgroundColorHover;
    }

    .button-menu {
        background-color: $igReservationButtonMenuBackgroundColor;
	color: $igReservationButtonMenuColor;

        .icon svg .icon-color {
            fill: $igReservationButtonMenuColor;
            color: $igReservationButtonMenuColor;
        }
    }

    .calendar-day .timeslot-action .button.button-menu {
        width: 16px;
        min-width: auto;
    }

    .timeslot-add {
        vertical-align: middle;
    }

    .timeslot-action .button {
        display: inline-block;
        text-align: center;

        &.multibooking-button {
            display: none;

            &.show {
                display: inline-block;
            }
        }
    }

    .calendar-day {
        .timeslot .timeslot-name {
            width: 100px;
        }

        .timeslot .timeslot-reservations {
            margin-right: 20px;
        }

        .timeslot .timeslot-action {
            width: auto;
        }

        .timeslot-action .button {
            min-width: 90px;
        }

        .entry-reservation {
            width: 10px;
            height: 10px;
        }
    }

    .calendar-month,
    .calendar-week {
        .timeslot .timeslot-name {
            order: 1;
            width: 50%;

            .category-name {
                font-size: 10px;
            }
        }

        .timeslot .timeslot-reservations {
            order: 3;
            width: 50%;
        }

        .timeslot .timeslot-action {
            text-align: right;
            order: 2;
            width: 50%;
        }

        .timeslot-action .button {
            margin-right: 3px;

            &:last-child {
                margin-right: 0;
            }
        }

        .timeslot-action .button span.label {
            display: none;
        }

        .timeslot-action,
        .timeslot-name,
        .timeslot-reservations {
            font-size: $igReservationTimeslotFontSize;
        }

        .entry-reservation {
            width: 8px;
            height: 8px;
        }

        .timeslot .timeslot-action {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-flex-direction: row;
            flex-direction: row;
            -webkit-align-items: flex-end;
            align-items: flex-end;
            -webkit-justify-content: $igReservationCalendarWeekMonthTimeslotJustifyContent;
            justify-content: $igReservationCalendarWeekMonthTimeslotJustifyContent;
        }
        &.teamarea {
            .timeslot .timeslot-name {
                width: $igReservationCalendarWeekMonthTimeslotNameWidth;
            }

            .timeslot .timeslot-reservations {
                width: $igReservationCalendarWeekMonthReservationsWidth;
            }

            .timeslot .timeslot-action {
                width: $igReservationCalendarWeekMonthActionsWidth;
            }
        }

    }

    .entry-reservation {
        border-radius: 50%;
        background-color: #000;
        border: 1px solid #ccc;
        display: inline-block;
        margin-right: 3px;
        @include box-sizing;

        &.entry-reservation-guest {
            background-color: #ccc;
        }

        &.free-place {
            background-color: #fff;
        }

        &.entry-reservation-me {
            background-color: #f00;
        }

        &.entry-reservation-me.entry-reservation-guest {
            background-color: #ffaaaa;
        }
    }

    .ig-reservations-legend-status {
        border: 1px solid #e8e4e2;
        padding: 2px 10px;
        min-width: 153px;
        text-align: center;
        @include box-sizing;
    }

    .calendar-room-image {
        max-height: 370px;
    }

    .calendar-room-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        font-family: 'object-fit: cover; object-position: center center;';
    }

    .table-wrapper {
        overflow-x: auto;
    }

    .calendar-overview {
        font-size: 10px;
        min-width: 1000px;
        table-layout: fixed;

        td {
            vertical-align: top;
            border: 1px solid #ddd;
            padding-left: 5px;
            padding-right: 5px;
            width: 12.5%;
            overflow: hidden;

            div {
                //white-space: nowrap;
            }
        }

        .calendar-overview-day {
            &.calendar-overview-day-entry {
                height: 50.4px;
            }
            .calendar-overview-event{
                line-height: 150%;
                + .calendar-overview-event{
                    margin-top:8px;
                }
            }
        }
    }
    .pdf-export-link {
        a {
            line-height: 24px;
            padding-left: 29px;
            background-image: url(/typo3conf/ext/ig_layout/Resources/Public/Images/iconfiles/pdf.svg);
            background-size: 24px 24px;
            background-position: left center;
            background-repeat: no-repeat;

            &:hover {
                background-image: url(/typo3conf/ext/ig_layout/Resources/Public/Images/iconfiles/pdf_over.svg);
            }
        }
    }
}

.amountInput {
    label {
        z-index: 1;
    }
}

.tx-ig-reservations .form-guest {
    width: 100%;
}

.select2-container {
    z-index: 99993;
}

.table-event-show {
    td,
    th {
        border: 1px solid #ccc;
        padding: 5px;
    }
}
/* jconfirm Bootstrap simulation */
.jconfirm-buttons {
    display: flex;
}

.col-md-offset-4 {
    margin-left: 33.33333333%;
}

.col-md-4 {
    width: 33.33333333%;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-ok {
    background-color: #008885;
    color: #FFF;
    text-shadow: none;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-ok:hover {
    background-color: #006665;
    color: #FFF;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-cancel {
    background-color: #880000;
    color: #FFF;
    text-shadow: none;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-cancel:hover {
    background-color: #660000;
    color: #FFF;
}

body .fancybox-is-open .fancybox-bg {
    opacity: 0.8;
}

.reservation-form.fancybox-content {
    width: 50%;
    padding: 60px;
}

.fancybox-button:hover {
    color: #920b15;
    background-color: transparent;
}

.fancybox-content .bill-field,
.tx-ig-reservations .bill-field {
    display: none;

    &.show {
        display: inline-block;
    }
}
.billing-header {
    margin-top: 60px;
}
.billing-last {
    margin-bottom: 60px;
}

@media screen and (max-width: 1200px) {
    .col-md-offset-4 {
        margin-left: 15%;
    }

    .col-md-4 {
        width: 70%;
    }

    .tx-ig-reservations {
	.calendar-week,
    .calendar-month {
            .ig-reservations-calendar-table .calendar-col {
		margin-bottom: 50px;
		width: 33.3333%;
		border-left: 1px solid #e8e4e2;
            }
	}

        .calendar .ig-reservations-calendar-table {
            border-left: 0;
        }
    }

    .reservation-form.fancybox-content {
        width: 70%;
    }
}
@media screen and (min-width: 800px) {
    .reservations-event-show {
	width: 800px;
    }
}


@media screen and (max-width: 800px) {
    .col-md-offset-4 {
        margin-left: 5%;
    }

    .col-md-4 {
        width: 90%;
    }


    .ig-reservations-calendar-table-fullcalendar{
        .fc-center h2{
        }
        .fc-header-toolbar{
            flex-direction: column;
            > div{
                width: 100%;
                &:first-child{
                    padding-bottom: 32px;
                }
            }
        }
    }

    .reservation-form.fancybox-content {
        width: 90%;
        padding: 40px;
    }

}

@media screen and (max-width: 600px) {
    .tx-ig-reservations {
	.calendar-week,
	.calendar-month {
            .ig-reservations-calendar-table .calendar-col {
		margin-bottom: 50px;
		width: 50%;
            }
	}
	.calendar-day {
            .entry-reservation {
		width: 8px;
		height: 8px;
            }
	}
    }
    .ig-reservations-calendar-table{
        .fc-header-toolbar{
            > div{
                &:first-child{
                    padding-bottom: 24px;
                }
            }
        }
    }
}

@media screen and (max-width: 480px) {
    .tx-ig-reservations {
        .calendar-week,
        .calendar-month {
            .ig-reservations-calendar-table .calendar-col {
                width:100%;
		margin-bottom: 10px;
            }
	    .calendar-col:not(.active) .calendar-entries {
		display: none;
	    }
	    .calendar-col .calendar-header:hover {
		cursor: pointer;
	    }
	    .calendar-header-day .accordion-svg {
		display: block;
	    }
        }
	.calendar-day {
	    font-size: 12px;
		.entry-reservation {
		    width: 6px;
		    height: 6px;
		}
		.timeslot .timeslot-name {
		    width: 80px;
		}
		.timeslot-action .button {
		    min-width: auto;
		}

		.tx-ig-reservations-ajax-command .label {
		    display: none;
		}
	    }
    }
    .ig-reservations-calendar-table{
        .fc-header-toolbar{
            > div{
                &:first-child{
                    padding-bottom: 19px;
                }
            }
        }
    }
}

@media screen and (max-width: 320px) {
    .ig-reservations-calendar-table{
        .fc-header-toolbar{
            > div{
                &:first-child{
                    padding-bottom: 16px;
                }
            }
        }
    }
}

.calendar-header-day {
    display: flex;
    justify-content: space-between;
}
.calendar-header-day-date {
    width: auto;
    display: block;
}
.accordion-svg {
    width: 20px;
    height: 20px;
    display: none;
    fill: #999;
    transition: transform 0.3s;
}
.calendar-col.active .accordion-svg {
    transform: rotateX(180deg);
}
