:root {
    --c_customcolor: #DA251D;
    --c_iconcolor: #DA251D;
    --c_rabatcolor: #FF6600;
    --c_color: #4b4b4b;
    --cb_color: white;
    --c_menucolor: white;
    --cb_menucolor: #313131;
    --c_footercolor: #4b4b4b;
    --cb_footercolor: white;
    --cb_bodycolor: white;
    --c_topcartcolor: white;
    --cb_topcartcolor: #3A836C;
    --cb_selected: darkgray;
    --c_border: darkgray;
    --c_item_hover: lightgray;
}

html {
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 12px;
    min-width: 640px;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    background-repeat: repeat-x;
    background-color: var(--cb_bodycolor);
    color: var(--c_color);
    min-width: 640px;
}


p {
    margin: 0;
    padding: 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
    clear: both;
}

h1 {
    font-size: 2em;
}

h2 {
    padding-left: 1em;
    font-size: 1.4em;
}

pre {
    left: 0;
    right: 0;
    font-family: Arial;
    white-space: pre-wrap
}

.custom_color {
    color: var(--c_customcolor);
}

.grayed {
    color: darkgray;
}

.smaller {
    font-size: .9em;
}

.slicknav_menu {
    display: none;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 0;
    margin: 0;
    margin-top: .2em;
}

    .slicknav_menu .slicknav_menutxt {
        line-height: 1.2em;
    }

.slicknav_nav {
    background-color: var(--cb_menucolor);
}

.slicknav_btn {
    margin: 0;
    border-radius: 0;
    background-color: var(--cb_menucolor);
}

.slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background-color: var(--cb_selected);
    color: var(--c_menucolor);
}

.slicknav_nav a {
    font-size: 1.3rem;
    font-weight: bold;
    padding: 5px 10px;
    margin: 2px 5px;
    text-decoration: none;
    color: var(--c_menucolor);
}

    .slicknav_nav a:hover {
        border-radius: 0;
        background: var(--cb_selected);
        color: var(--c_menucolor);
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
    }

.task_loader {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid var(--c_customcolor);
    width: 16px;
    height: 16px;
    animation: spinloader 1s linear infinite;
    background-image: none !important;
    display: none;
}

    .task_loader.visible {
        display: inline-block;
    }

@keyframes spinloader {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

#gotopw, .gotopw {
    position: fixed;
    display: block;
    bottom: 1em;
    width: 4em;
    right: 1em;
    z-index: 9;
}

#gotop, .gotop {
    display: inline-block;
    border: 1px solid color-mix(in srgb, var(--c_color) 70%, transparent);
    background-color: color-mix(in srgb, var(--cb_topcartcolor) 20%, transparent);
    border-radius: 5px;
    text-decoration: none;
    font-size: 2em;
    font-weight: 900;
    color: var(--c_color);
    width: 2em;
    height: 1.8em;
    text-align: center;
    vertical-align: middle;
    padding-top: .3em;
}

    #gotop:hover, .gotop:hover {
        background-color: var(--cb_color);
    }

ul.ui-menu {
    max-height: 200px !important;
}

.ui-selectmenu-menu li {
    text-align: right;
}

.ui-selectmenu-button {
    vertical-align: middle;
}

.vmiddle {
    vertical-align: middle;
    margin-bottom: .4em;
}

.strike_trough {
    text-decoration: line-through;
}

.strike_trough_angled::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    right: 0;
    border-top: 2px solid;
    border-color: inherit;
    transform: rotate(-15deg);
    color: var(--c_customcolor);
}

.privatnost-text {
    font-size: 11px !important;
}

#cookie-consent-wrapper {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

#cookie-consent {
    position: relative;
    max-width: 1165px;
    text-align: left;
    padding: 2em 2em 2.5em 3em;
    margin: -0.5em auto;
    border-radius: .5em;
    border: 1px solid darkgray;
    background-color: lightgoldenrodyellow;
}

#main_background {
    height: auto;
    width: 90%;
    margin: 0 auto;
    position: relative;
}

#task_logo {
    transform: rotate(-90deg);
    position: absolute;
    left: -5.4em;
    top: 4.5em;
}

#main {
    background-color: var(--cb_color);
}

#main_top {
    display: flex;
    align-items: center;
    height: 70px;
    position: relative;
    margin: 0 0 0 22px;
}

#main_top_left_logo {
    display: flex;
    align-items: center;
}

#main_top_left_logo_img {
    content: url('./images/company_logo.svg');
    max-height: 70px;
    flex-shrink: 0;
    background-size: contain;
}

#main_top_left_motto_img {
    content: url('./images/slogan.png');
    max-height: 70px;
    flex-shrink: 0;
    background-size: contain;
    margin-left: 15px;
    max-width: 100px;
}

#main_top_right_user {
    flex-shrink: 0;
    position: relative;
    padding: 0 2em 0 2em;
    display: inline-flex;
    align-items: center;
    height: 70px;
    background-color: var(--cb_color);
}

    #main_top_right_user a {
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        color: var(--c_color);
        font-size: 1.2em;
        font-weight: bold;
    }

    #main_top_right_user i {
        Color: var(--c_customcolor);
    }

#main_top_right_cart,
#main_top_right_offer {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 70px;
    background-color: var(--cb_topcartcolor);
}

#main_top_right_offer {
    background-color: var(--c_topcartcolor);
}

    #main_top_right_cart a, #main_top_right_offer a {
        width: 100%;
        font-weight: bold;
        font-size: 1.5em;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        color: var(--c_topcartcolor);
        padding: .5em 1em .5em 1em;
    }

    #main_top_right_offer a {
        color: var(--cb_topcartcolor)
    }

#main_head {
    display: flex;
    align-items: center;
    height: auto;
    position: relative;
    background: var(--cb_menucolor);
}

#main_head_center {
    width: auto;
    flex-grow: 1;
    position: relative;
    display: inline-block;
}

#main_head_right {
    flex-shrink: 0;
    position: relative;
    padding: 0 2em 0 2em;
    display: inline-flex;
    align-items: center;
}

    #main_head_right a {
        display: flex;
        align-items: center;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        color: var(--c_menucolor);
        font-weight: bold;
        margin-left: 2em;
    }

    #main_head_right i {
        Color: var(--c_iconcolor);
        margin-right: .4em;
    }

#searchForm {
    width: 100%;
    width: -moz-available; /* For Mozzila */
    width: -webkit-fill-available; /* For Chrome */
    margin-left: 30px;
    position: relative;
}

#searchbox_wrapper {
    width: auto;
    flex-grow: 1;
    position: relative;
    display: inline-block;
}

#searchboxinput {
    box-sizing: border-box;
    border: 1px solid #E8E8E8;
    height: 70px;
    width: 100%;
    background-color: var(--cb_color);
    background: none;
    padding: 0 80px 0 30px;
    font-size: 1.5em;
    background-color: var(--cb_color);
}

    #searchboxinput:focus {
        outline: none;
    }

#searchboxbutton {
    box-sizing: border-box;
    border: none;
    height: 50px;
    width: 50px;
    background-color: var(--c_customcolor);
    vertical-align: central;
    color: var(--cb_color);
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#found-item-list {
    position: absolute;
    z-index: 999;
    width: 100%;
    border: 1px solid var(--c_border);
    background-color: var(--cb_color);
    z-index: 99999;
}

.list-found-button {
    color: var(--c_customcolor);
    background-color: var(--cb_color);
    border: 1px solid darkgray;
    width: 100%;
    display: block;
    text-decoration: none;
    text-align: center;
    padding: .5rem;
    font-weight: bolder;
    font-size: 1.5em;
    cursor: pointer;
}

