body {
    height: 100vh !important;
}

.submenu-sticky {
    position: sticky;
    top: 0;
    background: #FFF;
    z-index: 1;
    box-shadow: 1px 0px 4px -2px rgba(0, 0, 0, 0.63);
    -webkit-box-shadow: 1px 0px 4px -2px rgba(0, 0, 0, 0.63);
    -moz-box-shadow: 1px 0px 4px -2px rgba(0, 0, 0, 0.63);
    padding: 10px;
    margin: 0px 20px;
}

.sombra-submenu-sticky {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    padding-bottom: 5px;
}


.scroll-moving {
    box-shadow: inset 0px 5px 5px -5px rgba(0, 0, 0, 0.3), inset 0px -5px 5px -5px rgba(0, 0, 0, 0.3);
    /* Ajusta los valores de la sombra según tus necesidades */
}

/* Clase para mostrar la sombra en la parte inferior cuando se llega al final */
.scroll-bottom {
    box-shadow: inset 0px -5px 5px -5px rgba(0, 0, 0, 0.3);
    /* Ajusta los valores de la sombra según tus necesidades */
}

/* Clase para mostrar la sombra en la parte superior cuando se llega arriba */
.scroll-top {
    box-shadow: inset 0px 5px 5px -5px rgba(0, 0, 0, 0.3);
    /* Ajusta los valores de la sombra según tus necesidades */
}


*[data-role='remove'] {
    cursor: pointer !important;
}

*[data-info] {
    position: relative;
}

.salida {
    color: var(--red) !important;
    /* width: fit-content; */
}

.entrada {
    color: #85bb65 !important;
    /* width: fit-content; */
}

.user-salida {
    color: rgb(3, 3, 3)  !important;
}

.user-entrada {
    color: rgb(125, 153, 83) !important;
}

*[data-info]:after,
*[data-info]:before {
    visibility: hidden;
    z-index: 1;
    opacity: 0;
}

*[data-info]:hover:after,
*[data-info]:hover:before {
    visibility: visible;
    opacity: 1;
}


*[data-info]:after {
    content: attr(data-info);
    width: fit-content;
    white-space: nowrap;
    padding: 7px 10px;
    background-color: #131313;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    /*top: -50px;*/
    top: calc(100% + 10px);
    z-index: 7;
    color: #fff;
    border-radius: 3px;
    transition: all ease-out 0.1s;
    transition-delay: 0.5s;
    font-size: 12px;
    font-weight: normal !important;
}

*[data-info]:before {
    content: '';
    border: solid 5px #131313;
    position: absolute;
    bottom: -18px;
    position: absolute;
    right: calc(50% - 5px);
    transform: translateX(50%);
    z-index: 10;
    transform: rotate(45deg);
    transition: all ease-out 0.1s;
    transition-delay: 0.5s;
}

*[chevron-down='true'].select-component.active .opciones {
    /*min-width: fit-content;*/
    width: 100%;
    right: unset;
}

div.check-in {
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}

div.check-in input[type="checkbox"] {
    margin-bottom: 0 !important;
}

/*input[type="checkbox"] {
    width: 17px;
    height: 17px;
}*/


*[chevron-down='true'].select-component .opciones .opciones2 > .option {
    /* padding-right: 30px !important;*/
}

*[chevron-down='true'].select-component {
    /* padding: 10.5px;*/
    border: 1px solid #ddd;
    border-radius: 3px;
}

.twitter-typeahead input {
    height: 30px;
}

*[chevron-down='true'].select-component .initial.iconob {
    background-image: unset;
    width: 10px;
    height: 13px;
    margin-right: 10px;
}

.poup-title {
    padding: 4px 15px;
    background: #14aaf5;
    color: #fff;
    font-size: 12px;
    width: max-content;
    border-radius: 4px;
    text-align: left;
    font-weight: bold;
    box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.1);
}

:root {
    --border-color: transparent transparent #000 transparent;
    --celeste: #41cbd8;
    --color-customization-background: #c7c4c4;
    --color-customization-background-deprecated: #c7c4c4;
    --color-customization-background-deprecated-opaque: #c7c4c4;
    --color-customization-background-hover: #bfbcbc;
    --color-customization-background-hover-deprecated: #bfbcbc;
    --color-customization-background-active: #b9b6b6;
    --color-customization-background-active-deprecated: #b9b6b6;
    --color-customization-background-weak: #424244;
    --color-customization-background-weak-deprecated-opaque: #424244;
    --color-customization-background-weak-deprecated: #424244;
    --color-customization-background-weak-hover: #464648;
    --color-customization-background-weak-hover-deprecated: #464648;
    --color-customization-foreground: #1e1f21;
    --color-customization-foreground-weak: #fff;
    --color-customization-foreground-weak-deprecated: #fff;
    --color-customization-red-background: #f06a6a;
    --color-customization-red-background-rgb: 240, 106, 106;
    --color-customization-red-background-hover: #eb6868;
    --color-customization-red-foreground: #1e1f21;
    --color-customization-red-foreground-hover: #1e1f21;
    --color-customization-red-text-deprecated: #f5f4f3;
    --color-customization-orange-background: #ec8d71;
    --color-customization-orange-background-rgb: 236, 141, 113;
    --color-customization-orange-background-hover: #e3886d;
    --color-customization-orange-foreground: #1e1f21;
    --color-customization-orange-foreground-hover: #1e1f21;
    --color-customization-orange-text-deprecated: #f5f4f3;
    --color-customization-yellow-orange-background: #f1bd6c;
    --color-customization-yellow-orange-background-rgb: 241, 189, 108;
    --color-customization-yellow-orange-background-hover: #e7b568;
    --color-customization-yellow-orange-foreground: #1e1f21;
    --color-customization-yellow-orange-foreground-hover: #1e1f21;
    --color-customization-yellow-orange-text-deprecated: #f5f4f3;
    --color-customization-yellow-background: #f8df72;
    --color-customization-yellow-background-rgb: 248, 223, 114;
    --color-customization-yellow-background-hover: #f2da6f;
    --color-customization-yellow-foreground: #1e1f21;
    --color-customization-yellow-foreground-hover: #1e1f21;
    --color-customization-yellow-text-deprecated: #f5f4f3;
    --color-customization-yellow-green-background: #aecf55;
    --color-customization-yellow-green-background-rgb: 174, 207, 85;
    --color-customization-yellow-green-background-hover: #a9c953;
    --color-customization-yellow-green-foreground: #1e1f21;
    --color-customization-yellow-green-foreground-hover: #1e1f21;
    --color-customization-yellow-green-text-deprecated: #f5f4f3;
    --color-customization-green-background: #5da283;
    --color-customization-green-background-rgb: 93, 162, 131;
    --color-customization-green-background-hover: #539b7e;
    --color-customization-green-foreground: #fff;
    --color-customization-green-foreground-hover: #fff;
    --color-customization-green-text-deprecated: #f5f4f3;
    --color-customization-blue-green-background: #4ecbc4;
    --color-customization-blue-green-background-rgb: 78, 203, 196;
    --color-customization-blue-green-background-hover: #4abeb7;
    --color-customization-blue-green-foreground: #1e1f21;
    --color-customization-blue-green-foreground-hover: #1e1f21;
    --color-customization-blue-green-text-deprecated: #f5f4f3;
    --color-customization-aqua-background: #9ee7e3;
    --color-customization-aqua-background-rgb: 158, 231, 227;
    --color-customization-aqua-background-hover: #99dfdb;
    --color-customization-aqua-foreground: #1e1f21;
    --color-customization-aqua-foreground-hover: #1e1f21;
    --color-customization-aqua-text-deprecated: #f5f4f3;
    --color-customization-blue-background: #4573d2;
    --color-customization-blue-background-rgb: 69, 115, 210;
    --color-customization-blue-background-hover: #526dc6;
    --color-customization-blue-foreground: #fff;
    --color-customization-white-foreground: #fff;
    --color-customization-blue-foreground-hover: #fff;
    --color-customization-blue-text-deprecated: #f5f4f3;
    --color-customization-indigo-background: #8d84e8;
    --color-customization-indigo-background-rgb: 141, 132, 232;
    --color-customization-indigo-background-hover: #867ddc;
    --color-customization-indigo-foreground: #fff;
    --color-customization-indigo-foreground-hover: #fff;
    --color-customization-indigo-text-deprecated: #f5f4f3;
    --color-customization-purple-background: #b36bd4;
    --color-customization-purple-background-rgb: 179, 107, 212;
    --color-customization-purple-background-hover: #ad67cc;
    --color-customization-purple-foreground: #fff;
    --color-customization-purple-foreground-hover: #fff;
    --color-customization-purple-text-deprecated: #f5f4f3;
    --color-customization-magenta-background: #f9aaef;
    --color-customization-magenta-background-rgb: 249, 170, 239;
    --color-customization-magenta-background-hover: #f1a5e8;
    --color-customization-magenta-foreground: #1e1f21;
    --color-customization-magenta-foreground-hover: #1e1f21;
    --color-customization-magenta-text-deprecated: #f5f4f3;
    --color-customization-hot-pink-background: #f26fb2;
    --color-customization-hot-pink-background-rgb: 242, 111, 178;
    --color-customization-hot-pink-background-hover: #e66aa9;
    --color-customization-hot-pink-foreground: #1e1f21;
    --color-customization-hot-pink-foreground-hover: #1e1f21;
    --color-customization-hot-pink-text-deprecated: #f5f4f3;
    --color-customization-pink-background: #fc979a;
    --color-customization-pink-background-rgb: 252, 151, 154;
    --color-customization-pink-background-hover: #f39294;
    --color-customization-pink-foreground: #1e1f21;
    --color-customization-pink-foreground-hover: #1e1f21;
    --color-customization-pink-text-deprecated: #f5f4f3;
    --color-customization-cool-gray-background: #6d6e6f;
    --color-customization-cool-gray-background-rgb: 109, 110, 111;
    --color-customization-cool-gray-background-hover: #656667;
    --color-customization-cool-gray-foreground: #fff;
    --color-customization-cool-gray-foreground-hover: #fff;
    --color-customization-cool-gray-text-deprecated: #f5f4f3;
}

* {
    font-family: 'poppins', 'sans-serif';
    box-sizing: border-box;
    position: relative;
    font-size: 12px;
}

.btn-lite {
    width: 30px;
    height: 30px;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 0 !important;
    align-items: center !important;
    font-weight: bold;
    border-radius: 3px;
}

.btn-upgrade2 {
    background-color: #ed4c67;
    color: #fff;
    font-weight: bold;
    border-radius: 25px;
    padding: 13px 20px;
    display: block;
}

.context {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 300px;
    min-height: 100px;
    background-color: #fff;
    border-radius: 3px;
    z-index: 1;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    visibility: hidden;
    transform: translateY(-20px);
    transition: all ease 0.2s;
}

.context.active {
    transform: translateY(0);
    visibility: visible;
}

