html, body {
    color: #1b181d;
    background-color: #5f1f70;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Only hide overflow on the main page with #scrollable */
body:has(#scrollable) {
    overflow: hidden;
}

header {
    background-image: linear-gradient(90deg, #4a1857 0%, #3a1344 70%);
    height: 55px;
    max-height: 55px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
}

footer {
    width: 100%;
    background: yellow;
    position: fixed;
    bottom: 0;
    height: 30px;
}


.ltp-body {
    background-image: linear-gradient(180deg, #7b1294 0%, #3a1344 70%);
}

.ltp-body-img {
    background-color: #7b1294;
}


.ltp-option-row {
    background-image: linear-gradient(90deg, #4a1857 0%, #3a1344 70%);
    height: 38px;
    max-height: 38px;
    margin-left: 0px;
    margin-right: 0px;
}

.ltp-search-bar {
    background-image: linear-gradient(90deg, #4a1857 0%, #3a1344 70%);
    height: 32px;
    max-height: 32px;
    margin-left: 0px;
    margin-right: 0px;
}

.ltp-filter-tag {
    color: #6c22a7;
    font-weight: 700;
}

.ltp-filter-date {
    color: #6c22a7;
    font-weight: 300;
}

.ltp-filter-url {
    color: #834a04;
    font-weight: 200;
}

.ltp-card {
    background-color: #f5f5f5;
    transition: all 0.35s;
    margin: 6px 6px 6px 6px;
    width: 442px;
    border: 1px solid #671c7c;
    border-radius: 1rem;
}

    .ltp-card:hover {
        transition: all 0.35s;
    }


.ltp-card-img {
    background-color: #f5f5f5;
    color: black;
    transition: all 0.35s;
    margin: 6px 6px 6px 6px;
    border: 1px solid #671c7c;
    border-radius: 8px;
}
    .ltp-card-img:hover {
        transition: all 0.35s;
    }



/* Bootstrap multiselect-hez */
.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + .5rem + 2px);
    padding: .4rem 1.75rem .5rem .55rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: #40474f;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat;
    border: 1px solid #78228f;
    border-radius: .4rem;
    -webkit-appearance: none;
    -moz-appearance: none;
}


span.multiselect-native-select {
    position: relative;
    width: 100%;
}

.multiselect-container {
    background-color: #efe7f1;
}
    .multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback),
    .multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback),
    .multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback) {
        background-color: #52328a;
        color: white;
    }
    .multiselect-container .multiselect-option:not(.multiselect-active-item-fallback):active,
    .multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active,
    .multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active {
        background-color: #8764c4 !important;
        color: white;
    }
    .multiselect-container .multiselect-option:hover, .multiselect-container .multiselect-group:hover, .multiselect-container .multiselect-all:hover, .multiselect-container .multiselect-option:focus, .multiselect-container .multiselect-group:focus, .multiselect-container .multiselect-all:focus {
        background-color: #8764c4 !important;
        color: white;
    }
    .multiselect-container .multiselect-option, .multiselect-container .multiselect-group, .multiselect-container .multiselect-all {
        padding: 0.2rem 0.25rem 0.2rem 0.75rem;
    }
.form-check-input {
    position: absolute;
    margin-top: 0.15rem;
    margin-bottom: 0.3rem;
    margin-left: -1.25rem;
    margin-right: 1.2rem;
}
.form-check-label {
    margin-bottom: 0;
    margin-left: .5rem;
    margin-right: 1.2rem;
}

.badge {
    font-size: 1rem;
    font-weight: 500;
    font-size: 12px;
    font-weight: 500;
    color: white;
}
.bg-info {
    color: white;
    background-color: #52328a !important;
    border: 1px solid #a58736;
    border-radius: .4rem;
}


.btn-dark {
    color: #fff;
    background-color: #3a1344;
    border-color: #936822;
    font-weight: 400;
    color: #ebca7c;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1.1rem;
    line-height: 1.5;
    border-radius: 0.5rem;
}

    .btn-dark:hover {
        color: #fff;
        background-color: #591d68;
        border-color: #dd9f3c;
    }

    .btn-dark:focus, .btn-dark.focus {
        box-shadow: 0 0 0 0.2rem rgba(66, 70, 73, 0.5);
    }

    .btn-dark.disabled, .btn-dark:disabled {
        color: #fff;
        background-color: #212529;
        border-color: #212529;
    }

    .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
    .show > .btn-dark.dropdown-toggle {
        color: #fff;
        background-color: #0a0c0d;
        border-color: #050506;
    }

        .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
        .show > .btn-dark.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(66, 70, 73, 0.5);
        }
/* Button navigations */
.btn.btn-nav-rfr {
    border-color: #936822;
    border-radius: 0.4rem;
    /* min-width: 170px; */
    /* max-width: 240px; */
    width: 100%;
    max-height: 29px;
}

/* Button navigations */
.btn.btn-nav-hist {
    border-color: #936822;
    border-radius: 0.4rem;
    /* min-width: 170px; */
    /* max-width: 200px; */
    width: 100%;
    max-height: 29px;
}

