.list-icon-horizontal {
    display: flex;
    gap: calc(var(--panel-padding) * 0.2);
    width: 100%;
    justify-content: space-between;
}
.list-icon-horizontal > div {
    flex: 1 1 0px;
    display: flex;
    gap: 2em;
    flex-direction: column;
}
@media only screen and (max-width: 700px) {
    .list-icon-horizontal { flex-direction: column; }
    .list-icon-horizontal > div { flex-direction: row; }
}


.list-checkbox-horizontal {
    display: flex;
    gap: 20px;
    position: relative;
    padding-top: calc(var(--panel-padding));
}
.list-checkbox-horizontal > div {
    flex: 1 1 0px;
    position: relative;
}
.list-checkbox-horizontal ul {
    margin-top: calc(var(--panel-padding) * 0.2);
    font-size: 2em;
}
.list-checkbox-horizontal > div::before {
    content: "";
    background: #87B173;
    height: 3px;
    width: 200%;
    position: absolute;
    top: -32px;
    left: 0;
}
.list-checkbox-horizontal > div::after {
    content: "";
    background-image: url('/assets/img/checked_green_round.svg');
    height: 44px;
    width: 44px;
    position: absolute;
    top: -52px;
    left: 0;
}

.list-checkbox-horizontal > div.empty::before,
.list-checkbox-horizontal > div.empty::after {
    display: none;
}
@media only screen and (max-width: 700px) {
    .list-checkbox-horizontal {
        flex-direction: column;
        padding: 15px calc(var(--panel-padding) + 15px);
    }
    .list-checkbox-horizontal > div::after {
        top: -13px;
        left: -56px;
    }
    .list-checkbox-horizontal > div::before {
        width: 3px;
        height: 100%;
        top: 10px;
        left: -35px;
    }
}


.list-box-horizontal {
    display: flex;
    gap: calc(var(--panel-padding) * 0.3);
}
.list-box-horizontal > div {
    flex: 1 1 0px;
    padding: calc(var(--panel-padding) * 0.44);
    background: linear-gradient(127.13deg, #FFFFFF -34.67%, #F2F6F9 95.55%), #D9D9D9;
    box-shadow: 10px 10px 30px rgba(209, 217, 223, 0.6);
    border-radius: 10px;
    position: relative;
}
.list-box-horizontal h4 {
    font-weight: 600;
    color: #87B173;
    margin-bottom: calc(var(--panel-padding) * 0.2);
}
.list-box-horizontal img {
    position: absolute;
    top: -22px;
    left: 50%;
    margin-left: -22px;
}
@media only screen and (max-width: 800px) {
    .list-box-horizontal > div {
        padding: calc(var(--panel-padding) * 0.44) calc(var(--panel-padding) * 0.3) calc(var(--panel-padding) * 0.3) calc(var(--panel-padding) * 0.3);
    }
}
@media only screen and (max-width: 750px) {
    .list-box-horizontal {
        flex-direction: column;
        gap: calc(var(--panel-padding) * 0.6);
    }
}