/*
/* NB Fajl:'./static/css/nbcomponent/nb7.icon.css.'
*/.nb-icon {
    font-size: var(--nb-icon-size-m);
}

.nb-icon.nb-icon-xs {
    font-size: var(--nb-icon-size-s);
}

.nb-icon.nb-icon-s {
    font-size: var(--nb-icon-size-s);
}

.nb-icon.nb-icon-m {
    font-size: var(--nb-icon-size-m);
}

.nb-icon.nb-icon-l {
    font-size: var(--nb-icon-size-l);
}


/*
/* NB Fajl:'./static/css/nbcomponent/nb7.link.css.'
*//*Link style*/
.nb-link {
    color: var(--nb-link-color-primary);
    cursor: pointer;
}

.nb-link:hover {
    color: var(--nb-link-color-secondary);
}
/*End Link style*/

/*Links sizing*/
.nb-link-xs {
    font-size: var(--nb-link-xs);
}

.nb-link-s {
    font-size: var(--nb-link-s);
}

.nb-link-m {
    font-size: var(--nb-link-m);
}

.nb-link-l {
    font-size: var(--nb-link-l);
}
/*End Links sizing*/

/* Ovo treba obrisati */

/*Link Primary*/
.nb-link.nb-primary-link {
    color: var(--nb-link-color-primary);
}

.nb-link.nb-primary-link:hover {
    color: var(--nb-link-primary-hover-color);
}
/*End Link Primary*/

/*Link Secondary*/
.nb-link.nb-secondary-link {
    color: var(--nb-link-secondary-color);
}

.nb-link.nb-secondary-link:hover {
    color: var(--nb-link-secondary-hover-color);
}
/*End Link Secondary*/

/* **** */



/* Text link 1 (no underline) */
.nb-link.text-link-1{
    text-decoration: none;
}
.nb-link.text-link-1.nb-primary-link{
    color: var(--nb-text-link-1-primary-color)
}
.nb-link.text-link-1.nb-primary-link:hover{
    color: var(--nb-text-link-1-primary-hover-color);
}
.nb-link.text-link-1.nb-secondary-link{
    color: var(--nb-text-link-1-secondary-color)
}
.nb-link.text-link-1.nb-secondary-link:hover{
    color: var(--nb-text-link-1-secondary-hover-color);
}

/* Text link 2 (underline all states) */
.nb-link.text-link-2{
    text-decoration: underline;
    text-underline-offset: 5px;
}
.nb-link.text-link-2.nb-primary-link{
    color: var(--nb-text-link-2-primary-color)
}
.nb-link.text-link-2.nb-primary-link:hover{
    color: var(--nb-text-link-2-primary-hover-color);
}
.nb-link.text-link-2.nb-secondary-link{
    color: var(--nb-text-link-2-secondary-color)
}
.nb-link.text-link-2.nb-secondary-link:hover{
    color: var(--nb-text-link-2-secondary-hover-color);
}

/* Text link 3 (hover underline) */
.nb-link.text-link-3{
    text-decoration: none;
}
.nb-link.text-link-3:hover{
    text-decoration: underline;
}
.nb-link.text-link-3.nb-primary-link{
    color: var(--nb-text-link-3-primary-color)
}
.nb-link.text-link-3.nb-primary-link:hover{
    color: var(--nb-text-link-3-primary-hover-color);
}
.nb-link.text-link-3.nb-secondary-link{
    color: var(--nb-text-link-3-secondary-color)
}
.nb-link.text-link-3.nb-secondary-link:hover{
    color: var(--nb-text-link-3-secondary-hover-color);
}

/* Text link 4 (hover dash left) */
.nb-link.nb-text-link-4 {
    position: relative;
    display: flex;
    align-items: center;
    max-width: max-content;
}

.nb-link.nb-text-link-4:before {
    display: inline-flex;
    align-items: center;
    content: '';
    position: relative;
    width: 0;
    height: 2px;
    transition: width 0.5s;
    background: var(--nb-spec-color);
}

.nb-link.nb-text-link-4:hover:before {
    width: 20px;
    margin-right: 10px;
}
/*
/* NB Fajl:'./static/css/nbcomponent/nb7.scroll.css.'
*/.nb-custom-scroll-1{
    --nb-scroll-1-width: 5px;
    --nb-scroll-1-track-bg: var(--nb-color-light-2);
    --nb-scroll-1-bg: var(--nb-spec-color);
}
/* Scroll width */
.nb-custom-scroll-1::-webkit-scrollbar {
    width: var(--nb-scroll-1-width);
}
/* Track */
.nb-custom-scroll-1::-webkit-scrollbar-track {
    background: var(--nb-scroll-1-track-bg);
}
/* Handle */
.nb-custom-scroll-1::-webkit-scrollbar-thumb:hover,
.nb-custom-scroll-1::-webkit-scrollbar-thumb {
    background: var(--nb-scroll-1-bg);
}

/*
/* NB Fajl:'./static/css/nbcomponent/nb7.card.css.'
*/
/*
    CARD komponenta
*/

:root {
    --nb-card-floating-body-bg: var(--nb-color-white);
    --nb-card-floating-body-height: 138px;
    --nb-card-floating-transition: all 0.5s ease;
}

.nb-card {
    border: var(--nb-card-border-width) var(--nb-border-style) var(--nb-border-color);
    border-radius: var(--nb-card-border-radius);
    background: var(--nb-card-bg);
}

