a { 
    -moz-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out;
    cursor: pointer;
}

a:hover { 
    color: #B9280A;
    text-decoration: none !important;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

[data-toggle="tooltip"] {
    cursor: help;
}


label > input[type="checkbox"],
label > input[type="radio"] {
    margin-right: 6px;
}
label {
    font-weight: normal;
}
label.control-label {
    font-weight: 700;
}

.articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 60px 44px;
    grid-auto-rows: 1fr;
}

@media (max-width: 768px) {
    .articles {
        grid-template-columns: repeat(2, 1fr) !important;
    }    
}

@media (max-width: 500px) {
    .articles {
        grid-template-columns: repeat(1, 1fr) !important;
    }    
}

article .item {
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;    
    height: 100%;
    border-collapse: collapse;
    display: table;
}

.articles .item:hover {
    box-shadow: 1px 1px 10px #EFEFEF;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .articles {
        display:block !important;
    }


    .articles article {
        display: inline-block;
        width: 31% !important;
        margin-right: 10px;
        margin-bottom: 25px;
    }

    article .item {
        display: block !important;
        height: auto !important;
    }
}


article.item:hover {
    box-shadow: 1px 1px 4px #CCC;
}

article a {
    color: #000000;
}

article .item {
    position: relative;
    border: 1px solid #efefef;
} 

article span.multicolor {
    background: url('../img/multicolor.svg');
    background-size: 32px 32px;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    right: 5px;
    margin-top: 5px;
    cursor: help;
}

article .prices {
    margin: 0 1em 1em;
    text-align: right;
}

article .prices strong:first-line {
    font-size: 1.2em;
}

article .stocks {
    margin: 0 1em 1em;
    text-align: right;
    font-size: 90%;
    opacity: 0.75;
}
article .stocks strong {
    color: #d43f3a;
}

article .btn-group-vertical {
    display: block;
    margin: 5px auto;
    width: 96%;
}

.discount {
    text-decoration: none;
    position: relative;
    font-weight: 700;
    color: #d43f3a;
}

.discount::before {
    top: 50%; /*tweak this to adjust the vertical position if it's off a bit due to your font family */
    background: #d43f3a; /*this is the color of the line*/
    opacity: .7;
    content: '';
    width: 110%;
    position: absolute;
    height: .1em;
    border-radius: .1em;
    left: -5%;
    white-space: nowrap;
    display: block;
    transform: rotate(-15deg);
}

/* Sleva */
article .item span.label-success {
    position: absolute;
    left: 5%;
    top: 2%
}
/* Postovne zdarma */
article .item span.label-warning {
    position: absolute;
    right: 4%;
    top: 2%
}
/* Vyprodej */
article .item span.label-info {
    position: absolute;
    right: 4%;
    top: 2%
}

article .cartval {
    width:70%;
    margin:0 auto 10px auto;
}
article .cartval input {
    text-align: center;
}

article .item .desc {
    margin: 0.5em 1em .5em 1em;
    display: block;
    display: -webkit-box;
    height: 4.5em;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify
}

article strong {
    display: block;    
}

article a.name strong {
    margin: 1em 1em 0.5em 1em;
}
article p.altname {
    margin: 0 1em 0.5em 1em;
    font-weight: bold;
    font-size: 90%;
}

article img {
    width: 96%;
    margin: 2%;
}

article .btm {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

article .btn-primary em {
    margin: 0 0 0 7px;
}
article .btn-primary .inb {
    padding: 3px 6px;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    margin-left: 3px;
    border-radius: 2px;
}
article .btn-primary .inb em {
    margin: 0 6px 0 3px;
}


#left-column {
    padding-top: 5.4em;
}

#left-menu a.list-group-item {
    border: none;
    padding-left:0;
    padding-right:10px;
}
#left-menu a.list-group-item:hover{
    padding-left:10px;
} 
#left-menu>.list-group-item.active, 
#left-menu>.list-group-item.active:focus, 
#left-menu>.list-group-item.active:hover {
    background-color: rgba(60, 55, 50, .8);
    padding-left: 10px;
    color: #FFFFFF;
}
#left-menu .list-group-item:focus:after, 
#left-menu .list-group-item:hover:after,
#left-menu .list-group-item.active::after {
    display:inline-block;
    float: right;
    content: "❯";
}
#left-menu>.list-group {
    margin-left: 20px;
}
#left-menu>.list-group>.list-group-item {
    border-radius: 0;
}
#left-menu>.list-group>.list-group-item.active, 
#left-menu>.list-group>.list-group-item.active:focus, 
#left-menu>.list-group>.list-group-item.active:hover {
    background-color: rgba(60, 55, 50, .5);
    padding-left: 10px;
    color: #FFFFFF;
}
a.list-group-item {
    color:#3C3732;
}

.filters .panel-body {
    padding: 0;
}

.filters ul {
    padding: 0;
    margin: .666em 0.333em;
    list-style-type: none;
}

.filters ul li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filters ul li input {
    display: none;
}

.filters ul li label {
    cursor: pointer;
    font-weight: 400;
}