.util_insert {
    padding: 1em 2em 1em 2em;
    font-size: 1.5rem;
}

    .util_insert p {
        padding-bottom: 10px;
    }

.list-found-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--c_border);
    width: 100%;
    text-decoration: none;
    color: inherit;
    padding: .5em 0 .5em 0;
    font-size: 1.5em
}

    .list-found-item:visited,
    .list-found-item:hover,
    .list-found-item:active {
        color: inherit;
        text-decoration: none;
    }

    .list-found-item:hover {
        background-color: #D8D8D8;
        transition: all .5s ease-in;
    }

.list-found-item-picture {
    display: inline-flex;
    width: 10rem;
    margin-right: .5rem;
}

    .list-found-item-picture img {
        display: block;
        max-width: 10rem;
        max-height: 10rem;
        width: auto;
        height: auto;
    }

.list-found-item-name {
    display: inline-flex;
    position: relative;
    width: auto;
    flex-grow: 1;
    overflow: hidden;
    vertical-align: top;
    padding-top: 1rem;
}

.list-found-item-price {
    display: inline-flex;
    flex-grow: 0;
    text-align: right;
    padding-right: 2em;
    flex-direction: column;
    justify-content: center;
}

    .list-found-item-price span {
        font-weight: bold;
    }

#main_body {
    position: relative;
    background-color: var(--cb_color);
    display: flex;
}

#body_left_column {
    display: none !important;
}

#body_right_column {
    background-color: #fff;
    width: 100%;
    position: relative;
    min-height: 100vh;
}

#main_footer {
    color: var(--c_footercolor);
    background-color: var(--cb_footercolor);
    border-top: 4px solid var(--c_border);
    display: inline-block;
    width: 100%;
    font-size: 1.2rem;
}

#right_column_content > h2:first-child {
    color: var(--c_customcolor);
    padding-left: 1rem;
    font-size: 1.8rem;
}

/*custom footer za podatke korisnika*/

.footer-row {
    display: flex;
    padding-left: 2rem;
}

.footer-row2 {
    align-items: center;
    margin-top: 10px;
}

.footer-col {
    flex-shrink: 0;
    padding-right: 30px;
}

.footer-col1 {
    width: 21%;
}

.footer-col2 {
    width: 21%;
}

.footer-col3 {
    width: 25%;
}

.footer-col4 {
    width: auto;
    flex-grow: 1;
    padding-right: 0;
    flex-shrink: unset;
}

.footer-location-nav {
    list-style: none;
    font-size: 1.2rem;
    line-height: 1.2em;
}

    .footer-location-nav > li::after {
        content: "";
        position: absolute;
        display: block;
        width: 3px;
        height: 1px;
        background: #313131;
        right: 4px;
        top: 11px;
    }

    .footer-location-nav > li {
        display: inline-block;
        padding: 0 .6rem 0 0;
        position: relative;
    }

        .footer-location-nav > li:last-child::after {
            content: none;
        }

.footer-payment ul {
    list-style: none;
    font-size: 1.2rem;
    line-height: 1.2em;
    padding: 0;
}

    .footer-payment ul li {
        position: relative;
        padding: 4px 0 7px 18px;
    }

        .footer-payment ul li::before {
            top: 7px;
            content: "";
            position: absolute;
            display: block;
            width: 6px;
            height: 6px;
            background: #DA251D;
            top: 9px;
            left: 0;
        }

.footer-title {
    font-size: 1.7rem;
    line-height: 1.8em;
    font-weight: bold;
    color: var(--c_customcolor);
    padding-bottom: .5em;
}

.footer-nav {
    list-style: none;
    font-size: 1.2rem;
    line-height: 1.5em;
}

    .footer-nav > li {
        padding: 0 0 .8rem 0;
    }

        .footer-nav > li.selected a {
            color: #919191;
        }

        .footer-nav > li > a.active {
            color: #919191;
        }

        .footer-nav > li > a {
            color: var(--c_footercolor);
            transition: color .3s;
            -webkit-backface-visibility: hidden;
            -webkit-tap-highlight-color: transparent;
        }

.dev a,
.footer-contact a,
.contact-info a {
    text-decoration: none;
    color: var(--c_footercolor);
}

    .dev a:hover,
    .footer-contact a:hover {
        text-decoration: none;
        color: var(--c_customcolor);
    }

.footer-contact i,
.contact-info i {
    margin-right: .5em;
    color: var(--c_iconcolor);
}

.inline_block {
    display: inline-block
}

.clearboth {
    clear: both;
}

.activeLang {
    text-decoration: none;
    color: darkgreen;
}

.inactiveLang {
    text-decoration: none;
    color: gray;
}

.category {
    padding: 0 1em 0 1em;
}

    .category .category_picture_wrap {
        width: 20em;
        height: 15em;
        float: left;
        text-align: center;
        overflow: hidden;
    }

    .category .category_picture {
        max-width: 20em;
        max-height: 15em;
        cursor: zoom-in;
        vertical-align: middle;
    }

    .category .category_pictures_wrap {
        display: inline-block;
        margin-right: .5em;
        width: 4em;
        height: 3em;
        text-align: center;
        overflow: hidden;
    }

    .category .category_pictures {
        display: inline-block;
        margin-right: .5em;
        max-width: 4em;
        max-height: 3em;
        cursor: pointer;
        vertical-align: middle;
    }

    .category h2,
    .item_description h2 {
        padding-left: 0;
    }

.category_description {
    float: left;
    font-size: 1.1em;
    font-weight: bold;
    margin-left: 1em;
    min-width: 200px;
    width: 50%;
}

.category_subcategory_list_item {
    float: left;
    width: 15em;
    margin: 0 1em 1em 0;
    height: 15em;
    padding: .5em .5em .5em .5em;
    border-radius: .5em;
    border: 1px solid lightgray;
}

.category_subcategory_list_item_image {
    width: 15em;
    height: 11em;
    border: none;
    overflow: hidden;
    text-align: center;
}

    .category_subcategory_list_item_image img {
        max-width: 15em;
        max-height: 11em;
        border: none;
        vertical-align: middle;
    }

.product_list a {
    color: #6D6D6D;
    text-decoration: none;
}

.product_item {
    width: 100%;
    /*height: 12em;*/
    padding: .5em .5em .5em .5em;
    overflow: hidden;
    transition: background-color .2s ease-in-out .05s;
    border: 1px solid transparent;
}

    .product_item:hover {
        border: 1px solid var(--c_item_hover);
    }

    .product_item .item_image {
        position: relative;
        display: inline-block;
        padding: .5em 0 .5em 0;
        width: 15em;
        max-height: 15em;
        overflow: hidden;
        text-align: center;
        /*line-height: 11em;*/
        background-color: white;
        min-height: 11em;
    }

        .product_item .item_image > * {
            line-height: normal;
        }

        .product_item .item_image img {
            max-width: 15em;
            max-height: 15em;
            border: none;
            vertical-align: middle;
        }

        .product_item .item_image .brand_image {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            max-height: 2.5rem;
        }

    .product_item .item_description {
        display: inline-block;
        padding: .5em 0 .5em 1em;
        width: 50%;
        height: 100%
    }

.item_description_trim {
    position: relative;
    line-height: 1em;
    max-height: 6em;
    height: 6em;
    overflow: hidden;
}

    .item_description_trim::after {
        content: "";
        text-align: right;
        position: absolute;
        top: 5em;
        right: 0;
        width: 100%;
        height: 2em;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--cb_color));
        pointer-events: none;
    }

