:root {
    --color-theme-one: #0E3867;
    --color-theme-two: #F7F7F7;
    --color-theme-three: #E2274B;
    --color-theme-four: #ffffff;
    --color-secondary-one: #124F90;
    --color-secondary-two: #D0D1D2;
    --color-secondary-three: #000000;
    --color-gray: #beb7b7;
    --color-gray-text: #818181;
    --color-background: #ebebeb;
    --color-transparent: transparent;
    --color-success: #51A351;
    --color-error: #BD362F;
    --color-info: #2F96B4;
    --color-warning: #F89406;
    --color-status-Orange: #f8c440;
    --color-status-Green: #81CC3F;
    --color-status-Blue: #0798E5;
    --color-status-Red: #C62449;
}

/**************************************** GENERALES ***************************************************/

@font-face {
    font-family: 'icomoon';
    src: url('../Styles/fonts/fonts/icomoon.eot?mf9lo8');
    src: url('../Styles/fonts/icomoon.eot?mf9lo8#iefix') format('embedded-opentype'), url('../Styles/fonts/icomoon.ttf?mf9lo8') format('truetype'), url('../Styles/fonts/icomoon.woff?mf9lo8') format('woff'), url('../Styles/fonts/icomoon.svg?mf9lo8#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 1.5rem;
    margin-right: 0.2rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-admin:before {
    content: "\e900";
}

.icon-aereo:before {
    content: "\e901";
}

.icon-agregar:before {
    content: "\e902";
}

.icon-agregarFactura:before {
    content: "\e903";
}

.icon-arrendatario:before {
    content: "\e904";
}

.icon-autotransporte:before {
    content: "\e905";
}

.icon-buscar:before {
    content: "\e906";
}

.icon-cambiarEmpresa:before {
    content: "\e907";
}

.icon-cambiarPass:before {
    content: "\e908";
}

.icon-cancelarFactura:before {
    content: "\e909";
}

.icon-cartaPorte:before {
    content: "\e90a";
}

.icon-catalogo:before {
    content: "\e90b";
}

.icon-cerrarSesion:before {
    content: "\e90c";
}

.icon-clientes:before {
    content: "\e90d";
}

.icon-con_orden_de_traslado:before {
    content: "\e90e";
}

.icon-configuraciones:before {
    content: "\e90f";
}

.icon-consulta:before {
    content: "\e910";
}

.icon-correos:before {
    content: "\e911";
}

.icon-dashboard:before {
    content: "\e912";
}

.icon-datosFiscales:before {
    content: "\e913";
}

.icon-descarga:before {
    content: "\e914";
}

.icon-editar:before {
    content: "\e915";
}

.icon-eliminar:before {
    content: "\e916";
}

.icon-emisor:before {
    content: "\e917";
}

.icon-ferroviario:before {
    content: "\e918";
}

.icon-intermediario:before {
    content: "\e919";
}

.icon-maritimo:before {
    content: "\e91a";
}

.icon-mercancias:before {
    content: "\e91b";
}

.icon-notificacion:before {
    content: "\e91c";
}

.icon-notificado:before {
    content: "\e91d";
}

.icon-operador:before {
    content: "\e91e";
}

.icon-propietario:before {
    content: "\e91f";
}

.icon-refacturar:before {
    content: "\e920";
}

.icon-seguridad:before {
    content: "\e921";
}

.icon-solicitudtraslado:before {
    content: "\e922";
}

.icon-traductor:before {
    content: "\e923";
}

.icon-trasladoasistido:before {
    content: "\e924";
}

.icon-trasladopropio:before {
    content: "\e925";
}

.icon-ubicaciones:before {
    content: "\e926";
}

.icon-usuarios:before {
    content: "\e927";
}

/**************************** ESTILOS ICONOS ****************************/

.iconRed {
    color: var(--color-theme-three);
}

.iconBlue {
    color: var(--color-theme-one);
}

.iconGray {
    color: var(--color-gray);
}

.iconMargin {
    margin-right: 0;
}

.iconSmall {
    font-size: 1.1rem;
}

.iconBigTitle {
    font-size: 2.5rem !important;
}

.iconBigCards {
    font-size: 3.5rem;
}

.iconTitle {
    font-size: 2rem;
    margin-right: 0.5rem;
}

td.iconContentTable {
    display: flex;
    justify-content: center;
}

td.iconContentTable a {
    display: inline-block;
}

/**************************************** Globales ***************************************************/

* {
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: 300ms ease-in-out !important;
}

html, body {
    height: 100%;
    min-height: 100vh;
}

html, body {
    margin: 0;
    background-color: var(--color-theme-four) !important;
    /*overflow: hidden !important;*/
}

a {
    text-decoration: none !important;
}

.marginNone {
    margin: 0 !important;
}

.form-control:focus {
    border-color: var(--color-transparent) !important;
    box-shadow: 0 4px 7px rgb(0 0 0 / 20%);
}

.contentButtons {
    display: flex;
    width: 100%;
    justify-content: center;
}

.contentButtonsRight {
    display: flex;
    width: 100%;
    justify-content: end;
}

.btn-group {
    margin: 0 0.5rem;
}

.btn {
    font-size: 0.9rem;
    border-radius: 0.5rem;
}

.snfocus:focus {
    box-shadow: none !important;
}

.btnBlue {
    display: inline-block;
    background-color: var(--color-theme-one);
    color: var(--color-theme-four);
    margin: 0 0.5rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


    .btnBlue:hover {
        opacity: 0.9;
        color: var(--color-theme-four);
    }

.btnSNMargin {
    margin: 0 !important;
}


.btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.btn-check:focus + .btn, .btn:focus {
    outline: 0;
    box-shadow: 0 3px 5px 1px rgb(0 0 0 / 10%);
}

button.notifica {
    padding: .375rem 0;
    margin: 0 0.5rem;
}

    button.notifica > span > span.number {
        position: absolute;
        top: 0;
        padding: 0.1rem 0.3rem 0.1rem 0.3rem;
        border-radius: 50%;
        font-size: 0.5rem;
        font-weight: bold;
        text-align: center;
        background-color: var(--color-theme-three);
        color: var(--color-theme-four);
        color: var(--color-theme-four);
        right: -6px;
    }


/****************************EstilosTABLAS****************************/

.page-item.active .page-link {
    color: var(--color-theme-four) !important;
    background-color: var(--color-theme-one) !important;
    border-color: var(--color-theme-one) !important;
}

.page-link {
    color: var(--color-theme-one) !important;
}

/****************************LOGIN****************************/

.loginbackground {
    background: url('../images/Hapag-Background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    min-heIght: 100vh !important;
    overflow: auto;
}

.footer-items {
    z-index: 20;
    /*    padding: 0;
    margin: 0;*/
    color: var(--color-theme-one);
    /*font-size: 0.8rem;*/
    font-weight: 400;
}

.copyright-login {
    z-index: 20;
    padding: 0;
    margin: 0;
    color: var(--color-theme-one);
    font-size: 0.8rem;
    font-weight: 400;
}

.brand-wrapper {
    text-align: center;
}

    .brand-wrapper .logo {
        width: 80%;
    }

.login-section-wrapper {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding: 3rem;
    min-width: 300px !important;
    z-index: 20;
    background-color: var(--color-theme-four);
    box-shadow: -1px 0 8px rgb(0 0 0 / 40%);
    height: 100vh;
    transition: 300ms ease-in-out !important;
    justify-content: center;
}

    .login-section-wrapper > div {
        box-shadow: 0 5px 10px 0 rgb(0 0 0 / 10%);
        border-radius: 1rem;
        padding: 4rem 2rem;
        width: 100%;
        background-color: var(--color-theme-four);
    }

.login-wrapper {
    text-align: center;
    width: 100%;
    max-width: 100%;
    padding-top: 2rem;
}

    .login-wrapper a.forgot-password-link {
        color: var(--color-secondary-three);
        font-size: 14px;
        text-decoration: underline;
        display: inline-block;
        margin-bottom: 54px;
    }

.login-wrapper-footer-text {
    font-size: 16px;
    color: var(--color-secondary-three);
    margin-bottom: 0;
}

.login-title {
    text-align: center;
    font-size: 1rem;
    color: var(--color-theme-one);
    font-weight: 400;
    margin: 0 0 1rem 0;
}

.login-form > div {
    margin-bottom: 1rem;
}

.contentLog {
    display: block;
    position: relative;
}

    .contentLog > button {
        display: flex;
        position: absolute;
        align-items: center;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 0;
        padding: 0 0.2rem;
    }

.form-control {
    color: var(--color-gray-text) !important;
}

input.inputLogin {
    background-color: var(--color-theme-four);
    border-radius: 3px;
    box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
    padding: 0.3rem 2%;
    width: 100%;
    border: none;
    color: var(--color-gray-text);
}

.labelClass {
    width: 100%;
    text-align: left;
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
    color: var(--color-gray-text) !important;
}

.login-img {
    width: 100%;
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: left;
    object-position: left;
}

#footer-menu {
    position: fixed;
    z-index: 777;
    left: 0px;
    bottom: 0px;
    padding: 0.5rem;
    width: 100%;
    background-color: var(--color-background);
    font-weight: 600;
    text-align: right;
    right: 0;
    margin-top: 40px;
}

#footer {
    position: fixed;
    z-index: 777;
    left: 0px;
    bottom: 0px;
    padding: 1rem;
    width: 100%;
    background-color: var(--color-background);
    font-weight: 600;
    text-align: center;
    right: 0;
    margin-top: 40px;
}

.login-form {
    width: 100%;
}

.contentButtonSave {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-full-width {
    width: 100%;
}

.btnTransparent {
    color: var(--color-theme-one);
    border: none;
    font-weight: normal;
    font-size: 14px;
}

    .btnTransparent:hover {
        color: var(--color-theme-one);
        text-decoration: underline;
    }

    .btnTransparent:focus {
        box-shadow: none;
    }

.selectTranslate {
    text-align: center;
}

.toast-container .ngx-toastr {
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 500px
}

.title-container {
    margin-top: 20px;
}

.title-page {
    display: block;
    position: relative;
    width: 100%;
    font-size: 1.5rem;
    color: var(--color-theme-one) !important;
    font-weight: 600 !important;
    border-bottom: none;
    padding-bottom: 0;
    line-height: normal;
}

table {
    width: 100%;
}

#addButton {
    background-color: var(--color-theme-four);
    color: var(--color-theme-one);
    ;
}

#results {
    background-color: var(--color-secondary-one);
    padding: 15px
}

.spanresult {
    color: var(--color-theme-four);
    font-size: 20px;
}

#buttonTable {
    color: var(--color-theme-one);
    ;
}

.ekospinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    background-color: rgba(22, 22, 22, 0.2);
    z-index: 999999;
}

.list-group-item {
    list-style: none;
    font-size: 14px;
    background-color: var(--color-theme-four);
}

    .list-group-item input[type=checkbox] {
        height: 14px;
        width: 14px;
        vertical-align: middle;
    }

    .list-group-item div.child-list {
        margin-top: 10px;
    }

        .list-group-item div.child-list .list-group-item {
            background-color: var(--color-theme-four);
        }

.divNoResults {
    text-align: center;
    background-color: var(--color-background);
    color: var(--color-theme-one);
    ;
}

button.gral > span {
    display: block;
    line-height: normal;
}

button.notifica > span {
    position: relative;
    margin-right: 0;
}

button.buttonIdioma, button.iconTraslate {
    padding: 0 1rem !important;
    text-align: center;
}

    button.iconTraslate:hover {
        opacity: 0.5;
        text-decoration: none;
    }

/****************************HEADER****************************/

header {
    z-index: 888;
    background-color: var(--color-theme-two);
    position: fixed;
    width: 100%;
}

h1.titleHead {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-theme-one);
}

h2.titleHead {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-theme-one);
}

h3.titleHead {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-theme-one);
}

h4.titleHead {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-theme-one);
}

