html, body {
    height: 100%;
}

.dxbl-pager > .dxbl-btn:not(.dxbl-btn-standalone).dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
    --dxbl-btn-bg: #5bb3e2 ;
    --dxbl-btn-color: #fff;
    --dxbl-btn-disabled-bg: #5bb3e2 ;
    --dxbl-btn-disabled-color: #fff;
    --dxbl-btn-disabled-background: none;
}

.dxbl-btn-primary:not(.dxbl-btn-standalone) {
    --dxbl-btn-bg: #5bb3e2 ;
    --dxbl-btn-border-color: #5bb3e2 ;
    --dxbl-btn-color: #fff;
    --dxbl-btn-active-bg: #5bb3e2 ;
    --dxbl-btn-active-color: #fff;
    --dxbl-btn-active-border-color: #5bb3e2 ;
    --dxbl-btn-hover-bg: #5bb3e2 ;
    --dxbl-btn-hover-color: #fff;
    --dxbl-btn-hover-border-color: #5bb3e2 ;
    --dxbl-btn-disabled-bg: #5bb3e2 ;
    --dxbl-btn-disabled-color: #fff;
    --dxbl-btn-disabled-border-color: #5bb3e2 ;
    --dxbl-btn-disabled-opacity: 1;
    --dxbl-btn-focus-shadow-color: rgba(95, 54, 141, 0.5);
    --dxbl-btn-focus-shadow-spread: 0.125rem;
    --dxbl-btn-focus-shadow-blur: 0rem;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-image: url('/images/Logo1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 270px;
    height: 150px;
}

.header-right-side {
    background-color: #fff;
    margin: 0px 10px 10px 10px;
    border-radius: 8px;
}

.xaf-caption-icon-container {
    background-color: #ededed !important;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

.account-button {
    background-color: #1b383b;
}

.account-main {
    top: 6rem;
    right: 3.8rem;
}

/*
.xaf-sidebar > .dxbl-scroll-viewer {
    padding: 8px;
    border-radius: 5px;
}
*/
.xaf-image-container {
    width: 20% !important;
}

.xaf-component-image {
    border-radius: 50% !important;
    width: 100%;
    margin: auto;
}

.dxbl-edit-dropdown-header {
    background-color: #5bb3e2  !important;
    color: #fff !important;
}
/*
.dxbl-scroll-viewer-content {
    border-radius: 8px;
}
*/
.sidebar {
    background-color: white;
    /*box-shadow: none;*/
    /*
    min-width: 210px !important;
    width: 100% !important;
        */
}

.dxbl-scroll-viewer-content {
    background-color: #fff;
}

.dxbl-accordion-group-header {
    background-color: #fff !important;
}

.header {
    min-height: 4.6rem;
    box-shadow: none !important;
    margin: 10px 10px 0px 10px;
}

.xaf-sidebar > .about-info {
    display: none;
}

.xaf-nav-link {
    text-decoration: none !important;
}

.dxbl-accordion-group-header {
    flex-direction: row-reverse;
}

.dxbl-accordion-group-header {
    padding: 8px !important;
}

.dxbl-fl-group > .dxbl-group {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.xaf-nav-link span {
    font-size: 11pt;
    font-weight: 500;
}
/*
.header-left-side {
    min-width: 210px !important;
    width: 210px !important;
}
.header-logo {
    width: 140px !important;
    height: 24px !important;
}*/
.xaf-view-caption-lg {
    font-size: 12pt;
    font-weight: 600;
    padding-bottom: 0.125rem;
}

.header-right-side > div:first-child {
    margin-right: 10px;
}

.dxbl-accordion-item > .dxbl-group-header {
    background-color: #fff !important;
}

/*
.dxbl-group > .dxbl-group-header {
    background-color: #eea14f !important;
    color: white !important;
    font-weight: 400 !important;
}*/

.dxbl-group {
    border: none;
}

.dxbl-group-header {
    border: none;
}

.dxbl-accordion-group-header {
    border: none !important;
}

.dxbl-accordion-items-container > .dxbl-group {
    background-color: #f3f3f3 !important;
}

.dxbl-accordion-item-content div:nth-child(2) {
    display: none;
}

.dxbl-navigation-filter {
    border: 1px solid #e5e7eb !important;
    padding: 5px;
    border-radius: 8px;
}
/* for card */
/*
.card {
    border: none;
    border-radius: 10px;
    background-color: #fff;
    margin: 0 8px 8px 8px;
}
*/

.img {
    border-radius: 50% !important;
    padding: 10px;
    width: 100%;
    margin: auto;
}

.stats {
    background: #f2f5f8 !important;
    color: #000 !important
}

.articles {
    font-size: 10px;
    color: #a1aab9
}

.number1 {
    font-weight: 500
}

.followers {
    font-size: 10px;
    color: #a1aab9
}

.number2 {
    font-weight: 500
}

.rating {
    font-size: 10px;
    color: #a1aab9
}

.number3 {
    font-weight: 500
}
/* for card end*/

.dxbl-group-header {
    background-color: #5bb3e2  !important;
    font-weight: 500 !important;
}

.dxbl-accordion-filter > .dxbl-group-header {
    background-color: white !important;
}

tr.cursor-pointer:hover {
    background-color: aliceblue;
}

.dxbl-grid .dxbl-grid-table > tbody:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > tbody:nth-child(2) > tr:first-child > th, .dxbl-grid .dxbl-grid-table > tfoot:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > tfoot:nth-child(2) > tr:first-child > th, .dxbl-grid .dxbl-grid-table > thead:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > thead:nth-child(2) > tr:first-child > th {
    padding: 8px !important;
}

.dxbl-grid .dxbl-grid-table > tbody > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > tbody > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header), .dxbl-grid .dxbl-grid-table > tfoot > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > tfoot > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header), .dxbl-grid .dxbl-grid-table > thead > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > thead > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header) {
    padding: 8px !important;
}

