* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#E4E4E4;
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    
    height:100vh;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    width:100%;
    font-family: 'Roboto', sans-serif;
}
/* Portrait layout (default) */
.app {
    max-width: 600px;
    margin: 0 auto;
    padding: 0px;
}

@media screen and (prefers-color-scheme: dark) {
    body {
        /*background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);*/
    }
}

.btn{
    /*border-radius: 18px !important;*/
}

.card{
    border-radius: 18px !important;
}

.card-img-top {
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
}

.no-margin{
    margin: 0px !important;
    padding: 0px !important;
}

.logo-login{
    width: 70px;
    margin-top: -35px;
    border-radius: 50%;
    border:solid 4px #011E96;
}

.login-box{
    margin-top: 200px;
    border-radius: 18px;
    height: auto;
    padding-bottom: 30px;
}

.login-box input{
    letter-spacing: 10px;
}

.logo_footer_login{
    position: absolute;
    bottom: 20px;
    width: 70px;
    left: 50%;
    margin-left: -35px;
}

.logo_footer{
    margin-top: 20px;
    width: 80px;
}

.header{
    position: relative;
    width: 100%;
    height: auto;
    padding: 5px;
    padding-top: 15px;
    z-index: 99;
    background-color: #FFF;
}

.header_title{
    font-size: 1.75rem;
    font-weight: 900;
    display: inline-block;
    vertical-align: top;
}

.profil_pic_zone{
    display: inline-block;
    vertical-align: top;
    height: 45px;
    width: 45px;
    margin-top: 10px;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    font-weight: 300;
    background: #011E96;
    color: #FFF;
}

.profil_pic_zone img{
    width: 40px;
    border-radius: 50%;
}

.content{
    margin-top: 0px;
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 30px;
}

.stat_box{
    width: 100%;
    height: 200px;
    border-radius: 18px;
    line-height: 20px;
    background: #011E96;
}

.big-text{
    font-weight: 900;
    font-size: 2.5rem
}

.big-text.material-symbols-outlined{
    font-weight: 300;
    font-size: 3.5rem
}

.header .country_flag{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    vertical-align: middle;
}

.acc_btn{
    position: fixed;
    bottom: 50px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    z-index: 999;
    border: solid 3px #FFF; 
}

.pic_bx{
    height: 
}

.time{
    font-size: 3.5rem;
    font-weight: 100;
}







.spinner {
  margin: 50px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 15px;
  height: 15px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}