.text-draft {
    color: #17a2b8 !important;
}

.text-inprogress {
    color: #007bff !important;
}

.text-overdue {
    color: #ffc107 !important;
}

.text-completed {
    color: #28a745 !important;
}

.text-rejected {
    color: #dc3545 !important;
}

.text-canceled {
    color: #343a40 !important;
}


.bg-draft {
    background-color: #17a2b8 ;
    color: #fff ;
}

.bg-inprogress {
    background-color: #007bff ;
    color: #fff ;
}

.bg-overdue {
    background-color: #ffc107 ;
    color: #fff ;
}

.bg-completed {
    background-color: #28a745 ;
    color: #fff ;
}

.bg-rejected {
    background-color: #dc3545 ;
    color: #fff ;
}

.bg-canceled {
    background-color: #343a40 ;
    color: #fff ;
}



.lb-draft {
    border-left: 15px solid #17a2b8 !important;
}

.lb-inprogress {
    border-left: 15px solid #007bff !important;
}

.lb-overdue {
    border-left: 15px solid #ffc107 !important;
}

.lb-completed {
    border-left:15px solid #28a745 !important;
}

.lb-rejected {
    border-left: 15px solid #dc3545 !important;
}

.lb-canceled {
    border-left: 15px solid #343a40 !important;
}
.avatar-drp-profile {
    border-radius: 50%;
    height: 70px;
    width: 70px;
}

.drp-user {
    width: 100%;
}
.p-l-25{
    padding-left:25px;
}
.p-l-r-30 {
    padding-left: 30px;
    padding-right: 30px;
}
.alert-default {
    color: #363e49;
    background-color: #e4e7eb;
    border-color: #d3d8de;
    font-size: 16px;
}

.alert-light {
    color: #363e49;
    background-color: #f8f8f8;
    border-color: #f0f0f0;
    padding: 6px 10px;
    border-radius: 5px;
}

.user-photo {
    height: 2.8rem;
    width: 2.8rem;
}

.user-photo-large {
    height: 8rem;
    width: 8rem;
    border: 1px solid #dcdcdc;
}
.user-popup-card {
    cursor:pointer;
}
.user-popup-card:hover {
    color: #007bff;
}

.hr-pad-top-bot-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.hr-pad-top-bot-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.hr-pad-top-bot-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.hr-pad-top-15 {
    padding-top: 15px;
}

.hr-pad-top-10 {
    padding-top: 10px;
}

.hr-xxx-small {
    width: 100%;
    max-width: 50px;
}

.hr-pad-10 {
    padding: 10px;
}

.hr-pad-15 {
    padding: 15px;
}

.hr-xx-small {
    width: 100% !important;
    max-width: 80px !important;
}

.hr-x-small {
    width: 100% !important;
    max-width: 100px !important;
}

.hr-small {
    width: 100% !important;
    max-width: 150px !important;
}

.hr-medium {
    width: 100%  !important;
    max-width: 200px !important;
}

.hr-large {
    width: 100% !important;
    max-width: 250px !important;
}

.hr-x-large {
    width: 100%;
    max-width: 300px !important;
}

.hr-xx-large {
    width: 100% !important;
    max-width: 400px !important;
}

.hr-xxx-large {
    max-width: 500px !important;
    width: 100% !important;
}

.hr-xl-large {
    max-width: 600px !important;
    width: 100% !important;
}

.hr-xxl-large {
    max-width: 700px !important;
    width: 100% !important;
}