/* ------ROUND 4 START--------- */
.h-100-vh {
    height: 100vh;
}

.h-90 {
    height: 90%;
}

.w-80 {
    width: 80%;
}

.fs-8rem {
    font-size: 0.8rem;
}

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

.bottom-3 {
    bottom: 3px;
}

.bottom-50 {
    bottom: 50px;
}

.team-signup-bg {
    background-image: url("/assets/images/team-portal/sign-up.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    overflow-y: auto;
    /* height: 100vh; */
}

.team-signup-main-section {
    height: 100vh;
    overflow-x: hidden;
}

.gradient-bg {
    background-image: linear-gradient(#233136, #527885);
}

.gradient-bg2 {
    background-image: linear-gradient(171deg, #f38f52, #a2beb3);
}

.triple-gradient-bg {
    background-image: linear-gradient(to bottom, #527885, #233136, #e9e9e98f);
    /* background: linear-gradient(359.83deg, #233136 16.85%, #527885 94.26%), 
                linear-gradient(0deg, rgba(233, 233, 233, 0.25), rgba(233, 233, 233, 0.25)); */
}

.semi-transparent-rounded-bg {
    background-color: #ffffff41;
    border-radius: 5px;
}

.roboto-font {
    font-family: Roboto;
}

.text-shadow {
    text-shadow: 0 0 1.2px #000000;
}

.profile-pic-btn {
    background-image: url("/assets/images/team-portal/user.png");
    background-size: cover;
    border: 0;
    height: 150px;
    width: 150px;
    border-radius: 50%;
}

.my-input-number::-webkit-outer-spin-button,
.my-input-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.project-select {
    border: 0;

    -webkit-appearance: none;
}

.project-select option {
    font-size: 1rem;
    background-color: #233136;
    color: white;
}

.subtle-seafoam-button {
    border: 2px solid white;
    background-color: #a2beb3;
    color: white;
    border-radius: 5px;
    padding: 0.27rem 1.5rem 0.27rem 1.5rem;
    font-weight: 700;
}

.transparent-white-button2 {
    padding: 0.27rem 0.75rem 0.27rem 0.75rem;
    border: 2px solid white;
    background-color: transparent;
    border-radius: 5px;
}

/* account verification confirmation popup */
.popupContainer1 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2c3b40cb;
    padding: 20px;
    border: 2px solid white;
    color: white;
    z-index: 9999;
    animation: fadeIn 0.3s ease-in-out forwards;
}

.popupContainer2 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2c3b40cb;
    padding: 20px;
    border: 2px solid white;
    color: white;
    z-index: 9999;
    animation: fadeIn 0.3s ease-in-out forwards;
}

.popupContent {
    text-align: center;
}

.popupButton {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.orange-border {
    border: 2px solid #f38f52;
    border-radius: 5px;
}

.dark-gray-border {
    border: 2px solid #233136;
    border-radius: 5px;
}

.subtle-seafoam-border {
    border: 3px solid;
    border-image: linear-gradient(45deg, #a2beb3, #a2beb3) 1;
}

.gray-seafoam-double-border-up {
    border: 3px solid;
    border-image: linear-gradient(#a2beb3 50%, #595755 50%) 1;
}

.gray-seafoam-double-border-down {
    border: 3px solid;
    border-image: linear-gradient(#595755 50%, #a2beb3 50%) 1;
}

.gray-border {
    border: 3px solid;
    border-image: linear-gradient(#595755 50%, #595755 50%) 1;
}

.gradient-bordered-div {
    border: 3px solid transparent;
    border-radius: 5px;
    background: linear-gradient(to right, #2c3b40, #2c3b40), linear-gradient(45deg, #f38f52, #a2beb3);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

/* expandable container start */
.expandable-container {
    width: 300px;
}

.expandable-content {
    border: 1px solid #ecf0f1;
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.expandable-header {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.expandable-input {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* .expandable-input input {
  width: 100%;;
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
  background-color: #2e3b4e;
  color: #fff;
} */

.expandable-header span:last-child {
    font-size: 1.2em;
}

/* expandable container end */

/* .notif-bg{
  background-image: url('/assets/images/notif-simple.png');
  background-size: cover;
  background-repeat: no-repeat;
  height: 35px;
  width: 35px;
} */

.calendar-container {
    font-family: Overpass;
}

.calendar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    gap: 1rem;
    border-bottom: 3px solid white;
}

.calendar-header select {
    background-color: transparent;
    color: white;
    border: none;
    padding: 0.27rem 1.6rem 0.27rem 0.75rem;
    border-radius: 4px;
    font-size: 16px;
}

.calendar-header select option {
    background-color: #233136;
}

.calendar-grid-div {
    background-color: #ffffff21;
    width: 100%;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.calendar-grid > div {
    border-radius: 17px;
    overflow: hidden;
    padding: 5px 2px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    color: white;
}

.calendar-grid .day-label {
    background-color: transparent;
    font-weight: 400;
    font-size: 20px;
    font-family: Overpass;
}

.calendar-grid .clickable-day {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
}

.project-tabs {
    position: fixed;
    width: 89%;
    bottom: 90px;
}

/* -----archive toggle switch start----- */
.archive-switch-border {
    position: relative;
}

.archive-switch-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 34px;
    width: 55px;
    height: 25px;
    padding: 3px;
    background: linear-gradient(to bottom, #527885, #233136);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* .archive-switch-border{
    width: 55px;
    height: 25px;
    border-radius: 34px;
    display: inline-block;
    background: linear-gradient(to bottom, #527885, #233136);
} */

.archive-switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 25px;
}

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

.archive-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.archive-slider:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    top: 1px;
    left: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .archive-slider {
    background-color: transparent;
    /* Color when on */
}

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

.archive-slider.archive-round {
    border-radius: 34px;
    border: 0px solid white;
}

.archive-slider.archive-round:before {
    border-radius: 50%;
}

/* -----archive toggle switch end------ */

/* ============================================ */
/* -------desktop design css start------- */
.d-team-signup-bg {
    background-image: linear-gradient(rgba(44, 59, 64, 0.41), rgba(44, 59, 64, 0.41)), url("/assets/images/team-portal/d-sign-up.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

.d-team-signup-logo {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 111px;
}

.d-team-signup-text {
    text-align: center;
    color: #ffffff;
    display: flex;
    align-items: center;
    margin-top: 35px;
    height: 212px;
}

.d-team-signup-text h1 {
    font-family: Overpass;
    font-weight: 700;
    font-size: 24px;
    line-height: 30.38px;
}

.d-signup-btn {
    width: 272px;
    height: 47px;
    background-color: #a2beb3;
    color: white;
    border: 2px solid white;
    border-radius: 8px;
    padding-top: 12px;
    padding-right: 43px;
    padding-bottom: 12px;
    padding-left: 43px;
    box-sizing: border-box;
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
}

/* .d-signin-btn {
    top: 24px;
    right: 20px;
    position: absolute;
}

.d-signin-btn button {
    color: white;
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
    border: 0;
    background-color: transparent;
}

*/
.d-final-check-btn {
    width: 351px;
    height: 47px;
    border: 3px solid #e9e9e9;
    background-color: #ffffff40;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 0px 4px 4px 0px #00000040;
    text-shadow: 0px 2px 5px #00000040;
    color: #e9e9e9;
    font-family: Overpass;
    font-weight: 700;
    font-size: 16px;
}

.d-final-check-submit {
    border: 3px solid #e9e9e9;
    background: linear-gradient(160deg, rgba(243, 143, 82, 1), rgba(162, 190, 179, 1));
    color: #e9e9e9;
    border-radius: 8px;
    width: 351px;
    height: 47px;
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
}

.d-input-1 {
    width: 272px;
    height: 47px;
    border: 2px solid #e9e9e9;
    border-radius: 8px;
    background-color: #e0e0e040;
    text-align: center;
    color: #e9e9e9;
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
}

.d-input-1::placeholder {
    color: #e9e9e9;
}

.d-input-1:focus-visible {
    outline: 2px solid transparent;
}

.d-input-2 {
    width: 351px;
    height: 48px;
    border: 3px solid #ffffff;
    border-radius: 5px;
    background-color: #ffffff40;
    padding-left: 5px;
    color: #ffffff;
    font-family: Overpass;
    font-weight: 700;
    font-size: 16px;
}

.d-input-2::placeholder {
    color: #ffffff;
}

.d-input-2:focus-visible {
    outline: 2px solid transparent;
}

.d-login-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.d-gradient-bg {
    background-image: linear-gradient(#233136, #527885);
}

.d-wsn-full-bg {
    background-image: url("/assets/images/wsn-bg-icon-full.png");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    height: 100%;
    overflow-y: auto;
}

.d-signup-header {
    display: flex;
    justify-content: space-between;
    padding: 24px;
}

.d-profile-btn-col-2 {
    width: 14%;
    flex: 0 0 auto;
    padding: 0;
}

.d-profile-col-2 {
    width: 15.6666666667%;
    flex: 0 0 auto;
}

.d-profile-col-3 {
    width: 18.6666666667%;
    flex: 0 0 auto;
}

.d-personality-wrapper {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 20px;
}

.d-personality-wrapper > div {
    width: 351px;
    max-width: 49%;
}

.d-personality-box {
    width: 100%;
    height: 48px;
    padding: 7px;
    border-radius: 8px;
    border: 3px solid #e9e9e9 !important;
    background-color: transparent;
    box-sizing: border-box;
}

.d-experience-wrapper {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 20px;
}

.d-experience-wrapper > div {
    width: 351px;
    max-width: 49%;
}

@media screen and (max-width: 823px) {
    .d-personality-box .star img {
        width: 20px;
        height: 22px;
    }
}

.d-references-wrapper {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 40px;
}

.d-final-check-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.d-personal-info-input {
    width: 351px;
    max-width: 49%;
    height: 47px;
    color: #f38f52;
    text-shadow: 0px 2px 5px #00000040;
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    padding-top: 14px;
    padding-right: 7px;
    padding-bottom: 14px;
    padding-left: 7px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: transparent;
    font-family: Overpass;
    font-weight: 400;
    font-size: 16px;
}

.d-personal-info-input::placeholder {
    color: #f38f52;
    text-shadow: 0px 2px 5px #747474;
}

.d-personal-info-input:focus-visible {
    outline: 2px solid transparent;
}

/* ----gray 1 borders and orange text---- */
.d-wsn-select-1 {
    appearance: none;
    /* Hides the native dropdown arrow */
    -webkit-appearance: none;
    /* For Safari */
    -moz-appearance: none;
    /* For Firefox */
    width: 351px;
    max-width: 49%;
    height: 48px;
    padding: 11px 7px 11px 7px;
    border-radius: 8px;
    border: 3px solid #e9e9e9;
    background-color: transparent;
    box-sizing: border-box;
    white-space: normal;
    background: url(/assets/images/team-portal/down-arrow-new.png) no-repeat;
    background-size: 15px;
    background-position: right 10px center;
    font-family: Overpass;
    font-weight: 400;
    font-size: 16px;
    color: #f38f52;
    text-shadow: 0px 2px 5px #00000040;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.d-wsn-select-1 option {
    background-color: #233136;
    white-space: normal;
}

.d-wsn-select-1 option:hover {
    background-color: #2c3e44;
}

/* --------------------------------------- */

/* ----gray 1 borders and gray 1 text---- */
.d-wsn-select-2 {
    appearance: none;
    /* Hides the native dropdown arrow */
    -webkit-appearance: none;
    /* For Safari */
    -moz-appearance: none;
    /* For Firefox */
    width: 351px;
    max-width: 49%;
    height: 48px;
    padding: 11px 7px 11px 7px;
    border-radius: 8px;
    border: 3px solid #e9e9e9;
    background-color: transparent;
    box-sizing: border-box;
    white-space: normal;
    background: url(/assets/images/team-portal/down-arrow-new.png) no-repeat;
    background-size: 15px;
    background-position: right 10px center;
    font-family: Overpass;
    font-weight: 400;
    font-size: 16px;
    color: #e9e9e9;
    text-shadow: 0px 2px 5px #00000040;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.d-wsn-select-2 option {
    background-color: #233136;
    white-space: normal;
}

.d-wsn-select-2 option:hover {
    background-color: #2c3e44;
}

/* --------------------------------------- */

.d-positions-wrapper {
    width: 351px;
    max-width: 49%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.d-team-position {
    /*used in team position in registration*/
    width: 100%;
    margin-bottom: 0;
    height: 53px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    border: 3px solid white;
    border-radius: 8px;
}

/* --------------------------------------- */

.d-orange-btn {
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    background-color: #f38f52;
    color: #e9e9e9;
    width: 136px;
    height: 47px;
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
}

.d-profile-tab-btn {
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
    color: #e9e9e9;
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    background-color: #f38f52;
    box-shadow: 0px 4px 4px 0px #00000040;
    height: 47px;
}

.d-active-profile-tab-btn {
    border: 3px solid #f38f52;
    background-color: #e9e9e9;
}

.d-profile-tab-btn:disabled {
    background-color: #595755;
}

.d-welcome-btn {
    height: 47px;
    background-color: #ffffff33;
    color: #ffffff;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
    border: 2px solid #e9e9e9;
    border-radius: 8px;
    width: 48%;
}

.d-welcome-btn-active {
    background-image: linear-gradient(145deg, #f38f52, #a2beb3);
}

.d-notif-btn {
    border: 3px solid #e9e9e9;
    background-color: #ffffff21;
    border-radius: 8px;
    height: 50px;
    color: #e9e9e9;
    box-shadow: 0px 4px 4px 0px #00000040;
    width: 48%;
}

.d-notif-btn-active {
    background-image: linear-gradient(145deg, #f38f52, #a2beb3);
}

.d-notifs {
    background-color: #e9e9e940;
    border-radius: 8px;
    width: 100%;
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.d-close-notif {
    border: 0;
    background-color: transparent;
}

/* bar chart start */
.chart-container {
    display: flex;
    position: relative;
}

.chart {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* justify-content: space-around; */
    border-left: 3px solid white;
    border-bottom: 3px solid white;
    height: 320px;
    width: 80%;
    padding-left: 2px;
    padding-bottom: 2px;
}

.bar-container {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* justify-content: space-around; */
    height: 100%;
    width: 85%;
    gap: 1.4%;
    padding-left: 10px;
}

.y-axis-scale {
    position: absolute;
    left: -20px;
    /* Offset to the left of the y-axis */
    width: 40px;
}

.y-axis-scale-sales {
    position: absolute;
    left: -15px;
    /* Offset to the left of the y-axis */
    width: 25px;
}

.y-axis-line {
    position: absolute;
    width: 20px;
    left: 10px;
    border-top: 1px solid #ccc;
}

.y-axis-line.major {
    border-top: 2px solid white;
    width: 40px;
    left: 0;
}

.y-axis-line.major-orange {
    border-top: 2px solid #f38f52;
    width: 40px;
    left: 0;
}

.y-axis-line.major-sales {
    border-top: 2px solid #f38f52;
    width: 25px;
    left: 0;
}

.y-axis-line.minor-sales {
    position: absolute;
    width: 10px;
    left: 10px;
    border-top: 2px solid #f38f52;
}

.y-axis-line.minor {
    border-top: 1px solid #f38f52;
}

.chart-bar {
    position: relative;
    border: 2px solid white;
    text-align: center;
    color: white;
    font-weight: bold;
    transition: 0.3s ease;
    display: flex;
    align-items: end;
    justify-content: end;
    padding: 3px 3px 0 0;
    width: 8.3%;
    min-width: 8.3%;
}

.chart-bar-bg-dark {
    background: #c5e3d7;
}

.chart-bar-bg-light {
    background: #c5e3d73f;
}

.chart-bar-bg-light-subtle-seafoam {
    background: #c5e3d7;
}

.chart-bar-bg-dark-subtle-seafoam {
    background: #698a7d;
}

.chart-bar-bg-subtle-seafoam {
    background: #a2beb3;
}

.chart-bar span {
    font-size: 13px;
}

.chart-labels {
    display: flex;
    width: 78%;
    margin-top: 10px;
    color: white;
    font-weight: bold;
    gap: 1.3%;
}

.chart-label {
    width: 8.3%;
    text-align: center;
}

/* bar chart end */

.stats-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #f38f52;
    opacity: 0.5;
    pointer-events: none;
}

.d-team-profile-btn {
    background-color: #e9e9e940;
    color: #e9e9e9;
    border: 3px solid #e9e9e9;
    width: 100%;
    height: 47px;
    border-radius: 8px;
    font-family: Overpass;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.d-team-profile-input {
    background-color: transparent;
    color: #f38f52;
    border: 3px solid #e9e9e9;
    width: 100%;
    height: 47px;
    border-radius: 8px;
    font-family: Overpass;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0px 4px 4px 0px #00000040;
    padding: 11px 7px 11px 7px;
}

.d-team-profile-input::placeholder {
    color: #f38f52;
}

.d-team-profile-input:focus-visible {
    outline: 2px solid #f38f52;
    border-radius: 3px;
}

.d-team-profile-select {
    appearance: none;
    /* Hides the native dropdown arrow */
    -webkit-appearance: none;
    /* For Safari */
    -moz-appearance: none;
    /* For Firefox */
    padding: 11px 7px 11px 7px;
    border-radius: 8px;
    border: 3px solid #e9e9e9;
    background-color: transparent;
    box-sizing: border-box;
    white-space: normal;
    background: url(/assets/images/team-portal/down-arrow-new.png) no-repeat;
    background-size: 15px;
    background-position: right 10px center;

    color: #f38f52;
    width: 100%;
    height: 47px;
    font-family: Overpass;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.d-team-profile-select option {
    background-color: #233136;
    white-space: normal;
}

.d-team-profile-select option:hover {
    background-color: #2c3e44;
}

#select-wrapper {
    position: relative;
}

#text-measurer {
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
    font-family: inherit;
    font-size: inherit;
}

.d-calendar-day {
    border-radius: 8px !important;
    position: relative;
}

.d-calendar-subtle-seafoam-bg {
    background-color: #a2beb3;
    position: absolute;
}

.d-gray-seafoam-double-bg-down {
    background: linear-gradient(to bottom, #595755 0%, #595755 50%, #a2beb3 50%, #a2beb3 100%);
}

.d-gray-seafoam-double-bg-up {
    background: linear-gradient(to bottom, #a2beb3 0%, #a2beb3 50%, #595755 50%, #595755 100%);
}

.d-calendar-white-border {
    border: 2px solid #ffffff;
    border-radius: 8px;
}

.d-transparent-input {
    text-align: center;
    color: white;
    background: transparent;
    font-weight: bold;
    min-height: 47px;
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    width: 100%;
}

.d-transparent-input:focus {
    background: transparent !important;
    outline: none;
    box-shadow: none;
    border-color: white !important;
    color: white;
}

.d-transparent-input::placeholder {
    font-weight: bold;
    color: white;
}

.col-10-percent {
    flex: 0 0 auto;
    width: 10% !important;
}

.col-11-percent {
    flex: 0 0 auto;
    width: 11% !important;
}

.col-12-percent {
    flex: 0 0 auto;
    width: 12% !important;
}

.col-14-percent {
    flex: 0 0 auto;
    width: 14% !important;
}

.col-16-percent {
    flex: 0 0 auto;
    width: 16% !important;
}

.col-19-percent {
    flex: 0 0 auto;
    width: 19.666667%;
}

/* Carousel Container */
.carousel {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Inner Container for Cards */
.carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    align-items: stretch;
}

/* Individual Card */
.cardd {
    min-width: 100%;
    padding: 5px;
    box-sizing: border-box;
    flex-grow: 1;
    /* height: 100%; */
    /* margin: 0 5px; */
}

/* Removed empty ruleset for .cardd > .row */

/* .cardd p {
    margin: 10px 0;
} */

.cardd .urgent {
    color: #e74c3c;
    font-weight: bold;
}

/* Indicators */
.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.indicator {
    width: 10px;
    height: 10px;
    background: #d9d9d97a;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.indicator.i-active {
    background: #d9d9d9;
    /* Active indicator color */
}

.white-bordered-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #e9e9e9;
    background-color: transparent;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checked state with custom background */
.white-bordered-checkbox:checked {
    border-color: #f38f52;
}

/* Checkmark */
.white-bordered-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 7px;
    height: 13px;
    border: solid #f38f52;
    border-width: 0 3.5px 3.5px 0;
    transform: rotate(45deg);
    border-radius: 2px;
}

.d-signed-docs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    /* optional spacing */
}

.d-signed-doc-gray-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #e9e9e9;
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    background-color: #e9e9e940;
    height: 42px;
    font-family: Overpass;
    font-weight: 700;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.d-signed-doc-orange-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #e9e9e9;
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    background-color: #f38f5233;
    height: 42px;
    font-family: Overpass;
    font-weight: 700;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.custom-iwp-select-wrapper {
    position: relative;
    display: inline-block;
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: #ffffff59;
    width: 100%;
}

.custom-iwp-select {
    -webkit-appearance: none;
    border: 0;
    white-space: normal;
    padding: 0px 40px 0px 10px;
    font-size: 16px;
    color: #f38f52;
    text-shadow: 0px 4px 4px #6b6b6b73;
    font-family: Overpass;
    font-weight: 400;
    font-size: 16px;
    height: 42px;
    width: 100%;
    background-color: transparent;
}

.custom-iwp-select:focus-visible {
    outline: 2px solid transparent;
}

.custom-iwp-select option {
    background-color: #233136;
    white-space: normal;
}

.custom-iwp-select option:hover {
    background-color: #2c3e44;
}

.custom-iwp-select-wrapper img {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.iwp-input {
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: #ffffff59;
    font-size: 16px;
    color: #f38f52;
    text-shadow: 0px 4px 4px #6b6b6b73;
    font-family: Overpass;
    font-weight: 400;
    font-size: 16px;
    height: 48px;
    width: 100%;
}

.iwp-input:focus-visible {
    outline: 2px solid transparent;
}

.iwp-input::placeholder {
    color: #f38f52;
}

.iwp-button {
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: #ffffff59;
    font-size: 16px;
    color: #f38f52;
    text-shadow: 0px 4px 4px #6b6b6b73;
    font-family: Overpass;
    font-weight: 400;
    font-size: 16px;
    height: 48px;
    width: 100%;
}

.iwp-tab {
    border: 3px solid #ffffff;
    border-radius: 8px;
    background-color: #e9e9e940;
    color: #e9e9e9;
    height: 47px;
    width: 80%;
    font-family: Overpass;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.iwp-tab-active {
    background-image: linear-gradient(171deg, #f38f52, #a2beb3);
}

.iwp-proposal-button {
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: #e9e9e940;
    font-size: 16px;
    color: #e9e9e9;
    text-shadow: 0px 4px 4px #6b6b6b73;
    font-family: Overpass;
    font-weight: 700;
    font-size: 16px;
    height: 48px;
    width: 100%;
}

.iwp-documentation-button {
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: #ffffff57;
    color: #e9e9e9;
    text-shadow: 0px 4px 4px #6b6b6b73;
    font-family: Overpass;
    font-weight: 700;
    height: 47px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
}

.iwp-pgrs-hnd-off-btn {
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    color: #e9e9e9;
    background-color: #ffffff33;
    height: 47px;
    font-family: Overpass;
    font-weight: 700;
}

.custom-wjp-select-wrapper {
    position: relative;
    display: inline-block;
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: transparent;
    width: 100%;
}

.custom-wjp-select {
    -webkit-appearance: none;
    border: 0;
    white-space: normal;
    padding: 0px 40px 0px 10px;
    font-size: 16px;
    color: #f38f52;
    text-shadow: 0px 4px 4px #6b6b6b73;
    font-family: Overpass;
    font-weight: 400;
    font-size: 16px;
    height: 42px;
    width: 100%;
    background-color: transparent;
}

.custom-wjp-select:focus-visible {
    outline: 2px solid transparent;
}

.custom-wjp-select option {
    background-color: #233136;
    white-space: normal;
}

.custom-wjp-select option:hover {
    background-color: #2c3e44;
}

.custom-wjp-select-wrapper img {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.wjp-input {
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: transparent;
    font-size: 16px;
    color: #f38f52;
    text-shadow: 0px 4px 4px #6b6b6b73;
    font-family: Overpass;
    font-weight: 400;
    font-size: 16px;
    height: 48px;
    width: 100%;
}

.wjp-input {
    border: 3px solid #e9e9e9;
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: transparent;
    font-size: 16px;
    color: #f38f52;
    text-shadow: 0px 4px 4px #6b6b6b73;
    font-family: Overpass;
    font-weight: 400;
    font-size: 16px;
    height: 48px;
    width: 100%;
}

.wjp-input:focus-visible {
    outline: 2px solid transparent;
}

.wjp-input::placeholder {
    color: #f38f52;
}

.wjp-input-2 {
    border: 3px solid #e9e9e9;
    border-radius: 5px;
    background-color: transparent;
    font-size: 16px;
    color: #f38f52;
    text-shadow: 0px 4px 4px #6b6b6b73;
    font-family: Overpass;
    font-weight: 400;
    font-size: 16px;
    height: 48px;
    width: 100%;
}

.wjp-input-2:focus-visible {
    outline: 2px solid transparent;
}

.wjp-input-2::placeholder {
    color: #f38f52;
}

.wjp-tab {
    border: 3px solid #ffffff;
    border-radius: 8px;
    background-color: #ffffff40;
    color: #e9e9e9;
    height: 47px;
    width: 95%;
    font-family: Overpass;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0px 4px 4px 0px #00000040;
    padding-left: 5px;
    padding-right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wjp-tab p {
    width: -webkit-fill-available;
}

.availability-status-btn.selected {
    border: 3px solid #f38f52 !important;
}

.wjp-tab-active {
    background-image: linear-gradient(171deg, #f38f52, #a2beb3);
}

.wjp-tab-content {
    display: none;
}

.wjp-tab-content.tab-visible {
    display: block;
}

.wjp-pending-opps-text {
    color: #ffffff;
    font-family: Inter;
    font-weight: 700;
    font-size: 48px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-bottom: 0px;
}

/* ----subtle seafoam slider with seafoam border start----- */
.switch-subtle-seafoam2 {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 25px;
}

.switch-subtle-seafoam2 input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-subtle-seafoam2 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.5);
}

.slider-subtle-seafoam2:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    top: 1px;
    left: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider-subtle-seafoam2 {
    background-color: white;
    /* Color when on */
}

input:checked + .slider-subtle-seafoam2:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    background-color: #a2beb3;
}

.slider-subtle-seafoam2.round-subtle-seafoam2 {
    border-radius: 34px;
    border: 3px solid #a2beb3;
}

input:checked + .slider-subtle-seafoam2.round-subtle-seafoam2 {
    border: 3px solid white;
}

.slider-subtle-seafoam2.round-subtle-seafoam2:before {
    border-radius: 50%;
}

/* ----subtle seafoam slider with seafoam border end----- */

/* ------slider orange 2------- */
.switch-orange2 {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 25px;
}

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

.slider-orange2 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider-orange2:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 21px;
    top: 0px;
    left: 0px;
    background-color: #f38f52;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider-orange2 {
    background-color: #f38f52;
    /* Color when on */
}

input:checked + .slider-orange2:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    background-color: white;
    left: 4px;
}

.slider-orange2.round-orange2 {
    border-radius: 34px;
    border: 3px solid white;
}

.slider-orange2.round-orange2:before {
    border-radius: 50%;
}

/* ------SEQUENCE LOCATOR START----- */
.timeline {
    position: relative;
    width: 90%;
    max-width: 900px;
    margin: auto;
    height: 220px;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 48px;
    width: 86.5%;
    height: 4px;
    background-color: white;
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-event {
    position: absolute;
    width: 100px;
    text-align: center;
    z-index: 2;
}

.timeline-circle {
    width: 40px;
    height: 40px;
    background-color: #e0e0e0;
    border: 3px solid #a2beb3;
    border-radius: 50%;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #f38f52;
    font-size: 24px;
    font-family: Overpass;
    font-weight: 700;
}

.timeline-line-vertical {
    width: 4px;
    height: 25px;
    background-color: #a2beb3;
    margin: auto;
}

.up {
    top: -9px;
}

.down {
    bottom: -9px;
}

.label-top,
.label-bottom {
    font-size: 13px;
    line-height: 1.2;
    height: 50px;
    font-family: Overpass;
    font-weight: 400;
    color: #ffffff;
}

.coverage-overlay {
    position: absolute;
    border: 1px solid #c5e3d780;
    background-color: #c5e3d733;
    height: 100%;
    top: -0.5rem;
    left: 1.5rem;
}

.coverage-overlay-job-placed {
    position: absolute;
    border: 1px solid #c5e3d780;
    background-color: #2c3b4073;
    height: 100%;
    top: -0.5rem;
    left: 1.5rem;
}

/* -------SEQUENCE LOCATOR END------- */

.timeline-btn-dark-gray {
    border: 3px solid #e9e9e9;
    background-color: #2c3b40d9;
    color: #e9e9e9;
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
    height: 47px;
    border-radius: 8px;
}

.timeline-btn-gray {
    border: 3px solid #e9e9e9;
    background-color: #595755;
    color: #e9e9e9;
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
    height: 47px;
    border-radius: 8px;
}

.timeline-btn-subtle-seafoam {
    border: 3px solid #e9e9e9;
    background-color: #a2beb3;
    color: #e9e9e9;
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
    height: 47px;
    border-radius: 8px;
}

.timeline-btn-orange {
    border: 3px solid #f38f52;
    background-color: #e9e9ee;
    color: #f38f52;
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
    height: 47px;
    border-radius: 8px;
}

/* -------desktop design css end------- */
/* ============================================== */

@media screen and (max-width: 370px) {
    .calendar-grid div {
        padding: 5px 1px;
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 395px) {
    /* .project-tab-img {
        width: 25px;
    } */

    .availablity-img {
        width: 27px;
    }
}

.selected-values {
    color: white;
}

/* @media screen and (max-width: 576px) {
    .w-sm-100{
        width: 100%;
    }
    .fs-sm{
        font-size: 0.8rem;
    }
} */

/* ------------------------------------------------------------ */
/* -----------------------ROUND 4 END-------------------------- */