.product_list .item_price_big {
    font-size: 1.6em;
    font-weight: bold;
}

.product_list .item_price_small {
    font-size: 1em;
    font-weight: bold;
    padding-right: 1.3em;
    text-align: right;
    padding-top: .5em;
}

.product_list .item_price {
    padding-top: 1em;
    text-align: right;
    width: 25%;
}

.product_list .item_price_big_val {
    font-size: .9em;
}

.product_list .item_rabat {
    font-size: 1em;
    font-weight: bold;
    padding-right: 1.5em;
    text-align: right;
    padding-top: .5em;
    display: none
}

.product_list .item_raspolozivo {
    font-size: 1em;
    padding-right: 1.5em;
    text-align: right;
    padding-top: .5em;
}


.product_item_code {
    position: absolute;
    z-index: 1;
    padding-left: 16.5em;
    padding-top: 0.4em;
}

    .product_item_code * {
        display: inline-block;
    }

    .product_item_code a:hover {
        color: var(--c_customcolor);
    }

.float_right {
    float: right;
}

.float_left {
    float: left;
}

/*css za pregled pojedinačnog artikla*/

.item_price_on_request {
    display: block;
    margin: 1em 0 0 auto;
    border: none;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.5em 1em;
    background-color: var(--cb_selected) !important;
    color: var(--c_topcartcolor) !important;
    cursor: pointer;
    width: max-content;
    width: fit-content;
}


.item {
    height: auto;
    padding: .5em .5em .5em .5em;
}

.item_item_wrapper {
    width: 100%;
    height: auto;
}

    .item_item_wrapper .item_image {
        display: inline-block;
        padding: .5em 0 .5em 0;
        width: 30%;
        height: 30%;
        overflow: hidden;
        text-align: center;
        /*line-height: 11em;*/
        background-color: white;
        position: relative;
        min-height: 15em;
        max-width: 40em;
    }

        .item_item_wrapper .item_image > * {
            line-height: normal;
        }

        .item_item_wrapper .item_image .brand_image {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            max-height: 10%;
        }

    .item_item_wrapper .item_picture {
        max-width: 100%;
        max-height: 30em;
        cursor: zoom-in;
        vertical-align: middle;
    }

    .item_item_wrapper .item_pictures_wrap {
        display: inline-block;
        margin-right: .5em;
        width: 4em;
        height: 3em;
        overflow: hidden;
        text-align: center;
        background-color: white;
    }

    .item_item_wrapper .item_pictures {
        max-width: 4em;
        max-height: 3em;
        cursor: pointer;
        vertical-align: middle;
    }

    .item_item_wrapper .item_description {
        display: inline-block;
        padding: .5em 0 .5em 1em;
        width: 45%;
    }

    .item_item_wrapper .item_price {
        padding-top: 1.6em;
        text-align: right;
        max-width: 23%;
    }

    .item_item_wrapper .item_price_big,
    .item_item_wrapper .item_price_total {
        font-size: 1.6em;
        font-weight: bold;
        padding-right: 1em;
        float: right;
    }

    .item_item_wrapper .item_price_total {
        padding-top: 1em;
    }

    .item_item_wrapper .item_price_small {
        font-size: 1em;
        font-weight: bold;
        padding-right: 2.3em;
        text-align: right;
    }

    .item_item_wrapper .item_price_big_val {
        font-size: .9em;
    }

    .item_item_wrapper .item_rabat {
        font-size: 1em;
        font-weight: bold;
        padding-right: 2em;
        display: none;
    }

    .item_item_wrapper .item_raspolozivo {
        font-size: 1em;
        padding-right: 2em;
    }

    .item_item_wrapper #item_add_to_cart,
    .item_item_wrapper #item_add_to_offer,
    .item_item_wrapper .prijava {
        margin-right: 1em;
    }


    .item_item_wrapper .item_quantitiy {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        padding-right: 1em;
        font-size: 1.6em;
        width: calc(100% - 1em);
    }

    .item_item_wrapper #BuyQuantity {
        border-bottom: 1px solid var(--c_border);
        border-top: 1px solid var(--c_border);
        border-left: none;
        border-right: none;
        width: calc(100% - 6.2em);
        font-weight: bold;
        text-align: right;
        padding-right: .2em;
        font-size: 1em;
        color: var(--c_color)
    }

    .item_item_wrapper .item_quantitiy a {
        text-decoration: none;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: .3em .5em;
        border: 1px solid var(--c_border);
        height: 1.5em;
        width: 1.8em;
    }

        .item_item_wrapper .item_quantitiy a:hover {
            background-color: var(--cb_selected);
            transition: ease .5s;
        }


    .item_item_wrapper .item_description_trim {
        max-height: 14em;
        height: 14em;
    }

        .item_item_wrapper .item_description_trim::after {
            top: 13em;
        }

    .item_item_wrapper .stock_indicator {
        width: calc(100% - .2em);
        border: 1px solid var(--c_border);
        text-align: center;
    }

.stock_indicator.l0 {
    background-color: red;
    color: white;
}

.stock_indicator.l1 {
    background-color: orange;
}

.stock_indicator.l2 {
    background-color: yellow;
}

.stock_indicator.l3 {
    background-color: lightgreen;
}

.stock_indicator.l4 {
    background-color: green;
    color: white;
}

.item_add_to_cart_new,
.item_add_to_offer_new {
    display: inline-block;
    margin: 1em 0 0 auto;
    border: none;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.5em 2em;
    background-color: var(--cb_topcartcolor) !important;
    color: var(--c_topcartcolor) !important;
    cursor: pointer;
}

    .item_add_to_cart_new:active,
    .item_add_to_offer_new:active {
        cursor: grabbing;
    }

#item_add_to_cart .ui-button-text,
#item_add_to_offer .ui-button-text {
    padding-right: 3em !important;
}

.item_add_to_offer_new {
    padding: .75em .5em;
    font-size: 1.2em;
    color: var(--cb_topcartcolor) !important;
    border: 1px solid;
    border-color: var(--cb_topcartcolor) !important;
    background-color: var(--c_topcartcolor) !important;
}

.item_detail_wrapper {
    border: 1px solid #D2D1D1;
    background-color: var(--cb_color);
    margin: 4em 1em 4em 1em;
}

    .item_detail_wrapper .item_detail_menu {
        margin-top: 1em;
        margin-left: 1em;
    }

    .item_detail_wrapper .item_detail_menu_item {
        float: left;
        height: 2em;
        width: auto;
        color: #878787;
        font-size: 1em;
        font-weight: bold;
        padding: .5em .5em 0 .5em;
        margin: 0 .5em 1em 0;
        border-radius: .5em;
        border: 1px solid lightgray;
    }

        .item_detail_wrapper .item_detail_menu_item a {
            color: inherit;
            font-size: 1.2em;
            font-weight: bold;
            text-decoration: none;
            outline: medium none;
        }

    .item_detail_wrapper .active {
        color: white;
        background-color: var(--c_customcolor);
        border-color: var(--c_customcolor);
    }

    .item_detail_wrapper .item_detail_description {
        clear: both;
        padding: 10px;
        color: #5A5A5A;
        font-size: 1.2em;
    }

        .item_detail_wrapper .item_detail_description p,
        .item_detail_wrapper .item_detail_description > div {
            padding-bottom: 1em;
        }

    .item_detail_wrapper .shown {
        display: block;
    }

    .item_detail_wrapper .hidden {
        display: none;
    }

    .item_detail_wrapper .document_link, .document_link {
        text-decoration: none;
    }

        .item_detail_wrapper .document_link > div, .document_link > div {
            color: #6D6D6D;
            border: 1px solid #D3D3D3;
            margin-bottom: .5em;
        }

            .item_detail_wrapper .document_link > div:hover, .document_link > div:hover {
                color: #6D6D6D;
                border: 1px solid #D3D3D3;
                margin-bottom: .5em;
                background-color: #ECECEC;
            }

        .item_detail_wrapper .document_link .docid, .document_link .docid {
            display: inline-block;
            background-image: url('./images/download.png');
            background-size: 16px 16px;
            width: 16px;
            height: 16px;
            margin: 0 2em 0 .5em;
        }

        .item_detail_wrapper .document_link .docdescr,
        .item_detail_wrapper .document_link .docdescr pre,
        .document_link .docdescr, .document_link .docdescr pre {
            display: inline-block;
        }

.item_description_connected_item {
    border: 1px solid #D3D3D3;
    padding: 1em;
    margin: 0 1em 1em 0;
    display: inline-table;
    font-size: 1em;
    width: 13.4em;
    height: 14em;
    border-radius: .5em;
}

.item_description_connected_item_image {
    width: 13.4em;
    height: 10em;
    border-radius: .5em .5em 0 0;
    overflow: hidden;
    text-align: center;
    background-color: white;
}

    .item_description_connected_item_image img {
        max-width: 13.4em;
        max-height: 10em;
        border: none;
        vertical-align: middle;
    }

.item_description_connected_item_name {
    overflow: hidden;
    /*width: 100%;*/
    height: 3em;
    width: 13em;
}

.carousel_header {
    position: relative;
}


.lowest_price {
    color: var(--c_customcolor);
}

/*Cart and Cart item CSS*/

.cart_items,
.offer_items {
    width: 100%;
}

.cart_items_item,
.offer_items_item {
    width: 100%;
    height: 10em;
}

    .cart_items_item > a,
    .offer_items_item > a {
        text-decoration: none;
        color: #6D6D6D;
    }

    .cart_items_item .item_quantitiy,
    .offer_items_item .item_quantitiy {
        display: inline-flex;
        justify-content: flex-end;
        padding-right: .5em;
        font-size: 1.6em;
    }

    .cart_items_item #BuyQuantity,
    .offer_items_item #BuyQuantity {
        width: 5em;
        font-size: 1.2em;
    }

    .cart_items_item .item_rabat {
        font-size: 1em;
        font-weight: bold;
        padding-right: 2em;
    }

    .cart_items_item .item_description_trim,
    .offer_items_item .item_description_trim {
        max-height: 12em;
        height: 12em;
    }

        .cart_items_item .item_description_trim::after,
        .offer_items_item .item_description_trim::after {
            top: 11em;
        }

.cart_items_item_image,
.offer_items_item_image {
    display: inline-block;
    width: 8em;
    height: 6em;
    padding: .5em 0 .5em 0;
    overflow: hidden;
    text-align: center;
}

    .cart_items_item_image img,
    .offer_items_item_image img {
        max-width: 8em;
        max-height: 6em;
        cursor: zoom-in;
        vertical-align: middle;
    }

.cart_items_item_description,
.offer_items_item_description {
    display: inline-block;
    padding: 0 0 .5em 1em;
    width: 65%;
}

.cart_items_item_price,
.offer_items_item_price {
    /*padding-top: 1.6em;*/
    text-align: right;
}

    .cart_items_item_price #BuyQuantity,
    .offer_items_item_price #BuyQuantity {
        border-bottom: 1px solid var(--c_border);
        border-top: 1px solid var(--c_border);
        border-left: none;
        border-right: none;
        width: 5em;
        font-weight: bold;
        text-align: right;
        padding-right: .2em;
        font-size: 1em;
        color: var(--c_color)
    }

    .cart_items_item_price .item_quantitiy a,
    .offer_items_item_price .item_quantitiy a {
        text-decoration: none;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: .3em .5em;
        border: 1px solid var(--c_border);
        height: 1.5em;
        width: 1.8em;
    }

        .cart_items_item_price .item_quantitiy a:hover,
        .offer_items_item_price .item_quantitiy a:hover {
            background-color: var(--cb_selected);
            transition: ease .5s;
        }


.cart_items_item_price_big {
    font-size: 1.6em;
    font-weight: bold;
    padding-right: 1em;
    line-height: 2em;
}

.cart_items_item_price_big_val {
    display: inline-block;
    width: 2em;
    font-size: .9em;
}

.cart_items_item h2,
.offer_items_item h2 {
    padding-left: 0;
}

.cart_small_button,
.offer_small_button {
    height: 2em;
    width: 4em;
    display: inline-block;
    margin: .5em 1rem 0 auto;
    border: none;
    background-color: var(--cb_topcartcolor) !important;
    color: var(--c_topcartcolor) !important;
    cursor: pointer;
}

    .cart_small_button:active,
    .offer_small_button:active {
        cursor: grabbing;
    }

.cart_big_button,
.offer_big_button {
    display: block;
    margin: 1em 1rem 0 auto;
    border: none;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.5em 2em;
    background-color: var(--cb_topcartcolor) !important;
    color: var(--c_topcartcolor) !important;
    cursor: pointer;
}

    .cart_big_button:active,
    .offer_big_button:active {
        cursor: grabbing;
    }

.offer_body,
.cart_body,
.about_us,
.contact,
.privacy {
    padding: 0 1em 2em 1em;
}

.cart_footer_changed,
.offer_footer_changed {
    color: red;
    font-weight: bold;
}

.cart_footer_summary,
.offer_footer_summary {
    font-weight: bold;
    font-size: 1.6em;
    width: 20em;
    margin-right: 1em;
}

.cart_footer_quantity,
.offer_footer_quantity {
    font-weight: bold;
    font-size: 1.6em;
    width: 15em;
    margin-right: 1em;
}

.cart_footer_summary_val {
    width: 2em;
    margin-left: 1em;
    font-size: .9em;
}

/*orders*/

.orders {
    padding: 0 1em 0 1em;
}

div.table {
    display: table;
    border-top: 2px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}

div.table_row {
    display: table-row;
    padding: .1rem;
}

div.table_cell {
    display: table-cell;
    border-right: 1px solid black;
    border-top: 1px solid black;
    padding: .5rem 1rem .5rem 1rem;
}

/*.orders .table_cell a {
	padding-right:1em;
}*/

.orders .table_cell a:last-child {
    padding-right: 0;
}

/*orders end*/

/*about us*/

#about_us, #contact, .privacy {
    font-size: 1.5rem;
    padding-left: 1em;
    padding-right: 1em;
}

    #about_us p, #contact p, .privacy p {
        padding-bottom: 1.5em;
    }

/*about us end*/

/* Pager for item list*/

.page_size > span,
.sort_options > span {
    margin-right: 1.5em;
}

.page_size,
.sort_options {
    font-size: 1em;
}


#pager_container {
    width: 100%;
    padding: 2em 0 2em 0;
    font-size: 2em;
    text-align: center;
}

    #pager_container.pager {
        background: #f2f2f2;
        padding: 2em;
        margin-bottom: 2em;
    }

.page {
    display: inline-block;
    padding: 0 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 3px rgba(0, 0, 0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0 1px 0 #ffffff;
}

    .page:hover, .page.gradient:hover {
        background: #fefefe;
        background: linear-gradient(to bottom, #FEFEFE 0, #f0f0f0 100%);
    }

    .page.active {
        border: none;
        background: #616161;
        box-shadow: inset 0 0 8px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .8);
        color: #f0f0f0;
        text-shadow: 0 0 3px rgba(0, 0, 0, .5);
    }

    .page.gradient {
        background: linear-gradient(to bottom, #f8f8f8 0, #e9e9e9 100%);
    }

/* end of pager CSS*/

/* banner  css */

.home_banner {
    padding: 0;
}

    .home_banner.slick-slider,
    .home_banner.slick-slider img {
        width: 100%;
    }

    .home_banner .slick-dots {
        bottom: -25px;
        text-align: center;
    }

        .home_banner .slick-dots li {
            text-align: center;
            width: 1em;
            height: 1em;
            display: inline-block;
            margin-right: 4px;
            border-radius: 50%;
            border: none;
            background: #6D6D6D;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 3px rgba(0, 0, 0, .1);
            font-weight: bold;
            text-decoration: none;
            font-size: 12px;
        }

            .home_banner .slick-dots li:hover {
                background: #6D6D6D;
            }

        .home_banner .slick-dots .slick-active {
            border: none;
            background: var(--c_customcolor);
            box-shadow: inset 0 0 8px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .8);
            text-shadow: 0 0 3px rgba(0, 0, 0, .5);
        }

    .home_banner .onedot {
        color: transparent;
        text-decoration: none;
        text-shadow: none;
        height: 100%;
        width: 100%;
        background-color: transparent;
        border-radius: 50%;
    }

/* end baner   */

/*slick slider custom*/

.carousel_list.slick-slider {
    padding-right: 40px;
}

.carousel_list .slick-slide {
    padding-right: 1em;
}

.slick-prev::before,
.slick-next::before {
    /*font-family: 'slick';*/
    font-size: 20px;
    line-height: 1;
    opacity: .35;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev, [dir='rtl'] .slick-next {
    left: 1em;
}

    .slick-prev::before,
    [dir='rtl'] .slick-next::before {
        position: relative;
        content: "";
        display: inline-block;
        width: 0.8em;
        height: 0.8em;
        border-right: 0.4em solid darkgray;
        border-top: 0.4em solid darkgray;
        transform: rotate(-135deg);
        left: 1em;
    }

.home_banner .slick-prev::before,
.home_banner [dir='rtl'] .slick-next::before {
    left: 1em;
}

.slick-next, [dir='rtl'] .slick-prev {
    right: 1em;
}

    .slick-next::before,
    [dir='rtl'] .slick-prev::before {
        position: relative;
        content: "";
        display: inline-block;
        width: 0.8em;
        height: 0.8em;
        border-right: 0.4em solid darkgray;
        border-top: 0.4em solid darkgray;
        transform: rotate(45deg);
        right: 1em;
    }

.home_banner .slick-next::before,
.home_banner [dir='rtl'] .slick-prev::before {
    right: 1em;
}

.home_brands.slick-slider {
    margin-bottom: 0;
}

.home_brands .slick-list {
    width: calc(100% - 70px);
    left: 1em;
}

.home_brands .slick-prev {
    top: 13px;
}

.home_brands .slick-next {
    top: 13px;
}

.home_brands .slick-slide {
    height: 50px;
    margin: 0 20px;
}

    .home_brands .slick-slide img {
        width: auto;
        height: 2em;
    }

/*end slick slider custom*/


.carousel_item {
    position: relative;
    max-width: 20em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: 100% !important;
    height: 35em !important;
    flex-wrap: wrap;
    border: solid 1px var(--c_border);
}

    .carousel_item > div {
        flex-basis: 100%;
        max-width: 20em;
    }


    .carousel_item .top {
        max-width: 100%;
        height: 20em;
        border-bottom: solid 1px var(--c_border);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

        .carousel_item .top .discount-wrapper,
        .carousel_item .top .item-fav,
        .carousel_item .top .brand_image {
            position: absolute;
        }

        .carousel_item .top .discount-wrapper {
            top: 1em;
            left: 1em;
        }

        .carousel_item .top .item-fav {
            top: 4em;
            left: 1em;
            margin-left: 0;
        }

        .carousel_item .top .image {
            border: none;
            display: inline;
            max-width: 100%;
            max-height: 100%;
        }

        .carousel_item .top .brand_image {
            top: 1em;
            right: 1em;
            height: 2em;
            width: auto;
        }

    .carousel_item .bottom {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 1em;
        font-size: 1.4em;
    }

    .carousel_item .name {
        margin-bottom: 1em;
        line-height: 1.2em;
        height: 3.6em;
        overflow-y: hidden;
    }

    .carousel_item .price_old,
    .carousel_item .price_new {
        flex-basis: 100%;
        justify-self: flex-start;
    }

        .carousel_item .price_old .ammount,
        .carousel_item .price_old .currency {
            position: relative;
        }

        .carousel_item .price_new .ammount {
            color: var(--c_customcolor);
            font-weight: bold;
            font-size: 1.1em;
        }

    .carousel_item .conversion {
        font-weight: lighter;
        font-size: .8em;
    }

    .carousel_item .price_type {
        flex-basis: 100%;
        color: var(--c_customcolor);
        font-weight: bold;
        font-size: 1.1em;
    }

.carousel_list a {
    text-decoration: none;
    color: #6D6D6D;
}


/*popusti - akcije i rabati*/

.item_action_discount, .item_personal_discount {
    position: absolute;
    bottom: 1em;
    right: 1em;
    top: 3em;
    width: 2em;
    height: 2em;
    text-align: center;
}

.item .item_action_discount, .item .item_personal_discount {
    top: 4em;
    width: 3em;
    height: 3em;
}

.item .item_personal_discount {
    top: 12em;
}

.product_item .item_personal_discount {
    top: 8em;
}

.item_discount, .item_discount::before, .item_discount::after {
    width: 2em;
    height: 2em;
    text-align: center;
    background: var(--c_customcolor);
}

.item .item_discount, .item .item_discount::before, .item .item_discount::after {
    width: 3em;
    height: 3em;
    text-align: center;
    background: var(--c_customcolor);
}

.item_personal_discount .item_discount, .item_personal_discount .item_discount::before, .item_personal_discount .item_discount::after {
    background: var(--c_rabatcolor);
}


.item_discount::before, .item_discount::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}


.item_discount::before {
    transform: rotate(30deg);
}

.item_discount::after {
    transform: rotate(60deg);
}


.item_discount_percent {
    position: relative;
    z-index: 999;
    right: -.15em;
    top: .1em;
    width: 1em;
    height: 1em;
    color: #fff;
    font-weight: bold;
    font-size: 1.6em;
    transform: rotate(15deg);
}

.item .item_discount_percent {
    right: -.3em;
    top: .15em;
    font-size: 2em;
}

.item .item_personal_discount .item_discount_percent {
    font-size: 1.3em;
    width: 2em;
    top: .5em;
    right: -.15em;
}

.product_item .item_personal_discount .item_discount_percent {
    font-size: 1em;
    width: 2em;
    top: .3em;
    right: .15em;
}


.readmore {
    display: none;
    color: darkblue;
    padding-left: 1em;
}

.valuta {
    font-size: 0.8em;
    padding-left: 1em;
}

.at_bottom {
    position: absolute;
    bottom: 2em;
    width: 90%;
}

/* login screen*/

.login_page {
    padding-top: 3em;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.login_page_button {
    display: block;
    margin: 1em 1rem 0 0;
    border: none;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.5em 2em;
    background-color: var(--cb_topcartcolor) !important;
    color: var(--c_topcartcolor) !important;
    cursor: pointer;
    text-decoration: none;
}

    .login_page_button:active {
        cursor: grabbing;
    }

.login_row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.fieldset_outer {
    position: relative;
    border: 1px solid var(--c_border);
    border-radius: 5px;
    width: 45%;
    height: 27em;
    background-color: var(--cb_color);
    color: var(--c_color);
    padding: 1em;
    margin: 1em;
    min-width: 350px;
    max-width: 400px;
}

    .fieldset_outer p {
        font-size: medium;
    }

.fieldset_inner {
    position: relative;
    border: 1px solid var(--c_border);
    border-radius: 5px;
    width: auto;
    background-color: var(--cb_color);
    color: var(--c_color);
    padding: 1em;
    margin: 1em;
    height: 19em;
}

    .fieldset_inner #authenticationForm > div {
        padding-top: 1.5em;
    }


#UserName, #Password {
    font-size: larger;
}

#authenticationForm label {
    width: 8em;
    display: inline-block;
    font-size: medium;
}

