:root {
    --sx-color-primary: rgb(255, 0, 111);
}

.container-dark {

    /* width: 100%; */
    color: rgb(216, 250, 247);
    background-color: rgba(0, 35, 32, 0.75);
}

.container-medium {
    /* width: 100%; */
    color: white;
    background-color: rgba(63, 159, 151, 0.75);
}

.container-light {
    /* width: 100%; */
    color: rgba(0, 35, 32);
    background-color: rgba(216, 250, 247, 0.75);
}

.modal-backdrop.show {
    --bs-backdrop-opacity: .75;
}

[data-testid="date-picker-popup"] {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.btn-icon {
    --btn-width: 32px;
    --btn-height: 32px;

    border: 1px solid var(--bs-secondary-bg);
    transition: all .2s ease-in-out;
    width: var(--btn-width);
    height: var(--btn-height);
    overflow: hidden;
    border-radius: 50%;
    opacity: .75;
}

.btn-icon:hover {
    opacity: 1;
}