@font-face {
    font-family: "inter-Regular";
    src: url(../fonts/Inter/static/Inter-Regular.ttf);
}

@font-face {
    font-family: "inter-Bold";
    src: url(../fonts/Inter/static/Inter-Bold.ttf);
}

@font-face {
    font-family: "inter-Medium";
    src: url(../fonts/Inter/static/Inter-Medium.ttf);
}

@font-face {
    font-family: "inter-SemiBold";
    src: url(../fonts/Inter/static/Inter-SemiBold.ttf);
}

@font-face {
    font-family: "darker-grotesque-regular";
    src: url(../fonts/darker-grotesque/DarkerGrotesque-Regular.ttf);
}

@font-face {
    font-family: "darker-grotesque-bold";
    src: url(../fonts/darker-grotesque/DarkerGrotesque-Bold.ttf);
}

@font-face {
    font-family: "basley-italic";
    src: url(../fonts/basley/Besley-Italic.ttf);
}

.inter-Regular {
    font-family: "inter-Regular" !important;
}

.darker-grotesque-bold {
    font-family: "darker-grotesque-bold" !important;
}

.darker-grotesque-regular {
    font-family: "darker-grotesque-regular" !important;
}

body {
    font-family: "darker-grotesque-regular";
    overflow-x: hidden;
    color: #000;
}

*::-webkit-scrollbar-thumb {
    cursor: pointer;
}

:root {
    --bg-input: #fffee2;
}

.bg-input {
    background-color: var(--bg-input);
}

/* ---------------------------hamburger menue------------------------------ */
nav a {
    text-decoration: none !important;
    color: #000;
    transition: color 0.3s ease;
}

/* nav div:first-of-type{
    display: block!important;
} */

#menuToggle {
    display: block;
    position: absolute;
    /* top: 47px; */
    top: 34px;
    right: 23px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #cdcdcd;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}

#menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked~span:nth-last-child(2) {
    opacity: 1;
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
    position: fixed;
    width: 300px;
    margin: -100px 77px 0 0;
    /* padding: 53px 66px 40px 30px; */
    padding: 40px;
    padding-top: 100px;
    right: -100px;
    background: #0f0f0f;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(100%, 0px);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    box-shadow: 0px 1px 5px #dadada;
}

#menu li {
    padding: 10px 0;
    color: #edf2f4;
    font-family: "inter-Regular";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    cursor: pointer;
}

#menuToggle input:checked~ul {
    transform: scale(1, 1);
    opacity: 1;
}

#navbar-hamburger-menue {
    display: none;
}

/* ----------------------------------------------------------------------- */
.nav-left-img {
    /* width: 32px; */
    width: 24px;
    height: 32px;
    object-fit: cover;
    /* border-radius: 50%; */
}

.nav-sidebar-left-img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    /* border-radius: 50%; */
}

.nav-text {
    color: #000;
    font-size: 18px;
    margin-left: 12px;
    text-transform: uppercase;
}

input.nav-input {
    max-width: 200px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #dde2e4;
    background-repeat: no-repeat;
    background-position: 7px 50%;
    padding: 0 15px 0 30px;
    vertical-align: middle !important;
}

input[type="search"] {
    padding: 0 5px 0 30px !important;
}

input[type="search"]::-webkit-search-cancel-button {
    margin-left: 10px !important;
}

::-webkit-search-cancel-button:hover {
        cursor: pointer !important;
}

.header-area .nav-right-img {
    border-radius: 50%!important;
    object-fit: cover !important;
    margin-left: 19px;
}

.nav-drop-down {
    width: 233px;
    padding: 11.5px 12.5px;
}

.nav-drop-down-heading {
    color: #000;
    font-size: 16px;
    font-family: "inter-SemiBold";
}

.nav-drop-down-email {
    font-size: 18px;
    color: #000;
    word-break: break-all;
    padding: 5px 10px;
}

.nav-drop-down .dropdown-item {
    color: #000;
    border-radius: 6px;
    padding: 5px;
    font-size: 16px;
    transition: 0.2s ease-out;
}

.nav-drop-down .dropdown-item:hover {
    background: #ffdc5f;
    /* color: #fff; */
    /* font-family: "inter-Bold"; */
}

.sidebar-logo-heading {
    color: #000;
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
}

.sidebar-logo-text {
    color: #000;
    font-size: 18px;
}

/* -----------------------------dashboard----------------------------- */
.dashboard-main-heading {
    font-size: 40px;
    font-family: "darker-grotesque-bold";
}

.dashboard-button-container {
    box-shadow: 0px 0px 1px 0px #1a202452;
    padding: 13.5px 10px;
    border-radius: 6px;
    width: fit-content;
}

.dashboard-button-container a {
    color: #1a1b1f;
    cursor: pointer;
    font-size: 20px;
    padding: 0px 10px;
    border-radius: 6px;
    display: inline-block;
}

.filter-btn {
    font-size: 16px;
    color: #1a1b1f;
    padding: 4px 12px;
    border: 1px solid #dde2e4;
    border-radius: 6px;
    display: block;
    cursor: pointer;
    font-family: "darker-grotesque-bold";
}

.box-heading {
    font-size: 32px;
    color: #000;
    font-family: "basley-italic";
    white-space: nowrap;
}

.dashboard-box {
    box-shadow: 0px 1px 3px 0px #5b687152;
    padding: 32px 0px;
    border-radius: 6px;
    background: #fffee2;
    overflow: auto;
}

.box-text {
    color: #000;
    font-size: 18px;
    white-space: nowrap;
}

.nice-select,
.multiselect__option {
    font-size: 18px;
}

.dashboard-select-container .nice-select {
    height: 32px;
    /* width: 101px; */
}

.dashboard-select-container .nice-select {
    line-height: 29px;
}

.dashboard-table tr th,
.dashboard-table tr td {
    border-bottom: 1px solid var(--Border, #e9e9e9) !important;
    vertical-align: middle !important;
}

.dashboard-table tr th,
#pending-leave-request tr th,
#leave-history tr th {
    color: #6e7c87;
    font-size: 16px;
    font-family: "darker-grotesque-regular";
}

.dashboard-table tr td {
    font-size: 15px !important;
    color: #000;
}

.custom-even-row {
    --bs-table-bg: tranparent !important;
    background-color: #f3f4f6 !important;
}

.stage {
    max-width: 53px;
    /* display: inline-block; */
}

.tags,
.stage {
    color: #f1f1f1;
    font-size: 18px;
    background: #f8b44e;
    padding: 0px 5px;
    border-radius: 4px;
    white-space: nowrap;
    height: fit-content;
}

.dashboard-table-container {
    overflow-x: auto;
}

#add-time-entry-popup .modal-dialog,
#edit-time-entry-popup .modal-dialog {
    max-width: 1045px;
}

.flatpickr-calendar.hasTime.noCalendar {
    width: 234.75px !important;
}

#add-time-entry-popup .modal-body,
#edit-time-entry-popup .modal-body,
#add-time-entry-popup .modal-footer,
#edit-time-entry-popup .modal-footer {
    padding: 0 30px;
}

/*  create supplier modal css */
#create-new-supplier .modal-dialog {
    max-width: 1045px;
}

.flatpickr-calendar.hasTime.noCalendar {
    width: 234.75px !important;
}

.flatpickr-time input.flatpickr-hour::selection,
.flatpickr-time input.flatpickr-minute::selection {
    background-color: transparent !important;
}

/* #create-new-supplier .modal-body,
#create-new-supplier .modal-footer {
    padding: 0 30px;
} */
#create-new-supplier .modal-body .modal-title {
    font-family: "inter-SemiBold";
    margin-bottom: 30px;
}

.table-heading {
    font-size: 20px;
    font-family: "darker-grotesque-bold";
    color: #1a1b1f;
}

/* -------------------------Apply for leave modal css--------------- */
#apply-leave-popup .modal-dialog {
    max-width: 684px;
    width: 100%;
}

#apply-leave-popup .modal-body,
#apply-leave-popup .modal-footer {
    padding: 36px 43px 36px 43px;
}

#apply-leave-popup .modal-body .modal-title {
    font-size: 42px;
    font-family: "darker-grotesque-bold";
    margin-bottom: 36px;
}

