/* Add your CSS styles here */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

h1 {
    font-family: 'Arial', sans-serif;
    font-size: 28px;
    color: #333333;
}

h2 {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    color: #333333;
}

h2 a {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    color: #333333;
}


h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    line-height: 26px;
}

.spacer-4 {
    height: 4px;
}

.spacer-8 {
    height: 8px;
}

.spacer-16 {
    height: 16px;
}

.spacer-24 {
    height: 24px;
}


.spacer-32 {
      height: 32px;
}

.spacer-40 {
      height: 40px;
}


.spacer-64 {
    height: 64px;
}

.spacer-80 {
    height: 80px;
}

.spacer-hybrid-80-120 {
    height: 120px;
}

.spacer-hybrid-16-80 {
    height: 16px;
}

.spacer-hybrid-16-0 {
    height: 0;
}


.spacer-hybrid-80-104 {
    height: 104px;
}

.spacer-hybrid-16-40 {
    height: 40px;
}

.margin-flex-top-74-0 {
        margin-top: -74px;
        position: relative;   /* create stacking context */
        z-index: 2;   
}


 .loading {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            font-size: 1.5em;
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 5px;
        }

/* Styles for status circles */
.status-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    border: 1px solid transparent; /* Added border to make the circle visible */
}

/* Green circle for In Progress status */
.status-circle.in-progress {
    background-color: #80E27E;
}

/* Yellow circle for Pending status */
.status-circle.pending {
    background-color: #F5CE82;
}

/* Blue circle for Scheduled status */
.status-circle.scheduled {
    background-color: #DEFFD8;
    border-color: #63A567;
}

/* White circle with grey border for Completed status */
.status-circle.complete {
    background-color: #ffffff;
    border-color: #979797;
}

/* Color circle for Unassigned status */
.status-circle.unassigned {
    background-color: #EB7F7F;
    border-color: #EB7F7F;
}

/* Yellow circle for Pending status */
.status-circle.paid {
    background-color: #B0E5F8;
}

/* Yellow circle for Pending status */
.status-circle.invoiced {
    background-color: #ffffff;
    border-color: #cccccc;
}


/* Yellow circle for Pending status */
.status-circle.cancelled {
    background-color: #f7f7f7;
    border-color: #0000002e;
}

/* Calendar event look */
.fc .status-cancelled,
.fc .status-cancelled.cs-event {
  background: #f3f4f6 !important; /* light gray */
  color: #6b7280 !important;
  text-decoration: line-through;
  opacity: 0.75;
  margin: 4px 6px 4px -1px;
  padding: 4px 3px 4px 3px;
  border: 1px solid #cccccc;
  cursor: pointer;
}


.container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0px 20px;
    margin-top: 0px;
}

.terms-checkbox {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.terms-checkbox input[type="checkbox"] {
    display: none;
}

.terms-checkbox label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    padding-top: 10px;
}

.terms-checkbox label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border: 2px solid #cccccc;
    border-radius: 6px;
    background-color: white;
    padding-left: 2px;
    padding-top: 4px;
}

