#primacDashboardLeaderWrapper,
.PDL-all-container,
.PDL-areas-container,
.PDL-staff-container,
.PDL-issues-container {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 2rem);
}

#primacDashboardLeaderWrapper p {
    font-size: clamp(12px, 1.5vw, 16px);
    margin: 0;
}

#primacDashboardLeaderWrapper select,
.PDL-staff-container select {
    padding: clamp(0.5rem, 1vw, 1rem);
    border-radius: 8px;
    font-size: clamp(12px, 1.5vw, 16px);
}



.PDL-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    flex-wrap: wrap;
}

.PDL-tab {
    flex: auto 1 1;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    color: #5581FA;
    font-size: clamp(12px, 1.5vw, 16px);
    border: 0;
    outline: 0;
}

.PDL-tab-active {
    background-color: #5581FA;
    color: #fff;
}



.PDL-all-boxes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    flex-wrap: wrap;
}

.PDL-all-box {
    padding: clamp(1rem, 2vw, 2rem);
    border-radius: 16px;
    border: 1px solid black;
    flex: 45% 1 1;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 1rem);
}

.PDL-all-box-color-1 {
    background: linear-gradient(to bottom, rgba(232, 255, 249, 0.25), rgba(58, 183, 114, 0.25));
    border-color: #40CE49;
}

.PDL-all-box-color-2 {
    background: linear-gradient(to bottom, rgba(193, 200, 233, 0.25), rgba(82, 100, 202, 0.25));
    border-color: #86ABFF;
}

.PDL-all-box-color-3 {
    background: linear-gradient(to bottom, rgba(255, 189, 97, 0.25), rgba(240, 154, 33, 0.25));
    border-color: #E0B67C;
}

.PDL-all-box-color-4 {
    background: linear-gradient(to bottom, rgba(223, 203, 255, 0.25), rgba(213, 141, 229, 0.25));
    border-color: #DAC1F8;
}

.PDL-all-box p {
    color: #4B4A65;
}

.PDL-all-box-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.PDL-all-box-row2 {
    display: flex;
    justify-content: start;
    height: 32px;
    gap: 0.5rem;
}

.PDL-all-box-row2 h1 {
    font-size: clamp(20px, 2.5vw, 24px);
    font-weight: bold;
    line-height: 20px;
    align-self: start;
}

.PDL-all-box-row2 p {
    align-self: end;
}



.PDL-all-date-group {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 2rem);
}

.PDL-all-date-group + .PDL-all-date-group {
    margin-top: clamp(0.5rem, 1vw, 1rem);
}

.PDL-all-recent {
    padding: clamp(1rem, 2vw, 2rem);
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid rgb(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 2rem);
}

.PDL-all-recent h1 {
    font-weight: bold;
    font-size: clamp(16px, 2vw, 20px);
}

.PDL-all-recent-cards {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 1rem);
}

.PDL-all-recent-card {
    padding: clamp(0.5rem, 1vw, 1rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
}

.PDL-all-recent-card-completed {
    background-color: #F0FDF4;
}

.PDL-all-recent-card-completed div p span {
    color: #00A63E;
}

.PDL-all-recent-card-inProgress {
    background-color: #EFF6FF;
}

.PDL-all-recent-card-inProgress div p span {
    color: #155DFC;
}

.PDL-all-recent-card div {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
}



.PDL-areas-cards,
.PDL-areas-card,
.PDL-staff-cards,
.PDL-staff-card,
.PDL-issues-active-cards,
.PDL-issues-active-card,
.PDL-attention-cards {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 1rem);
}

.PDL-areas-card,
.PDL-staff-card,
.PDL-issues-active-card {
    border-radius: 16px;
    border: 1px solid rgb(0, 0, 0, 0.1);
    padding: clamp(1rem, 2vw, 2rem);
    background-color: white;
}

.PDL-areas-card-completed .PDL-areas-card-row1 p {
    background-color: #F0FDF4;
    color: #00A63E;
    border: 1px solid rgb(0, 0, 0, 0.1);
}

.PDL-areas-card-row1,
.PDL-areas-card-row2,
.PDL-areas-card-row3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.PDL-areas-card-row1 h1,
.PDL-areas-card-row1 p {
    font-size: clamp(16px, 2vw, 20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
}

.PDL-areas-card-row1 p {
    font-size: clamp(12px, 1.5vw, 16px);
    border-radius: 8px;
    padding: 0.5rem 1rem;
}

.PDL-areas-card-row2 {
    flex-wrap: wrap;
    gap: clamp(0.5rem, 1vw, 1rem);
}

.PDL-areas-card-row2-progress {
    width: 100%;
    height: 8px;
    background-color: rgba(3, 2, 19, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.PDL-areas-card-row2-progressBar {
    height: 100%;
    background-color: #6A88E1;
    border-radius: 8px;
}



.PDL-staff-container select {
    width: fit-content;
}

.PDL-staff-satisfaction-high {
    color: #00A63E;
}

.PDL-staff-satisfaction-medium {
    color: #D08700;
}

.PDL-staff-satisfaction-low {
    color: #D4183D;
}

.PDL-staff-card {
    gap: clamp(1rem, 2vw, 2rem);
}

.PDL-staff-card-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.PDL-staff-card-row1 h1 {
    font-size: clamp(16px, 2vw, 20px);
}

.PDL-staff-card-row1 p,
.PDL-issues-active-card-row3 span,
.PDL-attention-cards div small {
    font-size: clamp(12px, 1.5vw, 16px);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    background-color: #fff;
    border: 1px solid rgb(0, 0, 0, 0.1);
}

.PDL-staff-card-row1 small {
    font-size: clamp(12px, 1.5vw, 16px);
    color: #717182;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
}

.PDL-staff-card-row2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
    flex-wrap: wrap;
}

.PDL-staff-card-row2 small {
    font-size: clamp(12px, 1.5vw, 16px);
    flex: auto 0 1;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
}

.PDL-staff-card-row3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
    flex-wrap: wrap;
}

.PDL-staff-card-row3 button {
    border-radius: 8px;
    border: 1px solid rgb(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 0.5rem 1rem;
    font-size: clamp(12px, 1.5vw, 16px);
    flex: 256px 1 1;
}



.PDL-issues-high {
    background-color: #D4183D !important;
    color: #fff !important;
}

.PDL-issues-medium {
    background-color: #ECEEF2 !important;
    color: #030213 !important;
}

.PDL-issues-low {
    color: #0A0A0A !important;
    border: 1px solid rgb(0, 0, 0, 0.1) !important;
}

.PDL-issues-inProgress {
    background-color: #EFF6FF !important;
    color: #155DFC !important;
}

.PDL-issues-open {
    background-color: #FEFCE8 !important;
    color: #D08700 !important;
}

.PDL-issues-active,
.PDL-attention {
    padding: clamp(1rem, 2vw, 2rem);
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid rgb(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 2rem);
}

.PDL-issues-active > h1,
.PDL-attention > h1 {
    font-size: clamp(16px, 2vw, 20px);
}

.PDL-issues-active-card-row1 {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
}

.PDL-issues-active-card-row1 span {
    font-size: clamp(10px, 1vw, 12px);
    border-radius: 8px;
    padding: 0.5rem 1rem;
}

.PDL-issues-active-card-row2 {
    color: #717182;
}

.PDL-issues-active-card-row3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.PDL-attention-card {
    background-color: #FEF2F2;
    color: #0A0A0A;
    padding: clamp(0.5rem, 1vw, 1rem);
    display: flex;
    justify-content: start;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
    border-radius: 8px;
}

.PDL-attention-card p {
    width: 100%;
}