:root {
    --cassiopeia-color-primary: #ac28c7;
    --cassiopeia-color-hover: #ff8700;
    --link-color: #2a69b8;
    --body-bg: var(--gray-100);
    --primary-rgb: rgb(213 217 220);
    --link-color: #ee762b;
}

body.wrapper-fluid footer>.grid-child,
body.wrapper-fluid header>.grid-child {
    padding-left: 1em
}

.wrapper-static .container-component {
    width: 80%;
}
.bg-primary {
    --bg-opacity: 1;
    background-color: var(--primary-rgb)!important;
    color: var(--secondary-color)!important;
}

.container-header .navbar-brand img {
    width: 9rem;
    min-width: 9rem
}

.container-header .site-description {
    color: #000
}

.awesomplete {
    width: inherit
}

.small-logo {
    min-width: 44px
}

.sidebar-menu {
    grid-area: sidebar-m
}

.footer-z-index {
    z-index: 1030
}

.fa {
    font-family: inherit
}

.fa::before {
    font-family: "Font Awesome 5 Free"
}

.sidebar-icon {
    width: 100%;
    min-width: 2em;
}

.back-color {
    background-color: #fff !important
}

.back-color-border {
    border: 1px solid var(--cassiopeia-color-primary, #112855)
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--cassiopeia-color-primary) !important
}

.sidebar-menu .border {
    border: 1px solid var(--cassiopeia-color-primary) !important
}

.small-logo img {
    background: var(--cassiopeia-color-hover);
    border-radius: 24px;
    padding: 2px
}

.breadcrumb {
    border-bottom: 1px solid rgba(0, 0, 0, .3)
}

.readmore a {
    background-color: var(--cassiopeia-color-primary);
    border-color: var(--cassiopeia-color-primary);
    color: #fff
}

.offcanvas {
    grid-column: 1 / 4;
    width: auto;
}
#kazaloarticlemenu {
    opacity: 0.6;
}
.container-header .metismenu>li.level-1>ul {
    min-width: 8rem;
    margin-left: -47px;
  
}

.embed-responsive iframe {
    max-width: 100%;
}

.mauticform-errormsg {
    color: red;
}

.kunenadiscuss .col-lg-6 {width: 100%;}

.footer .grid-child {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
  }

@media (prefers-color-scheme:dark) {
    :root {
        --cassiopeia-color-primary: #6c6c6c;
        --cassiopeia-color-hover: #000;
        --cassiopeia-color-link: #fcffe4;
        --cassiopeia-color-p: #dfdfdf;
        --alert-color-text: #ff0054;
        --body-bg: #000000;
        --heading-color: #dfdfdf;
    }
 .list-group-item, .form-control, .form-control:focus {
  color: var(--cassiopeia-color-p);
  background-color: var(--body-bg);
}
    body {
        color: #dfdfdf;
        background-color: #272727;
        -webkit-tap-highlight-color: transparent
    }
  
   #kunena.layout .form-select, #kunena.layout .custom-select {
  color: white;
}
  div, p, .card-text, i {color: var(--cassiopeia-color-p);}
  .mauticform-input {
    border: 1px solid white;
  }

  div.alert-message, .alert, .alert p {color: var(--alert-color-text);}
  
    body, .accordion-item, #kunena .list-group-item, .mauticform-input  {
        color: #dfdfdf;
        background-color: #272727 !important;
        -webkit-tap-highlight-color: transparent
    }
.btn-outline-primary {
  --btn-color: #ffd298;
  --btn-border-color: #ffd298;
  --btn-hover-color: #fff;
  --btn-hover-bg: #9f9f9f;
}
  
    a:not(.btn):focus, a:not(.btn):hover {
  color: var(--link-color) !important;
  }
    .breadcrumb {
        background-color: rgb(0 0 0)
    }

    .breadcrumb-item.active {
        color: #5a8bbb
    }

    .back-color,
    .offcanvas {
        background-color: #757575 !important;
    }

    .back-color-border {
        border: 1px solid var(--cassiopeia-color-primary, #112855)
    }

    a:focus,
    a:hover {
        color: #ccc
    }

    .text-muted {
        color: #cecece !important
    }

    .result__title-url {
        color: #85b6ff
    }

    .result__date {
        color: #dfbc8c
    }

    .login {
        background: #848484
    }

    .card-header {
        background-color: rgb(0 0 0 / 89%);
        border-bottom: 1px solid #000
    }

    .card {
        background-color: #2d2727
    }

    .small-logo img {
        background: #fff;
        border-radius: 26px
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        background-color: #fff !important
    }

    .page-link {
        background-color: #060606
    }

    .blockquote-footer {
        color: #f5d089
    }

    .com-tags-tag__category a,
    .com-tags__category a {
        color: #6c6c6c
    }

    .readmore a {
        background-color: #fff;
        border-color: #ced4da;
        color: #000
    }
   
    .metismenu.mod-menu .mm-collapse {
        background-color: #000;
    }
   .boxed .blog-item {
    background-color: #696969;
  }
}

@media (min-width:768px) {

    body.has-sidebar-menu .site-grid {
        grid-template-columns: [full-start] 2em minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end];
        grid-gap: 0 2em;
        grid-template-areas: ". sidebar-m banner banner banner banner."". sidebar-m top-a top-a top-a top-a."". sidebar-m top-b top-b top-b top-b."". sidebar-m side-l comp comp side-r ."". sidebar-m bot-a bot-a bot-a bot-a ."". sidebar-m bot-b bot-b bot-b bot-b."
    }

    .sidebar-menu {
        grid-column: 1/2
    }
}

@media (max-width:767.98px) {
    .wrapper-static .container-component {
    width: 100%;
}
    .has-sidebar-menu {
        grid-template-areas: ". banner banner banner banner ."". top-a top-a top-a top-a ."". top-b top-b top-b top-b ."". comp comp comp comp ."". side-r side-r side-r side-r ."". side-l side-l side-l side-l ."". bot-a bot-a bot-a bot-a ."". bot-b bot-b bot-b bot-b ."". sidebar-m sidebar-m sidebar-m sidebar-m ."
    }

    .sidebar-menu {
        grid-column: 1/-1
    }

    .sidebar-menu img {
        max-width: 2.5em
    }

    .sidebar-menu .fixed-bottom {
        right: 74px;
        left: 74px
    }

    .sidebar-ul {
        display: grid;
        grid-gap: 1px;
        grid-template-columns: repeat(auto-fit, minmax(4em, 1fr));
        grid-auto-rows: 4em
    }

    .gridnav .mod-menu {
        flex-direction: row
    }

    .gridnav {
        height: 100%;
        display: grid;
        grid-gap: 3px;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas: "l l l l l l r r r r r r""c c c c c c c c c c c c"
    }

    .toggle-menu-left {
        grid-area: l
    }

    .toggle-menu-center {
        grid-area: c
    }

    .toggle-menu-right {
        grid-area: r
    }
  .metismenu.mod-menu .metismenu-item>ul {
    right: 10px;
}
}

@media (max-width:575.98px) {
    .container-header .navbar-brand img {
        width: 4rem;
        min-width: 4rem
    }
}

.btn.jmodedit {
    display: none
}
.banerponudba {
    background-image: url(/images/banners/topoweryou.jpg);
    background-repeat: no-repeat;
    height: 250px;
}