.terms-checkbox input[type="checkbox"]:checked + label::before {
    content: url(/Icons/green_check.svg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-color: #cccccc;
    width: 28px;
    height: 28px;
    padding-left: 2px;
    padding-top: 4px;
}

/* Checkbox used inn tables */
 .styled-checkbox {
        appearance: none;
        background-color: #fff;
        border: 1px solid #d1d1d1;
        padding: 16px;
        border-radius: 4px;
        display: inline-block;
        position: relative;
        cursor: pointer;
        width: 28px;
        height: 28px;
        outline: none;
        margin: 2px 2px;
    }

    .styled-checkbox:checked {
        background-color: #ffffff;
        border-color: #cccccc;
        border: 1px solid #d1d1d1;
        outline: none;
        padding: 16px;
    }

    .styled-checkbox:checked::before {
        content: url(/Icons/green_check.svg);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        position: absolute;
        top: 4px;
        left: 3px;
    }
    .styled-checkbox:focus {
        border-color: #007bff;
        outline: none;
        border: 1px solid #d1d1d1;
        background-color: #ffffff;
    }



/* Apply similar styling to select elements as input fields */
select {
   height: 48px;
    border-radius: 8px;
    border: 1px solid #D1D1D1;
    padding: 0 16px; /* Adjust padding as needed */
    font-size: 18px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 24px;
    margin-top: 6px;
    color: #333333;
    appearance: none; /* Remove default appearance to apply custom styles */
    -webkit-appearance: none; /* For Safari */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333333" width="24" height="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 16px center; /* Use an inline SVG for the caret-down icon */
    background-size: 24px; /* Adjust size of the icon */
}

/* Style for caret-down icon inside select */
select::after {
    content: '\25BC'; /* Unicode for the caret-down icon */
    position: absolute;
    top: 50%;
    right: 16px !important; /* Adjust right margin as needed */
    transform: translateY(-50%);
    font-size: 18px; /* Adjust caret icon size as needed */
    color: #333333; /* Match the color of the caret icon with text color */
}

/* Style for option elements within the select dropdown */
select option {
   
    /* Add other styles as needed */
}

/* Style for hover effect on option elements */
select option:hover {
     border: 3px solid #4CAF50; /* Change border thickness and color on focus */
    /* Add other hover styles as needed */
}


input {
    height: 48px;
    border-radius: 8px;
    border: 1px solid #D1D1D1;
    padding: 0 16px;
    font-size: 18px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 24px;
    margin-top: 6px;
    color: #333333;
}

input:focus {
    border: 3px solid #4CAF50; /* Change border thickness and color on focus */
    outline: none; /* Remove default focus outline */
}


label {
    font-size: 16px;
    margin-bottom: 2px;
    color: #333333;
}


/* CSS for textarea to resemble input style */
textarea {
    height: 48px; /* Same height as input */
    border-radius: 8px;
    border: 1px solid #D1D1D1;
    padding: 10px; /* Adjust padding as needed */
    font-size: 18px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 24px; /* Adjust margin as needed */
    margin-top: 6px; /* Adjust margin as needed */
    color: #333333;
    resize: none; /* Disable resizing */
    line-height: 1.5; /* Adjust line height as needed */
    transition: border-color 0.3s ease; /* Add transition for border color change */
    padding: 8px;
    font-family: Arial, sans-serif; /* Set font-family to Arial */
}

/* CSS for textarea when focused */
textarea:focus {
   border: 3px solid #4CAF50; /* Change border thickness and color on focus */
    outline: none; /* Remove default focus outline */
    padding: 8px;
}

/* CSS for textarea when hovered */
textarea:hover {
     border: 3px solid #4CAF50; /* Change border thickness and color on focus */
    outline: none; /* Remove default focus outline */
    padding: 8px;
}


p {
    font-size: 18px;
    height: 24px;
    color: #333333;
    display: inline;
}

.textarea-field {
        width: 100%; /* Set width to 100% */
       padding: 0;
       font-size: 18px;
       font-family: Arial;
       color: #333333;
       width: 91% !important;
}

.form-group {
    padding: 0;
    width: 100%;
    margin: 0;
}



.limit-width {
    max-width: 400px;
}


#menu-btn {
    cursor: pointer; /* Change cursor to pointer */
}

#menu-btn:hover {
    cursor: pointer; /* Change cursor to pointer on hover */
}

/* Style for the horizontal line */
hr.divider {
    border: 0;
    border-top: 1px solid #cccccc;
    margin-top: 0px;
    clear: both;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* Adjusted padding */
    max-width: 980px;
    margin: 0 auto;
    height: 65px;
    position: relative;
}

nav div {
}

nav a {
    text-decoration: none;
    color: #333;
}

main {
    margin-top: 0px;
}

.tab-content {
    display: block;
}

.active {
    display: block;
}

.menu-align {
    align-items: center;
}

footer {
   text-align: center;
   padding: 20px 16px 28px 16px;
}

nav.tabs {
    background-color: #ffffff;
    padding: 10px 0;
    text-align: center;
    font-family: 'Lato', sans-serif; /* Use Lato font */
    text-wrap: nowrap;
    display: inline-flex;
     overflow-x: auto; /* Enable horizontal scrolling */
        white-space: nowrap; /* Prevent tabs from wrapping to the next line */
}

nav.tabs a {
    text-decoration: none;
    color: #333;
    padding: 10px;
    font-weight: 800px;
    /*border: 1px solid #79747E; */
    border-radius: 8px;
    margin-right: 16px; /* Add space between tabs */
    min-width: auto;
    width:100%;
    padding: 8px 16px;
}

