.dashboard-view {
    grid-area: main;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    align-content: flex-start;
    max-width: 88vw;
}

.dashboard-view h2 {
    font-size: 24px;
    width: 100%;
}

/* Dashboard message */
.dashboard-message {
    width: 100%;
    height: auto;
    padding: 25px 16px;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    align-items: center;
    font-size: 18px;
}

/* Dashboard actions */
.dashboard-actions {
    width: 100%;
    margin-bottom: 40px;
    margin-top: 48px;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    align-content: flex-start;
}

@media (min-width: 1024px) {
    .dashboard-actions {
        margin-bottom: 20px;
        justify-content: space-between;
    }
}

.dashboard-actions.out {
    /*display: none;*/
    margin-bottom: 10px;
    margin-top: 10px;
}

.dashboard-actions > button {
    width: 100%;
    border-radius: var(--border-radius);
    /*box-shadow: 0 4px 8px 0 rgba(39, 50, 68, 0.1), 0 0 2px 0 rgba(39, 50, 68, 0.1);*/
    box-shadow: var(--boxshadow-chained);
    background-color: #ffffff;
    border: 0;
    padding: 25px 16px;
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .dashboard-actions > button {
        width: calc((100% - 24px) / 2);
    }
}

.dashboard-actions > button#QrCodeReaderToggle {
    /*display: none;*/
}

.dashboard-actions > button {
    margin-top: 16px;
}

.dashboard-actions > button:nth-child(2) {
    /*margin-top: 0;*/
}

@media (min-width: 1024px) {
    .dashboard-actions > button {
        margin-top: 0;
    }

    .dashboard-actions > button:last-child {
        /*margin-top: 16px;*/ /* this margin is needed if all 3 dashboard buttons are visible. since the QR-code button is hidden (as requested in issue 32708), the margin needs to be turned off. */
    }

    .dashboard-actions.all-actions-present > button:last-child {
        /* see comment in the rule directly above this one */
        margin-top: 16px;
    }
}

/*.dashboard-actions > button:last-child {
    margin-top: 16px;
}

@media (min-width: 1024px) {
    .dashboard-actions > button:last-child {
        margin-top: 0;
    }
}*/

.dashboard-actions > button svg:first-child {
    width: 27px;
    height: 27px;
}

.dashboard-actions > button span {
    font-size: 16px;
    font-weight: 500;
}

.dashboard-actions > button svg:last-child {
    width: 12px;
    height: 12px;
}

/* Dashboard - search by objectname */
.objectname-search-modal {
    width: 100%;
    height: 77px; /* TODO: might need tweaking for mobile */
    border-radius: var(--border-radius);
    /*box-shadow: 0 4px 8px 0 rgba(39, 50, 68, 0.1), 0 0 2px 0 rgba(39, 50, 68, 0.1);*/
    box-shadow: var(--boxshadow-chained);
    background-color: #ffffff;
    border: 0;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    margin-top: 16px;
    position: relative;
}

@media (min-width: 1024px) {
    .objectname-search-modal {
        width: calc((100% - 24px) / 2);
        margin-top: 0;
    }
}

.objectname-search-modal input {
    width: calc(100% - 130px);
    height: 40px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color-light);
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;
}

.objectname-search-modal button {
    width: 120px;
    height: 40px;
    border: 0;
    border-radius: var(--border-radius);
    background-color: var(--button-color);
    color: var(--button-font-light);
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    cursor: pointer;
}

.objectname-search-modal button:disabled {
    opacity: var(--disabled-opacity);
}

.objectname-search-message {
    position: absolute;
    background-color: var(--warning-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--warning-color-dark);
    padding: 10px;
    top: 65px;
}

/* QR-code reader */
/*.qrcode-reader-modal {
    position: absolute;
    width: min(90vw, 90vh);
    height: min(90vw, 90vh);
    top: 5vh;
    background-color: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: var(--boxshadow-chained);
}*/


/* Dashboard list */
.dashboard-list {
    width: 100%;
    border-top: 1px solid var(--border-color-light);
}

/* Existing bookings */
.existingbookings-header {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    gap: 8px;
    margin-bottom: 10px;
}

@media (min-width: 1024px) {
    .existingbookings-header {
        flex-flow: row nowrap;
        align-content: center;
        align-items: center;
        gap: 10px;
        margin-bottom: 0;
    }
}

.dashboard-view .existingbookings-header h2 {
    width: auto;
    margin: 0;
}

@media (min-width: 1024px) {
    .dashboard-view .existingbookings-header h2 {
        margin: 0.83em 0;
    }
}

.existingbookings-header .bookings-searchperiod {
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
    gap: 5px;
}

.existingbookings-header .date-picker .datepicker-toggle {
    width: 110px;
    height: 40px;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    background-color: #ffffff;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    padding-left: 5px;
    padding-right: 5px;
}

