/* roboto-regular - latin-ext_latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v27-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/roboto-v27-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v27-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v27-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v27-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v27-latin-ext_latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin-ext_latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/roboto-v27-latin-ext_latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/roboto-v27-latin-ext_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v27-latin-ext_latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v27-latin-ext_latin-500.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v27-latin-ext_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v27-latin-ext_latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin-ext_latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-v27-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/roboto-v27-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v27-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v27-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v27-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v27-latin-ext_latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

body { position: relative; font-family: 'Roboto', sans-serif; font-size: 16px; background-color: #eaebf0; color: #343434;
    --bs-gutter-x: 15px;
}
body.page:not(.subpage):before { content: ''; position: fixed; z-index: 0; background-color: #fff; top: 0; left: 0; right: 50%; bottom: 0; }
.wrapper { position: relative; z-index: 1; min-height: 100vh; }
/*.wrapper:before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; bottom: 0; right: 50%; background: red; }*/

.form-control { border-radius: 60px;  }
.form-select { border-radius: 60px;  }
textarea.form-control { border-radius: 12px; min-height: 120px;  }
.form-control:focus { color: #000; border-color: #282d8d; box-shadow: none; }
.form-floating>.form-control { padding: 16px 20px 16px 20px; }
.form-floating>label { padding: 16px 0 16px 20px; }

.btn-search { cursor: pointer; display: inline-flex; justify-content: center; align-items: center; background-color: #eaebf0; color: #000;
    -webkit-transition: all 0.3s 0s ease; -moz-transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease;
}
.btn-search>svg { width: 16px; height: 16px; }
.btn-search:hover { background-color: #f27022; color: #fff; }

.btn-cart { display: inline-flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 100%; background-color: transparent; color: #000;
    padding: 0; border: 0 none; box-shadow: none;
    -webkit-transition: all 0.3s 0s ease; -moz-transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease;
}
.btn-cart:hover { background-color: #282d8d; color: #fff; }
.btn-cart>svg { width: 16px; height: 16px; }
.btn-cart>span { display: none!important; }

.btn-delete { background-color: #dc3545; color: #fff; }
.btn-delete:hover { background-color: #b02a37; color: #fff; }

.btn-modify { background-color: #f27022; color: #fff; }
.btn-modify:hover { background-color: #ec5a00; color: #fff; }

.btn-order { display: inline-flex; align-items: center; }
.btn-order svg { width: 26px; height: 26px; margin-right: 20px; }

.btn-primary { background-color: #f27022; color: #fff; border-color: #f27022; }
.btn-primary:hover { background-color: #282d8d; color: #fff; border-color: #282d8d; }

.btn-sm { font-size: 12px; }



header { position: relative; }
header .inner { display: flex; }
header:before { content: ''; position: absolute; z-index: -1; top: 0; right: 50%; bottom: 0; left:0; background: #282d8d; }
header:after { content: ''; position: absolute; z-index: -1; top: auto; right: 50%; bottom: 0; left:0; height: 60px; background: #f5f6fa; }
header .col-sidebar { order: 1; position: relative; padding: 30px 10px 30px 20px; }
header .col-header { order: 2; }

.col-sidebar { flex: 0 0 auto; width: 300px; }
.col-header { flex: 1; background-color: #eaebf0; padding: 30px 0 0 20px; }
.col-content { flex: 1; background-color: #eaebf0; padding: 25px 0 25px 25px; }

.page-container { position: relative; z-index: 1; }

.main-container { position: relative; }
.main-container .col-sidebar { padding: 20px 25px 25px 0; }
/*.main-container .col-sidebar:before { content: ''; position: absolute; z-index: -1; bottom: 0; top: 0; left: 0;  background: yellow;  }*/

.top-header { display: flex; justify-content: space-between; align-items: center; }
.top-header .logo { width: 175px; }
.top-header .cart-box { }
.top-header .btn-cart { background-color: #282d8d; color: #fff; width: 60px; height: 60px; }
.top-header .btn-cart>svg { width: 30px; height: 30px; }
.top-header .btn-cart:hover { background-color: #f27022; }
.top-header .btn-category { background-color: #f27022; }

.welcome-msg { font-size: 20px; font-weight: 500; color: #fff; }
.welcome-msg h3 { margin: 5px 0 30px 0; font-weight: 700; font-size: 24px; color: #f27022; }

.quick-links { display: flex; }
.quick-links a { display: inline-flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 100%; color: #282d8d; background-color: #fff; border: 1px solid #d6d6d6; }
.quick-links a+a { margin-left: 20px; }
.quick-links a svg { width: 26px; height: 26px; }
.quick-links a span { display: none; }
.quick-links a:hover { color: #fff; background-color: #ee7024; border-color: #ee7024; }

.category-menu {}
.category-menu ul { position: relative; margin: 0; padding: 0; list-style: none; }
.category-menu li { margin-top: 5px; }
.category-menu ul ul { display: none; }
.category-menu ul a { display: block; position: relative; text-transform: uppercase; text-decoration: none; border-radius: 0 8px 8px 0; padding: 10px 10px 10px 25px; font-size: 16px; font-weight: 500; background: #f9f9f9;

}
.category-menu>ul>li>a { position: relative; display: block; text-decoration: none; text-transform: uppercase; color: #343434; }
.category-menu>ul>li>ul a { background-color: #eaeaea; color: #343434; text-transform: none; font-size: 15px; padding-left: 35px; }
.category-menu>ul>li>ul a:before { content: ''; position: absolute; top: 50%; left: 20px; width: 4px; height: 4px; margin-top: -2px; border-radius: 100%;background-color: currentColor; }
.category-menu>ul>li>ul>li.even a { background-color: #eaebf0; }
.category-menu>ul>li>ul>li.odd a { background-color: #e5e5e5; }
.category-menu>ul>li>ul>li a:hover { background-color: #f27022; color: #fff; }
.category-menu span.cnt { position: absolute; top: 50%; left: 0; width: 26px; height: 26px; display: inline-flex; justify-content: center; align-items: center; text-align: center; border-radius: 100%; background-color: #f9f9f9;
    transform: translate(-50%, -50%); font-size: 12px; font-weight: 500; color: #000;
}
.category-menu>ul>li>a:hover { background-color: #282d8d; color: #fff; }
.category-menu>ul>li>a:hover .cnt { background-color: #f27022; color: #fff; }

.category-menu>ul>li.active { }
.category-menu>ul>li.active ul { border-left: 6px solid #f27022; }
.category-menu>ul>li.active>a { background-color: #282d8d; color: #fff; border-left: 6px solid #f27022; }
.category-menu>ul>li.active>a .cnt { background-color: #f27022; color: #fff; left: -4px; }
.category-menu>ul>li>ul a {  }

.search-menu>ul>li:first-child>a { background-color: #f27022; color: #fff; }
.search-menu>ul>li:first-child>a .cnt { background-color: #f27022; color: #fff; }
.search-menu ul ul li { padding: 0 0 0 10px; }
.search-menu .btn-search { position: absolute; top: 1px; right: 1px; width: 56px; height: 56px; border-radius: 100%; }
.search-menu .btn-search>svg { width: 20px; height: 20px; }
.search-menu .form-control { padding-right: 65px; }

.product-list ul { padding: 0; margin: 0; list-style: none; }
.product-list ul ul { display: none; }
.product-list>ul>li { border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.15); margin-bottom: 20px; }
.product-list>ul>li>a { position: relative; display: flex; background-color: #f9f9f9; border-radius: 8px; color: #343434; text-decoration: none;
    -webkit-transition: all 0.3s 0s ease; -moz-transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease;
}
.product-list>ul>li>a:hover { background-color: #fff; }
.product-list>ul>li>a .image { flex: 0 0 auto; width: 140px; padding: 20px; background-color: #fff; border-radius: 8px 0 0 8px; }
.product-list>ul>li>a .text { align-self: center; flex: 1; padding: 10px 10px 10px 20px; }
.product-list>ul>li>a .text .product-title { font-size: 20px; font-weight: 500; color: #282d8d; margin-bottom: 10px; }
.product-list>ul>li>a .text .product-desc {font-size: 14px; }
.product-list>ul>li>a>.cnt { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background-color: #fff; color: #282d8d; border-radius: 100%; font-size: 13px; font-weight: 500; display: flex; justify-content: center; align-items: center; }
.product-list>ul>li>a>.icon-discount { position: absolute; top: 10px; left: 10px; }
.icon-discount { width: 30px; height: 30px; background-color: #f27022; color: #fff; border-radius: 100%; display: inline-flex; justify-content: center; align-items: center; }
.icon-discount>svg{ width: 16px; height: 16px; }
.product-list>ul>li.active>a { background-color: #fff; border-radius: 8px 8px 0 0;  }
.product-list>ul>li.active>a>.cnt { background-color: #f9f9f9; }

.product-table-wrapper { background: #fff; border-radius: 0 0 8px 8px;  }

.product-table { margin-bottom: 0; font-size: 15px; font-weight: 400; }
.product-table thead { font-size: 10px; text-transform: uppercase; color: #343434; font-weight: 500; }
.product-table thead tr { background: #f5f6fa; }
.product-table thead th { text-align: center; padding: 8px 5px; }
.product-table thead th.name { text-align: left; width: 100%; }
.product-table thead th.qty { width: 100px; }
.product-table thead th.delete { width: 38px; }
.product-table tbody td.title { padding-left: 10px; }
.product-table tbody td.stock { text-align: right; }
.product-table tbody td { vertical-align: middle; padding: 15px 5px; }
.product-table>tbody>tr:nth-of-type(odd) td { background-color: #fff; }
.product-table>tbody>tr:nth-of-type(even) td { background-color: #f5f6fa; }
.product-table tbody tr:not(.summary-box, .summary-row):hover td { color: #282d8d; }
.product-table tbody td.name { width: 100%; font-weight: 500; }
.product-table tbody td.prices,
.product-table tbody td.price-sum { white-space: nowrap; }
.product-table tbody td.qty { white-space: nowrap; text-align: center; }
.product-table tbody td.qty .form-control { display: inline-block; }
.product-table .form-control { width: 44px; border-radius: .2rem; font-size: 12px; font-weight: 500; border-color: #d6d6d6; padding: 5px; text-align: center; }
.product-table .form-control:focus { border-color: #f27022; }
.product-table .product-sku { font-size: 12px; font-weight: 400; }
/*.product-table .product-sku strong { font-weight: 700; }*/
.product-table .price-sum { font-weight: 700; text-align: right; }

.address-wrapper { margin-top: .5rem; padding: 1rem; padding-top: .5rem; border: 1px solid rgba(0,0,0,.125); border-radius: .375rem; background-color: #f9f9f9; }
.address-wrapper label { font-size: 14px; font-weight: 700; }

#popup { position: fixed; bottom: 15px; right: 15px; z-index: 20; padding-bottom: 8px; pointer-events: none; background-color: #fff; }
#popup>h2 { font-size: 14px; font-weight: 700; padding: 8px 12px; /*color: #6c757d;*/ color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.05);
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
    /*background-color: #f9f9f9;*/
    background-color: #f27022;
}
#popup>h3 { font-size: 13px; font-weight: 500; margin: 5px 0 0 0; padding: 0 12px; }

#popupk,
#popupk * { display: none!important; }
#popupk>table#poptable {}

.category-box { display: none; }
.offcanvas-backdrop { display: none; opacity: 0; }
.sidebar-header { display: none; }
.sidebar-body {}

.login-page { height: 100vh; display: flex; justify-content: center; align-items: center; }
.login-box { font-size: 13px; width: 100%; max-width: 375px; padding: 0 15px; text-align: center; }
.login-box .logo { margin-bottom: 30px; }
.login-box .logo img { max-width: 150px; }
.login-box p { margin: 0 0 5px 0; }
.login-box .inner { background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); overflow: hidden; padding: 15px; border-radius: 8px; text-align: left; margin-top: 20px; }
.login-box .form-label { font-weight: 700; }
.login-box .form-control { font-size: 14px; }
.login-box .btn-submit { width: 100%; text-align: center; }

.user-profile {}
.user-box { width: 100%; max-width: 440px; margin: 0 auto; }
.user-box .inner { background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); overflow: hidden; padding: 15px; border-radius: 8px; margin-top: 20px;}
.user-box .form-control-plaintext { font-weight: 700; font-size: 20px; color: #f27022; padding: 0; border: 0 none; }
.user-box .form-control-plaintext:focus,
.user-box .form-control-plaintext:focus-visible { outline: none; border: 0 none; box-shadow: none }
.user-box .form-label { font-weight: 700; }
.user-box .btn { width: 100%; }

.page-orders .product-list .order-id { font-weight: 700; color: #282d8d; }
.page-orders .product-list .image { color: #f27022; }
.page-orders .product-list .button-wrapper { margin-top: 10px; }
.page-orders .product-table tbody td.qty { text-align: right; }

.footer { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 10px -10px 0 -10px; font-size: 11px; padding: 5px 0; }
.footer>div { padding: 0 10px; margin: 2px 0; text-align: center; }
.footer a { color: #f27022; text-decoration: none; }
.footer a:hover { color: #f27022; text-decoration: underline; }

.card-sm { font-size: 12px;
    --hsh-card-spacer-x: .5rem; --hsh-card-spacer-y: .5rem;
}
.card-user { height: 100%; font-size: .875rem;
    --hsh-card-cap-bg: transparent;
}
.card-user .card-title { font-size: 1rem; }
.card-user .card-footer {}

.fw-medium { font-weight: 500; }

.summary-box { border-top: 2px solid #282d8d; }
.summary-box td { background-color: #fff!important; }

.table-summary { margin-bottom: 0; width: auto; margin-left: auto; }
.table-summary tbody td { padding: 0 0; text-align: right; }
.table-summary .summary-value { font-weight: 700; width: 180px; }
.table-summary .sumamry-total { font-size: 1.25rem; font-weight: 700; }

.table-orders {}
.table-orders thead th { padding: 8px .75rem; }
.table-orders tbody td { padding: .75rem .75rem; }
.table-orders .orderid { text-align: left; }
.table-orders .billing { text-align: left; }
.table-orders .date { text-align: right; }
.table-orders .price { text-align: right; }
.table-orders thead .morebtn { width: 96px; }


.page-item.active .page-link { background-color: #282d8d; border-color: #282d8d; }

@media (max-width: 575.98px) {
    /*.table-responsive { border: 1px solid #282d8d; }*/
}

@media (max-width: 767.98px) {
    body.open { overflow: hidden; }
    body.open .offcanvas-backdrop { display: block; opacity: .5; }
    .offcanvas-backdrop { top: 60px; }

    header { }
    .header-spacer { height: 60px; }
    header .col-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1081; box-shadow: 0 0 10px rgba(0,0,0,.5);
        background-color: rgba(255,255,255,0.75);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }

    .page-container { position: static; }

    .category-box { display: block; }

    .main-container .col-sidebar {
        display: flex; flex-direction: column;
        position: fixed; z-index: 1080; top: 60px; bottom: 0; right: 100%; width: 100%; max-width: 75%; visibility: hidden; background-color: #fff;
        -webkit-transition: all 0.3s 0s ease; -moz-transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease;
    }
    .main-container .col-sidebar.open { visibility: visible; transform: translateX(100%); }

    .sidebar-header { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: #282d8d; color: #fff; }
    .sidebar-header h3 { margin: 0; }
    .sidebar-header .btn-close {
        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; }
    .sidebar-body { flex-grow: 1; overflow-y: auto; padding: 15px; }

    .main-container .page-container>.inner { margin: 0 -15px; }
    .main-container .col-sidebar { padding: 0; }
    .col-content { padding: 15px 15px; flex: 0 0 auto; width: 100%; }

    .category-menu ul a { padding: 5px 5px 5px 15px; font-size: 13px; }
    .category-menu span.cnt { font-size: 10px; width: 15px; height: 15px; }

    .category-menu>ul>li>ul a { font-size: 12px; padding-left: 20px; }
    .category-menu>ul>li>ul a:before { left: 10px; }

    .footer>div { width: 100%; }

}
@media (min-width: 768px) {

}
@media (min-width: 768px) and (max-width: 991.98px) {
    .main-container .page-container>.inner { margin: 0 -15px; }
    .main-container .col-sidebar { padding: 10px 10px 10px 15px; width: 230px; background-color: #fff; }
    .col-content { padding: 15px 15px 10px 10px; }

    .category-menu ul a { padding: 5px 5px 5px 15px; font-size: 13px; }
    .category-menu span.cnt { font-size: 10px; width: 15px; height: 15px; }

    .category-menu>ul>li>ul a { font-size: 12px; padding-left: 20px; }
    .category-menu>ul>li>ul a:before { left: 10px; }

    .form-floating>.form-control { padding: 5px 65px 5px 10px; height: 35px; font-size: 12px; }
    .form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) { padding-top: 10px; padding-bottom: 0; }
    .form-floating>label { padding: 10px 0 10px 10px; font-size: 11px; }
    .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
        transform: scale(.75) translateY(-5px) translateX(5px);
    }

    .search-menu ul ul li { padding-left: 5px; }
    .search-menu .btn-search { width: 33px; height: 33px; }
    .search-menu .btn-search>svg { width: 16px; height: 16px; }

    .category-menu>ul>li.active>a { border-left-width: 2px; }
    .category-menu>ul>li.active ul { border-left-width: 2px; }

}

@media (max-width: 991.98px) {

    body { font-size: 14px; }

    header {}
    body:before,
    header:before,
    header:after { content: none; display: none; }
    header .inner { flex-direction: column; margin: 0 -15px; }
    header .col-sidebar { order: 2; width: 100%; padding: 10px 15px; background-color: #282d8d; }
    header .col-header { order: 1; padding: 10px 15px; }

    .top-header .logo { width: 125px; }
    .top-header .btn-cart { width: 40px; height: 40px; }
    .top-header .btn-cart svg { width: 20px; height: 20px; }

    .welcome-msg { font-size: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
    .welcome-msg h3 { font-size: 16px; margin: 0 0 0 10px; }
    .quick-links { justify-content: center; }
    .quick-links a+a { margin: 0; }
    .quick-links a { width: 40px; height: 40px; margin: 0 5px!important; }

    .quick-links a svg { width: 20px; height: 20px; }

    .product-list>ul>li { margin-bottom: 10px; }
    .product-list>ul>li>a .image { padding: 10px; width: 100px; }
    .product-list>ul>li>a>.icon-discount { top: 5px; left: 5px; }
    .product-list>ul>li>a .text { padding: 5px 5px 5px 10px; }
    .product-list>ul>li>a .text .product-title { font-size: 16px; margin-bottom: 5px; }
    .product-list>ul>li>a .text .product-desc { font-size: 12px; }
    .product-list>ul>li>a>.cnt { font-size: 12px; width: 20px; height: 20px; }

    .product-table { font-size: 11px; }
    .product-table thead th { white-space: nowrap; }
    .product-table tbody td { padding: 8px 5px; }
    .product-table tbody td.title { min-width: 100px; padding-left: 5px; }

    .table-summary tbody td { padding: 0 0; }
    .table-summary .summary-value { font-weight: 700; width: auto; padding-left: 10px; }
    .table-summary .sumamry-total { font-size: 16px; }

    .icon-discount { width: 20px; height: 20px; }
    .icon-discount>svg { width: 10px; height: 10px; }

    .card-header { font-size: 16px; }

    .page-orders .product-list>ul>li>a .image { width: 60px; }
    .page-orders .product-list .button-wrapper { margin-top: 5px; }
    .page-orders .btn { font-size: 12px; padding: 4px 8px; }

}

@media (min-width: 1200px) {
    .page-container { max-width: 1170px; }
}

#scrollToTop {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    background: #FFFFFF;
    border: 1px solid #282d8d;
    border-radius: 50px;
    cursor: pointer;
    display: none;
}
#scrollToTop svg {
    stroke: #282d8d;
}

.product-list .item {

}