.filters ul li label span.outer {    
    display: inline-table;
    width: 11px;
    height: 11px;
    vertical-align: middle;
    background-color: #FFFFFF;
    border: 1px solid #C7C7C7;
    border-radius: 2px;
    margin: auto 5px;
    text-align: center;
    border-spacing: 1px;
}

.filters ul li label span.inner {   
    display: table-cell;
    vertical-align: middle;
    border-radius: 2px;
}

.filters ul li label:hover span.inner {
    background-color: #f4511e;
}

.filters ul li label:hover span.inner.active {
    background-color: #bf360c;
}

.filters ul li label span.inner.active {
    background-color: #757575 ;
}


select.form-control.ob {
    width: 140px;    
    display: inline-block;
}
select.form-control.pp {
    width: 80px;
    text-align: center;
    display: inline-block;
}
select.form-control.pp option {
    text-align: center;
}

.xmain {
    background-repeat: no-repeat;
    background-position: 100% 20%;
    padding-right: 70px !important;
}
.form-group.required .control-label:after {
    content: ' *';
    color: red;
    position: absolute;
    margin-left: 3px;
}


.description {
    margin-bottom: 1em;
}

#order-box .input-group .form-control,
#order-box .input-group-btn:last-child>.btn, 
#order-box .input-group-btn:last-child>.btn-group {
    z-index: auto !important;
}

.tronlogo button:nth-of-type(2) {
    display: block;
    margin-top: 8px;
}

#snippet--insideBasket {
    position: absolute;
    z-index: 100;
    right: 0px;
    margin-top: 3px;
    width: 200%;
}

#snippet--insideBasket-mp {
    position: absolute;
    z-index: 100;
    right: -1px;
    margin-top: 3px;
}

#snippet--insideBasket-mp .table {
    margin: 0;
}

#snippet--insideBasket-mp .panel {
    box-shadow: #CCC 5px 5px 10px !important;
}

@media (max-width: 768px) {
    #snippet--insideBasket {
        width: 140%;
    }
}

.in-cart table {
    margin-bottom: 0
}

.in-cart .panel-body {
    padding-top: 5px;
    padding-bottom: 5px
}


.photoswipe-wrapper > a > img {
    margin-bottom: 8px;
}

html .navbar-inverse {
    margin-top: 1em;
}

footer {
    background: rgb(255,255,255);
}
footer ul {
    padding-left: 0;
    list-style-type: none;
}

main {
    background: white;
    padding-top:.9em;
    padding-bottom: 3em;
}

.bg-white {
    background-color: white;
}

#accordion .panel-heading a {
    color: black;
}

.breadcrumb>li+li:before {
    content: "❯";
    font-size: 50%;
    font-weight: 900;
    vertical-align: middle;
}


/* responsive navbar  */
@media (max-width: 768px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}


/** datagrid */
.input-group-addon.datagrid-col-filter-datte-range-delimiter {
    padding:6px 4px !important;
}


/* vlajky https://flag-icon-css.lip.is/?continent=Europe */
.flag {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 14px;
    background-size: contain;
}
.flag-cz {
    background-image: url('../img/flag-cz.svg');
}
.flag-en {
    background-image: url('../img/flag-en.svg');
}
.flag-sk {
    background-image: url('../img/flag-sk.svg');
}
.flag-de {
    background-image: url('../img/flag-de.svg');
}

/* kosik */
.alert.alert-danger li {
    list-style-type: none;
}

/* popup vlozeno do kosiku */
#addedToCart .modal-header {
    background-color: #5cb85c;
    border-radius: 5px 5px 0 0;
    color: white;
}
#addedToCart .modal-header button.close {
    color: white;
}
#addedToCart .progress,
#frm-basket .progress {
    position: relative;
    margin-bottom: 0;
}
#addedToCart span.label,
#frm-basket .progress span.label {
    padding-top: 3px;
    padding-bottom: 2px;
    position: absolute;
    top: 1.5px;
    right: 1px;
    border: 1px solid rgba(255,255,255,0.5);
}
#addedToCart .modal-footer .btn.pull-left::before {
    content: '< ';
    font-size: 80%;
    font-weight: 900;
    vertical-align: text-bottom;
    opacity: 0.6;
}
#addedToCart .modal-footer .btn-primary::after {
    content: ' >';
    font-size: 80%;
    font-weight: 900;
    vertical-align: text-bottom;
    opacity: 0.6;
}

/* naposled zobrazene produkty */
.last-visited {
    border-top: 1px solid #eee;
    margin: 30px 15px 20px 15px;
    padding-top: 20px;
}
.last-visited .articles {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    gap: 1%;
}
@media (min-width: 768px) {
    .last-visited .articles  {
        display: flex;
        flex-wrap: wrap;
    }
}
.last-visited .articles > article {
    width: 32.6%;
    padding: 4px;
    margin-bottom: 20px;
    font-size: 85%;
    font-weight: bold;
    text-align: center;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border .2s ease-in-out;
}

@media (min-width: 768px) {
    .last-visited .articles > article {
        width: 15.82%;
    }
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    background-color: #b0bac3;
}

form ul.error {
    color: white;
    background: #D95252;
    list-style-type:none;
    padding: .5em 1em;
    border-radius: 4px;
}
form ul.error li {
    padding: .5em .5em;
    margin: 0
}