.tabs a {
    display: inline-block; /* Ensure inline-block display */
    text-decoration: none;
    color: #333;
    margin-right: 20px; /* Adjust spacing between tabs */
    align-items: center; /* Align items vertically */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Style for the icon */
.tabs a .icon {
    width: 24px; /* Adjust width as needed */
    height: 24px; /* Adjust height as needed */
    margin-right: 5px; /* Adjust spacing between icon and text */
}

/* Increase line height for the text */
.tabs a span {
    line-height: 28px !important; /* Adjust line height as needed */
}

.tab-link {
    display: flex;
    align-items: center;
    margin-right: 40px;
    padding-bottom: 10px;
}

.tab-link.active {
    display: flex;
    align-items: center;
    margin-right: 28px;
    
    padding-bottom: 10px;
    width: fit-content;
}

.tab-link.active span {
    font-size: 18px !important;
}

.tab-link img {
    margin-right: 7px; /* Adjust margin as needed */
    margin-bottom: 2px;
}

.tab-link span {
    font-size: 16px; /* Adjust font size as needed */
    line-height: 1.5; /* Adjust line height as needed */
}




/* Style for active tab */
nav.tabs a.active {
    /*background-color: aliceblue; *//* M3/sys/light/surface */
    /* border: 1px solid #1D1B20; *//* M3/sys/light/on-surface */
    border-radius: 8px;
   
    font-family: 'Lato', sans-serif; /* Use Lato font */
}

/* Style for active tab */
.active-tab {
    background-color: #FEF7FF; /* M3/sys/light/surface */
    border: 1px solid #1D1B20; /* M3/sys/light/on-surface */
    border-radius: 8px;
    padding: 10px 16px; /* Adjusted padding */
    font-family: 'Lato', sans-serif; /* Use Lato font */
}

/* Log Out button */
#logout-btn {
    margin-left: auto;
}

.button-small-green {
    background-color: #ffffff; /* Green */
        border: 2px solid #4CAF50;
        color: #208B1E;
        padding: 10px 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin: 8px 0;
        cursor: pointer;
        border-radius: 8px;
        width: auto;
        font-weight: 600;
}

.button-small-grey {
    background-color: #ffffff; /* Green */
        border: 2px solid #979797;;
        color: #333333;
        padding: 10px 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin: 8px 0;
        cursor: pointer;
        border-radius: 8px;
        width: auto;
        font-weight: 600;
}

.button-small-yellow {
    background-color: #FFF8EA; /* Green */
        border: 2px solid #BC9342;;
        color: #AB7D23;
        padding:10px 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin: 8px 0;
        cursor: pointer;
        border-radius: 8px;
        width: auto;
        font-weight: 600;
}

.button {
    background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 8px 0;
        cursor: pointer;
        border-radius: 8px;
        width: 100%;
}


.button-disabled {
    background-color: #D1E6CE; /* Light gray */
    border: none;
    color: #ffffff; /* Dark gray */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 8px 0;
    border-radius: 8px;
    width: 100%;
    cursor: not-allowed; /* Change cursor to indicate it's disabled */
    pointer-events: none; /* Disable pointer events */
}




.button:hover {
        background-color: #45a049; /* Darker green on hover */
    }

.button-secondary {
    background-color: #ffffff; /* Green */
    border: 1px solid #cccccc;
    color: #333333;
    padding: 15px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 8px 0;
    cursor: pointer;
    border-radius: 8px;
    width: 100%;
}

.button-secondary:hover {
    background-color: #e7e7e7; /* Green */
    border: none;
    color: #333333;
    padding: 15px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 8px 0;
    cursor: pointer;
    border-radius: 8px;
    width: 100%;
}

.button-secondary-small {
    background-color: #ffffff; /* Green */
    border: 1px solid #cccccc;
    color: #333333;
    padding: 11px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 8px 0;
    cursor: pointer;
    border-radius: 8px;
    width: 100%;
}



.button-reset {
    background-color: #ffffff; /* Green */
    border: none;
    color: #333333;
    padding: 15px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 8px 0;
    cursor: pointer;
    border-radius: 8px;
    width: 100%;
}

.button-reset:hover {
    background-color: #e7e7e7; /* Green */
    border: none;
    color: #333333;
    padding: 15px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 8px 0;
    cursor: pointer;
    border-radius: 8px;
    width: 100%;
}



/* Style for the delete button */
.button-delete {
    background-color: #FFD6D6;
    color: red;
    border: none;
    padding: 15px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 8px 0;
    cursor: pointer;
    border-radius: 8px;
    width: 100%;
}

/* Hover effect for the delete button */
.button-delete:hover {
    background-color: red;
    color: white;
}