.nb-card.border-radius-bottom{
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.nb-card.border-radius-top{
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.nb-card .nb-card-footer{
    border-bottom-left-radius: var(--nb-card-border-radius);
    border-bottom-right-radius: var(--nb-card-border-radius);
    background-color: var(--nb-card-footer-bg);
    padding: var(--nb-card-spacer-y) var(--nb-card-spacer-x);
    border-top: var(--nb-card-footer-top-border-width) var(--nb-border-style) var(--nb-card-footer-top-border-color);
}

.nb-card .nb-card-header {
    border-top-left-radius: var(--nb-card-border-radius);
    border-top-right-radius: var(--nb-card-border-radius);
    background-color: var(--nb-card-header-bg);
    padding: var(--nb-card-spacer-y) var(--nb-card-spacer-x);
    border-bottom: var(--nb-card-header-bottom-border-width) var(--nb-border-style) var(--nb-card-header-bottom-border-color);
}

.nb-card > .nb-img-wrapper{
    border-top-left-radius: var(--nb-card-border-radius);
    border-top-right-radius: var(--nb-card-border-radius);
    overflow: hidden;
}

.nb-card.nb-card-floating-body {
    position: relative;
    height: 100%;
    padding-bottom: var(--nb-card-floating-body-height);
}

.nb-card.nb-card-floating-body .nb-img-wrapper {
    height: 100%;
}

.nb-card.nb-card-floating-body .nb-card-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--nb-card-floating-body-bg);
    max-height: var(--nb-card-floating-body-height);
    overflow: hidden;
    transition: var(--nb-card-floating-transition);
    z-index: 2;
    cursor: pointer;
    border-bottom-left-radius: var(--nb-card-border-radius);
    border-bottom-right-radius: var(--nb-card-border-radius);
}

.nb-card.nb-card-floating-body:hover .nb-card-body {
    max-height: 100%;
}

@media screen and (max-width: 576px) {
    .nb-card.nb-card-floating-body {
        padding-bottom: 0;
    }
    
    .nb-card.nb-card-floating-body .nb-card-body {
        position: relative;
        bottom: unset;
        left: unset;
        right: unset;
        max-height: 100%;
    }
}
/*
/* NB Fajl:'./static/css/nbcomponent/nb7.loader.css.'
*/:root {
    --nb-loader-bg: #ffffffCC;
    --nb-loader-img-max-width: 100px;
}

.nb-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: var(--nb-loader-bg);
    z-index: 99;
}

.nb-loader .nb-img {
    max-width: var(--nb-loader-img-max-width);
}

.nb-loader.nb-loader-product-listing .nb-img {
    position: relative;
    top: 100px;
}

.nb-loader.nb-loader-mini-cart{
    display: flex;
    justify-content: center;
    align-items: center;
}
.nb-loader.nb-loader-mini-cart .nb-img{
    position: relative;
    top: -10%;
}