.text-overflow {
    width: 100%;
    max-width: 150px;
    overflow: hidden !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.space-w {
    width: 10px;
}

input[type='search'] {
    border: none;
    outline: none;
    border: solid 1px #ddd;
    border-radius: 3px;
    padding: 3px;
    width: 300px;
}

.upgrade {
    padding: 10px 30px;
    background-color: var(--pink);
    color: #fff;
    border-radius: 20px;
    font-weight: 500;
}

.menu-desplegable > li.show .flecha {
    transform: rotate(180deg);
}

.menu-desplegable > li > div {
    padding: 15px;
}

.menu-desplegable > li > a {
    padding: 15px;
    width: 100%;
}

.menu-desplegable ul {
    background-color: #131313;
}

.menu-desplegable li ul {
    display: none;
}

.menu-desplegable li.show ul {
    display: block !important;
}

.menu-desplegable ul li > a {
    padding: 10px 15px;
    margin-left: 24px;
    display: inline-block;
    width: 100%;
}

.detalles > div {
    margin-bottom: 5px;
}

.detalles > div .label {
    color: gray;
    font-size: 12px !important;
}

.detalles > div .text {
    font-weight: 600;
    font-size: 13px;
}

.coverupload {
    width: 100%;
    width: 100%;
    padding-top: 100%;
    background-color: #f9f9f9;
    overflow: hidden;
    border-radius: 6px;
}

.coverupload input {
    display: none;
    border-radius: 4px;
}

.coverupload img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.coverupload label {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.coverupload label:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.coverupload label i {
    font-size: 80px !important;
}

tr > th > div {
    display: flex;
    align-items: center;
}

.group-tags {
    margin: 13px 0;
}

.min-alto {
    min-height: 80% !important;
}

.fule-min-alto {
    min-height: 72% !important;
}

.pd-b-8 {
    padding-bottom: 8px;
}

.tag-num {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 15px;
    width: 30px;
    height: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: #36b4e6;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    /*border-radius: 100%;*/
}

.moneda {
    height: 30px !important;
}

.ln-left {
    border-left: solid 1px rgba(250, 250, 250, 0.3);
}

.ln-right {
    border-left: solid 1px rgba(250, 250, 250, 0.3);
}

.head-container > h1 {
    font-size: 22px;
    border-bottom: 1px solid #eee;
}

.head-form {
    padding: 12px;
    background: #e8e8e463;
    border-bottom: 1px solid #d0c8c8;
}

.width-item {
    width: 100%;
    padding-bottom: 10px;
}

.width-item-50 {
    width: 50%;
    /*padding-bottom: 10px;*/
    /*background-color: rgba(250,250,250,.1);*/
}

.menu2 li a:hover {
    /*background: #b28ff5;*/
}

.d-flex {
    display: flex;
}

.d-none {
    display: none;
}

.d-block {
    display: inline-block;
}

.d-bloque {
    display: block;
}

.m-0 {
    margin: 0 !important;
}

.m-auto {
    margin: auto !important;
}

.m-left-auto {
    margin-left: auto;
}

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

.bo-0 {
    border: 0 !important;
}

.bo-8 {
    border: 8px !important;
}

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

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

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

.row-max {
    width: 100%;
}

.m-b {
    margin-bottom: 0 !important;
}

.m-r-0 {
    margin-right: 0 !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.nuevacuenta {
    display: none;
    padding: 10px 10px;
    margin: 5px 0;
    border: 1px solid #0000000d;
    border-radius: 2px;
    background: #ebebeb;
}

.nuevacuenta > input {
    background: #fff !important;
}

.br-in {
    border: solid 1px #cbd4db;
    border-radius: 3px;
}

.line-top {
    border-top: 1px solid #a59696;
}

.frame-input {
    width: 100%;
    padding: 7px 20px;
    border: solid #ddd 1px;
    border-radius: 3px;
}

.info-cont {
    /*padding: 3px 9px;
	background: #5a5454;
	border-radius: 50%;
	font-size: 13px;
	margin-left: 10px;*/
    padding: 7px 4px;
    background: #ffffff;
    color: #a21313;
    border-radius: 4px;
    font-size: 13px;
    margin-left: 10px;
}

.btn-file {
    border: 1px solid #d4cdcd;
    color: #5e478acc;
    padding: 4px;
    border-radius: 3px;
    background: #ffffff;
}

.btn-file:hover {
    cursor: pointer;
    background: #f3f0f0;
}

.name-card {
    font-size: 35px;
    min-height: 53px;
}

.hover-img {
    position: absolute;
    background: #ffffff00;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.hover-img:hover {
    background: #ffffff4a;
}

.hover-img:active {
    background: #ffffff5e;
}

.count {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #535056 !important;
}

.box-cola {
    padding: 6px 10px;
    background: #f1f1f126;
    border: 1px solid #ccc4c4;
    margin: 3px 0 6px 0;
}

.box-button {
    margin: 5px 0;
    display: flex;
    justify-content: flex-end;
}

.box-button > label {
    cursor: pointer;
    /*color: #fff;*/
}

.btn-basic {
    background: linear-gradient(to bottom, #fffaff 5%, #f0f0f0 100%);
    background-color: #fffaff;
    border-radius: 4px;
    border: 1px solid #dbd2db;
    display: inline-block;
    cursor: pointer;
    color: #666666;
    font-family: Arial;
    font-size: 13px;
    padding: 5px 13px;
    text-decoration: none;
    text-shadow: 0px 1px 50px #ffffff;
}

.btn-basic:hover {
    background: linear-gradient(to bottom, #f0f0f0 5%, #fffaff 100%);
    background-color: #f0f0f0;
}

.btn-basic:active {
    position: relative;
    top: 1px;
}

.composer-box {
    display: flex;
    border: 1px solid #b9a1ec5c;
    padding: 5px 10px 5px 20px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.item-cola {
    margin: 3px 0;
    display: flex !important;
    align-items: center;
}

.item-cola > label {
    padding: 3px 10px 3px 0;
    width: 215px;
}

.tags-item span {
    display: block;
}

.tags-item > span[data-role='remove'] {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 5px 0 0;
}

.line-left {
    border-left: solid 1px #ddd;
}

.card-suscripcion {
    padding: 5px;
    border-radius: 8px !important;
    width: 350px;
}

.card-suscripcion > .card-head {
    min-height: 160px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to left, #4358ba, #00c7df);
}

.btn-get {
    background: linear-gradient(to left, #4358ba, #00c7df);
    padding: 15px 20px;
    width: 200px;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    text-align: center;
    font-weight: 500;
    border: 0;
    outline: 0;
}

.card-suscripcion .card-cuerpo {
    font-size: 15px !important;
    color: gray;
    font-weight: 500;
}

.card-suscripcion .card-cuerpo strong {
    color: rgb(75, 75, 75) !important;
}

.card-suscripcion .card-cuerpo > div {
    margin-bottom: 20px;
}

.insignia {
    border: solid 2px gray;
    font-weight: 600;
    padding: 7px 7px;
    border-radius: 4px;
    font-size: 10px;
}

.insignia-pink {
    background-color: #ed4c67;
    color: #fff;
    border: none;
}

.card-ofertas {
    width: 270px;
    padding: 20px;
    border-radius: 4px;
    background-color: #fff;
    flex: initial !important;
    box-shadow: 0px 2px 4px rgb(31 30 47 / 10%);
    padding-bottom: 50px !important;
}

/* .card-suscripcion > .card-head::after{
    content: '';
    background-color: royalblue;
    height: 35px;
    width: 100%;
    position: absolute;
    bottom: -15px;
    left: 0;
    border-radius: 50%;
} */

.coverfoto-skeleton {
    width: 40px;
    height: 40px;
    background-color: #f9f9f9;
    border-radius: 100%;
}

.cover-skeleton {
    width: 40px;
    height: 40px;
    background-color: #f9f9f9;
    border-radius: 6px;
}

.text-skeleton {
    height: 14px;
    background-color: #f9f9f9;
    display: inline-block;
    width: 100%;
    max-width: 300px;
    border-radius: 7px;
}

.skeleton {
    animation: skeleton 0.7s linear infinite alternate;
}

@keyframes skeleton {
    0% {
        background-color: #f9f9f9;
    }
    100% {
        background-color: #ddd;
    }
}

.line {
    border-bottom: 1px solid #fff;
}

.change-password {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.input-password-change {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn-icon-eyec {
    border: #14aaf5;
    border-top-right-radius: 4px;
    background-color: #14aaf5;
    color: #fff !important;
    font-size: 20px !important;
    border-bottom-right-radius: 4px;
    padding: 5px 7px;
    top: 0 !important;
}

.btn-icon-eyec:hover {
    background-color: #1389c3;
    cursor: pointer;
}

.btn-title {
    position: absolute;
    right: 0;
    top: -3px;
    padding: 1px 11px;
    background: #36b4e6;
    cursor: pointer;
    color: #fff;
    border-radius: 3px;
}

.content-tracks {
    width: 100%;
    position: absolute;
    top: 51px;
    border-radius: 4px;
    z-index: 3;
    background: #fff;
    border: 1px solid #bfb7b7;
    -webkit-box-shadow: 3px 4px 14px -4px rgb(140 140 140);
    -moz-box-shadow: 3px 4px 14px -4px rgb(140 140 140);
    box-shadow: 3px 4px 14px -4px rgb(140 140 140);
}

.items-track {
    /*padding: 11px 10px;
	border-bottom: 1px solid #bfb7b7;*/
    border-bottom: 1px solid #c3c3c3;
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 61px;
}

.items-track:hover {
    background: #36b4e6;
    color: #fff;
    cursor: pointer;
}

.select2-container {
    width: 100% !important;
}

/* Customize the label (the container) */
.checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.copy {
    padding: 10px;
    border-radius: 3px;
    background-color: #f9f9f9;
    margin-bottom: 10px;
}

/* Create a custom checkbox */
.checkmark2 {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    /*background-color: #eee;*/
    border-radius: 6px;
    background-color: #fff;
    box-shadow: inset 0px 0px 4px #2196f3;
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark2 {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark2 {
    background-color: #5cb85c;
}

/* Create the checkmark2/indicator (hidden when not checked) */
.checkmark2:after {
    content: '';
    position: absolute;
    display: none;
}

/* Show the checkmark2 when checked */
.checkbox input:checked ~ .checkmark2:after {
    display: block;
}

/* Style the checkmark2/indicator */
.checkbox .checkmark2:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Customize the label (the container) */
.radio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 600 !important;
    color: #292929 !important;
    margin-bottom: 0 !important;
}

/* Hide the browser's default radio button */
.radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: -4px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio input:checked ~ .checkmark {
    background-color: #2196f3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: '';
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.fo {
    margin-right: 10px;
    font-size: 18px !important;
}

.c1 {
    color: #42ea0b;
}

.c2 {
    color: #ef0202;
}

.c3 {
    color: #63883b;
}

.c4 {
    color: #4951bb;
}

.c5 {
    color: #070e71;
}

.c6 {
    color: #906e92;
}

.c7 {
    color: #1ebb0a;
}

.items-track:hover > .hov {
    color: #fff;
}

.song-box {
}

.b1 {
    background: #42ea0b91;
}

.b2 {
    background: #ef02024f;
}

.b3 {
    background: #468a007a;
}

.b4 {
    background: #ffab0080;
}

.b5 {
    background: #070e7154;
}

.b6 {
    background: #906e9296;
}

.b7 {
    background: #1ebb0aab;
}

.update {
    color: #0a85d1;
    right: 19px;
    top: 12px;
    position: absolute;
}

.update-btn {
    color: #0a85d1;
    cursor: pointer;
    font-size: 19px !important;
}

.update-btn:hover {
    color: #5650bb;
}

.flip {
    transform: rotate(360deg);
    transition: all 0.5s;
}

.btn-edit {
    top: 32px;
    position: absolute;
    z-index: 3;
    font-size: 15px;
    right: 0;
    cursor: pointer;
}

.top-button-modal {
    position: absolute;
    right: 5px;
    top: 3px;
    width: 30px;
    height: 30px;
    font-size: 20px;
    color: #fff;
    z-index: 3;
    border-radius: 50%;
    text-align: center;
    background: #36b4e6;
    cursor: pointer;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type='number'] {
    -moz-appearance: textfield;
}

.switch {
    position: relative;
    display: inline-block;
    width: 41px;
    height: 18px;
}

.switch input {
    opacity: 0;
    display: none !important;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 25px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: '';
    height: 13px;
    width: 13px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 100%;
}

input:checked + .slider {
    background-color: #5cb85c !important;
}

input:focus + .slider {
    box-shadow: 0 0 1px #30687d;
}

input:checked + .slider:before {
    -webkit-transform: translateX(21px);
    -ms-transform: translateX(21px);
    transform: translateX(21px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 40px;
}

.slider.round:before {
    border-radius: 40px;
}

* {
    outline: none !important;
    outline-width: 0 !important;
}

.cuentanueva {
    padding: 5px 10px;
    background-color: rgb(246, 246, 247);
    margin: 5px 0px 10px;
    display: none;
    border: 1px solid rgb(221, 221, 221);
}

.barra-buscador {
    border: 1px solid #e8e8e8;
    display: flex;
    width: 100%;
    padding: 10px 10px 10px 0;
    /*border: solid #ddd 1px;*/
    border-radius: 25px;
    padding-left: 8px;
}

.barra-buscador input,
.barra-buscador select {
    padding: 0 !important;
    width: 100%;
    border: none !important;
    margin-left: 4px !important;
    box-shadow: none !important;
    outline: none !important;
    outline-width: 0 !important;
    font-size: 14px;
}

.img-icon-plus:after {
    content: '\e9b8';
    font-family: 'icomoon';
    color: #fff;
    font-size: 40px;
}

.bt-height {
    height: 29px;
}

.border-before-buscar {
    /*border: solid #ddd 1px;*/
}

.border-after-buscar {
    margin-top: -1px;
    border: 1.5px solid #36b4e6;
}

.pd-view-table {
    padding: 15px 30px 0 30px;
}

.mr-left-auto {
    margin-left: auto;
}

.mb-8 {
    margin-bottom: 10px;
}

.btn-into-select {
    padding: 0px 10px !important;
    font-size: 18px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

a.btn-into-select {
    display: flex;
    justify-content: center;
    align-items: center;
}

.select2-selection__arrow {
    height: 100% !important;
}

.pulse2 {
    animation-name: pulse2;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.btn-filter {
    background-color: #fff;
    border-radius: 6px;
    font-size: 16px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #017d94;
    cursor: pointer;
}

.desplegable.show .menu-contextual {
    display: block;
}

.login-button {
    width: 100%;
    padding: 10px;
    background-color: #113e55;
    color: #fff;
    border-radius: 25px;
    display: flex;
    font-weight: 400;
}

.menu-contextual {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    background-color: #000;
    border-radius: 8px;
    min-width: 200px;
    color: #fff;
    z-index: 2;
    overflow: hidden;
    display: none;
}

.menu-contextual li {
    padding: 13px 20px;
    font-weight: 500;
    vertical-align: middle;
    cursor: pointer;
    /*border-bottom: solid 1px #292929;*/
}

.menu-contextual li:hover {
    background-color: #292929;
}

.menu-contextual li .circle {
    margin-right: 10px;
    vertical-align: middle;
}

@keyframes pulsse2 {
    0% {
        /*opacity: 0.5;*/
        transform: scale(0.5);
    }

    100% {
        /*opacity: 0;*/
        transform: scale(2.75);
    }
}

#col {
    color: #fff;
    width: 0;
    margin: 0;
    padding: 0;
    height: 0;
}

.tags-item {
    /*display: inherit;*/

    margin-right: 2px;
    color: white;
    background-color: #36b4e6;
    padding: 0 5px;
    border-radius: 3px;
    display: inline-block;
    font-size: 13px;
    margin: 2px 2px;
}

.tags-item {
    text-align: center;
    padding-right: 20px;
}

.tags-item > span[data-role='remove']:after {
    content: 'x';
    font-weight: bold;
    padding: 0px 2px;
    margin-left: 8px;
    cursor: pointer;
    font-size: 18px;
}

.neo {
    background: #f9f9f9;
    border-radius: 25px;
    padding: 10px;
    box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.06), -6px -6px 10px -1px rgba(255, 255, 255, 0.9);
}

.recurso {
    background: #cad8ed;
    /*box-shadow: 3px 3px 5px -1px rgb(0 0 0 / 3%), -3px -3px 5px -1px rgb(0 0 0 / 3%);*/
    background-color: #f9f9f9;
    border-radius: 6px;
    padding: 20px;
    border: solid 1px #f9f9f9;
    /*min-height: 230px;*/
    white-space: nowrap;
}

img[data-original] {
    opacity: 0;
}

img {
    opacity: 1;
    transition: opacity 0.3s;
}

::first-letter {
    text-transform: uppercase;
}

::-webkit-scrollbar {
    background-color: transparent;
    /*background-color: rgba(239, 239, 239, 0.94);*/
    width: 10px !important;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    /* background-color: rgb(0 0 0 / 28%);*/
}

body {
    /*background-color: #F5F7FA;*/
    background-color: #f9f9f9;
}

h1,
h2,
h3,
h3 {
    margin-top: 0;
}

.grid {
    --minimumColumnWidth: 100px;
    grid-gap: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--minimumColumnWidth), 1fr));
}

.flotante .titulo {
    font-weight: 600;
    font-size: 14px;
    color: #8694a3 !important;
    margin-bottom: 10px;
    text-align: center;
}

.flotante {
    width: 100%;
    border-radius: 2px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);
    z-index: 1;
    display: none;
}

.label2 {
    font-size: 15px !important;
    font-weight: 500;
    margin-bottom: 5px;
    color: #273b47;
}

.campo {
    border-radius: 5px;
    /* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.04) !important; */
    border: solid 1px #ddd !important;
    background-color: #fff;
    line-height: 35px;
}

.campo > input[readonly] {
    border: 0 !important;
}

.campo input,
.campo select {
    border: 0 !important;
    outline: 0 !important;
    background-color: transparent;
    width: 100%;
    font-size: 14px;
    color: #131313;
    font-weight: normal;
    margin-bottom: 0 !important;
    line-height: 38px;
    padding: 0 10px !important;
    box-shadow: none !important;
}

.campo2 {
    border-radius: 3px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.04) !important;
    border: solid 1px #f0f0f0 !important;
    line-height: 35px;
}

.campo2 input,
.campo2 select {
    border: 0 !important;
    outline: 0 !important;
    background-color: transparent;
    width: 100%;
    font-size: 14px;
    color: #292929;
    font-weight: normal;
    margin-bottom: 0 !important;
    line-height: 38px;
    padding: 0 10px !important;
    box-shadow: none !important;
}

.campo2 input::placeholder {
    color: #ddd;
    font-size: 14px;
}

.steps > .step {
    cursor: pointer;
    width: fit-content;
}

.steps > .step > div {
    text-align: center !important;
}

.steps > .step .icono {
    display: inline-flex;
    width: 40px;
    height: 40px;
    background-color: gray;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    margin-right: 0;
    margin-bottom: 5px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

.steps > .step .text {
    font-weight: 600 !important;
    color: #afafaf;
}

.steps > .step .icono:after {
    content: '\ed6c';
    color: #fff;
    font-size: 20px;
    font-family: 'icomoon';
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.steps > .step .icono.proceso {
    background-color: #fff;
    border-radius: 100%;
    border: solid 13px orange;
    margin-right: 0;
    box-shadow: none !important;
}

.steps > .step .icono.completado {
    background-color: #5cb85c;
    border-radius: 100%;
    border: solid 13px #5cb85c;
    margin-right: 0;
    box-shadow: none !important;
}

.steps > .step .icono.proceso:after {
    content: '';
}

body,
html {
    font-size: 12px !important;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
    font-size: inherit;
}

i {
    font-size: inherit !important;
}

.underline {
    text-decoration: underline;
}

.no-margin {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

p {
    line-height: 1.5;
}

table {
    border-collapse: collapse;
}

input[readonly] {
    outline: none 1 !important;
    box-shadow: none !important;
}

input[readonly]:hover {
    cursor: no-drop;
}

textarea {
    resize: none !important;
    width: 100%;
}

.auto {
    width: auto !important;
}

.icono {
    font-size: 30px !important;
    margin-right: 20px;
}

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

.flex > div {
    flex: 1;
}

.form {
    background-color: #fff;
    width: 450px;
    border-radius: 3px;
    margin: 40px auto;
    min-height: 500px;
}

.aling-top {
    align-items: flex-start;
}

.bar-right {
    text-align: right;
}

.flex-column {
    display: flex;
    flex-flow: column nowrap !important;
    justify-content: space-between;
}

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

.flex-column > div {
    flex: 1;
}

.initial {
    flex: initial !important;
}

.block {
    display: block;
}

.hidden {
    overflow: hidden;
}

.scroll-y {
    overflow-y: auto;
}

.scroll-x {
    overflow-x: auto;
}

.sticky {
    position: sticky !important;
}

.main {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.ul-select {
    height: 37px;
    background: #fff;
    border-radius: 0 0 3px 3px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}

.ul-select ul:nth-child(1) {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    /*padding: 5px 10px;
    height: 37px;*/
}

.ul-select ul:nth-child(1) span,
.ul-select ul:nth-child(1) span .title-menu {
    height: inherit;
    cursor: pointer;
}

.ul-select ul:nth-child(1) .title-menu {
    display: flex;
    align-items: center;
    width: 100%;
    margin: unset;
    /* margin-left: 10px;*/

    font-weight: 500;
}

.ul-select ul:nth-child(1) .title-menu {
    padding-left: 10px;
}

.ul-select ul:nth-child(2) .title-menu {
    display: flex;
    align-items: center;
    width: 100%;
    margin: unset;
}

.initial-open.open .flecha {
    transform: rotate(180deg);
}

ul.ul-option li:hover {
    background: #017d94;
    color: #fff !important;
}

.ul-select ul.ul-option {
    display: none;
    border: 1px solid #ddd;
    position: absolute;
    z-index: 1;
    background: #fff;
    width: 100%;
    box-shadow: -1px 4px 7px 0px rgba(0, 0, 59, 0.1);
    top: 35px;
}

.ul-select ul.ul-option ul {
    overflow-y: scroll;
    max-height: 198px;
    border-top: 1px solid #ddd;
}

.ul-select ul:nth-child(2) li {
    padding: 5px 10px;
    border-right: 1px solid #ddd !important;
}

.ul-select ul:nth-child(2) input {
    margin: 5px;
    width: -webkit-fill-available;
    padding: 6px 10px;
}

.ul-select ul:nth-child(2) li > div {
    margin-right: 8px;
}

/*.ul-select ul.ul-option::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
}*/

#modal,
.modal {
    display: none;
    opacity: 0;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    padding: 10px;
    background-color: rgba(39, 50, 64, 0.6);
}

#modal > .caja,
.modal > .caja {
    /* display: flex; */
    width: fit-content;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 3px;
    padding: 10px;
}

#modal > .caja > div,
.modal > .caja > div {
    background-color: #fff;
    border-radius: 3px;
}

.contenedor-left {
    background-color: #fff;
    min-height: 400px;
    margin-right: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(21, 27, 38, 0.15);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1px;
}

.content > .list:nth-child(5n + 1) .siglas {
    background-color: #00cec9;
}

.content > .list:nth-child(5n + 2) .siglas {
    background-color: #f39c12;
}

.content > .list:nth-child(5n + 4) .siglas {
    background-color: #e74c3c;
}

.content > .list:nth-child(5n + 5) .siglas {
    background-color: #3498db;
}

.content > .list:nth-child(5n + 6) .siglas {
    background-color: #34495e;
}

.siglas {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: #ddd;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
}

.siglas img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
}

.aside-right {
    flex: initial;
    width: 350px !important;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(21, 27, 38, 0.15);
}

.elemento {
    background-color: #fff;
    border-radius: 18px;
    padding: 10px;
    margin-bottom: 10px;
}

.contentfile {
    padding: 20px;
    border-radius: 18px;
    background-color: #fff;
    max-height: 600px;
    overflow-y: auto;
}

.contentfile .elemento {
    border-radius: 0 !important;
    border-bottom: solid 1px #f8f8f8;
    margin-bottom: 0 !important;
}

.contentfile .elemento:nth-last-child(1) {
    border-bottom-color: transparent !important;
}

.bloque {
    background-color: #fff;
    width: 100%;
    min-height: 100px;
    border-radius: 5px;
    margin-bottom: 20px;
    /*border: solid 1px rgb(203, 210, 214);*/
    padding: 25px;
}

.bloque2 {
    background-color: #fff;
    width: 100%;
    min-height: 100px;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 20px;
}

.line-bottom {
    border-bottom: solid 1px #f8f8f8;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.recibe {
    height: 25px;
    padding: 0 3px;
    background-color: green;
    color: #fff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 3px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    font-size: 11px;
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    border-bottom-right-radius: 6px;
}

.info {
    color: #ddd;
    font-size: 16px !important;
    margin-left: 10px;
    cursor: pointer;
}

.article-h > .flex {
    flex-wrap: nowrap !important;
}

.article-h .info {
    color: #131313 !important;
}

.info:hover + .info-md {
    visibility: visible !important;
    opacity: 1;
}

.info-md {
    visibility: hidden;
    position: absolute;
    opacity: 0;
    right: 30px;
    top: -3px;
    width: 300px;
    border-radius: 5px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    z-index: 1;
    padding: 15px 20px;
    transition: all ease 0.3s;
}

.info-md li {
    margin-bottom: 10px;
    text-align: justify;
}

.info-md ul {
    list-style-type: disc;
    padding-left: 10px;
}

.atras {
    background-color: var(--primary);
    color: #fff;
    padding: 10px 20px;
    padding-left: 10px !important;
    border-radius: 20px;
    font-weight: 600px;
    font-size: 12px;
    display: none;
}

.bloque-titulo {
    font-weight: bold;
    font-size: 18px;
    color: #333333;
    margin-bottom: 20px;
}

.bloque2 {
    background-color: #fff;
}

.headbloque {
    font-weight: bold;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.headprimary {
    background-color: #36b4e6;
    color: #fff;
}

.monitor {
    background-color: #fff;
    padding: 8px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.label {
    color: gray;
    font-size: 12px;
}

.texto {
    font-size: 16px !important;
    min-height: 14px;
    margin-bottom: 10px;
}

.bold {
    font-weight: 700;
}

.bold-500 {
    font-weight: 500;
}

.uppercase {
    text-transform: uppercase;
}

.relative {
    position: relative;
}

.center {
    text-align: center;
}

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

/*FONDOS*/
.bg-gray {
    background-color: #f8f8f8;
    border: solid 1px #eee;
    border-radius: 4px;
}

.bg-blue {
    background-color: #e0f3ff;
    border: solid 1px #36b4e6;
    color: #343b4a;
    border-radius: 4px;
}

.bg-pink {
    background-color: #ff4757;
    color: #fff;
}

/*MARGENES Y ESPACIOS*/

.padding-m {
    padding: 20px;
}

.padding-l {
    padding: 10px;
}

.padding-b {
    padding: 70px;
}

.padding-v {
    padding: 17px 0;
}

.padding-v-m {
    padding: 7px 0;
}

.padding-h {
    padding: 0 20px;
}

.margin-top {
    margin-top: 10px;
}

.margin-bottom {
    margin-bottom: 10px;
}

.margin-right {
    margin-right: 10px !important;
}

.margin-v {
    margin: 20px 0;
}

.btn {
    padding: 6px 14px !important;
    font-weight: 500;
    border-radius: 5px !important;
    cursor: pointer;
    /* min-width: 100px; */
    vertical-align: middle;
}

/*.btn > span {
    font-size: 9px;
    font-weight: 600;
    padding: 0 4px;
    border-radius: 6px;
    vertical-align: middle;
    margin-right: 5px;
    background-color: #ffffff30;
}*/

.btn-circular {
    padding: 0 !important;
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 100% !important;
    cursor: pointer;
}

.btn-gray {
    background-color: #f9f9f9;
    color: #292929;
}

.btn-primary[data-follow='1'] {
    background-color: transparent !important;
    border: solid 1px var(--primary) !important;
    font-weight: 500;
    color: var(--primary);
}

.btn-primary[data-follow='1']:hover {
    background-color: transparent !important;
}

.btn-primary[data-follow='1']:before {
    content: 'Siguiendo';
}

.btn-primary[data-follow='0']:before {
    content: 'Seguir';
}

/*ALERTAS */

.alert-danger {
    background-color: #f8d7da;
    border: solid 1px #f5c6cb;
    padding: 10px;
    border-radius: 4px;
    color: #b94a48;
}

.alert-warning {
    background-color: #fff3cd;
    border: solid 1px #ffeeba;
    padding: 10px;
    border-radius: 4px;
    color: #856404;
}

.alert-success {
    background-color: #d4edda;
    border: solid 1px #c3e6cb;
    padding: 10px;
    border-radius: 6px;
    color: #155724;
}

.inputgroup input[type='email'],
textarea {
    outline: none;
    /*border-bottom: solid 1px #ddd;*/
    border: solid 1px #cbd4db;
    padding: 5px 10px;
    margin-bottom: 10px;
}

.listaflat {
    list-style: inside;
    margin-left: 20px;
}

.listaflat > li {
    margin-bottom: 10px;
}

/* BOTONES */

.btn > i {
    margin-right: 5px;
}

.btn-white {
    color: gray;
    background-color: #fff;
    display: inline-block;
    padding: 7px 15px;
    border-radius: 30px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    margin-left: 10px;
    transition: all ease 0.3s;
    cursor: pointer;
}

.btn-white:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-white-regular {
    padding: 3px 10px;
    font-size: 13px;
    background-color: #fff;
    border-radius: 4px;
    color: #4393b3;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-right: 5px;
    cursor: pointer;
}

.btn-white > i {
    font-weight: bold;
    color: #36b4e6;
    margin-right: 5px;
}

.btn-white-lite {
    background-color: #fff;
    padding: 5px 7px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all ease 0.3s;
    border-radius: 3px;
}

.btn-gray {
    background-image: linear-gradient(to top, #eee, #fff);
    border: solid 1px #eee;
    padding: 7px 20px;
    display: inline-block;
    text-align: center;
    font-weight: bold;
}

.btn-gray:active {
    background: #eee;
}

.btn-gray-lite {
    color: #191919;
    padding: 5px 7.5px;
    background-color: #f8f8f8;
    font-weight: bold;
    border-radius: 3px;
    /*border: solid 1px #ddd;*/
    cursor: pointer;
}

.btn-icon-lite {
    background-color: #f8f8f8;
    color: #191919;
    width: 30px;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    margin-bottom: 0;
    cursor: pointer;
}

.btn-green {
    background-color: #1bbc9b !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 4px 10px;
    font-size: 12px;
    text-align: center;
    display: inline-block;
    color: white;
    border-radius: 3px;
    transition: all ease 0.3s;
}

.btn-green:hover {
    cursor: pointer;
}

.btn-red {
    background-color: #ec1638 !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 4px 15px;
    font-size: 12px;
    text-align: center;
    display: inline-block;
    color: white;
    border-radius: 3px;
    transition: all ease 0.3s;
    cursor: pointer;
}

.btn-primary {
    background-color: #3c7d94 !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 6px 15px;
    font-size: 13px;
    text-align: center;
    display: inline-block;
    color: white;
    border-radius: 3px;
    transition: all ease 0.3s;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #1772a0 !important;
}

.btn-danguer {
    background-color: #e32929 !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 4px 15px;
    font-size: 13px;
    text-align: center;
    display: inline-block;
    color: white;
    border-radius: 3px;
    transition: all ease 0.3s;
    cursor: pointer;
}

.btn-lite-green {
    background-color: #1bbc9b !important;
    padding: 10px 30px;
    text-align: center;
    display: inline-block;
    color: white;
    border-radius: 50px;
    margin-right: 10px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    transition: all ease 0.3s;
}

.btn-lite-green:hover {
    background-color: #17a88b !important;
    cursor: pointer;
}

.btn-lite-blue {
    background-color: #428fe8 !important;
    padding: 10px 30px;
    text-align: center;
    display: inline-block;
    color: white;
    font-size: 20px;
    border-radius: 40px !important;
    margin-right: 10px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    transition: all ease 0.3s;
}

.cartera {
    padding: 5px !important;
    border-radius: 3px;
    background-color: orange;
    color: #fff;
    font-weight: bold;
    color: #fff !important;
}

.btn-facebook {
    background-color: #3b5998;
    color: #fff;
    padding: 13px 20px;
    border-radius: 4px;
    width: 250px;
    display: inline-block;
    text-align: left;
}

.btn-google {
    background-color: #fff;
    color: gray;
    padding: 8px 10px;
    border-radius: 4px;
    width: 250px;
    display: inline-block;
    text-align: left;
    border: solid 2px #ddd;
}

.card-miembro {
    padding: 30px 10px;
    border-radius: 5px;
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 150px;
    display: inline-block;
    margin-right: 10px;
    background: linear-gradient(to top, #f9f9f9, transparent);
}

.card-miembro-black {
    color: #fff !important;
    background: rgb(22, 22, 22) !important;
}

.btn-scroll {
    cursor: pointer;
}

.btn-scroll > i {
    font-size: 30px !important;
    color: #ddd;
}

.card-miembro .seguir {
    padding: 7px 20px;
    border: solid 1.5px #ddd;
    color: gray;
    font-weight: 600;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    transition: all ease 0.3s;
}

.card-miembro .seguir:hover {
    background-color: #0176fe;
    color: #fff;
    border-color: #0176fe;
}

#loadingweb {
    display: none;
    z-index: 9000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(250, 250, 250, .4); */
    justify-content: center;
    align-items: center;
}

#loadingnew,
.loadingnew {
    background-color: #fff;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.2);
    width: 66px;
    height: 66px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    vertical-align: middle;
    border-radius: 100%;
}

#loadingnew::after,
.loadingnew::after {
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: block;
    border: solid #e6e6e6 7px;
    border-top: 7px solid #0176fe;
    margin: 0 !important;
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    background-color: #fff;
}

#loading,
.loading {
    padding: 10px;
    background-color: transparent;
    width: 30px;
    height: 30px;
    display: inline-block;
    opacity: 0;
    vertical-align: middle;
    border: solid #e6e6e6 5px;
    border-top: 5px solid #0176fe;
    border-radius: 100%;
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    margin-right: 10px;
}

#loading2 {
    padding: 10px;
    background-color: transparent;
    width: 50px;
    height: 50px;
    display: inline-block;
    opacity: 1;
    vertical-align: middle;
    border: solid #e6e6e6 5px;
    border-top: 5px solid #0176fe;
    border-radius: 100%;
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    margin-right: 10px;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* TEXTOS Y TITULOS */
.text-green {
    color: #1bbc9b;
}

.text-primary {
    color: #0a85d1;
}

.text-orange {
    color: var(--orange);
}

.bg-primary-ini {
    background-color: #0a85d1 !important;
}

.text-pink {
    color: #ff2dab;
}

.darken {
    color: #757575;
}

.leggend {
    color: rgba(0, 0, 0, 0.2);
}

.lt-text {
    font-size: 12px !important;
}

.text-neutral {
    color: #627d98;
}

.cover {
    background: #eee url('../img/vectores/img.svg') center center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    border-radius: 6px !important;
    overflow: hidden;
}

.cover > img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.cover2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    border-radius: 4px;
    overflow: hidden;
}

.cover2 > img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.cover:after {
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.tope:after {
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /*cursor: no-drop;*/
}

.tope:after:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.groupinfo div:empty:after {
    /*content: '-';*/
    color: #292929;
    display: block;
}

/*DISENO DE LA PLATAFORMA*/
.nav {
    background-color: #000;
    color: white;
}

.search {
    padding: 0 20px;
}

.search input {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 5px 20px;
    border-radius: 3px;
    background-color: rgba(250, 250, 250, 0.1);
    color: white;
}

.search input::placeholder {
    color: rgba(250, 250, 250, 0.9);
    font-size: 13px;
    font-weight: lighter;
}

.formbusqueda {
    width: 400px;
}

.formbusqueda > .caja {
    background-color: #fff;
    border-radius: 30px;
    overflow: hidden;
    padding: 5px 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.formbusqueda input {
    width: 100%;
    border: none;
    padding: 5px 0;
    outline: none;
}

.getresultados {
    display: none;
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    height: 200px;
    background-color: #fff;
    z-index: 3;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.getresultados:hover {
    display: block !important;
}

#resultados {
    display: none;
    width: 100%;
    min-height: 300px;
    position: absolute;
    left: 0;
    top: 50px;
    background-color: #fff;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #242932;
    padding-bottom: 40px;
}

#resultados:hover {
    display: block;
}

#resultados #get > a {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.search input:focus + #resultados {
    display: block;
}

#resultados .article {
    color: #292929;
}

#resultados .article > .cover {
    width: 60px;
    height: 60px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#resultados .article {
    padding: 10px 0;
    border-bottom: solid 1px #eee;
}

#resultados .article:hover {
    cursor: pointer;
}

#resultados .article > .info {
    padding: 0 20px;
}

#resultados .article > .cover > img {
    width: inherit;
    min-height: inherit;
}

#resultados .controles {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

#resultados .controles a {
    display: inline-block;
    color: gray !important;
    padding: 10px;
}

.btn-crear-nuevo {
    background-color: #fff;
    border-radius: 25px;
    color: #292929 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer !important;
}

.select {
    padding: 12px;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
    /* max-width: 300px !important; */
    transition: all ease 0.3s;
    border: solid 2px #f9f9f9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.select.active {
    border-color: var(--primary);
}

.select.active:before {
    content: '';
    position: absolute;
    border-top: 10px solid var(--primary);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    bottom: -21px;
    left: calc(50% - 10px);
}

.select .icon-filter3 {
    font-size: 14px !important;
}

.select .options {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    top: calc(100% + 15px);
    width: 100%;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    overflow-y: auto;
    max-height: 260px;
    transition: all ease 0.2s;
    z-index: 100;
}

.select.active .options {
    visibility: visible;
    opacity: 1;
}

.select .options > .option {
    padding: 15px;
    transition: all ease 0.2s;
}

.select .option i {
    color: var(--primary);
    transition: all ease 0.3s;
}

.select .options > .option:hover {
    background-color: var(--primary);
    color: #fff !important;
}

.cajacupon .dotted {
    border: dashed 1px #131313;
    border-right: none !important;
}

.cajacupon .boxicon {
    width: 35px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.cajacupon #inputcupon {
    border: none;
    outline: none;
    background-color: transparent;
    width: 100%;
    height: 100%;
    border-left: solid 1px #131313;
    padding-left: 10px;
}

.cajacupon #inputcupon::placeholder {
    color: #292929 !important;
    font-size: 13px;
}

.cajacupon .inputsubmit {
    background-color: #131313;
    color: #ffffff;
    padding: 10px 20px;
}

#conexion {
    display: none;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background-color: rgba(39, 50, 64, 0.6);
    position: fixed;
    left: 0;
    top: 0;
}

#conexion .bloque2 {
    background-color: #fff;
    padding: 10px;
    min-height: auto !important;
    color: #131313 !important;
    font-size: 16px !important;
    font-weight: 600;
}

.bloque-full .btn2-accion {
    padding: 10px;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-weight: bold;
    border: solid 1px #ddd;
    border-radius: 4px;
}

.bloque-full {
    display: flex;
    flex-flow: column nowrap !important;
    justify-content: space-between;
    width: 95vw;
    max-width: 380px;
}

.bloque-full > div {
    flex: 1;
}

.bloque-full > div {
    padding: 20px;
}

.bloque-full > .cabecera {
    flex: initial !important;
    background-color: var(--primary);
    color: #fff;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.bloque-full > .cuerpo {
    background-color: #fff;
}

.bloque-full > .acciones {
    background-color: #fff;
    flex: initial !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.bloque-full .detalles > div {
    padding-bottom: 10px;
    border-bottom: solid 1px #f9f9f9;
    margin-bottom: 10px;
}

.bloque-full > .acciones .btn {
    text-align: center;
    display: block !important;
    border-radius: 5px;
    background-image: linear-gradient(to top, var(--primary), rgb(5, 136, 197));
    color: #fff;
    padding: 16px !important;
    font-weight: 14px;
    font-size: 14px !important;
    outline: none !important;
    border: 0 !important;
}

.select .options > .option:hover i {
    color: #fff !important;
}

.select .flex {
    flex-wrap: nowrap;
}

.select .content-select .lt-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 200px;
}

.select .content-select i {
    color: var(--primary) !important;
}

@media only screen and (max-width: 800px) {
    .top23 {
        top: 23px;
    }

    .contact {
        bottom: 80px !important;
    }

    .m-flex-none {
        display: block !important;
    }

    .m-flex-none > div {
        margin-right: 0 !important;
    }

    .main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .m-mb-20 {
        margin-bottom: 20px;
    }

    .atras {
        display: flex !important;
    }

    .nav .item-services a.inverse {
        display: flex !important;
    }

    .m-pt--relleno {
        margin-top: 13% !important;
    }

    .m-display {
        display: block !important;
    }

    .m-w-100 {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        max-width: 100% !important;
    }
}

@media only screen and (max-width: 600px) {
    .m-pt--relleno {
        margin-top: 40% !important;
    }

    .m-padding-m {
        padding: 0 15px !important;
    }

    .content-vertical {
        height: calc(100vh - 70px) !important;
    }

    .card-ofertas {
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        padding: 10px !important;
    }

    .card-ofertas form {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .card-ofertas form > div {
        flex: 1;
        margin-bottom: 0 !important;
    }

    .card-ofertas form > div:nth-child(3) {
        display: none;
    }

    .card-ofertas .btn-get {
        width: fit-content;
        padding: 10px !important;
    }

    .card-ofertas img {
        width: 40px !important;
        margin-right: 10px;
    }
}

@media only screen and (max-width: 400px) {
    .m-pt--relleno {
        margin-top: 78% !important;
    }
}

.nav .menu-service > a {
    /* padding: 3px 10px;*/
    padding: 5px 10px;
    vertical-align: middle !important;
    color: rgba(250, 250, 250, 0.7);
    transition: all ease 0.3s;
    display: inline-block !important;
}

.nav a i {
    vertical-align: middle;
    margin-right: 5px;
}

.nav a:hover {
    color: #fff;
}

.menu .active {
    /*color: #fff;
	font-weight: bold;*/
    color: #fff !important;
    font-weight: bold;
    background: #1392d2bf !important;
    border-radius: 20px;
}

.ventana {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
    overflow: hidden;
    background-color: #fff;
    width: 100vw;
    max-width: 550px;
}

.ventana > .cuerpo {
    margin-top: 20px;
    padding: 16px 24px !important;
}

.ventana .opciones {
    padding: 16px 24px;
    background-color: #f9f9f9;
}

.ventana .cerrar {
    position: absolute;
    right: 10px;
    top: 10px;
}

.ventana .cerrar > i {
    font-size: 20px !important;
    cursor: pointer;
    color: gray;
}

.ventana .btn {
    padding: 15px 20px !important;
    border-radius: 8px !important;
}

.ventana .cerrar > i:hover {
    color: var(--red);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    border: 0 !important;
}

.campo2 .select2-container--default {
    border: 0 !important;
    border-color: transparent !important;
}

.campo2 .select2-container--default .campo2.select2-selection--single {
    border: 0 !important;
    border-color: transparent !important;
}

.campo .select2-container--default {
    border: 0 !important;
    border-color: transparent !important;
}

.campo .select2-container--default .campo.select2-selection--single {
    border: 0 !important;
    border-color: transparent !important;
}

.account {
    padding: 0px 20px;
    padding-right: 0;
}

.account:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
}

.cursor {
    cursor: pointer;
}

.account > .options {
    display: none;
    position: absolute;
    color: #292929;
    padding: 15px 20px;
    right: 0;
    /*top: 70px;*/
    top: calc(100% + 10px);
    min-width: 200px;
    background-color: #fff;
    z-index: 2;
    border-radius: 6px;
    /*box-shadow: 0 0 10px rgba(0,0,0,.2);*/
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.account > .options .cover {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 100%;
}

.account > .options .cover > img {
    width: inherit;
    min-height: 100%;
}

.account > .options a {
    padding: 15px 24px;
    display: block !important;
    color: #292929;
    font-weight: 600;
    background-color: transparent !important;
}

.account > .options a.active {
    color: var(--primary);
}

.account > .options a:hover {
    /*background: #eeeeef;*/
}

.account > .options a i {
    font-weight: bold;
    /*margin-left: 10px;*/
}

.account-active {
    background-color: rgba(0, 0, 0, 0.2);
}

.account-active > .options {
    display: flex;
}

/* BODY DOCUMENTO */

.breadlist a {
    color: #292929;
}

.breadlist span {
    margin: 0 5px;
}

.submenu {
    background-color: #017d94;
    color: #fff;
    padding: 5px 0;
}

.btn a {
    display: block;
    padding: 10px;
}

.contenedor {
    background-color: #fff;
    border-radius: 4px;
    margin: 10px auto;
    padding-bottom: 10px;
    /*min-height: 500px;*/
    border: solid 1px rgb(203, 210, 214);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1px;
}

.article-list a:hover {
    text-decoration: underline;
}

.article-list {
    border-bottom: solid 1px #eee;
    padding: 10px 20px;
}

.article-list .cover {
    width: 45px;
    height: 45px;
    overflow: hidden;
    margin-right: 20px;
}

.article-list .cover img {
    width: inherit;
    min-height: 100%;
    height: 100%;
}

/*GRID ARTICULOS*/
.article-grid {
    margin: 10px;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    min-width: 267px;
    max-width: 260px;
    border-radius: 5px;
    overflow: hidden;
}

.article-grid:hover .cover img {
    transform: scale(1.1);
}

.article-grid > .cover {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.article-grid > .cover img {
    width: 100%;
    min-height: 100%;
    transition: all ease 0.3s;
}

.article-grid > .info {
    padding: 20px;
}

.article-grid > .info > div {
    margin-bottom: 10px;
}

.btnpencil {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 10px 13px;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

.badget {
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    vertical-align: middle;
}

.badget-primary {
    background-color: var(--primary);
    color: #fff;
}

.badget-orange {
    background-color: var(--orange);
    color: #fff;
}

.controlcover {
    position: absolute;
    bottom: 5px;
    left: 0;
}

.minleng {
    color: rgb(139, 141, 144);
    font-size: 12px;
}

.filter {
    width: 100%;
    padding: 20px 0;
}

.filter > div {
    /*padding: 0 10px;*/
}

.filter select {
    width: 100%;
    padding: 7px;
    border: solid #ddd 1px;
    border-radius: 3px;
}

.filter input {
    width: 100%;
    padding: 7px 20px;
    border: solid #ddd 1px;
    border-radius: 3px;
}

.pagination {
    display: flex;
    margin-bottom: 20px;
    border-radius: 3px;
    overflow: hidden;
    text-align: right;
}

.pagination a {
    padding: 10px 15px;
    background-color: #fff;
    border-right: 1px solid #eee;
}

.pagination a:hover {
    background-color: #eee;
}

.config {
    padding: 15px;
}

/*CONTENIDO DEL FOOTER*/

footer {
    background-color: rgba(0, 0, 0, 0.87);
    color: white;
    width: 100%;
    height: auto;
}

footer > div {
    flex: initial;
    align-items: flex-start !important;
}

footer ul {
    font-weight: 400;
}

footer a:hover {
    text-decoration: underline;
}

.redes-sociales a {
    margin-right: 10px;
}

.redes-sociales i {
    font-size: 24px !important;
}

#derechos {
    flex: initial;
    width: 100%;
    padding: 10px;
    background-color: #292929;
}

/*LOGGIN*/

.loggin {
    width: 100%;
    height: 100vh;
    background: url('../img/1.jpeg') no-repeat center center;
    background-size: cover;
}

.loggin p {
    color: rgba(250, 250, 250, 0.7);
    font-size: 13px;
    margin: 10px 0;
}

.loggin .sombra {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
}

.loggin .caja {
    text-align: center;
    padding: 20px;
    border: 0;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.5);
}

.loggin .caja input {
    outline: 0;
    border: 0;
    padding: 10px;
    width: 100%;
    margin-bottom: 15px;
}

.btninicio {
    outline: 0;
    border: 0;
    border-radius: 20px;
    font-weight: bold;
    margin-top: 10px;
    background-color: #3498db;
    transition: all ease 0.3s;
    color: white;
}

.btninicio:hover {
    cursor: pointer;
}

/*USUARIO PLATAFORMA*/

.aside {
    background-color: #fff;
    border-radius: 10px;
    width: 270px;
    margin-right: 20px;
    position: sticky;
    top: 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(21, 27, 38, 0.15);
}

.container {
    background-color: #fff;
    border-radius: 5px;
    /*min-height: 700px;*/
    /*padding: 15px !important;*/
    /*border: solid 1px rgb(203, 210, 214);*/
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.03);
}

.container > h1 {
    font-size: 20px;
    padding: 0 10px;
    font-weight: 600;
    margin-bottom: 20px;
}

.section {
    /*border: solid 1px #ddd;*/
    border-radius: 4px;
    margin-bottom: 30px;
}

.section .headinfo {
    /*border-bottom: solid 1px #ddd;*/
    background-color: #f9f9f9;
    border-radius: 25px;
    margin-bottom: 25px;
    padding: 8px 20px;
    font-weight: bold;
    font-size: 13px;
}

.section .cuerpo {
    padding: 10px 20px;
}

.accountd {
    /*background-color: #343b4a;*/
    padding: 10px;
    border-bottom: solid 1px #eee;
}

.accountd > .cover {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    margin-right: 10px;
    overflow: hidden;
}

.accountd > .cover > img {
    width: inherit;
    min-height: 100%;
}

.arrow {
    font-size: 20px !important;
    color: #ddd;
}

.menuaside > a {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 1px #eee;
    padding: 10px;
}

.menuaside a > .info {
    padding: 10px;
    flex: 1;
}

.menuaside a > .icono {
    font-size: 18px !important;
}

.menuaside a .desp {
    color: #8c97ad;
    font-size: 20px;
}

/*NOTIFICACIONES*/

.information {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #ccf0ff;
    color: #297a9a;
    margin-bottom: 10px;
}

.information i {
    font-size: 20px !important;
    margin-right: 20px;
}

.warning {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #ffcccc;
    color: #9a2929;
    margin-bottom: 10px;
}

.warning i {
    font-size: 20px !important;
    margin-right: 20px;
}

.formuser {
    padding: 10px;
}


.formuser label {
    display: block;
}

.formuser input {
    border: solid 1px #ddd;
    outline: none !important;
    width: 100%;
    padding: 8px 10px;
    border-radius: 3px;
    margin-bottom: 10px;
}

.formuser input[type='radio'] {
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: auto;
}

.formuser .table-data input {
    margin-bottom: 10px !important;
}

.select2-container .select2-selection--single {
    height: 36px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
}

.formuser input:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.formuser input:focus {
    outline: none;
    /*
	box-shadow: 0 0 5px rgba(35,167,255,1);
	border: solid 1px #3995ff;*/
}

.formuser input::placeholder {
    color: #ddd;
    font-size: 12px;
}

.formuser select {
    border: solid 1px #ddd;
    width: 100%;
    /*padding: 10px;*/
    padding: 8px 10px;
    border-radius: 3px;
}

.formuser label {
    font-weight: 600;
    color: #3e4357;
    font-size: 12px;
    margin-bottom: 5px;
}

.minsearch {
    padding: 0 10px;
    border: solid 1px #ddd;
    flex: initial;
    width: 300px;
}

.minsearch input {
    outline: 0;
    border: 0;
    width: 100%;
    padding: 5px 10px;
}

.list-scroll {
    margin: 20px 10px;
}

.list {
    padding: 10px;
}

.list:nth-child(even) {
    background-color: #f8f9fb;
}

.list .cover {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 100%;
}

.list .cover > img {
    width: 100%;
    min-height: 100%;
}

.tblinfomini th {
    text-align: left;
    font-size: 12px;
}

.tbllite {
    width: 100%;
    padding: 10px;
    border-collapse: collapse;
}

.tbllite td,
th {
    padding: 10px 10px;
}

.tbllite tr {
    border-bottom: solid 1px #ddd;
}

.labelcheck {
    margin-bottom: 10px;
    padding: 0 10px;
    background-color: #f5f5f5;
}

.labelcheck:hover {
    cursor: pointer;
}

.labelcheck > .check {
    flex: initial;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.labelcheck > .text {
    padding: 10px 20px;
}

.toggle {
    width: 50px;
    background-color: gray;
    border-radius: 30px;
    padding: 5px;
    transition: all ease 0.3s;
}

.toggle input {
    display: none;
}

.toggle:hover {
    cursor: pointer;
}

.toggle > .circulo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: initial !important;
    transition: all ease 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-active {
    background-color: #36b4e6;
}

.toggle-active > .circulo {
    transform: translate(100%);
    transition: all ease 0.3s;
}

.afterinfo {
    padding: 0 10px;
}

.afterinfo:hover {
    cursor: pointer;
}

.afterinfo:hover:after {
    display: block;
}

.afterinfo::after {
    content: attr(texto);
    display: none;
    background-color: #292929;
    color: #fff;
    padding: 10px;
    position: absolute;
    left: 0px;
    bottom: 20px;
    z-index: 1;
    border-radius: 3px;
    width: 200px;
    font-family: arial;
    line-height: 18px;
    text-align: left;
}

/*CAMPO DE NUEVO ARTISTA*/
.newartista {
    padding: 5px 10px;
    background-color: #f6f6f7;
    /*margin: 5px 10px;*/
    border: solid 1px #ddd;
    display: none;
}

.btnnew:hover {
    cursor: pointer !important;
}

/*LIST-PRODUCTOS*/

.list-productos {
    padding: 10px;
}

.checki {
    opacity: 0;
}

.list-productos > .cover {
    width: 40px;
    height: 40px;
    overflow: hidden;
    margin-right: 10px;
}

.list-productos > .cover > img {
    width: inherit;
    min-height: inherit;
}

.list-productos .estado {
    display: block;
    position: absolute;
    right: 20px;
    top: 25px;
    background-color: orange;
    border-radius: 100%;
    width: 10px;
    height: 10px;
}

.list-productos .estado:hover {
    cursor: pointer;
}

.list-productos .estado:hover:after {
    display: block;
}

.list-productos .estado::after {
    display: none;
    width: auto;
    padding: 5px;
    border-radius: 3px;
    content: attr(estado);
    position: absolute;
    bottom: 18px;
    right: 0;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    font-size: 12px;
}

.green {
    background-color: #36b4e6 !important;
}

.cover {
    background-size: 100%;
}

.cover-bg-user {
    background: #eee url(../img/user-default.jpg) center center !important;
    background-size: 100% !important;
}

.menuseccion {
    padding: 10px;
}

.menuseccion a {
    background-color: #eee;
    display: block;
    padding: 5px 10px;
    margin-bottom: 5px;
}

.menuseccion .active {
    background: #36b4e6;
    color: white;
}

.menuseccion .active i {
    color: #fff !important;
}

.menuseccion a > i {
    position: absolute;
    right: 8px;
    top: 8px;
    color: lightseagreen;
}

.menuseccion a:hover {
    background-color: #36b4e6;
    color: #fff;
}

/*CARGAR COVER*/
.uploadcover {
    text-align: center;
    width: 300px;
    margin: 0 auto;
}

.uploadcover:hover {
    cursor: pointer;
}

.uploadcover i {
    font-size: 80px !important;
    margin: 10px 0;
    color: #ddd;
}

.uploadcover {
    border: dotted 2px #ddd;
    display: block;
    padding: 20px;
}

.lista {
    text-align: left;
    list-style: initial;
    display: block;
    padding-left: 20px !important;
    font-size: 12px;
    margin: 20px 0;
}

.lista > li {
    color: gray;
    font-size: 12px;
}

.tblhorizontal {
    margin: 20px auto;
    text-align: left;
}

.tblhorizontal thead {
    border-bottom: solid 1px #ddd;
}

.tblhorizontal th,
td {
    padding: 7px;
}

.coverproducto {
    width: 100%;
    max-width: 400px;
    padding-top: 100%;
    background-color: #fff;
    margin-right: 20px;
    border-radius: 2px;
    overflow: hidden;
}

.coverproducto > img {
    width: 100%;
    min-height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.coverfoto {
    width: 60px;
    height: 60px;
    overflow: hidden;
    background: #eee url('../img/vectores/user2.svg') no-repeat center center;
    background-size: 101% 101%;
    border-radius: 100%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.coverfoto > img {
    max-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.coverfoto:hover .sombra {
    opacity: 1;
    cursor: pointer;
}

.coverfoto .sombra {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease 0.2s;
}

.coverfoto .sombra > i {
    font-size: 50px !important;
}

.covermusic {
    width: 350px;
    height: 350px;
    overflow: hidden;
    border: solid 1px #ddd;
    background: #ddd url('../img/music2.png') no-repeat center center;
    background-size: 60%;
    overflow: hidden;
}

.covermusic > img {
    width: 100%;
    min-height: 100%;
}

.menu-ajustes {
    border-bottom-color: hsla(0, 0%, 100%, 0.05);
    border-top-color: rgba(0, 0, 0, 0.2);
}

.menu-ajustes > li > a {
    padding: 17px 30px;
    display: block;
    color: rgba(250, 250, 250, 0.6);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    border-top: 1px solid hsla(0, 0%, 100%, 0.05);
    letter-spacing: 0.2px;
}

.menu-ajustes > li > a.active {
    color: #fff;
}

.menu-ajustes > li > a.active::before {
    content: '';
    width: 6px;
    height: calc(100% + 3px);
    background-color: var(--primary);
    position: absolute;
    left: 0;
    top: -2px;
}

.menu-ajustes > li > a:hover:before {
    content: '';
    width: 6px;
    height: calc(100% + 3px);
    background-color: var(--primary);
    position: absolute;
    left: 0;
    top: -2px;
}

.menu-ajustes > li > a > i {
    margin-right: 20px;
    font-size: 16px !important;
    font-weight: normal;
}

.container-ajustes {
    padding: 48px;
}

.container-ajustes > .titulo {
    font-size: 40px;
    line-height: 50;
    font-weight: 700;
    color: #181818;
    margin-bottom: 40px;
}

.container-ajustes > .titulo2 {
    font-size: 22px;
    line-height: 25px;
    font-weight: 700;
    color: #181818;
    margin-bottom: 20px;
}

.row-info {
    border-bottom: solid 1px #ddd;
}

.row-info > div {
    padding: 15px 15px 15px 0;
    font-size: 15px;
    font-weight: 500;
}

.row-info > div:nth-child(1) {
    color: #ddd;
}

.covermusic > #sombra {
    opacity: 0;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.mcover {
    /*width: 350px;
    height: 350px;*/
    overflow: hidden;
    border: solid 1px #ddd;
    background: #ddd url('../img-desing/coverm.png') no-repeat center center;
    background-size: 60%;
    overflow: hidden;
}

.mcover > img {
    width: 100%;
    min-height: 100%;
}

.mcover > #sombra {
    opacity: 0;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.pointer:pointer {
    cursor: pointer !important;
}

#uploadarea {
    /*width: 370px;*/
    padding: 10px 20px;
    border: dashed 4px #ddd;
    outline: solid 3px #fff;
    display: block;
    text-align: center;
    color: gray;
    margin-bottom: 15px;
}

#uploadarea:hover {
    cursor: pointer;
    box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.2);
}

#uploadarea > i {
    font-size: 45px !important;
}

#uploadarea > input[type='file'] {
    display: none;
}

.track {
    /*width: 370px;*/
    background-color: #f9f9f9;
    border: solid 1px #eee;
    margin-bottom: 10px;
    cursor: move;
    border-radius: 4px;
    overflow: hidden;
}

.track:hover {
    /*border: solid 1px #36b4e6;*/
}

.track .play {
    padding: 10px 15px;
    background-color: #292929;
    margin-right: 10px;
    color: #fff;
}

.track .delete {
    padding: 10px 15px;
}

.head {
    padding: 10px;
    background-color: #343b4a;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.success {
    padding: 10px;
    border-radius: 6px;
    background-color: #88d8c7;
    color: #287969;
}

/*TAGS INPUT TAGS*/
.tag {
    /*background-color: #36b4e6;*/
    background-color: #17a88b !important;
    padding: 0px 5px;
    border-radius: 3px;
    display: inline-block;
    font-size: 13px;
    margin: 2px 0;
}

.icon-github {
    background: no-repeat url('../img/github-16px.png');
    width: 16px;
    height: 16px;
}

.bootstrap-tagsinput {
    width: 100%;
}

.accordion {
    margin-bottom: -3px;
}

.accordion-group {
    border: none;
}

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
    margin-bottom: 0;
}

.twitter-typeahead .tt-hint {
    display: none;
}

.tt-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 13px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    cursor: pointer;
}

