/* .main {
    background-image: url(../images/SigninMobile.png);
    background-color: black;
} */

/* @media(max-width: 480px) {
    .main {
        background-image: url(../images/SigninMobile.png); 
    }
} */

/* .bg-signin-mobile {
    background-image: url("/static/images/SigninMobile.png");
    background-size: cover;
    background-position: center;
} */

@font-face {
  font-family: 'Poppins';
  src: 
       url('/static/fonts/Poppins-Thin.ttf') format('TTF'),
       url('/static/fonts/Poppins-SemiBold.ttf') format('TTF'),
       url('/static/fonts/Poppins-Regular.ttf') format('TTF'),
       url('/static/fonts/Poppins-Light.ttf') format('TTF'),
       url('/static/fonts/Poppins-ExtraLight.ttf') format('TTF'),
       url('/static/fonts/Poppins-ExtraBold.ttf') format('TTF'),
       url('/static/fonts/Poppins-Bold.ttf') format('TTF'),
}

body {
  font-family: 'Poppins', Arial, sans-serif !important;
  color: #002C54 !important;
}

.scrollbar {
    overflow-y: scroll;
    height: 200px;
}

.scrollbar::-webkit-scrollbar {
    display: none;
}

.noheight-scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.storage {
    height: 50px;
    width: 50px;
    background-image: url("/static/images/Frame.png");
    background-size: cover;
    background-position: center;
}

.empty-storage {
    height: 50px;
    width: 50px;
    background-image: url("/static/images/red.png");
    background-size: cover;
    background-position: center;
}

.star {
    background-image: url("/static/images/star.png");
    background-size: cover;
    background-position: center;
}

.point {
    background-image: url("/static/images/point.png");
    background-size: cover;
    background-position: center;
}

.coin {
    background-image: url("/static/images/coin.png");
    background-size: cover;
    background-position: center;
}

.bg-gradient {
    background: linear-gradient(45deg, #FF9F66, #FFE194);
}


.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
  }

  .modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  }

  .modal-content input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  .modal-content button {
    width: 100%;
    padding: 5px 12px;
    background-color: #76c7e0;
    border: none;
    color: white;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
  }

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .avatar {
    text-align: center;
    margin-bottom: 10px;
  }

  .avatar img {
    width: 80px;
    border-radius: 50%;
  }
/* #salesChart {
    width: 100%;
    height: 100%;
  } */