.circle-timer-container {
    position: relative;
    width: 80px;
    height: 80px;
    margin: auto;
}

.circle-timer {
    transform: rotate(-90deg);
}

circle.bg {
    fill: none;
    stroke: #ddd;
    stroke-width: 6;
}
label[for]{
    cursor: pointer;
}
circle.fg {
    fill: none;
    stroke: #007bff;
    stroke-width: 6;
    stroke-dasharray: 219.91;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 300ms linear;
}

.circle-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 1.2rem;
}
.name{
    max-width: 10rem;
    text-wrap: wrap;
    text-overflow: ellipsis;
}
.w-100.qrcode>img{
    width: 100%;
    cursor: initial;
}
.qrcode{
    cursor: zoom-in;
}
.room-number{
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.big-stroke{
    stroke-width: 20 !important;

}
.fg.red{
    stroke: #f30000;

}
.fg.orange{
    stroke: #fdda2e;
}

@keyframes blink-bg {
    0% {
        background-color: #ff0000; /* Red */
    }
    50% {
        background-color: #ffffff; /* Blue */
    }
    100% {
        background-color: #ff0000; /* Red */
    }
}
.blinking-element {
    animation: blink-bg 1s linear 10;
}
.rotate-90 {
    transform: rotate(90deg);
}

.stamp {
    pointer-events: none;
    height: 30rem;
    width: 30rem;
    font-size: 5rem;
    border-radius: 5px;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ef8080;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 10;
}

/* Animation */
.animate {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes pulse {
    0%   { opacity: 0; }
    10%  { opacity:.50; transform-origin: 50% 50%; transform: translate(-50%, -50%) rotate(-2deg) scale(5); }
    100% { opacity:1; transform: translate(-50%, -50%) rotate(-15deg) scale(1); }
}
@keyframes pulse {
    0%   { opacity: 0; }
    10%  { opacity:.50; transform-origin: 50% 50%; transform: translate(-50%, -50%) rotate(-2deg) scale(5); }
    100% { opacity:1; transform: translate(-50%, -50%) rotate(-15deg) scale(1); }
}