@media only screen and (max-width: 1600px) {
    html {
        font-size: 13px;
    }

    /* Clases comunes*/
    .box {
        background: #FFFFFF;
        border-radius: 1.25rem;
        color: #000000;
        font-weight: bold;
        font-size: 1.25rem;
        line-height: 1.5rem;
        box-shadow: 0rem 0.1875rem 0.625rem rgba(3, 9, 20, 0.05);
    }

    .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 0rem 0;
        border-radius: 0.25rem;
        right: 1em;
        position: absolute;
        font-size: 10pt;
    }

    .pagination>.active>a,
    .pagination>.active>span,
    .pagination>.active>a:hover,
    .pagination>.active>span:hover,
    .pagination>.active>a:focus,
    .pagination>.active>span:focus {
        z-index: 3;
        color: #fff;
        cursor: default;
        background-color: #ff6900;
        border-color: #ff6900;
    }

    .blue-bg {
        background: #3B81FF;
        color: #FFFFFF;
    }

    .orange-bg {
        background: #FF6900;
        color: #FFFFFF;
    }

    /* Textos */
    .text-fat {
        font-size: 1.75rem;
        font-weight: 800;
    }

    .text-show {
        font-size: 1.5625rem;
        font-weight: 600;
        line-height: 1.875rem;
    }

    .text-big {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.5rem;
    }

    .text-regular {
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.25rem;
    }

    .text-regular2 {
        font-size: 1.0625rem;
        font-weight: 600;
        line-height: 1.3125rem;
    }

    .text-gray {
        font-size: 0.875rem;
        font-weight: 500;
        color: #9597A1;
    }

    .text-label {
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1.25rem;
        text-transform: uppercase;
    }

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

    .blue {
        color: #3B81FF;
    }

    .orange {
        color: #FF6900;
    }

    .gray {
        color: #8F9BB3;
    }

    .btn {
        background: #FF6900;
        border-radius: 2.5rem;
        font-weight: 600;
        font-size: 0.875rem;
        line-height: 1.0625rem;
        color: white;
    }

    .center {
        display: block;
        margin-left: auto;
        margin-right: auto
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }

    .no-padding {
        padding: 0 !important;
    }

    .no-padding-left {
        padding-left: 0 !important;
    }

    .no-padding-right {
        padding-right: 0 !important;
    }

    .semibold {
        font-weight: 600 !important;
    }

    .bold {
        font-weight: 700 !important;
    }

    .bolder {
        font-weight: 800 !important;
    }

    /* Tabs en el header */
    .pill {
        background: #FFFFFF;
        /* width: 17.5625rem; */
        height: 7.75rem;
        font-weight: 500;
        box-shadow: 0rem 0.1875rem 0.625rem rgba(3, 9, 20, 0.05);
        border-radius: 1.25rem;
        display: flex;
        align-items: center;
        position: relative;
        padding: 2.0625rem;
        margin-right: 3.8125rem;
        float: left;
        cursor: pointer;
        font-size: 1rem;
    }


    .pill .pill-rayo {
         width: 3.5625rem;
         height: 3.5625rem;
         background-image: url('../img/pill-rayo.png');
         background-size: contain;
         background-repeat: no-repeat;
         margin-right: 1.5625rem;
     }

    .pill.active .pill-rayo {
        background-image: url('../img/pill-rayo-active.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .pill .pill-llama {
        width: 3.5625rem;
        height: 3.5625rem;
        background-image: url('../img/pill-llama.png');
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 1.5625rem;
    }

    .pill.active .pill-llama {
        background-image: url('../img/pill-llama-active.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .pill .pill-info {
        width: 1.0625rem;
        height: 1.0625rem;
        background-image: url('../img/pill-info.png');
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        top: 0.75rem;
        right: 1rem;
    }

    .pill.active .pill-info {
        background-image: url('../img/pill-info-active.png');
        background-size: cover;
        background-repeat: no-repeat;
    }

    .pill-subtitle {
        font-size: 0.8125rem;
    }

    .pill-subtext {
        color: #9597A1;
    }

    .pill.active {
        background: #FF6900;
        color: #FFFFFF;
        /* transition: all 0.5s linear; */
        /* Para poner animaciones hay que cambiar los iconos de info */
    }

    .pill.active .pill-subtext {
        color: #FFFFFF;
    }

    /*Bootstrap fixes*/

    .row-no-gutters {
        margin-right: 0;
        margin-left: 0;
    }

    .row-no-padding>[class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .col-center {
        float: none;
        margin: 0 auto;
    }

    .vcenter {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }

    /* Row y col para centrar contenido de columnas dentro de bootstrap */
    .row-vcenter {
        display: flex;
    }

    .col-vcenter {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .bootstrap-select .dropdown-toggle .caret {
        width: 0.4375rem;
        height: 0.875rem;
        border: none;
        position: initial !important;
        /* Perdón, fix de bootstrap */
        display: initial;
    }

    .bootstrap-select .dropdown-toggle .caret:before {
        content: url('../img/caret.png');
    }

    .bootstrap-select .dropdown-menu {
        border: none;
        padding: 0;
        border-radius: 0.9375rem;
    }

    .bootstrap-select .dropdown-menu>.active>a {
        background: linear-gradient(0deg, #FF6900 50%, rgba(255, 255, 255, 0) 239.47%);
    }

    .bootstrap-select .filter-option {
        font-weight: normal;
    }

    .borderless td,
    .borderless th {
        border: none !important;
    }

    /*Contenido*/
    body {
        background: #FFFFFF;
        font-family: "proxima-nova", "Arial";
    }

    .main-content {
        background: #F4F6FA;
        border-radius: 4.375rem 0rem 0rem 4.375rem;
    }

    .container-pad-left {
        padding-left: 3.75rem;
    }

    .container-pad-header {
        padding-left: 3.75rem;
        padding-right: 3.75rem;
    }

    .container-pad {
        padding: 1.875rem 3.75rem;
    }

    /*Menú*/
    .navigation .logo {
        margin-top: 4.4375rem;
    }

    .navigation .menu {
        margin-top: 7.1875rem;
    }

    .menu-item {
        display: block;
        clear: both;
    }

    .menu-item-container {
        width: 68%;
    }

    .menu-icon {
        width: 1.5rem;
        height: 1.5rem;
        background-size: contain;
        float: left;
        margin-right: 2rem;
        background-repeat: no-repeat;
        margin-bottom: 4.375rem;
        position: relative;
    }

    .menu-icon.cuenta {
        background-image: url('../img/logo-cuenta.png');
    }

    .menu-item.active .menu-icon.cuenta {
        background-image: url('../img/logo-cuenta-on.png');
    }

    .menu-icon.puntos {
        background-image: url('../img/logo-puntos.png');
    }

    .menu-item.active .menu-icon.puntos {
        background-image: url('../img/logo-puntos-on.png');
    }

    .menu-icon.docs {
        background-image: url('../img/logo-docs.png');
    }

    .menu-item.active .menu-icon.docs {
        background-image: url('../img/logo-docs-on.png');
    }

    .menu-icon.contratacion {
        background-image: url('../img/logo-contratacion.png');
    }

    .menu-item.active .menu-icon.contratacion {
        background-image: url('../img/logo-contratacion-on.png');
    }

    .menu-icon.contacto {
        background-image: url('../img/logo-contacto.png');
    }

    .menu-item.active .menu-icon.contacto {
        background-image: url('../img/logo-contacto-on.png');
    }

    .menu-icon.incidencias {
        background-image: url('../img/logo-incidencias.png');
    }

    .menu-item.active .menu-icon.incidencias {
        background-image: url('../img/logo-incidencias-on.png');
    }

    .menu-text {
        font-weight: 600;
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: #A6ACBE;
    }

    .menu-item.active {
        border-right: 0.125rem solid #FF7A00;
        border-radius: 0.0625rem;
    }

    .menu-item.active .menu-text {
        color: #FF6900;
    }

    .menu-item.notification .menu-icon::after {
        content: url('../img/noti-dot.png');
        position: absolute;
        top: 0;
        right: 0;
    }

    /*Header común*/

    .header {
        background: linear-gradient(180deg, rgba(251, 251, 251, 0.06) 0%, rgba(104, 104, 104, 0.06) 100%);
        /* min-height: 16.875rem; */
    }

    .header .row-1 {
        margin-top: 4.125rem;
    }

    .header .row-2 {
        margin-bottom: 1.9375rem;
    }

    .header .tab-slider-container {
        position: relative;
    }

    .header .tab-slider-controls {
        position: absolute;
        top: 0;
        z-index: 1;
        width: 100%;
        top: 30%;
    }

    .header .tab-slider-controls .slider-nav-img {
        width: 2.75rem;
        height: 2.75rem;
    }

    .header .tab-slider-controls .slider-nav {
        position: absolute;
    }

    .header .tab-slider-controls .slider-nav[aria-disabled="true"] {
        display: none;
    }

    .header .tab-slider-controls .prev {
        z-index: 1;
        left: -3%;
    }


    .header .tab-slider-controls .next {
        right: 0;
        z-index: 1;
        right: 0%;
    }

    .header .tab-slider .fade {
        opacity: 0.5;
    }

    .search-container .search {
        height: 2.9956rem;
        border-radius: 1.5rem;
        border: none;
        font-weight: 500;
        font-size: 1rem;
        line-height: 1.375rem;
        padding-left: 3.25rem;
    }

    .search-container .has-search {
        margin: 0;
    }

    .search-container .has-search .form-control-feedback {
        left: 1.4375rem;
        width: 1.4375rem;
        height: 1.4375rem;
        top: 0.75rem;
    }

    .user-info .user-avatar {
        width: 2.9375rem;
        height: 2.9375rem;
    }

    .header-right-container {
        /* width: 45%; */
        float: right;
    }

    .header-right .user-icons {
        width: 1.4375rem;
        height: 1.4375rem;
    }

    .header-right .user-info {
        margin-right: 3rem;
    }

    .user-info .user-name {
        font-weight: bold;
        font-size: 1rem;
        line-height: 1.1875rem;
        text-align: right;
    }

    .user-info .user-mail {
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 0.9375rem;
        text-align: right;
        color: #A6ACBE;
    }

    .user-info .user-avatar-container {
        margin-top: -0.25rem;
    }

    .user-info .notifications-container {
        position: relative;
    }

    .user-info .notifications {
        width: 100%;
        background: #fafafa;
        box-shadow: 0rem 0.1875rem 0.625rem rgba(3, 9, 20, 0.05);
        border-radius: 1.25rem 0rem 1.25rem 1.25rem;
        padding: 1rem 1.1875rem;
        display: grid;
        grid-row-gap: 0.6875rem;
        margin-top: 4%;
        position: absolute;
        z-index: 1;
        left: 25%
    }

    .archivos-presubida {
        height: 3.125rem;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 0.3125rem;
        background: #f4f6fa;
        padding: 0.3125rem;
    }


    .archivos-presubida::-webkit-scrollbar {
        width: 0.4375rem;
        height: 0.4375rem;
    }

    .archivos-presubida::-webkit-scrollbar-button {
        width: 0rem;
        height: 0rem;
    }

    .archivos-presubida::-webkit-scrollbar-thumb {
        background: #9e9e9e;
        border: 0rem none #ffffff;
        border-radius: 3.125rem;
    }

    .archivos-presubida::-webkit-scrollbar-thumb:hover {
        background: #9e9e9e;
    }

    .archivos-presubida::-webkit-scrollbar-thumb:active {
        background: #9c9c9c;
    }

    .archivos-presubida::-webkit-scrollbar-track {
        background: #ffffff;
        border: 0rem none #ffffff;
        border-radius: 3.125rem;
    }

    .archivos-presubida::-webkit-scrollbar-track:hover {
        background: #ffffff;
    }

    .archivos-presubida::-webkit-scrollbar-track:active {
        background: #ffffff;
    }

    .archivos-presubida::-webkit-scrollbar-corner {
        background: transparent;
    }

    .user-info .notification {
        height: 2rem;
        background: #FFFFFF;
        box-shadow: 0rem 0.4375rem 4rem rgba(0, 0, 0, 0.07);
        border-radius: 0.3125rem;
        margin-right: 0;
        margin-left: 0;
        padding: 0.3125rem 0.625rem;
    }

    .user-info .notification .icon-noti {
        width: 1.375rem;
    }

    .user-info .notification .icon-clock {
        width: 0.25rem;
    }

    .user-info .notification .noti-title {
        font-size: 0.5625rem;
        margin-bottom: 0.1875rem;
    }

    .user-info .notification .noti-time {
        font-size: 0.4375rem;
        margin-bottom: 0;
        line-height: 0rem;
    }

    .user-info .notifications .noti-bar {
        width: 4rem;
        height: 0.1875rem;
    }

    .user-info-container {
        margin-right: 0.8125rem;
        text-align: right;
    }

    .user-actions .notification-bell {
        margin-right: 1.5625rem;
    }


    .header .title-container {
        margin-top: 0;
        margin-bottom: 10%;
    }

    .header .title {
        font-weight: 700;
        font-size: 1.875rem;
        line-height: 2.3125rem;
        letter-spacing: 0.01em;
        margin: 0;
    }

    .header .subtitle {
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1.0625rem;
        letter-spacing: 0.01em;
        color: #A6ACBE;
        margin: 0;
    }

    /* Sección "Mi cuenta" */

    .account.grid-container {
        display: grid;
        grid-template-areas: "edit info help"
            ". info help";
        grid-column-gap: 5%;
        grid-auto-columns: 20% 50% 20%;
        grid-row-gap: 2%;
    }

    .account>div {
        padding: 1.25rem;
    }

    .account .edit {
        grid-area: edit;
        background: url('../img/edit-bg.png') #FFFFFF;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
        display: grid;
    }

    .account .edit .edit-back {
        left: 1.25rem;
        top: 1.8438rem;
        position: absolute;
    }

    .account .edit .edit-back img {
        width: 0.7188rem;
        height: 0.625rem;
    }

    .account .edit .edit-more {
        right: 1.25rem;
        top: 2rem;
        position: absolute;
    }

    .account .edit .edit-more img {
        width: 1.4375rem;
        height: 0.3125rem;
    }

    .account .edit .avatar {
        width: 7.0625rem;
        height: 7.0625rem;
        margin-top: 20%;
        margin-bottom: 1.25rem;
    }

    .account .edit .avatar img {
        width: 100%;
        /* height: 100%; */
    }

    .account .edit .btn {
        width: 9.75rem;
        margin-top: 1.4375rem;
    }

    .account .info-container {
        grid-area: info;
        max-height: 70vh;
        overflow-y: auto;
        display: grid;
        grid-row-gap: 16px;
        scrollbar-width: thin;
    }

    .account .info {
        padding-top: 2.0625rem;
    }

    .account .info:last-of-type {
        margin-bottom: 100px;
    }

    .account .help {
        grid-area: help;
    }

    .account .info .icon-medal {
        width: 4.8125rem;
        height: 4.8125rem;
    }

    .account .info .info-1 {
        margin-bottom: 1.4375rem;
    }

    .account .info .info-2 {
        display: grid;
        grid-row-gap: 1.0625rem;
    }

    .account .info .info-3 {
        display: grid;
        grid-row-gap: 0.75rem;
    }

    .account .help {
        display: grid;
        justify-content: center;
        text-align: center;
    }

    .account .help .help-banner {
        width: 95%;
    }

    .account .help .help1 {
        margin-top: 14%;
        margin-bottom: 10%;
    }

    .account .help .help2 {
        margin-bottom: 10%;
    }

    .account .help .help3 {
        margin-bottom: 25%;
    }

    .account .help .help3 {
        margin-bottom: 25%;
    }

    .account .help .help4 {
        margin-bottom: 14%;
    }

    /* Sección "Documentación" */

    .docs.grid-container {
        display: grid;
        grid-template-areas: "tabs content upload";
        grid-column-gap: 3%;
        grid-auto-columns: 20% 55% 20%;
        grid-template-rows: 70rem;
    }

    .docs>div {
        padding: 1.25rem;
    }

    .docs .tabs {
        grid-area: tabs;
    }

    .docs .tabs a span {
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .docs .tabs .folder-icon {
        width: 1.375rem;
        height: 1.1875rem;
        background-image: url('../img/icon-folder.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .docs .tabs .active .folder-icon {
        background-image: url('../img/icon-folder-on.png');
    }

    .docs .tabs .options-icon {
        width: 0.25rem;
        height: 1.125rem;
        background-image: url('../img/icon-options.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .docs .tabs .active .options-icon {
        background-image: url('../img/icon-options-on.png');
    }

    .docs .tabs .tab {
        height: 3.3125rem;
        background: #FFFFFF;
        box-shadow: 0rem 0.25rem 0.6875rem rgba(0, 0, 0, 0.15);
        border-radius: 1.25rem;
        color: #030914;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.9375rem 1.25rem;
    }

    .docs .tabs .active .tab {
        background: #FF6900;
        color: white;
    }

    .docs .tabs .nav {
        display: grid;
        grid-gap: 1.875rem;
    }

    .docs .content {
        grid-area: content;
    }

    .docs .content .search {
        height: 2.6875rem;
        box-shadow: 0rem 0.25rem 0.6875rem rgba(0, 0, 0, 0.15);
    }

    .docs .content .dropdown {
        border-radius: 0.9375rem;
        font-weight: 600;
        font-size: 1.25rem;
        line-height: 1.5rem;
        color: #FFFFFF;
    }

    .docs .content .dropdown-toggle {
        height: 2.6875rem;
        border: none;
        appearance: none;
        background: #FFFFFF;
        box-shadow: 0rem 0.25rem 0.6875rem rgba(0, 0, 0, 0.15);
        border-radius: 1.5rem;
        padding: 0.8125rem;
        padding-left: 1.5625rem;
    }

    .docs .content .dropdown-toggle:focus {
        outline: none !important;
    }

    .docs .content .btn {
        color: initial;
    }

    .docs .content .tab-content {
        margin-top: 2.75rem;
    }


    .docs .content .table {
        border-collapse: separate;
        border-spacing: 0 1.375rem;
    }

    .docs .content .table th {
        font-weight: normal;
        font-size: 0.75rem;
        line-height: 0.9375rem;
        color: #000000;
        mix-blend-mode: normal;
        opacity: 0.4;
    }

    .docs .content .table tbody tr {
        /* background: #FFFFFF; */
        box-shadow: 0rem 0.25rem 0.6875rem rgba(0, 0, 0, 0.15);
        border-radius: 1.25rem;
        height: 2.75rem;
        line-height: 1.125rem;
    }

    .docs .content .table tbody td {
        padding: 0.625rem;
        font-size: 1.1rem;
    }

    .docs .content .table .icon-check {
        width: 1rem;
        height: 1rem;
        margin-right: 0.3125rem;
        margin-left: 0.1875rem;
        margin-top: -0.25rem;
    }

    .docs .upload {
        grid-area: upload;
        /* display: grid; */
        /* grid-row-gap: 10%; */
    }

    .docs .upload input[type="file"] {
        display: none;
    }

    .docs .upload .file-upload {
        background: #FFFFFF;
        border: 0.125rem dashed #3B81FF;
        border-radius: 0.375rem;
        cursor: pointer;
        text-align: center;
        font-size: 0.9375rem;
        margin-top: -1.5rem;
        padding: 1em 1.5em;
        font-weight: normal;
    }

    .docs .upload .file-upload-text {
        margin-bottom: 0;
    }

    .docs .upload .file-upload .upload-plus {
        margin-top: 1.125rem;
    }

    .docs .upload .datepicker {
        padding: 0;
        margin: 0;
        border: none;
        border-bottom: 0.0625rem solid #A6ACBE;
        border-radius: 0;
        height: 1.5rem;
    }

    .docs .upload .datepicker::placeholder {
        font-weight: 600;
        font-size: 1rem;
        line-height: 0.9375rem;
        color: #A6ACBE;
    }

    .docs .upload .bootstrap-select {
        margin-top: 2.3125rem;
        box-shadow: none;
    }

    .docs .upload .bootstrap-select .dropdown-toggle {
        background: none;
        border: none;
        border-bottom: 0.0625rem solid #A6ACBE;
        border-radius: 0;
        padding: 0;
        height: 1.5rem;
        font-weight: 600;
        font-size: 1rem;
        line-height: 0.9375rem;
        color: #A6ACBE;
    }

    .docs .files-container .files-uploaded-text {
        font-weight: normal;
        font-size: 0.6875rem;
        line-height: 0.8125rem;
        color: #A6ACBE;
    }

    .docs .files-container .icon-dot {
        width: 0.25rem;
    }

    .docs .files-container .file-tag {
        background: #dedfe0;
        border-radius: 0.125rem;
        font-style: normal;
        font-weight: 500;
        font-size: 0.625rem;
        line-height: 0.375rem;
        padding: 0.125rem 0.25rem;
    }

    .docs .files-container .file-name {

        font-weight: 500;
        font-size: 0.75rem;
        line-height: 0.75rem;
    }


    /* Seguridad */
    .security.body-container {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .security-box {
        width: 30%;
        height: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .security-box input {
        width: 100%;
        height: 3rem;
        background: #FFFFFF;
        border: 0.0367rem solid #FFFFFF;
        box-sizing: border-box;
        box-shadow: 0rem 0.25rem 0.6875rem rgba(0, 0, 0, 0.15);
        border-radius: 1.25rem;
        padding: 0.9375rem 1.875rem;
    }

    .security-box .btn {
        width: 19.6875rem;
        height: 2.9375rem;
    }

    .security-box .login {
        display: grid;
        grid-row-gap: 2.8125rem;
    }

    .login .forgot-pw-text {
        margin-top: 0.625rem;
    }

    /* Contacto */

    .contact .add-buttons {
        width: 66%;
        display: flex;
        justify-content: space-between;
    }

    .contact .btn-add .add-icon {
        font-size: 1.625rem;
        font-weight: 200;
    }

    .contact .btn-add {
        font-size: 0.875rem;
        padding: 0.75rem 1.25rem;
    }

    .contact .btn-add span {
        vertical-align: middle;
    }

    .contact .search-container {
        height: 2.875rem;
        margin-top: 1.4375rem;
    }

    .contact .search-container input {
        position: absolute;
    }

    .contact .search-container .dropdown {
        width: 11.25rem !important;
        float: right;
        position: absolute;
        right: 0;
    }

    .contact .search-container .btn {
        width: 100%;
        height: 2.9956rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        background: white;
        color: #A6ACBE;
        border: none;
        border-left: 0.0625rem solid #EDEFF5;
        padding: 9% 22%;
    }

    .contact .chat-tabs {
        /* display: grid; */
        grid-row-gap: 1.875rem;
        overflow-y: auto;
        /* height: 37.5rem; */
        /* mask-image: linear-gradient(to bottom, black 70%, transparent 100%); */
        scrollbar-width: thin;
        /* margin-top: 2rem; */
        height: 43.5rem;
    }

    .contact .chat-tabs li a {
        /* height: 200px; */
        box-shadow: 0rem 0.1875rem 0.625rem rgba(3, 9, 20, 0.05);
        border-radius: 1.25rem;
        padding: 1.6875rem 2.5rem;
    }

    .contact .chat-tabs li.active a {
        color: #FFFFFF;
        background: #FF6900;
    }

    .contact .chat-tabs .chat-subject {
        font-weight: bold;
        font-size: 1.125rem;
        line-height: 1.375rem;
    }

    .contact .chat-tabs .chat-avatar {
        width: 3.375rem;
        height: 3.375rem;
    }

    .contact .chat-tabs .chat-active-dot {
        width: 0.625rem;
        height: 0.625rem;
        left: 0.187rem;
        top: 0.1875rem;
        position: absolute;
    }

    .contact .chat-tabs .chat-person,
    .contact .chat-tabs .chat-time {
        font-weight: 500;
        font-size: 1rem;
        line-height: 1.1875rem;
    }

    .contact .chat-tabs li.active a .chat-person,
    .contact .chat-tabs li.active a .chat-time {
        color: rgba(255, 255, 255, 0.57);
    }

    .contact .chat-tabs .chat-number {
        background: #FF6900;
        box-shadow: 0.25rem 0.25rem 0.9375rem rgba(198, 27, 74, 0.05), 0.125rem 0.125rem 0.625rem rgba(198, 27, 74, 0.1), 0.0625rem 0.0625rem 3.125rem rgba(198, 27, 74, 0.15);
        color: white;
        border-radius: 1.75rem;
        border-top-left-radius: 1.75rem;
        border-top-right-radius: 1.75rem;
        border-bottom-right-radius: 1.75rem;
        border-bottom-left-radius: 1.75rem;
        padding: 0rem;
        width: 1.25rem;
        height: 1.25rem;
        text-align: center;
        font-weight: 500;
        font-size: 0.8125rem;
        line-height: 1.25rem;
    }

    .contact .chat-tabs li.active .chat-number {
        background-color: white;
        color: #FF6900;
    }

    .contact .chat-tabs .tag {
        border-radius: 1.25rem;
        padding: 0.6875rem 1rem;
    }

    .contact .chat-tabs li.active .tag {
        background: white;
    }

    .contact .chat-tabs .file-tag {
        background: rgba(59, 129, 255, 0.25);
        color: #3B81FF;
    }

    .contact .chat-tabs .img-tag {
        background: rgba(255, 105, 0, 0.25);
        color: #FF6900;
    }

    .contact .chat-tabs .tag-icon {
        margin-top: -0.25rem;
        margin-right: 0.3125rem;
    }

    .contact .chat-tabs .icon-file {
        width: 0.8125rem;
        height: 1rem;
    }

    .contact .chat-tabs .icon-img {
        width: 0.9375rem;
        height: 0.9375rem;
    }

    .contact .chat-content .panel {
        background: #FFFFFF;
        box-shadow: 0rem 0.1875rem 0.625rem rgba(3, 9, 20, 0.05);
        border-radius: 1.25rem;
        border: none;
    }

    .contact .chat-content .chat-header {
        padding: 1.875rem 3.75rem;
        border-color: #E4E4E4;
    }

    .contact .chat-content .panel-body {
        padding: 1.875rem 3.75rem;
        display: grid;
        grid-row-gap: 1.125rem;
    }

    .contact .chat-content .chat-header .chat-avatar {
        width: 3.375rem;
        height: 3.375rem;
    }

    .contact .chat-content .chat-header .chat-person {
        font-weight: bold;
        font-size: 1.125rem;
        line-height: 1.375rem;
        margin-bottom: 0.375rem;
    }

    .contact .chat-content .chat-header .chat-status {
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.1875rem;
        color: #FF6900;
    }

    .contact .chat-content .chat-header .chat-header-icon {
        width: 3.25rem;
        height: 3.25rem;
        padding: 0.875rem;
        background: white;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0rem 0.3125rem 0.6875rem rgba(0, 0, 0, 0.07);
        margin-left: 1.25rem;
    }

    /* .contact .chat-body .msg {
} */

    .contact .chat-body .msg-avatar {
        width: 2.5625rem;
        height: 2.5625rem;
    }

    .contact .chat-body .msg .msg-content {
        border-radius: 0rem 0.625rem 0.625rem 0.625rem;
        padding: 0.875rem 1.375rem;
        font-weight: 500;
        font-size: 1rem;
        line-height: 1.625rem;
        display: grid;
    }

    .contact .chat-body .msg.ask .msg-content {
        background: #FF6900;
        color: #FFFFFF;
    }

    .contact .chat-body .msg.answer .msg-content {
        background: #FFFFFF;
        color: #3D4556;
        box-shadow: 0rem 0.3125rem 0.6875rem rgba(0, 0, 0, 0.07);
    }

    .contact .chat-body .msg-time {
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1.625rem;
        color: #A6ACBE;
        text-align: right;
        margin-top: 0.3125rem;
    }

    .contact .chat-body .msg-options {
        width: 1.5rem;
        height: 1.5rem;
    }

    .contact .chat-body .msg-double-check {
        width: 1rem;
        height: 1rem;
    }

    .contact .chat-body .chat-file-size {
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1.625rem;
        color: rgba(255, 255, 255, 0.7);
    }

    /* .contact .chat-body .msg-file {
    width: 24px;
    height: 24px;
} */

    .contact .chat-body .ask .msg-file {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 0.375rem;
    }

    .contact .chat-body .msg-file-answer {
        width: 1.5rem;
        height: 1.5rem;
    }

    .contact .chat-body .chat-timeline {
        clear: both;
    }

    .contact .chat-body .chat-timeline .line {
        border-bottom: 0.0625rem solid rgba(112, 124, 151, 0.15);
        height: 0.625rem;
    }

    .contact .chat-body .chat-timeline .line-text {
        font-weight: 500;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        color: #A6ACBE;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Nueva maquetación de chat */
    /* new_chat_template */
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~ */


    .contact .chat-body .msg {
        width: 90%;
    }

    .contact .chat-body .msg .msg-content {
        grid-area: content;
        font-weight: 500;
        font-size: 1rem;
        line-height: 1.625rem;
    }

    .contact .chat-body .msg-check-img {
        width: 1rem;
        height: 1rem;
    }

    .contact .chat-body .msg.incoming {
        display: grid;
        grid-template-areas: "avatar content options"". time .";
        /* grid-auto-columns: 41px 90% auto; */
        grid-column-gap: 2%;
        align-items: center;
        justify-self: left;
        justify-content: start;
    }

    .contact .chat-body .msg.incoming .msg-avatar {
        grid-area: avatar;
    }

    .contact .chat-body .msg.incoming .msg-content {
        background: #FF6900;
        color: #FFFFFF;
    }

    .contact .chat-body .msg .msg-options {
        grid-area: options;
    }

    .contact .chat-body .msg .msg-options-img {
        width: 1.5rem;
        height: 1.5rem;
    }

    .contact .chat-body .msg .msg-time {
        grid-area: time;
    }

    .contact .chat-body .msg.incoming .msg-avatar-img {
        width: 2.5625rem;
        height: 2.5625rem;
    }

    .contact .chat-body .msg.reply .msg-content {
        background: #FFFFFF;
        box-shadow: 0rem 0.3125rem 0.6875rem rgba(0, 0, 0, 0.07);
        font-weight: 500;
        font-size: 1rem;
        line-height: 1.625rem;
        color: #3D4556;
    }

    .contact .chat-body .msg.reply {
        display: grid;
        grid-template-areas: "options content check"". time .";
        /* grid-auto-columns: 41px 90% auto; */
        grid-column-gap: 2%;
        align-items: center;
        justify-self: right;
        justify-content: end;
    }

    .contact .chat-body .msg-file-img {
        width: 1.5rem;
        height: 1.5rem;
    }

    .contact .chat-body .incoming .msg-file-img {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 0.375rem;
    }


    .contact .chat-body .incoming .msg-file {
        display: grid;
        grid-template-columns: 4.125rem auto;
        align-items: center;
    }

    .contact .chat-body .incoming .msg-file-size {
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1.625rem;
        color: rgba(255, 255, 255, 0.7);
    }

    .contact .chat-body .chat-timeline {
        display: flex;
        align-items: center;
    }

    .contact .chat-body .chat-timeline hr {
        border-top: 0.0625rem solid #eaebef;
        width: 40%;
    }

    .contact .chat-body .chat-timeline span {
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1.625rem;
        color: #A6ACBE;
    }

    .contact .chat-body .msg.reply .msg-file {
        justify-self: right;
    }

    .contact .chat-footer {
        background: none;
        border-top: none;
        padding: 1.875rem 3.75rem;
    }

    .contact .chat-footer:before {
        content: "";
        height: 0.125rem;
        border-bottom: 0.0625rem solid #eaebef;
        border-radius: 0.125rem;
        position: relative;
        width: 100%;
        display: block;
        margin: 0 auto;
    }

    .contact .chat-footer-container {
        display: grid;
        align-items: center;
        grid-template-areas: "actions input emojis send";
        grid-auto-columns: 2.5rem auto 1.5rem 2.5rem;
        grid-column-gap: 1.875rem;
        margin-top: 1.125rem;
    }

    .contact .chat-footer .icon-orange {
        background: #FF6900;
        padding: 0.5rem;
        border-radius: 50%;
        width: 1.5rem;
        height: 1.5rem;
        box-sizing: content-box;
    }

    .contact .chat-footer .icon-white {
        background: white;
        padding: 0.5rem;
        border-radius: 50%;
        width: 1.5rem;
        height: 1.5rem;
        box-sizing: content-box;
        border: 0.0625rem solid #FF6900;
    }

    .contact .chat-footer .chat-actions {
        grid-area: actions;
    }

    .contact .chat-footer .chat-actions .dropup {
        background: none;
        border: none;
        padding: 0;
    }

    .contact .chat-footer .chat-actions .dropdown-menu {
        background: none;
        border: none;
        box-shadow: none;
        min-width: auto;
        margin-bottom: 0.875rem;
        padding-bottom: 0;
    }

    .contact .chat-footer .chat-actions .dropdown-menu li:not(:last-child) {
        margin-bottom: 0.625rem;
    }

    .contact .chat-footer .chat-actions .dropdown-menu li a {
        padding: 0;
    }

    .contact .chat-footer .chat-actions .dropdown-menu>li>a:hover,
    .dropdown-menu>li>a:focus {
        background: none;
    }

    .contact .chat-footer .chat-actions .dropdown-menu>li>a:hover img {
        box-shadow: 0.0625rem 0.0625rem 0.0625rem 0rem rgba(0, 0, 0, 0.75);
    }

    .contact .chat-footer .chat-input-container {
        grid-area: input;
    }

    .contact .chat-footer .chat-input {
        border: none;
        width: 100%;
        padding: 0.625rem 0.625rem;
    }

    .contact .chat-footer .chat-emojis {
        grid-area: emojis;
    }

    .contact .chat-footer .chat-emojis .icon-smile {
        width: 1.5rem;
        height: 1.5rem;
    }

    .contact .chat-footer .btn.send {
        grid-area: send;
        border-radius: 50%;
        padding: 0.625rem;
    }

    .contact .chat-footer .send .icon-send {
        width: 1.25rem;
        height: 1.25rem;
    }

    .dataTables_filter {
        display: none !important
    }


    .puntos.grid-container {
        display: grid;
        grid-template-areas:
            "luz consumo historico historico gasto"
            "luz consumo historico historico ahorro"
            "facturas facturas facturas help ahorro";
        grid-gap: 3.1875rem;
    }

    .puntos .luz {
        display: grid;
        grid-area: luz;
        padding: 1.5625rem;
        position: relative;
        grid-row-gap: 0.75rem;
    }

    .puntos .luz .icon-rayo {
        border-radius: 50%;
        padding: 1.1875rem;
        width: 5rem;
        height: 5rem;
        box-sizing: content-box;
        margin-right: 1.0625rem;
    }

    .puntos .luz .title {
        font-weight: 600;
        font-size: 2.1875rem;
        line-height: 2.6875rem;
        color: #030914;
        vertical-align: middle;
    }

    
    .puntos .luz .col-custom {
        width: 100%;
        float: none;
    }

    .puntos .options {
        width: 1.25rem;
        height: 1.25rem;
        float: right;
    }

    .puntos .luz .text-show {
        margin-bottom: 0rem;
    }

    .puntos .luz .icon-info {
        width: 1.0625rem;
        height: 1.0625rem;
    }

    .puntos .consumo {
        grid-area: consumo;
        padding: 1.5625rem 1.75rem;
        display: grid;
        grid-row-gap: 1rem;
    }

    .puntos .consumo .title {
        font-weight: bold;
        font-size: 1.25rem;
        line-height: 1.5rem;
        margin-bottom: 0;
    }

    .puntos .consumo .consumo-circle {
        background: #FFE1CC;
        border-radius: 50%;
        width: 10.5625rem;
        height: 10.5625rem;
        padding: 2.1875rem;
    }

    .puntos .consumo .consumo-circle span {
        font-weight: 500;
        font-size: 2.5rem;
        line-height: 3.0625rem;
        text-align: center;
        color: #FF6900;
    }

    .puntos .consumo .icon-dot-orange {
        width: 0.5625rem;
        height: 0.5625rem;
    }

    .puntos .consumo .text-legend {
        font-weight: normal;
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .puntos .historico {
        grid-area: historico;
        padding: 1.0625rem 0.9375rem;
    }

    .puntos .historico .title-container {
        text-align: center;
    }

    .puntos .gasto {
        grid-area: gasto;
        /* padding: 1.875rem 1rem; */
        display: grid;
        grid-row-gap: 0.75rem;
        padding: 1.875rem;
    }

    .puntos .gasto .graph-line-orange {
        width: 10.5rem;
        height: 1.75rem;
    }

    .puntos .gasto .number {
        font-weight: 500;
        font-size: 1.4375rem;
        line-height: 1.75rem;
    }

    .puntos .gasto .percentage {
        font-weight: normal;
        font-size: 0.75rem;
        line-height: 0.9375rem;
    }

    .puntos .ahorro {
        grid-area: ahorro;
        padding: 1.875rem 1.4375rem;
        display: grid;
        grid-template-rows: 6%;
    }

    .puntos .ahorro .col-align-center .percent-oval {
        position: absolute;
        width: 4.125rem;
    }

    .puntos .ahorro .col-align-center {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
    }


    .puntos .ahorro .progress-ring-container {
        font-weight: 600;
        font-size: 1.1875rem;
        text-align: center;
        color: white;
    }

    .puntos .ahorro .progress-ring-container input {
        background: none;
        border: none;
        width: 16%;
        line-height: initial;
    }

    .puntos .ahorro .progress-input-container {
        font-weight: 600;
        font-size: 1.1875rem;
        text-align: center;
        color: white;
        position: absolute;
        line-height: 1.4375rem;
    }

    .puntos .ahorro .progress-ring-container .progress-percent {
        position: absolute;
        left: 52%;
        color: white;
        line-height: 1.5rem;
    }

    .puntos .ahorro .progress-ring-full {
        transition: 0.35s stroke-dashoffset;
        transform: rotate(-45deg);
        transform-origin: 50% 50%;
        transform-box: fill-box;
        /*display: block;*/
    }

    .progress-ring {
        transition: 0.35s stroke-dashoffset;
        transform: rotate(-45deg);
        transform-origin: 50% 50%;
        transform-box: fill-box;
        /*display: block;*/
    }

    .puntos .facturas {
        grid-area: facturas;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .puntos .facturas .consulte-facturas {
        width: 16.875rem;
    }

    .puntos .facturas .subtitle {
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .puntos .facturas .btn {
        width: 9.1875rem;
        height: 2.6875rem;
        filter: drop-shadow(2px 2px 6px rgba(3, 9, 20, 0.1));
        font-weight: bold;
        font-size: 1rem;
        line-height: 1.1875rem;
        text-align: center;
        letter-spacing: 0.01em;
    }

    .puntos .help {
        grid-area: help;
        padding: 1.875rem;
        position: relative;
        display: grid;
        grid-row-gap: 5%;
    }

    .puntos .help .podemos-ayudarte {
        width: 12.625rem;
        height: 8.6875rem;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .puntos .help .title {
        font-weight: 800;
        font-size: 1.375rem;
        line-height: 1.25rem;
    }

    .puntos .help .subtitle {
        width: 55%;
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 0.9375rem;
    }

    .puntos .help .btn {
        width: 6.1875rem;
        font-weight: bold;
        font-size: 0.75rem;
        line-height: 1.25rem;
    }

    .incidencias .list-container {
        padding: 2.3125rem 2.1875rem;
    }

    .incidencias .title {
        display: flex;
        align-items: center;
    }

    .incidencias .icon-triangle {
        width: 4.875rem;
        height: 4.875rem;
    }

    .incidencias .table {
        border-collapse: separate;
        border-spacing: 0 1.375rem;
        /* height: 31.25rem; */
        /* display: block; */
        overflow-y: auto;
        scrollbar-width: thin;
    }


    .incidencias .table-container {
        width: 100%;
        height: 31.25rem;
        position: relative;
    }

    /* .incidencias .table-container.bottom-fade::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom,
                rgba(255, 255, 255, 0),
                rgba(255, 255, 255, 1) 90%);
        width: 100%;
        height: 6.25rem;
    } */

    .incidencias .table th {
        font-weight: 600;
        font-size: 0.75rem;
        line-height: 0.9375rem;
        color: #8F9BB3;
    }

    .incidencias .table tbody tr {
        box-shadow: 0rem 0.25rem 0.6875rem rgba(0, 0, 0, 0.15);
        border-radius: 1.25rem;
        height: 3.875rem;
        line-height: 1.125rem;
    }

    .incidencias .table tbody td {
        font-weight: 600;
        font-size: 0.8125rem;
        line-height: 1rem;
        color: #030914;
        vertical-align: middle;
    }

    .incidencias .table th,
    .incidencias .table td {
        padding-left: 1.3125rem;
    }

    .incidencias .table td:nth-child(4),
    .incidencias .table td:nth-child(5),
    .incidencias .table td:nth-child(10) {
        color: #FF6900;
    }

    .incidencias .btn {
        height: 2.875rem;
        padding: 0.9375rem 2.25rem;
        display: flex;
        align-items: center;
    }

    .incidencias .btn .icon-plus {
        width: 1.0625rem;
        height: 1.0625rem;
    }

    .contratos.grid-container {
        display: grid;
        grid-template-areas: "info luz address""descarga luz address";
        /* grid-auto-columns: 26.25rem 26.25rem 35.125rem; */
        grid-column-gap: 2.375rem;
        grid-row-gap: 2.6875rem;
        grid-auto-columns: 32% 32% 32%;
    }

    .contratos .info {
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        grid-area: info;
    }

    .contratos .info .info-left {
        text-align: center;
    }

    .contratos .info .avatar {
        width: 3.75rem;
        height: 3.75rem;
        margin-bottom: 1rem;
    }

    .contratos .info .text-big {
        margin-bottom: 0.375rem;
    }

    .contratos .info .info-left .text-regular {
        margin-bottom: 0.375rem;
        margin-top: 1.25rem;
    }

    .contratos .descarga {
        grid-area: descarga;
        padding: 2.4375rem 2.1875rem;
        height: 16.125rem;
        background: url('../img/descarga-contrato.png') #3B81FF;
        background-size: 14.8125rem;
        background-repeat: no-repeat;
        background-position: left bottom;
        position: relative;
    }

    .contratos .descarga .title {
        font-weight: 500;
        font-size: 1.75rem;
        line-height: 127.8%;
        width: 80%;
        display: block;
    }

    .contratos .descarga .icon-dl {
        width: 1.375rem;
        height: 1.375rem;
    }
    .contratos .luz {
        grid-area: luz;
        background-image: url('../img/bg-luz.png');
        background-repeat: no-repeat;
        background-position: right top;
        background-size: 13.1875rem;
        padding: 1.5625rem;
        display: grid;
    }

    .contratos .luz .icon-light {
        width: 4.8125rem;
        height: 4.8125rem;
    }

    .contratos .luz .title {
        font-weight: 600;
        font-size: 2.1875rem;
        line-height: 2.6875rem;
    }

    .contratos .luz table td:first-child {
        font-weight: bold;
        font-size: 0.625rem;
        line-height: 1.25rem;
        text-transform: uppercase;
        color: #8F9BB3;
        padding-right: 1.75rem;
    }

    .contratos .luz table tr td {
        padding-bottom: 0.875rem;
    }

    .contratos .luz table tr:not(:last-child) td:not(:first-child) {
        font-weight: 600;
        font-size: 1.375rem;
        line-height: 1.6875rem;
        color: #FF6900;
    }

    .contratos .luz table tr:not(:last-child) td:nth-child(2) {
        padding-right: 3.5625rem;
    }

    .contratos .luz table tr:last-child td {
        font-weight: bold;
        font-size: 0.625rem;
        line-height: 1.25rem;
        text-transform: uppercase;
        color: #8F9BB3;
    }

    .contratos .address {
        grid-area: address;
        /* background-image: url('../img/bg-address.png'); */
        background-size: 100%;
        background-position: bottom right;
        background-repeat: no-repeat;
        background-position-x: 5rem;
    }

    .contratos .address .titular {
        padding: 4.0625rem 0rem;
        display: flex;
        width: 100%;
        justify-content: center;
        box-shadow: 0rem 0.3125rem 0.8125rem rgba(218, 225, 237, 0.84);
    }

    .contratos .address .titular .icon-titular {
        width: 4.8125rem;
        height: 4.8125rem;
        margin-bottom: 0.625rem;
    }

    .row-custom {
        display: flex;
        align-items: center;
        flex-flow: row;
    }

    .contratos .address .col-custom-1 {
        padding-right: 2.1875rem;
    }

    .contratos .address .titular p {
        font-weight: 600;
        font-size: 0.9375rem;
        line-height: 1.6875rem;
        letter-spacing: 0.0187rem;
        margin: 0;
    }

    .contratos .other {
        padding: 2.875rem 5rem;
        display: grid;
        grid-row-gap: 3rem;
    }

    .contratos .other .icon {
        width: 2.875rem;
        height: 2.75rem;
    }

    .contratos .other p {
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1.4375rem;
        letter-spacing: 0.0187rem;
        margin: 0;
    }
}