.nb-loader.nb-loader-cart{
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
/* NB Fajl:'./static/css/nbcomponent/nb7.html-editor.css.'
*/.cke_maximized,
.cke_panel{
    z-index: 10010 !important;
}
/*
/* NB Fajl:'./static/js/nbjs/nb-editor/css/variables.css.'
*/:root {
    /* Boje UI-a editora */
    --nb-editor-primary: #3b82f6;
    --nb-editor-primary-dark: #2563eb;
    --nb-editor-primary-light: #e3f2fd;
    --nb-editor-text-main: #334155;
    --nb-editor-text-dark: #0f172a;
    --nb-editor-text-muted: #64748b;
    --nb-editor-bg-toolbar: #f8fafc;
    --nb-editor-bg-hover: #f1f5f9;
    --nb-editor-bg-white: #ffffff;
    --nb-editor-border-color: #e2e8f0;
    --nb-editor-border-strong: #cbd5e1;
    --nb-editor-danger: #dc2626;
    --nb-editor-warning-bg: #fef3c7;
    --nb-editor-warning-border: #f59e0b;

    /* Radijusi i senke */
    --nb-editor-radius-sm: 4px;
    --nb-editor-radius-md: 6px;
    --nb-editor-radius-lg: 8px;
    --nb-editor-radius-xl: 12px;
    --nb-editor-shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
    --nb-editor-shadow-modal: 0 20px 40px -8px rgba(15, 23, 42, .28);

    /* Slojevi - jedno mesto za sve z-index vrednosti */
    --nb-editor-z-fullscreen: 900;
    --nb-editor-z-dropdown: 950;
    --nb-editor-z-modal-overlay: 999999;
    --nb-editor-z-modal: 1001;

    /* Tipografija UI-a */
    --nb-editor-font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --nb-editor-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/*
/* NB Fajl:'./static/js/nbjs/nb-editor/css/content.css.'
*//**
 * =============================================================================
 *  NB EDITOR - STILOVI SADRZAJA
 * =============================================================================
============================================================================
 */


/* =============================================================================
   2. TIPOGRAFIJA IZ DIZAJN SISTEMA   (opcija 15)
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-lead {
    font-size: 1.12rem;
}

:is(.nb-content, .nb-html-editor) .nb-small {
    font-size: .82rem;
}


/* =============================================================================
   3. TOKENI VELICINE FONTA   (opcija 17)
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-fs-xs  { font-size: .75rem; }
:is(.nb-content, .nb-html-editor) .nb-fs-sm  { font-size: .875rem; }
:is(.nb-content, .nb-html-editor) .nb-fs-md  { font-size: 1rem; }
:is(.nb-content, .nb-html-editor) .nb-fs-lg  { font-size: 1.125rem; }
:is(.nb-content, .nb-html-editor) .nb-fs-xl  { font-size: 1.25rem; }
:is(.nb-content, .nb-html-editor) .nb-fs-2xl { font-size: 1.5rem; }
:is(.nb-content, .nb-html-editor) .nb-fs-3xl { font-size: 1.875rem; }


/* =============================================================================
   4. BLOK I INLINE STILOVI   (opcija 14)
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-note {
    border-left: 3px solid #0ea5e9;
    padding-left: 12px;
    color: #0369a1;
    font-size: .92rem;
}

:is(.nb-content, .nb-html-editor) .nb-highlight {
    background: #fef08a;
    padding: 0 3px;
    border-radius: 2px;
}

:is(.nb-content, .nb-html-editor) .nb-muted {
    color: #94a3b8;
}

:is(.nb-content, .nb-html-editor) .nb-code-inline {
    font-family: var(--nb-editor-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .9em;
}

:is(.nb-content, .nb-html-editor) .nb-badge {
    display: inline-block;
    background: #3b82f6;
    color: #fff;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 600;
}


/* --- Callout blokovi --------------------------------------------------- */

:is(.nb-content, .nb-html-editor) .nb-callout {
    padding: 14px 16px;
    border-radius: var(--nb-editor-radius-md, 6px);
}

:is(.nb-content, .nb-html-editor) .nb-callout__title {
    margin: 0 0 4px;
    font-weight: 700;
}

:is(.nb-content, .nb-html-editor) .nb-callout--info    { background: #e0f2fe; color: #075985; }
:is(.nb-content, .nb-html-editor) .nb-callout--warning { background: #fef3c7; color: #78350f; }
:is(.nb-content, .nb-html-editor) .nb-callout--danger  { background: #fee2e2; color: #991b1b; }
:is(.nb-content, .nb-html-editor) .nb-callout--success { background: #dcfce7; color: #14532d; }


/* --- Citat -------------------------------------------------------------- */

:is(.nb-content, .nb-html-editor) .nb-quote {
    margin: 0;
    padding: 12px 18px;
    border-left: 4px solid var(--nb-editor-border-strong, #cbd5e1);
    font-style: italic;
}

:is(.nb-content, .nb-html-editor) .nb-quote__author {
    margin-top: 8px;
    font-style: normal;
    font-size: .85rem;
    color: #64748b;
}


/* --- Poziv na akciju ---------------------------------------------------- */

:is(.nb-content, .nb-html-editor) .nb-cta {
    padding: 24px;
    background: #f1f5f9;
    border-radius: var(--nb-editor-radius-lg, 8px);
    text-align: center;
}


/* =============================================================================
   5. TOKENI BOJA   (opcije 18 / 19 / 20 / 21)
   --------------------------------------------------------------------------
   Ove klase postavlja paleta dizajn sistema. Color picker umesto klase
   upisuje inline style, i to je namerno iskljucivo - nikad oba istovremeno
   (vidi extensions/textColor.js), pa nema CSS trke.
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-text-primary   { color: var(--nb-text-color-primary); }
:is(.nb-content, .nb-html-editor) .nb-text-secondary { color: var(--nb-text-color-secondary); }
:is(.nb-content, .nb-html-editor) .nb-text-success   { color: var(--nb-color-success); }
:is(.nb-content, .nb-html-editor) .nb-text-warning   { color: var(--nb-color-warning); }
:is(.nb-content, .nb-html-editor) .nb-text-danger    { color: var(--nb-color-danger); }
:is(.nb-content, .nb-html-editor) .nb-text-info      { color: var(--nb-color-info); }
:is(.nb-content, .nb-html-editor) .nb-text-dark      { color: #000000; }
:is(.nb-content, .nb-html-editor) .nb-text-light     { color: #ffffff; }

:is(.nb-content, .nb-html-editor) .nb-bg-primary   { background-color: var(--nb-bg-primary); }
:is(.nb-content, .nb-html-editor) .nb-bg-secondary { background-color: var(--nb-bg-secondary); }
:is(.nb-content, .nb-html-editor) .nb-bg-success   { background-color: var(--nb-color-success); }
:is(.nb-content, .nb-html-editor) .nb-bg-warning   { background-color: var(--nb-color-warning); }
:is(.nb-content, .nb-html-editor) .nb-bg-danger    { background-color: var(--nb-color-danger); }
:is(.nb-content, .nb-html-editor) .nb-bg-info      { background-color: var(--nb-color-info); }
:is(.nb-content, .nb-html-editor) .nb-bg-dark      { background-color: #0f172a; color: #f8fafc; }
:is(.nb-content, .nb-html-editor) .nb-bg-white     { background-color: #ffffff; }


/* =============================================================================
   6. LISTE   (opcija 8)
   --------------------------------------------------------------------------
   Vrsta oznake (disc / decimal / lower-alpha / upper-roman ...) dolazi kao
   inline `list-style-type` iz ListStyle ekstenzije - namerno, jer je to
   cisto prezentaciona CSS osobina bez semantike.
   ========================================================================== */

:is(.nb-content, .nb-html-editor) ul,
:is(.nb-content, .nb-html-editor) ol {
    padding-left: 1.6em;
}

:is(.nb-content, .nb-html-editor) li > p {
    margin: 0;
}

:is(.nb-content, .nb-html-editor) li + li {
    margin-top: .25em;
}


/* =============================================================================
   7. TABELE   (opcija 10)
   ========================================================================== */

:is(.nb-content, .nb-html-editor) table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.2em 0;
}

:is(.nb-content, .nb-html-editor) th,
:is(.nb-content, .nb-html-editor) td {
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

:is(.nb-content, .nb-html-editor) th {
    background: #f8fafc;
    font-weight: 600;
}

/* Stilovi iz dizajn sistema (design-system.js -> TABLE_STYLES) */
:is(.nb-content, .nb-html-editor) .nb-table th,
:is(.nb-content, .nb-html-editor) .nb-table td {
    border-bottom: 1px solid var(--nb-editor-border-color, #e2e8f0);
}

:is(.nb-content, .nb-html-editor) .nb-table--bordered th,
:is(.nb-content, .nb-html-editor) .nb-table--bordered td {
    border: 1px solid var(--nb-editor-border-color, #e2e8f0);
}

:is(.nb-content, .nb-html-editor) .nb-table--striped tbody tr:nth-child(odd) {
    background: #f8fafc;
}

:is(.nb-content, .nb-html-editor) .nb-table--compact th,
:is(.nb-content, .nb-html-editor) .nb-table--compact td {
    padding: 5px 8px;
    font-size: .9rem;
}

:is(.nb-content, .nb-html-editor) .nb-table--borderless th,
:is(.nb-content, .nb-html-editor) .nb-table--borderless td {
    border: 0;
}

/*
 * NAPOMENA za public: u editoru ProseMirror sam obmotava tabelu u
 * .tableWrapper koji resava horizontalni scroll. Na public-u tog omotaca
 * NEMA, pa siroke tabele mogu da razvale layout na mobilnom.
 * Ako vam se to javi, obmotajte tabelu na render-u:
 *     <div class="nb-table-scroll"><table>...</table></div>
 */
:is(.nb-content, .nb-html-editor) .nb-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =============================================================================
   8. SLIKE   (opcija 11)
   --------------------------------------------------------------------------
   Izlazni markup:
     <figure data-nb-image class="nb-img nb-img--rounded" style="text-align:center">
       <a href="..."><img src alt></a>
       <figcaption>Opis</figcaption>
     </figure>
   Poravnanje dolazi kao inline text-align iz NbImage node-a.
   ========================================================================== */


:is(.nb-content, .nb-html-editor) .nb-img figcaption {
    margin-top: 6px;
    font-size: .82rem;
    color: #64748b;
}

:is(.nb-content, .nb-html-editor) .nb-img--rounded img  { border-radius: var(--nb-border-radius-l, 8px); }
:is(.nb-content, .nb-html-editor) .nb-img--circle img   { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
:is(.nb-content, .nb-html-editor) .nb-img--bordered img { border: 1px solid var(--nb-editor-border-strong, #cbd5e1); padding: 4px; background: #fff; }
:is(.nb-content, .nb-html-editor) .nb-img--shadow img   { box-shadow: 0 8px 20px -6px rgba(15, 23, 42, .3); }
:is(.nb-content, .nb-html-editor) .nb-img--full img     { width: 100%; }


/* =============================================================================
   9. PRELOM STRANE   (opcija 12)
   --------------------------------------------------------------------------
   IZMENA U ODNOSU NA PRVU VERZIJU:
   isprekidana linija i oznaka "Prelom strane" su prebacene u
   content-editor.css. Bile su u deljenom fajlu, pa se ta oznaka
   prikazivala i posetiocima na public sajtu.
   Ovde ostaje samo ono sto je zaista deljeno: sam prelom u stampi.
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-page-break {
    height: 0;
    margin: 0;
    border: 0;
}

@media print {
    :is(.nb-content, .nb-html-editor) .nb-page-break {
        break-after: page;
        page-break-after: always;
    }
}


/* =============================================================================
   10. VIDEO   (opcija 25)
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-video {
    position: relative;
    margin: 1.2em 0;
    background: #000;
    border-radius: var(--nb-editor-radius-md, 6px);
    overflow: hidden;
}

:is(.nb-content, .nb-html-editor) .nb-video--16x9 { aspect-ratio: 16 / 9; }
:is(.nb-content, .nb-html-editor) .nb-video--4x3  { aspect-ratio: 4 / 3; }

:is(.nb-content, .nb-html-editor) .nb-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* =============================================================================
   11. EMBED   (opcija 26)
   --------------------------------------------------------------------------
   U sadrzaju je samo <div data-nb-embed="instagram" data-url="...">
   sa <a> fallback-om unutra. Pravi embed hidrira frontend - editor namerno
   ne izvrsava skripte trecih strana.
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-embed {
    margin: 1.2em 0;
}


/* =============================================================================
   12. STATICKI BLOKOVI - REFERENCA   (opcije 23 / 24)
   --------------------------------------------------------------------------
   PAZI: kada je blok ubacen kao referenca, u sacuvanom HTML-u je PRAZAN div:
       <div data-nb-static-block="hero-split" data-nb-category="html"></div>
   Backend/frontend mora da ga zameni markup-om iz config/static-blocks.js.
   Ako to nije implementirano, na public-u se nista ne prikaze.
   Blokovi ubaceni kao "sadrzaj" ne zavise od ovoga - oni su pravi HTML.
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-static-block:empty {
    display: none;
}


/* =============================================================================
   13. PRISTUPACNOST
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :is(.nb-content, .nb-html-editor) * {
        animation: none !important;
        transition: none !important;
    }
}
/*
/* NB Fajl:'./static/css/nbcomponent/nb7.countdown.css.'
*/.nb-countdown{
    width: fit-content;
}
.nb-countdown .nb-items-wrapper{
    display: flex;
    gap: 30px;
}

.nb-countdown .nb-items-wrapper .nb-item{
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.nb-countdown .nb-items-wrapper .nb-item .nb-countdown-value{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--nb-border-color);
    font-size: 18px;
    font-weight: var(--nb-font-medium);
}

.nb-countdown .nb-items-wrapper .nb-item .nb-countdown-text{
    font-size: 14px;
}

@media screen and (max-width: 991px) and (min-width: 576px) {
    .nb-countdown {
        width: 100%;
    }

    .nb-countdown .nb-items-wrapper {
        gap: 0;
        justify-content: space-evenly;
    }
}
/*
/* NB Fajl:'./static/css/nbcomponent/nb7.buttons.css.'
*/
/*
    BUTTONS komponenta
*/

.nb-btn{
    font-family:    var(--nb-btn-font-family);
    font-size:      var(--nb-btn-font-size);
    line-height:    var(--nb-btn-line-height);
    font-weight:    var(--nb-btn-font-weight);
    color:          var(--nb-btn-color);
    background:     var(--nb-btn-bg);
    height:         var(--nb-btn-height);
    border-radius:  var(--nb-btn-border-radius);
    border:         var(--nb-btn-border-width) var(--nb-btn-border-style) var(--nb-btn-border-color);
    padding:        var(--nb-btn-padding-y) var(--nb-btn-padding-x);
    min-width:      var(--nb-btn-min-width);
    position:relative;
}
.nb-btn:active,
.nb-btn:focus,
.nb-btn:hover{
    color:          var(--nb-btn-hover-color);
    background:     var(--nb-btn-hover-bg);
    border-color:   var(--nb-btn-hover-border-color);
}

.nb-btn.nb-btn-primary{
    color:          var(--nb-btn-primary-color);
    background:     var(--nb-btn-primary-bg);
    border-color:   var(--nb-btn-primary-border-color);
}
.nb-btn.nb-btn-primary:active,
.nb-btn.nb-btn-primary:focus,
.nb-btn.nb-btn-primary:hover{
    color:          var(--nb-btn-primary-hover-color);
    background:     var(--nb-btn-primary-hover-bg);
    border-color:   var(--nb-btn-primary-hover-border-color);
}

.nb-btn.nb-btn-secondary{
    color:          var(--nb-btn-secondary-color);
    background:     var(--nb-btn-secondary-bg);
    border-color:   var(--nb-btn-secondary-border-color);
}
.nb-btn.nb-btn-secondary:active,
.nb-btn.nb-btn-secondary:focus,
.nb-btn.nb-btn-secondary:hover{
    color:          var(--nb-btn-secondary-hover-color);
    background:     var(--nb-btn-secondary-hover-bg);
    border-color:   var(--nb-btn-secondary-hover-border-color);
}

.nb-btn.nb-btn-success{
    color:          var(--nb-btn-success-color);
    background:     var(--nb-btn-success-bg);
    border-color:   var(--nb-btn-success-border-color);
}
.nb-btn.nb-btn-success:active,
.nb-btn.nb-btn-success:focus,
.nb-btn.nb-btn-success:hover{
    color:          var(--nb-btn-success-hover-color);
    background:     var(--nb-btn-success-hover-bg);
    border-color:   var(--nb-btn-success-hover-border-color);
}

.nb-btn.nb-btn-danger{
    color:          var(--nb-btn-danger-color);
    background:     var(--nb-btn-danger-bg);
    border-color:   var(--nb-btn-danger-border-color);
}
.nb-btn.nb-btn-danger:active,
.nb-btn.nb-btn-danger:focus,
.nb-btn.nb-btn-danger:hover{
    color:          var(--nb-btn-danger-hover-color);
    background:     var(--nb-btn-danger-hover-bg);
    border-color:   var(--nb-btn-danger-hover-border-color);
}

.nb-btn.nb-btn-warning{
    color:          var(--nb-btn-warning-color);
    background:     var(--nb-btn-warning-bg);
    border-color:   var(--nb-btn-warning-border-color);
}
.nb-btn.nb-btn-warning:active,
.nb-btn.nb-btn-warning:focus,
.nb-btn.nb-btn-warning:hover{
    color:          var(--nb-btn-warning-hover-color);
    background:     var(--nb-btn-warning-hover-bg);
    border-color:   var(--nb-btn-warning-hover-border-color);
}

.nb-btn.nb-btn-info{
    color:          var(--nb-btn-info-color);
    background:     var(--nb-btn-info-bg);
    border-color:   var(--nb-btn-info-border-color);
}
.nb-btn.nb-btn-info:active,
.nb-btn.nb-btn-info:focus,
.nb-btn.nb-btn-info:hover{
    color:          var(--nb-btn-info-hover-color);
    background:     var(--nb-btn-info-hover-bg);
    border-color:   var(--nb-btn-info-hover-border-color);
}

.nb-btn.nb-btn-dark{
    color:          var(--nb-btn-dark-color);
    background:     var(--nb-btn-dark-bg);
    border-color:   var(--nb-btn-dark-border-color);
}
.nb-btn.nb-btn-dark:active,
.nb-btn.nb-btn-dark:focus,
.nb-btn.nb-btn-dark:hover{
    color:          var(--nb-btn-dark-hover-color);
    background:     var(--nb-btn-dark-hover-bg);
    border-color:   var(--nb-btn-dark-hover-border-color);
}

.nb-btn.nb-btn-light{
    color:          var(--nb-btn-light-color);
    background:     var(--nb-btn-light-bg);
    border-color:   var(--nb-btn-light-border-color);
}
.nb-btn.nb-btn-light:active,
.nb-btn.nb-btn-light:focus,
.nb-btn.nb-btn-light:hover{
    color:          var(--nb-btn-light-hover-color);
    background:     var(--nb-btn-light-hover-bg);
    border-color:   var(--nb-btn-light-hover-border-color);
}

/* Sizing */
.nb-btn.nb-btn-xs{
    font-size: var(--nb-btn-font-size-xs);
    line-height: var(--nb-btn-line-height-xs);
    padding-top: var(--nb-btn-padding-y-xs);
    padding-bottom: var(--nb-btn-padding-y-xs);
}
.nb-btn.nb-btn-s{
    font-size: var(--nb-btn-font-size-s);
    line-height: var(--nb-btn-line-height-s);
    padding-top: var(--nb-btn-padding-y-s);
    padding-bottom: var(--nb-btn-padding-y-s);
}
.nb-btn.nb-btn-m{
    font-size: var(--nb-btn-font-size-m);
    line-height: var(--nb-btn-line-height-m);
    padding-top: var(--nb-btn-padding-y-m);
    padding-bottom: var(--nb-btn-padding-y-m);
}
.nb-btn.nb-btn-l{
    font-size: var(--nb-btn-font-size-l);
    line-height: var(--nb-btn-line-height-l);
    padding-top: var(--nb-btn-padding-y-l);
    padding-bottom: var(--nb-btn-padding-y-l);
}


.nb-btn:hover{
    text-decoration: none;
}

.nb-btn-button{
    color: var(--nb-color-white);
    background: var(--nb-btn-primary-bg);
    border-color: var(--nb-btn-primary-border-color);
}
.nb-btn-button:active,
.nb-btn-button:focus,
.nb-btn-button:hover{
    color: var(--nb-color-white);
    background: var(--nb-btn-primary-hover-bg);
    border-color: var(--nb-btn-primary-hover-border-color);
}

.nb-btn-add-to-cart{

}

.nb-btn-add-to-cart-detail{

}

.nb-btn-add-to-cart-list{

}

.nb-btn-form{
    --nb-btn-min-width: 150px;
    color: var(--nb-color-white);
    background: var(--nb-btn-primary-bg);
    border-color: var(--nb-btn-primary-border-color);
    /*padding: ;*/
}

.nb-btn-form:active,
.nb-btn-form:focus,
.nb-btn-form:hover{
    color: var(--nb-color-white);
    background: var(--nb-btn-primary-hover-bg);
    border-color: var(--nb-btn-primary-hover-border-color);
}

.nb-btn.nb-btn-link{
    color: var(--nb-color-white) ;
    background: var(--nb-spec-color) ;
    border-color: var(--nb-spec-color) ;
}

.nb-btn.nb-btn-link:active,
.nb-btn.nb-btn-link:focus,
.nb-btn.nb-btn-link:hover {
    color: var(--nb-spec-color);
    background: var(--nb-color-white);
    border-color: var(--nb-spec-color);
}

/* Submit loading */
.nb-btn[type='submit'].active .btn-text,
.nb-btn[type='submit'] .nb-btn-loading{
    display: none;
}
.nb-btn[type='submit'].active .nb-btn-loading{
    display: block;
}
.nb-btn[type='submit'].active{
    pointer-events: none;
    opacity: .5;
}


/* Different style button*/

.nb-btn.nb-btn-link-style{
    padding: 0;
    background: transparent;
    border: none;
    color: var(--nb-text-color-primary);
    min-width: auto;
}

.nb-btn.nb-btn-link-style:active,
.nb-btn.nb-btn-link-style:focus,
.nb-btn.nb-btn-link-style:hover{
    background: transparent;
    color: var(--nb-spec-color);
}

@media screen and (max-width: 576px) {
    .nb-btn-form {
        width: 100%;
    }
}

/*Btn with icon*/
.nb-btn.nb-icon-btn{
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.nb-btn.nb-icon-btn.reverse-icon{
    flex-direction: row-reverse;
}


/* Transparent Btn */
.nb-btn.nb-btn-primary-transparent{
    --nb-btn-primary-color: var(--nb-color-primary);
    color:          var(--nb-btn-primary-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-primary-border-color);
}
.nb-btn.nb-btn-primary-transparent:active,
.nb-btn.nb-btn-primary-transparent:focus,
.nb-btn.nb-btn-primary-transparent:hover{
    --nb-btn-primary-hover-color: var(--nb-color-white);
    color:          var(--nb-btn-primary-hover-color);
    background:     var(--nb-btn-primary-hover-border-color);
    border-color:   var(--nb-btn-primary-hover-border-color);
}

.nb-btn.nb-btn-secondary-transparent{
    --nb-btn-secondary-color: var(--nb-color-secondary);
    color:          var(--nb-btn-secondary-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-secondary-border-color);
}
.nb-btn.nb-btn-secondary-transparent:active,
.nb-btn.nb-btn-secondary-transparent:focus,
.nb-btn.nb-btn-secondary-transparent:hover{
    --nb-btn-secondary-hover-color: var(--nb-color-secondary);
    color:          var(--nb-btn-secondary-hover-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-secondary-hover-border-color);
}

.nb-btn.nb-btn-success-transparent{
    --nb-btn-success-color: var(--nb-color-success);
    color:          var(--nb-btn-success-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-success-border-color);
}
.nb-btn.nb-btn-success-transparent:active,
.nb-btn.nb-btn-success-transparent:focus,
.nb-btn.nb-btn-success-transparent:hover{
    --nb-btn-success-hover-color: var(--nb-color-success);
    color:          var(--nb-btn-success-hover-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-success-hover-border-color);
}

.nb-btn.nb-btn-danger-transparent{
    --nb-btn-danger-color: var(--nb-color-danger);
    color:          var(--nb-btn-danger-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-danger-border-color);
}
.nb-btn.nb-btn-danger-transparent:active,
.nb-btn.nb-btn-danger-transparent:focus,
.nb-btn.nb-btn-danger-transparent:hover{
    --nb-btn-danger-hover-color: var(--nb-color-danger);
    color:          var(--nb-btn-danger-hover-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-danger-hover-border-color);
}

.nb-btn.nb-btn-warning-transparent{
    --nb-btn-warning-color: var(--nb-color-warning);
    color:          var(--nb-btn-warning-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-warning-border-color);
}
.nb-btn.nb-btn-warning-transparent:active,
.nb-btn.nb-btn-warning-transparent:focus,
.nb-btn.nb-btn-warning-transparent:hover{
    --nb-btn-warning-hover-color: var(--nb-color-warning);
    color:          var(--nb-btn-warning-hover-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-warning-hover-border-color);
}

.nb-btn.nb-btn-info-transparent{
    --nb-btn-info-color: var(--nb-color-info);
    color:          var(--nb-btn-info-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-info-border-color);
}
.nb-btn.nb-btn-info-transparent:active,
.nb-btn.nb-btn-info-transparent:focus,
.nb-btn.nb-btn-info-transparent:hover{
    --nb-btn-info-hover-color: var(--nb-color-info);
    color:          var(--nb-btn-info-hover-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-info-hover-border-color);
}

.nb-btn.nb-btn-dark-transparent{
    --nb-btn-dark-color: var(--nb-color-black);
    color:          var(--nb-btn-dark-color);
    background:     var(--nb-color-white);
    border-color:   var(--nb-btn-dark-border-color);
}
.nb-btn.nb-btn-dark-transparent:active,
.nb-btn.nb-btn-dark-transparent:focus,
.nb-btn.nb-btn-dark-transparent:hover{
    --nb-btn-dark-hover-color: var(--nb-color-dark);
    color:          var(--nb-color-white);
    background:     var(--nb-btn-dark-hover-color);
    border-color:   var(--nb-btn-dark-border-color);
}

.nb-btn.nb-btn-light-transparent{
    --nb-btn-light-color: var(--nb-color-light);
    color:          var(--nb-btn-light-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-light-border-color);
}
.nb-btn.nb-btn-light-transparent:active,
.nb-btn.nb-btn-light-transparent:focus,
.nb-btn.nb-btn-light-transparent:hover{
    --nb-btn-light-hover-color: var(--nb-color-light);
    color:          var(--nb-btn-light-hover-color);
    background:     var(--nb-btn-bg);
    border-color:   var(--nb-btn-light-border-color);
}

.nb-btn.nb-btn-text{
    padding: 0;
    border: none;
    background: none;
    color: var(--nb-text-color-primary) !important;
}
.nb-btn.nb-btn-text,
.nb-btn.nb-btn-text,
.nb-btn.nb-btn-text{
    padding: 0;
    border: none;
    background: none;
}

/* Payment btn */

/*
/* NB Fajl:'./static/css/nbcomponent/nb7.alert.css.'
*/
/*
    ALERTS komponenta
*/

.nb-alert{
    border-radius: var(--nb-alert-border-radius);
    border: var(--nb-alert-border);
    padding: var(--nb-alert-padding-x) var(--nb-alert-padding-y);
    font-weight: var(--nb-alert-font-weight);
    font-size: var(--nb-alert-font-size);
    line-height: var(--nb-alert-line-height);
}

/* Stil za strukturu Alert-a sa ikonicom */
.nb-alert-icon{
    display:flex;
    align-items: center;
}

.nb-alert-icon .nb-icon{
    margin-right: 10px;
}

.nb-alert.nb-alert-primary {
    background-color: var(--nb-alert-primary-bg);
    color: var(--nb-alert-primary-color);
    border-color: var(--nb-alert-primary-border-color);
}
.nb-alert.nb-alert-secondary {
    background-color: var(--nb-alert-secondary-bg);
    color: var(--nb-alert-secondary-color);
    border-color: var(--nb-alert-secondary-border-color);
}
.nb-alert.nb-alert-info {
    background-color: var(--nb-alert-info-bg);
    color: var(--nb-alert-info-color);
    border-color: var(--nb-alert-info-border-color);
}
.nb-alert.nb-alert-info .nb-icon {
    color: var(--nb-color-cyan);
}
.nb-alert.nb-alert-danger {
    background-color: var(--nb-alert-danger-bg);
    color: var(--nb-alert-danger-color);
    border-color: var(--nb-alert-danger-border-color);
}
.nb-alert.nb-alert-danger .nb-icon {
    color: var(--nb-color-danger);
}
.nb-alert.nb-alert-success {
    background-color: var(--nb-alert-success-bg);
    color: var(--nb-alert-success-color);
    border-color: var(--nb-alert-success-border-color);
}
.nb-alert.nb-alert-success .nb-icon {
    color: var(--nb-color-success);
}
.nb-alert.nb-alert-warning {
    background-color: var(--nb-alert-warning-bg);
    color: var(--nb-alert-warning-color);
    border-color: var(--nb-alert-warning-border-color);
}
.nb-alert.nb-alert-warning .nb-icon {
    color: var(--nb-color-yellow);
}
.nb-alert.nb-alert-light {
    background-color: var(--nb-alert-light-bg);
    color: var(--nb-alert-light-color);
    border-color: var(--nb-alert-light-border-color);
}
.nb-alert.nb-alert-light .nb-icon {
    color: var(--nb-color-gray-200);
}
.nb-alert.nb-alert-dark {
    background-color: var(--nb-alert-dark-bg);
    color: var(--nb-alert-dark-color);
    border-color: var(--nb-alert-dark-border-color);
}
/*
/* NB Fajl:'./static/css/nbcomponent/nb7.offcanvas.css.'
*/
/*
    OFFCANVAS komponenta
*/

*.dragbox > .nb-offcanvas {
    position: relative !important;
    inset: unset !important;
    visibility: unset;
}

.nb-offcanvas {
    z-index: 10002;
}

.nb-offcanvas.offcanvas-start,
.nb-offcanvas.offcanvas-end {
    width: var(--nb-offcanvas-width);
}

.nb-offcanvas.offcanvas-top,
.nb-offcanvas.offcanvas-bottom {
    height: var(--nb-offcanvas-height);
}

.nb-offcanvas .nb-offcanvas-header {
    background-color: var(--nb-offcanvas-header-bg);
    border-bottom: var(--nb-offcanvas-header-border);
    padding: var(--nb-offcanvas-padding-x) var(--nb-offcanvas-padding-y);
}

.nb-offcanvas .nb-offcanvas-header .nb-btn-close,
.nb-offcanvas .nb-offcanvas-header .nb-offcanvas-title{
    color: var(--nb-offcanvas-header-color);
}

.nb-offcanvas .nb-offcanvas-body {
    padding: var(--nb-offcanvas-padding-x) var(--nb-offcanvas-padding-y);
}

.nb-offcanvas .nb-btn-close {
    padding: 0;
    margin: 0;
    font-size: 20px;
    cursor: pointer;
}

.nb-offcanvas.offcanvas-start {
    border-right: var(--nb-offcanvas-border);
}

.nb-offcanvas.offcanvas-end {
    border-left: var(--nb-offcanvas-border);
}

.nb-offcanvas.offcanvas-top {
    border-bottom: var(--nb-offcanvas-border);
}

.nb-offcanvas.offcanvas-bottom {
    border-top: var(--nb-offcanvas-border);
}

.nb-offcanvas .nb-offcanvas-footer {
    background-color: var(--nb-offcanvas-footer-bg);
    border-top: var(--nb-offcanvas-footer-border);
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--nb-offcanvas-padding-x) var(--nb-offcanvas-padding-y);
}

.nb-offcanvas .nb-offcanvas-title {
    line-height: var(--nb-h4-line-height);
}

.offcanvas-backdrop{
    z-index: 10001;
    background-color: var(--nb-offcanvas-backdrop-color);
}

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

@media screen and (max-width: 576px) {
    .nb-offcanvas.offcanvas-start,
    .nb-offcanvas.offcanvas-end {
        width: 100%;
        border: unset;
    }
}

/*
/* NB Fajl:'./static/css/nbcomponent/nb7.modal.css.'
*//*
    MODAL komponenta
*/

.modal.nb-modal {
    top: 0;
}

.nb-modal {
    --bs-modal-zindex: var(--nb-modal-zindex);

}
.nb-modal .modal-dialog{
    max-width: var(--nb-modal-max-width)
}

.nb-modal .modal-dialog.modal-xl {
    max-width: var(--nb-modal-xl-max-width);
}

.nb-modal .modal-dialog.modal-lg {
    max-width: var(--nb-modal-lg-max-width);
}
.nb-modal .modal-dialog.modal-sm {
    max-width: var(--nb-modal-sm-max-width);
}
.nb-modal .modal-content{
    border-radius: var(--nb-modal-border-radius);
    border: var(--nb-modal-border-width) var(--nb-modal-border-style) var(--nb-modal-border-color);
    overflow: hidden;
}
.nb-modal .modal-header{
    background: var(--nb-modal-header-bg);
    border-bottom: var(--nb-modal-header-border-bottom-width) var(--nb-modal-header-border-bottom-style) var(--nb-modal-header-border-bottom-color);
}
.nb-modal .modal-header .nb-btn-close,
.nb-modal .modal-header .nb-modal-title{
    color: var(--nb-modal-header-color);
    line-height: inherit;
}
.nb-modal .modal-footer{
    background: var(--nb-modal-footer-bg);
    border-top: var(--nb-modal-footer-border-top-width) var(--nb-modal-footer-border-top-style) var(--nb-modal-footer-border-top-color);
}
.nb-modal .modal-footer>*{
    margin: 0;
}
.modal-backdrop{
    --bs-backdrop-zindex: var(--nb-backdrop-zindex);
}
.nb-modal .nb-modal-header{
    padding: var(--nb-modal-header-padding-y) var(--nb-modal-header-padding-x);
    border-top-left-radius: var(--nb-modal-border-radius);
    border-top-right-radius: var(--nb-modal-border-radius);
}
.nb-modal .nb-modal-header.nb-modal-header-center {
    justify-content: center;
}
.nb-modal .nb-modal-body{
    padding: var(--nb-modal-padding-y) var(--nb-modal-padding-x);
}
.nb-modal .nb-modal-footer{
    padding: var(--nb-modal-padding-y) var(--nb-modal-padding-x);
}
.nb-modal .nb-btn-close {
    position: absolute;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .nb-modal .nb-modal-dialog.modal-fullscreen-md-down .modal-content {
        border-radius: 0;
    }
}

@media screen and (max-width: 576px) {
    .nb-modal .nb-modal-dialog.modal-fullscreen-sm-down .modal-content {
        border-radius: 0;
    }

    .nb-modal .nb-modal-dialog.modal-fullscreen-sm-down {
        max-width: none;
    }
}

/*
/* NB Fajl:'./static/css/nbcore/nb7.animation.css.'
*/@-webkit-keyframes nba-rotate360Y {
    to { -webkit-transform: rotateY(360deg); }
}
@keyframes nba-rotate360Y {
    to { transform: rotateY(360deg); }
}

@keyframes nba-top-to-bottom-long-animation {
    from {
        opacity: 0;
        transform: translateY(-300%);
        -webkit-transform: translateY(-300%);
    }
    to   {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

@keyframes nba-top-to-bottom-animation {
    from {
        opacity: 0;
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

@keyframes nba-bottom-to-top-animation {
    from {
        opacity: 0;
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

@keyframes slideDown {
    0% {
        bottom: 0;
        opacity: 1;
    }
    100% {
        bottom: -1000px;
        opacity: 0;
    }
}

.cookie-disappear {
    animation: slideDown 1.5s forwards;
}

.nba-rotate360Y{
    -webkit-animation: nba-rotate360Y 1s infinite linear;
    animation: nba-rotate360Y 1s infinite linear;
}

.nba-bottom-to-top-animation {
    animation-name: nba-bottom-to-top-animation;
    animation-duration: 2s;
}

.nba-top-to-bottom-animation {
    animation-name: nba-top-to-bottom-animation;
    animation-duration: 1.5s;
}

.nba-top-to-bottom-long-animation {
    animation-name: nba-top-to-bottom-long-animation;
    animation-duration: 1.5s;
}

.nba-left-to-right-animation {
    opacity: 0;
    transition: all 2s;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

.nba-active .nba-left-to-right-animation {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
}

.nba-right-to-center-animation {
    opacity: 0;
    transition: all 1.5s;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
}

.nba-active .nba-right-to-center-animation {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
}