/* Adding variables */
@import url("../../css/variables.css");

.options-table__main-container {
    width: var(--full);
    padding: var(--padding);
    background: var(--neowhite);
}

.options-table__container-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--m-spacing);
    width: var(--width);
    padding: var(--xl-spacing) 0;
    margin: 0 auto;
}

.options-table__main-title h2 {
    font-size: var(--h2);
    font-weight: var(--extralight);
    line-height: var(--lh-1) !important;
    text-align: center;
}

.options-table__main-title h2 strong {
    font-weight: var(--regular);
    color: var(--neopaleblue);
}

.options-table__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.options-table__icon img {
    width: 100%;
    max-width: 38px;
}

#optionsTable table {
    width: var(--full);
    max-width: 1080px;
    border-collapse: collapse;
    position: relative;
}

#optionsTable td {
    text-align: left;
    vertical-align: middle;
    padding: calc(var(--s-spacing) - 6px) var(--s-spacing);
}

#optionsTable th {
	vertical-align: middle;
    padding: var(--s-spacing);
}

#optionsTable th h3 {
    font-family: var(--racing);
    font-size: var(--text);
    font-weight: var(--regular);
    text-transform: uppercase;
    text-align: center;
    color: var(--neopaleblue);
}

.options-table__table th {
    z-index: 100;
    min-width: 180px;
}

.options-table__row-title h3 {
    font-size: var(--text);
    font-weight: var(--regular);
	text-align: center;
    color: var(--neopaleblue);
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {
    
}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    .options-table__main-container {
        padding: 0 var(--m-spacing) var(--l-spacing);
    }

    .options-table__container-inner {
        display: block;
        width: 100%;
        padding: var(--l-spacing) 0 var(--s-spacing);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    .options-table__container-inner::-webkit-scrollbar {
        height: 1rem !important;
    }
    
    .options-table__container-inner::-webkit-scrollbar-track {
        border-radius: 55px !important;
    }
    
    .options-table__container-inner::-webkit-scrollbar-thumb {
        background: var(--neopaleblue) !important;
        border-radius: 55px !important;
    }
    
    .options-table__container-inner::-webkit-scrollbar-thumb:hover {
        background: white !important;
    }
    
    .options-table__container-inner {
        scrollbar-width: 1rem !important;
        scrollbar-color: var(--neowhite) var(--neopaleblue) !important;
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    .options-table__main-container {
        padding: 0 var(--s-spacing) 0;
    }
}