.xh-client-button-nest {display: flex; margin-left: auto; }
.xh-client-button-nest > *:not(:last-child) {margin-right: 10px;}
.xh-client-button {border: 1px solid #E7E7E7; border-radius: 3px; display: flex; align-items: center;
    justify-content: center; padding: 5px 10px; color: #0091FF; font-size: 12px;text-transform: uppercase;
    text-align: center; background-color: #FFF; cursor: pointer; transition: 0.2s}
.xh-client-button:hover {border-color: #02B0FF; background: #02B0FF; color: #fff}

.xh-client-button .icon {margin-right: 5px;}
.xh-client-button .icon svg path {fill: #0091FF}
.xh-client-button .icon .fa {color: #0091FF}
.xh-client-button:hover .icon .fa {color: #FFF}
.xh-client-button:hover .icon svg path {fill: #FFF}

.xh-client-button.primary {color: #02B0FF !important;}
.xh-client-button.primary:hover {border-color: #02B0FF; background: #02B0FF !important; color: #FFF !important;}
.xh-client-button.primary.active {border-color: #02B0FF; background: #02B0FF; color: #FFF !important;}
.xh-client-button.primary.active:hover {border-color: #E7E7E7 !important; background: #FFF !important; color: #02B0FF !important;}
.xh-client-button.save {background-color: #02B0FF !important;color: #fff;border-color: inherit;}
.xh-client-button.delete {color: #FF0000 !important;}
.xh-client-button.delete:hover {border-color: #FF0000; background: #FF0000 ; color: #FFF !important;}
.xh-client-button.edit {color: #82C91E !important;}
.xh-client-button.edit:hover {border-color: #82C91E; background: #82C91E; color: #FFF !important;}
@media (max-width: 640px){
    .xh-client-button {font-size: 12px;}
}

.profile-container__button--save {background: #02B0FF; color: #fff;}
.profile__label{font-family: 'Roboto';font-style: normal;font-weight: normal;font-size: 12px !important;line-height: 14px;color: #999999 !important;}

.xh-client {background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);border-radius: 10px;overflow: hidden; margin-top: 20px}

.xh-client-sidebar {background: #F5F5F5;}
.xh-client-sidebar .xh-client-user {position: relative; border-bottom: 1px dashed #E2E6F3}
.xh-client-sidebar .xh-client-item{font-family: Roboto;font-style: normal;font-weight: normal;font-size: 14px;line-height: 16px;color: #363636; padding: 20px 30px 20px 45px; display: block; position: relative;border-bottom: 1px dashed #E2E6F3; transition: .2s;}
.xh-client-sidebar .xh-client-item svg {position: absolute;left: 15px;top: 20px;}
.xh-client-sidebar .xh-client-item:hover svg path {fill: #1c1f5f}
*[class^="xh-client-item"], form#logOut {box-sizing: border-box}
@media (max-width: 960px) {
    .xh-client .xh-client-sidebar {width: auto !important;}
    .xh-client .xh-client-content {margin: 0 auto}
    a[class^="xh-client-item"] span, button[class^="xh-client-item"] span {display: none}
    *[class^="xh-client-item"], form#logOut {border-bottom: 1px solid #e7e7e7; border-right: 1px solid #e7e7e7; padding: 0 !important; height: 50px; width: 50px; display: flex; justify-content: center;}
    *[class^="xh-client-item"].xh-client-sidebar .item.active {border-right: 1px solid #fff;}
    *[class^="xh-client-item"]:before {left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 16px; color: #666}
    .xh-client-sidebar .item:after {content: ""}
    .xh-client-sidebar .xh-client-user .img {width: 100%;}
    .xh-client-sidebar .xh-client-user .image figure {width: 30px; height: 30px}
}

.xh-status-CREATED {color: #00AEEF !important;}
.xh-status-RECEIVED {color: #78C81E !important;}
.xh-status-CANCELLED {color: #ED3237 !important;}

.xh-client-sidebar .xh-client-item.active{background-color: #fff; color: #1C1F5F;font-weight: 700;}
.xh-client-sidebar .xh-client-item.active svg path {fill: #1C1F5F}
.xh-client-sidebar .xh-client-item.active:before{color: #1C1F5F;font-weight: 700;}
.xh-client-sidebar .xh-client-item.active:after{content: ""}
.xh-client-sidebar .xh-client-item:hover{color: #1c1f5f;}

.xh-client-content {padding: 20px 25px}
.xh-client-content .head {border-bottom: 1px dashed #E7E7E7; display: flex; margin-bottom: 15px; padding-bottom: 20px ; }
.xh-client-content .head .xh-client-button {margin-left: auto}
.xh-client-content .head:after {clear: both; display: table; content: ""}
.xh-client-content .head .title {font-family: Roboto;font-style: normal;font-weight: normal;font-size: 18px;line-height: 34px;color: #1C1F5F; display: inline-block;}
@media (max-width: 960px) {
    .xh-client {border-radius: 0; margin-top: 0}
    .xh-client-content .head {padding: 8px 0}
    .xh-client-content .head {margin-bottom: 10px}
    .xh-client-content .head .title {font-size: 14px;}
}
@media (max-width: 960px) {
    .xh-client-content .head .title {font-size: 12px;}
}

.xh-client-user {}

.xh-client-user-mini {}
.xh-client-user-mini .image figure{width: 50px; height: 50px; background-size: cover!important;border-radius: 5px;}
.xh-client-user-mini .name {font-size: 14px;}
@media (max-width: 960px) {
    .xh-client-user .xh-client-user-mini > div div:not(:first-child) {display: none;}
}

.xh-grid {}
.xh-grid .item {border-radius: 5px; margin-bottom: 15px;}
.xh-grid .item:hover .img > div{transform: scale(1.1)}
.xh-grid .item .img {border-radius: 5px; margin-bottom: 10px; overflow: hidden; width: 100%;}
.xh-grid .item .img > div {height: 150px; transition-duration: 0.3s}
.xh-grid .item .category,
.xh-grid .item .name,
.xh-grid .item .price {margin-bottom: 5px}
.xh-grid .item .category {font-size: 12px; font-weight: 400; color: #02B0FF}
.xh-grid .item .name {display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;font-size: 14px; font-weight: 400; color: #363636}
.xh-grid .item .price {font-size: 14px; font-weight: 400; color: #82C91E}
.xh-grid .item .published {font-size: 12px; font-weight: 400; color: #999}
.xh-grid .item .xh-group-buttons {display: flex; flex-flow: wrap; margin-top: 15px}
.xh-grid .item .xh-group-buttons .xh-client-button:nth-last-child(1) {margin-left: 5px}
.xh-grid .item .xh-group-buttons .xh-client-button:nth-last-child(2) {margin-right: 5px}
.xh-grid .item .xh-group-buttons .xh-client-button:nth-last-child(1),
.xh-grid .item .xh-group-buttons .xh-client-button:nth-last-child(2) {margin-bottom: 0; flex: 1}
.xh-grid .item .xh-client-button {width: 100%; margin-bottom: 10px; color: #666}

.profile__text{font-family: Roboto;font-style: normal;font-weight: normal;font-size: 14px;line-height: 40px;color: #363636; display: block; border-bottom: 1px solid #F3F3F3;}

.profile__input{border-radius: 5px !important; padding: 5px 10px; font-size: 14px !important; box-shadow: inset 1px 1px 6px rgba(10,10,10,.1); background-color: #f5f5f5 !important;}
.profile__input:focus {border: 1px solid #f3f3f3; box-shadow: none; background-color: #fff !important;}

.profile__input::-webkit-input-placeholder {color: #999;}
.profile__input:focus::-webkit-input-placeholder {color: #363636;}
/* Firefox < 19 */
.profile__input:-moz-placeholder {color: #999;}
.profile__input:focus:-moz-placeholder {color: #363636;}
/* Firefox > 19 */
.profile__input::-moz-placeholder {color: #999;}
.profile__input:focus::-moz-placeholder {color: #363636;}
/* Internet Explorer 10 */
.profile__input:-ms-input-placeholder {color: #999;}
.profile__input:focus:-ms-input-placeholder {color: #363636;}

.profile__input:focus {border-color: #363636; outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);}

.profile__select{border: none !important; border-bottom: 1px solid #F3F3F3 !important; padding-left: 0 !important; padding-right: 0 !important; font-size: 14px !important;}

.profile-product{background-color: rgb(255, 255, 255); border-radius: 6px; margin-bottom: 20px; border: 1px solid #F3F3F3;}
.profile-product__inner{font-size: 14px;display: flex;-webkit-box-align: center;align-items: center;position: relative;}
.profile-product__img{    width: 100px;height: 100px; overflow: hidden;position: relative; border-radius: 5px; display: block; margin: 10px;}
.profile-product__features{font-size: 12px;position: relative;overflow: hidden;flex: 1 1 0%;margin: 10px;}
.profile-product__title{white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #1C1F5F;;display: block;font-weight: bold;overflow: hidden; margin: 0px; line-height: 40px;}
.profile-product__cat{font-family: Roboto;font-style: normal;font-weight: normal;font-size: 12px;line-height: 14px;     color: #999999;}
.profile-product__price{font-style: normal;font-weight: bold;font-size: 14px;line-height: 16px;color: #FF2E00;}

.profile-product__wrapper{width: 40px;margin-top: 3px;margin-right: 3px;margin-bottom: 3px;color: #999999;;display: flex;flex-direction: column;-webkit-box-pack: justify;justify-content: space-between;background: rgb(28, 31, 95);;border-radius: 6px;}
.profile-product__wrapper .but{width: 40px;height: 40px;background-size: 13px;text-indent: -9999px;background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNDQ4IDQ0OCIgd2lkdGg9IjUxMiIgY2xhc3M9IiI+PGc+PHBhdGggZD0ibTQwOCAxODRoLTEzNmMtNC40MTc5NjkgMC04LTMuNTgyMDMxLTgtOHYtMTM2YzAtMjIuMDg5ODQ0LTE3LjkxMDE1Ni00MC00MC00MHMtNDAgMTcuOTEwMTU2LTQwIDQwdjEzNmMwIDQuNDE3OTY5LTMuNTgyMDMxIDgtOCA4aC0xMzZjLTIyLjA4OTg0NCAwLTQwIDE3LjkxMDE1Ni00MCA0MHMxNy45MTAxNTYgNDAgNDAgNDBoMTM2YzQuNDE3OTY5IDAgOCAzLjU4MjAzMSA4IDh2MTM2YzAgMjIuMDg5ODQ0IDE3LjkxMDE1NiA0MCA0MCA0MHM0MC0xNy45MTAxNTYgNDAtNDB2LTEzNmMwLTQuNDE3OTY5IDMuNTgyMDMxLTggOC04aDEzNmMyMi4wODk4NDQgMCA0MC0xNy45MTAxNTYgNDAtNDBzLTE3LjkxMDE1Ni00MC00MC00MHptMCAwIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiNGRkZGRkYiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIj48L3BhdGg+PC9nPiA8L3N2Zz4=);background-repeat: no-repeat;background-position: center center; border: none;background-color: transparent;}
.profile-product__input{-webkit-box-flex: 1;flex-grow: 1;-webkit-box-align: center;align-items: center;display: flex;}
.profile-product__input input{width: 100%;text-align: center;font-size: 15px;font-weight: 500;color: rgb(255, 255, 255);padding: 0px; border: none; background-color: transparent; -moz-appearance: textfield !important;}
.profile-product__input input[type=number]{  -moz-appearance: textfield;}
.profile-product__input input::-webkit-outer-spin-button,
.profile-product__input input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.profile-product__wrapper .but.minus{background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDQ1OS4zMTMgNDU5LjMxNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDU5LjMxMyA0NTkuMzE0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PGc+Cgk8cGF0aCBkPSJNNDU5LjMxMywyMjkuNjQ4YzAsMjIuMjAxLTE3Ljk5Miw0MC4xOTktNDAuMjA1LDQwLjE5OUg0MC4xODFjLTExLjA5NCwwLTIxLjE0LTQuNDk4LTI4LjQxNi0xMS43NzQgICBDNC40OTUsMjUwLjgwOCwwLDI0MC43NiwwLDIyOS42NmMtMC4wMDYtMjIuMjA0LDE3Ljk5Mi00MC4xOTksNDAuMjAyLTQwLjE5M2gzNzguOTM2ICAgQzQ0MS4zMzMsMTg5LjQ3Miw0NTkuMzA4LDIwNy40NTYsNDU5LjMxMywyMjkuNjQ4eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPgo8L2c+PC9nPiA8L3N2Zz4=);}

.profile-product__settings{margin: 0 20px;}
.profile-product__icon{display: block;  font-size: 14px; line-height: 60px; font-weight: 900}
.profile-product__icon--edit{color: #82C91E;}
.profile-product__icon--trash{color: #F86C6B;}

.product-item{background: #FFFFFF;border: 1px solid #EAECF4;box-sizing: border-box;border-radius: 10px; padding: 10px; margin-bottom: 20px; text-align: center; display: block;     box-shadow: 0 0 3rem -1rem rgba(0,0,0,0.2);-webkit-transition: box-shadow 0.1s, -webkit-transform 0.1s ease-in-out;transition: box-shadow 0.1s, -webkit-transform 0.1s ease-in-out;transition: transform 0.1s ease-in-out, box-shadow 0.1s;transition: transform 0.1s ease-in-out, box-shadow 0.1s, -webkit-transform 0.1s ease-in-out;}
.product-item__img{width: 100%;height: 150px;/* padding-bottom: 100%; */overflow: hidden;position: relative;border-radius: 5px;overflow: hidden;margin-bottom: 10px;}
.product-item__title{font-weight: bold;font-size: 14px;line-height: 16px;color: #363636; margin: 0;}
.product-item__price{font-size: 12px;line-height: 14px; color: #FF6600; display: block; margin-top: 10px; margin-bottom: 10px;}
.product-item:hover{    -webkit-transform: translateY(-0.5rem) scale(1.0125);transform: translateY(-0.5rem) scale(1.0125);box-shadow: 0 0.5em 3rem -1rem rgba(0,0,0,0.2);}

.xh-client-avatar {padding: 20px; background: #1E3B92}
.xh-client-sidebar {background-color: #f9f9f9 !important;}
.xh-client-content .head {align-items: center; box-sizing: border-box; height: 60px; padding: 0 20px}
.xh-client-content .head + div {margin-bottom: 20px; padding: 0 20px}
.xh-client-sidebar .xh-client-item {border-right: 1px solid #ececec; border-bottom: 1px solid #ECECEC; display: flex; padding: 15px 15px; align-items: center; height: 60px; box-sizing: border-box; background-color: #f9f9f9}
.xh-client-sidebar .xh-client-item:hover {border-right-color: #FFF}
.xh-client-sidebar .xh-client-item svg {position: relative; top: unset; left: unset; /*top: 50%; left: 10px; transform: translate(50%, -50%)*/}
.xh-client-sidebar .xh-client-item div {padding-right: 15px; display: flex; justify-content: center;}
.xh-client-sidebar .xh-client-item.uk-active {background: #FFF; border-right-color: #FFF}

.xh-client-tab {display: flex; height: 100%; margin-bottom: 0;}
.xh-client-tab::before {content: none;}
.xh-client-tab li {height: 100%;}
.xh-client-tab li a {position: relative; display: flex; align-items: center; box-sizing: border-box; height: 100%; user-select: none}
.xh-client-tab li a::before {content: ""; position: absolute; bottom: -1px; left: 100%; width: 0%; height: 3px; background: #00AEEF; transition: 0.2s}
.xh-client-tab li.uk-active a::before {left: 0; width: 100%}

.xh-client-table th {text-transform: none;}

.xh-client-alert {border-radius: 5px; display: flex; align-items: baseline; padding: 15px; font-size: 14px; font-weight: 700}
.xh-client-alert.xh-client-alert-warning {border: 1px dashed #FFCA59; background: #FFF4BB; color: #9B5E03}
.xh-client-alert.xh-client-alert-success {border: 1px dashed #358C43; background: #A7E463; color: #385B10}
.xh-client-alert.xh-client-alert-danger {border: 1px solid  #BF1E1F; background: #FF4B4C; color: #FFFFFF}
.xh-client-alert.xh-client-alert-primary {border: 1px dashed  #47B197; background: #A5FFE9; color: #1E7E67}
.xh-client-alert p:only-child {margin: 0;}

.xh-client-order-item-table {border: 1px solid #F3F3F3; border-spacing: 0; border-collapse: collapse; width: 100%}
.xh-client-order-item-table th, .xh-client-order-item-table td{ text-align: left; padding: 10px 20px}
.xh-client-order-item-table tr {border: 1px solid #f3f3f3}
.xh-client-order-item-table th {font-size: 14px; font-weight: 400; color: #999}
.xh-client-order-item-table td {font-size: 14px; font-weight: 400; color: #363636}
.xh-client-order-item-table td div:not(:last-child) {margin-bottom: 7px}
.xh-client-order-item-table td.font16 {font-size: 16px;}
.xh-client-order-item-table tfoot {background: #F9F9F9}
.xh-client-order-item-table tfoot tr td:nth-last-child(2) {color: #999999}

.xh-client-table {}
.xh-client-table .xh-table-name {margin-bottom: 5px; color: #363636; font-weight: 700;}


.xh-client-list {}
.xh-client-list.w-hover > * {transition: 0.3s}
.xh-client-list .xh-client-list-head {display: flex; justify-content: space-between; padding: 15px 0; font-size: 14px; font-weight: 400; color: #999}
.xh-client-list-item {display: block; border-top: 1px dashed #C5C5C5; padding: 10px 0;}
.xh-client-list-item:last-child {border-bottom: 1px dashed #C5C5C5}
.xh-client-list-item:only-child {border-bottom: 1px dashed #C5C5C5}
.xh-client-list-item div {display: flex; justify-content: space-between}
.xh-client-list-item div div {font-size: 14px; font-weight: 400; color: #363636}
.xh-client-list-item .xh-identity {color: #30408E}

.xh-client-list.w-hover .xh-client-list-item:hover {background: #f1f1f1}
@media (max-width: 640px) {
    .xh-client-list-item div div {font-size: 12px}
    .xh-client-list .xh-client-list-head {font-size: 12px}
}


.xh-number-input {border: 1px solid #F1F1F1; display: inline-flex;}
.xh-number-input * {transition: 0.4s}
.xh-number-input button:first-child {border-right: 1px solid #f1f1f1}
.xh-number-input button:last-child {border-left: 1px solid #f1f1f1}
.xh-number-input button {position: relative;border: none;align-items: center;justify-content: center;width: 30px;height: 30px;outline:none;-webkit-appearance: none;cursor: pointer;margin: 0;background-color: #FFF;}
.xh-number-input button:before,
.xh-number-input button:after {display: inline-block;position: absolute;content: '';width: 9px;height: 2px;background-color: #363636;transform: translate(-50%, -50%);}
.xh-number-input button.plus:after {transform: translate(-50%, -50%) rotate(90deg);}
.xh-number-input input[type=number] {border-right: 1px solid #f1f1f1;border-left: 1px dashed #f1f1f1;border-style: none;
    font-family: sans-serif;max-width: 40px;padding: 0;-moz-appearance: textfield; outline-width: 0;
    font-size: 14px;height: 30px;font-weight: bold;text-align: center;color: #30408E;background-color: #fff;}
.xh-number-input input[type=number]::-webkit-outer-spin-button,
.xh-number-input input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0}
.xh-number-input button:hover {background: #363636}
.xh-number-input button:hover:before {background: #fff}
.xh-number-input button:hover:after {background: #fff}

.xh-product-grid-item {display: flex; padding-right: 10px}
/*.xh-product-grid-item:not(:last-child) {margin-bottom: 20px}*/
.xh-product-grid-item .img {border-radius: 5px; width: 100px; height:100px; min-width: 100px; background-color: #bebebe}
.xh-product-grid-item .product-name a {}
.xh-product-grid-item .b-info {padding-left:20px}
.xh-product-grid-item .price {font-size: 18px; color: #30408E; margin: 5px 0 10px;}
.xh-product-grid-item .remove-item {margin-left: auto}
.xh-product-grid-item .remove-item button {border-style: none; padding: 7px 10px; align-self: center; cursor: pointer; color: #FFF; background-color:#ED3237; transition: 0.3s}
.xh-product-grid-item .remove-item button:hover {background: #EC008C}
.xh-product-grid-item .count input {border: 1px solid #444; border-style: none; border-radius: 5px; padding: 5px 0; width: 40px; align-self: center; text-align: center; color: #FFF; background-color: #222;}
@media (max-width: 960px) {
    .xh-product-grid-item .b-info {padding-left: 10px}

}