<style>

    *
    {
        margin: 0px;
        padding: 0px;
        font-family : inherit;
    }

    select
    {
        font-family : inherit;
    }

/* ---A LINKS--- */
    .a-none
    {
        text-decoration: none;
    }
    .a-white
    {
        text-decoration: none;
        color: #FFFFFF;
    }
    .a-white:hover
    {
        color: #dddddd;
        cursor: pointer;
    }
    .a-black{
        text-decoration: none;
        color: black;
    }

/* ---IMAGENES--- */
    .responsive 
    {
        width: 100%;
        height: auto;
    }

    .img_menu_circular
    {
        vertical-align: top; 
        margin-left: 4px; 
        margin-right: 4px;
        margin-top: 0px;
    }

    .img_menu_inferior
    {
        vertical-align: top; 
        margin-left: 10px; 
        margin-right: 10px;
        margin-top: 0px;
    }

    .menu-superior-fondo
    {
        color: #ffffff;
        background-image: url("../imagenes/menu_recursos/fondo_02.jpg");
        background-repeat: repeat-x;
        /*background-size: 10%;*/
        padding: 5px 0px 3px 0px;
        font-size: 1.1em;
        text-align: left;
    }

    .menu-inferior-fondo
    {
        color: #ffffff;
        background-image: url("../imagenes/menu_recursos/fondo_02.jpg");
        background-repeat: repeat-x;
        /*background-size: 10%;*/
        padding: 7px 0px 7px 0px;
        font-size: 1.1em;
        text-align: left;
    }
    
/* ---BOTONES--- */
    .btn 
    {
        font-family : inherit;
        border-radius: 5px;
        background-color: white;
        color: black;
        cursor: pointer;

        border: 2px solid;
        padding: 9px 14px;
        font-size: 0.9em;
    }
    .btn-lg 
    {
        border: 2.4px solid;
        padding: 10.8px 16.8px;
        font-size: 1.08em;
    }
    .btn-sm 
    {
        border: 1.67px solid;
        padding: 7.5px 11.67px;
        font-size: 0.75em;
    }
    .btn-xs 
    {
        border: 1px solid;
        padding: 4px 8px;
        font-size: 0.75em;
    }
    .btn-block 
    {
        display: block;
        width: 100%;
    }
    .btn-success 
    {
        border-color: #4CAF50;
        color: green;
    }
    .btn-success:hover 
    {
        background-color: #4CAF50;
        color: white;
    }
    .btn-info 
    {
        border-color: #2196F3;
        color: dodgerblue
    }
    .btn-info:hover 
    {
        background: #2196F3;
        color: white;
    }
    .btn-warning 
    {
        border-color: #ff9800;
        color: orange;
    }
    .btn-warning:hover 
    {
        background: #ff9800;
        color: white;
    }
    .btn-danger 
    {
        border-color: #f44336;
        color: red
    }
    .btn-danger:hover 
    {
        background: #f44336;
        color: white;
    }
    .btn-sabotaje 
    {
        border-color: #bd5bff;
        color: #bd5bff;
    }
    .btn-sabotaje:hover 
    {
        background: #bd5bff;
        color: white;
    }
    .btn-default 
    {
        border-color: #e7e7e7;
        color: black;
    }
    .btn-default:hover 
    {
        background: #e7e7e7;
    }
    .btn-inline
    {
        display: inline;
    }
    
/* ---INPUT--- */
    .input 
    {
        margin-top: 2px;
        font-family : inherit;
        border-radius: 5px;
        width:100%;
        background-color: #ffffff;
        color: black;    
        box-sizing: border-box;

        border: 2px solid #BBBBBB;
        padding: 9px 14px;
        font-size: 0.75em;
    }

    .input-lg 
    {
        margin-top: 2px;
        border: 2.4px solid #BBBBBB;
        padding: 10.8px 16.8px;
        font-size: 0.9em;
    }

    .input-sm 
    {
        margin-top: 2px;
        border: 1.67px solid #BBBBBB;
        padding: 7.5px 11.67px;
        font-size: 0.625em;
    }

    .input-xs 
    {
        margin-top: 2px;
        border: 1px solid #BBBBBB;
        padding: 2.5px 1px;
        font-size: 0.5em;
        margin: 1px;
    }