.button-delete:focus {
    border: none; /* Change border thickness and color on focus */
}

/* Style for the delete button */
.button-delete-disabled {
    background-color: #FFD6D6;
    color: grey;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: not-allowed; /* Indicates the button is disabled */
    width: 100%;
    height: 52px;
    justify-content: center; /* Aligns child divs along the horizontal center line */
    align-items: center; 
    font-size: 16px;
}

.button-delete-disabled:focus {
    border: none; /* Change border thickness and color on focus */
    background-color: #FFD6D6;
    color: grey;
    cursor: not-allowed; /* Indicates the button is disabled */
    width: 100%;
    height: 52px;
    justify-content: center; /* Aligns child divs along the horizontal center line */
    align-items: center; 
    font-size: 16px;
}

/* Disable hover effect for the delete button */
.button-delete-disabled:hover {
    background-color: #FFD6D6;
    color: grey;
    cursor: not-allowed; /* Indicates the button is disabled */
    width: 100%;
    height: 52px;
    justify-content: center; /* Aligns child divs along the horizontal center line */
    align-items: center; 
    font-size: 16px;
}


   
.center-container {
    text-align: center;
}


/* CSS */
.time-select {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.time-select select {
    margin-right: 8px; /* Adjust margin as needed */

}

.time-select select:last-child {
    margin-right: 0;
}

/* CSS */
#time-container {
    display: flex;
    align-items: center;
}



.item-container.item-container-approved-pending {
    border: 2px solid #4CAF50; /* Green */
    border-radius: 5px; /* Optional: for rounded corners */
    background-color: #FAFEFA;
}


.item-container {
    box-sizing: border-box;
    padding: 16px 60px 16px 16px;
    background: #FFFFFF;
    border: 1px solid #DCDCDC;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
    border-radius: 8px !important;
    max-width: 400px;
    font-size: 18px;
    position: relative;
    font-family: 'Lato', sans-serif;
    margin-bottom: 16px;
}

.item-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 16px;
    margin-top: 0;
}

.cleaner-list {
    list-style-type: none;
     padding: 0;
     margin-bottom: 16px;
}

.item-list .cleaner-list li {
    margin-bottom: 16px; /* Adjust the value as needed */
}

.menu-options {
    display: none;
   

}

.menu-options.active {
    display: block;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
    border-radius: 8px !important;
    background-color: #ffffff;
    position: absolute;
    top: 50px;
    right: -20px;
    padding: 20px;
    border: 1px solid #cccccc;
    line-height: 40px;
    min-width: 100px;
    z-index: 999;
}

.menu-options.active a {
    color: #333333;
    text-decoration: none;
}

.menu-options.active a:hover {
    color: #333333;
    text-decoration: underline;
}

.menu-options .disabled-option {
    display: flex;
    align-items: center;
    color: #888888; /* Grey color for disabled text */
    cursor: not-allowed;
    pointer-events: none; /* Disable pointer events to prevent clicking */
}

.menu-options .disabled-option span {
    display: flex;
    align-items: center;
    pointer-events: auto; /* Enable pointer events for the text and icon */
}

.menu-options .disabled-option span img {
    margin-left: 8px; /* Space between text and icon */
    pointer-events: none; /* Disable pointer events for the icon */
}


.output-format-1 {
    text-decoration: none;
    line-height: 28px;
    width: 100%;
    color: #333333;
    border: none;
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    resize: none; /* Disable resize handle */
    height: auto; /* Allow the textarea to adjust its height based on content */
    min-height: 100%; /* Set a minimum height of 100% */
    overflow-y: auto; /* Add a vertical scrollbar if needed */
}

.output-format-1-label {
    text-decoration: none;
    line-height: 24px;
    width: 100%;
    color: #333333;
    border: none;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.floating-button {
    position: absolute;
    top: -76px;
    right: -190px;
    padding-top: 10px;
    z-index: 1;
    width: auto;
    height: 62px;
    /* background-color: rgb(255 255 255 / 90%); */
    transform: translateX(-50%);
    /* border-radius: 8px; */
    padding: 10px 16px 0 16px;
    /* border: 1px solid #707070; */
    /* box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15); */
}

 
.back-arrow img {
    margin-right: 5px;
    width: 24px;
    height: 24px;
}

.breadcrumb {
    font-family: 'Roboto', sans-serif;
    padding: 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;

}


.breadcrumb a {
    text-decoration: none;
    color: #333;
    margin-right: 0px; 
    font-family: 'Arial', sans-serif;
}

.breadcrumb a:hover {
    text-decoration: underline;
}


p {
    text-decoration: none;
    line-height: 24px;
}

/* Kebab Menu */
.kebab-menu {
    position: absolute;
    top: 8px;
    right: 30px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 50%;
    display: block;
   }

   /* Style for backdrop */
.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 1000; /* Ensure it's above other content but below the modal */
}