#LoginText {
    font-size: medium;
    padding-left: 1em;
}

/*register form*/

.reqinds {
    font-size: 2em;
    font-weight: bolder;
    vertical-align: middle;
}

.reqind {
    color: red;
    font-size: 2em;
    font-weight: bolder;
    vertical-align: middle;
}


input[type='checkbox'].req:not(:checked):focus ~ .reqinds::after {
    content: 'Molimo Vas da potvrdite/označite!';
    font-size: 1.4rem;
    vertical-align: middle;
}

.reqred {
    color: white;
    background-color: lightcoral;
}

#register_main {
    margin: auto;
    width: 40%;
    min-width: 500px;
}

    #register_main h2 {
        color: var(--c_customcolor);
    }

#registerForm label {
    width: 12em;
    display: inline-block;
    font-size: 1.2em;
    margin-top: 1em;
}

#registerForm button {
    font-size: 1.2em;
}

#registerForm input, #registerForm select {
    font-size: 1.2em;
}

#registerForm > div {
    /*margin-left: 5em;*/
    border: 1px solid var(--c_border);
    border-radius: 5px;
    background-color: var(--cb_color);
    color: var(--c_color);
    padding: 1em;
    width: 30%;
    min-width: 500px;
}

#payerDataForm div.annotation {
    display: inline-block;
}

#payerDataForm div:not(.annotation) > label {
    width: 12em;
    vertical-align: top;
    display: inline-block;
    font-size: 1.2em;
}

#payerDataForm div.annotation > label {
    font-size: 1.2em;
    padding: .5rem;
    min-width: 50%;
}

#payerDataForm input, #payerDataForm select, #payerDataForm textarea {
    font-size: 1.2em;
    padding: .5rem;
    min-width: 30%;
}

#payerDataForm div.annotation input, #payerDataForm div.annotation select, #payerDataForm div.annotation textarea {
    min-width: 50%;
}

#payerDataForm > div {
    margin-left: 5em;
    border-radius: 5px;
    padding: 1em;
    min-width: 400px;
}

.pay_buttons {
    display: block;
    margin: 1em 1rem 0 0;
    border: none;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.5em 2em;
    background-color: var(--cb_topcartcolor) !important;
    color: var(--c_topcartcolor) !important;
    cursor: pointer;
}

    .pay_buttons:active {
        cursor: grabbing;
    }


.maxwidth60 {
    width: 60%;
    max-width: 60%;
}

.maxwidth100 {
    width: 100%;
    max-width: 100%;
}


.partner_locations_selector_wrap {
    padding: 1em 1em 0 1em;
}

.partner_locations_selector {
    width: 20em;
}

.partner_locations {
    padding: 0 1em 0 1em;
}

.partner_locations_data_one {
    padding: 0 1em 2em 3em;
}

.partner_locations_data_one_header {
    padding: 0 2em 2em 0;
    font-size: 1.2em;
    font-weight: bolder;
    margin-left: -1em;
}

.partner_locations_data_one_t {
    vertical-align: top;
    display: inline-block;
    /*width: 30em;*/
}

.partner_locations_data_one_p {
    display: inline-block;
    margin-left: 2em;
}

.partner_locations_data_name {
    font-size: 1.2em;
    font-weight: bold;
}

.partner_locations_data_address {
    font-size: 1em;
    font-weight: bold;
}

.partner_locations_data_mail,
.partner_locations_data_phone,
.partner_locations_data_fax,
.partner_locations_data_regionname {
    font-size: 1.2em;
}

.partner_locations_data_logo {
    /*width: 100px;*/
    height: 100px;
}

/* jquery UI owerrides*/

.ui-icon-cart {
    width: 16px;
    height: 16px;
    background-image: url('./images/icon_cart_16.png') !important;
    background-position: 0 0;
}

.item-fav {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill:lightgray;' viewBox='0 0 32 32'%3E%3Cpath d='M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z'/%3E%3C/svg%3E ");
    position: absolute;
    top: 1.5em;
    margin: .5em 0 0 1.5em;
    width: 2em;
    height: 2em;
    text-align: center;
}

    .item-fav:hover {
        animation: pulse 1s ease infinite;
    }

    .item-fav.active {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill:red;' viewBox='0 0 32 32'%3E%3Cpath d='M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z'/%3E%3C/svg%3E ");
        animation: none;
    }

.carousel_item .item-fav {
    top: 3em;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}


.center_text {
    margin: auto;
    width: 50%;
}

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

.contact-col1 a {
    color: #313131;
    text-decoration: underline;
}

.contact-col1 p {
    padding-bottom: 7px;
}

b, strong {
    font-weight: bold;
}

.city-title {
    display: inline-block;
    font-size: 20px;
    line-height: 1.3;
    color: #DA251D;
    font-weight: bold;
    padding: 14px 0;
    position: relative;
}


.departmen-cnt {
    position: relative;
    padding-bottom: 30px;
}

.department-title, .department-address {
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 12px;
}

    .department-address i {
        margin-right: .5em;
        color: var(--c_customcolor);
    }

.departmen-workers {
    display: flex;
    flex-wrap: wrap;
    padding-left: 23px;
    border-left: 4px solid #E8E8E8;
}


.worker {
    width: calc(100% / 2.3);
    padding-right: 30px;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 30px;
}

.worker-name {
    font-weight: bold;
}

.worker-info {
    text-decoration: none;
    cursor: pointer;
    color: black;
}

    .worker-info > span {
        color: var(--c_customcolor);
        font-weight: bold;
    }

.contact-info-box {
    min-width: 360px;
    background: #F7F7F7;
    padding: 30px 50px;
    position: relative;
}

.tel, .mail, .working-hours, .faq-link, .address {
    display: block;
    font-size: 14px;
    line-height: 19px;
    color: var(--c_footercolor);
    padding-left: 29px;
    position: relative;
}


.dropdown-check-list {
    display: inline-block;
    position: relative
}

    .dropdown-check-list .anchor {
        position: relative;
        cursor: pointer;
        display: inline-block;
        padding: 5px 50px 5px 10px;
        border: 1px solid #ccc;
    }

        .dropdown-check-list .anchor::after {
            position: absolute;
            content: "";
            border-left: 2px solid black;
            border-top: 2px solid black;
            padding: 5px;
            right: 10px;
            top: 20%;
            transform: rotate(-135deg);
        }

        .dropdown-check-list .anchor:active::after {
            right: 8px;
            top: 21%;
        }

    .dropdown-check-list ul.items {
        padding: 2px;
        display: none;
        margin: 0;
        border: 1px solid #ccc;
        border-top: none;
        position: absolute;
        min-width: 100%;
        width: 100%;
        width: max-content;
        background-color: white;
        z-index: 100;
    }

        .dropdown-check-list ul.items li {
            list-style: none;
        }

    .dropdown-check-list.visible .anchor {
        color: #0094ff;
    }

    .dropdown-check-list.visible .items {
        display: block;
    }