.tt-suggestion {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: nowrap;
}

.tt-suggestion:hover,
.tt-suggestion:focus {
    color: #ffffff;
    text-decoration: none;
    outline: 0;
    background-color: #428bca;
}

/*fin imput tags*/

/*TERRITORIO */

.territorios {
    width: 100%;
    border-radius: 3px;
    background-color: #f9f9f9;
    border: solid 1px #eee;
    padding: 10px;
    margin-bottom: 20px;
}

.territorios input[type='search'] {
    padding: 5px;
    width: 100%;
}

.territorios > ul {
    border: solid #ddd 1px;
    padding: 10px;
    width: 100%;
    height: 270px;
    overflow-y: auto;
    margin: 20px 0;
}

.territorios > ul label {
    padding: 7px;
    display: inline-block;
    cursor: pointer;
    width: 100%;
}

.territorios > ul li:hover {
    background-color: #eee;
}

.estados {
    padding: 3px 10px;
    font-size: 10px;
    border-radius: 3px;
    background-color: #f0ad4e;
    color: white;
    font-family: arial;
}

.table-info {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

.table-info th {
    text-align: left;
}

.text-overflow {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    width: 500px !important;
    display: block;
}

.table-info th,
.table-info td {
    height: 25px;
    line-height: 25px;
    border-bottom: solid 2px #eaf0f7;
}

.table-info thead {
    background-color: #f1f5fa;
    color: #303e67;
}

.table-info td {
    color: #7286a4;
}

.progress {
    width: 100%;
    height: 15px;
    background-color: #f7f7f7;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 6px 5px 0 rgb(173 181 189 / 40%);
    /* box-shadow: 0 6px 5px 0 rgb(173 181 189 / 40%);*/
    margin: 5px 0;
}

.progress > .progress-bar {
    display: inline-block;
    width: 0%;
    height: 100%;
    background-color: #36b4e6;
    color: rgba(250, 250, 250, 1);
    animation: all ease 0.3s;
    text-align: right;
    padding-right: 10px;
}

.progress-grid {
    width: 100%;
    height: 18px;
    background-color: #f7f7f7;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 6px 5px 0 rgb(173 181 189 / 40%);
    /*box-shadow: 0 6px 5px 0 rgb(173 181 189 / 40%);*/
    margin: 5px 0;
    display: flex;
}

.progress-grid > .bar {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: rgba(250, 250, 250, 1);
    text-align: center;
    transition: width 0.6s ease;
    font-size: 10px !important;
    font-weight: 600;
}

.progress-lite {
    width: 100%;
    height: 3px;
    background-color: #f1f5fa;
    overflow: hidden;
    border-radius: 0.25rem;
    box-shadow: 0 6px 5px 0 rgb(173 181 189 / 40%);
    -webkit-box-shadow: 0 6px 5px 0 rgb(173 181 189 / 40%);
}

.progress-lite::after {
    content: '';
    display: block;
}

.progress-lite > .bar {
    width: 0;
    height: 3px;
    display: block;
    background-color: #41cbd8 !important;
}

.bar-icon {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
    border-radius: 100%;
}

.bar-icon > i {
    color: #292929;
    font-size: 20px !important;
}

.circle {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #f9f9f9;
    display: inline-block;
    flex: initial;
}

.bg-primary {
    background-color: var(--primary);
}

.bg-celeste {
    background-color: var(--celeste);
}

.bg-orange {
    background-color: var(--orange);
}

.bg-green {
    background-color: var(--green);
}

.bg-red {
    background-color: var(--red);
}

.progress-bar-animated {
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite;
}

.progress-bar-striped {
    background-image: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent
    );
    background-size: 1rem 1rem;
}