.apply-leave-btn {
    width: 218px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffdc5f;
    outline: none;
    border: 1px solid #dde2e4;
    border-radius: 6px;
    font-size: 20px;
    color: #1a1b1f;
    font-family: "darker-grotesque-bold";
}

.text-danger {
    text-transform: lowercase;
    margin-top: -8px;
}

.text-danger::first-letter {
    text-transform: uppercase;
}

.invalid-feedback {
    display: block !important;
    margin: 0 !important;
    text-wrap: wrap !important;
}

/* ---------------------------------------Circular power Css-------------------------------- */
.circle {
    height: 1em;
    width: 1em;
    position: relative;
    display: inline-block;
    border-radius: 50%;
    font-size: 100%;
    box-sizing: content-box;
    font-size: 202px;
}

.circle:after {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    border-radius: 50%;
    box-sizing: border-box;
    border: solid 0.05em #cccccc;
    z-index: -1;
}

.circle>span {
    width: 100%;
    height: 100%;
    text-align: center;
    display: block;
    font-size: 0.4em;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 5em;
    z-index: 9999;
    color: var(--color);
    white-space: nowrap;
    box-sizing: content-box;
    border-radius: 50%;
}

.circle>.bar {
    height: 100%;
    width: 100%;
    position: absolute;
    box-sizing: content-box;
}

.circle>.bar:before,
.circle>.bar:after {
    content: "";
    height: 91%;
    width: 91%;
    position: absolute;
    border: solid 0.05em #ffdc5f;
    border-radius: 50%;
    box-sizing: content-box;
    clip: rect(0, 0.5em, 1em, 0);
}

.circle.big {
    font-size: 302px;
}

.circle.medium {
    font-size: 202px;
}

.circle.small {
    font-size: 102px;
}

.circle.x-small {
    font-size: 22px;
}

.circle[data-fill="0"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="0"]>.bar:before {
    transform: rotate(0deg);
}

.circle[data-fill="0"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="1"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="1"]>.bar:before {
    transform: rotate(3.6deg);
}

.circle[data-fill="1"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="2"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="2"]>.bar:before {
    transform: rotate(7.2deg);
}

.circle[data-fill="2"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="3"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="3"]>.bar:before {
    transform: rotate(10.8deg);
}

.circle[data-fill="3"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="4"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="4"]>.bar:before {
    transform: rotate(14.4deg);
}

.circle[data-fill="4"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="5"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="5"]>.bar:before {
    transform: rotate(18deg);
}

.circle[data-fill="5"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="6"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="6"]>.bar:before {
    transform: rotate(21.6deg);
}

.circle[data-fill="6"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="7"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="7"]>.bar:before {
    transform: rotate(25.2deg);
}

.circle[data-fill="7"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="8"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="8"]>.bar:before {
    transform: rotate(28.8deg);
}

.circle[data-fill="8"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="9"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="9"]>.bar:before {
    transform: rotate(32.4deg);
}

.circle[data-fill="9"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="10"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="10"]>.bar:before {
    transform: rotate(36deg);
}

.circle[data-fill="10"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="11"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="11"]>.bar:before {
    transform: rotate(39.6deg);
}

.circle[data-fill="11"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="12"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="12"]>.bar:before {
    transform: rotate(43.2deg);
}

.circle[data-fill="12"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="13"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="13"]>.bar:before {
    transform: rotate(46.8deg);
}

.circle[data-fill="13"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="14"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="14"]>.bar:before {
    transform: rotate(50.4deg);
}

.circle[data-fill="14"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="15"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="15"]>.bar:before {
    transform: rotate(54deg);
}

.circle[data-fill="15"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="16"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="16"]>.bar:before {
    transform: rotate(57.6deg);
}

.circle[data-fill="16"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="17"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="17"]>.bar:before {
    transform: rotate(61.2deg);
}

.circle[data-fill="17"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="18"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="18"]>.bar:before {
    transform: rotate(64.8deg);
}

.circle[data-fill="18"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="19"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="19"]>.bar:before {
    transform: rotate(68.4deg);
}

.circle[data-fill="19"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="20"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="20"]>.bar:before {
    transform: rotate(72deg);
}

.circle[data-fill="20"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="21"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="21"]>.bar:before {
    transform: rotate(75.6deg);
}

.circle[data-fill="21"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="22"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="22"]>.bar:before {
    transform: rotate(79.2deg);
}

.circle[data-fill="22"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="23"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="23"]>.bar:before {
    transform: rotate(82.8deg);
}

.circle[data-fill="23"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="24"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="24"]>.bar:before {
    transform: rotate(86.4deg);
}

.circle[data-fill="24"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="25"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="25"]>.bar:before {
    transform: rotate(90deg);
}

.circle[data-fill="25"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="26"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="26"]>.bar:before {
    transform: rotate(93.6deg);
}

.circle[data-fill="26"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="27"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="27"]>.bar:before {
    transform: rotate(97.2deg);
}

.circle[data-fill="27"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="28"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="28"]>.bar:before {
    transform: rotate(100.8deg);
}

.circle[data-fill="28"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="29"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="29"]>.bar:before {
    transform: rotate(104.4deg);
}

.circle[data-fill="29"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="30"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="30"]>.bar:before {
    transform: rotate(108deg);
}

.circle[data-fill="30"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="31"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="31"]>.bar:before {
    transform: rotate(111.6deg);
}

.circle[data-fill="31"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="32"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="32"]>.bar:before {
    transform: rotate(115.2deg);
}

.circle[data-fill="32"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="33"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="33"]>.bar:before {
    transform: rotate(118.8deg);
}

.circle[data-fill="33"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="34"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="34"]>.bar:before {
    transform: rotate(122.4deg);
}

.circle[data-fill="34"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="35"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="35"]>.bar:before {
    transform: rotate(126deg);
}

.circle[data-fill="35"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="36"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="36"]>.bar:before {
    transform: rotate(129.6deg);
}

.circle[data-fill="36"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="37"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="37"]>.bar:before {
    transform: rotate(133.2deg);
}

.circle[data-fill="37"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="38"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="38"]>.bar:before {
    transform: rotate(136.8deg);
}

.circle[data-fill="38"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="39"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="39"]>.bar:before {
    transform: rotate(140.4deg);
}

.circle[data-fill="39"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="40"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="40"]>.bar:before {
    transform: rotate(144deg);
}

.circle[data-fill="40"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="41"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="41"]>.bar:before {
    transform: rotate(147.6deg);
}

.circle[data-fill="41"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="42"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="42"]>.bar:before {
    transform: rotate(151.2deg);
}

.circle[data-fill="42"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="43"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="43"]>.bar:before {
    transform: rotate(154.8deg);
}

.circle[data-fill="43"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="44"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="44"]>.bar:before {
    transform: rotate(158.4deg);
}

.circle[data-fill="44"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="45"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="45"]>.bar:before {
    transform: rotate(162deg);
}

.circle[data-fill="45"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="46"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="46"]>.bar:before {
    transform: rotate(165.6deg);
}

.circle[data-fill="46"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="47"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="47"]>.bar:before {
    transform: rotate(169.2deg);
}

.circle[data-fill="47"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="48"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="48"]>.bar:before {
    transform: rotate(172.8deg);
}

.circle[data-fill="48"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="49"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="49"]>.bar:before {
    transform: rotate(176.4deg);
}

.circle[data-fill="49"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="50"]>.bar {
    clip: rect(0, 1em, 1em, 0.5em);
}

.circle[data-fill="50"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="50"]>.bar:after {
    transform: rotate(0deg);
}

.circle[data-fill="51"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="51"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="51"]>.bar:after {
    transform: rotate(186deg);
}

.circle[data-fill="52"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="52"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="52"]>.bar:after {
    transform: rotate(187.2deg);
}

.circle[data-fill="53"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="53"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="53"]>.bar:after {
    transform: rotate(190.8deg);
}

.circle[data-fill="54"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="54"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="54"]>.bar:after {
    transform: rotate(194.4deg);
}

.circle[data-fill="55"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="55"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="55"]>.bar:after {
    transform: rotate(198deg);
}

.circle[data-fill="56"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="56"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="56"]>.bar:after {
    transform: rotate(201.6deg);
}

.circle[data-fill="57"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="57"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="57"]>.bar:after {
    transform: rotate(205.2deg);
}

.circle[data-fill="58"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="58"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="58"]>.bar:after {
    transform: rotate(208.8deg);
}