.one-filter {
    display: inline-block;
    float: left;
    width: calc(100% - 13em);
}


.delivery-cost, .delivery-cost-row {
    display: flex;
    flex-wrap: nowrap;
    font-weight: bold;
    font-size: 1.2em;
}

.delivery-cost-name, .delivery-cost-ammount, .delivery-cost-currency {
    flex-flow: row nowrap;
    padding-right: 1em;
}

.delivery-cost-ammount {
    align-content: right;
    padding-right: .3em;
}

.delivery-cost-currency {
    align-content: left;
}

.google_map {
    width: 100%;
    height: 30em;
}

#main-menu-wrapper {
    display: flex;
    height: 4em;
}

#menu-katalog {
    min-width: 10vw;
    height: 4em;
    line-height: 4em;
    background-color: var(--c_customcolor);
    width: 25%;
    padding-left: 4em;
    cursor: pointer;
    color: var(--c_menucolor);
}

#menu-wrapper {
    max-width: 100%;
    cursor: pointer;
    display: inline-block;
}


    #menu-wrapper #hamburger-menu {
        position: absolute;
        width: 2em;
        display: inline-block;
        top: 1.2em;
        left: 1em;
    }

        #menu-wrapper #hamburger-menu span {
            opacity: 1;
            left: 0;
            display: block;
            width: 100%;
            height: 2px;
            border-radius: 10px;
            color: var(--c_customcolor);
            background-color: white;
            position: absolute;
            transform: rotate(0);
            transition: .4s ease-in-out;
        }

            #menu-wrapper #hamburger-menu span:nth-child(1) {
                top: 0;
            }

            #menu-wrapper #hamburger-menu span:nth-child(2) {
                top: 9px;
            }

            #menu-wrapper #hamburger-menu span:nth-child(3) {
                top: 18px;
            }

        #menu-wrapper #hamburger-menu.open span:nth-child(1) {
            transform: translateY(9px) rotate(135deg);
        }

        #menu-wrapper #hamburger-menu.open span:nth-child(2) {
            opacity: 0;
            transform: translateX(-20px);
        }

        #menu-wrapper #hamburger-menu.open span:nth-child(3) {
            transform: translateY(-9px) rotate(-135deg);
        }


#kaccordian-wrapper {
    width: 0;
    top: 3.5em;
    position: absolute;
    overflow: hidden;
    left: 0;
    background-color: transparent;
    transition: all .5s ease;
    z-index: 9999;
    height: 0;
}

    #kaccordian-wrapper.active {
        width: 90vw;
        transition: all .5s ease;
        height: 300vh;
    }

#kaccordian {
    z-index: 1;
    width: 30vw;
    color: var(--c_color);
    background-color: var(--cb_color);
    position: relative;
    transition: all 0.5s ease;
    border: 1px solid var(--c_border);
}

    /*za test*/

    #kaccordian .allsubs > ul {
        display: none;
    }


    #kaccordian ul {
        padding: 0;
        background-color: var(--cb_color);
        margin: 0;
        list-style: none;
    }

    #kaccordian .kmenu_li0 > a:not(:only-child)::after,
    #kaccordian .kmenu_li1 > a:not(:only-child)::after,
    #kaccordian .kmenu_li2 > a:not(:only-child)::after,
    #kaccordian .kmenu_li3 > a:not(:only-child)::after {
        content: "\f105";
        font-family: fontawesome;
        position: absolute;
        right: 10px;
        top: 0;
        font-size: 1em;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

    #kaccordian .kmenu_li0.active > a:not(:only-child)::after,
    #kaccordian .kmenu_li1.active > a:not(:only-child)::after,
    #kaccordian .kmenu_li2.active > a:not(:only-child)::after,
    #kaccordian .kmenu_li3.active > a:not(:only-child)::after {
        content: "\f107";
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    #kaccordian .kmenu_ul1, #kaccordian .kmenu_ul2, #kaccordian .kmenu_ul3 {
        display: none;
    }

    #kaccordian .kmenu_ul0 {
        border-right: 1px solid var(--c_border);
        padding-top: .5em;
        padding-bottom: .5em;
    }


    #kaccordian .kmenu_li0 > a,
    #kaccordian .kmenu_li1 > a,
    #kaccordian .kmenu_li2 > a,
    #kaccordian .kmenu_li3 > a {
        position: relative;
        padding-left: 1em;
        font-size: 1.2em;
        line-height: 1.5em;
        display: block;
        color: var(--c_color);
        text-decoration: none;
        background: var(--cb_color);
    }

    #kaccordian .kmenu_li1 > a {
        padding-left: 2em;
    }

    #kaccordian .kmenu_li2 > a {
        padding-left: 3em;
    }

    #kaccordian .kmenu_li3 > a {
        padding-left: 4em;
    }

        #kaccordian .kmenu_li0 > a:hover,
        #kaccordian .kmenu_li1 > a:hover,
        #kaccordian .kmenu_li2 > a:hover,
        #kaccordian .kmenu_li3 > a:hover {
            text-shadow: 0 0 1px rgba(2, 2, 2, 0.7);
            border-left: 5px solid var(--c_customcolor);
        }

    #kaccordian .kmenu_li0,
    #kaccordian .kmenu_li1,
    #kaccordian .kmenu_li2,
    #kaccordian .kmenu_li3 {
        width: 30vw;
    }

    #kaccordian li {
        list-style-type: none;
    }

    #kaccordian .active > ul {
        display: block;
    }

    #kaccordian .active > a {
        text-shadow: 0 0 2px rgba(2, 2, 2, 0.7);
    }

    #kaccordian .active .submenu {
        display: block;
    }

    #kaccordian .submenu {
        position: absolute;
        left: 30.05vw;
        width: 45vw;
        height: auto;
        top: .3em;
        border: 1px solid var(--c_border);
        background-color: var(--cb_color);
        display: none;
        padding-left: 1em;
        padding-top: 1em;
    }

        #kaccordian .submenu li {
            font-size: 1em;
        }

            #kaccordian .submenu li a {
                text-decoration: none;
                color: var(--c_color);
            }


    #kaccordian .submenu_ul1 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 1.0em;
        line-height: 1.2em;
        color: var(--c_color);
        text-decoration: none;
        background: var(--cb_color);
    }

    #kaccordian .submenu_ul2 {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding-left: 1em;
    }


    #kaccordian .submenu_li1 {
        width: 15vw;
        height: auto;
        min-height: 10em;
        padding-bottom: 1em;
    }

        #kaccordian .submenu_li1 > ul {
            padding-top: 1em;
        }

        #kaccordian .submenu_li1 > a {
            font-weight: bold;
            font-size: 1.1em;
            margin-bottom: .5em;
        }

    #kaccordian .submenu li a:hover,
    #kaccordian .submenu li a:hover,
    #kaccordian .submenu li a:hover {
        text-shadow: 0 0 1px rgba(2, 2, 2, 0.7);
    }



ul#mainmenu {
    list-style: none;
    display: flex;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

    ul#mainmenu > li {
        position: relative; /* allows us to set the z-index */
        z-index: 5; /* raises the z-index of the line item 5 levels all other elements */
        margin-right: .5em;
        padding: 5px 5px 4px;
        float: left;
        background-repeat: no-repeat;
        background-position: 6px 11px;
    }

        ul#mainmenu > li a {
            text-decoration: none;
            color: var(--c_menucolor);
            font-size: 1.1em;
            font-weight: bold;
            padding: 2px 5px;
            z-index: 10;
            display: block;
            position: relative;
            padding-bottom: 6px;
            text-transform: uppercase;
        }

            ul#mainmenu > li a:hover {
                text-decoration: none;
                transition: color .3s;
                color: var(--c_customcolor);
            }



    ul#mainmenu > li {
        padding: 0;
        display: flex;
        align-items: center;
        text-align: center;
        width: min-content;
    }


