/************ ALL ************/
.options-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.bx {
    font-size: 30px;
}

.options-list i,
.options-list box-icon {
    fill: green;
    width: 30px;
    height: 30px;
    font-size: 30px;
    color: green;
}

.options-list .gray,
.options-list .gray * {
    fill: #ccc;
    color: #ccc;
}

.options-outer .col {
    background: #fff;
}



/************ DESKTOP ************/
.options-outer.desktop .disabled,
.options-outer.desktop .col-heading {
    pointer-events: none;
}

.options-outer.desktop .mobile-only {
    display: none;
}

.options-outer.desktop {
    display: grid;
    /*grid-template-columns: 29% 1fr 1fr 1fr 1fr;*/
    /*grid-template-columns: 29% auto auto auto auto;*/
    grid-template-columns: 307px 1fr 1fr 1fr 1fr;
    border: 1px solid #ccc;
    border-radius: 20px;
    box-shadow: 5px 5px 15px rgba(50, 50, 50, 0.2);
}

.options-outer.desktop .col:not(.col-1) {
    border-left: 1px solid #ccc;
    text-align: center;
    padding: 40px 15px;
}

.options-outer.desktop .col-1 {
    padding: 40px 40px;
}

.options-outer.desktop strong {
    display: inline-block;
    margin-bottom: 1em;
    font-size: 1em;
    text-transform: uppercase;
}

.options-outer.desktop .options-list li {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.options-outer.desktop .col-1 .options-list li {
    justify-content: flex-start;
}

.options-outer.desktop [data-row="1"] box-icon,
.options-outer.desktop .options-list li span {
    display: none;
}

.options-outer.desktop .col:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.options-outer.desktop .col:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.options-outer.desktop .col-1 {
    border-top: 15px solid #000;
}

.options-outer.desktop .col-2 {
    border-top: 15px solid #356e38;
}

.options-outer.desktop .col-3 {
    border-top: 15px solid #3c9541;
}

.options-outer.desktop .col-4 {
    border-top: 15px solid #76226d;
}

.options-outer.desktop .col-5 {
    border-top: 15px solid #f5bf07;
}

.options-outer.desktop .col {
    transition: scale, background 0.3s;
}

.options-outer.desktop .col.hover {
    scale: 103%;
    background: #fff;
    cursor: pointer;
    box-shadow: 5px 5px 15px rgba(50, 50, 50, 0.2);
}

.options-outer.desktop .col.inactive {
    background: #eee;
}

.options-outer.desktop .col:not(.col-1) .options-list ul {
    padding-left: 0;
}





/************ MOBILE ************/
.options-outer.mobile .desktop-only {
    display: none;
}

.options-outer.mobile {
    border: 1px solid #ccc;
    border-radius: 20px;
    box-shadow: 5px 5px 15px rgba(50, 50, 50, 0.2);
    overflow: hidden;
}

.options-outer.mobile .col-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    border-top: 1px solid #ccc;
}

.options-outer.mobile .col-heading i,
.options-outer.mobile .col-heading box-icon {
    transition: all 0.3s; 
}

.options-outer.mobile .col-heading[aria-expanded="true"] i,
.options-outer.mobile .col-heading[aria-expanded="true"] box-icon {
    rotate: 180deg;
}

.options-outer.mobile .col-2 .col-heading {
    border-top: none;
}

.options-outer.mobile .options-list {
    padding: 40px;
    background: #f8f8f8;
}

.options-outer.mobile .options-list li {
    display: flex;
    align-items: center;
}

.options-outer.mobile .options-list i,
.options-outer.mobile .options-list box-icon {
    margin-right: 10px;
}
/*
.options-outer.mobile .options-list [data-row="1"] {
    display: none;
}
*/
.options-outer.mobile .col:not(.col-1) .options-list ul {
    margin-bottom: 20px;
}

.options-outer.mobile .col-1 {
    border-left: 10px solid #000;
    display: none;
}

.options-outer.mobile .col-2 {
    border-left: 10px solid #356e38;
}

.options-outer.mobile .col-3 {
    border-left: 10px solid #3c9541;
}

.options-outer.mobile .col-4 {
    border-left: 10px solid #76226d;
}

.options-outer.mobile .col-5 {
    border-left: 10px solid #f5bf07;
}
/*
.options-outer.mobile .col-list {
    pointer-events: none;
}
*/


@media (max-width: 480px) {
    .options-outer.mobile .options-list {
        padding: 40px 25px;
    }
}