.bg-p{
    background-color: #084A6A  !important;
}
.list-container{
    overflow-y: hidden;
    overflow-x: hidden;
    max-height: 95%;
    position: relative;
}
.border-bottom-c{
    border-bottom: 2px solid #51aedb !important;
}
#queueList{
    width: 97%;
    margin: auto;
    

}
#queueList li{
    list-style: none;
min-height: 30%;
font-size: 40px;
padding: 20px;
margin-bottom: 30px;
margin-top: 10px;
box-shadow: 0px 7px 20px 0px #5a5959;
border-radius: 10px;
background-color:  #47748A;
display: flex;
align-items: center;
justify-content: space-around;
color: white;
position: relative;
transition: .9s linear;

}
.clinic_name{
    font-size: 52px;
    font-weight: 900;
}
.badge{
    padding: 10px;
}
.box{
    border-radius: 20px;
    padding: 20px;
    border:2px solid #084A6A;
  
}
.box h3{
    font-size: 170px;
}
body, html {
    height: 100%;
    margin: 0;
    overflow: hidden; /* Prevent scrollbars */
}
.h-90{
    height: 82%;
}
.h-95{
    height: 95%;
}
.bg-footer{

background: linear-gradient(45deg, #084A6A, #09AAD9);   
}
.number-box{
   
    border-radius: 10px;
   

    height:63%;
  
}
.proceed{
    display: block;
    font-size: 18px;
}

.gradient-border-mask {
    position: relative;
    padding: 1.3rem;
    backdrop-filter: blur(10px);
  }
  
  .gradient-border-mask::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 15px;
    border: 10px solid transparent;
    border-image: linear-gradient(180deg, #3FCC66, #D7E3FD) 1;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: moveGradient 1.2s infinite;
  }
.number-box h1{
    color: white;
    font-size: 160px;
}
.number-box h6{
    font-size: 60px;
    color: white;
    text-transform: capitalize;
}
.footer{
    clear: both;
    padding: 10px;
}
.btn-fullscreen{
    position: absolute;
    bottom: 100px;
    right: 20px;
   background: transparent;
   border: none;
   transition: .1s;
}
.doctor_name{
    display: block;
    text-indent: 36px;
    text-align: center;
}
.btn-fullscreen:hover{
    font-size: 20px;
}
.height{
    height: 100% !important;
}
.promotion_text{
    font-size: 18px;
    font-weight: 600;
}
.number{
    font-size: 50px;
font-weight: 800;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
left: -37px;
background-color: #084A6A;
border-radius: 100%;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.bg-info{
    background-color: #00bf63 !important;
}
.bg-processing{
    background-color: #F0D1D4 !important;
}
.animated {
    animation: popup 0.8s linear;
    /* animation-duration: auto; */
    animation-iteration-count: infinite;
}

@keyframes moveGradient {
    0% {
        border-image: linear-gradient(45deg, #3FCC66, #D7E3FD) 1;
        
    }
    50% {
        border-image: linear-gradient(45deg, #D7E3FD, #3FCC66) 1;
    }
    100% {
        border-image: linear-gradient(45deg, #3FCC66, #D7E3FD) 1;
    }
}
@keyframes highlight {
    from {
        background-color: red;
        transform: scale(1.6);
    }
    to {
        background-color: inherit;
        transform: scale(1);

    }
}
.badge{
    background:red;
    font-size:20px;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes popup{
    25%  {
        transform: scale(0.9);
        background-color: #47748A;
    }
    75%  {transform: scale(1.1);
        background-color: #084A6A;
    }
  }

.pop-in {
    animation: popIn 0.5s ease-out;
}

.vibrate {
    animation: vibrate 0.2s infinite;
}
/* Scroll animation */
@keyframes scrollUp {
    0% {
        transform: translateY(40%);
    }
    100% {
        transform: translateY(-100%);
    }
  
}
.scrolling {
    animation: scrollUp 20s linear infinite;
}