.o_hr_attendance_kiosk_mode {
    @include media-breakpoint-down(md) {
        width: 100%;
        .o_search_panel {
                width: 100% !important;
                max-height: 200px !important;
            }
        .o_kanban_renderer {
            max-height: 400px !important;
        }
        .card-body {
            padding-left: 5px !important;
            padding-right: 5px !important;
        }
    }
}

.o_hr_attendance_kiosk_mode {
    @include media-breakpoint-up(md) {
        min-width: map-get($grid-breakpoints, 'md') * .6;

        .o_hr_attendance_user_badge {
            @include o-position-absolute(auto, $border-width * -1, 100%, $border-width * -1); // Compensate card's border
        }
    }

    .o_hr_attendance_back_button_md {
        aspect-ratio: 1;
        transform: translate(-50%, -50%); // Once migrate to BS5, can be replaced by 'translate-middle' class.
    }

    .o_hr_attendance_PINbox_button {
        aspect-ratio: 1.8;
    }
}

.o_hr_attendance_employee_badge{
  margin-bottom: -48px !important;
}

.o_hr_attendance_kiosk_body{
    position: relative !important;
}

.o_hr_kiosk_url_media{
    a{
        width: 100% !important;
    }
}

// Shared with web client and login screen
.o_attendance_background{
    background: {
        size: cover;
        attachment: fixed;
        color: var(--homeMenu-bg-color, #{$o-gray-200});
        image: var(--homeMenu-bg-image, url("/hr_attendance/static/img/background-light.svg"));
    }
}