body.app-workflow{
    width: 100%;
}
.top-content {
    background: var(--topContent) !important;
    border-radius: 10px;    
}
.bottom-content {
    background: var(--topContent) !important;
    border-radius: 10px;
}
.avatar-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    opacity: 80%;
}
.avatar-name {
    bottom: 0px;
    background: var(--darkGray);
    width: 100%;
    text-align: center;
    border-radius: 0 0 10px 10px;
    padding: 5px;
    opacity: 80%;
}
.avatar-name span {
    display: block;    
}
.box-task-1 {
    /* align-items: normal; */
    color: var(--white);
}
.box-task-1 h3 {
    color: var(--workflow);
    text-align: center;
}
.box-task-1 .rounded {
    border-radius: 1rem !important;
}
.card-rounded {
    border: 1px solid var(--midGray);
    border-radius: 10px !important;
    background: var(--darkBlue);
}
.card-content {
    border: 1px solid var(--midGray);
    border-radius: 10px !important;    
    background: var(--topContent) !important;
}
.card-task-project {
    border: 1px solid var(--lightGray);
    border-radius: 10px !important;    
    background: var(--lightGray) !important;
}
.card-task-list {
    border: 1px solid var(--lightGray);
    border-radius: 10px !important;    
    background: var(--lightGray) !important;
}
.card-sub-content {
    border: 1px solid var(--midGray);
    border-radius: 0px !important;    
    background: var(--topContent) !important;
}
.card-content > .card-header,
.card-rounded > .card-header {
    /* color: var(--white); */
    border-bottom: 1px solid var(--midGray) !important;
    background: var(--blackBlue) !important;
    border-radius: 10px 10px 0 0;
}
.card-task-project > .card-header {
    /* color: var(--white); */
    border-bottom: 1px solid var(--topContent) !important;
    background: var(--topContent) !important;
    border-radius: 10px 10px 0 0;
    min-height: 20px;
}
.card-task-list > .card-header {
    /* border-bottom: 1px solid var(--midGray) !important; */
    background: var(--bs-gray-500);
    border: none;
    border-radius: 10px 10px 0 0;
    min-height: 20px;
}
.card-sub-content > .card-header {
    /* border-bottom: 1px solid var(--midGray) !important; */
    background: var(--bs-gray-700);
    border: none;
    border-radius: 0;
    min-height: 50px;
}
.card-task-project:hover {
    border: 1px solid var(--workflow);
}
.modal .modal-content{
    border-radius: 10px;
}
.modal .modal-header {
    border: 0; 
    border-radius: 10px 10px 0 0;
    background: var(--bs-gray-400);
}
.modal .modal-footer {
    border: 0;
    border-radius: 0 0 10px 10px;
    background: var(--bs-gray-400);
}
.font-control-disabled {
    background: var(--bs-gray-500) !important;
    color: var(--white) !important;
    border: 0 !important;
}
.table {
    background: var(--white);
    border: 1px solid var(--lightGray) !important;
    vertical-align: middle;
}
.table thead th {
   background: var(--midGray);
   color: var(--white);
   vertical-align: middle;
}
.table tbody tr.selected td{
    background: var(--darkBlue);
    --bs-table-bg-type : var(--darkBlue);
    color : var(--white);
}
.nav-line-tabs .nav-item .nav-link:hover,
.nav-line-tabs .nav-item .nav-link.active {
    border: 0 !important;
    border-bottom: 2px solid var(--workflow) !important;
    color: var(--workflow) !important;
}

/* for calendar */
.cal-month-view {
    background-color: var(--bs-gray-700) !important;
    padding: 10px;
    border-radius: 10px;
    
}
.cal-month-view .cal-cell-row:hover {
    background-color: var(--bs-gray-600) !important;
}
.cal-month-view .cal-cell.cal-has-events.cal-open,
.cal-month-view .cal-cell-row .cal-cell:hover {
    background-color: var(--bs-gray-800) !important;
}
.cal-month-view .cal-day-number {
    color : #FFFFFF;
    font-weight: bold !important;
}
.cal-month-view .cal-day-cell.cal-out-month .cal-day-number {
    color : #999999;
    opacity: 80% !important;
}
.cal-month-view .cal-day-cell.cal-weekend .cal-day-number {
    font-weight: bold !important;
    opacity: 100% !important;
    color : #E3232B !important;
}
.cal-month-view .cal-day-cell.cal-today {
    background-color: var(--workflow) !important;
}
.cal-month-view .cal-header .cal-cell {
    color : #FFFFFF;
    font-weight: bold !important;
    text-transform: uppercase;
}
.cal-month-view .cal-cell-top {
    cursor: pointer !important;
}
.cal-month-view .cal-open-day-events .cal-event {
    position: absolute !important;
    top: inherit !important;
}
mwl-calendar-event-title {
    display: inline-block;
    width: 97%;
    margin-bottom: 10px;
    border-bottom: 1px solid #777777;
    margin-left: 20px;
}
.cal-month-view .cal-event-title:hover {
    text-decoration: none !important;
}
.note-content p, .note-content li {
    font-size: 15px;
}