.circle[data-fill="59"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="59"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="59"]>.bar:after {
    transform: rotate(212.4deg);
}

.circle[data-fill="60"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="60"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="60"]>.bar:after {
    transform: rotate(216deg);
}

.circle[data-fill="61"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="61"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="61"]>.bar:after {
    transform: rotate(219.6deg);
}

.circle[data-fill="62"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="62"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="62"]>.bar:after {
    transform: rotate(223.2deg);
}

.circle[data-fill="63"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="63"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="63"]>.bar:after {
    transform: rotate(226.8deg);
}

.circle[data-fill="64"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="64"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="64"]>.bar:after {
    transform: rotate(230.4deg);
}

.circle[data-fill="65"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="65"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="65"]>.bar:after {
    transform: rotate(234deg);
}

.circle[data-fill="66"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="66"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="66"]>.bar:after {
    transform: rotate(237.6deg);
}

.circle[data-fill="67"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="67"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="67"]>.bar:after {
    transform: rotate(241.2deg);
}

.circle[data-fill="68"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="68"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="68"]>.bar:after {
    transform: rotate(244.8deg);
}

.circle[data-fill="69"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="69"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="69"]>.bar:after {
    transform: rotate(248.4deg);
}

.circle[data-fill="70"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="70"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="70"]>.bar:after {
    transform: rotate(252deg);
}

.circle[data-fill="71"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="71"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="71"]>.bar:after {
    transform: rotate(255.6deg);
}

.circle[data-fill="72"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="72"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="72"]>.bar:after {
    transform: rotate(259.2deg);
}

.circle[data-fill="73"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="73"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="73"]>.bar:after {
    transform: rotate(262.8deg);
}

.circle[data-fill="74"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="74"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="74"]>.bar:after {
    transform: rotate(266.4deg);
}

.circle[data-fill="75"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="75"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="75"]>.bar:after {
    transform: rotate(270deg);
}

.circle[data-fill="76"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="76"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="76"]>.bar:after {
    transform: rotate(273.6deg);
}

.circle[data-fill="77"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="77"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="77"]>.bar:after {
    transform: rotate(277.2deg);
}

.circle[data-fill="78"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="78"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="78"]>.bar:after {
    transform: rotate(280.8deg);
}

.circle[data-fill="79"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="79"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="79"]>.bar:after {
    transform: rotate(284.4deg);
}

.circle[data-fill="80"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="80"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="80"]>.bar:after {
    transform: rotate(288deg);
}

.circle[data-fill="81"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="81"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="81"]>.bar:after {
    transform: rotate(291.6deg);
}

.circle[data-fill="82"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="82"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="82"]>.bar:after {
    transform: rotate(295.2deg);
}

.circle[data-fill="83"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="83"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="83"]>.bar:after {
    transform: rotate(298.8deg);
}

.circle[data-fill="84"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="84"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="84"]>.bar:after {
    transform: rotate(302.4deg);
}

.circle[data-fill="85"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="85"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="85"]>.bar:after {
    transform: rotate(306deg);
}

.circle[data-fill="86"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="86"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="86"]>.bar:after {
    transform: rotate(309.6deg);
}

.circle[data-fill="87"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="87"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="87"]>.bar:after {
    transform: rotate(313.2deg);
}

.circle[data-fill="88"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="88"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="88"]>.bar:after {
    transform: rotate(316.8deg);
}

.circle[data-fill="89"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="89"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="89"]>.bar:after {
    transform: rotate(320.4deg);
}

.circle[data-fill="90"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="90"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="90"]>.bar:after {
    transform: rotate(324deg);
}

.circle[data-fill="91"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="91"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="91"]>.bar:after {
    transform: rotate(327.6deg);
}

.circle[data-fill="92"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="92"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="92"]>.bar:after {
    transform: rotate(331.2deg);
}

.circle[data-fill="93"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="93"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="93"]>.bar:after {
    transform: rotate(334.8deg);
}

.circle[data-fill="94"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="94"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="94"]>.bar:after {
    transform: rotate(338.4deg);
}

.circle[data-fill="95"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="95"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="95"]>.bar:after {
    transform: rotate(342deg);
}

.circle[data-fill="96"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="96"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="96"]>.bar:after {
    transform: rotate(345.6deg);
}

.circle[data-fill="97"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="97"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="97"]>.bar:after {
    transform: rotate(349.2deg);
}

.circle[data-fill="98"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="98"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="98"]>.bar:after {
    transform: rotate(352.8deg);
}

.circle[data-fill="99"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="99"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="99"]>.bar:after {
    transform: rotate(356.4deg);
}

.circle[data-fill="100"]>.bar {
    clip: rect(auto, auto, auto);
}

.circle[data-fill="100"]>.bar:before {
    transform: rotate(180deg);
}

.circle[data-fill="100"]>.bar:after {
    transform: rotate(360deg);
}

/* --------------------------------------------End------------------------------------------- */

/* -------------------------log-in sign-up Screens------------------------------------------- */
.sign-up-container {
    display: flex;
}

.sign-up-img {
    width: 50%;
    height: 100vh;
    object-fit: cover;
    /* position: fixed; */
}

.signup-right-container {
    /* padding-bottom: 100px; */
    /* padding-left: 100px; */
    max-width: 400px;
    width: 100%;
}

.signup-right-container input {
    background: #fffee2;
}

.signup-logo-container {
    /* text-align: end; */
    /* padding-bottom: 100px; */
    padding: 44px 54px;
    padding-bottom: 0;
}

.signup-content-container {
    /* padding: 40px 65px; */
    /* margin-left: 240px; */
    width: 50%;
}

