* {
        border: 0 solid red;
    }

    :root {
        --fc-border-color: #d8dce3;
        --fc-color: #8A888A;
        --fc-daygrid-event-dot-width: 5px;
        --fc-button-hover-bg-color: #f9fafb;
        --fc-button-active-bg-color: #f9fafb;
        --fc-button-hover-border-color: #f9fafb;
        --fc-button-active-border-color: #d8dce3;
        --fc-button-text-color: black;
        --fc-today-bg-color: #b4ddfb;
        --fc-now-indicator-color: green;
    }


    body {
        background: #FAFBFF;
        font-family: 'Circular Std', sans-serif;
    }

    .nav-link.collapsed::after,
    .nav-link::after {
        content: none !important;
    }

    #content {
        background-color: #f6f9fc;
    }

    .scroll-to-top {
        z-index: 99;
    }

    .topbar-text {
        font-size: 13px;
    }

    .customer-text {
        font-size: 11px;
    }

    .sidebar {
        width: 20rem !important;
    }

    .sidebar-text-user {
        font-size: 14px;
        color: #ffffff;
    }

    .sidebar-text-email {
        font-size: 14px;
        color: #B4DDFB;
        margin-left: auto;
    }

    .nav-item {
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 5px;
        border-radius: 10px;
    }

    .nav-item.active, a.collapse-item.active {
        background-color: #B4DDFB !important;
        color: #0C246B !important;
    }

    .nav-item.active .nav-link i,
    .nav-item.active .nav-link span {
        color: #0C246B !important;
    }

    .nav-item .nav-link i {
        color: #B4DDFB;
    }

    .sidebar .nav-item .nav-link span {
        font-size: 15px;
        margin-left: 10px;
    }

    .sidebar .nav-item .nav-link {
        padding: 5px !important;
        color: #ffffff;
        display: flex;
        align-items: center;
    }


    .arrow-icon {
        margin-left: auto;
    }

    .sidebar .sidebar-brand {
        text-transform: unset !important;
        font-size: 1.5rem;
    }

    .sidebar-bottom {
        position: absolute;
        bottom: 10px;
    }

    .sidebar .nav-item.active .nav-link {
        font-weight: unset;
    }

    /* .btn,
    .fc-button {
        box-shadow: unset !important;
    } */

    .btn-secondary-custom {
        color: #344054;
        font-size: 14px;
    }

    .btn-primary {
        background-color: #0C246B;
        border-color: #0C246B;
        font-size: 14px;
    }

    .btn-warning {
        background-color: #F7BA4D;
        border-color: #d8dce3;
        color: #0C246B;
        font-size: 14px;
    }

    .btn-outline-dark {
        background-color: #ffffff;
        border-color: #d8dce3;
    }

    .btn-outline-secondary:not(:disabled):not(.disabled).active,
    .btn-outline-secondary:not(:disabled):not(.disabled):active,
    .show>.btn-outline-secondary.dropdown-toggle {
        background-color: #f9fafb !important;
        color: black !important;
        border-color: #d8dce3;
    }

    .btn-group>.btn-group:not(:last-child)>.btn,
    .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
        background-color: #ffffff;
        border-color: #d8dce3;
        font-size: 14px;
        color: #858796;
    }

    .btn-group>.btn-group:not(:first-child)>.btn,
    .btn-group>.btn:not(:first-child) {
        background-color: #ffffff;
        border-color: #d8dce3;
        font-size: 14px;
        color: #858796;
    }

    .text-primary {
        color: #0C246B !important;
    }

    .text-black {
        color: black;
    }

    .bg-gradient-primary {
        background-color: #0C246B !important;
        background-image: unset !important;
    }

    .badge-user {
        position: unset !important;
        border-radius: 5px;
        padding: 4px;
        font-size: 8px;
        color: #0C246B;
        text-transform: uppercase;
    }

    #calendarPlan.fc {
        padding: 20px;
        background-color: #ffffff;
        border-radius: 10px;
        overflow: none;
        margin-bottom: 20px;
        width: 100%;
        height: 700px;
    }

    #calendarPlan.fc table {
        font-size: 13px;
    }

    #calendarPlan .fc-h-event {
        background-color: unset !important;
        border: unset !important;
    }

    #calendarPlan.fc .fc-scrollgrid-liquid {
        border-radius: 10px;
        overflow: hidden;
    }

    #calendarPlan.fc .fc-toolbar-title {
        color: #0C246B;
        font-size: 1.5em;
    }

    #calendarPlan.fc .fc-button-primary,
    #calendarProject.fc .fc-button-primary {
        background-color: #ffffff;
        border-color: #d8dce3;
    }

    #calendarPlan button.fc-prev-button.fc-button.fc-button-primary {
        margin-left: 8px;
    }

    #calendarPlan .fc-toolbar-chunk {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #calendarPlan .fc-toolbar-title {
        margin: 0;
        flex-grow: 1;
        text-align: center;
    }

    #calendarPlan.fc .fc-col-header-cell-cushion,
    #calendarPlan.fc .fc-daygrid-day-number {
        color: #8A888A;
        text-decoration: none;
        text-transform: uppercase;
    }

    #calendarPlan.fc .fc-daygrid-day-top {
        flex-direction: unset;
    }

    #calendarPlan.fc .fc-button-primary:not(:disabled).fc-button-active,
    #calendarPlan.fc .fc-button-primary:not(:disabled):active,
    #calendarProject.fc .fc-button-primary:not(:disabled).fc-button-active,
    #calendarProject.fc .fc-button-primary:not(:disabled):active {
        font-size: 14px;
        color: black !important;
    }

    /* .fc-direction-ltr .fc-button-group>.fc-button:not(:last-child),
    .fc-direction-ltr .fc-button-group>.fc-button:not(:first-child) {
        font-size: 14px;
        color: #858796;
        text-transform: capitalize;
    } */


    .full-width-event {
        padding: 5px;
        border-radius: 5px;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        height: 80px;
    }

    .toggle-sidebar {
        appearance: none;
        width: 40px;
        height: 20px;
        background: #ccc;
        border-radius: 20px;
        position: absolute;
        cursor: pointer;
        right: 0;
    }

    .toggle-sidebar:checked {
        background: #b4ddfb;
    }

    .toggle-sidebar:checked::before {
        left: 20px;
    }

    .toggle-sidebar::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 18px;
        background: #0c246b;
        border-radius: 50%;
        transition: 0.2s;
    }

    .collapse-item {
        position: relative;
    }

    .slick-slider {
        /* display: inline-flex; */
        /* flex-direction: wrap;
        min-width: 100%; */
        visibility: hidden;
    }

    .two-items .slick-list>.slick-track {

        width: unset !important;
    }



    .slick-initialized {
        visibility: visible;
    }

    .slick-next {
        right: 13px;
    }

    .slick-prev {
        z-index: 1;
        left: -5px;
    }

    .slick-prev:before,
    .slick-next:before {
        color: #F7BA4D;
        font-size: 40px;
        opacity: unset;
    }

    .slick-initialized .slick-slide {
        margin: 5px;
    }


    .card-custom {
        border-radius: 15px;
        overflow: hidden;
        position: relative;
        color: white;
        margin-right: 15px;
        height: 160px;
    }

    .card-custom img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .card-body-custom {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px;
        background: rgba(0, 0, 0, 0.2);
        /* display: flex; */
        flex-direction: column;
        justify-content: space-between;
    }

    .card-title-custom {
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;
    }

    .card-text-custom {
        font-size: 12px;
    }

    .card-footer-custom {
        background: none;
        border-top: none;
        padding: 0;
        position: absolute;
        bottom: 10px;
        right: 0px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        /* padding: 0 15px; */
        align-items: center;
        margin-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .card-footer-custom .btn {
        border-radius: 15px;
        padding: 0.25rem 0.75rem;
        font-size: 12px;
    }

    .btn-job {
        background-color: #ffffff;
        color: #0C246B;
    }

    .btn-trip {
        background-color: #17a2b8;
        color: white;
    }

    .btn-event {
        background-color: #28a745;
        color: white;
    }

    .avatar-group-custom img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid white;
    }

    .avatar-group-custom img:nth-child(n+2) {
        margin-left: -10px;
    }

    .avatar-group-custom {
        display: flex;
        align-items: center;
        background: #ffffff;
        padding: 0px;
        border-radius: 20px;
        width: fit-content;
        margin-top: 10px;
    }

    .avatar-group-custom .more {
        background: white;
        color: black;
        border-radius: 50%;
        padding: 0.25rem 0.5rem;
        font-size: 1rem;
        margin-left: -10px;
    }

    .action-icons-custom {
        display: flex;
        align-items: center;
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .action-icons-custom .bi {
        margin-left: 10px;
        cursor: pointer;
    }

    .bi-card-custom {
        background-color: #ffffff;
        color: black;
        padding: 10px;
        border-radius: 50%;
        font-size: 13px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .modal-dialog {
        max-width: 90% !important;
    }

    .modal_trip_name {
        position: relative;
        right: 15px;
        color: #0d256c;
        font-size: 24px;
    }

    .trip_close {
        width: 50px;
        height: 50px;
        background: #0c246b;
        background-color: #0c246b !important;
        color: #fff;
        opacity: 1;
        border-radius: 50px;
        font-size: 18px;
        position: relative;
        right: 15px;
    }

    .trip-content {
        padding: 20px 50px;
        background: #d7d7d7;
    }

    .trip_heading h5 {
        font-size: 16px;
        color: #1f74b7;
        text-align: left;
        padding: 15px 20px;
        border-bottom: 1px solid #c8ccd5;
        font-weight: 500;
    }

    .trip_heading.top-border h5 {
        border-top: 1px solid #c8ccd5;
    }

    .loading_screen {
        position: absolute;
        left: 48%;
        top: 95px;
        z-index: 999;
    }

    .update_details {
        min-height: 332px;
        overflow-y: auto;
        position: relative;
        bottom: 8px;
    }

    .card.other_info {
        margin-bottom: 25px;
        border-radius: 10px;
    }

    .trip_heading.document h5 {
        border-bottom: none;
    }

    .comment_details {
        height: calc(265px - 20px);
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .comment_list {
        height: calc(180px - 20px);
        overflow-y: auto;
    }

    .comment-body {
        background: #f8f9fe;
        border: 1px solid #c8ccd5;
        padding: 10px;
        text-align: left;
        border-radius: 5px;
    }

    .comment-body p {
        font-size: 12px;
        color: #303030;
        margin: 0;
    }

    li.list-group-item.comment-item {
        padding: 5px 20px;
        margin-bottom: 5px;
        border: none;
    }

    div#comment_list h3.no-found {
        position: relative;
        font-size: 16px;
        font-weight: 400;
        top: 40px;
        color: #0c246b;
    }

    div#comment_list h3.no-found i {
        margin-right: 5px;
    }

    .input-group.comment-group {
        background: #f8f9fe;
        padding: 10px;
        border-top: 1px solid #d7edff;
        border-radius: 10px;
    }

    .sidebar .nav-item .collapse {
        z-index: 2;
    }

    .sidebar .nav-item .nav-link .badge-counter,
    .topbar .nav-item .nav-link .badge-counter {
        right: 0.45rem;
    }

    .update-status-textarea,
    .update-status-textarea:focus {
        font-size: 12px;
        border-radius: 5px;
        box-shadow: none;
        color: #666;
        outline: none;
        width: 50%;
        font-weight: 400;
        -webkit-box-shadow: 0 1px 1px 0 rgba(45, 44, 44, 0.05) !important;
        background: #F9FAFF;
        border: 1px solid #C8CCD5;
        padding: 2px 10px;
        resize: none;
    }

    .alert-form {
        display: none;
    }

    .attendee_details {
        padding: 20px 10px;
        min-height: 125px;
    }

    .avatar-icon {
        display: block;
        width: 44px;
        height: 44px;
        transition: all 0.2s;
        opacity: 1;
        border-radius: 50px;
        border: #fff solid 3px;
        overflow: hidden;
    }

    .avatar-icon img {
        width: 100%;
        height: 100%;
    }

    .people_left_side {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .people_img img {
        width: 70px;
        border-radius: 100px;
        border: 2px solid #1963cb;
    }

    .people_info {
        margin-left: 10px;
        text-align: left;
    }

    .people_info h4 {
        font-size: 18px;
        color: #0d256c;
        margin: 0;
    }

    .people_info p {
        font-size: 12px;
        color: #475467;
        margin: 0;
    }

    .trip_heading.top-border h5 {
        border-top: 1px solid #c8ccd5;
    }

    .trip_heading h5 {
        font-size: 16px;
        color: #1f74b7;
        text-align: left;
        padding: 15px 20px;
        border-bottom: 1px solid #c8ccd5;
        font-weight: 500;
    }

    li.list-group-item.update-item {
        display: flex;
        align-items: baseline;
        justify-content: start;
        border-top: 1px solid #c8ccd5;
        padding: 15px 40px;
        border-right: none;
        border-left: none;
        border-radius: initial;
        align-items: center;
    }

    .people_left_side.update {
        align-items: baseline;
        width: 150px;
    }

    .people_left_side {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .people_left_side.update .people_img img {
        width: 40px;
    }

    button.btn.comment-action {
        background-color: #0c246b;
        color: #fff;
        padding: 8px 30px;
        font-size: 14px;
        border-radius: 5px;
    }

    .modal-content.trip-content .modal-header {
        background: transparent;
        border-color: transparent;
    }

    .trip-body {
        padding: 0 !important;
    }

    .card.trip_info {
        margin-bottom: 30px;
        border-radius: 10px;
    }



    /* .modal-dialog.modal-trip-lg * {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    } */

    h3.no-found {
        position: relative;
        font-size: 16px;
        font-weight: 400;
        top: 40px;
        color: #0c246b;
    }

    .toggle-sidebar {
        background: #4c7fb8;
        outline: none;
        cursor: pointer;
        border-radius: 20px;
        /* box-shadow: inset 0 0 5px rgb(0 0 0 / 20%); */
        transition: background 300ms linear;
    }

    .toggle-sidebar::before {
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        left: 0px;
        border-radius: 20px;
        /* background-color: #fff; */
        transform: scale(1.1);
        box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
        transition: left 300ms linear;
        background-image: linear-gradient(to right, #fec84d, #f3a230);
    }

    .badge {
        font-size: 100%;
    }



    .segment-item {
        display: grid;
    }

    .card.trip_info {
        margin-bottom: 0px !important;
    }

    .card.other_info {
        margin-bottom: 0px !important;
    }

    .people_left_side.update .people_info h4 {
        font-size: 14px;
        color: #0d256c;
        margin: 0;
    }

    li.list-group-item.update-item .update-info {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
    }

    li.list-group-item.update-item .update-info p {
        color: #0c246b;
        font-size: 10px;
        font-weight: 500;
        margin: 0;
        padding-top: 4px;
    }

    .overflow-container {
        height: 332px;
        overflow-y: auto;
        border-top: 1px solid #ccc;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .overflow-container::-webkit-scrollbar {
        width: 8px;
    }

    .overflow-container::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 10px;
    }

    .overflow-container::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

    .update-status-person {
        cursor: pointer;
    }

    .avatar-icon-wrapper {
        display: inline-block;
        margin-right: 0.1rem;
        position: relative;
    }

    .avatar-icon-wrapper .badge-dot.badge-dot-lg.badge-bottom {
        top: auto;
        right: 0;
        bottom: 0;
    }

    .avatar-icon-wrapper .badge-dot.badge-dot-lg {
        border-radius: 50%;
        width: 0px;
        height: 16px;
        border: #fff solid 2px;
        top: 0;
        right: 0;
    }

    .avatar-icon-wrapper .badge {
        position: absolute;
        right: -2px;
        top: -2px;
    }

    .update-status-btn,
    .update-status-btn:focus,
    .update-status-btn:hover {
        font-size: 17px;
        color: #fff;
        outline: none;
        font-size: 14px;
        font-weight: bold;
        border: 1px solid #F39F32;
        background: #f00;
        box-shadow: 0px 4px 10px rgba(255, 255, 45, 0.0001);
        border-radius: 4px;
        cursor: pointer;
        outline: none;
        text-indent: inherit;
    }

    input.form-control.comment-field.error-comment {
        background: #ffb6b6;
    }

    .table-column-no-border {
        border: 1px solid #ff000000 !important;
    }

    .table-column-top-border {
        border-top: 2px solid #e3e6f0;
    }

    #calendarProject.fc {
        background-color: unset;
    }

    #calendarProject.fc table {
        font-size: 13px;
        border: 0px;
    }

    #calendarProject .fc-timeline-event-harness.event-type-harnes {
        /* position: absolute;
        top: 0px; */
        top: unset !important;
        width: max-content !important;
        text-align: center;
    }

    #calendarProject .fc-resource-timeline table tbody tr .fc-datagrid-cell div {
        /* height: calc(50px + (var(--timeline-type-harnes) * 10px)) !important; */
        padding-top: 2px;
        padding-bottom: 5px;
        flex-direction: row;
        /* margin-left: 1px; */
        padding: 5px !important;
    }

    #calendarProject.fc .fc-timeline-overlap-enabled .fc-timeline-lane-frame .fc-timeline-events {
        padding-bottom: 0 !important;
        /* height: 155px !important; */
        /* padding: 15px; */
    }

    #calendarProject .resource {
        height: calc(50px + (var(--timeline-type-harnes) * 10px));
    }

    #calendarProject .slot {
        height: calc(50px + (var(--timeline-type-harnes) * 10px));
    }

    

    #calendarProject .event-type {
        padding: 4px 1px !important;
        border-radius: 20px;
        width: 30px;
        height: 30px;
        border: 5px solid #f3f6ff;
        cursor: pointer;
        z-index: 9;
        /* margin-top: 13px; */
    }

    #calendarProject .event-type-harnes{
        margin-top: 50px;
    }

    #calendarProject.fc .fc-scrollgrid-liquid,
    #calendarProject .fc-theme-standard td,
    #calendarProject .fc-theme-standard th {
        /* border-radius: 10px; */
        border: 0px !important;
    }

    #calendarProject table {
        border-collapse: separate;
        border-spacing: 0px 5px;
        margin: auto;
    }

    /* #calendarProject .fc-timeline-slot-label {
        border-radius: 10px;
    } */

    #calendarProject .fc-timeline-slot-label:first-child {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    #calendarProject .fc-timeline-slot-label:last-child {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }



    #calendarProject .fc-timeline-slot-lane:first-child {
        border-left: 0px !important;
        border-top: 0px !important;
    }

    #calendarProject .fc-timeline-slot-lane:last-child {
        border-right: 0px !important;
        border-top: 0px !important;
    }

    #calendarProject .fc-timeline-slot-lane {
        border-bottom: 0px !important;
    }

    #calendarProject td,
    #calendarProject th {
        border: 0px;
    }


    #calendarProject .fc-cell-shaded {
        visibility: hidden;
    }

    /* .fc-direction-ltr .fc-timeline-slot {
        border: 1px solid #c8ccd5 !important;
    } */

    #calendarProject .fc-datagrid-cell,
    #calendarProject .fc-timeline-lane {
        background-color: white;
        border-radius: 10px;
        border: 1px solid #c8ccd5;
    }

    #calendarProject .presentation {
        border: unset !important;
    }

    #calendarProject.fc .fc-datagrid-header .fc-datagrid-cell-frame {
        flex-direction: column;
        height: 45px !important;
    }

    #calendarProject.fc .fc-datagrid-cell-cushion {
        padding: 3px;
    }

    #calendarProject p.resource-name {
        color: #0c246b;
        font-size: 14px;
        margin: 10px !important;
    }

    #calendarProject p.resource-email {
        color: #bbbbbb;
    }

    #calendarProject.fc .fc-toolbar.fc-header-toolbar {
        z-index: 1;
        /* margin-bottom: -42px; */
        margin-left: 15px;
    }

    #calendarProject button.fc-prev-button.fc-button.fc-button-primary,
    #calendarProject button.fc-next-button.fc-button.fc-button-primary {
        background-color: white;
        border-radius: 20px;
        border: 1px solid #c8ccd5;
        width: 30px;
        height: 30px;
        padding: unset !important;
    }

    #calendarProject span.fc-icon.fc-icon-chevron-left,
    #calendarProject span.fc-icon.fc-icon-chevron-right {
        font-size: 1em;
    }

    #calendarProject th.fc-datagrid-cell {
        border: 0px !important;
        background-color: unset !important;
    }

    #calendarPlan button.fc-dayGridMonth-button.fc-button.fc-button-primary,
    #calendarPlan button.fc-timeGridWeek-button.fc-button.fc-button-primary,
    #calendarPlan button.fc-timeGridDay-button.fc-button.fc-button-primary,
    #calendarProject button#dayGridMonthProject,
    #calendarProject button#timeGridWeekProject,
    #calendarProject button#timeGridYearProject {
        /* pointer-events: none; */
        width: 70px;
        height: 35px;
    }

    #calendarProject button.fc-resourceTimelineYear-button.fc-button.fc-button-primary.fc-button-active {
        width: 60px;
    }

    /* #calendarProject table.fc-datagrid-body.fc-scrollgrid-sync-table {
        width: 280px !important;
    } */

    #calendarProject .fc-timeline-slot-frame {
        height: 37px !important;
    }

    #calendarProject th.fc-timeline-slot.fc-timeline-slot-label {
        background-color: white;
        border: 0.1px solid black;
    }



    #calendarProject .fc-timeline-header > table > tbody > tr:nth-child(1) {
    height: 32px;
    }

    #calendarProject .fc-timeline-header > table > tbody > tr:nth-child(2) {
    display: none;
    }

    /* .fc-timeline-event-harness.timeline-type-harnes:first-child {
        top: 50px !important
    } */


    #projectFormModal {
        font-family: 'DM Sans', sans-serif;
        color: black;
        font-size: 15px;
    }

    #projectFormModal .custom-input {
        /* border: 2px solid #007bff; */
        /* border-radius: 5px; */
        padding: 10px;
        font-size: 15px;
        height: 50px;
    }

    #projectFormModal .modal-header {
        border-bottom: 0px !important;
    }

    #projectFormModal .card-box {
        background-clip: padding-box;
        margin-bottom: 20px;
        background-color: #ffffff;
        border: 1px solid #f7f8f9 !important;
        -webkit-box-shadow: 0 0.2rem 0.5rem rgba(18, 38, 63, 0.03) !important;
        -moz-box-shadow: 0 0.2rem 0.5rem rgba(18, 38, 63, 0.03) !important;
        -o-box-shadow: 0 0.2rem 0.5rem rgba(18, 38, 63, 0.03) !important;
        box-shadow: 0 0.2rem 0.5rem rgba(18, 38, 63, 0.03) !important;
        border-radius: 6px;
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
    }

    #projectFormModal .upload-wrap2 .space-arround {
        justify-content: space-around;
        align-items: center;
        padding: 1rem 3rem 3rem 3rem;
        color: #8F9BB3;
        text-align: center;
    }

    #projectFormModal .text-blue {
        color: #0756AD;
    }

    #projectFormModal .select2 {
        width: -webkit-fill-available !important;
    }

    #projectFormModal .select2-container--default .select2-selection--single {
        height: 50px;
        overflow: hidden;
        padding-top: 10px;
        border: 1px solid #d8dce3;
    }

    #projectFormModal .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #6e707e;
    }

    #projectFormModal .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 10px !important;
    }

    #projectFormModal .form-control.is-invalid,
    .was-validated .form-control:invalid {
        border: 1px solid #d1d3e2 !important;
        background-image: unset !important;
    }

    #projectCardModal .modal-content {
        background-color: unset !important;
        border: 0px !important;
    }

    .event-type-harnes.event-type.fc-event-main.fc-event-main-frame {
        display: none !important;
    }

    .fc .fc-button-group {
        display: contents !important;
    }

    button#projectCardType {
        border-radius: 15px;
        padding: 0.25rem 0.75rem;
        font-size: 12px;
        position: absolute;
        bottom: 30px;
        right: 10px;
    }

    a#projcetCardViewMore {
        color: white;
        font-size: 12px;
        position: absolute;
        bottom: 10px;
        right: 10px;
        text-decoration: underline;
    }

    #imagePreview {
        max-width: 300px;
        max-height: 300px;
        display: none;
    }

    #dropArea {
        border: 2px dashed #ccc;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        margin: 20px 0;
    }

    #dropArea.hover {
        border-color: #333;
    }

    /* archive style */
    .btn-search-archive {
        width: 150px;
        height: 37px;
    }

    label.btn.btn-xs.btn-outline-secondary.btn-search-archive {
        color: #202224 !important;
        font-family: 'Nunito' !important;
    }

    label.btn.btn-xs.btn-outline-secondary.btn-search-archive.active {
        background-color: #0C256C !important;
        color: #FFFFFF !important;
        font-family: 'Nunito' !important;
    }

    .card.archive {
        cursor: pointer;
        color: #111111;
        width: 450px;
        height: 172px;
        border-radius: 15px;
    }

    .card.archive.active {
        background-color: #0C256C;
        color: white;
    }
    
    .card.archive.active::after {
        content: '';
        position: absolute;
        left: 100%;
        top: 65%;
        margin-top: -35px;
        border-left: 0;
        border-bottom: 10px solid transparent;
        border-top: 10px solid transparent;
        border-left: 10px solid #0c246c;
    }

    .card.archive.active button {
        background-color: #FABA2F;
        color: #0C256C;
    }

    .card.archive button {
        background-color: #B4DDFA;
        color: #0C256C;
    }
      
    .label-list-group .list-group-item:hover,
    .project-timeline-change-label:hover,
    .project-timeline-adjust-dates:hover,
    .project-timeline-file-attachment:hover,
    .project-timeline-add-people:hover,
    .cardFile:hover,
    .cardComment:hover {
        background-color: #f2f2f2 !important;
        color: inherit !important;
        border-color: 0.1px solid #DDDDDD !important;
        border-radius: 5px;
    }

    .project-lebel-modal {
        width: 250px;
        position: absolute;
        top: 60%;
        left: 60%;
        transform: translate(-50%, -50%);
    }

    .project-timeline-modal-content {
        border: 1px solid rgba(0,0,0,1);
    }

    .project-timeline-modal-header {
        padding: 0.3rem 1rem;
    }

    .project-timeline-modal-title {
        font-family:'Nunito Sans';
        font-size:15px;
        color: black;
    }

    .project-timeline-modal-btn {
        font-family: 'Nunito Sans';
        font-size: 12.9px;
        margin: 3px;
    }

    .project-timeline-checklist {
        padding:0.4rem 0.5rem;
        height:30px;
        border:unset;
        font-family: 'Inter';
        font-size: 12px;
    }

    .project-timeline-label-list {
        cursor:pointer;
        padding:0.4rem 0.5rem;
        height:30px;
        font-family: 'Inter';
        font-size: 12px;
    }

    .project-timeline-form-title {
        font-size:12.9px;
        color:#111111;
        font-family: Nunito Sans;
        font-weight: 600;
    }

    .project-timeline-form-field {
        font-family: Nunito Sans;
        font-size: 12.9px;
        color: #222222;
    }

    .project-timeline-label {
        background-color: rgba(240, 173, 97, 0.2);
        color: rgb(240, 173, 97); 
        border: 1px solid 1px solid rgb(240, 173, 97);
        font-size:11.06px;
        font-family: Nunito Sans;
        text-align: center;
        border-radius: 5px;
        padding-top: 4px;
        margin-top: 30px;
        font-weight: bold;
        width: 85.71px;
        height: 24.71px;
    }

    .project-timeline-change-label {
        font-size:9.22px;
        width:100%;
        font-family: Nunito Sans;
        text-align: center;
        margin-top: 5px;
        padding: 5px;
        cursor: pointer;
    }

    .project-timeline-dates {
        font-size: 12.9px;
        color:#0C256C;
        font-family: Nunito Sans;
    }

    .project-timeline-adjust-dates {
        background-color:rgba(34, 34, 34, 0.1); 
        color:#111111; 
        border: 0px;
        font-size:9.22px;
        width:85.71px;
        font-family: Nunito Sans;
        font-weight: bold;
        margin-top: 10px;
        height: 24.71px;
    }

    .project-timeline-add-people {
        border: 1px solid #DDDDDD; 
        border-radius: 50%; 
        width: 36.87px; 
        height: 36.87px;
        padding:10px 0px 0px 0px;
        cursor:pointer
    }

    .tml-btn-comment {
        background-color:#FABA2F; 
        color:#0C256C; 
        border: 0px;
        font-size:12.9px;
        width:100%;
        font-family:
        Nunito Sans;
        height:100%;
        font-weight: 600;
    }

    .project-timeline-comment-label {
        font-size: 12.9px;
        font-family:Roboto;
        font-weight:bold;
        color: #212121;
    }

    .project-timeline-comments {
        height: 200px;
        overflow: auto;
        padding: 10px;
        margin-bottom: 20px;
        display:none;
        border: 0.1px solid #3a3b4529;
        border-radius: 5px;
    }

    .tml-btn-file-attachment {
        border: 1px solid #DDDDDD; 
        border-radius: 50%; 
        width: 36.87px; 
        height: 36.87px;
        padding:10px 0px 0px 0px;
        cursor:pointer;
    }

    .project-timeline-files {
        height: 200px;
        overflow: auto;
        padding: 10px;
        display:none;
        width: -webkit-fill-available;
    }

    .tml-btn {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin-top: 15px;
    }

    .tml-btn-create, .tml-btn-update, .tml-btn-delete {
        font-family: 'Nunito Sans';
        font-size: 12.9px;
        margin: 3px;
    }

    .project-timeline-adjust-dates-modal {
        width: 500px;
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .container-project-timeline-comments {
        display: block;
        height: 200px;
        overflow: auto;
        /* border: 0.1px solid #bdbdbd; */
        border-radius: 5px;
    }

    .container-project-timeline-files {
        display: block;
        /* border: 0.1px solid #bdbdbd; */
        border-radius: 5px;
    }


    /* Hide the file input */
    #tmlFileInput {
        display: none;
      }
      /* Optional: cursor pointer on the image for better UX */
      label[for="tmlFileInput"] img {
        cursor: pointer;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(0,0,0,0.1);
        width: 14.75px;
        height: 14.75px;
        vertical-align: middle;
        object-fit: contain;
      }

    .d-flex.flex-start.cardComment {
        padding: 5px;
        cursor: pointer;
    }

    #calendarProject .fc-event-title {
        color: black;
    }

    #calendarProject .timeline-type {
        border: 0px;
        border-radius: 5px;
        padding: 2px 5px;
        cursor: pointer;
    }

    #calendarProject .event-type .fc-event-main-frame {
        display: none !important;
    }

    @media (max-width: 768px) {
        .sidebar {
            width: 100% !important;
            position: relative !important;
        }

        #content {
            background-color: #f6f9fc !important;
        }

        .topbar-text {
            font-size: 12px !important;
        }

        .customer-text {
            font-size: 10px !important;
            color: #d1d3e2 !important;
        }

        .nav-item {
            margin-left: 10px !important;
            margin-right: 10px !important;
            margin-bottom: 5px !important;
            border-radius: 10px !important;
        }

        .nav-item.active {
            background-color: #B4DDFB !important;
            color: #0C246B !important;
        }

        .nav-item .nav-link {
            padding: 10px !important;
            color: #ffffff !important;
            display: flex !important;
            align-items: center !important;
        }

        .btn {
            font-size: 12px !important;
        }

        .card-custom {
            height: auto !important;
            margin-bottom: 15px !important;
        }

        /* .fc {
            height: auto !important;
            padding: 10px !important;
        }

        .fc .fc-toolbar-title {
            font-size: 16px !important;
        }

        .fc .fc-button-primary {
            font-size: 12px !important;
        } */

        .modal_trip_name {
            font-size: 20px !important;
        }

        .trip_close {
            width: 40px !important;
            height: 40px !important;
            font-size: 16px !important;
        }

        .trip-content {
            padding: 15px !important;
        }

        .avatar-group-custom img {
            width: 25px !important;
            height: 25px !important;
        }

        .comment_details {
            height: auto !important;
        }

        .input-group.comment-group {
            padding: 8px !important;
        }

        .sidebar .nav-item .nav-link {
            width: unset !important;
        }
    }