/* Style for modal */
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 8px;
    z-index: 1001; /* Ensure it's above the backdrop */
    width: 400px;
}






.add-new-btn {
  display: inline-block;
  background-color: #4686EB;
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.add-new-btn:hover {
  background-color: #345497;
}

.icon {
  margin-right: 5px;
}

.text {
  font-size: 16px;
}

.source {
    font-weight: bold;
    color: #333; /* or any color you prefer */
    /* Add more styling as needed */
}

.airbnb-logo {
    position: absolute;
    bottom: 15px;
    right: 17px;
    width: 25px;
    height: auto;
    z-index: 1;
}


 .header-container {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); /* Adjust spread radius */
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    z-index: 299;
}


/* Style the drawer container */
.drawer-container {
    position: absolute;
    top: 75px; /* Position below the header */
    right: 30px; /* Align with the right edge of the header */
    width: 300px;
    height: auto; /* Adjust height as needed */
    background-color: #ffffff;
    overflow-x: hidden;
    transition: top 0.3s; /* Apply transition to top property */
    display: none;
    border: 1px solid #cccccc;
    border-radius: 8px;
    z-index: -999;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
}

/* Style the drawer content */
.drawer-content {
    padding: 20px;
    display: inline-table;
    align-items: center;
    width: 85%;
    text-decoration: none;
}

/* Style the drawer links */
.drawer-content a {
    display: block;
    margin-bottom: 16px;
    color: #333;
    text-decoration: none;
    font-size: 18px;
    line-height: 28px;
    align-items: center;
    display: flex;
}

.drawer-content a:hover {
    color: #000;
}

.drawer-content .icon {
    margin-right: 10px; /* Adjust spacing between icon and text */
    opacity: 0.60; /* Set opacity to 75% */
}


.drawer-content .link-text {
    font-size: 16px;
    color: #333; /* Set text color */
}

/* Adjust top position when the drawer is open */
.drawer-container.open {
}

 /* Style for the numbered list */
ol {
    list-style-type: none; /* Remove default numbering */
    counter-reset: my-counter; /* Reset the counter */
    padding-left: 0; /* Remove default left padding */

}

/* Style for each list item */


li {
  
     margin-bottom: 8px;
}

.homepage-banner {
    display: inline-flex;
}

.homepage-banner img {
    margin-right: 16px;
}


.plus-container {
    float: right;
}

.filter-container {
    display: flex;
    padding-right: 10px;
}

/* Ensure the tabs navigation occupies the full width */
.chips {

width: 100%; /* Set the width to 100% */
max-width: calc(100vw - 32px); /* Limit the maximum width to the viewport width minus some margin */
overflow-x: auto; /* Enable horizontal scrolling */
white-space: nowrap; /* Prevent links from wrapping to the next line */
display: block;
}

.chips a {
display: inline-block; /* Change the display to inline-block */
padding: 8px 16px; /* Apply padding to each link */
border: 1px solid #cccccc; /* Apply border to each link */
text-decoration: none; /* Remove default underline */
margin-right: 4px; /* Add some space between links (optional) */
color: #333333;
border-radius: 8px;
cursor: pointer;
}

.chips-active {
display: inline-block; /* Change the display to inline-block */
padding: 8px 16px; /* Apply padding to each link */
border: 1px solid #cccccc; /* Apply border to each link */
text-decoration: none; /* Remove default underline */
margin-right: 8px; /* Add some space between links (optional) */
color: #333333;
border-radius: 8px;
background-color: #E9E9E9;
}
   

.page-header-plus {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 8px 0 0; /* Adjusted padding */
max-width: 980px;
margin: 0 auto;
height: 65px;
position: relative;
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 35px);
    gap: 10px;
}

.grid-item {
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #cccccc;

}

.grid-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-fit: fill; /* Set object-fit to fill */
}




/* toggle switch */


        #passwordLabel {
    display: none; /* Hide the label by default */
}

       .switch {
    display: inline-block;
    vertical-align: middle; /* Align vertically in the middle */
    position: relative;
    width: 60px;
    height: 34px;
    margin-right: 8px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #4CAF50;
}