#notify .placeholder {
    border: dashed 2px #36b4e6;
    display: block;
    height: 45px;
    margin-bottom: 10px;
}

audio {
    padding: 3px;
    background-color: #36b4e6;
    border-radius: 30px;
    outline: none;
}

.menu2 {
    width: 100%;
}

.menu2 li a {
    display: block;
    padding: 10px 15px;
    color: #fff;
    font-weight: bold;
}

.menu2 li i {
    margin-right: 10px;
    font-weight: bold;
}

.menu2 > li {
    float: left;
    position: relative;
    /*border-right: solid 1px rgba(250,250,250, .3);*/
}

.menu2 li a:hover {
}

.menu2 > li > ul {
    display: none;
    position: absolute;
    min-width: 100%;
    left: 0;
    top: 98%;
    z-index: 1;
    /*border-radius: 10px;*/
    overflow: hidden;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.menu2 > li > ul li {
    background-color: #292929;
    color: rgba(250, 250, 250, 0.8);
    width: auto;
    white-space: nowrap;
}

.menu2 > li:hover ul {
    display: block;
}

.vistarapida .cover {
    flex: initial;
    width: 500px;
    height: 500px;
}

.vistarapida .cover img {
    width: 100%;
    height: 100%;
}

.sticky-container {
    padding: 0px;
    margin: 0px;
    position: fixed;
    right: 0;
    top: 300px;
    width: 45px;
    z-index: 1100;
}

/* .sticky li {
    list-style-type: none;
    background-color: #fff;
    color: #efefef;
    height: 43px;
    padding: 0px;
    margin: 0px 0px 1px 0px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

.sticky li:hover {
    margin-left: -500px;
} */

.m-display {
    display: none;
}

.w-100 {
    width: 100%;
}

input[type='buscar'] {
    border: none;
    outline: none;
    border: solid 1px #ddd;
    border-radius: 3px;
    padding: 3px;
}

#box-search label {
    font-weight: normal;
}

