/*html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}*/

:root {
    --bg-colorTheme1: #d8d8d8;
    --bg-colorTheme2: #f8f9fa;
    --dropdownAction-colorTheme1: #000;
    --dropdownAction-BgcolorTheme1: #fff;
    --appTextColor: rgb(144 144 144);
    --appTextHLColor: rgb(26 159 255);
    --appDelRowLColor: rgb(255 222 222 / 90%);
    --appPaggingColor: #131313;
    --appPaggingBgColor: rgb(144 144 144);
    --appTableTextColor: rgb(82 82 82);
    --appFormHeadingColor: rgb(104 104 104);
    --appFormLabelColor: rgb(111 111 111);
}

[data-bs-theme="dark"] {
    --bg-colorTheme1: #1a1d1f;
    --bg-colorTheme2: #2b3035;
    --dropdownAction-colorTheme1: #fff;
    --dropdownAction-BgcolorTheme1: #000;
    --appTextColor: rgb(144 144 144);
    --appTextHLColor: rgb(79 169 234);
    --appDelRowLColor: rgb(20 20 20 / 82%);
    --appPaggingColor: rgb(144 144 144);
    --appPaggingBgColor: #131313;
    --appTableTextColor: rgb(190 190 190);
    --appFormHeadingColor: rgb(183 183 183);
    --appFormLabelColor: rgb(144 144 144);
}

body {
    background-color: var(--bg-colorTheme1) !important;
}

    /*body > * > div,*/
    .MainDiv, body footer {
        background-color: var(--bg-colorTheme2) !important;
    }


.dropdown-item.active, .dropdown-item:active {
    color: var(--dropdownAction-colorTheme1);
    text-decoration: none;
    background-color: var(--dropdownAction-BgcolorTheme1);
}

.text-primary {
    color: var(--appTextColor) !important;
}

.text-hl {
    color: var(--appTextHLColor) !important;
    font-weight: 400;
}

.active > .page-link, .page-link.active {
    z-index: 3;
    color: var(--appPaggingColor);
    background-color: var(--appPaggingBgColor);
    border-color: var(--appPaggingColor);
}

.page-link {
    color: var(--appTextColor);
}

    .page-link:focus {
        box-shadow: none !important;
    }

.table > :not(caption) > * > * {
    color: var(--appTableTextColor, #b7b7b7);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--appFormHeadingColor) !important;
}

.control-label, .form-group label:first-of-type {
    margin-bottom: 4px !important;
    font-weight: 500;
    font-style: italic;
    color: var(--appFormLabelColor);
}

[data-bs-theme="dark"] .btn-primary {
    /*Button Css*/
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #212529 !important;
    --bs-btn-border-color: #68696a !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #68696a !important;
    --bs-btn-hover-border-color: #212529;
    --bs-btn-focus-shadow-rgb: 49, 132, 253 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #212529 !important;
    --bs-btn-active-border-color: #68696a !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #292929 !important;
    --bs-btn-disabled-bg: #a0a0a0 !important;
    --bs-btn-disabled-border-color: #a0a0a0 !important;
}


.btn-primary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #6c757d !important;
    --bs-btn-border-color: #6c757d !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #5c636a !important;
    --bs-btn-hover-border-color: #565e64 !important;
    --bs-btn-focus-shadow-rgb: 130, 138, 145 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #565e64 !important;
    --bs-btn-active-border-color: #51585e !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: #6c757d !important;
    --bs-btn-disabled-border-color: #6c757d !important;
}

.pagination-container {
    margin-top: 8px;
}

[data-bs-theme="light"] div.ql-toolbar {
    background: none !important;
}

[data-bs-theme="dark"] div.ql-toolbar {
    background: #ffffff9c !important;
}

:focus-visible {
    outline: none !important;
}

.fs-8 {
    font-size: 8px
}

.fs-10 {
    font-size: 10px
}

.fs-12 {
    font-size: 12px
}

.fs-14 {
    font-size: 14px
}

.fs-16 {
    font-size: 16px
}

.fs-18 {
    font-size: 18px
}

.fs-20 {
    font-size: 20px
}


.popover-body img {
    max-width: 300px !important;
    max-height: 500px !important;
    width: auto !important;
    height: auto !important;
    display: block;
}

.popover {
    --bs-popover-max-width: 400px; /* set desired max width */
    max-width: 400px !important; /* enforce max width */
}

.summary-card {
    transition: all 0.3s ease;
    border-left: 4px solid;
}

    .summary-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }