.resource-object {
    width: 30em;
    float: left;
    margin: 1em;

    .resource-details {
        padding: 0.5em;

        .resource-description {
            height: 10em;

            .resource-picture {
                height: 10em;
                width: 10em;
                float: left;
            }
        }

        .small-resource-description {
            height: 5em;

            .resource-picture {
                height: 5em;
                width: 5em;
                float: left;
            }
        }
    }
}

tr.resource-planning-selected-request {
    td {
        background: var(--yellow-40);
    }
}

.resource-picture {
    height: 10em;
    width: 10em;
}


/* resource category selection */
.resource-category-select-icon-label > .resource-category-select-radio {
    visibility: hidden;
    position: absolute;
}

#sidebar .room-search-tree-widget {
    max-height: unset !important;
}

ul.resource-tree {
    list-style-type: none;
    padding-left: 0;

    & > li {
        padding-left: 18px;
        text-indent: -19px;

        & > ul.resource-tree {
            padding-left: 3px;
        }
    }
}

.resource-tree {
    .selected-resource {
        background-color: var(--origin-base-color);
        color: var(--white);
        padding: 2px;
        width: calc(100% - 21px);
    }

    a {
        img:not(.resource-tree-node) {
            margin-left: 1px;
        }

        &.selected-resource {
            display: inline-block;
            padding-left: 18px;
            text-indent: -19px;

            img {
                margin-left: 4px;
            }
        }
    }

    img.resource-tree-node {
        padding-top: 2px;
        vertical-align: top;
    }
}

/* temporary permission list */

#resource-temporary-permissions {
    fieldset.bulk-datetime {
        display: none;
    }

    input.bulk-datetime-enable:checked ~ fieldset.bulk-datetime {
        display: block;
    }
}

/* desktop view */

@media all and (min-width: 800px) {
    form.resource-search {
        display: flex;
        flex-wrap: wrap;
    }

    fieldset.resource-search {
        flex-grow: 1;
    }
}

.resource-action-tile {
    margin-bottom: 1em;

    article {
        border: none;
    }
}

@media all and (min-width: 800px) {
    .overview-action-tile-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .overview-action-tile {
        width: 20em;
        max-width: 45%;
        flex-grow: 1;
        margin-right: 10px;
        height: 9em;
    }
}

@media all and (max-width: 799px) {
    .overview-action-tile {
        width: 95%;
        margin-bottom: 1em;
    }
}

.room-search-form {
    ul.criteria-list {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            margin-bottom: 0.5em;

            > label {
                input[type=text],
                input[type=number],
                input[type=date],
                select {
                    width: calc(100% - 2em);
                    height: 30px;

                    &[type=number], &[data-time=yes] {
                        width: 4em;
                    }

                    &[type=date] {
                        width: 10em;
                        max-width: 10em;
                    }
                }

                .select2-wrapper {
                    select, span.selection, span.select2 {
                        height: 30px;
                        width: calc(100% - 2em) !important;
                    }
                }
            }

            input[type="number"] {
                max-width: 5em;
            }

            .range-input-container {
                input {
                    &.hasDatePicker {
                        width: 70%;
                    }

                    &.hasTimepicker {
                        width: 20%;
                        margin: 5px 0;
                    }
                }
            }
        }
    }
}

.room-clipboard-special-actions {
    margin-top: 0.25em;
    margin-left: 0.25em;
}

.resource-request {
    .overlapping-requests {
        color: var(--yellow-60);
    }

    .overlapping-bookings {
        color: var(--red-60);
    }

    .resource-available {
        color: var(--green-60);
    }
}

.booking-view-button-container {
    width: 100%;
    text-align: center;
}

.create-booking-form {
    .fieldset-row {
        &.inner-row {
            padding-top: 0;
            display: flow-root;
        }

        .time-option-container {
            padding-top: 1ex;
        }

        fieldset {
            min-width: 340px;
            padding-top: 1ex;
        }

        #begin_date-weekdays,
        #end_date-weekdays {
            span, input {
                max-width: 7.7em;
            }
        }

        #RepeatIntervalSelectField-Daily, #RepeatIntervalSelectField-Weekly {
            margin-left: 2em;
            margin-bottom: 2em;
        }
    }

    .singledates {
        .booking-list-interval-date {
            &.not-taking-place {
                text-decoration: line-through;
                color: var(--light-gray-color);
            }

            margin-right: 1.2em;
        }
    }

    .booking-list-interval-actions {
        img {
            cursor: pointer;
        }
    }

    label.assigned-user-label div.assigned-user-search-wrapper {
        display: flex;
        flex-direction: row;

        .delete-assigned-user-icon {
            margin-top: 0.5em;
            margin-left: 0.5em;
        }
    }
}

