/*Style for webhool show*/
.profile-container {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 600px;
    margin: 20px;
}
.profile-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
    border: 3px solid rgb(255, 255, 255);
}
.profile-name {
    font-size: 24px;
    color: rgb(255, 255, 255);
}
/*Style for data show part*/
.timestamp_table{
    font-style: italic;
    font-size: small;
    padding-bottom: 5px;
    text-align: center;
}
.btn-danger{
    border-radius: 4px;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.btn-danger:hover {
    background-color: rgba(44, 44, 43, 0.021);
  }
.his{
    text-align: center;
    display: block;
    background: -webkit-linear-gradient(#fff3fe, #03a1fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}
.lif{
    text-align: center;
    display: block;
    background: -webkit-linear-gradient(#fff3fe, #4b06ec);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}
.sud{
    text-align: center;
    display: block;
    background: -webkit-linear-gradient(#fff3fe, #e7eb07);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}
.hid{
    text-align: center;
    display: block;
    background: -webkit-linear-gradient(#fff3fe, #1aeb07);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}
.slow{
    text-align: center;
    display: block;
    background: -webkit-linear-gradient(#fff3fe, #ec0808);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}
.fast{
    text-align: center;
    display: block;
    background: -webkit-linear-gradient(#fff3fe, #0c2de2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}
.brand{
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
.column_ojama_text{
    float:inline-start;
    padding: 4px;
    justify-content: center;

    align-items: center
    
}
.scorecard{
    border-radius: 4px;
    border: 1px solid #999;
}
.column_ojama{
    float:inline-start;
    padding: 1px;
    justify-content: center;

    align-items: center
    
}
.a_data {
    text-decoration: none;
    color: #fff;
    padding: 0.4rem;
}
.navbar_data {
    display: flex;
    background-color: #192021;
    border: 1px solid #999;
    font-size: 2rem;
    height: 2.5rem;
    border-radius: 4px;
    position:sticky,
}

.menu_data {
    margin: 0.3rem;
    justify-content: space-around;

}
.scorecard_container {
    position: relative;
    width: 50%;
  }
/* Style the button and place it in the middle of the container/image */
.scorecard_container .btn {
    position: absolute;
    top: 110%;
    left: 100%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;

  }
  .container .btn:hover {
    background-color: black;
  }

/* Popup style */
.popup-box {
    position: fixed;
    background: #03030350;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
   
  .box {
    position: relative;
    width: 62%;
    margin: 0 auto;
    height: 57%;
    max-height: 100vh;
    margin-top: calc(100vh - 85vh - 20px);
    background: rgb(26, 25, 25);
    border-radius: 4px;
    padding: 20px;
    border: 1px solid #999;
    overflow: auto;
  }
   
  .close-icon {
    content: 'x';
    cursor: pointer;
    position: fixed;
    right: calc(15% - 30px);
    top: calc(100vh - 85vh - 33px);
    background: #ededed;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
    border: 1px solid #999;
    font-size: 20px;
  }


.rank_container{
    position: absolute;
    top: 50%;
    margin-top: -25px; /* Half this element's height */
}

.text_judge_combo_scoredata {
    text-align: center;
    display: block;
    background: -webkit-linear-gradient(#fff3fe, #bafeea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}
.text_judge_score_scoredata {
    text-align: center;
    display: block;
    background: -webkit-linear-gradient(#fff3fe, #faf050);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}
.text_judge_combo {
    background: -webkit-linear-gradient(#fff3fe, #bafeea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}
.text_judge_score {
    background: -webkit-linear-gradient(#fff3fe, #faf050);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}

.image_judge{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.text_judge_cool {
    text-align: center;
    display: block;
    background: -webkit-linear-gradient(#fff3fe, #ffc0f0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}

.text_judge_great {
    text-align: center;
    display: block;
    background: -webkit-linear-gradient(#fff3fe, #feb848);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}

.text_judge_good {
    text-align: center;
    display: block;
    background: -webkit-linear-gradient(#fff3fe, #cd2e37);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
}

.text_judge_bad {
    text-align: center;
    display: block;
    background: -webkit-linear-gradient(#fff3fe, #a3a8f4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:medium;
    margin-left: auto;
    margin-right: auto;
}

.column_judge{
    float:inline-start;
    width: 17%;
    padding: 1px;
    justify-content: center;
    align-self: center;

}

div.container div.section:not(:first-child) {
    padding-top: 20px;
    clear: both;
}


div.container div.floating.right {
    float: right;
}

span.separator {
    font-size: large;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}

div.labelledsection.horizontal {
    display: inline-block;
    margin: 0px;
}

div.labelledsection.vertical {
    display: block;
    margin-bottom: 5px;
}

div.labelledsection.horizontal:not(:last-child):not(:only-child) {
    margin-right: 20px;
}

div.labelledsection div.label {
    font-weight: bold;
}

div.labelledsection div.content {
    margin: 0px;
    padding-bottom: 0px;
    font-size: small;
}

div.labelledsection.centered div.content, div.labelledsection.centered div.label {
    text-align: center;
}

div.labelledsection.padded {
    text-align: center;
    width: 150px;
    padding-top: 20px;
    padding-bottom: 20px;
}

div.labelledsection.filled {
    background-color: #f7f7f7;
    border: 1px dashed #dddddd;
}

div.labelledsection.iidx.themeoption select {
    width: 200px;
}

div.labelledsection.iidx.qprooption select {
    width: 300px;
}

div.labelledsection.jubeat.emblemoption select {
    width: 300px;
}

div.labelledsection.ddr.option select {
    width: 200px;
}

div.iidx.menuoption label, div.arcade.menuoption label {
    position: relative;
    vertical-align: middle;
    bottom: 3px;
    font-size: small;
}

div.iidx.menuoption, div.arcade.menuoption {
    padding-bottom: 5px;
}

div.arcade.menuoption label {
    display: inline-block;
    min-width: 200px;
}

div.score span.label {
    font-size: medium;
    font-weight: bold;
}

div.score span.status {
    font-size: medium;
    font-weight: bold;
}

div.score span.score {
    padding-left: 3px;
    padding-right: 3px;
    
}

div.score span.grade, table.topscores span.grade {
    font-weight: bold;
    padding-right: 3px;
}

div.songname {
    font-weight: bold;
    font-size: large;
}

div.pointclass {
    color: #f5170b; /* Rojo brillante */
    font-weight: bold; /* Negrita para resaltar */
    font-size: 1.2em; /* Tamaño de fuente ligeramente mayor */
    text-shadow: 1px 1px 2px #800000; /* Sombra para dar efecto de profundidad */
}

/*div.songname:hover {
    transform: scale(1.1); 
}*/

div.songartist, div.songgenre, div.songdifficulty, div.songdifficulties, div.songplays {
    font-size: small;
}

span.file {
    font-family: monospace;
}

ul.ownerlist {
    margin: 0px;
    padding: 0px;
}

ul.ownerlist li {
    margin-left: 25px;
    margin-right: 10px;
}

div.card {
    display: inline-block;
    font-family: monospace;
}

div.placeholder, span.placeholder {
    font-style: italic;
}

div.timestamp {
    font-style: italic;
    font-size: small;
    padding-bottom: 5px;
}

span.loading {
    font-size: small;
}

span.raised {
    font-size: smaller;
    font-weight: bold;
    text-transform: uppercase;
}

dl {
    margin: 0px;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0px;
    padding-bottom: 5px;
}

div.longmessage {
    margin-bottom: 10px;
}

div.longmessage pre {
    border: 1px solid rgba(128, 128, 128, 0.33);
    background: rgb(79, 79, 79);
    padding: 5px;
    margin-bottom: 0px;
}

span.filter:not(:last-child) {
    padding-right: 20px;
}

.slider.padded {
    margin-right: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.slider.spaced {
    margin-left: 5px;
}

span.slider-label {
    position: relative;
    top: -3px;
}

.slider.fix .label {
    margin-top: 1px;
    margin-bottom: -1px;
} 

div.emblem {
    position: relative;
    width: 256px;
    height: 256px;
    padding-bottom: 10px;
}

div.emblem div {
    position: absolute;
}

div.emblem div img {
    width: 256px;
    height: 256px;
}