@charset "utf-8";
table {
    width: 100%;
}

.gap {
    gap: 5px;
}

.success {
    color: #008000;
}

.error {
    color: #a00000;
}

.suggestions-select {
    position: relative;
}

.suggestions-select input {
    outline: none;
}

.suggestions-select .suggestions {
    z-index: 10;
    position: absolute;
    top: 100%;
    background-color: #fff;
    width: 98%;
    cursor: pointer;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
}

.suggestions-select .suggestions .suggestion {
    padding: 1px 5px;
    border-radius: 4px;
}

.suggestions-select .suggestions .suggestion.selected {
    background-color: #808080;
    color: #fff
}

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

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

.loading-state {
    border: 1px solid #a0a0a0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.warning {
    border: 1px solid #ff8800;
    border-radius: 8px;
    padding: 2px 5px;
    color: #bf4000;
    background-color: #ffdfbf;
}

.w-150 {
    width: 150px;
}

ul.no-bullet {
    list-style-type: none;
}

/* CSS Document */
.paquetes {
	color: #535453;
}

.txttitle {
	font-family: 'Roboto', sans-serif;
	font-size: 1.8rem;
	/* Tamaño de tipografía base */
	color: #393a3a;
}

body {
	overflow-x: hidden;

}

a.link-like, button.link-like{
    border: none;
    background: none;
    text-decoration: underline;
    color: #0000b0;
    width: fit-content(100%);
    cursor: pointer;
}

.fa-arrow-circle-o-up {
	color: #6f6f6f;
}

.fa-arrow-circle-o-down {
	color: #434343;
}

.table-transparent {
	--bs-table-bg: transparent !important;
}

.white-text {
	--bs-table-color: white !important;
}

