@import"https://fonts.googleapis.com/css?family=Inter:100";
@import"https://fonts.googleapis.com/css?family=Inter:200";
@import"https://fonts.googleapis.com/css?family=Inter:300";
@import"https://fonts.googleapis.com/css?family=Inter:400";
@import"https://fonts.googleapis.com/css?family=Inter:500";
@import"https://fonts.googleapis.com/css?family=Inter:600";
@import"https://fonts.googleapis.com/css?family=Inter:700";
@import"https://fonts.googleapis.com/css?family=Inter:800";
@import"https://fonts.googleapis.com/css?family=Inter:900";
@import url("icons/uicons-bold-rounded/css/uicons-bold-rounded.css");
@import url("icons/uicons-bold-straight/css/uicons-bold-straight.css");
@import url("icons/uicons-duotone-chubby/css/uicons-duotone-chubby.css");
@import url("icons/uicons-duotone-straight/css/uicons-duotone-straight.css");
@import url("icons/uicons-regular-chubby/css/uicons-regular-chubby.css");
@import url("icons/uicons-regular-rounded/css/uicons-regular-rounded.css");
@import url("icons/uicons-regular-straight/css/uicons-regular-straight.css");
@import url("icons/uicons-solid-chubby/css/uicons-solid-chubby.css");
@import url("icons/uicons-solid-rounded/css/uicons-solid-rounded.css");
@import url("icons/uicons-solid-straight/css/uicons-solid-straight.css");
@import url("icons/uicons-thin-chubby/css/uicons-thin-chubby.css");
@import url("icons/uicons-thin-rounded/css/uicons-thin-rounded.css");
@import url("icons/uicons-thin-straight/css/uicons-thin-straight.css");
@import url("icons/uicons-brands/css/uicons-brands.css");

:root ,
[data-bs-theme=light] {
    --bs-font-sans-serif: Inter;
    --bs-font-monospace: Inter;
    --bs-body-font-family: Inter;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-heading-font-weight: 700;
    --bs-body-line-height: 1.3;
    --bs-heading-line-height: 1.3;
    --bs-heading-letter-space: -.04rem;

    /* BASIC CONFIG ----------------

    --bs-primary: #91b9e8;
    --bs-secondary: #b8bcc2;
    --bs-success: #8fc9a5;
    --bs-danger: #e89a9d;
    --bs-info: #8dbde8;
    --bs-warning: #e8cc8a;
    --bs-light: #f2f3f5;
    --bs-dark: #34363a;

    --bs-body-color: #212529;
    --bs-body-bg: #f8f8f8;
    --bs-secondary-color: #606060;
    --bs-secondary-bg: #ffffff;
    --bs-tertiary-color: #979797;
    --bs-tertiary-bg: #dedede;
    --bs-emphasis-color: #000;

    ---------------- BASIC CONFIG */

    --bs-blue: #91b9e8;
    --bs-indigo: #a99be0;
    --bs-purple: #b69ad9;
    --bs-pink: #e6a6bd;
    --bs-red: #e89a9d;
    --bs-orange: #e9b28a;
    --bs-yellow: #e8d58f;
    --bs-green: #91c9a5;
    --bs-teal: #8bc9bb;
    --bs-cyan: #8fc9d9;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #ebe8e8;
    --bs-gray-300: #dbdbdb;
    --bs-gray-400: #d0d0d0;
    --bs-gray-500: #a8a8a8;
    --bs-gray-600: #757575;
    --bs-gray-700: #515151;
    --bs-gray-800: #3a3a3a;
    --bs-gray-900: #232323;

    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #c3c3c34e;
    --bs-border-color-translucent: #b4b4b4;
    --bs-border-radius-sm: 1.2rem;
    --bs-border-radius: 2rem;
    --bs-border-radius-lg: 2.2rem;
    --bs-border-radius-xl: 2.4rem;
    --bs-border-radius-xxl: 2.6rem;
    --bs-border-radius-2xl: 2.8rem;
    --bs-border-radius-pill: 50rem;

    /* BE UI */

    --be-border-color-glass: #ffffff;

    --be-input-opacity: 0.3;
    --be-btn-opacity: 0.7;
    --be-btn-hover-opacity: 0.7;
    --be-badge-opacity: 0.2;
    --be-glass-opacity: 0.2;
    --be-glass-blur: blur(10px); 

    --be-shadow-glass-color: rgba(0, 0, 0, 0.07);
    --be-shadow-nav-pill: rgba(0, 0, 0, 0.15);
    --be-shadow-glass-opacity: 50%;
    --be-shadow-glass-opacity-m: 50%;
    --be-shadow-glass-opacity-l: 60%;

    --be-space-m: 1.6rem;
    --be-padding-x-xs: .6rem;
    --be-padding-y-xs: .3rem;
    --be-padding-x-s: .8rem;
    --be-padding-y-s: .5rem;
    --be-padding-x: 1.2rem;
    --be-padding-y: .5rem;
    --be-padding-x-l: 1.5rem;
    --be-padding-y-l: .6rem;
    --be-padding-x-xl: 1.8rem;
    --be-padding-y-xl: .8rem;
    --be-padding-y-xxl: 1rem;
}

