.e-appointment-details {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.appointment-information {
    padding-left: 4px;
    padding-right: 4px;
}

.appointment-icon {
    position: absolute;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    pointer-events: none;
}

    .appointment-icon.svg {
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 1;
    }

        .appointment-icon.svg::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 26px;
            height: 26px;
            transform: translate(-50%, -50%);
            background: #fff; /* chip color */
            border-radius: 50%;
            box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.12);
            z-index: 0;
        }

        .appointment-icon.svg::after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: currentColor; /* icon color comes from `color:` */
            z-index: 1;
        }

        .appointment-icon.svg.notes {
            right: 20px;
            bottom: 4px;
        }

            .appointment-icon.svg.notes::after {
                -webkit-mask: url("/icons/add-notes-outline-rounded.svg") no-repeat center / contain;
                mask: url("/icons/add-notes-outline-rounded.svg") no-repeat center / contain;
            }

        .appointment-icon.svg.money {
            right: 2px;
            bottom: 4px;
        }

            .appointment-icon.svg.money::after {
                -webkit-mask: url("/icons/attach-money-rounded.svg") no-repeat center / contain;
                mask: url("/icons/attach-money-rounded.svg") no-repeat center / contain;
            }

.green-note-icon .appointment-icon.svg.notes {
    color: #22c55e;
}

.green-charge-icon .appointment-icon.svg.money {
    color: #22c55e;
}

.yellow-note-icon .appointment-icon.svg.notes {
    color: #eab308;
}

.yellow-charge-icon .appointment-icon.svg.money {
    color: #eab308;
}

.red-note-icon .appointment-icon.svg.notes {
    color: #ff0000;
}

.red-charge-icon .appointment-icon.svg.money {
    color: #ff0000;
}