.btn.btn-nav-more {
    border-color: #936822;
    border-radius: 0.4rem;
    min-width: 130px;
    max-width: 170px;
    width: 100%;
    max-height: 27px;
}





.blazor-context-menu__item--default {
    padding-top: 1px;
    padding-bottom: 1px;
}

.ql-container {
    max-height: 60vh;
}

.ql-editor {
    max-height: 58vh;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
}

.modal-dialog2 {
    max-width: 500px;
}

.blazored-typeahead {
    position: relative;
    width: 100%;
    height: 29px;
    max-height: 29px;
    border: 1px solid #bfbfbf;
    border-radius: 5px;
}

.blazored-typeahead__controls {
    position: relative;
    cursor: text;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    /* align-content: space-between; */
    justify-content: flex-start;
    align-items: center;
}
.blazored-typeahead__input {
    flex: 1;
    min-width: 100px;
    border: none;
    padding: .2rem;
    margin-left: .2rem;
    margin-right: .2rem;
    border-radius: 5px;
}

.blazored-daterangepicker {
    flex: 1;
    max-width: 100%;
    width: 170px;
    max-height: 23px;
    height: 23px;
    border: none;
    padding: .2rem;
    border-radius: 5px;
    text-align: center;
}



.ltp-th-img {
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: visible;
}

ltp-img {
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: visible;
}

.hover01-img ltp-img img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
}

.hover01-img ltp-img:hover img {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}


.ltp-label-flex {
    font-weight: 400;
    vertical-align: middle;
    line-height: 1.5;
    font-size: 1.2rem;
}
@media (max-width: 1024px) {
    .ltp-label-flex {
        font-size: 1.0rem;
    }
}
@media (max-width: 576px) {
    .ltp-label-flex {
        font-size: 0.9rem;
    }
}

.ltp-label-flex-date {
    font-weight: 400;
    vertical-align: middle;
    line-height: 1.5;
    font-size: 1.2rem;
}
@media (max-width: 1024px) {
    .ltp-label-flex-date {
        font-size: 0.9rem;
    }
}
@media (max-width: 576px) {
    .ltp-label-flex-date {
        font-size: 0.8rem;
    }
}















.content {
    position: relative;
    min-height: 100%;
    width: 100%;
    padding: 10px 0 10px 0; /* Header height and footer height */
    margin: 0 auto 0 auto; /* Center content */
}

.sidebar1, .sidebar2 {
    background: red;
    height: 100%;
    width: 100px;
    top: 0;
    padding-top: 60px;
    position: absolute;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#scrollable {
    background-color: rgba(245, 245, 245, 0.01);
    height: calc(100vh - 85px);
    max-height: calc(100vh - 85px);
    overflow-y: auto;
    overflow-x: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#scrollable2 {
    background-color: #3a1344;
    height: 100%;
    min-width: 300px;
    margin-left: 10px;
    margin-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

ltp-body-scrollable {
    background-color: rgba(245, 245, 245, 0.01);
}

#components-reconnect-modal {
    transition: opacity 1.3s; /* Transition should take 0.3s */
    opacity: 0; /* Set opacity to 1 */
}

    #components-reconnect-modal.components-reconnect-show {
        transition: opacity 1.3s; /* Transition should take 0.3s */
        opacity: 1; /* Set opacity to 0 */
    }



/* Header */
.esh-header {
    height: 100%;
}

    .esh-header:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

.esh-header-brand {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

.esh-header-title {
    font-family: Montserrat, sans-serif;
    position: relative;
    font-size: 4vw;
    font-weight: 600;
    color: #FFFFFF;
    display: inline-block;
    vertical-align: middle;
}

    .esh-header-title > span {
        font-weight: 300;
    }

/* Footer */
.esh-app-footer {
    background-color: #3a1344;
    border-top: 1px solid #EEEEEE;
    margin-top: 0rem;
    padding-bottom: 2px;
    padding-top: 2px;
    height: 40px;
}

.esh-app-footer-brand {
    height: 50px;
    width: 230px;
}

/* Body */
.esh-body-title {
    font-family: Montserrat, sans-serif;
    padding-left: 3rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    margin: 0px;
    margin-bottom: 2rem;
    background-color: #00A69C;
    font-size: 3rem;
    color: #FFFFFF;
}








.ltp-th {
    width: 430px;
    height: 220px;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: visible;
}

ltp-thumb {
    margin: 0;
    padding: 0;
    background: #fff;
    overflow:  visible;
}

.hover01 ltp-thumb img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
}

.hover01 ltp-thumb:hover img {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}




/*Price*/
.esh-price:before {
    content: '$';
}

/* Table */
.esh-table {
    max-width: 1440px;
    padding-top: 10px;
    margin-left: 5rem;
    margin-right: auto;
}

.esh-table-header {
    border-bottom: none;
}

.esh-table th {
    font-size: 1rem;
    text-transform: uppercase;
}

.esh-table td {
    font-size: 1rem;
    font-weight: 300;
}

.esh-table-price {
    font-size: 1em;
    font-weight: 600;
}

.esh-table-link {
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.35s;
}

    .esh-table-link:hover {
        color: #75b918;
        transition: color 0.35s;
    }