[data-bs-theme=dark] {

    --bs-primary: rgb(255, 255, 255);
    --bs-primary-rgb: 255, 255, 255;

    --bs-body-color: #dadada;
    --bs-body-bg: #181818;
    --bs-body-bg-rgb: 24, 24, 24;
    --bs-secondary-color: #606060;
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #000000;
    --bs-secondary-bg-rgb: 50, 50, 50;
    --bs-tertiary-color: #979797;
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #323232;
    --bs-tertiary-bg-rgb: 50, 50, 50;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 255, 255, 255;

    --be-border-color-glass: #363636;
    --be-shadow-glass-color: rgba(0, 0, 0, 0.07);
    --be-shadow-nav-pill: rgba(0, 0, 0, 0.15);

 }

/* GENERAL */

body {
    overflow-y: scroll;
}

.pointer {
    cursor: pointer;
}

/* LAYOUT */

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

.max-800 {
    max-width: 800px;
}

.max-1000 {
    max-width: 1000px;
}

.side-panel-left {
    max-width: 300px;
    padding: 0;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
}

.side-panel-right {
    max-width: 300px;
    padding: 0;
    height: 100dvh;
    position: fixed;
    top: 0;
    right: 0;
}

.spl-margin {
    margin-left: 300px;
}

.spr-margin {
    margin-right: 300px;
}

.full-h {
    height: 100dvh!important;
}

.be-header {
    background-color: rgb(var(--bs-body-bg-rgb), var(--be-glass-opacity));
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
    box-shadow: 
        inset -1px -5px 0px -4px var(--be-border-color-glass),
        inset 0px -10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent);
}


.be-header-gl {
    background: none;
    box-shadow: none;

    -webkit-mask-image: none;
    mask-image: none;

    isolation: isolate;
}

.be-header-gl::before {
    pointer-events: none;
    content: "";
    position: absolute;
    z-index: -1;

    bottom: var(--header-gl-bottom, 0px);
    top: 0;
    left: 0;
    right: 0;

    background-color: rgb(
        var(--bs-body-bg-rgb),
        var(--be-glass-opacity)
    );

    backdrop-filter: var(--be-glass-blur);
    -webkit-backdrop-filter: var(--be-glass-blur);

    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 50%,
        rgba(0, 0, 0, 0.92) 65%,
        rgba(0, 0, 0, 0.65) 78%,
        rgba(0, 0, 0, 0.25) 90%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 50%,
        rgba(0, 0, 0, 0.92) 65%,
        rgba(0, 0, 0, 0.65) 78%,
        rgba(0, 0, 0, 0.25) 90%,
        transparent 100%
    );
}

.be-footer {
    background-color: rgb(var(--bs-body-bg-rgb), var(--be-glass-opacity));
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
    box-shadow: 
        inset -1px 5px 0px -4px var(--be-border-color-glass),
        inset 0px 10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent);
}

.be-footer-gl {
    background: none;
    box-shadow: none;

    -webkit-mask-image: none;
    mask-image: none;

    isolation: isolate;
}

.be-footer-gl::before {
    pointer-events: none;
    content: "";
    position: absolute;
    z-index: -1;

    top: var(--footer-gl-top, 0px);
    bottom: 0;
    left: 0;
    right: 0;

    background-color: rgb(
        var(--bs-body-bg-rgb),
        var(--be-glass-opacity)
    );

    backdrop-filter: var(--be-glass-blur);
    -webkit-backdrop-filter: var(--be-glass-blur);

    -webkit-mask-image: linear-gradient(
        to top,
        black 0%,
        black 50%,
        rgba(0, 0, 0, 0.92) 65%,
        rgba(0, 0, 0, 0.65) 78%,
        rgba(0, 0, 0, 0.25) 90%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to top,
        black 0%,
        black 50%,
        rgba(0, 0, 0, 0.92) 65%,
        rgba(0, 0, 0, 0.65) 78%,
        rgba(0, 0, 0, 0.25) 90%,
        transparent 100%
    );
}