/* ---PANELES--- */
    .borde_no_selected
    {
        border: 2px solid #444444;
    }
    .borde_selected
    {
        border: 2px solid green;
    }
    .panel_equipamiento
    {
        border: 2px solid black;
        border-radius: 8px;
    }
    .panel_herrero
    {
        border: 2px solid #CCCCCC;
        border-radius: 8px;
        height: 90px;
        min-width: 60px;
        min-height: 90px;
    }
    .panel_pack_ciencia
    {
        padding: 16px;
        border: 2px solid #CCCCCC;
        border-radius: 8px;
    }
    .panel_objeto_sabotear
    {
        padding: 6px;
        border: 2px solid #CCCCCC;
        border-radius: 6px;
    }
    .panel-borde-gris-8
    {
        border-color: #888888;
    }
    .panel-borde-gris-e8
    {
        border-color: #E8E8E8;
    }
    .panel-borde-danger
    {
        border: 2px solid #f44336;
        border-radius: 8px;
    }
    .panel-borde-warning
    {
        border: 2px solid #ff9800;
        border-radius: 8px;
    }
    .panel-borde-info
    {
        border: 2px solid #2196F3;
        border-radius: 8px;
    }
    .panel-borde-success
    {
        border: 2px solid #4CAF50;
        border-radius: 8px;
    }

/* ---TABS--- */
    .tab
    {
        font-family: inherit;
        border-radius: 10px;
        cursor: pointer;
        border: 2px solid black;
        padding: 7px 8px;
        font-size: 0.9em;
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: initial;
        border-bottom: none;
        outline:none;
    }
    .tab-white
    {
        background-color: white;
        color: black;
    }
    .tab-black
    {
        background-color: black;
        color: white;
    }
    .tab-transparente
    {
        background-color: transparent;
        color: grey;
    }

/* ---BACKGROUND/COLORES--- */
    .background-info
    {
        background-color: #2196F3;
        color: white;
    }
    .bg-info
    {
        background-color: #2196F3;
    }
    .bg-warning
    {
        background-color: #ff9800;
    }
    .bg-danger
    {
        background-color: #f44336;
    }
    .bg-success
    {
        background-color: #4CAF50;
    }
    .bg-celeste-suave
    {
        background-color: #d2f7ec;
    }
    .bg-rojo-suave
    {
        background-color: #f4d9c8;
    }
    .bg-dorado-suave
    {
        background-color: #efe4b1;
    }
    .bg-verde-suave
    {
        background-color: #e1edc9;
    }
    .bg-transparente
        { background-color: transparent; }
    
/* ---TEXTO/COLORES---*/
    .ellipsis /*pone "..." cuando el texto da overflow*/
    {
      text-overflow: ellipsis; 
      white-space: nowrap; 
      overflow: hidden;
    }

    .maximos_recursos
    {
        color: #BBBBBB; 
        font-size: 0.65em;
    }

    .fa-sync-alt:hover 
    {
        color: #dddddd;
    }

    .fuente-primaria
    {
        font-family: 'Alegreya Sans SC', sans-serif;
        font-weight: 400;
    }

    .fuente-light
    {
        font-weight: 300;
    }

    .fuente-bold
    {
        font-weight: 700;
    }
    
    .text-muted
    {
        color: #686868;
    }

    .color-azul
    {
        color: #4771ea;
    }

    .color-gris-claro
    {
        color: #cccccc;
    }

    .color-gris
    {
        color: #888888;
    }

    .color-gris-oscuro
    {
        color: #444444;
    }

    .color-negro
    {
        color: #000000;
    }

    .color-blanco
    {
        color: #FFFFFF;
    }

    .text-danger
    {
        color: #f44336;
    }

    .text-primary
    {
        color: #2196f3;
    }

    .text-success
    {
        color: #4caf50;
    }

    .texto_borde_1
    {
        text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 0 -1px 0 #000, -1px -1px 0 #000;
    }

    .texto_borde_blanco_1
    {
        text-shadow: 1px 0 0 #FFF, 1px 1px 0 #FFF, 0 1px 0 #FFF, -1px 0 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0 -1px 0 #FFF, -1px -1px 0 #FFF;
    }
    
