.page {
    min-height: calc(100vh - 36px);
}

.log-img {
    width: 150px;
}

.navbar {
    --tblr-navbar-padding-y: 0rem;
}

.owner-img {
    background-image: url('./owner.jpg');
}

.navbar-expand-md .navbar-nav {
    flex-direction: row;
}

.border-boy {
    border-color: #48cdff;
}

.bg-boy {
    background-color: #48cdff;
}

.border-girl {
    border-color: #ff75c8;
}

.bg-girl {
    background-color: #ff75c8;
}

.btn-boy {
    border-color: #48cdff;
    background-color: #ccedf9;
    color: black;
}

.btn-boy.active {
    background-color: #63d3fc;
}

.btn-girl {
    border-color: #ff75c8;
    background-color: #fdcfeb;
    color: black;
}

.btn-girl.active {
    background-color: #ff85d0;
}

.bg-birth-chart {
    background-color: #fafafa;
}

.border-birth-chart {
    border: 3px solid #e5e6e9 !important;
}

.nav-button-tab .nav-link {
    background-color: #c01c37 !important;
    color: #fff;
    margin-left: 5px;
    padding: 3px 5px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
}

.nav-button-tab .nav-link:hover ,
.nav-button-tab .nav-link.active {
    background-color: #f2c880 !important;
    color: #000;
}

.nav-button-tab {
    border-bottom: 2px solid #c01c37;
}

.nav-item.active:after {
    border: 1px solid #c01c37 !important;
}

.disablelink {
    pointer-events: none;  /* Prevents clicking */
    color: gray;           /* Changes the color to indicate it's disabled */
    cursor: not-allowed;   /* Changes the cursor to indicate it's disabled */
    text-decoration: none;
}

.bg-cardinal {
    background-color: #c01c37;
}

.bg-cardinal .link-secondary:hover {
    color: #f2c880 !important;
    text-decoration: none;
}

.bg-cardinal .link-secondary.active {
    color: #f2c880 !important;
}

.text-cardinal {
    color: #c01c37;
}

a.text-cardinal:hover {
    color: #f2c880;
    text-decoration: none;
}

.text-pale-sunshine {
    color: #f2c880;
}

.btn-common {
    border-color: #c01c37;
    background-color: #c01c37;
    color: #ffffff;
    font-weight: 700;
}

.badge-common {
    border-color: #c01c37;
    background-color: #c01c37;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: 700;
}

.btn-check:checked+.btn-common,
.btn-common.active,
.btn-common.show,
.btn-common:first-child:active,
:not(.btn-check)+.btn-common:active,
.btn-common:focus,
.btn-common.active,
.btn-common:hover {
    background-color: #f2c880;
    border: #f2c880;
    color: #000;
}

.breadcrumb a {
    color: #c01c37;
    font-weight: 700;
}

.breadcrumb a:hover {
    color: #f2c880;
    text-decoration: none;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #c01c37;
    font-weight: 700;
}

.main-menu-nav-link {
    margin-right: 0;
}

@media (max-width:480px)  {
    .sm-text-warp {
        text-wrap: wrap;
    }

    .sm-mt-1 {
        margin-top: 1rem;
    }

    h3,
    .card-title {
        font-size: 13px;
    }

    .card-subtitle {
        font-size: 9px;
    }
    .nav-item.active:after {
        border: 1px solid #c01c37 !important;
    }

    .nav-item.active:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -.25rem;
        border: 0 var(--tblr-border-style) var(--tblr-navbar-active-border-color);
        border-bottom-width: 2px;
    }

}

@media (max-width:576px)  {
    .md-mt-1 {
        margin-top: 1rem;
    }

    .btn-custom {
        padding: 4px 4px;
        font-size: 12px;
        min-width: 20px !important;
    }


}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .nav-button-tab .nav-link {
        background-color: #c01c37 !important;
        color: #fff;
        margin-left: 5px;
        padding: 3px 5px;
        border-radius: 5px 5px 0 0;
    }

    .btn-custom {
        padding: 4px 4px;
        font-size: 12px;
        min-width: 20px !important;
    }

    .custom-btn-list {
        --tblr-list-gap: 0.25rem;
    }

    .custom-btn-list .btn {
        padding: 6px 10px;
    }

    .total-number-h1 {
        font-size: 15px;
        text-align: center;
    }

    .page-title {
        font-size: 17px;
    }

    .custom-card-body {
        padding: 10px 2px;
    }

    .nav-item.active:after {
        border: 1px solid #c01c37 !important;
    }

    .navbar-expand-md .navbar-collapse .nav-item.active:after {
        content: "";
        position: relative;
        left: 5px;
        right: 0;
        bottom: -.25rem;
        border: 0 var(--tblr-border-style) var(--tblr-navbar-active-border-color);
        border-bottom-width: 2px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .btn-custom {
        padding: 6px 6px;
        font-size: 12px;
        min-width: 24px !important;
    }

    .custom-btn-list {
        --tblr-list-gap: 0.35rem;
    }
    .nav-item.active:after {
        border: 1px solid #c01c37 !important;
    }
    .custom-btn-list .btn {
        padding: 10px 14px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .btn-custom {
        padding: 8px 8px;
        font-size: 12px;
        min-width: 28px !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .btn-custom {
        padding: 10px 8px;
        font-size: 12px;
        min-width: 25px !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {


    .btn-custom {
        padding: 10px 19px;
        font-size: 12px;
        max-width: 35px;
    }
}