@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
:root{
    --background-color: rgba(0, 128, 255, 0.7);
    --text-color: #fff9f9;
    --button-color: rgb(16, 146, 16);
    --button-color-dark: rgb(42, 154, 42);
    --bg-footer: linear-gradient(to bottom, #53a8fd, #0066cc);
    --heading-font-style : 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  
  }
body {
    font-family: 'Roboto', sans-serif;
    /* background-color: #f4f4f9; */
}
.profiles {
    display: flex;
    width: 100%;
    padding-top: 60px;
    bottom: 60px;
    height: 120vh;
    flex-direction: column;
    padding-left: 30px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    /* background-color: #4a4a4a; */
}


 .sidebar {
    height: 100%;
    width: 230px;
    /* border: 2px red solid; */
    /* position: sticky; */
    padding-top: 20px;
  }
.sidebar-top{
    /* border: 1px red solid; */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;

}

.sidenavhello{
    padding: 12px;
    
font-family: Roboto;
font-size: 14px;
font-weight: 300;
/* line-height: 16.41px; */
text-align: left;

}

.sidenavhello>h2{
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 18.75px;
text-align: left;
}
.sidebar-top>img {
    width: 60px;
height: 60px;
top: 390px;
left: 71px;
gap: 0px;
opacity: 0px;
border-radius: 50%;
}

.sidebar-buttom {
    background-color: #f8f9fa;
    border-radius: 10px; /* Rounded corners for a modern look */
    padding: 15px; /* Space inside the container */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    width: 230px; /* Fixed width for a neat layout */
    margin: 20px auto;
    font-family: 'Arial', sans-serif; /* Clean font style */
}

.sidebar-buttom ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.sidebar-buttom ul li {
    margin-bottom: 10px; /* Space between items */
}

.sidebar-buttom ul li a {
    text-decoration: none; /* Remove underline */
    color: var(--background-color); /* Primary color for links */
    font-weight: bold; /* Bold text for better readability */
    display: block; /* Make the link fill the entire clickable area */
    padding: 10px 15px; /* Space around the text */
    border-radius: 5px; /* Rounded edges for links */
    transition: all 0.3s ease; /* Smooth hover effect */
}

    .sidebar-buttom>ul>li>a:hover,
    .sidebar-buttom>ul>li>a:focus {
        background-color: #f0f0f5;
    }

    .userprofile-content{
        
        width: 1000px;
        position:static;
        top: 90px;
        margin: 50px;
        overflow-y: scroll;
    }
    
    .contents{
        /* flex: 1; */
        padding: 20px;
        background: #ffffff;
        
     height: auto !important;
     width: 100%;
     /* z-index: 1000; */
    }
    /* Adding some styling for inner divs to demonstrate the layout */
    .inner-div {
        background-color: #f0f0f0;
        padding: 10px;
        margin: 10px 0;
    }
    
    .tabs {
        display: flex;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 20px;
    }
    .tabs button {
        background: none;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 16px;
        color: #4a4a4a;
        border-bottom: 2px solid transparent;
        transition: border-bottom 0.3s ease;
    }
    .tabs button.active {
        border-bottom: 2px solid #703fc8;
        color: #703fc8;
    }
    .search {
        margin: 20px 0;
        display: flex;
    }
    .search input {
        width: calc(100% - 150px);
        padding: 10px;
        font-size: 16px;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        margin-right: 10px;
    }
    .search button {
        padding: 10px 20px;
        font-size: 16px;
        background-color: #C551CEF2;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: 400;
    }
    .order-list {
        list-style: none;
        padding: 0;
    }
    .order-item {
        display: flex;
        align-items: center;
        /* border-bottom: 1px solid #e0e0e0; */
        margin-bottom:12px;
        border-radius: 10px;
    }
    /* .order-item:hover{
        background-color: #f0f0f5;
    } */
    .order-item img {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        margin-right: 20px;
    }
    .order-details {
        flex: 1;
    }
    .order-details h2 {
        margin: 0;
        color: #333;
        font-size: 18px;
    }
    .order-details p {
        margin: 5px 0;
        color: #666;
    }
    .price {
        font-weight: bold;
        color: #50b849;
    }
    .status {
        color: #ff6f61;
    }
    .delivered {
        color: #50b849;
    }
    .statusform>.co_button{
        background-color: #C551CEF2;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: 400;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: 160px;
      }
      .co_button{
        background-color: #C551CEF2;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: 400;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: 16%;
      }
      .view_orders{
        width: 115px;
height: 36px;
top: 560px;
left: 1216px;
gap: 0px;
border-radius: 5px 5px 5px 5px;
border: 1px 0px 0px 0px;
opacity: 0px;
background-color: white;
border: 1px solid #B117BD;
/* //styleName: Body 1; */
font-family: Outfit;
font-size: 16px;
font-weight: 400;
line-height: 20.16px;
/* text-align: left; */
color: #B117BD;

      }
      .order-details:hover{
        background-color: #f0f0f5;;
      }
      .order-details {
        background: #fff;
        /* border-radius: 10px; */
        width: 100%;
        /* padding: 20px; */
        display: flex;
        /* width: 1055px; */
height: 90px;
/* top: 533px; */
/* left: 304px; */
gap: 0px;
border-radius: 8px;
border: 1px 0px 0px 0px;
opacity: 0px;
border: 1px solid #E8E8E8;
align-items: center;
justify-content: space-between;
padding: 16px;

    }
    .order_images_lists{
        display: flex;
    }
.order_id_values{
        /* justify-content: center; */
        padding-top: 6px;
    }
    
    .order_images_lists> img{
width: 58.82px;
height: 58.82px;
top: 548.59px;
left: 410.59px;
gap: 0px;
border: 1px 0px 0px 0px;
opacity: 0px;
border: 1px solid #77297D;

    }
    .order_id_values>b{
        width: 168px;
height: 19px;
/* top: 559px; */
/* left: 570px; */
gap: 0px;
opacity: 0px;
font-family: Roboto;
font-size: 16px;
font-weight: 600;

    }
    .delivery_dates{
        /* width: 171px; */
height: 13px;
top: 584px;
left: 570px;
gap: 0px;
opacity: 0px;
font-family: Roboto;
font-size: 11.25px;
font-weight: 400;
line-height: 13.18px;
text-align: left;
color: #666666;
    }

    .progress-container {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .progress-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    
    .progress-bar::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #ddd;
        z-index: -1;
    }
    
    .step {
        text-align: center;
        flex: 1;
        position: relative;
    }
    
    .bullet {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        color: white;
    }
    
    .completed .bullet {
        background-color: #4caf50;
    }
    
    .completed p {
        color: #4caf50;
    }
    
    .customer-details,
    .order-summary {
        margin-bottom: 20px;
    }
    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .item-name {
        flex: 2;
        font-weight: bold;
    }
    
    .item-status {
        flex: 2;
        text-align: center;
        background-color: #e0e0e0;
        border-radius: 5px;
        padding: 5px;
    }
    
    .item-details {
        flex: 3;
        text-align: center;
        color: #888;
    }
    
    .item-price {
        flex: 1;
        text-align: right;
    }
    
    .total, .delivery-charges, .grand-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #ddd;
    }
    
    
    
    
    .item-imgs>img{
        height: 100px;
        width: 100px;
    }
    button:hover {
        opacity: 0.8;
    }		
    
    /* Responsive */
    @media (max-width: 600px) {
        .order-details {
            padding: 10px;
        }
    
        .step p {
            font-size: 14px;
        }
    
        
    }
        