/* ---ANIMACIONES Y HOVER--- */
    .mouse
    {
        cursor: pointer;
    }

    .animacion-escala-01 
    {
        transition: all .2s ease-in-out;
    }

    .animacion-escala-01:hover 
    {
        transform: scale(1.01);
    }

    .animacion-escala_02 
    {
        transition: all .2s ease-in-out;
    }

    .animacion-escala-02:hover 
    {
        transform: scale(1.02);
    }

    .animacion-escala-03 
    {
        transition: all .2s ease-in-out;
    }

    .animacion-escala-03:hover 
    {
        transform: scale(1.03);
    }

    .animacion-escala-04 
    {
        transition: all .2s ease-in-out;
    }

    .animacion-escala-04:hover 
    {
        transform: scale(1.04);
    }

    .animacion-escala-05 
    {
        transition: all .2s ease-in-out;
    }

    .animacion-escala-05:hover 
    {
        transform: scale(1.05);
    }

    .animacion-escala-20 
    {
        transition: all .2s ease-in-out;
    }

    .animacion-escala-20:hover 
    {
        transform: scale(1.20);
    }

    .div_unidades_militares_hover:hover 
    { 
        background-color: #d3e7da; cursor: pointer; 
    }

    .div_trampas_hover:hover 
    { 
        background-color: #e8d4b5; cursor: pointer; 
    }
    
