html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.navbar-nav .nav-item .nav-link.active {
    border-bottom: 2px solid #AFCB37; /* Change the color as needed */
    padding-bottom: 0.5rem; /* Adjust padding if necessary */
}
html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

#sidebar {
    min-width: 80px;
    max-width: 80px;
}

.bg-newman-forest {
    background-color: #40492A !important;
}

.color-newman-forest {
    color: #40492A !important;
}
/*borders*/
.border-newman-forest {
    border-color: #40492A !important;
}

.border-newman-olive {
    border-color: #8A9F61 !important;
}

.border-newman-primary {
    border-color: #006379 !important;
}

.border-newman-lime {
    border-color: #AFCB37 !important;
}

.border-left-success {
    border-left: .25rem solid #1cc88a !important;
}

.border-left-forest {
    border-left: .25rem solid #40492A !important;
}

.border-left-olive {
    border-left: .25rem solid #8A9F61 !important;
}

.border-left-primary {
    border-left: .25rem solid #006379 !important;
}

.border-left-newman-stone {
    border-left: .25rem solid #65696A !important;
}

.border-left-newman-sky {
    border-left: .25rem solid #82AEB3 !important;
}

.border-left-newman-blueberry {
    border-left: .25rem solid #002C4B !important;
}

.border-left-newman-lilac {
    border-left: .25rem solid #9A8597 !important;
}


.border-left-danger {
    border-left: .25rem solid #dc3545 !important;
}
/*borders end*/
.bg-newman-olive {
    background-color: #8A9F61 !important;
}

.color-newman-olive {
    color: #8A9F61 !important;
}

.bg-newman-primary {
    background-color: #006379 !important;
}

.color-newman-primary {
    color: #006379 !important;
}

.bg-newman-lime {
    background-color: #AFCB37 !important;
}

.color-newman-lime {
    color: #AFCB37 !important;
}

@font-face {
    font-family: 'Clarendon Bold';
    /*  src: url('font/Clarendon Bold.otf') format('opentype');*/
    font-weight: bold;
    src: url('../font/Clarendon Bold.otf');
}

@font-face {
    font-family: 'Clarendon-Regular';
    /*  src: url('font/Clarendon Bold.otf') format('opentype');*/
    /*   font-weight: bold;*/
    src: url('../font/Clarendon-Regular-Font.ttf');
}

.clarendonfont-regular {
    font-family: 'Clarendon-Regular';
}

.clarendonfont {
    font-family: 'Clarendon Bold'
}

.h1-clarendonfont {
    font-size: 2.5em; /* 40px if the base size is 16px */
    margin: 0.5em 0;
    font-family: 'Clarendon Bold'
}

.h2-clarendonfont {
    font-size: 2em; /* 32px if the base size is 16px */
    margin: 0.75em 0;
    font-family: 'Clarendon Bold'
}

.h3-clarendonfont {
    font-size: 1.75em; /* 28px if the base size is 16px */
    margin: 1em 0;
    font-family: 'Clarendon Bold'
}

.p-clarendonfont {
    font-size: 1em; /* 16px */
    margin: 1em 0;
    font-family: 'Clarendon Bold'
}

