.model-comparison-section{
    background-color: var(--background-color);
}
model-comparison{
    display: block;
    --border-color:var(--background-color);
}
model-comparison .model-comparison-container{
    max-width: var(--section-width);
}
model-comparison .model-comparison-title{
    text-align: center;
    margin-bottom: calc(100vw * 50 / var(--base-width));
}

model-comparison .model-comparison-checkbox{
    display: flex;
    gap: calc(100vw * 33 / var(--base-width));
    margin-bottom:calc(100vw * 30 / var(--base-width));
}
model-comparison .model-comparison-checkbox input{
    margin: 0;
}
model-comparison .model-comparison-checkbox>div{
    display: flex;
    align-items: center;
    gap: 6px;
}

model-comparison .table-color-1{
    background-color: var(--color-1);
}
model-comparison .table-color-2{
    background-color: var(--color-2);
}

model-comparison .model-comparison-table{
    width:100%;
    border-collapse: collapse;
    border:1px solid var(--border-color);
    table-layout: fixed;
}

model-comparison th,
model-comparison td{
    border:1px solid var(--border-color);
    padding:10px 12px;
}

model-comparison td:first-child,
model-comparison th:first-child{
    position: sticky !important;
    left: 0;
    z-index: 1;
}

/* model-comparison .model-comparison-body{
    overflow-x: auto;
    overflow-y: hidden;
}
model-comparison .table-header td>div{
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

model-comparison .table-header-select{
    width: 70%;
}
model-comparison .table-header-select select{
    width: 100%;
    padding: 10px 15px;
}
model-comparison .table-header-select select:focus{
    
} */
model-comparison .el-table thead,
model-comparison .el-table{
    color: #000000;
}

model-comparison .el-table__header th{
  background-color: var(--color-1) !important;
}

model-comparison .columns-title{
    background-color: var(--color-1) !important;
}
model-comparison .el-table thead th:not(.columns-title) .cell{
  min-height: 200px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.el-select-dropdown__item{
    color: rgba(var(--color-text-2)) !important;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    font-family: 'Montserrat-Medium';
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover{
    background-color: var(--color-1) !important;
}

model-comparison .el-table__indent,
model-comparison .el-table__placeholder{
    display: none;
}

model-comparison .table-header{
    width: 100%;
}
model-comparison .product-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
model-comparison .product-card .product-image{
    width: 40%;
    aspect-ratio: 1/1;
    display: flex;
}
model-comparison .close-button{
    position: absolute;
    top: 0px;
    left: 0px;
    border-color: var(--color-2) !important;
    color: #000000 !important;
    background-color: var(--color-2) !important;
}
model-comparison .product-card .home-button{
    padding: calc(100vw * 5 / var(--base-width)) calc(100vw * 15 / var(--base-width));
    font-size: var(--button-size);
    color: var(--button-color) !important;
    background-color: var(--button-background-color);
}
model-comparison .el-table__row:first-child td:not(:first-child){
    background-color: var(--color-2);
}
model-comparison .cell{
    white-space: pre-line !important;
}

model-comparison .col-sticky-left .cell{
    width: fit-content;
    position: sticky;
    left: 0;
}
model-comparison .spec-cell{
    color: var(--spec-color);
    font-size: var(--spec-size);
}
model-comparison .el-table__header{
    position: sticky;
    z-index: 10;
    top: 0;
}

model-comparison .model-comparison-title>*{
    font-size: var(--title-size);
    color: var(--title-color);
}
@media(max-width:768px){
    model-comparison .model-comparison-table{
        width: 133%;
    }
    model-comparison .model-comparison-container{
        padding: 0;
    }
    model-comparison .spec-cell{
        font-size: var(--spec-mobile-size);
    }
    model-comparison .product-card .home-button{
        font-size: var(--button-mobile-size);
    }
    model-comparison .model-comparison-title>*{
        font-size: var(--title-mobile-size);
    }
}