@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap);
/* #root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
} */

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}







.container {
    position: relative;
}
#loader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 1);
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

/* --- Header.css --- */

/* Variables (optional, but good for consistency) */
:root {
  --header-primary-color: #ff8306; /* Your orange */
  --header-text-color: #333;
  --header-text-light: #666;
  --header-bg-color: #ffffff;
  --header-border-color: #e0e0e0;
  --header-popover-bg: #ffffff;
  --header-popover-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  --header-popover-border-radius: 8px;
}

/*
  Assuming the direct parent of <Header /> component in your App.js or layout
  is styled with display: flex, align-items: center, justify-content: space-between,
  and has a background, padding, etc.
  For example:
  .app-actual-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  If not, the very first div in Header's return needs to handle this.
  The JSX provided for Header starts with a Fragment <>, so its direct children
  (<div className="header-menu-icon-container"> and <div className="header-user-section">)
  need to be placed correctly by their parent.
*/


/* Menu Icon Area */
.header-menu-icon-container {
  display: flex;
  align-items: center;
  /* margin-right: auto; Pushes user section to the right if parent is flex */
}
.header-menu-icon {
  cursor: pointer;
  color: var(--header-primary-color) !important; /* Override inline style */
  font-size: 30px !important; /* Override inline style, adjust as needed */
  padding: 5px; /* Add some clickable area */
}
.header-menu-icon:hover {
  opacity: 0.8;
}


/* User Info and Popover Section */
.header-user-section { /* This was .d-flex.col-11 */
  display: flex; /* Ensures items inside are in a row */
  justify-content: flex-end; /* Aligns avatar to the right */
  align-items: center;
  flex-grow: 1; /* Takes remaining space if header is flex */
}

.header-infobar { /* This was #infobar */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Align its content (avatar) to the right */
  width: auto; /* Shrink to content */
  position: relative; /* For popover positioning */
  gap: 15px; /* Space between balance card and avatar */
}

/* Balance Card Styles */
.header-balance-card {
  background: linear-gradient(135deg, #ff8306 0%, #ffa500 100%);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 120px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.header-balance-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #e07000 0%, #ff8c00 100%);
}

.balance-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.balance-label {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.9;
  margin-bottom: 2px;
}

.balance-amount {
  font-size: 1rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.balance-warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.warning-icon {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

.warning-text {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.9;
}

.header-avatar-container { /* This was div.message */
  cursor: pointer;
  position: relative; /* If any badges or indicators are added */
}

.user-avatar-image { /* Class added to react-avatar component */
  /* react-avatar usually handles its own styling well. Add overrides if needed. */
  /* Example: border: 2px solid var(--header-primary-color-lighter); */
  object-fit: cover;
}

/* User Popover */
.user-popover {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Example font */
  width: 220px; /* Fixed width for popover */
  background: var(--header-popover-bg);
  padding: 15px; /* Increased padding */
  position: absolute;
  top: calc(100% + 10px); /* Position below avatar, adjust 10px offset as needed */
  right: 0; /* Align to the right of the avatar container */
  z-index: 1100; /* Above header content */
  border-radius: var(--header-popover-border-radius);
  box-shadow: var(--header-popover-shadow);
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Stretch items to full width */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0s linear 0.2s;
}

.user-popover.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.user-popover-username {
  font-weight: 600;
  color: var(--header-text-dark);
  font-size: 1rem;
  margin-bottom: 4px;
  text-align: center; /* Center align text */
  word-break: break-all; /* Prevent overflow */
}

.user-popover-name {
  font-size: 0.875rem;
  color: var(--header-text-light);
  margin-bottom: 15px; /* Space before logout button */
  text-align: center; /* Center align text */
  word-break: break-all;
  border-bottom: 1px solid var(--header-border-color); /* Separator */
  padding-bottom: 10px;
}

.user-popover-logout-button {
  background: var(--header-primary-color);
  color: white;
  padding: 10px 15px;
  border-radius: 6px; /* Rounded corners */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-weight: 500;
  font-size: 0.9rem;
}
.user-popover-logout-button:hover {
  background: #e07000; /* Darker shade of primary color */
}
.logout-icon {
  margin-right: 8px;
  font-size: 1.1rem; /* Adjust icon size */
}
.logout-text {
  /* Style if needed */
}

#header{
  padding-top: 5px;
  padding-bottom: 5px;
}
.app-header{
  display: flex;
}
/* Responsive Adjustments */
@media (max-width: 767.98px) { /* Small devices (tablets and smaller phones) */
  .header-menu-icon-container {
    /* Ensure it's always visible or controlled by parent component's logic if sidebar is off-canvas */
  }
  .user-popover {
    /* Make popover slightly wider or adjust position if it goes off-screen */
    /* Example: right: 5px; left: auto; transform-origin: top right; */
    /* Width could be more dynamic: min-width: 180px; width: auto; max-width: 250px; */
  }
}

@media (max-width: 575.98px) { /* Extra small devices (phones) */
  /* Header itself might need padding adjustments if not handled by parent */
  /* .app-header { padding: 0.5rem 1rem; } */

  .header-menu-icon {
    font-size: 26px !important; /* Slightly smaller menu icon */
  }
  .user-avatar-image { /* If using react-avatar, might need to target its generated classes for size */
    /* Example: width: 32px !important; height: 32px !important; */
  }
  .user-popover {
    padding: 12px; /* Slightly less padding in popover */
    /* top: calc(100% + 5px); */ /* Closer to avatar */
  }
  .user-popover-username { font-size: 0.95rem; }
  .user-popover-name { font-size: 0.8rem; margin-bottom: 12px; padding-bottom: 8px; }
  .user-popover-logout-button { padding: 8px 12px; font-size: 0.85rem; }
  .logout-icon { font-size: 1rem; }
  
  /* Balance card mobile adjustments */
  .header-balance-card {
    min-width: 100px;
    padding: 6px 10px;
  }
  .balance-label, .warning-text {
    font-size: 0.7rem;
  }
  .balance-amount {
    font-size: 0.9rem;
  }
  .warning-icon {
    font-size: 1rem;
  }
  .header-infobar {
    gap: 10px; /* Smaller gap on mobile */
  }
}



















@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
    div.menures{
    display: none !important;
    
 }
}
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 760px) and  (max-width:1240px)and (orientation:portrait) {
  div.menures{
    display: none !important;
    
 }  
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
  div.menures{
    display: none !important;
    
 }
}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait){
  div.menures{
    display: none !important;
    
 }
}

div.main{
   padding: unset  !important;
}
div[name="asli"]{
   background: #f0f0fa;
}
div[name="dashboard"] div{
   font-family: sans-serif;
   font-weight: bolder;
}
div[name="mainmenu"] div.item{
   font-family: sans-serif;
   font-weight: bolder;
  }

div[name="mainmenu"]{
         background: white;
  }


div[name="mainmenu"] >div{
   cursor:pointer;
}

div[name="mainmenu"] .k-expander.k-expanded.k-focus{
   flex: 1;
   border: 0px !important;
   box-shadow: unset !important;
}
div[name="mainmenu"] .k-expander.k-expanded{
   flex: 1;
   border: 0px !important;
}
div[name="mainmenu"] .k-expander-content{
   padding-block: opx !important;
}

div[name="mainmenu"] .k-expander-content div.list div{
   text-align:right ;
   color: #939090;
}
div[name="mainmenu"] .k-spacer,.k-flex{
   width: 0px;
   flex: unset !important;
} 
div[name="mainmenu"] .k-expander-indicator{
   margin-left: 5vw;
}


div[name="mainmenu"] .k-expander-header{
   /* justify-content: start; */
}  

div[name="mainmenu"] .k-expander-title svg{
   font-size: 19px;
   margin-left: 9px;
   margin-right: 8px;

}
div[name="mainmenu"] .k-expander-header:hover, .k-expander-header.k-hover{
   /* background-color: white !important; */
}






div#content{
    flex:10;
    background-color:#f0f0fa;
    display: flex;
    flex-direction: column;
}
div.section1.mainconmaincontenttnt{
    flex:1;
    background: transparent;
    padding-top: 2vh;
    padding-left: 1vw;
}
div.section1.maincontent span{
    font-size: 2vw;
    font-weight: bolder;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

 div.section2{
    /* display: flex;
    flex:1; */
    background-color: transparent;
 }

 div.section2 div.chart{
    flex: 1;
    margin-right: 1vw;
    margin-left: 1vw;
 }

 div.section3{
    display: flex;
    flex:1;
    background-color: transparent;
 }
 div.section4{
    display: flex;
    flex:1;
    background-color: transparent;
 }
 div.section5{
    display: flex;
    flex:1;
    background-color: transparent;
 }
 div.section6{
    display: flex;
    flex:1;
    background-color: transparent;
 }
 div.section6 div.k-grid-header tr{
  background: #ff8522 !important;
}


 div.section3{
   flex:37;
   background: transparent;
   padding-top: 2vh;
   padding-left: 1vw;
   padding-right: 1vw;
}
div.section3 .k-table-row.k-master-row.k-table-alt-row.k-alt{
   background: white;
}

div.section3  thead tr{
   background: white;
}
div.section3 .k-grid{
   border: 0px !important;
}
div.section3 .k-grid .k-table-th, .k-grid td, .k-grid .k-table-td{
   border-right: 0px !important;
   border-left: 0px !important;
   border-bottom: 1px solid #d0d1d3
}
div.section3 .k-grid-md td, .k-grid-md .k-table-td{
   border-bottom:1px solid #d0d1d3;
   font-weight: 900;
   color: #100f0f;
   font-family: segoe;
   font-size: 12px;
}
div.section3 .k-grid-content.k-virtual-content{
   display: contents;
}
div.section3 .k-grid-header{
   display: contents;
}
div.section3 span.k-cell-inner{
   border-bottom:1px solid #d0d1d3
}
div.section3 span.k-column-title{
   font-weight: 900;
   padding-left: 2px;
   font-family: 'segoe';
}
div.section3 .k-progressbar{
   border-radius: 10px !important;
}
div.section3 .k-progressbar .k-selected{
   background-color: #ff8522 !important;
}
div.section3 .k-progressbar-horizontal{
   height: var(--kendo-progressbar-height, 13px) !important;
} 
div.section3 .k-progress-status{
   color: #15151a;
   font-weight: bolder;
}

div.section3 .k-picker-solid{
   background: white;
}

div.section3 .right .header .right button{
   background: white;
   border:0px
}
div.section3 .k-button-solid-base:focus, .k-button-solid-base.k-focus{
   box-shadow: unset !important;
}
div.section3 div.k-animation-container{

}
.mypop{
      width: 15vw;
      font-size: 89px;
}
div.section4 div.k-card-body{
   border: 2px solid #868282;
}
div.section4 .k-card{
   margin-right: 1vw;
   max-height: 32vh;
   flex:1;
   display: flex;
   box-shadow: 0px 0px 0px 1px #ccc;
}
div.section4 .k-card-body{
   height: 10vh;
   flex:10 !important;
   overflow: hidden;
}
div.section4 .k-card-footer{
   padding-block: 0px !important;
}



div.section3 div.left{
   display: flex;
   flex-direction: column;
   flex:1;
   background-color: white;
   margin-right: 2vw;
}
div.section3 div.left div.header{
   display: flex;
   flex: 1;
}

div.section3 div.left div.header div.left{
    flex: 4;
    padding-left: 20px;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    justify-content: center;
}
div.section3 div.left div.grid
{
   flex:3;
   background: white;
   /* margin-top: 22px; */
   border-top:1px solid #d0d1d3
}

div.section3 div.left div.header div.right{
   flex: 2;
   display: flex;
   justify-content: center;
   align-items: center;
}

div.section3 div.left div.header div.right button{
  /* width: 50%; */
  background-color: #ff8522;
  border-color:#ff8522 ;
  font-size:15px !important;
  padding: 10px 23px !important;
}

div.section3 div.right{
   display: flex;
   flex-direction: column;
   flex:1;
   background-color: white;
}


div.section3 div.right div.header{
   display: flex;
   flex: 1;
}

div.section3 div.right div.header div.left{
   flex: 4;
   padding-left: 20px;
   font-size: 22px;
   font-weight: 700;
   display: flex;
   justify-content: center;
}


div.section3 div.right div.header div.right{
   flex: 2;
   display: flex;
   justify-content: center;
   align-items: center;
}


div.section3 div.grid{
   padding-left: 2vw;
   padding-right: 2vw;
}
div.grid div.dashboardgridrow{
   border-bottom:1px solid #dee7f0;
   /* height:180px !important */
  
}

div.grid div.ag-header-row.ag-header-row-column{
   border-bottom:1px solid #dee7f0
}
div.grid div.ag-header-row.ag-header-row-column{
   border:0px !important
}

.ag-theme-quartz {
   /* disable all borders */
   --ag-borders: none;
   --ag-border-color:transparent !important;
}
div.ag-header.ag-pivot-off.ag-header-allow-overflow{
   border-bottom-color: #f0f0fa;
   background-color: transparent !important;
}
span.ag-header-cell-text{
   font-weight: 800;
}

div[role="gridcell"]{
   color: #9e9e9e;
   font-weight: bold
}

div.rs-dropdown.rs-dropdown-placement-bottom-start{
   direction: rtl;
    width: 100%;
    border: 1px solid #f0f0f0;
    margin-right: 24px;
    border-radius: 5px;

}

button.rs-dropdown-toggle.rs-btn.rs-btn-default{
   background: transparent;
   border: 0px;
   display: flex;
   padding-right: 0px !important;
}


div.rs-dropdown.rs-dropdown-placement-bottom-start ul{
   list-style-type: none !important;

}

div.section3 div.right div.progress
{
   display: flex;
   flex-direction: column;
   flex:3;
   background: white;
   /* margin-top: 22px; */
   border-top: 1px solid #f0f0fa;
   justify-content: center;
   align-items: center;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

div.innerprogress div:has(span.bbb){
   justify-content: center !important;
   /* border-radius: 0px !important; */
}

div.section4{
   flex:1;
   background: transparent;
   padding-top: 2vh;
   padding-left: 1vw;
   padding-right: 1vw;
}
div.section4 div.main{
   background-color: transparent;
   display: flex;
   flex-direction: column;
   width: 100%;
}
div.section4 div.main div.header{
   font-family: sans-serif;
   font-size: 20px;
   font-weight: 800;
   padding: 15px;
   background-color: white;
}

div.section4 div.main div.content{
   display: flex;
   padding: 10px;
   margin-top: 2px;
   background-color: white;
   justify-content: space-between;
}
div.section5{
    /* background-color: white; */
}
div.section5 div.left div.header{
   border-bottom: 2px solid #ccc;
   font-weight: bolder;
   font-size: 2vw;
}
div.section5 div.main{
   background-color: transparent;
   display: flex;
   flex-direction: column;
   width: 100%;
}
div.section5 div.main div.left{
  flex: 2.5;
  background-color: white;
}
div.section5 div.main div.right{
   flex: 2;
   /* background-color: white; */
 }

 div.section5 div.right div.header{
   border-bottom: 2px solid #ccc;
   font-weight: bolder;
   font-size: 2vw;
   background: white;
}
div.section5 div.days button{
   border-radius: 2px;
   flex: 1;
    border-radius: 1px;
    margin-right: 12px;
    max-height: 98vh;
}
div.section5 .k-grid{
   border: 0px !important;
}
div.section5 .k-grid .k-table-th, .k-grid td, .k-grid .k-table-td{
   border-right: 0px !important;
   border-left: 0px !important;
   border-bottom: 2px solid #d0d1d3
}
div.section5 .k-grid-md td, .k-grid-md .k-table-td{
   border-bottom:1px solid #d0d1d3;
   font-weight: 900;
   color: #575757;
   /* background-color: white !important; */
   font-family: 'segoe';
   text-wrap-mode: nowrap;
   padding-left: 4px !important;
   padding-right: 4px !important;
}
div.section5 .k-grid-content.k-virtual-content{
   display: contents;
}
div.section5 .k-grid-header{
   display: contents;
}
div.section5 thead tr{
   background-color: #f4f4f4;
}
div.section5 .totalincom {
   flex: 1;
   border-right: 2px solid #ccc;
}
div.section5 .totalincom svg{
   font-size: 6vh;
   margin-bottom: 2vh;
   margin-top: 2vh;
   
}

div.section6{
   background-color: white;
}

div.section6 div.header{
   /* border-bottom: 2px solid #ccc; */
   font-weight: bolder;
   font-size: 2vw;
   background-color: white;
}


div.section6 div.grid div.dashboardgridrow{
   border-bottom:1px solid #dee7f0;
   /* height:180px !important */
  
}

div.section6 div.grid div.ag-header-row.ag-header-row-column{
   border-bottom:1px solid #dee7f0
}
div.section6 div.grid div.ag-header-row.ag-header-row-column{
   border:0px !important
}
div.section6 .k-grid-content.k-virtual-content{
   display: contents;
}
div.section6 .k-grid-header{
   display: contents;
}

div.section6 .k-grid-header-wrap{
   background-color: #ff8522;
}

div.section6 thead{
   background-color: transparent;
}
div.section6 thead th{
   border:0px !important;
   color:white;
   font-weight: 900 !important;
}
div.section6 .grid tbody td{
   font-weight: 600;
   font-family: sans-serif;
   text-align: center;
 }
div.section6 .grid tbody td:nth-child(1){
  color: black;
  padding-left: 4px !important;
}
div.section6 div.grid .k-grid.k-grid-md{
   padding-left: 3px;
   padding-right: 3px;
   border: 0px;
}
div[name="asli"] .k-card-body{
   padding-block:unset !important;
   padding-inline:unset !important;
}
div[name="asli"] div.section4 .k-card{
   box-shadow: unset !important;
}

div.section5 div.right div.grid thead th{
   background: #ff8522;
}


div.section3 div.left table tbody tr:nth-of-type(even) td div{
   /* background: transparent !important; */
}
div.section6  table tbody tr:nth-of-type(even) td div{
   background: transparent !important;
}
div[name="asli"] div.section3 div.k-grid-header tr{
   background:#ff8731 !important
}
/* ==========================================================================
   DashboardImprovements.css
   ========================================================================== */
/* @font-face {
  font-family: 'Fantasy'; 
  src: local('Fantasy'),
       url('./assets/fonts/Fantasy.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;  
} */

/* --- Global & Typography --- */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    background-color: rgb(240, 240, 250);
    margin: 0; /* Ensure no default body margin */
    line-height: 1.6;
}
.clear-filters-btn{
    background-color: #333 !important;
}
.logofonts{
    font-family: 'fantasy';
}
.swiper{
    padding-bottom: 5% !important;
}
.swiper-slide p{
    font-size: 1.2rem;
    font-weight: bold;
}
.swiper-button-prev, .swiper-button-next{
    color: #ff7500 !important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
      background: #ff7500 !important;

}
h1, h2, h3, h4, h5, h6 {
    color: #111;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

a {
    color: #ff5215;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* --- Main Layout --- */
/* Assuming .attribute.d-flex is the top-level wrapper for the page */
.attribute.d-flex {
    min-height: 100vh; /* Make sure layout takes full viewport height */
}

.menures {
    background: white;
    box-shadow: 3px 0px 15px rgba(0, 0, 0, 0.05);
    /* width: 260px; /* Consider a fixed width */
    /* z-index: 100; */
    display: flex;
    flex-direction: column;
}

#header {
    background: white;
    padding: 10px 25px; /* Increased padding */
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    display: flex; /* Ensure items inside header align well */
    align-items: center;
}

/* Main content area wrapper after menu and header */
.d-flex.flex-column.mb-4.w-100[style*="max-width:98.99vw"] {
    overflow-x: hidden; /* Prevent horizontal scroll if max-width causes issues */
}

/* General container for dashboard sections */
.d-flex.flex-column.col-12.grid[style*="backgroundColor:rgb(240 240 250)"] {
    padding: 20px; /* Add overall padding to the content area */
}


/* --- Common Card Styling --- */
.dashboard-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard-card-header {
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-card-header .right button,
.dashboard-card-header .right .btn {
    background-color: #ff5215;
    border-color: #ff5215;
    color: white !important; /* Ensure text color is white */
    padding: 8px 18px;
    font-size: 0.9rem;
    border-radius: 6px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dashboard-card-header .right button:hover,
.dashboard-card-header .right .btn:hover {
    background-color: #e04000;
    border-color: #e04000;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.dashboard-card-content {
    padding: 25px;
    flex-grow: 1;
}

/* --- Section Specific Styling --- */

/* Welcome Message (Section 1) */
.section1.maincontent {
    padding: 20px; /* Reduced from 25px if inside overall padded area */
    margin-bottom: 25px;
    /* Optional: Make it look like a card if desired */
    /* background-color: #fff; */
    /* border-radius: 12px; */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
}
.section1.maincontent span {
    font-size: 1.5rem;
    color: #34495e;
    font-weight: 500;
}

/* Charts (Section 2) */
.section2 {
    display: flex; /* این باید حتما باشد */
    flex-wrap: wrap; /* اجازه می‌دهد آیتم‌ها در صورت نبود فضا به خط بعدی بروند */
    gap: 20px; /* فاصله بین کارت‌ها */
    margin-bottom: 25px;
    align-items: flex-start;
}

.section2 .chart {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
    padding: 15px; /* پدینگ داخلی کارت */

    /* --- تنظیمات کلیدی برای اندازه و چیدمان --- */
    flex-grow: 1;     /* <<< جدید: به کارت‌ها اجازه می‌دهد در فضای موجود رشد کنند تا ردیف را پر کنند */
    flex-shrink: 1;   /* به کارت‌ها اجازه می‌دهد در صورت نیاز کوچک شوند */
    flex-basis: 0;    /* <<< جدید: عرض اولیه صفر است، flex-grow توزیع را انجام می‌دهد.
                           این کمک می‌کند تا 4 کارت به طور مساوی فضا را تقسیم کنند.
                           می‌توانید از یک مقدار مثل 200px هم استفاده کنید (flex-basis: 200px)
                           و سپس با max-width عرض را محدود کنید. */

    min-width: 220px; /* <<< مهم: حداقل عرضی که هر کارت باید داشته باشد قبل از شکستن خط.
                           این عدد را طوری تنظیم کنید که 4 کارت در دسکتاپ جا شوند.
                           (عرض صفحه - (3 * gap)) / 4 = تقریبا min-width مناسب */

    /* max-width: calc(25% - 15px); */ /* <<< یک راه برای اینکه دقیقا 4 تا در یک ردیف باشند.
                                            15px = (3 * 20px gap) / 4.
                                            این را می‌توانید فعال کنید اگر flex-basis: 0 کار نکرد. */

    display: flex; /* <<< مهم: برای کنترل محتوای داخلی کارت (عنوان، زیرعنوان، چارت) */
    flex-direction: column; /* محتوای داخلی کارت زیر هم قرار می‌گیرد */
    min-height: 280px; /* <<< جدید: یک حداقل ارتفاع برای کارت‌ها (اختیاری) */
    max-height: 320px; /* <<< جدید: یک حداکثر ارتفاع برای کارت‌ها (اختیاری، برای کنترل ارتفاع زیاد) */
    /* overflow: hidden; */   /* <<< اگر از max-height استفاده می‌کنید و محتوا بیشتر است، این را فعال کنید */
}

.section2 .chart .apexcharts-title-text {
    font-weight: 600 !important;
    color: #2c3e50 !important;
    font-size: 0.9rem !important; /* فونت کوچک‌تر برای عنوان */
    margin-bottom: 4px !important; /* فاصله کمتر */
    white-space: nowrap; /* جلوگیری از شکستن عنوان به خط بعدی اگر خیلی طولانی است */
    overflow: hidden;
    text-overflow: ellipsis; /* نمایش "..." برای عنوان طولانی */
    flex-shrink: 0; /* عنوان نباید کوچک شود */
}
.section2 .chart .k-chart{
    height: 140px;
}
.section2 .chart .apexcharts-subtitle-text {
    font-size: 1.4rem !important; /* فونت کوچک‌تر برای عدد */
    font-weight: bold !important;
    color: #ff5215 !important;
    margin-bottom: 8px !important; /* فاصله قبل از چارت */
    flex-shrink: 0; /* زیرعنوان نباید کوچک شود */
}
/* Ensure chart itself takes available space */
.section2 .chart .apexcharts-canvas,
.section2 .chart > div[id^="apexcharts"] /* سلکتور جایگزین برای کانتینر چارت */
 {
    flex-grow: 1 !important; /* <<< چارت فضای باقی‌مانده در کارت را پر کند */
    min-height: 150px !important; /* <<< یک حداقل ارتفاع برای خود گراف چارت */
    max-height: 200px !important; /* <<< یک حداکثر ارتفاع برای خود گراف چارت (برای کنترل دقیق‌تر) */
    height: 180px !important; /* <<< یا یک ارتفاع ثابت برای خود گراف چارت */
    overflow: hidden !important; /* برای اطمینان از عدم سرریز محتوای چارت */
}

/* My Orders & Orders In Production (Section 3) */
.section3 {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    /* padding: 0 20px 20px 20px; /* Removed as parent has padding */
    margin-bottom: 25px;
}

.section3 > .left,
.section3 > .right {
    flex: 1 1 45%;
    min-width: 320px;
    /* Applying common card styles directly */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.section3 > .left > .header,
.section3 > .right > .header {
    /* Using .dashboard-card-header styles */
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section3 > .left > .grid, /* div containing AG Grid */
.section3 > .right > .progress { /* div containing progress bars */
    /* Using .dashboard-card-content styles */
    padding: 25px;
    flex-grow: 1;
}

.section3 .ag-theme-quartz {
    height: 350px;
    border: none;
}

.section3 .right .progress > div[style*="font-family:sarabun"] { /* No data message */
    text-align: center;
    padding: 30px 20px;
    color: #7f8c8d;
    font-style: italic;
    font-size: 1rem;
}
/* Example for Dashboardprogress (you'll need to adapt to its actual structure) */
/* .dashboard-progress-item { margin-bottom: 15px; }
.dashboard-progress-item .name { font-size: 0.9rem; color: #555; margin-bottom: 5px; }
.dashboard-progress-item .progress-bar-wrapper { background-color: #ecf0f1; border-radius: 5px; height: 10px; overflow: hidden;}
.dashboard-progress-item .progress-bar-fill { background-color: #ff5215; height: 100%; border-radius: 5px; transition: width 0.3s ease-in-out;} */


/* Trend Sales (Section 4) */
.section4 {
    /* padding: 0 20px 20px 20px; /* Removed as parent has padding */
    margin-bottom: 25px;
}
.section4 > .main {
    /* Applying common card styles */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.section4 > .main > .header {
    /* Using .dashboard-card-header styles */
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
}
.section4 > .main > .content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 25px;
}
.section4 > .main > .content > div[style*="width:204px"] { /* Wrapper for Dashboardcards */
    width: auto !important;
    flex: 1 1 220px;
    min-width: 200px;
    /* Ensure Dashboardcards component itself has card styling (border-radius, shadow etc.) */
    /* e.g., .dashboardcards-component { border-radius: 10px; overflow: hidden; box-shadow: ... } */
}


/* Earnings & Order Quantities (Section 5) */
.section5 {
    /* padding: 0 5px 20px 5px; /* Reduced due to ms-3/me-3 and parent padding */
    /* The ms-3 me-3 on the JSX div means the parent padding might make it too indented.
       If section5's parent is the main content area with 20px padding,
       ms-3 (1rem) + 20px can be a lot. Consider removing ms-3/me-3 from JSX.
    */
    margin-bottom: 25px; /* Add bottom margin if ms-3/me-3 are removed and it's direct child */
}
.section5 > .main {
    gap: 25px;
    display: flex;
    flex-wrap: wrap;
}
.section5 > .main > .left,
.section5 > .main > .right {
    flex: 1 1 45%;
    min-width: 320px;
    /* Applying common card styles */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.section5 .header { /* Common header style for left and right cards within section5 */
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
}
.section5 .header span:last-child { /* For (daily-total) text */
    font-size: 0.9rem;
    font-weight: normal;
    color: #666;
    margin-left: 5px;
}

.section5 .left .content { /* Content of the left card */
    padding: 25px;
    flex-grow: 1;
}
.section5 .left .content .top {
    padding-bottom: 20px; /* Space before chart if chart is below */
    display: flex !important;
    /* flex-wrap: wrap; */
    gap: 15px;
    justify-content: space-around;
    border-bottom: 1px solid #f0f0f0; /* Separator if chart is below */
    margin-bottom: 20px; /* Space before chart */
}
.section5 .left .content .top > div {
    text-align: center;
    padding: 10px;
    flex-basis: 120px;
}
.section5 .left .content .top span[style*="font-size:11px"] {
    font-size: 0.8rem !important;
    color: #555c63;
    margin-bottom: 6px;
    display: block;
    font-weight: 500;
}
.section5 .left .content .top span[style*="font-weight:900"] {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #1a2c45;
}
.section5 .left .content .chart {
    /* padding-top: 20px; /* Already handled by margin-bottom of .top */
}

.section5 .main .right { /* The right card in section 5 */
    /* Structure: Header, Grid content, Total Earnings (another div) */
}
.section5 .right .grid.ag-theme-quartz {
    padding: 25px; /* Assuming this is the content area for the grid */
    flex-grow: 1; /* Grid takes up space */
    min-height: 250px;
    border: none;
}
.section5 .right > div[style*="background:white;flex:3"] { /* Total Earnings container */
    padding: 25px;
    border-top: 1px solid #f0f0f0;
    /* flex:3 is very specific, ensure this works as intended. `flex-grow: 1;` or a fixed height might be better */
}
.section5 .right .d-flex.flex-row[style*="flex:2"] { /* Container for DashboardToplam cards */
    gap: 20px;
    display: flex; /* ensure it is flex */
    flex-wrap: wrap; /* allow toplam cards to wrap */
}
.section5 .right .totalincom {
    flex: 1 1 200px; /* Allow toplam cards to have a base width and wrap */
    /* DashboardToplam component needs its own card styling with border-radius */
    /* e.g., .dashboard-toplam-card { border-radius: 10px; padding: 15px; background: #f9f9f9; ... } */
}


/* Last Placed Orders (Section 6) */
.section6 {
    /* Applying common card styles */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* overflow: hidden; */
    display: flex;
    flex-direction: column;
    /* margin from JSX (ms-3 mt-5 me-3) - consider if this is needed with parent padding */
    margin-bottom: 25px; /* Ensure consistent bottom margin */
}
.section6 > .header {
    /* Using .dashboard-card-header styles */
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 12px 12px 0 0  !important;
}
.section6 > .grid {
    /* Using .dashboard-card-content styles */
    padding: 25px; /* If grid itself doesn't have padding */
    /* The ps-3 pe-3 on the JSX grid div might be redundant if this padding is applied */
}
.section6 .grid .ag-theme-quartz {
    height: 300px;
    border: none;
}

/* --- AG Grid Customization (General) --- */
.ag-theme-quartz {
    /* --ag-font-family: 'Your-Preferred-Font'; */
    --ag-font-size: 14px;
    --ag-header-background-color: #f8f9fa;
    --ag-header-foreground-color: #333;
    --ag-odd-row-background-color: #fdfdfd;
    --ag-row-hover-color: #f1f8ff; /* Lighter hover color */
    --ag-borders: none; /* Remove all borders within grid */
    --ag-header-border-color: #e0e0e0; /* Border below header cells */
    --ag-row-border-color: #eaeaea; /* Border between rows */
    --ag-header-height: 48px;
    --ag-row-height: 42px;
    border-radius: 0 0 10px 10px; /* If grid is the last element in a card */
}
.ag-theme-quartz .ag-header-cell {
    border-right: 1px solid #e0e0e0; /* Vertical lines between header cells */
}
.ag-theme-quartz .ag-header-cell:last-of-type {
    border-right: none;
}
.ag-theme-quartz .ag-header-cell-label {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0 10px;
}
.ag-theme-quartz .ag-cell {
    padding: 0 10px;
    border-right: 1px solid #f0f0f0; /* Light vertical lines between cells */
}
.ag-theme-quartz .ag-cell:last-of-type {
    border-right: none;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1200px) { /* Larger Desktops / Smaller Laptops */
    .section2 .chart {
        flex-basis: calc(33.333% - 14px); /* Three charts per row (gap 20px -> 20*2=40 / 3 = ~13.33) */
        min-width: 220px;
    }
}

@media (max-width: 992px) { /* Tablet */
    .menures {
        /* Example: Hide menu for tablet and below, implement a toggle button */
        /* position: fixed; transform: translateX(-100%); transition: transform 0.3s ease-in-out; */
        /* &.is-open { transform: translateX(0); } */
    }
    .section2 .chart {
        /* اگر با flex-basis: 0 چهارتا نشد، این را امتحان کنید: */
        flex-grow: 0; /* از رشد جلوگیری کنید */
        flex-basis: calc(25% - 15px); /* 15px = (3 * 20px gap) / 4 */
        max-width: calc(25% - 15px);
        /* min-width را هم می‌توانید حذف کنید یا کوچکتر کنید در این حالت */
    }
    .section3 > .left,
    .section3 > .right,
    .section5 > .main > .left,
    .section5 > .main > .right {
        flex-basis: 100%; /* Stack cards */
    }
}

/* برای تبلت‌ها */
@media (min-width: 768px) and (max-width: 991.98px) {
    .section2 .chart {
        flex-grow: 0;
        flex-basis: calc(50% - 10px); /* 10px = (1 * 20px gap) / 2 */
        max-width: calc(50% - 10px); /* دو کارت در هر ردیف */
    }
}

/* برای موبایل */
@media (max-width: 767.98px) {
    .section2 .chart {
        flex-grow: 0;
        flex-basis: 100%; /* یک کارت در هر ردیف */
        max-width: 100%;
        min-width: unset; /* min-width دیگر اینجا لازم نیست */
    }
}
@media (max-width: 768px) { /* Mobile */
    /* Main content area padding for mobile */
    .d-flex.flex-column.col-12.grid[style*="backgroundColor:rgb(240 240 250)"] {
        padding: 15px;
    }
    .dashboard-card-header {
        padding: 15px 20px;
        font-size: 1.05rem;
    }
    .dashboard-card-content {
        padding: 20px;
    }
    .section1.maincontent span {
        font-size: 1.3rem;
    }
    .section2 .chart .apexcharts-subtitle-text {
        font-size: 1.3rem !important;
    }
    .section4 > .main > .content {
        gap: 15px;
        padding: 20px;
    }
    .section4 > .main > .content > div[style*="width:204px"] {
        flex-basis: calc(50% - 7.5px); /* Two product cards per row */
        min-width: 160px;
    }
    .section5 .left .content .top > div {
        flex-basis: calc(50% - 7.5px); /* Two earning items per row */
    }
}

@media (max-width: 480px) { /* Small Mobile */
    .d-flex.flex-column.col-12.grid[style*="backgroundColor:rgb(240 240 250)"] {
        padding: 10px;
    }
    .section4 > .main > .content > div[style*="width:204px"] {
        flex-basis: 100%; /* One product card per row */
    }
    .section5 .left .content .top > div {
        flex-basis: 100%; /* One earning item per row */
    }
    .section5 .right .d-flex.flex-row[style*="flex:2"] { /* Container for DashboardToplam cards */
        flex-direction: column; /* Stack Toplam cards */
        gap: 15px;
    }
    .section5 .right .totalincom {
        flex-basis: auto; /* Reset basis when stacking */
    }
}

.k-grid-md .k-table-th > .k-cell-inner > .k-link{
    text-align: center;
}
.k-grid-md .k-table-th > .k-cell-inner > .k-link > .k-column-title{
    width: 100%;
}

@media (max-width: 768px) {
    body{
        padding: 0 !important;
    }
    .filter-dropdowns-container{
        flex-wrap: nowrap !important;

    }
    .filter-dropdown-wrapper{
        flex: 0 0 40% !important;
    }
    .fontsfilter{
        display: flex;
        flex-direction: column;
    }
    .btnuploadfonts{
        margin-left: 0 !important;
        margin-top: 5px;
    }
    .divcardorderslist{
        flex: 1 !important;
    }
    .category-items-container{
        flex-direction: column;
    }
    .category-items-container .category-list-item{
        flex: 1 !important;
    }
   .sacp-category-card{
    width: 100%;
   }   
    .menures {
      width: 100% !important;
      border-right: none !important;
      border-bottom: 1px solid #ccc;
      position: fixed !important;
      top: 50px !important;
      height: 100vh;
      left: 0;
      z-index: 100000 !important;
      background: #000000a8 !important;
    }
    .logofonts{
        font-size: 1.8rem !important;
        padding: 0 !important;
    }
    div[name="mainmenu"]{
        width: 300px !important;
    background: #fff;
    }
    .k-expander-indicator{
        right: 35% !important;
    }
   #root{
    position: relative;
   }
   #header{
    position: fixed !important;
    top: 0 !important;
    z-index: 55;
    padding: 0 !important;
    height: 50px !important;
    z-index: 100000  !important;
   }
   .buildersetting {
    width: 100% !important;
    left: -25% !important;
   }
   .insertProduct div.cardneworder:has(button.paypalbtn){
    width: 80% !important;
   }
   .modals{
    top: -10%;
   }
   .modals1{
    width: 98% !important;
   }
   .newadd{
    width: 100%;
    height: 200px !important;
   }
   .newadd div{
    transform: rotate(90deg) translateX(5px) translateY(-13px);
   }
   div#orderlist .filterorderlist span{
    font-size: 2.5vw !important;
   }
   .k-grid .k-grid-aria-root{
    flex: unset !important;
    overflow: auto !important;
   }
   div#orderlist .k-column-title{
    font-size: 2.5vw !important;

   }
   .k-grid{
    overflow:overlay !important
   }
   .usrreq-content-area{
    margin-top: 10% !important;
   }
   #insertattribute{
    margin-top: 10% !important;
   }
   #ups,#user,#brand,#mytemplate,#insertcategory,#editProduct{
    margin-top: 10% !important;
   }
   #insertproduct,#productdetail,#insertcategory,#Build,#paypal{
    margin-top: 20% !important;
   }
   .content-wrapper,.page-content-wrapper,
   .showcategoryorder,.page-container,.settings,.paypal-page-container,.editProduct    {
    margin-top: 10%;

   }
   .orderlist,.settings,.insertProduct,.orderdetail   {
    margin-top: 15%;
   }
   .showpass{
    top: 10px !important;
   }
   .showpasssetting{
    top: 2px !important;
   }
   .sacp-category-card{
    width: 100% !important;
   }
   .k-listview-content{
    flex-direction: column;
   }
   .k-listview-content .product-item-wrapper{
    flex: 1 !important;
   }
   .productdetail-page .productdetail-content .mainImage img{
    max-height: 230px !important;
  position: static !important;
        border: none !important;
   }
   .footerdesignProductmenuu,.ups-scope-details-section{
    flex-direction: column;
   }
   .ups-scope-details-section .col-7{
    width: 100%;
   }
   .ups-scope-question-icon{
    width: 12% !important;
   }
   .list-categories-content-box{
    width: 100%;
   }
   .categorymodals{
    width: 0px !important;
    z-index: 1000005 !important;
   }
  .categorymodals .k-window-titlebar{
display: none;
   }
   .categories-grid{
    overflow: auto !important;
   }
   .pagination-arrow{
    display: block !important;
   }
   .pagination-arrow-right
 {
        right: 10px !important;
    }
    .brand-registration-section .insertfaqcard .registerbrand{
        flex-direction: column;
    }
    .brand-registration-section .insertfaqcard .registerbrand .brandname{
        width: 100% !important;
    }
    .k-grid-header-wrap, .k-grid-footer-wrap{
        overflow: visible !important;
    }
    #modalCreateCard .search-filter-bar{
        padding-bottom: 20% !important;
    }
    .insertproducttopcard{
        flex-direction: column;
        /* align-items: start !important; */
    }
    .insertproducttopcard div{
       width: 100%;
       text-align: left;
    }
    .insertproductbottomcard{
        flex-direction: column-reverse;
    }
    .spanpro{
        font-size: 1rem !important;
    }
    .modals1 span[style*="background: rgb(232, 156, 3)"]{
        top: 25% !important;
    cursor: pointer;
    background: rgb(232, 156, 3);
    height: 35px !important;
    width: 35px !important;
    }
    .modals1 svg[style*="background: rgb(28, 28, 27)"]{
       left: 94% !important;
    }
    .modals1 svg[style*="background: rgb(185, 134, 9)"]{
       left: 94% !important;
    }
    .section5 .main div:nth-child(1){
        padding: 0 !important;
    }
    .show-all-sides-window,.platform-status-window{
        left: 0% !important;
        width: 100% !important;
    }
    .orderdetail_pdfpreview_window,.design{
        left: 0% !important;
        width: 100% !important;
        top: 25% !important;
    }
    .filterlist{
        flex-wrap: nowrap !important;
    }
    .filterselectorderetsy{
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    .insertProduct div[style*="margin-left: 30px"]{
        margin-bottom: 5%;
    }
    .loadmorebtn{
        margin: 5px 0 !important;
    }
}



div.section2 div.chart div.subchart div.statics{
    display: flex;
    background: black;
    position: relative;
    top: 33px;
    z-index: 3;
    width: 3.5vw;
    border-radius: 14px;
    color: white;
    right: -212px;
    font-size: .8vw;
    flex-direction: row;
    justify-content: space-around;
}
div.section2 div.chart div.subchart svg{
    margin-top: 5px;
    font-size: 9px;
}


div.section2 div.chart:nth-child(2) div.subchart div.statics,div.section2 div.chart:nth-child(4) div.subchart div.statics{
    background: #ff8522;
}

div.section2 div.chart:nth-child(1) div.subchart div.statics,div.section2 div.chart:nth-child(3) div.subchart div.statics{
    background:black;
}
.tooltipbuttons{
    background:white;
}

.list-categories-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1040; 
    padding: 20px; 
    box-sizing: border-box;
  }
  
  .list-categories-content-box {
    background-color: #ffffff;
    border-radius: 12px; 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    padding: 25px 30px; 
    display: flex;
    flex-direction: column; 
    position: relative;
    width: 95%; 
    max-width: 1400px; 
    height: 85vh; 
    max-height: 700px; 
    overflow: hidden; 
  }
  .btn-create-category {
    position: absolute;
    bottom: 20px;
    right: 10px;
    background-color: #ff83064f; 
    color: #000;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
    z-index: 10;
  }
  .btn-create-category:hover {
    background-color: #e07000; 
    color: #fff;
  }
  .btn-create-category svg {
    width: 1.5em;
    height: 1.5em;
  }
  .btn-create-category svg g,.btn-create-category svg path{
    stroke: #000 !important;
  }
  .btn-create-category:hover svg g,.btn-create-category svg path{
    stroke: #fff !important;
  }
  .categories-display-area {
    display: flex;
    align-items: stretch; 
    flex-grow: 1; 
    /* overflow: hidden; */
    /* margin-top: 60px; s */
    position: relative; 
    width: 100%;
  }
  
  .categories-grid {
    display: flex;
    flex-direction: row; 
    flex-grow: 1;
    overflow-x: hidden; 
    justify-content: flex-start; 
    gap: 0; 
    padding-left: 20px;
  }
  
  .category-column {
    display: flex;
    flex-direction: column;
    /* flex: 0 0 calc(100% / 7 - 15px);  */
    min-width:15%; 
    padding: 0;
    border-right: 1px solid #eee;
    box-sizing: border-box;
    height: 100%;
  }
  .category-column:last-child {
    border-right: none;
  }
  .category-parent-name {
    font-size: 1.1rem; 
    font-weight: bold;
    color: #111;
    margin-bottom: 12px;
    text-align: center;
    padding-bottom: 8px;
    /* border-bottom: 1px solid #f0f0f0; */
    word-break: break-word;
    height: 15%;
    /* background-color: #eee; */
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 5px;
    /* box-shadow: 0 0 5px #ccc; */

  }
  .category-children-list {
    display: flex;
    flex-direction: column;
    gap: 8px; 
    height: 85%;
  }
  
  .category-child-link {
    cursor: pointer;
    padding: 6px 0; 
    transition: color 0.2s ease;
  }
  .category-child-name {
    color: #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    font-size: 0.875rem; 
    text-align: left;
    display: block;
    word-break: break-word;
    padding-left: 5px;
  }
  .category-child-link:hover .category-child-name {
    text-decoration: underline;
    color: #e07000; 
  }
  
  .pagination-arrow {
    color: #ff8306;
    font-size: 2.5rem; 
    cursor: pointer;
    position: absolute; 
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.8); 
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  .pagination-arrow:hover {
    color: #e07000;
  }
  .pagination-arrow-left {
    left: -15px; 
  }
  .pagination-arrow-right {
    right: -15px; 
  }
  
  .no-categories-message {
    width: 100%;
    text-align: center;
    padding: 50px 20px;
    font-size: 1.1rem;
    color: #777;
    font-style: italic;
  }
  
  @media (max-width: 1200px) {
    .category-column {
      /* flex: 0 0 calc(100% / 5 - 15px);  */
      min-width: 15%;
    }
  }
  @media (max-width: 992px) {
    .list-categories-content-box {
      width: 95%;
      height: 90vh;
      padding: 20px;
    }
    .category-column {
      /* flex: 0 0 calc(100% / 4 - 15px);  */
      min-width: 15%;
    }
    .btn-create-category {
      padding: 8px 15px;
      font-size: 0.85rem;
      bottom: 15px;
      right: 10px;
    }
    /* .categories-display-area { margin-top: 50px; } */
  }
  
  @media (max-width: 767.98px) {
    .list-categories-content-box {
      height: auto;
      max-height: 90vh; 
      overflow-y: auto;
    }
    .categories-display-area {
      overflow-x: auto; 
      padding-bottom: 10px;
    }
    .categories-grid {
      flex-wrap: nowrap; 
      justify-content: flex-start; 
      padding-right: 15px; 
    }
    .category-column {
      flex: 0 0 200px;
      border-right: 1px solid #eee;
    }
    .pagination-arrow {
      font-size: 2rem;
    }
    .pagination-arrow-left { left: -10px; }
    .pagination-arrow-right { right: -10px; }
  }
  
  @media (max-width: 575.98px) {
    .list-categories-content-box {
      padding: 15px;
    }
    .btn-create-category {
      position: relative; 
      top: auto;
      right: auto;
      margin-bottom: 15px;
      width: 100%;
    }
    .categories-display-area { margin-top: 0; } 
    .category-column {
      flex: 0 0 180px; 
    }
    .category-parent-name { font-size: 0.95rem; }
    .category-child-name { font-size: 0.8rem; }
    .pagination-arrow { display: none; } 
  }
  
  
.paypal-page-container{display:flex;height:100vh;overflow:hidden;}
.app-layout-container{display:flex;height:100vh;overflow:hidden;}
.app-sidebar{background-color:var(--menu-card-bg,#ffffff);border-right:1px solid var(--menu-border-color,#e0e0e0);height:100vh;overflow:hidden;flex-shrink:0;display:flex;flex-direction:column;}
.app-sidebar .app-menu-inner{flex-grow:1;overflow-y:auto;padding-bottom:20px;}
.menu-item,.menu-expansion-panel .k-expander-header{display:flex !important;align-items:center !important;padding:12px 18px !important;cursor:pointer;transition:background-color 0.2s ease,color 0.2s ease,border-left-color 0.2s ease;border-bottom:1px solid var(--menu-border-color,#eaeaea);color:var(--menu-text-color,#4a4a4a);border-left:4px solid transparent;}
.menu-item:last-of-type,.menu-expansion-panel:last-of-type > .k-expander-header{border-bottom:none;}
.menu-item-content{display:flex;align-items:center;width:100%;}
.menu-item:hover,.menu-expansion-panel .k-expander-header:hover{background-color:var(--menu-hover-bg,#fff7f0);color:var(--menu-primary-color,#ff8306);}
.menu-item:hover .menu-icon,.menu-item:hover .menu-text,.menu-expansion-panel .k-expander-header:hover .menu-item-content .menu-icon-within-panel,.menu-expansion-panel .k-expander-header:hover .menu-item-content .menu-text-for-panel,.menu-expansion-panel .k-expander-header:hover .k-expander-indicator .k-svg-icon{color:var(--menu-primary-color,#ff8306) !important;fill:var(--menu-primary-color,#ff8306) !important;}
.menu-item.active-menu-item,.menu-expansion-panel.active-expansion-panel > .k-expander-header{background-color:var(--menu-active-bg,#ff8306) !important;color:var(--menu-active-text,#ffffff) !important;border-left-color:var(--menu-primary-color-darker,#e07000) !important;font-weight:500;}
.menu-item.active-menu-item .menu-icon,.menu-item.active-menu-item .menu-text,.menu-expansion-panel.active-expansion-panel > .k-expander-header .menu-item-content .menu-icon-within-panel,.menu-expansion-panel.active-expansion-panel > .k-expander-header .menu-item-content .menu-text-for-panel,.menu-expansion-panel.active-expansion-panel > .k-expander-header .k-expander-indicator .k-svg-icon{color:var(--menu-active-text,#ffffff) !important;fill:var(--menu-active-text,#ffffff) !important;}
.menu-icon{font-size:1.25em;margin-right:12px;color:var(--menu-icon-color,#555759);flex-shrink:0;width:20px;text-align:center;transition:color 0.2s ease;}
.menu-text{flex-grow:1;font-size:0.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 0.2s ease;}
.menu-icon-within-panel{font-size:1.25em;margin-right:12px;color:var(--menu-icon-color,#555759);flex-shrink:0;width:20px;text-align:center;transition:color 0.2s ease;}
.menu-text-for-panel{flex-grow:1;font-size:0.9rem;color:var(--menu-text-color,#4a4a4a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 0.2s ease;}
.menu-expansion-panel.k-expander{width:100%;border:none !important;box-shadow:none !important;margin:0;}
.menu-expansion-panel .k-expander-indicator .k-svg-icon{color:var(--menu-icon-color,#555759) !important;fill:var(--menu-icon-color,#555759) !important;transition:color 0.2s ease,fill 0.2s ease;}
.menu-expansion-panel .k-expander-content-wrapper{border:none !important;padding-left:10px;}
.menu-expansion-panel .k-expander-content{padding:0 !important;background-color:#fcfdff;}
.menu-expansion-panel.panel-expanded > .k-expander-header
{border-bottom-color:transparent !important;}
.menu-sub-item{display:flex;align-items:center;padding:10px 15px 10px 28px;cursor:pointer;transition:background-color 0.2s ease,color 0.2s ease;font-size:0.85rem;color:var(--menu-text-light,#6c757d);border-bottom:1px solid #f0f2f5;position:relative;}
.menu-sub-item:last-child{border-bottom:none;}
.menu-sub-item:hover{background-color:var(--menu-hover-bg,#fff7f0);color:var(--menu-primary-color,#ff8306);}
.menu-sub-item.active-sub-menu-item{background-color:var(--menu-primary-color-lighter,#fff0e1);color:var(--menu-primary-color,#ff8306);font-weight:500;}
.menu-sub-item:hover .submenu-icon,.menu-sub-item:hover .submenu-text,.menu-sub-item.active-sub-menu-item .submenu-icon,.menu-sub-item.active-sub-menu-item .submenu-text{color:var(--menu-primary-color,#ff8306) !important;}
.menu-sub-item .submenu-icon{font-size:1.1em;margin-right:10px;color:var(--menu-icon-color,#555759);width:18px;text-align:center;flex-shrink:0;}
.menu-sub-item .submenu-text{flex-grow:1;font-size:0.9em;}
.menu-sub-item .etsycolor{color:#d95f0c;}
.connection-status-dot{width:9px;height:9px;border-radius:50%;margin-left:auto;flex-shrink:0;}
.connection-status-dot.connected{background-color:#28a745;}
.connection-status-dot.disconnected{background-color:#dc3545;}
.k-custom-window .k-window-titlebar{background-color:var(--menu-kendo-window-header-bg,#f8f9fa) !important;color:var(--menu-kendo-window-header-text,#343a40) !important;border-bottom:1px solid var(--menu-border-color,#dee2e6) !important;}
.k-custom-window .k-window-title{font-size:1.1rem;font-weight:500;}
.k-custom-window .k-window-actions .k-button .k-svg-icon{fill:var(--menu-text-light,#6c757d) !important;}
.k-custom-window .k-window-content{padding:1.5rem;}
.k-custom-window .k-dialog-actions{border-top:1px solid var(--menu-border-color,#dee2e6);padding:0.75rem 1.5rem;background-color:var(--menu-kendo-window-header-bg,#f8f9fa);}
.k-custom-window .k-dialog-actions .k-button{font-size:0.9rem;padding:0.4rem 1rem;border-radius:6px;}
.k-custom-window .k-dialog-actions .k-button.k-primary{background-color:var(--menu-primary-color) !important;border-color:var(--menu-primary-color) !important;color:white !important;}
.k-custom-window .k-dialog-actions .k-button.k-primary:hover{background-color:var(--menu-primary-color-darker) !important;border-color:var(--menu-primary-color-darker) !important;}
.platform-status-window .k-custom-window-infotext{font-size:0.85rem;color:var(--menu-text-light);background-color:#f9f9f9;padding:10px;border-radius:4px;border:1px solid var(--menu-border-color);}
.platform-status-window .platform-icon-container{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:12px;flex-shrink:0;}
.platform-status-window .platform-icon-container.connected{background-color:#28a745;}
.platform-status-window .platform-icon-container.disconnected{background-color:#dc3545;}
.platform-status-window .platform-icon-container .platform-icon{font-size:1.6rem;color:white;}
.platform-status-window .platform-name{font-size:1.05rem;font-weight:500;color:var(--menu-text-dark);}
.platform-status-window .platform-url{font-size:0.8rem;}
.platform-status-window .btn-custom-action,.platform-status-window .btn-outline-danger{font-size:0.85rem;padding:0.4rem 0.9rem;border-radius:6px;}
div[name="mainmenu"] .k-expander-title svg{margin-left:0 !important;}
@media (max-width:767.98px){.dashboard-menu-container{font-size:12px;}
.menu-item,.menu-expansion-panel .k-expander-header{padding:10px 12px !important;}
.menu-icon,.menu-icon-within-panel{margin-right:10px;font-size:1.2em;width:18px;}
.menu-sub-item{padding:8px 12px 8px 28px;font-size:0.8em;}}

.platform-status-window{
    width: 600px;
    height: 350px !important;
}
.platform-status-window .k-window-titlebar{
    background-color: #e07000 !important;
}

/* Maintenance modal styles */
.maintenance-window .k-window-titlebar{background-color:var(--menu-primary-color,#ff8306) !important;color:#fff !important;border-bottom:none !important}
.maintenance-content{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:10px}
.maintenance-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#ffe1c2,#ffd1a3);display:flex;align-items:center;justify-content:center;color:#e07000;font-size:28px;margin-bottom:10px}
.maintenance-title{font-size:1.1rem;margin:0 0 6px 0;color:#2c2c2c}
.maintenance-desc{font-size:0.9rem;color:#6b7280;margin:0 10px 14px 10px}
.maintenance-actions{display:flex;gap:8px}
@font-face{
  font-family: sarabun_bolditalic;
src:  url(/assets/fonts/SegoeUI.ef1c00b65a5fd5bae3bb.ttf)
}
@font-face{
  font-family: Tangerine;
src:  url(/assets/fonts/Tangerine-Regular.6b04eb83dd71e2762243.ttf)
}
@font-face{
  font-family: Shadowsintolight;
src:  url(/assets/fonts/ShadowsIntoLight-Regular.e8c09384ff0643bf385d.ttf)
}

@font-face{
  font-family: Russo One;
src:  url(/assets/fonts/RussoOne-Regular.b2f5b287ccb8fd446eae.ttf)
}

@font-face{
  font-family: Rocksalt;
src:  url(/assets/fonts/RockSalt-Regular.95f10efb43f0ccd46405.ttf)
}

@font-face{
  font-family: Princess Sofia;
src:  url(/assets/fonts/PrincessSofia-Regular.24ee19f9fb6115769bda.ttf)
}

@font-face{
  font-family: Permanent Marker;
src:  url(/assets/fonts/PermanentMarker-Regular.109a10dca0508e41aa12.ttf)
}

@font-face{
  font-family: Monoton;
src:  url(/assets/fonts/Monoton-Regular.1f3bd420f1198c5c85e8.ttf)
}

@font-face{
  font-family: Mali;
src:  url(/assets/fonts/Mali-Regular.e27c9a1ab13e4c733517.ttf)
}

@font-face{
  font-family: Lobster;
src:  url(/assets/fonts/Lobster-Regular.03c38496322925fec242.ttf)
}

@font-face{
  font-family: Lambda;
src:  url(/assets/fonts/Lambda-Regular.87f25101cd4c280e120c.ttf)
}

@font-face{
  font-family: Kelvinch;
src:  url(/assets/fonts/Kelvinch-Roman.6323f02956b6aef29de4.otf)
}

@font-face{
  font-family: Homemade Apple;
src:  url(/assets/fonts/HomemadeApple-Regular.df147a19521e98ee86fe.ttf)
}

@font-face{
  font-family: Helvetica;
src:  url(/assets/fonts/Helvetica.06113bf748ae7dc33e05.ttf)
}

@font-face{
  font-family: Graduate;
src:  url(/assets/fonts/Graduate-Regular.64e4e90410e2cf37d41c.ttf)
}

@font-face{
  font-family: Gloria Hallelujah;
src:  url(/assets/fonts/GloriaHallelujah-Regular.c9da976c6f9088d1b3c9.ttf)
}

@font-face{
  font-family: FoglihtenNo07;
src:  url(/assets/fonts/FjallaOne-Regular.34fddd1e53b238e6d80f.ttf)
}

@font-face{
  font-family: Fjalla One;
src:  url(/assets/fonts/FjallaOne-Regular.34fddd1e53b238e6d80f.ttf)
}

@font-face{
  font-family: Coiny;
src:  url(/assets/fonts/Coiny-Regular.61e71214a606a6502029.ttf)
}




  div.topheader:first-child{
    height:12vh
  }
  div.attribute div#header{
    font-size: unset !important;
  }
  div#header div#searchbar svg{
     margin-right: 16px;
  }
  div[name="asli"] div.section3 div.k-grid-header tr{
    color: black;
  }
  div[name="asli"] div.section3 div.k-grid-content td{
    border-right: unset !important; 
    /* border-bottom: unset !important; */
    padding: unset !important;
     height: unset !important;
     text-align: center;
  }

  div[name="asli"] div.section3 div.progress{
    padding-bottom: 10% !important;
  }


  div[name="asli"] div.section5 .k-grid .k-table-th, .k-grid td, .k-grid .k-table-td{
      padding: 0 5px !important;
  }
  div[name="asli"] div.section5 div.k-grid-header tr{
    color: black !important;
    font-family: 'sarabun' !important;
    font-weight: 700 !important;
  }



  div.hidemenu{
     display:none !important;
  }

/* HTML: <div class="loader"></div> */
.loader {
  --w:10ch;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  letter-spacing: var(--w);
  width:var(--w);
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 
    calc(-1*var(--w)) 0, 
    calc(-2*var(--w)) 0, 
    calc(-3*var(--w)) 0, 
    calc(-4*var(--w)) 0,
    calc(-5*var(--w)) 0, 
    calc(-6*var(--w)) 0, 
    calc(-7*var(--w)) 0, 
    calc(-8*var(--w)) 0, 
    calc(-9*var(--w)) 0;
  animation: l16 2s infinite;
}
.loader:before {
  content:"Loading...";
}
@keyframes l16 {
  20% {text-shadow: 
    calc(-1*var(--w)) 0, 
    calc(-2*var(--w)) 0 red, 
    calc(-3*var(--w)) 0, 
    calc(-4*var(--w)) 0 #ffa516,
    calc(-5*var(--w)) 0 #63fff4, 
    calc(-6*var(--w)) 0, 
    calc(-7*var(--w)) 0, 
    calc(-8*var(--w)) 0 green, 
    calc(-9*var(--w)) 0;}
  40% {text-shadow: 
    calc(-1*var(--w)) 0, 
    calc(-2*var(--w)) 0 red, 
    calc(-3*var(--w)) 0 #e945e9, 
    calc(-4*var(--w)) 0,
    calc(-5*var(--w)) 0 green, 
    calc(-6*var(--w)) 0 orange, 
    calc(-7*var(--w)) 0, 
    calc(-8*var(--w)) 0 green, 
    calc(-9*var(--w)) 0;}
  60% {text-shadow: 
    calc(-1*var(--w)) 0 lightblue, 
    calc(-2*var(--w)) 0, 
    calc(-3*var(--w)) 0 #e945e9, 
    calc(-4*var(--w)) 0,
    calc(-5*var(--w)) 0 green, 
    calc(-6*var(--w)) 0, 
    calc(-7*var(--w)) 0 yellow, 
    calc(-8*var(--w)) 0 #ffa516, 
    calc(-9*var(--w)) 0 red;}
  80% {text-shadow: 
    calc(-1*var(--w)) 0 lightblue, 
    calc(-2*var(--w)) 0 yellow, 
    calc(-3*var(--w)) 0 #63fff4, 
    calc(-4*var(--w)) 0 #ffa516,
    calc(-5*var(--w)) 0 red, 
    calc(-6*var(--w)) 0, 
    calc(-7*var(--w)) 0 grey, 
    calc(-8*var(--w)) 0 #63fff4, 
    calc(-9*var(--w)) 0 ;}
}

.k-grid .k-grid-header .k-table-th{
  border:0px !important
}

div[name="mainmenu"]{
  border-right:0px !important
}
 div.k-grid.k-grid-md input{
  color: #bebfc0;
 }
 div.k-grid{
  box-shadow: unset !important;
 }
 .k-pager.k-grid-pager{
  background-color: white !important;
 }
 div.k-grid-content td{
  border-bottom: 0px !important;
 }
li.k-filter-group-main > div.k-filter-toolbar:first-child{
  display: none !important;
 }
 .k-filter .k-filter-toolbar .k-toolbar{
  border: 0px !important;
 }
 div#loader-wrapper{
  display: none;
 }

* {
	box-sizing: border-box;
}

.auth-page-container {
	background: #f6f5f7;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: 'Montserrat', sans-serif;
	min-height: 100vh;
	width: 100%;
	margin: 0;
    padding: 20px;
}
.auth-page-container button svg {
    vertical-align: middle;
}

h1.titlelogin {
	font-weight: bold;
	margin: 0;
}

h2 {
	text-align: center;
}
p.desclogin {
	font-size: 14px;
	font-weight: 100;
	line-height: 20px;
	letter-spacing: 0.5px;
	margin: 20px 0 30px;
}
span {
	font-size: 12px;
}
a.mobile-toggle-link {
	color: #333;
	font-size: 14px;
	text-decoration: none;
	margin: 15px 0;
}

button.submitbtn {
	border-radius: 20px;
	border: 1px solid #e06e03; 
	background-color: #e06e03 !important; 
	color: #FFFFFF !important;
	font-size: 12px;
	font-weight: bold;
	padding: 12px 45px;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: background-color 0.15s ease-in-out, transform 80ms ease-in; 
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
}

button.submitbtn:active {
	transform: scale(0.95);
}

button.submitbtn:focus {
	outline: none;
    box-shadow: none;
}

button.submitbtn:not(.ghost):hover {
    background-color: #e06e03; 
    border-color: #e06e03;
}

.submitbtn{
  width: 100%;
    margin-top: 4px;
}
button.ghost {
	background-color: transparent !important;
	border-color: #FFFFFF;
  margin-top: 40px;
  padding: 10px 25px;
}
button.ghost:hover { 
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #FFFFFF !important;
}

button.ghostback {
	background-color: transparent !important;
  margin-top: 40px;
  padding: 10px 25px;
}
button.ghostback:hover { 
    background-color: #333 !important;
    color: #FFFFFF !important;
}


form.frmlogin {
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 50px; 
	height: 100%;
	text-align: center;
}

input.usernameLogin,
input.pass,
input.namein,
input.emailin,
input.passwordin {
	background-color: #eee;
	border: none;
	padding: 12px 15px;
	margin: 10px 0; 
	width: 100%;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    direction: ltr;
    text-align: left;
    margin: 5px 0;
}


#container{
    height: 50% !important;
    width: 80%;
}
.container {
	background-color: #fff;
	border-radius: 10px;
 	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			0 10px 10px rgba(0,0,0,0.22);
	position: relative;
	overflow: hidden;
	width: 1100px;
	max-width: 100%;
	min-height: 500px; 
}

.remember-me-group {
    display: flex;
    align-items: center;
    width: 100%; 
    margin: 10px 0 15px 0; 
    justify-content: flex-start; 
    font-size: 13px;
}

.remember-me-group input[type="checkbox"] {
    width: auto; 
    margin-right: 8px; 
    accent-color: #e06e03;
}

.remember-me-group label {
    color: #333;
    font-weight: normal;
    cursor: pointer;
}


.form-container {
	position: absolute;
	top: 0;
	height: 100%;
	transition: all 0.6s ease-in-out;
}

.sign-in-container {
	left: 0;
	width: 50%;
	z-index: 2;
}

.container.right-panel-active .sign-in-container {
	transform: translateX(100%);
}

.sign-up-container {
	left: 0;
	width: 50%;
	opacity: 0;
	z-index: 1;
}

.container.right-panel-active .sign-up-container {
	transform: translateX(100%);
	opacity: 1;
	z-index: 5;
	animation: show 0.6s;
}

@keyframes show {
	0%, 49.99% {
		opacity: 0;
		z-index: 1;
	}
	
	50%, 100% {
		opacity: 1;
		z-index: 5;
	}
}

.overlay-container {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	overflow: hidden;
	transition: transform 0.6s ease-in-out;
	z-index: 100;
}

.container.right-panel-active .overlay-container{
	transform: translateX(-100%);
}

.overlay {
	background: #bb3a06;
	background: -webkit-linear-gradient(to right, #bb3a06, #da5a05);
	background: linear-gradient(to right, #bb3a06, #da5a05);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 0;
	color: #FFFFFF;
	position: relative;
	left: -100%;
	height: 100%;
	width: 200%;
 	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
 	transform: translateX(50%);
}

.overlay-panel {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 40px;
	text-align: center;
	top: 0;
	height: 100%;
	width: 50%;
	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}

.overlay-left {
	transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
	transform: translateX(0);
}

.overlay-right {
	right: 0;
	transform: translateX(0);
}

.container.right-panel-active .overlay-right {
	transform: translateX(20%);
}

.social-container {
	margin: 20px 0;
}

.social-container a {
	border: 1px solid #DDDDDD;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0 5px;
	height: 40px;
	width: 40px;
}


@media (max-width: 768px) {
    .container {
        min-height: auto; 
        width: 90%;
    }
    .form-container {
        width: 100%;
        position: relative; 
    }
}

@media (max-width: 480px) {
    form {
        padding: 0 20px;
    }
    h1 {
        font-size: 1.3rem;
    }
    button {
        padding: 10px 20px;
        font-size: 11px;
    }
    input {
        padding: 10px 12px;
        margin: 8px 0; 
    }
    .remember-me-group {
        font-size: 12px;
        margin: 8px 0 12px 0;
    }
     .social-container a {
        height: 35px;
        width: 35px;
        margin: 0 3px;
    }
}
@media (max-width: 768px) {
  .auth-page-container {
      background-color: var(--component-container-bg, #f6f5f7); 
      min-height: 100vh !important;
      padding: 10px !important; 
      display: flex !important;
      justify-content: center;
      align-items: center;
  }

  .container {
      width: 90% !important;
      max-width: 400px !important;
      min-height: 480px;
      background-color: var(--card-background-color, #FFFFFF);
      border: 1px solid var(--input-border-color, #E0E0E0); 
      box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
      position: relative !important; 
      overflow: hidden !important;  
      display: block; 
  }
#container{
    height: 50% !important;
    width: 60%;
}
  .overlay-container {
      display: none !important;
  }

  .form-container {
      width: 100% !important;
      height: 100% !important; 
      position: absolute !important;
      top: 0;
      left: 0;
      background-color: var(--card-background-color, #FFFFFF); 
      padding: 25px;
      box-sizing: border-box;
      display: flex; 
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: transform 0.6s ease-in-out, opacity 0.5s ease-in-out;
      border: none !important;
  }

  .sign-in-container {
      transform: translateY(0%);
      opacity: 1;
      z-index: 2; 
  }

  .sign-up-container {
      transform: translateY(100%); 
      opacity: 0;
      z-index: 1; 
  }

  .container.right-panel-active .sign-in-container {
      transform: translateY(-100%); 
      opacity: 0;
      z-index: 1;
  }

  .container.right-panel-active .sign-up-container {
      transform: translateY(0%); 
      opacity: 1;
      z-index: 2; 
      animation: none; 
  }

  .mobile-toggle-link {
      display: block !important; 
      color: var(--primary-color, #FF4B2B) !important;
      background-color: transparent !important;
      padding: 8px 0;
      text-align: center;
      margin-top: 20px; 
      border: none;
      font-weight: bold;
      text-decoration: underline;
      cursor: pointer;
      font-size: 13px;
  }

  .form-container form {
      width: 100%; 
      padding: 0 10px; 
  }
  .form-container h1 {
      font-size: 1.5rem; 
      margin-bottom: 15px;
  }
  input.usernameLogin, input.pass, input.namein, input.emailin, input.passwordin {
      margin: 6px 0 !important;
      width: 100% !important;
  }
  .form-container .submitbtn { 
      width: 100% !important; 
      padding: 12px 20px !important;
      margin-top: 10px; 
  }
  .remember-me-group {
      font-size: 12px !important;
      margin: 10px 0 15px 0 !important;
  }
}

.mobile-toggle-link {
  display: none;
}

div#root{
    width: 100%;
}

span.rli-d-i-b.atom-rli-bounding-box{
    text-align: center;
}


.insertAttribute {
   min-height: 100vh;
}

.main-content-area {
   max-width: 100% !important; 
   flex-grow: 1;
   display: flex;
   flex-direction: column;
}

.page-content-wrapper {
   padding: 15px !important;
}

.content-card {
   background-color: #ffffff;
   border-radius: 15px;
   padding: 20px;
   margin: 15px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#insertattribute {
   margin-top: 0 
}


.section-highlight {
   border: 1px solid #ff8306 !important; 
   padding: 20px !important;
}

.form-field-group {
   flex: 1 1 250px; 
   margin-bottom: 15px;
}
.form-field-group-large {
   flex: 2 1 350px; 
   margin-bottom: 15px;
}
.form-field-group-action {
   flex: 0 0 auto; 
   align-self: flex-end;
}


.attributename {
   display: block;
   margin-bottom: 8px;
   color: #333;
   font-size: 0.95rem;
}

/* Styling for Kendo Inputs and DropDownLists */
.styled-input .k-input-inner,
.k-input.styled-input, /* for Kendo Input component */
input.styled-input, /* for simple input if used */
.styled-dropdown .k-dropdown-wrap, /* for Kendo DropdownList */
.styled-input-grid, /* For inputs inside the grid */
.styled-input-dropdown-option { /* For inputs in dropdown options */
   background-color: #f8f9fa !important;
   border: 1px solid #ced4da !important;
   border-radius: 5px !important;
   color: #495057 !important;
   padding: 8px 12px !important;
   height: auto !important; 
   font-size: 0.9rem;
   width: 100%;
   box-sizing: border-box;
}
.styled-input .k-input-inner:focus,
.k-input.styled-input:focus,
input.styled-input:focus,
.styled-dropdown .k-dropdown-wrap:focus-within,
.styled-input-grid:focus,
.styled-input-dropdown-option:focus {
   border-color: #ff8306 !important;
   box-shadow: 0 0 0 0.2rem rgba(255, 131, 6, 0.25) !important;
   outline: none !important;
}

.styled-dropdown { /* General styling for dropdown container */
   width: 100% !important;
   background-color: #f8f9fa !important;
   border-radius: 5px !important;
}
.styled-dropdown .k-input-value-text { /* Text color inside dropdown */
   color: #495057 !important;
}

.styled-input-disabled,
.styled-input-disabled-grid {
   background-color: #e9ecef !important;
   border: 1px solid #ced4da !important;
   border-radius: 5px !important;
   min-height: 38px; 
   width: 100%;
   box-sizing: border-box;
}

/* Icon Styling */
.styled-icon {
   font-size: 1.5rem; 
   cursor: pointer;
   transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
   margin: 0 5px; 
}

.styled-icon:hover {
   transform: scale(1.1);
}

.back-icon {
   color: #ff8306; 
   font-size: 2.2rem !important; 
}
.back-icon:hover {
   color: #e07000; 
}

.save-icon svg, /* MdOutlineSaveAs is an SVG */
.add-db-icon svg,
.save-changes-icon svg {
   color: #28a745; 
   font-size: 2rem !important; 
}
.save-icon svg:hover,
.add-db-icon svg:hover,
.save-changes-icon svg:hover {
   color: #1e7e34;
}

.delete-icon svg {
   color: #dc3545; 
}
.delete-icon svg:hover {
   color: #b02a37;
}
.edit-icon-dropdown svg,
.close-icon-dropdown svg {
color: #555;
}
.add-icon-dropdown svg {
   color: #28a745;
}
.delete-icon-dropdown svg {
   color: #dc3545;
}


.styled-icon-group { /* For operation icons in grid */
   gap: 10px; 
}
.styled-icon-group .styled-icon {
   font-size: 1.3rem;
}


/* Filter section styling */
.filter-card {
   margin-top: 20px;
}
.filter-header {
   margin-bottom: 15px !important;
}
.filter-title {
   font-size: 1.2rem !important;
   font-weight: bold !important;
   color: #333;
   padding-bottom: 5px !important;
}

.clear-filter-button {
   background-color: #ff8306 !important;
   color: white !important;
   border: none !important;
   padding: 8px 15px !important;
   border-radius: 5px !important;
   font-weight: bold !important;
   font-size: 0.9rem !important;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: background-color 0.2s ease;
}
.clear-filter-button:hover {
   background-color: #e07000 !important;
}
.clear-filter-button .styled-icon {
   font-size: 1.2rem; 
   margin: 0;
}

.filterlist {
   gap: 15px; 
}
.filter-item {
   flex: 1 1 200px;
   margin-bottom: 10px; 
}
.type-filter-dropdown .k-dropdown-wrap { /* Dropdown in filter */
  background-color: #f8f9fa !important;
  border: 1px solid #ced4da !important;
  border-radius: 5px !important;
}

/* Grid Card Styling */
.grid-card {
   margin-top: 20px;
   overflow-x: auto; 
}
.k-grid { /* General grid styling */
   border-radius: 8px;
   border: 1px solid #dee2e6 !important;
}
.k-grid-header {
   background-color: #f8f9fa !important;
   font-weight: bold;
}
.k-grid-header .k-header {
   border-color: #dee2e6 !important;
   color: #333 !important;
   padding: 12px 10px !important;
}
.k-grid td {
   padding: 10px 10px !important;
   border-color: #e9ecef !important;
   vertical-align: middle;
}
.k-grid-norecords td {
   text-align: center;
   padding: 20px !important;
   color: #777;
}
.k-pager-wrap { /* Grid pagination */
   background-color: #f8f9fa;
   border-top: 1px solid #dee2e6;
   padding: 10px;
}
.k-pager-wrap .k-button {
   background-color: #fff;
   border-color: #ccc;
}
.k-pager-wrap .k-button:hover {
   background-color: #eee;
}
.k-pager-wrap .k-selected {
   background-color: #ff8306 !important;
   color: white !important;
   border-color: #ff8306 !important;
}


/* Responsive adjustments */
@media (max-width: 992px) {
   .insertAttribute {
       flex-direction: column;
   }
   .menures {
       width: 100%;
       /* Style menu for mobile if needed, e.g., make it a top bar or collapsible */
   }
   .main-content-area {
       max-width: 100% !important;
   }
   .insertfaqcard {
       flex-direction: column; 
   }
   .form-field-group, .form-field-group-large, .form-field-group-action {
       flex-basis: auto; 
       width:100%; 
   }
    .form-field-group-action {
       align-self: center; 
       margin-top:10px;
   }
   .filterlist {
       flex-direction: column;
   }
   .filter-item {
       width: 100%;
   }
   .filter-header {
       flex-direction: column;
       align-items: flex-start;
       gap: 10px;
   }
   .clear-filter-button {
       align-self: flex-start;
   }

}

@media (max-width: 768px) {
   .content-card {
       padding: 15px;
       margin: 10px;
   }
   .section-highlight {
       padding: 15px !important;
   }
   .styled-icon {
       font-size: 1.3rem;
   }
   .back-icon {
    font-size: 2rem !important;
   }
   .save-icon svg {
     font-size: 1.8rem !important;
   }
   .filter-title {
       font-size: 1.1rem !important;
   }
   .clear-filter-button {
       font-size: 0.85rem !important;
       padding: 7px 12px !important;
   }
}
:root{
    /* animations constants */
    --steps: 10;
    --saturation: 80%;
    --lightness: 60%;
    --hue-offset: 320;
    --duration: 5000ms;
  
    /* generate some colors */
    --color-01: hsl( calc( 360 / var(--steps) *  1 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-02: hsl( calc( 360 / var(--steps) *  2 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-03: hsl( calc( 360 / var(--steps) *  3 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-04: hsl( calc( 360 / var(--steps) *  4 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-05: hsl( calc( 360 / var(--steps) *  5 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-06: hsl( calc( 360 / var(--steps) *  6 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-07: hsl( calc( 360 / var(--steps) *  7 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-08: hsl( calc( 360 / var(--steps) *  8 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-09: hsl( calc( 360 / var(--steps) * 9 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-10: hsl( calc( 360 / var(--steps) * 10 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-11: hsl( calc( 360 / var(--steps) * 11 + var(--hue-offset)), var(--saturation), var(--lightness) );  
    --color-crayon: #202036;
  
    /* build some backgrounds */
    --bg-01-a: no-repeat left       0% top    / 11%   0% linear-gradient(to right, var(--color-01), var(--color-02));
    --bg-01-b: no-repeat left       0% top    / 11% 100% linear-gradient(to right, var(--color-01), var(--color-02));
    --bg-02-a: no-repeat left   11.11% bottom / 11%   0% linear-gradient(to right, var(--color-02), var(--color-03));
    --bg-02-b: no-repeat left   11.11% bottom / 11% 100% linear-gradient(to right, var(--color-02), var(--color-03));
    --bg-03-a: no-repeat left   22.22% top    / 11%   0% linear-gradient(to right, var(--color-03), var(--color-04));
    --bg-03-b: no-repeat left   22.22% top    / 11% 100% linear-gradient(to right, var(--color-03), var(--color-04));
    --bg-04-a: no-repeat left   33.33% bottom / 11%   0% linear-gradient(to right, var(--color-04), var(--color-05));
    --bg-04-b: no-repeat left   33.33% bottom / 11% 100% linear-gradient(to right, var(--color-04), var(--color-05)); 
    --bg-05-a: no-repeat left   44.44% top    / 11%   0% linear-gradient(to right, var(--color-05), var(--color-06));
    --bg-05-b: no-repeat left   44.44% top    / 11% 100% linear-gradient(to right, var(--color-05), var(--color-06)); 
    --bg-06-a: no-repeat left   55.55% bottom / 11%   0% linear-gradient(to right, var(--color-06), var(--color-07));
    --bg-06-b: no-repeat left   55.55% bottom / 11% 100% linear-gradient(to right, var(--color-06), var(--color-07)); 
    --bg-07-a: no-repeat left   66.66% top    / 11%   0% linear-gradient(to right, var(--color-07), var(--color-08));
    --bg-07-b: no-repeat left   66.66% top    / 11% 100% linear-gradient(to right, var(--color-07), var(--color-08));
    --bg-08-a: no-repeat left   77.77% bottom / 11%   0% linear-gradient(to right, var(--color-08), var(--color-09));
    --bg-08-b: no-repeat left   77.77% bottom / 11% 100% linear-gradient(to right, var(--color-08), var(--color-09));
    --bg-09-a: no-repeat left   88.88% top    / 11%   0% linear-gradient(to right, var(--color-09), var(--color-10));
    --bg-09-b: no-repeat left   88.88% top    / 11% 100% linear-gradient(to right, var(--color-09), var(--color-10));  
    --bg-10-a: no-repeat left   99.99% bottom / 11%   0% linear-gradient(to right, var(--color-10), var(--color-11));
    --bg-10-b: no-repeat left   99.99% bottom / 12% 100% linear-gradient(to right, var(--color-10), var(--color-11));   
  }
  
  .rainbow-marker-loader {
    height:4rem;
    width:20rem;
    max-width:100%;
    border:.5rem solid var(--color-crayon);
    border-radius:.5rem;
    animation: infinite alternate rainbow-fill var(--duration) ease-in-out;
    box-sizing:border-box;
    position:relative;
    margin:1rem;
    background:
      var(--bg-01-a),
      var(--bg-02-a),
      var(--bg-03-a),
      var(--bg-04-a),
      var(--bg-05-a),
      var(--bg-06-a),
      var(--bg-07-a),
      var(--bg-08-a),
      var(--bg-09-a),
      var(--bg-10-a); 
  }
  
  .rainbow-marker-loader::after{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform-origin:left center;
    border-radius:.5rem;
    box-sizing:border-box;  
    margin-top:-7.5%;
    margin-left:-2.5%;
    animation: infinite alternate move-marker var(--duration) ease-in-out;    
    background:
      no-repeat left   0% top    / 3rem  50% linear-gradient(to bottom right, transparent, transparent 40%, var(--color-crayon) 40%),
      no-repeat left   0% bottom / 3rem  50% linear-gradient(to top right, transparent, transparent 40%, var(--color-crayon) 40%),
      no-repeat left 3rem bottom / 100% 100% linear-gradient( var(--color-crayon), var(--color-crayon))
  }
  
  @keyframes move-marker{
    10%{
      transform: translate(5%, 100%) rotate(2.5deg);
    }
    20%{
      transform: translate(20%, 0) rotate(-5deg);
    }
    30%{
      transform: translate(30%, 100%) rotate(2.5deg);
    }  
    40%{
      transform: translate(40%, 0) rotate(-5deg);
    } 
    50%{
      transform: translate(50%, 100%) rotate(2.5deg);
    }   
    60%{
      transform: translate(60%, 0) rotate(-5deg);
    }   
    70%{
      transform: translate(70%, 100%) rotate(2.5deg);
    }  
    80%{
      transform: translate(80%, 0) rotate(-5deg);
    }  
    90%{
      transform: translate(90%, 100%) rotate(2.5deg);
    }  
    100%{
      transform: translate(100%, 0) rotate(-5deg);
    }   
  }
  
  @keyframes rainbow-fill{
    0%{
      background:
        var(--bg-01-a),
        var(--bg-02-a),
        var(--bg-03-a),
        var(--bg-04-a),
        var(--bg-05-a),
        var(--bg-06-a),
        var(--bg-07-a),
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);
    }
    10%{
      background:
        var(--bg-01-b),
        var(--bg-02-a),
        var(--bg-03-a),
        var(--bg-04-a),
        var(--bg-05-a),
        var(--bg-06-a),
        var(--bg-07-a),
        var(--bg-08-a),  
        var(--bg-09-a), 
        var(--bg-10-a);      
    }
    20%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-a),   
        var(--bg-04-a),
        var(--bg-05-a),
        var(--bg-06-a),
        var(--bg-07-a),  
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);      
    }
    30%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-a),
        var(--bg-05-a),
        var(--bg-06-a),
        var(--bg-07-a),  
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);      
    }
    40%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-a), 
        var(--bg-06-a), 
        var(--bg-07-a),  
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);      
    }
    50%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-b), 
        var(--bg-06-a),
        var(--bg-07-a),   
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);      
    }
    60%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-b), 
        var(--bg-06-b), 
        var(--bg-07-a),   
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);      
    }    
    70%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-b), 
        var(--bg-06-b), 
        var(--bg-07-b),  
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);      
    }  
    80%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-b), 
        var(--bg-06-b), 
        var(--bg-07-b),  
        var(--bg-08-b),
        var(--bg-09-a),
        var(--bg-10-a);      
    }
    90%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-b), 
        var(--bg-06-b), 
        var(--bg-07-b),  
        var(--bg-08-b),
        var(--bg-09-b), 
        var(--bg-10-a);     
    }   
    100%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-b), 
        var(--bg-06-b), 
        var(--bg-07-b),  
        var(--bg-08-b),
        var(--bg-09-b), 
        var(--bg-10-b);     
    }
  }
  
  
  .title{
    /* color:#fff; */
    font-size:1.5rem;
    font-family: 'M PLUS Rounded 1c', sans-serif; 
    text-transform:uppercase;
    letter-spacing:1px;
  }

  .loadermain{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    background-color: #181616d8;
    top: 0;
    left: 0;
  }
div.k-window.error div.k-window-titlebar{
    background: red !important;
}
div.k-window.success div.k-window-titlebar{
    background: rgb(148, 231, 92) !important;
}

div.k-window.error div.k-window-content{
    display: flex;
    justify-content: center;
    align-items: center;
}
div.k-window.success div.k-window-content{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* @font-face{
    font-family: sarabun;
  src:  url("../assets/fonts/segeio/segoeui-bold-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bold-webfont.woff") format("woff")
  }
  @font-face{
    font-family: sarabun_italic;
  src:  url("../assets/fonts/segeio/segoeui-italic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-italic-webfont.woff") format("woff")
  }
  */
  @font-face{
    font-family: sarabun_bolditalic;
  src:  url(/assets/fonts/segoeui-bolditalic-webfont.bad7624325ce3d8298ca.ttf),url(/assets/fonts/segoeui-bolditalic-webfont.a9ed49ca941619822f51.woff) format("woff")
  } 

.k-multiselect input:focus {
   border-bottom: none !important
}

.k-list-item.k-selected,
.k-selected.k-list-optionlabel {
   background-color: #ff8522;
}

div.k-grid td {
   text-align: center;
}

th.header span.k-link {
   width: 100% !important;
   display: flex !important;
   justify-content: center !important;
}

div.k-grid-header {
   background: #ff8522;
}

div.k-grid-header tr {
   background: #ff8522;
   color: white;
   height: 40px;
}

div.k-grid input:focus {
   border-bottom: 0px !important;
}

div.k-grid input {
   border-bottom: 0px !important;
}

div.k-grid-content td {
   border-right: 1px solid #ccc !important;
   border-bottom: 1px solid #ccc !important;
   padding: 0px !important;
}

div.k-grid-content td:last-child {
   border-right: transparent !important;
   text-align: center;
}
.k-checkbox{
   border: 1px solid #ccc;
}
div.k-grid-content table tr {
   height: 40px !important;
}

.k-grid .k-table-tbody>.k-table-row:not(.k-detail-row):hover,
.k-grid .k-table-tbody>.k-table-row:not(.k-detail-row).k-hover {
   background: transparent !important;
}

div.k-grid-header th {
   padding: 0px !important;
}

div.k-grid-header th span.k-link {
   margin: 0px !important;
}

div.k-animation-container .k-checkbox-wrap {
   align-self: normal !important;
}

div.k-animation-container label {
   margin-top: unset !important
}

/* div.k-animation-container.k-animation-container-shown{
    width:17vw !important
} */
div.category .k-grid-header-wrap {
   border-bottom: 0px !important;
}





.k-grid-md .k-table-th>.k-cell-inner {
   margin-block: 0 !important
}

div.insertcategory div.k-grid td {
   text-align: center;
}


div.insertcategory div.k-grid div.list span.k-dropdownlist.k-picker.k-picker-md.k-rounded-md.k-picker-solid {
   height: 100% !important;
}

div.insertcategory div.k-grid div.dropdownlis {
   height: 100%;
}

div.insertcategory .k-picker-solid {
   background-color: white !important;
}

div.insertcategory div.k-animation-container.k-animation-container-shown {
   width: 27vw !important
}

div.insertcategory div.k-list-header {
   display: flex;
   justify-content: center;
   padding-bottom: 15px;
   background: #ff8731;
   margin-bottom: 2px;
}

div.insertcategory div.k-grid.k-grid-md input {
   font-family: sarabun;
   font-size: .7rem;
}

div.insertcategory div.k-grid.k-grid-md span.k-input-value-text {
   /* font-family: sarabun; */
   font-size: .7rem !important;
   font-weight: bold;
}

div.insertcategory div.k-grid-header {
   background: #ff8731 !important
}

div.insertcategory .k-virtual-content,
.k-virtual-list .k-list-content {
   overflow-y: scroll;
}

div.insertcategory .k-pager {
   background-color: white !important;
}

div.insertcategory .k-pager-sizes {
   color: #ff8731;
}

div.insertcategory .k-pager-info {
   color: #ff8731;
}

div.insertcategory .k-pager-numbers-wrap {
   color: #ff8731;
}

div.insertcategory .k-grid-aria-root {
   border-radius: 5px;
}

div.insertcategory .k-pager.k-pager-md.k-grid-pager {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}



div.insertcategory select {
   /* background-color: red !important;
    background: red !important; */
}











div.k-animation-container.k-animation-container-shown.insertattribue_typedropdown {
   left: 33vw !important;
   right: 0px !important;
   width: 10vw !important;
   background-color: #3f627b;
   background: #3f627b;
}

div.k-animation-container.k-animation-container-shown.insertattribue_typedropdown ul {
   background: #ffffff;
   font-family: 'sarabun';
   color: white;
}

div.k-animation-container.k-animation-container-shown.insertattribue_typedropdown div.k-list-content {
   background: #3f627b;
}

div.k-animation-container.k-animation-container-shown.insertattribue_typedropdown div.k-list {
   background: #3f627b;
}

div.k-animation-container.k-animation-container-shown.insertattribue_typedropdown div.k-popup.k-list-container.k-dropdownlist-popup {
   background: #3f627b;
}

div.k-animation-container.k-animation-container-shown.insertattribue_typedropdown div.k-child-animation-container {
   background: #3f627b;
}

div.k-animation-container.k-animation-container-shown.AttributeSelectValues {
   width: 24vw !important;
   left: 57vw !important;
}

div.k-animation-container.k-animation-container-shown.AttributeSelectValues div.k-list-header {
   background: #3e637a;
   color: white;
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
}




div.insertcategory_attribute input:focus {
   border-bottom: unset !important
}

div.insertcategory_attribute .k-textbox.k-input {
   border: 1px solid black;
}

div.insertcategory_attribute .k-list-filter {
   background: #485983;
}

div.insertcategory_attribute input.k-checkbox {
   border: 1px solid black;
}

div.insertcategory div.k-grid-content td input {
   height: 100%;
   border: 0px !important;
   text-align: center;
   font-family: sarabun_bolditalic !important;
}

div.insertcategory div.k-grid-content td input:focus-visible {
   border: 0px !important;
   outline: unset !important;

}

div.insertcategory div.dropdownlis span.k-dropdownlist {
   display: flex;
   /* height: 34px !important; */
}

div.insertcategory .k-grid-header span.k-column-title {
   font-size: .8vw;
   font-family: "sarabun_bolditalic";
}

div.insertcategory .k-grid-table-wrap td {
   font-size: 1vw;
   font-family: "sarabun_bolditalic";
}

div.insertcategory_parent li {
   font-size: 1rem;
   font-family: "sarabun_bolditalic";
}

div.insertcategory_parent li span.k-list-item-text {
   font-size: .6rem;
   font-family: "sarabun_bolditalic" !important;
} 






@media only screen and (min-width : 820px) and (max-width:912px) {}

@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertcategory #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.insertcategory #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.insertcategory #header div#infobar {

      width: 90%;

   }

   div.insertcategory #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.insertcategory #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.insertcategory #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.insertcategory .k-grid-header span.k-column-title {
      font-size: 12px;
   }
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:portrait) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div#waste {
      flex: 2;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46px;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.header div.searchbar {
      flex: 3;
   }

   div.header div.infobar {
      flex: 2;
   }

   div.insertcategory .k-grid-header span.k-column-title {
      font-size: 12px;
   }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div#waste {
      flex: 18px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   div#header div#infobar div.message {
      /* width: 46px; */
   }

   div#header div#infobar div.message:nth-child(3) {
      width: auto;
   }

   div#header div#searchbar {
      flex: 3;
   }

   div#header div#infobar {
      flex: 3;
   }

   div.insertcategory .k-grid-header span.k-column-title {
      font-size: 12px;
   }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   th.header span.k-column-title {
      font-size: 12px;
   }

   div.insertcategory #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.insertcategory #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.insertcategory #header div#infobar {

      width: 90%;

   }

   div.insertcategory #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.insertcategory #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.insertcategory #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.insertcategory .k-grid-header span.k-column-title {
      font-size: 12px;
   }


}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
   div.insertcategory> :first-child {
      display: block;
   }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
   div.insertcategory> :first-child {
      display: block !important;
   }
}



@media only screen and (min-width : 820px) and (max-width:912px) {}





@media only screen and (min-width : 200px) and (orientation:portrait) {}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (orientation:portrait) {}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) and (orientation:portrait) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {}


/* jjjjjj/jjj */

@media only screen and (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

}


@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:landscape) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div#waste {
      flex: 2;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46px;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.header div.searchbar {
      flex: 3;
   }

   div.header div.infobar {
      flex: 2;
   }
}


@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:landscape) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div#waste {
      flex: 18px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th#header {
      width: 100px !important;
   }

   div#header div#infobar div.message {
      /* width: 46px; */
   }

   div#header div#infobar div.message:nth-child(3) {
      width: auto;
   }

   div#header div#searchbar {
      flex: 3;
   }

   div#header div#infobar {
      flex: 3;
   }
}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:landscape) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   th.header span.k-column-title {
      font-size: 12px;
   }

   div.insertcategory #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.insertcategory #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.insertcategory #header div#infobar {

      width: 90%;

   }

   div.insertcategory #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.insertcategory #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.insertcategory #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }
}


div.k-animation-container.insertcategory_attribute input.k-input-inner {
   background-color: transparent !important;
   border: 0px !important;
}

div.k-animation-container.insertcategory_attribute {
   width: 30% !important;
   left: 60% !important;
}

div.k-animation-container.insertcategory_attribute div.k-list-header span[name="name"] {
   flex: 3;
   font-size: 14px;
   color: white;
   text-align: center;
}

div.k-animation-container.insertcategory_attribute div.k-list-header span[name="position"] {
   flex: 2;
   font-size: 14px;
   color: white;
   text-align: center;
}

div.k-animation-container.insertcategory_attribute div.k-list-header span[name="required"] {
   flex: 1;
   font-size: 14px;
   color: white;
   text-align: center;
}

div.insertcategory_brands input.k-input-inner {
   background-color: transparent !important;
   border: 0px !important;
}

div.insertcategory_brands input.k-checkbox {
   border: 1px solid black;
   ;
}

div.k-animation-container.insertcategory_brands {
   width: 15% !important;
}

div.k-animation-container.insertcategory_brands ul {
   display: flex;
   flex-direction: column;
}

div.k-animation-container.insertcategory_brands ul td {
   width: 100%;
}

.zoom-in-zoom-out {
   margin: 24px;
   width: 50px;
   height: 50px;
   background: green;
   animation: zoom-in-zoom-out 1s ease-out;
}

@keyframes zoom-in-zoom-out {
   0% {
      transform: scale(0, 0);
   }

   50% {
      transform: scale(1.5, 1.5);
   }

   100% {
      transform: scale(1, 1);
   }
}

@media only screen and (max-width: 768px) {
   .filterlist {
      flex-direction: column !important;
      margin-top: 3%;
   }

   .filterlist div {
      margin-bottom: 1% !important;
   }

   .attname {
      width: 100% !important;
   }

   div.col-2 {
      width: 100% !important;
   }

   div.col-1 {
      width: 100% !important;
      margin-right: 0 !important;
      margin-bottom: 5px !important;
   }

   div.k-filter {
      width: 100% !important;
   }

   .menures {
      position: absolute;
      z-index: 2;
      width: 55%;
   }

   .menubaricon {
      z-index: 3;
      position: absolute;
      left: 0;
      top: 5%;
   }

   div[name="mainmenu"] {
      height: auto !important;
   }

   .div[name="mainmenu"] .k-expander {
      width: 100% !important;
   }

   .k-expander-indicator {
      position: absolute;
      right: 5%;
   }

   #waste {
      display: none;
   }

   #searchbar {
      width: 80%;
   }

   #infobar {
      width: 80%;
      justify-content: end !important;
   }

   .headerres {
      flex-direction: column-reverse;
      justify-content: center;
      align-items: end;
      margin-bottom: 2%;
   }

   .settingres {
      flex-direction: column;
   }

   .settingresdata {
      flex-direction: column;
      width: 100% !important;
      margin-top: 2%;
   }

   .settingresinput {
      flex-direction: column;
   }

   .settingresradio {
      display: block !important;
   }

   .settingresradio span {
      display: block;
      width: 100%;
   }

   .settingresradio label {
      float: left;
   }

   .editsetting {
      top: 12% !important;
   }

   .settingright {
      padding: 10px 0 !important
   }

   .imageproductdetails {
      height: 50vh;
      width: 100%;
   }

   .productmaininfo {
      width: 100% !important;
   }

   .productdetailss {
      flex-direction: column;
   }

   #designProduct {
      flex-direction: column;
      width: 100%;
   }

   .footerdesignProductmm {
      flex-direction: column;
      width: 100% !important;
   }

   .headerdesignProductmm {
      width: 100% !important;
   }

   .backcat {
      text-align: center !important;
   }

   .footerop {
      margin-bottom: 2%;
   }

   .btnheaderimgpro {
      position: absolute;
      top: -50px !important;
      display: flex;
      justify-content: center;
   }

   .btnlistorders {
      flex-direction: column;
      align-items: center;
   }

   .btnlistorders button {
      width: 90% !important;
      margin-bottom: 1%;
   }

   .cardorderslist {
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

   .divcardorderslist {
      width: 100% !important;
   }

   .showallspan {
      top: 0 !important;
   }

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

   .paypelhead {
      flex-direction: column !important;
   }

   .paypelheadright {
      width: 100% !important;
      margin-bottom: 3%;
   }

   .addcreditcard {
      width: 60% !important;
   }

   .FiPlusCirclepaypel {
      width: 50px !important;
      height: 50px !important;
   }

   .settingcardright {
      width: 100% !important;
      padding: 0 !important;
   }

   .settingresinputdiv {
      width: 100% !important;
   }

   .cardonedashboard {
      flex-direction: column;
   }

   .progresscardgift {
      width: 100% !important;
   }

   .checkedclaim {
      /* display: none !important; */
   }

   .claimdiv {
      flex-direction: column;
   }

   .titleclaim {
      width: 100% !important;
   }

   .btnclaim {
      width: 50% !important;
   }

   .carddashboardbasket {
      flex-direction: column;
   }

   .cardbasket {
      width: 100% !important;
      margin-bottom: 3%;
   }

   .catdashboardlist {
      flex-direction: column;
   }

   .hiddenfilter {
      display: none !important;
   }

   .rightcardinsertpro {
      margin: 15% 0 !important;
   }

   .imgtblinsertpro {
      width: 50% !important;
   }

   .divheadeditpro {
      width: 100% !important;
      margin-bottom: 2%;
   }

   .divheadeditpro input {
      width: 100% !important;
      margin-left: 0 !important;
   }

   .btneditpro {
      margin-top: 5% !important;
   }

   .headmypro {
      flex-direction: column;
   }

   .headmypro div {
      width: 100% !important;
      flex-direction: column;
      margin-top: 4%;
   }

   .headmypro div button {
      width: 100% !important;
      margin: 1% 0 !important;

   }

   .alertcardmypro button {
      width: 100% !important;
   }

   .divfiltermypro {
      flex-direction: column;
   }

   .divfiltermypro div {
      width: 100% !important;
      position: relative !important;
      margin-bottom: 2%;
      height: 50px !important;
   }

   .divfiltermypro div select {
      height: 47px !important;
   }

   #editproduct0 {
      width: 100% !important;
   }

   .filterpaypal {
      position: absolute;
      top: -115%;
      width: 100% !important;
   }

   .filterpaypal select {
      height: 40px;
      border-radius: 7px !important;
      padding-left: 10px;
   }

   .serachpaypal {
      margin: 15% 0 2% 0 !important;
   }

   .searchinputpaypal {
      width: 100% !important;
   }

   .searchinputpaypal input {
      width: 100% !important;
   }

   .neworderlistcolumn {
      flex-direction: column !important;
   }

   .neworderlistcolumn div {
      width: 100% !important;
   }

   div.k-animation-container.insertcategory_brands {
      width: 40% !important;
   }

   div.insertcategory select {
      background-color: #ffac00 !important;
      background: #ffac00 !important;
      text-align: center;
   }

   .headerimgpro {
      margin: 0 !important;
   }

   .headerimgpro div {
      width: 100% !important;
   }

   .headerimgpro div input {
      width: 100% !important;
   }

   .divneworder {
      flex-direction: column;
      width: 100% !important;
   }

   .divneworder img {
      margin-top: 2%;
   }

   .listdivneworder {
      margin-top: 2% !important;
   }

   .insertfaqcard {
      flex-direction: column;
      width: 100% !important;
   }

   .orderheader {
      flex-direction: column;
   }

   .headorders {
      flex-direction: column;
   }

   .orderheader .headorders {
      width: 100%;
      margin-bottom: 2%;
   }

   .invoceheader {
      flex-direction: column;
      width: 100% !important;
   }

   .invoceheader div {
      width: 100% !important;
   }

   .svgstorename {
      display: none !important;
   }

   .datastorename {
      width: 100% !important;
   }

   .cardnew {
      width: 100% !important;
   }

   .shipcard {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
   }

   .headerorderdetails {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
   }

   .headerorderdetailsdiv {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
   }

   .divoperationorderdetails {
      width: 100% !important;
      align-items: start !important;
      justify-content: start !important;
   }

   .maindetailorder {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
   }

   .maindetailorderdiv {
      width: 100% !important;
   }

   .infodetailsorder {
      display: none !important;
   }

   .infodetailsorderdiv {
      display: flex !important;
   }

   .listprocat {
      width: 100% !important;
   }

   .divlistprocat {

      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
   }

   #submitorder {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
   }

   .submitorder {
      width: 100% !important;
   }
}

/* .selectionAddress label{
   position: absolute;
   left: 5%;
}
.selectionAddress input{
   position: absolute;
   left: 0;
} */

.filterpaypal select {
   height: 40px;
   border-radius: 7px !important;
   padding-left: 10px;
}

.tblproductdesignlist table {
   width: 99.9% !important;
}

.inputsearchmypro::placeholder {
   font-size: 1.2rem;
}

.k-grid-aria-root {
   border-radius: 0px !important;
}

.k-pager {
   background-color: #ffffff !important
}

div.k-grid-content td {
   border-right: 1px solid #fff !important;
}

div.insertcategory div.k-grid-header tr {
   background: #ff8306 !important;
   color: white
}

div.insertcategory div.k-grid-content td {
   border-right: 1px solid white !important;
   border-bottom: 1px solid white !important;
   padding: 0px !important;
   height: 40px;
}

div.insertcategory div.k-grid {
   /* box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; */
}

/* div.col-2 {
   flex: auto !important;
} */

/* table tbody tr:nth-of-type(even) td{
   background-color: #b1c8ff5c !important;
} */
div#insertcategory table tbody tr:nth-of-type(even) td div {
   /* background-color: #b1c8ff5c !important; */
   /* width: 100%; */
   height: 100%;
   display: flex;
   align-items: center;
   background: #bdd0fe !important;
}

table tbody tr:nth-of-type(even) td span.spanpro {
   width: 100%;
   height: 100%;
   position: relative;
   display: flex;
   /* background-color: #b1c8ff5c !important; */
   justify-content: center;
   align-items: center;
}

table tbody tr:nth-of-type(even) td.tdpro {
   width: 100%;
   position: relative;
   display: flex;
   background-color: #b1c8ff5c !important;
   height: 55px;
   align-items: center;
   justify-content: center;
}

table tbody tr:nth-of-type(even) td input {
   background-color: transparent !important;
}
table tbody tr:nth-of-type(even) td {
   background-color: #b1c8ff5c !important;
}



table tbody tr:nth-of-type(even) td div.list span.k-dropdownlist {
   height: 100%;
}

table tbody tr:nth-of-type(even) td div.list span.k-input-inner {
   background-color: #bdd0fe !important;
}

table tbody tr:nth-of-type(even) td div.list button {
   background-color: #bdd0fe !important;
   border-radius: 0 !important;
}

input.k-input-inner {
   cursor: pointer;
   text-align: center;
   padding: 0px !important;
   background: white;
   border-radius: 0px;
   padding-left: 4px !important;
   font-family: sarabun_bolditalic;
   height: 40px;
   border-radius: 2px;
   border: 0px !important;
}

input.k-input-inner:focus {
   background: #fff !important;
   border: 2px solid #ccc;
   border-radius: 3px !important;
   text-align: center;
}

.filterlist {
   margin-bottom: 1%
}

.k-grid .k-grid-header .k-table-th:nth-last-child() {
   padding-left: 16px !important;
}

input::placeholder {
   font-size: .8rem;
   color: #5c5c5cc4 !important;
   text-align: start;
}

input::-webkit-input-placeholder {
   /* WebKit, Blink, Edge */
   color: #5c5c5cc4 !important;
}

input:-moz-placeholder {
   /* Mozilla Firefox 4 to 18 */
   color: #5c5c5cc4 !important;
   opacity: 1;
}

input::-moz-placeholder {
   /* Mozilla Firefox 19+ */
   color: #5c5c5cc4 !important;
   opacity: 1;
}

input:-ms-input-placeholder {
   /* Internet Explorer 10-11 */
   color: #5c5c5cc4 !important;
}

input::-ms-input-placeholder {
   /* Microsoft Edge */
   color: #5c5c5cc4 !important;
}

.branddropdown {
   position: relative;
}

.branddropdown button {
   position: absolute;
   right: 0;
   top: 20%;
}

.hearticon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 0.5px solid rgb(204, 204, 204);
   display: flex;
   justify-content: center;
   align-items: center;
   right: 5%;
   position: absolute;
   top: 5%;
   font-size: 2rem;
   color: #626262;
   background-color: #fff;
}

.titleimglistpro {
   width: 140px;
   height: 35px;
   border-radius: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 5%;
   position: absolute;
   top: 10%;
   border: 1px solid #52448a;
   background-color: #e8e6f7;
   color: #403568;
}

.titleimglistpro1 {
   width: 100px;
   height: 35px;
   border-radius: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 5%;
   position: absolute;
   top: 10%;
   border: 1px solid #c3862c;
   background-color: #faf7d7;
   color: #9e591c;
}

.titleimglistpro2 {
   width: 100px;
   height: 35px;
   border-radius: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 5%;
   position: absolute;
   top: 10%;
   border: 1px solid #248e4c;
   background-color: #e2f7e3;
   color: #1f6b45;
}

.titleimglistpro3 {
   width: 100px;
   height: 35px;
   border-radius: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 5%;
   position: absolute;
   top: 10%;
   border: 1px solid #2b6ca3;
   background-color: #e1eff9;
   color: #1e5180;
}

.gridcss input {
   color: #575151 !important;
}



table.tblpaypal tbody tr:nth-of-type(even) td div {
   background: transparent !important;
}

table.tblpaypal tbody tr:nth-of-type(even) td div.divstatuspaypal {
   background: rgba(81, 245, 129, 0.56) !important;
   justify-content: center;
}

table.tblpaypal tbody tr:nth-of-type(even) td div.paymenttblpaypal {
   align-items: start !important;
}

@media screen and (max-width: 768px) {
   table.tblpaypal {
      border: 0;
   }

   table.tblpaypal .paymenttblpaypal {
      justify-content: end !important;
      align-items: end !important;
   }

   table.tblpaypal tbody tr:nth-of-type(even) td div.paymenttblpaypal {
      align-items: end !important;
   }

   table.tblpaypal .Timetblpaypal {
      justify-content: end !important;
      align-items: end !important;
   }

   table.tblpaypal tbody tr:nth-of-type(even) td div.divstatuspaypal {
      background: rgba(81, 245, 129, 0.56) !important;
      justify-content: center;
   }

   table.tblpaypal caption {
      font-size: 1.3em;
   }

   table.tblpaypal thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
   }

   table.tblpaypal tr {
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: 2rem;
      padding: 0 10px
   }

   table.tblpaypal td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right !important;
      width: 100% !important;


   }

   table.tblpaypal td::before {
      /*
     * aria-label has no advantage, it won't be read inside a table
     content: attr(aria-label);
     */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
      color: #303030;
   }

   table.tblpaypal td:last-child {
      border-bottom: 0;
   }

   table.tblpaypal .statuspaypaltd {
      height: 40px;
   }

   table.tblpaypal .divstatuspaypal {
      float: right !important;
      width: 35% !important;
      padding-right: 5px;
   }

   table.tblpaypal .Actionpaypaltd {
      height: 40px;
   }

   table.tblpaypal .spanActionpaypal {
      float: right !important;
      width: 60% !important;
   }

   .footertablepaypal {
      height: 150px !important;
      flex-direction: column;
   }

   .footertablepaypal div {
      width: 100% !important;
      justify-content: center !important;
      border: none !important;
   }
}



table.tblmypro tbody tr:nth-of-type(even) td div {
   background: transparent !important;
}

@media screen and (max-width: 768px) {

   table.tblmypro {
      border: 0;
      margin-top: 65% !important;
      background: #e6e6e6;
      border-radius: 3px;

   }


   table.tblmypro .seletimage {
      justify-content: space-between;
      align-items: center;
      display: flex;
      width: 100% !important;
   }

   table.tblmypro tbody tr:nth-of-type(even) td {
      background: transparent !important;

   }

   table.tblmypro tbody tr:nth-of-type(even) td div {
      background: transparent !important;
      display: block !important;

   }

   table.tblmypro tbody tr:nth-of-type(even) td div.pruductdatamypro {
      background: transparent !important;
      display: flex !important;
      align-items: end !important;

   }

   table.tblmypro caption {
      font-size: 1.3em;
   }

   table.tblmypro thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
   }

   table.tblmypro tr {
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: 2rem;
      padding: 0 10px
   }

   table.tblmypro td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right !important;
      width: 100% !important;


   }

   table.tblmypro td::before {
      /*
     * aria-label has no advantage, it won't be read inside a table
     content: attr(aria-label);
     */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
      color: #303030;
   }

   table.tblmypro td:last-child {
      border-bottom: 0;
   }

   table.tblmypro .statusmyprotd {
      height: 50px;
      margin-top: 5px;
   }

   table.tblmypro .divstatusmypro {
      float: right !important;
      width: 60% !important;
   }

   table.tblmypro .Actionmyprotd {
      height: 40px;
   }

   table.tblmypro .spanActionmypro {
      float: right !important;
      width: 60% !important;
   }

   .footertablemypro {
      height: 150px !important;
      flex-direction: column;
   }

   .footertablemypro div {
      width: 100% !important;
      justify-content: center !important;
      border: none !important;
   }

   table.tblmypro tbody tr:nth-of-type(even) td div.divselectimg {
      display: flex !important;
      align-items: center;
   }

   .modals {
      width: 98% !important;
   }

   .cardneworder {
      width: 90% !important;
   }

   .comboneworder {
      width: 98% !important;
      justify-content: center;
   }

   .levelneworder {
      width: 90% !important;
   }

   .filterorderlist {
      flex-wrap: wrap;
   }

   .filterorderlist span {
      margin: 5px !important;
   }
}


div.brand span.k-dropdownlist.k-picker.k-picker-md.k-rounded-md.k-picker-solid {
   height: 34px !important;
}

/* div.grid table tbody tr:nth-of-type(even) td div{
   display: block !important;
} */

div#showcategoryorder .k-table.k-grid-header-table.k-table-md {
   width: 100% !important;
}

div#showcategoryorder .k-table.k-grid-table.k-table-md {
   width: 100% !important;
}

div.k-grid-header {
   background: white !important;
}

/* div.k-grid-header tr {
   background: white !important;
   color: black !important
} */

showcategoryorder th.header span.k-link {
   justify-content: flex-start !important;
}

div#showcategoryorder div.k-grid-content td {
   text-align: left !important;
}

div#showcategoryorder div.k-grid-header-wrap span.k-link {
   justify-content: flex-start !important;
}

div#orderlist div.k-grid-header tr {
   background-color: #ff8522 !important;
}

div#orderlist .k-detail-row div.k-grid-header tr {
   background-color: #6d6d6d !important;
   background: #6d6d6d !important;
}
div#orderlist .k-detail-row div.k-grid-header tr th {
   background-color: #6d6d6d !important;
   background: #6d6d6d !important;
   background: #bbbbbb !important;
    padding: 0 !important;
}

div.editProduct.d-flex span.k-column-title {
   font-family: sarabun_bolditalic;
}

div.k-expander {
   width: 100%;
}

div.k-expander div[role="button"] {
   padding-right: 0px;
}

/* div[name="mainmenu"] .k-expander-header {
   justify-content: space-evenly !important;
} */


div.usertypecombo {
   /* background-color: white !important; */
}

div.brand .k-picker-solid:hover,
.k-picker-solid.k-hover {
   background: white !important;
}

div.usertype select.userttype {
   background: #ccc !important;
}

/* .k-expander-header:hover, .k-expander-header.k-hover{
   background-color: unset !important;
} */






contextMenu * {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
   font-family: 'Roboto Condensed', sans-serif;
}

/* .myproduct.container {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:100vh;
  font-size:200%;
} */
#contextMenu ul li {
   list-style: none;
}

#contextMenu {
   position: absolute;
   transform-origin: top left;
   transform: scale(0);
   width: 100px;
   height: 100px;
   border: 1px solid rgba(100, 100, 100, 0.55);
   padding: 5px;
   background: rgba(250, 250, 250, 0.98);
   box-shadow: 2px 2px 12px 4px rgba(100, 100, 100, 0.4);
   transition: transform 400ms ease-in-out 50ms;
}

#contextMenu.visible {
   transform: scale(1);
}

#contextMenu ul li {
   padding: 5px 3px;
   display: flex;
   align-items: center;
   cursor: pointer;
   color: rgba(50, 50, 50, 0.9);
   font-size: 15px;
}

#contextMenu ul li:hover {
   background: rgba(100, 100, 100, 0.12);
}

#contextMenu ul li.disabled {
   color: rgba(100, 100, 100, 0.5);
   cursor: pointer;
}

#contextMenu ul li.share {
   /*   height:40px; */
   width: 100%;
   flex-direction: column;
   align-items: left;
   flex-wrap: wrap;
}

#contextMenu ul li.share>.name {
   margin-top: -2px;
   margin-bottom: 10px;
   display: block;
}

#contextMenu ul li.share .icons {
   width: 100%;
   display: flex;
   justify-content: space-around;
}

#contextMenu ul li.share .icons>i:hover {
   background: #e7e7e7;
}

#contextMenu ul li i {
   width: 20px;
}

#contextMenu ul li div.name {
   padding-left: 8px;
}

#contextMenu div.break {
   margin: 4px 0px;
   border-top: 1px solid rgba(100, 100, 100, 0.5);
}

#pulse {
   position: fixed;
   width: 35px;
   height: 35px;
   background: rgba(0, 0, 0, 1);
   opacity: 0;
   border-radius: 50%;
   z-index: 100;
}

#pulse.active {
   animation: pulse 400ms ease;
}

@keyframes pulse {
   0% {
      opacity: 1;
      transform: scale(0);
   }

   100% {
      opacity: 0;
      transform: scale(1.1);
   }
}





div.newcategory_attribute input:focus {
   border-bottom: unset !important
}

div.newcategory_attribute .k-textbox.k-input {
   border: 1px solid black;
}

div.newcategory_attribute .k-list-filter {
   /* background: #e7a25d; */
}

div.newcategory_attribute input.k-checkbox {
   border: 1px solid black;
}


div.k-animation-container.newcategory_attribute input.k-input-inner {
   background-color: #f5f5f5 !important;
   /* border: 0px !important; */
}

div.k-animation-container.newcategory_attribute {
   width: 30% !important;
   left: 50% !important;
}

div.k-animation-container.newcategory_attribute div.k-list-header span[name="name"] {
   flex: 3;
   font-size: 14px;
   color: black !important;
   font-family: sarabun_bolditalic !important;
   text-align: left;
}

div.k-animation-container.newcategory_attribute div.k-list-header span[name="position"] {
   flex: 2;
   font-size: 14px;
   color: black !important;
   font-family: sarabun_bolditalic !important;
   text-align: center;
}

div.k-animation-container.newcategory_attribute div.k-list-header span[name="required"] {
   flex: 1;
   font-size: 14px;
   color: black !important;
   font-family: sarabun_bolditalic !important;
   text-align: center;
}

.divcardorderslist:hover {
   background-color: #f7f7f7 !important;
}


.accordion {
   background-color: #fff;
   border-style: solid;
   border-width: 0 0 1px 0;
   border-color: #e3e4e5;
   cursor: pointer;
}

.accordion:hover {
   background-color: #e3e4e5;
   transition: background-color .15s ease;
}

.accordion-header {
   border: none;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: transparent;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   padding: 8px;
}

.accordion-header span {
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.accordion-body {
   color: #444;
   font-size: 14px;
   opacity: 0;
   height: 0;
   overflow: hidden;
   transition: opacity .3s
}

.accordion-body.active {
   height: 100%;
   opacity: 1;

   /* padding: 5px; */
}


.arrow {
   transition: transform .2s linear;
}

.accordion:has(.active) .arrow {
   transform: rotate(180deg);
}

.checkbox-input {
   width: 25px;
   height: 25px;
}

.registerinputs_categorry {
   border: 0px
}

.registerinputs_categorry:focus-visible {
   border: 0px !important;
   outline: 0px !important;
}
.passshoweye{
   display:block;
}
.passhideeye{
   display: none;
}

div#mylibrary .createbtnlibrary:hover{
   /* background:#e7e7e7; */
   cursor:pointer;
   }
   div#mylibrary  .uploaddesignbtn:hover{
   cursor:pointer;
   }
   div#mylibrary  .carduploaddesign:hover{
   border:1px solid #81a80099 !important;
   border-radius:3px
   }

   div#mylibrary .k-listview-content{
      display: flex;
   }
   div#mylibrary div.k-listview.k-d-flex{
      width: 100%;
   }
   div#mytemplate div.k-listview.k-d-flex{
      width: 100%;
   }
   div#mytemplate div.k-listview-content{
      flex-wrap: wrap;
   }
   div#mytemplate .k-listview-content{
      display: flex;
   }
   .etsycolor{
      color: #248e4c;
   }
   div#modalCreateCard span.k-dropdownlist.k-picker.k-picker-md.k-rounded-md.k-picker-solid{
      background: white;
      height: 100% !important;
      border: 0px !important;
   }



   div#mytemplate div.k-listview-content{
      justify-content: flex-start;
   }






   /* ////////////////////////// */



:root {
  --cube-size: 150px;
  --text-size: 40px;
  --border-size: 20px;
  --gap: 1.8;
  --main-color: #dc64ff;
  --main-color-transparent: rgba(220, 100, 255, 0.4);
  --translateYLeft: 0;
  --translateYRight: 0;
  --duration: 1.7s;
}

@media (max-width: 768px) {
  :root {
    --cube-size: 100px;
    --text-size: 20px;
    --border-size: 15px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.bodyloader {
  position: absolute;
  display: flex;
  justify-content: center;
  height: 100%;
  padding: 100px 0 0;
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: white;
  background-color: transparent;
  overflow: hidden;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 4;
}

.backgroundloader {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  
  opacity: 0.07;
  animation: movingGradient 35s linear infinite;
}

.wrapperloader {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

.textloader {
  margin: 80px 0 0;
  font-size: var(--text-size);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.cubeloader {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transform: rotateX(20deg) rotateY(-135deg);
  animation: cubeRotation var(--duration) cubic-bezier(0, 0.5, 0.7, 1) infinite;
}

.cubeloader,
.bottomloader,
.sideloader {
  width: var(--cube-size);
  height: var(--cube-size);
}

.bottomloader,
.sideloader {
  position: absolute;
}

.bottomloader {
  background-color: var(--main-color);
  border-radius: 5px;
  box-shadow: 0 0 200px 0 var(--main-color-transparent);
  transform: translateY(calc(var(--cube-size) / var(--gap))) rotateX(-90deg);
}

.sideloader {
  display: flex;
}

.sideloader::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  border: var(--border-size) solid var(--main-color);
  border-radius: 5px;
  box-shadow: 0 0 200px 0 var(--main-color-transparent);
}

.backloader {
  transform: translateZ(calc(var(--cube-size) / var(--gap) * -1))
    rotateY(180deg);
}

.backloader::after {
  animation: cubeSideOut var(--duration) cubic-bezier(0.5, 1, 0.5, 1) infinite
    both;
}

.leftloader {
  transform: translateX(calc(var(--cube-size) / var(--gap) * -1))
    rotateY(-90deg);
  display: none;
}

.rightloader {
  transform: translateX(calc(var(--cube-size) / var(--gap))) rotateY(90deg);
}

.rightloader::after {
  animation: cubeSideIn var(--duration) cubic-bezier(0.5, 1, 0.5, 1) infinite
    both;
}

.frontloader {
  transform: translateZ(calc(var(--cube-size) / var(--gap)));
  display: none;
}

@keyframes cubeRotation {
  0%,
  80% {
    transform: rotateX(20deg) rotateY(-135deg);
  }

  100% {
    transform: rotateX(20deg) rotateY(-45deg);
  }
}

@keyframes cubeSideIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  10%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes cubeSideOut {
  0%,
  80% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes movingGradient {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translate(50%, 50%);
  }
}

div#showproductorder  div.k-listview.k-d-flex{
width: 100% !important;
height: unset !important;
}
.k-tilelayout{
   height: 100vh;
   background:#ccc;
}
div.k-tilelayout-item.k-card.k-cursor-grab
{
   height: unset !important;
}
/* div.react-grid-item.react-draggable.cssTransforms.react-resizable{
   width: unset !important;
   height: unset !important;
} */

/* div.react-grid-layout.layout{
   height: 1290px !important;
} */
div.react-grid-item.cssTransforms{
   background: #ccc;
}

div.buildersetting span.k-window-title{
   color: white;
}

div.etsycategorysettings{
   position: fixed;
    height: 95% !important;
    width: 58% !important;
}

div.mystores_settings{
   width: 50% !important;
   height: auto !important;
   position: fixed;
}
div.mystores_settings div.k-window-titlebar{
   color:white
}
main#content{
   position: absolute;
   left: 10%;
   top:10%
}

div.bulderselectedItem{
   border: 1px solid blue;
}
.react-grid-item img{
   position: fixed;
}
div.cropwindow span.k-window-title{
   color: white;
   font-family: sarabun_bolditalic;
   font-size: x-large;
}
div.react-grid-layout.layout{
   transform-origin: left top;

}


div#insertcategory div.categoryregister{
   flex: 1;
}
div#insertcategory div.categoryregister span.categoryname{
   font-size: .8rem;
    font-weight:bold 
}
div#insertcategory div.categoryregister input.registerinputs_categorry{
  height: 34px;
  width: 100%;
  border-radius:5px;
  font-family:sarabun_bolditalic; 
  color:#575151;
  text-align: center;
}
.categoryname .k-dropdownlist.k-picker{
border: 1px solid #cccccc;
}
div#insertcategory .k-dropdownlist.k-picker{
   width: 100% !important;
}
.k-grid .k-grid-header .k-cell-inner > .k-link > .k-sort-icon{
   color: #fff !important;
}
div#insertcategory span.k-multiselecttree{
   height: 34px !important;
}
div#insertcategory div.widthheight{
   flex: 6 !important;
}
div#insertcategory div.widthheight div.image{
   height: 37px !important;
   border-radius: 5px;
}
div#insertcategory table tbody tr:nth-of-type(even) td{
    background-color: #c4d5fe !important;
}
div#insertcategory  .k-button-md.k-icon-button{
   padding-left: 0px !important;
}
div#insertcategory div.k-grid-content table tr{
   height: 40px !important;
}
div#insertcategory div.k-grid.gridcss{
   height: 533.8px;
}
div.insertcategory div.upsection div.dropdownlis span.k-dropdownlist{
   height: 34px !important;
}
div.insertcategory_brands .k-list-filter {
   padding-right: 17px !important;
    padding-left: 0px !important;
    border-radius: 0px !important;
}
div.insertcategory_brands  .k-textbox.k-input{
   background: #f5f5f5;
   border-radius: 2px;
}
div.insertcategory_brands .k-input-prefix{
   border: 1px solid rgb(154, 150, 150);
    border-right: 0px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}
div.insertcategory_brands  input.k-input-inner{
   border: 1px solid rgb(154, 150, 150) !important;
   border-left: 0px !important;
   border-top-left-radius: 0px !important;
   border-bottom-left-radius: 0px !important;
}

div.newcategory_attribute .k-input-prefix{
   background-color: #f5f5f5 !important;
   border: 1px solid rgb(154, 150, 150);
    border-right: 0px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}
div.newcategory_attribute  input.k-input-inner{
   border: 1px solid rgb(154, 150, 150) !important;
   border-left: 0px !important;
   border-top-left-radius: 0px !important;
   border-bottom-left-radius: 0px !important;
}
div#insertcategory .k-virtual-content, .k-virtual-list .k-list-content{
   overflow-y: overlay !important

}

div.dashboardmenu{
   padding-bottom: .8rem !important;
   padding-top: .8rem !important;
}


div.cropwindow div.canvas-container{
   display: none;
}
div.cropwindow div.k-window-titlebar{
   height: 35px;;
}
div.cropwindow .k-window-content, .k-prompt-container{
   padding-block: 0px !important;
   padding: 0px;
}
div.cropwindow .k-window-content div.react-transform-wrapper.transform-component-module_wrapper__SPB86 {
   height: 565px !important;
}

div#orderpreview table tbody tr:nth-of-type(even) td div{
   background-color: unset !important;
}

div.k-animation-container.categoryfilter.k-animation-container-shown .k-input-inner{
    border:0px !important;
    background: white !important;
    background-color: white !important;
}
div.k-animation-container.categoryfilter.k-animation-container-shown span.k-textbox.k-input.k-input-md.k-input-solid.k-rounded-md{
   border: 1px solid #ccc !important;
}

div.categorylink span:hover{
   text-decoration: underline;
   color: #354bdc !important;
}
div#insertcategory input.k-input-inner{
   background: #ededed !important;
}
/* div#mytemplate div.drawparent */

.sacp-filter-sort-area .k-filter-toolbar .k-filter-field,
.sacp-filter-sort-area .k-filter-toolbar .k-filter-operator{
   display: none;
}
/* @font-face{
    font-family: sarabun;
  src:  url("../assets/fonts/segeio/segoeui-bold-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bold-webfont.woff") format("woff")
  }
  @font-face{
    font-family: sarabun_italic;
  src:  url("../assets/fonts/segeio/segoeui-italic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-italic-webfont.woff") format("woff")
  }
  
  @font-face{
    font-family: sarabun_bolditalic;
  src:  url("../assets/fonts/segeio/segoeui-bolditalic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bolditalic-webfont.woff") format("woff")
  }
    
  @font-face{
    font-family: test;
  src:  url("../assets/fonts/title.otf"),url("../assets/fonts/segeio/segoeui-bolditalic-webfont.woff") format("woff")
  } */

.k-list-item.k-selected,
.k-selected.k-list-optionlabel {
   background-color: #ff8522;
}

div#insertproduct {
   font-family: 'sarabun_bolditalic';
   border-radius: 5px;
}

div#insertproduct div.bottom.row div.left span {
   font-family: sarabun_bolditalic !important;
   color: rgb(68 68 68) !important;
   font-size: 1.1rem;
}

div#insertproduct div.bottom.row div.left input.nameproducts {
   border: 1px solid #d4d2d2;
   border-radius: 18px;
   background: #d4d2d2;
   padding: 0 5px;
   height: 40px;
}

div#insertproduct div.bottom.row div.left input[type="radio"] {
   border: 1px solid #d4d2d2;
   border-radius: 50%;
   background: #ffffff;
   padding: 0 5px;
   height: 20px !important;
   width: 20px !important;
   width: unset !important;
}

div#insertproduct div.bottom.row div.left input[type="radio"]:checked {
   border: none !important;
   border-radius: 50%;
   background: #0578d6 !important;
   padding: 5px;
   height: 15px !important;
   width: 15px !important;
   outline: 2px solid #0578d6;
}

div#insertproduct div.bottom.row div.left .texteditor {
   background: #eee;
}

/* div.k-animation-container.k-animation-container-shown{
    width: 15vw !important;
} */

div#insertproduct div.bottom.row div.right span {
   font-family: sarabun_bolditalic !important;
   color: rgb(68 68 68) !important;
   font-size: 1vw;
}

div#insertproduct div.bottom.row div.left span.k-dropdownlist {
   background-color: #d4d2d2 !important;
   border-radius: 23px !important;
}

div#insertproduct div.bottom.row div.left .k-picker-solid:focus,
.k-picker-solid.k-focus {
   box-shadow: unset !important
}

div#insertproduct div.bottom.row div.right input {
   border-bottom: 0px !important
}

div#insertproduct div.bottom.row div.right span.k-svg-i-chevron-down {
   color: black;

}

div#insertproduct div.bottom.row div.right span.k-dropdownlist {
   background-color: #eee !important;
}

div#insertproduct div.k-listview-content {
   display: flex;
   flex-wrap: wrap;
   background: white;
   /* border: 1px solid #8e8e8e; */
   border-top: 1px solid white;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
   height: 25px !important;
}

div#insertproduct div.bottom.row thead span {
   color: white !important;
}

th.insertproduct_header {
   background-color: #ff8522;
   color: white;
}

div.insertproduct_grid div.k-grid-header {
   background-color: #ff8522;
   color: white;
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
}

div.insertproduct_grid div.k-grid-header-wrap {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

div.insertproduct_grid .k-column-title {
   width: 100%;
   text-align: center;
   font-family: 'sarabun_bolditalic';
   font-size: .9vw;
}

div.insertproduct_grid .k-virtual-content,
.k-virtual-list .k-list-content {
   overflow-y: hidden;
}

div.insertproduct_grid div.k-grid-content td {
   border-right: 1px solid white !important;
   border-bottom: 1px solid white !important;
   padding: 0px !important;
   font-family: sarabun_bolditalic;
   font-size: 1vw;
}

div.insertproduct_grid div.k-grid-table-wrap {
   /* border-left: 1px solid #747272 !important; */
}

div#insertproduct input {
   font-family: sarabun_bolditalic;
   font-size: 1.2rem;
  

}

.NumericTextBox input {
   height: 100% !important;
   color: #575151 !important;
   background-color: #fff !important;
}

div.insertproduct_category {
   background: #586b85;
   width: 12vw;
   left: 0px;
   border-radius: 5px;
}

div.insertproduct_category ul {
   background: #485983;
   color: white;
}

div.insertproduct_category .k-menu-group .k-menu-item+.k-menu-item {
   border-bottom: 1px solid white;
}

div.insertproduct_gridcombo .k-input,
.k-picker {
   border-style: unset !important;
}

.k-picker-solid:focus,
.k-picker-solid.k-focus {
   box-shadow: inset !important;
}

.k-picker-solid:hover,
.k-picker-solid.k-hover {
   background-color: unset !important;
}

div#insertproduct div.texteditor .k-toolbar .k-button-group button {
   border: 1px solid black;
}

div#insertproduct div.texteditor span[title='Font Size'] span.k-input-inner {
   border-right: 1px solid black;
}

div#insertproduct div.texteditor span[title='Font Size'] {
   border: 1px solid black;
}


div#insertproduct div.texteditor div.insertproduct_gridcombo .k-input,
.k-picker {
   border-style: solid !important;
}

div#insertproduct div.texteditor span[title='Font Name'] span.k-input-inner {
   border-right: 1px solid black;
}

div#insertproduct div.texteditor span[title='Font Name'] {
   border: 1px solid black;
}

div#insertproduct div.texteditor span[title='Format'] span.k-input-inner {
   border-right: 1px solid black;
}

div#insertproduct div.texteditor span[title='Format'] {
   border: 1px solid black;
}

div#insertproduct div.texteditor .k-editor-toolbar {
   border-bottom: 1px solid black;
}

div#insertproduct div.texteditor .k-editor-content {
   background: #e2e2e2;
   overflow-y: hidden !important;
}

div#insertproduct div.texteditor {
   font-family: sarabun;
}

.k-input-solid:focus-within {
   border-color: unset !important;
   box-shadow: unset !important;
   color: black;
}

input#fiyat {
   color: #111111;
}

input#stock {
   color: #111111;
}

.k-input,
.k-picker {
   border-style: unset !important;
}

div.insertproductdropdown li {
   font-family: 'sarabun_bolditalic' !important;
   font-size: 1vw !important;
}

div#insertproduct .k-pager {
   background: white !important
}

div#insertproduct .k-pager-sizes {
   color: #ff8731;
}

div#insertproduct .k-pager-info {
   color: #ff8731;
}

div.EditDeleteProduct div.k-grid {
   box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

div.EditDeleteProduct .k-grid-aria-root {
   border-radius: 5px;
}

.k-pager.k-pager-md.k-grid-pager {
   border-radius: 5px;
}
.k-colorgradient{
   border-style: unset;
}







@media only screen and (min-width : 820px) and (max-width:912px) {}

@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 34px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertProduct #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.insertProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      flex-direction: column;
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
      height: unset !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
      height: 127px !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

   div#insertproduct div.bottom div.right {
      flex-direction: column;
      height: unset !important;
   }
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:portrait) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.insertProduct #header div#infobar div.message:nth-child(3) {

      flex: 2;

   }

   div.insertProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.right {
      flex-direction: column;
      height: unset !important;
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
      height: unset !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
      height: 127px !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      /* height: unset !important; */
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertProduct #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.insertProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
      height: unset !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
      height: 127px !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.right {
      flex-direction: column;
   }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertProduct #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.insertProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      flex-direction: column;
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
      height: unset !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
      height: 127px !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.right {
      flex-direction: column;
   }


}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
   div.insertProduct> :first-child {
      display: block;
   }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
   div.insertProduct> :first-child {
      display: block !important;
   }
}



@media only screen and (min-width : 820px) and (max-width:912px) {}





@media only screen and (min-width : 200px) and (orientation:portrait) {}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (orientation:portrait) {}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) and (orientation:portrait) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {}



@media only screen and (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

}


@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:landscape) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;
      flex: 1;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.insertProduct #header div#infobar div.message:nth-child(3) {

      flex: 1.2;

   }

   div.insertProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      flex-direction: column;
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
      height: unset !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
      height: 127px !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }
}


@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:landscape) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;
      flex: 1;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.insertProduct #header div#infobar div.message:nth-child(3) {

      flex: 1.2;

   }

   div.insertProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      flex-direction: column;
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
      height: unset !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
      height: 127px !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }
}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:landscape) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.header {
      width: 100px !important;
   }

   th.header span.k-column-title {
      font-size: 12px;
   }

   div.insertProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: 1;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 1;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 1;

   }

}

@media only screen and (min-width : 1280px) and (orientation:landscape) {
   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }
}


div.category:focus-visible {
   outline: unset !important
}

div.insertproductbranddropdown li {
   font-family: 'sarabun_bolditalic' !important;
   font-size: 1vw !important;
}

div.insertProduct div.k-grid-content td {
   height: 30px;
}

div.insertProduct div.k-grid-content td input {
   height: 100%;
   width: 100%;
   text-align: center;
   /* background: white !important; */
   border: 0px solid !important;

}

div.insertProduct div.k-grid-content span.k-input.k-numerictextbox {
   height: 100%;
   width: 100%;

}

div#insertProduct div.k-grid-header {
   background: transparent !important;
}

div#insertProduct div.k-grid-header {
   justify-content: center;
}

div#insertProduct div.k-grid-header {
   border: 1px solid black;
   background: black;
}

div.insertprice_grid div.k-grid-header {
   background-color: #ff8522 !important;
   height: 31px;
}

div.insertprice_grid .k-cell-inner {
   display: flex;
   justify-content: center;
}

div#insertProduct div.left div.k-grid-header-wrap span.k-column-title {
   color: #e28a4b !important;
}

div#insertProduct div.insertproduct_grid span.k-column-title {
   color: #e28a4b !important;
}

div.insertProduct div.k-grid-header-wrap span.k-column-title {
   color: #050505 !important
}

@media only screen and (max-width: 768px) {

   div#designProduct div.footerdesignProductmm{
      display: flex;
      flex-direction: column;
      width: 100% !important;
   }
   div#designProduct div.footerdesignProductmm div.section2{
      display: flex !important;
      flex-direction: column;
   }
   div#designProduct div.footerdesignProductmm div.section2 div.btnheaderimgpro{
      position: absolute;
      top: 0px !important;
      display: flex;
      justify-content: center;
      
   }
   div.designProduct div.footerdesignProductmm.zooming{
   position: fixed !important;
   bottom: 0px;
   }

   div#root{
      max-width: 100%;
   }

   /* .menures {
      position: absolute;
      z-index: 2;
      width: 55%;
      left: 0;
   } */

   .menubaricon {
      z-index: 3;
      position: absolute;
      left: 0;
      top: 5%;
   }

   div[name="mainmenu"] {
      height: auto !important;
   }

   .div[name="mainmenu"] .k-expander {
      width: 100% !important;
   }

   .k-expander-indicator {
      position: absolute;
      right: 5%;
   }

   #waste {
      display: none;
   }

   #searchbar {
      width: 80%;
   }

   #infobar {
      justify-content: end !important;
   }

   .headerres {
      flex-direction: column-reverse;
      justify-content: center;
      align-items: end !important;
      margin-bottom: 2%;
   }

}

div#insertproduct div.bottom.row div.left span.k-column-title {
   color: white !important;
}

/* .checkedtblmyproduct:checked{
   background-color: #0578d6;
} */

.checkboxpro input[type="checkbox"] {
   width: 20px !important;
   height: 20px !important;
}

.k-checkbox:checked,
.k-checkbox.k-checked {
   border-color: #ff6358 !important;
   color: white !important;
   background-color: #ff6358 !important;
}

div.insertproduct_editor div.k-toolbar {
   background-color: white;
}

.deletecolor{
	display:none
}
.deletecolor:hover{
	width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    background: #2424248a;
    border-radius: 3px;
	opacity: 1 !important;
    color: #fff;
	cursor:pointer

}
.k-listview{
   height: 100% !important;
}
.modaldropdownmypro  span.k-dropdownlist{
   height: 100%;
}
.btnmodalwindow{
   padding: 10px 20px;
   border-radius: 3px;
   background-color: rgb(0, 165, 99);
   color: #fff;
   border: 1px solid rgb(0, 165, 99) !important;
}
.btnmodalwindow{
   padding: 10px 20px;
    border-radius: 3px;
    background-color: rgb(2, 87, 53);
    color: #fff;
    border: 1px solid rgb(2, 87, 53) !important;
}
.brandname .k-dropdownlist{
   height: 100%;
    background: white;
}
div#insertproduct span.k-chip-actions{
   display: none;
}
div#insertproduct div.k-chip.k-chip-md.k-rounded-md.k-chip-solid.k-chip-solid-base{
   background: transparent;
   border: 0px;
   font-size: 1rem;
}
div#insertproduct span.k-clear-value{
   display: none;
}
div#insertproduct input[type="radio"]:checked{
   /* background:#ff6358 !important; */
   /* background-color: unset !important; */
   
}
div#insertproduct input[type="radio"]{
   width: unset !important;
   background: unset;
}
.k-radio:checked, .k-radio.k-checked{
   background-color: #ff6358 !important;
}
div#insertproduct div.dropdownlis{
   height: 100%;
}
div.colorpalet div.k-colorgradient{
   width: 100% !important;
}
div#insertproduct  div.k-grid-content table tr{
   height: 34px !important;
}
div#insertproduct div.insertprice_grid input{
   font-size: .9vw;
   color: black !important;
   cursor: pointer;
}
div#insertproduct div.insertprice_grid input:focus-visible{
   outline: unset !important;
}

div#insertproduct div.insertprice_grid table tbody tr:nth-of-type(even) td div{
   background: #e3ebff !important;
}

div#insertproduct input.nameproducts:focus-visible {
     outline: unset !important;
}

div#insertproduct input#stock {
   border: 1px solid rgb(204, 204, 204);
   font-size: .9vw;
   background: white !important;
   height: 34px;
}
div.brandname .k-dropdownlist.k-picker{
   height: 100% !important;
   width: 100% !important;
}
div.insertproductdropdown span.k-treeview-leaf-text{
   font-size: .8vw;
   font-family:sarabun_bolditalic; 
}
div#insertproduct  span.k-chip-label{
   font-size: .8vw;
   font-family:sarabun_bolditalic; 
}
div.insertproductdropdown  div.k-chip.k-chip-md.k-rounded-md.k-chip-solid.k-chip-solid-base{
   height: 100%;
}
div.insertproductbranddropdown span.k-list-item-text{
   font-size: .8vw;
   font-family:sarabun_bolditalic; 
}
div.brandname  span.k-input-value-text{
   font-size: .8vw;
   font-family:sarabun_bolditalic; 
}
div#insertproduct   span.k-checkbox-wrap{
   font-size: .8vw;
   font-family:sarabun_bolditalic; 
}
div#insertproduct  div.radiodiv{
   font-size: .8vw;
   font-family:sarabun_bolditalic; 
}
div.insertproduct_editor span.k-dropdownlist.k-picker{
   width: unset !important;
}
div#insertproduct div.insertproduct_editor{
   flex: 16.5;
}
div#insertproduct div.insertproduct_editor div.k-editor{
   height: 224px;
}

div#insertproduct .k-editor-content {

   overflow-y: hidden !important;
}
div.insertprice_grid{
   max-height: 160px !important;
}

div#insertproduct  div.insertproduct_grid{
   width: 70.7% !important;
   margin-top: 30px !important;
   /* display: none; */
}

div#insertproduct  div.insertproduct_grid th.insertproduct_header{
   background-color: #252525;
}

div#insertproduct  div.insertproduct_grid tbody tr:nth-child(odd) td{
   background-color: white !important;
}
div#insertproduct  div.insertproduct_grid tbody tr:nth-child(even) td{
   background-color: #bdd0fe !important
}
div#insertproduct  div.insertproduct_grid tbody tr:nth-child(odd) td .k-input.k-numerictextbox{
   background-color: white !important;
}
div#insertproduct  div.insertproduct_grid tbody tr:nth-child(odd) td .k-input.k-numerictextbox input{
   background-color: white !important;
}

div#insertproduct div.insertproduct_grid tbody tr td span{
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   color:black ;
}
div#insertproduct div.insertproduct_grid tbody tr td input{
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   color:black ;
}
div#editproduct  tbody tr td span{
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   color:black ;
}
div#insertproduct div.insertproduct_grid tbody tr td input{
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   color:black ;
}

div.tblmypro div.k-grid-content tr td div{
   /* background: white !important; */
}
div.tblmypro div.k-grid-content tr td{
   background: white !important;
}

div.insertproductdropdown .k-popup.k-multiselecttree-popup{
   height: 400px !important;
}
div#insertproduct span.k-multiselecttree div.k-chip.k-chip-md.k-rounded-md.k-chip-solid.k-chip-solid-base{
   background-color: #ccc !important;
   height: 25px;
}
div#insertproduct  div.insertproduct_grid span.k-dropdownlist{
   height: 100% !important;
   width: 100% !important;
}
div#insertproduct  div.insertproduct_grid .k-input-value-text{
   text-align: center;
}
div.insertproduct_gridcombo li.k-list-item span.k-list-item-text{
   font-family: sarabun_bolditalic;
}

div.colorwindow div.k-colorgradient-inputs.k-hstack{
   height: 30px;
}
div.colorwindow  div.k-vstack{
   flex-direction: row !important;
}
div.colorwindow  div.k-vstack span.k-hex-value{
   flex:1;
}
div.colorwindow  div.k-vstack .k-label.k-colorgradient-input-label{
   flex:1;
   display: flex;
   align-items: center;
}
div.colorwindow  div.k-vstack:nth-child(1){
   display: none;
}
div#designProduct div#productdescription{
   overflow-y: scroll;
   max-height: 300px;
   scrollbar-width: none;
   background: #f2fcfc;
}
div#designProduct div#productdescription p{
   text-align: justify;
}

div.insertprice_grid div.k-grid-header tr {
   height: 30px !important;
}
div.insertprice_grid  .k-grid .k-grid-header .k-table-th{
   vertical-align: unset !important;
}
div#insertproduct  div.rightdiv span.fontcombo {

    width: 100% !important;
    height: 35px !important;
    overflow-wrap: anywhere;
}
div.usertypecombo .k-list-item.k-selected, .k-selected.k-list-optionlabel{
   background-color: whitet !important;
   background: white !important;
   color: #111111 !important;
} 
div#insertproduct  div.rightdiv span.fontcombo div{

   flex: 1;
   display: flex;
   align-items: center;
}
div.fontypecombo span.k-input-prefix{
   display: none;
}

div#EditFont span.fontcombo{

   width: 100% !important;
   height: 35px !important;
   overflow-wrap: anywhere;
}

div#EditFont span.fontcombo div {
   flex: 1;
   display: flex;
   align-items: center;
}

div#EditFont  input{
   border: 1px solid #d4d2d2;
   border-radius: 3px;
   padding: 0 5px;
   height: 40px;
   font-size: .9vw;
   text-align: center;
   font-family: sarabun_bolditalic !important;
}

div.k-window.addimage  div.k-listview-content{
   display: flex;
   overflow: scroll;
   /* flex-wrap: wrap; */
} 
div#EditImage div.k-listview-content{
   display: flex;
   flex-wrap: wrap;
}
div#EditImage div.k-listview{
   width: 63%;
   background: white;
}
div#EditImage input {
   border: 1px solid #d4d2d2;
   border-radius: 3px;
   padding: 0 5px;
   height: 40px;
   font-size: .9vw;
   text-align: center;
   font-family: sarabun_bolditalic !important;
}
div.k-window.shopifysettings span.k-window-title{
   padding-block:0px !important
}
div.k-window.shopifysettings div.k-editor{
   border: 1px solid #a39f9f;
   border-radius: 2px;
   width: 100%;
}
div.k-window.shopifysettings .k-dropdownlist.k-picker{
   width: 15% !important;
   height: 30px !important;
}
div.k-window.shopifysettings{
   height: 70vh !important;
}
div.etsycategorysettings div.modaldropdownmypro span.k-dropdownlist.k-picker{
   width: 100% !important;
   height:35px !important
}
div.etsycategorysettings div.modaldropdownmypro .k-input-value-text{
   font-family: segoe;
}
div.etsycategorysettings  div.k-editor .k-dropdownlist.k-picker{
   width: 13% !important;
   height: 30px !important;
}
div.etsycategorysettings  div.k-editor .k-dropdownlist.k-picker span.k-input-value-text{
   font-size: 11px;
   font-family: segoe;
}
div.etsycategorysettings div.k-editor{
   border:1px solid black
}
div.etsycategorysettings .k-editor-toolbar{
   border-bottom: 1px solid bottom;
}
div.etsycategorysettings .k-window-title{
   padding-block:0px
}
div.shopifysettings div.k-editor .k-dropdownlist.k-picker span.k-input-value-text {
   font-size: 11px;
   font-family: segoe;
}
div.shopifysettings.shopymyproduct{
   width: 69% !important;
}
div.editprice_grid{
   max-height: unset !important;
}
div.tblmypro span.Etsy div{
   background:#000000;
   height: 100%;
   border-radius:14px;
   display: flex;
   align-items: center;
}

.k-numerictextbox input.k-input-inner{
   height: 34px;
   border: 1px solid #ccc !important;
}

div#insertproduct .multiselecttree .k-input-values,
div#insertproduct .multiselecttree .k-input-inner{
   border:1px solid #ccc !important
}
.palettediv .k-listview-content .item{
   flex-direction: row !important;
   width: 180px !important;
}
.palettediv{
   height: 200px !important;
}
.palettediv .k-listview-content .item{
   height: 50px !important;
}
.palettediv .k-listview-content .item span{
   border-radius: 5px !important;
   width: 70px !important;
   height: 35px !important;
   margin-right: 10px;

}
.palettediv .k-listview-content .item input{
   margin: 0 !important;
}
.palettediv .k-listview-content .item div{
   width: 20% !important;
   margin: 0 !important;
}
.palettediv .k-listview-content .item div svg{
  width: 20px;
  height: 20px;
}
#insertproduct .k-editor{
   min-height: 95% !important;
}

.k-input-values{
   border: 1px solid #cccccc;
}

.fontdiv .k-dropdownlist div{
   width: 90%;
}


div.color div.picture{
    width: 100%;
    height: 22vh;
    margin-right: 10px;
    background-size: cover;
    background-image: url(/assets/images/mock.62673ec4d2567bb040d2.png);
    flex: 1;
}
.colorwindow .k-window-titlebar{
    background-color: #0b0b0b;
}

div#color .k-listview-content{
    display: flex;
    flex-wrap: wrap;
}
div#color span{
    color: #ff8731;
}

div#color  input{
    border: 1px solid #d4d2d2;
    border-radius: 3px;
    background: black;
    padding: 0 5px;
    height: 40px;
    color: white;
    font-size: .9vw;
    text-align: center;
    font-family: sarabun_bolditalic !important;
}

div.colorwindow div.colorpalet{
   flex: 1;
}

.k-colorgradient:focus, .k-colorgradient.k-focus{
   box-shadow:unset !important;
}




   

@media only screen and (min-width : 820px) and (max-width:912px) {
    
}
@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.color  > :first-child{
      display: none !important;
      width: 92px;
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
 
  
   th.insertproduct_header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.color  #header > :nth-child(2){
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 1.5;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      flex: 1 !important;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: 2;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 2;
       
    }
    div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 3;
       
    }
    div.color  .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }

   
       div#color div.bottom{
         flex-direction: column;
       }

       div#color div.bottom div.left{
         width: 100% !important;
         flex-direction: column;
       }

       div#color div.bottom div.left  div:nth-child(1){
        flex-direction: column;
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(2){
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(3){
        width: 100% !important;
      }
       div#color div.bottom div.left span{
            font-size: 12px !important;
       }
       div#color div.bottom div.right{
         width: 100% !important;
    }
       div#color div.bottom div.right span{
         font-size: 12px !important;
    }
    div#color div.bottom div.right > :first-child{
      width: 100% !important;
 }
 div#color div.bottom div.left div.category{
   padding-left: 0px !important;
}
div#color div.bottom div.left div.category div.combo{
   margin-right: 0px !important;
}
div#color div.bottom div.left div.category >:first-child{
         padding-left: 0px !important;
      }
      div.insertproductdropdown li{
         font-size: 12px !important;
      }
      div:has(div#color){
         /* height: unset !important; */
      }
      div.colorpalet div.k-colorgradient{
         width: 152px !important;
      }
      div#color button.register{
         font-size: 12px !important;
      }
      div#header{
         margin-bottom: 7px;
      }
      div.color{
         justify-content: center;
         width: 100% !important;
      }

      div#color div.combo{
        height: 25px;
      }
      div#color span.title1{
        font-size: 12px !important;
      }
      div#color span.title2{
        font-size: 12px !important;
      }
      div.colorlist{
        width: 100% !important;
      }
      div[name="mainmenu"] span{
         font-size: 12px;
      }
      div[name="mainmenu"] div.k-expander-sub-title
      {
         font-size: 12px
      }
      div[name="mainmenu"] .k-expander-title svg{
         margin-left: 0px !important;
         margin-right: 0px !important;
      }
}
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 760px) and  (max-width:1240px)and (orientation:portrait) {
   div.color  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.insertproduct_header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.color  #header > :nth-child(2){
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 3;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      flex: 1 !important;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: .5;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: .5;
       
    }
    div.color  #header div#infobar div.message:nth-child(3){
      
      flex: 2;
       
    }
    div.color  .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }

   div#color div.bottom div.left div{
         /* flex-direction: column; */
       }
       div#color div.bottom{
         flex-direction: column;
       }

       div#color div.bottom div.left{
         width: 100% !important;
         flex-direction: column;
       }

       div#color div.bottom div.left div.topsection{
         width: 100% !important;
         flex-direction: column;
       }
       div#color div.bottom div.left div:nth-child(1){
        width: 100% !important;
      }
       div#color div.bottom div.left div:nth-child(2){
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(3){
        width: 100% !important;
      }
       div#color div.bottom div.left span{
            font-size: 12px !important;
       }
       div#color div.bottom div.right{
         width: 100% !important;
    }
       div#color div.bottom div.right span{
         font-size: 12px !important;
    }
    div#color div.bottom div.right > :first-child{
      width: 100% !important;
 }
 div#color div.bottom div.left div.category{
   padding-left: 0px !important;
}
div#color div.bottom div.left div.category div.combo{
   margin-right: 0px !important;
}
div#color div.bottom div.left div.category >:first-child{
         padding-left: 0px !important;
      }
      div.insertproductdropdown li{
         font-size: 12px !important;
      }
      div:has(div#color){
         /* height: unset !important; */
      }
      div.colorpalet div.k-colorgradient{
         width: 152px !important;
      }
      div#color button.register{
         font-size: 12px !important;
      }
      div#header{
         margin-bottom: 7px;
      }
      div.color{
         justify-content: center;
         width: 100% !important;
      }
      div#color div.combo{
        height: 25px;
      }
      div#color span.title1{
        font-size: 12px !important;
      }
      div#color span.title2{
        font-size: 12px !important;
      }
      div.colorlist{
        width: 100% !important;
      }
   
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
   div.color  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.insertproduct_header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.color  #header > :nth-child(2){
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 1.5;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      flex: 1 !important;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: 2;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 2;
       
    }
    div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 3;
       
    }
    div.color  .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }

   div#color div.bottom div.left div{
         /* flex-direction: column; */
       }
       div#color div.bottom{
         flex-direction: column;
       }

       div#color div.bottom div.left{
         width: 100% !important;
         flex-direction: column;
       }

       div#color div.bottom div.left div.topsection{
         width: 100% !important;
         flex-direction: column;
       }
       div#color div.bottom div.left div:nth-child(1){
        width: 100% !important;
      }
       div#color div.bottom div.left div:nth-child(2){
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(3){
        width: 100% !important;
      }
       div#color div.bottom div.left span{
            font-size: 12px !important;
       }
       div#color div.bottom div.right{
         width: 100% !important;
    }
       div#color div.bottom div.right span{
         font-size: 12px !important;
    }
    div#color div.bottom div.right > :first-child{
      width: 100% !important;
 }
 div#color div.bottom div.left div.category{
   padding-left: 0px !important;
}
div#color div.bottom div.left div.category div.combo{
   margin-right: 0px !important;
}
div#color div.bottom div.left div.category >:first-child{
         padding-left: 0px !important;
      }
      div.insertproductdropdown li{
         font-size: 12px !important;
      }
      div:has(div#color){
         height: unset !important;
      }
      div.colorpalet div.k-colorgradient{
         width: 152px !important;
      }
      div#color button.register{
         font-size: 12px !important;
      }
      div#header{
         margin-bottom: 7px;
      }
      div.color{
         justify-content: center;
         width: 100% !important;
      }
      div#color div.combo{
        height: 25px;
      }
      div.category:focus-visible{
        outline:unset !important
     }
     div#color div.combo{
       height: 25px !important;
     }
     div#color span.title1{
        font-size: 12px !important;
      }
      div#color span.title2{
        font-size: 12px !important;
      }
      div.colorlist{
        width: 100% !important;
      }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait){
   div.color  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.insertproduct_header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.color  #header > :nth-child(2){
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 1.5;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      flex: 1 !important;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: 2;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 2;
       
    }
    div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 3;
       
    }
    div.color  .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }

   div#color div.bottom div.left div{
         /* flex-direction: column; */
       }
       div#color div.bottom{
         flex-direction: column;
       }

       div#color div.bottom div.left{
         width: 100% !important;
         flex-direction: column;
       }

       div#color div.bottom div.left div.topsection{
         width: 100% !important;
         flex-direction: column;
       }
       div#color div.bottom div.left div:nth-child(1){
        width: 100% !important;
      }
       div#color div.bottom div.left div:nth-child(2){
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(3){
        width: 100% !important;
      }
       div#color div.bottom div.left span{
            font-size: 12px !important;
       }
       div#color div.bottom div.right{
         width: 100% !important;
    }
       div#color div.bottom div.right span{
         font-size: 12px !important;
    }
    div#color div.bottom div.right > :first-child{
      width: 100% !important;
 }
 div#color div.bottom div.left div.category{
   padding-left: 0px !important;
}
div#color div.bottom div.left div.category div.combo{
   margin-right: 0px !important;
}
div#color div.bottom div.left div.category >:first-child{
         padding-left: 0px !important;
      }
      div.insertproductdropdown li{
         font-size: 12px !important;
      }
      div:has(div#color){
         height: unset !important;
      }
      div.colorpalet div.k-colorgradient{
         width: 152px !important;
      }
      div#color button.register{
         font-size: 12px !important;
      }
      div#header{
         margin-bottom: 7px;
      }
      div.color{
         justify-content: center;
         width: 100% !important;
      }
      div#color div.combo{
        height: 25px;
      }
      div.category:focus-visible{
        outline:unset !important
     }
     div#color div.combo{
       height: 25px !important;
     }
     div#color span.title1{
        font-size: 12px !important;
      }
      div#color span.title2{
        font-size: 12px !important;
      }
      div.colorlist{
        width: 100% !important;
      }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
  div.color  > :first-child{
      display: block;
   }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
  div.color  > :first-child{
      display: block !important;
   }
}



@media only screen and (min-width : 820px) and (max-width:912px) {

}





@media only screen and (min-width : 200px) and (orientation:portrait) {

}
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) and (orientation:portrait) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) and (orientation:portrait) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {
 

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:portrait) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {

}


/* jjjjjj/jjj */

@media only screen and  (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
  div.color  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.colorlist{
    width: 100% !important;
  }
   
}


@media only screen and  (min-width : 760px) and  (max-width:1240px)and (orientation:landscape) {
   div.color  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.insertproduct_header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.color  #header > :nth-child(2){
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 3;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      flex: 1;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: .5;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: .5;
       
    }
    div.color  #header div#infobar div.message:nth-child(3){
      
      flex: 1.2;
       
    }
    div.color  .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }

   div#color div.bottom div.left div{
         /* flex-direction: column; */
       }
       div#color div.bottom{
         flex-direction: column;
       }

       div#color div.bottom div.left{
         width: 100% !important;
         flex-direction: column;
       }

       div#color div.bottom div.left div:nth-child(1){
        width: 100% !important;
      }
       div#color div.bottom div.left div:nth-child(2){
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(3){
        width: 100% !important;
      }
       div#color div.bottom div.left span{
            font-size: 12px !important;
       }
       div#color div.bottom div.right{
         width: 100% !important;
    }
       div#color div.bottom div.right span{
         font-size: 12px !important;
    }
    div#color div.bottom div.right > :first-child{
      width: 100% !important;
 }
 div#color div.bottom div.left div.category{
   padding-left: 0px !important;
}
div#color div.bottom div.left div.category div.combo{
   margin-right: 0px !important;
}
div#color div.bottom div.left div.category >:first-child{
         padding-left: 0px !important;
      }
      div.insertproductdropdown li{
         font-size: 12px !important;
      }
      div:has(div#color){
         height: unset !important;
      }
      div.colorpalet div.k-colorgradient{
         width: 152px !important;
      }
      div#color button.register{
         font-size: 12px !important;
      }
      div#header{
         margin-bottom: 7px;
      }
      div.color{
         justify-content: center;
         width: 100% !important;
      }   
      div.category:focus-visible{
         outline:unset !important
      }
      div#color div.combo{
        height: 25px !important;
      }
      div#color span.title1{
        font-size: 12px !important;
      }
      div#color span.title2{
        font-size: 12px !important;
      }
      div#color div.bottom div.left div.topsection{
        width: 100% !important;
        flex-direction: column;
      }
      div.colorlist{
        width: 100% !important;
      }
}


@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:landscape) {
   div.color  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.insertproduct_header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.color  #header > :nth-child(2){
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 3;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      flex: 1;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: .5;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: .5;
       
    }
    div.color  #header div#infobar div.message:nth-child(3){
      
      flex: 1.2;
       
    }
    div.color  .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }

   div#color div.bottom div.left div{
         flex-direction: column;
       }
       div#color div.bottom{
         flex-direction: column;
       }

       div#color div.bottom div.left{
         width: 100% !important;
         flex-direction: column;
       }

       div#color div.bottom div.left div:nth-child(1){
        width: 100% !important;
      }
       div#color div.bottom div.left div:nth-child(2){
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(3){
        width: 100% !important;
      }
       div#insertproduct div.bottom div.left span{
            font-size: 12px !important;
       }
       div#insertproduct div.bottom div.right{
         width: 100% !important;
    }
       div#insertproduct div.bottom div.right span{
         font-size: 12px !important;
    }
    div#insertproduct div.bottom div.right > :first-child{
      width: 100% !important;
 }
 div#insertproduct div.bottom div.left div.category{
   padding-left: 0px !important;
}
div#insertproduct div.bottom div.left div.category div.combo{
   margin-right: 0px !important;
}
div#insertproduct div.bottom div.left div.category >:first-child{
         padding-left: 0px !important;
      }
      div.insertproductdropdown li{
         font-size: 12px !important;
      }
      div:has(div#insertproduct){
         height: unset !important;
      }
      div.colorpalet div.k-colorgradient{
         width: 152px !important;
      }
      div#insertproduct button.register{
         font-size: 12px !important;
      }
      div#header{
         margin-bottom: 7px;
      }
      div.color{
         justify-content: center;
         width: 100% !important;
      }
      div.category:focus-visible{
         outline:unset !important
      }
      div#color div.combo{
        height: 25px !important;
      }
      div.colorlist{
        width: 100% !important;
      }
}

@media only screen and   (min-width : 280px) and (max-width:299px)and  (orientation:landscape) {
  div.color  > :first-child{
      display: none !important;
      
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.header{
      width: 100px !important;
  }
  th.header span.k-column-title{
      font-size:12px;
  }
   div.color  #header > :nth-child(2){
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 3;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: 1;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 1;
       
    }
    div.color   #header div#infobar div.message:nth-child(2){
      
      flex: 1;
       
    }
   
}

@media only screen and   (min-width : 1280px) and  (orientation:landscape){
   div.color{
      justify-content: center;
      width: 100% !important;
   }
   
}
@font-face{
    font-family: sarabun;
    src: url(/assets/fonts/Sarabun-Bold.b8825eaa682ec51689b3.ttf);
  }



div.headersearchinput{
   display: flex;
   flex: 1;
}



div.message svg{

   color: rgb(255 135 49) !important;
   /* font-size: 1.3vw !important; */
}
div#sortbar{
   flex:.5;
   display:flex;
   justify-content:center;
   align-items:center;
}



div#searchbar maindiv{
   display:flex;
   height:6vh;
   width:20vw;
   background-color:rgb(240 240 247);
   border-radius:36px
}


div#searchbar div.searchicon{
   flex:.5;
   display:flex;
   align-items:center;
   justify-content:center
}

div#infobar{
   flex:3;
   display:flex
}
div#orderlist{
    background: #fff;
    height: 100%;
    font-family: sarabun !important;
}
div#orderlist div.header div.title{
    font-family: sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: #ff8731;
}

/* "Add New Order" button section */
.newadd {
    padding: 10px 20px !important; /* Ensure padding is applied */
    border-radius: 8px !important;
    background-color: #ff8731 !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background-color 0.25s ease-in-out, transform 0.1s ease !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    height: 40px;
}

.newadd:hover {
    background-color: #e67320 !important; /* Darker shade for hover */
    transform: translateY(-1px);
}

.newadd span { /* Text inside the add button */
    font-size: 0.95rem;
}

.newadd > span > .IoMdAddCircle { /* Icon inside the add button */
    font-size: 1.6rem !important; /* Control icon size */
    vertical-align: middle;
}

div#orderlist  div.menu .k-button-solid-base:focus, .k-button-solid-base.k-focus
{
    box-shadow:unset !important
}
div#orderlist  div.menu{
    height:37px
}
div#orderlist  div.menu span{
    font-family: sarabun;
}

div#orderlist  div.grid thead{
    height:67px
}

div#orderlist  div.grid thead th{
    border: 0px;
}

div#orderlist .k-grid-content.k-virtual-content{
    display: contents;
}
div#orderlist  div.grid  .k-grid-header{
    display: contents;
}
div#orderlist .k-grid.k-grid-md{
    border:0px !important
}
div#orderlist  div.grid .k-checkbox.k-checkbox-md.k-rounded-md{
  display: block !important;
}
div#orderlist .k-checkbox-wrap{
    align-items: unset !important;
}
div#orderlist  div.grid tbody td{
    text-align: center;
}
div#orderlist .k-grid-header-wrap{
    border-bottom: 1px solid #ccc;
    /* margin-bottom: 9px; */
}
div#orderlist  div.grid tbody td{
    border: 0px !important;
    font-family: sarabun;
}
div#orderlist  .k-table-row.k-master-row.k-table-alt-row.k-alt{
    background-color: unset !important;
}
/* div.k-animation-container{
    width: 10vw !important;
    left: 0px;
} */








th.order_header{
    /* background-color: #ff8522; */
    color: white;
}
div.order_grid div.k-grid-header{
    background-color: #ff8522;
    color: #ff8522;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
div.order_grid div.k-grid-header-wrap{
    border-top-left-radius: 5px;
}
div.order_grid .k-column-title{
       width: 100%;
       text-align: left;
       font-family: 'sarabun_bolditalic';
       font-size: 1rem;
}
div.order_grid .k-virtual-content, .k-virtual-list .k-list-content{
    overflow-y: hidden;
}
div.order_grid div.k-grid-content td{
    border-right: 1px solid white !important;
    border-bottom: 1px solid white !important;
    padding: 0px !important;
    font-family: sarabun_bolditalic;
    font-size: 1rem;
}
div.order_grid div.k-grid-table-wrap{
    border-left: 0px
}

div#orderlist div.order_grid div.k-grid-container tbody td{
    text-align: center;
    color: #020202;
}
div#orderlist .k-pager{
    background: wite !important;
    color:#ff8522 !important;
    border: 0px;
}
.tblorderlist  .k-grid .k-grid-header .k-table-th:first-child{
    /* background-color: #ff8522; */
}
div#orderlist .k-table-td.k-detail-cell .k-grid
{
    margin: 24px 0 24px -10px;
}
div#orderlist .k-table-tbody .k-table-row:hover{
    background-color: transparent !important;
}
div#orderlist .k-grid .k-grid-header .k-table-th
{
    /* background:#ff8522 !important */
}

.k-table-tbody .k-table-row:hover, .k-table-list .k-table-row:hover, .k-table-tbody .k-table-row.k-hover, .k-table-list .k-table-row.k-hover{
    background:#111111 !important
}

.tblorderlist table tbody tr:nth-of-type(even) td div{
    display: block !important;
}
.detaildorderlist div.k-grid-container{
    border: 1px solid #000 !important;
}
.detaildorderlist div.k-grid-header tr{
    background: #001fff !important;
}
.detaildorderlist div.k-grid-header tr:hover{
    background: #001fff !important;
}
div#orderlist .detaildorderlist .k-grid .k-grid-header .k-table-th:first-child{
    background-color: #001fff !important;
}
div#orderlist table tbody tr td:nth-child(8) div{
    display: flex;
    justify-content: start;
    height: 37px;
}
div#orderlist table tbody tr td{
    color: #000 !important;
}
.gridcss table tbody tr td div{
    justify-content: center;
}

div#orderlist div[name="asli"] div.section5 .k-grid .k-table-th, .k-grid td, .k-grid .k-table-td{
    padding-left:0px !important ;
    padding-right: 0px !important;
}
div#orderlist span.filtered{
    background-color: rgb(255, 172, 113) !important;
}
div#orderlist tbody td{
    font-size: .8rem;
    text-align: center !important;
}
div#orderlist th span.k-cell-inner{
    width: 100% !important;
    display: flex;
    justify-content: center;
}
div#orderlist div.order_grid .k-column-title{
    font-size: .8rem !important;
}
div#orderlist th td svg{
     color: white !important;
}
div#orderlist tbody td svg{
    width: 100%;
    height: 22px;
}

div.infopopup{
    left: 40% !important;
    top: 50% !important;
width: 50%;
height: 40% !important;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.container{
    
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, #485563, #29323c);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn{
    padding: 10px 60px;
    /* background: #fff; */
    border: 0;
    outline: none;
    cursor: pointer;
    font-size: 22px;
    font-weight: 500;
    border-radius: 10px;
    transition: transform 0.2s;
}

.btn:active{
    transform: scale(0.95);
}

.popup{
    width: 400px;
    background: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 0 30px 60px;
    color: #333;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.open-popup{
    visibility: visible;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
}

.popup img{
    width: 100px;
    margin-top: -50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.popup h2{
    font-size: 38px;
    font-weight: 500;
    margin: 30px 0 10px;
}

.popup button{
    width: 100%;
    margin-top: 50px;
    padding: 10px 0;
    background-color: #e02189;
    color: #fff;
    border: 0;
    outline: none;
    font-size: 18px;
    border-radius: 4px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

div.reason_window{
    width: 50% !important;
    left: 25% !important;
    height: 50% !important;
    position: fixed !important
}
div.k-window-titlebar{
    background: #f58529;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
div#orderlist div.k-grid-content table tr.k-grid-norecords td{
    text-align: center !important;
}
div#orderlist .filterorderlist{
    padding-left: 5px;
}
div#orderlist .filterorderlist span{
    border-radius: 50px;
    font-weight: bold;
    font-size: .8vw;
    padding: 0 20px;
    cursor: pointer;
    background: rgb(233, 233, 233);
    height: 30px;
    text-align: center;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}
div#orderlist .k-dropdownlist.k-picker
{
    width: 100% !important;
}
div#orderlist div.k-grid-content table tr{
    height: 40px !important;
}

div#orderlist .k-dropdownlist.k-picker{
    height: 36px !important;
    background-color:rgb(242 242 242);
}
div#orderlist td.shipment div:first-child{
    display: flex;
    align-items: center;
    height: 55px;
}
div#orderlist td.detail div:first-child{
    display: flex;
    align-items: center;
    height: 55px;
}
div#orderlist table tbody tr:nth-of-type(even) td div{
    background: transparent !important;
}
div#orderlist table tbody tr:nth-of-type(even) td div.list span.k-input-inner{
    background: rgb(242 242 242) !important;
}
div#orderlist table tbody tr:nth-of-type(even) td div.list button{
    background: rgb(242 242 242) !important;
}
div#orderlist .k-column-title{
    color: black;
    font-size: .8vw;
    font-family: 'segoe';

}
div.orderlistetsy div.k-grid{
    height:auto !important;
  }
div#orderlist div.k-grid{
    height: 442px;
  }
  div#orderlist div.k-grid .k-grid-container{
    /* overflow: overlay !important; */
    overflow: visible !important;
  }
  div#orderlist k-grid.gridcss{
    height: 100% !important;
  }

  div#orderlist div.etsyorder table.k-table.k-grid-table td{
    text-align: center !important;
    padding-left: 2px !important;
  }
  div#orderlist div.etsyorder th span.k-cell-inner{
    justify-content: left !important;
    padding-left: 2px !important;
  }


  div#orderlist div.etsyorder tbody td svg{
    width: 36% !important;
  }

  div#orderlist .gridcss table tbody tr td div{
    display: flex;
    justify-content:center
  }
  div#orderlist div.k-grid.detaildorderlist{
    height: unset !important;
  }

  div#orderlist div.k-grid.detaildorderlist div.k-grid-header tr{
    background-color: #95afda !important;
  }

  div.etsyorder table tbody tr:nth-of-type(even) td div{
    
  }
  span.etsydetail{
    color:#6168ce !important
  }

  div#orderlist div.payment div{
    flex:1;
    display: flex;
    align-items: center;

  }
  
  div#orderlist div.payment div  svg{
    height: 100%;
  }
  div#orderlist table tbody tr td{
    overflow: visible !important;
  }
  div#orderlist table tbody tr td.statusorderlist{
    position: relative; /* Ensure it remains above normal flow */
    z-index: 100; /* Lower than modal */
    background: white;
  }
  div#orderlist table tbody tr:nth-of-type(even) td div.commentcancel{
    background-color: rgb(239, 242, 40) !important;
  }
  div.order_actioncombo{
    position: relative;
    z-index: 50 !important;
  }

  div#orderlist div.etsyorder table tbody tr td{
    overflow: hidden !important;
  }


 
  
/* Filter buttons container */
.filterorderlist {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap */
    gap: 10px; /* Space between filter buttons */
}

.filterorderlist span {
    padding: 8px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 20px; /* Pill shape */
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    font-size: 0.9rem;
    font-weight: 500;
    background-color: #f7f7f7;
    color: #555;
    text-align: center;
}

.filterorderlist span:hover {
    background-color: #efefef;
    border-color: #cccccc;
    color: #333;
}

.filterorderlist span.filtered {
    background-color: #ff8731; /* Your theme color */
    color: white;
    border-color: #ff8731;
    box-shadow: 0 2px 4px rgba(255, 135, 49, 0.3);
}

button[aria-label="minimize"],button[aria-label="maximize"]{
    display: none;
}

/* Modal Animations */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modern Modal Styles */
.modern-modal-overlay {
    animation: modalFadeIn 0.3s ease-out;
}

.modern-modal-content {
    animation: modalSlideIn 0.3s ease-out;
}

/* Scrollbar Styling */
.modern-modal-content::-webkit-scrollbar {
    width: 8px;
}

.modern-modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modern-modal-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.modern-modal-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* =============== General Scoping and Page Background =============== */
.insertProduct { /* Outermost container for the NewOrder component */
   background-color: #f0f0fa;
   color: #212529; /* Default black text */
 }
 
 .insertProduct > .d-flex.flex-column.w-100 { /* Main content column after sidebar */
   background-color: #f0f0fa;
   padding: 0;
   box-sizing: border-box;
   overflow-x: hidden;
 }
 
 /* Area holding the main content card, below header and back button */
 .insertProduct .d-flex.flex-column.mb-4.w-100 > div[style*="padding: 10px"] {
   padding: 20px !important; /* Main padding for the content area */
   min-height: calc(100vh - 70px); /* Assuming header is approx 70px */
   height: auto !important; /* Allow to grow with content, prevent double scroll */
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center; /* Center content like steps and cards */
 }
 
 /* =============== Header (Remains Unchanged by Request) =============== */
 .insertProduct #header {
   box-shadow: 0 2px 4px rgba(0,0,0,0.05);
   position: sticky;
   top: 0;
   z-index: 1050;
   background: white !important;
 }
 
 /* =============== Back Button & Page Title =============== */
 .insertProduct div[style*="padding: 5px 20px 5px 55px"] { /* Back button container */
   padding: 15px 2% 10px 2% !important; /* Use percentages for responsiveness */
   width: 100%;
   max-width: 1200px; /* Max width for content consistency */
   margin: 0 auto;
   box-sizing: border-box;
 }
 .insertProduct div[style*="padding: 5px 20px 5px 55px"] svg {
   color: #757575; /* Grey icon */
   margin-right: 8px;
   font-size: 1.2rem;
 }
 .insertProduct div[style*="padding: 5px 20px 5px 55px"] span {
   color: #212529; /* Black text */
   font-weight: 500;
 }
 .insertProduct div[style*="padding: 5px 20px 5px 55px"] > div:hover svg,
 .insertProduct div[style*="padding: 5px 20px 5px 55px"] > div:hover span {
     color: #ff8306;
 }
 
 
 .insertProduct div[style*="padding: 5px 55px"] { /* Create Order title container */
   padding: 10px 2% 20px 2% !important;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   box-sizing: border-box;
 }
 .insertProduct div[style*="padding: 5px 55px"] span {
   font-size: 1.8rem !important; /* Larger title */
   font-weight: bold !important;
   color: #212529;
 }
 
 /* =============== Step Indicator =============== */
 .insertProduct .levelneworder {
   width: 100% !important; /* Full width for responsiveness */
   max-width: 700px; /* Max width for the stepper */
   margin-bottom: 20px;
   padding: 10px 0 !important; /* Adjust padding */
 }
 .insertProduct .levelneworder span[style*="border-radius: 50%"] { /* Step circles */
   border-width: 2px !important; /* Thicker border for current/done steps */
   font-weight: bold;
   transition: background-color 0.3s,
    color 0.3s, border-color 0.3s;
    background: #dfdfdf;
 }
 .insertProduct .levelneworder span[style*="background: rgb(23, 38, 43)"] { /* Done step (dark circle with check) */
   background-color: #ff8306 !important; /* Organizational color for completed steps */
   border-color: #ff8306 !important;
 }
 .insertProduct .levelneworder span[style*="background: rgb(23, 38, 43)"] > .line1,
 .insertProduct .levelneworder span[style*="background: rgb(23, 38, 43)"] > .line2{
   border-top: 2px solid #ff8306 !important;
 }
 .insertProduct .levelneworder span[style*="border: 1px solid"] { /* Current step */
   border-color: #ff8306 !important;
   color: #ff8306 !important;
   background: #ffe5968c;
 }
 .insertProduct .levelneworder span[style*="color: rgb(204, 204, 204)"] { /* Future step (greyed out) */
   color: #adb5bd !important;
   /* border: 2px solid #dee2e6 !important; */
 }
 .insertProduct .levelneworder hr {
   border-top: 2px solid #dee2e6; /* Lighter hr */
 }
 .insertProduct .levelneworder > span[style*="width: 10%"] { /* Step labels (Products, Shipping, etc.) */
     color: #6c757d !important; /* Default grey for labels */
     font-size: 0.9rem;
     text-align: center;
 }
 .insertProduct .levelneworder > span[style*="color: rgb(0, 0, 0)"], /* Active label */
 .insertProduct .levelneworder > span[style*="color: #000"] {
     color: #ff8306 !important; /* Orange for active label */
     font-weight: bold;
 }
 
 
 /* =============== Main Content Sections (Products, Shipping, Submit) - General Card Style =============== */
 .insertProduct #products,
 .insertProduct #shopping, /* This ID seems to be for the shipping step form */
 .insertProduct #submitorder {
   width: 100% !important;
   max-width: 1000px; /* Max width for content sections */
   margin: 0 auto; /* Center the content sections */
   padding: 20px;
   background-color: #ffffff;
   border-radius: 12px;
   box-shadow: 0 6px 15px rgba(0,0,0,0.07);
   margin-bottom: 25px;
 }
 .insertProduct #submitorder { /* Special case for submit order to align two columns */
     display: flex !important;
     flex-wrap: wrap; /* Allow wrapping on small screens */
     justify-content: space-between;
     background-color: transparent !important; /* Transparent, as children are cards */
     box-shadow: none;
     padding: 0;
 }
 
 /* Specifics for "Add product to order" button area */
 .insertProduct .addproducttoorder {
   width: 100% !important; /* Was 65% */
   max-width: 1000px; /* Consistent max width */
   margin-left: auto;
   margin-right: auto;
   background-color: #fff8f0 !important; /* Light orange accent */
   border: 1px dashed #ff8306 !important;
   color: #ff8306 !important;
   transition: background-color 0.3s, border-color 0.3s;
 }
 .insertProduct .addproducttoorder:hover {
     background-color: #ffeccf !important;
     border-color: #e07305 !important;
 }
 .insertProduct .addproducttoorder svg {
     color: #ff8306 !important;
 }
 .insertProduct .addproducttoorder span {
     color: #ff8306 !important;
     font-weight: bold !important;
 }
 
 /* List of ordered items container */
 .insertProduct div.cardneworder:has(div[style*="border-top: 1px solid #ccc"]) { /* Targets the order list card */
   width: 100% !important; /* Was 65% */
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
   padding: 15px !important;
   border-radius: 12px !important;
   box-shadow: 0 4px 10px rgba(0,0,0,0.05);
 }
 
 /* Individual Order Item in GenerateOrderList */
 .insertProduct div[style*="border-top: 1px solid #ccc"] > div[style*="width: 100%"] { /* Each item */
     padding: 15px 0 !important; /* Vertical padding */
 }
 .insertProduct div[style*="padding: 1% 10px"] { /* Image and details flex container */
     padding: 10px !important;
 }
 .insertProduct div[style*="background: rgb(221, 221, 221)"] { /* Image BG */
     background-color: transparent !important;
     border-radius: 8px !important;
     width: 170px !important; /* Fixed size for consistency */
     height: 100px !important;
 }
 .insertProduct div[style*="margin-left: 30px"] span { /* Text details next to image */
     color: #212529 !important; /* Black text */
 }
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(45"], /* Brand name */
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(245"], /* Product name */
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(175"] { /* Product code */
     font-weight: 600 !important;
     font-size: 0.9rem;
 }
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(45"] { color: #202020 !important; }
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(245"] { color: #202020 !important; }
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(175"] { color: #202020 !important; }
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(175"] 
 { 
  border: 1px solid #202020;
  border-radius: 3px;
  padding: 5px;
  margin-top: 5px;
  position: relative;
  top: 5px;
 }
 
 .insertProduct span.svgneworder svg { /* Copy/Delete icons */
     color: #757575 !important; /* Grey icons */
     transition: color 0.2s;
 }
 .insertProduct span.svgneworder svg:hover {
     color: #ff8306 !important;
 }
 
 /* Color/Size dropdowns and Quantity input */
 .insertProduct .comboneworder {
     width: 100% !important; /* Was 65% */
     padding: 15px 0px !important;
     flex-wrap: wrap; /* Allow wrapping */
 }
 .insertProduct .comboneworder > div[style*="width: 30%"] { /* Color/Size dropdown containers */
     width: calc(50% - 10px) !important; /* Two per row on larger screens */
     margin-bottom: 15px;
 }
 .insertProduct .comboneworder select {
     border: 1px solid #ced4da !important;
     background-color: #f8f9fa !important; /* Field color */
     color: #212529; /* Black text */
     border-radius: 6px !important;
     height: 45px !important;
 }
 .insertProduct .comboneworder span[style*="color: rgb(89"] { /* Labels for Color/Size */
     color: #212529 !important;
     font-weight: 500;
 }
 .insertProduct input[id*="qty"] { /* Quantity input */
     border: 1px solid #ced4da;
     background-color: #f8f9fa;
     border-radius: 6px;
     color: #212529;
     text-align: center;
     height: 35px !important;
     width: 150px !important;
 }
 
 /* Subtotal and Shipping button area */
 .insertProduct div.cardneworder:has(button.paypalbtn) {
     max-width: 1000px;
     margin-left: auto;
     margin-right: auto;
     justify-content: flex-end;
     padding: 15px !important;
     background-color: #f9f9f9 !important; /* Light BG for this section */
 }
 .insertProduct button.paypalbtn, .insertProduct button.Shoppingbtn, .insertProduct button.backbtn { /* General button styling */
     border-radius: 6px !important;
     padding: 10px 20px !important;
     font-weight: bold;
     transition: background-color 0.2s, opacity 0.2s;
     height: auto !important;
     display: inline-flex;
     align-items: center;
 }
 .insertProduct button.paypalbtn { /* Shipping (Paypal green) button */
     background-color: #ff8306 !important; /* Organizational color */
     color: white !important;
     border: none !important;
 }
 .insertProduct button.paypalbtn:hover { background-color: #e07305 !important; }
 
 .insertProduct button.Shoppingbtn { /* Calculate Shipping (was green) */
     background-color: #ff8306 !important; /* Organizational color */
     color: white !important;
     border: none !important;
 }
 .insertProduct button.Shoppingbtn:hover { background-color: #e07305 !important; }
 
 .insertProduct button.backbtn {
     background-color: #6c757d !important; /* Grey for back */
     color: white !important;
     border-color: #6c757d !important;
 }
 .insertProduct button.backbtn:hover { background-color: #5a6268 !important; }
 
 
 /* =============== Shipping Address Form (#shopping) =============== */
 .insertProduct #shopping div.cardneworder {
     width: 100% !important; /* Was 65% */
     max-width: 1000px;
     margin-left: auto;
     margin-right: auto;
     padding: 20px !important;
     border-radius: 12px !important;
 }
 .insertProduct #shopping span[style*="border-bottom: 1px solid"] { /* Section title "Shipping address" */
     font-size: 1.2rem;
     padding: 15px 5px !important;
     border-bottom-color: #eee !important;
     color: #212529;
 }
 .insertProduct #shopping .shipcard { /* Container for input groups */
     padding-left: 5px !important;
     padding-right: 5px !important;
     margin-bottom: 15px;
 }
 .insertProduct #shopping .shipcard > span.w-100 { /* Labels for inputs */
     display: block;
     margin-bottom: 8px !important;
     font-weight: 500;
     color: #212529;
 }
 .insertProduct #shopping .shipcard > span.w-100 svg { /* Red star icon */
     fill: #ff8306 !important; /* Orange star */
     margin-left: 3px;
 }
 .insertProduct #shopping input[id*="shipping"],
 .insertProduct #shopping .k-dropdownlist { /* Kendo DropDownList for store */
     height: 48px !important;
     border: 1px solid #ced4da !important;
     background-color: #f8f9fa !important;
     border-radius: 6px !important;
     padding-left: 10px !important;
     color: #212529;
     width: 100% !important;
 }
 .insertProduct #shopping input[id*="shipping"]:focus,
 .insertProduct #shopping .k-dropdownlist.k-focus {
     border-color: #ff8306 !important;
     background-color: #fff !important;
     box-shadow: 0 0 0 0.2rem rgba(255, 131, 6, 0.25);
 }
 .insertProduct .k-dropdownlist .k-input-inner { /* Kendo DropDownList input part */
     border: none !important;
     background: transparent !important;
     padding-left: 0 !important;
 }
 
 
 /* =============== Submit Order Page =============== */
 .insertProduct #submitorder > .submitorder.maindetailorderdiv { /* Left column: order details */
     width: 100%;
     margin-bottom: 20px;
     background-color: #fff !important;
     border-radius: 12px;
     padding: 20px;
     max-height: none !important; /* Remove fixed max-height to rely on page scroll */
     overflow-y: visible !important;
 }
 .insertProduct #submitorder > .submitorder.maindetailorderdiv:last-child { /* Right column: customer/billing */
     width: 100%;
     background-color: transparent !important; /* Slightly different BG for summary */
     border-radius: 12px;
     padding: 0;
 }
 
 @media (min-width: 992px) {
     .insertProduct #submitorder > .submitorder.maindetailorderdiv {
         width: calc(65% - 10px); /* 65% for left column */
         margin-bottom: 0;
     }
     .insertProduct #submitorder > .submitorder.maindetailorderdiv:last-child {
         width: calc(35% - 10px); /* 35% for right column */
     }
 }
 
 
 .insertProduct .submitorder div[style*="border-bottom: 2px solid"] { /* Section dividers */
     padding: 20px 0 !important; /* Adjust padding */
     border-bottom-color: #eee !important;
 }
 .insertProduct .submitorder span[style*="font-size: 1.3rem"], /* Section titles */
 .insertProduct .submitorder span[style*="font-size: 1.5rem"] {
     font-size: 1.4rem !important;
     color: #212529;
 }
 .insertProduct .submitorder strong { color: #212529; } /* Standard strong text */
 .insertProduct .submitorder div[style*="background: rgb(255 255 255)"] { /* Inner cards in summary */
     background-color: #fff !important;
     padding: 15px;
     border-radius: 8px;
     margin-bottom: 15px;
     box-shadow: 0 2px 5px rgba(0,0,0,0.05);
 }
 
 /* Payment buttons in submit section */
 .insertProduct #submitorder button.paypalbtn {
     width: 100%;
     margin-top: 10px;
     padding: 5px 20px !important;
     font-size: 1rem;
     display: flex;
    justify-content: space-between;
 }
 .insertProduct #submitorder button.paypalbtn:first-of-type { /* Stripe */
     background-color: #ee5f17 !important; /* Stripe purple */
 }
 .insertProduct #submitorder button.paypalbtn:first-of-type:hover 
 { background-color: #5460c2 !important; }
 .insertProduct #submitorder button.paypalbtn:first-of-type:hover  svg path
 { fill: #fbfbfc !important; }
 
 .insertProduct #submitorder button.paypalbtn:last-of-type { /* PayPal */
     background-color: #ee5f17 !important; /* PayPal blue */
 }
 .insertProduct #submitorder button.paypalbtn:last-of-type:hover 
 { background-color: #002464 !important; }
 .insertProduct #submitorder button.paypalbtn:last-of-type:hover svg path
 { fill: #fbfbfc !important; }
 
 
 /* =============== Modals Styling =============== */
 .insertProduct div[style*="background: rgb(0 0 0 / 64%)"], /* Modal overlay, was #000000a3 */
 .insertProduct div[style*="background: #000000a3"] {
   background-color: rgba(0, 0, 0, 0.5) !important; /* Standard overlay */
   z-index: 1060 !important; /* Ensure modals are on top */
 }
 .insertProduct .modals { /* Modal content box */
   width: 90% !important;
   max-width: 700px !important; /* Max width for modals */
   border-radius: 12px !important; /* Rounded modal */
   padding: 25px !important;
   box-shadow: 0 5px 20px rgba(0,0,0,0.2);
   max-height: 85vh !important; /* Max height relative to viewport */
 }
 .insertProduct .modals span[style*="position: absolute"] { /* Close button */
   background-color: #f0f0f0;
   border-radius: 50% !important; /* Circular close button */
   color: #757575 !important;
   border: none !important;
   width: 36px !important;
   height: 36px !important;
   top: 15px !important; /* Adjust position */
   right: 15px !important;
   font-size: 1.1rem;
   transition: background-color 0.2s, color 0.2s;
 }
 .insertProduct .modals span[style*="position: absolute"]:hover {
     background-color: #e0e0e0;
     color: #212529;
 }
 .insertProduct .modals hr { border-top-color: #eee; }
 
 /* Search bar in modal */
 .insertProduct .modals div[style*="border: 1px solid rgb(149"] { /* Search bar container in modal */
   border-radius: 25px !important; /* Rounded */
   background-color: #f5f5f5 !important; /* Lighter BG */
   border-color: #e0e0e0 !important;
   height: 48px !important;
   padding: 0 15px;
 }
 .insertProduct .modals input.inputsearchmypro {
   background-color: transparent !important;
   font-size: 1rem !important;
   color: #212529;
 }
 .insertProduct .modals .inputsearchmypro::placeholder {
     color: #999;
 }
 .insertProduct .modals div[style*="border: 1px solid rgb(149"] svg { /* Search icon in modal */
     color: #757575;
     font-size: 1.2rem;
 }
 
 /* Items in product selection modal */
 .insertProduct .modals div[style*="padding: 1% 0"] { /* Each product item row */
     padding: 12px 0 !important;
     border-bottom-color: #f0f0f0 !important;
 }
 .insertProduct .modals div[style*="flex: 2"] { /* Image container in modal */
     border-color: #eee !important;
     border-radius: 8px !important;
     height: 120px !important; /* Adjust size */
     background-color: #f9f9f9 !important;
 }
 .insertProduct .modals div[style*="flex: 14"] { /* Text content container */
     margin-left: 15px !important;
 }
 .insertProduct .modals div[style*="flex: 14"] > span { /* Product name, description etc. */
     color: #212529 !important;
 }
 .insertProduct .modals div[style*="flex: 14"] > span[style*="font-weight: bold"] {
     font-size: 1rem;
     margin-bottom: 5px;
 }
 .insertProduct .modals div[style*="flex: 14"] > span[style*="color: rgb(167"] { /* Description */
     font-size: 0.85rem;
     color: #6c757d !important;
     height: auto !important; /* Remove fixed height, let text wrap or be handled by seemore */
     max-height: 60px; /* Limit initial visible height for description */
     overflow: hidden;
 }
 .insertProduct .modals span[style*="color: rgb(167 167 167)"][style*="position: absolute"] svg { /* See more/less icons */
     color: #757575 !important;
 }
 
 
 /* Size selection modal items */
 .insertProduct .modals div[style*="padding: 1% 0"][style*="cursor: pointer"] { /* Each size item row */
     padding: 15px 5px !important; /* More padding for tap targets */
 }
 .insertProduct .modals span[style*="background: rgb(43 158 2)"] { /* Select button in size modal */
     background-color: #ff8306 !important; /* Org color */
     border-radius: 6px !important;
     padding: 8px 18px !important;
     font-weight: bold;
     transition: background-color 0.2s;
 }
 .insertProduct .modals span[style*="background: rgb(43 158 2)"]:hover {
     background-color: #e07305 !important;
 }
 
 /* General text & icon color overrides if needed, be specific */
 .insertProduct body, .insertProduct p, .insertProduct span, .insertProduct div {
     /* color: #212529; */ /* Applied this more specifically */
 }
 .insertProduct svg {
     /* color: #757575; */ /* Applied this more specifically */
 }
 
 
 /* =============== Responsive Adjustments =============== */
 @media (max-width: 1200px) {
   .insertProduct .drawparent { /* Template cards in My Templates section */
     width: calc(33.333% - 13.33px) !important;
   }
 }
 
 @media (max-width: 992px) {
   .insertProduct .drawparent {
     width: calc(50% - 10px) !important;
   }
   .insertProduct .col-12.d-flex.flex-column.align-items-center {
     padding: 15px !important;
   }
   .insertProduct .col-12.d-flex.flex-column.align-items-center > div:nth-child(2) { /* Main content card */
     padding: 20px;
   }
   .insertProduct #shopping .shipcard,
   .insertProduct #shopping .col-6.px-2.shipcard { /* Shipping form fields */
       width: 100% !important;
       padding-left: 0 !important;
       padding-right: 0 !important;
   }
   .insertProduct .comboneworder > div[style*="width: 30%"] { /* Color/Size dropdown containers */
     width: 100% !important;
     margin-right: 0;
   }
   .insertProduct .comboneworder > div[style*="width: 30%"] > div[style*="width: 65%"] { /* Dropdown actual width */
     width: 100% !important;
   }
 
 }
 
 @media (max-width: 768px) {
   .insertProduct .drawparent {
     width: 100% !important;
   }
   .insertProduct .k-listview-content {
       gap: 15px;
   }
   .insertProduct .col-12.d-flex.flex-column.align-items-center {
     padding: 10px !important;
   }
    .insertProduct .col-12.d-flex.flex-column.align-items-center > div:nth-child(2) { /* Main content card */
     padding: 15px;
   }
   .insertProduct div[style*="padding: 5px 55px"] span, /* Page title */
   .insertProduct div[style*="padding: 5px 20px 5px 55px"] span { /* Back button text */
       font-size: 1.3rem !important;
   }
   .insertProduct .modals { width: 95% !important; padding: 20px !important; } /* Larger modals on small screens */
   .insertProduct .submitorder div[style*="border-bottom: 2px solid"] { padding: 15px 0 !important; }
 
 }
 
 @media (max-width: 576px) {
   .insertProduct .levelneworder > span[style*="width: 10%"],
   .insertProduct .levelneworder > span[style*="width: 12%"] { /* Stepper labels */
       font-size: 0.75rem;
       width: auto !important; /* Let text define width */
       padding: 0 5px;
   }
   .insertProduct .levelneworder hr { display: none; } /* Hide hrs in stepper on very small */
   .insertProduct .levelneworder { justify-content: space-around; }
 
   .insertProduct #products div.cardneworder:has(div[style*="border-top: 1px solid #ccc"]), /* Order list */
   .insertProduct #shopping div.cardneworder { /* Shipping form card */
       padding: 10px !important;
   }
   .insertProduct div[style*="padding: 1% 10px"] { /* Order item image/details */
       flex-direction: column;
       align-items: center !important;
   }
   .insertProduct div[style*="background: rgb(221, 221, 221)"] { /* Image in order item */
       margin-bottom: 10px;
   }
   .insertProduct div[style*="margin-left: 30px"] { /* Text details of order item */
       margin-left: 0 !important;
       text-align: center;
       width: 100%;
   }
   .insertProduct .comboneworder { padding: 10px 0 !important; } /* Dropdowns in order item */
 
   /* Submit order page layout */
     .insertProduct #submitorder > .submitorder.maindetailorderdiv,
     .insertProduct #submitorder > .submitorder.maindetailorderdiv:last-child {
         width: 100% !important;
         margin-bottom: 15px;
     }
      .insertProduct #submitorder > .submitorder.maindetailorderdiv:last-child { margin-bottom: 0;}
 
     .insertProduct .modals div[style*="padding: 1% 0"] { /* Product item in modal */
         flex-direction: column;
         align-items: center;
     }
     .insertProduct .modals div[style*="flex: 2"] { /* Image container in modal item */
         margin-bottom: 10px;
     }
      .insertProduct .modals div[style*="flex: 14"] { /* Text container in modal item */
         margin-left: 0 !important;
         text-align: center;
     }
 }
div#designProduct{
    width: 100%;
    height: 100%;
}
div#designProduct div.container{
}
div#designProduct div.colorpalet div{
    width: 100%;
}
div#designProduct button.selected{
    background-color:#ffb500 !important;
}

div#designProduct span.lbls{
    color:#ffb500 !important;
    font-family: sarabun_bolditalic;
    font-size: .8vw;
}
div#designProduct .k-listview-content{
   height: 55vh;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
div.designproduct_fonts div.k-child-animation-container{
}
div.designproduct_fonts{
}

div.designproduct_fontsetting{
    height: 100% !important;
    width: 100% !important;
}
div.designproduct_fontsetting span{
   font-family: sarabun_bolditalic;
}
div.designproduct_fontsetting div.k-window-titlebar{
    background: #1c292e;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: white;
}
div.designproduct_fontsetting span.k-input-value-text{
    text-align: end;
}
div.designproduct_fontsize li{
    display: flex;
    justify-content: center;
}
div.designproduct_fontsize ul{
    background: #1c292e;
    border-radius: 5px !important;
    color: white;
    font-family: sarabun_bolditalic;
}
div.designproduct_fontsetting span.k-dropdownlist{
    background: #d1d3d3;
    color: rgb(15, 15, 15);
}
div.designproduct_fontsetting .k-picker-solid:hover, .k-picker-solid.k-hover{
    background: #d1d3d3 !important;
}

div.designproduct_fonts ul{
    background: #fff;
    border-radius: 5px !important;
    color: black;
}
div.dropbox div.k-window-titlebar{
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 background-color: #2c2b2b !important;
 color: #d1d3d3;
 font-family: sarabun_bolditalic;
}

div.designproduct_imagesetting{
    height: 95% !important;
    width: 25% !important;
    border-radius: 5px;
}
div.designproduct_imagesetting span{
   font-family: sarabun_bolditalic;
}
div.designproduct_imagesetting div.k-window-titlebar{
    background: #1c292e;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: white;
}
div.designproduct_imagesetting span.k-input-value-text{
    text-align: end;
}

div.designproduct_imagesetting span.k-dropdownlist{
    background: #d1d3d3;
    color: rgb(15, 15, 15);
}
div.designproduct_imagesetting .k-picker-solid:hover, .k-picker-solid.k-hover{
    background: #d1d3d3 !important;
}
div#designProduct div.section1 {
    margin: 0px;
    background: #1c2129;
    border-bottom: 1px solid white !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}
div#designProduct div.section1 div.toolbar {
    align-items: center;
    height: 34px;

}
div#designProduct div.productcolor {
border-radius:20px;
width:23px !important;
cursor:pointer;
border: 1px solid #ccc;
height: 23px !important;

}

h1,
p {
  font-family: Lato;
}
.sample-canvas {
  width: 500px;
  height: 500px;
  background-color: #ddd;
}
.preview {
  width: 100px;
  height: 100px;
}
.Drawing-canvas{
    position: relative;
    top: 0px;
    left: 0px;
    width: 99%;
    height: 99%;
}
div.k-window-titlebar{
    cursor: pointer !important;
}
span.k-window-title{
    cursor: pointer !important;
}

.designproduct_preview{
    left:40% !important;
    top: 20% !important;
}
div#designProduct div.k-animation-container.k-animation-container-relative{
    width: 100%;
}
div#designProduct div.k-listview.k-d-flex{
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

div#designProduct .k-listview{
   height: 96% !important;
   width: 96% !important;
}
div.design_image_aligns{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:rgb(233 228 228);
    height:30px;
    margin:3px;
    border-radius:5px;
    cursor:pointer
}

div.orderdetail_pdfpreview span{
    font-family: sarabun_bolditalic;
}
 div.orderdetail_pdfpreview div.k-window-titlebar{
     background: #1c292e;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
     color: white;
}
 div.orderdetail_pdfpreview span.k-input-value-text{
     text-align: end;
}
 div.orderdetail_pdfpreview span.k-dropdownlist{
    background: #d1d3d3;
    color: rgb(15, 15, 15);
}
div.orderdetail_pdfpreview .k-picker-solid:hover, .k-picker-solid.k-hover{
    background: #d1d3d3 !important;
}

div.orderdetail_pdfpreview{
    width: 80% !important;
    height: 100% !important;
}

div.designproduct_actioncontroll{
    height: 9% !important;
    width: 35% !important;
    border-radius: 5px;
}
div.designproduct_actioncontroll .k-window-titlebar{
    height: 29px;
    color: white;
    font-family: sans-serif;
}
div.designproduct_actioncontroll .k-window-content, .k-prompt-container{
    padding-block:2px !important
}
div.designProduct .k-fab-solid-primary{
    outline:unset !important;
    background: #2a4366 !important;
}
div.designProduct .k-widget.k-drawer.k-drawer-end{
    top: 108px;
}

.section__Jobs-container{
    margin-top: 0px !important;
}
.section__Jobs-container span{
    left: 0px !important;
    height: 80px !important;
}
div#designProduct .container{
    align-items: unset !important;
    justify-content: start !important;
}

div#designProduct ul.section__Jobs-styledTabList button{
    border-radius: 0px !important;
}
div#designProduct button.section__Jobs-buttonCompany{
    padding-left: 0px;
    padding-right: 0px;
}

div#designProduct div.menubutton:hover{
    color: black;
    
}div#designProduct .section__Jobs-contain
.section__Jobs-buttonCompany:hover{
    background-color:transparent !important;
}
div#designProduct  .section__Jobs-container.container{
    padding-right: 0px !important;
    padding-left: 0px !important;
    height: 91vh;
}
div#designProduct  .section__Jobs-styledContent{

    height: 100%;
}
div#designProduct  .section__Jobs-container.container div.row div.col-sm-8{

    height: 100%;
}
div#designProduct .section__Jobs-styledTabList{
    max-width: unset !important;
    padding-right: 0px !important;
    background: white;
    
}

div#designProduct .section__Jobs-container span {
    border-left:0px ;
    font-size: 12px;
    z-index: 10;
    position: unset;
    top: 0;
    left: unset;
    display: unset;
    width: unset;
    height: unset;
    transition: unset;
    
}

.k-dropdownlist.k-picker{
    /* height: 24px ; */
    width: 100% !important;
    border: 1px solid #ccc !important;
}
div#designProduct .subdiv div.titlediv {
   width: 100%;
   text-align: center;
   font-family: "Inter", Helvetica, Arial, sans-serif;
   color: #49494a;
   font-size: .9vw;
}
div#designProduct .subdiv {
    align-items: center;
}

 div#designProduct  div.k-colorgradient{
   background-color:#303030
}
 .section__Jobs-container span.index1-chosen,span.index2-chosen,span.index3-chosen,span.index4-chosen,span.index5-chosen,span.index6-chosen,span.index7-chosen{
    display: none !important;
} 
 div#designProduct .k-colorgradient .k-draghandle{
    width: 14px !important;
    height: 14px !important;
    display: block;
}

 div.designproduct_imagesetting{
    height: 100% !important;
    width: 100% !important;
}

div#designProduct div.drawparent  span{
    height: unset !important;
}

div#designProduct div.section__Jobs-styledTab{
    background: #42493a;
}

div#designProduct .selectedtab{
    background: #fff;
    color: #1c2129;
}
div#designProduct .section__Jobs-buttonCompany{
    border-left:unset !important
}
div#designProduct div.section2{
    background: #f8f9f6 !important;
}

div#designProduct div.productaddedinfo{
    text-align:center;
    font-family: sarabun_bolditalic;
     font-size: 1vw;
     width:65px;
     height:70px;
     background:#efefef;
     display:flex;
     align-items:center;
     justify-content:center;
     border-radius: 3px;
     
}

div#designProduct div.productsize {
    
    display: flex;
    justify-content: center;
    align-items: center;

    
    border: 1px solid #d1d2d2;
    height: 32px;
    display: inline-flex;
    align-items: center;
    min-width: 32px;
    border-radius: 4px;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    
    margin: 0 4px 4px 0;
    
    }
    div#designProduct div.productsize:hover{
        outline: 2px solid #c0d29f;
    }
    .pt8 {
        padding-top: 8px !important;
    }
    .pb0 {
        padding-bottom: 0 !important;
    }
    .col-xs-12 {
        box-sizing: border-box;
        flex-basis: calc(100% / 12* 12);
        max-width: calc(100% / 12* 12);
        padding: 12px;
    }
    .form__field:last-child {
        margin-bottom: 0;
    }
    .pb6 {
        padding-bottom: 6px !important;
    }
    .form__field .label, .form__field label {
        display: block;
        color: #49494a;
        margin-bottom: 5px;
        font-size: 14px;
        font-family: "Inter", Helvetica, Arial, sans-serif;
        text-align: left;
    }
    .mockup__layer__content textarea {
        resize: none;
    }

    textarea {
        overflow: auto;
        height: 65px !important;
        width: 100%;
        min-height: 65px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .0196078431);
        border: 1px solid #ddd;
        padding: 15px;
        line-height: 1.2;
        border-radius: 4px;
        outline: 0;
    }
    .form__field {
        margin-bottom: 15px;
        position: relative;
        width: auto;
        border-bottom: 0px !important;
    }
    div#designProduct .section__Jobs-container span.k-dropdownlist{
        height: 35px !important;
        width: 100% !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        display: flex;
    }
    div#designProduct .section__Jobs-container span.k-icon.k-svg-icon.k-svg-i-caret-alt-down.k-button-icon{
        display: flex !important;
    }

    div.k-animation-container.designproduct_fonts .k-input-prefix, .k-input-suffix{
        display: none !important;
    }
    div.k-animation-container.designproduct_fonts  input.k-input-inner{
        background: #fff !important;
        border:1px solid #bcbcbc !important
    }

    div#designProduct span.k-input.k-numerictextbox{
        border: 1px solid #ddd !important;
        border-style: solid !important;
        height: 28px !important;
        display: flex;
    }
    div#designProduct .k-button.k-button-md.k-button-solid.k-button-solid-base.k-icon-button{
            border-radius: 0px !important;
            flex: unset !important;
            width: 16px !important;
            background-color: transparent !important;
            border: unset !important;
    }
    div#designProduct .k-spin-button{
        height: 100% !important;
        display: flex !important;
        justify-content: center;
        flex: 2;
    }
    div#designProduct .k-icon.k-svg-icon.k-svg-i-caret-alt-up.k-button-icon{
        height: unset !important;
    }
    div#designProduct  .k-icon.k-svg-icon.k-svg-i-caret-alt-down.k-button-icon{
        height: unset  !important;
    }

    div#designProduct  input.k-input-inner{
        background: transparent;
        height: 100% !important;
        flex: 8;
    }

    div#designProduct  input.k-input-inner:focus{
        background: transparent !important;
        border-color:#bcbcbc ;
        border: unset !important;
    }

    .w-color-editable-input{
        height: 40px;
    }
    div.w-color-sketch{
         border-radius: 0px !important;
         box-shadow: unset !important;
    } 
    div.colordialog{
        --sketch-background: rgb(255, 255, 255);
        --sketch-box-shadow: rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px;
        --sketch-swatch-box-shadow: rgb(0 0 0 / 15%) 0px 0px 0px 1px inset;
        --sketch-alpha-box-shadow: rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset;
        --sketch-swatch-border-top: 1px solid rgb(238, 238, 238);
        background: var(--sketch-background);
        border-radius: 4px;
        box-shadow: var(--sketch-box-shadow);
    }
    div#designProduct .form__field{
        border-bottom: 0px !important;
    }
    div#designProduct textarea{
        height: 65px !important;
    }
    div#designProduct span.fontdropdown{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100% !important;

    }   
    div.dropboxdiv div{
        width: 80%;
        background: #69e048;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
        cursor: pointer;
    }

    .section__Jobs-buttonCompany:hover, .section__Jobs-buttonCompany:focus{
        background: unset !important;
    }

    div#designProduct  .form__field .label, .form__field label{
        font-size: .8vw;
    }

    div#designProduct a{
        word-wrap: break-word; 
        word-break: break-word; 
        overflow-wrap: break-word; 
        display: inline-block; 
        max-width: 100%; 
    }
    div#designProduct p{
        word-wrap: break-word; 
        word-break: break-word; 
        overflow-wrap: break-word; 
        display: inline-block; 
        max-width: 100%; 
    }
    div.orderdetail_pdfpreview div.k-window-titlebar{
        height: 33px !important;
    }

    div#designProduct .section__Jobs-container.container{
        height: 100% !important;
    }
.section__Jobs-buttonCompany {
  background-color: Transparent;
  background-repeat: no-repeat;
  border: none;
  border-left: 2px solid #8892b0;
  outline: none;
  font-family: "Roboto Mono", monospace;
  font-size: 13px;
  height: 42px;
  width: 100%;
  text-align: left;
  padding: 0 20px;
}

.section__Jobs-buttonCompany:hover,
.section__Jobs-buttonCompany:focus {
  background-color: white;
  color: white;
}

.section__Jobs-buttonCompany:hover,
.section__Jobs-buttonCompany:active,
.section__Jobs-buttonCompany:focus {
  color: #64ffda;
  outline: 0px;
}

.section__Jobs-styledContent {
  font-family: sans-serif;
  text-align: left;
  color: #8892b0;
}

.section__Jobs-styledContent h4 {
  color: #ccd6f6;
  font-size: 22px;
  font-weight: 500;
}

.section__Jobs-styledContent h5 {
  font-size: 13px;
  font-family: "Roboto Mono", monospace;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
  color: #64ffda;
}

.section__Jobs-styledContent p {
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 10px;
}

.section__Jobs-detail::before {
  content: "▹";
  position: absolute;
  left: 0px;
  color: #64ffda;
}

.section__Jobs-container {
  margin-top: 50px;
  max-width: 700px;
  position: relative;
}

.section__Jobs-container span {
  border-left: 2px solid#64ffda;
  font-size: 12px;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 15px;
  display: inline-block;
  width: 2px;
  height: 42px;
  transition: transform 0.5s;
}

.section__Jobs-container span.index1-chosen {
  transform: translateY(0px);
}
.section__Jobs-container span.index2-chosen {
  transform: translateY(64px);
}
.section__Jobs-container span.index3-chosen {
  transform: translateY(128px);
}
.section__Jobs-container span.index4-chosen {
  transform: translateY(192px);
}
.section__Jobs-container span.index5-chosen {
  transform: translateY(256px);
}
.section__Jobs-container span.index6-chosen {
  transform: translateY(320px);
}
.section__Jobs-container span.index7-chosen {
  transform: translateY(384px);
}
.section__Jobs-container span.index8-chosen {
  transform: translateY(448px);
}
.section__Jobs-styledTabList {
  max-width: 130px;
}

.section__Jobs-styledTabList {
  padding: 0;
}

/* div.EditDeleteProduct div.k-animation-container.k-animation-container-shown
{
    width: 40vw !important;
    left: 55vw !important;
}

div.EditDeleteProduct div.k-grid-header tr{
    background: #ff8731 !important;
    color: white;
}
div.EditDeleteProduct div.k-grid-header{
    background: #ff8731 !important
}
div.EditDeleteProduct .k-virtual-content, .k-virtual-list .k-list-content{
    overflow-y: overlay;
}
div.EditDeleteProduct .k-pager{
    background-color: white !important;
}
div.EditDeleteProduct .k-pager-sizes{
    color: #ff8731;
}
div.EditDeleteProduct  .k-pager-info{
    color: #ff8731;
}
div.EditDeleteProduct  .k-pager-numbers-wrap{
    color: #ff8731; 
}

div.EditDeleteProduct  .k-grid-header span.k-column-title{
    font-family: 'sarabun_bolditalic' !important;
    font-size: 1vw;
}
div.EditDeleteProduct  div.k-grid-content td{
    font-family: 'sarabun_bolditalic' !important;
    font-size: 1vw !important;
}

.k-grid-aria-root{
   border-radius: 0px !important;
}
 .k-pager{
   background-color: #ffffff !important
}
div.k-grid-content td{
  border-right: 1px solid #fff !important;
}
div.EditDeleteProduct div.k-grid-header tr{
   background: #ff8306 !important;
   color: white
}
div.EditDeleteProduct div.k-grid-content td{
   border-right: 1px solid white !important;
   border-bottom: 1px solid white !important;
   padding: 0px !important;
   height: 40px;
}

div#editproduct .k-pager{
   background-color: white !important;
}

@media only screen and (min-width : 820px) and (max-width:912px) {
    
}
@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.editProduct > :first-child{
       display: none !important;
       
   }
   div#waste{
       width: 23px;
   }
   div.message svg{
       font-size: 20px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
       width: 106px !important;
   }

   div.header div.infobar div.message{
       width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
       width: auto;
   }
   div.editProduct #header > :nth-child(2){
       flex-direction: column-reverse;
       align-items: center;
       justify-content: center;
       
   }
   div.editProduct #header div#searchbar{
       flex: 1.5;
       width: 82%;
       
   }
   div.editProduct #header div#infobar{
       
       width: 90%;
       
   }
   div.editProduct #header div#infobar div.message:nth-child(1){
       
      flex: 2;
       
   }
   div.editProduct #header div#infobar div.message:nth-child(2){
       
       flex: 2;
       
    }
    div.editProduct #header div#infobar div.message:nth-child(2){
       
       flex: 3;
       
    }
    div.editProduct .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }
}
@media only screen and (min-width : 760px) and  (max-width:1240px)and (orientation:portrait) {
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div#waste{
       flex: 2;
   }
   div.message svg{
       font-size: 20px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
       width: 46px;
   }
   div.header div.infobar div.message:nth-child(3){
       width: auto;
   }
   div.header div.searchbar{
       flex: 3;
   }
   div.header div.infobar{
       flex: 2;
   }
   div.editProduct .k-grid-header span.k-column-title{
    font-size: 12px !important;
   }
    
}

@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div#waste{
       flex: 18px;
   }
   div.message svg{
       font-size: 20px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
       width: 100px !important;
   }

   div#header div#infobar div.message{
   }
   div#header div#infobar div.message:nth-child(3){
       width: auto;
   }
   div#header div#searchbar{
       flex: 3;
   }
   div#header div#infobar{
       flex: 3;
   }
   div.editProduct .k-grid-header span.k-column-title{
    font-size: 12px !important;
   }
}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait){
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
     width: 100px !important;
  }
  th.header span.k-column-title{
      font-size:12px;
  }
   div.editProduct #header > :nth-child(2){
       flex-direction: column-reverse;
       align-items: center;
       justify-content: center;
       
   }
   div.editProduct #header div#searchbar{
       flex: 1.5;
       width: 82%;
       
   }
   div.editProduct #header div#infobar{
       
       width: 90%;
       
   }
   div.editProduct #header div#infobar div.message:nth-child(1){
       
      flex: 2;
       
   }
   div.editProduct #header div#infobar div.message:nth-child(2){
       
       flex: 2;
       
    }
    div.editProduct #header div#infobar div.message:nth-child(2){
       
       flex: 3;
       
    }
    div.editProduct .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }
  

}

@media only screen and (min-width : 992px)and (orientation:portrait) {
  div.editProduct > :first-child{
       display: block;
   }
}

@media only screen and (min-width : 1200px)and (orientation:portrait) {
  div.editProduct > :first-child{
       display: block !important;
   }
}

@media only screen and (min-width : 820px) and (max-width:912px) {

}

@media only screen and (min-width : 200px) and (orientation:portrait) {

}
@media only screen and (min-width : 320px) and (orientation:portrait) {

}

@media only screen and (min-width : 480px) and (orientation:portrait) {

}

@media only screen and (min-width : 768px) and (orientation:portrait) {
 

}

@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:portrait) {

}

@media only screen and (min-width : 1200px) and (orientation:portrait) {

}

@media only screen and  (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div#waste{
       width: 23px;
   }
   div.message svg{
       font-size: 20px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
       width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
       width: auto;
   }
    
}

@media only screen and  (min-width : 760px) and  (max-width:1240px)and (orientation:landscape) {
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div#waste{
       flex: 2;
   }
   div.message svg{
       font-size: 20px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
       width: 46px;
   }
   div.header div.infobar div.message:nth-child(3){
       width: auto;
   }
   div.header div.searchbar{
       flex: 3;
   }
   div.header div.infobar{
       flex: 2;
   }        
}

@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:landscape) {
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div#waste{
       flex: 18px;
   }
   div.message svg{
       font-size: 20px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th#header{
       width: 100px !important;
   }

   div#header div#infobar div.message{
   }
   div#header div#infobar div.message:nth-child(3){
       width: auto;
   }
   div#header div#searchbar{
       flex: 3;
   }
   div#header div#infobar{
       flex: 3;
   }
}

@media only screen and   (min-width : 280px) and (max-width:299px)and  (orientation:landscape) {
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
     width: 100px !important;
  }
  th.header span.k-column-title{
      font-size:12px;
  }
   div.editProduct #header > :nth-child(2){
       flex-direction: column-reverse;
       align-items: center;
       justify-content: center;
       
   }
   div.editProduct #header div#searchbar{
       flex: 1.5;
       width: 82%;
       
   }
   div.editProduct #header div#infobar{
       
       width: 90%;
       
   }
   div.editProduct #header div#infobar div.message:nth-child(1){
       
      flex: 2;
       
   }
   div.editProduct #header div#infobar div.message:nth-child(2){
       
       flex: 2;
       
    }
    div.editProduct  #header div#infobar div.message:nth-child(2){
       
       flex: 3;
       
    }
    
}

@media only screen and (max-width: 768px) {

   .menures{
       position: absolute;
       z-index: 2;
       width: 55%;
   }
   .menubaricon{
       z-index: 3;
       position: absolute;
    left: 0;
    top: 5%;
   }
   div[name="mainmenu"]{
       height: auto !important;
   }
   .div[name="mainmenu"] .k-expander{
       width: 100% !important;
   }
   .k-expander-indicator{
       position: absolute;
       right: 5%;
   }
   #waste{
       display: none;
   }
   #searchbar{
       width: 80%;
   }
   #infobar{
       width: 80%;
       justify-content: end !important;
   }
   .headerres{
       flex-direction: column-reverse;
       justify-content: center;
       align-items: end;
       margin-bottom: 2%;
   }

   div.editProduct select {
     background-color: #ffac00 !important;
     background: #ffac00 !important;
     text-align: center;
}
}

div.EditDeleteProduct table tbody tr:nth-of-type(even) td{
  background: rgb(189 208 254) !important
}

div.EditDeleteProduct table tbody tr{
   height: 40px !important;
}
 div.EditDeleteProduct div.k-grid{
   height: 495.8px !important;
}
 div.productdesignlist div.tblproductdesignlist tbody tr{
   height: 35px !important;
}

 div.productdesignlist div.tblproductdesignlist tbody tr td{
   height: 100% !important;
}
 div.productdesignlist div.tblproductdesignlist table tbody tr:nth-of-type(even) td div{
   display: flex;
   justify-content: center;
}
 div#editProduct input.k-input-inner{
   background: #e6e6e6 !important;
}
 div.EditDeleteProduct.productdesignlist input.k-input-inner{
    
   background: #e6e6e6 !important;
}

.EditDeleteProduct {
   padding: 1rem; 
   box-sizing: border-box;
}

.content-card {
   background: white;
   padding: 1.5rem; 
   border-radius: 16px; 
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07); 
   margin: 0 auto; 
   width: 100%;
   box-sizing: border-box;
}

.filters-header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1.5rem; 
   flex-wrap: wrap; 
   gap: 1rem; 
}

.filters-title {
   font-size: 1.25rem; 
   border-bottom: 3px solid #ff8306; 
   padding-bottom: 0.3rem;
   font-weight: bold;
   color: #2c3e50; 
}

.clear-filters-button {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem; 
   background-color: #ff8306;
   color: white;
   padding: 0.5rem 1rem; 
   border-radius: 8px;
   font-weight: bold;
   font-size: 0.9rem;
   cursor: pointer;
   transition: background-color 0.25s ease, transform 0.15s ease;
   border: none;
   text-align: center;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.clear-filters-button:hover {
   background-color: #e67305; 
   transform: translateY(-1px); 
}

.clear-filters-button:active {
   transform: translateY(0);
   box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.clear-filters-button svg {
   font-size: 1.1em; 
}

.filterlist {
   display: flex;
   flex-wrap: wrap; 
   gap: 1.25rem; 
   margin-bottom: 1.5rem;
}

.filterlist > div[class*="col-"] { 
   padding: 0 !important; 
   min-width: 180px; 
   flex-grow: 1; 
   flex-basis: calc(50% - 1.25rem); 
}

@media (min-width: 768px) {
   .filterlist > div.col-2 { 
       flex-basis: calc(25% - 1.25rem); 
       max-width: calc(25% - 1.25rem);
   }
   .filterlist > div.col-6 { 
       flex-basis: calc(50% - 1.25rem); 
       max-width: calc(50% - 1.25rem);
   }
}

@media (min-width: 992px) {
    .filterlist > div.col-2 {
       flex-basis: calc(16.666% - 1.25rem); 
       max-width: calc(16.666% - 1.25rem);
   }
   .filterlist > div.col-6 {
       flex-basis: calc(50% - 1.25rem); 
       max-width: calc(50% - 1.25rem);
   }
}

.attname input.k-input-inner {
   width: 100%;
   padding: 0.7rem 0.9rem; 
   font-size: 0.9rem;
   background-color: #f8f9fa; 
   border: 1px solid #dfe4ea; 
   border-radius: 6px; 
   box-sizing: border-box;
   transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
   color: #343a40; 
}

.attname input.k-input-inner::placeholder {
   color: #6c757d; 
}

.attname input.k-input-inner:focus {
   background-color: #ffffff; 
   border-color: #ff8306; 
   box-shadow: 0 0 0 0.15rem rgba(255, 131, 6, 0.2); 
   outline: none;
}

.k-grid {
   border-radius: 8px;
   overflow: hidden; 
   border: 1px solid #e9ecef; 
   box-shadow: 0 2px 4px rgba(0,0,0,0.03); 
}

.k-grid .k-grid-header { 
   background-color: #f8f9fa !important; 
}

.k-grid .k-grid-header .k-header { 
   font-weight: 600 !important; 
   color: #495057 !important;
   text-transform: capitalize !important; 
   font-size: 0.875rem !important;
   border-bottom-width: 1px !important; 
   border-color: #dee2e6 !important;
   padding: 0.75rem 1rem !important; 
}

.k-grid td {
   padding: 0.75rem 1rem !important; 
   border-color: #e9ecef !important;
   font-size: 0.9rem;
   color: #343a40;
   vertical-align: middle; 
}

.k-grid .k-table-alt-row td { 
   background-color: #fdfdfe !important; 
}

.k-grid td .d-flex { 
   align-items: center;
   gap: 0.1rem; 
}

.k-grid td .d-flex svg { 
   font-size: 1.2rem; 
   color: #5a67d8; 
   cursor: pointer;
   transition: color 0.2s ease, transform 0.2s ease;
   display: block; 
   margin: auto; 
}

.k-grid td .d-flex svg:hover {
   color: #ff8306; 
   transform: scale(1.1); 
}

.k-grid td .d-flex svg.k-icon-delete-class { 
   color: #e53e3e !important;
}
.k-grid td .d-flex svg.k-icon-delete-class:hover {
   color: #c53030 !important;
}
#editProduct .EditDeleteProduct > div:first-child > .tooltipbuttons > svg[title*="back"] {
   color: #ff8306; 
   transition: transform 0.2s ease;
}

#editProduct .EditDeleteProduct > div:first-child > .tooltipbuttons > svg[title*="back"]:hover {
   transform: scale(1.15); 
}

.k-tooltip.tooltipbuttons {
   background-color: #2c3e50 !important; 
   color: white !important;
   border-radius: 5px !important;
   padding: 0.4rem 0.7rem !important;
   font-size: 0.8rem !important;
   box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
}

.k-grid.tblproductdesignlist .k-grid-norecords td div { 
   color: #6c757d;
   font-size: 1rem;
}
.k-grid.tblproductdesignlist .k-grid-norecords .k-loading-color { 
   color: #ff8306 !important; 
} */


.menures {
    height: 100vh; 
    position: sticky; 
    top: 0; 
    overflow-y: hidden; 

}
.menures > div[name="mainmenu"] {
    flex-grow: 1; 
    overflow-y: auto; 
}
.menures .Logo { 
    padding: 15px;
    text-align: center;
}

.EditDeleteProduct {
    background-color: #ffffff; 
    padding: 30px; 
    max-width: 1400px; 
    width: 100%; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); 
    box-sizing: border-box; 
    display: flex; 
    flex-direction: column;
    height: auto !important; 
    min-height: 80vh; 
}

.filters-header-container {
    background-color: #f7f7f7; 
    border-radius: 10px; 
    padding: 15px 20px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee; 
}

.filters-title {
    font-size: 1.4rem; 
    font-weight: bold;
    color: #333;
}

.clear-filters-button {
    display: flex;
    align-items: center;
    gap: 8px; 
    color: #ff8306; 
    cursor: pointer;
    font-weight: bold;
    transition: color 0.2s ease;
}

.clear-filters-button:hover {
    color: #e67500; 
}

.clear-filters-button svg {
    font-size: 1.2rem; 
}

.filterlist {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; 
    margin-bottom: 25px;
}

.filterlist .attname {
    flex: 1; 
    min-width: 200px; 
}

.k-input-inner { 
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd; 
    /* border-radius: 8px; */
    background-color: #fcfcfc; 
    color: #333;
    font-size: 1rem;
    outline: none;
    /* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);  */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.k-input-inner:focus {
    border-color: #ff8306; 
    box-shadow: 0 0 0 2px rgba(255, 131, 6, 0.2); 
}

.k-grid {
    border: 1px solid #e0e0e0; 
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07); 
}

.k-grid-header th {
    background-color: #ff8306; 
    color: white;
    font-weight: bold;
    padding: 12px 15px;
    text-align: right; 
    border-color: #e67500; 
}

.k-grid-content td {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0; 
    color: #444;
}

.k-grid-content tr:nth-child(even) {
    background-color: #f9f9f9; 
}

.k-grid-content .d-flex.justify-content-around svg,
.k-grid-content .d-flex.justify-content-center svg {
    color: #333; 
    font-size: 1.3rem; 
    transition: transform 0.2s ease, color 0.2s ease;
}

.k-grid-content .d-flex.justify-content-around svg:hover,
.k-grid-content .d-flex.justify-content-center svg:hover {
    transform: scale(1.1); 
    color: #e67500; 
}

.k-grid-content .col-2.col-md-2 {
    white-space: nowrap; 
}

.k-pager-wrap { 
    background-color: #f7f7f7; 
    border-top: 1px solid #e0e0e0;
    padding: 15px 20px; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px;
    margin-top: -1px; 
    display: flex;
    justify-content: space-between; 
    align-items: center;
    flex-wrap: wrap; 
    gap: 10px; 
}

.k-pager-numbers .k-button {
    background-color: #eee;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px 15px;
    margin: 0 3px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.k-pager-numbers .k-button:hover {
    background-color: #ff8306 !important;
    color: white;
    border-color: #ff8306 !important;
}

.k-pager-numbers .k-button.k-selected {
    background-color: #ff8306 !important;
    color: white;
    border-color: #ff8306 !important;
    font-weight: bold;
}

.k-pager-nav-buttons .k-button {
    background-color: #ff8306;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    margin: 0 5px;
    transition: background-color 0.2s ease;
}

.k-pager-nav-buttons .k-button:hover {
    background-color: #e67500;
}

.k-pager-info {
    color: #555;
    font-size: 0.9rem;
}

.k-pager-sizes {
    color: #555;
    font-size: 0.9rem;
}

.tooltipbuttons svg {
    color: #ff8306; 
    transition: transform 0.2s ease, color 0.2s ease;
}

.tooltipbuttons svg:hover {
    transform: scale(1.1);
    color: #e67500;
}

.k-loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; 
    min-height: 200px; 
}

.k-loader-container .k-loader-segment { 
    border-color: #ff8306 transparent #ff8306 transparent;
}
/* @font-face{
    font-family: sarabun;
  src:  url("../assets/fonts/segeio/segoeui-bold-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bold-webfont.woff") format("woff")
  }
  @font-face{
    font-family: sarabun_italic;
  src:  url("../assets/fonts/segeio/segoeui-italic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-italic-webfont.woff") format("woff")
  }
  
  @font-face{
    font-family: sarabun_bolditalic;
  src:  url("../assets/fonts/segeio/segoeui-bolditalic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bolditalic-webfont.woff") format("woff")
  } */
div#editproduct {
   font-family: sarabun_bolditalic;
   background: white;
   border-radius: 5px;
}

div.editProduct_category {
   background: #586b85;
   width: 12vw;
   left: 0px;
   border-radius: 5px;
}

div.editProduct_category ul {
   background: #485983;
   color: white;
}

div.editProduct_category .k-menu-group .k-menu-item+.k-menu-item {
   border-bottom: 1px solid white;
}

div#editproduct input {
   border-bottom: 0px !important
}

div#editproduct {
   margin-top: 5vh;
   margin-bottom: 5vh;
   background: white;
   border-radius: 5px;
}

div#editproduct input {
   border: 0px;
   /* border-radius: 18px; */
   background: white;
   padding: 0 5px;
   height: 34px;
   color: #4b4b4b;
   font-size: 1.1rem;
   text-align: center;
   border-radius: 3px;
   font-size: .9vw;
   font-family: sarabun_bolditalic !important;
}

div#editproduct div.k-grid-header tr {
   background: #ff8731 !important;
   color: white;
}

div#editproduct div.k-grid-header {
   /* background: #141414 !important */
}

div#editproduct .k-virtual-content,
.k-virtual-list .k-list-content {
   overflow-y: hidden;
}

div#editproduct .k-pager {
   background-color: white !important;
}

div#editproduct .k-pager-sizes {
   color: #ff8731;
}

div#editproduct .k-pager-info {
   color: #ff8731;
}

div#editproduct .k-pager-numbers-wrap {
   color: #ff8731;
}

div#editproduct .k-grid-header .k-column-title {
   font-family: 'sarabun_bolditalic' !important;
   font-size: 1vw !important;
}

div#editproduct .k-grid-content td {
   font-family: 'sarabun_bolditalic' !important;
   font-size: 1vw !important;
}

div#editproduct span.k-dropdownlist {
   background-color: #ffffff !important;
   border-radius: 0px !important;
   height: 40px;
}

div#editproduct .k-grid-content td input {
   border: 0px !important;
   /* border: unset !important; */
   /* border-radius: 18px; */
   background: white;
   padding: 6px 30px;
}

div.editproduct div.combo {
   background: transparent;
}

div#editproduct div.combo span.k-dropdownlist.k-picker {
   background-color: white !important;
   border-radius: 3px !important;
   height: 34px !important;
   width: 100% !important;
   height: 100% !important;
}




@media only screen and (min-width : 820px) and (max-width:912px) {}

@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 200px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 106px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.editProduct #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.editProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#editproduct div.bottom {
      flex-direction: column;
   }

   div#editproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div.topsection {
      flex-direction: column;
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right {
      width: 100% !important;
   }

   div#editproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#editproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#editproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#editproduct) {
      /* height: unset !important; */
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#editproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div#editproduct div.combo {
      height: 25px;
   }

   div#editproduct span.title1 {
      font-size: 12px !important;
   }

   div#editproduct span.title2 {
      font-size: 12px !important;
   }
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:portrait) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.editProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.editProduct #header div#infobar div.message:nth-child(3) {

      flex: 2;

   }

   div.editProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#editproduct div.bottom {
      flex-direction: column;
   }

   div#editproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right {
      width: 100% !important;
   }

   div#editproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#editproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#editproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#editproduct) {
      /* height: unset !important; */
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#editproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div#editproduct div.combo {
      height: 25px;
   }

   div#editproduct span.title1 {
      font-size: 12px !important;
   }

   div#editproduct span.title2 {
      font-size: 12px !important;
   }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.editProduct #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.editProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#editproduct div.bottom {
      flex-direction: column;
   }

   div#editproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right {
      width: 100% !important;
   }

   div#editproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#editproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#editproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#editproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#editproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div#editproduct div.combo {
      height: 25px;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#editproduct div.combo {
      height: 25px !important;
   }

   div#editproduct span.title1 {
      font-size: 12px !important;
   }

   div#editproduct span.title2 {
      font-size: 12px !important;
   }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.editProduct #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.editProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#editproduct div.bottom {
      flex-direction: column;
   }

   div#editproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right {
      width: 100% !important;
   }

   div#editproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#editproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#editproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#editproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#editproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div#editproduct div.combo {
      height: 25px;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#editproduct div.combo {
      height: 25px !important;
   }

   div#editproduct span.title1 {
      font-size: 12px !important;
   }

   div#editproduct span.title2 {
      font-size: 12px !important;
   }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
   div.editProduct> :first-child {
      display: block;
   }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
   div.editProduct> :first-child {
      display: block !important;
   }
}



@media only screen and (min-width : 820px) and (max-width:912px) {}





@media only screen and (min-width : 200px) and (orientation:portrait) {}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (orientation:portrait) {}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) and (orientation:portrait) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {}


/* jjjjjj/jjj */

@media only screen and (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

}


@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:landscape) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.editProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;
      flex: 1;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.editProduct #header div#infobar div.message:nth-child(3) {

      flex: 1.2;

   }

   div.editProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#editproduct div.bottom {
      flex-direction: column;
   }

   div#editproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right {
      width: 100% !important;
   }

   div#editproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#editproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#editproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#editproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#editproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#editproduct div.combo {
      height: 25px !important;
   }

   div#editproduct span.title1 {
      font-size: 12px !important;
   }

   div#editproduct span.title2 {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }
}


@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:landscape) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.editProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;
      flex: 1;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.editProduct #header div#infobar div.message:nth-child(3) {

      flex: 1.2;

   }

   div.editProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      flex-direction: column;
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#editproduct div.combo {
      height: 25px !important;
   }
}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:landscape) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.header {
      width: 100px !important;
   }

   th.header span.k-column-title {
      font-size: 12px;
   }

   div.editProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: 1;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 1;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 1;

   }

   div#editproduct div.combo {
      height: 25px !important;
   }

}

@media only screen and (min-width : 1280px) and (orientation:landscape) {
   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }
}


div.category:focus-visible {
   outline: unset !important
}

div#editproduct .k-grid-header,
.k-grid-footer {
   padding-inline-end: 0px !important
}

.k-grid-aria-root {
   border-radius: 0px !important;
}

.k-pager {
   background-color: #ffffff !important
}

div.k-grid-content td {
   border-right: 1px solid #fff !important;
}

div.editproduct div.k-grid-header tr {
   background: #ff8306 !important;
   color: white
}

div.editproduct div.k-grid-content td {
   border-right: 1px solid white !important;
   border-bottom: 1px solid white !important;
   padding: 0px !important;
   height: 40px;
}
div#editproduct span.k-input-value-text{
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   color:black ;
}
div.insertproductdropdown span.k-list-item-text{
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   color:black ;
}
div#editproduct div.k-grid-content table tr{
   height: 40px !important;
}

div#editproduct table tbody tr:nth-of-type(even) td{
   background: rgb(189 208 254) !important
 }
 div#editproduct table tbody tr:nth-of-type(even) td input{
   background: rgb(189 208 254) !important
 }
 div#editproduct table tbody tr:nth-of-type(odd) td{
   background: white !important
 }
 div#editproduct  .k-dropdownlist.k-picker{
   height: 100% !important;
    width: 100% !important
 }



 div#editproduct span.k-multiselecttree div.k-chip.k-chip-md.k-rounded-md.k-chip-solid.k-chip-solid-base{
   background-color: #ccc !important;
   height: 100%;
}
div#editproduct  div.insertproduct_grid span.k-dropdownlist{
   height: 100% !important;
   width: 100% !important;
}

div#editproduct  div.divheadeditpro span.k-chip-actions{
   display: none;
}
div#editproduct  div.divheadeditpro span.k-chip-label
{
   font-family: segoe;
   font-size: 10px;
}
div#editproduct  div.divheadeditpro span.k-clear-value
{
   display: none;
}


div#stock  input{
   border: 1px solid #d4d2d2;
   border-radius: 3px;
   background: white;
   padding: 0 5px;
   height: 40px;
   font-size: .9vw;
   color: #4b4b4b;
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   text-align: center;
}
div#stock span{
   color: #ff8731;
}
/* div[name="mainmenu"]{
   height: 85vh !important
} */
div#stock .k-input.k-numerictextbox.k-input-solid{
  height: 100% !important;
}





  

@media only screen and (min-width : 820px) and (max-width:912px) {
   
}
@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
  div.stock  > :first-child{
     display: none !important;
     width: 92px;
     
  }
  div#waste{
     width: 23px;
  }
  div.message svg{
     font-size: 20px !important;
  }

 
  th.insertproduct_header{
      width: 100px !important;
  }

  div.header div.infobar div.message{
     width: 46;
  }
  div.header div.infobar div.message:nth-child(3){
     width: auto;
  }
  div.stock  #header > :nth-child(2){
     flex-direction: column-reverse;
     align-items: center;
     justify-content: center;
     
  }
  div.stock  #header div#searchbar{
     flex: 1.5;
     width: 82%;
     
  }
  div.stock  #header div#infobar{
     
     width: 90%;
     flex: 1 !important;
     
  }
  div.stock  #header div#infobar div.message:nth-child(1){
     
    flex: 2;
     
  }
  div.stock  #header div#infobar div.message:nth-child(2){
     
     flex: 2;
      
   }
   div.stock  #header div#infobar div.message:nth-child(2){
     
     flex: 3;
      
   }
   div.stock  .k-grid-header span.k-column-title{
       font-size: 12px !important;
      }

  
      div#stock div.bottom{
        flex-direction: column;
      }

      div#stock div.bottom div.left{
        width: 100% !important;
        flex-direction: column;
      }

      div#stock div.bottom div.left  div:nth-child(1){
       flex-direction: column;
        width: 100% !important;
      }
      div#stock div.bottom div.left div:nth-child(2){
        width: 100% !important;
      }
      div#stock div.bottom div.left div:nth-child(3){
       width: 100% !important;
     }
      div#stock div.bottom div.left span{
           font-size: 12px !important;
      }
      div#stock div.bottom div.right{
        width: 100% !important;
   }
      div#stock div.bottom div.right span{
        font-size: 12px !important;
   }
   div#stock div.bottom div.right > :first-child{
     width: 100% !important;
}
div#stock div.bottom div.left div.category{
  padding-left: 0px !important;
}
div#stock div.bottom div.left div.category div.combo{
  margin-right: 0px !important;
}
div#stock div.bottom div.left div.category >:first-child{
        padding-left: 0px !important;
     }
     div.insertproductdropdown li{
        font-size: 12px !important;
     }
     div:has(div#stock){
        /* height: unset !important; */
     }
     div.colorpalet div.k-colorgradient{
        width: 152px !important;
     }
     div#stock button.register{
        font-size: 12px !important;
     }
     div#header{
        margin-bottom: 7px;
     }
     div.stock{
        justify-content: center;
        width: 100% !important;
     }

     div#stock div.combo{
       height: 25px;
     }
     div#stock span.title1{
       font-size: 12px !important;
     }
     div#stock span.title2{
       font-size: 12px !important;
     }
     div[name="mainmenu"] span{
        font-size: 12px;
     }
     div[name="mainmenu"] div.k-expander-sub-title
     {
        font-size: 12px
     }
     div[name="mainmenu"] .k-expander-title svg{
        margin-left: 0px !important;
        margin-right: 0px !important;
     }
}
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 760px) and  (max-width:1240px)and (orientation:portrait) {
  div.stock  > :first-child{
     display: none !important;
     
  }
  div#waste{
     width: 23px;
  }
  div.message svg{
     font-size: 20px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td input{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td{
     width: 106px !important;
  }
  div.stock  div.k-grid-content td{
     width: 30px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td span{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td svg{
   font-size: 21px;
}
  th.insertproduct_header{
      width: 100px !important;
  }

  div.header div.infobar div.message{
     width: 46;
  }
  div.header div.infobar div.message:nth-child(3){
     width: auto;
  }
  div.stock  #header > :nth-child(2){
     /* flex-direction: column-reverse; */
     align-items: center;
     justify-content: center;
     
  }
  div.stock  #header div#searchbar{
     flex: 3;
     width: 82%;
     
  }
  div.stock  #header div#infobar{
     
     width: 90%;
     flex: 1 !important;
     
  }
  div.stock  #header div#infobar div.message:nth-child(1){
     
    flex: .5;
     
  }
  div.stock  #header div#infobar div.message:nth-child(2){
     
     flex: .5;
      
   }
   div.stock  #header div#infobar div.message:nth-child(3){
     
     flex: 2;
      
   }
   div.stock  .k-grid-header span.k-column-title{
       font-size: 12px !important;
      }

  div#stock div.bottom div.left div{
        /* flex-direction: column; */
      }
      div#stock div.bottom{
        flex-direction: column;
      }

      div#stock div.bottom div.left{
        width: 100% !important;
        flex-direction: column;
      }

      div#stock div.bottom div.left div.topsection{
        width: 100% !important;
        flex-direction: column;
      }
      div#stock div.bottom div.left div:nth-child(1){
       width: 100% !important;
     }
      div#stock div.bottom div.left div:nth-child(2){
        width: 100% !important;
      }
      div#stock div.bottom div.left div:nth-child(3){
       width: 100% !important;
     }
      div#stock div.bottom div.left span{
           font-size: 12px !important;
      }
      div#stock div.bottom div.right{
        width: 100% !important;
   }
      div#stock div.bottom div.right span{
        font-size: 12px !important;
   }
   div#stock div.bottom div.right > :first-child{
     width: 100% !important;
}
div#stock div.bottom div.left div.category{
  padding-left: 0px !important;
}
div#stock div.bottom div.left div.category div.combo{
  margin-right: 0px !important;
}
div#stock div.bottom div.left div.category >:first-child{
        padding-left: 0px !important;
     }
     div.insertproductdropdown li{
        font-size: 12px !important;
     }
     div:has(div#stock){
        /* height: unset !important; */
     }
     div.colorpalet div.k-colorgradient{
        width: 152px !important;
     }
     div#stock button.register{
        font-size: 12px !important;
     }
     div#header{
        margin-bottom: 7px;
     }
     div.stock{
        justify-content: center;
        width: 100% !important;
     }
     div#stock div.combo{
       height: 25px;
     }
     div#stock span.title1{
       font-size: 12px !important;
     }
     div#stock span.title2{
       font-size: 12px !important;
     }
  
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
  div.stock  > :first-child{
     display: none !important;
     
  }
  div#waste{
     width: 23px;
  }
  div.message svg{
     font-size: 20px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td input{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td{
     width: 106px !important;
  }
  div.stock  div.k-grid-content td{
     width: 30px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td span{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td svg{
   font-size: 21px;
}
  th.insertproduct_header{
      width: 100px !important;
  }

  div.header div.infobar div.message{
     width: 46;
  }
  div.header div.infobar div.message:nth-child(3){
     width: auto;
  }
  div.stock  #header > :nth-child(2){
     flex-direction: column-reverse;
     align-items: center;
     justify-content: center;
     
  }
  div.stock  #header div#searchbar{
     flex: 1.5;
     width: 82%;
     
  }
  div.stock  #header div#infobar{
     
     width: 90%;
     flex: 1 !important;
     
  }
  div.stock  #header div#infobar div.message:nth-child(1){
     
    flex: 2;
     
  }
  div.stock  #header div#infobar div.message:nth-child(2){
     
     flex: 2;
      
   }
   div.stock  #header div#infobar div.message:nth-child(2){
     
     flex: 3;
      
   }
   div.stock  .k-grid-header span.k-column-title{
       font-size: 12px !important;
      }

  div#stock div.bottom div.left div{
        /* flex-direction: column; */
      }
      div#stock div.bottom{
        flex-direction: column;
      }

      div#stock div.bottom div.left{
        width: 100% !important;
        flex-direction: column;
      }

      div#stock div.bottom div.left div.topsection{
        width: 100% !important;
        flex-direction: column;
      }
      div#stock div.bottom div.left div:nth-child(1){
       width: 100% !important;
     }
      div#stock div.bottom div.left div:nth-child(2){
        width: 100% !important;
      }
      div#stock div.bottom div.left div:nth-child(3){
       width: 100% !important;
     }
      div#stock div.bottom div.left span{
           font-size: 12px !important;
      }
      div#stock div.bottom div.right{
        width: 100% !important;
   }
      div#stock div.bottom div.right span{
        font-size: 12px !important;
   }
   div#stock div.bottom div.right > :first-child{
     width: 100% !important;
}
div#stock div.bottom div.left div.category{
  padding-left: 0px !important;
}
div#stock div.bottom div.left div.category div.combo{
  margin-right: 0px !important;
}
div#stock div.bottom div.left div.category >:first-child{
        padding-left: 0px !important;
     }
     div.insertproductdropdown li{
        font-size: 12px !important;
     }
     div:has(div#stock){
        height: unset !important;
     }
     div.colorpalet div.k-colorgradient{
        width: 152px !important;
     }
     div#stock button.register{
        font-size: 12px !important;
     }
     div#header{
        margin-bottom: 7px;
     }
     div.stock{
        justify-content: center;
        width: 100% !important;
     }
     div#stock div.combo{
       height: 25px;
     }
     div.category:focus-visible{
       outline:unset !important
    }
    div#stock div.combo{
      height: 25px !important;
    }
    div#stock span.title1{
       font-size: 12px !important;
     }
     div#stock span.title2{
       font-size: 12px !important;
     }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait){
  div.stock  > :first-child{
     display: none !important;
     
  }
  div#waste{
     width: 23px;
  }
  div.message svg{
     font-size: 20px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td input{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td{
     width: 106px !important;
  }
  div.stock  div.k-grid-content td{
     width: 30px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td span{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td svg{
   font-size: 21px;
}
  th.insertproduct_header{
      width: 100px !important;
  }

  div.header div.infobar div.message{
     width: 46;
  }
  div.header div.infobar div.message:nth-child(3){
     width: auto;
  }
  div.stock  #header > :nth-child(2){
     flex-direction: column-reverse;
     align-items: center;
     justify-content: center;
     
  }
  div.stock  #header div#searchbar{
     flex: 1.5;
     width: 82%;
     
  }
  div.stock  #header div#infobar{
     
     width: 90%;
     flex: 1 !important;
     
  }
  div.stock  #header div#infobar div.message:nth-child(1){
     
    flex: 2;
     
  }
  div.stock  #header div#infobar div.message:nth-child(2){
     
     flex: 2;
      
   }
   div.stock  #header div#infobar div.message:nth-child(2){
     
     flex: 3;
      
   }
   div.stock  .k-grid-header span.k-column-title{
       font-size: 12px !important;
      }

  div#stock div.bottom div.left div{
        /* flex-direction: column; */
      }
      div#stock div.bottom{
        flex-direction: column;
      }

      div#stock div.bottom div.left{
        width: 100% !important;
        flex-direction: column;
      }

      div#stock div.bottom div.left div.topsection{
        width: 100% !important;
        flex-direction: column;
      }
      div#stock div.bottom div.left div:nth-child(1){
       width: 100% !important;
     }
      div#stock div.bottom div.left div:nth-child(2){
        width: 100% !important;
      }
      div#stock div.bottom div.left div:nth-child(3){
       width: 100% !important;
     }
      div#stock div.bottom div.left span{
           font-size: 12px !important;
      }
      div#stock div.bottom div.right{
        width: 100% !important;
   }
      div#stock div.bottom div.right span{
        font-size: 12px !important;
   }
   div#stock div.bottom div.right > :first-child{
     width: 100% !important;
}
div#stock div.bottom div.left div.category{
  padding-left: 0px !important;
}
div#stock div.bottom div.left div.category div.combo{
  margin-right: 0px !important;
}
div#stock div.bottom div.left div.category >:first-child{
        padding-left: 0px !important;
     }
     div.insertproductdropdown li{
        font-size: 12px !important;
     }
     div:has(div#stock){
        height: unset !important;
     }
     div.colorpalet div.k-colorgradient{
        width: 152px !important;
     }
     div#stock button.register{
        font-size: 12px !important;
     }
     div#header{
        margin-bottom: 7px;
     }
     div.stock{
        justify-content: center;
        width: 100% !important;
     }
     div#stock div.combo{
       height: 25px;
     }
     div.category:focus-visible{
       outline:unset !important
    }
    div#stock div.combo{
      height: 25px !important;
    }
    div#stock span.title1{
       font-size: 12px !important;
     }
     div#stock span.title2{
       font-size: 12px !important;
     }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
 div.stock  > :first-child{
     display: block;
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
 div.stock  > :first-child{
     display: block !important;
  }
}



@media only screen and (min-width : 820px) and (max-width:912px) {

}





@media only screen and (min-width : 200px) and (orientation:portrait) {

}
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) and (orientation:portrait) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) and (orientation:portrait) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {


}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:portrait) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {

}


/* jjjjjj/jjj */

@media only screen and  (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
 div.stock  > :first-child{
     display: none !important;
     
  }
  div#waste{
     width: 23px;
  }
  div.message svg{
     font-size: 20px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td input{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td{
     width: 106px !important;
  }
  div.stock  div.k-grid-content td{
     width: 30px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td span{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td svg{
   font-size: 21px;
}
  th.header{
      width: 100px !important;
  }

  div.header div.infobar div.message{
     width: 46;
  }
  div.header div.infobar div.message:nth-child(3){
     width: auto;
  }
  
}


@media only screen and  (min-width : 760px) and  (max-width:1240px)and (orientation:landscape) {
  div.stock  > :first-child{
     display: none !important;
     
  }
  div#waste{
     width: 23px;
  }
  div.message svg{
     font-size: 20px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td input{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td{
     width: 106px !important;
  }
  div.stock  div.k-grid-content td{
     width: 30px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td span{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td svg{
   font-size: 21px;
}
  th.insertproduct_header{
      width: 100px !important;
  }

  div.header div.infobar div.message{
     width: 46;
  }
  div.header div.infobar div.message:nth-child(3){
     width: auto;
  }
  div.stock  #header > :nth-child(2){
     /* flex-direction: column-reverse; */
     align-items: center;
     justify-content: center;
     
  }
  div.stock  #header div#searchbar{
     flex: 3;
     width: 82%;
     
  }
  div.stock  #header div#infobar{
     
     width: 90%;
     flex: 1;
     
  }
  div.stock  #header div#infobar div.message:nth-child(1){
     
    flex: .5;
     
  }
  div.stock  #header div#infobar div.message:nth-child(2){
     
     flex: .5;
      
   }
   div.stock  #header div#infobar div.message:nth-child(3){
     
     flex: 1.2;
      
   }
   div.stock  .k-grid-header span.k-column-title{
       font-size: 12px !important;
      }

  div#stock div.bottom div.left div{
        /* flex-direction: column; */
      }
      div#stock div.bottom{
        flex-direction: column;
      }

      div#stock div.bottom div.left{
        width: 100% !important;
        flex-direction: column;
      }

      div#stock div.bottom div.left div:nth-child(1){
       width: 100% !important;
     }
      div#stock div.bottom div.left div:nth-child(2){
        width: 100% !important;
      }
      div#stock div.bottom div.left div:nth-child(3){
       width: 100% !important;
     }
      div#stock div.bottom div.left span{
           font-size: 12px !important;
      }
      div#stock div.bottom div.right{
        width: 100% !important;
   }
      div#stock div.bottom div.right span{
        font-size: 12px !important;
   }
   div#stock div.bottom div.right > :first-child{
     width: 100% !important;
}
div#stock div.bottom div.left div.category{
  padding-left: 0px !important;
}
div#stock div.bottom div.left div.category div.combo{
  margin-right: 0px !important;
}
div#stock div.bottom div.left div.category >:first-child{
        padding-left: 0px !important;
     }
     div.insertproductdropdown li{
        font-size: 12px !important;
     }
     div:has(div#stock){
        height: unset !important;
     }
     div.colorpalet div.k-colorgradient{
        width: 152px !important;
     }
     div#stock button.register{
        font-size: 12px !important;
     }
     div#header{
        margin-bottom: 7px;
     }
     div.stock{
        justify-content: center;
        width: 100% !important;
     }   
     div.category:focus-visible{
        outline:unset !important
     }
     div#stock div.combo{
       height: 25px !important;
     }
     div#stock span.title1{
       font-size: 12px !important;
     }
     div#stock span.title2{
       font-size: 12px !important;
     }
     div#stock div.bottom div.left div.topsection{
       width: 100% !important;
       flex-direction: column;
     }
}


@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:landscape) {
  div.stock  > :first-child{
     display: none !important;
     
  }
  div#waste{
     width: 23px;
  }
  div.message svg{
     font-size: 20px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td input{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td{
     width: 106px !important;
  }
  div.stock  div.k-grid-content td{
     width: 30px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td span{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td svg{
   font-size: 21px;
}
  th.insertproduct_header{
      width: 100px !important;
  }

  div.header div.infobar div.message{
     width: 46;
  }
  div.header div.infobar div.message:nth-child(3){
     width: auto;
  }
  div.stock  #header > :nth-child(2){
     /* flex-direction: column-reverse; */
     align-items: center;
     justify-content: center;
     
  }
  div.stock  #header div#searchbar{
     flex: 3;
     width: 82%;
     
  }
  div.stock  #header div#infobar{
     
     width: 90%;
     flex: 1;
     
  }
  div.stock  #header div#infobar div.message:nth-child(1){
     
    flex: .5;
     
  }
  div.stock  #header div#infobar div.message:nth-child(2){
     
     flex: .5;
      
   }
   div.stock  #header div#infobar div.message:nth-child(3){
     
     flex: 1.2;
      
   }
   div.stock  .k-grid-header span.k-column-title{
       font-size: 12px !important;
      }

  div#stock div.bottom div.left div{
        flex-direction: column;
      }
      div#stock div.bottom{
        flex-direction: column;
      }

      div#stock div.bottom div.left{
        width: 100% !important;
        flex-direction: column;
      }

      div#stock div.bottom div.left div:nth-child(1){
       width: 100% !important;
     }
      div#stock div.bottom div.left div:nth-child(2){
        width: 100% !important;
      }
      div#stock div.bottom div.left div:nth-child(3){
       width: 100% !important;
     }
      div#insertproduct div.bottom div.left span{
           font-size: 12px !important;
      }
      div#insertproduct div.bottom div.right{
        width: 100% !important;
   }
      div#insertproduct div.bottom div.right span{
        font-size: 12px !important;
   }
   div#insertproduct div.bottom div.right > :first-child{
     width: 100% !important;
}
div#insertproduct div.bottom div.left div.category{
  padding-left: 0px !important;
}
div#insertproduct div.bottom div.left div.category div.combo{
  margin-right: 0px !important;
}
div#insertproduct div.bottom div.left div.category >:first-child{
        padding-left: 0px !important;
     }
     div.insertproductdropdown li{
        font-size: 12px !important;
     }
     div:has(div#insertproduct){
        height: unset !important;
     }
     div.colorpalet div.k-colorgradient{
        width: 152px !important;
     }
     div#insertproduct button.register{
        font-size: 12px !important;
     }
     div#header{
        margin-bottom: 7px;
     }
     div.stock{
        justify-content: center;
        width: 100% !important;
     }
     div.category:focus-visible{
        outline:unset !important
     }
     div#stock div.combo{
       height: 25px !important;
     }
}

@media only screen and   (min-width : 280px) and (max-width:299px)and  (orientation:landscape) {
 div.stock  > :first-child{
     display: none !important;
     
  }
  div.stock  div.k-grid-content.k-virtual-content td input{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td{
     width: 106px !important;
  }
  div.stock  div.k-grid-content td{
     width: 30px !important;
  }
  div.stock  div.k-grid-content.k-virtual-content td span{
     font-size: 14px;
  }
  div.stock  div.k-grid-content.k-virtual-content td svg{
   font-size: 21px;
}
  th.header{
     width: 100px !important;
 }
 th.header span.k-column-title{
     font-size:12px;
 }
  div.stock  #header > :nth-child(2){
     /* flex-direction: column-reverse; */
     align-items: center;
     justify-content: center;
     
  }
  div.stock  #header div#searchbar{
     flex: 3;
     width: 82%;
     
  }
  div.stock  #header div#infobar{
     
     width: 90%;
     
  }
  div.stock  #header div#infobar div.message:nth-child(1){
     
    flex: 1;
     
  }
  div.stock  #header div#infobar div.message:nth-child(2){
     
     flex: 1;
      
   }
   div.stock   #header div#infobar div.message:nth-child(2){
     
     flex: 1;
      
   }
  
}

@media only screen and   (min-width : 1280px) and  (orientation:landscape){
  div.stock{
     justify-content: center;
     width: 100% !important;
  }
  
}



.editcolor-page .d-flex.flex-column.justify-content-start.align-items-center.col-12 > div#color {
    background-color: #ffffff; 
    border-radius: 15px; 
    padding: 30px; 
    margin: 20px 2%; 
    max-width: 1400px; 
    width: 96%; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); 
    box-sizing: border-box; 
    display: flex;
    flex-direction: column;
    height: auto !important; 
    min-height: 70vh; 
}

.editcolor-page .bottom.row {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; 
}

.editcolor-page .bottom .left.col-6,
.editcolor-page .bottom .right.col-6 {
    flex: 1; 
    min-width: 300px; 
    padding: 15px; 
    box-sizing: border-box;
}

.editcolor-page .d-flex.w-75.rounded-4.colorlist {
    background-color: #f9f9f9 !important; 
    border: 1px solid #e0e0e0; 
    border-radius: 12px !important;
    overflow: hidden; 
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
}

.editcolor-page .item {
    border: 1px solid #ff8306 !important; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    background-color: #ffffff; 
}

.editcolor-page .item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.editcolor-page .item span[style*="background:#fff9008a"] {
    background: #ff8306 !important; 
    color: white !important;
    font-weight: bold;
}
div#price input {
   border-bottom: 0px !important
}

div#price input {
   border: 1px solid #d4d2d2;
   /* border-radius: 18px; */
   background: #d4d2d2;
   padding: 0 5px;
   height: 40px !important;
   color: #4b4b4b;
   font-size: 1.1rem;
   text-align: start;
}

div#price span {
   color: black;
   font-family: sarabun_bolditalic;
}

div.insertprice_grid div.k-grid-content table tr{
   height: 34px !important;
}

div.insertprice_grid div.k-grid-content table tr input:focus-visible{
   outline: unset !important;
}

div.insertprice_grid div.k-grid-content table tr input{
   text-align: center !important;
   height: 100% !important;
   width: 100% !important;
   border: 0px !important;
   font-size: .9vw !important;
   font-family: sarabun_bolditalic;
}

div.insertprice_grid table tbody tr:nth-of-type(even) td{
   background: #e3ebff !important;
}
div.insertprice_grid table tbody tr:nth-of-type(even) td input{
   background: transparent !important;
}
div.insertprice_grid table tbody tr:nth-of-type(even) td span{
   background: transparent !important;
}
div.insertprice_grid table tbody tr:nth-of-type(even) td div{
   background: transparent !important;
}






@media only screen and (min-width : 820px) and (max-width:912px) {}

@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.price> :first-child {
      display: none !important;
      width: 92px;
   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }


   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.price #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.price .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }


   div#price div.bottom {
      flex-direction: column;
   }

   div#price div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div:nth-child(1) {
      flex-direction: column;
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#price div.bottom div.left span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right {
      width: 100% !important;
   }

   div#price div.bottom div.right span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#price div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#price div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#price div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#price) {
      /* height: unset !important; */
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#price button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.price {
      justify-content: center;
      width: 100% !important;
   }

   div#price div.combo {
      height: 25px;
   }

   div#price span.title1 {
      font-size: 12px !important;
   }

   div#price span.title2 {
      font-size: 12px !important;
   }

   div.price:first-child {
      width: 89px;
   }

   div[name="mainmenu"] span {
      font-size: 12px;
   }

   div[name="mainmenu"] div.k-expander-sub-title {
      font-size: 12px
   }

   div[name="mainmenu"] .k-expander-title svg {
      margin-left: 0px !important;
      margin-right: 0px !important;
   }
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:portrait) {
   div.price> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.price #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.price #header div#infobar div.message:nth-child(3) {

      flex: 2;

   }

   div.price .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#price div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#price div.bottom {
      flex-direction: column;
   }

   div#price div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#price div.bottom div.left span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right {
      width: 100% !important;
   }

   div#price div.bottom div.right span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#price div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#price div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#price div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#price) {
      /* height: unset !important; */
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#price button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.price {
      justify-content: center;
      width: 100% !important;
   }

   div#price div.combo {
      height: 25px;
   }

   div#price span.title1 {
      font-size: 12px !important;
   }

   div#price span.title2 {
      font-size: 12px !important;
   }

   div.price:first-child {
      width: 89px;
   }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
   div.price> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.price #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.price .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#price div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#price div.bottom {
      flex-direction: column;
   }

   div#price div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#price div.bottom div.left span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right {
      width: 100% !important;
   }

   div#price div.bottom div.right span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#price div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#price div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#price div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#price) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#price button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.price {
      justify-content: center;
      width: 100% !important;
   }

   div#price div.combo {
      height: 25px;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#price div.combo {
      height: 25px !important;
   }

   div#price span.title1 {
      font-size: 12px !important;
   }

   div#price span.title2 {
      font-size: 12px !important;
   }

   div.price:first-child {
      width: 89px;
   }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait) {
   div.price> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.price #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.price .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#price div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#price div.bottom {
      flex-direction: column;
   }

   div#price div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#price div.bottom div.left span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right {
      width: 100% !important;
   }

   div#price div.bottom div.right span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#price div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#price div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#price div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#price) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#price button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.price {
      justify-content: center;
      width: 100% !important;
   }

   div#price div.combo {
      height: 25px;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#price div.combo {
      height: 25px !important;
   }

   div#price span.title1 {
      font-size: 12px !important;
   }

   div#price span.title2 {
      font-size: 12px !important;
   }

   div.price:first-child {
      width: 89px;
   }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
   div.price> :first-child {
      display: block;
   }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
   div.price> :first-child {
      display: block !important;
   }
}



@media only screen and (min-width : 820px) and (max-width:912px) {}





@media only screen and (min-width : 200px) and (orientation:portrait) {}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (orientation:portrait) {}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) and (orientation:portrait) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {}


/* jjjjjj/jjj */

@media only screen and (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
   div.price> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

}


@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:landscape) {
   div.price> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.price #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;
      flex: 1;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.price #header div#infobar div.message:nth-child(3) {

      flex: 1.2;

   }

   div.price .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#price div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#price div.bottom {
      flex-direction: column;
   }

   div#price div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#price div.bottom div.left span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right {
      width: 100% !important;
   }

   div#price div.bottom div.right span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#price div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#price div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#price div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#price) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#price button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.price {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#price div.combo {
      height: 25px !important;
   }

   div#price span.title1 {
      font-size: 12px !important;
   }

   div#price span.title2 {
      font-size: 12px !important;
   }

   div#price div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }
}


@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:landscape) {
   div.price> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.price #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;
      flex: 1;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.price #header div#infobar div.message:nth-child(3) {

      flex: 1.2;

   }

   div.price .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#price div.bottom div.left div {
      flex-direction: column;
   }

   div#price div.bottom {
      flex-direction: column;
   }

   div#price div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.price {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#price div.combo {
      height: 25px !important;
   }

}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:landscape) {
   div.price> :first-child {
      display: none !important;

   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.header {
      width: 100px !important;
   }

   th.header span.k-column-title {
      font-size: 12px;
   }

   div.price #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: 1;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 1;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 1;

   }


}

@media only screen and (min-width : 1280px) and (orientation:landscape) {
   div.price {
      justify-content: center;
      width: 100% !important;
   }

}


/* General Styling */
.edit-image-page-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    background-color: #eaeaff; /* Light background to contrast with white card */
    padding: 20px;
    box-sizing: border-box;
}

.edit-image-content-wrapper {
    width: 100%;
    max-width: 1200px; /* Max width for the content area */
    margin: 20px; /* Spacing from the sides */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* White Card with Border Radius */
.edit-image-card {
    background-color: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    flex-direction: column; /* Stack elements vertically on small screens */
    gap: 20px;
}

/* Back Button */
.back-button-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding: 5px;
}

.back-icon {
    height: 40px;
    width: 40px;
    color: #ff8306; /* Brand color */
    cursor: pointer;
    transition: color 0.3s ease;
}

.back-icon:hover {
    color: #cc6a00; /* Darker shade on hover */
}

/* Main Image Upload Area */
.main-image-upload-area {
    position: absolute;
    right: 30px; /* Adjusted from 7px */
    top: 30px; /* Adjusted from 14px */
    width: 120px; /* Fixed width for better control */
    height: 120px; /* Fixed height */
    border-radius: 8px; /* Slightly larger border radius */
    border: 2px dashed #ccc; /* Dashed border for upload area */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #f5f5f5; /* Light background for upload area */
    transition: border-color 0.3s ease;
}

.main-image-upload-area:hover {
    border-color: #ff8306; /* Brand color on hover */
}

.main-image-preview {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Form and Gallery Container */
.form-and-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 150px; /* Space for the absolute positioned main image area */
}

@media (min-width: 768px) {
    .form-and-gallery-container {
        flex-direction: row; /* Side-by-side on larger screens */
    }
}

/* Product Info Section (Left) */
.product-info-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-field {
    margin-bottom: 15px;
}

.field-label {
    display: block;
    margin-bottom: 5px;
    font-family: 'sarabun_bolditalic', sans-serif; /* Keep specific font if available */
    color: #444; /* Darker gray for labels */
    font-size: 0.95vw;
}

.text-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.9vw;
    color: #333;
    background-color: #e0e0e0; /* Grey background for readonly field */
    cursor: default;
}

/* Image Gallery Section (Right) */
.image-gallery-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gallery-actions {
    display: flex;
    align-items: center;
    padding: 6px;
    gap: 15px;
}

.add-photo-icon {
    width: 35px;
    height: 35px;
    color: #ff8306; /* Brand color */
    cursor: pointer;
    transition: color 0.3s ease;
}

.add-photo-icon:hover {
    color: #cc6a00;
}

.save-gallery-button,
.save-main-image-button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.save-icon, .save-main-icon {
    width: 35px;
    height: 35px;
    color: #28a745; /* Green for save */
    transition: color 0.3s ease;
}

.save-icon:hover, .save-main-icon:hover {
    color: #1e7e34;
}

.save-main-image-container {
    position: absolute;
    top: 50%; /* Center vertically relative to parent */
    right: 30px; /* Align with the right side of the card */
    transform: translateY(-50%); /* Adjust for vertical centering */
    z-index: 50000;
}


/* ListView for Images */
.k-listview {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Space between list items */
    justify-content: center; /* Center items if they don't fill the row */
}

.image-item {
    width: 120px; /* Consistent item width */
    height: 180px; /* Consistent item height */
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0; /* Lighter border */
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    background-color: #fff;
}

.image-item:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-color: #ff8306; /* Brand color on hover */
}

.image-display {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

.image-display img {
    max-width: 100%;
    max-height: 100%;
    object-fit: scale-down;
}

.hover-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #ff8306; /* Brand color for indicator */
    color: white;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 5px;
    transform: rotate(15deg);
    font-family: sans-serif;
    font-weight: bold;
    visibility: hidden; /* Controlled by React state */
}

.delete-icon-container {
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
    border-top: 1px solid #eee;
}

.delete-icon {
    height: 24px;
    width: 24px;
    fill: #dc3545; /* Red for delete */
    cursor: pointer;
    transition: fill 0.3s ease;
}

.delete-icon:hover {
    fill: #c82333;
}

/* Loader Styling (assuming it's a separate component) */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
/* You would add actual loader CSS here if Loader2 is a custom component */


/* Responsive Adjustments */
@media (max-width: 992px) {
    .main-image-upload-area {
        position: static; /* Remove absolute positioning */
        width: 150px;
        height: 150px;
        margin: 0 auto 20px auto; /* Center it and add space below */
    }

    .edit-image-card {
        padding: 20px;
    }

    .form-and-gallery-container {
        margin-top: 0;
    }

    .save-main-image-container {
        position: static;
        transform: none;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .field-label, .text-input {
        font-size: 1.1vw; /* Adjust font size for smaller screens */
    }
}

@media (max-width: 767px) {
    .edit-image-content-wrapper {
        margin: 10px;
        padding: 10px;
    }

    .edit-image-card {
        padding: 15px;
    }

    .form-and-gallery-container {
        flex-direction: column;
        gap: 20px;
    }

    .product-info-section, .image-gallery-section {
        width: 100%;
    }

    .field-label, .text-input {
        font-size: 3.5vw; /* Further adjust for mobile */
    }

    .main-image-upload-area {
        width: 100px;
        height: 100px;
    }

    .add-photo-icon, .save-icon, .save-main-icon {
        width: 28px;
        height: 28px;
    }
}

div#EditImage div.k-listview{
    width: 100% !important;
}
/* =============== General Scoping and Page Background =============== */
.productimagedesign {
   /* This is the outermost container, styles here apply broadly if needed */
 }
 
 .productimagedesign > .d-flex.flex-column.w-100 { /* Main content column after sidebar */
   background-color: #f0f0fa;
   box-sizing: border-box;
 }
 
 /* =============== Header (Remains Unchanged by Request) =============== */
 .productimagedesign #header {
   /* Styles for header if any specific to this page, but mostly untouched */
 }
 
 /* =============== Main Design Area Card =============== */
 /* This is the new white card that wraps the orange bar and the ListView */
 .productimagedesign #productimagedesign > .d-flex.flex-column.justify-content-center.align-items-center {
   background-color: #ffffff;
   border-radius: 12px;
   padding: 20px;
   margin: 20px !important; /* Overriding inline margin for consistency if needed, or use as is */
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
   border-bottom: none !important; /* Remove inline border-bottom if this is the main card */
 }
 
 /* =============== Orange Info Bar / Action Bar =============== */
 .productimagedesign .right.d-flex.flex-column.align-items-center.col-12 {
   background-color: #ff8306 !important;
   border-radius: 8px; /* Slightly smaller radius as it's inside another card */
   padding: 5px 15px;
   margin-bottom: 2px; /* Space between this bar and the ListView below */
   color: white;
 }
 
 .productimagedesign .right.d-flex.flex-column.align-items-center.col-12 .menu span,
 .productimagedesign .right.d-flex.flex-column.align-items-center.col-12 .menu button {
   font-size: 0.9rem;
   color: white !important; /* Ensure text is white */
 }
 .productimagedesign .right.d-flex.flex-column.align-items-center.col-12 .menu span[disabled] {
     background-color: transparent !important; /* ensure it is transparent */
 }
 
 
 .productimagedesign .right.d-flex.flex-column.align-items-center.col-12 .menu button {
   background-color: #ffffff !important;
   color: #ff8306 !important;
   border: 1px solid #ff8306 !important;
   border-radius: 5px;
   padding: 8px 15px;
   transition: background-color 0.3s, color 0.3s;
 }
 
 .productimagedesign .right.d-flex.flex-column.align-items-center.col-12 .menu button:hover {
   background-color: #fff0e0 !important; /* Lighter orange for hover */
   color: #ff8306 !important;
 }
 .productimagedesign .right.d-flex.flex-column.align-items-center.col-12 .menu button svg {
     fill: #ff8306 !important; /* Ensure icon color matches text */
 }
 
 
 /* =============== ListView Container (If it needs distinct styling from its parent card) =============== */
 .productimagedesign .k-listview {
   background-color: transparent !important; /* ListView itself is transparent, items are cards */
   width: 100% !important;
   border-radius: 0 !important; /* No radius for listview wrapper if items are cards */
 }
 
 /* =============== Individual Design Item Card (in ListView) =============== */
 .productimagedesign .k-listview-item {
   padding: 0 !important;
   margin-bottom: 20px; /* Space between individual design cards */
   border: none !important; /* Remove Kendo borders if any */
 }
 .productimagedesign .k-listview-item:last-child {
     margin-bottom: 0;
 }
 
 .productimagedesign .k-listview-item .col-6,
 .productimagedesign .k-listview-item .col-12 { /* These are the actual design cards */
   background-color: #ffffff;
   border-radius: 10px;
   padding: 20px;
   margin-left: auto; /* Centering if col-6 is used and doesn't fill */
   margin-right: auto;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Softer shadow for nested cards */
   /* width calculation is handled by bootstrap col- classes mostly */
 }
 
 
 /* =============== Input Fields and Labels within Design Cards =============== */
 .productimagedesign .k-listview-item .title.d-flex {
   margin-bottom: 20px;
   padding: 0 !important; /* Remove extra padding if not needed */
   margin-left: 0 !important;
   justify-content: flex-start !important; /* Better spacing for label/input groups */
   flex-wrap: wrap !important;
   gap: 10px !important;
 }
 
 .productimagedesign .k-listview-item .title .d-flex.flex-column {
   margin-right: 10px;
   flex: 0 0 auto; /* Don't allow shrinking, use natural width */
   min-width: 200px; /* Ensure minimum width for inputs */
 }
 .productimagedesign .k-listview-item .title .d-flex.flex-column:last-child {
   margin-right: 0;
 }
 
 .productimagedesign .k-listview-item input.rounded-3 {
   background-color: #f8f9fa;
   border: 1px solid #ced4da;
   padding: 10px 12px;
   border-radius: 6px !important;
   width: 100% !important;
   box-sizing: border-box;
   color: #212529;
   font-size: 0.95rem;
 }
 
 .productimagedesign .k-listview-item input.rounded-3:focus {
   border-color: #ff8306;
   box-shadow: 0 0 0 0.2rem rgba(255, 131, 6, 0.25);
   background-color: #ffffff;
 }

 /* MultiSelect styling */
 .productimagedesign .k-listview-item .k-multiselect {
   width: 100% !important;
   min-width: 260px !important;
   box-sizing: border-box;
 }
 .productimagedesign .k-listview-item .title span { /* For labels "Label", "AdditionalPrice" */
     font-size: 1rem !important;
     margin-bottom: 5px; /* Space between label and input */
     color: #495057;
 }
 
 /* =============== Toolbar Icons (next to canvas) =============== */
 .productimagedesign .k-listview-item .d-flex > .menulist { /* The direct flex child for the toolbar */
   background-color: #f8f9fa;
   padding: 10px;
   border-radius: 8px;
   margin-right: 15px !important;
   align-items: center;
   align-self: flex-start; /* Align toolbar to top */
 }
 
 .productimagedesign .k-listview-item .menulist div { /* Wrapper for each icon/text tool */
   margin-bottom: 8px;
   padding: 6px;
   border-radius: 5px;
   transition: background-color 0.2s;
   text-align: center;
 }
 .productimagedesign .k-listview-item .menulist div:hover {
   background-color: #e9ecef;
 }
 
 .productimagedesign .k-listview-item .menulist svg {
   font-size: 1.7rem !important; /* Adjusted size */
   cursor: pointer;
   color: #343a40;
   vertical-align: middle;
 }
 .productimagedesign .k-listview-item .menulist [title="DTF"],
 .productimagedesign .k-listview-item .menulist [title="DTG"],
 .productimagedesign .k-listview-item .menulist [title="Embroidery"] {
   font-size: 0.9rem !important; /* Smaller font for text tools */
   font-weight: bold;
   cursor: pointer;
   color: #343a40;
   padding: 4px 0; /* Adjust padding for text tools */
 }
 
 .productimagedesign .k-listview-item .menulist [title="DTF"]:hover,
 .productimagedesign .k-listview-item .menulist [title="DTG"]:hover,
 .productimagedesign .k-listview-item .menulist [title="Embroidery"]:hover,
 .productimagedesign .k-listview-item .menulist svg:hover {
   color: #ff8306;
 }
 
 /* Green color for active DTF/DTG/Embroidery */
 .productimagedesign .k-listview-item .menulist div[style*="color:green"] {
     color: green !important; /* Make sure it overrides inline style if needed, or rely on inline */
     font-weight: bolder;
 }
 
 
 /* =============== Canvas Area =============== */
 .productimagedesign .k-listview-item #background {
   border: 1px solid #dee2e6;
   border-radius: 8px !important;
   overflow: hidden;
   flex-grow: 1; /* Allow canvas container to take remaining space */
 }
 .productimagedesign .k-listview-item #background canvas {
   border-radius: 7px !important; /* Inner radius matching parent */
   display: block; /* Remove extra space below canvas */
 }
 
 /* =============== Empty ListView Item =============== */
 .productimagedesign .k-listview-item .d-flex.flex-column.align-items-center.justify-content-center span {
   font-size: 1.5rem !important;
   color: #6c757d;
   margin-top: 20px; /* Pushes it down a bit from card top */
 }
 
 .productimagedesign .k-listview-item .d-flex.flex-column.align-items-center.justify-content-center #background {
     border: 2px dashed #ff8306; /* Dashed border for "add new" area */
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 300px; /* Ensure it has some height */
 }
 
 .productimagedesign .k-listview-item .d-flex.flex-column.align-items-center.justify-content-center #background svg {
   height: 60px !important;
   width: 60px !important;
   color: #ff8306;
   cursor: pointer;
   transition: transform 0.2s;
 }
 .productimagedesign .k-listview-item .d-flex.flex-column.align-items-center.justify-content-center #background svg:hover {
   transform: scale(1.1);
 }
 
 /* =============== Back Button Styling =============== */
 .productimagedesign #productimagedesign > div:first-child .tooltipbuttons svg { /* Targeting the back button container */
   color: #ff8306;
   transition: opacity 0.2s;
   height: 36px !important; /* Consistent size */
   width: 36px !important;
 }
 .productimagedesign #productimagedesign > div:first-child .tooltipbuttons svg:hover {
   opacity: 0.7;
 }
 .productimagedesign #productimagedesign > div:first-child { /* Container of back button */
     padding: 10px 0px 10px 20px !important; /* Adjust padding as it's outside the main card */
 }
 
 
 /* =============== Kendo Tooltip Styling =============== */
 .productimagedesign .k-tooltip {
   background-color: #343a40 !important;
   color: #ffffff !important;
   border-radius: 4px !important;
   padding: 5px 10px !important;
   font-size: 0.85rem !important;
   z-index: 1080; /* Ensure tooltip is on top */
 }
 .productimagedesign .k-tooltip-content {
   padding: 0 !important;
 }
 .productimagedesign .k-listview-content{
   gap: 0 !important;
 }
 /* =============== Responsive Adjustments =============== */
 @media (max-width: 1200px) {
     .productimagedesign .k-listview-item .col-6 { /* When using col-6 for two items per row */
         flex: 0 0 100%; /* Stack to one column earlier */
         max-width: 100%;
         margin-bottom: 20px; /* Ensure spacing when stacked */
     }
      .productimagedesign .k-listview .d-flex.flex-row.flex-wrap { /* If listview items are in a row */
         flex-direction: column !important;
     }
 }
 
 
 @media (max-width: 992px) {
   .productimagedesign .k-listview-item .title.d-flex {
     flex-direction: column; /* Stack label/input groups */
   }
   .productimagedesign .k-listview-item .title .d-flex.flex-column {
     margin-right: 0;
     margin-bottom: 15px; /* Space between stacked label/input groups */
   }
   .productimagedesign .k-listview-item .d-flex > .menulist { /* Toolbar */
     order: -1; /* Move toolbar above canvas on small screens */
     flex-direction: row !important;
     flex-wrap: wrap;
     justify-content: center;
     margin-right: 0 !important;
     margin-bottom: 15px;
     width: 100%; /* Full width for toolbar */
   }
   .productimagedesign .k-listview-item .d-flex > .menulist div {
      margin-left: 5px;
      margin-right: 5px;
      margin-bottom: 5px; /* reduce bottom margin when horizontal */
    }
    .productimagedesign .k-listview-item > .d-flex { /* container of menulist and canvas */
        flex-direction: column;
    }
 }
 
 @media (max-width: 768px) {
   .productimagedesign #productimagedesign > .d-flex.flex-column.justify-content-center.align-items-center {
       margin: 10px !important; /* Reduce margin of main card */
       padding: 15px;
   }
 
   .productimagedesign .k-listview-item .col-12, /* For single item like empty view */
   .productimagedesign .k-listview-item .col-6 { /* Design items are already full width due to 1200px breakpoint */
     padding: 15px;
   }
 
   .productimagedesign .right.d-flex.flex-column.align-items-center.col-12 .menu {
     flex-direction: column;
     align-items: center;
   }
   .productimagedesign .right.d-flex.flex-column.align-items-center.col-12 .menu .col-8 {
     width: 100%;
     justify-content: center;
     margin-bottom: 10px;
   }
   .productimagedesign .right.d-flex.flex-column.align-items-center.col-12 .menu .col-8 .me-1.col-6 {
     width: 100%;
     flex-direction: column;
     align-items: center !important;
   }
   .productimagedesign .right.d-flex.flex-column.align-items-center.col-12 .menu .col-8 .me-1.col-6 > div {
     width: auto !important;
     margin-bottom: 8px;
     text-align: center;
   }
    .productimagedesign .right.d-flex.flex-column.align-items-center.col-12 .menu button {
        width: 90%;
        margin-top: 10px;
    }
 }
 
 @media (max-width: 576px) {
   .productimagedesign .k-listview-item .title.d-flex .d-flex.flex-column input.rounded-3 {
     font-size: 0.9rem; /* Slightly smaller font in inputs */
   }
   .productimagedesign .k-listview-item #background,
   .productimagedesign .k-listview-item #background canvas {
     max-width: 100%; /* Ensure canvas container doesn't overflow */
   }
   .productimagedesign .k-listview-item .menulist svg {
     font-size: 1.5rem !important; /* Smaller icons on very small screens */
   }
   .productimagedesign .k-listview-item .menulist [title="DTF"],
   .productimagedesign .k-listview-item .menulist [title="DTG"],
   .productimagedesign .k-listview-item .menulist [title="Embroidery"] {
     font-size: 0.8rem !important;
   }
 }
/* @font-face{
    font-family: sarabun;
  src:  url("../assets/fonts/segeio/segoeui-bold-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bold-webfont.woff") format("woff")
  }
  @font-face{
    font-family: sarabun_italic;
  src:  url("../assets/fonts/segeio/segoeui-italic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-italic-webfont.woff") format("woff")
  }
  
  @font-face{
    font-family: sarabun_bolditalic;
  src:  url("../assets/fonts/segeio/segoeui-bolditalic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bolditalic-webfont.woff") format("woff")
  } */

div#settings div.bottom{
    background: white;
    border-radius: 5px;
}


div#settings div.bottom.row div.left >:nth-child(1){
     color: #ed7d43;
     font-size: 23px;
     font-family: sarabun_bolditalic;
     margin-top: 21px;
     margin-left: 50px;
     width: 100%;
     margin-bottom: 13px;
}

div#settings div.phones div.k-listview-content{
    align-items: center;
    display: flex;
    border-radius: 4px;
    flex-wrap: wrap;
}
div#settings div.phones div.k-listview-content div{
    width: 15% !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-top: 3px;
    border-bottom: 0px !important;
    font-family:sarabun_bolditalic ;
    background: white;
}

div#settings div.bottom.row div.userinfo  input{
  border: 1px solid #d4d2d2;
  border-radius: 18px;
  background: #d4d2d2;
  text-align: center;
} 
div#settings div.bottom.row div.etsyinfo  input{
   border: 1px solid #d4d2d2;
   border-radius: 18px;
   background: #d4d2d2;
   text-align: center;
 } 


div#settings div.addresses div.item.header{
  height:36px;
  border-radius:5px;
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
  border:3px solid black
}
div#settings div.addresses div.item.header div{
  font-family:sarabun_bolditalic;
  color:white;
  background:#06111f;
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  
}
div#settings div.addresses div.item.header >:nth-child(6){
  flex:3;
}
div#settings div.addresses div.item.content div{
  font-family:sarabun_bolditalic;
  color:white;
  background:#06111f;
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  border-right:3px solid black
  
}
div#settings div.addresses div.item.content >:nth-child(6){
  flex:3;
}
div#settings div.addresses div.item.content input{
  height: 100%;
  width: 100%;
  font-size: 11px;
}

div#settings div.addresses div.item.content.readonly div{
  font-family:sarabun_bolditalic;
  color:black;
  background:#dadada;
  display:flex;
  justify-content:center;
  align-items:center;
  border-right:3px solid black
  
}
div#settings div.addresses div.item.content.readonly input{
  height: 100%;
  width: 100%;
  font-size: 11px;
}

div#settings div.addresses div.item.content div.op{
flex: .5;
  
}
div#settings div.addresses div.header div.op{
  flex: .5;
    
  }
  div#settings div.language{
    font-family: sarabun_bolditalic;
    color: rgb(68, 68, 68)
  }
  div#settings .k-picker-solid:hover, .k-picker-solid.k-hover{
    background-color: #c0b3b3 !important;
  }
  div#settings div.bottom.row div.userinfo{
  margin-bottom: 15px;
  } 
  div#settings div.bottom.row div.etsyinfo{
   margin-bottom: 15px;
   } 

  div.language li{
    font-family: sarabun_bolditalic;
    color: white;
  }
  div.language div.k-list-content{
    background: #343232
  }

  label.radioinp{
   color:#6a6969
  }
    :root{
   --s: 1em; 
   --c: #009688;
    }
input[type="radio"] {
 

    height: 1em;
    aspect-ratio: 1;
    border: calc(1em / 8) solid #939393;
    padding: calc(1em / 8);
    background: radial-gradient(farthest-side, #009688 94%, #0000) 50%/0 0
    no-repeat content-box;
    border-radius: 50%;
    outline-offset: calc(1em / 10);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: inherit;
    transition: 0.3s;
}
input[type="radio"]:checked {
    border-color: #009688;
    background-size: 100% 100%;
}

input[type="radio"]:disabled {
    background: linear-gradient(#939393 0 0) 50%/100% 20% no-repeat content-box;
    opacity: 0.5;
    cursor: not-allowed;
}

@media print {
    input[type="radio"] {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
        background: none;
    }
}

label.radioinp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0;
    cursor: pointer;
    direction: ltr;
}

.form__group {
    position: relative;
    padding: 15px 0 0;
    margin-top: 30px;
    width: 90%;
    float: left;
}

.form__field {
    font-family: inherit;
    width: 100%;
    border: 0 !important;
    border-bottom: 1px solid #9b9b9b !important;
    outline: 0;
    font-size: 1.3rem;
    color: #3d3d3d;
    padding: 7px 0;
    background: #fff;
    transition: border-color 0.2s;
    text-align: start;
}
.form__field::placeholder {
    color: transparent;
}
.form__field:placeholder-shown ~ .form__label {
    font-size: 1.3rem;
    cursor: text;
    top: 20px;
}

.form__label {
    position: absolute;
    top: -5px;
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    color: #b3b3b3;
    left: 0;
}

.form__field:focus {
    padding-bottom: 6px;
    font-weight: 700;
    border-image: linear-gradient(to right, #11998e, #38ef7d);
    border-image-slice: 1 !important;
}
.form__field:focus ~ .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    font-weight: 700;
}
.form__field:required, .form__field:invalid {
    box-shadow: none;
}




    

@media only screen and (min-width : 820px) and (max-width:912px) {
    
}
@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.settings  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }


   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.settings  #header > :nth-child(2){
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
      
   }
   div.settings  #header div#searchbar{
      flex: 1.5;
      width: 82%;
      
   }
   div.settings  #header div#infobar{
      
      width: 90%;
      flex: 1 !important;
      
   }
   div.settings  #header div#infobar div.message:nth-child(1){
      
     flex: 2;
      
   }
   div.settings  #header div#infobar div.message:nth-child(2){
      
      flex: 2;
       
    }
    div.settings  #header div#infobar div.message:nth-child(2){
      
      flex: 3;
       
    }

     div#settings div.userinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.userinfo div{
      width:100%
     }
     div#settings div.etsyinfo div{
      width:100%
     }
     div.addphones{
      width: 90% !important;
     }
     div#settings div.phones div.k-listview-content div{
      width: 48% !important;
     }
     div#settings div.addresses{
      overflow: scroll;
     }
     div#settings div.addresses div.item div{
      min-width: 40px
     }
     div.settings{
      justify-content: center;
     }
     div.settings div.respnsive{
      height: unset !important;
     }
     div#settings div.item.header{
      width: 268%;
     }
     div#settings div.k-listview-content{
      width: 268%;
     }
     div#settings div[name='contactinfo'] div.k-listview-content{
      width: unset;
     }

}
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 760px) and  (max-width:1240px)and (orientation:portrait) {
  div.settings  > :first-child{
    display: none !important;
    
 }
 div#waste{
    width: 23px;
 }
 div.message svg{
    font-size: 20px !important;
 }


 div.header div.infobar div.message{
    width: 46;
 }
 div.header div.infobar div.message:nth-child(3){
    width: auto;
 }
 div.settings  #header > :nth-child(2){
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    
 }
 div.settings  #header div#searchbar{
    flex: 1.5;
    width: 82%;
    
 }
 div.settings  #header div#infobar{
    
    width: 90%;
    flex: 1 !important;
    
 }
 div.settings  #header div#infobar div.message:nth-child(1){
    
   flex: 2;
    
 }
 div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 2;
     
  }
  div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 3;
     
  }

   div#settings div.userinfo{
    flex-direction: column;
    align-items: center;
   }
   div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
   div#settings div.userinfo div{
    width:100%
   }
   div#settings div.etsyinfo div{
      width:100%
     }
   div.addphones{
    width: 90% !important;
   }
   div#settings div.phones div.k-listview-content div{
    width: 48% !important;
   }
   div#settings div.addresses{
    overflow: scroll;
   }
   div#settings div.addresses div.item div{
    min-width: 40px
   }
   div.settings{
    justify-content: center;
   }
   div.settings div.respnsive{
    height: unset !important;
   }
   div#settings div.item.header{
    width: 268%;
   }
   div#settings div.k-listview-content{
    width: 268%;
   }
   div#settings div[name="contactinfo"] div.k-listview-content{
      width: unset
     }
   
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
  div.settings  > :first-child{
    display: none !important;
    
 }
 div#waste{
    width: 23px;
 }
 div.message svg{
    font-size: 20px !important;
 }


 div.header div.infobar div.message{
    width: 46;
 }
 div.header div.infobar div.message:nth-child(3){
    width: auto;
 }
 div.settings  #header > :nth-child(2){
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    
 }
 div.settings  #header div#searchbar{
    flex: 1.5;
    width: 82%;
    
 }
 div.settings  #header div#infobar{
    
    width: 90%;
    flex: 1 !important;
    
 }
 div.settings  #header div#infobar div.message:nth-child(1){
    
   flex: 2;
    
 }
 div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 2;
     
  }
  div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 3;
     
  }

   div#settings div.userinfo{
    flex-direction: column;
    align-items: center;
   }
   div#settings div.userinfo div{
    width:100%
   }

   div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.etsyinfo div{
      width:100%
     }

   div.addphones{
    width: 90% !important;
   }
   div#settings div.phones div.k-listview-content div{
    width: 48% !important;
   }
   div#settings div.addresses{
    overflow: scroll;
   }
   div#settings div.addresses div.item div{
    min-width: 40px
   }
   div.settings{
    justify-content: center;
   }
   div.settings div.respnsive{
    height: unset !important;
   }
   div#settings div.item.header{
    width: 268%;
   }
   div#settings div.k-listview-content{
    width: 268%;
   }
   div#settings div[name="contactinfo"] div.k-listview-content{
      width: unset
     }
}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait){
  div.settings  > :first-child{
    display: none !important;
    
 }
 div#waste{
    width: 23px;
 }
 div.message svg{
    font-size: 20px !important;
 }


 div.header div.infobar div.message{
    width: 46;
 }
 div.header div.infobar div.message:nth-child(3){
    width: auto;
 }
 div.settings  #header > :nth-child(2){
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    
 }
 div.settings  #header div#searchbar{
    flex: 1.5;
    width: 82%;
    
 }
 div.settings  #header div#infobar{
    
    width: 90%;
    flex: 1 !important;
    
 }
 div.settings  #header div#infobar div.message:nth-child(1){
    
   flex: 2;
    
 }
 div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 2;
     
  }
  div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 3;
     
  }

   div#settings div.userinfo{
    flex-direction: column;
    align-items: center;
   }
   div#settings div.userinfo div{
    width:100%
   }
   div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.etsyinfo div{
      width:100%
     }
   div.addphones{
    width: 90% !important;
   }
   div#settings div.phones div.k-listview-content div{
    width: 48% !important;
   }
   div#settings div.addresses{
    overflow: scroll;
   }
   div#settings div.addresses div.item div{
    min-width: 40px
   }
   div.settings{
    justify-content: center;
   }
   div.settings div.respnsive{
    height: unset !important;
   }
   div#settings div.item.header{
    width: 268%;
   }
   div#settings div.k-listview-content{
    width: 268%;
   }
   div#settings div[name="contactinfo"] div.k-listview-content{
      width: unset
     }
  

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
  div.insertProduct  > :first-child{
      display: block;
   }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
  div.insertProduct  > :first-child{
      display: block !important;
   }
}



@media only screen and (min-width : 820px) and (max-width:912px) {

}





@media only screen and (min-width : 200px) and (orientation:portrait) {

}
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) and (orientation:portrait) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) and (orientation:portrait) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {
 

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:portrait) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {

}


/* jjjjjj/jjj */

@media only screen and  (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
  div.settings  > :first-child{
    display: none !important;
    
 }
 div#waste{
    width: 23px;
 }
 div.message svg{
    font-size: 20px !important;
 }


 div.header div.infobar div.message{
    width: 46;
 }
 div.header div.infobar div.message:nth-child(3){
    width: auto;
 }
 div.settings  #header > :nth-child(2){
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    
 }
 div.settings  #header div#searchbar{
    flex: 1.5;
    width: 82%;
    
 }
 div.settings  #header div#infobar{
    
    width: 90%;
    flex: 1 !important;
    
 }
 div.settings  #header div#infobar div.message:nth-child(1){
    
   flex: 2;
    
 }
 div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 2;
     
  }
  div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 3;
     
  }

   div#settings div.userinfo{
    flex-direction: column;
    align-items: center;
   }
   div#settings div.userinfo div{
    width:100%
   }

   div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.etsyinfo div{
      width:100%
     }


   div.addphones{
    width: 90% !important;
   }
   div#settings div.phones div.k-listview-content div{
    width: 48% !important;
   }
   div#settings div.addresses{
    overflow: scroll;
   }
   div#settings div.addresses div.item div{
    min-width: 40px
   }
   div.settings{
    justify-content: center;
   }
   div.settings div.respnsive{
    height: unset !important;
   }
   div#settings div.item.header{
    width: 268%;
   }
   div#settings div.k-listview-content{
    width: 268%;
   }
   div#settings div[name="contactinfo"] div.k-listview-content{
      width: unset
     }
   
}


@media only screen and  (min-width : 760px) and  (max-width:1240px)and (orientation:landscape) {
  div.settings  > :first-child{
    display: none !important;
    
 }
 div#waste{
    width: 23px;
 }
 div.message svg{
    font-size: 20px !important;
 }


 div.header div.infobar div.message{
    width: 46;
 }
 div.header div.infobar div.message:nth-child(3){
    width: auto;
 }
 div.settings  #header > :nth-child(2){
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    
 }
 div.settings  #header div#searchbar{
    flex: 1.5;
    width: 82%;
    
 }
 div.settings  #header div#infobar{
    
    width: 90%;
    flex: 1 !important;
    
 }
 div.settings  #header div#infobar div.message:nth-child(1){
    
   flex: 2;
    
 }
 div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 2;
     
  }
  div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 3;
     
  }

   div#settings div.userinfo{
    flex-direction: column;
    align-items: center;
   }
   div#settings div.userinfo div{
    width:100%
   }
   div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.etsyinfo div{
      width:100%
     }
   div.addphones{
    width: 90% !important;
   }
   div#settings div.phones div.k-listview-content div{
    width: 48% !important;
   }
   div#settings div.addresses{
    overflow: scroll;
   }
   div#settings div.addresses div.item div{
    min-width: 40px
   }
   div.settings{
    justify-content: center;
   }
   div.settings div.respnsive{
    height: unset !important;
   }
   div#settings div.item.header{
    width: 268%;
   }
   div#settings div.k-listview-content{
    width: 268%;
   }
   div#settings div[name="contactinfo"] div.k-listview-content{
      width: unset
     }
}


@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:landscape) {
  div.settings  > :first-child{
    display: none !important;
    
 }
 div#waste{
    width: 23px;
 }
 div.message svg{
    font-size: 20px !important;
 }


 div.header div.infobar div.message{
    width: 46;
 }
 div.header div.infobar div.message:nth-child(3){
    width: auto;
 }
 div.settings  #header > :nth-child(2){
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    
 }
 div.settings  #header div#searchbar{
    flex: 1.5;
    width: 82%;
    
 }
 div.settings  #header div#infobar{
    
    width: 90%;
    flex: 1 !important;
    
 }
 div.settings  #header div#infobar div.message:nth-child(1){
    
   flex: 2;
    
 }
 div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 2;
     
  }
  div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 3;
     
  }

   div#settings div.userinfo{
    flex-direction: column;
    align-items: center;
   }
   div#settings div.userinfo div{
    width:100%
   }
   div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.etsyinfo div{
      width:100%
     }
   div.addphones{
    width: 90% !important;
   }
   div#settings div.phones div.k-listview-content div{
    width: 48% !important;
   }
   div#settings div.addresses{
    overflow: scroll;
   }
   div#settings div.addresses div.item div{
    min-width: 40px
   }
   div.settings{
    justify-content: center;
   }
   div.settings div.respnsive{
    height: unset !important;
   }
   div#settings div.item.header{
    width: 268%;
   }
   div#settings div.k-listview-content{
    width: 268%;
   }
   div#settings div[name="contactinfo"] div.k-listview-content{
      width: unset
     }
}

@media only screen and   (min-width : 280px) and (max-width:299px)and  (orientation:landscape) {
  div.insertProduct  > :first-child{
      display: none !important;
      
   }
   div.insertProduct  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.insertProduct  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.insertProduct  div.k-grid-content td{
      width: 30px !important;
   }
   div.insertProduct  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.insertProduct  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.header{
      width: 100px !important;
  }
  th.header span.k-column-title{
      font-size:12px;
  }
   div.insertProduct  #header > :nth-child(2){
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;
      
   }
   div.insertProduct  #header div#searchbar{
      flex: 3;
      width: 82%;
      
   }
   div.insertProduct  #header div#infobar{
      
      width: 90%;
      
   }
   div.insertProduct  #header div#infobar div.message:nth-child(1){
      
     flex: 1;
      
   }
   div.insertProduct  #header div#infobar div.message:nth-child(2){
      
      flex: 1;
       
    }
    div.insertProduct   #header div#infobar div.message:nth-child(2){
      
      flex: 1;
       
    }
   
}

@media only screen and   (min-width : 1280px) and  (orientation:landscape){
   div.insertProduct{
      justify-content: center;
      width: 100% !important;
   }
   div.category:focus-visible{
      outline:unset !important
   }
}


div.category:focus-visible{
   outline:unset !important
}
div.settingresinputdiv div.form__group.field{
   margin-top: 0px !important;
}
div.settingresinputdiv .form__field{
   font-size: 1vw !important;
   font-family:sarabun_bolditalic !important;
   margin-bottom: 9px !important;
   direction: ltr;
   text-align: left !important;
}
div.settingresinputdiv .form__label{
   font-size: .9vw !important;
   font-family:sarabun_bolditalic !important;
}
div.settingweight div.form__group{
   margin-top: 0px !important;
}
div.settingweight .form__label{
   font-size: .9vw !important;
   font-family:sarabun_bolditalic !important;
}
div.settingweight .form__field{
   font-size: 1vw !important;
   font-family:sarabun_bolditalic !important;
   
}

.custom-tab-button {
   background-color: #fff !important;
   border-radius: 0.25rem 0.25rem 0 0;
   color: #ff8306 !important;
 }
.custom-tab-button:hover {
   background-color: #fff !important;
    color: #ff8306 !important;
    border-radius: 0.25rem 0.25rem 0 0;
    border-color: #ff8306 !important;
 }
 
 .custom-tab-button[style*="border-top: 3px solid rgb(255, 131, 6)"]:hover, 
 .custom-tab-button[style*="color: rgb(255, 131, 6)"]:hover {
   background-color: rgb(240, 240, 250); 
   color: #ff8306; 
   border-top: 3px solid #ff8306; 
   border-left: 1px solid #dee2e6;
   border-right: 1px solid #dee2e6;
 }




#showcategoryorder.editProduct.d-flex {
    min-height: 100vh;
}

.menures {
    height: 100vh; 
    position: sticky;
    top: 0; 
    overflow-y: hidden; 

}
.menures > div[name="mainmenu"] {
    flex-grow: 1; 
    overflow-y: auto; 
}
.menures .Logo { 
    padding: 15px;
    text-align: center;
   
}


.main-area-container {
    background-color: #f4f6f8;
    flex-grow: 1; 
}

.page-content-wrapper {
    padding: 20px 25px; 
}

.main-content-card {
    background-color: #ffffff;
    border-radius: 12px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); 
}

.main-content-card > div:not(:last-child),
.main-content-card > .subtitle-showall-wrapper + .category-items-container {
    margin-bottom: 25px;
}
.main-content-card > div:last-child {
    margin-bottom: 0;
}

.main-content-card .section-title { 
    color: #343a40 !important; 
    font-weight: 600 !important;
}

.subtitle-showall-wrapper .subtitle-text {
    color: #6c757d !important; 
    font-size: 0.9rem !important; 
    font-weight: 400 !important;
}
.showallspan {
    border: 1px solid #e07000 !important;
    background-color: #fff !important; 
    color: #e07000 !important;
    padding: 8px 18px !important;
    border-radius: 25px !important; 
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.showallspan:hover {
    background-color: #e07000 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(0,123,255,0.25) !important;
    transform: translateY(-1px);
}


.category-items-container {
    gap: 18px;
}

.category-list-item {
    padding: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 10px; 
    text-align: center;
    background-color: #fff;
    border: 1px solid #e9ecef;
    min-height: 190px; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
}
.category-list-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.category-list-item img {
    border-radius: 8px;
    width: 100%;
    max-width: 110px;
    height: 110px;
    object-fit: cover;
    margin-bottom: 12px; 
}
.category-list-item .category-name-text {
    color: #212529 !important;
    font-weight: 500 !important; 
    font-size: 0.9rem !important;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.7em; 
    max-height: 2.7em; 
}


.btnlistorders {
    gap: 15px;
}
.btnlistorders button {
    flex: 1 1 170px;
    padding: 12px 18px; 
    border-radius: 8px !important;
    border: 1px solid #ced4da !important;
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    font-size: 0.9rem; 
    text-align: center; 
}
.btnlistorders button .button-icon-span {
    margin-left: 8px; 
    font-size: 1.1rem !important; 
    color: #e07000;
    display: inline-flex;
    align-items: center;
}
.btnlistorders button:hover {
    border-color: #0069d9 !important;
    background-color: #e07000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,123,255,0.2);
}
.btnlistorders button:hover span,
.btnlistorders button:hover .button-icon-span svg {
    color: #fff !important;
}


.cardorderslist {
    gap: 20px;
}
.divcardorderslist {
    border-radius: 10px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
    background-color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    display: flex; 
    flex-direction: column;
}
.divcardorderslist .product-card-inner { 
    padding: 10px; 
}
.divcardorderslist:hover {
    transform: translateY(-5px);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.1);
}
.divcardorderslist .product-image-container img {
    background: #f7f8f9; 
    border-radius: 6px;
}
.divcardorderslist .hearticon {
    position: absolute;
    top: 15px; 
    right: 15px;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.divcardorderslist .hearticon:hover {
    background-color: rgba(230, 230, 230, 0.9);
}
.divcardorderslist .hearticon svg {
    font-size: 1.4rem;
}
.divcardorderslist .product-details {
    padding: 10px 5px 5px 5px; 
}
.divcardorderslist .product-name-text {
    color: #212529 !important;
    font-weight: 600 !important;
    font-size: 1rem !important; 
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em;
}
.divcardorderslist .product-brand-text,
.divcardorderslist .product-info-text {
    color: #6c757d !important;
    font-size: 0.8rem !important;
}
.divcardorderslist .product-price-text {
    color: #e07000 !important; 
    font-weight: 700 !important;
    font-size: 1rem !important;
}


.back-button-area {
    padding-top: 10px !important;
    padding-bottom: 0 !important; 
    margin-bottom: 10px; 
}
.back-button-area svg {
    font-size: 2.2rem !important;
    color: #333;
    transition: color 0.2s ease, transform 0.2s ease;
}
.back-button-area svg:hover {
    color: #0056b3;
    transform: translateX(-3px); 
}


.my-custom-pager {
    margin-top: 30px; 
    padding: 15px; 
    border-radius: 10px; 
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.07);
    display: flex;
    justify-content: center;
    align-items: center;
}
.my-custom-pager .k-pager-numbers .k-button {
    border-radius: 6px;
    margin: 0 4px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid #dee2e6; 
    padding: 6px 10px;
    font-size: 0.9rem;
}
.my-custom-pager .k-pager-numbers .k-button:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}
.my-custom-pager .k-pager-numbers .k-button.k-selected {
    background-color: #e07000;
    color: white;
    border-color: #e07000;
    font-weight: 500;
}
.my-custom-pager .k-pager-info {
    color: #495057;
    font-size: 0.9rem;
    margin: 0 10px;
}
.my-custom-pager .k-pager-nav {
    color: #e07000;
    font-size: 1.2rem;
}
.my-custom-pager .k-pager-nav:hover {
    color: #0056b3;
}

@media (min-width: 1200px) { /* XL screens */
    .category-list-item { flex-basis: calc(16.666% - 15px); /* ~6 per row (gap 18px) */ }
    .divcardorderslist { flex-basis: calc(31%); /* 4 per row (gap 20px) */ }
}

@media (min-width: 992px) and (max-width: 1199.98px) { /* LG screens */
    .category-list-item { flex-basis: calc(20% - 14.4px); /* 5 per row */ }
    .divcardorderslist { flex-basis: calc(33.333% - 13.33px); /* 3 per row */ }
}

@media (min-width: 768px) and (max-width: 991.98px) { /* MD screens */
    .page-content-wrapper { padding-left: 20px; padding-right: 20px; }
    .category-list-item { flex-basis: calc(25% - 13.5px); /* 4 per row */ }
    .divcardorderslist { flex-basis: calc(50% - 10px); /* 2 per row */ }
    .btnlistorders button { flex-basis: calc(33.333% - 10px); /* 3 buttons per row */ }
}

@media (min-width: 576px) and (max-width: 767.98px) { /* SM screens */
    .page-content-wrapper { padding-left: 15px; padding-right: 15px; }
    .main-content-card { /* padding: 20px !important; */ }
    .main-content-card .section-title { font-size: 1.1rem !important; }

    .subtitle-showall-wrapper { align-items: center; }
    .showallspan { padding: 7px 14px !important; font-size: 0.8rem !important;}

    .category-list-item { flex-basis: calc(33.333% - 12px); /* 3 per row */ min-height: 180px;}
    .category-list-item img { max-width: 90px; height: 90px; }

    .btnlistorders button { flex-basis: calc(50% - 7.5px); font-size: 0.8rem; padding: 10px 12px;}
    .divcardorderslist { flex-basis: calc(50% - 10px); /* 2 per row */ }
}

@media (max-width: 575.98px) { /* XS screens */
    .page-content-wrapper { padding-left: 10px; padding-right: 10px; }
    .main-content-card { /* padding: 15px !important; */ }
    .main-content-card .section-title { font-size: 1rem !important; }

    .subtitle-showall-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .showallspan { width: 100%; text-align: center; }

    .category-items-container { gap: 12px; }
    .category-list-item { flex-basis: calc(50% - 6px); /* 2 per row */ min-height: 170px;}
    .category-list-item img { max-width: 80px; height: 80px; }
    .category-list-item .category-name-text { font-size: 0.8rem !important; min-height: 2.4em; max-height: 2.4em;}


    .btnlistorders { flex-direction: column; gap: 10px; }
    .btnlistorders button { flex-basis: auto; width: 100%; }

    .cardorderslist { gap: 15px; }
    .divcardorderslist { flex-basis: 100%; /* 1 per row */ }

    .my-custom-pager { flex-direction: column; gap: 12px; text-align: center;}
    .my-custom-pager .k-pager-info { order: 1; margin-top: 5px;}
}





.content-area-wrapper {
    background-color: #f4f6f8 !important;
    padding: 20px !important; 
}

.main-card-look {
    background: white !important;
    border-radius: 12px !important; 
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); 
}

.back-button-container {
    padding: 5px 0 !important;
    margin-bottom: 15px; 
}
.back-button-container .tooltipbuttons svg {
    color: #e07000;
    transition: color 0.2s ease, transform 0.2s ease;
}
.back-button-container .tooltipbuttons svg:hover {
    color: #0056b3;
    transform: scale(1.05);
}

.filter-sort-controls {
    display: flex !important;
    flex-wrap: wrap; 
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding-bottom: 15px !important; 
    margin-bottom: 20px !important; 
}

.filter-sort-controls .k-filter { 
    border: none !important;
    padding: 0 !important;
    flex-grow: 1; 
    margin-right: 15px; 
}
.filter-sort-controls .k-filter-toolbar .k-filter-item { 
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #fff;
}
.filter-sort-controls .k-input-inner { 
    background-color: #f8f9fa !important; 
    border-radius: 5px !important;
    border: 1px solid #ced4da !important;
    padding: 8px 12px !important; 
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.filter-sort-controls .k-input-inner:focus {
    border-color: #e07000 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    background-color: #fff !important;
}

.filter-sort-controls > span[style*="fontWeight: bold"] {
    margin-left: 0 !important; 
    margin-right: 10px;
    color: #495057;
    font-size: 0.95rem;
    white-space: nowrap;
}

.sorting {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    color: #495057; 
    border-radius: 6px;
    padding: 8px 10px;
    margin-left: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sorting:hover {
    background-color: #dee2e6;
    border-color: #adb5bd;
}
.sorting.selected {
    background-color: #e07000;
    border-color: #0056b3;
    color: #fff; 
    box-shadow: 0 0 5px rgba(0,123,255,0.4);
}
.sorting svg {
    margin: 0 !important; 
    font-size: 1.1rem; 
}

.divcardorderslist {
    border: 1px solid #e0e0e0; 
    border-radius: 10px; 
    background-color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    min-height: 320px; 
}
.divcardorderslist:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}
.divcardorderslist .col-12:first-child { 
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.divcardorderslist img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    background-color: #f8f9fa !important; 
    border-top-left-radius: 9px; 
    border-top-right-radius: 9px;
    padding: 0 !important;
}

.divcardorderslist .spancardshowallcat {
    padding: 15px; 
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.divcardorderslist .spancardshowallcat span {
    font-size: 0.95rem !important;
    color: #333 !important;
    font-weight: 500 !important;
    line-height: 1.4;
    margin-bottom: 0 !important; 
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.k-listview-pager {
    margin-top: 25px;
    padding: 15px 0;
    background-color: transparent; 
    border-radius: 0; 
    box-shadow: none;
    border-top: 1px solid #e0e0e0; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.k-listview-pager .k-button {
    border-radius: 6px;
    margin: 0 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #555;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.k-listview-pager .k-button:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}
.k-listview-pager .k-button.k-selected {
    background-color: #e07000;
    color: white;
    border-color: #e07000;
    font-weight: 500;
}
.k-listview-pager .k-pager-info {
    color: #555;
    font-size: 0.9rem;
    margin: 0 12px;
}


@media (max-width: 991.98px) { 
    .filter-sort-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-sort-controls .k-filter {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .filter-sort-controls > span[style*="fontWeight: bold"] { 
        margin-bottom: 10px;
        text-align: left; 
    }
    .filter-sort-controls .sorting {
        width: auto; 
        margin-bottom: 5px;
    }

    .divcardorderslist {
        min-height: 300px; 
    }
}

@media (max-width: 767.98px) { 
    .content-area-wrapper {
        padding: 15px !important;
    }
    .main-card-look {
        padding: 1rem !important; 
    }
    .divcardorderslist {
        min-height: auto; 
    }
    .divcardorderslist img {
        height: 180px !important;
    }
}

@media (max-width: 575.98px) { 
    .filter-sort-controls > span[style*="fontWeight: bold"] {
        text-align: center; 
    }
    .sorting {
        padding: 7px 9px;
        margin-left: 6px;
    }
    .sorting svg {
        font-size: 1rem;
    }
    .divcardorderslist img {
        height: 160px !important;
    }
    .divcardorderslist .spancardshowallcat span {
        font-size: 0.9rem !important;
    }
    .k-listview-pager {
        flex-direction: column;
        gap: 10px; 
    }
}
.showproductordermain.showproductorder.d-flex {
    min-height: 100vh; 
}

.showproductordermain .menures { 
    flex: 0 0 260px; 
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: #fff; 
    border-right: 1px solid #e0e0e0; 
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
.showproductordermain .menures .Logo { padding: 20px 15px; border-bottom: 1px solid #f0f0f0; }
.showproductordermain .menures > div[name="mainmenu"] {
    flex-grow: 1;
    overflow-y: auto;
}

.showproductordermain .d-flex.flex-column.pe-2.w-100 {
    background-color: #f4f7f9; 
}
.showproductordermain #header {
    position: sticky; 
    top: 0;
    z-index: 1000; 
}

.showproductordermain .showproductorder.d-flex.flex-column.col-12[style*="rgb(240 240 250)"] {
    background-color: #f4f7f9 !important; 
    padding: 20px !important; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}

.showproductordermain .p-4[style*="background: white"] {
    background: white !important;
    border-radius: 12px !important; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07); 
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    position: relative; 
}

.showproductordermain div[style*="cursor:pointer"][style*="width:15%"] { 
    display: inline-flex; 
    align-items: center;
    color: #007bff;
    font-weight: 500;
    margin-bottom: 20px; 
    transition: color 0.2s ease;
    width: auto !important; 
    padding: 5px 10px;
    border-radius: 6px;
}
.showproductordermain div[style*="cursor:pointer"][style*="width:15%"]:hover {
    color: #0056b3;
    background-color: #f0f0f0;
}
.showproductordermain div[style*="cursor:pointer"][style*="width:15%"] svg { 
    margin-right: 6px !important;
    font-size: 1.2rem;
}

.showproductordermain div[style*="fontSize: 3rem"] {
    font-size: 1.8rem !important; 
    color: #2c3e50;
    margin-bottom: 25px;
    padding-left: 0 !important; 
    border-bottom: 1px solid #e9edf0;
    padding-bottom: 15px;
}

.showproductordermain div[style*="display: flex"][style*="justifyContent: center"][style*="marginBottom: 9px"] {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between !important; 
    align-items: center !important;
    border-bottom: none !important; 
    padding-bottom: 0 !important;
    margin-bottom: 20px !important; 
}

.showproductordermain .k-filter {
    border: none !important;
    padding: 0 !important;
    flex-grow: 1;
    min-width: 200px; 
    margin-right: 15px;
}
.showproductordermain .k-filter-toolbar .k-filter-item {
    border: 1px solid #d1d5db;
    border-radius: 25px; 
    background-color: #fff;
    overflow: hidden;
}
.showproductordermain .k-input-inner { 
    background-color: #fff !important;
    border-radius: 25px !important;
    border: none !important;
    padding: 9px 16px !important;
    transition: box-shadow 0.2s ease;
    font-size: 0.85rem;
    color: #333;
}
.showproductordermain .k-input-inner::placeholder { color: #999; }
.showproductordermain .k-input-inner:focus {
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.2) !important;
}

.showproductordermain span[style*="fontWeight: bold"][style*="marginLeft: 1%"] {
    margin-left: 0 !important;
    margin-right: 8px;
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500 !important;
}

.showproductordermain .sorting {
    background-color: #f0f2f5;
    border: 1px solid #d1d5db;
    color: #374151; 
    border-radius: 25px;
    padding: 7px 10px;
    margin-left: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.showproductordermain .sorting:hover {
    background-color: #e2e6ea;
    border-color: #b1b9c2;
}
.showproductordermain .sorting.selected {
    background-color: #007bff;
    border-color: #0056b3;
    color: #fff;
}
.showproductordermain .sorting svg {
    margin: 0 !important; 
    font-size: 1rem;
}

.showproductordermain .k-listview { 
    border: none !important;
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}
.showproductordermain .k-listview-content.k-list { 
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 -10px !important; 
    overflow-y: auto; 
    height: 100%; 
}
.showproductordermain .k-listview-item { 
    padding: 0 10px 20px 10px !important; 
    border: none !important;
    background: none !important;
    display: flex !important;
    align-items: stretch !important;
}

.showproductordermain .divcardorderslist { 
    border:none; 
    border-radius: none; 
    background-color: #fff;
    box-shadow: none; 
    min-height: 300px; 
    width: 100%; 
}
.showproductordermain .divcardorderslist .col-12:first-of-type:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}
.showproductordermain .divcardorderslist:hover {
    background-color: #fff !important;
}
.showproductordermain .divcardorderslist .col-12:first-of-type { 
    border: 1px solid #e9eff5; 
    border-radius: 10px; 
    background-color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.showproductordermain .divcardorderslist img {
    width: 100% !important;
    height: 160px !important; 
    object-fit: contain !important; 
    background-color: #f8f9fa !important; 
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    padding: 5px !important; 
}
.showproductordermain .divcardorderslist .hearticon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.showproductordermain .divcardorderslist .hearticon svg { font-size: 1.2rem; }

.showproductordermain .divcardorderslist .spancardshowallcat {
    padding: 2px 10px;
    text-align: left;
    display: flex;
    justify-content: start;
}
.showproductordermain .divcardorderslist .spancardshowallcat span {
    font-size: 0.8rem !important; 
    color: #555 !important;
    font-weight: normal !important;
    margin-bottom: 4px !important;
}
.showproductordermain .divcardorderslist .spancardshowallcat span[style*="fontWeight: bold"] {
    font-weight: 500 !important; 
    color: #333 !important;
    font-size: 0.85rem !important;
}
.showproductordermain .divcardorderslist .col-12.mt-2.spancardshowallcat:last-child {
    margin-top: auto; 
}

.showproductordermain .k-pager { 
    padding: 15px 0px; 
    background-color: #fff;
    border-top: 1px solid #e9eff5;
    border-radius: 0 0 10px 10px; 
    margin: 0 -1.5rem -1.5rem -1.5rem; 
    width: calc(100% + 3rem); 
    position: absolute; 
    bottom: 0;
    left: 0; 
    right: 0; 

    display: flex;
    justify-content: center;
    align-items: center;
}
.showproductordermain .k-pager .k-button {
    border-radius: 6px; margin: 0 3px; border: 1px solid #d1d5db;
    background-color: #fff; color: #4b5563; padding: 5px 9px; font-size: 0.8rem;
}
.showproductordermain .k-pager .k-button:hover { background-color: #f3f4f6; border-color: #9ca3af;}
.showproductordermain .k-pager .k-button.k-selected { background-color: #007bff; color: white; border-color: #007bff;}
.showproductordermain .k-pager .k-pager-info { color: #4b5563; font-size: 0.85rem; margin: 0 10px;}

@media (min-width: 1200px) { 
    .showproductordermain .k-listview-item { flex-basis: calc(20% - (20px * 4 / 5)); }
}
@media (min-width: 992px) and (max-width: 1199.98px) { 
    .showproductordermain .k-listview-item { flex-basis: calc(25% - (20px * 3 / 4)); }
}
@media (min-width: 768px) and (max-width: 991.98px) { 
    .showproductordermain .k-listview-item { flex-basis: calc(33.333% - (20px * 2 / 3)); }
    .showproductordermain .divcardorderslist { min-height: 280px; }
    .showproductordermain .divcardorderslist img { height: 140px !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) { 
    .showproductordermain .showproductorder.d-flex.flex-column.col-12[style*="rgb(240 240 250)"] { padding: 15px !important; }

    .showproductordermain .k-listview-item { flex-basis: calc(50% - (20px * 1 / 2)); }
    .showproductordermain .divcardorderslist { min-height: 270px; }
    .showproductordermain .divcardorderslist img { height: 130px !important; }
}
@media (max-width: 575.98px) { 
    .showproductordermain .showproductorder.d-flex.flex-column.col-12[style*="rgb(240 240 250)"] { padding: 10px !important; }

    .showproductordermain .sacp-filter-sort-area { flex-direction: column; align-items: stretch; }
    .showproductordermain .k-filter { margin-right: 0; margin-bottom: 15px; }
    .showproductordermain span[style*="fontWeight: bold"][style*="marginLeft: 1%"] { text-align: left; margin-bottom: 8px; }
    .showproductordermain .sorting { width: auto; margin-bottom: 8px;}

    .showproductordermain .k-listview-item { flex-basis: 100%; } 
    .showproductordermain .k-listview-content.k-list { margin: 0 !important; } 
    .showproductordermain .divcardorderslist { min-height: auto; }
    .showproductordermain .divcardorderslist img { height: 150px !important; }

    .showproductordermain .k-pager {
        flex-direction: column; gap: 10px;
    }
}

.sacp-page {
    display: flex; 
    min-height: 100vh;
}

.sacp-page .menures { 
    flex: 0 0 260px; 
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: #fff; 
    border-right: 1px solid #e0e0e0; 
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
.sacp-page .menures .Logo { padding: 20px 15px; border-bottom: 1px solid #f0f0f0; }
.sacp-page .menures > div[name="mainmenu"] {
    flex-grow: 1;
    overflow-y: auto;
}

.sacp-main-area { 
    background-color: #f4f7f9; 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.sacp-main-area > #header { 
    position: sticky; 
    top: 0;
    z-index: 100; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.sacp-content-background {
    background-color: #f4f7f9 !important; 
    padding: 20px !important; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}

.sacp-main-card {
    background: white !important;
    border-radius: 10px !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); 
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}
.sacp-main-card-content-wrapper { 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.sacp-back-button-container {
    padding: 5px 0 !important;
    margin-bottom: 15px;
}
.sacp-back-button-container .tooltipbuttons svg { color: #007bff; transition: color 0.2s ease, transform 0.2s ease; }
.sacp-back-button-container .tooltipbuttons svg:hover { color: #0056b3; transform: scale(1.08); }

.sacp-filter-sort-area {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #e9edf0 !important; 
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
}

.sacp-filter-sort-area .k-filter { 
    border: none !important;
    padding: 0 !important;
    flex-grow: 1; 
    margin-right: 15px; 
}
.sacp-filter-sort-area .k-filter-toolbar .k-filter-item { 
    border: 1px solid #d1d5db; 
    border-radius: 5px; 
    background-color: #fff;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.sacp-filter-sort-area .k-input-inner { 
    background-color: #eeeeee !important;
    border-radius: 5px !important;
    border: none !important;
    padding: 9px 16px !important; 
    transition: box-shadow 0.2s ease;
    font-size: 0.9rem;
    color: #333;
}
.sacp-filter-sort-area .k-input-inner::placeholder { color: #999; }
.sacp-filter-sort-area .k-input-inner:focus {
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.2) !important; 
    border: 1px solid #ccc !important;
    border-radius: 25px !important;
}
.sacp-filter-sort-area .k-toolbar-item{
    background-color: #fff;
}
.sacp-sort-label {
    margin-left: 0 !important;
    margin-right: 8px;
    color: #555e68;
    font-size: 0.9rem;
    font-weight: 500 !important;
    white-space: nowrap;
}

.sacp-filter-sort-area div:has(> .sacp-sorting-button) { 
    display: flex;
    align-items: center;
}
.sacp-sorting-button {
    background-color: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: 25px; 
    padding: 7px 11px; 
    margin-left: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sacp-sorting-button:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.sacp-sorting-button.selected {
    background-color: #007bff;
    border-color: #0062cc;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,123,255,0.3);
}
.sacp-sorting-button svg {
    font-size: 1rem;
}

.sacp-list-view {
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}
.k-listview-content{
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: flex-start;
}
.sacp-list-view ul.k-listview-content.k-list {
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: flex-start;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 -7.5px !important; 
    height: 100%; 
}
.sacp-list-view li.k-listview-item {
    padding: 0 7.5px 15px 7.5px !important; 
    border: none !important;
    background: none !important;
    display: flex !important; 
    align-items: stretch !important; 
}

.sacp-category-card {
    
    min-height: 220px; 
}
.sacp-card-inner-content:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
}
.sacp-card-inner-content {
    border: 1px solid #e5e7eb; 
    border-radius: 8px; 
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); 
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0; 
}
.sacp-category-card img {
    width: 100% !important;
    height: 120px !important; 
    object-fit: cover !important;
    background-color: #f0f2f5 !important;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0;
}

.sacp-card-text-wrapper {
    padding: 10px; 
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sacp-card-title-text {
    font-size: 0.8rem !important; 
    color: #374151 !important; 
    font-weight: 500 !important;
    line-height: 1.3;
    margin-bottom: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.1em; 
}

.sacp-pager.k-listview-pager {
    margin-top: auto; 
    padding: 12px 0;
    background-color: #fff; 
    border-radius: 0 0 10px 10px; 
    box-shadow: 0 -2px 5px rgba(0,0,0,0.04); 
    border-top: 1px solid #e9edf0;
    width: calc(100% + 48px); 
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px; 
    position: relative; 
}
.sacp-pager .k-button {
    border-radius: 6px; margin: 0 3px; border: 1px solid #d1d5db;
    background-color: #fff; color: #4b5563; padding: 5px 9px; font-size: 0.8rem;
}
.sacp-pager .k-button:hover { background-color: #f3f4f6; border-color: #9ca3af;}
.sacp-pager .k-button.k-selected { background-color: #007bff; color: white; border-color: #007bff; font-weight: 500;}
.sacp-pager .k-pager-info { color: #4b5563; font-size: 0.85rem; margin: 0 10px;}

@media (min-width: 1200px) { 
    .sacp-list-view li.k-listview-item { flex-basis: calc(16.666% - (15px * 5 / 6)); }
}
@media (min-width: 992px) and (max-width: 1199.98px) { 
    .sacp-list-view li.k-listview-item { flex-basis: calc(20% - (15px * 4 / 5)); }
}
@media (min-width: 768px) and (max-width: 991.98px) { 
    .sacp-list-view li.k-listview-item { flex-basis: calc(25% - (15px * 3 / 4)); }
    .sacp-category-card { min-height: 200px; }
    .sacp-category-card img { height: 100px !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) { 
    .sacp-content-background { padding: 15px !important; }
    .sacp-filter-sort-area { flex-direction: column; align-items: stretch; }
    .sacp-filter-sort-area .k-filter { margin-right: 0; margin-bottom: 15px; }
    .sacp-filter-sort-area .sacp-sort-label { text-align: left; margin-bottom: 8px; }
    .sacp-filter-sort-area .sacp-sorting-button { margin-bottom: 8px; width: auto; }

    .sacp-list-view li.k-listview-item { flex-basis: calc(33.333% - (15px * 2 / 3)); }
    .sacp-category-card { min-height: 190px; }
    .sacp-category-card img { height: 90px !important; }
    .sacp-card-title-text { font-size: 0.75rem !important; }
}
@media (max-width: 575.98px) { 
    .sacp-content-background { padding: 10px !important; }
    .sacp-filter-sort-area > span.sacp-sort-label + div { display: flex; justify-content: flex-start; gap: 6px;}
    .sacp-filter-sort-area .sacp-sorting-button { width: auto; margin-left:0; margin-right: 6px; }

    .sacp-list-view li.k-listview-item { flex-basis: calc(50% - (15px * 1 / 2)); }
    .sacp-category-card { min-height: 180px; }
    .sacp-category-card img { height: 80px !important; }
    .sacp-pager.k-listview-pager {
        flex-direction: column; gap: 10px;
        width: calc(100% + YOUR_P4_PADDING_X_2_XS_SCREENS) !important;
        margin-left: -YOUR_P4_PADDING_XS_SCREENS !important;
        margin-right: -YOUR_P4_PADDING_XS_SCREENS !important;
        margin-bottom: -YOUR_P4_PADDING_XS_SCREENS !important;
    }
}

.page-content-container {
   padding: 20px;
   background-color: #eef0f6;
   min-height: calc(100vh - 80px); 
   position: relative; 
}

.back-button-wrapper {
   z-index: 10; 
   padding: 0 !important; 
}
.back-button-wrapper .tooltipbuttons svg {
   font-size: 36px; 
   color: #007bff;
   background-color: white; 
   border-radius: 50%; 
   padding: 5px; 
   box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.back-button-wrapper .tooltipbuttons svg:hover {
   color: #0056b3;
   background-color: #f8f9fa;
}


.main-white-card {
   background-color: white;
   border-radius: 12px;
   padding: 25px; 
   padding-top: 35px; 
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
   margin-top: 30px; 
}

.card-section {
   margin-bottom: 25px;
   border-radius: 8px;
}
.card-section:last-child {
   margin-bottom: 0;
}

.brand-registration-section {
   background-color: white !important; 
   border: 1px solid #dee2e6 !important; 
   box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; 
   padding: 25px !important;
   border-radius: 10px !important;
}
.brand-registration-section .registerbrand .brandname {
   font-size: 1rem; 
   color: #333;
   font-weight: 600; 
   margin-right: 10px;
}
.brand-registration-section .insertfaqcard {
   align-items: flex-end;
   justify-content: space-between;
}
.brand-registration-section .d-flex.my-3.px-2 { 
   margin-top: 0 !important; 
   margin-bottom: 0 !important; 
   align-self: flex-end; 
   padding-bottom: 4px; 
}
.brand-registration-section .tooltipbuttons svg { 
   font-size: 32px !important; 
   color: rgb(61 138 45) !important;
}
.brand-registration-section .tooltipbuttons svg:hover {
   color: rgb(40 100 30) !important;
}


.filter-title-section {
   display: flex;
   justify-content: space-between; 
   align-items: center;
   padding-bottom: 15px;
   margin-bottom: 20px !important;
   border-bottom: 1px solid #eee;
}
.filter-title-section > span:first-child {
   order: 2; 
   font-size: 1.3rem;
   font-weight: 600;
   color: #0056b3;
   border-bottom: none !important;
}
.filter-title-section > span[onClick] { 
   order: 1; 
   background-color: #6c757d !important; 
   color: white !important;
   padding: 8px 15px !important;
   border-radius: 6px !important;
   font-size: 0.9rem !important;
   font-weight: 500 !important;
   cursor: pointer !important;
   transition: background-color 0.2s ease;
   display: inline-flex !important;
   align-items: center !important;
}
.filter-title-section > span[onClick]:hover {
   background-color: #5a6268 !important;
}
.filter-title-section > span[onClick] > svg {
   margin-right: 0 !important;
   margin-left: 8px;
   font-size: 1.1em;
}

.filter-inputs-section {
   display: flex;
   flex-wrap: wrap; 
}
.full-width-search-field-container {
   width: 100% !important;
   flex-grow: 1; 
   padding: 0 !important;
}
.filter-inputs-section > div:not(.full-width-search-field-container) {
   flex-basis: 0;
   flex-grow: 0;
   padding: 0 !important;
   margin: 0 !important;
   width: 0 !important;
}
.brand  input.k-input-inner { 
   background-color: #fff !important; 
   border: 1px solid #ced4da !important;
   border-radius: 20px !important; 
   padding: 8px 20px !important; 
   font-size: 1rem !important; 
   height: 40px !important; 
   box-shadow: 0 2px 4px rgba(0,0,0,0.05) inset;
}
.brand  input.k-input-inner::placeholder {
   color: #888; 
}
.brand input.k-input-inner:focus {
   border-color: #007bff !important;
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25), 0 2px 4px rgba(0,0,0,0.05) inset !important;
}


input.registerinputs_brand,
textarea { 
   background-color: #fdfdff !important;
   border: 1px solid #bcc2c7 !important;
   border-radius: 6px !important;
   padding: 10px 12px !important;
   font-size: 0.95rem !important;
   color: #333 !important;
   width: 100% !important;
   box-sizing: border-box !important;
   min-height: 40px; 
}
input.registerinputs_brand:focus,
textarea:focus {
   border-color: #007bff !important;
   outline: none !important;
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}


.kendo-grid-section { 
   padding: 0 !important; 
}
.k-grid {
   border-radius: 10px !important;
   overflow: hidden;
   border: 1px solid #dee2e6 !important;
   box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.k-grid-header {
   background-color: #f1f3f5 !important;
}
.k-grid-header .k-header {
   color: #212529 !important;
   font-weight: 600 !important;
   border-color: #dee2e6 !important;
   text-align: center; 
}
.k-grid td {
   border-color: #e9ecef !important;
   padding: 0.75rem 0.6rem !important; 
   vertical-align: middle; 
}
.k-grid td input[type="text"], 
.k-grid td .k-textbox { 
   width: 100% !important;
   text-align: center !important; 
   padding: 8px 10px !important;
   border-radius: 4px !important;
   border: 1px solid #b0bec5 !important;
   background-color: #fff !important;
   font-size: 0.9rem;
   box-sizing: border-box;
}
.k-grid td input[type="text"]:focus,
.k-grid td .k-textbox:focus {
   border-color: #007bff !important;
   box-shadow: 0 0 3px rgba(0,123,255,0.3) !important;
   background-color: #fff !important;
}
.k-grid .k-grid-content {
   overflow-y: auto; 
}
.k-grid-norecords td div{
   padding: 25px;
   text-align: center;
   color: #777;
}
.k-grid-norecords .k-loading-indicator {
   width: 45px !important;
   height: 45px !important;
}

.k-grid td .tooltipbuttons svg {
   font-size: 22px; 
   margin: 0 6px;
   color: #546e7a;
}
.k-grid td .tooltipbuttons svg:hover {
   color: #007bff !important;
}

@media (max-width: 992px) {
   .page-content-container { padding: 15px; }
   .main-white-card { padding: 20px; margin-top: 45px; } 
   .back-button-wrapper { top: 15px; right: 15px; }
   .back-button-wrapper .tooltipbuttons svg { font-size: 32px; }

   .brand-registration-section .insertfaqcard {
       flex-direction: column;
       align-items: stretch !important;
   }
   .brand-registration-section .insertfaqcard .registerbrand {
       width: 100% !important;
       margin-bottom: 15px;
   }
   .brand-registration-section .insertfaqcard > div:last-child {
       justify-content: flex-start !important;
       padding-bottom: 0;
   }
}

@media (max-width: 768px) {
   .page-content-container { padding: 10px; }
   .main-white-card { padding: 15px; margin-top: 50px; }
   .back-button-wrapper { top: 10px; right: 10px; }
   .back-button-wrapper .tooltipbuttons svg { font-size: 30px; padding: 4px; }

   .filter-title-section > span:first-child { font-size: 1.15rem; }
   .filter-title-section > span[onClick] { font-size: 0.85rem !important; padding: 7px 12px !important; }

   input.registerinputs_brand, input.k-input-inner, textarea {
       font-size: 0.9rem !important; padding: 8px 15px !important; min-height: 38px;
   }
   input.k-input-inner { border-radius: 19px !important; }

   .k-grid-header .k-header, .k-grid td { font-size: 0.85rem; }
   .k-grid td input[type="text"], .k-grid td .k-textbox { font-size: 0.85rem; padding: 6px 8px !important; }
   .k-pager-info, .k-pager-numbers .k-link, .k-pager-input input { font-size: 0.8rem !important; }
}

@media (max-width: 576px) {
   .main-white-card { padding-top: 20px; } 
   .filter-title-section {
       flex-direction: column;
       align-items: stretch !important; 
   }
   .filter-title-section > span:first-child { 
       margin-bottom: 10px;
       text-align: center; 
       order:1 !important; 
   }
   .filter-title-section > span[onClick] { 
       width: 100%;
       justify-content: center !important;
       order:2 !important; 

   }
   .brand-registration-section { padding: 15px !important; }
   .brand-registration-section .insertfaqcard { padding: 0; }
}

.card-section input{
   border: none;
    text-align: center;
    height: 42px !important;
}

body.product-detail-active { /* Add this class to body when ProductDetail is mounted for page-specific styles */
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f6f8; /* Light gray background for the page */
    line-height: 1.6;
    overflow-y: hidden; /* Prevent body scroll when main content area has its own scroll */
}

/* === Overall Page Layout for Product Detail === */
.productdetail-page {
    display: flex;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent double scrollbars on page itself */
}

.productdetail-page .main-content-area {
    padding: 0;
    flex-grow: 1; /* Takes remaining space */
    overflow-y: auto; /* Scroll for content area */
    overflow-x: hidden;
    height: 100vh;
    background-color: #f4f6f8; /* Background for the content area */
    transition: margin-left 0.3s ease; /* Smooth transition */
}

/* === Product Detail Card (.productdetail-content) === */
.productdetail-page .productdetail-content { /* This is the main white card */
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px 25px; /* Vertical Horizontal padding */
    margin: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    width: 95%;
}

/* Header inside main content area */
.productdetail-page .main-content-area #header {
    position: sticky;
    top: 0;
    z-index: 900;
    background-color: white; /* Ensure background for sticky header */
    padding-bottom: 10px; /* Space below header */
    padding-left: 25px; /* Re-apply padding */
    padding-right: 25px;
}

/* === Sections within the card === */
.productdetail-page .productdetail-content .productdetailss { /* Container for imagelist, mainimage, productinfo */
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping to ensure horizontal layout before media queries */
    gap: 25px;
}

.productdetail-page .productdetail-content .imagelist {
    flex: 0 0 120px; /* Fixed width for vertical image list */
    max-height: 450px; /* Adjust as needed */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px; /* Space for scrollbar */
    margin-top: 0; /* Align with top of main image */
        scrollbar-width: thin !important;
}

.productdetail-page .productdetail-content .imagelist .image > div {
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, border-color 0.2s ease;
    background-color: #f9f9f9;
    padding: 5px;
}
.productdetail-page .productdetail-content .imagelist .image > div:hover {
    transform: scale(1.03);
    border-color: #007bff;
}
.productdetail-page .productdetail-content .imagelist .image > div.activeimage {
    border: 2px solid #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}
.productdetail-page .productdetail-content .imagelist img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 80px; /* Thumbnail image height */
}


.productdetail-page .productdetail-content .mainImage { /* mainImage has .imageproductdetails class too */
    flex: 1 1 50%; /* Takes more space, allows shrinking */
    position: relative; /* For heart icon positioning */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0; /* Prevents flex item from overflowing */
}
.productdetail-page .productdetail-content .mainImage img {
    max-width: 100%;
    max-height: 450px; /* Max height for main image */
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    position: absolute;
    top: 0;
}
.productdetail-page .productdetail-content .mainImage .hearticon {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.productdetail-page .productdetail-content .productmaininfo {
    flex: 1 1 40%; /* Takes space, allows shrinking */
    padding-left: 20px; /* Space from main image */
    border-left: 1px solid #eee; /* Separator line */
    min-width: 0; /* Prevents flex item from overflowing */
}

.productdetail-page .productdetail-content .design-button {
    transition: background-color 0.3s ease, transform 0.2s ease;
    padding: 12px 0; /* More padding */
    font-size: 1.3rem !important; /* Control font size better */
}
.productdetail-page .productdetail-content .design-button:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

/* Text elements within productmaininfo */
.productdetail-page .productdetail-content .productmaininfo span[style*="font-size: 2rem"] {
    font-size: 1.75rem !important; /* Adjust large fonts */
}
.productdetail-page .productdetail-content .productmaininfo span[style*="font-size: 1.8rem"] {
    font-size: 1.5rem !important;
}
.productdetail-page .productdetail-content .productmaininfo .price-range-item {
    margin-bottom: 0.5rem;
}
.productdetail-page .productdetail-content .productmaininfo .product-spec-item,
.productdetail-page .productdetail-content .productmaininfo .product-spec-detail {
    padding-right: 10px;
    margin-bottom: 0.75rem;
    word-break: break-word; /* Prevent long words from breaking layout */
}
.productdetail-page .productdetail-content .productmaininfo .colors-list span[style*="width: 20px"] {
    border: 1px solid #ddd; /* Add border to color swatches */
}


/* === Responsive Design === */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .productdetail-page .menures {
        width: 200px;
    }
    .productdetail-page .main-content-area {
        margin-left: 200px;
    }

    .productdetail-page .productdetail-content .productdetailss {
        flex-direction: column; /* Stack main sections */
        align-items: stretch; /* Stretch items to full width of card */
        gap: 30px;
    }

    .productdetail-page .productdetail-content .imagelist {
        flex: 0 0 auto; /* Reset flex basis */
        order: 2; /* Show below main image */
        max-height: 120px; /* Adjust for horizontal scroll */
        overflow-x: auto; /* Horizontal scroll for thumbnails */
        overflow-y: hidden;
        display: flex; /* Make .imagelist a flex container for its .image child */
        flex-direction: row; /* Align .image horizontally */
        padding-right: 0;
        padding-bottom: 10px; /* Space for scrollbar */
        scrollbar-width: thin !important;
    }
    .productdetail-page .productdetail-content .imagelist .image { /* This is the direct child of .imagelist */
        display: flex; /* Make .image a flex container for thumbnail divs */
        flex-wrap: nowrap; /* Ensure thumbnails stay in one line */
        gap: 10px;
    }
    .productdetail-page .productdetail-content .imagelist .image > div { /* Each thumbnail container */
        flex: 0 0 90px; /* Fixed width for thumbnails */
        margin-bottom: 0;
        height: 90px; /* Ensure consistent height */
        display: flex;
        align-items: center;
        justify-content: center;
    }
     .productdetail-page .productdetail-content .imagelist img {
        max-height: 70px; /* Thumbnail image height */
    }


    .productdetail-page .productdetail-content .mainImage {
        order: 1; /* Show main image first */
        max-height: 350px; /* Adjust main image height */
    }
    .productdetail-page .productdetail-content .mainImage img {
        max-height: 350px;
    }

    .productdetail-page .productdetail-content .productmaininfo {
        order: 3;
        padding-left: 0;
        border-left: none; /* Remove border when stacked */
        border-top: 1px solid #eee; /* Add top border as separator */
        padding-top: 20px;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    body.product-detail-active {
      /* On smaller screens, if menu behavior is complex, consider allowing body scroll or different menu approach */
      /* For now, keep as is, assuming menu and content scroll independently */
    }

    .productdetail-page .menures {
        width: 60px; /* Thinner menu, potentially for icons only */
        /* To fully implement icon-only menu, JSX changes would be needed for labels */
        /* Hiding text in menu items: */
    }
    .productdetail-page .menures [name="mainmenu"] span { /* Example: if menu text is in spans */
        /* display: none; */ /* This would hide text, but needs specific selectors */
    }
    .productdetail-page .main-content-area {
        margin-left: 60px;
    }

    .productdetail-page .main-content-area #header {
        /* margin: 0 -15px 10px -15px; */
        padding-left: 15px;
        padding-right: 15px;
    }
    .productdetail-page .productdetail-content {
        margin: 15px;
        padding: 15px;
    }

    .productdetail-page .productdetail-content .productmaininfo span,
    .productdetail-page .productdetail-content .productmaininfo button {
        font-size: 0.95rem !important;
    }
    .productdetail-page .productdetail-content .productmaininfo span[style*="font-size: 1.75rem"],
    .productdetail-page .productdetail-content .productmaininfo span[style*="font-size: 1.5rem"] {
        font-size: 1.3rem !important;
    }
    .productdetail-page .productdetail-content .design-button {
        font-size: 1.1rem !important;
        padding: 10px 0;
    }

    .productdetail-page .productdetail-content .productmaininfo .price-range-item,
    .productdetail-page .productdetail-content .productmaininfo .w-75, /* Targets the price container */
    .productdetail-page .productdetail-content .productmaininfo .w-50 { /* Targets individual price from/to */
        width: 100% !important; /* Stack price elements */
        justify-content: flex-start !important;
    }
     .productdetail-page .productdetail-content .productmaininfo .w-50 + .w-50 { /* Second price item */
        margin-left: 0 !important; /* Remove margin if any */
        padding-left: 0 !important;
     }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .productdetail-page .menures {
        display: none; /* Hide menu completely */
    }
    .productdetail-page .main-content-area {
        margin-left: 0;
        /* height: auto; /* Allow content to dictate height */
        /* overflow-y: visible; /* If body scroll is preferred */
    }
     body.product-detail-active {
        overflow-y: auto; /* Allow body to scroll if menu is gone and main content might not scroll itself */
     }

    .productdetail-page .main-content-area #header {
        position: static; /* Header no longer sticky */
    }
    .productdetail-page .productdetail-content {
        margin: 10px;
        padding: 10px;
    }

    .productdetail-page .productdetail-content .imagelist .image > div {
        flex: 0 0 70px; /* Smaller thumbnails */
        height: 70px;
    }
    .productdetail-page .productdetail-content .imagelist img {
        max-height: 55px;
    }

    .productdetail-page .productdetail-content .mainImage {
        max-height: 280px;
    }
     .productdetail-page .productdetail-content .mainImage img {
        max-height: 280px;
    }

    .productdetail-page .productdetail-content .productmaininfo span[style*="font-size: 1.3rem"] {
        font-size: 1.1rem !important;
    }
    .productdetail-page .productdetail-content .productmaininfo .product-spec-item,
    .productdetail-page .productdetail-content .productmaininfo .product-spec-detail {
        width: 100%;
        padding-right: 0;
        font-size: 0.9rem !important;
    }
    .productdetail-page .productdetail-content .productmaininfo .colors-list {
        justify-content: flex-start; /* Align colors */
    }
     .productdetail-page .productdetail-content .productmaininfo .colors-list span[style*="width: 20px"] {
        width: 18px !important;
        height: 18px !important;
        margin: 2px !important;
    }
}

/* Scrollbar styling (optional, for webkit browsers) */
.productdetail-page .productdetail-content .imagelist::-webkit-scrollbar,
.productdetail-page .main-content-area::-webkit-scrollbar,
.productdetail-page .menures::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.productdetail-page .productdetail-content .imagelist::-webkit-scrollbar-thumb,
.productdetail-page .main-content-area::-webkit-scrollbar-thumb,
.productdetail-page .menures::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 4px;
}
.productdetail-page .productdetail-content .imagelist::-webkit-scrollbar-track,
.productdetail-page .main-content-area::-webkit-scrollbar-track,
.productdetail-page .menures::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}
@font-face{
    font-family: sarabun;
    src: url(/assets/fonts/Sarabun-Bold.b8825eaa682ec51689b3.ttf);
  }
div.orderpreview .k-grid-content{
    overflow-y: hidden;
}
div.orderpreview .k-table-thead{
    display: none;
}

div.orderpreview tbody tr td.normal{
    font-family: lora;
    color:black;
    
}

div#orderpreview .k-table-thead{
    display: flex;
}
div#orderpreview thead{
    width: 100%;
}
div#orderpreview thead tr{
    width: 100%;
    display: flex;
    border-right: 2px solid black !important;
    border-bottom: 2px solid black !important;
}
div#orderpreview thead  span.k-column-title{
  font-family: sarabun;
}
div#orderpreview tbody tr td{
   text-align: center;
   color: black;
}

div#orderpreview tbody tr td.description-cell{
   text-align: left !important;
   padding: 8px !important;
   vertical-align: top !important;
   line-height: 1.4 !important;
}

div#orderpreview thead tr th{
    
    display: flex;
    justify-content: center;
    border: 2px solid black !important;
}
div#orderpreview  colgroup{
    display: none;
}
div.orderpreview td.col4{
    border-right: 1px solid #ccc !important;
}
div.orderpreview div.k-grid-header{
    border: 0px !important;
}

div.orderpreview div.k-grid.k-grid-md{
    border: 0px;
}
div#orderpreview{
    border-bottom: 1px solid black;
}
div#orderpreviewbottom .k-table-thead{
    display: flex;
}
div#orderpreviewbottom .k-table-thead{
    display: none;
}

div#orderpreviewbottom  tbody tr td{
    text-align: right;
}
div#orderpreviewbottom  tbody tr  td[data-grid-col-index="2"]{
    padding-right: 30px !important;
    color: black;
}
div#orderpreviewbottom  tbody tr  td[data-grid-col-index="1"]{
    font-family: sarabun;
    color: black;
}
.qrcode{
    width: 50%;
    min-width: 100px;
    aspect-ratio: 1/1;
}



.menures {
    height: 100vh; 
    position: sticky; 
    top: 0; 
    overflow-y: hidden; 

}
.menures > div[name="mainmenu"] {
    flex-grow: 1; 
    overflow-y: auto; 
}
.menures .Logo { 
    padding: 15px;
    text-align: center;
}
/* General Page Structure with Scope */
.order-detail-scope .orderdetail-page {
    display: flex;
    min-height: 100vh;
    background-color: #f0f0fa;
}

.order-detail-scope .sidebar-menu {
    width: 280px;
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    /* padding: 15px; */
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

.order-detail-scope .sidebar-menu .Logo {
    margin-bottom: 20px;
    text-align: center;
}
.order-detail-scope .sidebar-menu .Logo img {
    max-width: 150px;
    height: auto;
}

.order-detail-scope .dashboard-menu-container {
    flex-grow: 1;
    overflow-y: auto;
}

.order-detail-scope .main-content {
    flex-grow: 1;
    /* padding: 20px;
    overflow-y: auto; */
    max-width: calc(100vw - 280px);
}
.order-detail-scope .main-content .action-bar,
.order-detail-scope .main-content .content-body{
    padding: 5px 20px;
}
.order-detail-scope .page-header {
    background-color: #ffffff;
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}


.order-detail-scope .back-button-icon {
    font-size: 2.5rem;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease;
}
.order-detail-scope .back-button-icon:hover {
    color: #333;
}

.order-detail-scope .content-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.order-detail-scope .content-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid #eaeaea;
}
.order-detail-scope .content-card-footer {
    border-top: 1px solid #f0f0f0;
    /* padding-top: 15px;
    margin-top: 15px; */
}

.order-detail-scope .order-header-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    gap: 15px;
}

.order-detail-scope .order-header-info .label {
    font-weight: bold;
    color: #555;
    margin-right: 8px;
    font-size: 0.9rem;
}
.order-detail-scope .order-header-info .value {
    color: #333;
    font-size: 0.9rem;
}
.order-detail-scope .order-title-section, .order-detail-scope .order-date-section {
    display: flex;
    flex-direction: column;
}

.order-detail-scope .order-actions {
    display: flex;
    gap: 15px;
}

.order-detail-scope .action-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background-color: #444;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.9rem;
}
.order-detail-scope .action-button:hover {
    background-color: #e07000;
}
.order-detail-scope .action-button svg {
    font-size: 1.2rem;
}

/* Order Details Layout */
.order-detail-scope .order-details-layout {
    display: flex;
    gap: 20px;
}

.order-detail-scope .order-items-section {
    flex: 3;
}

.order-detail-scope .customer-billing-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Order Item Rendering */
.order-detail-scope .order-item-render {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    gap: 15px;
}
.order-detail-scope .order-item-render:last-child {
    border-bottom: none;
}

.order-detail-scope .order-item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Ürün Temel Bilgileri */
.order-detail-scope .product-basic-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.order-detail-scope .product-name {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.order-detail-scope .product-sku,
.order-detail-scope .product-category {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

/* Detay Bilgileri */
.order-detail-scope .product-detail-info,
.order-detail-scope .design-info,
.order-detail-scope .price-calculations {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-detail-scope .design-info {
    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    border-left: 4px solid #ff8306;
}

.order-detail-scope .design-header {
    margin-bottom: 8px;
}

.order-detail-scope .design-title {
    font-size: 1rem;
    font-weight: bold;
    color: #ff8306;
}

.order-detail-scope .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #f5f5f5;
}

.order-detail-scope .detail-row:last-child {
    border-bottom: none;
}

.order-detail-scope .detail-label {
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
    min-width: 100px;
}

.order-detail-scope .detail-value {
    font-size: 0.85rem;
    color: #333;
    font-weight: 600;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 5px;
}

.order-detail-scope .color-preview {
    border: 2px solid #333 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: box-shadow 0.3s ease;
}
.order-detail-scope .color-preview:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

/* Fiyat Hesaplamaları */
.order-detail-scope .price-calculations {
    background-color: #fff3e0;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ff8306;
}

.order-detail-scope .price-calculations .detail-row:last-child {
    border-top: 1px solid #ff8306;
    padding-top: 8px;
    margin-top: 5px;
    font-weight: bold;
    color: #e65100;
}

/* Aksiyon Butonları */
.order-detail-scope .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.order-detail-scope .printed-by {
    font-size: 0.8rem;
    color: #999;
    font-style: italic;
}
.order-detail-scope .preview-sides-btn {
    background-color: #ff8306;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 0.8rem;
    align-self: flex-start;
}
.order-detail-scope .preview-sides-btn:hover {
    background-color: #e07000;
}

/* Yeni Görsel Düzenlemesi */
.order-detail-scope .order-item-images-container {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.order-detail-scope .product-image-section,
.order-detail-scope .design-image-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.order-detail-scope .image-label {
    font-size: 0.8rem;
    font-weight: bold;
    color: #ff8306;
    text-align: center;
    background-color: #fff3e0;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ff8306;
}

.order-detail-scope .product-image-container,
.order-detail-scope .design-image-container {
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    overflow: hidden;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.order-detail-scope .product-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.order-detail-scope .product-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.order-detail-scope .no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    color: #999;
    font-size: 0.8rem;
    text-align: center;
    border-radius: 4px;
}

.order-detail-scope .design-image-container canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.order-detail-scope .download-design-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 8px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    justify-content: center;
}

.order-detail-scope .download-design-btn:hover {
    background-color: #218838;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.order-detail-scope .download-design-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.order-detail-scope .item-quantity-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 10;
}

.order-detail-scope .item-quantity {
    background-color: #ff8306;
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 2px solid white;
}

/* Eski stiller - geriye dönük uyumluluk için */
.order-detail-scope .order-item-image-container {
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #f9f9f9;
}
.order-detail-scope .order-item-image-container canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Gantt Chart */
.order-detail-scope .order-status-gantt .gantt-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: block;
}
.order-detail-scope .gantt-chart-container {
    display: flex;
    width: 100%;
    background-color: #e9ecef;
    border-radius: 25px;
    overflow: hidden;
    height: 40px;
}
.order-detail-scope .gantt-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 5px;
    color: #495057;
    font-size: 0.7rem;
    text-align: center;
    position: relative;
    border-right: 1px solid #d1d8de;
}
.order-detail-scope .gantt-node:last-child {
    border-right: none;
}

.order-detail-scope .gantt-node.completed {
    background-color: #ff8306;
    color: white;
}
.order-detail-scope .gantt-node.active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}
.order-detail-scope .gantt-node.upcoming {
    background-color: #e9ecef;
    color: #6c757d;
}
.order-detail-scope .gantt-node.active svg, .order-detail-scope .gantt-node.completed svg {
    fill: white;
}
.order-detail-scope .gantt-node.upcoming svg {
    fill: #6c757d;
}
.order-detail-scope .gantt-node svg {
    margin-right: 5px;
    width: 1em;
    height: 1em;
}
.order-detail-scope .gantt-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Customer and Billing Info */
.order-detail-scope .card-header {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.order-detail-scope .card-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
}
.order-detail-scope .card-body p {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
}
.order-detail-scope .card-body .info-label {
    font-weight: bold;
    color: #ff8306;
    font-size: 1rem;
    margin-top: 10px;
}
.order-detail-scope .card-body .info-footer {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}
.order-detail-scope .address-details {
    font-style: italic;
    color: #444;
}
.order-detail-scope .billing-row, .order-detail-scope .total-cost-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.9rem;
}
.order-detail-scope .billing-row.expandable {
    cursor: pointer;
}
.order-detail-scope .billing-row.sub-item {
    padding-left: 20px;
    color: #777;
}
.order-detail-scope .amount-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}
.order-detail-scope .amount-toggle svg {
    color: #ff8306;
}
.order-detail-scope .card-footer.total-cost-row {
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
    border-top: 2px solid #ff8306;
    margin-top:10px;
    padding-top:10px;
}


/* Modals (Reason, PDF Preview, Sides Preview) */
/* The modal overlay itself is usually appended to body, so scoping it might be tricky
   unless the modal components are also rendered within .order-detail-scope.
   Assuming Kendo Window and Draggable handle their own scoping or are rendered within.
   If they are portal-based and render outside, this scoping won't apply to their outermost wrapper.
   However, internal classes used *within* the modal content (passed as children) will be scoped if
   those components are defined/used within the .order-detail-scope.
*/

.order-detail-scope .modal-overlay { /* This will only work if modal-overlay is a child of order-detail-scope */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.order-detail-scope .reason-modal {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid #ccc;
}
.order-detail-scope .reason-modal-header {
    display: flex;
    justify-content: flex-end;
    background-color: #ff8306;
    padding: 10px;
    margin: -20px -20px 0 -20px;
    border-radius: 8px 8px 0 0;
}
.order-detail-scope .reason-modal-header .close-icon {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
}
.order-detail-scope .reason-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.order-detail-scope .reason-textarea {
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    resize: vertical;
}
.order-detail-scope .reason-textarea:focus {
    border-color: #ff8306;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 131, 6, 0.2);
}
.order-detail-scope .reason-modal-footer {
    display: flex;
    justify-content: center;
}
.order-detail-scope .submit-reason-btn {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}
.order-detail-scope .submit-reason-btn:hover {
    background-color: #218838;
}

/* Kendo Window Customization with Scope */
/* Note: Kendo Windows often render directly under body or a specified portal.
   If so, .order-detail-scope will not be an ancestor unless the Window's appendTo prop is configured.
   The classes like 'orderdetail_pdfpreview_window' are global. If you want to scope Kendo's own classes,
   you'd need to ensure the Window component itself is within the scope or use very specific selectors.
   For styling the *content* of the window, if the content is from your scoped component, it will be scoped.
*/
.order-detail-scope .orderdetail_pdfpreview_window, 
.order-detail-scope .show-all-sides-window { /*This scopes if the window component itself has this class AND is inside scope*/
    border-radius: 8px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    border: 1px solid #bbb !important;
}
/* These will apply if the Window is a child of .order-detail-scope in the DOM tree */
.order-detail-scope .k-window-titlebar { 
    background-color: #ff8306 !important;
    color: white !important;
    border-radius: 8px 8px 0 0 !important;
}
.order-detail-scope .k-window-content {
    padding: 15px !important;
    background-color: #fdfdfd;
}
.order-detail-scope .window-close-icon {
    font-size: 1.3rem;
    cursor: pointer;
    color: white;
    padding: 5px;
}
.order-detail-scope .window-close-icon:hover {
    opacity: 0.8;
}

/* ShowAllSideOfDesign Specifics with Scope */
.order-detail-scope .showsides-listview {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-height: 70vh;
    overflow-y: auto;
}
.order-detail-scope .side-show-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    width: 280px;
}
.order-detail-scope .side-item-info {
    text-align: center;
}
.order-detail-scope .side-item-info .side-label {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
}
.order-detail-scope .download-image-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
}
.order-detail-scope .download-image-btn:hover {
    background-color: #0056b3;
}

.order-detail-scope .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 1.5rem;
    color: #ff8306;
}

/* Responsive Adjustments with Scope */
@media (max-width: 1200px) {
    .order-detail-scope .order-details-layout {
        flex-direction: column;
    }
    .order-detail-scope .order-items-section, .order-detail-scope .customer-billing-section {
        flex: none;
        width: 100%;
    }
    .order-detail-scope .main-content {
         max-width: 100vw;
    }
}

@media (max-width: 992px) {
    .order-detail-scope .sidebar-menu {
        width: 220px;
    }
     .order-detail-scope .main-content {
         max-width: calc(100vw - 220px);
    }
    .order-detail-scope .order-header-info {
        flex-direction: column;
        align-items: flex-start;
    }
    .order-detail-scope .order-actions {
        width: 100%;
        justify-content: space-around;
        margin-top:15px;
    }
    .order-detail-scope .action-button {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    .order-detail-scope .action-button svg {
        font-size: 1rem;
    }
    .order-detail-scope .gantt-node {
        font-size: 0.65rem;
    }
    .order-detail-scope .gantt-node svg {
        display: none;
    }
}

@media (max-width: 768px) {
    .order-detail-scope .sidebar-menu {
        display: none;
    }
    .order-detail-scope .main-content {
        max-width: 100vw;
    }
    .order-detail-scope .order-item-render {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .order-detail-scope .order-item-info .preview-sides-btn {
        align-self: center;
    }
    .order-detail-scope .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .order-detail-scope .detail-value {
        text-align: left;
    }
    .order-detail-scope .order-item-images-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .order-detail-scope .product-image-section,
    .order-detail-scope .design-image-section {
        width: 100%;
        max-width: 200px;
    }
    .order-detail-scope .product-image-container,
    .order-detail-scope .design-image-container {
        width: 120px;
        height: 120px;
    }
    .order-detail-scope .gantt-chart-container {
        height: auto;
        flex-direction: column;
    }
    .order-detail-scope .gantt-node {
        border-right: none;
        border-bottom: 1px solid #d1d8de;
        font-size: 0.8rem;
        min-height: 30px;
    }
    .order-detail-scope .gantt-node:last-child {
        border-bottom: none;
    }
     .order-detail-scope .showsides-listview {
        max-height: 60vh;
    }
    .order-detail-scope .side-show-item {
        width: 90%;
    }
    /* Scoping Kendo window for mobile might still be tricky if it's a portal */
     .order-detail-scope .k-window { 
        width: 90vw !important;
        left: 5vw !important;
    }
}

@media (max-width: 480px) {
    .order-detail-scope .page-header, 
    .order-detail-scope .order-header-info, 
    .order-detail-scope .content-card {
        padding: 15px;
    }
    .order-detail-scope .card-title {
        font-size: 1.1rem;
    }
    .order-detail-scope .order-actions {
        flex-direction: column;
        gap: 10px;
    }
    .order-detail-scope .action-button {
        width: 100%;
        justify-content: center;
    }
     .order-detail-scope .reason-modal {
        width: 95%;
        padding:15px;
    }
    .order-detail-scope .reason-modal-header {
        margin: -15px -15px 0 -15px;
    }
}
/* General Page Structure */
:root {
    --primary-color: #ff8306; 
    --primary-color-darker: #e07300;
    --grid-header-text-color: #ffffff;
    --input-border-color: #ced4da;
    --input-focus-border-color: #ffaa5c; 
    --input-focus-box-shadow: 0 0 0 0.2rem rgba(255, 131, 6, 0.25);
    --card-bg-color: #ffffff;
    --page-bg-color: #f4f6f8;
    --text-color: #333;
    --label-color: #454545;
    --border-radius: 8px;
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  }
  
  .page-container { /* Applied to the root div of the component */
    display: flex;
    flex-direction: column; /* For overall structure if Header is part of it */
  }
  
  .main-content-area { /* Applied to the div wrapping header and content-area-wrapper */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  
  .content-area-wrapper {
    background-color: var(--page-bg-color);
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center; 
  }
  
  .back-arrow-container {
    width: 100%;
    max-width: 1200px; /* Max width for content consistency */
    margin-bottom: 15px;
    padding-left: 5px; 
  }
  
  .back-arrow-icon {
    height: 36px !important;
    width: 36px !important;
    color: #555 !important;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .back-arrow-icon:hover {
    color: var(--primary-color) !important;
  }
  
  /* Main Content Card */
  .page-content-card {
    background: var(--card-bg-color);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    width: 100%;
    max-width: 1200px; /* Consistent max width */
  }
  
  /* FAQ Add Section */
  .add-faq-section {
    margin-bottom: 30px;
    padding: 20px;
    /* background: rgba(255, 131, 6, 0.05); /* Light orange tint */
    /* border: 1px solid rgba(255, 131, 6, 0.2); */
    border-radius: var(--border-radius);
  }
  .highlight-section { /* The orange bordered box */
      background:rgb(182 117 8 / 10%) !important; /* Lighter orange */
      border-radius: var(--border-radius);
      border:1px solid #ffc994 !important; /* Softer orange border */
      padding:20px !important;
      margin-bottom:25px !important;
  }
  
  
  /* Form Elements */
  .form-group {
    margin-bottom: 1rem;
  }
  .form-label {
    display: block;
    margin-bottom: .5rem;
    font-weight: 500;
    color: var(--label-color);
  }
  .form-input-field, 
  .filterlist .k-input-inner /* Kendo filter inputs */ {
    display: block;
    width: 100%;
    padding: .575rem .75rem; /* Adjusted padding */
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--input-border-color);
    appearance: none;
    border-radius: .35rem; /* Slightly smaller radius */
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    min-height: calc(1.5em + 1.15rem + 2px); /* Consistent height for inputs and textareas */
  }
  .form-input-field:focus,
  .filterlist .k-input-inner:focus {
    color: var(--text-color);
    background-color: #fff;
    border-color: var(--input-focus-border-color);
    outline: 0;
    box-shadow: var(--input-focus-box-shadow);
  }
  textarea.form-input-field {
    min-height: 80px; /* Specific for textareas */
  }
  
  /* Buttons */
  .form-actions {
    text-align: right; /* Default alignment */
  }
  .btn-icon {
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    font-size: 1.75rem; /* Larger icon for clickable area */
  }
  .btn-icon:hover {
    transform: scale(1.1);
  }
  .btn-save-faq {
    color: #28a745; /* Green for save */
  }
  .btn-save-faq:hover {
    color: #1e7e34; 
  }
  
  
  /* Filters Section */
  .filters-section {
      margin-bottom: 25px;
  }
  .filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
  }
  .filters-title {
    font-size: 1.2rem;
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: 3px;
    font-weight: bold;
  }
  .clear-filters-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: var(--primary-color); */
    color: white;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
  }
  .clear-filters-btn:hover {
    background: var(--primary-color-darker);
  }
  .clear-filters-btn svg {
    margin-right: 8px;
    font-size: 1.1em;
  }
  .filterlist {
    gap: 15px;
  }
  .filterlist .form-group {
      margin-bottom: 0; /* Remove bottom margin if directly in .filterlist.row */
  }
  
  
  /* Grid Styling */
  .grid-section {
      margin-top: 20px;
  }
  .custom-kendo-grid .k-grid-header {
    background-color: var(--primary-color) !important; 
  }
  .custom-kendo-grid .k-grid-header .k-header {
    font-weight: 600 !important;
    color: var(--grid-header-text-color) !important;
    border-bottom-width: 0 !important;
    border-left: 1px solid var(--primary-color-darker) !important; 
    padding: 0.75rem 1rem !important;
    text-align: left; /* Align header text to left */
  }
  .custom-kendo-grid .k-grid-header .k-header:first-child {
      border-left: none !important;
  }
  .custom-kendo-grid td {
      padding: 0.65rem 1rem !important; /* Increased padding for cells */
      font-size: 0.875rem;
      border-bottom: 1px solid #eee !important; 
  }
  .custom-kendo-grid .k-grid-norecords td div {
      padding: 20px;
      text-align: center;
      color: #777;
  }
  
  /* Grid Cell Input (from CellRendering component) */
  .grid-cell-input {
      width: 100%;
      padding: 6px 8px;
      border: 1px solid transparent; /* Transparent border initially */
      border-radius: 4px;
      box-sizing: border-box;
      transition: border-color 0.2s ease;
  }
  .grid-cell-input:focus {
      border-color: var(--primary-color);
      outline: none;
      background-color: #fff; /* Ensure background on focus */
  }
  .k-grid td:has(.grid-cell-input) { /* Remove padding from td if input has its own */
      padding: 0.25rem !important; 
  }
  
  
  /* Action Icons in Grid (from OperationRendering component) */
  .action-cell {
      text-align: center;
  }
  .action-cell .action-icon {
    cursor: pointer;
    font-size: 1.3em; /* Consistent size */
    margin: 0 5px;
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .action-icon.add-icon { color: #28a745; }
  .action-icon.add-icon:hover { color: #1e7e34; transform: scale(1.1); }
  .action-icon.save-icon { color: #5a6268; } /* Neutral color for save */
  .action-icon.save-icon:hover { color: #343a40; transform: scale(1.1); }
  .action-icon.delete-icon { color: #dc3545; }
  .action-icon.delete-icon:hover { color: #bd2130; transform: scale(1.1); }
  
  
  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .content-area-wrapper {
      padding: 10px;
    }
    .page-content-card {
      padding: 15px;
    }
    .add-faq-section {
      padding: 15px;
    }
    .add-faq-section .row .form-group.col-md-6 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .form-actions {
      text-align: center; /* Center button on small screens */
    }
    .btn-save-faq {
      width: auto; /* Allow button to size to content */
      padding: 10px 15px; /* Adjust padding */
    }
  
    .filters-header {
      flex-direction: column;
      align-items: stretch;
    }
    .filters-title {
      margin-bottom: 10px;
      align-self: flex-start;
    }
    .clear-filters-btn {
      width: 100%;
    }
    .filterlist .form-group.col-md-6 {
      flex: 0 0 100%;
      max-width: 100%;
    }
     .k-grid .k-grid-header .k-header, .k-grid td {
      padding: 0.5rem 0.65rem !important; /* Smaller padding in grid for mobile */
      font-size: 0.8rem; /* Smaller font for grid content on mobile */
    }
    .k-grid colgroup col { /* Attempt to make columns take less fixed space */
      min-width: 80px !important; 
    }
    .k-grid colgroup col[style*="width: 120px"] {
      min-width: 100px !important;
    }
  }
/* Suggested CSS to be added to brand.css or a new style sheet */

/* Main container for the page content below the header */
.content-wrapper-card {
    background-color: #f0f0fa; /* Light gray background */
    padding: 20px; /* Spacing for the card from edges */
    min-height: calc(90vh - 70px); /* Adjust 70px based on actual header height */
    box-sizing: border-box;
    width: 100%;
  }
  
  /* The main white card holding all content sections */
  .page-card {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    margin: 0; 
  }
  
  /* Styling for sections within the card */
  .add-user-section,
  .filters-section,
  .grid-section {
    margin-bottom: 30px;
  }
  .grid-section {
    margin-bottom: 10px; /* Less margin for the last section */
  }
  
  
  .add-user-section .col-12.d-flex.insertfaqcard {
    margin-bottom: 0px; /* Remove bottom margin if rows are directly stacked */
  }
  
  
  /* Input field styling */
  .registerinputs_user,
  .k-dropdownlist .k-input-inner, /* Kendo DropDownList input part */
  .filterlist .k-input-inner,
  .grid-cell-input,
  .grid-cell-dropdown .k-input-inner /* Kendo DropDownList in grid */ {
    background-color: #ffffff !important; 
    border: 1px solid #ced4da !important; 
    border-radius: 8px !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
    width: 100%; 
    color: #495057 !important; 
    font-size: 0.95rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: auto !important; /* Let padding define height */
    line-height: normal !important; /* Ensure proper line height */
  }
  
  /* Ensure Kendo DropDownList wrapper also has a nice radius and consistent height */
  .k-dropdownlist,
  .k-picker, /* General Kendo picker class */
  .grid-cell-dropdown .k-dropdownlist,
  .grid-cell-dropdown .k-picker {
    border-radius: 8px !important;
    width: 100% !important; /* Make dropdown take full width */
  }
  .k-dropdownlist .k-input-inner, 
  .k-picker .k-input-inner {
      padding-top: 10px !important; /* Align text vertically better in Kendo inputs */
      padding-bottom: 10px !important;
  }
  
  
  .registerinputs_user:focus,
  .k-dropdownlist .k-input-inner:focus,
  .filterlist .k-input-inner:focus,
  .grid-cell-input:focus,
  .grid-cell-dropdown .k-input-inner:focus {
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
  }
  
  
  /* Specific styling for input groups in add user section */
  .registeruser {
    padding-right: 8px; /* Adjusted padding */
    padding-left: 8px;  /* Adjusted padding */
    margin-bottom: 18px; 
  }
  
  .registeruser .username {
    margin-bottom: 8px; 
    font-weight: 500; 
    color: #333;
    font-size: 0.9rem;
    display: block; /* Ensure it takes full width for alignment */
  }

  div.user span.k-dropdownlist.k-picker.k-picker-md.k-rounded-md.k-picker-solid{
    height: 38px !important;
  }
  .registeruser .k-input-inner, .k-picker .k-input-inner{
    border: none !important;
  }
  
  /* Styling for the orange bordered section */
  .highlight-section {
    background: rgba(255, 165, 0, 0.08); /* Lighter orange */
    border-radius: 10px;
    border: 1px solid #fed8b1; /* Softer orange border */
    padding: 20px;
   /* margin-bottom: 25px; done by .add-user-section */
  }
  
  /* Filter section title and clear button */
  .filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
  }
  
  .filters-header > span:first-child { /* "filters" title */
    font-size: 1.2rem; /* Adjusted size */
    border-bottom: 3px solid #ff8306;
    padding-bottom: 4px;
    font-weight: bold;
    margin-bottom: 10px; /* For spacing when wrapped */
  }
  
  .clear-filters-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #ffa50e; */
    color: white;
    border-radius: 6px; /* Adjusted radius */
    padding: 9px 18px; /* Adjusted padding */
    font-size: 0.95rem; /* Adjusted size */
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
  }
  
  .clear-filters-btn:hover {
    background: #e09100;
  }
  
  .clear-filters-btn svg {
    margin-right: 8px;
    font-size: 1.1em; /* Slightly larger icon in button */
  }
  
  /* Filter input list */
  .filterlist {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px; 
    align-items: stretch; /* Align items to stretch vertically */
  }
  
  .filterlist > div { 
    flex-grow: 1; 
    flex-basis: 200px; /* Base width before growing/shrinking */
    display: flex; /* To make inputs inside take full height if needed */
    flex-direction: column; /* For label-like behavior if a span was above input */
  }
  .filterlist .k-input-inner {
     /* height is auto */
  }
  
  /* Password input with eye icon */
  .password-input-container {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .password-input-container .registerinputs_user {
    padding-right: 35px !important; /* Space for the icon */
  }
  
  .password-input-container svg { 
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #777;
    width: 18px; 
    height: 18px; 
  }
  
  
  /* Grid styling */
  .k-grid {
    border-radius: 8px !important; /* Kendo might override, use important if needed */
    overflow: hidden; 
    border: 1px solid #dee2e6 !important;
    width: 100% !important; /* Ensure grid takes full width */
  }
  .k-grid-header {
    background-color: #f8f9fa !important; 
  }
  .k-grid-header .k-header {
    border-width: 0 0 1px 0 !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 0 !important; /* Consistent padding */
  }
  .k-grid td {
      padding: 0.75rem 1rem !important; /* Consistent padding for cells */
      border-width: 0 0 1px 0 !important;
  }
  
  /* Balance Dialog Styles */
  .balance-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .balance-dialog {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .balance-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
  }
  
  .balance-dialog-header h4 {
    margin: 0;
    color: #333;
    font-size: 1.25rem;
    font-weight: 600;
  }
  
  .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
  }
  
  .close-btn:hover {
    background: #e9ecef;
    color: #333;
  }
  
  .balance-dialog-body {
    padding: 25px;
  }
  
  .user-info {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    border-left: 4px solid #007bff;
  }
  
  .user-info p {
    margin: 5px 0;
    color: #555;
  }
  
  .user-info strong {
    color: #333;
  }
  
  .balance-dialog-body .form-group {
    margin-bottom: 20px;
  }
  
  .balance-dialog-body label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
  }
  
  .balance-dialog-body input,
  .balance-dialog-body textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
    background-color: #ffffff !important;
    color: #333 !important;
  }
  
  .balance-dialog-body input:focus,
  .balance-dialog-body textarea:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    background-color: #ffffff !important;
    color: #333 !important;
  }
  
  .balance-dialog-body textarea {
    resize: vertical;
    min-height: 80px;
  }
  
  .balance-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 25px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
  }
  
  .balance-dialog-footer .btn {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .balance-dialog-footer .btn-secondary {
    background: #6c757d;
    color: white;
  }
  
  .balance-dialog-footer .btn-secondary:hover {
    background: #5a6268;
  }
  
  .balance-dialog-footer .btn-primary {
    background: #007bff;
    color: white;
  }
  
  .balance-dialog-footer .btn-primary:hover {
    background: #0056b3;
  }
  .k-grid-norecords td div {
      padding: 20px;
      text-align: center;
      color: #777;
  }
  
  
  /* Icon styling in operations */
  .k-grid td .d-flex svg {
    width: 20px; 
    height: 20px;
    margin: 0; 
    color: #555; /* Default color for grid icons */
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .k-grid td .d-flex svg:hover {
    transform: scale(1.1);
    color: #007bff; /* Highlight color on hover */
  }
  .k-grid td .d-flex svg[color*="rgb(22 126 61)"]:hover, /* For MdOutlineDataSaverOn */
  .k-grid td .d-flex svg[color*="rgb(71 70 69)"]:hover, /* For MdOutlineSaveAs */
  .k-grid td .d-flex svg[color*="#3c3c3c"]:hover { /* For MdOutlineDeleteOutline */
      color: inherit; /* Keep original hover color if defined by inline style or more specific rules */
  }
  
  
  /* Tooltip styling for icons - general */
  .tooltipbuttons svg {
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .tooltipbuttons svg:hover {
    transform: scale(1.1);
  }
  
  /* Back arrow tooltip specific icon styling */
  .back-arrow-icon { 
    height: 32px !important; 
    width: 32px !important;
    color: #555 !important; 
  }
  .back-arrow-icon:hover {
    color: #007bff !important; 
  }
  .btn-success{
    background-color: #198754 !important;
  }
  /* Register button in add user section */
  .register-button-container { 
      margin-top: 15px;
      display: flex; /* For alignment if needed */
      justify-content: flex-start; /* Or center, flex-end */
  }
  
  .register-button-container .tooltipbuttons svg { 
      height: 36px !important;
      width: 36px !important;
      color: #28a745 !important; 
  }
  .register-button-container .tooltipbuttons svg:hover {
      color: #218838 !important; 
      transform: scale(1.1);
  }
  
  
  /* Responsive adjustments */
  @media (max-width: 992px) { 
    .add-user-section .insertfaqcard .col-md-6 { /* Target md columns */
      flex: 0 0 100%; 
      max-width: 100%;
    }
    .registeruser {
      padding-right: 0;
      padding-left: 0;
    }
    .filterlist > div {
      flex-basis: calc(50% - 10px); /* Two filters per row, considering gap */
    }
  }
  
  @media (max-width: 768px) {
    .content-wrapper-card {
      padding: 10px;
    }
    .page-card {
      padding: 15px;
    }
    .highlight-section {
      padding: 15px;
    }
    .filters-header {
      flex-direction: column;
      align-items: stretch; /* Stretch items to full width */
    }
    .filters-header > span:first-child {
      margin-bottom: 15px; /* More space when title is above button */
      align-self: flex-start;
    }
    .clear-filters-btn {
      width: 100%; /* Full width button on small screens */
    }
    .filterlist > div {
      flex-basis: 100%; /* Stack filter inputs */
    }
    .registerinputs_user,
    .k-dropdownlist .k-input-inner,
    .filterlist .k-input-inner,
    .grid-cell-input,
    .grid-cell-dropdown .k-input-inner {
      padding: 9px 10px !important; /* Slightly smaller padding */
      font-size: 0.9rem !important;
    }
    .k-grid-header .k-header, .k-grid td {
      padding: 0  !important; /* Smaller padding in grid for mobile */
    }
  }
  
  @media (max-width: 576px) {
      .password-input-container .registerinputs_user {
          padding-right: 30px !important; /* Adjust for smaller screens if icons overlap */
      }
      .password-input-container svg {
          width: 16px;
          height: 16px;
          right: 8px;
      }
  }
/* General Page Structure */
:root {
  --primary-color: #ff8306; 
  --primary-color-darker: #e07300; 
  --grid-header-text-color: #ffffff; 
  --tab-active-text-color: var(--primary-color);
  --input-border-color: #ced4da;
  --input-focus-border-color: #ffaa5c; 
  --input-focus-box-shadow: 0 0 0 0.2rem rgba(255, 131, 6, 0.25);
}

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.content-area-wrapper {
  background-color: #f4f6f8;
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.back-arrow-container {
  width: 100%;
  max-width: 1100px;
  margin-bottom: 15px;
  padding-left: 5px;
}

.back-arrow-icon {
  height: 36px !important;
  width: 36px !important;
  color: #555 !important;
  cursor: pointer;
  transition: color 0.2s ease;
}
.back-arrow-icon:hover {
  color: var(--primary-color) !important;
}

/* Tab Navigation */
.tab-navigation-bar {
  display: flex;
  margin-bottom: 0;
  background-color: #fff;
  padding: 10px 20px 0 20px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: 0 -2px 5px -2px rgba(0,0,0,0.05);
  width: 100%;
  max-width: 1100px;
  border-bottom: 1px solid #dee2e6;
}

.tab-item {
  padding: 12px 20px; 
  cursor: pointer;
  font-weight: 500;
  color: #495057;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
  margin-right: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.tab-item:hover {
  color: var(--primary-color);
}

.tab-item.active-tab {
  color: var(--tab-active-text-color);
  border-bottom-color: var(--primary-color);
  font-weight: bold;
}

/* Tab Content Card */
.tab-content-card {
  display: block; 
  background: white;
  padding: 30px;
  border-radius: 8px;
  border-top-left-radius: 0; 
  border-top-right-radius: 0; 
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 1100px;
  min-height: 300px; 
}

/* Ensure content of second tab is visible */
.address-form-container {
  display: flex; 
  flex-direction: column;
  width: 100%;
}
.address-form-container > .col-12:first-child { 
    padding: 12px 0;
}


/* Store Name Tab Specifics */
.store-name-tab-content {
    display: flex;
    flex-direction: column;
}
.store-name-tab-content .store-name-section {
  align-items: center;
  margin-bottom: 20px; 
}
.store-svg-graphic {
    max-width: 100%;
    height: auto;
    opacity: 0.8;
}
.store-input-container .form-label.page-section-title {
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: #333;
}
.store-input-container .form-label-description {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 15px;
}
.store-input-container label.form-label {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 5px;
}


/* Form Elements Styling */
.form-row {
  margin-bottom: 10px;
}
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.form-label {
  font-size: 0.9rem;
  color: #343a40;
  margin-bottom: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.form-input-field {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.95rem;
  border: 1px solid var(--input-border-color);
  border-radius: 6px;
  background-color: #fff;
  color: #495057;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  height: 42px;
}

.form-input-field:focus {
  border-color: var(--input-focus-border-color);
  outline: 0;
  box-shadow: var(--input-focus-box-shadow);
}

.required-indicator {
  fill: #d10000;
  width: 6px !important;
  height: 6px !important;
  margin-left: 5px;
  vertical-align: super;
}

/* Buttons */
.form-actions {
  justify-content: flex-end;
  margin-top: 20px;
  display: flex; 
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.btn-primary.action-btn { /* For "Next Step" */
  color: #fff;
  background-color: var(--primary-color);
}
.btn-primary.action-btn:hover {
  background-color: var(--primary-color-darker);
}

.submit-btn.btn-save {
  color: #fff;
  background-color: var(--primary-color); 
}
.submit-btn.btn-save:hover {
  background-color: var(--primary-color-darker);
}
.submit-btn.btn-edit {
  color: #fff;
  background-color: #007bff; 
}
.submit-btn.btn-edit:hover {
  background-color: #0056b3;
}


/* Grid Styling */
.store-grid-section {
    margin-top: 30px;
}
.custom-kendo-grid .k-grid-header {
  background-color: var(--primary-color) !important; 
}
.custom-kendo-grid .k-grid-header .k-header {
  font-weight: 600 !important;
  color: var(--grid-header-text-color) !important;
  border-bottom-width: 0 !important; 
  border-left: 1px solid var(--primary-color-darker); 
}
.custom-kendo-grid .k-grid-header .k-header:first-child {
    border-left: none; 
}

.custom-kendo-grid td {
    padding: 0.65rem 0.75rem;
    font-size: 0.875rem;
    border-bottom: 1px solid #eee;
}
.custom-kendo-grid .k-grid-norecords td div {
    padding: 20px;
    text-align: center;
    color: #777;
}

/* Status and Action Icons in Grid */
.status-icon-active {
  color: green;
  font-size: 1.2em;
}
.status-icon-inactive {
  color: red;
  font-size: 1.2em;
}
.action-cell .action-icon {
  cursor: pointer;
  font-size: 1.3em;
  color: #007bff;
  transition: color 0.2s ease, transform 0.2s ease;
}
.action-cell .action-icon:hover {
  color: #0056b3;
  transform: scale(1.1);
}


/* Responsive Adjustments */
@media (max-width: 992px) {
  .store-name-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .store-graphic-container {
    margin-bottom: 20px;
  }
  .store-input-container {
    align-items: center;
  }
  .tab-navigation-bar {
    max-width: none; 
    border-radius: 8px 8px 0 0;
  }
  .tab-content-card {
    max-width: none;
    border-radius: 0 0 8px 8px;
    min-height: auto;
  }
  .content-area-wrapper {
      padding: 15px;
  }
}

@media (max-width: 768px) {
  .content-area-wrapper {
    padding: 10px;
  }
  .tab-content-card {
    padding: 20px;
  }
  .tab-item {
    padding: 10px 15px; 
    font-size: 0.85rem; 
    margin-right: 5px;
  }
  .form-row .form-group.col-md-6 { 
    flex: 0 0 100%;
    max-width: 100%;
  }
  .form-actions {
      justify-content: center;
  }
  .btn {
      width: 100%;
      max-width: 280px;
  }
  .store-input-container input.form-input-field {
      text-align: center;
  }
   .address-form-container .col-12.d-flex.shipcard,
   .address-form-container .col-12.d-flex.mt-3.shipcard {
      flex-direction: column;
   }
   .address-form-container .shipcard .col-6.px-2.shipcard,
   .address-form-container .shipcard .col-6.px-1.mt-2.shipcard,
   .address-form-container .shipcard .col-12.px-2.shipcard {
      flex: 0 0 100%;
      max-width: 100%;
      margin-top: 10px; 
      padding-left: 0 !important;
      padding-right: 0 !important;
   }
   .address-form-container .col-6.px-1.mt-2.shipcard input { 
        width: 100% !important;
   }
}

.shipcard .form-label svg.required-indicator {
  fill: #d10000;
  width: 6px !important;
  height: 6px !important;
  margin-left: 4px;
  vertical-align: super;
}

:root {
   --paypal-primary-color: #ff8306;
   --paypal-primary-color-darker: #e07000;
   --paypal-primary-color-lighter: #fff0e1;
   --paypal-primary-color-dashed: #ffc58a; 
   --paypal-card-bg: #ffffff;
   --paypal-page-bg: #f4f6f8; 
   --paypal-text-dark: #343a40;
   --paypal-text-light: #6c757d;
   --paypal-text-accent: var(--paypal-primary-color);
   --paypal-border-color: #dee2e6;
   --paypal-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   --paypal-border-radius: 12px; 
   --paypal-gold-ish: #ffc107; 
 }
 
 .paypal-page-container {
   display: flex;
   height: 100vh;
   overflow: hidden;
 }
 
 .app-sidebar {
   background-color: var(--paypal-card-bg);
   border-right: 1px solid var(--paypal-border-color);
   height: 100vh;
   overflow: hidden; 
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
 }
 .app-sidebar .app-menu-inner {
   flex-grow: 1;
   overflow-y: auto; 
   padding-bottom: 20px;
 }
 
 .app-main-content {
   background-color: var(--paypal-page-bg);
   flex-grow: 1;
   height: 100vh;
   overflow-y: auto; 
   display: flex;
   flex-direction: column;
 }
 
 .app-header {
   background-color: var(--paypal-card-bg);
   padding: 0.75rem 1.5rem;
   position: sticky;
   top: 0;
   z-index: 1020;
   box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
 .app-menu-toggler { color: var(--paypal-text-dark); }
 
 .app-page-content-scrollable {
   padding: 20px;
   flex-grow: 1;
 }
 @media (max-width: 767.98px) { .app-page-content-scrollable { padding: 15px; } }
 
 .page-back-button-container { margin-bottom: 1.5rem; }
 .page-back-icon {
   color: #333;
   height: 38px; width: 38px; cursor: pointer; transition: opacity 0.2s ease;
 }
 .page-back-icon:hover { opacity: 0.75; }
 
 .paypal-content-card, .paypal-grid-container-card {
   background: var(--paypal-card-bg);
   padding: 20px;
   box-shadow: var(--paypal-card-shadow);
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 .paypal-content-card { height: 100%; border-radius: 10px;} 
 .paypal-grid-container-card { padding: 0; overflow: hidden; } 
 .paypal-grid-container-card .walletgrid .k-grid-header .k-header { 
     background-color: var(--paypal-primary-color) !important;
     color: rgb(7, 7, 7) !important;
     border-color: var(--paypal-primary-color-darker) !important;
 }
 .paypal-grid-container-card .walletgrid .k-grid-header .k-header .k-link {
     color: #000 !important;
     text-align: center;
 }
 .paypal-grid-container-card .walletgrid .k-grid-header .k-header .k-link .k-column-title{
     text-align: center;
     width: 100%;
 }
 .paypal-grid-container-card .walletgrid .k-pager-wrap {
     border-radius: 0 !important;
     border-top: 1px solid var(--paypal-border-color) !important;
 }
 
 
 .paypal-card-title-text {
   font-size: 1.1rem; font-weight: 600; color: var(--paypal-text-dark); margin-bottom: 0.75rem;
 }
 .paypal-card-subtitle-text {
   font-size: 0.875rem; color: var(--paypal-text-light); margin-bottom: 1rem; line-height: 1.4;
 }
 .paypal-card-action-area { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
 
 .paypal-add-new-card-button {
   border: 2px dashed var(--paypal-primary-color-dashed) !important; 
   color: var(--paypal-primary-color) !important;
   background-color: var(--paypal-primary-color-lighter) !important;
   border-radius: 8px; padding: 20px; display: flex; flex-direction: column;
   align-items: center; justify-content: center; text-align: center;
   min-height: 150px; cursor: pointer; transition: all 0.2s ease-in-out; font-weight: 500;
 }
 .paypal-add-new-card-button:hover {
   background-color: #fff0e1 !important; border-color: var(--paypal-primary-color) !important;
   box-shadow: 0 2px 8px rgba(255, 131, 6, 0.2);
 }
 
 .paypal-displayed-card-info {
   background-color: #f8f9fa; border: 1px solid var(--paypal-border-color);
   border-radius: 8px; padding: 15px; position: relative; display: flex;
   flex-direction: column; gap: 12px;
 }
 .paypal-delete-icon {
   position: absolute; right: 10px; top: 10px; font-size: 1.3rem; color: #e74c3c; cursor: pointer;
 }
 .paypal-delete-icon:hover { color: #c0392b; }
 .paypal-detail-label { font-size: 0.75rem; color: var(--paypal-text-light); text-transform: uppercase; display: block; margin-bottom: 2px; }
 .paypal-detail-value { font-size: 0.95rem; color: var(--paypal-text-dark); font-weight: 500; }
 .paypal-card-inline-details { display: flex; justify-content: space-between; align-items: flex-start; }
 .card-type-detail { text-align: right; }
 .paypal-detail-value-icon { display: flex; align-items: center; justify-content: flex-end; }
 .vendor-icon { font-size: 1.8em; margin-right: 6px; }
 .vendor-icon.visa { color: #1a1f71; } .vendor-icon.mastercard { color: #eb001b; }
 
 .paypal-balance-display { text-align: center; margin: auto 0; padding: 1rem 0; }
 .paypal-balance-value-large { font-size: 2.75rem; color: var(--paypal-primary-color); font-weight: 700; line-height: 1; }
 .paypal-add-balance-button { 
   background: var(--paypal-primary-color); color: #fff; border-radius: 8px;
   padding: 12px 15px; display: flex; align-items: center; justify-content: center;
   text-align: center; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease;
   width: 100%; margin-top: 1rem;
 }
 .paypal-add-balance-button:hover { background-color: var(--paypal-primary-color-darker); }
 
 .btn-custom-action { 
   background-color: var(--paypal-primary-color); border-color: var(--paypal-primary-color);
   color: #fff; padding: 10px 20px; font-size: 1rem; border-radius: 8px;
   text-align: center; cursor: pointer; border: 1px solid var(--paypal-primary-color);
   font-weight: 500; transition: background-color 0.2s ease, border-color 0.2s ease;
   display: inline-flex; align-items: center; justify-content: center;
 }
 .btn-custom-action:hover {
   background-color: var(--paypal-primary-color-darker); border-color: var(--paypal-primary-color-darker);
 }
 .btn-custom-action .me-2 { margin-right: 0.5rem !important; }
 
 
 .paypal-searchbar-card {
   padding: 10px 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    margin-top: 1.5rem !important;
    border-radius: 50px;
    border: 1px solid #dedede;
 }
 .search-input-container {
   display: flex; align-items: center; background-color: #ffffff !important;
   border-radius: 50px !important; padding: 8px 15px !important;
   box-shadow: 0 2px 8px rgba(0,0,0,0.07); border: 1px solid var(--paypal-border-color);
   flex-grow: 1; 
 }
 .paypal-search-icon-style { color: #adb5bd !important; font-size: 1.25rem !important; margin-right: 10px !important; }
 .paypal-search-input-style {
   border: none !important; outline: none !important; box-shadow: none !important;
   flex-grow: 1; font-size: 0.95rem; padding: 0 !important;
   background-color: transparent !important; width: 100% !important;
 }
 .paypal-search-input-style::placeholder { color: #adb5bd; font-style: italic; }
 
 .pricing-card {
   background-color: var(--paypal-card-bg);
   border: 1px solid var(--paypal-border-color);
   border-radius: var(--paypal-border-radius);
   padding: 25px;
   display: flex;
   flex-direction: column;
   height: 100%;
   transition: all 0.3s ease;
   cursor: pointer;
   position: relative; 
   width: 80%;
 }
 .pricing-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(0,0,0,0.1);
 }
 .pricing-card.selected {
   border-width: 2px;
   box-shadow: 0 8px 25px rgba(0,0,0,0.12);

 }
 .pricing-card .pricing-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--paypal-border-color);
 }
 .pricing-card .pricing-title {
   font-size: 1.3rem;
   font-weight: 600;
   color: var(--paypal-text-dark);
   margin-bottom: 0;
 }
 .pricing-card .selected-icon {
   font-size: 1.5rem;
 }
 .pricing-card .pricing-price {
   font-size: 2rem;
   font-weight: 700;
   margin-bottom: 1.5rem;
   color: var(--paypal-text-dark);
 }
 .pricing-card .pricing-price .text-muted {
   font-size: 0.9rem;
   font-weight: 400;
 }
 .pricing-card .pricing-features {
   list-style: none;
   padding-left: 0;
   margin-bottom: 1.5rem;
   flex-grow: 1;
 }
 .pricing-card .pricing-features li {
   margin-bottom: 0.75rem;
   color: var(--paypal-text-light);
   font-size: 0.95rem;
   display: flex;
   align-items: center;
 }
 .pricing-card .pricing-features li::before { 
   content: '✓';
   color: var(--paypal-primary-color);
   margin-right: 10px;
   font-weight: bold;
 }
 .pricing-card .btn-select-plan { 
   border: 2px solid #333;
   background-color: transparent;
   color: var(--paypal-primary-color);
   padding: 10px 15px;
   border-radius: 8px;
   font-weight: 600;
   width: 100%;
   transition: all 0.2s ease;
   font-size: 0.95rem;
 }
 .pricing-card .btn-select-plan:hover:not(:disabled) {
   background-color:#333;
   color: #fff;
 }
 .pricing-card .btn-select-plan:disabled {
   background-color: #333;
   color: #fff;
   opacity: 1; 
   cursor: default;
 }
 
 .pricing-card.free-selected {
   border-color: var(--paypal-primary-color); 
 }
 .pricing-card.free-selected .selected-icon {
   color: var(--paypal-primary-color);
 }
 .pricing-card.free-idle {
    border-color: var(--paypal-border-color); 
 }
 
 
 .pricing-card.pro-plan {
   border-color: var(--paypal-gold-ish); 
 }
 .pricing-card.pro-plan .pricing-title {
   color: var(--paypal-primary-color);
 }
 .pricing-card.pro-plan .pricing-price {
   color: var(--paypal-primary-color);
 }
 .pricing-card.pro-plan .btn-select-plan.pro { 
   background-color: #333;
   color: #fff;
   border-color:#333;
 }
 .pricing-card.pro-plan .btn-select-plan.pro:hover:not(:disabled) {
   background-color: #333;
   border-color: #333;
 }
 .pricing-card.pro-selected { 
   border-color: var(--paypal-primary-color);
   box-shadow: 0 10px 30px rgba(255, 131, 6, 0.2);
 }
 .pricing-card.pro-selected .selected-icon.pro {
   color: var(--paypal-primary-color);
 }
 .pricing-card.pro-selected .btn-select-plan.pro:disabled { 
   background-color: #333 !important; 
   color: #fff !important;
   border-color: #333 !important;
 }
 .pro-badge {
   position: absolute;
   top: 20px;
   right: 20px;
   background-color:#333;
   color: #fff;
   padding: 5px 12px;
   font-size: 0.8rem;
   font-weight: 600;
   border-radius: 20px;
   box-shadow: 0 2px 5px rgba(0,0,0,0.15);
   display: flex;
   align-items: center;
 }
 
 
 .attractive-modal-backdrop {
   position: fixed; top: 0; left: 0; width: 100%; height: 100%;
   background-color: rgba(0, 0, 0, 0.65);
   display: flex; justify-content: center; align-items: center;
   z-index: 1050;
   opacity: 0; visibility: hidden;
   transition: opacity 0.25s ease-in-out;
 }
 .attractive-modal-backdrop.show { opacity: 1; visibility: visible; }
 .attractive-modal-content-wrapper {
   background-color: transparent; border-radius: 8px;
   width: 90%; max-width: 450px;
   transform: scale(0.95) translateY(-20px); opacity: 0;
   transition: transform 0.30s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.30s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 .attractive-modal-backdrop.show .attractive-modal-content-wrapper { transform: scale(1) translateY(0); opacity: 1; }
 
 .og-getinmoney-container {
   border-radius: 8px !important; overflow: hidden !important; border: none !important;
   width: 100% !important; background: #fff !important; box-shadow: 0 5px 20px rgba(0,0,0,0.1);
 }
 .og-modal-header {
   background-color: #f8f9fa !important; color: var(--paypal-text-dark) !important;
   padding: 1rem 1.5rem !important; border-bottom: 1px solid var(--paypal-border-color);
   display: flex !important; justify-content: space-between !important; align-items: center !important;
   border-top-left-radius: 8px; border-top-right-radius: 8px;
 }
 .og-modal-title { margin-bottom: 0; font-size: 1.1rem; font-weight: 500; color: var(--paypal-text-dark) !important; }
 .og-modal-close-icon {
   font-size: 1.2rem !important; color: var(--paypal-text-light) !important; cursor: pointer;
   background: none; border: none; padding: 0;
 }
 .og-modal-close-icon:hover { color: var(--paypal-text-dark) !important; }
 .og-modal-body { padding: 1.5rem !important; display: flex !important; flex-direction: column !important; gap: 1rem !important; }
 .og-modal-label { padding-bottom: 0.5rem; font-size: 0.9rem; color: var(--paypal-text-light); font-weight: 500; }
 .og-modal-input.form-control {
   border-radius: 6px !important; border: 1px solid #ced4da !important;
   padding: 0.65rem 1rem !important; font-size: 1rem !important;
 }
 .og-modal-footer {
   padding: 1rem 1.5rem !important; display: flex !important; justify-content: flex-end !important;
   border-top: 1px solid var(--paypal-border-color); background-color: #f8f9fa;
   border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
 }
 .og-modal-footer .btn-custom-action {
   background-color: var(--paypal-primary-color) !important;
   border-color: var(--paypal-primary-color) !important;
   color: #fff !important; padding: 0.5rem 1.25rem !important; font-size: 0.9rem !important;
   border-radius: 6px !important; font-weight: 500 !important; min-width: 100px !important;
 }
 .og-modal-footer .btn-custom-action:hover {
   background-color: var(--paypal-primary-color-darker) !important;
   border-color: var(--paypal-primary-color-darker) !important;
 }
 
 .k-pager.k-pager-md.k-grid-pager{
   border-radius: 0 !important;
 }

 /* Payment Loader Styles */
 .payment-loader-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1060;
   backdrop-filter: blur(2px);
 }
 .payment-loader-content {
   background-color: #fff;
   padding: 2rem;
   border-radius: 12px;
   text-align: center;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   min-width: 250px;
 }
 .payment-loader-content p {
   color: var(--paypal-text-dark);
   font-weight: 500;
   font-size: 1rem;
 }

 @media (max-width: 991.98px) {
   .paypelhead-cards-balance-row { flex-direction: column; }
   .paypelhead-cards-balance-row > .col-12 { 
     width: 100% !important; margin-bottom: 1.5rem;
   }
   .paypelhead-cards-balance-row > .col-12:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 767.98px) {
   .app-sidebar { display: none !important; }
   .app-header .app-menu-toggler { display: inline-block !important; }
   .app-page-content-scrollable { padding: 15px; }
 
   .paypal-content-card, .pricing-card,
   .og-modal-header, .og-modal-body, .og-modal-footer { padding: 15px !important; }
   .paypal-card-title-text, .pricing-title { font-size: 1.05rem; }
   .paypal-balance-value-large { font-size: 2.25rem; }
  
   .serachpaypal {
      flex-direction: column; gap: 1rem;
   }
   .filterpaypal, .searchinputpaypal { width: 100% !important; margin-right: 0 !important; }
   .pricing-card .btn-select-plan { font-size: 0.9rem; padding: 8px 12px; }
 }
/* === Styles for ShowAllCategory Page (showcategoryorderdetails.css) === */

.sacp-page {
    display: flex; 
    min-height: 100vh;
}

.sacp-page .menures {
    flex: 0 0 260px;
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: #fff; 
    border-right: 1px solid #e0e0e0; 
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
.sacp-page .menures .Logo { padding: 20px 15px; border-bottom: 1px solid #f0f0f0; }
.sacp-page .menures > div[name="mainmenu"] {
    flex-grow: 1;
    overflow-y: auto;
    /* padding: 10px 0; */
}


.sacp-main-area { 
    background-color: #f4f7f9; 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.sacp-main-area > #header { 
    position: sticky; 
    top: 0;
    z-index: 100; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}


.sacp-content-background {
    background-color: #f4f7f9 !important; 
    padding: 20px !important;
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}

.sacp-main-card {
    background: white !important;
    border-radius: 10px !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}
.sacp-main-card-content-wrapper { 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


.sacp-back-button-container {
    padding: 5px 0 !important;
    margin-bottom: 15px;
}
.sacp-back-button-container .tooltipbuttons svg { color: #007bff; transition: color 0.2s ease, transform 0.2s ease; }
.sacp-back-button-container .tooltipbuttons svg:hover { color: #0056b3; transform: scale(1.08); }

.sacp-filter-sort-area {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #e9edf0 !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
}

.sacp-filter-sort-area .k-filter {
    border: none !important;
    padding: 0 !important;
    flex-grow: 1;
    min-width: 220px; 
    margin-right: 15px;
}
.sacp-filter-sort-area .k-filter-toolbar .k-filter-item {
    border: 1px solid #d1d5db; 
    border-radius: 25px; 
    background-color: #fff;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.sacp-filter-sort-area .k-input-inner { 
    background-color: #eeeeee !important;
    border: none !important;
    padding: 9px 16px !important; 
    transition: box-shadow 0.2s ease;
    font-size: 0.9rem;
    color: #333;
}
.sacp-filter-sort-area .k-input-inner::placeholder { color: #999; }
.sacp-filter-sort-area .k-input-inner:focus {
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.2) !important; 
    
}
.sacp-filter-sort-area .k-toolbar-item{
    background-color: #fff;
}
.sacp-sort-label {
    margin-left: 0 !important;
    margin-right: 8px;
    color: #555e68;
    font-size: 0.9rem;
    font-weight: 500 !important;
    white-space: nowrap;
}

.sacp-filter-sort-area div:has(> .sacp-sorting-button) { 
    display: flex;
    align-items: center;
}
.sacp-sorting-button {
    background-color: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: 25px; 
    padding: 7px 11px; 
    margin-left: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sacp-sorting-button:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.sacp-sorting-button.selected {
    background-color: #007bff;
    border-color: #0062cc;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,123,255,0.3);
}
.sacp-sorting-button svg {
    font-size: 1rem;
}

.sacp-list-view {
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}
.k-listview-content{
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: flex-start;
}
.sacp-list-view ul.k-listview-content.k-list {
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: flex-start;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 -7.5px !important; 
    height: 100%; 
}
.sacp-list-view li.k-listview-item {
    padding: 0 7.5px 15px 7.5px !important; 
    border: none !important;
    background: none !important;
    display: flex !important; 
    align-items: stretch !important; 
}

.sacp-category-card {
    
    min-height: 220px; 
}
.sacp-card-inner-content:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
}
.sacp-card-inner-content {
    border: 1px solid #e5e7eb;
    border-radius: 8px; 
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); 
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0; 
}
.sacp-category-card img {
    width: 100% !important;
    height: 120px !important;
    object-fit: cover !important;
    background-color: #f0f2f5 !important;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0;
}

.sacp-card-text-wrapper {
    padding: 10px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sacp-card-title-text {
    font-size: 0.8rem !important; 
    color: #374151 !important; 
    font-weight: 500 !important;
    line-height: 1.3;
    margin-bottom: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.1em; 
}

.sacp-pager.k-listview-pager {
    margin-top: auto; 
    padding: 12px 0;
    background-color: #fff; 
    border-radius: 0 0 10px 10px;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.04);
    border-top: 1px solid #e9edf0;
    width: calc(100% + 48px); 
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px; 
    position: relative; 
}
.sacp-pager .k-button {
    border-radius: 6px; margin: 0 3px; border: 1px solid #d1d5db;
    background-color: #fff; color: #4b5563; padding: 5px 9px; font-size: 0.8rem;
}
.sacp-pager .k-button:hover { background-color: #f3f4f6; border-color: #9ca3af;}
.sacp-pager .k-button.k-selected { background-color: #007bff; color: white; border-color: #007bff; font-weight: 500;}
.sacp-pager .k-pager-info { color: #4b5563; font-size: 0.85rem; margin: 0 10px;}


@media (min-width: 1200px) { 
    .sacp-list-view li.k-listview-item { flex-basis: calc(16.666% - (15px * 5 / 6)); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sacp-list-view li.k-listview-item { flex-basis: calc(20% - (15px * 4 / 5)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .sacp-list-view li.k-listview-item { flex-basis: calc(25% - (15px * 3 / 4)); }
    .sacp-category-card { min-height: 200px; }
    .sacp-category-card img { height: 100px !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) { 
    .sacp-content-background { padding: 15px !important; }
    .sacp-main-card { /* padding: 1rem !important; */ }
    .sacp-filter-sort-area { flex-direction: column; align-items: stretch; }
    .sacp-filter-sort-area .k-filter { margin-right: 0; margin-bottom: 15px; }
    .sacp-filter-sort-area .sacp-sort-label { text-align: left; margin-bottom: 8px; }
    .sacp-filter-sort-area .sacp-sorting-button { margin-bottom: 8px; width: auto; }

    .sacp-list-view li.k-listview-item { flex-basis: calc(33.333% - (15px * 2 / 3)); }
    .sacp-category-card { min-height: 190px; }
    .sacp-category-card img { height: 90px !important; }
    .sacp-card-title-text { font-size: 0.75rem !important; }
}
@media (max-width: 575.98px) { 
    .sacp-content-background { padding: 10px !important; }
    .sacp-main-card { /* padding: 0.75rem !important; */ }

    .sacp-filter-sort-area > span.sacp-sort-label + div { display: flex; justify-content: flex-start; gap: 6px;}
    .sacp-filter-sort-area .sacp-sorting-button { width: auto; margin-left:0; margin-right: 6px; }


    .sacp-list-view li.k-listview-item { flex-basis: calc(50% - (15px * 1 / 2)); }
    .sacp-category-card { min-height: 180px; }
    .sacp-category-card img { height: 80px !important; }
    .sacp-pager.k-listview-pager {
        flex-direction: column; gap: 10px;
        width: calc(100% + YOUR_P4_PADDING_X_2_XS_SCREENS) !important;
        margin-left: -YOUR_P4_PADDING_XS_SCREENS !important;
        margin-right: -YOUR_P4_PADDING_XS_SCREENS !important;
        margin-bottom: -YOUR_P4_PADDING_XS_SCREENS !important;
    }
}

.showcategoryorder   .k-toolbar{
width: 100% !important;
}
.showcategoryorder    .k-filter .k-filter-toolbar{
width: 100% !important;
}
.showcategoryorder   .k-filter .k-filter-toolbar .k-toolbar-item{
    width: 100%;
}
.showcategoryorder   .k-filter .k-filter-toolbar .k-toolbar-item .k-textbox{
    width: 100%;
}
.showcategoryorder   .k-filter .k-filter-toolbar .k-toolbar-item .k-textbox .k-input-inner{
    width: 100%;
}
.showcategoryorder   .k-toolbar-button{
    display: none;
}
.showcategoryorder   .k-filter-container{
    margin-block-end: 0 !important;
}


.menures {
    height: 100vh;
    position: sticky; 
    top: 0;
    overflow-y: hidden; 

}
.menures > div[name="mainmenu"] {
    flex-grow: 1;
    overflow-y: auto;
}
.menures .Logo {
    padding: 15px;
    text-align: center;
}

/* General Page Structure - Adapted from OrderDetail styling */
.my-product-scope .admin-page-layout {
    display: flex;
    min-height: 100vh;
    background-color: #f0f0fa;
}

.my-product-scope .sidebar-menu {
    width: 250px;
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    /* padding: 15px; */
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}
.my-product-scope .sidebar-menu .Logo {
    margin-bottom: 20px;
    text-align: center;
}
.my-product-scope .sidebar-menu .Logo img {
    max-width: 150px;
    height: auto;
}
.my-product-scope .dashboard-menu-container {
    flex-grow: 1;
    overflow-y: auto;
}

.my-product-scope .main-content-area {
    flex-grow: 1;
    /* padding: 20px; */
    overflow-y: auto;
    max-width: calc(100vw - 280px); /* Adjust if sidebar width changes */
}
.my-product-scope .main-content-area .content-wrapper{
    padding: 20px;
}
.my-product-scope .page-header-bar { /* Consistent with OrderDetail's header styling */
    background-color: #ffffff;
    padding: 15px 20px;
    margin-bottom: 20px;
    /* border-radius: 8px; */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.my-product-scope .content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.my-product-scope .action-bar-top {
    margin-bottom: 10px; /* Space for back button */
}

.my-product-scope .back-button-icon {
    font-size: 2.5rem;
    color: #333; /* Organizational color */
    cursor: pointer;
    transition: color 0.3s ease;
}
.my-product-scope .back-button-icon:hover {
    color: #333;
}
.k-grid-header, .k-grid-footer{
    padding-inline-end: 0 !important;
}
.my-product-scope .page-title-actions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 20px; */
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.my-product-scope .page-main-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-left: 15px;
}
.my-product-scope .header-action-buttons {
    display: flex;
    gap: 15px;
}
.my-product-scope .action-button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.my-product-scope .action-button.primary {
    background-color: #ff8306;
    color: white;
}
.my-product-scope .action-button.primary:hover {
    background-color: #e07000;
    box-shadow: 0 2px 8px rgba(255, 131, 6, 0.3);
}
.my-product-scope .action-button.secondary {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
}
.my-product-scope .action-button.secondary:hover {
    background-color: #e0e0e0;
}


.my-product-scope .content-card { /* General card style */
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid #eaeaea;
}

.my-product-scope .filter-grid-container {
    /* Uses .content-card style */
}

.my-product-scope .search-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}
.my-product-scope .search-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 50px; /* Make it pill-shaped */
    padding: 0 15px;
    background-color: #f8f9fa; /* Slightly different background */
    flex-grow: 1; /* Take available space */
    min-width: 250px;
}
.my-product-scope .search-input-wrapper .search-icon {
    font-size: 1.3rem;
    color: #777;
    margin-right: 10px;
}
.my-product-scope .search-input-field {
    width: 100%;
    height: 40px;
    border: none;
    outline: none;
    font-size: 1rem;
    background-color: transparent;
    color: #333;
}
.my-product-scope .filter-dropdowns-wrapper {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.my-product-scope .filter-select-container {
    position: relative;
    min-width: 180px; /* Minimum width for dropdowns */
}
.my-product-scope .filter-select {
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 10px;
    background-color: white;
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: #555;
}
.my-product-scope .filter-select:focus {
    border-color: #ff8306;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 131, 6, 0.2);
}
.my-product-scope .dropdown-arrow-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
    pointer-events: none; /* Allow click through to select */
    font-size: 1.5rem;
}

/* Kendo Grid Styling */
.my-product-scope .my-product-grid {
    border: none; /* Remove default Kendo Grid border if any */
}
.my-product-scope .my-product-grid .k-grid-header {
    background-color: #f8f9fa; /* Light header background */
}
.my-product-scope .my-product-grid .k-grid-header .k-header {
    border-color: #e0e0e0;
    color: #333;
    font-weight: 600;
    text-align: left;
    padding: 12px 10px;
}
.my-product-scope .my-product-grid .k-grid-content td {
    padding: 10px;
    border-color: #f0f0f0;
    vertical-align: middle;
}
.my-product-scope .my-product-grid .k-grid-content td.actions-cell {
    padding: 10px;
    border-color: #f0f0f0;
    vertical-align: middle;
    display: flex;
    align-items: center;
    height: 85px;
}
.my-product-scope .my-product-grid .k-grid-content td.actions-cell div{
    position: relative;
    /* top: -20%; */
}
.my-product-scope .k-grid-norecords > div { /* Styling for loader/no records */
    padding: 20px;
    text-align: center;
    color: #777;
}

.my-product-scope .design-preview-cell .image-container {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #f9f9f9;
    overflow: hidden;
}
.my-product-scope .design-preview-cell .image-container canvas,
.my-product-scope .design-preview-cell .image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.my-product-scope .product-details-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.my-product-scope .product-details-cell .product-title {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}
.my-product-scope .product-details-cell .product-meta {
    font-size: 0.8rem;
    color: #666;
}

.my-product-scope .actions-cell {
    text-align: center; /* Center icons */
}
.my-product-scope .actions-cell .action-icon {
    font-size: 1.6rem; /* Slightly larger icons */
    margin: 0 6px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}
.my-product-scope .actions-cell .action-icon:hover {
    transform: scale(1.1);
}
.my-product-scope .actions-cell .action-icon.edit { color: #ff8306; }
.my-product-scope .actions-cell .action-icon.copy { color: #007bff; }
.my-product-scope .actions-cell .action-icon.order { color: #28a745; }
.my-product-scope .actions-cell .action-icon.delete { color: #dc3545; }
.my-product-scope .actions-cell .action-icon.etsy { color: #f56400; } /* Etsy orange */
.my-product-scope .actions-cell .action-icon.shopify { color: #96bf48; } /* Shopify green */


/* Modal Windows (PublishProductWindow, PublishShopifyWindow) */
.my-product-scope .etsy-publish-window .k-window-titlebar,
.my-product-scope .shopify-publish-window .k-window-titlebar {
    background-color: #ff8306 !important;
    color: white !important;
    border-radius: 8px 8px 0 0 !important; /* Match card radius */
}
.my-product-scope .etsy-publish-window .k-window-titlebar .k-window-actions .k-button .k-icon,
.my-product-scope .shopify-publish-window .k-window-titlebar .k-window-actions .k-button .k-icon {
    color: white !important; /* Ensure close icon is white */
}

.my-product-scope .etsy-publish-window .k-window-content,
.my-product-scope .shopify-publish-window .k-window-content {
    padding: 20px !important;
    background-color: #fdfdfd;
    border-radius: 0 0 8px 8px !important;
}

.my-product-scope .modal-content-area {
    display: flex;
    flex-direction: column;
    gap: 18px; /* Space between form groups */
}
.my-product-scope .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.my-product-scope .form-group label {
    font-weight: 500;
    font-size: 0.9rem;
    color: #444;
}
.my-product-scope .form-control,
.my-product-scope .k-dropdownlist .k-input-inner { /* Style Kendo DropDownList input */
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 0.95rem;
    background-color: white;
    color: #333;
}
.my-product-scope .form-control:focus,
.my-product-scope .k-dropdownlist.k-focus .k-input-inner {
    border-color: #ff8306;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 131, 6, 0.2);
}
.my-product-scope .form-control-plaintext { /* For read-only fields */
    padding: 8px 0;
    font-size: 0.95rem;
    color: #333;
    background-color: transparent;
    border: none;
}
.my-product-scope .row-form-group {
    display: flex;
    gap: 15px;
}
.my-product-scope .row-form-group .form-group.column {
    flex: 1; /* Distribute space equally */
}
.my-product-scope .k-editor { /* Kendo Editor styling */
    border: 1px solid #ccc;
    border-radius: 4px;
}
.my-product-scope .k-editor .k-editor-toolbar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px 4px 0 0;
}
.my-product-scope .k-editor .k-editor-content {
    min-height: 150px; /* Ensure decent editing space */
    padding: 10px;
    background-color: white;
    border-radius: 0 0 4px 4px;
}

.my-product-scope .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
/* Modal action buttons already styled by .action-button.primary and .secondary */


/* Responsive Adjustments */
@media (max-width: 1200px) {
    .my-product-scope .main-content-area {
         max-width: 100vw; /* Full width when sidebar might be hidden or smaller */
    }
    .my-product-scope .search-filter-bar {
        flex-direction: column;
        align-items: stretch; /* Make items take full width */
    }
    .my-product-scope .filter-dropdowns-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    .my-product-scope .filter-select-container {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .my-product-scope .sidebar-menu {
        width: 220px; /* Smaller sidebar */
    }
    .my-product-scope .main-content-area {
         max-width: calc(100vw - 220px);
    }
    .my-product-scope .page-title-actions-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .my-product-scope .header-action-buttons {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .my-product-scope .sidebar-menu {
        display: none; /* Hide sidebar */
    }
    .my-product-scope .main-content-area {
        /* padding: 15px; */
        max-width: 100vw;
    }
    .my-product-scope .my-product-grid .k-grid-header .k-header,
    .my-product-scope .my-product-grid .k-grid-content td {
        font-size: 0.85rem; /* Smaller font in grid for mobile */
    }
    .my-product-scope .actions-cell .action-icon {
        font-size: 1.3rem;
        margin: 0 4px;
    }
    .my-product-scope .k-window { /* Kendo window responsive adjustments */
        width: 90vw !important;
        left: 5vw !important; 
        top: 5vh !important;
    }
    .my-product-scope .row-form-group {
        flex-direction: column; /* Stack form elements in modals */
    }
}

@media (max-width: 480px) {
    .my-product-scope .page-main-title {
        font-size: 1.5rem;
    }
    .my-product-scope .header-action-buttons {
        flex-direction: column;
        gap: 10px;
    }
    .my-product-scope .action-button {
        width: 100%;
        justify-content: center;
    }
    .my-product-scope .actions-cell {
        display: flex; /* Allow wrapping of icons if needed */
        flex-wrap: wrap;
        justify-content: center;
    }
    .my-product-scope .etsy-publish-window .k-editor-content,
    .my-product-scope .shopify-publish-window .k-editor-content {
        min-height: 100px;
    }
}



.menures {
    height: 100vh; 
    position: sticky; 
    top: 0; 
    overflow-y: hidden;

}
.menures > div[name="mainmenu"] {
    flex-grow: 1; 
    overflow-y: auto;
}
.menures .Logo {
    padding: 15px;
    text-align: center;
}


/* Root Scope for MyFavority Page */
.my-favority-scope {
    /* Base font and box-sizing for the component scope */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    box-sizing: border-box;
}

.my-favority-scope *,
.my-favority-scope *::before,
.my-favority-scope *::after {
    box-sizing: inherit;
}

/*
SECTION: Overall Page Layout
Minimal styling here to avoid conflicts with global/existing styles for menu and header.
These primarily ensure the basic flex structure.
If your menu and header are styled globally, you might not even need these
scoped versions or they might need to be even more minimal.
*/
.my-favority-scope .admin-page-layout {
    display: flex;
    min-height: 100vh;
    background-color: #f0f0fa; /* Main background for the content area of the page */
}

.my-favority-scope .sidebar-menu {
    /* Assuming width and core styles come from global CSS or an existing file. */
    /* We just ensure it's part of the flex layout. */
    flex-shrink: 0; /* Prevent sidebar from shrinking */
    /* Example fixed width if not globally set: width: 280px; */
    /* background-color: #ffffff; */ /* Potentially from global styles */
    /* border-right: 1px solid #e0e0e0; */ /* Potentially from global styles */
}

.my-favority-scope .main-content-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.headerfavorites .k-filter .k-filter-container{
    margin-block-end: 0 !important;
}
.headerfavorites .k-filter{
   width: 100% !important;
}
.headerfavorites .k-filter .k-filter-toolbar{
   width: 100% !important;
}
.headerfavorites .k-filter .k-filter-value{
    width: 50%;
}
.headerfavorites .k-filter .k-filter-value .k-textbox {
    width: 100%;
}
.headerfavorites .k-filter .k-filter-toolbar .k-toolbar{
   width: 100% !important;
}
.my-favority-scope  .spancardshowallcat{
    margin: 0 !important;
    height: 30px  !important;
    padding: 0px 10px !important;
}
.my-favority-scope .page-header-bar {
    /* Assuming height, padding, background come from global CSS or an existing file. */
    /* We just ensure it's part of the flex layout if needed. */
    flex-shrink: 0; /* Prevent header from shrinking */
    /* background-color: #ffffff; */ /* Potentially from global styles */
    /* padding: 15px 20px; */ /* Potentially from global styles */
    /* margin-bottom: 20px; */ /* This margin might be specific to content layout */
    /* border-radius: 8px; */ /* Potentially from global styles */
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.05); */ /* Potentially from global styles */
}

/*
SECTION: Content Wrapper unique to MyFavority page
Styles from here downwards are for the specific content of the MyFavority page.
*/
.my-favority-scope .content-wrapper {
    padding: 20px; /* Padding for the main content area of this specific page */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.my-favority-scope .action-bar-top {
    /* For elements like the back button, if needed at the top of content-wrapper */
    margin-bottom: 0px; /* Reduced from 10px, can be adjusted */
}
.my-favority-scope .back-button-icon {
    font-size: 2.5rem;
    color: #ff8306; /* Organizational color */
    cursor: pointer;
    transition: color 0.3s ease;
}
.my-favority-scope .back-button-icon:hover {
    color: #e07000;
}

.my-favority-scope .page-title-actions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    /* Removed margin-bottom, spacing handled by content-wrapper gap */
}
.my-favority-scope .page-main-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
}

.my-favority-scope .content-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid #eaeaea;
}

.my-favority-scope .controls-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 10px; /* Reduced padding from original card padding */
    /* border-bottom: 1px solid #eee; */ /* This was inside the card, now card has its own padding */
}

.my-favority-scope .product-filter-component {
    flex-grow: 1; /* Allow filter to take space */
    min-width: 250px; /* Minimum width for filter input section */
}
.my-favority-scope .product-filter-component .k-filter {
    border: none;
    padding: 0;
    display: flex; /* Ensure items are in a row */
}
.my-favority-scope .product-filter-component .k-filter-field {
    flex-grow: 1; /* Input takes available space */
}
.my-favority-scope .product-filter-component .k-textbox,
.my-favority-scope .product-filter-component .k-input-inner {
    height: 40px;
    border-radius: 4px !important;
    border: 1px solid #ccc !important;
    padding: 0 10px !important;
    font-size: 0.9rem;
}
.my-favority-scope .product-filter-component .k-textbox:focus,
.my-favority-scope .product-filter-component .k-input-inner:focus {
    border-color: #ff8306 !important;
    box-shadow: 0 0 0 2px rgba(255, 131, 6, 0.2) !important;
}
.my-favority-scope .product-filter-component .k-button { /* Kendo Filter's own button */
    height: 40px;
    border-radius: 4px;
    margin-left: 8px;
    background-color: #f0f0f0;
    border-color: #ccc;
    color: #333;
}
.my-favority-scope .product-filter-component .k-button:hover {
    background-color: #e0e0e0;
}


.my-favority-scope .sort-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0; /* Prevent shrinking */
}
.my-favority-scope .sort-label {
    font-size: 0.9rem;
    color: #555;
    font-weight: 500;
    white-space: nowrap;
}
.my-favority-scope .sort-button {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}
.my-favority-scope .sort-button:hover {
    background-color: #e0e0e0;
    border-color: #bbb;
}
.my-favority-scope .sort-button.active {
    background-color: #ff8306;
    color: white;
    border-color: #ff8306;
}
.my-favority-scope .sort-button svg {
    font-size: 1em;
}

/* ListView Styling */
.my-favority-scope .product-list-view {
    display: flex; /* Changed to flex for better control over wrapping and spacing */
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    list-style-type: none;
    justify-content: flex-start; /* Align items to the start */
}

.my-favority-scope .product-card-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    /* Flex basis for responsive columns, accounting for gap */
    flex-basis: calc(25% - 15.01px); /* 4 columns: 100%/4 - (3/4 * gap) */
    min-width: 220px; /* Minimum card width before wrapping */
    max-width: calc(25% - 15.01px);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
}
.my-favority-scope .product-card-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.my-favority-scope .product-image-container {
    width: 100%;
    padding-top: 75%; /* Aspect ratio 4:3 for image container */
    position: relative;
    background-color: #f8f9fa;
}
.my-favority-scope .product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed to contain to see full image */
    padding: 5px; /* Small padding around image inside container */
}
.my-favority-scope .favorite-icon-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 36px; /* Fixed size */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s ease;
}
.my-favority-scope .favorite-icon-wrapper:hover {
    background-color: rgba(255, 255, 255, 1);
}
.my-favority-scope .favorite-icon {
    font-size: 1.6rem; /* Adjusted size */
    display: block;
    color: #aaa;
}
.my-favority-scope .favorite-icon.favorited {
    color: #ff8306;
}

.my-favority-scope .product-info {
    padding: 12px 15px; /* Adjusted padding */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.my-favority-scope .product-name {
    font-size: 1.05rem; /* Slightly adjusted */
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.my-favority-scope .product-category,
.my-favority-scope .product-brand {
    font-size: 0.8rem; /* Slightly smaller */
    color: #777; /* Lighter color */
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-favority-scope .product-meta {
    font-size: 0.75rem; /* Smaller meta text */
    color: #888;
    display: flex;
    gap: 6px;
    align-items: center;
}
.my-favority-scope .product-color-swatches {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    align-items: center;
    height: 18px; /* Fixed height for swatch row */
}
.my-favority-scope .color-swatch {
    width: 18px; /* Larger swatches */
    height: 18px;
    border-radius: 50%;
    border: 1px solid #eee;
    display: inline-block;
}
.my-favority-scope .more-swatches {
    font-size: 0.75rem;
    color: #777;
    line-height: 18px; /* Align with swatches */
}

.my-favority-scope .loader-container-fullpage {
    display: flex;
    flex-direction: column; /* For text below loader */
    justify-content: center;
    align-items: center;
    padding: 50px;
    min-height: 300px;
    width: 100%; /* Take full width of its container */
}
.my-favority-scope .no-results-message {
    text-align: center;
    padding: 50px;
    color: #777;
    font-size: 1.1rem;
    min-height: 200px;
    width: 100%;
}

.my-favority-scope .kendo-pager-bottom {
    margin-top: 25px;
    padding: 15px 0; /* Remove horizontal padding if card has it */
    border-top: 1px solid #eee;
    width: 100%; /* Ensure pager takes full width */
}
.my-favority-scope .kendo-pager-bottom .k-pager-numbers .k-button.k-selected {
    background-color: #ff8306;
    color: white;
    border-color: #ff8306;
}
.my-favority-scope .kendo-pager-bottom .k-button:hover {
    border-color: #ff8306;
    color: #ff8306;
}

/* Responsive Adjustments */
@media (max-width: 1300px) { /* Adjusted breakpoint for 4->3 columns */
    .my-favority-scope .product-card-item {
        flex-basis: calc(33.333% - 13.34px); /* 3 columns: 100%/3 - (2/3 * gap) */
        max-width: calc(33.333% - 13.34px);
    }
}

@media (max-width: 992px) {
    .my-favority-scope .sidebar-menu {
        /* Example: width: 220px; or display: none; for a toggleable menu */
    }
    .my-favority-scope .main-content-area {
        /* max-width: calc(100vw - (new sidebar width or 0)); */
    }
    .my-favority-scope .product-card-item {
        flex-basis: calc(50% - 10px); /* 2 columns: 100%/2 - (1/2 * gap) */
        max-width: calc(50% - 10px);
    }
    .my-favority-scope .controls-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .my-favority-scope .product-filter-component {
        width: 100%;
    }
    .my-favority-scope .sort-controls {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .my-favority-scope .sidebar-menu {
        display: none; /* Common pattern for mobile */
    }
    .my-favority-scope .main-content-area {
        padding: 15px; /* Reduced padding for smaller screens */
        max-width: 100vw;
    }
    .my-favority-scope .page-title-actions-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 576px) { /* Adjusted breakpoint for 2->1 column */
    .my-favority-scope .product-card-item {
        flex-basis: 100%; /* 1 column */
        max-width: 100%;
        min-width: unset; /* Allow it to be smaller than 220px if needed */
    }
    .my-favority-scope .page-main-title {
        font-size: 1.4rem;
    }
     .my-favority-scope .sort-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .my-favority-scope .sort-button {
        justify-content: center;
    }
}

.showproductorder > div:last-child > div:nth-child(2) {
    max-width: 1400px; 
    width: 100%; 
    box-sizing: border-box; 
    background-color: #ffffff; 
}
.showproductorder  .k-toolbar{
width: 100% !important;
}
.showproductorder  .k-filter .k-filter-toolbar{
width: 100% !important;
}
.showproductorder  .k-filter .k-filter-toolbar .k-toolbar-item{
    width: 100%;
}
.showproductorder  .k-filter .k-filter-toolbar .k-toolbar-item .k-textbox{
    width: 100%;
}
.showproductorder  .k-filter .k-filter-toolbar .k-toolbar-item .k-textbox .k-input-inner{
    width: 100%;
}
.showproductorder  .k-toolbar-button{
    display: none;
}
.showproductorder  .k-filter-container{
    margin-block-end: 0 !important;
}

.divcardorderslist {
    background-color: #ffffff; 
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07); 
    margin: 10px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    box-sizing: border-box;
    padding: 15px; 
    margin: 0;
}
.divcardorderslist .spancardshowallcat{
    padding: 5px 10px !important;
    text-align: left !important;
    justify-content: start !important;
}
.divcardorderslist:hover {
    transform: translateY(-5px); 
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); 
}

.col-12.divlistprocat {
    display: flex;
    flex-wrap: wrap; 
    justify-content: flex-start; 
    gap: 20px; 
}

.divlistprocat > div:last-child { 
    flex: 1; 
    display: flex;
    flex-direction: column;
}

.k-listview-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; 
    gap: 20px; 
    padding: 0; 
    width: 100%;
}

.divcardorderslist {
    width: calc(33.33% - 20px); 
}
.divlistprocat .k-slider-horizontal{
    width: 100% !important;
}
.listprocat .k-pager {
    width: 100% !important;
}




input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    padding: 12px 15px;
    /* margin-bottom: 15px; */
    border: 1px solid #e0e0e0; 
    border-radius: 8px; 
    outline: none; 
    box-sizing: border-box;
    font-size: 1rem;
    background-color: #f8f8f8; 
    color: #333; 
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    border-color: #ff8306; 
    box-shadow: 0 0 8px rgba(255, 131, 6, 0.3);
}

input::placeholder,
textarea::placeholder {
    color: #a0a0a0; 
}

.col-12.d-flex[style*="border"] { 
    /* border: 1px solid #ccc;
    height: 50px;
    border-radius: 30px;  */
    background: #f7f7f7;
    margin-bottom: 5px; 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); 
}

.col-12.d-flex[style*="border"] span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 5%;
    min-width: 40px; 
    color: #555; 
}

.col-12.d-flex[style*="border"] svg { 
    font-size: 1.5rem !important; 
    color: #333; 
}
.accordion {
    border: 1px solid #eee; 
    border-radius: 8px;
    margin-bottom: 15px; 
    overflow: hidden; 
}

.accordion-header {
    background-color: #f7f7f7; 
    color: #333;
    cursor: pointer;
    padding: 15px 20px; 
    width: 100%;
    border: none;
    text-align: right; 
    outline: none;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem; 
    font-weight: bold; 
}

.accordion-header:hover {
    background-color: #e9e9e9; 
}

.accordion-header .arrow {
    transition: transform 0.3s ease;
    fill: #555; 
    width: 18px; 
    height: 18px;
}

.accordion-body.active + .accordion-header .arrow { 
     transform: rotate(180deg);
}
.accordion-header .arrow.rotated {
    transform: rotate(180deg);
}


.accordion-body {
    padding: 0 20px;
    background-color: white;
    overflow: hidden;
    max-height: 0; 
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; 
}

.accordion-body.active {
    max-height: 500px; 
    padding: 15px;
    overflow: auto;
    scrollbar-width: thin;
}

.accordion-body input[type="checkbox"],
.accordion-body input[type="radio"] {
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc; 
    border-radius: 4px; 
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    transition: all 0.2s ease;
}

.accordion-body input[type="checkbox"]:checked {
    background-color: #ff8306; 
    border-color: #ff8306;
}
.accordion-body input[type="checkbox"]:checked::before {
    content: '\2713'; 
    display: block;
    color: white;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
}

.accordion-body input[type="radio"] {
    border-radius: 50%; 
}

.accordion-body input[type="radio"]:checked {
    background-color: #ff8306; 
    border-color: #ff8306;
}

.accordion-body input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.accordion-body span {
    margin-right: 10px;
    font-size: 0.95rem;
    color: #444;
}

.accordion-body.color > div span[style*="background"] { 
    border: 2px solid #ccc; 
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.accordion-body.color > div span[style*="background"]:hover {
    border-color: #ff8306; 
    box-shadow: 0 0 5px rgba(255, 131, 6, 0.4);
}

#check[id^="check"] { 
    color: white;
    font-size: 20px; 
    position: relative;
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    pointer-events: none; 
}

.accordion-body.color input[type="checkbox"] { 
    display: block;
    width: 100%;
    height: 100%;
}

.hearticon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.8rem; 
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 10; 
}

.hearticon svg { 
    color: #888; 
}

.hearticon svg[color="red"] { 
    color: red;
    transform: scale(1.1); 
}

.hearticon svg:hover {
    transform: scale(1.2); 
}

.tooltipbuttons svg {
    color: #ff8306; 
    transition: transform 0.2s ease, color 0.2s ease;
}

.tooltipbuttons svg:hover {
    transform: scale(1.1);
    color: #e67500; 
}
.titleimglistpro,
.titleimglistpro1,
.titleimglistpro2,
.titleimglistpro3 {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: bold;
    z-index: 5; 
}

.titleimglistpro { background-color: #007bff;  }
.titleimglistpro1 { background-color: #ff8306; }
.titleimglistpro2 { background-color: #28a745; }
.titleimglistpro3 { background-color: #6f42c1; }

.divcardorderslist img {
    width: 100%;
    height: 200px;
    display: block;
    object-fit: contain;
    background: #f7f7f7;
    border-radius: 8px; 
}
.showproductorder > div:last-child > div:last-child > .col-12.divlistprocat:last-of-type { 
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-top: 30px; 
}

.showproductorder > div:last-child > div:last-child > span[style*="font-size: 1.5rem"] { 
    color: #ff8306; 
    text-align: center;
    width: 100%;
    margin-bottom: 20px !important; 
    padding-bottom: 10px;
    border-bottom: 2px solid #eee; 
}

.accordion-body p {
    color: #555 !important; 
    line-height: 1.6;
}
.k-slider-wrap {
    margin: 20px 0;
    width: 100%;
}

.k-slider-track {
    background-color: #e0e0e0;
    height: 6px;
    border-radius: 3px;
}

.k-slider-selection {
    background-color: #ff8306;
}

.k-slider-handle {
    background-color: #ff8306; 
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.k-slider-labels li {
    color: #666;
    font-size: 0.85rem;
}
@media (max-width: 1200px) {
    .showproductorder > div:last-child > div:nth-child(2) {
        padding: 15px; 
    }

    .divcardorderslist {
        width: calc(33.333%) !important; 
    }

    .col-12.divlistprocat {
        justify-content: center; 
    }
}


@media (max-width: 992px) {
    .showproductorder .menures {
        border-right: none !important;
        border-bottom: 1px solid #ccc;
    }

    .showproductorder > div:last-child {
        width: 100% !important; 
        padding: 15px 0;
    }

    .divlistprocat {
        flex-direction: column; 
        align-items: center;
    }

    .divlistprocat > div { 
        width: 95% !important; 
        margin-bottom: 20px; 
    }

    .divcardorderslist {
        width: calc(50% - 20px); 
    }
}

@media (max-width: 768px) {
    .showproductorder > div:last-child > div:nth-child(2) {
        padding: 10px;
    }
    
    .divcardorderslist {
        width: calc(100% - 20px) !important;
    }

    .accordion-header {
        font-size: 1rem;
        padding: 12px 15px;
    }

    .accordion-body {
        padding: 10px 15px;
    }

    .hearticon {
        font-size: 1.5rem;
    }

    .tooltipbuttons svg {
        height: 30px !important;
        width: 30px !important;
    }

    .col-12.d-flex[style*="border"] {
        height: 45px;
    }

    .inputsearchmypro {
        font-size: 1rem; 
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    .showproductorder > div:last-child > div:nth-child(2) {
        padding: 5px;
    }
    .divcardorderslist {
        padding: 10px;
        /* margin-left: 5px;
        margin-right: 5px; */
    }
    .accordion-header {
        font-size: 0.9rem;
    }
    .accordion-body p {
        font-size: 0.85rem;
    }
}

.accordion-header{
    background: #ff9c38;
}
/* showcategoryorder.css */

/* --- General Layout and Containers --- */
.mylibrary {
    display: flex;
    min-height: 100vh;
    background-color: #f0f2f5;
  }
  
  .menures {
    flex-shrink: 0;
  }
  
  .page-content-wrapper {
    flex-grow: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px; 
  }
  
  /* --- Card Styles --- */
  .content-section-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 25px;
    /* Removed margin-bottom here as gap in page-content-wrapper handles spacing */
    border: 1px solid #e0e0e0;
  }
  
  /* --- Back Button --- */
  .back-button-icon {
    font-size: 36px;
    color: #ff8306; /* Organizational color */
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
  }
  
  .back-button-icon:hover {
    transform: scale(1.1);
  }
  
  /* --- Upload Design Button --- */
  .top-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
  }
  
  .upload-design-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 8px;
    background-color: #ff8306; /* Organizational color */
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  .upload-design-btn:hover {
    background-color: #e57605; /* Slightly darker for hover */
    transform: translateY(-2px);
  }
  
  .upload-design-btn svg {
    margin-right: 8px;
  }
  
  .upload-design-btn .button-text {
    font-weight: 600;
  }
  
  /* --- My Library List View --- */
  .mylibrary-listview {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between list items */
    justify-content: flex-start;
  }
  
  .card-item-wrapper {
    flex: 0 0 calc(20% - 20px);
    max-width: calc(20% - 20px);
    padding: 0;
    box-sizing: border-box;
  }
  
  .card-design-item {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .card-design-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  
  .card-design-image-container {
    width: 100%;
    height: 200px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  .card-design-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .card-design-actions {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
  }
  
  .create-btn-library {
    display: flex;
    gap: 15px;
  }
  
  .action-icon {
    font-size: 24px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
  }
  
  .edit-icon {
    color: #ff8306; /* Organizational color */
  }
  
  .edit-icon:hover {
    color: #e57605;
    transform: scale(1.1);
  }
  
  .delete-icon {
    color: #dc3545;
  }
  
  .delete-icon:hover {
    color: #c82333;
    transform: scale(1.1);
  }
  
  /* --- Modals (Upload and Create Card) --- */
  .modal-overlay {
    width: 100%;
    display: none;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.44);
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .modal-content {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    padding: 30px;
    position: relative;
    max-height: 90%;
    overflow-y: auto;
  }
  
  .modal-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f0f0f0;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .modal-close-button:hover {
    background-color: #e0e0e0;
  }
  
  .close-icon {
    color: #333;
    font-size: 20px;
  }
  
  .modal-close-button-lg {
    cursor: pointer;
    font-size: 20px;
    color: #333;
    transition: color 0.2s ease;
    background-color: #f1f1f1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #555;
  }
  
  .modal-close-button-lg:hover {
    color: #000;
  }
  
  
  /* Upload Modal Specific Styles */
  .upload-modal {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .modal-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
  }
  
  .file-input-wrapper {
    border: 1px solid #a8a8a8;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .browse-button {
    width: 35%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e0e0e0;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-weight: 600;
    border-right: 1px solid #a8a8a8;
  }
  
  .browse-button:hover {
    background-color: #d0d0d0;
  }
  
  .selected-file-display {
    flex-grow: 1;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .hidden-file-input {
    display: none !important;
  }
  
  /* Create Card Modal Specific Styles */
  .create-card-modal {
    width: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100% !important;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
  }
  
  .modal-header-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
  }
  
  .search-filter-bar {
    width: 100%;
    margin-bottom: 20px;
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 15px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
  }
  
  .search-input-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    background-color: #fefefe;
    height: 45px;
    padding: 0 10px;
  }
  
  .search-icon {
    color: #777;
    font-size: 20px;
    margin-right: 8px;
  }
  
  .search-product-input {
    border: none;
    width: calc(100% - 30px);
    height: 100%;
    font-size: 1rem;
    font-weight: 500;
    outline: none;
    background-color: transparent;
    color: #333;
  }
  
  .search-product-input::placeholder {
    color: #999;
  }
  
  .filter-dropdowns-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    flex-grow: 2;
    justify-content: flex-end;
  }
  
  .filter-dropdown-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    background-color: #fefefe;
    height: 45px;
    padding: 0 5px;
    flex-basis: calc(33.33% - 15px); /* Ensure width on larger screens */
    box-sizing: border-box;
  }
  
  .clear-filter-icon {
    /* background-color: #ff6347; */
    border-radius: 50%;
    cursor: pointer;
    width: 15px;
    height: 15px;
    color: rgb(5, 5, 5);
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
  }
  
  .clear-filter-icon:hover {
    background-color: #e55333;
  }
  
  /* Kendo Dropdown specific styles */
  .filter-dropdown .k-dropdown-wrap {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    width: 100%; /* Ensure the wrapper takes full available width */
  }
  
  .filter-dropdown .k-input {
    color: #333;
    width: 100%; /* Ensure input within dropdown takes full width */
  }
  
  /* This is the key for dropdown list width */
  .categoryfilter.k-popup {
    width: auto !important; /* Allow the popup to adjust its width based on content */
    min-width: 200px; /* Set a minimum width for readability */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    border: 1px solid #ddd;
  }
  
  
  /* Product List View */
  .product-list-view-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  
  .product-listview {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
  }
  
  .product-item-wrapper {
    flex: 0 0 calc(20% - 20px);
    max-width: calc(20% - 20px);
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
  }
  
  .card-product-item {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  
  .card-product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  
  .product-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 0.85em;
    font-weight: bold;
    z-index: 10;
  }
  
  .eco-friendly { background-color: #5d4fe4; }
  .best-seller { background-color: #e57605; }
  .new-arrivals { background-color: #d9c324; color: #333;}
  .all-over-prints { background-color: #9f4f2f; }
  
  .product-image-container {
    width: 100%;
    height: 200px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 5px;
  }
  
  .product-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .product-details {
    padding: 10px 15px 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
  }
  
  .detail-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    width: 100%;
  }
  
  .detail-icon {
    font-size: 18px;
    color: #777;
    margin-right: 8px;
    flex-shrink: 0;
  }
  
  .detail-text {
    font-size: 0.95em;
    font-family: "sarabun_bold", sans-serif;
    padding: 3px 0;
    display: flex;
    align-items: center;
    color: #555;
    flex-grow: 1;
  }
  
  .category-name { color: #222; }
  .product-name { color: #222; font-weight: bold; }
  .brand-name { color: #222; }
  .product-size { color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100% ;
  }
  
  .color-palette {
    display: flex;
    gap: 5px;
    margin-left: 5px;
  }
  
  .color-box {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 1px solid #ddd;
    flex-shrink: 0;
  }
  
  /* --- Responsive Adjustments --- */
  @media (max-width: 1200px) {
    .card-item-wrapper {
      flex: 0 0 calc(25% - 20px);
      max-width: calc(25% - 20px);
    }
    .product-item-wrapper {
      flex: 0 0 calc(33.333% - 20px);
      max-width: calc(33.333% - 20px);
    }
    .search-filter-bar {
      flex-direction: column;
      align-items: stretch;
    }
    .search-input-container {
      width: 100%;
    }
    .filter-dropdowns-container {
      width: 100%;
      justify-content: space-around;
    }
    .filter-dropdown-wrapper {
      flex: 0 0 calc(50% - 10px);
      max-width: calc(50% - 10px);
    }
    .upload-modal {
      width: 60%;
    }
  }
  
  @media (max-width: 992px) {
    .page-content-wrapper {
      padding: 15px;
    }
    .card-item-wrapper {
      flex: 0 0 calc(33.333% - 15px);
      max-width: calc(33.333% - 15px);
    }
    .product-item-wrapper {
      flex: 0 0 calc(50% - 15px);
      max-width: calc(50% - 15px);
    }
    .modal-content {
      padding: 20px;
    }
  }
  
  @media (max-width: 768px) {
    .mylibrary {
      flex-direction: column;
    }
    .page-content-wrapper {
      padding: 10px;
      gap: 15px;
    }
    .card-item-wrapper, .product-item-wrapper {
      flex: 0 0 calc(50% - 10px);
      max-width: calc(50% - 10px);
    }
    .upload-modal {
      width: 80%;
    }
    .create-card-modal {
      height: 90%;
      padding: 15px;
    }
    .search-filter-bar {
      padding: 10px;
      gap: 10px;
    }
    .filter-dropdowns-container {
      flex-direction: column; /* Stack dropdowns vertically */
      align-items: stretch;
    }
    .filter-dropdown-wrapper {
      flex: 0 0 100%; /* Each dropdown on its own line */
      max-width: 100%;
    }
  }
  
  @media (max-width: 480px) {
    .card-item-wrapper, .product-item-wrapper {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .upload-modal {
      width: 95%;
    }
    .modal-title {
      font-size: 1.4rem;
    }
    .top-action-bar {
      flex-direction: column;
      align-items: stretch;
    }
    .upload-design-btn {
      width: 100%;
      margin-top: 10px;
    }
    .search-product-input {
      font-size: 0.9rem;
    }
    .detail-text {
      font-size: 0.85em;
    }
  }

  
  div#mylibrary div.k-listview-content{
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 25px;
 }

:root {
  --usrreq-primary-color: #ff8306;
  --usrreq-input-bg: #ffffff;
  --usrreq-input-border: #ced4da;
  --usrreq-card-bg: #ffffff;
  --usrreq-text-color: #212529;
  --usrreq-light-bg: #f8f9fa;
  --usrreq-icon-color: var(--usrreq-primary-color);
  --usrreq-icon-hover-opacity: 0.7;
  --usrreq-danger-color: #dc3545;
  --usrreq-success-color: #198754;
}

.usrreq-page-container {
  /* background-color: #f0f0fa; */ /* Optional: if the page bg needs to be this color */
}

.usrreq-content-area {
  padding: 20px;
  background-color: #f0f0fa; /* Background outside the card */
}

.usrreq-card {
  background-color: var(--usrreq-card-bg);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee2e6;
}

.usrreq-card-section {
  margin-bottom: 25px;
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  background-color: #fdfdfd; 
}
.usrreq-card-section:last-child {
  margin-bottom: 0;
}


.usrreq-input,
.k-input-inner { /* For Kendo inputs */
  background-color: var(--usrreq-light-bg) !important;
  border: 1px solid var(--usrreq-input-border) !important;
  border-radius: 5px !important;
  padding: 10px 14px !important; /* Increased padding */
  color: var(--usrreq-text-color) !important;
  height: auto !important;
  font-size: 1rem;
}

.usrreq-input:focus,
.k-input-inner:focus {
  border-color: var(--usrreq-primary-color) !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 131, 6, 0.25) !important;
}

.usrreq-font-upload-trigger {
  color: #ffffff !important;
  background-color: var(--usrreq-primary-color) !important;
  cursor: pointer !important;
  padding: 10px 15px !important;
  border-radius: 5px !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; /* Ensure good font */
  /* font-weight: 500; */
  display: inline-flex !important; /* Changed from flex to inline-flex */
  align-items: center !important;
  border: none !important;
  height: auto !important; /* auto height */
  transition: background-color 0.2s ease;
  font-size: 16px;
}
.usrreq-font-upload-trigger:hover {
  background-color: #e07305 !important; /* Darker shade */
}



.usrreq-icon-upload,
.usrreq-icon-delete {
  color: var(--usrreq-icon-color) !important;
  transition: opacity 0.2s ease;
}
.usrreq-icon-back{
    color: #333 !important;
}
.usrreq-icon-back:hover,
.usrreq-icon-upload:hover,
.usrreq-icon-delete:hover {
  opacity: var(--usrreq-icon-hover-opacity);
}

.usrreq-icon-upload {
  color: var(--usrreq-success-color) !important;
}
.usrreq-icon-delete {
    color: var(--usrreq-danger-color) !important;
}

.usrreq-filter-header {
  margin-bottom: 20px; /* Increased margin */
  padding-bottom: 12px;
  border-bottom: 3px solid var(--usrreq-primary-color); /* Thicker border */
}

.usrreq-section-title {
  font-size: 1.5rem; /* Larger title */
  font-weight: 600; /* Bolder */
  color: var(--usrreq-primary-color);
}

.usrreq-button-clear-filters {
  display: inline-flex; /* Changed to inline-flex */
  align-items: center;
  justify-content: center;
  background-color: var(--usrreq-primary-color);
  color: white;
  border-radius: 5px;
  padding: 8px 15px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}
.usrreq-button-clear-filters:hover {
  background-color: #e07305;
}
.usrreq-grid .k-grid-header {
  background-color: var(--usrreq-light-bg);
  border-bottom: 2px solid #ddd; /* More prominent header border */
}
.usrreq-grid .k-grid-header .k-header {
  border-color: #e0e0e0;
  color: var(--usrreq-text-color);
  font-weight: bold;
  padding: 0 10px !important; /* More padding in header */
}
.usrreq-grid td {
  border-color: #f0f0f0 !important;
  padding: 12px 10px !important;
  vertical-align: middle;
}
.usrreq-grid tr:nth-child(even) td {
  background-color: #fcfcfc; 
}
.usrreq-grid .k-grid-content {
    overflow-y: auto; /* Ensure scrollability for content if needed */
}

@media (max-width: 992px) { /* Adjusted breakpoint */
  .usrreq-content-area {
    padding: 15px;
  }
  .usrreq-card {
    padding: 20px;
  }
  .usrreq-card-section {
    padding: 15px;
  }
}

@media (max-width: 768px) {
  .usrreq-card {
    padding: 15px;
  }
  .insertfaqcard, .filterlist { /* Assuming insertfaqcard is a general container class */
    flex-direction: column;
  }
  .insertfaqcard > div, .filterlist > div {
    width: 100% !important;
    margin-bottom: 15px;
  }
   .usrreq-section-title {
    font-size: 1.3rem;
  }
  .usrreq-button-clear-filters {
    font-size: 0.9rem;
    padding: 7px 12px;
  }
  .usrreq-grid .k-grid-table {
      font-size: 0.9rem; 
  }
  .usrreq-grid th, .usrreq-grid td {
      padding: 8px 6px !important;
  }
  .usrreq-font-upload-trigger {
      width: 100%;
      justify-content: center;
      margin-bottom: 10px;
  }
  .registerbrand .d-flex.align-items-start { /* For upload icon on mobile */
      justify-content: center;
      width: 100%;
  }
}

.fontsfilter{
  display: flex;
}


.ups-scope-card,
.ups-scope-shipment-card,
.ups-scope-grid-card 
 {
  background-color: #ffffff;
  border-radius: 12px; 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); 
  padding: 5px 10px;
  margin-bottom: 5px;
  border: 1px solid #e0e0e0;
}
.ups-scope-left-panel input,.ups-scope-right-panel input{
  padding: 5px !important;
}
.ups-scope-left-panel hr,.ups-scope-right-panel h1{
  margin: 0!important;
}

.ups-scope-header-section h3 {
  color: #333;
  font-size: 1.4em;
  /* margin-bottom: 20px; */
  border-bottom: 2px solid #ff8306; 
  padding-bottom: 1px;
}

.ups-scope-shipment-items h4 {
  color: #333;
  font-size: 1.3em;
  margin-bottom: 1px;
  border-bottom: 1px solid #eee;
  padding-bottom: 2px;
}


/* Input Fields & Dropdowns */
.ups-scope-input-field .k-input-inner, /* Kendo NumericTextBox */
.ups-scope-input-field .k-dropdown-wrap .k-input-inner, /* Kendo DropDownList */
.ups-scope-datepicker .rs-picker-toggle-textbox, /* RSuite DatePicker */
.ups-scope-input-field input /* General input if any */
{
  background-color: #f8f9fa !important;
  border: 1px solid #ced4da !important;
  border-radius: 6px !important; 
  padding: 8px 12px !important;
  color: #495057 !important;
}

.ups-scope-input-field .k-input-inner:focus,
.ups-scope-input-field .k-dropdown-wrap.k-focus .k-input-inner, /* Kendo focus */
.ups-scope-datepicker .rs-picker-toggle-textbox:focus,
.ups-scope-datepicker.rs-picker-default.rs-picker-focused .rs-picker-toggle.rs-btn /* RSuite focus */
{
  border-color: #ff8306 !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 131, 6, 0.25) !important;
}

/* Styling for Kendo DropdownList popup items */
.ups-scope-packageups .k-list-item,
.k-list .ups-scope-even_s,
.k-list .ups-scope-odd_s {
    padding: 8px 12px;
}
.ups-scope-even_s {
    background-color: #f9f9f9;
}
.ups-scope-odd_s {
    background-color: #ffffff;
}
.k-list-item.k-focus {
    background-color: rgba(255, 131, 6, 0.1) !important;
    box-shadow: none !important;
}


/* Labels for form groups */
.ups-scope-form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
  font-size: 0.95em;
}

.ups-scope-form-group {
  margin-bottom: 2px;
}

.ups-scope-weight-input,
.ups-scope-size-input {
  display: flex;
  gap: 15px; 
}

.ups-scope-weight-input > span, /* Kendo NumericTextBox wrapper */
.ups-scope-size-input > span {
  flex: 1;
}

/* Buttons */
.ups-scope-btn-create-label,
.ups-scope-save-config-button {
  background-color: #ff8306; 
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease;
  font-size: 0.9em;
}

.ups-scope-btn-create-label:hover,
.ups-scope-save-config-button:hover {
  background-color: #e07305; 
  transform: translateY(-1px);
}
.ups-scope-btn-create-label:active,
.ups-scope-save-config-button:active {
    transform: translateY(0px);
}


.ups-scope-action-icon {
  height: 40px !important; 
  width: 40px !important; 
  cursor: pointer;
  color: #333; 
  transition: transform 0.2s ease;
}
.ups-scope-action-icon:hover {
  transform: scale(1.1);
}

.ups-scope-question-icon {
  width: 80% ;
  height: 80%;
  color: #adb5bd; 
}

.ups-scope-refresh-icon {
    color: #28a745 !important; 
}
.ups-scope-refresh-icon:hover {
    color: #218838 !important;
}


/* Shipment Details Section */
.ups-scope-details-section {
  display: flex;

  gap: 20px;
}
.ups-scope-details-section .ups-scope-row {
  flex: 1;
  min-width: 250px; 
  padding: 10px;
}
.ups-scope-details-section .ups-scope-row label {
  font-weight: bold;
  color: #333;
  margin-bottom: 1px;
  display: block;
}
.ups-scope-details-section p {
  margin-bottom: 6px;
  font-size: 0.9em;
  color: #555;
}
.ups-scope-cost-summary p span,
.ups-scope-deliver-summary {
  font-weight: 500;
  color: #333;
}
.ups-scope-cost-summary p {
    display: flex;
    justify-content: space-between;
}

/* Grid specific styling */
.ups-scope-gridcss .k-grid-header {
  background-color: #f8f9fa;
}
.ups-scope-gridcss .k-grid-header .k-header {
  color: #333;
  font-weight: 600;
  border-color: #dee2e6;
  padding-bottom: 0 !important;
}
.ups-scope-gridcss .k-grid-content td {
    padding: 0px 5px !important;
    border-bottom: 1px solid #eee;
    text-align: center;
    font-size: 1rem;
}
.ups-scope-gridcss .k-alt { 
    background-color: #fdfdfe;
}


/* Cost Review */
.ups-scope-cost-review {
    flex: 1.5 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    text-align: center;
}
.ups-scope-cost-review-icon {
    font-size: 1.8em !important;
    font-weight: bold;
    color: #ff8306; 
    line-height: 1;
}
.ups-scope-cost-review span:last-child {
    font-size: 0.75em !important;
    color: #6c757d;
}


/* Responsive Design */
@media (max-width: 1200px) {
  .ups-scope-shipment-container {
    flex-direction: column;
  }
  .ups-scope-left-panel, .ups-scope-right-panel {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .ups-scope-page-content-wrapper {
    padding: 10px 15px 20px !important;
  }
  .ups-scope-card, .ups-scope-shipment-card, .ups-scope-grid-card {
    padding: 10px;
    margin-bottom: 15px;
  }
  .ups-scope-header-section h3 {
    font-size: 1.2em;
  }
  .ups-scope-shipment-items h4 {
    font-size: 1.1em;
  }

  .ups-scope-details-section .ups-scope-row {
     min-width: 100%;
     border-right: none !important; 
     padding-left: 0 !important;
     padding-right: 0 !important;
  }
  .ups-scope-details-section .ups-scope-row:not(:last-child) {
    border-bottom: 1px solid #eee; 
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  .ups-scope-weight-input,
  .ups-scope-size-input {
    flex-direction: column;
    gap: 10px;
  }
  .ups-scope-label-section div[style*="display: flex"] {
      flex-direction: column;
      gap: 15px;
      align-items: stretch !important;
  }
  .ups-scope-label-section .ups-scope-btn-create-label {
      width: 100%;
      text-align: center;
  }
   .ups-scope-cost-review {
       margin: 10px 0;
   }
   .ups-scope-action-icon, .ups-scope-question-icon, .ups-scope-refresh-icon {
       align-self: center;
   }
}

@media (max-width: 480px) {
  .ups-scope-menures {
    display: none !important; 
  }
  .ups-scope-header-section h3 {
    font-size: 1.1em;
  }
   .ups-scope-btn-create-label,
   .ups-scope-save-config-button {
    padding: 10px 15px;
    font-size: 0.85em;
  }
  .ups-scope-form-group label,
  .ups-scope-details-section p,
  .ups-scope-cost-review span:last-child,
  .ups-scope-form-group span[style*="font-size: .8vw"] { 
      font-size: 0.85em !important; 
  }
  span[style*="font-size: .75vw"], 
  span[style*="font-size: .6vw"] 
  {
      font-size: 0.8em !important;
  }

}

.ups-scope-ups {
    /* ... existing styles from ups.css for .ups ... */
}
.ups-scope-menures {
    /* ... existing styles from ups.css for .menures ... */
}
/* ... and so on for all other classes from your original ups.css ... */

/* Style for the line separator in DropDownList */
.ups-scope-service-separator {
  height: 1px;
  background-color: #ddc9c9;
  width: 100%;
  border: 1px double #ccc;
  pointer-events: none;
}


.section{
  padding: 0 2rem;
}

.section .error{
  font-size: 150px;
  color: #f97b1c;
  text-shadow: 
   1px 1px 1px #5b605f, 
   2px 2px 1px #5b605f, 
   3px 3px 1px #5b605f, 
   4px 4px 1px #5b605f, 
   5px 5px 1px #5b605f, 
   6px 6px 1px #5b605f, 
   7px 7px 1px #5b605f, 
   8px 8px 1px #5b605f, 
   25px 25px 8px rgba(0, 0, 0, 0.2)
}

.page{
  margin: 2rem 0;
  font-size: 20px;
  font-weight: 600;
  color: #444;
}

.back-home{
  display: inline-block;
  border: 2px solid #222;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.75rem 1rem 0.6rem;
  transition: all 0.2s linear;
  box-shadow: 0 15px 15px -11px rgba(0,0,0, 0.4);
  background: #222;
  border-radius: 6px;
}
.back-home:hover{
  background: #222;
  color: #ddd;
}
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  /* padding: 0.6em 1.2em; */
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  /* border-color: #646cff; */
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}


/*# sourceMappingURL=main.d2e20a3ea7a912acd729.css.map*/