.dxbl-grid .dxbl-grid-table > tbody, .dxbl-grid .dxbl-grid-table > tfoot, .dxbl-grid .dxbl-grid-table > thead {
    border-width: 0;
}

.dxbl-grid > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead {
    background-color: #5bb3e2 ;
}

.theme-settings {
    display: none !important;
}

.dxbl-grid-header-content.dxbl-grid-header-content {
    color: #efefef;
}

.dxbl-grid-filter-menu-funnel-btn {
    color: #efefef;
}

.dxbl-grid-empty-data {
    font-weight: bold;
    color: #5bb3e2 ;
}

.dxbl-fl-tab-content {
    background-color: white;
}

.dxbl-grid-empty-data span {
    background-color: #f200793b;
    padding: 12px;
    border-radius: 10px;
    font-size: 16px !important;
}

.dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
    --dxbl-btn-bg: #5bb3e2 ;
    --dxbl-btn-color: #5bb3e2 ;
    --dxbl-btn-disabled-bg: #5bb3e2 ;
    --dxbl-btn-disabled-color: #fff;
    --dxbl-btn-disabled-background: none;
}

#applicationLoadingPanel {
    background-image: url('/images/backgrounds.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.loading-caption {
    color: white;
}

.dxbl-group-header > div {
    color: #fff;
}

svg.dxbl-image {
    color: #fff !important;
}

.xaf-image {
    color: #fff !important;
}

.dxbl-popup-header-button > svg, .dxbl-btn-first > svg, .dxbl-btn-secondary > svg, .dxbl-tabs-scroll-btn-prev > svg, .dxbl-tabs-scroll-btn-next > svg, .dxbl-spin-btn-inc > svg, .dxbl-spin-btn-dec > svg {
    color: #1b383b !important;
}

.navigate-back-icon-container > div {
    color: #1b383b !important;
}

.dxbl-group-header.dxbl-accordion-group-header:hover {
    background-color: #5bb3e2  !important;
    color: #fff !important;
    transition: 0.3s;
}

.button:hover {
    background-color: #5bb3e2  !important;
    color: #fff !important;
    transition: 0.3s;
}

.btn-style {
    border-color: #5bb3e2 ;
}

    .btn-style:hover {
        color: #fff;
    }

.log-off {
    background-color: #5bb3e2 ;
    color: #fff;
}

.my-details {
    background-color: #5bb3e2 ;
    color: #fff;
    border: #5bb3e2 ;
}

body::-webkit-scrollbar {
    width: 12px !important; /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
    background: orange !important; /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
    background-color: #5bb3e2  !important; /* color of the scroll thumb */
    border-radius: 20px !important; /* roundness of the scroll thumb */
    border: 3px solid #5bb3e2  !important; /* creates padding around scroll thumb */
}

body {
    scrollbar-width: thin !important; /* "auto" or "thin" */
    scrollbar-color: #5bb3e2  white !important; /* scroll thumb and track */
}

