/* #LOGIN APP */

    #mafensa_login_app {

        min-height: 100vh;

        display: flex;

        flex-direction: column;

        background-color: var(--gray_light);

    }

    #mafensa_login_app > article {

        background-color: var(--gray_light);

        user-select: none;

        flex: 1;

    }

    #mafensa_login_app > article form {

        display: inline-block;

        border: 1px solid var(--gray_border_elem);

        padding: 2em;

        border-radius: 4px;

        width: 25%;

        background-color: var(--white);

        box-shadow: 0px 12px 5px -7px var(--gray_border_elem);

    }

    #mafensa_login_app > article form h1 {

        color: var(--brown);

    } 

    #mafensa_login_app > article form .field {

        margin-bottom: 1.5em;

    }

    #mafensa_login_app > article form .field label, 

    #mafensa_login_app > article form .button ~ p a {

        color: var(--brown_2);

    }

    #mafensa_login_app > article form .button ~ p a {

        font-size: .8em;

    }

    #mafensa_login_app > article form .button {

        width: 100%;

    }

    #mafensa_login_app > article form img#logotipo_mafensa {

        width: 50%;

        margin: 0 auto;

        display: block;

        margin-bottom: 1.3em;

    }

/* ----- */

/* MENU */

    #menu_identificator {

        background-color: #4a4a4a;

        box-shadow: 0px 0px 5px var(--gray_border_elem);

        user-select: none;

        position: sticky;

        top: 0;

        z-index: 10!important;

        position: relative;

    } 

    #menu_identificator .navbar-brand .navbar-item {

        padding: .5em;

    }

    #menu_identificator .navbar-item .navbar-link {

        color: var(--white);

        cursor: pointer;

        height: 100%;

        padding: 0 .7em;

        transition: all .3s

    }

    #menu_identificator .navbar-item .navbar-link:hover {

        color: var(--white);

        background-color: var(--gray_default);

        color: #ffffff;

        background-color: #ff7733;

    }

    #menu_identificator .navbar-end .navbar-item {

        padding: 0;

        margin-right: .5em;

    }

    #menu_identificator #btn_out {

        background-color: var(--white);

        border: 1px solid var(--gray_border_btn);

        padding: 0.2em 0.8em;

        border-radius: 3px;

        cursor: pointer;

        color: var(--black);

        transition: all .2s;

    }

    #menu_identificator #btn_out:hover {

        border: 1px solid var(--orange);

        color: var(--orange);

    }

    #menu_identificator #avatar_user {

        display: flex;

        border-radius: 50%;

        width: 30px;

        height: 30px;

        font-size: 1.1em;

    }

    #menu_identificator #avatar_user span {

        margin: auto;

        margin-top: 4%;

        font-weight: 600;

        color: var(--white);

    }

/* ----- */

/* CATALOGO ARTICULOS */

    #depa_select,

    #provider_selected,

    #comprador_selected {

        text-transform: uppercase;

    }



    body::-webkit-scrollbar {

        display: none !important;

        overflow-y: hidden !important;

        overflow-x: hidden !important;

    }



    .is-grid-layout {

        height: 100vh !important;

        background-color: #fffaeb !important;

        display: grid;

        grid-template-areas: 'menu' 'titulo' 'filtros' 'contenido';

        grid-template-rows: 48px 40px 100px 1fr;

    }



    .is-grid-layout::-webkit-scrollbar {

        display: none !important;

    }



    #menu_vue_id ~ .b-table {

        height: 100% !important;

        grid-area: contenido !important;

        overflow-y: hidden !important;

        overflow-x: hidden !important;

        display: grid !important;			

        grid-template-areas: 'informacion' 'paginacion';

        grid-template-rows: auto 40px;

        /* La tabla ocupa todo el espacio de su contenedor */

    }



    #menu_vue_id ~ .b-table .table-wrapper {

        height: 100% !important;

        overflow-x: hidden;

        grid-area: informacion;

        background-color: white !important;

        border-bottom: solid 2px orange;

        /* La tabla ocupa todo el espacio de su contenedor */

    }



    .top {

        background-color: #fffaeb !important;

        height: 40px !important;

        grid-area: paginacion;

    }



    .is-menu {

        grid-area: menu;

    }



    .is-titulo {

        grid-area: titulo;

    }



    .is-filtros {

        grid-area: filtros;

    }



    .fondo {

        background: #D1913C !important;

        /* fallback for old browsers */

        background: -webkit-linear-gradient(to bottom, #FFD194, #D1913C) !important;

        /* Chrome 10-25, Safari 5.1-6 */

        background: linear-gradient(to bottom, #FFD194, #D1913C) !important;

        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    }



    .has-addons {

        align-items: end !important;

    }



    .is-prov-edit {

        font-size: 13px !important;

        font-weight: bold !important;

        background: #23d160 !important;

        color: white !important;

    }



    .is-prov-column {

        border-left-width: thin !important;

        border-left-style: solid !important;

        border-left-color: lightgrey !important;

    }



    .is-prov-column-yellow {

        border-left-width: medium !important;

        border-left-style: solid !important;

        border-left-color: lightgreen !important;

    }



    .is-prov-column-right-yellow {

        border-right-width: medium !important;

        border-right-style: solid !important;

        border-right-color: lightgreen !important;

    }



    .is-border-white {

        border: none !important;

        background: none !important;

        font-size: 1rem !important;

        padding-left: 1px;

        padding-right: 1px;

        padding-top: 0px;

        padding-bottom: 1px;

        height: min-content !important;

    }



    .table tr.is-selected .is-border-white {

        color: white;

    }



    .is-border-white:focus {

        color: white !important;

        border-bottom: 2px solid yellow !important;

        box-shadow: 0 0 0 0.125em rgba(255, 119, 51, 0.25) !important;

    }