:root {
    /* Define your colors (using HEX without the alpha suffix for simplicity) */
    --opacity: 0.6;
    --black-olive: #3f3f37;
    --dutch-white: #d6d6b1;
    --drab-dark-brown: #494331;
    --battleship-gray: #878472;
    --flame: #de541e;

    --black-olive-rgba: rgba(63, 63, 55, var(--opacity));
    --battleship-gray-rgba: rgba(135, 132, 114, var(--opacity));
    --dutch-white-rgba: rgba(214, 214, 177, var(--opacity));

    /* Example gradients using the defined colors */
    --gradient-top: linear-gradient(0deg, var(--black-olive), var(--dutch-white), var(--drab-dark-brown), var(--battleship-gray), var(--flame));
    --gradient-right: linear-gradient(90deg, var(--black-olive), var(--dutch-white), var(--drab-dark-brown), var(--battleship-gray), var(--flame));
    --gradient-bottom: linear-gradient(180deg, var(--black-olive), var(--dutch-white), var(--drab-dark-brown), var(--battleship-gray), var(--flame));
    --gradient-left: linear-gradient(270deg, var(--black-olive), var(--dutch-white), var(--drab-dark-brown), var(--battleship-gray), var(--flame));
    /* You can define additional gradient variables as needed */
}

.body {
    --dutch-white: #d6d6b1;
    background: var(--dutch-white)
}

.notify-success, .alert-conatiner-win {
    --dutch-white: #d6d6b1;
    --drab-dark-brown: #494331;
    background-color: var(--dutch-white);
    border-radius: 1rem;
    border: .08rem solid;
    border-color: green;
    box-shadow: 2px 8px 16px rgba(63, 63, 55, 0.15); /* subtle shadow using black-olive tone */
}

.notify-Danger, .alert-conatiner-lose {
    --dutch-white: #d6d6b1;
    --drab-dark-brown: #494331;
    background-color: var(--dutch-white);
    border-radius: 1rem;
    border: .08rem solid;
    border-color: darkred;
    box-shadow: 2px 8px 16px rgba(63, 63, 55, 0.15); /* subtle shadow using black-olive tone */
}

.ColorOne{
    --black-olive: #3f3f37;
    --dutch-white: #d6d6b1;
    --drab-dark-brown: #494331;
    --battleship-gray: #878472;
    background: var(--black-olive);
}

.ColorTwo {
    --black-olive: #3f3f37;
    --dutch-white: #d6d6b1;
    --drab-dark-brown: #494331;
    --battleship-gray: #878472;
    background: var(--dutch-white);
}

.ColorThree {
    --black-olive: #3f3f37;
    --dutch-white: #d6d6b1;
    --drab-dark-brown: #494331;
    --battleship-gray: #878472;
    background: var(--battleship-gray);
}

.ColorFour {
    
    --dutch-white: #d6d6b1;
    --drab-dark-brown: #494331;
    --battleship-gray: #878472;
    background: var(--drab-dark-brown)
}

.form-container{
    background: var(--battleship-gray);
}

.text-color-primary {
    --drab-dark-brown: #494331;
    --flame: #de541e;
    color: var(--flame);
}


/*============================================*/
/*               Navbar styles                */
/*============================================*/
.navbar {
    --drab-dark-brown: #494331;
    background: var(--drab-dark-brown);
}

.navbar-brand span {
    --flame: #de541e;
    color: var(--flame);
}

.navbar .nav-item .nav-link {
    --flame: #de541e;
    --dutch-white: #d6d6b1;
    color: var(--dutch-white);
}

    .navbar .nav-item .nav-link:hover {
        --flame: #de541e;
        color: var(--flame);
    }

.btn-flame i {
    --flame: #de541e;
    --dutch-white: #d6d6b1;
    color: var(--dutch-white);

}



/*============================================*/
/*               Sidebar styles               */
/*============================================*/
.sidebar-wrapper {
    --black-olive: #3f3f37;
    background: var(--black-olive);
    width: 250px;
    height: 100vh;
}

.side-menu {
    --black-olive: #3f3f37;
    background: var(--black-olive);
    height: 100vh;
}

     .side-menu .nav-item .nav-link{
        --dutch-white: #d6d6b1;
        color: var(--dutch-white)
    }
        .side-menu .nav-item .nav-link:hover{
            --flame: #de541e;
            color: var(--flame)
        }


