:root {
    --text-color: #ffcc99;
    --button-bg-color: #271d10;
    --button-hover-color: #322b23;
    --button-focus-color: #322b23;
    --button-after-color: #271d10;
    --dark-bg-color: #131313;
    --light-bg-color: #1c1b17;
}

* body {
    /*color: #ffcc99;*/
    color: #ffcc99 !important;
}

/* Override Bootstrap's default link styles */
* a {
  color: #ffcc99 !important; /* Custom link color */
  text-decoration: none;
}

* a:hover {
  color: #ffffff !important; /* Custom link hover color */
}

.sidebar {
    width: 350px; /* Set fixed width */
    height: 100vh; /* Full height of the viewport */
    background-color: #1c1b16; /* Set background color with hex code */
    position: fixed; /* Fix it to the side */
    left: 0;
    top: 0;
    padding: 20px; /* Optional padding for content */
}

/* Main content area adjustment */
.content {
    margin-left: 270px; /* Leave space for the sidebar */
    padding: 20px;
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: var(--bs-tertiary-bg);
}

.main-content {
    position: relative !important;
    flex-grow: 1 !important; /* Allow main content to take the remaining width */
    overflow: hidden !important; /* Hide overflow */
    min-height: 100vh !important; /* Ensure it takes at least the full height of the viewport */
    filter: none !important;
}

.responsive-image {
    position: absolute;
    top: 50%;
    left: calc(50% + 350px / 2);
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

.scope-active {
    border: 1px dashed white;
}

.scope-inactive {
    border: 1px dashed rgba(0,0,0,0);
}

.image-wrapper {
    opacity: 1; /* ensures full opacity */
}

.heart-checkbox {
    display: none; /* Hide the default checkbox */
}

.heart-label {
    cursor: pointer;
    font-size: 15px; /* Adjust size as needed */
    color: grey; /* Default color */
    transition: color 0.3s ease; /* Smooth transition for color */
}

.heart-checkbox:checked + .heart-label {
    color: #ffcc99;
}

/* app.css or any custom CSS */
.btn-outline-primary {
    background-color: var(--button-bg-color) !important;
    border-color: var(--text-color) !important;
    color: var(--text-color) !important;
    margin: 0px !important;
    height: 31px !important;
    border-radius: 0rem !important; /* Adjust the value for less rounding; set to 0 for square corners */
}

.btn-outline-primary:hover {
    background-color: var(--button-hover-color) !important;
}

.form-select {
    background-color: var(--button-bg-color) !important;
    border-color: var(--text-color) !important;
    color: var(--text-color) !important;
    border-radius: 0rem !important; /* Adjust the value for less rounding */
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none;
}

.form-select:hover {
    background-color: var(--button-hover-color) !important;
    border-color: var(--text-color) !important;
    color: var(--text-color) !important;
}

/* Focus state for form-select */
/*.form-select:focus {
/*    background-color: var(--button-focus-color); /* Custom background color */
/*    border-color: var(--text-color); /* Custom border color */
/*    box-shadow: 0 0 0 0.25rem rgba(255, 99, 71, 0.25); /* Optional focus shadow */
/*    outline: none; /* Remove the default focus outline */
/*}

/* Custom dropdown arrow color */
.form-select::after {
    border-top-color: var(--text-color); /* White arrow */
    border-width: 0.4em; /* Adjust arrow size if needed */
    border-radius: 0rem !important; /* Adjust the value for less rounding */
}


.form-check-input
{
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/*/* Change default checkbox background and border color */
/*.form-check-input {
/*    background-color: var(--light-bg-color); /* Default background color */
/*    border: 2px solid var(--text-color); /* Default border color */
/*}
/*
/* Change checkbox appearance when checked */
.form-check-input:checked {
    background-color: black !important; /* Custom background color when checked */
    border-color: var(--text-color) !important; /* Custom border color when checked */
}
/*
/*/
/*.form-check-input:checked:after {
/*    background-color: var(--dark-bg-color); /* Color of the tick */
/*}
/*
/* Change border color on hover */
/*.form-check-input:hover {
/*    border-color: #f1ede8; /* Custom hover border color */
/*}
/*
/* Change outline color on focus */
/*.form-check-input:focus {
/*    border-color: #f1ede8; /* Custom hover border color */
/*    outline: none; /* Remove default focus outline */
/*    box-shadow: 0 0 0 0.2rem #363331; /* Optional focus shadow */
/*}

/* Set a less rounded appearance for all buttons */

.btn.dropdown-toggle-no-arrow::after {
    display: none; /* Remove the arrow */
}

/* Set a less rounded appearance for all checkboxes */
.form-check-input {
    border-radius: 0 !important; /* Set to 0 for square corners; adjust as needed */
}