:root {
/* Light Theme Variables */
/* --bs-primary: rgb(1, 100, 45);
--bs-secondary: rgb(52, 52, 52);
--bs-disabled: rgb(197, 197, 197);
--bs-body-bg: rgb(240, 240, 240);
--bs-body-color: rgb(29, 29, 29);
--bs-body-disabled: rgb(88, 88, 88);
--bs-link-color: rgb(1, 100, 45);
--bs-link-recolor: rgb(0, 128, 54);
--bs-link-hover-color: rgb(0, 128, 54);
--bs-btn-primary-bg: rgb(1, 100, 45);
--bs-btn-primary-border: rgb(1, 100, 45);
--bs-btn-primary-color: rgb(232, 232, 232);
--bs-navbar-bg: rgb(52, 52, 52);
--bs-navbar-color: rgb(232, 232, 232);
--bs-card-bg: rgb(232, 232, 232);
--bs-card-border-color: rgb(1, 100, 45);
--bs-border-color-translucent: rgba(1, 100, 45, 0.8);
--bs-nav-pills-link-active-bg: rgb(1, 100, 45);
}

@media (prefers-color-scheme: dark) {
:root { */
/* Dark Theme Variables */
--bs-primary: rgb(1, 100, 45); 
--bs-secondary: rgb(52, 52, 52);
--bs-disabled: rgb(22, 22, 22);
--bs-body-bg: rgb(29, 29, 29);
--bs-body-color: rgb(232, 232, 232);
--bs-body-disabled: rgb(190, 190, 190);
--bs-link-color: rgb(0, 128, 54);
--bs-link-recolor: rgb(0, 128, 54);
--bs-link-hover-color: rgb(1, 100, 45);
--bs-btn-primary-bg: rgb(1, 100, 45);
--bs-btn-primary-border: rgb(1, 100, 45);
--bs-btn-primary-color: rgb(232, 232, 232);
--bs-navbar-bg: rgb(35, 35, 35);
--bs-navbar-color: rgb(0, 128, 54);
--bs-card-bg: rgb(28, 28, 28);
--bs-card-border-color: rgb(1, 100, 45);
--bs-border-color-translucent: rgba(1, 100, 45, 0.8);
}

:root {
    --sw-fixed-text-color: rgb(232, 232, 232);
    --sw-whatsapp-color: #25d366;
    --sw-card-text-banner: linear-gradient(90deg, rgba(1, 100, 45,0) 0%, rgba(1, 100, 45,0.70) 25%, rgba(1, 100, 45,0.80) 50%, rgba(1, 100, 45,0.70) 75%, rgba(1, 100, 45,0) 100%);
    --sw-body-color-translucent: rgba(28, 28, 28, 0.70);
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    /*overflow-y: hidden; /* Hide vertical scrollbar */
    overflow-x: hidden; /* Hide horizontal scrollbar */
}
main {
    min-height: 80vh;
    height: 100%;
}
a {
    color: var(--bs-link-color);
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
a:hover {
    color: var(--bs-link-hover-color);
    /* text-decoration: underline; */
}
.btn-primary {
    background-color: var(--bs-btn-primary-bg);
    border-color: var(--bs-btn-primary-border);
    color: var(--bs-btn-primary-color);
}
.btn-primary:hover, .btn-primary:active {
    background-color: var(--bs-link-hover-color);
    border-color: var(--bs-link-hover-color);
}
.navbar {
    background-color: var(--bs-navbar-bg);
}
.navbar-nav .navbar-item .nav-link {
    color: var(--bs-navbar-color);
}
.navbar-nav .navbar-item .nav-link:hover {
    color: var(--bs-link-hover-color);
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: var(--bs-primary);
}
.nav-item-recolor {
    color: var(--bs-link-recolor);
}
.border {
    border : 2px solid var(--bs-card-border-color)!important;
}
.card {
    background-color: var(--bs-card-bg);
    border: 2px solid var(--bs-card-border-color);
}
.card-title {
    color: var(--bs-body-color);
}
.card-banner {
    color: var(--sw-fixed-text-color);
    background: var(--bs-body-color);
    background: var(--sw-card-text-banner);
}
.card-text-banner {
    color: var(--sw-fixed-text-color);
}
.form-control {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-secondary);
    color: var(--bs-body-color);
}
.form-control:disabled {
    background-color: var(--bs-body-disabled);
    border-color: var(--bs-secondary);
    color: var(--bs-disabled);
}
.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(1, 100, 45, 0.25);
}
.alert-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}
.dropdown-menu {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-primary);
}
.dropdown-item {
color: var(--bs-link-recolor);
}
.dropdown-item:hover {
    background-color: var(--bs-primary);
    color: white;
}
.input-group-text {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}
.card-img-container {
    position: relative;
    width: 100%;
}
.table>:not(caption)>*>* {
    color: var(--bs-body-color)!important;

}.offcanvas {
    --bs-offcanvas-width: 600px!important; /* Set your desired width */
}
.cleanLink {
    text-decoration: none;
}
.floatingwhatsapp {
    background-color: var(--sw-whatsapp-color);
    width:  60px;
    height: 60px;
    font-size: 2rem;
}
.floatingnav {
    background-color: var(--sw-body-color-translucent);
}
.text-justify {
    text-align: justify;
    text-justify: inter-word;
}
.upload-container {
  border: 5px dashed var(--bs-btn-primary-color);
  border-radius: 8px;
  background-color: var(--bs-btn-primary-bg);
  cursor: pointer;
  min-height: 200px;
}
.upload-container.dragover {
  border-color: var(--bs-btn-primary-color);
  background-color: var(--bs-link-hover-color);
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.5);
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}