body {
    padding-top: 5rem;
    font-family: 'Prompt', sans-serif;
  }
  .starter-template {
    padding: 3rem 1.5rem;
    text-align: center;
  }
  .queue-number {
      text-align: center;
      font-size: 60px;
      font-weight: bold;
      padding: 0;
      
  }
  .queue-dep {
      text-align: center;
      padding: 0;
      font-size: 30px;
      /*font-family: supermarket;*/
      font-family: 'Prompt', sans-serif;
  }
  #hospname {
      color: #FFFFFF;
      font-size: 30px;
      font-family: 'Prompt', sans-serif;
  }
  .img-logo {
      height: 48px;
      width: 48px;
  }
  #card-queue {
    background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
  }
  #card-queue-t {
    background: red;
    transition: all 2s ease-out;
  }
  #myAudio { 
    display:none;
 }
  #queue-alert {
    /*width: 100px;
    height: 100px;*/
    background-color: #FFFFFF;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 6s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 6s;
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes example {
    from {background-color: #FFFFFF;}
    to {background-color: 	#FFD700;}
  }
  
  /* Standard syntax */
  @keyframes example {
    from {background-color: #FFFFFF;}
    to {background-color: #FFD700;}
  }
  .loader {
    width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99;
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 40%;
    left: 45%;
    z-index: 100;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  #loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}

  #loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}