input:focus + .slider {
    box-shadow: 0 0 1px #4CAF50;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}


/* toggle switch */


.no_bookings {
    background-color: #f8d7da; /* Red background color */
    color: #721c24; /* Dark text color */
    padding: 10px 20px; /* Padding around the text */
    margin-bottom: 20px; /* Bottom margin to separate from other content */
    border: 1px solid #f5c6cb; /* Red border */
    border-radius: 4px; /* Rounded corners */
    display: none;
}




/* Modal styles */
#filter-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
    z-index: 9999; /* Ensure modal is on top of other content */
}

#assignment-filter-modal {
    display: none;
    
    width: 90%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    z-index: 9999; /* Ensure modal is on top of other content */
}


 #delete-assignment {
    display: none;
   
    width: 90%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    z-index: 9999; /* Ensure modal is on top of other content */
}

#modal-details {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
    z-index: 9998; /* Ensure modal is on top of other content */
}

#confirmation-modal {
    display: none;
    position: fixed;
    
    width: 90%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    z-index: 9999; /* Ensure modal is on top of other content */
}

#cancel-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
    z-index: 9999; /* Ensure modal is on top of other content */
}

#upgrade-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    z-index: 9999; /* Ensure modal is on top of other content */
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 450px;
    
}

.modal-content select {
    margin-bottom: 10px;
}

.modal-content button:hover {
    /* background-color: #0056b3; /* Darker blue color on hover */
}

/* Style for filter heading */
.filter-heading {
    text-align: center;
}

.filter-heading img {
    text-align: center;
    cursor: pointer;
}

#filter-indicator {
display: flex;
justify-content: center; /* Align horizontally */
align-items: center; /* Align vertically */
width: 24px;
height: 24px;
background-color: #707070;
border-radius: 50%;
position: absolute;
top: 11px;
right: 58px;
color: white;
font-size: 14px; /* Adjust font size as needed */
font-weight: bold; /* Make the number bold */
}

       
/* Modal End */


.notification {
position: fixed;
top: 7%; /* Position at 50% from the top */
left: 50%; /* Position at 50% from the left */
transform: translate(-50%, -50%); /* Center the snackbar */
z-index: 1000;
display: none;
padding: 10px 20px;
color: #fff;
background-color: #333;
border-radius: 5px;
width: 80%;
}

.notification.success {
    background-color: #4CAF50; /* Green */
}

.notification.error {
    background-color: #f44336; /* Red */
}


.error {
    color: red;
    padding-bottom: 16px;
}


 /* FullCalendar Start */

       
#calendar-container {
    margin-top: 0px;
    position: relative;
}

.fc-view-container *,
.fc-view-container :after,
.fc-view-container :before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    font-weight: 400;
    padding: 0;
    margin: 0;
}

.fc-day-header fc-widget-header fc-sat span {
    height: 24px;
}

.fc-toolbar .fc-left {
    float: left;
    padding-top: 7px !important;
}

.fc-toolbar.fc-header-toolbar .fc-left h2 {
    font-size: 18px;
    padding-top: 5px;
}

.fc .fc-toolbar>*>:first-child {
    margin-left: 0;
    font-size: 18px;
}

.fc-state-default.fc-corner-right {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    height: 34px;
}

.fc-state-default.fc-corner-left {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    height: 34px;
}

.fc-unthemed td.fc-today {
    background: #E4F7E5;
    border: none;
}



/* Increase specificity and target the anchor tag directly */
.fc-day-grid-event.status-complete .fc-content {
    background-color: #F7F6F6; /* Slightly cooler white */
     /* border: 2px solid #bfbfbf; /* Lighter gray */
    border-radius: 4px;
    color: #555555; /* Slightly darker gray for text */
    cursor: pointer;
    margin: 4px 6px 4px -1px;
    padding: 4px 3px 4px 3px;
}


.fc-day-grid-event.status-pending .fc-content {
    background-color: #FFFAEE; /* Lighter, warmer yellow */
    border: 1px solid #FFFAEE; /* Richer golden */
    border-radius: 4px;
    color: #555555; /* Deeper gold for text */
    cursor: pointer;
    margin: 4px 6px 4px -1px;
    padding: 4px 3px 4px 3px;
}


.fc-day-grid-event.status-scheduled .fc-content {
    background-color: #DEFFD8; /* Lighter, more vibrant blue */
    border: 1px solid #63A567; /* Stronger blue for border */
    border-radius: 4px;
    color: #63A567; /* Brighter blue for text */
    cursor: pointer;
    margin: 4px 6px 4px -1px;
    padding: 4px 3px 4px 3px;
}