.be-blur {
    background-color: rgb(var(--bs-body-bg-rgb), var(--be-glass-opacity));

    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);

    -webkit-mask-image: radial-gradient(
        ellipse at center,
        black 0%,
        black 50%,
        rgba(0, 0, 0, 0.92) 65%,
        rgba(0, 0, 0, 0.65) 78%,
        rgba(0, 0, 0, 0.25) 90%,
        transparent 100%
    );

    mask-image: radial-gradient(
        ellipse at center,
        black 0%,
        black 50%,
        rgba(0, 0, 0, 0.92) 65%,
        rgba(0, 0, 0, 0.65) 78%,
        rgba(0, 0, 0, 0.25) 90%,
        transparent 100%
    );

    box-shadow:
        inset 0 0 10px -5px
        color-mix(
            in srgb,
            var(--be-border-color-glass)
            var(--be-shadow-glass-opacity),
            transparent
        );
}

/* ACCORDION */

.accordion-button {
    box-shadow: none!important;
    border-radius: var(--bs-border-radius-pill)!important;
}

.accordion-button.collapsed {
    box-shadow: none!important;
    background-color: transparent;
}

.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: rgb(var(--bs-tertiary-bg-rgb), 0.5);
}

.accordion-item:has(+ .accordion-item .accordion-button:not(.collapsed)) {
  border-color: transparent;
}

/* PROGRESS */

.progress {
    background-color: rgb(var(--bs-tertiary-bg-rgb), var(--be-input-opacity))
}

.progress-bar:last-child {
    border-radius: 0 var(--bs-border-radius-pill) var(--bs-border-radius-pill) 0;
}

.circular-progress {
    --size: 140px;
    --thickness: 14px;
    --progress-color: rgb(var(--bs-success-rgb), 0.75);

    width: var(--size);
    height: var(--size);
    position: relative;
}

.circular-progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circular-progress circle {
    fill: none;
    stroke-width: var(--thickness);
}

.progress-bg {
    stroke: rgba(var(--bs-secondary-rgb), .15);
    stroke-width: var(--thickness);
    vector-effect: non-scaling-stroke;
}

.progress-value {
    fill: none;
    stroke: var(--progress-color);
    stroke-width: var(--thickness);
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.circular-progress span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 600;
}

/* TEXT */

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bs-heading-color);
  letter-spacing: var(--bs-heading-letter-space);
}

/* ICONS & IMAGES */

i[class^="fi-"]::before, i[class*=" fi-"]::before, span[class^="fi-"]::before, span[class*="fi-"]::before {
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: -.13em;
}

/* BUTTONS BADGES */

.btn {
    --bs-btn-padding-x: var(--be-padding-x);
    --bs-btn-padding-y: var(--be-padding-y);
    --bs-btn-font-weight: 600;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius-pill);
    --bs-btn-box-shadow: inset 0 1px 0 rgba(var(--be-glass-rgb), 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    cursor: pointer;
}

.btn-square {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0!important;
    display: inline-flex;      
    align-items: center;        
    justify-content: center;    
    overflow: visible;
}

.btn-sm.btn-square {
    width: 2.31rem;
    min-width: 2.31rem;
    height: 2.31rem;
}

.btn-lg.btn-square {
    width: 2.88rem;
    min-width: 2.88rem;
    height: 2.88rem;
}

.btn-close {
    background-image: none;
    position: relative;
    opacity: 1;
    box-shadow: none!important;
}

.btn-close::before {
    font-family: "uicons-bold-rounded"; /* sprawdź nazwę fontu Flaticon */
    content: "\e579"; /* kod unicode ikony */
    font-size: 1rem;
    line-height: 1;
}

.btn-primary {
    background-color: rgb(var(--bs-primary-rgb), var(--be-btn-opacity));
}

.btn-primary:hover {
    background-color: rgb(var(--bs-primary-rgb), var(--be-btn-hover-opacity));
}

.btn-outline-primary:hover {
    background-color: rgb(var(--bs-primary-rgb), var(--be-btn-hover-opacity));
}

.btn-secondary {
    background-color: rgb(var(--bs-secondary-rgb), var(--be-btn-opacity));
}

.btn-secondary:hover {
    background-color: rgb(var(--bs-secondary-rgb), var(--be-btn-hover-opacity));
}

.btn-outline-secondary:hover {
    background-color: rgb(var(--bs-secondary-rgb), var(--be-btn-hover-opacity));
}

.btn-success {
    background-color: rgb(var(--bs-success-rgb), var(--be-btn-opacity));
}

.btn-success:hover {
    background-color: rgb(var(--bs-success-rgb), var(--be-btn-hover-opacity));
}

.btn-outline-success:hover {
    background-color: rgb(var(--bs-success-rgb), var(--be-btn-hover-opacity));
}