.esh-thumbnail {
    max-width: 120px;
    height: auto;
}

.esh-picture {
    max-width: 370px;
    height: auto;
    width: 100%;
}

.esh-link-wrapper {
    line-height: 3rem;
    position: relative;
    text-align: left;
}

.esh-link-item {
    color: inherit;
    font-size: 2rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.35s;
}

    .esh-link-item:hover {
        color: #75b918;
        transition: color 0.35s;
    }

.esh-link-item--margin {
    margin-left: 1rem;
}

.esh-link-list {
    font-size: 2rem;
    margin-left: 1rem;
}

.esh-button-actions .esh-button + .esh-button {
    margin-left: 1rem;
}

.esh-button {
    border: 0;
    border-radius: 0;
    color: #FFFFFF;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    margin-top: 1rem;
    padding: 1rem 1.5rem;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.35s;
}

.esh-button-primary {
    background-color: #83D01B;
}

    .esh-button-primary:hover {
        background-color: #4A760f;
        color: white;
    }

.esh-button-secondary {
    background-color: #E52638;
}

    .esh-button-secondary:hover {
        background-color: #b20000;
        color: white;
    }

.esh-button-primary:hover {
    background-color: #4a760f;
    transition: all 0.35s;
}

.esh-form-information {
    padding-top: 7px;
    color: #888888;
}

/*Pager*/
.esh-pager-wrapper {
    padding-top: 1rem;
    text-align: center;
}

.esh-pager-item {
    margin: 0 5vw;
    color: #333333;
}

.esh-pager-item--hidden {
    opacity: 0;
    pointer-events: none;
}

.esh-pager-item--navigable {
    cursor: pointer;
    display: inline-block;
}

    .esh-pager-item--navigable:hover {
        color: #83D01B;
    }

.esh-pager-item--disabled {
    pointer-events: none;
    display: inline-block;
    color: #929191;
}

    .esh-pager-item--disabled:hover {
    }


@media screen and (max-width: 1280px) {
    .esh-pager-item {
        font-size: 0.85rem;
    }
}

@media screen and (max-width: 1024px) {
    .esh-pager-item {
        margin: 0 2.5vw;
    }

    .esh-app-hero {
        height: 20vw;
    }
}

@media screen and (min-width: 1800px) {
    .esh-header-title {
        font-size: 4rem;
    }
}


.card-inverse-info {
    background: rgba(61, 165, 244, 0.2);
    border: 1px solid #3898e0;
    color: #2e7db9
}

.context-menu-list {
    box-shadow: none;
    border: 1px solid #f3f3f3
}

.context-menu-list {
    position: absolute;
    display: inline-block;
    min-width: 13em;
    max-width: 26em;
    padding: .25em 0;
    margin: .3em;
    font-family: inherit;
    font-size: inherit;
    list-style-type: none;
    background: #fff;
    border: 1px solid #bebebe;
    border-radius: .2em;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5)
}

.context-menu-item {
    position: relative;
    padding: 0.5em 6em;
    color: #2f2f2f;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff
}

.context-menu-list .context-menu-item.context-menu-hover {
    background-color: black;
    color: #fff
}

.context-menu-separator {
    padding: 0;
    margin: .35em 0;
    border-bottom: 1px solid #e6e6e6
}








.img-wrap {
    text-align: center;
    display: block;
}

    .img-wrap:hover {
        transition: all 0.35s;
    }

    .img-wrap img:hover {
        transition: all 0.35s;
    }

    .img-wrap img {
        max-width: 100%;
    }



.overlay {
    transition: 0.2s opacity ease-out;
}

/* Status Icons */
.status-icon-container {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 15;
    pointer-events: none;
}

.status-icon {
    font-size: 18px;
    font-weight: bold;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    padding: 2px;
    margin: 0;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-success {
    color: #00cc00;
}

.status-processing {
    color: #c98e10;
    animation: pulse 2s infinite;
}

.status-error {
    color: #ff0000;
}

.status-unknown {
    color: #1e8b93;
}

@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

/* Hourglass animations */
.sand-top {
    animation: shrinkTop 2s linear infinite;
    transform-origin: 50% 30%;
}

.sand-bottom {
    animation: growBottom 2s linear infinite;
    transform-origin: 50% 100%;
}

.sand-flow {
    animation: drip 2s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes shrinkTop {
    0% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(0.1); opacity: 0.2; }
}

@keyframes growBottom {
    0% { transform: scaleY(0.1); opacity: 0.2; }
    100% { transform: scaleY(1); opacity: 1; }
}

@keyframes drip {
    0% { transform: translateY(-10px); opacity: 0; }
    50% { transform: translateY(10px); opacity: 1; }
    100% { transform: translateY(30px); opacity: 0; }
}

ltp-thumb {
    position: relative; /* Hogy az abszolút pozicionálás működjön */
}

/* Scrollbar styling for main page - matching button colors */
#scrollable::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 12px;
}

#scrollable::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: rgba(58, 19, 68, 0.2);
    border-radius: 6px;
}

#scrollable::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #d49cd9, #ab75b5);
    border-radius: 6px;
}

#scrollable::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #915c83, #925a93);
}