.textboxstyle_4 .card {
}
.textboxstyle_4 .card:hover {
    background: var(--bs-primary);
    color: #fff;
}
.textboxstyle_4 .card .contentbutton {
    text-align: center;
    visibility: hidden;
}
.textboxstyle_4 .card:hover .contentbutton {
    visibility: visible;
}
.textboxstyle_4 .card .contentbutton a {
    background: var(--bs-primary);
    padding: 5px;
    text-decoration: none;
    border-radius: 5px;
}
.textboxstyle_4 .card:hover .contentbutton a {
    background: #fff;
}

.textboxstyle_1 .card li:before {
    color: var(--bs-tertiary);
    content: "\F586";
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-size: 1em;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    margin-right: 10px;
}

.textboxstyle_1 .card li {
    list-style-type: none;
}

h4.card-title span {
    font-size: .4em
}

.textboxstyle_1 ul {
    background: var(--bs-gray-900);
    color: var(--bs-gray-100);
    height: 150px;
    overflow: scroll;
    overflow-x: hidden
}

.textboxstyle_1 .list-group-item {
    background: var(--bs-gray-900);
    color: var(--bs-gray-100);
    padding: 3px;
}

.textboxstyle_1 .list-group::-webkit-scrollbar {
    width: 10px;
}

.textboxstyle_1 .list-group::-webkit-scrollbar-track {
    background: #fff;
}

.textboxstyle_1 .list-group::-webkit-scrollbar-thumb {
    background: var(--bs-gray-500);
}

@media (min-width: 576px) {
    .textboxstyle_1 {
        transition: transform .2s;
        /* Animation */
    }

    .textboxstyle_1:hover {
        transform: scale(1.1);
        /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    }
}