
@media (max-width: 780px) {

    .welcomeSearchContainer{height: 30%;}

    .welcomeContainer{
        height: calc(100% - 80px);
    }
    .mapMarker:after {
        border-top:solid 12px #232221;
        border-left:solid 12px transparent;
        border-right:solid 12px transparent
    }

    .mapMarkerDungeon:after {
        border-top-color:#966eca
    }

    .mapMarkerDungeonNewbie:after {
        border-top-color:#23a750
    }

    .mapMarker,.mapMarker img {
        width:24px;
        font-size:8px
    }

    .mk1x {
        left:calc(9% - 24px)
    }

    .mk2x {
        left:calc(18% - 22px)
    }

    .mk3x {
        left:calc(27% - 22px)
    }

    .mk4x {
        left:calc(36% - 22px)
    }

    .mk5x {
        left:calc(45% - 22px)
    }

    .mk6x {
        left:calc(54% - 22px)
    }

    .mk7x {
        left:calc(63% - 22px)
    }

    .mk8x {
        left:calc(72% - 22px)
    }

    .mk9x {
        left:calc(81% - 22px)
    }

    .mk10x {
        left:calc(90% - 22px)
    }

    .mk11x {
        left:calc(100% - 22px)
    }

    .NPCListaHP div {
        line-height:26px
    }

    .NPCListaItemName {
        padding:0
    }

    .NPCListaItemValores img {
        height:22px
    }

    .NPCListaItemImg {
        width:60px
    }

    .NPCListaItemImg img {
        height:unset;
        width:inherit
    }

    .NPCListaItem {
        width:100%
    }

    .NPCListaHP {
        width:70px;
        line-height:26px
    }

    .NPCListaItemMapa {
        text-align:center;
        float:left;
        margin:auto;
        width:inherit
    }

    .selectorRenderNPCTitulo {
        margin:auto;
        padding-left:0
    }

    .bossCardDescription {
        max-height:40%;
        height:180px
    }

    .bossCardDescription.expand {
        max-height:unset;
        height:unset
    }

    .imgNPC {
        height:45px
    }

    .containerAtacante {
        padding:0;
        width:calc(100% - 1px)
    }

    .tablaPanel {
        max-width:none;
        border-image:url(../img/bordertable.png) 25 round
    }

    .containerAtacante .tablaPanel {
        width:fit-content
    }

    #tablaClases .tablaPanel {
        width:auto
    }

    .tablaManual {
        width:auto;
        max-width:none;
        background-color:#000;
        margin:0
    }

    .header {
        z-index:107;
        width:100%;
        position:fixed;
        background-color:#000;
        top:0;
        height:55px
    }

    .header .logo_fenix {
        height:40px;
        right:50px
    }

    .header .logo_icono {
        height:55px;
        right:0
    }

    .header .logo_ao {
        top:38px;
        height:15px;
        right:55px
    }

    .content {
        /* margin-top:55px; */
        width:100%;
        top:0;
        margin-left:0;
        height: 100%;
        overflow-y:auto
    }

    .menuWrapper {
        display:none;
    }
    .contentWrapper{
        width: calc(100vw - 20px);
        margin-left: 0;
        margin-top: 55px;
        height: calc(100vh - 75px);
        border-left: 0;
        border-left: 10px solid transparent;
    }
    .menuContent {
        width:100%;
        position:absolute;
        height:100%;
        overflow-y:auto;
        overflow-x:hidden;
        margin:0;
        top:0;
        z-index:107
    }

    .menuWrapper.active {
        display:block;
        z-index: 106;
        margin-top: 55px;
        height: calc(100vh - 75px);
        background-color: #1a1a1a !important;
    }

    body {
        height:100%;
        overflow:hidden
    }

    .toggle {
        display:block;
        position:absolute;
        left:14px;
        top:14px;
        z-index:108;
        width:40px
    }

    .toggle img {
        width:40px
    }

    .toggle img:after {
        content:'M'
    }

    .tablaManualTable img {
        height:22px
    }

    img.imgNPCHead {
        height:12px
    }

    .modalNotificacionBackdrop {
        position:fixed;
        top:0;
        width:100%;
        height:100%;
        background-color:#000;
        opacity:.8
    }

    .modalNotificacion {
        position:fixed;
        top:0;
        width:100%;
        height:100%;
        max-height:100%;
        margin-left:0
    }

    .modalNotificacion .tablaManual,.modalNotificacion .bossCard {
        border-image:url(../img/bordertableclose.png) 35 round;
        max-height:calc(100% - 50px)
    }

    .popUPMapa {
        height:100%
    }

    .NPCListaItemValores {
        width:calc(100% - 60px);
        padding:0;
        font-size:12px;
        max-width:80%
    }

    .panelRazaButton,.panelClaseButton {
        max-width:unset;
        width: 95%;
        display: inline-block;
    }

    .worldMapPanel.help {
        left: 10px;
        width: calc(100% - 20px);
        right:unset;
        border-left-width: 0;
    }

    .popupWorldMap {
        width:92%;
        margin:20% 0 0;
        height:calc(100% - 125px)
    }

    #canvasPopUp {
        height:100%
    }

    #mapaPopUp {
        width:auto;
        height:calc(100% - 55px)
    }

    .containerMapa {
        width:auto;
        border-left-width: 10px;
        height: 100%;
    }

    #listTeleports {
        overflow:auto;
        /* right:15px; */
        max-height: 25%;
        bottom: 10px;
        border-bottom-width: 0;
        border-top-width: 10px;
    }

    .searchContainerWorldMap:hover {
        max-height: 160px;
        width: 250px;
    }

    .searchResultsWorldMap {
        max-height:120px
    }

    .popUPTienda {
        max-height:95%;
        height:fit-content;
        width:fit-content;
        color:#fff;
        margin:auto
    }

    .popUPTienda .tablaManual {
        position:relative;
        margin:0
    }

    .popUPTienda .tablaManualTable {
        position:relative;
        margin:0;
        overflow-y:auto;
        overflow-x:hidden;
        max-height:calc(100vh - 195px);
        margin:0;
        height:fit-content
    }

    .containerQuest {
        width:100%;
        margin-left:0
    }

    .searchContainer {
        top:14px;
        width:130px;
        left:60px
    }

    .searchText {
        width:100px
    }

    .searchNav {
        width:114px
    }
}

@media (max-width: 630px) {
    .manualDamageContainer {
        width:100%
    }

    .manualDamageContainer.left,.manualDamageContainer.right {
        float:none;
        margin:0
    }

    .detalleResultado {
        width:100%
    }

    .manualDamageContainerseparador {
        margin-left:-5px;
        border-bottom:15px solid transparent;
        height:0;
        width:100%
    }
}
