@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

@font-face {font-family: 'Material Icons';font-style: normal;font-weight: 400;src: local('Material Icons'), local('MaterialIcons-Regular'),url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),url(../fonts/MaterialIcons-Regular.woff) format('woff'),url(../fonts/MaterialIcons-Regular.ttf) format('truetype');}
.material-icons {font-family: 'Material Icons';font-weight: normal;font-style: normal;font-size: 24px; /* Preferred icon size */display: inline-block;line-height: 1;text-transform: none;letter-spacing: normal;word-wrap: normal;white-space: nowrap;direction: ltr;/* Support for all WebKit browsers. */-webkit-font-smoothing: antialiased;/* Support for Safari and Chrome. */text-rendering: optimizeLegibility;/* Support for Firefox. */-moz-osx-font-smoothing: grayscale;/* Support for IE. */font-feature-settings: 'liga';}
@font-face {font-family: 'Framework7 Icons';font-style: normal;font-weight: 400;src: url('../fonts/Framework7Icons-Regular.woff2') format('woff2'),url('../fonts/Framework7Icons-Regular.woff') format('woff'),url('../fonts/Framework7Icons-Regular.ttf') format('truetype');}
.f7-icons {font-family: 'Framework7 Icons';font-weight: normal;font-style: normal;font-size: 28px;line-height: 1;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;-moz-osx-font-smoothing: grayscale;-webkit-font-feature-settings: 'liga';-moz-font-feature-settings: 'liga=1';-moz-font-feature-settings: 'liga';font-feature-settings: 'liga';text-align: center;}
@font-face {font-family: 'GothamRounded-Book';font-style: normal;font-weight: 400;src: url('../fonts/GothamRounded-Book.woff2') format('woff2'),url('../fonts/GothamRounded-Book.woff') format('woff'),url('../fonts/GothamRounded-Book.ttf') format('truetype');}
@font-face {font-family: 'GothamRounded-Bold';font-style: normal;font-weight: 700;src: url('../fonts/GothamRounded-Bold.woff2') format('woff2'),url('../fonts/GothamRounded-Bold.woff') format('woff'),url('../fonts/GothamRounded-Bold.ttf') format('truetype');}
 
/* App theme */
.md {
  --f7-font-family:  'GothamRounded-Book', Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
}
:root{
    --f7-md-primary-shade: #3E0609;
    --f7-md-primary-tint: #e90100;
    --f7-md-primary-rgb: 62, 6, 9;
    --f7-md-primary: #3E0609;
    --f7-md-on-primary: #ffffff;
    --f7-md-primary-container: #ffdad4;
    --f7-md-on-primary-container: #3E0609;
    --f7-md-secondary: #775651;
    --f7-md-on-secondary: #ffffff;
    --f7-md-secondary-container: #ffdad4;
    --f7-md-on-secondary-container: #2c1512;
    --f7-md-on-surface: #2c1512;
    --f7-navbar-bg-color: #CBBDA0;
    --f7-subnavbar-bg-color: #CBBDA0;
    --f7-page-bg-color: #e9dfcc;
    --f7-input-outline-border-radius: 16px;
    --f7-searchbar-input-bg-color: #A48A7B;
    --f7-table-label-cell-padding-horizontal: 12px;
    --f7-range-label-font-size: 8px;
    --f7-range-label-size: 40px
}
.dark {

  --f7-md-primary: #A48A7B;
    --f7-md-on-primary: #fff;
 
    --f7-md-primary-container: #3E0609;
    --f7-md-on-primary-container: #CBBDA0;
 
    --f7-md-secondary-container: #3E0609;
    --f7-md-on-secondary-container: #CBBDA0;
 
}
/* Panels */
.panel {min-width: 270px;max-width: 90%;}

/* Common */
.img-fluid{max-width: 100%;}
.w-100 {width:100%!important}
.h-100 {height:100%!important}
.overflow-hidden {overflow: hidden!important;}
.text-nowrap {white-space: nowrap!important;}
.rounded-0 {border-radius: 0!important;}
.img-round {border-radius: 50%;}
.bg-transparent {background-color: transparent!important;}
.position-relative {position: relative;}

/* Panel Left */
.panel-left .page-content {display: flex;display: -webkit-flex;flex-flow: column;}