/* LOG OUT CSS */
/* General container styling */
.logout-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Full viewport height */
    background-color: #f9f9f9; /* Light background */
    font-family: 'Arial', sans-serif; /* Clean font */
}

/* Form styling */
.logout-form {
    background-color: #ffffff; /* White background */
    padding: 30px; /* Space inside the form */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 100%;
    max-width: 400px; /* Limit form width */
    text-align: center; /* Center-align content */
}

/* Heading styling */
.logout-form .heading h1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333333; /* Darker text color */
}

/* Paragraph styling */
.logout-form .paragraph {
    font-size: 16px;
    margin-bottom: 20px;
    color: #555555; /* Subtle text color */
}

/* Button container styling */
.logout-div {
    display: flex;
    justify-content: space-between; /* Space out buttons */
    gap: 10px; /* Add spacing between buttons */
    margin-top: 20px;
}

/* Button styling */
.fb_btn {
    display: inline-block;
    padding: 10px 20px; /* Button size */
    font-size: 16px;
    font-weight: bold;
    color: #ffffff; /* White text */
    background-color: #007bff; /* Primary blue color */
    border: none; /* Remove borders */
    border-radius: 5px; /* Rounded button corners */
    text-align: center;
    text-decoration: none; /* Remove underline */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth hover effect */
}

.fb_btn.styling:hover {
    background-color: #0056b3; /* Darker blue on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

/* Cancel button specific styling */
.fb_btn.styling:last-child {
    background-color: #6c757d; /* Gray color for Cancel */
}

.fb_btn.styling:last-child:hover {
    background-color: #495057; /* Darker gray on hover */
}