@import 'gallery_default.css';
@import 'gallery_tiles.css';


.full-image {
  position: absolute;
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

.fadeIn {
  animation: fadeInAni 1s;
}

.fadeOut {
  animation: fadeOutAni 1s;
}

@keyframes fadeInAni {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOutAni {
  0% { opacity: 1; }
  100% { opacity: 0; }
}


.consumer-layout {
}

.consumer-view {
    background-color: black;
}

.bold {
    font-weight: bold;
}

.red {
    font-weight: bold;
    color: red;
}

.yellow {
    font-weight: bold;
    color: orange;
}

.green {
    font-weight: bold;
    color: green;
}

.admin-image__preview {
    object-fit: cover;
    width: 100%;
}

.not-draggable {
    pointer-events: none;
}

.single-row-buttons-textfields-layout {
    gap: 20px;
    align-items: flex-end;
}

.qrcode {
    image-rendering: pixelated;
}

vaadin-login-form [slot="forgot-password"] {
    display: none;
}

.live-qr-code {
    width: 20mm;
    height: 20mm;
    position: absolute;
    bottom: 5mm;
    left: 5mm;
}

.doWobble {
    animation: wobble 0.5s ease;
}

.request-full-icon {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.box {
    animation: wobble 0.5s ease infinite;
}

vaadin-grid.devices-grid::part(invalid-row) {
    background-color: red;
}

/*
config: https://csslab.app/animations/wobble
*/
@keyframes wobble {
    0%, 100% {
        -webkit-transform: translateX(00%);
        transform: translateX(00%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    15% {
        -webkit-transform: translateX(-0.5cm) rotate(-20deg);
        transform: translateX(-0.5cm) rotate(-20deg);
    }

    30% {
        -webkit-transform: translateX(calc(0.5cm / 2)) rotate(20deg);
        transform: translateX(calc(0.5cm / 2)) rotate(20deg);
    }

    45% {
        -webkit-transform: translateX(calc(-0.5cm / 2)) rotate(calc(-20deg / 1.8));
        transform: translateX(calc(-0.5cm / 2)) rotate(calc(-20deg / 1.8));
    }

    60% {
        -webkit-transform: translateX(calc(0.5cm / 3.3)) rotate(calc(20deg / 3));
        transform: translateX(calc(0.5cm / 3.3)) rotate(calc(20deg / 3));
    }

    75% {
        -webkit-transform: translateX(calc(-0.5cm / 5.5)) rotate(calc(-20deg / 5));
        transform: translateX(calc(-0.5cm / 5.5)) rotate(calc(-20deg / 5));
    }
}