.menu-toggle > i {
    color: var(--color-theme-three);
    font-size: 1.2rem;
}

ul.UserDetail {
    float: right;
    position: relative;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

    ul.UserDetail li {
        list-style: none;
    }

        ul.UserDetail li .nav-link {
            display: flex;
            align-items: center;
            color: var(--color-theme-one);
            padding: 0.5rem 0;
        }


ul.dropdown-menu {
    transition: none !important;
    background-color: var(--color-theme-two);
    border: 0;
    box-shadow: 0 0 10px 5px rgb(0 0 0 / 10%);
}

.dropdown-item, .dropdown-item:focus, .dropdown-item:hover {
    display: flex;
    align-items: center;
    color: var(--color-theme-one);
    padding: 0.5rem 1rem;
}

    .dropdown-item > i {
        color: var(--color-theme-three);
        margin-right: 0.3rem;
        font-size: 1.1rem;
    }

/**************************¡HOME!*****************************/

.ekospinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(22, 22, 22, 0.2);
    z-index: 50;
}

    .ekospinner > img {
        top: calc(50% - 100px);
        left: calc(50% - 100px);
        position: absolute;
        z-index: 51;
        height: 100px;
        width: 100px;
    }

.spacer {
    flex: 1 1 auto;
}

h1.title {
    display: flex;
    position: relative;
    align-items: center;
    text-align: left;
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--color-theme-one);
    margin: 1rem 0;
}