.signup-right-container-parent {
    height: calc(100% - 168px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.not-found-text {
    color: black;
    font-size: 30px;
    font-family: "darker-grotesque-bold";
}

.sign-up-input-container {
    height: 110px;
}

.area-dimensions p.text-danger.my-1 {
    width: 100%;
}

.bi-trash:hover {
    fill: red;
}

.signup-labels {
    font-size: 20px;
    color: #000;
    display: block;
    margin-bottom: 13px;
    text-transform: capitalize;
    white-space: nowrap;
    font-family: "darker-grotesque-bold";
}

.signup-inputs {
    height: 50px;
    max-width: 400px;
    width: 100%;
    border-radius: 6px;
    border: none;
    outline: none;
    box-shadow: 0px 0px 2px 0px #1a202452;
    padding: 0 20px;
    color: #000;
    font-size: 18px !important;
}

.signup-inputs::placeholder {
    font-size: 18px !important;
}

.log-in {
    height: 44px;
    max-width: 400px;
    width: 100%;
    border-radius: 6px;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    color: #1a1b1f;
    font-size: 18px;
    background: #ffdc5f;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.5s;
    font-family: "darker-grotesque-bold";
    line-height: 24px;
}

.log-in:disabled {
    opacity: 0.5;
}

.forgot-password {
    color: #252c32;
    font-size: 16px;
    font-family: "inter-Bold";
    display: inline-block;
    cursor: pointer;
}

/* ------------------------------------Create New Project---------------------------------------------- */
.create-to-start {
    font-size: 16px;
    color: #252c32;
}

.create-one {
    cursor: pointer;
    font-size: 18px;
    color: #000;
}

.create-project-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.create-project-header {
    padding: 37px 49px 0 49px;
    border-bottom: 0;
}

.create-project-dialoge {
    max-width: 959px;
    width: 100%;
}

.create-project-body {
    padding: 30px 49px;
}

input.signup-inputs:focus {
    box-shadow: 0px 0px 2px 0px #1a202452;
}

.vti__input {
    border-radius: 0 6px 6px 0 !important;
}

.vti__dropdown:hover {
    border-radius: 5px 0px 0px 5px !important;
}

.log-in:disabled {
    opacity: 0.5;
    transition: opacity 0.5s;
}

/* ------------------------------------Create New Project/Edit Project---------------------------------------------- */

.create-to-start {
    font-size: 16px;
    color: #252c32;
}

.create-project-title {
    font-size: 42px;
    font-family: "darker-grotesque-bold";
}

.create-project-header {
    padding: 37px 49px 0 49px;
    border-bottom: 0;
}

.create-project-dialoge {
    max-width: 959px;
    width: 100%;
}

.create-project-body {
    padding: 30px 49px;
}

/* input.signup-inputs:focus {
    box-shadow: 0px 0px 2px 0px #1a202452;
} */
.create-new-project-select-container .nice-select {
    width: 100%;
    height: 50px;
    box-shadow: 0px 0px 2px 0px #1a202452;
    border: none;
}

.create-new-project-select-container .nice-select .current {
    line-height: 48px;
}

.create-new-project-select-container .nice-select .list {
    max-height: 250px;
    width: 100%;
    overflow: auto;
}

.create-new-project-select-container .nice-select:focus {
    box-shadow: 0px 0px 2px 0px #1a202452;
}

.create-new-project-select-container .nice-select:active {
    box-shadow: 0px 0px 2px 0px #1a202452;
}

.create-new-project-select-container .multiselect__tags {
    padding: 10px 20px !important;
    display: flex;
    font-size: 18px;
}

.create-new-project-select-container .multiselect__tags .multiselect__single {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px;
    width: auto;
}

/* New Styles For Create New Project */

.create-new-project-form,
.edit-project-form,
.create-new-task-form,
.financial-form,
.timesheet-listing,
.col-left,
.col-right,
.not-found-container,
#addEntryForm,
.material-library-container,
.add-material-ofcanvas-body, 
.apply-leave-form,
.apply-leave-form-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-container {
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.edit-project-form .input-container {
    width: 100%;
}

.input-label {
    font-family: "darker-grotesque-regular";
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    color: #2f3a43;
}

input.text-input,
textarea {
    height: 50px;
    border-radius: 6px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0px 0px 2px 0px #1a202452;
    border: none;
    width: 100%;
}

.text-input,
.text-input::placeholder,
textarea::placeholder {
    font-family: "darker-grotesque-regular";
    font-size: 16px;
    line-height: 20px;
    color: black !important;
}

.text-input::placeholder,
textarea::placeholder {
    color: #757575 !important;
}

.text-input:focus-visible {
    outline: none !important;
}

.multiselect__tag span {
    font-size: 16px;
    color: black;
}

.multiselect__tag-icon::after {
    color: black !important;
    font-size: 23px !important;
}

.tags-container,
.stages-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 5px;
    flex-wrap: wrap;
}

.tags-container .tags,
.stages-container .tags {
    text-transform: capitalize !important;
    color: #1a1b1f !important;
    font-size: 16px !important;
}


.tags-main-container .tags {
    padding: 0px 5px 1px 5px !important;
    font-weight: bold !important;
    font-size: 10px !important;
    font-family: system-ui !important;
    text-transform: uppercase !important;
}


.stage-error-message {
    margin-top: -16px;
}

.add-image-text {
    font-size: 16px;
    font-family: "darker-grotesque-bold";
    cursor: pointer;
}

.add-attachment-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.preview-text {
    cursor: pointer;
    font-size: 16px;
    display: block;
    font-family: 'darker-grotesque-bold';
}

div.buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 400px;
}

.log-in-draft {
    height: 44px;
    max-width: 400px;
    width: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1b1f;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.5s;
    font-size: 18px;
    font-family: "darker-grotesque-bold";
}

.log-in-draft.template-mode {
    background-color: #ffdc5f;
    color: rgb(15, 15, 15);
}

.disabled-input-container input:disabled {
    background: rgba(239, 239, 239, 0.3);
    color: black;
}

/* -------------------------------------------------------------------------------------------- */
/* -----------------------------------Project listing------------------------------------------ */
.import-creat-project,
.apply-for-leave {
    width: fit-content;
    height: 32px;
    line-height: 20px;
}

.import-creat-project:hover,
.apply-for-leave:hover {
    background: #ffdc5f;
}

.project-listing-box {
    min-width: 312px;
    box-shadow: 0px 1px 3px 0px #5b687152;
    padding: 22px 17.8px 12px 17.8px;
    width: 313px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    min-height: 28px;
}

.project-list-img,
.folder-img {
    border-radius: 6px;
    width: 100%;
    height: 115.56px;
    object-fit: cover;
}

.folder-img {
    padding-top: 5px;
    object-fit: contain !important;
    width: auto;
}

.member-img-icon {
    width: 23px;
    height: 23px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: -2px;
    border: 1px solid #eee;
}

.member-img-icon circle {
    fill: #6e7c87 !important;
    color: white;
}

.member-img-icon-container {
    position: relative;
    width: 31%;
}
.member-img-icon-container span:has(.member-img-icon){
    width: 23px;
    height: 23px;
}
.bord-view-column-height {
    height: calc(100vh - 45px);
}

/* .dashboard-tags-container {
    width: 70%;
} */
.tag-icon-img {
    height: 23.14px;
    width: 21.92px;
}

.member-img-icon2 {
    position: absolute;
    left: 20px;
}

.member-img-icon3 {
    position: absolute;
    left: 40px;
}

.three-dots-dropdown ul {
    min-width: 104px !important;
    max-width: max-content !important;
    width: 100% !important;
    padding: 15px 13px 15px 12px !important;
    z-index: 999;
}

.three-dots-dropdown ul li span,
.project-task-edit-dell li span,
.project-task-edit-dell li a,
.three-dots-dropdown ul li a {
    border-radius: 6px;
    color: #252c32;
    font-size: 18px;
    padding: 5px;
}

.three-dots-dropdown ul li span:hover,
.project-task-edit-dell li span:hover,
.project-task-edit-dell li a:hover,
.three-dots-dropdown ul li a:hover {
    background: #ffdc5f !important;
}

.import-drop-down .dropdown-toggle::after {
    display: none;
}

.import-drop-down ul {
    padding: 23px 13px 21px 13px !important;
    min-width: 207px !important;
    max-width: 207px !important;
    width: 100% !important;
}

.import-drop-down ul li {
    cursor: pointer;
}

.import-project-input {
    text-align: center;
    box-shadow: 0px 0px 1px 0px #1a202452;
    padding: 7px;
    width: 100%;
    background-color: #ffdc5f;
    border-radius: 6px;
}

.import-project-input span {
    font-size: 16px;
    text-decoration: underline;
    margin-bottom: 10px;
    display: block;
    font-size: 16px;
    font-family: "darker-grotesque-bold";
}

.import-project-input p {
    font-size: 18px;
}

.project-listing-main-container {
    width: 313px;
}

.project-listing-whole-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.project-dashboard-tabs {
    border: none;
    gap: 15px;
}

.project-dashboard-tabs li button.nav-link {
    padding: 0;
}

.project-dashboard-tabs li button.nav-link a {
    padding: 4px 12px;
    border-radius: 6px;
    font-family: "darker-grotesque-bold";
}

.project-dashboard-tabs li button.nav-link.active a,
.project-dashboard-tabs li button.nav-link:hover a {
    border: 0 !important;

    background-color: #ffdc5f;
    color: #000000;
}

.project-dashboard-tabs li {
    border: 0;
}

.project-dashboard-tabs li button.nav-link:hover {
    border: 0 !important;
}

.project-dashboard-tabs li button.nav-link {
    border: none;
    font-size: 18px;
    /* color: #252c32; */
}

.project-name-dashboard-container {
    max-width: 77%;
    width: 100%;
    box-shadow: 0px 1px 3px 0px #5b687152;
    padding: 19px 27px;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.form-control:focus, .form-select:focus{
box-shadow: 0px 0px 2px 0px #1a202452 !important;
}

.bg-green {
    background: #8fc376de;
}

.tab-content.project-dashboard-tabs-content .tab-pane {
    margin-top: 26px !important;
}

.project-name-mini-description {
    margin-bottom: 20px;
}

.project-name-mini-description span {
    font-size: 18px;
}

.project-name-dashboard-mini-left {
    width: 30%;
}

.project-name-dashboard-mini-right {
    width: 35%;
}

.project-costing {
    width: 23%;
    padding: 25px 14px;
    box-shadow: 0px 1px 3px 0px #5b687152;
    border-radius: 6px;
}

.project-details-main-container {
    display: flex;
    gap: 8px;
    margin-bottom: 40px;
}

.project-dashboard-table-container {
    box-shadow: 0px 1px 3px 0px #5b687152;
    border-bottom: 6px;
    overflow-x: auto;
    margin-bottom: 20px;
}

.t-heading {
    font-size: 20px;
    font-family: "darker-grotesque-bold";
    padding: 20px 0 20px 10px;
}

.project-dashboard-table-container table tr th {
    font-size: 20px;
    font-family: "darker-grotesque-bold";
    border-bottom: 1px solid #e5e9eb !important;
}

.project-dashboard-table-container table tr td {
    font-size: 18px;
    font-weight: 400;
    border-bottom: 1px solid #e5e9eb !important;
}

.start-end-date-container {
    display: flex;
    align-items: center;
    margin-top: 34px;
    margin-left: 23px;
}

.image-wrapper img {
    max-width: 142px;
    width: 100%;
    height: 103px;
    object-fit: cover;
}

.teams-members-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.dropdown-witout-arrow.dropdown-toggle::after {
    display: none;
}

button.edit-dell-btn {
    border: none;
    outline: none;
    background: transparent;
}

.p-task-input {
    height: 32px;
    max-width: 190px;
    width: 100%;
}

.p-task-input {
    border: 1px solid #dde2e4;
    border-radius: 6px;
}

.task-table-container {
    /* padding-left: 27px; */
    margin-bottom: 0;
    /* overflow-x: auto; */
    /* min-height: 300px; */
    padding: 0 1px;
}

.task-table-container .table {
    margin: 0;
}

.task-table-container table tr th {
    font-size: 20px;
    font-family: "darker-grotesque-bold";
    background: unset;
    border: none;
    padding: 10px 13px;
}

.task-table-container table tr th:first-child {
    /* padding: 0; */
}

.task-table-container table tr.table-body {
    box-shadow: 0px 1px 3px 0px #5b687152;
    -webkit-box-shadow: 0px 1px 3px 0px #5b687152;
    -moz-box-shadow: 0px 1px 3px 0px #5b687152;
    box-shadow: 0px 1px 3px 0px #5b687152;
    border-radius: 6px;
    position: relative;
}

.task-table-container table tr td {
    font-size: 18px;
    background: unset;
    padding: 20px 10px;
    border: none;
}

.task-table-container table tr.table-body td:first-child {
    display: block;
    padding: 0;
    position: absolute;
    left: -26px;
    margin: auto;
    top: 33%;
    transform: translateY(-50%);
}

.task-table-container table tr.table-body td:nth-child(2) {
    border-radius: 6px 0 0 6px;
    /* color: #6E7C87; */
}

.task-table-container table tr.table-body td:last-child {
    border-radius: 0 6px 6px 0;
}

.task-table-container table tr.table-body.active-row {
    background: #d9d9d9;
    border-radius: 6px;
}

.selected-material-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ----------------------------Single Project---------------------- */

.project-dashboard-text {
    text-transform: capitalize;
    font-size: 15px;
    color: #000;
}

.start-date,
.end-date {}

/* ----------------------------Single Project---------------------- */

/* ----------------------------Single Project Details---------------------- */

.info-text {
    font-size: 18px;
    color: #000;
}

/* ----------------------------Single Project Details---------------------- */

/* ----------------------------Check box board---------------------- */

.check-container {
    display: block;
    position: relative;
    padding-left: 35px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 24px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 0;
}

.check-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    /* background-color: #d9d9d9; */
    border-radius: 3px;
    border: 1px solid #dde2e4;
}

.check-container:hover input~.checkmark {
    /* background-color: #ccc; */
}

.check-container input:checked~.checkmark {
    background-color: #fff;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check-container input:checked~.checkmark:after {
    display: block;
}

.check-container .checkmark:after {
    left: 6px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #ffdc5f;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ----------------------------------- */
.check-container {
    display: none !important;
}

.task-table-container table tr.table-body.active-row td:first-child>.check-container {
    display: block !important;
}

/* .fs-18 darker-grotesque-bold {
    color: #6e7c87;
    font-size: 20px;
    font-family: "darker-grotesque-bold";
} */
button.add-new-task-btn {
    position: fixed;
    right: 45px;
    bottom: 40px;
    border: none;
    outline: none;
    background: transparent;
    z-index: 99999;
    transition: 0.5s;
}

button.add-new-task-btn:hover {
    transform: scale(1.2);
}

.custom-tabs-container {
    display: flex;
    gap: 15px;
    justify-content: end;
}

.custom-tabs-container button {
    background: transparent;
    border: none;
    outline: none;
}

.task-table-container table tr.table-body.active-row td:first-child>.check-container {
    display: block !important;
}

.tab-img.active-sub-tab img {
    filter: invert(1);
}

#tab2 {
    display: none;
}

.board-view-container {
    display: flex;
    gap: 9.77px;
    overflow-x: auto;
}

.board-view-vertical-row {
    max-width: 356px;
    width: 100%;
    padding: 12px 8px;
    background-color: #f6f8f9;
    border-radius: 6px 6px 0px 0px;
    flex-shrink: 0;
    height: 100vh;
}

.board-view-box {
    padding: 18px 14px 18px 16px;
    box-shadow: 0px 1px 2px 0px #5b687152;
    border-radius: 6px 6px;
    background: #fff;
    margin-bottom: 8px;
}

.name-letter-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #d7edff;
    color: #0452c8;
    font-size: 12px;
    font-family: "inter-SemiBold";
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-new-task-header {
    padding: 30px 43px;
}

.image-wrapper2 img {
    width: 142px;
    height: 103px;
    object-fit: cover;
}

#delete-task .modal-dialog,
#delete-area .modal-dialog,
#delete-file .modal-dialog {
    max-width: 476px;
}

