/*@import url("fonts/fonts.css");*/

:root {
    /*TIPOGRAFÍAS*/
    --font-light: 'Montserrat light', sans-serif;
    --font-medium: 'Montserrat medium', sans-serif;
    --font-regular: 'Montserrat regular', sans-serif;
    /**********************************************************
                    COLORES
    *************************************/
    --color-corporativo-principal: rgb(217 0 0); /*Rojo*/ /*COLOR CORPORATIVO PRINCIPAL*/
    --color0: rgb(255 255 255); /*blanco*/
    --color1: rgb(0 0 0); /*negro*/
    --color2: rgb(42 39 38); /*gris oscuro*/
    --color3: rgb(142 142 142); /*gris medio*/
    --color4: rgb(241 245 201); /*verde claro*/
    --color5: rgb(248 248 248); /*gris claro*/
    --color6: rgb(126 137 0); /*verde oscuro*/
    --color7: rgb(255 236 208); /*rosa*/
    --color8: rgb(254 204 129); /*naranja*/
    --color9: rgb(164 112 23); /*marrón*/
    --color-danger: rgb(217 83 79); /*Rojo Apagado*/
    --danger-transparent: rgb(217 83 79 / 15%); /*Rojo Apagado 15%*/
    --border-color-danger: rgb(173 66 63);
    --color-info: rgb(0 106 175); /*Azul Apagado*/
    --bg-info: rgb(0 106 175 / 10%); /*Azul Apagado 5% */
    --border-info: rgb(0 71 117);
    --bg-edit: rgb(66 139 202);
    --border-edit: rgb(53 126 189);
    --color-edit: rgb(66 139 202);
    /*******************************/
    /*ESTADOS*/
    --color-available: rgb(4, 180, 95);
    --bg-available: rgba(4, 180, 95, 0.1);
    --border-available: rgb(11 136 72);
    --color-pendant: rgb(219, 169, 1);
    --bg-pendant: rgba(219, 169, 1, 0.1);
    --border-pendant: rgb(196 144 0);
    --color-change: rgb(195 76 210);
    --bg-change: rgba(126, 19, 139, 0.1);
    --border-change: rgb(136 19 139);
    --color-ignored: rgb(142 142 142);
    --bg-ignored: rgba(142, 142, 142, 0.6);
    --border-ignored: rgb(142 142 142);
    /*******************************/
    /*TIPOGRAFÍA*/
    --color-font: rgb(42 39 38);
    --color-title: rgb(0 0 0);
    --color-subtitle: rgb(0 0 0);
    --color-label: rgb(0 0 0);
    --color-input: rgb(42 39 38);
    /*******************************/
    /*ABUNDANTES*/
    --principal-color: var(--color1, rgb(0 0 0)); /*negro*/
    --secundary-color: var(--color-corporativo-principal); /*Rojo*/
    --border-warm: var(--color9, rgb(164 112 23));
    /*******************************/
    /*FORMULARIO*/
    --bg-light-form: rgb(0 0 0 / 3%); /*negro trasparente*/
    --bg-shadow-transparent: rgb(0 0 0 / 6%); /*negro trasparente que se suma a la transparencia anterior*/
    --border-cold: var(--color6, rgb(126 137 0));
    --details-color: var(--color56, #c6d71f);
    --bg-details-neutral: var(--color5, rgb(248 248 248));
    --font-contrast-bg-dark: var(--color0, rgb(255 255 255));
    /*******************************/
    /*PAGINACIÓN*/
    --bg-pagination: var(--color-corporativo-principal);
    --border-pagination: var(--color-corporativo-principal);
    /*******************************/
    /*BLOQUES*/
    --bg-date-bloq: rgb(10 42 10 / 11%); /*color transparente*/
    --bg-main-block: rgb(10 42 10 / 5%); /*color transparente*/
    --border-main-block: rgb(230 230 230); /**/
    /*******************************/
    /*MENU*/
    --bg-menu: rgb(248 248 248);
    --color-menu: rgb(119 119 119); /*gris*/
    --border-menu: var(--color-corporativo-principal); /*Rojo*/
    --bg-menu-hover: transparent;
    --color-menu-hover: var(--color-corporativo-principal); /*Rojo*/
    /*******************************/
    /*DECORACIÓN*/
    --shadow: rgb(142 142 142); /*gris medio*/
    --border-decoration: rgb(42 39 38); /*gris oscuro*/
    /*******************************/
    /*ICONOS*/
    --color-icon-info: rgb(0 106 175); /*azul apagado*/
    --color-icon-info-hover: rgb(9 29 139); /*azul intenso*/
    --bg-icon-user: rgb(142 142 142); /*gris medio*/
    --color-icon-user: rgb(255 255 255); /*blanco*/
    --color-icon-qr: rgb(255 255 255);
    --bg-icon-qr: rgb(142 142 142);
    --color-icon-qr-hover: rgb(0 0 0);
    --color-icon-message: rgb(185 161 0);
    --color-icon-message-hover: rgb(255 255 255);
    --color-icon-value: var(--color-available);
    --color-icon-value-hover: rgb(255 255 255);
    /*******************************/
    /*CATÁLOGO ALERTA*/
    --bg-catalogue-warning: var(--color7, rgb(255 236 208)); /*rosa*/
    --bg-inter-catalogue-warning: var(--color8, rgb(254 204 129)); /*naranja*/
    --color-inter-catalogue-warning: var(--color9, rgb(164 112 23)); /*marrón*/
    /*******************************/
    /*CATÁLOGO CORRECTO*/
    --bg-catalogue-success: var(--color4, rgb(241 245 201)); /*verde claro*/
    --bg-inter-catalogue-success: var(--color-corporativo-principal); /*verde*/
    --color-inter-catalogue-success: var(--color6, rgb(126 137 0)); /*verde oscuro*/
    /*******************************/
    /*TABLA*/
    --bg-table-header: rgb(142 142 142); /*gris*/
    --color-table-header: rgb(255 255 255); /*blanco*/
    --bg-table-alt: rgb(142 142 142 / 10%);
    --bg-table-hover: rgb(142 142 142 / 20%);
    --color-table: var(--color-font); /*gris oscuro*/
    --border-table: rgb(142 142 142); /*gris medio*/
    /*******************************/
    /*CHAT*/
    --bg-chat-gradient: var(--color-corporativo-principal);
    --bg-chat-send: rgb(217 0 0 / 70%);
    --color-chat-send: #000;
    --bg-chat-received: rgb(217 0 0 / 30%);
    --color-chat-received: #000;
    --color-chat-title: var(--color-corporativo-principal);
    --bg-chat-writer: rgb(217 0 0 / 20%); /*color corporativo principal al 40%*/
    --color-chat-writer: #000;
    /**********************************************************
                    TAMAÑOS
    *************************************/
    /*TAMAÑO RADIUS*/
    --radius-small: 4px;
    --radius-medium: 10px;
    --radius-big: 20px;
    /*TAMAÑO TIPOGRAFÍAS*/
    --tipo-smaller: 14px;
    --tipo-small: 16px;
    --tipo-medium: 18px;
    --tipo-big: 22px;
    --tipo-bigger: 24px;
    /*TAMAÑO ICONOS*/
    --size-icon-mobile: 25px;
    --size-icon-tablet: 30px;
    --size-icon-desktop: 35px;
}


/************************************************************** BODY */
body {
    font-family: 'Montserrat', sans serif;
    font-weight: 400;
    font-size: var(--tipo-small, 16px);
    line-height: var(--tipo-medium, 18px);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     font-family: 'Montserrat', sans serif;
}

a {
    color: var(--color1, rgb(0 0 0));
}

li a {
    color: var(--color1, rgb(0 0 0));
    background-color: var(--bg-menu, #f8f8f8);
}

    li a:hover {
        color: var(--color0, rgb(255 255 255));
    }

    .container, .body-content{
         padding: 0; /*Sería conveniente quitar este padding, para eso habría que quitar todas las .row*/
        max-width: 1250px;
    }

    .row{
        padding: 0;
    }

/*@media (min-width: 768px) {

    .container, .body-content {
        padding: 0 15px;*/ /*Sería conveniente quitar este padding, para eso habría que quitar todas las .row*/
        /*max-width: 1250px;
    }
    .row {
        padding: 0 -15px;
    }
}*/

/**************************************************************************** HEADER */
.container > .navbar-header, .container > .navbar-collapse {
    margin: 0;
}

.navbar-default {
    border-bottom: 4px solid var(--border-menu, rgb(142 142 142));
}

.navbar-collapse input {
    background-color: var(--bg-menu, #f8f8f8);
}

.navbar.navbar-default.navbar-fixed-top.navbar-expand-xl {
    background-color: var(--bg-menu, #f8f8f8);
    border-bottom: 4px solid var(--border-menu, rgb(142 142 142));
    min-height: 60px;
    max-height: 110px;
    padding-top: 5px;
}
/*Logo Usuario*/
div .navbar.navbar-default.navbar-fixed-top.navbar-expand-xl li > a {
    color: var(--color-menu, rgb(119 119 119));
    background-color: var(--bg-menu, #f8f8f8);
}
#logoutForm > ul > li:nth-child(1) > a {
    background-color: var(--bg-icon-user, rgb(142 142 142));
    color: var(--color-icon-user, rgb(255 255 255));
    border-radius: 50%;
    width: 27px;
    height: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*end*/
div.navbar.navbar-default.navbar-fixed-top.navbar-expand-xl li > a:hover {
    background-color: var(--bg-menu-hover, transparent) !important;
    color: var(--font-contrast-bg-dark, rgb(255 255 255));
    border-radius: 5px;
    transition: color .3s;
}

div.navbar.navbar-default.navbar-fixed-top.navbar-expand-xl .dropdown-menu {
    border-bottom: 4px solid var(--border-menu, rgb(142 142 142));
}

.dropdown-menu {
    background-color: var(--bg-menu, #f8f8f8);
}

.navbar-collapse.collapse, .navbar-collapse.collapsing, .navbar-collapse.in {
    background-color: var(--bg-menu, #f8f8f8);
}
/***********************************/
div.navbar.navbar-default.navbar-fixed-top.navbar-expand-xl > div > div.navbar-collapse.in > ul > li > a, div.navbar.navbar-default.navbar-fixed-top.navbar-expand-xl > div > div.navbar-collapse.collapsing > ul > li > a {
    font-size: var(--tipo-small, 16px);
    line-height: var(--tipo-medium);
}
div.navbar.navbar-default.navbar-fixed-top.navbar-expand-xl > div > div.navbar-collapse.in > ul > li.active > a, div.navbar.navbar-default.navbar-fixed-top.navbar-expand-xl > div > div.navbar-collapse.collapsing > ul > li.active > a {
    color: var(--details-color);
}
div.navbar.navbar-default.navbar-fixed-top.navbar-expand-xl > div > div.navbar-collapse.in > ul > li.dropdown.open > ul > li > a {
    background-color: var(--bg-menu, #f8f8f8);
    color: var(--font-contrast-bg-dark, rgb(255 255 255));
    border-left: solid 1px var(--font-contrast-bg-dark, rgb(255 255 255));
    margin-left: 15px;
    padding-left: 5px;
}
.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
    background-color: var(--bg-menu, #f8f8f8);
    color: var(--color-menu-hover);
    border-color: var(--border-menu, rgb(142 142 142));
}

div.navbar.navbar-default.navbar-fixed-top.navbar-expand-xl > div > div.navbar-collapse.in > ul > li.dropdown.open > ul {
    background-color: var(--bg-menu, #f8f8f8);
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
    border-top-color: var(--color-menu);
    border-bottom-color: var(--color-menu);
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: var(--bg-menu, #f8f8f8);
    color: var(--color-menu-hover);
}
.navbar-default .navbar-toggle:hover .icon-bar {
    color: var(--color-menu-hover);
}
.navbar-default .navbar-nav > li > a {
    max-width: initial !important; /*Revisar el Index y trasladar desde ahí todo el css para evitar nuevos conflictos y no tener que utilizar el Impotant*/
    align-items: baseline;
    line-height: inherit;
    font-size: 1.3rem;
    line-height: 2rem;
    margin-top: 5px;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{
    color: var(--color-menu-hover);
    background-color: var(--bg-menu-hover);
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: var(--secundary-color);
    background-color: transparent;
    font-weight: bold;
}

#logoutForm > ul {
    display: flex;
    padding: 8px 0;
}

/*Correcciones de iconos de la barra de menú*/
/*.glyphicon-flag:before {
    content: "Idioma";
}

.glyphicon-home:before {
    content: "Home";
}*/

.glyphicon-cog:before {
    content: "Herramientas";
    padding-left: 4px;
}

.glyphicon-euro:before {
    content: "Facturación";
}
/*.glyphicon-flag:before, .glyphicon-home:before,*/
.glyphicon-euro:before, .glyphicon-cog:before {
     font-family: 'Montserrat', sans serif;
    font-weight: 400;
    /*    line-height: 20px;
    padding-left: 3px;*/
}
div.navbar.navbar-default.navbar-fixed-top > div > div.navbar-collapse.collapse > ul > li.dropdown.open > ul > li > a > .glyphicon-cog:before {
    content: "\e019";
    font-family: 'Glyphicons Halflings';
}
.glyphicon-list:before, .glyphicon-star:before, .glyphicon-briefcase:before, .glyphicon-paperclip:before, .glyphicon-star-empty:before, .glyphicon-th-large:before, .glyphicon-download-alt:before, .glyphicon-qrcode:before, .glyphicon-envelope:before, .glyphicon-info-sign:before, .glyphicon-calendar:before, .glyphicon-dashboard:before, .fa-book-bookmark:before {
    display: none;
}

.nav .caret {
    border-top-color: var(--font-contrast-bg-dark, rgb(255 255 255));
    border-bottom-color: var(--font-contrast-bg-dark, rgb(255 255 255));
}
.navbar-collapse{
    max-height: 100vh;
}
.navbar-collapse.in{
    overflow-y: scroll;
}
.navbar-nav > li > .dropdown-menu {
    border-bottom: 4px solid var(--border-menu, rgb(142 142 142));
}
/****************************************************************** HOME */
.home__container{
    line-height: 1.5em;
}

.home__container > .btn-solid {
    margin: 20px auto;
}

    .home__container .alert.alert-warning {
        color: var(--color-danger, rgb(217 83 79));
        background-color: var(--danger-transparent);
    }
.home__container > div.row > div.col-md-9 > p > a {
    color: var(--secundary-color);
    font-weight: bold;
}
.home__container .btn {
    margin-top: 30px;
    background-color: var(--bg-button-clear);
    color: var(--color-button-clear);
    border-color: var(--border-button-clear);
    border-radius: var(--radius-big, 20px);
}

    .home__container .btn:hover {
        background-color: var(--bg-button-clear-hover);
        color: var(--color-button-clear-hover);
        border-color: var(--border-button-clear-hover);
        text-decoration: none;
    }

.well{
    background-color: var(--bg-shadow-transparent);
}

.home__container .red{
    color: var(--color-corporativo-principal);
}

body > div.container.body-content > div > div.row > div.col-md-3 > img{
    max-width: 450px;
}

@media (min-width: 768px) {
    .home__container > .btn-solid{
        float: right;
        margin: 0;
    }
}





/****************************** Botones */

/*.btn:hover {
    background-color: var(--bg-button-color);
    color: var(--color-button-color);
    border-color: var(--border-button-clear-hover);
}*/

/****************************************************************** Antiguo css */


.k-state-selected {
    background-color: var(--bg-menu-hover) !important;
}

a {
    color: #222222;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: var(--bg-pagination);
    border-color: var(--border-pagination);
}


/************************************************************ Expositores - Información de la Empresa - AgendaSettings */
#fieldR_Account_Categoria > div > div.line-hover{
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
}
/*#fieldR_Account_Categoria > div > div.line-hover > .col-xs-11 > label:not(list-label-child) {
    margin-left: 0 !important;
}*/ /*Solo funcionaría para corregir el márgen izq pero es necesario aplicar el márgen al conjunto*/
.container.body-content > div.bg {
    background-color: var(--bg-light-form);
    border-radius: var(--radius-medium, 10px);
    box-sizing: border-box;
    padding: 30px;
}

#fieldAccountExtension_Actividad .row, #fieldRAccountCategoria .row {
    display: flex;
    flex-direction: row-reverse;
}

body > div.container.body-content > div > form > div.well.well-sm > div > label > p:nth-child(2) > a{
    word-break: break-all;
}
/************************************************************** Modal Help*/
/*Los important son estrictamente necesarios para que aplique estos estilos y no los que se le asignan por defecto desde sweetAlert
*/
.swal2-container.swal2-center > .swal2-popup {
}

#swal2-title.swal2-title {
     font-family: 'Montserrat', sans serif;
}

.swal2-html-container {
     font-family: 'Montserrat', sans serif;
    font-weight: 200;
    font-size: var(--tipo-smaller) !important;
    line-height: var(--tipo-medium) !important;
}

.swal2-styled.swal2-confirm {
    font-size: var(--tipo-small, 16px) !important;
    line-height: var(--tipo-big) !important;
    /*font-weight: bold;*/
    padding: 6px 20px !important;
    height: fit-content !important;
    width: fit-content !important;
    border-radius: var(--radius-big, 20px) !important;
    border: solid var(--border-button-help-hover) 1px !important;
    background-color: var(--bg-button-help-hover) !important;
    color: var(--color-button-help-hover) !important;
}
    .swal2-styled.swal2-confirm:focus {
        box-shadow: 0 0 0 3px rgb(0 106 175 / 30%) !important;
    }
    .swal2-styled.swal2-confirm:hover {
        border-color: var(--border-button-help);
        background-color: var(--bg-button-help);
        color: var(--color-button-help);
    }





/******************************************************
	Correcciones a incorporar  en el genérico
******************************************************/

.navigation__table {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin: 50px auto 20px;
}

.btn {
    width: fit-content;
}



@media (max-width: 640px) {
    .container.body-content {
        width: 100%;
    }

    .container.body-content > div.bg{
        padding: 15px 15px 30px;
    }

    textarea.form-control{
        min-height: 150px;
    }
    .home__container {
        padding: 0 15px;
    }
    a.btn.btn-sm.btn-default.pull-right.tab-clear{
        width: 50%;
    }
}