h2.TitleInt {
    color: var(--color-theme-one);
    text-align: center;
    font-weight: 600;
}

.contentGral {
    box-shadow: 0 4px 7px rgb(0 0 0 / 20%);
    border-radius: 1rem;
    padding: 2rem;
    margin: 0.5rem auto 0 auto;
}

    .contentGral > h3 {
        color: var(--color-theme-one);
        text-align: center;
        font-weight: 400;
        margin: 0 0 2rem 0;
    }





ul.listCards {
    display: flex;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
}

ul.listCards>li {
    display: flex;
    position: relative;
    padding: 0 2%;
    text-align: center;
    list-style: none;
    width: 33.333333%;
    align-items: center;
    margin-bottom: 1rem;
}

        ul.listCards > li > a {
            display: inline-grid;
            position: relative;
            box-shadow: 0 4px 7px rgb(0 0 0 / 20%);
            border-radius: 1rem;
            padding: 2rem;
            width: 100%;
            text-align: center;
            min-height: 190px;
            align-items: center;
        }

            ul.listCards > li > a > h5 {
                font-weight: 600;
                color: var(--color-theme-one);
                margin: 0 !important;
            }

.logoeko {
    display: flex;
    position: relative;
    justify-content: flex-end;
    height: 100px;
}

    .logoeko > img {
        width: auto;
        height: auto;
    }

.logoDesktop {
    display: initial;
}

.logoResponsive {
    display: none;
}

.cf {
    text-transform: uppercase;
    font-size: 30px !important;
    font-weight: bold;
    color: #314c8f;
    text-align: left;
    vertical-align: middle;
    align-items: center;
    display: flex;
}

.buzone {
    grid-area: buzone;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

    .buzone md-icon {
        width: 150px;
        height: auto;
        margin: 0 32px !important;
    }

.title-expansion {
    font-size: 16px;
    color: var(--color-theme-one) !important;
    align-self: flex-end;
    font-weight: bold;
    margin-right: 30px;
}

.title-expansion-custom {
    font-size: 16px;
    color: var(--color-theme-one) !important;
    align-self: flex-end;
    font-weight: bold;
    margin-right: 30px;
    padding-left: 1em;
}

.legend-invoicing {
    font-size: 12px;
    color: var(--color-theme-one) !important;
    align-self: flex-end;
    font-weight: bold;
    margin-right: 30px;
}

img {
    height: 100%;
    width: 100%;
}

.img-hoverable {
    height: 100%;
    width: 100%;
    background-color: rgba(245, 243, 243, 0.671);
}

.img-hoverableDefault {
    height: 45%;
    width: 45%;
}

.hoverable {
    position: relative;
    display: block;
    cursor: pointer;
    height: auto;
    width: auto;
    border: 2px dashed var(--color-gray-text);
    text-align: center;
    max-width: 100%;
    max-height: 100%;
}

    .hoverable .hover-text {
        position: absolute;
        display: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .hoverable .background {
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.5);
        pointer-events: none;
        z-index: 1;
    }

    .hoverable:hover .hover-text {
        display: block;
    }

    .hoverable:hover .background {
        display: block;
    }

#fileInput {
    display: none;
}

.container-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btnDeleteImage {
    background-color: var(--color-theme-three);
    color: var(--color-theme-four);
}

.legend-xsmall {
    font-size: 0.6rem;
    color: var(--color-theme-one) !important;
    align-self: flex-end;
    font-weight: bold;
    margin: 0.5rem 0 !important;
    line-height: normal;
}

.legend-small {
    font-size: 0.8rem;
    color: var(--color-theme-one) !important;
    align-self: flex-end;
    font-weight: bold;
    margin: 0 0 0.5rem 0 !important;
}

.legend-medium {
    font-size: 0.9rem;
    color: var(--color-theme-one) !important;
    align-self: flex-end;
    font-weight: bold;
    margin: 0 0 1.5rem 0 !important;
}

.button-row {
    text-align: right;
    width: 100%;
}

.title {
    text-align: center;
}