.side-menu-bar {
    position: absolute;
    width: 100%;
    z-index: 10000;
    height: 100vh;
    left: 100%;
    position: fixed; /* Set the navbar to fixed position */
    top: 0;
    padding: 51px 0 0 0;
    background: #343b4a;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.nav {
    position: unset; /* Set the navbar to fixed position */
}

.resultados {
    display: none;
    width: 100%;
    margin-bottom: 20px;
    left: 0;
    top: 15px;
    background-color: #fff;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #242932;
    height: 220px;
}

.container-tags {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: inherit;
    padding: 4px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
}

.container-tags input {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
    padding: 0 6px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: inherit !important;
}

.menu-ul {
    border-radius: 3px;
    position: absolute;
    border: 1px solid #d4c3f9;
    z-index: 10;
    background: #fff;
    /*width: 140px;*/
    left: 0px;
    top: 20px;
}

.item-li {
    padding: 2px 10px 2px 5px;
}

.item-li:hover {
    cursor: pointer;
    background: #8960cc;
    color: #fff;
}

.hover-li {
    padding: 2px 10px 2px 5px;
    background: #8960cc;
    color: #fff;
}

.derecha {
    position: absolute;
    top: 0;
    right: 0;
}

.m-block {
    display: none !important;
}

/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {
    .container {
        width: 100% !important;
        padding: 15px !important;
    }

    .m-w-100 {
        width: 100% !important;
        flex: initial !important;
        margin-right: 0 !important;
        margin-bottom: 20px;
    }

    .bloque-titulo {
        display: none;
    }

    .m-center {
        text-align: center !important;
    }

    .movil-w100 {
        width: 100% !important;
    }

    .m-margin-auto {
        margin: 0 auto;
        margin-right: 0 !important;
    }

    .account {
        display: none;
    }

    .steps {
        margin-top: 10px;
    }

    .m-block {
        display: block !important;
    }

    .m-none {
        display: none !important;
    }

    .m-display {
        display: block !important;
    }

    .m-w100 {
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    .steps:before {
        background-color: transparent !important;
    }

    .menu {
        padding: 10px 15px;
    }

    .containermovil .flex > div {
        min-width: 200px;
        margin-bottom: 10px !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    .filter-box {
        width: 100%;
        display: block;
    }

    .pc-prod {
    }

    .pc-cuen {
    }

    .pc-porc {
        display: none;
    }

    .pc-form {
        display: none;
    }

    .pc-lanza {
        display: none;
    }

    .pc-usu {
        display: none;
    }

    .pc-esta {
        display: none;
    }

    .pc-remvi {
        display: none;
    }

    .bc-prod {
    }

    .bc-cuen {
    }

    .bc-porc {
        display: none;
    }

    .bc-form {
        display: none;
    }

    .bc-lanza {
        display: none;
    }

    .bc-usu {
        display: none;
    }

    .bc-esta {
        display: none;
    }

    .bc-remvi {
        display: none;
    }

    .padding-sm {
        padding: 4px;
    }

    .c-cuenta {
    }

    .c-respon {
        display: none;
    }

    .c-porce {
    }

    .c-lan {
        display: none;
    }

    .c-esta {
        display: none;
    }

    .b-cuenta {
    }

    .b-respon {
        display: none;
    }

    .b-porce {
    }

    .b-lan {
        display: none;
    }

    .b-esta {
        display: none;
    }

    .nav {
        position: fixed; /* Set the navbar to fixed position */
        /*border-bottom: 1px solid #fff;*/
    }

    .regalias {
        height: auto;
        padding: 10px;
    }

    .submenu-sm {
        display: none;
    }

    .side-menu-bar > li {
        display: flex;
    }

    .side-menu-bar > li > a {
        padding: 10px 0 10px 15px;
        width: 100%;
        color: #fff;
        border-bottom: 1px solid #c3c3c3;
    }

    .side-menu-bar > li > a:hover {
        background: #9a9a9a9c;
    }

    .pro-sm {
        display: none;
    }

    .resultados:hover {
        display: block;
    }

    .resultados #get > a {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .resultados .article {
        color: #292929;
    }

    .resultados .article > .cover {
        width: 60px;
        height: 60px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .resultados .article {
        padding: 10px 0;
        border-bottom: solid 1px #eee;
    }

    .resultados .article:hover {
        cursor: pointer;
    }

    .resultados .article > .info {
        padding: 0 20px;
    }

    .resultados .article > .cover > img {
        width: inherit;
        min-height: inherit;
    }

    .resultados .controles {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
    }

    .resultados .controles a {
        display: inline-block;
        color: gray !important;
        padding: 10px;
    }

    .option-sm {
        display: none;
    }

    .card-user-sm {
        display: flex;
        justify-content: flex-end;
    }

    .bars-sm {
        display: flex;
    }

    .account-sm {
        display: flex;
    }

    .account-m {
        display: none;
    }

    .account:hover {
        cursor: default;
        background-color: rgba(0, 0, 0, 0);
    }

    .bloque {
        padding: 15px;
    }

    .help-sm {
        display: none;
    }

    .search-sm {
        display: none;
    }

    .menu-bar-movil {
        display: block;
    }

    .padding-v {
        padding: 17px 0 5px 0;
    }

    .footer-sm {
        display: inline-block;
        text-align: center;
        height: auto;
        padding: 5px;
    }

    .footer-sm .margin-right {
        margin: 0;
    }

    .footer-sm .text-logo {
        text-align: center;
        padding-top: 0;
    }

    .footer-item-logo {
        width: 40%;
        justify-content: center;
        display: inline-block;
        margin-left: 10px;
        max-width: 300px;
    }

    .money-saldo {
        font-size: 25px;
    }

    .initial-sm {
        width: 100%;
        /*margin-bottom: 20px;*/
    }

    .sidebar-right {
        display: inline-block;
        width: 100%;
    }

    .space {
        display: none;
    }

    .bloque-sm {
        width: 100%;
        margin-bottom: 5px;
    }

    .separe {
        width: 5px;
    }

    .uclock-date {
        display: none;
    }

    .formdate-m {
        display: flex;
        flex-direction: column-reverse;
    }

    .formdate-m form {
        max-width: 100%;
        padding: 0;
    }

    .formuser .margin-right {
        margin: 0;
    }

    .formdate-box {
        width: 100%;
    }

    .menu-bar-movil {
        display: none;
    }

    .options-sm {
        display: none;
    }

    .p-d {
        padding: 5px 0 !important;
    }

    #productos-head {
    }

    #productos-body {
    }

    #productos-body .box-img-prod {
        margin: 0;
    }

    #productos-body .upc-sm {
        display: none;
    }

    #productos-body .opcion-prod {
        display: flex;
        align-items: center;
        padding-right: 6px;
        justify-content: flex-end;
    }

    .loading-sm {
        display: none !important;
    }

    .bar-regalia {
        padding-top: 10px;
        display: flex;
        justify-content: center;
    }

    #example_length {
        display: none !important;
    }

    .filter > .box-regalia-item {
        padding-top: 8px;
        font-size: 10px;
        justify-content: center;
        display: flex;
    }

    .c-producto {
        width: 136px !important;
        text-align: center !important;
    }

    .c-fecha {
        text-align: center !important;
        width: 170px !important;
    }

    .c-tipo {
        width: 66px !important;
        display: none;
    }

    .c-estado {
        width: 132px !important;
        text-align: center !important;
    }

    .c-artista {
        width: 88px !important;
        display: none;
    }

    .c-lanza {
        display: none;
        width: 124px !important;
    }

    .contenedor-sm {
        padding: 3px;
    }

    .p-estado .p-opcion {
        text-align: center;
    }

    .p-lanza {
        display: none;
    }

    .p-tipo {
        display: none;
    }

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

    .p-artista {
        display: none;
    }

    .p-producto .p-img {
        margin-right: 3px;
    }

    .p-opcion > .initial {
        margin-left: 8px;
        margin-top: 8px;
    }

    #productos-head > tr > th {
        text-align: left;
        padding: 10px 10px;
    }

    #productos-body > tr > td {
        border-bottom: 1px solid #e8e6e6;
        padding: 7px 0 !important;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media screen and (min-width: 600px) {
    .nav {
        border-bottom: 0px;
    }

    .regalias {
        display: block;
        padding: 10px;
    }

    #productos-body .box-img-prod {
        margin: 0 10px 0 7px;
    }

    .filter > .box-regalia {
        width: 100%;
    }

    .filter > .box-regalia-item {
        font-size: 12px;
        display: flex;
        padding-top: 8px;
        justify-content: center;
        width: 100%;
    }

    .bar-regalia {
        padding-top: 0;
        /*display: flex;*/
        justify-content: flex-end;
    }

    .loading-sm {
        display: none !important;
    }

    #example_length {
        display: none !important;
    }

    .item-menu-bar {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .pc-prod {
    }

    .pc-cuen {
    }

    .pc-porc {
        display: table-cell;
    }

    .pc-form {
        display: none;
    }

    .pc-lanza {
        display: table-cell;
    }

    .pc-usu {
        display: none;
    }

    .pc-esta {
        display: none;
    }

    .pc-remvi {
        display: none;
    }

    .bc-prod {
    }

    .bc-cuen {
    }

    .bc-porc {
        display: table-cell;
    }

    .bc-form {
        display: none;
    }

    .bc-lanza {
        display: table-cell;
    }

    .bc-usu {
        display: none;
    }

    .bc-esta {
        display: none;
    }

    .bc-remvi {
        display: none;
    }

    .padding-sm {
        padding: 4px;
    }

    .c-cuenta {
    }

    .c-respon {
        display: none;
    }

    .c-porce {
    }

    .c-lan {
        display: none;
    }

    .c-esta {
        display: table-cell;
    }

    .b-cuenta {
    }

    .b-respon {
        display: none;
    }

    .b-porce {
    }

    .b-lan {
        display: none;
    }

    .b-esta {
        display: table-cell;
    }

    .item-menu-art {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-user-sm {
        display: contents;
    }

    .submenu-sm {
        display: block;
    }

    .options-sm {
        display: block;
    }

    .menu-bar-movil {
        padding: 7px 0;
        /*background: green;*/
        display: flex;
        justify-content: center;
    }

    .account-sm {
        display: none;
    }

    .account-m {
        display: flex;
    }

    .bars-sm {
        display: none;
    }

    .search-sm {
        display: block;
    }

    .option-sm {
        display: none;
    }

    .help-sm {
        display: block;
    }

    .money-saldo {
        font-size: 25px;
    }

    .footer-sm {
        display: flex;
    }

    .footer-item-logo {
        width: 40%;
        margin-left: 40px;
        max-width: 300px;
    }

    .footer-sm .text-logo {
        padding-top: 10px;
    }

    .footer-item {
        width: 30%;
        max-width: 250px;
    }

    .footer-sm .margin-right {
        display: flex;
    }

    .bloque-sm {
        width: 100%;
        margin-bottom: 10px;
    }

    .initial-sm {
        width: auto;
    }

    .sidebar-right {
        width: 250px;
        margin-right: 5px;
    }

    .filter-box {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }

    .filter-item-box {
        width: 100%;
    }

    #categoria {
        width: 100%;
    }

    .filter-table {
        padding: 10px 0;
    }

    .formdate-m {
        display: flex;
        flex-direction: column-reverse;
    }

    .formdate-m form {
        max-width: 100%;
        padding: 0;
    }

    .formuser .margin-right {
        margin: 0;
    }

    .formdate-box {
        width: 100%;
    }

    .sidebar-right {
        width: 210px;
        margin-right: 7px;
    }

    .filter-table {
        padding: 10px 0;
    }

    .filter-item-box {
        width: 100%;
    }

    #categoria {
        width: 100%;
    }

    .c-producto {
        width: 136px !important;
        padding-left: 69px !important;
    }

    .c-fecha {
        width: 170px !important;
        width: 96px !important;
    }

    .c-tipo {
        width: 66px !important;
        display: none;
    }

    .c-estado {
        width: 106px !important;
        padding-left: 32px !important;
    }

    .c-artista {
        width: 105px !important;
        display: table-cell;
    }

    .c-lanza {
        display: none;
        width: 124px !important;
    }

    .contenedor-sm {
        padding: 0 20px 15px 20px;
    }

    .p-estado .p-opcion {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .p-lanza {
        display: none;
    }

    .p-tipo {
        display: none;
    }

    .p-fecha {
        text-align: left;
    }

    .p-artista {
        display: table-cell;
    }

    .p-producto .p-img {
        margin-right: 10px;
    }

    .p-opcion > .initial {
        margin-left: 8px;
        margin-top: 0;
    }

    #productos-head > tr > th {
        text-align: left;
        padding: 10px 10px;
    }

    #productos-body > tr > td {
        border-bottom: 1px solid #e8e6e6;
        padding: 8px 10px !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media screen and (min-width: 768px) {
    .item-menu-art {
        display: flex;
        align-items: center;
        justify-content: unset;
    }

    .loading-sm {
        display: none !important;
    }

    .regalias {
        padding: 10px 15px;
    }

    #example_length {
        display: inline-block;
    }

    .item-menu-bar {
        display: flex;
        width: auto;
    }

    .menu-bar-movil {
        padding: 7px 0;
        /*background: green;*/
        display: flex;
        justify-content: center;
    }

    .pc-prod {
    }

    .pc-cuen {
    }

    .pc-porc {
        display: table-cell;
    }

    .pc-form {
        display: table-cell;
    }

    .pc-lanza {
        display: table-cell;
    }

    .pc-usu {
        display: none;
    }

    .pc-esta {
        display: table-cell;
    }

    .pc-remvi {
        display: none;
    }

    .bc-prod {
    }

    .bc-cuen {
    }

    .bc-porc {
        display: table-cell;
    }

    .bc-form {
        display: table-cell;
    }

    .bc-lanza {
        display: table-cell;
    }

    .bc-usu {
        display: none;
    }

    .bc-esta {
        display: table-cell;
    }

    .bc-remvi {
        display: none;
    }

    .padding-sm {
        padding: 4px;
    }

    .c-cuenta {
    }

    .c-respon {
        display: none;
    }

    .c-porce {
    }

    .c-lan {
        display: table-cell;
    }

    .c-esta {
        display: table-cell;
    }

    .b-cuenta {
    }

    .b-respon {
        display: none;
    }

    .b-porce {
    }

    .b-lan {
        display: table-cell;
    }

    .b-esta {
        display: table-cell;
    }

    .option-sm {
        display: none;
    }

    .footer-sm {
        display: flex;
        justify-content: center;
    }

    .footer-item-logo {
        width: 40%;
        margin-left: 90px;
        max-width: 300px;
    }

    .footer-item {
        width: 30%;
        max-width: 250px;
    }

    .money-saldo {
        font-size: 28px;
    }

    .uclock-date {
        display: inline-block;
    }

    .sidebar-right {
        width: 250px;
        margin-right: 7px;
    }

    .formdate-m {
        display: flex;
        flex-direction: column-reverse;
    }

    .formdate-m form {
        max-width: 100%;
        padding: 0;
    }

    .formuser .margin-right {
        margin: 10px;
    }

    .formdate-box {
        width: 100%;
    }

    .filter-box {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }

    .filter-item-box {
        width: 100%;
    }

    #categoria {
        width: 100%;
    }

    .filter-table {
        padding: 10px 0;
    }

    .filter-item-box {
        width: 100%;
    }

    #categoria {
        width: 100%;
    }

    .filter-table {
        padding: 10px 0;
    }

    .c-producto {
        width: 136px !important;
        padding-left: 69px !important;
    }

    .c-fecha {
        width: 96px !important;
    }

    .c-tipo {
        width: 66px !important;
        display: table-cell;
    }

    .c-estado {
        width: 90px !important;
        padding-left: 45px !important;
    }

    .c-artista {
        display: table-cell;
    }

    .c-lanza {
        width: 124px !important;
    }

    .contenedor-sm {
        padding: 0 20px 15px 20px;
    }

    .p-estado .p-opcion {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .p-tipo {
        display: table-cell;
    }

    .p-producto .p-img {
        margin-right: 10px;
    }

    .p-opcion > .initial {
        margin-left: 8px;
    }

    #productos-head > tr > th {
        text-align: left;
        padding: 10px 10px;
    }

    #productos-body > tr > td {
        border-bottom: 1px solid #e8e6e6;
    }

    .filter > .box-regalia-item {
        padding-top: 8px;
    }
}