.sidebar {
    /* position: fixed;*/
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 48px 0 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

/* Header Styles */
.h1-clarendon-regular {
    font-family: 'Clarendon-Regular';
    font-size: 2.5em; /* Adjust the size as needed */
    font-weight: normal; /* Adjust weight if necessary */
}

.h2-clarendon-regular {
    font-family: 'Clarendon-Regular';
    font-size: 2em; /* Adjust the size as needed */
    font-weight: normal; /* Adjust weight if necessary */
}

.h3-clarendon-regular {
    font-family: 'Clarendon-Regular';
    font-size: 1.75em; /* Adjust the size as needed */
    font-weight: normal; /* Adjust weight if necessary */
}

.h4-clarendon-regular {
    font-family: 'Clarendon-Regular';
    font-size: 1.5em; /* Adjust the size as needed */
    font-weight: normal; /* Adjust weight if necessary */
}

.h5-clarendon-regular {
    font-family: 'Clarendon-Regular';
    font-size: 1.25em; /* Adjust the size as needed */
    font-weight: normal; /* Adjust weight if necessary */
}

.h6-clarendon-regular {
    font-family: 'Clarendon-Regular';
    font-size: 1em; /* Adjust the size as needed */
    font-weight: normal; /* Adjust weight if necessary */
}

/* Paragraph Style */
.p-clarendon-regular {
    font-family: 'Clarendon-Regular';
    font-size: 1em; /* Adjust the size as needed */
    font-weight: normal; /* Adjust weight if necessary */
}

ul.list-unstyled.components.mb-5 li {
    background-color: #006379;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

    /* Hover effect for li elements */
    ul.list-unstyled.components.mb-5 li:hover {
        background-color: #004d5b; /* Change to desired hover background color */
    }

    ul.list-unstyled.components.mb-5 li a:hover {
        color: #FFF !important; /* Change to desired hover text color */
    }
    /* Active class styles */
    ul.list-unstyled.components.mb-5 li.active {
        background-color: #004d5b; /* Change to desired active background color */
    }

        ul.list-unstyled.components.mb-5 li.active a {
            color: #FFF !important; /* Change to desired active text color */
        }

.btn-newman-lime {
    background-color: #AFCB37;
    border: none;
    color: #000000;
    transition: background-color 0.3s ease;
}

    .btn-newman-lime:hover {
        background-color: #98B32D; /* Slightly darker shade for hover effect */
    }

.btn-newman-primary {
    background-color: #006379 !important;
    border: none;
    color: #AFCB37 !important;
    transition: background-color 0.3s ease;
}

    .btn-newman-primary:hover {
        background-color: #004d5b; /* Slightly darker shade for hover effect */
        color: white !important;
    }

.btn-newman-primary-outline {
    background-color: #AFCB37 !important;
    border: 2px solid #006379;
    color: #006379 !important;
    transition: background-color 0.3s ease;
}

    .btn-newman-primary-outline:hover {
        background-color: #006379 !important; /* Slightly darker shade for hover effect #004d5b */
        color: #AFCB37 !important;
    }

.btn-newman-forest {
    background-color: #40492A !important;
    border: none;
    color: white;
    transition: background-color 0.3s ease;
}

    .btn-newman-forest:hover {
        background-color: #2e361e; /* Slightly darker shade for hover effect */
    }

.btn-newman-lime-outline {
    color: #AFCB37 !important;
    border-color: #AFCB37 !important;
}

    .btn-newman-lime-outline:hover {
        background-color: #AFCB37 !important;
        color: white !important;
    }


/* Sand */
.bg-newman-sand {
    background-color: #C3B192 !important;
}

.color-newman-sand {
    color: #C3B192 !important;
}

.border-newman-sand {
    border-color: #C3B192 !important;
}

/* Lilac */
.bg-newman-lilac {
    background-color: #9A8597 !important;
}

.color-newman-lilac {
    color: #9A8597 !important;
}

.border-newman-lilac {
    border-color: #9A8597 !important;
}

/* Blueberry */
.bg-newman-blueberry {
    background-color: #002C4B !important;
}

.color-newman-blueberry {
    color: #002C4B !important;
}

.border-newman-blueberry {
    border-color: #002C4B !important;
}

/* Stone */
.bg-newman-stone {
    background-color: #65696A !important;
}

.color-newman-stone {
    color: #65696A !important;
}

.border-newman-stone {
    border-color: #65696A !important;
}

/* Sky */
.bg-newman-sky {
    background-color: #82AEB3 !important;
}

.color-newman-sky {
    color: #82AEB3 !important;
}

.border-newman-sky {
    border-color: #82AEB3 !important;
}

/* Hover effect for newman-sand card */
.card.border-newman-sand:hover {
    background-color: #C3B192 !important; /* Matches the border-newman-sand color */
    color: #FFFFFF !important; /* Change text color to white */
}

    .card.border-newman-sand:hover i {
        color: #FFFFFF !important; /* Change icon color to white */
    }

    .card.border-newman-sand:hover .clarendonfont {
        color: #FFFFFF !important; /* Change text color within clarendonfont span to white */
    }

/* Hover effect for newman-lilac card */
.card.border-newman-lilac:hover {
    background-color: #9A8597 !important; /* Matches the border-newman-lilac color */
    color: #FFFFFF !important; /* Change text color to white */
}

    .card.border-newman-lilac:hover i {
        color: #FFFFFF !important; /* Change icon color to white */
    }

    .card.border-newman-lilac:hover .clarendonfont {
        color: #FFFFFF !important; /* Change text color within clarendonfont span to white */
    }

/* Hover effect for newman-blueberry card */
.card.border-newman-blueberry:hover {
    background-color: #002C4B !important; /* Matches the border-newman-blueberry color */
    color: #FFFFFF !important; /* Change text color to white */
}

    .card.border-newman-blueberry:hover i {
        color: #FFFFFF !important; /* Change icon color to white */
    }

    .card.border-newman-blueberry:hover .clarendonfont {
        color: #FFFFFF !important; /* Change text color within clarendonfont span to white */
    }

/* Hover effect for newman-stone card */
.card.border-newman-stone:hover {
    background-color: #65696A !important; /* Matches the border-newman-stone color */
    color: #FFFFFF !important; /* Change text color to white */
}

    .card.border-newman-stone:hover i {
        color: #FFFFFF !important; /* Change icon color to white */
    }

    .card.border-newman-stone:hover .clarendonfont {
        color: #FFFFFF !important; /* Change text color within clarendonfont span to white */
    }

/* Hover effect for newman-sky card */
.card.border-newman-sky:hover {
    background-color: #82AEB3 !important; /* Matches the border-newman-sky color */
    color: #FFFFFF !important; /* Change text color to white */
}

    .card.border-newman-sky:hover i {
        color: #FFFFFF !important; /* Change icon color to white */
    }

    .card.border-newman-sky:hover .clarendonfont {
        color: #FFFFFF !important; /* Change text color within clarendonfont span to white */
    }

/* Hover effect for newman-olive card */
.card.border-newman-olive:hover {
    background-color: #8A9F61 !important; /* Matches the border-newman-olive color */
    color: #FFFFFF !important; /* Change text color to white */
}

    .card.border-newman-olive:hover i {
        color: #FFFFFF !important; /* Change icon color to white */
    }

    .card.border-newman-olive:hover .clarendonfont {
        color: #FFFFFF !important; /* Change text color within clarendonfont span to white */
    }

/* Hover effect for newman-primary card */
.card.border-newman-primary:hover {
    background-color: #006379 !important; /* Matches the border-newman-primary color */
    color: #FFFFFF !important; /* Change text color to white */
}

    .card.border-newman-primary:hover i {
        color: #FFFFFF !important; /* Change icon color to white */
    }

    .card.border-newman-primary:hover .clarendonfont {
        color: #FFFFFF !important; /* Change text color within clarendonfont span to white */
    }

/* Hover effect for newman-lime card */
.card.border-newman-lime:hover {
    background-color: #AFCB37 !important; /* Matches the border-newman-lime color */
    color: #FFFFFF !important; /* Change text color to white */
}

    .card.border-newman-lime:hover i {
        color: #FFFFFF !important; /* Change icon color to white */
    }

    .card.border-newman-lime:hover .clarendonfont {
        color: #FFFFFF !important; /* Change text color within clarendonfont span to white */
    }

/* Hover effect for newman-forest card */
.card.border-newman-forest:hover {
    background-color: #40492A !important; /* Matches the border-newman-forest color */
    color: #FFFFFF !important; /* Change text color to white */
}

    .card.border-newman-forest:hover i {
        color: #FFFFFF !important; /* Change icon color to white */
    }

    .card.border-newman-forest:hover .clarendonfont {
        color: #FFFFFF !important; /* Change text color within clarendonfont span to white */
    }

/* Custom CSS to override the default active color */
/*#v-pills-tabs .nav-pills .nav-link.active, .nav-pills .show > #v-pills-tabs.nav-link {
    background-color: deeppink !important;*/ /* Replace #yourColor with your desired hex color code */
/*}*/

/* Custom CSS to override the default active color for elements inside #v-pills-tab */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #002C4B !important; /* Replace red with your desired hex color */
    color: white !important; /* Optional: Set text color to white for better visibility */
}
/* Default page link color */
.custom-page-link {
    color: #198754 !important; /* Bootstrap success green text */
}

    /* Hover state */
    .custom-page-link:hover {
        background-color: #198754 !important; /* Green background on hover */
        color: white !important; /* White text on hover */
    }

/* Active page styling */
.page-item.active .custom-page-link {
    background-color: #198754 !important; /* Green background for active page */
    color: white !important; /* White text for active page */
    border-color: #198754 !important; /* Green border for active page */
}
body.dark-theme {
    background-color: #121212;
    color: #e0e0e0;
}

.dark-theme .card {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #333;
}

.dark-theme .list-group-item {
    background-color: #2c2c2c;
    color: #ddd;
}

.dark-theme .text-gray-800 {
    color: #f8f9fa !important;
}

.dark-theme .badge {
    background-color: #333;
}

.dark-theme .navbar,
.dark-theme .border-left-primary,
.dark-theme .border-left-success,
.dark-theme .border-left-danger,
.dark-theme .border-left-newman-stone,
.dark-theme .border-left-olive,
.dark-theme .border-left-forest,
.dark-theme .border-left-newman-sky {
    border-left: 0.25rem solid #666 !important;
}
.dark-theme .text-secondary {
    color: #cccccc !important; /* Lighter gray for visibility */
}

.dark-theme .border-secondary {
    border-color: #888888 !important; /* Visible enough for dark background */
}


/* Adjust text color for text-muted in dark mode */
.dark-theme .text-muted {
    color: #9e9e9e !important; /* Lighter gray for better visibility */
}

/* Adjust border color for border-muted in dark mode */
.dark-theme .border-muted {
    border-color: #9e9e9e !important; /* Lighter gray for better contrast */
}