.demo-section {
    padding: 2rem;
    border-bottom: 2px solid var(--color-theme-three);
}

.section-content {
    display: flex;
}

.picker-wrapper {
    flex: 0 0 250px;
}

.detail-wrapper {
    flex: auto;
}

#fileInputMail {
    display: none;
}

#headerpreview {
    max-height: 110px;
}

.titleWelcome {
    font-size: 30px;
    font-weight: 600;
}

.titleSelfInvoice {
    color: var(--color-secondary-three);
    font-size: 30px;
    font-weight: 600;
}

.messageSelfInvoice {
    color: var(--color-secondary-three);
    font-size: 15px;
    font-weight: 400;
}

.img-header {
    height: 100%;
    width: 100%;
    max-height: 90px;
    max-width: 190px;
    text-align: center;
}

#spanheader {
    min-height: 100%;
    display: inline-flex;
    align-items: center;
}

#previewIcon {
    font-size: 96px;
    width: 96px;
    height: 96px;
    line-height: 96px;
}

#previewButton {
    width: 100% !important;
    height: 100% !important;
}

/**************************¡Tablas/Table!*****************************/

.table-item-selected {
    background-color: var(--color-secondary-two);
}

.contentClients, .contentCatalog, .contentPerfil, .contentPortal {
    padding: 10px;
}

    .contentClients > .row, .contentCatalog > .row, .contentPerfil > .row, .contentPortal > .row {
        align-items: center;
    }

        .contentClients > .row > div.contentTitle, .contentCatalog > .row > div.contentTitle, .contentPerfil > .row > div.contentTitle, .contentPortal > .row > div.contentTitle {
            display: flex;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .contentClients > .row > div.selectC .contentCatalog > .row > div.selectC, .contentPerfil > .row > div.selectC, .contentPortal > .row > div.selectC {
            padding-top: 0;
            padding-bottom: 0;
        }

        .contentClients > .row > div:nth-child(2), .contentCatalog > .row > div:nth-child(2), .contentPerfil > .row > div:nth-child(2), .contentPortal > .row > div:nth-child(2) {
            text-align: right;
            padding-top: 0;
            padding-bottom: 0;
        }

.formField {
    width: 40%;
}

.buttonsAction {
    justify-content: flex-end;
}

.buttonAddContent {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.division {
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgb(53 76 103 / 20%);
    margin-bottom: 2rem;
}

.contentTable {
    display: block;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 1rem 0;
}

    .contentTable > table {
        margin-bottom: 1rem;
        max-width: 100%;
        width: 100%;
        border-collapse: collapse;
    }

#example_wrapper > div.row:nth-child(3) > div {
    width: 50%;
}

    #example_wrapper > div.row:nth-child(3) > div > div {
        width: 100%;
    }

.colActions {
    flex-wrap: nowrap;
}

span.iconMenu {
    display: inline-block;
    position: relative;
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: 35px;
    width: 35px;
    height: 35px;
    padding: 4px;
    margin-right: 5px;
}

    span.iconMenu.IconClients {
        background-image: url("../src/assets/img/icons/Clientes_blue.svg");
    }

    span.iconMenu.IconCatalogs {
        background-image: url("../src/assets/img/icons/Catalogos_blue.svg");
    }

    span.iconMenu.IconProfile {
        background-image: url("../src/assets/img/icons/PerfilClientes_blue.svg");
    }

    span.iconMenu.IconPortal {
        background-image: url("../src/assets/img/icons/Portal_blue.svg");
    }

    span.iconMenu.IconUsers {
        background-image: url("../src/assets/img/icons/Usuarios_blue.svg");
    }

/*------------------- INICIO ESTILOS FILTRO FECHA -------------------*/

.contentFilters {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: var(--color-theme-four);
    border-radius: 0.3rem;
    box-shadow: 0 3px 5px 1px rgb(0 0 0 / 10%);
    margin: 0 0 1rem 0;
}

.ClassFilter {
    color: var(--color-secondary-three);
    font-size: 0.9rem;
    background-color: transparent;
    border-color: transparent;
    border-radius: 0.5rem;
    box-shadow: 0 3px 5px 1px rgb(0 0 0 / 10%);
}

.btn-group > ul {
    padding: 1rem;
}

.dataTables_wrapper.dt-bootstrap5.no-footer > div.row {
    flex-wrap: nowrap;
    margin: 0 !important;
}

.btn.footer-items:focus {
    box-shadow: none;
}