@media (max-width: 767.98px) {
    .collapse-horizontal {
        position: fixed;
        top: 56px;
        left: 0;
        height: 100vh;
        width: 250px;
        background-color: #f8f9fa;
        z-index: 1030;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        opacity: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

        .collapse-horizontal.show {
            opacity: 1;
            transform: translateX(0);
        }

        .collapse-horizontal:not(.show) {
            pointer-events: none; /* Prevent interaction */
            opacity: 0;
        }
}

/*============================================*/
/*                Form styles                 */
/*============================================*/



.form-container, .page-title {
    --black-olive: #3f3f37;
    --dutch-white: #d6d6b1;
    --drab-dark-brown: #494331;
    --battleship-gray: #878472;
    background-color: var(--dutch-white);
    border-radius: 1rem;
    box-shadow: 4px 8px 16px rgba(63, 63, 55, 0.15); /* subtle shadow using black-olive tone */
    padding: 2rem;
    margin-bottom: 2rem;
}

.input-control{
    --dutch-white: #d6d6b1;
    --battleship-gray: #878472;
    background-color: var(--dutch-white);
    border-radius: .5rem;
    border: 2px solid var(--battleship-gray);
    width: 100%;
    padding: 1rem;
}

.label-control {
    --drab-dark-brown: #494331;
    color: var(--drab-dark-brown);
    margin-bottom: .5rem;
}

/*============================================*/
/*             TripListing styles             */
/*============================================*/

.card-container {
    --dutch-white: #d6d6b1;
    --drab-dark-brown: #494331;
    background-color: var(--dutch-white);
    border-radius: 1rem;
    border: .08rem solid;
    border-color: var(--drab-dark-brown);
    box-shadow: 2px 8px 16px rgba(63, 63, 55, 0.15); /* subtle shadow using black-olive tone */
}

.notify-success, .alert-conatiner-win {
    --dutch-white: #d6d6b1;
    --drab-dark-brown: #494331;
    background-color: var(--dutch-white);
    border-radius: 1rem;
    border: .08rem solid;
    border-color: darkgreen;
    box-shadow: 2px 8px 16px rgba(63, 63, 55, 0.15); /* subtle shadow using black-olive tone */
}

.notify-Danger ,.alert-conatiner-lose {
    --dutch-white: #d6d6b1;
    --drab-dark-brown: #494331;
    background-color: var(--dutch-white);
    border-radius: 1rem;
    border: .08rem solid;
    border-color: darkred;
    box-shadow: 2px 8px 16px rgba(63, 63, 55, 0.15); /* subtle shadow using black-olive tone */
}

.card-container:hover{
    border-color: var(--flame);
}

.card-body {
    --drab-dark-brown: #494331;
    color: var(--drab-dark-brown);
}

/*============================================*/
/*               Footer styling               */
/*============================================*/
.footer {
    --dutch-white: #d6d6b1;
    --drab-dark-brown: #494331;
    background-color: var(--drab-dark-brown);
    color: var(--dutch-white);
}

    .footer span:hover {
        --flame: #de541e;
        color: var(--flame);
        cursor: pointer;
    }

/* Button customization */
.btn-primary {
    background-color: var(--flame);
    border-color: var(--flame);
}

    .btn-primary:hover {
        background-color: var(--battleship-gray);
        border-color: var(--battleship-gray);
    }

@media (max-width: 1199px) {
    .menu {
        z-index: 99;
       /* display: none;
        left: -250px;*/
        color: var(--flame);
        Background: blue;
    }

}

.layout-main {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}


/*============================================*/
/*             Login Form styling             */
/*============================================*/

.loginBody {
    --flame: #de541e;
    --gradient-right: linear-gradient(90deg, var(--dutch-white), var(--battleship-gray));
    background: var(--gradient-right);
}

.bg-container .social-icons a {
    display: inline-flex;
    padding: 10px;
    border: 2px solid var(--drab-dark-brown);
    border-radius: 8px;
    font-size: 24px;
    color: var(--flame);
    text-decoration: none;
    margin: 0 6px;
}


.bg-container .social-icons a:hover {
        --flame: #de541e;
        background-color: var(--drab-dark-brown);
}



.bg-container .bg-light{
    background: var(--dutch-white);
}