@media screen and (min-width: 1024px) {
    /* individual booking plan print view */
    #sidebar .colour-selectors {
        display: flex;
        flex-direction: column;
        margin: 1em;
        text-align: center;

        .colour-selector {
            width: calc(100% - 1em);
            height: 4em;
            margin: 0.5em;

            input[type="color"] {
                display: none;
            }
        }

        .print-action {
            margin-top: 2em;
            width: 100%;
            height: 6em;
        }
    }
}

.dragged-colour {
    width: 10%;
    height: 10%;
}

@media screen {
    section.room-schedule {
        margin-bottom: 2em;
    }
}

@media print {
    section.room-schedule {
        width: 100%;
        height: 95%;
        page-break-after: always;
    }
}


/* Rules for the map keys on a booking plan page: */
.map-key-list {
    list-style-type: none;
    padding-left: 1em;
    padding-top: 1em;

    .map-key {
        white-space: nowrap;
        display: inline;
        margin-right: 2em;
        vertical-align: middle;

        span {
            width: 2em;
            display: inline-block;
            height: 1em;

        }
    }
}

.fc-time, .fc-widget-header {
    background-color: var(--content-color-20);
}

.request-list {
    a.request-marking-icon {
        background-repeat: no-repeat;
        display: block;
        width: var(--icon-size-default);
        height: var(--icon-size-default);
        @include background-icon(radiobutton-unchecked);

        &[data-marked="1"] {
            @include background-icon(radiobutton-checked, status-red);
        }

        &[data-marked="2"] {
            @include background-icon(radiobutton-checked, status-yellow);
        }

        &[data-marked="3"] {
            @include background-icon(radiobutton-checked, status-green);
        }
    }
}

#booking-plan-jmpdate-button {
    width: 100px;
    height: 31.5px;
    margin: 0.5em 0.2em;
    padding: 0.4em;
}

#booking-plan-jmpdate {
    width: 100px;
    height: 19px;
    margin: 0.5em 0.2em;
    padding: 0.4em;
}

form#resolve-request, form#decline-request {
    dl {
        dt, dd {
            &:not(:last-child) {
                margin-bottom: 5px;
            }
        }

        dt {
            grid-column: 1;
        }

        dd {
            grid-column: 2;
        }

        margin: 0;
        display: grid;
        grid-template-columns: 40% auto;

    }
}

@media all and (min-width: 1600px) {
    form#resolve-request {
        section.splitted-layout {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            article.assign-dates {
                div {
                    overflow-x: auto;
                    max-height: 250px;
                }
            }

            article.assign-dates, div[data-dialog-button] {
                header {
                    margin: 0;
                }

                table {
                    > tbody:last-of-type {
                        > tr:last-child {
                            > td {
                                border-bottom: none;
                            }
                        }
                    }

                    &.default {
                        > thead {
                            > tr {
                                > th {
                                    &:first-child {
                                        z-index: 2;
                                        background-color: var(--content-color-20);
                                        min-width: 180px;
                                        left: 0;
                                    }

                                    position: sticky;
                                    top: 0;
                                    z-index: 1;
                                    border-top: none;
                                    border-bottom: none !important;
                                    box-shadow: inset 0 1px 0 var(--brand-color-darker);
                                }
                            }
                        }

                        > tbody {
                            > tr {
                                > td {
                                    &:first-child {
                                        position: sticky;
                                        left: 0;
                                        z-index: 1;
                                        background: var(--white);
                                    }
                                }
                            }
                        }
                    }
                }

                margin: 0;
                height: 100%;
                overflow-y: auto;
                width: 100%;
                padding: 0;
            }

            article {
                &.left-part, &.right-part {

                    flex-grow: 1;
                    margin-bottom: 10px;
                }

                &.left-part {
                    width: 50%;
                }

                &.right-part {
                    width: 40%;
                    padding-left: 1em;
                }

                section {
                    padding-top: 0;
                }
            }
        }
    }
}


@media all and (max-width: 1599px) {
    form#resolve-request article.right-part {
        padding-bottom: 10px;
    }
}


button.takes-place-status-toggle {
    border: none;
    background: none;
}

.user-room-groups-widget {
    &__rooms {
        list-style: none;
        margin-top: 5px;
        padding: 0 6px;
        border: 1px solid $light-gray-color-40;
        border-radius: $border-radius;
        max-height: 200px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    &__room-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 4px;
        margin: 0 -6px;
        transition: background-color 0.2s;

        &:hover {
            background-color: $color--action-menu-hover;
        }

        .actions {
            display: inline-flex;
            gap: 5px;
            align-items: center;
        }
    }
}