.btn.footer-items:hover {
    background-color: rgb(0 0 0 / 4%);
    color: var(--color-theme-one);
}

/*------------------- MEDIAS ------------------ */


@media (max-width: 992px) {
    ul.listCards>li {
        min-height: 128px;
    }

    ul.listCards>li>a {
        padding: 1rem;
        min-height: auto;
        height: 100%;
    }

    ul.listCards>li>a>h5 {
        font-size: 1rem;
    }
}

@media (max-width: 991px) {
    .login-section-wrapper {
        display: table;
        padding: 3rem !important;
        width: 50%;
        z-index: 20;
        background-color: transparent;
        box-shadow: none;
        height: max-content;
        position: absolute;
        right: 0;
        left: 0;
        align-items: center;
        vertical-align: middle;
        margin: auto;
        top: 0;
        bottom: 0;
        justify-content: center;
    }

    .login-formBig {
        width: 100%;
    }

    .contentButtonSave {
        justify-content: end;
    }

    .division2 {
        padding-bottom: 1.5rem;
        border-bottom: 1px dashed rgb(53 76 103 / 20%);
        margin-bottom: 2rem;
    }

    #example_wrapper > div.row:nth-child(3) > div {
        text-align: center;
        margin-bottom: 1rem;
        justify-content: center;
        width: 100%;
    }

        #example_wrapper > div.row:nth-child(3) > div > div {
            width: 100%;
        }





    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: center !important;
    }

    .btnBuscar {
        margin: 1rem 0 0 0;
    }
}

@media (max-width: 800px) {
    .login-section-wrapper {
        width: 80%;
    }
}

@media (max-width:767px) {
    .col-center {
        border-top: 1px solid var(--color-background);
        padding: 1rem 0;
    }

    .logoDesktop {
        display: none;
    }

    .logoResponsive {
        display: initial;
    }

    .cabecera {
        margin-top: 0;
    }

    .logoeko {
        margin-bottom: 1rem;
        justify-content: center;
    }

    .cf {
        text-align: center;
        justify-content: center;
    }

    .col-center > span {
        padding: 0.5rem 0;
    }

    .division2, .division3 {
        padding-bottom: 1.5rem;
        border-bottom: 1px dashed rgb(53 76 103 / 20%);
        margin-bottom: 2rem;
    }

    .contentGral > h3 {
        margin: 0;
    }

    ul.listCards > li > a {
        min-height: initial;
        margin-bottom: 0 !important;
        margin-top: 2rem;
    }

        ul.listCards > li > a > h5 {
            margin-left: 1rem !important;
            text-align: left;
        }
}

@media screen and (max-width: 580px) {
    body {
        background-color: var(--color-theme-four) !important;
    }

    .cf {
        flex: 0 0 auto;
        width: 100%;
    }

    .logoeko {
        justify-content: center;
    }

    .login-wrapper {
        width: 100%;
    }

        .login-wrapper a.forgot-password-link {
            margin-bottom: 16px;
        }

    .loginbackground {
        background: none;
    }

    .login-section-wrapper {
        width: 100%;
        box-shadow: none;
        padding: 1.5rem !important;
    }

    .contentClients, .contentCatalog, .contentPerfil, .contentPortal {
        padding: 10px 10px 2rem 10px;
    }

    .formField {
        width: 100%;
    }

    .buttonsAction {
        justify-content: center;
    }

    .buttonAddContent {
        justify-content: center;
    }

    .login-form {
        max-width: 100%;
    }

    .login-formBig > .row > div {
        width: 100%;
    }

    .contentButtonSave {
        justify-content: center;
    }

    .legend-medium, .legend-small, .legend-xsmall {
        text-align: center;
    }


    ul.listCards {
        display: inline-block;
    }

    ul.listCards>li {
        display: inline-block;
        width: 100%;
    }

    ul.listCards>li>a {
        display: flex;
        align-items: center;
        padding: 1rem 2rem;
        margin-bottom: 2rem;
    }

    ul.listCards>li>a>img {
        max-width: 100px;
        background-color: var(--color-theme-two);
        ;
        padding: 2rem;
        border-radius: 1rem;
        margin-right: 1rem;
    }


    ul.listCards>li>a>h5 {
        text-align: left;
    }

    h1.title {
        display: inline-block;
        width: 100%;
        text-align: center;
        background-color: var(--color-theme-one);
        border-radius: 10px;
        padding: 1rem;
        color: var(--color-theme-four);
        margin: 1rem 0 2rem 0;
    }

        h1.title > span {
            display: table;
            margin: 0 auto;
            color: var(--color-theme-four);
            font-size: 3rem;
        }

    .contentGral {
        margin: 1rem auto 0 auto;
    }

    ul.listCards>li>a>h5 {
        margin-left: 1rem !important;
        text-align: left;
    }
}