#delete-task .modal-body,
#delete-task .modal-footer,
#delete-area .modal-body,
#delete-area .modal-footer,
#delete-file .modal-body,
#delete-file .modal-footer {
    padding: 40px 46px;
}

.modal-open .add-new-task-btn {
    display: none;
}

.delete-warning {
    font-size: 20px;
    color: #000;
    font-family: "darker-grotesque-bold";
}

.deactivate-description {
    font-size: 18px;
    color: #000;
}

.timezone-class .list {
    height: 200px;
}

.role-name {
    text-transform: capitalize;
}

.chat-container {
    box-shadow: 0px 1px 3px 0px #5b687152;
    border-radius: 6px;
    display: flex;
}

.chat-left {
    max-width: 380px;
    width: 100%;
}

.chat-right {
    width: 100%;
    border-left: 1px solid #e5e9eb;
    overflow-x: hidden;
}

.chat-search-container {
    padding: 17px 27.7px 18px 26.4px;
    border-bottom: 1px solid #e5e9eb;
    height: 68px;
}

.chat-tabs {
    padding: 10px 27px;
    border-bottom: 1px solid #e5e9eb;
}

.chats-images img,
.chats-images span {
    width: 32px;
    height: 32px;
}

.chat-member-name {
    font-size: 16px;
    font-family: "inter-SemiBold";
    margin-bottom: 11px;
}