/* ---ESTRUCTURA Y ORIENTACIÓN--- */
    .centrar-vertical
    {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    .centrar-horizontal
    {
        position: relative;
        margin-left: 50%;
        transform: translateX(-50%);
    }
    .siempre_arriba
    {
        position: fixed;
        top: 0px;
        width:100%;
    }

    .siempre_abajo 
    {
        position: fixed;
        bottom: 0px;
        width:100%;
    }

    .izq
    {
        text-align: left;
    }

    .mid
    {
        margin: auto; 
        text-align: center;
    }

    .der
    {
        text-align: right;
    }

    .row::after 
    {
        content: "";
        clear: both;
        display: table;
    }

    .toast-top-right 
    {
        /*Desplazar los pop-up*/
        top: 50px;
    }

    [class*="col-"] 
    {
        float: left;
    }

    @media only screen and (max-width: 768px){
        /*MOBILE*/
        body
        {
            font-size: 1em;
        } 

        .contenedor
        {
            width: 100%;
        }

        .col-m-1 {width: 8.33%;}
        .col-m-2 {width: 16.66%;}
        .col-m-3 {width: 25%;}
        .col-m-4 {width: 33.33%;}
        .col-m-5 {width: 41.66%;}
        .col-m-6 {width: 50%;}
        .col-m-7 {width: 58.33%;}
        .col-m-8 {width: 66.66%;}
        .col-m-9 {width: 75%;}
        .col-m-10 {width: 83.33%;}
        .col-m-11 {width: 91.66%;}
        .col-m-12 {width: 100%;}
    }

    @media only screen and (min-width: 768px){
        /*TABLET*/
        body
        {
            font-size: 1em;
        } 

        .contenedor
        {
            width: 80%;
        }

        .col-t-1 {width: 8.33%;}
        .col-t-2 {width: 16.66%;}
        .col-t-3 {width: 25%;}
        .col-t-4 {width: 33.33%;}
        .col-t-5 {width: 41.66%;}
        .col-t-6 {width: 50%;}
        .col-t-7 {width: 58.33%;}
        .col-t-8 {width: 66.66%;}
        .col-t-9 {width: 75%;}
        .col-t-10 {width: 83.33%;}
        .col-t-11 {width: 91.66%;}
        .col-t-12 {width: 100%;}
    }

    @media only screen and (min-width: 1200px){
        /*COMPUTER*/
        body
        {
            font-size: 1.2em;
        } 

        .contenedor
        {
            width: 60%;
        }

        .col-c-1 {width: 8.33%;}
        .col-c-2 {width: 16.66%;}
        .col-c-3 {width: 25%;}
        .col-c-4 {width: 33.33%;}
        .col-c-5 {width: 41.66%;}
        .col-c-6 {width: 50%;}
        .col-c-7 {width: 58.33%;}
        .col-c-8 {width: 66.66%;}
        .col-c-9 {width: 75%;}
        .col-c-10 {width: 83.33%;}
        .col-c-11 {width: 91.66%;}
        .col-c-12 {width: 100%;}
    }

    @media only screen and (min-width: 100px) {
        /*PARA TODOS*/
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
    }

/* ---PADDING Y MARGIN--- */
    .navegador_recursos
    {
        padding: 0px 15px 0px 15px;
    }

    .navegador_modulos
    {
        padding: 0px 15px 0px 15px;
    }
    .padding-xl
    {
        padding: 13px 13px 13px 13px;
    }

    .padding-lg
    {
        padding: 10px 10px 10px 10px;
    }

    .padding
    {
        padding: 8px 8px 8px 8px;
    }

    .padding-sm
    {
        padding: 6px 6px 6px 6px;
    }

    .padding-xs
    {
        padding: 3px 3px 3px 3px;
    }
    .p-1
    {
        padding: 1px;
    }
    .p-2
    {
        padding: 2px;
    }
    .p-3
    {
        padding: 3px;
    }
    .p-5
    {
        padding: 5px;
    }
    .p-8
    {
        padding: 8px;
    }
    .p-10
    {
        padding: 10px;
    }
    .p-20
    {
        padding: 20px;
    }
    .p-h-2
    {
        padding-right: 2px;
        padding-left: 2px;
    }
    .p-h-3
    {
        padding-right: 3px;
        padding-left: 3px;
    }
    .p-h-4
    {
        padding-right: 4px;
        padding-left: 4px;
    }
    .p-h-5
    {
        padding-right: 5px;
        padding-left: 5px;
    }
    .p-h-8
    {
        padding-right: 8px;
        padding-left: 8px;
    }
    .p-h-10
    {
        padding-right: 10px;
        padding-left: 10px;
    }
    .p-h-20
    {
        padding-right: 20px;
        padding-left: 20px;
    }
    .p-h-30
    {
        padding-right: 30px;
        padding-left: 30px;
    }
    .p-v-3
    {
        padding-top: 3px;
        padding-bottom: 3px;
    }
    .p-v-5
    {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .p-v-8
    {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .p-v-10
    {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .m-1
    {
        margin: 1px;
    }
    .m-2
    {
        margin: 2px;
    }
    .m-3
    {
        margin: 3px;
    }
    .m-5
    {
        margin: 5px;
    }
    .m-8
    {
        margin: 8px;
    }
    .m-10
    {
        margin: 10px;
    }
    .m-20
    {
        margin: 20px;
    }
    .m-h-2
    {
        margin-left: 2px;
        margin-right: 2px; 
    }
    .m-h-4
    {
        margin-left: 4px;
        margin-right: 4px; 
    }
    .m-h-5
    {
        margin-left: 5px;
        margin-right: 5px; 
    }
    .m-h-7
    {
        margin-left: 7px;
        margin-right: 7px; 
    }
    .m-h-10
    {
        margin-left: 10px;
        margin-right: 10px; 
    }
    .m-h-20
    {
        margin-left: 20px;
        margin-right: 20px; 
    }
    .m-h-30
    {
        margin-left: 30px;
        margin-right: 30px; 
    }
    .m-h-40
    {
        margin-left: 40px;
        margin-right: 40px; 
    }
    .m-h-50
    {
        margin-left: 50px;
        margin-right: 50px; 
    }
    .m-v-2
    {
        margin-top: 2px;
        margin-bottom: 2px; 
    }
    .m-v-4
    {
        margin-top: 4px;
        margin-bottom: 4px; 
    }
    .m-v-5
    {
        margin-top: 5px;
        margin-bottom: 5px; 
    }
    .m-v-7
    {
        margin-top: 7px;
        margin-bottom: 7px; 
    }
    .m-v-10
    {
        margin-top: 10px;
        margin-bottom: 10px; 
    }
    .m-v-20
    {
        margin-top: 20px;
        margin-bottom: 20px; 
    }
    .m-v-30
    {
        margin-top: 30px;
        margin-bottom: 30px; 
    }
    .m-v-40
    {
        margin-top: 40px;
        margin-bottom: 40px; 
    }
    .m-v-50
    {
        margin-top: 50px;
        margin-bottom: 50px; 
    }
    .m-top-5
    {
        margin-top: 5px; 
    }
    .m-top-10
    {
        margin-top: 10px; 
    }
    .m-top-20
    {
        margin-top: 20px; 
    }
    .m-top-30
    {
        margin-top: 30px; 
    }
    .m-top-40
    {
        margin-top: 40px; 
    }
    .m-top-50
    {
        margin-top: 50px; 
    }
    .m-bot-5
    {
        margin-bottom: 5px; 
    }
    .m-bot-10
    {
        margin-bottom: 10px; 
    }
    .m-bot-20
    {
        margin-bottom: 20px; 
    }
    .m-bot-30
    {
        margin-bottom: 30px; 
    }
    .m-bot-40
    {
        margin-bottom: 40px; 
    }
    .m-bot-50
    {
        margin-bottom: 50px; 
    }
    .m-bot-150
    {
        margin-bottom: 150px; 
    }
    .m-bot-200
    {
        margin-bottom: 200px; 
    }
    .m-izq-10
    {
        margin-left: 10px; 
    }
    .m-izq-20
    {
        margin-left: 20px; 
    }
    .m-izq-30
    {
        margin-left: 30px; 
    }
    .m-izq-40
    {
        margin-left: 40px; 
    }
    .m-izq-50
    {
        margin-left: 50px; 
    }
    .m-der-10
    {
        margin-right: 10px; 
    }
    .m-der-20
    {
        margin-right: 20px; 
    }
    .m-der-30
    {
        margin-right: 30px; 
    }
    .m-der-40
    {
        margin-right: 40px; 
    }
    .m-der-50
    {
        margin-right: 50px; 
    }

/* ---MISC--- */
    .ocultar
    {
        display: none;
    }
    .recortar /*Agrega puntos suspensivos si el texto es muy largo*/
    {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    ::placeholder 
    { 
        color: #CCCCCC;
    }
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
    }
    .w-40
        { width: 40%; }
    .w-90
        { width: 90%; }

/* ---MÓDULOS ESPECIFICOS--- */
    
    /* ---HERRERIA--- */
        .img_herreria
        {
            transition: all .2s ease-in-out;
            cursor: pointer;
        }
        .img_herreria:hover 
        {
            transform: scale(1.03);
        }

    /* ---EQUIPAMIENTO--- */
        .item
        {
            border: 2px solid #444444;
            border-radius: 5px;
            transition: all .2s ease-in-out;
            cursor: pointer;
        }
        .item:hover 
        {
            transform: scale(1.03);
        }
        .contenedor-item
        {
            padding: 3px;
        }
        .contenedor-armeria 
        {
            position: fixed;
            bottom: 44px;
            width: 100%;
            background-image: url(../imagenes/fondos/wood4.jpg); 
            background-repeat: no-repeat;
            background-size: cover;
        }
        .contenedor_item_armeria
        {
            margin-top: -5px;
            border: 2px solid #444444;
            border-radius: 5px;
            transition: all .2s ease-in-out;
            cursor: pointer;
            height: 90px;
            line-height: 90px;
        }
        .contenedor_item_armeria:hover 
        {
            transform: scale(1.03);
        }

    /* ---CUBO--- */
        .cubo-botbar-posicion
        {
            position: fixed;
            bottom: 0px;
            left: 0px;
            width: 100%;
            padding-bottom: 44px;
        }
        .cubo-botbar-fondo 
        {
            background-image: url(../imagenes/fondos/wood4.jpg); 
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .contenedor_armeria_cubo
        {
            border-radius: 5px;
            transition: all .2s ease-in-out;
            cursor: pointer;
            height: 90px;
        }
        .contenedor_armeria_cubo:hover 
        {
            transform: scale(1.03);
        }
</style>

