/* Ambil Antrian */

.nomor-antrian {
    font-family: "Consolas", serif;
}

/* Floating Button */

.floating {
    position: fixed;
    bottom: 25px;
    right: 25px;

    .btn:not(.collapsed)[aria-expanded] {
        padding: 5px;
        border-radius: 100%;
        color: hsl(0, 90%, 31%) !important;
        border: 2px solid hsl(0, 90%, 31%) !important;
        box-shadow: 0 5px 10px 1px rgba(0, 0, 0, .3);
        aspect-ratio: 1/1;

        &:hover, &:focus, &:active {
            background-color: hsl(240, 3%, 94%) !important;
        }
    }

    .btn-floating-parent .fa {
        font-size: 35px;
    }

    .floating-open-icon {
        display: block;
    }

    .floating-close-icon {
        display: none;
    }

    &.show {
        .floating-open-icon {
            display: none;
        }
    
        .floating-close-icon {
            display: block;
        }
    }

    .floating-menu {
        box-shadow: unset;
        background: unset;
        float: right;
    }

    .floating-item {
        width: unset;
        float: right;
        margin-bottom: 15px;

        &:hover, &:focus, &:active {
            color: hsl(0, 90%, 31%) !important;
            border: 2px solid hsl(0, 90%, 31%) !important;
        }
    }

    .floating-item-menu {
        background-color: white;
        box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
        border: 2px solid;
        color: hsl(0, 90%, 31%);
        padding: 6px 10px;
        font-weight: bold;
        font-size: 15px;
    }

    .floating-item-circle {
        padding: 15px;
        border-radius: 100%;
        border: 2px solid;
        aspect-ratio: 1 / 1;
        text-align: center;
        background: white;
        color: hsl(0, 90%, 31%);
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .3);
        font-size: 20px;

        &:hover, &:focus, &:active {
            background-color: hsl(240, 3%, 94%) !important;
        }
    }

    .floating-item-iframe {
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .3);
        text-align: center;
        padding: 5px 5px 0 5px;
        border: 2px solid;
        color: hsl(0, 90%, 31%);

        iframe {
            pointer-events: none;
        }
    }
}