.fc-day-grid-event.status-in-progress .fc-content {
    background-color: #ffffff; /* Lighter, fresher green */
    border: 1px solid #06A77D; /* Deeper green for border */
    border-radius: 4px;
    color: #058967; /* Richer green for text */
    cursor: pointer;
    margin: 4px 6px 4px -1px;
    padding: 4px 3px 4px 3px;
}

.fc-day-grid-event.status-unassigned .fc-content {
    background-color: #ffffff; /* Lighter, fresher green */
    border: 1px solid #EB7F7F; /* Deeper green for border */
    border-radius: 4px;
    color: #EB7F7F; /* Richer green for text */
    cursor: pointer;
    margin: 4px 6px 4px -1px;
    padding: 4px 3px 4px 3px;
}


.fc-day-grid-event.status-invoiced .fc-content {
    background-color: #E8F9FF; /* Lighter, fresher green */
    border: 1px solid #E8F9FF; /* Deeper green for border */
    border-radius: 4px;
    color: #555555; /* Richer green for text */
    cursor: pointer;
    margin: 4px 6px 4px -1px;
    padding: 4px 3px 4px 3px;
}

.fc-day-grid-event.status-paid .fc-content {
    background-color: #ffffff; /* Lighter, fresher green */
    border: 1px solid #cccccc; /* Deeper green for border */
    border-radius: 4px;
    color: #55555; /* Richer green for text */
    cursor: pointer;
    margin: 4px 6px 4px -1px;
    padding: 4px 3px 4px 3px;
}


/* set space above and below the event previews in the calendar */
.fc-row .fc-content-skeleton {
    position: relative;
    z-index: 4;
    padding-bottom: 8px;
    padding-bottom: 16px;
}


.fc-toolbar .fc-left {
float: left;
width: 170px;
margin-top: -4px;
}

.fc-toolbar .fc-right {
float: left;
width: 150px;
display: flex;
justify-content: space-between; /* Distribute items evenly along the main axis */
z-index: 1;
}

.fc-toolbar .fc-today-button {

width: 80px;
font-size: 16px;
}

/* Calendar End */



.assignments-table {
    border-collapse: collapse;
    width: 100%;
}

.assignments-table th, .assignments-table td {
    border: 1px solid #cccccc;
    padding: 8px;
    text-align: left;
}

.assignments-table th {
    background-color: #f2f2f2;
}


                    
.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

input[type="password"] {
flex: 1;
padding-right: 50px; /* Add padding to prevent text from being hidden by the toggle link */
border-radius: 8px;
border: 1px solid #D1D1D1;
padding: 0 16px;
font-size: 18px;
}


.disabled-field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;  /* light border */
  border-radius: 8px;
  background-color: #f2f2f2;  /* light gray background */
  color: #6b7280;             /* gray text */
  font-size: 1rem;
  cursor: not-allowed;
}



.password-toggle {
position: absolute;
right: 19px;
top: 20px;
cursor: pointer;
color: #007BFF;
text-decoration: none;
user-select: none;
}

/* Style adjustments for focus on the input and hover on the link */
input[type="password"]:focus {
outline: none; /* Removes outline, replace with your own focus style if needed */
border: 3px solid #4CAF50; /* Change border thickness and color on focus */
outline: none; /* Remove default focus outline */
}

.password-toggle:hover {
    text-decoration: underline; /* Add underline on hover to indicate it's clickable */
}

        
.body-no-scroll {
    overflow: hidden; /* This will prevent scrolling on the body */
    position: fixed; /* Optional, to ensure the page layout does not shift */
    width: 100%; /* Ensure the width stays consistent */
}



.filter-heading {
    display: flex; 
    justify-content: space-between;
    text-align: left;
}

.modal-content h2 {
   display: flex; /* Use flexbox */
    align-items: center; /* Align items vertically */
    justify-content: center; /* Center horizontally */
}


/* Add hover effect to the close button */
.close-modal:hover {
    cursor: pointer;
    filter: brightness(85%);
}


   /* Media query for screens less than 600px wide */