@media screen and (min-width: 880px) {
    .regalias {
        display: flex;
    }

    .filter > .box-regalia-item {
        display: block;
        justify-content: unset;
        padding-top: 8px !important;
    }

    .filter-box {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }

    .filter-item-box {
        width: 100%;
    }

    #categoria {
        width: 100%;
    }

    .filter-table {
        padding: 10px 0;
    }

    .money-saldo {
        font-size: 25px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media screen and (min-width: 992px) {
    .regalias {
        padding: 10px 15px;
    }

    .option-sm {
        display: block;
    }

    .money-saldo {
        font-size: 26px;
    }

    .sidebar-right {
        width: 250px;
        margin-right: 10px;
    }

    .formdate-m {
        display: flex;
        flex-direction: unset;
    }

    .formdate-m form {
        max-width: 300px;
    }

    .formdate-box {
        width: auto;
    }

    .filter-box {
        display: flex;
        flex-direction: unset;
        width: 100%;
    }

    .filter-table {
        padding: 10px 0;
    }

    .filter-item-box {
        width: 50%;
    }

    .menu-bar-movil {
        display: none;
    }

    .pc-prod {
    }

    .pc-cuen {
    }

    .pc-porc {
        display: table-cell;
    }

    .pc-form {
        display: table-cell;
    }

    .pc-lanza {
        display: table-cell;
    }

    .pc-usu {
        display: table-cell;
    }

    .pc-esta {
        display: table-cell;
    }

    .pc-remvi {
        display: table-cell;
    }

    .bc-prod {
    }

    .bc-cuen {
    }

    .bc-porc {
        display: table-cell;
    }

    .bc-form {
        display: table-cell;
    }

    .bc-lanza {
        display: table-cell;
    }

    .bc-usu {
        display: table-cell;
    }

    .bc-esta {
        display: table-cell;
    }

    .bc-remvi {
        display: table-cell;
    }

    .padding-sm {
        padding: 4px;
    }

    .c-cuenta {
    }

    .c-respon {
        display: table-cell;
    }

    .c-porce {
    }

    .c-lan {
        display: table-cell;
    }

    .c-esta {
        display: table-cell;
    }

    .b-cuenta {
    }

    .b-respon {
        display: table-cell;
    }

    .b-porce {
    }

    .b-lan {
        display: table-cell;
    }

    .b-esta {
        display: table-cell;
    }

    .c-producto {
        width: 111px !important;
        padding-left: 69px !important;
    }

    .c-artista {
        width: 111px !important;
        display: table-cell;
    }

    .c-tipo {
        width: 66px !important;
    }

    .c-fecha-r {
        width: 120px !important;
        min-width: 93% !important;
    }

    .c-fecha {
        width: 170px !important;
    }

    .c-estado {
        width: 82px !important;
        padding-left: 32px !important;
    }

    .c-lanza {
        width: 124px !important;
        display: table-cell;
    }

    .contenedor-sm {
        padding: 0 20px 15px 20px;
    }

    .p-estado .p-opcion {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .p-lanza {
        display: table-cell;
    }

    .p-producto .p-img {
        margin-right: 10px;
    }

    .p-opcion > .initial {
        margin-left: 8px;
    }

    #productos-head > tr > th {
        text-align: left;
        padding: 10px 10px;
    }

    #productos-body > tr > td {
        border-bottom: 1px solid #e8e6e6;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    .sidebar-right {
        width: 300px;
        margin-right: 20px;
    }

    .regalias {
        padding: 10px 15px;
    }

    .menu-bar-movil {
        display: none;
    }

    .option-sm {
        display: block;
    }

    .money-saldo {
        font-size: 33px;
    }

    .formdate-m {
        display: flex;
        flex-direction: unset;
    }

    .formdate-m form {
        max-width: 300px;
    }

    .formdate-box {
        width: auto;
    }

    .c-producto {
        width: 111px !important;
        padding-left: 73px !important;
    }

    .c-fecha-r {
        width: 120px !important;
        min-width: 93% !important;
    }

    .c-fecha {
        width: 100px !important;
        min-width: 93% !important;
    }

    .c-tipo {
        width: 66px !important;
    }

    .c-estado {
        width: 91px !important;
        padding-left: 42px !important;
    }

    .contenedor-sm {
        padding: 0 20px 15px 20px;
    }

    .p-estado .p-opcion {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .p-producto .p-img {
        margin-right: 10px;
    }

    .p-opcion > .initial {
        margin-left: 8px;
    }

    #productos-head > tr > th {
        text-align: left;
        padding: 10px 10px;
    }

    #productos-body > tr > td {
        border-bottom: 1px solid #e8e6e6;
    }
}