.dxbl-text-edit {
    --dxbl-text-edit-font-size: 0.875rem;
    --dxbl-text-edit-line-height: 1.4285;
    --dxbl-text-edit-bg: #fff;
    --dxbl-text-edit-color: #212529;
    --dxbl-text-edit-padding-x: 0.375rem;
    --dxbl-text-edit-padding-y: 0.25003125rem;
    --dxbl-text-edit-border-color: #e5e5e5;
    --dxbl-text-edit-border-style: solid;
    --dxbl-text-edit-border-width: 1px;
    --dxbl-text-edit-border-radius: 0.125rem;
    --dxbl-text-edit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    --dxbl-text-edit-readonly-bg: unset;
    --dxbl-text-edit-readonly-color: #212529;
    --dxbl-text-edit-disabled-bg: unset;
    --dxbl-text-edit-disabled-color: #212529;
    --dxbl-text-edit-disabled-opacity: 60%;
    --dxbl-text-edit-btn-bg: transparent;
    --dxbl-text-edit-btn-color: #212529;
    --dxbl-text-edit-btn-image-color: unset;
    --dxbl-text-edit-btn-hover-bg: rgba(0, 0, 0, 0.05);
    --dxbl-text-edit-btn-hover-color: #212529;
    --dxbl-text-edit-btn-hover-image-color: unset;
    --dxbl-text-edit-btn-disabled-bg: unset;
    --dxbl-text-edit-btn-disabled-color: #212529;
    --dxbl-text-edit-btn-disabled-image-color: unset;
    --dxbl-text-edit-btn-padding-x: 0.375rem;
    --dxbl-text-edit-btn-padding-y: 0.25003125rem;
    --dxbl-text-edit-clear-btn-bg: unset;
    --dxbl-text-edit-clear-btn-color: unset;
    --dxbl-text-edit-clear-btn-hover-bg: unset;
    --dxbl-text-edit-clear-btn-hover-color: unset;
    --dxbl-text-edit-validation-valid-color: #10893e;
    --dxbl-text-edit-validation-invalid-color: #e81123;
    --dxbl-text-edit-validation-status-padding-x: 0.375rem;
    --dxbl-text-edit-validation-status-padding-y: 0.25003125rem;
    --dxbl-text-edit-validation-status-spacing: 0.125rem;
    --dxbl-text-edit-preloader-padding-x: 0.375rem;
    --dxbl-text-edit-preloader-padding-y: 0.25003125rem;
    --dxbl-text-edit-preloader-image-size: 1rem;
    --dxbl-text-edit-preloader-image-margin-y: 0.12496875rem;
    background-color: var(--dxbl-text-edit-bg);
    border-radius: var(--dxbl-text-edit-border-radius);
    border: var(--dxbl-text-edit-border-width) var(--dxbl-text-edit-border-style) var(--dxbl-text-edit-border-color);
    -webkit-box-shadow: var(--dxbl-text-edit-box-shadow);
    box-shadow: var(--dxbl-text-edit-box-shadow);
    color: var(--dxbl-text-edit-color);
    font-size: var(--dxbl-text-edit-font-size);
    line-height: var(--dxbl-text-edit-line-height);
    display: -webkit-box;
    display: -webkit-flex;
    Show All Properties (13 more)
}

.dxbl-grid {
    --dxbl-grid-font-family: inherit;
    --dxbl-grid-font-size: 0.875rem;
    --dxbl-grid-line-height: 1.4285;
    --dxbl-grid-min-width: 240px;
    --dxbl-grid-bg: #fff;
    --dxbl-grid-color: #212529;
    --dxbl-grid-border-color: #ededed;
    --dxbl-grid-fixed-column-border-color: #a1a1a1;
    --dxbl-grid-border-style: solid;
    --dxbl-grid-border-width: 1px;
    --dxbl-grid-border-radius: 0.125rem;
    --dxbl-grid-highlighted-text-bg: yellow;
    --dxbl-grid-highlighted-text-color: #212529;
    --dxbl-grid-empty-data-container-padding-x: 1.5rem;
    --dxbl-grid-empty-data-container-padding-y: 3rem;
    --dxbl-grid-text-cell-padding-x: 0.375rem;
    --dxbl-grid-text-cell-padding-y: 0.25003125rem;
    --dxbl-grid-editor-cell-padding-x: 0.375rem;
    --dxbl-grid-editor-cell-padding-y: 0.25003125rem;
    --dxbl-grid-group-panel-container-padding-x: 1rem;
    --dxbl-grid-group-panel-container-padding-y: 0.75rem;
    --dxbl-grid-group-panel-container-spacing: 0.5rem;
    --dxbl-grid-group-panel-header-padding-x: 0.75rem;
    --dxbl-grid-group-panel-header-padding-y: 0.25003125rem;
    --dxbl-grid-group-panel-header-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
    --dxbl-grid-group-indent-cell-width: 1.875rem;
    --dxbl-grid-search-box-container-width: 17rem;
    --dxbl-grid-search-box-container-padding-x: 1rem;
    --dxbl-grid-search-box-container-padding-y: 0.75rem;
    --dxbl-grid-empty-header-panel-padding-x: 1rem;
    --dxbl-grid-empty-header-panel-padding-y: 0.5rem;
    --dxbl-grid-edit-form-padding-x: 1rem;
    --dxbl-grid-edit-form-padding-y: 1rem;
    --dxbl-grid-inplace-edit-border-width: 2px;
    --dxbl-grid-detail-cell-padding-x: 1.75rem;
    --dxbl-grid-detail-cell-padding-y: 1.75rem;
    --dxbl-grid-expand-btn-bg: transparent;
    --dxbl-grid-expand-btn-color: unset;
    --dxbl-grid-expand-btn-hover-bg: unset;
    --dxbl-grid-expand-btn-hover-color: unset;
    --dxbl-grid-expand-btn-padding-x: 0.25003125rem;
    --dxbl-grid-expand-btn-padding-y: 0.25003125rem;
    --dxbl-grid-header-font-weight: 600;
    --dxbl-grid-header-bg: unset;
    --dxbl-grid-header-color: inherit;
    --dxbl-grid-header-spacing: 0.375rem;
    --dxbl-grid-footer-font-weight: 700;
    --dxbl-grid-footer-bg: unset;
    --dxbl-grid-footer-color: inherit;
    --dxbl-grid-group-footer-font-weight: 600;
    Show All Properties (30 more)
}

