body {
    height: 1300px;
}

.left,
.right {
    height: 1100px;
}

.song_Id {
    width: 102%;
    height: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0079ab66;
}

.song_Id p {
    font-size: 30px;
    white-space: nowrap;
}

.LEGACY {
    background: #7700ff88;
}

.AT {
    background: #9c9c9c88;
}

.IN {
    background: #ff616188;
}

.HD {
    background: #009dff88;
}

.EZ {
    background: #7ae07a88;
}

.rank_dif_1 {
    /* background: linear-gradient(-75deg, #9c9c9c88 24%, #ff616188 28%, #ff616188 49%, #009dff88 53%, #009dff88 72%, #7ae07a88 76%); */
    background: linear-gradient(-75deg,#80808088 0% , #9c9c9c88 25%, #00000000 25%, #00000000 27%, #ff000088 27%, #ff616188 50%, #00000000 50%, #00000000 52%, #009dff88 52%, #4dbbff88 74%, #00000000 74%, #00000000 76%, #00ff0088 76%, #4dff4d88 100%);
    margin-top: 20px;
    width: 98%;
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.rank_dif_0 {
    /* background: linear-gradient(-75deg, #9c9c9c88 24%, #ff616188 28%, #ff616188 49%, #009dff88 53%, #009dff88 72%, #7ae07a88 76%); */
    background: linear-gradient(-75deg, #ff000088 0%, #ff616188 33%, #00000000 33%, #00000000 35%, #009dff88 35%, #4dbbff88 66%, #00000000 66%, #00000000 68%, #00ff0088 68%, #4dff4d88 100%);
    margin-top: 20px;
    width: 98%;
    height: 100px;
    display: flex;
    justify-content: space-around;
}

.a_rank {
    display: flex;
    width: 100px;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.a_rank_dif {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: row;
}

.a_rank_dif p {
    font-size: 40px;
}

.a_rank_name {
    display: flex;
    width: 100%;
    justify-content: center;
}

.a_rank_name p {
    font-size: 20px;
}

.data_score {
    position: relative;
    display: flex;
    width: inherit;
    justify-content: center;
}

.data_score p {
    font-size: 70px;
}

.data_mid {
    display: flex;
    height: 18%;
    align-items: center;
    justify-content: space-around;
}

.data_rks {
    height: 100%;
    display: flex;
    align-items: center;
}

.data_acc {
    height: 100%;
    display: flex;
    align-items: center;
}

.data_rks p,
.data_acc p {
    font-size: 27px;
}

.data_rks p {
    color: yellow;
}

.data_acc p {
    color: white;
}

.suggest {
  width: 30%;
  height: 30px;
  border-radius: 30px;
  overflow: unset;
  display: flex;
  --bkg-color: rgba(0, 0, 0, 0.5);
  background: var(--bkg-color);
  align-items: center;
  filter: drop-shadow(0 0 2px #ffffff91);
  border: 1px solid #ffffff91;
  justify-content: space-evenly;
}

.suggest-tip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.6666));
  margin: 3px;
}

.suggest p {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 2px #000000ac;
}

.suggest-kind-0 {
  --bkg-color: hsla(0, 80%, 60%, 0.675);
}

.suggest-kind-1 {
  --bkg-color: hsla(34, 80%, 60%, 0.675);
}

.suggest-kind-2 {
  --bkg-color: hsla(136, 80%, 60%, 0.675);
}

.suggest-kind-3 {
  --bkg-color: hsla(183, 80%, 60%, 0.675);
}

.suggest-kind-4 {
  --bkg-color: hsla(276, 80%, 60%, 0.675);
}

.suggest-kind-5 {
  --bkg-color: hsla(276, 80%, 60%, 0.675);
}

.data_bottom {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 80%;
    height: 32%;
    font-size: 21px;
    flex-direction: column;
    left: 18%;
    bottom: 3%;
    flex-wrap: wrap;
    align-items: center;
}

.APCount,
.FCCount {
    height: 50%;
    font-size: 26px;
    display: flex;
    align-items: center;
}

.APCount {
    color: var(--phi-color);
}

.FCCount {
    color: var(--fc-color);
}

.total {
    color: white;
    font-size: 28px;
    height: 1px;
    display: flex;
    align-items: center;
}

.count {
    color: white;
    font-size: 42px;
    height: 95%;
}

#NEW {
    background: #00000000;
}

.no_info {
    position: absolute;
    width: 100%;
    height: 93%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.no_info p {
    font-size: 80px;
}

.scoreHistory {
    width: 93%;
    height: auto;
    max-height: 34%;
    display: flex;
    margin-top: 20px;
    background-color: #87ceeb5e;
    border: skyblue 1px solid;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    flex-direction: row;
    padding-top: 1%;
    padding-bottom: 1%;
    overflow: hidden;
}

.oneHistory {
    width: 22%;
    height: 80px;
    position: relative;
    margin-top: 2%;
    margin-bottom: 0%;
    border: 1px solid skyblue;
}

.HistoryDate {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: flex-end;
    bottom: 100%;
}

.HistoryDate p {
    line-height: 18px;
}

.HistoryRating {
    position: absolute;
    display: flex;
    width: 35%;
    height: 67%;
    align-items: center;
    justify-content: center;
}

.HistoryRating img {
    max-width: 100%;
    max-height: 100%;
}

.HistoryScore {
    position: absolute;
    display: flex;
    width: 65%;
    right: 0;
    height: 67%;
    justify-content: center;
    align-items: center;
}

.HistoryScore p {
    font-size: 29px;
    line-height: 50px;
}

.HistoryAcc {
    position: absolute;
    display: flex;
    bottom: 1px;
    width: 65%;
    justify-content: center;
    align-items: center;
}

.HistoryAcc p {
    font-size: 20px;
    color: yellow;
}

.HistoryRks {
    position: absolute;
    display: flex;
    bottom: 1px;
    right: 0px;
    width: 35%;
    justify-content: center;
    align-items: center;
}

.HistoryRks p {
    font-size: 20px;
}