/* Override Bootstrap primary button color */
.btn-primary {
    background-color: #f28f31;
    border-color: #f28f31;
}
/* Override Bootstrap primary button color */
.btn-primary {
    background-color: #f28f31;
    border-color: #f28f31;
}

.btn-primary:hover {
    background-color: #d97a29;
    border-color: #d97a29;
}
.btn-outline-primary {
    background-color: white;
    border-color: rgb(51,65,86);
    color: rgb(51,65,86);
}

.btn-outline-primary:hover {
    background-color: rgb(51,65,86);
    border-color: rgb(51,65,86);
    text: white;
}
.btn-jnd {
    background-color: rgb(51,65,86);
    border-color: rgb(51,65,86);
    color: white;
    text: white;
}

.btn-jnd:hover {
    background-color: white;
    border-color: rgb(51,65,86);
    color: rgb(51,65,86);
}
/* Define the transition for the navbar */
#mainNav {
    transition: background-color 0.3s ease, padding 0.3s ease;
}
#mainNav.navbar-shrink {
    border-bottom: 1px solid rgba(45, 45, 45, .1);
    background-color: #fff;
    color: #000000;
}

#mainNav.navbar-shrink-dark {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--bs-body-bg);
    color: #ffffff;
}
/* Define a trigger area for the hover event */                                                                                                                                                                                                                                                                                                                     
#hover-trigger {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 10px;
    z-index: 1045; /* Make sure it is above other content */
    cursor: pointer;
}   
/* Arrow Indicator Styling */
#arrow-indicator {
    position: fixed;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    font-size: 24px;
    color: #6c757d; /* Muted color */
    opacity: 0.7;
    z-index: 1044; /* Below the hover trigger and offcanvas */
    cursor: pointer;
}   
/* Adjust trigger area and arrow for mobile, to account for touch input */
@media (max-width: 767px) {
    #hover-trigger {
        width: 30px;
        z-index: 10; 
    }   
    #arrow-indicator {
        right: 20px;
    }   
}   
.dragging {
    opacity: 0.5;
}   

.drag-over {
    border: 2px dashed #007bff;
    margin-left: -2px;
    margin-right: -2px;
}   
.no-decoration {
    text-decoration: none;
    color: inherit; /* Ensure the link color matches the text color */
}   

.no-decoration:hover {
    text-decoration: underline; /* Or any decoration you prefer on hover */
    color: inherit;
}   
        /* Fade in transition */
        .fade-content {
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .fade-content.show {
            opacity: 1;
        }