.family-page .card .bg-primary {
    background-color: #9055fd61 !important;
    border: 2px solid #9055fd;
    font-size: 30px;
    padding: 5px;
}

.family-page .bg-success {
    --bs-bg-opacity: 1;
    background-color: #56ca005c !important;
    border: 2px solid #56ca00;
    font-size: 30px;
    padding: 5px;
}

.family-page .bg-warning {
    --bs-bg-opacity: 1;
    background-color: #ffb4007a !important;
    border: 2px solid #ffb400;
    font-size: 30px;
    padding: 5px;
}

.family-page .card h4 {
    font-size: 50px;
    color: #fff;
    /* font-weight: bold; */
}

card-body .ms-1 {
    margin-left: 0.25rem !important;
    width: 28px;
    text-align: center;
    color: #000;
}




.btn-sm-action {
    font-size: 21px;
    padding: 0px 3px;
}

.logout-btn, .menu-btn {
    float: left;
    position: fixed;
    background: transparent;
    border-style: none;
    font-size: 23px;
    transform: rotate(180deg);
    top: 10px;
}


.logout-btn {
    color: red;
    left: 9px;
}


.menu-btn {
    color: rgb(0, 94, 255);
    right:  9px;
}

.bg-light { background-color: rgb(217 215 254) !important }

.form-check-label { margin-right: 35px; }
.btn-action {
    background: transparent;
    border-style: none;
    padding: 5px;
}


@media (max-width: 575.98px) {
    .card {padding: 0px !important;}
    .container-xxl {padding: 0px !important;}
    .family-page .table {display: none;}
    .family-page .card h4 { font-size: 30px; }
    .family-page .card .bg-primary, .family-page .bg-success, .family-page .bg-warning { font-size: 20px; margin-bottom: 30px;}
    .mb-1 {
        display: inline-block;
        width: 48%;
    }
    .card-body {
        box-shadow: 0px 0px 8px 0px #eee;
        border: 1px solid #eee;
        border-radius: 30px;
        padding: 15px !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {  }

@media (min-width: 768px) and (max-width: 991.98px) { }

@media (min-width: 992px) and (max-width: 1199.98px) { }

@media (min-width: 1200px) { }