.select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
}

.select2-selection__rendered label {
    margin: 0 !important;
}

.miselect.select2-results__option {
    padding: 3px 6px !important;
}


.tox-statusbar {
    display: none !important;
}

.tox .tox-notification.tox-notification--in.tox-notification--warning {
    display: none !important;
}

.tox .tox-dialog-wrap__backdrop {
    background-color: unset !important;
}

/* .tox.tox-tinymce.tox-tinymce--toolbar-bottom {
     width: 100% !important;
     height: 120px !important;
 }*/

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    padding: 0px 0 !important;
}

.tox-toolbar__primary {
    height: 30px !important;
}

.tox .tox-toolbar__group {
    padding: 0 7px !important;
}

.tox .tox-tbtn {
    height: auto !important;
    margin: 0 !important;
}

.main-tabs {
    background: #FFF !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
}

.main-tabs .tabs-header a {
    font-weight: 700 !important;
}

.bg-active {
    background: #3c7d94 !important;
    color: #FFF !important;
}

input[data-value][type='date'], input[data-value][type='month'] {
    display: flex !important;
    align-items: center !important;
}


#loading-service, .loading-service {
    padding: 8px;
    width: 20px;
    height: 20px;
    display: inline-block;
    opacity: 1;
    border: solid #e6e6e6 4px;
    border-top: 4px solid #0176fe;
}