.btn-danger {
    background-color: rgb(var(--bs-danger-rgb), var(--be-btn-opacity));
}

.btn-danger:hover {
    background-color: rgb(var(--bs-danger-rgb), var(--be-btn-hover-opacity));
}

.btn-outline-danger:hover {
    background-color: rgb(var(--bs-danger-rgb), var(--be-btn-hover-opacity));
}

.btn-warning {
    background-color: rgb(var(--bs-warning-rgb), var(--be-btn-opacity));
}

.btn-warning:hover {
    background-color: rgb(var(--bs-warning-rgb), var(--be-btn-hover-opacity));
}

.btn-outline-warning:hover {
    background-color: rgb(var(--bs-warning-rgb), var(--be-btn-hover-opacity));
}

.btn-info {
    background-color: rgb(var(--bs-info-rgb), var(--be-btn-opacity));
}

.btn-info:hover {
    background-color: rgb(var(--bs-info-rgb), var(--be-btn-hover-opacity));
}

.btn-outline-info:hover {
    background-color: rgb(var(--bs-info-rgb), var(--be-btn-hover-opacity));
}

.btn-light {
    background-color: rgb(var(--bs-light-rgb), var(--be-btn-opacity));
}

.btn-light:hover {
    background-color: rgb(var(--bs-light-rgb), var(--be-btn-hover-opacity));
}

.btn-outline-light:hover {
    background-color: rgb(var(--bs-light-rgb), var(--be-btn-hover-opacity));
}

.btn-dark {
    background-color: rgb(var(--bs-dark-rgb), var(--be-btn-opacity));
}

.btn-dark:hover {
    background-color: rgb(var(--bs-dark-rgb), var(--be-btn-hover-opacity));
}

.btn-outline-dark:hover {
    background-color: rgb(var(--bs-dark-rgb), var(--be-btn-hover-opacity));
}

.badge {
    padding: var(--be-padding-y-s) var(--be-padding-x-s);
}

.badge.bg-primary {
    background-color: rgb(var(--bs-primary-rgb), var(--be-badge-opacity)) !important;
    color: var(--bs-primary) !important;
}

.badge.bg-secondary {
    background-color: rgb(var(--bs-secondary-rgb), var(--be-badge-opacity)) !important;
    color: var(--bs-secondary) !important;
}

.badge.bg-success {
    background-color: rgb(var(--bs-success-rgb), var(--be-badge-opacity)) !important;
    color: var(--bs-success) !important;
}

.badge.bg-danger {
    background-color: rgb(var(--bs-danger-rgb), var(--be-badge-opacity)) !important;
    color: var(--bs-danger) !important;
}

.badge.bg-warning {
    background-color: rgb(var(--bs-warning-rgb), var(--be-badge-opacity)) !important;
    color: var(--bs-warning) !important;
}

.badge.bg-info {
    background-color: rgb(var(--bs-info-rgb), var(--be-badge-opacity)) !important;
    color: var(--bs-info) !important;
}

.badge.bg-light {
    background-color: rgb(var(--bs-light-rgb), var(--be-badge-opacity)) !important;
    color: var(--bs-light) !important;
}

.badge.bg-dark {
    background-color: rgb(var(--bs-dark-rgb), var(--be-badge-opacity)) !important;
    color: var(--bs-dark) !important;
}

/* FORMS */

.form-control {
    padding: var(--be-padding-y) var(--be-padding-x);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: rgb(var(--bs-tertiary-bg-rgb), var(--be-input-opacity));
    border: var(--bs-border-width) solid rgb(var(--bs-tertiary-bg-rgb), var(--be-input-opacity));
    border-radius: var(--bs-border-radius);
    box-shadow: none!important;
}

.form-control.is-invalid::-moz-placeholder {
    color: var(--bs-danger)!important;
}

.form-control.is-invalid,
.form-control.is-invalid::placeholder {
    color: var(--bs-danger)!important;
}

.form-control:focus,
.form-control:active {
    background-color: rgb(var(--bs-tertiary-bg-rgb), var(--be-input-opacity))
}

.form-group label {
    padding: 0 var(--be-padding-x);
    margin-bottom: .3rem;
}

.form-group small,
.valid-feedback,
.invalid-feedback {
    padding: 0 var(--be-padding-x);
}

select {
    font-weight: 500!important;
    cursor: pointer;
}

.form-control-i {
    position: relative;
}

.form-control-i .form-control {
    padding-left: calc( var(--be-padding-x) * 2.1);
}

.form-control-i i {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(-50%);
    padding-left: 1rem;
}

.form-control-i-end {
    position: relative;
}

.form-control-i-end .form-control {
    padding-right: calc( var(--be-padding-x) * 1.8);
}