@media (min-width: 1024px) {
    .existingbookings-header .date-picker .datepicker-toggle {
        width: 120px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

.existingbookings-header .date-picker .datepicker-toggle svg {
    width: 17px;
    height: 17px;
}

.existingbookings-header .date-picker .value-display {
    font-size: 15px;
    font-weight: normal;
    position: static;
}

.existingbookings-header button.bookings-searchbutton {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--border-radius);
    background-color: var(--button-color);
    color: var(--button-font-light);
    display: flex;
    flex-flow: row nowrap;
    /*justify-content: space-between;*/
    justify-content: center;
    align-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    gap: 5px;
}

@media (min-width: 1024px) {
    .existingbookings-header button.bookings-searchbutton {
        width: auto;
        /*min-width: 150px;*/
        padding: 0 10px;
        justify-content: space-between;
    }
}

.existingbookings-header button.bookings-searchbutton > span {
    display: none;
}

@media (min-width: 1024px) {
    .existingbookings-header button.bookings-searchbutton > span {
        display: block;
    }
}

button.bookings-searchbutton svg {
    width: 20px;
    height: 20px;
}

button.bookings-searchbutton svg path {
    fill: var(--button-font-light);
}

.existing-booking {
    width: 100%;
    /*padding: 16px 24px;*/
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 40px 40px 100px;
    grid-template-areas: "bookingfacilityname"
        "bookingperiod"
        "bookingbuttons";
    grid-row-gap: 8px;
    align-content: center;
    align-items: center;
    background-color: var(--facilityblock-background);
    border-radius: var(--border-radius);
    box-shadow: var(--boxshadow-chained);
    margin-bottom: 16px;
}

.existing-booking.fullname-visible {
    grid-template-rows: 40px 20px 40px 100px;
    grid-template-areas: "bookingfacilityname"
                        "bookingfacilityfullname"
                        "bookingperiod"
                        "bookingbuttons";
}

@media (min-width: 1024px) {
    .existing-booking {
        padding: 16px 24px;
        grid-template-columns: 1fr 380px;
        grid-template-rows: 40px 40px;
        grid-template-areas: "bookingfacilityname bookingbuttons"
                            "bookingperiod bookingbuttons";
    }

    .existing-booking.fullname-visible {
        grid-template-rows: 40px 20px 40px;
        grid-template-areas: "bookingfacilityname bookingbuttons"
                            "bookingfacilityfullname bookingbuttons"
                            "bookingperiod bookingbuttons";
    }
}

.existing-booking.details-enabled:not(.details-visible) {
    /*grid-template-rows: 40px 40px 100px 20px;*/
    grid-template-rows: 40px 40px 1fr 20px;
    grid-template-areas: "bookingfacilityname"
                        "bookingperiod"
                        "bookingbuttons"
                        "detailstoggle";
}

.existing-booking.details-enabled.fullname-visible:not(.details-visible) {
    grid-template-rows: 40px 20px 40px 1fr 20px;
    grid-template-areas: "bookingfacilityname"
                        "bookingfacilityfullname"
                        "bookingperiod"
                        "bookingbuttons"
                        "detailstoggle";
}

.existing-booking.details-enabled.details-visible {
    grid-template-rows: 40px 40px 1fr 20px auto;
    grid-template-areas: "bookingfacilityname"
                        "bookingperiod"
                        "bookingbuttons"
                        "detailstoggle"
                        "bookingdetails";
}

.existing-booking.details-enabled.details-visible.fullname-visible {
    grid-template-rows: 40px 20px 40px 1fr 20px auto;
    grid-template-areas: "bookingfacilityname"
                        "bookingfacilityfullname"
                        "bookingperiod"
                        "bookingbuttons"
                        "detailstoggle"
                        "bookingdetails";
}

@media (min-width: 1024px) {
    .existing-booking.details-enabled:not(.details-visible) {
        grid-template-rows: 40px 40px 20px;
        grid-template-areas: "bookingfacilityname bookingbuttons"
                            "bookingperiod bookingbuttons"
                            "detailstoggle detailstoggle";
    }

    .existing-booking.details-enabled.fullname-visible:not(.details-visible) {
        grid-template-rows: 40px 20px 40px 20px;
        grid-template-areas: "bookingfacilityname bookingbuttons"
                            "bookingfacilityfullname bookingbuttons"
                            "bookingperiod bookingbuttons"
                            "detailstoggle detailstoggle";
    }

    .existing-booking.details-enabled.details-visible {
        grid-template-rows: 40px 40px 20px 1fr;
        grid-template-areas: "bookingfacilityname bookingbuttons"
                            "bookingperiod bookingbuttons"
                            "detailstoggle detailstoggle"
                            "bookingdetails bookingdetails";
    }

    .existing-booking.details-enabled.details-visible.fullname-visible {
        grid-template-rows: 40px 20px 40px 20px 1fr;
        grid-template-areas: "bookingfacilityname bookingbuttons"
                            "bookingfacilityfullname bookingbuttons"
                            "bookingperiod bookingbuttons"
                            "detailstoggle detailstoggle"
                            "bookingdetails bookingdetails";
    }
}

.existing-booking .booking-buttons {
    grid-area: bookingbuttons;
    /*display: flex;
    flex-flow: row wrap;*/
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fill, 1fr);
    grid-gap: 10px;
}

@media (min-width: 1024px) {
    .existing-booking .booking-buttons {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
}

.existing-booking.active .booking-buttons,
.existing-booking.startable .booking-buttons {

}

@media (min-width: 1024px) {
    .existing-booking.active .booking-buttons,
    .existing-booking.startable .booking-buttons {
        display: flex;
        flex-flow: row wrap;
        height: 100%;
        align-content: space-between;
    }
}

.existing-booking button {
    width: 100%;
    height: 40px;
    background-color: var(--button-color-light);
    padding: 0;
    border: 1px solid var(--button-color);
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    color: var(--button-font-dark);
    font-size: 17px;
    font-weight: bold;
    border-radius: var(--border-radius);
    cursor: pointer;
}

@media (min-width: 1024px) {
    .existing-booking button {
        width: calc((100% - 20px) / 2);
    }
}


.existing-booking button:first-child {
    /*margin-bottom: 10px;*/
}

@media (min-width: 1024px) {
    .existing-booking button:first-child {
        margin-bottom: 0;
    }
}

.existing-booking .booking-period {
    grid-area: bookingperiod;
    font-weight: bold;
    display: flex;
    align-content: center;
    align-items: center;
}

.existing-booking .booking-period.show-booking-state {
    flex-flow: row wrap;
}

@media (min-width: 1024px) {
    .existing-booking .booking-period.show-booking-state {
        flex-flow: row nowrap;
    }
}

.existing-booking .booking-period .booking-state-name {
    margin-top: 5px;
    width: 100%;
}

@media (min-width: 1024px) {
    .existing-booking .booking-period .booking-state-name {
        margin-top: 0;
        margin-left: 10px;
        width: auto;
    }
}

.existing-booking .booking-period svg {
    width: 22px;
    height: 22px;
    margin-left: 5px;
}

.existing-booking .booking-facility {
    grid-area: bookingfacilityname;
    font-weight: bold;
    display: flex;
    flex-flow: row nowrap;
}

/*.existing-booking.fullname-visible .booking-facility {
    flex-flow: row wrap;
}*/

.existing-booking .booking-facility .facility-name {
    width: 100%;
    height: 20px;
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
    gap: 10px;
}

.existing-booking .booking-facility .facility-fullname {
    font-weight: normal;
    grid-area: bookingfacilityfullname;
}

.booking-facility .facility-name button.fullname-toggle,
.booking-facility .facility-name button.showonmap-button {
    border: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    /*margin-left: 10px;*/
}

.facility-name button.fullname-toggle svg,
.facility-name button.showonmap-button svg {
    width: 20px;
    height: 20px;
}

.booking-details-button-wrapper {
    grid-area: detailstoggle;
}

.existing-booking button.booking-details-button {
    height: auto;
    width: auto;
    background-color: #ffffff;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--button-color);
}

.booking-details-button svg {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.booking-details-button svg path {
    fill: var(--button-font-dark);
}

/* booking details */
.booking-details {
    grid-area: bookingdetails;
    display: flex;
    flex-flow: row wrap;
    /*border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    padding: 10px;*/
}

.booking-details-general {
    width: 100%;
    /*display: flex;
    flex-flow: row wrap;*/
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color-light);
}

.booking-details.has-additionals .booking-details-general {
    border-bottom: 1px solid var(--border-color-light);
    padding-bottom: 10px; /* moet alleen als er extras en/of extrainfos zijn */
    margin-bottom: 10px;
}

.booking-details-general .booking-detail {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    align-items: center;
    /*height: 24px;*/
    min-height: 40px;
    /*border-right: 1px solid var(--border-color-light);*/
    /*border-bottom: 1px solid var(--border-color-light);*/
}

@media (min-width: 1024px) {
    .booking-details-general .booking-detail {
        flex-flow: row nowrap;
        border-right: 1px solid var(--border-color-light);
        border-bottom: 0;
        min-height: 24px;
    }
}

.booking-details-general .booking-detail:last-child {
    border-bottom: 0;
}

.booking-details-general .booking-detail label {
    /*margin-right: 5px;*/
    font-weight: bold;
    width: 100%;
}

@media (min-width: 1024px) {
    .booking-details-general .booking-detail label {
        margin-right: 5px;
        width: auto;
    }
}

.booking-detail > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-word;
}