.chat-member-text {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-tabs-container {
    height: 555px;
    overflow-y: auto;
}

.chat-tab-active {
    background: #ffdc5f;
}

.chat-right-heading {
    /* padding: 23.25px 43.2px 25.2px 43.2px; */
    border-bottom: 1px solid #e5e9eb;
    height: 68px;
    display: flex;
    align-items: center;
}

.chat-heading {
    font-size: 16px;
    font-family: "inter-SemiBold";
}

.messages-container {
    height: 461px;
    overflow-y: auto;
    border-bottom: 1px solid #e5e9eb;
}

.message-input-container {
    padding: 0 10px!important;
}

.chat-input {
    border: 1px solid #dde2e4;
    border-radius: 6px;
    padding-left: 95px;
    position: relative;
    height: 47px;
    width: 100%;
    font-size: 14px;
}

.chat-input::placeholder {
    font-size: 14px;
    color: #a4a2a2;
}

.messages-container {
    padding: 29px 25px;
}

.message-received-container {
    padding: 11px 18px 7px 18px;
    background: #fff;
    width: fit-content;
    border-radius: 10px 10px 10px 0px;
    margin-right: auto;
    margin-bottom: 4px;
    border: 1px solid #f2f3f3;
    max-width: 48%;
}

.message-send-container {
    padding: 11px 18px 7px 18px;
    background: #d9d9d9;
    width: fit-content;
    box-shadow: 0px 0px 1px 0px #1a202452;
    border-radius: 10px 10px 0px 10px;
    margin-left: auto;
    margin-bottom: 4px;
    max-width: 48%;
    background: #ffdc5f;
}

.message-title {
    font-size: 16px;
    font-family: "darker-grotesque-bold";
    margin-bottom: 5px;
}

.message-text {
    font-size: 18px;
    line-height: 1;
    word-wrap: break-word;
}

.message-time {
    font-size: 18px;
    text-align: end;
}

.chat-badge {
    bottom: 10px;
    right: 20px !important;
}

.chat-sec-multiselect {
    width: 100%;
}

.chat-sec-multiselect .multiselect__tags {
    min-height: 40px !important;
}

.chat-sec-multiselect .multiselect__select {
    top: 1px !important;
}

.chat-sec-multiselect,
.multiselect__placeholder {
    padding-top: 0px !important;
    padding-left: 5px !important;
    font-size: 18px !important;
}

.chat-sec-multiselect .multiselect__single {
    margin-bottom: 10px;
}

.chat-sec-multiselect .project-selector {
    margin-top: 0 !important;
}

.timezone-class .list {
    height: 200px;
    overflow-y: auto;
}

.to-in-multiselect {
    position: absolute;
    z-index: 999;
    top: 9px;
    left: 13px;
}

.chat-to-member .multiselect__tags {
    padding-left: 35px;
}

.role-name {
    text-transform: capitalize;
}

.upload__inputfile-only-name {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.upload__btn-only-name {
    width: 100% !important;
}

/* .upload__btn-box-only-name {
    margin-bottom: 10px;
} */

.upload__img-wrap-only-name {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* margin: 0 -10px; */
}

.upload__img-box-only-name {
    /* width: 200px; */
    padding: 4px 12px;
    margin-bottom: 12px;
    border: 1px solid #dde2e4;
    border-radius: 6px;
}

.upload__img-close-only-name {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 3px;
    right: 10px;
    text-align: center;
    line-height: 13px;
    z-index: 1;
    cursor: pointer;
}

.upload__img-close-only-name:after {
    content: "\2716";
    font-size: 13px;
    color: white;
}

.img-bg-only-name {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    /* padding-bottom: 100%; */
}

.material-upload {
    height: 96px;
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #d9d9d9;
    flex-direction: column;
    cursor: pointer;
}

.addTo-btn {
    padding: 6px 12px;
    /* background: #000; */
    border-radius: 6px;
    border: 1px solid #dde2e4;
    font-size: 16px;
    font-family: "darker-grotesque-bold";
    /* color: #fff; */
}

.offcanvas-img-heading {
    font-size: 16px;
    font-family: "inter-Bold";
    margin-bottom: 3px;
}

.offcanvas-checbox .checkmark {
    top: -10px;
}

.ofcanvas-active-row {
    background-color: #f1f1f1;
}

.offcanvas-dropd {
    padding: 15px;
    width: 210px;
}

.check-container.selected-material-row .checkmark {
    top: 11px;
}

.activeDiv {
    background: #f1f1f1;
}

.long-select .nice-select .list {
    left: -50px;
    height: 124px;
    overflow-y: auto;
    box-shadow: rgba(26, 32, 36, 0.32) 0px 0px 2px 0px;
}

.offcanvas3-heading {
    font-size: 26px;
    font-family: "inter-SemiBold";
}

button.toggle-button {
    background: transparent;
    border: none;
    outline: none;
    border-radius: 6px;
    font-size: 18px;
    /* padding: 5px 10px; */
}

.active-offcanvas-tab {
    background: #ffdc5f !important;
}

.upload__img-wrap-only-name.specially-for-name div.img-bg {
    background-image: none !important;
}

.upload__img-wrap-only-name.specially-for-images {
    flex-direction: row !important;
    gap: 18px;
}

.upload__img-wrap-only-name.specially-for-images .upload__img-box-only-name {
    border: none;
    padding: 0;
}

.upload__img-wrap-only-name.specially-for-images div.img-bg {
    width: 110px;
    height: 96px;
    border-radius: 6px;
}

.upload__img-wrap-only-name.specially-for-images div.img-bg .img-bg-only-name p {
    display: none;
}

.table-filter-dp .dropdown .dropdown-toggle::after {
    display: none;
}

.dropdown .dropdown-menu {
    padding: 15px 7px !important;
}

.dropdown .dropdown-menu li a,
.dropdown .dropdown-menu li button {
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 18px;
}

.dropdown .dropdown-menu li a:hover,
.dropdown .dropdown-menu li button:hover {
    background-color: #ffdc5f;
}

#pending-leave-request-shadow .table-date-heading,
#leave-history-shadow .table-date-heading {
    color: black;
    font-family: "darker-grotesque-regular";
    font-size: 18px;
}

#add-time-entry-popup .modal-body .modal-title,
#edit-time-entry-popup .modal-body .modal-title {
    font-family: "inter-SemiBold";
}

.library-card-container {
    box-shadow: 0px 0px 1px 0px #1a202452;
    border-radius: 6px;
    max-width: 260px;
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.library-card-img {
    height: 150px;
    border-radius: 4.92px;
    width: 100%;
    object-fit: cover;
}

.library-card-img-heading {
    color: #252c32;
    font-family: "darker-grotesque-bold";
    font-size: 18px;
}

.add-to-btn {
    width: 150px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 20px;
    border: none;
    outline: none;
    background: #ffdc5f;
    color: #000;
    border: 1px;
    font-family: "darker-grotesque-bold";
}

.library-card-edit-dell {
    display: flex;
    width: fit-content;
    justify-content: end;
    width: 100%;
    gap: 10px;
}

/* ----------------------------------------------dropdown-search-field----------------------- */
.dropdown-search-field.dropbtn {
    background-color: #04aa6d;
    color: white;
    padding: 16px;
    font-size: 18px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown-search-field {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 230px;
    overflow: auto;
    box-shadow: 0px 1px 2px 0px #5b687152;
    box-shadow: 0px 0px 1px 0px #1a202452;
    border-radius: 6px;
    z-index: 1;
    padding: 11px 7px;
    width: 175px;
}

.dropdown-content a {
    color: black;
    padding: 5px;
    text-decoration: none;
    display: block;
    border-radius: 6px;
    margin-bottom: 10px;
}

.showSearchContainer {
    display: block;
}

.search-dropDown-list {
    border-radius: 6px;
    padding: 1px 5px;
}

.search-dropDown-list:hover {
    background: #ffdc5f;
}

.flatpickr-wrapper {
    display: block !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    -webkit-appearance: none;
    pointer-events: none;
}

/* ------------------------------------------------------------------------ */
.what-type-leave {
    color: #1a1b1f;
    font-size: 18px;
}

/* ---------------------manager portal team------------- */
.date-color-green {
    color: #4bc057;
}

.date-color-red {
    color: #f8624e;
}

.manager-team-section-table tbody tr td {
    background: transparent;
}

.manager-team-section-table tbody tr:hover {
    background: #f4f4f4;
    cursor: pointer;
}

.team-mem-info-sec {
    /* box-shadow: 0px 1px 2px 0px #5B687152; */
    box-shadow: 0px 0px 2px 0px #1a202452;
    border-radius: 6px;
    padding: 36px 24px 27px 24px;
    margin: 1px;
}

.leave-btn {
    display: block;
    padding: 8px 15px;
    font-size: 14px;
    font-family: "inter-SemiBold";
    border: 1px solid #dde2e4;
    border-radius: 6px;
    width: fit-content;
    color: #6e7c87;
}

.sick-leaves {
    background: #d9d9d9;
}

.annual-leaves {
    background: #ea94f2de;
}

.tr-border {
    box-shadow: 0px 1px 3px 0px #5b687152;
    border-radius: 6px;
}

.approve-deny-div {
    display: flex;
    justify-content: end;
}

.approve-deny-div a {
    font-size: 16px;
    margin-right: 10px;
    text-decoration: underline !important;
    cursor: pointer;
}

.img-heading-container {
    display: flex;
    gap: 20px;
}

#negotiate-popup .modal-dialog,
#re-negotiate-popup .modal-dialog {
    max-width: 680px;
}

#negotiate-popup .modal-body,
#re-negotiate-popup .modal-body {
    padding: 36px 43px;
}

.negotiate-heading {
    font-size: 26px;
    font-family: "inter-SemiBold";
    margin-bottom: 10px;
}

