@font-face {
    font-family: 'Gotham Pro';
    src: url('../fonts/Room.eot') format('eot'), url('../fonts/Room.woff') format('woff'), url('../fonts/Room.ttf') format('truetype'), url('../fonts/Room.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
*, html, body {padding: 0; margin: 0; box-sizing: border-box; list-style: none; text-decoration: none; font-family: 'room', sans-serif; text-transform: none; outline: none; border:none; font-weight: normal; color: #2e3131}
/*wrappers - common styles*/
.wrap {width: 1024px; margin: 0 auto; height: auto}
.filtersWrap {padding: 20px 70px 0 70px; margin-top:20px}
.mainWrap {padding: 20px 70px 0}
.popUpWrap {width: 100%; height: 100vh; background: rgba(0,0,0,.5);  position: fixed; left: 0; top: 0; z-index: 500}
.loginForm, .cartWrap, .mdoWrap, .adminGroupsWrap, .orderPopUp, .clientsHistory, .showCarsForItem {display: none;}

/*header styles*/
header {width: 100%;}
.header-firstPart {width: 100%; background: #2e3131; }
.header-firstPart .wrap {padding: 15px 10px; display: flex; justify-content: space-between; align-items: center}
.header-address, .header-phones {width: 32%; display: flex; align-items: center}
.header-address img, .header-phones img {width: 25px}

.header-address .address_link{color: #fff; font-size: 12px; margin-left: 20px;}

.header-address p, .header-phones p {font-size: 12px; color: #fff; margin-left: 20px }
.header-phones {width: 22%; position: relative}
.header-phones-openSpoiler {transition: .3s; display: block; background: transparent; width: 0; height: 0; border: 5px solid transparent; border-top: 5px solid #fff; margin-left: 20px}
.header-phones-openSpoiler:hover {border-top-color: #0ba360}
/* .header-phones-spoiler {width: 330px; position: absolute; display: none; left: 15px; top: -20px; background: #ececec; padding: 20px 20px 5px; border-radius: 10px; z-index: 100} */
.header-phones-spoiler {width: 300px; position: absolute; display: none; left: -50px; top: 40px; background: #ececec; padding: 20px 20px 5px; border-radius: 10px; z-index: 100}

.header-phones-spoiler ul li {display: flex; justify-content: flex-start; align-items: center}
.header-phones-spoiler p {font-size: 14px; color: #2e3131; text-transform: uppercase; margin: 2px 5px }
.header-phones-closeSpoiler {transition: .3s; display: block; background: transparent; width: 0; height: 0; border: 5px solid transparent; border-bottom: 5px solid #2e3131; margin: 5px auto}
.header-phones-closeSpoiler:hover {border-bottom-color: #0ba360}
.header-nav {width: 18%}
.header-nav img {display: none}
.header-nav ul {width: 100%; display: flex; justify-content: space-between; align-items: center}
.header-nav ul li a {color: #fff; font-size: 14px; transition: .5s}
.header-nav ul li:hover a {color: #0ba360}
.mobile-closeNav {display: none}
.header-connectBtn {display: inline-block; float:right; color: #fff; background: #0ba360; padding: 10px; font-size: 14px; border-radius: 10px; transition: .3s; text-wrap: wrap}
.header-connectBtn:hover {color: #0ba360; background: #fff}
.header-secondPart {width: 100%; background: #fff}
.header-secondPart .wrap {padding: 20px 10px; display: flex; justify-content: space-between; align-items: center}
.header-logo {width: 20%}
.header-logo img {width: 100%}
.header-searchBar {width: 41%; position: relative; left: -38px;margin-left: 5%;}
.header-searchBar-input {width: 100%; border: 2px solid #0ba360; padding: 15px 20px; border-radius: 10px; font-size: 14px; color: #2e3131; background: #fff;margin-top: 33px;}
input.header-open-input.header-searchBar-input {
    border-radius: 10px 10px 0 0;
}
.header-searchBar-input::placeholder {color: #bcbcbc; opacity: 0; transition: opacity 0.3s ease;}
.header-searchBar-input::-webkit-input-placeholder       {color: #bcbcbc; opacity: 1; transition: opacity 0.3s ease;}
.header-searchBar-input::-moz-placeholder                {color: #bcbcbc; opacity: 1; transition: opacity 0.3s ease;}
.header-searchBar-input:-moz-placeholder                 {color: #bcbcbc; opacity: 1; transition: opacity 0.3s ease;}
.header-searchBar-input:-ms-input-placeholder            {color: #bcbcbc; opacity: 1; transition: opacity 0.3s ease;}
.header-searchBar-input:focus::-webkit-input-placeholder {color: #bcbcbc; opacity: 0; transition: opacity 0.3s ease;}
.header-searchBar-input:focus::-moz-placeholder          {color: #bcbcbc; opacity: 0; transition: opacity 0.3s ease;}
.header-searchBar-input:focus:-moz-placeholder           {color: #bcbcbc; opacity: 0; transition: opacity 0.3s ease;}
.header-searchBar-input:focus:-ms-input-placeholder      {color: #bcbcbc; opacity: 0; transition: opacity 0.3s ease;}

.header-searchBar-button {position: absolute; width: 49px; height: 49px; background: url('../img/icons/018-Search.png') no-repeat center #0ba360; background-size: 18px 18px; border-radius: 10px; top:0; right: 0; border: none; cursor: pointer; transition: .3s; margin-top: 33px;margin-left: 5%;}
.header-searchBar-button:hover {background-color: #2c7744}
.header-logIn {width: 10%; display: flex; align-items: center; cursor:pointer; position: relative; transition: .3s; margin-right: 10px; margin-top: 33px;}
.header-logIn p {margin-right: 10px; font-size: 14px; text-align: right; color: #2e3131; transition: .2s }
/*.header-logIn p:hover {font-size: 15px; transition: .2s}*/
.header-logIn p span {display: block; width: 100%;}

.header-logIn-button {transition: .3s; display: block; width: 40px; height:40px; background: url('../img/icons/012-Login.png') no-repeat center; background-size: 100%; }

/*.shoppingCart-button {background-image: url('../img/icons/015-Shopping_cart.png')}*/
.shoppingCart-button-img {background-image: url('../img/icons/015-Shopping_cart.png')}
.header-logIn:hover {transform: scale(1.1); transition: .3s;}



/*banner */
.banner {width: 100%; height: 350px; background: url('../img/banner.jpg') no-repeat center; background-size: cover }
/*.banner img {width: 100%}*/
.mobileSpoiler {display: none}

/*filters section styles*/
.filters {width: 100%; position: relative; background: #0ba360; display: flex; flex-direction: column; border-radius: 10px; margin-top: -20px}
.filters-navTabs {width: 100%; display: flex;}
.filters-navTabs-item {flex-grow: 1; }
.filters-navTabs-item a {width: 100%; display: flex; justify-content: center; align-items: center; border: 2px solid #0ba360; background: #fff; color: #0ba360; padding: 10px; }
.filters-navTabs-item:first-child a {border-radius: 10px 0 0 0}
.filters-navTabs li:last-child a {border-radius: 0 10px 0 0}
.filters-navTabs-icon {width: 25px; height: 30px; margin-right: 20px; background-image: url('../img/icons/filter-sprite.png')  }
.filters-navTabs-icon.icon-car {background-position: 0px 25px}
.filters-navTabs-icon.icon-number {background-position: 63px 28px}
.filters-navTabs-icon.icon-vinCode {background-position: 25px 30px}
.filters-navTabs-item.active a {background: #0ba360;}
.filters-navTabs-item.active a p {color: #fff;}
.filters-navTabs-item.active .filters-navTabs-icon {background-position-y: 0px;}
.filters-sections {padding: 20px 40px; width:95%; margin: 0 auto;}
.filters-sections-section1 {width: 100%; display: none; justify-content: space-between; align-items: center; -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none; cursor: pointer}
.filters-sections-section1.active {display: flex}
.filters-sections-section1-item {position: relative; z-index: 100; width: 165px; height: auto; padding: 15px 10px; background: #fff; border-radius: 10px; position: relative; display: flex; justify-content: space-between; align-items: center;}
.filters-sections-section1-item img {height: 15px;}
.filterName {font-size: 14px; color: #2e3131}
.filterOpenList {display: block; background: transparent; width: 0; height: 0; border: 5px solid transparent; border-top: 5px solid #2e3131; margin-left: 20px}
.filter-notActive {position: absolute; z-index: 10; width: 100%; height: 100%; top: 0; left: 0; border-radius: 10px; background: #bcbcbc; opacity: .6}
.filters-sections-section1-button {margin-left: 23px; display: block; background: url('../img/icons/018-Search.png') no-repeat center #2c7744; background-size: 20px 20px; width: 40px; height: 40px; border-radius: 10px}
.filters-sections-input {width: 90%; padding: 15px 10px 15px 22px;; background: #fff; border-radius: 10px; border: none; font-size: 14px; color: #2e3131 }
.filter-spoilerWrap {position: absolute; display: none; width: 165px; height: 160px; background: #ececec; padding: 30px 5px 15px 20px; left: 0; top: 35px; z-index: 50; border-radius: 0 0 10px 10px }
.filter-spoilerWrap::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 10px; border-radius: 0 0 10px 10px; background: #fff}
.filter-spoilerWrap ul li {display: flex; justify-content: space-between; align-items: center; margin: 3px 0; cursor: pointer;
    font-size: 15px;
    padding: 10px;
    border: 1px solid #2e3131;
    border-radius: 15px;}
.filter-spoilerWrap ul li a {color: #2e3131}
.filter-spoilerWrap ul li img {display: none}
.filter-spoilerWrap ul li:hover img {display: block}
.filters-mobileNavtab {display: none}
.filters-fullScreenNavtab {display: block}

.search-list {
    padding: 20px 0;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    border-radius: 0 0 10px 10px;
    border: 2px solid #0ba360;
    border-top: 0;
	z-index: 1000;
    background-color: white;
    max-height: 300px;
    overflow: auto;
    display: none;
}

.search-list__link-wrapper{
    margin: 5px 0;
}

/*main sections heading styles*/
.mainH2 {display: flex; flex-direction: column; align-items: center; margin-bottom: 15px;}
.mainH2-topLine {width: 100px; height: 2px; background: #0ba360}
.mainH2-bottomLine {width: 120px; height: 2px; background: #0ba360}
.mainH2-h2 {font-size: 19px; padding: 10px 0; color: #2e3131}

/*carsSection carousel styles*/
.carsSection, .latest {width: 100%}
.carsSection-carouselWrap {width: 100%; height: 100px; overflow: hidden; position: relative; margin: 20px 0}
.carsSection-carousel {display: flex; align-items: center; position: absolute; left: -100px; top: 0}
.carsSection-carousel li {margin: 0 10px;}
.carsSection-carousel-item {display: flex; justify-content: center; align-items: center; width: 120px; height: 100px; transition: .3s}
.carsSection-carousel-item img {max-width: 100%}
.carsSection-carouselControls {display: block; position: absolute; width: 40px; height: 100px; }
.carsSection-carouselControls:hover .prev-arrow,.carsSection-carouselControls:hover .next-arrow {transform: scale(1.2)}
.carsSection-carouselControls.prev {background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0)); background: -ms-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0));background: -moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0)); left:0; top:0; }
.carsSection-carouselControls.next {background: -webkit-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));background: -ms-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));background: -moz-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0)); right: 0; top:0; }
.prev-arrow {width: 0; height: 0; border: 10px solid transparent; border-right: 10px solid #2e3131; position: absolute; left: -10px; top:0; bottom:0; margin: auto; transition: .3s}
.next-arrow {width: 0; height: 0; border: 10px solid transparent; border-left: 10px solid #2e3131; position: absolute; right: -10px; top:0; bottom:0; margin: auto; transition: .3s}
.carsSection-carousel-item:hover {transform: scale(1.2)}
/*categories styles*/
.categories {width: 100%; height: auto; background: #ececec; padding: 20px 40px; margin-bottom:20px; border-radius: 10px;}
.categories-wrapCont {width: 100%; height:360px; overflow: hidden;}
.categories-container {width: 100%; height: auto; align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: space-between; }
.category-item {width: 130px; display: inline-block; margin-top: 15px;}
.category-item:hover .category-item-icon { border-bottom: 3px solid #0ba360}
/*.category-item {width: 130px; display: flex; flex-direction: column; align-items: center; margin-top: 15px }*/
.category-item-icon {border-bottom: 3px solid transparent; width: 100%; background: #fff; border-radius: 10px; padding: 20px 25px; transition: .3s; cursor: pointer}
.category-item-icon img {width: 100%;}
.category-item-text {text-align: center; font-size: 14px; margin-top: 8px; text-transform: capitalize;}

/*latest carousel styles*/
.latest-carouselWrap {width: 100%; height: 190px; overflow: hidden; position: relative; margin: 20px 0}
.latest-carousel {display: flex; align-items: center; position: absolute; left: -100px; top: 0}
.latest-carousel-item {overflow: hidden;width: 150px; border: 1px solid rgba(0,0,0,.3); border-radius: 10px; display: flex; flex-direction: column; align-items: center; margin: 0 10px}
.latest-goods-card {width: 100%; height: 150px; border: 2px solid #ececec; border-radius: 10px; position: relative}
.latest-goods-card img {width: 100%}
.latest-carousel-item a {display:block; position:relative; transition: .8s; width: 100%; left:0; bottom: 0; padding: 10px 0; background: #0ba360; color: #fff; font-size: 14px; text-align: center; border-radius: 0px 0px 10px 10px; border: 2px solid #0ba360;}
.latest-carousel-item:hover a {background: #fff;border: 2px solid #0ba360; color: #0ba360; padding: 10px 0;}
.latest-carousel-goods-name {font-size: 14px; padding: 7px 0; text-align: center; color: rgba(0,0,0,.7);}
.latest-carousel-goods-number {padding: 7px 0; text-align: center; width: 98%; border-top: 1px solid rgba(0,0,0,.3); border-bottom: 1px solid rgba(0,0,0,.3); color: #0ba360}
.carousel-name2{font-weight:600; padding: 0px 0 7px 0;}
.latest-carousel-goods-number::before {content: '#'}
.latest-carousel-goods-price { color: #0ba360; font-size: 18px; padding: 7px 0 }
.latest-carouselControls {background: #fff; display: block; position: absolute; width: 40px; height: 190px;}
.latest-carouselControls.prev {left:0; top:0; }
.latest-carouselControls.next {right: 0; top:0; }

/*text section styles*/
.textSection {padding: 40px 0;}
.mainText {font-size: 14px;}
.extraText {margin-top: 25px; font-size: 13px; line-height: 20px; text-align:justify}

/*footer styles*/
footer {width: 100%; background: #2e3131;}
footer .wrap {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding: 20px 10px 0;}
.footer-infoBlock {width: 60%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;}
.footer-infoBlock-item {display: flex; margin-bottom: 15px}
.footer-infoBlock-item img {width: 25px; height: 25px; margin-right: 15px; margin-top: 12px;}
.footer-infoBlock-item p {color: #ffffff; font-size: 12px; margin-bottom: 5px}
.footer-navCont {width: 30%}
.footer-navCategories  {width: 60%; }
.footer-navPages {text-align: none; margin-top: 2%;} /*nikita*/
.footer-navCategories ul li a, .footer-navPages ul li a {transition: .3s; color: #fff; font-size: 14px}
.footer-navPages ul{display: block; float: left;}
.footer-finalBlock {width: 100%; margin-top: 15px; border-top: 2px solid #0ba360; padding: 30px 0 20px 0; display: flex; justify-content: space-between; align-items: center }
.footer-finalBlock p {text-align: center; width: 100%; color: #fff; font-size: 14px;}
.hwsoft {color: #fff;}
.footer-navCategories ul li:hover a, .footer-navPages ul li:hover a {color: #0ba360}

/*popup styles*/

/*login*/
.loginForm-block {max-width: 340px; display: flex; margin: 50px auto; background: #0ba360; flex-direction: column; border-radius: 10px; }
.loginForm-block-navTabs {width: 100%; display: flex;}
.loginForm-block-navTabs-item {flex-grow: 1; }
.loginForm-block-navTabs-item a {width: 100%; display: flex; justify-content: center; align-items: center; border: 2px solid #0ba360; background: #fff; color: #0ba360; padding: 10px; }
.loginForm-block-navTabs-item:first-child a {border-radius: 10px 0 0 0}
.loginForm-block-navTabs-item:last-child a {border-radius: 0 10px 0 0}
.loginForm-block-navTabs-item.active a {background: #0ba360;}
.loginForm-block-navTabs-item.active a p {color: #fff;}
.loginForm-block-navTabs-icon {width: 30px; height: 30px; margin-right: 20px; background-image: url('../img/icons/login-sprite.png')  }
.icon-login {background-position: 0px -30px}
.loginForm-block-navTabs-item.active .icon-login {background-position: 0px 0px}
.icon-reg {background-position: -27px -28px}
.loginForm-block-navTabs-item.active .icon-reg {background-position: -30px 0px}
.loginForm-block-section {padding: 40px; display: none}
.loginForm-block-section.active {display: block}
.loginForm-form {width: 100%; display: flex; flex-direction: column }
.loginForm-input {padding: 15px 20px; background: #fff; border-radius: 10px; font-size: 14px; border: none; margin-bottom: 10px}
.loginForm-input:last-of-type {margin-bottom: 20px}
.loginForm-form button {width: 100%; padding: 15px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: none; margin-bottom: 10px}
.loginForm-form button img {width: 20px; height: 20px; margin-left: 15px}
.loginForm-form button:last-child {padding: 12px}
.loginButton {background: #2c7744; color: #fff}
.googleLoginButton {background: #ececec}

/*cart*/
.cart, .adminGroups, .clientsHistory-cont {position: relative; padding: 25px 40px; background: #fff; border-radius: 10px; max-width: 700px; margin: 25px auto;}
.cart h4, .clientsHistory-cont h4 {font-size: 18px}
.closeCart, .closeGroups, .closeClientsHistory, .showCarsForItem-closeBtn {padding: 3px; position: absolute; right: 40px; top: 25px; width:15px; height: 15px; border: 1px solid #c0392b; border-radius: 50%; background: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer }
.deleteItemFromCart {align-self: flex-start; padding: 3px; width:15px; height: 15px; border: 1px solid #c0392b; border-radius: 50%; background: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer}
.closeCart svg, .deleteItemFromCart svg, .closeGroups svg, .closeClientsHistory svg, .showCarsForItem-closeBtn svg {width: 7px; height: 7px;}
.closeCart svg line, .deleteItemFromCart svg line, .closeGroups svg line, .closeClientsHistory svg line, .showCarsForItem-closeBtn svg line {stroke: #c0392b}
.cart-empty {width: 100%; display: flex; justify-content: center; align-items: center; }
.cart-empty img {width: 40px; height: 40px}
.cart-empty p {font-size: 18px; color: #0ba360; margin-left: 20px}
.cart-notEmpty {width: 100%; display: flex; flex-direction: column;}
.cart-columns {width: 100%; display: flex; flex-direction: row; align-items: center;  margin-top: 20px}
.cart-columns p {color: #95a5a6; font-size: 12px;}
.cart-columns p:first-child {width: 21%; padding-left: 30px;}
.cart-columns p:nth-child(2) {width: 45%}
.cart-columns p:nth-child(3) {width: 20%}
.cart-columns p:nth-child(4) {width: 12%}
.cartItemsList {width: 100%;}
.cartItemsList li {position: relative; width: 100%; padding: 20px 0; display: flex; justify-content: space-between; align-items: center}
.cartItemsList li::after {content: ''; display: block; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; background: url('../img/divider.png') repeat-x; }
.cartItemsList li:last-child {border-bottom: 2px solid #0ba360}
.cartItemsList li:last-child::after {display: none}
.cartItemsList li img {width: 16%}
.cartItemDescr {width: 45%;}
.cartItemDescr p:first-child {font-size: 14px;}
.cartItemDescr p:nth-child(2) {font-size: 14px; color: #0ba360; margin-bottom: 30px}
.cartItemDescr span {color: #0ba360;
    font-weight: 600;
    font-size: 16px;}
.cartItemsQuantity {width: 100%; display: flex; align-items: center}
.cartItemsQuantity a {font-size: 30px;}
.cartItemsQuantity span {width: 40px; height: 40px; text-align: center; line-height: 40px; margin: 0 10px; border: 2px solid #0ba360; border-radius: 10px; }
.cartItemTotal {width: 12%; font-size: 20px;}
.cartTotal {margin-top: 20px;}
.cartTotal p {text-align: right; font-size: 20px;
    font-weight: 600;}
.cartTotal p:first-child {color: #95a5a6; font-size: 12px}
.cartTotal-buttons {width: 100%; display: flex; justify-content: flex-end; margin-top: 20px }
.cartTotal-buttons a {font-size: 15px;transition: .3s; padding: 15px; margin-left: 20px; border: 1px solid #ececec; border-radius: 10px;}
.continueShop {background: #ececec;}
.continueShop:hover {color: #ececec; background: #2e3131}
.gotoCheckout {background: #0ba360; border-color: #0ba360; color: #fff}
.gotoCheckout:hover {background: #fff; color: #0ba360}

/*admin orders*/
.changeOrderStatus {position: relative; top: 35vh; padding: 25px 40px; background: #fff; border-radius: 10px; max-width: 800px; margin: 25px auto; height: fit-content;}
.adminOrders-orderDetails.popUp {width: 600px}
.orderPopUp-text {text-align: center; margin-bottom: 20px}
.orderPopUp-orderID {color: #c0392b}

.clientsHistory-cont h4 {text-decoration: underline; margin-bottom: 5px}
.clientHistory-item {width: 100%; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #2e3131; padding-bottom: 5px}
.clientHistory-item-col1 {width: 20%}
.clientHistory-item-col2 {width: 78%}
.clientHistory-item-details {width: 100%; display: flex}
.orderDetails-col1 {width: 15%}
.orderDetails-col2 {width: 50%}

/*show cars in good list*/
.showCarsForItem-inner {width: 80%; margin: 20px auto; background: #fff; padding: 50px 25px 25px 25px; border-radius: 10px; border: 1px solid #2e3131; position: relative}
.showCarsForItem-list {height: calc(100vh - 150px); overflow-y: auto}
.showCarsForItem-listItem {width: 100%; display: flex; border-bottom: 1px solid #2e3131; justify-content: space-between; align-items: center}
.showCarsForItem-listItem p {width: 22%}

/*on category page*/
.pageCategories.filters {position: static; border-radius: 0px 0px 10px 10px; margin-top: 0 }

.pageCategories-main {background: #ececec; border-radius: 10px; padding: 20px 40px; margin-bottom: 20px; margin-top: 20px; display: flex; flex-direction: column }
.pageCategories-main-head {width: 100%; padding-bottom: 20px; border-bottom: 1px solid #0ba360; display: flex;}
.pageCategories-main-head p {color: #0ba360; font-size: 14px}
.pageCategories-main-head-groups {width: 23%}
.pageCategories-main-head-name {width: 46%}
.pageCategories-main-head-price {width: 14%}
.pageCategories-main-head-isAvailable {width: 17%}
.pageCategories-main-content {width: 100%; display: flex; justify-content: space-between;}
.pageCategories-leftSidebar {width: 23%;}
.pageCategories-leftSidebar ul li {margin: 15px 0}
.pageCategories-leftSidebar ul li a {font-size: 14px; text-transform:capitalize;}
.pageCategories-leftSidebar ul li>a.active {width: 84%; border-bottom: 1px solid #0ba360; font-weight: 600; font-size: 17px}
.pageCategories-leftSidebar ul li:hover>a {border-bottom: 1px solid #0ba360}
.pageCategories-itemsSection {width: 75%; display: flex; flex-direction: column}
.pageCategories-itemsSection-item {position: relative; border-bottom: 4px solid transparent; transition: .3s; width: 100%; margin-top: 20px; padding: 10px; background: #fff; border-radius: 10px; display: flex; align-items: center}
.pageCategories-itemsSection-item img {width: 18%;}
.pageCategories-itemsSection-item-text {width: 40%; padding-left: 30px; display: flex; flex-direction: column}
.pageCategories-itemsSection-item-text p {font-size: 13px}
.pageCategories-goodUnderline {width: 50%; height: 1px; margin: 5px 0; background: #0ba360; }
.pageCategories-goodCode {color: #0ba360; margin-bottom: 10px}
.pageCategories-goodPrice {width: 18%; color: #0ba360; font-size: 19px;}
.pageCategories-itemsSection-item button {width: 19%; text-align: center; padding: 10px; font-size: 12px}
.pageCategories-goodIsAvailable {background: #0ba360; color: #fff; border-radius: 10px;}
.pageCategories-goodIsNotAvailable {background: #ececec; color: #95a5a6; border-radius: 10px;}
.pageCategories-itemsSection-item:hover {border-bottom: 4px solid #0ba360}
.pageCategories-goToProduct {display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0;}

.pageCategories-itemsSection-pagination {width: 100%; margin-top: 20px }
.pageCategories-itemsSection-pagination ul {width: 100%; display: flex; justify-content: flex-start; align-items: center}
.pageCategories-itemsSection-pagination ul li a {position: relative; transition: .3s; display: block; padding: 15px 20px; margin-right: 10px; border-radius: 10px; background: #0ba360; color: #fff; font-size: 14px}
.pageCategories-itemsSection-pagination ul li:hover a {background: #2c7744}
.pageCategories-pagin-nextPage {padding-right: 40px!important;}
.pageCategories-pagin-nextPage::after {content: ''; position: absolute; display: block; width: 15px; height: 15px; right: 10px; top: 15px; background: url("../img/icons/028-Next.png") no-repeat center; background-size: contain}
.pageCategories-pagin-lastPage img {width: 14px; height: 12px}
.pageCategories-mobileList {display: none}

.categories-listGroups {display: none; padding-left: 10px; font-size: 13px!important; text-decoration: none}
.pageCategories-leftSidebar ul li>a.active~.categories-listGroups {margin: -6px 0px 21px 0px;display: block}
.mini-link {font-size:13px!important;}
/*on category page*/


/*product page*/
.productPage {background: #fff; border-radius: 10px; padding: 20px;}
.productMain {width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start}
.productMain img, .productMain-info {width: 48%;}
.productMain-info {display: flex; flex-direction: column;}
.productMain-infoName {
	font-weight: 600;
    font-size: 21px;}
.productMain-line {width: 100%; height: 1px; background: #0ba360; margin: 20px 0;}
.productMain-infoInfo {font-size: 17px; padding: 5px 0}
.productMain-infoInfo span {color: #0ba360}
.productMain-infoInfo.available span {padding: 10px 0px; border-radius: 10px;}
.productMain-infoInfo.available {padding: 10px 0}
.product-availableItem {margin-left: 0px; }
.product-unAvailableItem {margin-left: 5px; background: #95a5a6; color: #2e3131!important;}
.productDescr {width: 100%; font-size: 14px; text-align: justify; height: 50px; overflow: hidden;}
.admin-button.disabledBtn {background: #95a5a6; color: #2e3131; border: none}
.admin-button.disabledBtn:hover {background: #95a5a6; color: #2e3131}
.admin-logOut{width:80px!important; text-align:center; min-width: 80px;}
.buy-button{    display: flex;
    justify-content: center;
    padding-top: 10px;
    width: 40px;
    height: 40px;
    background: url('../img/icons/015-Shopping_cart-white.png') no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    background-size: 9%;
}
.product-others {width: 100%; display: flex; flex-direction: row; justify-content: left; align-items: center; flex-wrap: wrap}
.product-others h5 {width: 100%; font-size: 16px; margin-bottom: 10px}

.mdoWrap {justify-content: center; align-items: center}
.mdoText {width: 300px; padding: 60px 25px; background: #fff; border-radius: 10px; border: 1px solid #2c7744; }

/*checkout page*/
.checkout-cart {width: 100%; margin: 20px 0}
.checkout-cartHeader, .checkout-cartItem {width: 100%; display: grid; grid-template-columns: 2fr repeat(3, 1fr);}
.checkout-headingItem, .checkout-headingDescr, .checkout-totalText {color: #95a5a6; font-size: 12px;}
.checkout-headingDescr {padding-left: 20px}
.checkout-headingItem, .checkout-cartInfo {text-align: center; border-left: 2px solid #0ba360}
.checkout-cartItem div {padding-top: 10px}
.checkout-cartItem div:nth-child(2n) {color: #0ba360}
.checkout-total {width: 100%; display: flex; flex-direction: column; align-items: flex-end}
.checkout-form {width: 100%; padding: 20px 0; border-top: 2px solid #0ba360; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap}
.checkout-inputGroup, textarea {width: 49%}
textarea {resize: none}
.checkout-form input {width: 100%}
.checkout-form input, textarea {padding: 10px 20px; border: 2px solid #0ba360; border-radius: 10px }
.checkout-inputMargin {margin: 20px 0}
.checkout-deliverySelf, .checkout-deliveryNp {width: 49%; margin-top: 20px; padding: 0 35px; position: relative}
.checkout-radio {width: 20px; height: 20px; position: absolute; left: 0; top: 0;}
.checkout-radioItem {position: absolute; display: none}
.checkout-radioLabel {transition: .3s; position: absolute; width: 20px; height: 20px; left: 0; top: 0; border: 3px solid #2e3131; border-radius: 50%}
.checkout-radioLabel:before {content: ''; display: none; position: absolute; width: 8px; height: 8px; background: #0ba360; border-radius: 50%; left: 0; right: 0;  top:0; bottom: 0; margin: auto}
.checkout-radioItem:checked~.checkout-radioLabel {border-color: #0ba360}
.checkout-radioItem:checked~.checkout-radioLabel:before {display: block}
.checkout-deliverySelf p, .checkout-deliveryNp p {margin-bottom: 20px}
.checkout-submitCont {width: 100%; display: flex; justify-content: center; margin-top: 20px}






/*checkout page*/

#map {width: 100%; display: flex; justify-content: center; margin: 7% 0 9%;}

/*admin page*/
.adminAuthorize {width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center}
.adminAuthorize h3 {font-size: 25px; margin-bottom: 20px}
.adminAuthorize form {width: 500px; height: auto; border: 1px solid #2e3131; box-shadow: 0px 0px 5px #000; padding: 20px; display: flex; flex-direction: column; align-items: center }
.adminAuthorize input {margin: 10px 0; width: 100%; border: 1px solid #2e3131; font-size: 16px; padding: 10px; border-radius: 10px}
.adminAuthorize button {transition: .3s; border-radius: 10px; font-size: 20px; padding: 15px; border: 1px solid #0ba360; background: #0ba360; color: #fff}
.adminAuthorize button:hover {color: #0ba360; background: #fff;}


.wrapAdmin {width: 100%; min-height: 100vh; display: flex; flex-wrap: wrap;}
.admin-header {width: 100%; height: 75px; background: #2e3131; padding: 10px 50px; display: flex; justify-content: space-between; align-items: center }
.admin-linkToPage {width: 100px; }
.admin-linkToPage img {width: 100%; filter: drop-shadow(0px 0px 20px #fff)}
.admin-button {width: 70%;
    font-weight: 600; margin: 10px 0 0 0; border: 1px solid #0ba360; transition: .3s; cursor: pointer; padding: 10px; font-size: 15px; background-color: #0ba360; color: #fff; border-radius: 10px}
.admin-button:hover, .admin-button.active {background: #fff; color: #0ba360}
.wrapAdmin .admin-button:hover{background:#2e3131}
.admin-button:hover {
background: url('../img/icons/015-Shopping_cart-green.png') no-repeat;
background-size: 9%;
background-position-y: center;
background-position-x: 10px;}
.admin-hello {width: 85%; text-align: center; color: #fff; font-size: 24px}
.admin-nav {width: 15%; height: calc(100vh - 75px); padding: 15px 0; background: #2e3131}
.admin-nav-item {display: block; padding: 10px 15px; color: #fff;text-transform: capitalize;}
.admin-nav ul li:hover .admin-nav-item, .admin-nav-item.active {color: #0ba360; background: #000; text-transform: capitalize;}

.admin-main {width: 85%; height: calc(100vh - 75px); padding: 15px;}

.admin-section {display: none}
.admin-section.active {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start}
.admin-nav-item.active {color: #0ba360; background: #000}

.admin-icon {font-size: 18px; margin: 0 5px}

/*adminCategories styles*/
.adminCategories-addForm {width: 300px; display: flex; flex-direction: column; align-items: center; border: 1px solid #2e3131; box-shadow: 0px 0px 5px #2e3131; padding: 20px 15px}
.adminCategories-addForm h3 {margin-bottom: 10px}
.adminCategories-addForm input, .vincode-search {width: 100%; border: 1px solid #2e3131; margin-bottom: 15px; padding: 10px; border-radius: 10px; font-size: 16px}
.adminCategories-addForm {text-align: center}
.adminCategories-filePreview, .adminGoods-filePreview {width: 200px; height: 200px; background-color: #ececec; border: 1px solid #2e3131; background-size: 100%; background-position: center; background-repeat: no-repeat; }
.adminCategories-fileInput {margin: 15px; position: relative; overflow: hidden; width: 100%; height: 40px; border-radius: 10px; border: 1px solid #0ba360; background: #0ba360;}
.adminCategories-fileInput:hover, .adminGoods-fileInput:hover {background: #fff}
.adminCategories-fileInput label, .adminGoods-fileInput label {width: 100%; height: 100%; position: absolute; left: 0; top: 0; cursor: pointer }
.adminCategories-fileInput input, .adminGoods-fileInput input {display: none}
.adminCategories-fileInput span, .adminGoods-fileInput span {display: block; width: 100%; text-align: center; line-height: 40px; color: #fff}

.adminCategories-fileInput:hover span, .adminGoods-fileInput:hover span {color: #0ba360}
.adminCategories-addForm button {margin-top: 20px}
.adminCategoriesListWrap {margin-top: 15px; height: calc(100vh - 200px); overflow-y: auto;}
.adminCategories-listOfItems {margin-left: 15px; flex-grow: 1; padding: 15px; border: 1px solid #2e3131; box-shadow: 0px 0px 5px #2e3131;}
.adminCategories-listOfItems ul {width: 100%; display: flex; flex-direction: column;}
.adminCategories-listOfItems ul li {width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 15px; flex-wrap: wrap}
.adminCategories-listOfItems ul li img {width: 50px; height: 50px; margin-right: 20px}
.adminCategories-listOfItems ul li p {font-size: 14px; flex-grow: 1}
.adminCategories-listOfItems ul li button {margin: 0 20px}
.adminUpdateCategory {display: none;}
/*.groupInput {display: none; width: 80%; padding: 5px; margin: 5px 0 0 10px;}*/
/*.groupInput input {padding: 5px; border: 1px solid #2e3131; border-radius: 10px; width: 60%}*/
/*.groupInput button {padding: 5px 10px; margin-left: 10px; border-radius: 10px; border: 1px solid #2e3131; transition: .3s}*/
/*.groupInput button:hover {background: #2e3131; color: #ececec}*/
/*.groupList {font-size: 12px; display: none; width: 100%}*/
/*.groupList li {margin-left: 15px}*/
.adminCategory-groups {margin-right: 15px}
.adminGroup-list {margin-top: 15px; width: 100%; max-height: 70vh; overflow-y: hidden}
.adminGroup-header {display: inline}
.adminGroup-listItem {display: flex; width: 100%; margin-bottom: 10px; border-bottom: 1px solid #95a5a6}
.adminGroup-listItem p {flex-grow: 1}
.adminGroup-listItem a {margin-left: 10px}
.fa-plus-square {font-size: 20px; color: #0ba360; margin-left: 25px}
.addGroupForm {display: none; margin-top: 15px; width: 100%; align-items: center}
.addGroupInput {padding: 5px; border: 1px solid #2e3131; border-radius: 10px; width: 60%}
.addGroupBtn, .updateGroupBtn, .editGroupBtn {margin-left: 5px}
.addGroupBtn i, .updateGroupBtn i, .editGroupBtn i {color: #0ba360; font-size: 16px}
.editGroupBtn {display: none}


/*adminGoods styles*/
.adminGoods-wrap {width: 100%; display: flex; flex-direction: column; align-items: center; height: calc(100vh - 90px); overflow-y: auto}
.adminGoodsControls {display: flex; align-items: center;}
.adminGoodsControls>button {margin: 0 15px;}
.adminGoods-section {display: none; width: 100%; flex-direction: column}
.adminGoods-section.active {display: flex}
.adminGoods-divider {width: 100%; height: 2px; background: #2e3131; box-shadow: 0px 2px 3px #2e3131; margin: 15px 0;}
.adminGoods-form {display: flex; width: 100%; flex-direction: column-reverse; align-items: center;}
.adminGoodsControls .adminGoods-select {margin-top: 0}
.adminGoods-select {position: relative; margin-top: 15px; display: flex; min-width: 200px;text-align: center; height: auto; padding: 15px 10px; border: 1px solid #2e3131; border-radius: 10px; justify-content: space-between; align-items: center;}
.adminGoods-infoSection {padding: 0; width: 100%; display: none; border: none; box-shadow: none; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start}
.adminGoods-infoSection h4, .adminGoods-vinCodes h4 {width: 100%; text-align: center; margin-bottom: 10px}
.adminGoods-mainInfo {width: 32%; display: flex; flex-direction: column; align-items: center}
.adminGoods-fileInput {margin-bottom: 15px; position: relative; overflow: hidden; width: 100%; height: 40px; border-radius: 10px; border: 1px solid #0ba360; background: #0ba360;}
.adminGoods-vinCodes {width: 100%; display: none; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start}
.adminGoods-allVincodes {padding: 5px; width: 60%; display: flex; flex-direction: column-reverse; align-items: flex-end; height: 260px; overflow-y: auto; border: 1px solid #2e3131; border-radius: 10px}
.vincode-allItems {margin-top: 5px; width: 100%; flex-grow: 1; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.vincodeItem {position: relative; transition: .3s; padding: 5px; margin: 3px; border: 1px solid #2e3131; border-radius: 5px; font-size: 16px; cursor: pointer}
.vincodeItem:hover {background: #95a5a6}
.vincode-popOver {font-size: 10px; display: none; position: absolute;z-index: 500; top: 0; left: 0; border: 1px solid #2e3131; border-radius: 5px; padding: 2px; background: #95a5a6; box-shadow: 0px 0px 2px #2e3131;}
.vincodeItem:hover .vincode-popOver {display: block}
.changeCurrency{width:170px}
.adminGoods-nav{min-width:176px;}

.adminGood-search {width: 150px; border: 1px solid #2e3131; border-radius: 10px; padding: 10px; font-size: 14px}
.adminGood-currency {margin-bottom: 15px}

.adminGood-radio {margin-left: 15px}
.adminGood-radio input {margin: 0 20px 0 10px}
.adminGoods-addFirstBlock {width: 100%; display: flex; justify-content: space-around; align-items: center}
.adminGoods-chooseCategoryToAdd, .adminGoods-chooseGroupToAdd {cursor:pointer; margin: 0}
/*.vincode-filters {width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row}*/
/*.vincode-filters>.adminGoods-select {width: 23%; margin: 0}*/

.adminFilter {position: absolute; z-index: 200; overflow-y: auto; width: 100%; background: #fff; padding: 15px; top: 45px;}
.adminFilter ul li {cursor: pointer; font-size: 12px}
.adminFilter ul li:hover {border-bottom: 1px solid #2e3131}
.adminGoods-infoSection textarea {width: 100%; border: 1px solid #2e3131; padding: 10px; border-radius: 10px; font-size: 16px; resize: none}
.vincodeList-topPanel {width: 100%; display: flex; flex-direction: row; align-items: center}
.vincode-search {width: unset; flex-grow: 1; margin: 0 15px 0 0; }

.adminGoods-choosenVincodes {align-items: flex-start; width: 39%; display: flex; flex-direction: column; height: 250px;}
.adminGoods-choosenVincodes-list {width: 100%; display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1; padding: 5px; border: 1px solid #2e3131; border-radius: 10px; margin-bottom: 5px; flex-wrap: wrap; height: 250px; overflow-y: auto}

.admin-modal {position: fixed; top:45%; left: 40%; padding: 40px; font-size: 18px; border: 2px solid #2e3131; box-shadow: 0px 0px 7px #2e3131; display: none; background: #fff;}

.adminGoodsList-wrap {width: 100%; height: calc(86vh - 220px); overflow-y: auto;}
.adminGoodsList {width: 100%; display: flex; flex-direction: column; padding: 20px;}
.ordersList {display: none}
.ordersList.active {display: flex}
.adminGoodsList-item {width: 100%; padding: 5px; border: 1px solid #2e3131; display: flex; justify-content: space-between; align-items: center}
.adminGoodsList-item img {width: 50px; height: 50px; margin-right: 5px}
.adminGoodsList-itemInfo {width: 25%; word-wrap: break-word;}
.adminGoodsList-itemIsAvailable {width: 7%}
.adminGoodsList-itemControls {width: 10%}

.adminClients-item {width: 100%; padding: 5px; border: 1px solid #2e3131; display: flex; justify-content: space-between; align-items: center}
.adminGoodsList-header p {color: #95a5a6}
.adminOrders-item {width: 100%; padding: 5px; border: 1px solid #2e3131; display: flex; justify-content: space-between}
.adminClients-item-col1 {width: 18%}
.adminClients-item-col2 {width: 27%; min-height: 15px; cursor: text}
.adminOrders-orderDetails {display: flex; justify-content: space-between; align-items: center; margin: 5px 0;}
.adminOrders-total {border-top: 1px solid #2e3131; padding-top: 10px; font-size: 16px}
.adminGoodsList-col1 {width: 5%}
.adminGoodsList-col2 {width: 13%}
.adminGoodsList-col3 {width: 50%}
.adminOrders-orderDetails-col1 {width: 29%}
.adminOrders-orderDetails-col2 {width: 40%; }
.adminGoodsList-client {position: relative}
.adminGoodsList-totalOrders {position: absolute; display: none; top: 35px; left: 5px; background: #95a5a6; border: 1px solid #2e3131; border-radius: 10px; z-index: 100}
.adminOrders-item:hover .adminGoodsList-totalOrders {display: block}

.show-vins {margin-left: 20px}
.editGoodConfirm {display: none;}

.adminGoodsList-itemIsAvailable {width: 100px; display: flex; flex-direction: column; align-items: center; margin: 0 15px }
.adminGoodsList-itemIsAvailable p {color: #0ba360; text-align: center;}
.goodIsAvailable {width: 40px; height: 40px; border: 1px solid #2e3131; background: #fff; margin-top: 5px}
.adminGoodsList-itemControls {display: flex; flex-direction: row; align-items: center;}
.adminGoodsListBtn {transition: .3s; margin: 0 5px; background: #fff; border: 1px solid #2e3131; padding: 5px}
.goodEdit {border-color: #0ba360}
.goodDelete {border-color: #c0392b}
.adminGoodsListBtn i {font-size: 20px;}
/*.fa-eye {color: #2e3131}*/
/*.fa-edit {color: #0ba360}*/
.fa-trash-alt {color: #c0392b}
.adminGoodsListBtn:hover i {color: #fff}
.goodView:hover {background: #2e3131}
.goodEdit:hover {background: #0ba360}
.goodDelete:hover {background: #c0392b}
.adminLoader-search {margin-left: 25%; margin-bottom: 20px; font-size: 20px; width: 500px; padding: 5px 10px; border-radius: 10px; background: #fff; border: 1px solid #2e3131}

.adminLoader-wrap {width: 100%; display: flex; flex-direction: column; align-items: center}
.loadExcel {width:15%;font-weight: 500; text-align:center;}
.adminLoader-gallery {width: 97%; height: calc(100vh - 200px); box-shadow: 0px 5px 5px #2e3131; display: flex; flex-direction: column; align-items: center; padding: 5px; overflow: auto;}
.adminLoader-gallery h2 {text-align: center}
.adminLoader-loadImg {padding: 15px 0; width: 100%; display: flex; flex-direction: column; align-items: center}
.adminLoader-folders {display: flex; flex-direction: row}
.adminLoader-foldersNav {transition: .3s; padding: 15px; background: #0ba360; color: #fff; border: 1px solid #0ba360}
.adminLoader-foldersNav:first-child {border-radius: 10px 0 0 0}
.adminLoader-foldersNav:last-child {border-radius: 0 10px 0 0}
.adminLoader-foldersNav.active {background: #fff; color: #0ba360}
.adminLoader-foldersNav i {margin-right: 10px; color: #fff}
.adminLoader-foldersNav.active i {color: #0ba360}
.adminLoader-foldersItem {display: none; height: 480px; padding: 15px 0; overflow-y: auto}
.adminLoader-foldersItem.active {display: block}
.adminLoader-foldersItem ul {width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: center}
.adminLoader-foldersItem ul li {position: relative; display: flex; flex-direction: column; justify-content: space-around; align-items: center; margin: 15px; width: 140px; height: 160px; padding: 10px; border: 1px solid #2e3131; box-shadow: 0px 0px 2px #2e3131;}
.adminLoader-foldersItem ul li img {width: 120px;}
.adminLoader-foldersItem ul li input {width: 100%; background: #fff}
.adminLoader-foldersItem-tip {text-align: center; position: absolute; width: 100%; height: 60%; display: none; top: 0; left: 0; background: rgba(11,163,96,.7); font-size: 12px}
.adminLoader-foldersItem ul li:hover .adminLoader-foldersItem-tip {display: block}
.adminLoader-foldersItem-tip.unUsed {background: rgba(192,57,43,.7)}
.adminLoader-imagesView {width: 100%; border-top: 2px solid #0ba360; overflow: visible;}
.adminLoader-search {margin-top: 15px}
.adminLoader-buttons {width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 10px; background: #fff}
.adminLoader-buttons>.adminGoods-fileInput {width: 50%}
.deleteUnusedFiles {width: 50%; margin: 0px 0px 15px 15px; background: #c0392b; border: 1px solid #c0392b}
.deleteUnusedFiles:hover {background: #fff; color: #c0392b}
.exceldataCont {width: 100%; display: flex; justify-content: space-around; align-items: center}
._adminGoods-excelInput {width: 22%; margin-bottom: 0}
/*admin page*/




/*preloader*/
.cssload-container{
    display: none;
    position:fixed; left: 0; top:0; width: 100%; height: 100vh; background: rgba(46,49,49,.7); z-index: 100;
}

.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgb(204,204,204);
    border-left-color: #0ba360;
    border-radius: 974px;
    -o-border-radius: 974px;
    -ms-border-radius: 974px;
    -webkit-border-radius: 974px;
    -moz-border-radius: 974px;
}

.cssload-whirlpool {
    margin: -24px 0 0 -24px;
    height: 49px;
    width: 49px;
    animation: cssload-rotate 1150ms linear infinite;
    -o-animation: cssload-rotate 1150ms linear infinite;
    -ms-animation: cssload-rotate 1150ms linear infinite;
    -webkit-animation: cssload-rotate 1150ms linear infinite;
    -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::before {
    content: "";
    margin: -22px 0 0 -22px;
    height: 43px;
    width: 43px;
    animation: cssload-rotate 1150ms linear infinite;
    -o-animation: cssload-rotate 1150ms linear infinite;
    -ms-animation: cssload-rotate 1150ms linear infinite;
    -webkit-animation: cssload-rotate 1150ms linear infinite;
    -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::after {
    content: "";
    margin: -28px 0 0 -28px;
    height: 55px;
    width: 55px;
    animation: cssload-rotate 2300ms linear infinite;
    -o-animation: cssload-rotate 2300ms linear infinite;
    -ms-animation: cssload-rotate 2300ms linear infinite;
    -webkit-animation: cssload-rotate 2300ms linear infinite;
    -moz-animation: cssload-rotate 2300ms linear infinite;
}



@keyframes cssload-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-rotate {
    100% {
        -o-transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-rotate {
    100% {
        -ms-transform: rotate(360deg);
    }
}

@-webkit-keyframes cssload-rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes cssload-rotate {
    100% {
        -moz-transform: rotate(360deg);
    }
}
/*preloader*/


.search-list {
    padding: 20px 0;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    border-radius: 0 0 10px 10px;
    border: 2px solid #0ba360;
    border-top: 0;
	z-index: 1000;
    background-color: white;
    max-height: 300px;
    overflow: auto;
    display: none;
}

.search-list__link-wrapper{
    margin: 5px 0;
}


/*footer  <o>*/
.wrap__flex{
    display: flex;
    justify-content:  space-between;
    width: 100%;
}

.address_link{
    color: white;
    font-size: 13px;
}


.req-form{
    background-color: #0ba360;
    width: 100%;
    margin: 16% auto 14%;
    border-radius: 10px;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.req-form .form-row{
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
}

.req-form .form-col{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.req-form>h4{
    margin: 15px auto;
    font-size: 23px;
    color: #fff;

}

.req-form label{
    width: 70%;

}

.req{
    width: 100%;
    margin: 0 auto;
}

.req-form button{
    width: 250px; padding: 15px; border-radius: 10px;
    margin: 0 auto;
	font-size: 15px;
}

.phone-country{
    display: flex;
    align-items: center;
    text-align: center;
    align-content: center;
    color: black;
    border-radius: 10px;
    background-color: #fff;
    font-size: 15px;
}

.req[type='tel']{
    margin-bottom: 0;
}

.table{
    width: 100%;
	margin-top: 2%;
}

.t-row{
    display: flex;
    width: 100%;
}

.t-col{
    width: 200px;
    border: 1px solid black;
    box-sizing: border-box;
    padding: 3px;
    overflow: auto;
    font-family: Arial, serif;
    text-transform: capitalize;
}

.table .t-row .header{
    text-align: center;
    color: rgba(0, 0, 0, .5);
    font-weight: 600;
}


.t-col-item:nth-child(1){
    text-transform: capitalize;
}
.t-col-item{
    text-transform: lowercase;

    font-family: Arial, serif;

}



.call-button-circle{
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background-color: #0ba360;
    display: flex;
    position: fixed;
    bottom: 50px;
	z-index: 9999;
    right: 50px;
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
    cursor: pointer;
    -webkit-box-shadow: 6px 10px 39px -10px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 10px 39px -10px rgba(0,0,0,0.75);
    box-shadow: 6px 10px 39px -10px rgba(0,0,0,0.75);
}

@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}


.call-button-circle img {
    width: 50%;
    margin: auto;
}

.mod{
    width: 100%;
    height: 100vh;
    position: fixed;
    display: none;
    z-index: 9999;
}

.callForm{
    padding: 15px 15px 15px;
    box-sizing: border-box;
    height: 180px;
    width: 300px;
    background-color: #0ba360;
    color: white;
    border-radius: 10px 10px 0 10px;
    -webkit-box-shadow: 10px 10px 39px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 39px -6px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 39px -6px rgba(0,0,0,0.75);
}

.callForm form{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.callForm-text{
    color: white;
    text-align: center;
}

.callForm button{
    width: 150px; padding: 10px; border-radius: 10px;
    cursor: pointer;
}

.callForm .loginForm-input{
    width: 100%;
    margin-top: 15px;
    font-size: 14px;
}

.container-flb{
    height: 240px;
    position: fixed;
    bottom: 50px;
    right: 80px;
    display: flex;
    flex-direction: column;
    z-index: 9999;
}


.prodCallList,
.adminCallList{
    display: none;
}

.active{
    display: block;
}



.bf{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.confBtn{
    margin-top: 5px;
    padding: 10px;
    width: 100px;
    border-radius: 8px;
    cursor: pointer;
}


.cart-badge{
	width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: red;
    color: white;
    text-align: center;
    line-height: 1.5;
    position: absolute;
    top: 0px;
    right: -9px;
    font-size: 12px;
    display: none;
}

.alert-input{
    border: 3px solid red;
    color: darkred;
}

.selected-wrapper{
	display: none;
}

.selected-car-info{
    font-size: 15px;
	display: flex;
    justify-content: space-around;
	padding: 10px 0px 20px 0px;

}
.selected-car-info .selected-prod{
    padding: 10px 15px;
    background-color: lightgray;
	border-radius: 10px;
	display: none;
}


.about-wrap {
	height: 55vh;
	padding: 10px 0 40px 0;
	display: flex;
	align-items: center;
	margin-bottom: 9%;
}

.about-wrap > .row {
    display: flex;
    width: 100%;
}

.about-wrap > .row > .small-banner {
    width: 45%;
    height: 300px;
}

.about-wrap > .row > .about-text {
    width: 55%;
    line-height: 1.3;
    padding: 0 10px;
}

.about-wrap > .row > .small-banner > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: -620px;
}


.flex-quantity-box {
	 width: 19%;
    display: flex;
    flex-direction: column;
	padding: 5px 0;
	height: 80px;
	justify-content: space-between;
}

.quant-text {
    font-size: 13px;
}

.pag-pages{
	display: flex;
	align-items: center;
}

.pageCategories-pagin-firstPage > img {
	width: 14px; height: 12px;
	transform: rotate(180deg);
}
.success-signUp-text {
	display: none;
	color: rgba(255, 255, 255, .8);
}

.main-wrapper {
	display: flex;
	justify-content: space-between;
	height: 100vh;
	margin: 10px auto;
	border: 1.5px solid rgba(0, 0, 0, .5);
	border-radius: 8px;
	padding: 10px;
}

.main-wrapper > .admin-nav {
	width: 30%;
	height: 100%;
	background-color: white;
	border-right: 1px solid black;
}

.main-wrapper > .admin-nav .active {
	background-color: #0BA360;
	color: rgba(255, 255, 255, .9);
}


.main-wrapper > .admin-nav ul li:hover .admin-nav-item, .admin-nav-item.active {
	background-color: darkgreen;
	color: white;
}

.main-wrapper > .admin-nav > ul a {
	color: black;
}

.main-wrapper .admin-section.active{
	width: 80%;
	padding: 0 15px 15px 15px;
}



.profile-data {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.profile-data-item {
	border: 1px solid rgba(0,0,0, .8);
	border-radius: 8px;
	padding: 10px;
	margin: 10px;
	width: 100%;
	display: flex;
	align-items: center;
	position: relative;
}

.profile-data-item__title {
	width: 20%;
	margin-right: 10px;
	border-right: 1px solid rgba(0,0,0, .8);
}

.profile-data-item__info {
	width: 70%;
}

.profile-data-item__input {
	width: 100%;
	font-size: 20px;
}

.profile-data-item__edit {
	box-shadow: 0px 5px 17px -1px rgba(0,0,0,0.28);
}

.save-btn {
	position: absolute;
	right: 0;
	background-color: #0ba360;
	color: white;
	padding: 10px;
	top: 0;
	border-radius: 8px;
}


.cabinet {
	width: 80%;
	margin:	 0 auto;
}

.cabinet-wrapper {
	width: 100%;
	margin: 0 auto;
}


.order-status-box {
	width: 100%;
	display: flex;
	justify-content: space-around;
	border-bottom: 1px solid black;
	padding-bottom: 5px;
}
.main-wrapper > .admin-nav .active,
.order-status-box .active
{
	background-color: #0BA360;
	color: rgba(255, 255, 255, .9);
}

.order-status-box-item {
	box-sizing: border-box;
	padding: 5px;
}

.order-items {
	display: none;
	flex-direction: column;
	width: 100%;
	height: 95%;
	overflow: auto;
	padding-top: 5px;
}

.order-items.active {
	display:flex;
}

.logout-btn {
	padding: 10px;
	cursor: pointer;
	border-radius: 8px;
	background-color: #0ba360;
	color: rgba(255, 255, 255, .9);
	margin: 10px 0;
}

.order-item {
	margin: 10px auto;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0, .8);
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.order-item-data__title {
	width: 50%;
	display: flex;
	align-items: center;
	font-size: 18px;
}

.order-item-info {
	display: flex;
	justify-content: space-between;
}

.order-item-info__bold {
	font-weight: 600;
}

.order-item-data {
	display: flex;
	padding: 10px;
	justify-content: space-between;
	align-items: center;
}

.order-item__date {
	font-size: 14px;
}

.order-item__good-category {
	font-size: 14px;
	margin-top: 10px;
	color: #0ba360;
}

.order-item__good-manuf {
	font-size: 15px;
}

.order-item__delivery-details {
	text-wrap: wrap;

	font-size: 14px;
}

.order-item__delivery-details:nth-child(1) {
	width: 70%;
}

.order-item__footer {
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
}

.required {
	color: red;
	font-size: 30px;
	position: absolute;
	right: 15px;
	top: -2px;
}

.cabinet-title {
	display: none;
}


.see-all{
	color: #fff;
	font-size: 14px;
	background: #0ba360;
	padding: 7px;
	cursor: pointer;
	border-radius: 8px;
	width: 150px;
	text-align: center;
	margin-top: 10px;
	float: right;
}

.wrapper-text {
	width: 150px;
	word-wrap: break-word;
}



.editInput {
	border: 1px solid rgba(0, 0, 0, .4);
	border-radius: 8px;
	padding: 10px;
	width: 80%;
}

.shadow {
	box-shadow: 0px 4px 17px 0px rgba(0,0,0,0.10);
}

.editor {
	display:none;
	position: relative;
}

.save-changes-btn {
	width: 18%;
	padding: 10px;
	background-color: #0BA360;
	color: white;
	position: absolute;
	right: 0;
	margin: 5px;
	border-radius: 8px;
}


.search-wrapper {
	width: 100%;
	margin: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
}

.search-wrapper__input-box {
	width: 80%;
	margin: 0 auto;
	text-align:center;
}
.admin-nav li .admin-nav-item{
border: 1px solid #0ba360;
    border-radius: 15px;
    margin: 10px 10px 0;
	padding: 10px 15px;
}