.form-control-i-end i {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateY(-50%);
    padding-right: 1rem;
}

.form-control-check-end {
    position: relative;
}

.form-control-check-end .form-control {
    padding-right: calc( var(--be-padding-x) * 2.6);
}

.form-control-check-end .form-check {
    position: absolute;
    height: 100%;
    bottom: 0;
    right: 0;
}

.form-control-cl {
    background-color: transparent!important;
    border: none!important;
}

.form-check .form-check-input {
    float: none;
    margin: 0;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
}

.form-check-input {
    font-size: 1.5rem;
    box-shadow: none!important;
    cursor: pointer;
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color)!important;
    opacity: var(--be-btn-opacity);
}

.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")!important;
}

.nav-fluent .btn-check + .nav-link {
    background-color: transparent !important;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.5rem 1rem;
    border: 0;
    cursor: pointer;
}

.horizontal-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;

    /* pozwala centrować także pierwszy i ostatni element */
    scroll-padding-inline: 50%;
}

.horizontal-nav::-webkit-scrollbar {
    display: none;
}

.horizontal-nav > .nav-item {
    flex: 0 0 auto;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 48px;
    height: 24px;
    border-radius: var(--bs-border-radius-pill);
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 1px solid var(--bs-border-color);
    box-shadow:
        0 2px 6px rgba(0,0,0,.15),
        inset 0 1px 1px rgba(255,255,255,.7);
    cursor: grab;
}

input[type="range"]::-moz-range-thumb {
    width: 48px;
    height: 24px;
    border-radius: var(--bs-border-radius-pill);
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 1px solid var(--bs-border-color);
    box-shadow:
        0 2px 6px rgba(0,0,0,.15),
        inset 0 1px 1px rgba(255,255,255,.7);
    cursor: grab;
}

.be-range .form-control {
    background-color: transparent;
    border: none;
}

.be-range .progress {
    --bs-progress-bar-transition: width 0s ease;
}

.be-range .progress-container {
    padding: 0 24px;
}

.be-range input[type="range"] {
    pointer-events: none;
}

.be-range input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
}

.be-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
}

textarea {
    border-radius: var(--bs-border-radius-sm)!important;
    height: 8rem;
}

.form-list .form-group {
    position: relative;
    margin-bottom: 1px;
}

.form-list .form-label {
    position: absolute;
    padding-top: calc( var(--be-padding-y-l) * 1.2)
}

.form-list .form-control {
    border-radius: 0;
    padding-top: calc( var(--be-padding-y-l) * 3.6);

}

.form-list .form-group:first-child .form-control {
    border-top-left-radius: var(--bs-border-radius-sm);
    border-top-right-radius: var(--bs-border-radius-sm);
}

.form-list .form-group:last-child .form-control {
    border-bottom-left-radius: var(--bs-border-radius-sm);
    border-bottom-right-radius: var(--bs-border-radius-sm);
}

.form-list i {
    transform: translateY(-120%);
}

.list-group-form .list-group-item {
    padding: var(--be-padding-y-xs) 0 var(--be-padding-y-xs) var(--be-padding-x)!important;
}

.list-group-form .list-group-item:first-child {
    border-top-left-radius: var(--bs-border-radius-sm);
    border-top-right-radius: var(--bs-border-radius-sm);
}

.list-group-form .list-group-item:last-child {
    border-bottom-left-radius: var(--bs-border-radius-sm);
    border-bottom-right-radius: var(--bs-border-radius-sm);
}

.list-group-form .list-group-item:not(:last-child) {
    margin-bottom: 1px;
}

.list-group-form label {
    margin-bottom: 0;
}

.list-group-form .form-control {
    background-color: transparent!important;
    box-shadow: none!important;
    border: none!important;
}

.list-rounded .list-group-item {
    border-radius: var(--bs-border-radius);
}

.list-group-sm.list-rounded .list-group-item {
    border-radius: var(--bs-border-radius-sm);
}

/* NAVS */

.nav-pills {
    padding: .2rem;
    border-radius: var(--bs-border-radius-pill);
    background-color: rgb(var(--bs-tertiary-bg-rgb), var(--be-input-opacity));
    position: relative;
    display: inline-flex;
    --pill-x: 0px;
    --pill-width: 0px;
}

