/* Flex Style ---------------------------------------- */
.flexbox-itembox{flex:1;min-width:240px;max-width:600px;}
.mediabox-19x6{min-width:192px;min-height:108;max-width:640px;max-height:360px;}
.flexbox-mediabox{max-width:640px;padding:0 5px;padding:calc(100vw/60);}



/* Product Style ---------------------------------------- */
/*.product-row{display:flex;justify-content: space-around; align-items: stretch; align-content:stretch;}*/
.shaddow-box{background: #fff; border: 1px solid #d9d9d9;  box-shadow: 0 3px 10px -8px rgb(75, 125, 175); transition: 0.5s;}

.product-sidebox{flex:1 0 200px;}
.product-sidebox:nth-of-type(2){flex:4;}

.maxshop-imagebox{position:relative;width:100%;height:auto;aspect-ratio:1/1;text-align:center;padding:12px;}
.maxshop-imagebox img{display:inline-block;max-width:100%;max-height:100%;object-fit:contain;vertical-align:middle;transition:0.5s;}

.maxshop-favorite-box{display:flex; flex-wrap: wrap; justify-content: space-around; align-items: stretch; gap:6px;direction:ltr;}
.maxshop-favorite-box > div{padding:6px;color:#708090;}

.maxshop-part-box{display:flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap:6px;}
.maxshop-part-box > div{padding:6px;color:#708090;font-size:0.9em;}

.maxshop-price-box{}

.coding-box{display:flex; flex-wrap: wrap; justify-content:flex-start; align-items:center;align-content: center; gap:6px;}
.coding-item{background:#eaeaea;padding:0 10px; border: 0px dashed #ccc;}

.feature-box{display:flex; flex-wrap: wrap; justify-content:flex-start; align-items:center;align-content: center; gap:6px;}
.feature-item{background:#eaeaea;padding:0 10px; border: 0px dashed #ccc;}

.flexible-column{display: flex; flex-direction: column; min-height: 100%;}
.flexible-column > div{flex:1 0 20%;justify-content:flex-start; align-items: stretch;}

.form-flex-inline{width: 100%; display:flex; flex-wrap: wrap; justify-content: space-around; align-items:center; gap:6px;}
.form-flex-inline > div{flex:1 0 20%;}

.form-flex-multiple{width: 100%; display:flex; flex-wrap: wrap; justify-content: space-around; align-items:center;gap:6px;}
.form-flex-multiple > div{}

.input-box-price{display: block; width: 100%; padding: 0.5rem 1rem; font-size: 1rem; font-weight: 900; line-height: 1.5; 
  background-color: #eaeaea; border: 1px solid #d9d9d9; border-radius: 0.25rem;text-align:center;}

.input-box-field{display: block; width: 100%; padding: 0.5rem 1rem; font-size: 1rem; font-weight: 300; line-height: 1.5; 
  background-color: #eaeaea; color: #009090; border: 1px solid #009090; border-radius: 0.25rem;text-align:center;}
.input-box-field::placeholder{color: var(--bs1);}

.btn.btn-send{background:#8bc34a;color:#fff;border:1px solid #fff;}
.btn.btn-send:hover{background:#4caf50;color:#fff;border:1px solid #4caf50;}

.btn.btn-save-solid{background:#4caf50;color:#fff;border:1px solid #fff;}
.btn.btn-save-solid:hover{background:#fff;color:#4caf50;border:1px solid #4caf50;}

.btn.btn-add-to-cart{background:#4caf50;color:#fff;border:1px solid #4caf50;}
.btn.btn-add-to-cart:hover{background:#009090;color:#fff;border:1px solid #009090;}

.btn.btn-tab{background:var(--bs1);color:#fff;border:1px solid #d9d9d9;border-radius:0;}
.btn.btn-tab:hover{background:var(--white);color:var(--main);border:1px solid #d9d9d9;}

.btn.btn-tab.active{background:var(--main);color:#fff;border:1px solid var(--main);}
.btn.btn-tab.active:hover{background:var(--main);color:#fff;border:1px solid var(--main);}


/* Favorite Style ---------------------------------------- */
.bookmark-btn{cursor:pointer;} 
.bookmark-btn[data-value="0"]{color:var(--bs1);}
.bookmark-btn[data-value="1"],.bookmark-btn[data-value="2"],.bookmark-btn[data-value="3"],
.bookmark-btn[data-value="4"],.bookmark-btn[data-value="5"],.bookmark-btn[data-value="6"],
.bookmark-btn[data-value="7"],.bookmark-btn[data-value="8"],.bookmark-btn[data-value="9"],
.bookmark-btn[data-value="10"]{color:#00a0a0;} .bookmark-btn.active{color:#00a0a0;}
.bookmark-btn[data-value]:hover{color:var(--bs1);} .bookmark-btn[data-value="0"]:hover{color:#00a0a0;}

.like-btn{cursor:pointer;} 
.like-btn[data-value="0"]{color:var(--bs1);}
.like-btn[data-value="1"],.like-btn[data-value="2"],.like-btn[data-value="3"],
.like-btn[data-value="4"],.like-btn[data-value="5"],.like-btn[data-value="6"],
.like-btn[data-value="7"],.like-btn[data-value="8"],.like-btn[data-value="9"],
.like-btn[data-value="10"]{color:#ff0000;} .like-btn.active{color:#ff0000;}
.like-btn[data-value]:hover{color:var(--bs1);} .like-btn[data-value="0"]:hover{color:#ff0000;}

.point-btn{cursor:pointer;color:var(--bs1);} .point-btn:hover{color:#ffc000;}
.point-btn.active{color:#ffc000;} .point-btn.active:hover{color:var(--bs1);}

.comment-btn{cursor:pointer;color:var(--bs1);} .comment-btn:hover{color:#00baca;}
.comment-btn.active{color:#00baca;} .comment-btn.active:hover{color:var(--bs1);}

.btn.btn-send-point{background:#ff9800;color:#fff;border:1px solid #fff;}
.btn.btn-send-point:hover{background:#ff9800;color:#fff;border:1px solid #ff9800;}

.bordered{border:dashed 1px #d1d5d9;}



/* Subproducts Style ---------------------------------------- */
.maxshop-flexible{display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 18px 12px;}
.maxshop-subproducts{display: flex; flex-direction:column; justify-content:space-between;position: relative;background: #fff; border: 1px solid #d9d9d9;
  box-shadow: 0 3px 10px -8px rgb(75, 125, 175); min-width: 240px; flex: 1 0 20%; transition:0.5s;}
.maxshop-subproducts:hover{background:transparent; border:1px solid var(--main); box-shadow:0 8px 10px -8px rgb(75, 125, 175);}
.subproduct-box{}
.subproduct-box-image{}
.subproduct-box-image img{display:inline-block;max-width:100%;max-height:240px;vertical-align:middle;transition:0.5s;}
.subproduct-box-image:hover img{transform: scale(0.9);}
.subproduct-box-title{}
.subproduct-box-title a{display:block;background:white;padding:6px;}
.subproduct-box-title a:hover{background: var(--main); color:white;}
.subproduct-box-price{padding:12px 3px;}
.subproduct-price{font-size:1.1rem;font-weight:900;}
.subproduct-money{font-size:0.9rem;color:#405b8e}
.subproduct-box-brief{padding: 0px 3px 12px 3px;color:var(--bs1);}

.form-flex-inline{width: 100%; display:flex; flex-wrap: wrap; justify-content: space-around; align-items:center; gap:6px;}
.form-flex-inline > div{flex:1 0 20%;}

.form-comment{}
.form-comment textarea{}

.input-box-price{display: block; width: 100%; padding: 0.5rem 1rem; font-size: 1rem; font-weight: 400; line-height: 1.5; 
  background-color: #eaeaea; border: 1px solid #d9d9d9; border-radius: 0.25rem;text-align:center;}

.input-box-field{display: block; width: 100%; padding: 0.5rem 1rem; font-size: 1rem; font-weight: 300; line-height: 1.5; 
  background-color: #eaeaea; color: #009090; border: 1px solid #009090; border-radius: 0.25rem;text-align:center;}
.input-box-field::placeholder{color: var(--bs1);}

.btn.btn-add-to-cart{background:#4caf50;color:#fff;border:1px solid #fff;}
.btn.btn-add-to-cart:hover{background:#009090;color:#fff;border:1px solid #009090;}

.info-text{color: #708090; font-size:0.9em;}
.info-main{color: var(--main); font-size:0.9em;}

/* Comments Style ---------------------------------------- */
.maxshop-comments{}
.maxshop-comment{}
.maxshop-comment-id{}
.maxshop-comment-fullname{}
.maxshop-comment-description{border: dashed 1px #d1d5d9;}

/*.product-row{display:flex; flex-wrap: wrap; justify-content: space-around; align-items: stretch; gap:12px;}
.product-col{flex:1 0 20%; min-width:300px;}
.product-column{display: flex; flex-direction: column;}
.product-column div{height:100%;height:-webkit-fill-available;}


.color-info{color:#708090;}
.text-small{font-size:0.9em;}

/*.maxshop-row{}
.maxshop-row-box , .maxshop-rowbox{position: relative; background: #fff; flex: 1 0 20%;min-width: 300px; padding:12px;
border: 1px solid #d9d9d9;  box-shadow: 0 3px 10px -8px rgb(75, 125, 175); transition: 0.5s;}

.maxshop-flex{display: flex; flex-wrap: wrap; justify-content: center; gap:12px;}

.maxshop-flex-box, .maxshop-flexbox{display: flex; flex-wrap: wrap; justify-content: space-around;align-items:stretch; gap: 12px;}

.maxshop-flex-row, .maxshop-flexrow{display: flex; flex-wrap: nowrap; justify-content: center; gap: 12px;}

.maxshop-flexible{flex:1 0 20%;min-width:300px;height:auto;transition:0.5s;}

.flexible-product-box{flex:1 0 20%;min-width:300px;}
.flexible-product-box:nth-of-type(2){flex:4;}


.product-image{padding:12px;text-align:center;}
.product-image img{display:inline-block;max-width:100%;max-height:300px;vertical-align:middle;transition:0.5s;}


.shaddow-box{background: #fff; border: 1px solid #d9d9d9;  box-shadow: 0 3px 10px -8px rgb(75, 125, 175); transition: 0.5s;}



*/

/* mediabox ---------------------------------------------------------------------- */
.mediabox-audio,.mediabox-video{}

/* audio-player ---------------------------------------------------------------------- */
.audio-player-container{display:flex; background-color:#fff; padding:12px; box-shadow:0 0 5px rgba(0, 0, 0, 0.25);}
.audio-wrapper{position:relative; width:100%; overflow:hidden; }
.audio-cover-image{width:100%; height:100%; object-fit:cover; border-radius:0.5rem;}
audio.audio-player{position:absolute ; bottom:0px; left:0px; z-index:3; width:100%; border-radius:5px;opacity:0.90;}
audio.audio-player.hidden{opacity:0;pointer-events:none;}

.audio-play-button-overlay {position:absolute; top:50%; left:50%; z-index:3; transform:translate(-50%,-50%); width:60px; height:60px;
  background-color:rgba(0,0,0,0.6); color:#fff; border-radius:50%; font-size:1.5em; display:flex; justify-content:center; align-items:center;
  transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease; cursor:pointer;
}
.audio-play-button-overlay:hover{background-color:rgba(0,0,0,0.8);transform:translate(-50%,-50%) scale(1.1);}
.audio-play-button-overlay.hidden{opacity:0;pointer-events:none;}
.audio-title{position:absolute; top:70%; left:50%; z-index:2; transform:translate(-50%,-50%);
  width:100%;color:#fff;text-shadow: 1px 1px 5px #000; font-size:1.1em; text-align: center;
}


/* video-player ---------------------------------------------------------------------- */
.video-player-container{display:flex; background-color:#fff; padding:12px; box-shadow:0 0 5px rgba(0, 0, 0, 0.25);}
.video-wrapper{position:relative; width:100%; overflow:hidden; }
.video-cover-image{width:100%; height:100%; object-fit:cover; border-radius:0.5rem;}
video.video-player{position:absolute ; bottom:0px; left:0px;  z-index:3; width:100%; border-radius:5px;}
video.video-player.hidden{opacity:0;pointer-events:none;}

.video-play-button-overlay {position:absolute; top:50%; left:50%; z-index:3; transform:translate(-50%,-50%); width:60px; height:60px;
  background-color:rgba(0,0,0,0.6); color:#fff; border-radius:50%; font-size:1.5em; display:flex; justify-content:center; align-items:center;
  transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease; cursor:pointer;
}
.video-play-button-overlay:hover{background-color:rgba(0,0,0,0.8);transform:translate(-50%,-50%) scale(1.1);}
.video-play-button-overlay.hidden{opacity:0;pointer-events:none;}
.video-title{position:absolute; top:70%; left:50%; z-index:2; transform:translate(-50%,-50%); 
  width:100%;color:#fff;text-shadow: 1px 1px 5px #000; font-size:1.1em; text-align: center;
}

/* input-range-point ---------------------------------------------------------------------- */
:root{ --point-range-value:'0%';}
/* slider-track */
input[type="range"].range-point{-webkit-appearance: none; appearance: none; width: 100%;}
input[type="range"].range-point::-webkit-slider-runnable-track{
  -webkit-appearance: none; appearance: none; 
  background:#e5e5e5; 
  background:linear-gradient(90deg,rgba(255,240,0,1)0%,rgba(255,150,0,1)var(--point-range-value), rgba(225,225,225,1) var(--point-range-value));
  width: 100%; height:10px; cursor: pointer; outline: none; border-radius:6px; transition:0.5s;
}
input[type="range"].range-point::-webkit-slider-runnable-track:hover{}
/* slider-thumb */
input[type="range"].range-point::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; height:40px; width:40px; margin-top: -16px; transition: 0.5s;
  background-color: transparent; background: url(../../images/star-60.png) no-repeat center center; background-size: cover;
  border-radius: 50%; border: 1px solid transparent;
}
input[type="range"].range-point::-webkit-slider-thumb:hover {transform: scale(1.2);}
input[type="range"].range-point:active::-webkit-slider-thumb {}
input[type="range"].range-point:focus::-webkit-slider-thumb {}
datalist.ruller{display: flex; justify-content: space-between; color: var(--bs1); width: 100%; margin-top: 5px;}
datalist.ruller option{width:20px;}
.emoji-Icons{display:flex; justify-content:space-between; width:100%;}
.emoji-Icons img.emoji-icon{filter:grayscale(0.90);transform:scale(0.75);transition:0.5s;}
.emoji-Icons img.emoji-icon.active{filter:grayscale(0);transform:scale(1);}