.panel-left-header {background-color: var(--f7-theme-color);}  
.panel-left-header img {display: block;background-color: #ffffcc;border-radius: 50%;margin: 0 auto;max-width: 100px;}
.panel-left-header .item-title {font-weight:bold;font-size: var(--f7-list-item-title-font-size); color:var(--f7-md-on-primary);}
.panel-left-header .item-subtitle, .panel-left-header .item-footer{ color:var(--f7-md-on-primary);}

.panel-left .list ul {background: transparent !important}
.panel-left-list ul li {border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important}
.panel-left .item-title {white-space: normal;font-size: 14px;}
 
.panel-left-footer {margin-top: auto;margin-bottom: 0;}

.panel-left .tabbar-label {font-size: 10px!important;}
.panel-left  .tab-link-highlight {display: none;}

/* Login Page */
.login-page {padding:0;position: relative;background: #5B1C13 url(../img/bg-login.jpg) no-repeat center center;background-size: cover; min-height: 100%;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: flex-start; align-items: stretch; align-content: stretch;}
.login-page-header{padding:32px 32px;position: relative;z-index:99;text-align: center;}
.login-page-content {position: relative;flex: 1;}
.login-page-footer{ padding:32px;}.login-page-footer a.text-link {text-decoration: underline;}
.login-logo {position: relative;}
.login-logo img {filter: contrast(0) brightness(2);}   
 
  
.login-block {margin:0 auto;background:rgba(255, 255, 255, 0.8); border-radius:var(--f7-card-border-radius);border: 1px solid #ccc;padding:0;max-width:330px;width: 100%; z-index: 1;position: relative;}
.login-box{padding:16px;z-index: 1;}
.login-box .list {margin:0px;}
.login-box .list ul {background: transparent;}
.login-box .list .item-content {padding-left: 0px;margin: 0;}
.login-box .list .item-content::before {background-color: transparent!important;}
.login-box .item-inner { padding-right:0px; }
.login-box .item-input-wrap input, .login-box .item-input-wrap select{padding-right: 36px;width: auto }
.login-box .item-floating-label{z-index: 1;}
.icon-pwd {right:5px;left: auto !important;}
.item-after.item-media-password {width: 45px;}
.input-media-password .icon-pwd {position: absolute;} 
.input-with-value .input-media-password, .input-with-value~.input-media-password, .item-input-with-value .input-media-password {opacity: 1;pointer-events: auto;visibility: visible;}
.input-media-password {opacity: 0;display: flex;align-items: center;pointer-events: none;visibility: hidden;transition-duration: .1s;position: absolute;top: 50%;border: none;padding: 0;margin: 0;outline: 0;z-index: 1;cursor: pointer;
background: 0 0;width: var(--f7-input-clear-button-size);height: var(--f7-input-clear-button-size);margin-top: calc(-1* var(--f7-input-clear-button-size) / 2);color: var(--f7-input-clear-button-color);right:30px;}

/* bg subnavbar */
.subnavbar::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 50%;border-radius: 0 0 16px 16px; background-color: var(--f7-navbar-bg-color);z-index: -1;}

/*Home Page */
.button-scrollable, .scrollable-content {overflow: auto;-webkit-overflow-scrolling: touch;scrollbar-color: #0000;scrollbar-width: none;align-items: center;box-sizing: border-box;display: flex;
padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));}
.button-scrollable a {flex-shrink: 0;width: auto;margin-right:4px;margin-left:4px;}
.scrollable-content li{flex-shrink: 0;width:100%;max-width: 200px; margin-right: 16px;}

/* Prod Box */
.grid-gap-1{gap: 1px;}
.grid-item{display: flex;}
.prod-box{position:relative}
.prod-img img{ display: block;width: 100%;height: auto;}
.prod-status{position: absolute;top:6px;left:6px;background: rgba(0, 0, 0, 0.8);color: #fff;font-size:11px;padding: 2px 6px;border-radius: 4px;z-index: 9;}
.prod-details{padding: 8px 16px;position: absolute;bottom: 0;left: 0;right: 0; background: rgba(0, 0, 0, 0.8);display: flex;justify-content: space-between;}
.prod-title{font-size:15px;color:#fff;font-family: 'GothamRounded-Bold', sans-serif}
.prod-subtitle{font-size: 16px;color:#333;margin-top:4px;}
.prod-price{font-size: 16px;color:#000;font-family: 'GothamRounded-Bold', sans-serif;margin-top:4px;}
.prod-location{font-size: 14px;color:#ccc;margin-top:2px;}

.price-col{width: 80px;}

/* Vertical Tabs Sidebar */
.bg-filter-menu{background: #f8f8f8;height: 100%;}
.col-30{width: 30%;}
.col-70{width: 70%;}
.vertical-tabs {background: #e9dfcc;height: 100%;}
.vertical-tabs .list ul {display: flex;flex-direction: column;}
.vertical-tabs .tab-link {padding: 12px;font-size: 14px; display: block;text-decoration: none;transition: background 0.3s;}
.vertical-tabs .tab-link-active {background: #f8f8f8;color: #333;}

/* Swiper Gallery */
.demo-swiper-gallery-top {height: auto;}
.demo-swiper-gallery-thumbs {margin-top: 10px;height: 20%;height: -webkit-calc(30% - 20px);height: -moz-calc(30% - 20px);height: -ms-calc(30% - 20px);height: calc(30% - 20px);}
.demo-swiper-gallery-thumbs .swiper-slide-pic {height: 100%;position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.35;transition: 300ms;}
.demo-swiper-gallery-thumbs .swiper-slide-thumb-active .swiper-slide-pic {opacity: 1;}
.demo-swiper-gallery-top swiper-slide,
.demo-swiper-gallery-thumbs .swiper-slide-pic {background-size: cover;background-position: center;}

.navbar-large .right {opacity: var(--f7-navbar-large-collapse-progress);}
.navbar .title-large-location {font-size: 14px;margin-left: 16px;}
.app-data-table b{font-size:15px;font-family: 'GothamRounded-Bold', sans-serif;}
 

@media (min-width: 768px) {
 .prod-details-grid {grid-template-columns: 40% 60%;}
 .medium-block{padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));}
}

.mob-input {display:flex;gap: 16px}
.mob-input select {flex: 0 0 80px}
.mob-input input {flex: 1;}

/* Searchbar */
.searchbar-home .input-clear-button {right: 50px !important;opacity: 0.5!important;}
.searchbar-home input[type=search], .searchbar-home input[type=text] {padding-left: calc(var(--f7-searchbar-input-padding-horizontal));}
.searchbar-submit-button {
color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
display: flex;align-items: center;justify-content: center;
height: 48px;width: 48px!important;
right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right));
position: absolute;transition-duration: .3s;
}

.unit-left {
    margin-left: 5px;
}
.unit-right {
    margin-right: 5px;
}