.nav-pills::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: .2rem;
    top: .2rem;
    width: var(--pill-width);
    height: calc(100% - .4rem);
    transform: translateX(var(--pill-x));
    border-radius: var(--bs-border-radius-pill);
    background-color:  rgb(var(--bs-secondary-bg-rgb), 0.8);
    -webkit-backdrop-filter: var(--be-glass-blur);
    backdrop-filter: var(--be-glass-blur);
    box-shadow: 
        1px 0px 1px 0px var(--be-shadow-nav-pill),
        -1px 0px 1px 0px var(--be-shadow-nav-pill),
        0 14px 36px var(--be-shadow-glass-color),
        inset 0px 0px 4px 0px color-mix(
            in srgb,
            var(--be-border-color-glass) var(--be-shadow-glass-opacity-m),
            transparent
        ),
        inset 1px 5px 1px -4px color-mix(
            in srgb,
            var(--be-border-color-glass) var(--be-shadow-glass-opacity-l),
            transparent
        ),
        inset -1px -5px 0px -4px color-mix(
            in srgb,
            var(--be-border-color-glass) var(--be-shadow-glass-opacity-l),
            transparent
        );
    transition:
        transform .35s cubic-bezier(.25, .8, .25, 1),
        width .35s cubic-bezier(.25, .8, .25, 1);
}

.nav-pills .nav-item {
    position: relative;
    z-index: 1;
}

.nav-pills .nav-link {
    font-weight: 500;
    position: relative;
    z-index: 1;
    color: var(--bs-secondary-color);
    background-color: transparent !important;
}

.nav-pills .nav-link.active {
    color: var(--bs-body-color);
}

.nav-cl {
    background-color: transparent;
}

.nav-cl .nav-link.active {
    color: var(--bs-body-color);
    background-color: rgb(var(--bs-tertiary-bg-rgb), 0.6)!important;
    box-shadow: 
        inset 0px 0px 4px 0px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-m), transparent),
        inset 1px 5px 1px -4px  color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-l), transparent),
        inset -1px -5px 0px -4px  color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-l), transparent);
}

.nav-l .nav-link {
    padding: var(--be-padding-y-l) var(--be-padding-x);
}

.nav-underline {
    --bs-nav-underline-gap: 1rem;
    --bs-nav-underline-border-width: 0.2rem;
    --bs-nav-underline-link-active-color: var(--bs-body-color); 
    gap: 0;
}

.nav-underline .nav-link {
    font-weight: 500;
    padding-left: var(--be-padding-x-s);
    padding-right: var(--be-padding-x-s);
    color: var(--bs-secondary-color);
    border-color: rgb(var(--bs-tertiary-bg-rgb), 0.8);
}

/* DROPDOWNS */

.dropdown {
    position: relative;
}

.dropdown-menu {
    margin: 0 !important;
    padding: var(--be-padding-x-xs);
    min-width: 100%;
    background-color: rgb(var(--bs-secondary-bg-rgb), var(--be-glass-opacity));
    position: absolute !important;
    z-index: 1050 !important;
    border-radius: var(--bs-border-radius)!important;
}