#menu-katalog a.first:hover {
    color: white;
    cursor: pointer;
}



.util_insert {
    padding: 1em 2em 1em 2em;
    font-size: 1.5rem;
}

    .util_insert p {
        padding-bottom: 10px;
    }

.util_insert {
    background-color: white;
    box-shadow: 0 0 10px 5px #888888;
    position: relative;
}

.contact-page {
    background-repeat: no-repeat;
    background-image: url('./images/Contact_background.jpg');
    background-position-y: -300px;
    /*background-attachment: fixed;*/
    padding-top: 4em;
}

    .contact-page > div {
        background-color: transparent;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .contact-page h2 {
        text-shadow: 2px 2px 2px gray;
        font-size: 3em;
        color: white;
    }

    .contact-page > div {
        padding-bottom: 1.5em;
    }

.rasvjeta-page {
    padding-top: 4em;
}

    .rasvjeta-page .bkg {
        background-image: url('./custom/rasvjeta.jpg');
        position: absolute;
        background-size: 100% auto;
        background-repeat: no-repeat;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .rasvjeta-page .bkg1 {
        background-image: url('./images/footer_background.jpg');
        position: absolute;
        background-size: 100% auto;
        background-repeat: repeat-y;
        opacity: .05;
        z-index: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
    }

    .rasvjeta-page > div:first-child {
        position: relative;
        background-color: transparent;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 1.5em;
        z-index: 10;
    }

    .rasvjeta-page h2 {
        text-shadow: 2px 2px 2px gray;
        font-size: 3em;
        color: white;
    }


    .rasvjeta-page .supplier-list {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .rasvjeta-page .supplier {
        padding: 2em;
        max-width: 23%;
    }

        .rasvjeta-page .supplier img {
            max-height: 4em;
            max-width: 90%;
        }

.toggle {
    display: none;
}

.toggle-label {
    position: relative;
    float: right;
    width: 1.5em;
    height: 1.5em;
    z-index: 1;
    cursor: pointer;
}

    .toggle-label::before,
    .toggle-label::after {
        content: "";
        position: absolute;
        background-color: var(--c_customcolor);
        transition: transform .3s ease-out;
    }

    /* Vertical line */
    .toggle-label::before {
        top: 0;
        left: 50%;
        width: 4px;
        height: 100%;
        margin-left: -2px;
    }

    /* horizontal line */
    .toggle-label::after {
        top: 50%;
        left: 0;
        width: 100%;
        height: 4px;
        margin-top: -2px;
    }

.toggle:checked + .toggle-label::before {
    transform: rotate(90deg);
}

.toggle:checked + .toggle-label::after {
    transform: rotate(180deg);
}

.toggle + label + .city-row {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
}

.toggle:checked + label + .city-row {
    max-height: 300vh;
    transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
}


#footer {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding-top: 1em;
}

    #footer ul {
        padding: 0;
    }


    #footer .wrapper {
        position: relative;
    }


    #footer::before {
        content: "";
        background-image: url('./images/footer_background.jpg');
        opacity: .05;
        position: absolute;
        background-size: cover;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }


/*#region media*/


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    #found-item-list {
        position: absolute;
        z-index: 999;
        width: 100%;
        right: 1rem;
        border: 1px solid var(--c_border);
        background-color: var(--cb_color);
        overflow: hidden;
    }
}

@media all and (max-width: 1150px) {
    .item_item_wrapper .item_description {
        width: 45%;
    }

    .cart_items_item_description,
    .offer_items_item_description {
        width: 55%;
    }

    .product_item .item_description {
        width: 42%;
    }
}

@media all and (max-width: 1024px) {
    html {
        font-size: 11px;
    }

    .item_item_wrapper .item_image {
        display: inline-block;
        padding: .5em 0 .5em 0;
        max-width: 30%;
        max-height: 30%;
        overflow: hidden;
        text-align: center;
        line-height: 11em;
        background-color: white;
        position: relative;
    }

        .item_item_wrapper .item_image > * {
            line-height: normal;
        }

    .item_item_wrapper .item_description {
        width: 40%;
    }

    .cart_items_item_description, .offer_items_item_description {
        width: 52%;
    }

    .product_item .item_description {
        width: 42%;
    }

    #main_top {
        margin: 0;
        height: auto;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #searchbox_wrapper {
        order: 99;
        min-width: 80vw;
    }

    #main_top_right_user a {
        font-size: 1.8em;
    }

    #searchForm {
        margin-left: 0;
    }

    #searchboxbutton {
        height: 70px;
        width: 70px;
        right: 0;
        top: 0;
    }
}

@media all and (max-width: 850px) {
    html {
        font-size: 10px;
    }

    #main_background {
        width: 97%;
    }


    .item_item_wrapper .item_description {
        width: 35%;
    }

    .cart_items_item_description, .offer_items_item_description {
        width: 49%;
    }

    .product_item .item_description {
        width: 40%;
    }

    ul#mainmenu {
        display: none;
    }

    .slicknav_menu {
        display: block;
    }

    #main_top_left_motto_img {
        display: none;
    }

    .submenu {
        display: none !important;
    }

    #kaccordian {
        width: 80vw;
    }

        #kaccordian .kmenu_li0,
        #kaccordian .kmenu_li1,
        #kaccordian .kmenu_li2 {
            width: 80vw;
        }

    .home_brands .slick-prev {
        left: 1em;
    }

    .home_brands .slick-slide img {
        height: 2em;
    }

    .slicknav_nav a {
        font-size: 1.8rem;
    }

    #main_top {
        margin: 0;
        height: auto;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #searchbox_wrapper {
        order: 99;
        min-width: 80vw;
    }

    #main_top_right_user a {
        font-size: 1.8em;
    }

    #searchForm {
        margin-left: 0;
    }

    #searchboxbutton {
        height: 70px;
        width: 70px;
        right: 0;
        top: 0;
    }
}

@media all and (max-width: 720px) {
    html {
        font-size: 10px;
    }

    .item_item_wrapper .item_description {
        width: 25%;
    }

    .cart_items_item_description, .offer_items_item_description {
        width: 45%;
    }

    .product_item .item_description {
        width: 40%;
    }

    .util_insert {
        padding: 1em 1em 1em 1em;
        max-width: 100%;
    }

    .contact-page > div {
        width: 90%;
    }
}

/*#endregion media*/

.city-title:target + input + label + div {
    max-height: 300vh;
}

.cards a,
.placanja a {
    text-decoration: none;
}

.clickable {
    cursor: pointer;
}

/* job application form */

.job-app-main {
    font-size: 1.2em;
}

    .job-app-main > h4 {
        padding-left: 3em;
    }

    .job-app-main > h3 {
        padding-left: 2.5em;
    }


#job-app-form {
    padding-left: 3em;
    padding-right: 3em;
    padding-bottom: 3em;
}

    #job-app-form .input-box {
        padding-bottom: 1em;
    }

        #job-app-form .input-box input:not([type="date"]),
        #job-app-form .input-box textarea {
            padding: .5em;
            min-width: 40%;
        }

        #job-app-form .input-box input[type="date"] {
            min-width: 25%;
            padding: .5em;
        }

    #job-app-form label {
        font-weight: bold;
    }

/* job application form end */


.offer-size {
    font-size: 1.3em;
}