@charset "utf-8";
/* CSS Document */

.page-55153 .main-title06{text-align: left!important;}

.page-55153 .compare-choice { display: flex; gap: 20px; flex-wrap: wrap; align-items: center;}
.page-55153 .choice-models, .page-55153 .choice-features { user-select: none; position: relative;}
.page-55153 .models-title {border-radius: 5px;border: 1px solid #000;font-size: 16px;padding: 0 25px;height: 40px;line-height: 40px;overflow: hidden;font-weight: 500;overflow: hidden;}
.page-55153 .models-title .arrow{width: 12px;height: 16px;display: block;transform: rotate(90deg);margin-left: 15px;}
.page-55153 .models-title.open .arrow,.page-55153 .models-title:hover .arrow{transform: rotate(-90deg);filter: brightness(0) invert(1);transition: filter 0.2s ease;}
.page-55153 .models-title::before,.page-55153 .models-title.open{background: #a6c939;}
.page-55153 .models-title:hover,.page-55153 .models-title.open{color: #fff!important;border-color: #a6c939;cursor: pointer;}
    
.page-55153 .select-box { display: none; margin-top: 8px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);background: #fff;padding: 20px 30px 25px 30px;}
.page-55153 .select-box.show { display: block; position: absolute;top: 40px;right: 0;z-index: 99; width: 600px;}
.page-55153 .select-button {margin-bottom: 15px; }
.page-55153 .select-button .box-flex{gap: 15px;}
.page-55153 .select-button .name{font-weight: 600;}
.page-55153 .select-button .button {cursor: pointer; font-size: 15px;font-weight: 500;}
.page-55153 .select-button .button:hover { color: #a6c939 ; }
.page-55153 .models-content {display: grid;grid-template-columns: repeat(2, 1fr);gap: 5px;}
.page-55153 .choice-features .models-content{grid-template-columns: repeat(3, 1fr);}
.page-55153 .select-input {cursor: pointer; justify-content: flex-start;font-size: 15px; font-weight: 400;}
.page-55153 .select-input .dropdown-choice { 
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid #000;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  border-radius: 4px;
  background: #fff;
  transition: all .15s;
  margin-right: 5px;
}
.page-55153 .select-input:hover .dropdown-choice{border-color: #a6c939;}
.page-55153 .select-input.selected .dropdown-choice {
  background-color: #a6c939;
  border-color: #a6c939;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
}

.page-55153 .table-wrapper {width: 100%;overflow-x: auto;height: 72vh;}
.page-55153 .table-wrapper::-webkit-scrollbar { width: 6px; height: 6px; appearance: none; -webkit-appearance: none; }
.page-55153 .table-wrapper::-webkit-scrollbar-track { background: #dadada; border-radius: 3px; }
.page-55153 .table-wrapper::-webkit-scrollbar-thumb { background: #a6c939; border-radius: 3px; border: none; }
.page-55153 .table-wrapper::-webkit-scrollbar-thumb:hover { background: #8fb32e; cursor: pointer;}
.page-55153 .table-wrapper::-webkit-scrollbar-corner { background: #dadada; }
    
.page-55153 .compare-table { border-collapse: separate; border-spacing: 0; table-layout: fixed !important; width: 100% !important; min-width: 100%; }
.page-55153 .compare-table th, .page-55153 .compare-table td { padding: 20px; text-align: center; position: relative; border-bottom: 1px solid #dadada;border-right: 1px solid #dadada; word-break: break-word; overflow-wrap: break-word; line-height: 20px;}
.page-55153 .compare-table thead th { position: sticky; top: 0; z-index: 10;background: #eee!important; border-bottom: 1px solid #dadada; }
.page-55153 .compare-table .th-feature, .page-55153 .compare-table tbody td:first-child { position: sticky; left: 0; z-index: 5; width: 170px !important; min-width: 170px !important; max-width: 170px !important; border-right: 1px solid #dadada; background: #fff; font-size: 15px;font-weight: 600;text-align: center;line-height: 20px; /*box-shadow: 5px 0 10px 3px rgba(0, 0, 0, 0.05);*/}
.page-55153 .compare-table .th-feature { z-index: 15; }
.page-55153 .col-product { width: var(--col-product); min-width: var(--col-product); }
.page-55153 .choice-product-delete { background: none; border: none; cursor: pointer; transition: all .2s;margin-left: 10px;}
.page-55153 .choice-product-delete:hover { color: #a6c939 ;}
.page-55153 .choice-clear-out { display: none; text-align: center;margin: 5% 0 10%;}
.page-55153 .choice-clear-out.show { display: block; }
/*.page-55153 .compare-table tbody td{background: #fff;}
.page-55153 .compare-table tbody tr:nth-child(2n) td{background: #eee;}
.page-55153 .compare-table tr.link-row td{background: #fff!important;}*/
    
.page-55153 .choice-product-delete{height: 20px;}
.page-55153 .col-product .box-flex{justify-content: center;}
.page-55153 .col-product .compare-product-name{font-size: 15px;font-weight: 600;min-height: 20px;line-height: 20px;}
.compare-table tr td{font-size: 14px;}

.page-55153,.page-55153 .choice-content{margin-top: 4vh;}

/*.page-55153 .compare-table tbody td:hover {
  background: #edf3d7;
  transition: border-bottom-color 0.2s;
}
.page-55153 .compare-table tbody tr:hover td {
  background: #edf3d7;
  transition: border-bottom-color 0.2s;
}
.page-55153 .compare-table tbody tr.link-row:hover td {
  border-bottom-color: #dadada !important;
}*/

.page-55153 .link-row {
  position: sticky;
  bottom: 0;
  z-index: 8;
  background: #fff;
}
.page-55153 .link-row td {
  vertical-align: middle;
    border: none;padding: 20px 0;
}
.page-55153 .compare-table .link-row .th-feature, .page-55153 .compare-table tbody .link-row td:first-child{border: none;}
.page-55153 .link-row .th-feature {
  z-index: 12 !important;
  background: #fff !important;
}
.page-55153 .link-row .link {
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-55153 .link-row .link a{display: inline-block;border-radius: 500px;font-size: 13px;padding: 0 14px;height: 32px;line-height: 32px;background: #a6c939;color: #fff;font-weight: 500;}
.page-55153 .link-row .link a::before {background: #000;}
.page-55153 .link-row .link a:hover{color: #fff!important;}



.page-55153 .compare-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-55153 .compare-img img {
  display: none;
  max-width: 250px;
  max-height: 100%;
}
.page-55153 .compare-img img.active {
  display: block;
}
.page-55153 .switch-color {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.page-55153 .switch-color .circle {width: 24px;height: 24px;border-radius: 100%;background: #fff;border: 2px solid #fff;box-sizing: border-box;display: flex;justify-content: center;align-items: center;cursor: pointer;}
.page-55153 .switch-color .circle div{width: 16px;height: 16px;border-radius: 100%;}
.page-55153 .switch-color .circle.active {border: 2px solid #000;}
.page-55153 .compare-choice{font-size: 16px;font-weight: 600;}
.page-55153 .choice-features{margin-left: 20px;}
.page-55153 .close-sheet{display: none;}
.page-55153 .compare-switch .price{font-weight: 600;margin-top: 15px;font-size: 17px;color: #a6c939;}
.page-55153 .compare-switch td{padding-left: 0!important;padding-right: 0!important;}
.page-55153 .compare-switch td:first-child{padding-left: 20px!important;padding-right: 20px!important;}

@media (max-width: 1200px) {
    .box-flex-none{display: block;}
    .page-55153 .compare-choice{justify-content: flex-end;margin-top: 10px;}
}
@media (max-width: 1024px) {
    .page-55153 .compare-choice{display: inline-block;margin-top: 5px;}
    .choice-word{margin-bottom: 10px;}
    .page-55153 .select-box.show{right: auto;left: 0;}
    .page-55153 .compare-table .th-feature, .page-55153 .compare-table tbody td:first-child{width: 140px !important; min-width: 140px !important; max-width: 140px !important;}
}

@media (max-width: 768px) {
  .page-55153 .select-box {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999 !important;
    padding: 30px 0 20px;
  }
  .page-55153 .select-box.show {
    transform: translateY(0) !important;
  }
  .page-55153 .sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .page-55153 .sheet-overlay.active {
    display: block;
    opacity: 1;
  }
  .page-55153 .close-sheet {
    display: block;
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 34px;
    line-height: 24px;
    text-align: center;
    color: #000;
    cursor: pointer;
    z-index: 10;
    font-weight: 400;
  }
    .page-55153 .close-sheet:hover{color: #a6c939;}
    .page-55153 .close-sheet:hover { color: #333; }
    .page-55153 .models-title .arrow{margin-left: 8px;}
    .box-flex-wrap{justify-content: flex-start;}
    .page-55153 .models-content{display: inline-block;}
    .page-55153 .select-input{float: left;margin: 7px 16px;}
    .page-55153 .select-input {cursor: pointer; justify-content: flex-start;font-size: 16px; font-weight: 400;}
    .page-55153 .select-button{padding: 0 15px;margin-bottom: 10px;}
    .page-55153 .select-button .name{display: none;}
    .page-55153 .select-button .box-flex{gap: 30px;}
    
}
@media (max-width: 576px){
    .choice-word,.page-55153 .models-title{font-weight: 500;font-size: 14px;}
    .page-55153 .models-title{padding: 0 15px;}
    .page-55153 .compare-table th, .page-55153 .compare-table td{padding: 10px;}
    .page-55153 .compare-table .th-feature, .page-55153 .compare-table tbody td:first-child{width: 100px !important; min-width: 100px !important; max-width: 100px !important;}
    .page-55153 .compare-table .th-feature, .page-55153 .compare-table tbody td:first-child,.page-55153 .col-product .compare-product-name,.page-55153 .compare-switch .price{font-size: 14px;}
    .page-55153 .compare-table th, .page-55153 .compare-table td{font-size: 13px;}
    .page-55153 .choice-product-delete svg{width: 17px;height: 17px;}
    /*.page-55153 .table-wrapper {height: 60vh;}*/
    .page-55153 .select-button .button{font-size: 16px;}
    .page-55153 .switch-color .circle{width: 18px;height: 18px;border: 1px solid #fff;}
    .page-55153 .switch-color .circle.active{border: 1px solid #000;}
    .page-55153 .switch-color .circle div{width: 12px;height: 12px;}
    .page-55153 .switch-color{gap: 3px;margin: 6px 0 10px;}
    .page-55153 .compare-switch .price{margin: 0;}
    .page-55153 .compare-switch td:first-child{padding-left: 10px!important;padding-right: 10px!important;}
}

.page-55153 tbody tr[data-feature="Ebike Model"] {
  display: table-row !important;
}