#approve-leave-popup .modal-dialog,
#deny-leave-popup .modal-dialog {
    max-width: 684px;
    width: 100%;
}

#approve-leave-popup .modal-body,
#approve-leave-popup .modal-footer,
#deny-leave-popup .modal-body,
#deny-leave-popup .modal-footer {
    padding: 36px 43px 36px 43px;
}

#approve-leave-popup .modal-body .modal-title,
#deny-leave-popup .modal-body .modal-title {
    font-size: 26px;
    font-family: "inter-SemiBold";
    margin-bottom: 42px;
}

/* ----------------multiselect------------------- */
.multiselect__select {
    top: 5px !important;
    z-index: 1;
}

.multiselect__tags {
    min-height: 50px !important;
    box-shadow: 0px 0px 2px 0px #1a202452 !important;
    border: 0 !important;
    align-items: center !important;
    font-size: 18px !important;
}

.multiselect__tag {
    margin-top: 4px !important;
}

.multiselect__tags .multiselect__placeholder {
    color: #757575 !important;
    font-size: 18px !important;
    margin: 0 !important;
}

.multiselect__content-wrapper {
    box-shadow: rgba(26, 32, 36, 0.32) 0px 0px 2px 0px !important;
}

.multiselect--active .multiselect__content-wrapper {
    position: relative !important;
    max-height: 130px !important;
    overflow-y: auto !important;
}
/* --------------------------------------------------------------------------------------------- */
.container-for-table table tr th {
    color: #6e7c87;
    font-size: 16px;
    font-family: "inter-SemiBold";
    background: unset;
    border: none;
    padding: 10px 13px;
}

.container-for-table table tr td {
    color: black;
    font-size: 18px;
    background: unset;
    padding: 20px 13px;
    border: none;
}

.container-for-table table tbody tr {
    box-shadow: 0px 0px 1px 0px #1a202452;
    border-radius: 6px;
}

tr.leave-tab-tr td {
    background: none;
}

tr.leave-tab-tr {
    background: unset;
}

tr.leave-tab-tr:hover {
    background: #f4f4f4 !important;
}

.navbar-offcanvas.offcanvas {
    width: 300px !important;
}

.navbar-offcanvas.offcanvas.offcanvas-end {
    top: 65px !important;
}

.header-area .offcanvas-backdrop.show {
    opacity: 0 !important;
}

.teams-members-container .nav-right-img {
    object-fit: cover !important;
    border-radius: 50% !important;
    height: 21px;
    width: 21px;
    border: 1px solid #6e7c87 !important;
}

.notification-logo,
.nav-right-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 8px;
}

.notification-list {
    width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    line-height: 20px;
    color: #000;
}

.notification-time {
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    color: #f8b44e;
}

.notification:hover {
    cursor: pointer;
}

.people-on-leave {
    width: 20%;
    overflow: auto;
}

.people-on-leave ol {
    list-style-position: inside;
    max-height: 225px;
    overflow: auto;
}

.people-on-leave ol li {
    font-size: 16px;
    margin-bottom: 5px;
}

.w-90 {
    width: 90px;
}

.active-background {
    background: #ffdc5f;
}

.collaps-icon {
    height: 16.73px;
    width: 12.73px;
    position: absolute;
    left: 78px;
    top: 9px;
    transform: rotate(180deg);
    transition: 0.2s;
    z-index: 99;
}

.sort-icon,
.filter-icon {
    background: white !important;
    border: 1px solid #c1bcbc !important;
    border-radius: 3px;
}

.sort-icon img {
    padding: 8.96px;
}

.filter-icon img {
    padding: 9px 6px;
}

.collaps-container {
    position: relative;
}

.collaps-container:hover {
    cursor: pointer;
}

.offcanvas-heading {
    font-size: 20px;
    color: #252c32;
    font-family: "bg-yellow darker-grotesque-bold";
    margin: 15px 0;
}

table.schedule-table {
    border-collapse: separate;
    border-spacing: 0 15px;
}

#assignMemberList {
    margin-bottom: 20px;
}

.color-black {
    color: #252c32;
}

.supplier-dropdown.dropdown ul.dropdown-menu {
    padding: 0 !important;
}

.supplier-dropdown ul.dropdown-menu li a {
    padding: 10px 18px;
    border-radius: 0;
}

.supplier-dropdown ul.dropdown-menu li a:hover {
    background: #f6f6f6;
}

.supplier-select .nice-select {
    margin-bottom: 3px;
}

.left-50 {
    left: -50px !important;
}

.nice-select:after,
.multiselect__select::before,
.dropdown-toggle::after {
    border-width: 0px 0px 0px 0px !important;
    border-bottom: 2px solid #999 !important;
    border-right: 2px solid #999 !important;
    content: "";
    display: block;
    margin-top: -4px !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    -webkit-transform-origin: 66% 66% !important;
    -ms-transform-origin: 66% 66% !important;
    transform-origin: 66% 66% !important;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out !important;
    transition: all 0.15s ease-in-out !important;
    width: 9px !important;
    height: 9px !important;
    border-color: #000 !important;
}

.dropdown-toggle::after {
    position: relative !important;
}

.multiselect__select {
    width: 30px !important;
}

.three-dots-dropdown .dropdown-toggle::after,
.eliminate-icon.dropdown-toggle::after {
    display: none !important;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.mb--4 {
    margin-bottom: 4px !important;
}

.mb--20 {
    margin-bottom: 20px;
}

.bg-purple {
    background: #ea94f2de;
}

.bg-grey {
    background: #d9d9d9;
}

.bg-light-grey {
    background: #f1f1f1;
}

.border-container {
    border-radius: 6px;
    box-shadow: 0px 0px 2px 0px #1a202452;
    padding: 12px 9px;
    display: flex;
    justify-content: center;
    /* max-width: 400px; */
    /* margin-top: 20px !important; */
}

.border-container .row {
    width: 100%;
}

.border-container .col-3 {
    width: 33.3333%;
}

.text-right {
    text-align: right;
}

.justify-end {
    justify-content: end;
}

.offcanvas.offcanvas-end {
    width: 35vw;
}

.p-description {
    /* padding-top:15px ;
    padding-bottom:17px ; */
}

.select-full .nice-select {
    max-width: 100%;
}

.upfront {
    position: absolute;
    z-index: 99;
    top: 18px;
    font-size: 14px;
    left: 3px;
}

.category-select .nice-select .current {
    width: 101%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.see-more {
    color: #000;
    font-size: 16px;
    font-family: "darker-grotesque-bold";
}

.bg-yellow {
    background: #FFDC5F !important;
}

.btn.hover-bg:hover {
    background: #ffdc5f;
}

.area-select .nice-select .current,
.area-select .nice-select ul li {
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
}

.shipping-date-container .v3dp__datepicker .v3dp__popout.v3dp__popout-day {
    right: 0 !important;
}

.shadow-container {
    box-shadow: 0px 2px 4px 1px #5b687152;
    padding: 10px;
    border-radius: 6px;
}

.w-112 {
    width: 112px;
}

.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange,
.flatpickr-day.inRange,
.flatpickr-day.endRange:hover,
.flatpickr-day.startRange:hover {
    background: #ffdc5f;
    border-color: #ffdc5f;
    color: #000;
}

.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n + 1)) {
    -webkit-box-shadow: -10px 0 0 #ffdc5f;
    box-shadow: -10px 0 0 #ffdc5f;
}

.flatpickr-day.inRange {
    border-radius: 0;
    -webkit-box-shadow: -5px 0 0 #ffdc5f, 5px 0 0 #ffdc5f;
    box-shadow: -5px 0 0 #ffdc5f, 5px 0 0 #ffdc5f;
}

.flatpickr-day:hover {
    background-color: #ffdc5f;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background-color: #ffdc5f;
    border-color: #ffdc5f;
}

.flatpickr-day.selected {
    font-weight: bold;
    color: #000;
}

.flatpickr-day.today {
    border-color: #ffdc5f;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    border-color: #ffdc5f;
    background: #ffdc5f;
    color: #000;
}

.flatpickr-day.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
    border-color: #ffdc5f;
    background: #ffdc5f;
}

select.flatpickr-am-pm-dropdown {
    -webkit-appearance: menulist-button !important;
}

.alert.alert-success {
    width: fit-content !important;
}

