#modal {
    --modal-accent: #932d89;
}

.modal-header img {
    max-width: 96px;
    max-height: 96px;
    padding-right: 15px;
}

.modal-body h3,
.modal-body h4 {
    padding-top: 16px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: solid 1px var(--modal-accent);
    color: var(--modal-accent);
}

.modal-body ul {
    padding-left: 16px;
    margin-left: 18px;
    padding-bottom: 16px;
}

.modal-body ul > li {
    margin-bottom: 16px;
    font-size: 22px;
}

.modal-body {
    width: 95%;
    align-self: center;
    font-size: 20px;
    gap: 32px;
}

.left-bar {
    border-left: 2px solid var(--modal-accent);
    height: 100%;
    padding: 0 0 0 20px;
}

.modal-info-item {
    width: 50%;
}

.modal-infobar {
    padding-bottom: 16px;
    gap: 20px;
    flex-wrap: nowrap;
}

.modal-body b:hover {
  color: var(--modal-accent);
  transition: all 0.3s ease-in-out 0s;
}

@media (min-width: 1900px) {
    .modal-xxl {
        --bs-modal-width: 1800px;
    }
}

@media (min-width: 1200px) and (max-width: 1899px) {
    .modal-xxl {
        --bs-modal-width: 1140px;
    }
}

@media (max-width: 1199px) {
    .modal-xxl {
        --bs-modal-width: 800px;
    }
}

#icon-stack {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
    min-width: 20%;
}
@media (max-width: 1199px) {
    #icon-stack {
        flex-direction: row;
        height: auto;
        width: 100%;
    }
}

.row-col {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

@media (max-width: 1199px) {
    .row-col {
        flex-direction: column;
    }
}

#icon-stack > img {
    width: 100%;
    min-width: 96px;
}

.btn-close {
    background-size: 24px 100%;
    margin: 0 !important;
}

.btn-close-wrapper {
    display: flex;
    align-self: start;
    align-items: center;
    border: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
    border-radius: 4px;
    padding: 5px !important;
}