* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    user-select: none;
    align-items: center;
    -ms-user-select: none;
    -moz-user-select: none;
    justify-content: center;
    -webkit-user-select: none;
}

#btn-online-reception {
    z-index: 1;
    border: none;
    padding: .8rem;
    color: #ffffff;
    transition: 0.3s;
    transition: 0.5s;
    font-weight: 700;
    background: #0667f5;
    border-radius: 50px;
    animation: glow 1s infinite;
    font-family: Vazir-Regular !important;
    position: fixed;
    right: 48px;
    bottom: 70px;
}

#modal-online-reception .modal-title {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    font-family: Vazir-Regular !important;
}

#btn-close {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #353c4a;
}

#ul-steps {
    padding-inline-start: 0;
}

.step {
    cursor: pointer;
    font-weight: 400;
    font-size: .8rem;
    text-decoration: none;
}

.active-step {
    color: #ffffff;
    border-bottom: 2px solid #246cf8;
}

.inactive-step {
    color: #808080;
    border-bottom: none;
}

.step.active-step:hover {
    color: #ffffff;
}

.step.inactive-step:hover {
    color: #808080;
}

.indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: .3rem;
}

.active-indicator {
    background: #246cf8;
}

.inactive-indicator {
    background: #808080;
}

#modal-online-reception input:focus {
    background: #fffafa !important;
}

@keyframes glow {
    0% {
        box-shadow: 5px 5px 20px #72ffff,-5px -5px 20px #72ffff;
    }

    50% {
        box-shadow: 5px 5px 20px #0096ff,-5px -5px 20px #0096ff;
    }

    100% {
        box-shadow: 5px 5px 20px #72ffff,-5px -5px 20px #72ffff;
    }
}