@media screen and (max-width: 600px) {



     .breadcrumb {
        font-family: 'Roboto', sans-serif;
        padding: 10px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        background: #ffffff;
    }

     

    .page-header-plus {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 6px 0 0; /* Adjusted padding */
        max-width: 980px;
        margin: 0 auto;
        height: 65px;
        position: relative;
    }

    /* Ensure the tabs navigation occupies the full width */
    nav.tabs {
        width: 100%;
        overflow-x: auto; /* Enable horizontal scrolling */
        white-space: nowrap; /* Prevent tabs from wrapping to the next line */
    }

    /* Ensure the tabs navigation occupies the full width */
    .chips {
        width: 100%; /* Set the width to 100% */
        max-width: calc(100vw - 32px); /* Limit the maximum width to the viewport width minus some margin */
        overflow-x: auto; /* Enable horizontal scrolling */
        white-space: nowrap; /* Prevent links from wrapping to the next line */
        display: block;
        cursor: pointer;
    }

    .chips a {
        display: inline-block; /* Change the display to inline-block */
        padding: 8px 16px; /* Apply padding to each link */
        border: 1px solid #cccccc; /* Apply border to each link */
        text-decoration: none; /* Remove default underline */
        margin-right: 4px; /* Add some space between links (optional) */
        color: #333333;
        border-radius: 8px;
        cursor: pointer;
    }

     .chips-active {
        display: inline-block; /* Change the display to inline-block */
        padding: 8px 16px; /* Apply padding to each link */
        border: 1px solid #999999; /* Apply border to each link */
        text-decoration: none; /* Remove default underline */
        margin-right: 4px; /* Add some space between links (optional) */
        color: #333333;
        border-radius: 8px;
        background-color: #E9E9E9;
    }

       

    /* Adjust the main content section to fit within the viewport */
    main {
        overflow-x: auto; /* Enable horizontal scrolling */
    }

    /* Adjust the width of each tab content section to fit within the viewport */
    main section {
        width: 100%;
    }

        /* Style for modal */
    .modal {
        
        width: 95%;
        height: 90vh;
    }


    .modal-content {
        width: 86%; /* Set width to 86% */
        height: 90%; /* Set height to 90% */
        max-width: 100%; /* Ensure modal does not exceed screen width */
        max-height: 100%; /* Ensure modal does not exceed screen height */
        background-color: white;
    }


    .floating-button {
        position: fixed;
        top: 85%;
        left: 50%;
        padding-top: 10px;
        z-index: 1;
        width: 85%;
        height: 62px;
        background-color: rgb(255 255 255 / 90%);
        transform: translateX(-50%);
        border-radius: 8px;
        padding: 10px 16px 0 16px;
        border: 2px solid #707070;
        /*box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15); */
    }



    .fc-toolbar .fc-left {
        float: left;
        width: 150px;
        margin-top: -4px;
        justify-content: space-around;
        text-align: justify;
        color: #333333;
    }

     .fc-toolbar .fc-right {
        float: left;
        width: 160px;
        display: flex;
        justify-content: space-between; /* Distribute items evenly along the main axis */
        z-index: 1;
            }

    .fc-toolbar.fc-header-toolbar {
        font-size: 18px;
        padding-top: 5px;
        text-align: center; /* Center align text */
        display: flex; /* Use flexbox */
        justify-content: center; /* Horizontally center content */
        align-items: center; /* Vertically center content */
    }


       .fc-toolbar.fc-header-toolbar .fc-left h2 {
        font-size: 18px;
        color: #333333;
        padding-top: 0px;
    }     

    .fc-state-default.fc-corner-right {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        height: 44px;
    }

    .fc-state-default.fc-corner-left {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        height: 44px;
    }


    /* Style the drawer container */
    .drawer-container {
        position: absolute;
        top: 75px; /* Position below the header */
        right: 20px; /* Align with the right edge of the header */
        width: 90%;
        height: auto; /* Adjust height as needed */
        background-color: #ffffff;
        overflow-x: hidden;
        transition: top 0.3s; /* Apply transition to top property */
        display: none;
        border: 1px solid #666666;
        border-radius: 8px;
        z-index: -999;
        box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
    }

    .spacer-hybrid-80-120 {
        height: 80px;
    }

    .spacer-hybrid-16-40 {
        height: 16px;
    }


    .spacer-hybrid-16-80 {
        height: 80px;
    }


    .spacer-hybrid-80-104 {
        height: 80px;
    }

    .spacer-hybrid-16-0 {
        height: 24px;
    }

    
}


/* Media query for screens less than 600px wide */
@media screen and (max-width: 980px) {
    .margin-flex-top-74-0 {
        margin-top: 0;
    }
}