/* Dla dropup - nakładamy od dołu na przycisk */
.dropdown-menu.dropup {
    top: auto !important;
    bottom: 0 !important;  /* <-- kluczowe: od dołu */
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

/* Dla dropup + dropdown-menu-end */
.dropdown-menu.dropup.dropdown-menu-end {
    left: auto !important;
    right: 0 !important;
}

/* Dla zwykłego dropdown - nakładamy od góry */
.dropdown-menu:not(.dropup) {
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

.dropdown-menu:not(.dropup).dropdown-menu-end {
    left: auto !important;
    right: 0 !important;
}

.dropdown.show .dropdown-btn,
.dropdown .dropdown-btn.show,
.dropdown .btn.show {
    visibility: hidden;
    position: relative;
}

.dropdown-item {
    border-radius: var(--bs-border-radius-sm)!important;
    padding: var(--be-padding-y-s) var(--be-padding-x);
}

.dropdown-item:hover {
    background-color: rgb(var(--bs-tertiary-bg-rgb), 0.6)!important;
}

/* MODALS & OFFCANVAS */

.modal-content {
    background-color: rgb(var(--bs-secondary-bg-rgb), var(--be-glass-opacity));
}

.modal-body {
    padding: 0 var(--be-padding-x);
}

.modal-header,
.modal-footer {
    border: none;
    padding: var(--be-padding-x);
}


.offcanvas-backdrop,
.modal-backdrop {
    background-color: rgb(var(--bs-tertiary-bg-rgb), 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.offcanvas-backdrop.show,
.modal-backdrop.show {
    opacity: 1;
}

.offcanvas {
    background-color: rgb(var(--bs-secondary-bg-rgb), var(--be-glass-opacity));
    border-color: var(--bs-white)!important;
}

.offcanvas-card {
    border-radius: var(--bs-border-radius);
    margin: .6rem;
    border: none!important;
}

/* TAGIFY */

.tagify {
    --tags-focus-border-color: #3595f6;
    --tag-bg: rgb(var(--bs-tertiary-bg-rgb), 0.7)!important;
    --tag-hover: rgb(var(--bs-tertiary-bg-rgb), 0.7)!important;
    --tag-border-radius: var(--bs-border-radius-pill)!important;
    border:  var(--bs-border-width) solid rgb(var(--bs-tertiary-bg-rgb), var(--be-input-opacity));
    border-radius: var(--bs-border-radius-sm)!important;
    padding: 0!important;
}

.tagify__input {
    padding: 0.3em calc(var(--be-padding-x) - 5px)!important;
}

.tagify__tag {
    padding-left: .3rem;
    padding-right: .2rem;
}

.tagify__tag__removeBtn {
    font: 18px/1 Arial;
    background: transparent!important;
    color: var(--tag-remove-btn-bg);
    width: 18px!important;
    height: 18px!important;
    font-size: 18px!important;
    margin-right: 4.6666666667px;
}

.tagify__tag__removeBtn:hover {
    color: var(--bs-danger)!important;
}

/* DATEPICKER */

.applyBtn {
    color: var(--bs-white);
    background-color: rgb(var(--bs-primary-rgb), var(--be-btn-opacity));
    border-radius: var(--bs-border-radius-pill)!important;
    padding: var(--be-padding-y) var(--be-padding-x-s)!important;
    font-weight: 600!important;
}

.daterangepicker td.active {
    background-color: rgb(var(--bs-primary-rgb), var(--be-btn-opacity))!important;
    border-radius: 12px!important;
}

/* TABLES & LISTS */

.list-group {
    --bs-list-group-action-hover-bg: rgb(var(--bs-tertiary-bg-rgb), 0.6);
}

.list-group .list-group-item {
    padding: var(--be-padding-x) var(--be-padding-x-l);
    background-color: rgb(var(--bs-tertiary-bg-rgb), 0.2);
    border: none;
    margin-bottom: 2px;
}

.list-group-sm .list-group-item {
    padding: var(--be-padding-y-xxl) var(--be-padding-x-l);
}

.list-group .list-group-item:last-child {
    margin-bottom: 0;
}

.list-group-sm .list-group-item:first-child {
    border-top-left-radius: var(--bs-border-radius-sm);
    border-top-right-radius: var(--bs-border-radius-sm);
}

.list-group-sm .list-group-item:last-child {
    border-bottom-right-radius: var(--bs-border-radius-sm);
    border-bottom-left-radius: var(--bs-border-radius-sm);
}

.list-group-glass .list-group-item {
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
}

.list-group-glass .list-group-item:first-child {
    box-shadow: 
        inset 1px 5px 0px -4px var(--be-border-color-glass),
        inset 0px 10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent)!important;
}

.list-group-glass .list-group-item:last-child {
    box-shadow: 
        inset -1px -5px 0px -4px var(--be-border-color-glass),
        inset 0px -10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent);
}

.list-group-glass-shadow {
    box-shadow: 
        0 14px 36px var(--be-shadow-glass-color);
}

.list-group-card .list-group-item {
    background-color: rgb(var(--bs-secondary-bg-rgb), var(--be-glass-opacity));
}

.table {
    --bs-table-color: var(--bs-body-color);
}

td, th {
    background-color: transparent!important;
}

tr:last-child td {
    border-bottom: none!important;
}

/* TOASTS */

.toast {
    --bs-toast-padding-x: var(--be-padding-x);
    --bs-toast-padding-y: var(--be-padding-y-xl);
    --bs-toast-spacing: .4rem;
    --bs-toast-max-width: 350px;
    --bs-toast-font-size: 0.875rem;
    --bs-toast-color: ;
    --bs-toast-bg: rgb(var(--bs-secondary-bg-rgb), var(--be-glass-opacity));
    --bs-toast-border-width: 0;
    --bs-toast-border-color: var(--bs-border-color-translucent);
    --bs-toast-border-radius: var(--bs-border-radius-sm);
    --bs-toast-box-shadow:
        1px 0px 1px 0px var(--be-shadow-nav-pill),
        -1px 0px 1px 0px var(--be-shadow-nav-pill),
        0 14px 36px var(--be-shadow-glass-color),
        inset 1px 5px 0px -4px var(--be-border-color-glass),
        inset -1px -5px 0px -4px var(--be-border-color-glass),
        inset 0px -10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent),
        inset 0px 10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent)!important;
    --bs-toast-header-color: var(--bs-secondary-color);
    --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
    --bs-toast-header-border-color: var(--bs-border-color-translucent);
    width: var(--bs-toast-max-width);
    max-width: 100%;
    font-size: var(--bs-toast-font-size);
    color: var(--bs-toast-color);
    pointer-events: auto;
    background-color: var(--bs-toast-bg);
    background-clip: padding-box;
    border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
    box-shadow: var(--bs-toast-box-shadow);
    border-radius: var(--bs-toast-border-radius);
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
    cursor: pointer;
}

