body { background-color: #f2f5f7;}
a {color: inherit;}
a:hover {text-decoration: none; opacity: 0.5;}
.inline {display: inline-block; vertical-align: top;}

.menu {padding: 0px; margin: 0px;}
.menu li {list-style-type: none;}
.menu-inline li {display: inline-block;  }
.align-left {text-align: left;}

.paginator {display: inline-block;float: right;text-align:right; margin-top: 10px; margin-bottom: 10px; margin-right: 15px;}
.paginator .step, .paginator .nav {background-color: #f0f0f0; border: 1px solid #cccccc; margin: 0px 2px 10px 2px; display: inline-block; height: 20px; min-width: 20px; padding: 2px 5px; text-align: center; font-size: 1rem;}
.paginator .active {background-color: yellowgreen;}

.errors {border: 1px solid red; color: red; background-color: pink; padding: 5px 10px; line-height: 20px;}                                                                                   
.info {border: 1px solid green; color: black; background-color: yellowgreen; padding: 5px 10px; line-height: 20px;}                

#container {min-height: calc(100vh - 200px); }
#container .top header .logo {color: #a00;}
#container .top header .logo .title {font-size: 1.8rem; padding: 0px 10px;}
#container .top header {background-color: white; padding: 10px 0px;}
#container .top nav {background-color: white; margin: 10px auto;}
#container .top nav .menu-types li {padding: 10px 15px;}
#container .top nav .menu-types li.active {background-color: #0077b3;color: white;}
#container .top nav .menu-types li {border-right: 1px dashed #e0e0e0;}
#container .top nav .menu-types li:last-child {border-right: 0px;}
#container .top nav .menu-types li a {text-align: center; }
#container .top nav .track {padding: 0px 15px; background-color: #e0e0e0;}
#container .top nav .track li {display: inline-block; vertical-align: top; margin-right: 10px; margin-bottom: 12px; margin-top: 12px;}
#container .top nav .track li:after {padding-left: 10px;content: '>'}
#container .top nav .track li:last-child:after {padding-left: 0px;content: '';}
#container .top nav .track li:last-child {font-weight: bold;}
#container .top .pageTitle .title {font-size: 1.5rem;padding: 5px 0px 15px 5px;display: inline-block; vertical-align: top;}
#container .top .pageTitle .description {display: inline-block; vertical-align: top; margin: 5px 0px 15px 10px; font-size: 1.5rem; border: 0px; background: transparent; padding: 5px 0px 0px 0px}
#container .middle .sidebar-left {width: 200px; display: inline-block; vertical-align: top; background-color: white; font-size: 0.9rem;}
#container .middle .sidebar-left .title {padding: 5px 0px 0px 5px; }
#container .middle .sidebar-left .categories-root {padding: 0px;margin: 10px 0px 10px 20px;}
#container .middle .sidebar-left .categories-root li {padding: 4px 0px;}
#container .middle .sidebar-left .categories-children {padding: 0px 0px 0px 15px;}
#container .middle .sidebar-left .categories-children li {}
#container .middle .sidebar-left .categories-root li .active {color: white; background-color: green; padding: 0px 5px;}
#container .middle .sidebar-left .categories-root li.option-minus:before {content: '-'; color: red;}
#container .middle .sidebar-left .categories-root li.option-plus:before {content: '+'; color: green;}
#container .middle .sidebar-left .categories-root li.menu-option:before {position: absolute; margin-left: -15px;}

#container .middle .main {width: calc(100% - 230px); display: inline-block; vertical-align: top; background-color: white; float: right; padding: 10px; margin-bottom: 20px;clear: both;}
#container .middle .main.fullscreen {width: calc(100% - 20px); display: flex;}
#container .middle .main .box { width:33%; text-align: center; padding: 10px 10px 20px 10px; margin: 10px 10px 10px 10px; border: 1px solid #f0f0f0; background-color: #f2f5f7;}
#container .middle .main .box .title {display: inline-block; vertical-align: top;position: relative; margin: 50px 0px -90px 0px; z-index: 30; color: white;padding: 10px 20px; background-color: black; opacity: 0.7;}
#container .middle .main .box .image {}
#container .middle .main .box .image img {opacity: 0.66; max-width: 100%; aspect-ratio: 1/1;}
#container .middle .main .box .item {background-color: white; margin-top: 10px; padding: 10px;}
#container .middle .main .box .item img {max-width: 100%; height: 200px; opacity: 0.9}
#container .middle .main .box .item .name{position: relative; margin-top: -30px; font-size: 1rem; height: 20px; overflow: hidden; background-color: #eee; opacity: 0.8;padding-top: 0px;padding-bottom: 10px;line-height: 30px;}
#container .middle .main .box .more {text-align: right; display: block; padding: 10px 10px 0px 0px;}

.shops_list {}
.shops_list .shop {display: inline-block; vertical-align: top; width: 190px; min-height: 150px; border: 1px solid #aaaaaa; text-align: center; padding: 0px 5px; margin: 0px 10px 10px 0px;}
.shops_list .shop .name {padding: 5px 2px; word-wrap: break-word;}
.shops_list .shop .name h2 {font-size: 1.2rem;}
.shops_list .shop .button {padding: 5px 2px;}
.shops_list .shop .button a {color: blue;}
.shops_list .shop .button a:after {content: ' \000BB'}

.products .shops {clear: both; padding: 5px 10px; margin-bottom: 10px; }
.products .shops .left {text-align: left;}
.products .shops .left .warning {color: red;}
.products .shops .right {text-align: right;}
.products .shops .left, .products .shops .right { display: inline-block; vertical-align: top; width: calc(50% - 5px);}
.products .shops .button-shops {border: 1px solid #cccccc; padding: 2px 5px; background-color: lightgoldenrodyellow; color:black;cursor: pointer;}
.products .shops .list-shops { border: 1px solid #cccccc; padding: 5px; margin-top: 10px;}
.products .shops .list-shops .item-shop {display: inline-block; vertical-align: top; border: 1px solid #aaaaaa; padding: 2px 5px; margin: 0px 5px 5px 0px;}
.products .shops .list-shops .item-shop .checkbox {cursor: pointer; border: 1px solid #aaaaaa; width: 15px; height: 20px; display: inline-block; vertical-align: top; margin-left: 5px; background-color: #e0e0ff; }
.products .shops .list-shops .item-shop .checkbox.checked {background-color: yellowgreen;}
.products .shops .list-shops .item-shop .checkbox.checked:after {content: 'V'; padding: 0px 0px 2px 2px; color: black;}
.products .shops .list-shops .button-save {border: 1px solid #cccccc; padding: 2px 5px; background-color: lightgoldenrodyellow; color:black;cursor: pointer; display: inline-block; margin-top: 10px; background-color: yellowgreen; color: black;}

.products .order { display: inline-block; vertical-align: top;}
.products .order select {font-size: 1rem; padding: 2px 5px; margin: 10px 10px 10px 10px;}
.products .list {text-align: left; clear: both; margin-left: 10px; margin-right: -5px;}
.products .list .item {width: calc(33% - 15px); display: inline-block;vertical-align: top; text-align: center; border: 1px solid #c0c0c0; background-color: white; margin: 0px 10px 10px 0px; padding-bottom: 10px; }
.products .list .item .title {font-size: 1rem; height: 38px; border-bottom: 1px solid #c0c0c0; overflow: hidden;background-color: #b0e0f0; padding: 5px;}
.products .list .item .image {display: inline-block; vertical-align: top; width: 180px; height: 150px; padding: 5px; margin-top: 5px;}
.products .list .item .image .property {align-items: center; display: flex;height: 100%;justify-content: center;}
.products .list .item .image .property img {max-width: 100%; max-height: 100%;}
.products .list .item .buy {display: inline-block; vertical-align: top; width: 95px; padding-top: 15px; overflow: hidden;}
.products .list .item .buy .price {font-weight: bold; color: brown;}
.products .list .item .buy .redirect, .product .redirect {display: block; background-color: #009f00; color: white;margin-top: 15px; padding: 5px; border-radius: 5px;font-weight: bold;}
.products .list .item .buy .more {display: block; margin-top: 15px; font-size: 0.9rem; text-align: right; margin-bottom: 10px}
.products .list .item .buy .shop {font-size: 0.66rem; display: block; font-weight: normal; color: #40a040; font-style: italic;}

.products .list .item.lite {background-color: #f0f0f0;}
.products .list .item.lite .title {background-color: #e0e0e0;}
.products .list .item.lite .image {}
.products .list .item.lite .shop {color: grey;}
.products .list .item .information {font-size: 0.75rem; line-height: 18px; min-height: 60px;padding: 5px 10px 0px 10px; margin-top: 5px; text-align: left;}
.products .list .item .information.full {border-top: 1px solid #ddd; margin-top: 4px; color: #222; overflow: hidden;}
.products .list .item .information.full.extra {text-align: center; font-size: 0.85rem; padding-top: 10px; min-height: 20px;}

.product .header {display: flex;}
.product .header .details .brand {padding: 20px 0px 10px 0px;}
.product .header .details .brand:before {content: 'Marka produktu: ';font-size: 1rem;}
.product .header .details .brand .title {font-size: 1.5rem;}
.product .header .image { width: 66%; text-align: center;}
.product .header .image img {max-width: 100%; max-height: 100%;}
.product .header .details { width: 33%; padding: 20px 30px;}
.product .header .details .buy .price { margin: 10px 0px; font-size: 2rem; }
.product .header .details .buy a {display: inline-block; vertical-align: top; padding: 5px 20px; margin-top: 0px;}
.product .description {clear: both;display: block; line-height: 25px; font-size: 0.9rem; border-top: 1px dashed #a0a0a0; margin: 20px 0px; padding: 10px;}
.product .description br {content:'';height: 7px; display: block;}
.product .description .empty {margin-top: 20px;margin-bottom: 20px;}
.product .description .empty span {display: inline-block; vertical-align: top; margin-top: 5px;}
.product .description .empty .redirect {display: inline-block;vertical-align: top; padding: 2px 20px; margin-top: 5px; margin-left: 5px;}

.products-categories .list .category {border: 1px solid #c0c0c0; background-color: white; margin: 0px 10px 10px 0px;  padding-bottom: 10px;}
.products-categories .list .category h2 {border-bottom: 1px solid #c0c0c0;background-color: #f8f8f8; padding: 5px 20px;}
.products-categories .list .category .gallery {display: flex;}
.products-categories .list .category .gallery .image {display: inline-block; vertical-align: top; width: 24%; text-align: center; padding: 20px;}
.products-categories .list .category .gallery .image img {max-width: 100%; max-height: 100%;}

.description {padding: 10px 10px; line-height: 20px; margin-bottom: 5px; font-size: 0.9rem; background-color: #f8f8f8; border: 1px solid #ccc;}

#footer {text-align: center; min-height: 200px; clear: both; background-color: #e0e0e0;}
#footer .box {display: inline-block; width: 270px; margin-top: 20px; margin-left: 10px; margin-right: 10px; vertical-align: top; text-align: left;}
#footer .box .title {font-size: 1.1rem;}
#footer .box .links { padding: 0px; margin: 5px auto 0px auto;}
#footer .box .links li {text-align: left; font-size: 0.9rem; padding: 5px 0px 5px 0px; list-style-type: none;}

.page-static {padding: 10px 0px; font-size: 0.9rem;}                                                                                                                                         
.page-static p {padding: 10px 10px;}                                                                                                                                                         
.page-static h2, .page-static h3,.page-static h4, .page-static h5 {padding: 10px 10px;}  
.page-title {margin: 0px 0px 20px 0px;}

form .errors {min-width: 275px; width: 40%;}                                                                                                                                                 
form .form-line {padding: 5px 0px;}                                                                                                                                                          
form .form-line input[type=text]{}                                                                                                                                                           
form .form-line textarea {min-height: 250px;}                                                                                                                                                
form .form-line input[type=text], form .form-line textarea {padding: 5px 10px; min-width: 275px;font-family: inherit; width: 40%; border: 1px solid #60c0ff; background-color: #f0f0ff;} 

.verify #code, .verify input { display: inline-block; min-width: 20px; max-width: 100px; padding: 2px 2px; margin: 2px 2px;}                                                                 
.verify .space {color: white;}                                                                                                                                                               
.verify .font {display: inline-block;vertical-align: top;}                                                                                                                                   
.verify .font-0 {padding-top: 4px;}                                                                                                                                                          
.verify .font-1 {padding-bottom: 2px; color: red;}                                                                                                                                           
.verify .font-2 {color: green;}                                                                                                                                                              
.verify .font-3 {padding-top: 4px;color: darkorchid;}                                                                                                                                        
.verify .font-4 {color: blue;}         

@media all and (max-width: 1200px) {
    .products .list .item {width: calc(50% - 20px);}
}

@media all and (max-width: 960px) {
    .products .list .item {width: calc(100% - 20px);}
    .products-categories .list .category .gallery .image {width: 33%;}
    .products-categories .list .category .gallery .image:nth-child(4) {display: none;}
}


@media all and (max-width: 640px) {
    .paginator {text-align: center; display: block; float: none;}
    .product .header {display: block;}
    .product .header .details, .product .header .image {width: inherit;}
    #container .middle .sidebar-left {width: 100%;}
    #container .middle .sidebar-left .mobile_only {}
    .hamburger {border: 1px solid #e0e0e0; background-color: #f0f0f0; margin: 10px 10px -10px 10px; }
    .hamburger:after {content: '='; font-size: 3rem; cursor: pointer; padding: 0px 15px;}
    .hamburger.open {background-color: #808080; color: white;}
    #container .middle .main {width: calc(100% - 20px); display: block; text-align: left;float: none;}
    .shops_list .shop {min-width: 200px; margin: 0px auto 10px auto; display: block;}
    .products-categories .list .category .gallery .image {width: 45%;}
    .products-categories .list .category .gallery .image:nth-child(3) {display: none;}
    #container .middle .main.fullscreen {display: block;padding: 10px 5px;}
    #container .middle .main.fullscreen .box {width: inherit;}
    #footer {height: auto; padding-bottom: 20px;}
    #footer .box .links li {margin-top: 10px; margin-bottom: 0px; margin-left: 20px; list-style-type: disc;}
    .menu.mobilator {z-index: 1000; width: calc(100% - 30px);margin: 20px 4px 10px 4px !important; padding: 20px 10px 20px 10px !important;position: absolute; display: block; border: 1px solid #a0a0a0; background-color: #d0e0f0;float: inherit;text-align: inherit;}
    
    .products .list {margin-left: 0px; margin-right: 0px;}
    .products .list .item {width: 100%; margin: 0px 0px 10px 0px;}
    .products .list .item .image {width: auto; height: auto;}
    .products .list .item .information.full {text-align: center; font-size: 0.85rem; line-height: 20px; margin-top: 20px}
}