.booking-details-additional {
    /*display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));*/
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

@media (min-width: 1024px) {
    .booking-details-additional {
        justify-content: space-between;
    }
}

.booking-details-additional .booking-extrainfos,
.booking-details-additional .booking-extras {
    width: 100%;
}

@media (min-width: 1024px) {
    .booking-details-additional .booking-extrainfos,
    .booking-details-additional .booking-extras {
        /*width: 50%;*/
        width: calc((100% - 20px) / 2);
    }
}

.booking-details-additional .booking-extrainfos {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    align-items: flex-start;
    /*border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);*/
    border-bottom: 1px solid var(--border-color-light);
    /*padding: 10px 0;*/
    padding: 0 0 10px 0;
}

@media (min-width: 1024px) {
    .booking-details-additional .booking-extrainfos {
        border: 1px solid var(--border-color-light);
        border-radius: var(--border-radius);
        padding: 10px;
    }
}

.booking-extrainfos + .booking-extras {
    margin-top: 10px;
}

@media (min-width: 1024px) {
    .booking-extrainfos + .booking-extras {
        margin-top: 0;
    }
}

.booking-extrainfo {
    width: 100%;
    min-height: 50px; /* to accommodate jumpless switching between view- and edit-mode. could be lowered to 40px, if the top and bottom padding is removed */
    display: grid;
    /*grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));*/
    grid-template-columns: 1fr;
    grid-gap: 5px 10px;
    grid-template-rows: auto;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

@media (min-width: 1024px) {
    .booking-extrainfo {
        grid-template-columns: 200px 1fr;
    }
}

.booking-extrainfo::before {
    content: attr(data-extrainfolabel);
    font-weight: bold;
}

.booking-extrainfo > div {
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
}

.existing-booking .extrainfo-editbutton {
    width: 20px;
    height: 20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    border: 0;
    margin-left: 10px;
}

.extrainfo-editbutton svg {
    width: 16px;
    height: 16px;
}

.extrainfo-value-edit select,
.extrainfo-value-edit input {
    height: 40px;
    width: calc(100% - 65px);
    border: 1px solid var(--border-color-light);
    /*border-radius: var(--border-radius);*/
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    padding-left: 10px;
    padding-right: 10px;
}

.extrainfo-value-edit .grow-wrap {
    width: calc(100% - 65px);
}

.extrainfo-value-edit textarea {
    border: 1px solid var(--border-color-light);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.extrainfo-value-edit button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color-light);
    border-left: 0;
    border-top-left-radius: 0;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius: 0;
}

.extrainfo-value-edit .grow-wrap + button {
    height: auto;
    align-self: stretch;
}

.extrainfo-value-edit button svg {
    width: 16px;
    height: 16px;
}

.extrainfo-value-edit select.valid,
.extrainfo-value-edit input.valid {
    border-color: var(--valid-input);
}

.extrainfo-value-edit select.invalid,
.extrainfo-value-edit input.invalid {
    border-color: var(--invalid-input);
}

.extrainfo-value-edit .valid-icon,
.extrainfo-value-edit .invalid-icon {
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

.extrainfo-value-edit .valid-icon path {
    fill: var(--valid-input);
}

.extrainfo-value-edit .invalid-icon path {
    fill: var(--invalid-input);
}

.extrainfo-value-edit select:not(.valid) ~ .valid-icon,
.extrainfo-value-edit input:not(.valid) ~ .valid-icon,
.extrainfo-value-edit .grow-wrap:not(.valid) ~ .valid-icon {
    display: none;
}

.extrainfo-value-edit select:not(.invalid) ~ .invalid-icon,
.extrainfo-value-edit input:not(.invalid) ~ .invalid-icon,
.extrainfo-value-edit .grow-wrap:not(.invalid) ~ .invalid-icon {
    display: none;
}

.booking-extrainfos-buttons {
    width: 100%;
    height: 60px;
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}

@media (min-width: 1024px) {
    .booking-extrainfos-buttons button {
        margin-left: 10px;
        width: 160px;
    }

    .booking-extrainfos-buttons button:first-child {
        margin-left: 0;
    }
}


/*.booking-extrainfos .booking-detail {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-content: flex-start;
    align-items: flex-start;
    height: 24px;
}

.booking-extrainfos .booking-detail label {
    margin-right: 5px;
    font-weight: bold;
}*/

/* bookingdetails - extras */
.booking-details .booking-extras {
    /*padding: 0 5px;*/
    padding: 10px 0;
    /*border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);*/
}

@media (min-width: 1024px) {
    .booking-details .booking-extras {
        padding: 10px;
        border: 1px solid var(--border-color-light);
        border-radius: var(--border-radius);
    }
}

.booking-extras-title {
    font-weight: bold;
    padding: 5px 5px;
    font-size: 18px;
}

.bookingdetails-extragroup {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
}

.bookingdetails-extragroup .extragroup-name {
    width: 100%;
    height: 30px;
    padding: 0 5px;
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
    font-weight: bold;
    /*background-color: var(--border-color-light);*/
    border-bottom: 1px solid var(--border-color-dark);
    cursor: pointer;
}

.bookingdetails-extragroup .extragroup-name svg {
    width: 12px;
    height: 12px;
    margin-left: 5px;
    transform: rotate(90deg);
}

.bookingdetails-extragroup.collapsed .extragroup-name svg {
    transform: rotate(0deg);
}

.bookingdetails-extragroup .extragroup-extras {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    /*padding: 0 5px;*/
}

@media (min-width: 1024px) {
    .bookingdetails-extragroup .extragroup-extras {
        padding: 0 5px;
    }
}

.bookingdetails-extragroup.collapsed .extragroup-extras {
    display: none;
}

.extragroup-extras .extragroup-extras-row {
    width: 100%;
    min-height: 40px;
    display: grid;
    grid-template-columns: 80px 1fr 100px;
    grid-template-areas: "extraquantity extraname extradeliveron";
    grid-gap: 10px;
    align-items: center;
}

:root {
    --extrasrow-areas-mobile: "extraname extraname" "extraquantitylabel extraquantity" "extradeliveronlabel extradeliveron";
    --extrasrow-columns-mobile: 1fr 1fr;
    --extrasrow-rows-mobile: repeat(3, 20px);
    --extrasrow-areas: "extraquantity extraname extradeliveron";
    --extrasrow-columns: 80px 1fr 100px;
    --extrasrow-rows: 1fr;
}

.extragroup-extras .extragroup-extras-row:not(.extragroup-extras-header) {
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    /*grid-template-columns: 1fr 1fr;*/
    grid-template-columns: var(--extrasrow-columns-mobile);
    /*grid-template-rows: repeat(3, 20px);*/
    grid-template-rows: var(--extrasrow-rows-mobile);
    /*grid-template-areas: "extraname extraname"
                        "extraquantitylabel extraquantity"
                        "extradeliveronlabel extradeliveron";*/
    grid-template-areas: var(--extrasrow-areas-mobile);
    background-image: linear-gradient(to bottom, var(--border-color-light), var(--border-color-light) 30px, transparent 30px, transparent 100%);
}

.extragroup-extras .extragroup-extras-row:not(.extragroup-extras-header):nth-child(2) {
    margin-top: 10px;
}

@media (min-width: 1024px) {
    .extragroup-extras .extragroup-extras-row:not(.extragroup-extras-header) {
        border: 0;
        border-radius: 0;
        margin-top: 0;
        padding: 0;
        /*grid-template-columns: 80px 1fr 100px;
        grid-template-rows: 1fr;*/
        grid-template-columns: var(--extrasrow-columns);
        grid-template-rows: var(--extrasrow-rows);
        /*grid-template-areas: "extraquantity extraname extradeliveron";*/
        grid-template-areas: var(--extrasrow-areas);
        background-image: none;
    }

    .extragroup-extras .extragroup-extras-row:not(.extragroup-extras-header):nth-child(2) {
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    .extragroup-extras .extragroup-extras-row:not(.extragroup-extras-header):last-child {
        margin-bottom: 0;
    }
}

.extragroup-extras .extragroup-extras-row.extragroup-extras-header.edit-allowed {
    /*grid-template-columns: 80px 1fr 100px 30px;*/
    grid-template-columns: 80px 1fr 100px 50px;
}

.extragroup-extras .extragroup-extras-row.extragroup-extras-header.edit-allowed.has-rate {
    /*grid-template-columns: 80px 1fr 100px 100px 100px 30px;*/
    grid-template-columns: 80px 1fr 100px 100px 100px 50px;
}

.extragroup-extras .extragroup-extras-row.extragroup-extras-header.has-rate:not(.edit-allowed) {
    /*grid-template-columns: 80px 1fr 100px 100px 100px;*/
    grid-template-columns: 80px 1fr 100px 100px 100px 50px;
}

.extragroup-extras-row.edit-allowed:not(.extragroup-extras-header) {
    --extrasrow-areas-mobile: "extraname extraname extrabuttons" "extraquantitylabel extraquantity extraquantity" "extradeliveronlabel extradeliveron extradeliveron";
    --extrasrow-areas: "extraquantity extraname extradeliveron extrabuttons";
    /*--extrasrow-columns-mobile: 1fr 1fr 30px;
    --extrasrow-columns: 80px 1fr 100px 30px;*/
    --extrasrow-columns-mobile: 1fr 1fr 50px;
    --extrasrow-columns: 80px 1fr 100px 50px;
}

.extragroup-extras-row.edit-allowed.has-rate:not(.extragroup-extras-header) {
    --extrasrow-areas-mobile: "extraname extraname extrabuttons" "extraquantitylabel extraquantity extraquantity" "extradeliveronlabel extradeliveron extradeliveron" "extraratelabel extrarate extrarate" "extracalculatedratelabel extracalculatedrate extracalculatedrate";
    --extrasrow-areas: "extraquantity extraname extradeliveron extrarate extracalculatedrate extrabuttons";
    /*--extrasrow-columns: 80px 1fr 100px 100px 100px 30px;*/
    --extrasrow-columns: 80px 1fr 100px 100px 100px 50px;
}

.extragroup-extras-row.has-rate:not(.extragroup-extras-header):not(.edit-allowed) {
    --extrasrow-areas-mobile: "extraname extraname extrabuttons" "extraquantitylabel extraquantity extraquantity" "extradeliveronlabel extradeliveron extradeliveron" "extraratelabel extrarate extrarate" "extracalculatedratelabel extracalculatedrate extracalculatedrate";
    --extrasrow-areas: "extraquantity extraname extradeliveron extrarate extracalculatedrate extrabuttons";
    --extrasrow-columns: 80px 1fr 100px 100px 100px 50px;
}

.extragroup-extras .extragroup-extras-row.edit-allowed:not(.extragroup-extras-header) {
    /*grid-template-columns: 1fr 1fr 30px;
    grid-template-rows: repeat(3, 20px);*/
    grid-template-columns: var(--extrasrow-columns-mobile);
    grid-template-rows: var(--extrasrow-rows-mobile);
    /*grid-template-areas: "extraname extraname extrabuttons"
                        "extraquantitylabel extraquantity extraquantity"
                        "extradeliveronlabel extradeliveron extradeliveron";*/
    grid-template-areas: var(--extrasrow-areas-mobile);
    background-image: linear-gradient(to bottom, var(--border-color-light), var(--border-color-light) 30px, transparent 30px, transparent 100%);
}

@media (min-width: 1024px) {
    .extragroup-extras .extragroup-extras-row.edit-allowed:not(.extragroup-extras-header) {
        /*grid-template-columns: 80px 1fr 100px 30px;
        grid-template-rows: 1fr;*/
        grid-template-columns: var(--extrasrow-columns);
        grid-template-rows: var(--extrasrow-rows);
        /*grid-template-areas: "extraquantity extraname extradeliveron extrabuttons";*/
        grid-template-areas: var(--extrasrow-areas);
        background-image: none;
    }
}

.extragroup-extras .extragroup-extras-row.edit-allowed:not(.extragroup-extras-header).ineditmode {
    grid-template-rows: 20px 40px 40px;
}

@media (min-width: 1024px) {
    .extragroup-extras .extragroup-extras-row.edit-allowed:not(.extragroup-extras-header).ineditmode {
        grid-template-rows: 1fr;
    }
}

.extragroup-extras-row.extragroup-extras-header {
    font-weight: bold;
    display: none;
}

@media (min-width: 1024px) {
    .extragroup-extras-row.extragroup-extras-header {
        display: grid;
    }
}

.extragroup-extras-row .extra-quantity {
    grid-area: extraquantity;
}

/*.extragroup-extras-row .extra-quantity::before {
    grid-area: extraquantitylabel;
    content: attr(data-labeltext);
}

@media (min-width: 1024px) {
    .extragroup-extras-row .extra-quantity::before {
        display: none;
    }
}*/

.extragroup-extras-row .extra-quantity-label {
    grid-area: extraquantitylabel;
    font-weight: bold;
}

@media (min-width: 1024px) {
    .extragroup-extras-row .extra-quantity-label {
        display: none;
    }
}

.extragroup-extras-row .extra-name {
    grid-area: extraname;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
    /*text-decoration: underline;*/
}

@media (min-width: 1024px) {
    .extragroup-extras-row .extra-name {
        font-weight: normal;
        text-decoration: none;
    }
}

.extragroup-extras-row .extra-name > div {
    max-width: calc(100% - 35px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.extragroup-extras-row .bookingextra-description-toggle {
    width: 20px;
    height: 20px;
    margin-left: 5px;
    background-color: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
}

.extragroup-extras-row .bookingextra-description-toggle svg {
    width: 18px;
    height: 18px;
}

.extragroup-extras-row.description-visible .bookingextra-description-toggle::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #000000;
    transform: rotate(45deg);
}

.extragroup-extras-row .extra-description {
    grid-column: 1 / -1;
    grid-row: -1;
    padding: 5px 10px 5px 0;
}

.extragroup-extras-row .extra-description > div {
    background-color: #f3f3f3;
    border: 1px solid #cccccc;
    padding: 5px 10px;
    position: relative;
}

.extragroup-extras-row .extra-description > div::before {
    content: "";
    width: 14px;
    height: 14px;
    border-bottom: 7px solid #cccccc;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    top: -14px;
    left: 10px;
}

@media (min-width: 1024px) {
    .extragroup-extras-row .extra-description > div::before {
        left: 100px;
    }
}

.extragroup-extras-row:not(.description-visible) .extra-description {
    display: none;
}

.extragroup-extras-row .extra-deliveron {
    grid-area: extradeliveron;
}

.extragroup-extras-row .extra-deliveron-label {
    grid-area: extradeliveronlabel;
    font-weight: bold;
}

@media (min-width: 1024px) {
    .extragroup-extras-row .extra-deliveron-label {
        display: none;
    }
}

/*.extragroup-extras-row .extra-deliveron::before {
    grid-area: extradeliveronlabel;
    content: attr(data-labeltext);
}

@media (min-width: 1024px) {
    .extragroup-extras-row .extra-deliveron::before {
        display: none;
    }
}*/

.extragroup-extras-row .extra-rate {
    grid-area: extrarate;
}

.extragroup-extras-row .extra-rate-label {
    grid-area: extraratelabel;
    font-weight: bold;
}

@media (min-width: 1024px) {
    .extragroup-extras-row .extra-rate-label {
        display: none;
    }
}

.extragroup-extras-row .extra-calculatedrate {
    grid-area: extracalculatedrate;
}

.extragroup-extras-row .extra-calculatedrate-label {
    grid-area: extracalculatedratelabel;
    font-weight: bold;
}

@media (min-width: 1024px) {
    .extragroup-extras-row .extra-calculatedrate-label {
        display: none;
    }
}

.existing-booking .extra-editbuttons {
    grid-area: extrabuttons;
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
}

.existing-booking button.extra-editbutton,
.existing-booking button.extra-canceleditbutton,
.existing-booking button.extra-deletebutton {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
}

@media (min-width: 1024px) {
    .existing-booking button.extra-editbutton,
    .existing-booking button.extra-canceleditbutton,
    .existing-booking button.extra-deletebutton {
        background-color: var(--button-color-light);
    }
}

.existing-booking button.extra-editbutton svg,
.existing-booking button.extra-canceleditbutton svg,
.existing-booking button.extra-deletebutton svg {
    width: 16px;
    height: 16px;
}

.extragroup-extras-row .extra-quantity-input,
.extragroup-extras-row .extra-deliveron select {
    height: 40px;
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
}

.available-booking-extras {
    border-top: 1px solid var(--border-color-light);
    min-height: 50px;
    display: grid;
    /*grid-template-columns: 80px 200px 1fr;*/
    grid-template-columns: 50px 190px 1fr;
    grid-gap: 5px;
    grid-template-rows: 20px 50px;
    grid-template-areas: "addlabel addlabel addlabel" "addquantity addselect addbutton";
    margin-top: 5px;
    padding-top: 5px;
    /*grid-template-columns: 140px 80px 200px 1fr;
    grid-template-rows: 1fr;
    grid-gap: 5px;*/
    /*display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;*/
}

.available-booking-extras.has-rates {
    grid-template-rows: 20px 50px 20px 20px;
    grid-template-areas: "addlabel addlabel addlabel"
                        "addquantity addselect addbutton"
                        "addrate addrate addrate"
                        "addcosts addcosts addcosts";
}

@media (min-width: 1024px) {
    .available-booking-extras {
        grid-template-columns: 140px 80px 200px 1fr;
        grid-template-rows: 50px;
        grid-template-areas: "addlabel addquantity addselect addbutton";
        align-items: center;
        grid-gap: 5px;
        /*margin-top: 0;*/
        margin-top: 10px;
        padding-top: 0;
    }

    .available-booking-extras.has-rates {
        grid-template-columns: 140px 80px 1fr 100px 100px 40px;
        grid-template-rows: 50px;
        grid-template-areas: "addlabel addquantity addselect addrate addcosts addbutton";
    }

    .available-booking-extras.has-rates:not(.available-booking-extras-header) {
        margin-top: 0;
    }
}

.available-booking-extras label {
    grid-area: addlabel;
    font-weight: bold;
}

@media (min-width: 1024px) {
    .available-booking-extras label {
        font-weight: normal;
    }
}

.available-booking-extras select,
.available-booking-extras input {
    height: 40px;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
}

.available-booking-extras select {
    grid-area: addselect;
    max-width: 200px;
    width: 100%;
}

.available-booking-extras input {
    grid-area: addquantity;
    width: 50px;
    padding-left: 5px;
    padding-right: 5px;
}

@media (min-width: 1024px) {
    .available-booking-extras input {
        width: 80px;
    }
}

.available-booking-extras .rentalrate,
.available-booking-extras .rentalcosts {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

@media (min-width: 1024px) {
    .available-booking-extras .rentalrate,
    .available-booking-extras .rentalcosts {
        display: block;
    }
}

.available-booking-extras .rentalrate {
    grid-area: addrate;
}

.available-booking-extras .rentalrate::before {
    content: attr(data-labeltext) ": ";
}

@media (min-width: 1024px) {
    .available-booking-extras .rentalrate::before {
        display: none;
    }
}

.available-booking-extras .rentalcosts {
    grid-area: addcosts;
}

.available-booking-extras .rentalcosts::before {
    content: attr(data-labeltext) ": ";
}

@media (min-width: 1024px) {
    .available-booking-extras .rentalcosts::before {
        display: none;
    }
}

.existing-booking .available-booking-extras button {
    grid-area: addbutton;
    width: 40px;
    height: 40px;
    border: 0;
}

/* available extras header - in case of rates */
.available-booking-extras.available-booking-extras-header {
    display: none;
}

@media (min-width: 1024px) {
    .available-booking-extras.available-booking-extras-header {
        display: grid;
        min-height: 30px;
        grid-template-rows: 30px;
        border-top-width: 4px;
        border-top-style: double;
    }
}

.available-booking-extras.available-booking-extras-header label {
    font-weight: bold;
}

.available-booking-extras.available-booking-extras-header label:first-child {
    grid-area: addlabel;
}
.available-booking-extras.available-booking-extras-header label:nth-child(2) {
    grid-area: addquantity;
}
.available-booking-extras.available-booking-extras-header label:nth-child(3) {
    grid-area: addselect;
}
.available-booking-extras.available-booking-extras-header label:nth-child(4) {
    grid-area: addrate;
}
.available-booking-extras.available-booking-extras-header label:nth-child(5) {
    grid-area: addcosts;
}
.available-booking-extras.available-booking-extras-header label:nth-child(6) {
    grid-area: addbutton;
}

/* details buttons */
.bookingdetails-buttons {
    width: 100%;
    min-height: 50px;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: space-between;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .bookingdetails-buttons {
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-content: flex-end;
        align-items: flex-end;
    }
}

.existing-booking button.bookingdetails-button {
    width: 100%;
}

@media (min-width: 1024px) {
    .existing-booking button.bookingdetails-button {
        width: 160px;
    }
}

.existing-booking button.bookingdetails-button:last-child {
    margin-top: 10px;
}

@media (min-width: 1024px) {
    .existing-booking button.bookingdetails-button:last-child {
        margin-top: 0;
        margin-left: 10px;
    }
}

/* Present contacts */
.presentcontacts {
    width: 100%;
}

.presentcontacts-header {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    gap: 8px;
    margin-bottom: 10px;
}

@media (min-width: 1024px) {
    .presentcontacts-header {
        flex-flow: row nowrap;
        /*justify-content: space-between;*/
        align-content: center;
        align-items: center;
        gap: 10px;
        margin-bottom: 0;
    }
}

.dashboard-view .presentcontacts-header h2 {
    width: auto;
    margin: 0;
}

@media (min-width: 1024px) {
    .dashboard-view .presentcontacts-header h2 {
        margin: 0.83em 0;
    }
}

.presentcontacts-header .date-picker .datepicker-toggle {
    /*width: 120px;*/
    width: 110px;
    height: 40px;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    background-color: #ffffff;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    /*padding-left: 8px;
    padding-right: 8px;*/
    padding-left: 5px;
    padding-right: 5px;
}

@media (min-width: 1024px) {
    .presentcontacts-header .date-picker .datepicker-toggle {
        width: 120px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

.presentcontacts-header .date-picker .datepicker-toggle svg {
    width: 17px;
    height: 17px;
}

.presentcontacts-header .selector-control .value-display {
    font-size: 15px;
    font-weight: normal;
    position: static;
}

.presentcontacts-header .entity-selector.location-selector > span.value-display {
    width: 150px;
    height: 40px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    background-color: #ffffff;
}

.presentcontacts-header .entity-selector.location-selector > span.value-display svg {
    width: 17px;
    height: 17px;
}

.presentcontacts-header .entity-selector.location-selector .entity-selector-box {
    min-width: 250px;
    position: absolute;
    /*box-shadow: var(--boxshadow-chained);*/
    box-shadow: -7px 7px 16px 0 rgba(0, 0, 0, 0.4);
    border-radius: var(--border-radius);
    padding: 0;
    /*right: 0;*/
    top: calc(100% + 8px);
}

@media (min-width: 1024px) {
    .presentcontacts-header .entity-selector.location-selector .entity-selector-box {
        box-shadow: var(--boxshadow-chained);
        right: 0;
    }
}

.presentcontacts-header .entity-selector.location-selector .entity-selector-box .selector-list {
    border-radius: var(--border-radius);
}


.presentcontacts-header button.presentcontacts-filter {
    width: 40px;
    height: 40px;
    /*padding: 0 10px;*/
    border: 0;
    border-radius: var(--border-radius);
    background-color: var(--button-color);
    color: var(--button-font-light);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .presentcontacts-header button.presentcontacts-filter {
        width: auto;
        min-width: 150px;
        padding: 0 10px;
    }
}

.presentcontacts-header button.presentcontacts-filter > span {
    display: none;
}

@media (min-width: 1024px) {
    .presentcontacts-header button.presentcontacts-filter > span {
        display: block;
    }
}

button.presentcontacts-filter svg {
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

button.presentcontacts-filter svg path {
    fill: var(--button-font-light);
}

.presentcontacts-list {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 5px;
    --childcolgap: 10px;
}

.presentcontacts-list-header {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    /*display: grid;*/
    display: none;
    grid-template-columns: 250px 120px 120px 250px 120px 1fr;
    gap: var(--childcolgap);
    align-content: center;
    align-items: center;
    font-weight: bold;
    background-color: var(--facilityblock-background);
    border-bottom: 1px solid var(--border-color-light);
    margin-bottom: var(--dashboard-block-marginbottom);
    box-shadow: var(--boxshadow-chained);
}

@media (min-width: 1024px) {
    .presentcontacts-list-header {
        display: grid;
    }
}

.presentcontact {
    width: 100%;
    /*height: 60px;*/
    padding: 10px 10px;
    /*display: flex;*/
    display: grid;
    /*grid-template-columns: 250px 120px 120px 250px 1fr;*/
    grid-template-columns: calc((100% - var(--childcolgap)) / 2) calc((100% - var(--childcolgap)) / 2);
    grid-template-areas: "contactname contactname"
        "starttime endtime"
        "facilityname facilityname"
        "actiity activity"
        "status status";
    gap: var(--childcolgap);
    align-content: center;
    align-items: center;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    background-color: var(--facilityblock-background);
    box-shadow: var(--boxshadow-chained);
    margin-bottom: var(--dashboard-block-marginbottom);
}

.presentcontact.is-mappable {
    grid-template-areas: "contactname contactname"
                        "starttime endtime"
                        "facilityname facilityname"
                        "activity activity"
                        "status status"
                        "mapbutton mapbutton";
}

@media (min-width: 1024px) {
    .presentcontact {
        height: 60px;
        padding: 0 10px;
        grid-template-columns: 250px 120px 120px 250px 120px 1fr;
        grid-template-areas: "contactname starttime endtime facilityname activity status";
    }

    .presentcontact.is-mappable {
        grid-template-columns: 250px 120px 120px 250px 120px 120px 1fr;
        grid-template-areas: "contactname starttime endtime facilityname activity status mapbutton";
    }
}

.presentcontact-cell {
    display: flex;
    flex-flow: row wrap;
}

@media (min-width: 1024px) {
    .presentcontact-cell {
        display: block;
    }
}

.presentcontact.is-ero .presentcontact-cell.contactname {
    display: flex;
    align-content: center;
    align-items: center;
}

@media (min-width: 1024px) {
    .presentcontact.is-ero .presentcontact-cell.contactname {
        display: flex;
    }
}

.presentcontact.is-ero .presentcontact-cell.contactname > span {
    max-width: calc(100% - 30px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.presentcontact.is-ero .presentcontact-cell.contactname > svg {
    width: 24px;
    height: 24px;
    margin-left: 6px;
}

.presentcontact-cell:before {
    width: 100%;
    content: attr(data-cell-label);
    font-weight: bold;
}

@media (min-width: 1024px) {
    .presentcontact-cell:before {
        display: none;
    }
}

.presentcontact.own-booking {
    border-color: var(--ownbooking-color);
}

.presentcontact .contactname {
    grid-area: contactname;
}

.presentcontact .starttime {
    grid-area: starttime;
}

.presentcontact activity {
    grid-area: activity;
}

.presentcontact .endtime {
    grid-area: endtime;
}

.presentcontact .booking-facility {
    grid-area: facilityname;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    align-items: center;
}

.presentcontact .booking-facility .facility-name {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    /*justify-content: space-between;*/
    align-content: center;
    align-items: center;
    /*gap: 5px;*/
}

.presentcontact .booking-facility .facility-name > span {
    max-width: calc(100% - 30px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.presentcontact .fullname-toggle {
    background-color: transparent;
    border: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 5px;
}

.presentcontact .fullname-toggle svg {
    width: 20px;
    height: 20px;
}

.presentcontact .booking-facility .facility-fullname {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
}

.presentcontact .status {
    grid-area: status;
}

.presentcontact .facility-name button.showonmap-button {
    background-color: transparent;
    border: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-left: 10px;
}

.presentcontact .facility-name .onmap-button.showonmap-button svg {
    width: 20px;
    height: 20px;
}

.presentcontact .onmap-button {
    grid-area: mapbutton;
}

.presentcontact:not(.is-mappable) .onmap-button {
    display: none;
}

.presentcontact .onmap-button button {
    height: 30px;
    background-color: var(--button-color-light);
    padding: 0 10px;
    border: 1px solid var(--button-color);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    color: var(--button-font-dark);
    font-size: 15px;
    font-weight: bold;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.presentcontact .onmap-button button svg {
    margin-left: 5px;
    width: 18px;
    height: 18px;
}

.presentcontact .onmap-button button svg path {
    fill: var(--button-font-dark);
}

.presentcontacts-namefilter {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
}

@media (min-width: 1024px) {
    .presentcontacts-namefilter {
        max-width: 240px;
    }
}

.presentcontacts-namefilter input,
.presentcontacts-namefilter button {
    height: 40px;
}

.presentcontacts-namefilter input {
    border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: var(--border-color-light);
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    padding-left: 5px;
    padding-right: 5px;
    width: calc(100% - 40px);
}

@media (min-width: 1024px) {
    .presentcontacts-namefilter input {
        padding-left: 8px;
        padding-right: 8px;
    }
}

.presentcontacts-namefilter button {
    padding: 0;
    margin: 0;
    background-color: #ffffff;
    border: 1px solid var(--border-color-light);
    width: 40px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    cursor: pointer;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.presentcontacts-namefilter button svg {
    width: 18px;
    height: 18px;
}

.presentcontacts-ero-filter {
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
    gap: 5px;
}

.presentcontacts-ero-filter .checkbox-label .checkbox-custom {
    background-color: #ffffff;
}