@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap&subset=latin-ext,cyrillic');

/* Reset y estilos base */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
}

body {
    width: 100%;
    background: url(../images/background.jpg) center top no-repeat, linear-gradient(to bottom, #ffffff 0%, #ffffff 15%, #ffffff 100%);
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    color: #cacaca;
    min-height: 100vh;
}

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

a {
    transition: all 0.3s ease;
    color: #fcedc0;
    text-decoration: none
}

a:hover {
    text-decoration: none
}

/**p {
    margin-bottom: 20px
}*/

h1,
h2,
h3 {
    color: #ffdda9;
    margin-bottom: 20px;
    line-height: 1.3;
    font-family: 'Mulish', sans-serif;
    letter-spacing: 2px
}

h1 {
    font-size: 20px;
    color: #fff;
}

h2 {
    font-size: 18px
}

h3 {
    font-size: 16px
}

caption {
    margin-bottom: 15px
}

/* MAIN CONTENT - MODIFICADO PARA FULLSCREEN */
.mu-main-content {
    height: 100vh;        /* Ocupa el alto de la ventana */
    min-height: 100vh;    /* Fuerza el mínimo */
    overflow-y: hidden;   /* Elimina scroll aquí */
    display: flex;
    flex-direction: column;
}

/* CONTAINER PRINCIPAL - MODIFICADO */
.mu-guides-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;  /* Cambiado */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
    background-color: rgb(0 0 0 / 90%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    width: 100%;
}
/* Webkit Scrollbar styling */
.mu-guides-container::-webkit-scrollbar {
    width: 8px;
}

.mu-guides-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mu-guides-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

.mu-guides-container::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* CONTENIDO - MODIFICADO */
.mu-guides-content {
    margin: 0;
    flex: 1 1 auto;  /* Cambiado */
    overflow-y: auto;
    display: flex;  /* AÑADIDO */
    flex-direction: column;  /* AÑADIDO */
}

/* PÁGINAS - MODIFICADO */
.mu-guides-page {
    display: none;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;  /* Cambiado de min-height: 100% */
}

.mu-guides-page[style*="display: block"] {
    display: flex !important;
    flex-direction: column;
}

.mu-guides-sub-page {
    flex: 1 1 auto;  /* AÑADIDO */
}

/* NAVEGACIÓN - MODIFICADO */
.mu-guides-navigation {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-evenly;
    background-color: rgb(0 0 0 / 90%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    z-index: 1000;
    height: 100px;
    border-bottom: 1px solid #fc9162;
    width: 100%;
}

.mu-guides-navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.mu-guides-navigation-list {
    display: flex;
    height: 100%;
}

.mu-guides-navigation li {
    position: relative;
    font-weight: 500;
    height: auto;
    border-width: 0 2px 0 0;
    border-style: solid;
    border-color: #7f7f7f;
    width: 100%;
}

.mu-guides-navigation li a {
    filter: drop-shadow(0 0 0px #ff2a00);
    transition: filter 0.2s ease-in-out;
}

.mu-guides-navigation li:last-child {
    border-right: none;
}

.mu-guides-navigation li a:hover {
    filter: drop-shadow(0 0 10px #ff2a00);
}

.mu-guides-navigation ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    color: #e5ca98;
    flex-direction: column;
    padding: 10px;
    height: 100%
}

.mu-guides-navigation ul li a img {
    height: 45px;
    width: auto;
}

.mu-guides-navigation li .mu-guides-nav-description {
    text-align: center;
    color: #6d6d6d;
    font-size: 12px;
    display: flex;
    justify-content: center;
}

.mu-guides-nav-title {
    font-size: 14px;
    color: #fcedc0;
}

/* Dropdown */
.mu-guides-dropdown {
    display: none;
    position: absolute;
    min-width: 250px;
    top: 100%;
    left: 0;
    background-color: #000;
    z-index: 2;
}

.mu-guides-navigation li.mu-guides-dropdown-trigger:hover .mu-guides-dropdown {
    display: block;
}

.mu-guides-dropdown li {
    border-bottom: 1px solid #7f7f7f;
    border-right: none;
    border-left: none;
}

.mu-guides-dropdown li a {
    font-weight: 600;
    font-size: 14px;
    color: #c1c1c1;
    padding: 10px;
    display: block;
}

.mu-guides-dropdown li:hover {
    background-color: #333;
}

/* Sub-navegación */
.mu-guides-sub-navigation {
    display: flex;
    justify-content: center;
    font-weight: 600;
    padding: 10px 0 20px;
}

.mu-guides-sub-navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.mu-guides-sub-navigation li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 30px;
    text-align: center;
    border: 1px solid #b9b9ae;
    box-shadow: 0 10px 15px 4px rgba(0, 0, 0, .6);
}

.mu-guides-sub-navigation li a {
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CONTENEDORES PRINCIPALES - MODIFICADOS PARA SER RESPONSIVE */
.mu-guides-guides-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 20px;
    flex: 1 1 auto;  /* AÑADIDO */
    align-content: flex-start;  /* AÑADIDO */
}

.mu-guides-events-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: auto;
    padding-bottom: 15px;
    margin: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    background-color: rgb(0 28 49 / 46%);
}

.mu-guides-items-page-container {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    background-color: rgb(0 28 49 / 46%);
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
}

.mu-guides-item-tiers-page {
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    background-color: rgb(0 28 49 / 46%);
    padding-bottom: 20px;
}

/* TARJETAS GENERALES - MODIFICADAS */
.mu-guides-general-sub-container {
    width: calc(33.333% - 20px);
    min-width: 300px;
    height: auto;
    min-height: 350px;
    background-color: rgb(0 28 49 / 46%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    margin: 10px;
    box-sizing: border-box;
    border: 1px solid black;
    border-radius: 5px;
    color: #c5a97c;
}

/* TARJETAS DE EVENTOS */
.mu-guides-events-sub-container {
    width: calc(23% - 10px);
    min-width: 250px;
    height: 320px;
    background: rgb(56 42 38 / 50%);
    margin: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    color: #fcedc0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mu-guides-events-sub-container-header {
    display: flex;
    flex-direction: column;
    width: max-content;
    padding: 10px;
    margin-top: 10px;
    background-color: rgba(0, 107, 183, 0.05);
    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
    border-radius: 5px;
}

.mu-guides-general-sub-container ul{
    font-weight: 600;
    line-height: 35px;
    padding-left: 35px;
}
.mu-guides-general-sub-container .mu-guides-general-regulations-list{
    line-height: 23px;
}
.mu-guides-general-sub-container .mu-guides-general-items-list {
    line-height: 25px;
}
.mu-guides-guides-general-title{
    padding: 10px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mu-guides-guides-general-title h1{
    font-size: 26px;
    color: #fc9162;
    margin: 0;
}
.mu-guides-guides-general-title img{
    padding-top: 5px;
    height: 65px;
    width: auto;
}
.mu-guides-guides-events-title{
    display: flex;
    justify-content: center;
}
.mu-guides-guides-events-title h3{
    margin-bottom: 0;
    color: #fc9162;
}
.mu-guides-guides-events-title img{
    height: 40px;
    width: auto;
}
.mu-guides-excellent{
    color: #01DF01;
}
.mu-guides-ancient{
    background-color: #0000FF;
    color: #01DF01;
    text-decoration: none;
}
.mu-guides-harmony{
    color: #ffdd06;
}
.mu-guides-lvl380{
    color: #cd6911;
}
.mu-guides-socket{
    color: #8100f3;
}
.mu-guides-easy-tier{
    border-top: 6px solid #0e871f;
}
.mu-guides-mid-tier{
    border-top: 6px solid #978e08;
}
.mu-guides-hard-tier{
    border-top: 6px solid #c14f08;
}
.mu-guides-xtreme-tier{
    border-top: 6px solid #ab0000;
}
.mu-guides-event-levels{
    display: flex;
    justify-content: center;
}
.mu-guides-event-levels span{
    width: auto;
    padding: 0 10px 0 10px;
    text-align: center;
    border-left: 2px solid white;
    border-right: 2px solid white;
    border-radius: 8px;
    background-color: #ff00261f;
}
.mu-guides-event-drops-list{
    padding: 0 10px 0 30px;
}
.mu-guides-event-drops-list h5{
    margin: 0;
    position: relative;
    margin-bottom: 3px;
    left: -20px;
}
.mu-guides-devil-square-container{
    height: 280px;
}
.chaos-castle-drops{
    padding-top: 20px;
}
.blood-castle-drops{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.devil-square-drops-list{
    margin-top: 20px;
    gap: 20px;
    display: flex;
    flex-direction: column;
}
.devil-square-drops-list ul{
    list-style: disc;
}
.doppelganger-drops-list{
    display: flex;
    gap: 20px;
    flex-direction: column;
    padding-top: 20px;
}
.doppelganger-left-upper-content{
    display: flex;
    gap: 20px;
}
.doppelganger-left-lower-content{
    display: flex;
    justify-content: center;
    padding-top: 20px;
    flex-direction: column;
    color: #ffbf00;
}
.doppelganger-sub-container{
    width: calc(40% - 10px);
}
.mu-guides-doppelganger-content{
    width: 100%;
    display: flex;
    justify-content: center;
}
.zyro-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
    align-items: center;
    height: 100%;
    justify-content: space-between;
}
.zyro-upper{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.zyro-lower{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.zyro-content img{
    background-color: rgb(0 0 0 / 53%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.doppel-info-text{
    font-size: 12px;
    position: relative;
    left: 15px;
    color: #fcedc0;
}
.zyro-quest-content{
    display: flex;
    width: 100%;
    justify-content: center;
}
.zyro-header{
    display: flex;
    align-items: center;
    gap: 40px;
  /*  margin-bottom: 30px;*/
}

.mu-guides-info-top-doppelganger-desc{
    color: #fcedc0;
}
.mu-guides-event-prize{
    padding-top: 5px;
}
.mu-guides-event-prize span{
    font-weight: 600;
}
.mu-prize-centered{
    text-align: center;
}
.mu-guides-events-common-drop{
    color: #45a328;
    margin: 0;
}
.mu-guides-events-common-drop ul, .mu-guides-events-rare-drop ul, .mu-guides-events-epic-drop ul{
    font-size: 13px;
    margin: 0;
}
.mu-guides-invasion-common-drop{
    color: #45a328;
    margin: 0;
}
.mu-guides-events-rare-drop{
    color: #ffbf00;
}
.mu-guides-events-epic-drop{
    color: #b40ae9;
}
.mu-guides-events-impossible-drop{
    color: #ff0000;
}
.mu-guides-events-silver-chest{
    color: silver;
}
.mu-guides-events-gold-chest{
    color: gold;
}
.mu-guides-event-drops-list ul{
    color: #c5a97c;
}
.mu-guides-golden-invasions-page{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    background-color: rgb(0 28 49 / 46%);
}
.mu-guides-golden-invasion-sub-container{
    width: calc(32% - 10px);
    height: 280px;
    background: rgb(56 42 38 / 50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    margin: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    color: #fcedc0;
}
.mu-guides-golden-invasion-monster-title{
    padding: 15px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mu-guides-golden-invasion-monster-title h3{
    font-size: 18px;
    color: #fc9162;
}
.mu-guides-golden-invasion-monster-content{
    display: flex;
    justify-content: center;
}
.mu-guides-golden-invasion-monster-desc{
    padding: 0 5px 0 15px;
}
.mu-guides-golden-invasion-monster-desc h4{
    font-size: 14px;
    margin: 0;
}
.mu-guides-golden-invasion-monster-img img{
    height: 150px;
    width: auto;
    background-color: rgb(0 0 0 / 53%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    padding: 10px;
}
.mu-guides-regular-invasion-sub-container{
    width: calc(45% - 10px);
    height: 300px;
    background: rgb(56 42 38 / 50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    margin: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    color: #fcedc0;
}
.mu-guides-regular-invasions-page{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    background-color: rgb(0 28 49 / 46%);
}
.mu-guides-regular-invasion-monster-title{
    padding: 0 15px 0 65px;
    text-decoration: underline;
    text-underline-offset: 4px;
    position: relative;
    top: 20px;
}
.mu-guides-regular-invasion-monster-title h3{
    font-size: 26px;
    margin-bottom: 0;
    color: #fc9162;
}
.mu-guides-regular-invasion-monster-content{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
.mu-guides-regular-invasion-drop-list{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.mu-guides-regular-invasion-drop-list h5{
    margin: 0;
}
.mu-guides-regular-invasion-monster-desc{
    width: 250px;
    position: relative;
    left: 50px;
    top: 45px;
}
.mu-guides-regular-invasion-monster-desc h4{
    margin: 0;
    font-size: 14px;
}

.mu-guides-regular-invasion-monster-img{
    width: 150px;
    display: flex;
    justify-content: center;
    position: relative;
    padding: 10px;
    top: -25px;
    right: 20px;
    background-color: rgb(0 0 0 / 53%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.mu-guides-regular-invasion-monster-img img{
    height: 150px;
    width: auto;
}
.mu-guides-regular-invasion-common-drop ul, .mu-guides-regular-invasion-rare-drop ul, .mu-guides-regular-invasion-epic-drop ul{
    font-size: 12px;
    margin: 0;
}
.mu-guides-regular-invasion-monster-drop{
    width: 100%;
    display: flex;
    justify-content: center;
}
.mu-guides-regular-invasion-common-drop{
    color: #45a328;
}
.mu-guides-regular-invasion-rare-drop{
    color: #ffbf00;
}
.mu-guides-regular-invasion-epic-drop{
    color: #b40ae9;
}

.mu-guides-excellent-item-tier{
    display: flex;
    justify-content: center;
    font-size: 13px;
}
.mu-guides-item-tiers-page li{
    color: #13a513;
    list-style: none;
}
.mu-guides-item-tiers-page ul{
    padding: 0 10px 0 10px;
}
.mu-guides-item-tiers-page .mu-guides-item-tier-list-title{
    list-style: none;
    color: #c5a97c;
    font-size: 16px;
    font-weight: 700;
}
.mu-guides-item-tier-title h2{
    text-align: center;
    color: #c5a97c;
    border-bottom: 1px solid;
    margin: 20px;
}
.mu-guides-item-tier1, .mu-guides-item-tier2, .mu-guides-item-tier3, .mu-guides-item-tier4{
    border-right: 1px solid #413f3f;
}
.mu-guides-info-top-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 5px;
    box-sizing: border-box;
    border-radius: 0 0 8px 8px;
    color: #c5a97c;
    align-items: center;

}
.mu-guides-info-top-container h4{
    font-size: 14px;
    line-height: 1.5;
}
.mu-guides-info-top-content{
    background: rgb(56 42 38 / 50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    display: flex;
    width: 860px;
    margin: 20px 20px 30px 20px;
    justify-content: center;
    padding: 30px 0;
    gap: 50px;
    color: #fcedc0;
}
.mu-guides-info-top-title{
    color: #fcedc0;
    text-align: center;
    padding-top: 15px;
}
.mu-guides-info-top-title h2{
    font-size: 30px;
    color: #fc9162;
    margin: 0;
    text-decoration: underline;
    text-underline-offset: 5px;
}
.mu-guides-info-top-content-left{
    padding: 25px;
    border-radius: 8px;
}
.mu-guides-info-top-content-left-upper{
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
}

.mu-guides-info-top-drops-chance{
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-direction: row;
}
.mu-guides-drops-box-content .mu-guides-info-top-drops-chance{
    flex-direction: column-reverse;
}
.mu-guides-info-top-desc a{
    text-decoration: underline;
    color: #fcedc0;
    font-weight: 700;
}
.mu-guides-info-top-desc h4{
    color: #fcedc0;
}
.mu-guides-info-top-desc a:hover{
    text-decoration: underline;
    color: #c5a97c;
    font-weight: 700;

}
.mu-guides-info-top-image img{
    height: 100px;
    width: auto;
    background-color: rgb(0 0 0 / 53%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.mu-guides-img-small{
    height: 150px
}
.mu-guides-info-top-content-rankings-rewards-title{
    color: #fcedc0;
    font-size: 20px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mu-guides-info-top-content-right-table table{
    width: 100%;
    margin-top: 20px;
    color: #fcedc0;
    background: rgb(0 0 0 / 50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.mu-guides-info-top-content-right-table table td{
    text-align: center;
}
.mu-guides-info-top-content-right-table table thead{
    height: 20px;
    color: #fc9162;
}
.mu-guides-info-top-content-right-table table tr{
    height: 30px;
}
.mu-rank-reward-td{
    display: flex;
    justify-content: center;
    height: 30px;
    align-items: center;
}
.mu-rank-reward-td img{
    height: 25px;
}
.arrow-diagonal{
    font-size: 0.6em;
     transform: rotate(-45deg);
      vertical-align: super;
}
.mu-guides-gold-small{
    height: 18px;
}
.mu-guides-exc-tier-h2{
    text-align: center;
    color: #fc9162;
    font-size: 24px;
    padding: 20px;
}
.mu-guides-harmony-table{
    width: 100%;
    border-collapse: collapse;
}
.mu-guides-harmony-title{
    padding-left: 15px;
    color: #2874b7;
}
.mu-guides-harmony-table tr{
    background-color: rgb(56 42 38 / 50%);
}
.mu-guides-harmony-table th, .mu-guides-harmony-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.mu-guides-harmony-table th {
    background-color: #f3720385;
}

.mu-guides-harmony-table .mu-guides-even-row {
    background-color: rgb(0 28 49 / 46%);
}
.mu-guides-harmony-option-name{
    color: #f5d900;
    font-weight: 500;
}
.mu-guides-harmony-note{
    background: rgba(56, 42, 38, 0.2);
    padding: 20px;
    box-sizing: border-box;
    border-left: 2px solid #403c37;
    border-right: 2px solid #403c37;
    border-top: 2px solid #403c37;
    border-radius: 0 0 8px 8px;
    color: #f5d900;
}
.mu-guides-harmony-note h3{
    color: #c5a97c;
    margin-top: 0;
}
.mu-guides-ancient-sets-content h2{
    text-align: center;
    color: #c5a97c;
    padding: 5px;
    cursor: pointer;
}
.mu-guides-ancient-title h3{
    width: max-content;
    padding: 0 15px 0 15px;
}
.mu-guides-ancient-set-box h4{
    padding: 5px 10px 0 10px;
    font-size: 12px;
    color: #ffbf00;
}
.mu-guides-ancient-set-box{
    margin: 5px;
    box-sizing: border-box;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    border-radius: 0 0 8px 8px;
    width: 30%;
    min-height: 350px;
    color: #5658b3;
    background-color: rgb(0 107 183 / 17%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.mu-guides-ancient-set-box ul li{
    list-style: square;
}
.mu-guides-ancient-set-content{
    font-size: 13px;
    padding: 0px 30px 5px;
}
mu-guides-ancient-sets-content h2 {
	cursor: pointer;
	padding: 10px;
	background-color: #f1f1f1;
	border-bottom: 1px solid #ccc;
	margin: 0;
}
.tier-content {
	display: none; 
	padding: 10px;
	border: 1px solid #ccc;
	border-top: none;
}
.mu-guides-ancient-sets{
    display: none;
    flex-wrap: wrap;
    justify-content: center;
}
.mu-guides-ancient-tier1{
    background: #30c3008c;
}
.mu-guides-ancient-tier2{
    background: #f3720385
}
.mu-guides-ancient-tier3{
    background: #f303037a
}
.mu-guides-lvl380-title{
    text-align: center;
    color: #c5a97c;
}
.mu-guides-lvl380-sets-container, .mu-guides-socket-sets-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.mu-guides-lvl380-set-container, .mu-guides-socket-set-container{
    display: flex;
    background: rgb(56 42 38 / 50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    border-radius: 0 0 8px 8px;
    color: #c5a97c;
    justify-content: center;
    width: 120px;
    flex-direction: column;
    text-align: center;
    margin: 5px;
}
.mu-guides-lvl380-sets-container img{
    scale: 0.9;
}
.mu-guides-wep-image{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.mu-guides-wep-image img{
    max-width: 80px;
    max-height: 150px;
    background-color: rgb(0 0 0 / 53%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    padding: 15px;
}
.mu-guides-socket-weps-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.mu-guides-socket-wep-container, .mu-guides-lvl380-wep-container{
    display: flex;
    background: rgb(56 42 38 / 50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    border-radius: 0 0 8px 8px;
    color: #c5a97c;
    justify-content: center;
    width: 140px;
    flex-direction: column;
    text-align: center;
    margin: 5px;
}
.mu-guides-socket-wep-container h4, .mu-guides-socket-set-container h4{
    color: #8100f3;
    padding-top: 10px;
    font-size: 14px;
}

.mu-guides-lvl380-wep-container h4, .mu-guides-lvl380-set-container h4{
    color: #cd6911;
    padding-top: 10px;
    font-size: 14px;
}
.mu-guides-chaos-page{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    background-color: rgb(0 28 49 / 46%);
    padding-bottom: 20px;
    margin-bottom: 15px;
}
.mu-guides-chaos-card{
    background: rgb(56 42 38 / 50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    padding-bottom: 15px;
}
.mu-guides-chaos-page .mu-guides-chaos-page-title h2{
    text-align: center;
    color: #c5a97c;
    font-size: 30px;
    color: #fc9162;
    margin: 0;
    text-decoration: underline;
    text-underline-offset: 5px;
    padding: 15px;
}
.mu-guides-chaos-page .mu-guides-chaos-card{
    width: 400px;
    margin: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    color: #c5a97c;
}
.mu-guides-chaos-page .mu-guides-chaos-card-title h3{
    padding: 20px;
    font-size: 18px;
}
.mu-guides-chaos-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.mu-guides-chaos-content .mu-guides-chaos-card{

}
.mu-guides-chaos-card-title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 10px 0 0;
}
.mu-guides-chaos-card-title h3{
    margin: 0;
}
.mu-guides-chaos-card-title img{
    background-color: rgb(0 0 0 / 53%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    padding: 5px;
    max-height: 100px;
    max-width: 100px;
    position: absolute;
    transform: translate(270px, 10px);
}
.mu-guides-chaos-card-content{

}
.mu-guides-chaos-mix-line{
    display: flex;
    align-items: center;
}
.mu-guides-chaos-mix{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    right: 70px;
}
.mu-guides-chaos-mix p{
    margin-bottom: 0;
}
.mu-guides-golden-fenrir{
    display: flex;
    width: 400px;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
}
.mu-guides-wings-title{
    display: flex;
    justify-content: center;
}
.mu-guides-wings-content{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.mu-guides-wings-img{
   display: flex;
    align-items: center;
    background-color: rgb(0 0 0 / 53%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    padding: 25px;
}
.mu-guides-item-img{
    width: 30px;
    height: 30px;
}
.mu-guides-account-status table{
    width: 100%;
    color: #c5a97c;
    text-align: center;
}
.mu-guides-account-status tr td{
    max-width: 100px;
}
.mu-guides-account-status table th{
    background-color: #595349;
    color: black;
}
.mu-guides-account-status-odd-row{
    background-color: #232323;
}
.mu-guides-account-status-even-row{
    background-color: #2f2727;
}
.mu-guides-left{
    text-align: left;
}
.mu-guides-chaos-mix-line-img{
    width: 80px;
}
.mu-guides-chaos-mix-line-img img{
    float: right;
}
.mu-guides-settings-page{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    background-color: rgb(0 28 49 / 46%);
    color: #fcedc0;
    width: 95%;
    margin: 0px auto;
    padding-bottom: 20px;
}
.mu-guides-settings-page-title{
    text-align: center;
    color: #c5a97c;
}
.mu-guides-settings-page-title h2{
    font-size: 30px;
    color: #fc9162;
    margin: 0;
    text-decoration: underline;
    text-underline-offset: 5px;
    padding: 15px;
}
.mu-guides-settings-page-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.mu-guides-settings-sub-container{
    width: calc(45% - 10px);
    height: 320px;
    background: rgb(56 42 38 / 50%);
    margin: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    color: #fcedc0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mu-guides-settings-sub-container-main{
    display: flex;
    gap: 60px;
    line-height: 2;
}
.one-account-rule{
    width: 90%;
    margin: 0 auto;
    border: 1px solid red;
    border-radius: 5px;
    line-height: 2;
    padding: 15px;
    text-align: center;
}
.one-account-rule .acc-rule-title{
    font-size: 16px;
    color: #fcedc0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.general-settings-info{
    width: calc(90% - 10px);
    height: 220px;
    align-items: center;
}
.party-search-container{
    width: calc(45% - 10px);
    height: 760px;
    align-items: center;
}
.party-settings-container{
    width: calc(35% - 10px);
    height: 300px;
    align-items: center;
}
.party-com-and-rec-container{
    width: calc(50% - 10px);
    height: 300px;
    align-items: center;
}
.other-commands-container{
    width: calc(85% - 10px);
    height: 250px;
    align-items: center;
}
.mu-guides-party-settings-title{
    font-size: 14px;
    margin-bottom: 5px;
}
.custom-interface-container{
    width: calc(45% - 10px);
    height: 760px;
    align-items: center;
}
.alt-hover-container{
    width: calc(90% - 10px);
    height: 340px;
    align-items: center;
}
.stages-container-top{
    width: calc(80% - 10px);
}
.stages-container{
    width: calc(33% - 10px);
    height: 390px;
    align-items: center;
    text-align: center;
}
.general-rule-container{
    width: calc(55% - 10px);
}
.mu-guides-settings-sub-container-header{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mu-guides-settings-title{
    font-size: 18px;
    color: #fc9162;
    margin: 15px;
    display: flex;
}
.mu-guides-settings-sub-container-content-upper{
    display: flex;
    justify-content: center;
}
.mu-guides-settings-sub-container-content-lower{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
}
.mu-guides-warning-red{
    color: #ff0021
}
.mu-guides-stage-title{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mu-guides-unlock{
    width: auto;
    padding: 0 10px 0 10px;
    text-align: center;
    border-left: 2px solid white;
    border-right: 2px solid white;
    border-radius: 8px;
    background-color: #ff00261f;
}
.mu-guides-drops-page{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    background-color: rgb(0 28 49 / 46%);
}
.mu-guides-drops-box{
    width: calc(25% - 10px);
    height: inherit;
    padding-bottom: 15px;
    background: rgb(56 42 38 / 50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    margin: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    color: #fcedc0;
    
}
.mu-guides-drops-box-title{
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #ffdd06;
    display: flex;
    width: 100%;
    padding-left: 40px;
    
}
.mu-guides-drops-box-title img{
    width: 50px;
    padding: 10px;
    height: auto;
    background-color: rgb(0 0 0 / 53%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.mu-guides-drops-box-title .mu-guides-item-name{
    padding-left: 10px;
}
.mu-guides-drops-box-obtain{
    color: #5658b3;
    width: 90%;
    margin: 0 auto;
    font-size: 12px;
}
.mu-guides-drops-box-obtain h5{
    margin: 10px 0 0 0;
}
.mu-guides-drops-separation-line{
    height: 1px;
    width: 90%;
    background-color: white;
    margin: 10px 0 10px 0;
}
.mu-guides-level-row{
    text-align: center;
}
.mu-guides-event-invitation-drop{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.mu-guides-event-invitation-drop table td{
    padding: 5px;
}
.mu-guides-invitation-ticket-drop{
    text-align: center;
}
.mu-guides-invitation-ticket-drop h3{
    padding-top: 20px;
    margin-bottom: 10px;
    color: #fc9162;
}
.mu-guides-invitation-ticket-drop h5{
    margin-top: 5px
}
.mu-guides-valuables{
    width: unset;
}
.mu-guides-skills-page{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    background-color: rgb(0 28 49 / 46%);
    width: 90%;
    margin: 0 auto;
}
.mu-guides-skills-page h3{
    text-align: center;
    color: #ffdd06;
}
.mu-guides-skills-page table th{
    background-color: #595349;
}
.mu-guides-skills-page table{
    background-color: #2f2727;
    width: 100%;
}
.mu-guides-skills-page td{

}
.mu-guides-skills-page .mu-guides-odd-row{
    background-color: #232323;
}
.mu-guides-skills-table{
    width: 95%;
    margin: 0 auto;
}
.mu-guides-skills-table table{
    color: #5658b3;
}
.mu-guides-skills-table table th{
    color: #c5a97c;
}
.mu-guides-skills-table td{
    border-top: 1px solid wheat;
    padding: 5px;
}
.mu-guides-features-settings h3{
    text-align: center;
    color: #ffdd06;

}
.mu-guides-features-settings{
    text-align: center;
}
.mu-guides-keys{
    color: #ff7127;
}
.mu-guides-quest-img{
    max-width: 30px;
}
.mu-guides-info-quest-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    background-color: rgb(0 28 49 / 46%);
    width: 90%;
    margin: 0 auto;
    padding-bottom: 20px;
    margin-bottom: 15px;
    color: #c5a97c;
}
.mu-guides-info-quest-content{
    display: flex;
    justify-content: space-evenly;
    margin: 20px;
    flex-direction: column;
    align-items: center;
}
.zyro-quest-info{
    width: calc(30% - 10px);
    height: 340px;
}
.mu-guides-drops-box-content{
    display: flex;
    flex-direction: column-reverse;
}
.mu-guides-drops-page-title{
    width: 100%;
    text-align: center;
    padding: 20px;
    font-size: 30px;
    color: #fc9162;
    margin: 0;
    text-decoration: underline;
    text-underline-offset: 5px;
    font-family: "Philosopher", sans-serif;
}
.chaos-card-box{
    width: calc(22% - 10px);
}
.drop-align-center{
    text-align: center;
}
.stat-fruits img{
    position: static; /* Reset the position property */
    transform: none;
    height: 40px;
}
.mu-guides-chaos-mix-chance{
    position: relative;
    display: flex;
    justify-content: center;
    right: 70px;
    padding-top: 15px;
}
.wings-title{
    justify-content: center;
}
.common-drop-centered{
    width: 90%;
    margin: 0 auto;
}
.mu-guides-invitation-drops-box-content{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.mu-guides-invitation-ticket-drop td{
    padding: 5px;
}
.valuables-drop{
    width: 90%;
    margin: 0 auto;
}
.summer-container, .rabbit-container{
    width: calc(65% - 10px);
}
.mu-guides-skills-page table tr{
    height: 30px;
}
.mu-guides-skills-page table tr td{
     padding: 10px;
    border-bottom: 1px solid wheat;
    text-align: center;
}
.mu-guides-notes-container {
    padding: 15px;
    max-width: 450px;
    background: rgb(0 0 0 / 14%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    position: relative;
    top: 15px;
}

.mu-guides-notes-container h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    text-align: left;
}

.mu-guides-notes-list {
    list-style-type: disc;
    margin: 0;
    padding-left: 20px;
    color: #c5a97c;
}

.mu-guides-notes-list li {
    margin-bottom: 8px;
    line-height: 1.5;
}
.mu-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Circle with question mark */
.mu-tooltip .mu-question-mark {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    text-align: center;
    line-height: 12px;
    font-weight: bold;
    font-size: 10px;
    border: 1px solid #ffdd06;
    display: inline-block;
    color: #ffdd06;
    position: relative;
    top: -2px;
}

/* Tooltip text (hidden by default) */
.mu-tooltip .mu-tooltip-text {
    visibility: hidden;
    width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the question mark */
    left: -55px;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.mu-tooltip .mu-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Show tooltip on hover */
.mu-tooltip:hover .mu-tooltip-text {
    visibility: visible;
    opacity: 1;
}

.mu-guides-table-comment-text{
    font-size: 0.85em; /* Smaller text size */
    color:#fcedc0; /* Subtle text color */
    margin-top: 10px; /* Spacing from the table */
    text-align: center; /* Align text to the left */
}
.mu-guides-moss-sub-info{
  font-size: 16px;
    line-height: 2;
    position: relative;
    top: 20px;
}
.mu-guides-gold-img{
    height: 16px; 
    position:relative
}

/* MEDIA QUERIES PARA RESPONSIVE */
@media screen and (max-width: 1200px) {
    .mu-guides-general-sub-container {
        width: calc(50% - 20px);
    }

    .mu-guides-events-sub-container {
        width: calc(45% - 10px);
    }
}

@media screen and (max-width: 992px) {
    .mu-guides-navigation {
        height: auto;
    }

    .mu-guides-navigation-list {
        flex-wrap: wrap;
    }

    .mu-guides-navigation li {
        width: 50%;
        border-right: none;
        border-bottom: 1px solid #7f7f7f;
    }
}

@media screen and (max-width: 768px) {
    .mu-guides-general-sub-container {
        width: calc(100% - 20px);
    }

    .mu-guides-events-sub-container {
        width: calc(100% - 20px);
    }

    .mu-guides-info-top-content {
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: 15px;
        gap: 20px;
    }

    .mu-guides-navigation li {
        width: 100%;
    }
}

/* Para asegurar que los iframes sean fullscreen si existen */
iframe {
    width: 100% !important;
    height: 100% !important;
    border: none;
}

.ajax-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}