.form-fields {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-fields .field {
    display: flex;
}

.form-fields .field .label {
    min-width: 400px;
}

.start-hidden {
    display:none;
}

.client-sort-button {
    color: #ffffff;
    background-color: #222222;
    border: none;
}

.client-search-box {
    border-radius: 4px;
    display: inline-block;
    background-color: #ffffff;
    color: #222222;
    padding-left: 5px;
    padding-right: 5px;
}
.client-search-box input{
    padding-left: 5px;
    outline: none;
    border: none;
}

/* =================
 * Api monitor
 * ================= */

.api-monitor {
    display: inline-block;
}

.api-monitor .fixed-configs {
    margin-bottom: 20px;
    line-height: 18px;
    font-size: 13px;
}
.api-monitor .fixed-config b {
    margin-bottom: 10px;
    font-size: 14px;
}

.api-monitor .time-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.api-monitor .card {
    background-color: #212529;
    color: #f0f0f0;
    padding: 10px 20px;
    border: 1px solid #6C757D;
    cursor: pointer;
    text-align: center;
    width: 170px;
}

.api-monitor .card .time-unit {
    font-size: 18px;
    color: #a0a0a0;
}

.api-monitor .card.selected .time-unit {
    color: #f0f0f0;
}

.api-monitor .card.selected {
    border-color: #ffd600;
}

.api-monitor .card.selected:hover {
    border-color: #ffd600;
}

.api-monitor .card:hover {
    border-color: #a0a0a0;
}

.api-monitor .card:hover .time-unit {
    color: #f0f0f0;
}

.api-monitor .card .value {
    font-size: 24px;
    color: #66aaff;
}

.api-monitor .card .value.value-alert {
    color: #dd3333;
}

.api-monitor .request:hover, .api-monitor .request.selected {
    background-color: #181818;
    padding: 5px 20px 2px 20px;
    margin-bottom: 3px;
}

.api-monitor .request {
    border-radius: 8px;
    cursor: pointer;
    padding: 5px 20px;
}

.api-monitor .request.new {
    animation-name: fadein;
    animation-duration: 1s;
}

.api-monitor .request .header {
    display: flex;
    gap: 5px;
    align-items: center;
}

.api-monitor .request .content {
    display: none;
    padding: 0px 20px;
}

.api-monitor .request .content .title {
    font-size: 12px;
    font-weight: bold;
    color: #606060;
    letter-spacing: 0.8px;
}

.api-monitor .request.selected .content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.api-monitor .request.selected .content .area {
    padding: 4px;
    border-radius: 4px;
}

.api-monitor .request .content .params.list {
    padding: 0px 20px;
}

.api-monitor .request .content .param {
    display: flex;
    gap: 5px;
}

.api-monitor .request .content .param .key {
    color: #c0c0c0;
}

.api-monitor .request .time {
    color: #66aaff;
}

.api-monitor .request .method {
    color: #ffaa66;
}

.api-monitor .request .url {
    color: #ffffff;
    font-size: 18px;
}

.api-monitor .request .content .restrictions-info.list {
    padding: 0px 20px;
}

.api-monitor .request .restrictions-info .values {
    display: flex;
    gap: 5px;
}

.api-monitor .request .values {
    padding: 0px 20px;
}

@keyframes fadein {
    from { transform: scaleY(0) }
    to { transform: scaleY(1) }
}

main.admin input {
    outline: none;
}

main.admin div.small-arrow {
    cursor:pointer;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 18px;
    margin: 0px;
    border: 1px solid #888;
    border-radius: 4px;
    background: none;
}

main.admin .empty-state {
    color: #585858;
    font-size: 18px;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    text-align: center;
    border: 1px solid #afafaf;
    border-radius: 8px;
    min-height: 80px;
    display:flex;
    align-items: center;
    justify-content: center;
}

main.admin {
    min-height: 100vh;
}

main.admin .dotted-table {
    display: inline-block;
    border: 1px dashed #ff8f8f;
    border-radius: 8px;
}

main.admin .dotted-row {
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px dashed #ff8f8f;
}

main.admin .dotted-row:last-child {
    border-bottom: none;
}

main.admin .dotted-row > div {
    border-right: 1px dashed #ff8f8f;
    padding: 4px 10px;
}

main.admin .dotted-row > div:last-child {
    border-right: none;
}

main.admin .btn.back {
    margin-bottom: 8px;
}

.labels-manager {
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    padding: 4px;
    display: flex;
    width: 270px;
    flex-wrap: wrap;
    gap: 3px;
    position: relative;
    cursor: text;
    background-color: #fff;
}

.labels-manager .label {
    background-color: #808080;
    color: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    cursor: default;
}

.remove-tag-button {
    border: none;
    border-radius: 3px;
    background-color: none;
    font-size: 14px;
    line-height: 8px;
    width: 14px;
    height: 14px;
    padding-bottom: 2px;
    transform: translate(-0px, -1px);
}

main.admin button.remove-tag-button {
    min-width: 0;
}

.veil {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    flex-direction: column;
    font-weight: bold;
    display: flex;
}

.labels-manager .veil {
    display: none;
}

.labels-manager input {
    outline: none;
    width: 70px;
    height: 24px;
    border: none;
}

.labels-manager .suggestions {
    display: none;
    position: absolute;
    top: 100%;
    background-color: #fff;
    width: 98%;
    cursor: pointer;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
}

.labels-manager .suggestions .suggestion {
    padding: 1px 5px;
    border-radius: 4px;
}

.labels-manager .suggestions .suggestion.selected {
    background-color: #808080;
    color: #fff
}

.label-admin .series .serie .remove {
    cursor: pointer;
}


main.admin .user-groups table {
    width: 100%;
}

main.admin .user-groups table tbody tr {
    border-bottom: 1px solid #a0a0a0;
}

main.admin .user-groups table tbody tr:last-child {
    border-bottom: none;
}

main.admin .user-groups table tbody tr td {
    padding: 5px;
}

main.admin .actions {
    display: flex;
    justify-content: center;
}

main.admin .user-groups .users {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

main.admin .user-groups .users .user {
    background-color: #808080;
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 0px 3px;
}

main.admin .user-groups .users .user.shares-api-key {
    background-color: #ffd600;
    color: #404040;
}

main.admin .user-groups .actions {
    display: flex;
    gap: 5px;
    color: #303030;
}

main.admin .user-group .actions {
    min-width: 40px;
    display: flex;
    gap: 2px;
    align-items: center;
}

main.admin .actions i {
    cursor: pointer;
}

main.admin .actions a {
    line-height: 14px;
}

main.admin .user-group .selected-users {
    background-color: #f1f3f5;
    width: 500px;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 8px;
}

main.admin .user-group .selected-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d0d0d0;
    padding: 2px;
    gap: 5px;
}

main.admin .user-group .selected-user.shares-api-key {
    background-color: #ffffff;
}

main.admin .user-group .status {
    line-height: 14px;
    font-size: 14px;
    font-style: italic;
    margin-bottom: 8px;
    background-color: #ffefbf;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

main.admin .user-group .selected-user:last-child {
    border-bottom: none;
}

main.admin .user-group .selected-user i {
    cursor: pointer;
}

main.admin i.remove { color: #b05050; }
main.admin i.remove:hover { color: #c03030; }

main.admin i.edit { color: #2030c0; }
main.admin i.edit:hover { color: #0010e0; }

main.admin .user-group .selected-user i.shared-key { color: #909090; }
main.admin .user-group .selected-user i.shared-key:hover { color: #505050; }
main.admin .user-group .selected-user i.shared-key.selected { color: #cc8800; }

main.admin button {
    min-width: 100px;
}

.api-monitor .empty-state {
    margin: 20px;
    background-color: #282828;
}

main.admin .progress-bar {
    height: 14px;
    max-width: 800px;
    display: flex;
    justify-content: flex-start;
    border-radius: 4px;
    background-color: #e9ecef;
}

main.admin .progress-bar .progress-bar-fill {
    height: 100%;
    width: 0px;
    background-color: #faa;
}

/* --- api monitor admin --- */

main.admin .api-monitor-admin table {
    width: 100%;
}

main.admin .api-monitor-admin table tr th.center, main.admin table tr td.center{
    text-align: center;
}

main.admin .api-monitor-admin table tbody tr {
    border-bottom: 3px solid #202020;
}

main.admin .api-monitor-admin table tbody tr .name {
    padding-left: 10px;
    border-left: 4px solid #202020;
}

main.admin .api-monitor-admin table tbody tr:hover .name {
    border-left: 4px solid #505050;
}

main.admin .api-monitor-admin table tr td {
    padding: 2px;
}

main.admin .api-monitor-admin .card-body {
    background-color: #202020;
    color: #ffffff;
}

main.admin .api-monitor-admin .gauge {
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
    line-height: 13px;
    height: 28px;
    width: 55px;
    padding: 2px 10px 5px 0px;
    box-sizing: content-box;
    border-top: 2px solid #606060;
    border-left: 2px solid #606060;
    border-bottom: 2px solid #101010;
    border-right: 2px solid #101010;
    cursor: pointer;
    position: relative;
}

main.admin .api-monitor-admin .gauge.pressed {
    border-top: 2px solid #101010;
    border-left: 2px solid #101010;
    border-bottom: 2px solid #606060;
    border-right: 2px solid #606060;
}

main.admin .api-monitor-admin .gauge .light-area {
    height: 100%;
    width: 34%;
}

main.admin .api-monitor-admin .gauge .values {
    flex-grow: 1;
}

main.admin .api-monitor-admin .gauge .values.red {
    color: #f04040;
}

main.admin .api-monitor-admin .light {
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
}

main.admin .api-monitor-requests-list {
    background-color: #2b2b2b;
    padding: 10px;
}

main.admin .api-monitor-requests-list .header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: 1px solid #404040;
    margin-bottom: 10px;
    border: 5px solid #202020;
    gap: 1px;
}

main.admin .api-monitor-requests-list .header > div {
    font-size: 24px;
    flex-grow: 1;
    background-color: #202020;
}

main.admin .api-monitor-requests-list .header .user {
    color: #dc3545;
    min-width: 500px;
    padding: 5px 25px;
}

main.admin .api-monitor-requests-list .header .info-box {
    font-size: 14px;
    min-width: 200px;
    padding: 5px;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

main.admin .api-monitor-requests-list .header .status-box {
    font-size: 14px;
    padding: 5px;
    flex-grow: 0;
}

main.admin .api-monitor-requests-list .header .light-container {
    display: flex;
    align-items: center;
    gap: 3px;
}

main.admin .api-monitor-requests-list .header .refreshing-light {
    background-color: #202020;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    border-right: 1px solid #606060;
    border-bottom: 1px solid #606060;
}

main.admin .api-monitor-requests-list .header .refreshing-light.on {
    background-color: #00df00;
}

main.admin .api-monitor-requests-list .content {
    position: relative;
    padding: 10px;
    border-radius: 4px;
}

main.admin .api-monitor-requests-list .header strong {
    font-weight: bold;
    min-width: 200px;
}

main.admin .api-monitor-requests-list .rejected {
    color: #f02020;
}

main.admin .api-monitor-requests-list .approved {
    color: #00a000;
}

main.admin .paginator, .api-monitor .paginator {
    margin-top: 10px;
    gap: 10px;
    justify-content: left;
}

main.admin .paginator .page {
    min-width: 30px;
    text-align: center;
}

main.admin .paginator .page.selected, .api-monitor .paginator .page.selected {
    font-weight: bold;
    font-size: 18px;
}

main.admin .paginator .page:not(.selected), .api-monitor .paginator .page:not(.selected) {
    cursor: pointer;
}

main.admin .api-monitor-requests-list table tbody tr, main.admin .api-monitor-requests-list table thead tr {
    border-bottom: none;
}

main.admin .api-monitor-requests-list .request-line {
    cursor: pointer;
}

main.admin .api-monitor-requests-list .request-line td:first-child{
    padding-left: 10px;
}

main.admin .api-monitor-requests-list .request-line.open {
    background-color: #343434;
}

main.admin .api-monitor-requests-list .request-details {
    padding: 10px;
    background-color: #242424;
    padding-left: 20px;
}

main.admin .api-monitor-requests-list .request-details .detail-header {
    font-weight: bold;
}

main.admin .api-monitor-requests-list .request-details .detail {
    padding-left: 10px;
}

main.admin .api-monitor-requests-list .restrictions-info .values {
    display: flex;
    gap: 5px;
    padding-left: 12px;
}

main.admin .api-monitor-requests-list .request-line:hover {
    background-color: #343434;
}

main.admin .api-monitor-requests-list .empty-state,
main.admin .api-monitor-requests-list .loading-state {
    min-height: 100px;
    color: #a0a0a0;
}

main.admin .api-monitor-requests-list .loading-screen {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 20px;
    text-shadow: 2px 2px 0px #303030;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,0.3);
    flex-direction: column;
    border-radius: 4px;
    gap: 10px;
}

main.admin .api-monitor-requests-list .url {
    position: relative;
}

main.admin .limit-icon {
    position: absolute;
    width: 16px;
    left: -12px;
    top: -4px;
}

main.admin .rejected-series-icon.fa-ban {
    color: #aa2222;
}

main.admin .gauge .limit-icon {
    width: 12px;
    top: initial;
    left: 4px;
    bottom: 2px;
    opacity: 0.8;
}

/* sima-select */

main.admin .sima-select {
    min-width: 100px;
    border: none;
}

main.admin .user-group .sima-select {
    min-width: 500px;
}

main.admin .sima-select > div > input {
    color: #707070;
    border: 1px solid #8f8f9d;
    border-radius: 0px;
}

main.admin .user-group .sima-select > div > input {
    text-align: center;
    background-color: #c1c3c5;
}

.sima-select {
    display: flex;
    flex-direction: column;
    border-width: 1px;
    border-color: #888;
    border-style: solid;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

.sima-select.error {
    border: 2px solid red;
}

.sima-select.unfolded {
    border-width: 1px 1px 0px 1px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.sima-select .selected-option {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.sima-select .selected-option input {
    padding: 4px 22px 4px 8px;
    width: 100%;
    border: none;
    border-radius: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-group .sima-select .selected-option input {
    cursor: pointer;
}

.sima-select .selected-option i {
    position: absolute;
    right: 4px;
    top: 4px;
}

.sima-select .options-box {
    position: absolute;
    display: none;
	width: 100%;
    border-width: 0px 1px 1px 1px;
    border-color: #333;
    border-style: solid;
    background-color: #fff;
    top: 100%;
    left: -1px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-sizing: content-box;
    z-index: 10;
}

.sima-select .options-box .search-box{
    margin: 4px 8px;
}

.sima-select .options-box .search-box input{
    width: 100%;
    outline: none;
}

.sima-select.unfolded .options-box {
    display: block;
}

.sima-select .options-box .options {
    max-height: 300px;
    overflow-y: scroll;
}

.sima-select .option {
    padding: 4px 8px;
}

.sima-select .option.highlighted {
    padding: 4px 8px;
    background-color: #ddd;
}

/* end sima-select */

/* livewire frontend */

.api-key-lines {
    display: inline-block;
}

.api-key-line {
    display: flex;
    padding: 5px;
    align-items: center;
    border-radius: 8px;
    gap: 5px;
    flex-wrap: wrap;
}

.api-key-line.selected {
    background-color: #333333;
}

.api-key-line > label {
    padding: 5px;
    width: 250px;
    border-radius: 8px;
}

.api-key-line > h5 {
    width: 250px;
    background-color: #666666;
    padding: 5px;
    border-radius: 8px;
}

span.error {
    color: #af0000;
    padding: 0px 15px;
}

.selected-series {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.selected-serie {
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #dfdfdf;
    color: #303030;
    font-weight: bold;
}

/* dialog box */

.dialog-container {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
}

.dialog-box {
    background-color: #fff;
    border-radius: 8px;
    overflow: scroll;
    min-width: 300px;
    max-height: 100vh;
    max-width: 800px;
}

.dialog-box::-webkit-scrollbar {
    display: none;
}

.dialog-header {
    padding: 8px 20px;
    border-bottom: 1px solid #666;
}

.dialog-header .title {
    border: 1px solid red;
    font-size: 16px;
}

.dialog-header .cross{
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.dialog-header .cross:hover{
    color: #444;
}

.dialog-content {
    padding: 20px;
}
.dialog-content .line {
    display: flex;
    margin-bottom: 20px;
}
.dialog-content .label {
    width: 150px;
    text-align: right;
}
.dialog-content .value {
    width: 350px;
    text-align: left;
    padding-left: 20px;
}
.dialog-box .buttons {
    margin-top: 10px;
    text-align: right;
}
.dialog-box .buttons button {
    border-radius: 20px;
    margin-left: 16px;
}

.dialog-box.confirmation {
    padding: 20px;
}
.dialog-box.confirmation .question{
    margin-bottom: 20px;
}

.dialog-content.medium {
    width: 500px;
}

.dialog-content.big {
    width: 750px;
}

/* end dialog box */

/* landing */
.landing .alert {
    position: fixed;
    min-width: 60%;
    max-width: 80%;
    top: 30px;
    transform: translate(calc(50vw - 50%));
    z-index: 100;
    text-align: center;
}

.landing .contact-form {
    max-width: 800px;
}

main.admin .api-monitor-requests-list .empty-state {
    border: 1px solid #585858;
    color: #585858;
    font-size: 18px;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    text-align: center;
    border-radius: 8px;
    min-height: 80px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

main.admin .empty-state .second-line {
    color: #989898;
    font-size: 14px;
    font-weight: bold;
}

main.admin h4 {
    margin-top: 10px;
}
main.admin .inputs-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

main.admin .input-line > label {
    min-width: 100px;
}

main.admin .inner-menu {
    display: flex;
    justify-content: space-between;
    padding: 0px 10px;
    align-items: center;
    margin-bottom: 10px;
}

main.admin .hid-admin-button {
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    padding: 3px 10px;
    background-color: #efefef;
    color: #404040;
}

main.admin button.hid-admin-anchor-like {
    text-decoration: underline;
    color: blue;
    border: none;
    background: none;
    font-size: 12px;
}

main.admin .hid-admin-a-button:hover {
    text-decoration: underline;
}

main.admin .hid-admin-button.highlight, main.admin .hid-admin-button.highlight:disabled:hover {
    background-color: #ffafaf;
    border: none;
}

main.admin .hid-admin-button.highlight:hover {
    background-color: #ef9f9f;
}

main.admin .hid-admin-button:hover {
    background-color: #dfdfdf;
}

main.admin .hid-admin-button:disabled {
    color: #a0a0a0;
}

main.admin .hid-admin-button:disabled:hover {
    background-color: #efefef;
}

main.admin .hid-admin-input {
    border-radius: 8px;
    border: 1px solid #cfcfcf;
    padding: 3px 10px;
    outline: none;
}

main.admin .hid-admin-input:focus {
    outline: 1px solid #ffafaf;
}

main.admin .areas button {
    margin-top: 5px;
}

main.admin .products-admin .configs .config {
    border-bottom: 1px dotted #ffafaf;
    color: #606060;
}

main.admin .products-admin .configs .config.available:hover, {
    background-color: #ffdfdf;
}

main.admin .products-admin .configs .config.selected, {
    background-color: #ffdfdf;
}

main.admin .products-admin .configs .config.available, {
    color: #303030;
    cursor: pointer;
}

main.admin .products-admin .configs .config:last-child {
    border-bottom: none;
}

main.admin .products-admin .selected-configs {
    display: inline-block;
    border: 1px dashed #ff8f8f;
    border-radius: 8px;
    margin-bottom: 8px;
}

main.admin .products-admin .selected-configs .selected-config {
    display: flex;
    border-bottom: 1px dashed #ff8f8f;
}

main.admin .products-admin .selected-configs .selected-config:last-child {
    border-bottom: none;
}

main.admin .products-admin .selected-configs .selected-config > div {
    padding: 2px;
}

main.admin .products-admin .selected-configs .selected-config > div:first-child {
    width: 100px;
    font-size: 12px;
    text-align: center;
    border-right: 1px dashed #ff8f8f;
}
main.admin .products-admin .selected-configs .selected-config > div:last-child {
    padding: 2px 20px 2px 10px;
}

main.admin .products-admin .available-configurations .buttons {
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
}

main.admin .products-admin .hint {
    padding: 0px 20px;
    font-size: 18px;
    color: #606060;
    margin-bottom: 10px;
}

main.admin .areas {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

main.admin .products-admin .tier-configs-list {
    margin-top: 10px;
}

main.admin .products-admin .tier-configs-list .configuration {
    display: flex;
    margin-top: 4px;
}

main.admin .products-admin .tier-configs-list .configuration .description {
    flex-grow: 1;
}

main.admin .products-admin .tier-configs-list .configuration .value {
    width: inherit;
}

main.admin .products-admin .tier-configs-list .configuration input {
    width: 100px;
    text-align: right;
}

main.admin .products-admin .tiers {
    border-radius: 8px;
    display: flex;
    width: 350px;
    flex-direction: column;
    gap: 2px;
    background-color: #e0e0e0;
    padding: 8px;
}

main.admin .products-admin .tiers .tier {
    background-color: #ffffff;
    border: 1px solid #808080;
    display: flex;
    border-radius: 8px;
    border-bottom: 1px solid #404040;
    box-shadow: inset -2px -2px 2px 0px #808080;

}

main.admin .products-admin .tiers .tier:last-child {
}

main.admin .products-admin .tiers .tier .name {
    padding: 5px;
    width: 230px;
}

main.admin .products-admin .tiers .tier .button {
    width: 30px;
    border-left: 1px solid #a0a0a0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

main.admin .products-admin .tiers .tier .button.disabled {
    cursor: default;
}

main.admin .products-admin .tiers .tier .button.remove { color: #802020; }
main.admin .products-admin .tiers .tier .button.edit { color: #202080; }
main.admin .products-admin .tiers .tier .button.move-up { color: #a04020; }
main.admin .products-admin .tiers .tier .button.move-up.disabled { color: #b0b0b0; }
main.admin .products-admin .tiers .tier .button.move-down { color: #a04020; }
main.admin .products-admin .tiers .tier .button.move-down.disabled { color: #b0b0b0; }

main.admin .products-admin .tier-dialog .loading-state {
    margin-top: 20px;
    border: none;
    min-height: 100px;
    min-width: 300px;
    flex-direction: column;
    gap: 10px;
}

main.admin .products-admin .permissions-list .permission {
    border-bottom: 1px dotted #ffafaf;
    padding: 3px 8px;
    cursor: pointer;
}

main.admin .products-admin .permissions-list .permission:hover {
    background-color: #ffdfdf;
}

main.admin .products-admin .permissions-list .permission.selected {
    background-color: #ffdfdf;
}

main.admin .products-admin .permissions .permission {
    display: flex;
    align-items: center;
}

main.admin .products-admin .permissions .permission .specific-tier {
    color: #a04020;
}

main.admin .products-admin .permissions .permission .description {
    width: 300px;
}

main.admin .area.labels .labels-box {
    border: 1px solid #afafaf;
    border-radius: 4px;
    display: flex;
    max-height: 500px;
}

main.admin .area.labels .labels-box input {
    outline: none;
}

main.admin .area.labels .labels-box .add-box button {
    width: 80px;
    outline: none;
}

main.admin .area.labels .labels-box .types-box {
    cursor: pointer;
    width: 25%;
    height: 600px;
    display: flex;
    flex-direction: column;
}

main.admin .area.labels .labels-box .types-box .add-box {
    padding: 4px;
}

main.admin .area.labels .labels-box .types-box input{
    max-width: 130px;
}

main.admin .area.labels .labels-box .types {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    border: 1px dashed #ff8080;
    border-radius: 8px;
    margin: 5px;
    max-height: 410px;
}

main.admin .area.labels .labels-box .types .type {
    border-bottom: 1px dashed #ff8080;
    width: 100%;
    padding: 3px 10px 3px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
main.admin .area.labels .labels-box .types .type i {
    color: #505050;
}

main.admin .area.labels .labels-box .types .type:last-child {
    border-bottom: none;
}

main.admin .area.labels .labels-box .types .type:hover {
    background-color: #ffe0e0;
}

main.admin .area.labels .labels-box .labels {
    width: 75%;
    display: flex;
    flex-direction: column;
}

main.admin .area.labels .labels-box .labels .loading-state {
    border: none;
    height: 100%;
}

main.admin .area.labels .labels-box .header {
    padding: 2px 4px;
    border-bottom: 1px solid #bfbfbf;
}

main.admin .area.labels .labels-box .labels .header {
    border-left: 1px solid #bfbfbf;
}

main.admin .area.labels .labels-box .labels .header input {
    border-radius: 4px;
    border: 1px solid #bfbfbf;
}

main.admin .area.labels .labels-box .labels .error-message {
    border: 1px solid #800000;
    border-radius: 8px;
    margin: 2px;
    color: #800000;
    padding: 2px 10px;
    background-color: #ffbfbf;
}

main.admin .area.labels .labels-box .selected-label {
    border-bottom: 1px dashed #808080;
    display: flex;
    gap: 5px;
    padding: 5px;
}

main.admin .area.labels .labels-box .labels .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px;
    padding-right: 10px;
    overflow-y: scroll;
}

main.admin .area.labels .labels-box .labels .label.selected {
    background-color: #bfcfff;
}

main.admin .area.labels .labels-box .labels .label:not(.selected):hover {
    background-color: #dfdfff;
}

main.admin .labels-admin .labels .label {
    border: 1px dashed #8080ff;
    background-color: #f0f0ff;
    border-radius: 4px;
    padding: 2px 4px;
    cursor: pointer;
}

main.admin .selected-entities {
    margin-top: 10px;
    display:flex;
    gap: 5px;
    justify-content: space-between;
    background-color: #afbfff;
    padding: 10px 20px;
    border-radius: 8px;
    align-items: stretch;
    position: relative;
}

main.admin .selected-entities > div {
    padding: 5px;
    text-align: center;
}


main.admin .selected-entities .series {
    flex-grow: 1;
}

main.admin .selected-entities .selected-series,
main.admin .selected-entities .selected-labels {
    font-size: 20px;
}

main.admin .selected-entities .selected-labels .label-type-small {
    font-size: 10px;
    font-weight: bold;
}
main.admin .selected-entities .selected-labels .label-name {
    line-height: 20px;
}

main.admin .selected-entities .selected-labels {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

main.admin .selected-entities .selected-labels .label {
    font-size: 24px;
    border: 1px dashed #8080ff;
    background-color: #dfdfff;
    border-radius: 4px;
    padding: 6px 8px;
    text-align: center;
    position: relative;
    cursor: default;
    min-width: 200px;
    max-width: 300px;
}

main.admin .selected-entities .selected-labels .label .remove-button{
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    padding-right: 1px;
    line-height: 12px;
    font-size: 12px;
    border-radius: 50%;
    background-color: #505050;
    border: 1px solid #808080;
    color: #ffffff;
    cursor: pointer;
}

main.admin .selected-entities .selected-series {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

main.admin .selected-entities .selected-series .list {
    text-align: left;
    font-size: 14px;
}

main.admin .selected-entities .operations {
    display: flex;
    align-items: center;
    flex-direction: column;
}

main.admin .assign-confirmation-dialog .warnings{
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

main.admin .select-labels-dialog {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-height: 500px;
}
main.admin .select-labels-dialog .labels-for-removal {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
main.admin .select-labels-dialog .labels-for-removal .label {
    width: auto;
    text-align: center;
}

main.admin .select-labels-dialog .labels-for-removal .label.selected {
    background-color: #bfcfff;
}

main.admin .series-explorer table tr {
    border: 1px solid #afafaf;
}

main.admin .series-explorer table thead i.fa {
    cursor: pointer;
}

main.admin .series-explorer table tr td, main.admin .series-explorer table tr th {
    padding: 5px;
    border: 1px solid #afafaf;
    text-align: center;
}

main.admin .series-explorer .labels {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

main.admin .series-explorer .labels .label {
    cursor: default;
}

main.admin .series-explorer .applied-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-bottom: 5px;
}

main.admin .series-explorer .applied-filters .applied-filter {
    background-color: #808080;
    color: #ffffff;
    padding: 0px 7px;
    border-radius: 4px;
}

main.admin .filters {
    display: flex;
    padding: 5px;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

main.admin .filters .hid-admin-button {
    height: 20px;
    padding: 0px;
    border-radius: 0px;
    line-height: 20px;
}

main.admin .filters .field-tip {
    border: 1px solid #afafaf;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 14px;
    line-height: 14px;
    display: flex;
    justify-content: center;
    padding-top: 1px;
    font-weight: bold;
    color: #505050;
    cursor: default;
    position: relative;
}

main.admin .filters .field-tip.id .tip-message span{
    background-color: #f0e0a0;
}
main.admin .filters .field-tip .tip-message {
    display: none;
    font-weight: normal;
    line-height: 20px;
    z-index: 10;
    position: absolute;
    background-color: rgba(255,255,255,1.0);
    top: -30px;
    left: 30px;
    min-width: 180px;
    color: #303030;
    border-radius: 4px;
    border: 1px solid #606060;
    padding: 8px;
}

main.admin .filters .field-tip:hover .tip-message {
    display: block;
}

main.admin .filters .filter {
    display: flex;
    gap: 5px;
}

main.admin .filters .filter input {
    height: 20px;
}

main.admin .series-explorer .series-table-container {
    position: relative;
}

main.admin .series-explorer .filter.ids {
    gap: 2px;
}

main.admin .series-explorer .series .inactive {
    background-color: #ddd;
}

#admin-series-edit .last-api-call {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: #ffefbf;
}

#admin-series-edit .last-api-call .labels {
    display: flex;
    gap: 5px;
}

#admin-series-edit .last-api-call .labels .label {
    background-color: #ffffff;
    border-radius: 4px;
    padding: 2px 4px;
    box-shadow: #444 2px 2px 2px;
}
/*
 * Admin de usuarios
 */

#admin-user-edit .products-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

#admin-user-edit .products-list .product {
    display: flex;
    gap: 5px;
}

#admin-user-edit .products-list .product .name {
    width: 300px;
}

#admin-user-edit .products-list .product select {
    width: 240px;
}

.flash-message {
    position: fixed;
    padding: 10px;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 10;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    display: none;
    opacity: 0.8;
}

.flash-message.managed {
    display: block;
}

.flash-message.success {
    background-color: #008800;
}

.flash-message.error {
    background-color: #aa0000;
}

td.admin-user-products {
    padding: 0px;
    padding-left: 0.5rem;
}

table.admin-users > tbody > tr:nth-child(odd) .admin-user-products table {
    background-color: #dfdfdf;
}

.admin-user-products table tr {
    font-size: 12px;
    line-height: 13px;
    margin-bottom: 0px;
    padding-left: 0px;
    border-bottom: 1px solid #a0a0a0
}

.admin-user-products table tr td.tier {
    border-left: 1px solid #808080;
    padding-left: 2px;
}

.admin-user-products.empty-state {
    flex-direction: column;
    height: 100%;
    position: relative;
}
.admin-user-products.empty-state div {
    position: absolute;
    border: 2px solid #bfbfbf;
    border-radius: 8px;
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    color: #808080;
    font-weight: bold;
    font-size: 14px;
    line-height: 15px;
}

.nav-language {
    font-size: 24px;
    background-color: transparent;
    border: none;
    position: relative;
}

.nav-language .flag-container {
    position: absolute;
    line-height: 0px;
    top: 20px;
    left: 0px;
}

.nav-language .language-list {
    display: none;
    font-size: 12px;
    position: absolute;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #aaa;
    right: 0px;
    padding: 5px 0px;
    list-style-position: outside;
}

.nav-language .language-list.vue {
    display: block;
}

.nav-language .language-list a div {
    text-align: left;
    padding: 5px 10px;
    display: flex;
    gap: 4px;
}

.nav-language .language-list a div:hover {
    background-color: #efefef;
}

.nav-language .language-list a {
    text-decoration: none;
    color: #303030;
}

.nav-language .flag {
    width: 16px;
}

.topbar-products {
    color: #000;
}

.topbar-products li {
    list-style-type: disc;
}

.badge.sidebar-like {
}

a:disabled {
    color: #808080;
}

.layout-modal-backdrop {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
}
.layout-modal {
    background-color: #303030;
    border-radius: 8px;
    min-width: 300px;
    text-align: center;
    padding: 20px;
    position: relative;
}
.layout-modal .message {
    margin-bottom: 40px;
}
.layout-modal .close-cross {
    position: absolute;
    top: -8px;
    right: -4px;
    padding: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #333;
}
.one-line {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.upgrade-badge {
    cursor: pointer;
}

.ml-3 {
    margin-left: 25px;
}

.pb-iframe-container {
    display: flex;
    justify-content: center;
}

.pb-iframe-wrapper {
    overflow-y: hidden;
}

.pb-iframe-wrapper.landing {
    width: 40vw;
    height: 20vw;
}

.pb-iframe-wrapper.landing iframe {
    width: 40vw;
    height: 24vw;
}

.pb-iframe-wrapper.app {
    width: 80vw;
    height: 40vw;
}

.pb-iframe-wrapper.app iframe {
    width: 80vw;
    height: 45vw;
}

#shareMultipleSeriesModal .selected-item .email {
    color: #ffffff;
}

#shareMultipleSeriesModal .selected-items {
    margin: 5px;
}

#shareMultipleSeriesModal .selected-item button {
    color: #88aaff;
}

#shareMultipleSeriesModal .status-bar .spinner-border {
    width: 1rem;
    height: 1rem;
}

#shareMultipleSeriesModal .status-bar {
    padding: 4px 6px;
    border-radius: 4px;
    color: #ffffff;
    margin-bottom: 10px;
}

#shareMultipleSeriesModal .status-bar.idle { display: none; }
#shareMultipleSeriesModal .status-bar.working { background-color: #aaaaaa; color: #333; }
#shareMultipleSeriesModal .status-bar.notice { background-color: #aa8800; }
#shareMultipleSeriesModal .status-bar.success { background-color: #006600; }
#shareMultipleSeriesModal .status-bar.error { background-color: #aa0000; }

.download-data-button {
    background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%)!important;
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-weight: normal!important;
    color: #ffffff;
    padding: 7px 12px;
    font-size: 13px;
    position: relative;
}
.download-data-button:hover {
    border: 1px solid rgba(0, 0, 0, 0.6);
}
.download-data-button:active {
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: #bbbbbb;
}
.download-data-button-wrapper .info {
    display: none;
    position: absolute;
    background-color: rgba(255,255,255,0.7);
    top: 40px;
    color: #303030;
    border-radius: 4px;
    border: 1px dashed #606060;
    padding: 8px;
}
.download-data-button-wrapper:hover .info {
    display: block;
}