/* Base genérica */
.is-loading {
    pointer-events: none;
    transition: opacity .2s, filter .2s;
}
.is-loading.dim { opacity: .6; filter: saturate(.5); }

/* ======= SHIMMER ======= */
/* A) Shimmer sobre el PROPIO elemento */
.is-loading.shimmer.loading-self { position: relative; overflow: hidden; }
.is-loading.shimmer.loading-self::after {
    content: "";
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    animation: shimmer 1.25s infinite;
}

/* B) Shimmer sobre los HIJOS DIRECTOS (genérico) */
.is-loading.shimmer.loading-children > * { position: relative; overflow: hidden; }
.is-loading.shimmer.loading-children > *::after {
    content: "";
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    animation: shimmer 1.25s infinite;
}

/* (Opcional) Shimmer sobre TODOS los descendientes — puede ser costoso
.is-loading.shimmer.loading-descendants * { position: relative; overflow: hidden; }
.is-loading.shimmer.loading-descendants *::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: shimmer 1.25s infinite;
} */

@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ======= PULSE (genérico) ======= */
.is-loading.pulse { animation: pulseRow 1.4s ease-in-out infinite; }
@keyframes pulseRow {
    0%, 100% { opacity:.55; filter: saturate(.3); }
    50%      { opacity:.95; filter: saturate(.9); }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .is-loading.pulse { animation: none; }
    .is-loading.shimmer.loading-self::after,
    .is-loading.shimmer.loading-children > *::after { animation: none; }
    /* .is-loading.shimmer.loading-descendants *::after { animation: none; } */
}