.dxbl-group-expand-btn > svg > use {
    color: #5bb3e2 ;
}

.dxbl-navigation-filter > button > svg > use {
    color: #5bb3e2 ;
}

.dxbl-toolbar-layout-block-group > button > svg > use {
    color: #5bb3e2 ;
}

.dxbl-btn-primary {
    --dxbl-btn-bg: #5bb3e2 ;
    --dxbl-btn-border-color: #5bb3e2 ;
    --dxbl-btn-color: #fff;
    --dxbl-btn-active-bg: #5bb3e2 ;
    --dxbl-btn-active-color: #fff;
    --dxbl-btn-active-border-color: #5bb3e2 ;
    --dxbl-btn-hover-bg: #5bb3e2 ;
    --dxbl-btn-hover-color: #fff;
    --dxbl-btn-hover-border-color: #5bb3e2 ;
    --dxbl-btn-disabled-bg: #5bb3e2 ;
    --dxbl-btn-disabled-color: #fff;
    --dxbl-btn-disabled-border-color: #5bb3e2 ;
    --dxbl-btn-disabled-opacity: 1;
    --dxbl-btn-focus-shadow-color: #5bb3e2 ;
    --dxbl-btn-focus-shadow-spread: 0.125rem;
    --dxbl-btn-focus-shadow-blur: 0rem;
}

.dxbl-btn-group.dxbl-btn-group-right {
    background-color: #5bb3e2 ;
    color: white;
}

.dash-card {
    background-color: #fff;
    margin: 0px 10px 10px 10px;
    border-radius: 8px;
}

.quick-action:hover {
    background-color: #e2c596 !important;
}

.loading-caption {
    background-color: #EA560D !important;
    padding: 15px;
    border-radius: 10px;
}

.active, .collapsible {
    position: relative;
    top: -28px;
    right: -88.3rem;
}

.content {
    display: none;
    margin-top: -33px;
}

.main-toolbar {
    margin-top: -30px;
}

.logon-main > .card-header {
    background-color: #5bb3e2;
    color: #fff;
}

.logon-template-body {
    background-color: #e5e5e5;
}

.logon-template-header {
    background-color: white;
}

.dash-card:hover {
    background-color: #e1c596;
    transition: 0.5s;
}

.dash-card {
    transition: 0.5s;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
/*
.dxbl-text-edit {
    background-color: #fafafa;
}*/

td.xaf-action a {
    text-decoration: none;
   /* background-color: #f9d2d2;*/
    color: white;
    padding: 3px 5px 3px 5px;
    border-radius: 5px;
}

tr td:last-child {
    background-color: #f4a9a9;
}

.logo-container {
    background-color: #5bb3e2 ;
}

.logon-template-header {
   background-color: transparent;
    
}

.logon-template-body {
    background-image: url(/images/backgrounds.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: auto;
}

.logon-main {
    border: none;
}

html, :root {
    --dxbl-loading-panel-underlay-bg: rgba(0, 0, 0, 0.6);
    --dxbl-loading-panel-overlay-bg: #121212;
    --dxbl-loading-panel-overlay-opacity: 1;
    --dxbl-loading-panel-indicator-size: 3rem;
    --dxbl-loading-panel-message-size: 1rem;
    --dxbl-loading-panel-message-color: #5bb3e2;
}

/* Vendose sfondin VETËM te kontejneri prind i loginit */
.logon-template {
    min-height: 100vh;
    background: url('/images/backgrounds.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* Hiqe sfondin/ ngjyrën nga header dhe body e loginit */
.logon-template-header,
.logon-template-body {
    background: transparent !important;
}

/* Opsionale: paneli i loginit me sfond të lehtë që të lexohet mirë */
.logon-main {
    background: rgba(255,255,255,0.9);
    border: none;
}
body {
    background: url('/images/backgrounds.jpg') no-repeat center center fixed;
    background-size: cover;
}

.logon-template-header,
.logon-template-body {
    background: transparent !important;
}