@media screen and (max-width: 575px) {
    .contentClients > .row > div.contentTitle, .contentCatalog > .row > div.contentTitle, .contentPerfil > .row > div.contentTitle, .contentPortal > .row > div.contentTitle {
        display: block;
        padding-bottom: 1rem;
        margin-bottom: 0.75rem;
        background-color: rgba(98 122 151 / 10%);
        padding-top: 1rem;
        text-align: center;
        border-bottom: 3px solid rgba(98 122 151 / 10%);
    }

    .login-form, .login-formBig {
        min-width: 100%;
    }

    span.iconMenu {
        display: inline-block;
        position: relative;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 40px;
        width: 50px;
        height: 50px;
        padding: 1rem;
        margin-right: 0;
        background-color: var(--color-secondary-one);
        border-radius: 50%;
    }

        span.iconMenu.IconClients {
            background-image: url("../src/assets/img/icons/Clientes.svg");
        }

        span.iconMenu.IconCatalogs {
            background-image: url("../src/assets/img/icons/Catalogos.svg");
        }

        span.iconMenu.IconProfile {
            background-image: url("../src/assets/img/icons/PerfilClientes.svg");
        }

        span.iconMenu.IconPortal {
            background-image: url("../src/assets/img/icons/Portal.svg");
        }

        span.iconMenu.IconUsers {
            background-image: url("../src/assets/img/icons/Usuarios.svg");
        }
}

@media screen and (max-width: 480px) {
    app-clients {
        width: 100%;
    }

    .buttonsAction {
        display: block !important;
        flex-wrap: nowrap !important;
    }

        .buttonsAction > button {
            margin: 0 auto 1rem auto;
            display: table;
            width: 100%;
            margin-left: auto !important;
        }

    ul.listCards > li > a > img {
        max-width: 80px;
        padding: 1.5rem;
    }
}

@media screen and (max-width: 417px) {
    button.buttonIdioma {
        display: block !important;
        background: url("../src/assets/img/icons/traductor01_white.svg") no-repeat 5px 50%;
        padding: 0 0 0 40px !important;
        background-size: 30px;
    }

    button.User {
        padding: 0 0 0 0.5rem !important;
    }
}

@media screen and (max-width: 400px) {
    .contentClients > .row > div:nth-child(2), .contentCatalog > .row > div:nth-child(2), .contentPerfil > .row > div:nth-child(2), .contentPortal > .row > div:nth-child(2) {
        margin-top: 0;
        margin-bottom: 0;
    }

    ul.listCards > li > a > img {
        max-width: 70px;
        padding: 1rem;
    }
}

@media screen and (max-width: 360px) {
    .contentClients, .contentCatalog, .contentPerfil, .contentPortal {
        padding: 10px 10px 3rem 10px;
    }

    h1.title {
        font-size: 1.5rem;
        margin: 1rem 0;
    }

        h1.title > span {
            font-size: 2.5rem;
        }

    h2.TitleInt {
        font-size: 1rem;
    }

    .contentGral > h3 {
        font-size: 1rem;
    }

    ul.listCards > li > a {
        display: inline-block;
    }

        ul.listCards > li > a > h5 {
            text-align: center;
            margin-left: 0 !important;
        }

    .contentGral {
        margin: 1rem auto 3rem auto !important;
    }
}

.contentClients, .contentCatalog, .contentPerfil, .contentPortal {
    padding: 10px 10px 3rem 10px;
}

}

.fab-button {
    background-color: var(--color-theme-one);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: var(--color-theme-one);
    border: none;
    outline: none;
    color: #FFF;
    font-size: 16px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    transition: .3s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a.editor-create {
    display: inline-block;
    margin-bottom: 0.5em;
}

.nav-tabs .nav-link {
    color: var(--color-theme-one);
}

a {
    color: #0E3867;
    text-decoration: underline;
}


.modal-footer {
    padding: .75rem 0 !important;
}

.card-body {
    cursor: pointer;
    transform: scale(1.1);
    transition: 0.3s ease-in-out;
}