#chat-img-full-view .modal-dialog {
    max-width: 850px;
}

.alert-success {
    position: fixed;
    z-index: 99999;
    top: 75px;
    left: 50%;
}

.v3dp__elements[data-v-65eb861b] button:not(:disabled):hover span,
.v3dp__elements[data-v-65eb861b] button.selected span {
    background-color: #ffdc5f !important;
    color: #000 !important;
}

.material-library-entity-img {
    width: 110px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
}

.tab-index {
    height: 27.59px;
    width: 27.59px;
    box-shadow: 0px 1px 2px 0px #5b687152;
    box-shadow: 0px 0px 1px 0px #1a202452;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.create-project-tab {
    display: flex;
    align-items: center;
    gap: 12px;
}

.create-project-tab.active .tab-index {
    background: #ffdc5f;
}

.create-project-tab.active p {
    font-family: "darker-grotesque-bold";
    font-size: 20px;
}

.mt-33 {
    margin-top: 33px;
}

.w-60 {
    width: 60px;
}

.currency-select .nice-select .current {
    line-height: 3;
}

.w-50 {
    width: 50%;
}

.w-33 {
    width: 33%;
}

.w-67 {
    width: 67%;
}

.w-30 {
    width: 33%;
}

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

.w-170 {
    width: 170px;
}

.w-147 {
    width: 147px;
}

.w-153 {
    width: 153px;
}

.right-0 {
    right: 0;
}

.mw-37 {
    max-width: 37%;
}

.mw-80 {
    max-width: 80%;
}

.mb-13 {
    margin-bottom: 13px;
}

.project-type-budget {
    white-space: pre-wrap;
    word-break: break-word;
}

.dashboard-blue-tag {
    background: #94aef2de;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.for-shadow {
    box-shadow: 0px 0px 1px 0px #1a202452;
}

.dropdown-menu.procurement-dropdown {
    min-width: 120px !important;
    max-width: 120px !important;
    width: 100%;
    min-width: 138px;
    padding: 10px 8px !important;
    box-shadow: rgba(26, 32, 36, 0.32) 0px 0px 2px 0px;
}

.dropdown-menu.procurement-dropdown .dropdown-item {
    padding: 3px 10px;
}

.dropdown-menu.show {
    z-index: 999;
}

.color-danger {
    color: #f8624e !important;
}

.multiselect-with-tags .multiselect__tags {
    height: 40px;
    overflow-y: auto;
    padding-top: 3px;
}

.mw-760 {
    max-width: 760px;
}

.review-status {
    color: #dfa751;
}

.in-progress-status {
    color: #4e9cf8;
}

.completed-status {
    color: #4bc057;
}

.br-6 {
    border-radius: 6px;
}

.dropdown.three-dots-dropdown ul.schedule-area-dropdown {
    max-width: max-content !important;
    padding: 10px 8px !important;
    box-shadow: rgba(26, 32, 36, 0.32) 0px 0px 2px 0px;
    max-height: 120px;
    overflow: auto;
}

ul.schedule-area-dropdown li {
    line-height: 1.8;
}

ul.schedule-area-dropdown a {
    padding: 3px 10px !important;
}

.dropdown.three-dots-dropdown ul.schedule-area-dropdown {
    max-width: max-content !important;
    padding: 10px 8px !important;
    box-shadow: rgba(26, 32, 36, 0.32) 0px 0px 2px 0px;
    max-height: 120px;
    overflow: auto;
}

ul.schedule-area-dropdown li {
    line-height: 1.8;
}

ul.schedule-area-dropdown a {
    padding: 3px 10px !important;
}

.notification-dot {
    height: 9px;
    width: 9px;
    background: #f8624e;
    position: absolute;
    border-radius: 50%;
    right: -3px;
    bottom: 0px;
}

.category-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/* ------------------------------- */
@media (max-width: 1024px) {
    .offcanvas.offcanvas-end {
        width: 80vw;
    }
}

@media (max-width: 768px) {
    .offcanvas.offcanvas-end {
        width: 90vw;
    }

    .nav-content-mobile-hide {
        display: none !important;
    }

    .dashboard-btns-filter-container {
        flex-direction: column !important;
        align-items: start !important;
        gap: 15px;
    }

    .project-name-dashboard-mini-left {
        margin-bottom: 20px;
    }

    .project-name-dashboard-mini-left,
    .project-name-dashboard-mini-right {
        width: 100%;
    }

    .project-details-main-container {
        flex-direction: column;
    }

    .mid-bar {
        display: none;
    }

    .people-on-leave {
        width: 100%;
        padding-left: 0;
        padding-top: 20px;
    }

    .project-name-dashboard-container {
        flex-direction: column;
        max-width: 100%;
    }

    .project-costing {
        width: 100%;
    }

    .sign-up-img {
        display: none;
    }

    .signup-content-container {
        width: 100%;
    }

    .signup-logo-container {
        padding: 20px;
        padding-bottom: 50px;
    }

    .signup-right-container-parent {
        height: calc(100vh - 300px);
    }

    .signup-right-container {
        padding: 0;
    }

    .currency-extra-margin {
        margin-bottom: 30px;
    }
}

/* avatar  */

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

.avatar.active {
    box-shadow: none;
}

.avatar:nth-child(1) {
    z-index: 5;
}

.avatar:nth-child(2) {
    z-index: 4;
}

.avatar:nth-child(3) {
    z-index: 3;
}

.avatar:nth-child(4) {
    z-index: 2;
}

.avatar:nth-child(5) {
    z-index: 1;
}

.multiselect.is-invalid>.multiselect__tags,
input.is-invalid,
.signup-inputs.is-invalid {
    border: none !important;
    box-shadow: 0px 0px 2px 0px #1a202452 !important;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.h-5 {
    height: 1.25rem;
    /* 20px */
}

.w-5 {
    width: 1.25rem;
    /* 20px */
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

.cursor-pointer {
    cursor: pointer;
}

.text-secondary {
    color: rgb(110, 124, 135);
}

/* .multi-select-tags-container span{
    display: inline-block;
} */
.tags.me-2 {
    display: inline-block;
    margin-bottom: 8px;
    background: #f8b44e !important;
    text-overflow: ellipsis;
    max-width: 251px;
    overflow: hidden;
    /* font-size: 18px; */
}

.multiselect__tags-wrap .multiselect__tag {
    background: #f8b44e !important;
    font-size: 18px;
}

/* .multiselect__tag-icon::after {
    color: #fff !important;
    font-size: 23px !important;
} */

button.create-one {
    background: transparent;
    border: none;
    outline: none;
    text-decoration: underline;
}

.display-block {
    display: block !important;
}

/* .remove-image-button {
    background: #000 !important;
} */
button.create-one {
    background: transparent;
    border: none;
    outline: none;
    text-decoration: underline;
}

.display-block {
    display: block !important;
}

.collaps-expand-btn {
    height: 32px;
    width: 101px;
    background: #fff;
    border-radius: 5px;
    border: solid 1px #e8e8e8;
    outline: none;
    font-size: 20px;
    padding-right: 20px;
    position: relative;
    z-index: 99;
    background: transparent;
    font-family: "darker-grotesque-bold";
    padding-bottom: 3px;
    background: #ffdc5f;
}

tr.custom-collapsed,
.custom-collapsed {
    display: none;
}

.dropdown.member-img-dropdown .dropdown-toggle {
    border: none;
    background: transparent;
}

.dropdown.member-img-dropdown .dropdown-toggle::after {
    display: none;
}

.remaining-member-list {
    background: white;
    border: 1px solid #d5dadd;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: "inter-Regular";
}

.member-img-icon-container> :nth-child(1) {
    z-index: 10;
    position: relative;
}

.member-img-icon-container> :nth-child(2) {
    z-index: 9;
    position: relative;
}

.member-img-icon-container> :nth-child(3) {
    z-index: 8;
    position: relative;
}

.member-img-icon-container> :nth-child(4) {
    z-index: 7;
    position: relative;
}

.remaining-member-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-finalcial {
    color: #1a1b1f;
    cursor: pointer;
    font-size: 20px;
    border-radius: 6px;
    display: inline-block;
    border: none;
    background: transparent;
}

.active.summary-finalcial {
    background: #ffdc5f;
}

#leaves-table thead th {
    background: transparent;
}