.toast-header {
    background-color: transparent;
    border-top-left-radius: var(--bs-border-radius-sm);
    border-top-right-radius: var(--bs-border-radius-sm);
}

/* CARDS & MODALS & OFFCANAS */

.card {
    --bs-card-spacer-y: var(--be-space-m);
    --bs-card-spacer-x: var(--be-space-m);
    --bs-card-title-spacer-y: 1rem;
    --bs-card-border-width: 0;
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-bg: rgb(var(--bs-secondary-bg-rgb), var(--be-glass-opacity));
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 1rem;
}

.card-sm {
    --bs-card-border-radius: var(--bs-border-radius-sm);
}

.card-secondary-top {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--gradient-color, var(--bs-secondary-bg)) var(--gradient-stop, 40%)
    );
}

.card-secondary-bottom {
    background: linear-gradient(
        to bottom,
        var(--gradient-color, var(--bs-secondary-bg)) var(--gradient-stop, 60%),
        transparent 100%
    );
}

/* GLASS */

.glass-bc {
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
    border: none;
}

.glass {
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
    box-shadow: 
        inset 1px 5px 0px -4px var(--be-border-color-glass),
        inset -1px -5px 0px -4px var(--be-border-color-glass),
        inset 0px -10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent),
        inset 0px 10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent)!important;
    border: none;
}

.glass-s {
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
    box-shadow: 
        inset 0px 0px 4px 0px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-m), transparent),
        inset 1px 5px 1px -4px  color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-l), transparent),
        inset -1px -5px 0px -4px  color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-l), transparent);
    border: none;
}

.glass-shadow {
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
    box-shadow: 
        0 14px 36px var(--be-shadow-glass-color),
        inset 1px 5px 0px -4px var(--be-border-color-glass),
        inset -1px -5px 0px -4px var(--be-border-color-glass),
        inset 0px -10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent),
        inset 0px 10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent)!important;
    border: none;
}

.glass-shadow-s {
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
    box-shadow: 
        0 14px 36px  var(--be-shadow-glass-color),
        inset 0px 0px 4px 0px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-m), transparent),
        inset 1px 5px 1px -4px  color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-l), transparent),
        inset -1px -5px 0px -4px  color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-l), transparent);
    border: none;
}

.glass-bordered {
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
    box-shadow: 
        1px 0px 1px 0px var(--be-shadow-nav-pill),
        -1px 0px 1px 0px var(--be-shadow-nav-pill),
        inset 1px 5px 0px -4px var(--be-border-color-glass),
        inset -1px -5px 0px -4px var(--be-border-color-glass),
        inset 0px -10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent),
        inset 0px 10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent)!important;
    border: none;
}

.glass-bordered-s {
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
    box-shadow: 
        1px 0px 1px 0px var(--be-shadow-nav-pill),
        -1px 0px 1px 0px var(--be-shadow-nav-pill),
        inset 0px 0px 4px 0px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-m), transparent),
        inset 1px 5px 1px -4px  color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-l), transparent),
        inset -1px -5px 0px -4px  color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-l), transparent);
    border: none;
}

.glass-shadow-bordered {
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
    box-shadow: 
        1px 0px 1px 0px var(--be-shadow-nav-pill),
        -1px 0px 1px 0px var(--be-shadow-nav-pill),
        0 14px 36px var(--be-shadow-glass-color),
        inset 1px 5px 0px -4px var(--be-border-color-glass),
        inset -1px -5px 0px -4px var(--be-border-color-glass),
        inset 0px -10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent),
        inset 0px 10px 10px -10px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity), transparent)!important;
    border: none;
}

.glass-shadow-bordered-s {
    -webkit-backdrop-filter: var(--be-glass-blur);
            backdrop-filter: var(--be-glass-blur);
    box-shadow: 
        1px 0px 1px 0px var(--be-shadow-nav-pill),
        -1px 0px 1px 0px var(--be-shadow-nav-pill),
        0 14px 36px  var(--be-shadow-glass-color),
        inset 0px 0px 4px 0px color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-m), transparent),
        inset 1px 5px 1px -4px  color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-l), transparent),
        inset -1px -5px 0px -4px  color-mix(in srgb, var(--be-border-color-glass) var(--be-shadow-glass-opacity-l), transparent);
    border: none;
}

.glass-s.form-control {
    border: var(--bs-border-width) solid rgb(var(--bs-tertiary-bg-rgb), var(--be-input-opacity));
}