@import "init.css"; * {
    padding: 0;
    margin: 0;
    font-family: Inter, sans-serif;
    text-decoration: none;    
    font-variant-numeric: tabular-nums;

    /*
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    */
}
.material-symbols-outlined {

    vertical-align: middle;
    font-weight: 400;
    /*
  font-variation-settings: 'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48;
  */
}
.material-symbols-outlined.fill{
    font-variation-settings: 'FILL' 1;
}
a{
    text-decoration: none;
}

.left-menu ul{
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-items: center;
    gap: 0.5rem;
}

.left-menu li{
    padding: 0 0.5rem;
    width: 100%;
}

.left-menu a .material-symbols-outlined {
    padding: 0.25rem;
}

.left-menu li a:hover {
    background-color: #eee;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-radius 0.3s ease;
}

.left-menu li a .material-symbols-outlined:hover {
    background-color: transparent;
}

/**********************************************/
body {
    margin: 0;
    font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;        
    background-color: #edf2f6;
    color: #515365;
    font-size: 0.8125rem;
}
.body-wrap{
    padding: 85px 85px 0 calc(85px + 9.5rem);
    min-height: calc(100vh - 41px);
}

@media (min-width: 1535.98px) {
    body {
        font-size: 0.875rem;
    }

}
@media (max-width: 767.98px) {
    body {
        font-size: 0.75rem;
    }
    .body-wrap {
        padding: 85px 15px;
    }
}

body *::-webkit-scrollbar,.era-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Track */
body *::-webkit-scrollbar-track,.era-scroll::-webkit-scrollbar-track {
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

/* Handle */
body *::-webkit-scrollbar-thumb,.era-scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0px;
    border-radius: 0px;
    background: #7c5ac2;
}

body *::-webkit-scrollbar-thumb:window-inactive,.era-scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #777777;
}

body, section {
    /* vw nó lấy cả scroll
    width: 100vw;
    max-width: 100vw;
    */
    overflow-x: hidden;
}
.form-search{
    position: relative;
}
#timetracking,#checkin {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    height: 10px;
}

.tt-category-name {
    color: #bbb;
}

#timetracking span,#checkin span {
    display: block;
    height: 10px;
    float: left;
}

.progress-success {
    background-color: rgb(71 146 94 / 68%)
}

.progress-danger {
    background-color: rgba(243, 97, 97, 0.68)
}

#timeline {
    width: 100%;
    position: absolute;
    pointer-events: none;
}

#timeline span {
    display: block;
    height: 10px;
    float: left;
    text-align: center;
    font-size: 10px;
    position: relative;
}

#timeline span::after {
    content: "'";
    position: absolute;
    right: 0;
}

header {
    height: 70px;
    background-color: #3f4257;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 21;
    display: flex;
    justify-content: space-around;
}

header .tool ul {
    list-style-type: none;
    display: flex;
    margin-top: 24px;
    margin-right: 24px;
}

header .tool ul a {
    color: #fff;
    padding: 10px;
}

header .tool ul a i {
    font-size: 19px;
}

.header {
    height: 70px;
    background-color: #3f4257;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 21;
    display: block;
    padding-right: 70px;
}

.header .toggle-left-menu, .header .toggle-right-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    background-color: #7c5ac2;
    width: 70px;
    height: 70px;
}

.header .toggle-left-menu span.material-symbols-outlined {
    font-size: 31px;
}

.header .toggle-right-menu {
    left: auto;
    right: 0;
}

@media (max-width: 575.98px) {
    .header {
        padding-left: 140px;
        padding-right: 0px;
    }

    .header .toggle-left-menu, .header .toggle-right-menu {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
}

.body-wrap .page-title {
    /* text-transform: capitalize; */
    /* float: left; */
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
}
.page-title .material-symbols-outlined{
    font-size: 29px; 
    margin-top: -5px;
}
@media (max-width: 767.98px) {
    .body-wrap .page-title {
        display:none;
    }
}

.body-wrap .page-title > :first-child {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.body-wrap .page-title > :first-child > :first-child {
    margin: 0;
    font-size: 1.6875rem !important;
    font-weight: 600 !important;
}

@media (max-width: 991.98px) {
    .body-wrap .page-title > :first-child > :first-child {
        font-size: 1.4375rem !important;
        line-height: 1.5;
    }
}

.header-content-wrapper {
    height: 100%;
    width: 100%;
}

.header-content-wrapper .control-block{
    transform: translate(74px, 0px);
}

@media (max-width: 575.98px) {
    .header-content-wrapper .control-block{
        transform: unset;
    }
}

.logo img {
    width: 4rem;
    height: auto;
    max-height: 4.4rem;
    padding: 15px 10px;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .logo {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 70px;
    }
    .logo img {
        width: 4rem;
        max-height: 4.4rem;
        padding: 15px 10px;
    }
}

.thumb img {
    border-radius: 50%;
    max-width: 32px;
    overflow: hidden;
    background-color: #ebebeb;
    vertical-align: middle;
}

.control-block {
    float: right;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    
}

.control-icon {
    
fill: #9a9fbf;
    
/* padding-left: 10px; */
    
/* padding-right: 10px; */
}

.control-icon.has-items {
    fill: #fff;
}

.more > svg {
    cursor: pointer;
}

.control-icon > svg {
    height: 20px;
}

svg {
    transition: all .3s ease;
    vertical-align: unset;
}

[class^="olymp-"], svg[class^="gem-"], [class*=" -icon"] {
    height: 26px;
    width: 26px;
    display: inline-block;
}

.more {
    position: relative;
    transition: all .1s ease;
    color: #888da8;
    fill: #c0c4d8;
}
.more label{
    cursor:pointer; 
}
/*
.more:hover .more-dropdown{
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
*/
.more-toggle{
    display: none !important;  
}

.more-toggle:checked + .more-dropdown,.more-active{ 
    visibility: visible !important;
    opacity: 1 !important;
}
.more-with-triangle:before {
    position: absolute;
    display: inline-block;
    content: '';
    top: -7px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #fff;
    right: 23px;
}


.more-with-triangle.triangle-top-center:before {
    margin-right: -3px;
    right: 50%;
}

.control-icon .label-avatar {
    width: 19px;
    height: 19px;
    line-height: 19px;
    width: 19px;
    height: 19px;
    line-height: 19px;
    top: -10px;
    right: 0px;
}

.control-icon .ui-block-title a {    
    text-transform: uppercase;
    padding: 0;
}

.control-icon .more-dropdown {
    width: 380px;
    top: 33px;
    right: -182px;
    padding: 0;
    transform: translate(0, 10px);
}

.label-avatar {
    position: absolute;
    top: -1px;
    right: -4px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 100%;
    overflow: hidden;
}

.icon-status {
    width: 6px;
    height: 6px;
    border-radius: 100%;
    display: inline-block;
    margin-right: 8px;
}

.author-page {
    margin-left: 50px;
}

@media (max-width: 991.98px) {
    .author-page {
        margin-left: 5px;
    }
}

@media (max-width: 575.98px) {
    .author-page .author-name {
        display: none;
    }
}

.author-page .author-thumb {
    width: 32px;
}

.author-thumb .icon-status {
    position: absolute;
    margin-right: 0;
    top: 0;
    left: 0;
    border: 1px solid #3f4257;
    width: 8px;
    height: 8px;
}

.author-thumb .ui-block-title{
    width: 100%;
    border-radius: 0;
}

.thumb .icon-status {
    position: absolute;
    margin-top: 2px;
    margin-right: 2px;
}



.inline-items > * {
    display: inline-block;
    vertical-align: middle;
}

.control-block .author-title {
    font-weight: 700;
    font-size: 11px;
    color: #fff;
}

.inline-items .author-title {
    margin-right: 10px;
    margin-bottom: 0;
}

.control-block .author-subtitle {
    display: block;
    font-weight: 700;
    color: #9a9fbf;
    font-size: 7px;
}

.control-block .author-title > svg {
    margin-left: 15px;
    margin-bottom: 2px;
    fill: #fff;
    width: 6px;
    height: 4px;
}

.profile {
    display: flex;
    margin-top: 18px;
    width: max-content;
}

.profile-title {
    font-size: 11px;
    font-weight: 700;
    padding-top: 10px;
}

.profile-title a {
    color: #fff;
}

.dropdown:hover .more-dropdown {
    display: block;
}

.more-dropdown {
    display: none;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 0px #ccc;
    position: absolute;
    width: max-content;
}

.more-dropdown ul {
    list-style-type: none;
}

.more-dropdown ul a {
    padding: 10px 20px;
    display: block;
    color: #333;
}

.more-dropdown {
    display: block;
    position: absolute;
    top: calc(100% + 14px);
    right: -20px;
    width: max-content;
    box-shadow: 0 0 34px 0 rgb(63 66 87 / 10%);
    background-color: #fff;
    border-radius: 4px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.1s, opacity 0.1s linear;
    text-align: left;
    padding: 5px 0px;
    z-index: 5;
}

.more-dropdown a,.more-dropdown label {
    padding: 5px 10px;
    font-size: 11px;    
    display: block;
    font-weight: 700;
}
.more-dropdown a:hover,.more-dropdown label:hover{
    
background-color: #eee;
}
.more-dropdown a:hover {
    color: #ff5e3a;
}

.more-top {
    bottom: 35px;
    top: auto;
    right: -20px;
}
.more-right{
    right: unset;
    left: -20px;
}

.more-top.more-with-triangle:before {
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-top: 7px solid #fff;
    border-bottom: 0;
    right: 25px;
    top: 100%;
}
.more-right.more-with-triangle:before {
    right: unset;
}
.ui-block-title {
    width: 100%;
    padding: 23px 25px 18px;
    line-height: 1;
    border-top: 1px solid #e6ecf5;
    display: flex;
    flex-direction: column;
    /* width: calc(100% - 50px); */
    position: relative;
    border-radius: 5px 5px 0 0;
}

.ui-block-title.ui-block-title-small {
    padding: 10px 25px;
}

.ui-block-title:first-child {
    border-top: none;
}

.ui-block-title > * {
    margin-bottom: 0;
    display: table-cell;
    vertical-align: middle;
}

.ui-block-title.ui-block-title-small .title {
    font-size: 8px;
    text-transform: uppercase;
    color: #9a9fbf;
}

.view-all {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 20px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: block;
    text-align: center;
    border-radius: 0 0 5px 5px;
    transition: all 0.3s;
}

.control-icon .more-dropdown .view-all:hover {
    color: #fff;
}

.control-icon .more-dropdown .view-all {
    padding: 20px;
    color: #fff;
}

/*sidebar menu*/
.left-menu,.right-menu {
    height: calc(100vh - 70px);
    width: 70px;
    position: fixed;
    top: 70px;
    z-index: 4;
    background-color: #fff;
    box-shadow: 0 0 34px 0 rgb(63 66 87 / 10%);
}

/*Left Menu*/
.left-menu.open {
    min-width: 14rem;
    max-width: 14rem;
    width: max-content;
}

@media (min-width: 1024px) {
    .left-menu {
        min-width: 14rem;
        max-width: 14rem;
        width: max-content;
    }
}

.left-menu.opening, .left-menu.closing {
    animation: sidebar-left-open 0.3s ease;
}

@media (max-width: 575.98px) {
    .left-menu {
        transform: translate(-100%,0);
        width: 14rem;
    }

    .left-menu.open {
        transform: translate(0,0);
    }

    .left-menu.opening {
        animation: sidebar-left-open-mobile 1s ease;
    }

    .left-menu.closing {
        animation: sidebar-left-close-mobile 1s ease;
    }
}

.left-menu a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #9a9fbf;
    transition: background 0.2s ease, color 0.2s ease, border-left 0.2s ease;
    white-space: nowrap;
}

.left-menu li.active > a {
    background-color: rgba(124, 90, 194, 0.15);
    border-left: 3px solid #7c5ac2;
    font-weight: 500;
    color: #7c5ac2;
}

.left-menu li.active > a .material-symbols-outlined {
    color: #7c5ac2;
}

.left-menu a.toggle-left-menu{
    position: absolute;
    z-index: 2;
    background: #fff;
    margin: auto 0;
    left: 0;
    right: 0;
    top: 0;
    padding: 12px 6px 12px 0;
    background-color: #7c5ac2;
    color: #fff;
}
@media (max-width: 575.98px) {
    .left-menu a{
        padding: 5px 0px;
    }
    .left-menu a.toggle-left-menu{
        display: none !important;
    }
}

.left-menu.open a {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: max-content;
    align-items: center;
    justify-content: flex-start;
}

.left-menu .material-symbols-outlined {
    width: 38px;
}

.left-menu.open .left-menu-title {
    height: 100%;
}

.left-menu a.toggle-left-menu .material-symbols-outlined {
    /* transform: rotate(180deg); */
}

.left-menu.open a.toggle-left-menu {
    transform: rotate(0deg);
}

.left-menu .left-menu-icon {
    fill: #9A9FBF;
    transition: all .3s ease;
    margin-right: 25px;
    height: 26px;
}

.left-menu svg {
    width: 20px;
}

.left-menu a:hover svg {
    fill: #ff5e3a;
}

.left-menu .left-menu-title {
    font-weight: 700;
}

@keyframes sidebar-left-open {
    0% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-100%,0);
    }

    100% {
        transform: translate(0,0);
    }
}

@keyframes sidebar-left-open-mobile {
    0% {
        transform: translate(-100%,0);
    }

    50% {
        transform: translate(-100%,0);
    }

    100% {
        transform: translate(0,0);
    }
}

@keyframes sidebar-left-close-mobile {
    0% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-100%,0);
    }

    100% {
        transform: translate(-100%,0);
    }
}

/*Left Menu end*/
/*Right Menu*/
.right-menu {
    right: 0;
    top: 70px;
    height: calc(100vh - 70px);
}

.right-menu.open {
    width: calc(16.875rem + calc(16.875rem * 0.5));
}

.right-menu.opening {
    animation: sidebar-right-open 0.5s ease forwards;
}

.right-menu.closing {
    animation: sidebar-right-close 0.5s ease forwards;
}

@media (max-width: 575.98px) {
    .right-menu {
        transform: translate(100%,0);
    }

    .right-menu.open {
        transform: translate(0,0);
        max-width: 75%;
    }

    .right-menu.opening {
        animation: sidebar-right-open-mobile 0.5s ease forwards;
    }

    .right-menu.closing {
        animation: sidebar-right-close-mobile 0.5s ease forwards;
    }
}

@keyframes sidebar-right-open {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

@keyframes sidebar-right-close {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

@keyframes sidebar-right-open-mobile {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

@keyframes sidebar-right-close-mobile {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

.olympus-chat {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #7c5ac2;
    fill: #fff;
    height: 70px;
    padding: 15px 20px;
}

.olympus-chat .material-symbols-outlined {
    margin: auto;
    }

.right-menu.open .olympus-chat .material-symbols-outlined {
    margin-right: 0;
}

@media (max-width: 575.98px) {
    .right-menu.open .olympus-chat .material-symbols-outlined {
        display: none;
    }
}

.right-menu .olympus-chat:hover .material-symbols-outlined {
    fill: #ff5e3a;
}

.olympus-chat .olympus-chat-title {
    text-transform: uppercase;
    margin-bottom: 0;
    display: none;
    font-weight: 700;
}

.right-menu.open .olympus-chat .olympus-chat-title {
    display: block;
}

.search-friend {
    position: relative;
    padding: 25px;
    background-color: #fff;
    height: 70px;
    margin-top: auto;
    display: none;
}

.right-menu .search-friend {
    padding: 0;
}

.right-menu.open .search-friend {
    display: block;
}

.search-friend-form {
    width: 100%;
}

.search-friend .form-group {
    margin: 15px 20px;
}

.search-friend input {
    padding: .5rem 2.5rem .5rem 1.1rem;
    font-size: 11px;
}

.search-friend .input-group-addon {
    right: 27px;
    padding: 0;
}

.right-menu .ui-block-title {
    width: 100%;
    border-bottom: 0;
    border-radius: 0;
    padding: 10px 20px;
}

.right-menu .era-scroll {
    max-height: calc(100vh - 7rem);
}

.right-menu .era-scroll .friend-list,
.right-menu .era-scroll .group-list {
    max-height: 36vh;
}

.right-menu ul {
    list-style-type : none;
    text-align: center;
    padding: 0;
}

.right-menu ul li {
    padding: 5px 20px;
    cursor: pointer;
}

.right-menu ul li .thumb {
    width: 32px;
    min-width: 32px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    float: unset;
}

.right-menu.open ul li .thumb {
    margin-right: 10px;
    margin-left: 0;
}

.right-menu .user-status {
    display: none;
}

.right-menu.open .user-status {
    display: block;
}

.right-menu.open ul {
}

.right-menu.open li {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
}

.user-name {
    display: block;
    margin-bottom: 0;
}

.user-status .status {
    text-transform: uppercase;
    font-size: 7px;
    font-weight: 700;
    display: block;
}

/* Target period tabs */
.target-period-label {
    cursor: pointer;
    transition: all 0.2s ease;
}

.target-period-span {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    color: #6c757d;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
    user-select: none;
}

.target-period-span:hover {
    background-color: #e9ecef;
    color: #495057;
}

.target-period-span.active {
    background-color: #3b82f6;
    color: white;
    font-weight: 600;
}

/*Right Menu end*/
.main {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
}

.sidebar-main {
    width: 50%;
    height: max-content;
}

@media (max-width: 991.98px) {
    .sidebar-main {
        width: 100%;
        order: 2;
    }
}

.form-header {
    background-color: #fff;
    padding: 0 20px 55px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px #eee;
    margin-bottom: 20px;
    position: relative;
}

.sidebar-main #form_status {
    border: 0;
    width: 100%;
    height: 160px;
}

/*

.form-header .form-group.with-icon::after {
    display: none;
}

.form-header .nav-tabs .nav-link {
    padding: 10px;
    border: none;
    border-bottom: 1px solid #e6ecf5;
    border-right: 1px solid #e6ecf5;
    color: #888da8;
}

.form-header .nav-tabs .nav-link.active {
    background-color: #fff;
    fill: #ff5e3a;
    color: #515365;
    border-bottom: transparent;
}

.form-header .nav-tabs {
    background-color: #fafbfd;
    border-bottom: none;
    margin: 0 -20px;
    padding: 0 10px;
}

.form-header .nav-link {
    fill: #888da8;
    color: #888da8;
}

.form-header .nav-link:hover {
    fill: #ff5e3a;
}

.form-header .nav-link svg {
    margin: 0 5px;
    width: 18px;
}
*/
.nav-link {
    fill: #888da8;
    color: #888da8;
}
#task_participants .select2 {
    margin-bottom: 15px;
}

/* Fix for select2 dropdown positioning in modals */
.modal .select2-container--open .select2-dropdown {
    z-index: 9999 !important;
    position: fixed !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    border: 1px solid #aaa !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 12px rgba(0,0,0,.175) !important;
}

.modal .select2-container {
    z-index: 1050;
}

/* Allow modal to scroll when select2 is open */
.modal.select2-open {
    overflow-y: auto !important;
}

/* Ensure dropdown results are visible */
.select2-results__options {
    max-height: 180px !important;
    overflow-y: auto !important;
}

.select2-dropdown {
    border: 1px solid #aaa !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 12px rgba(0,0,0,.175) !important;
}

li.select2-results__option.select2-results__message {
    display: none;
}
.form-header .nav-link .olymp-status-icon {
    width: 20px;
}

.form-header .form-control.datetimepicker,.form-header .post {
    padding: 1.4rem 1.1rem 0.6rem;
}

.form-ticket .d-flex input {
    margin-top: 15px;
}

.form-ticket .d-flex .form-group {
    padding: 0;
}

.txt-post-status .tags_input.selectize-control {
    display: inline-block;
}

.txt-post-status .tags_input .selectize-input input[type="text"] {
    padding: 0;
    min-width: 70px;
    border: 0;
}

.txt-post-status .selectize-dropdown-content {
    width: max-content;
    position: absolute;
}

.txt-post-status>span {
    background-color: #90baf9;
    border-radius: 3px;
}

.form-header .txt-post-status {
    height: 160px;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
}

.form-ticket .txt-post-status {
    border: 1px solid #e6ecf5;
}

.form-ticket .form-group.label-floating label.control-label {
    left: 17px;
}

.form-ticket .form-group.label-floating.is-focused label.control-label, .form-ticket .form-group.label-floating:not(.is-empty) label.control-label {
    top: 8px;
    font-size: 10px;
}

.form-ticket .form-group [type="file"] {
    padding: 0.91rem 1.1rem !important;
}

.form-header .form-group.label-floating.is-focused .control-label, .form-header .form-group.label-floating.has-bootstrap-select .control-label {
    top: 16px;
}

.form-header .form-images {
    margin-top: 7px;
    fill: #c2c5d9;
}

.form-header .form-images svg {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.form-header .form-images:hover {
    fill: #ff5e3a;
}

.form-header form {
    position: relative;
}

.form-header .author-thumb {
    position: absolute;
    top: 10px;
    left: 15px;
    z-index: 1;
    width: 40px;
}

.form-header .author-thumb+.form-group .txt-post-status {
    padding-left: 55px;
}

/*------------- #form-header-end --------------*/
.thumb {
    margin-right: 10px;
}

.form-main label.control-label {
    position: absolute;
    top: 10px;
    font-size: 13px;
    line-height: 1.42857;
    left: 8px;
    color: #888da8;
    pointer-events: none;
    transition: 0.3s ease all;
}

.sidebar-main textarea:focus+.control-label {
    top: -10px;
    font-size: 10px;
    line-height: 1.07143;
}

.sidebar-main textarea ~ hr {
    position: relative;
    height: 2px;
}

.sidebar-main textarea ~ hr:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 0;
    border-bottom: 1px solid #ff5e3a;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.sidebar-main textarea:focus ~ hr:before {
    width: 100%;
}

#image_list ul {
    display: flex;
}

#image_list ul li {
    list-style-type: none;
    width: 80px;
    margin-right: 5px;
    border: 1px solid #aaa;
    padding: 2px;
    border-radius: 5px;
}

#image_list ul li img {
    width: 80px;
    border-radius: 5px
}

.post-header {
    position: relative;
    width: 100%;
    background-color: #fff;
    padding: 20px 20px 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.post-body {
    color: #2f3337;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    padding: 10px 20px;
    
}

.post-body img {
    max-width: 100%;
}

.post-footer {
    display: flex;
    justify-content: space-between;
    position: relative;
    background-color: #fff;
    padding: 10px 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.post-content, .post-media {
    /*margin-top: 10px; comment for error event*/
}

.post-media {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
}

.post-media-layout-1{
    grid-template-columns: auto;
}

.post-img-c1-r1{
    grid-column: 1 / span 2;
    grid-row: 1;
}

.post-img-c2-r2{
    grid-column: 1 / span 2;
    grid-row: 2;
}

.post-img-c1-r2{
    grid-column: 1;
    grid-row: 1 / span 2;
}

.post-img-c2-r3{
    grid-column: 1;
    grid-row: 1 / span 3;
}

span.post-img-see-more{
    display: block;
    position: relative;
}

span.post-img-see-more:after{
    content:"+";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    font-size: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    color:#fff;
}

.post-media>span[data-fancybox]{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative;
}
.post-media>span[data-fancybox]:after{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: all 0.3s;
}
.post-media>span[data-fancybox]:hover:after{
    opacity: 1;
}
.post-media img {
    max-width: 100%;
    opacity: 0;
}

.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.grid-wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 200px;
	grid-auto-flow: dense;
}
.grid-wrapper .wide {
	grid-column: span 2;
}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}

.video-box:before{
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: url(https://img.eraweb.io/icons/play_arrow/materialsymbolsrounded/play_arrow_fill1_48px.svg) no-repeat center center;
    background-size: cover;
    filter: invert(100%);
}
.video-box>video{
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.fancybox__caption{
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    text-align: center;
}

.post-item {
    margin-bottom: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.task-item.modal .work-btn{
    position: static;
}
.post-footer ul {
    list-style-type: none;
    display: flex;
    width: 180px;
    justify-content: space-between;
}

.event-item{
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.event-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    height: auto;
}

.event-header-info{
    width: 100%;
    margin-bottom: 12px;
}



.event-header .work-btn{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 4px;
}

.event-body{
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

.event-body-content{
    width: 65%;
    display: flex;
    flex-direction: column;
    padding-right: 28px;
}
.event-body-content .event-title{
    display: block;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
}

.assignee{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.assignee .thumb{
    margin-right: 0;
}

.event-body-host{
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.event-body-host>*{
    width: 100%;
}

.event-time{
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 15px;
}
.event-time+.event-time{
    margin-top: 34px;
    position: relative;
}
.event-time+.event-time:before{
    content:"";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    height: 50px;
    border-left: 2px dashed #ddd;
}
.event-time .datetime{
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #7c5ac2;
    color: #fff;
    border-radius: 5px;
    padding: 2px 26px;
}
.event-time .date{
    font-size: 23px;
    font-weight: 700;
}

.host-list{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.host-item{
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border:1px solid #ddd;
    border-radius: 50px;
    padding: 4px 8px 4px 4px;
}
.host-item img{
    min-width: 32px;
    width: 32px;
    height: 32px;
    border-radius: 100%;
}

.form-images {
    font-size: 19px;
}

.image-btn {
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid transparent;
    padding: 3px;
}

.image-btn:hover {
    color: #2196F3;
    border-color: #2196F3;
}

.liked {
    color: #ff5e3a;
}

.likes {
    color: #ff5e3a;
}

.post-comment-form textarea {
    background-color: #eee;
    border-radius: 20px;
    padding: 5px 10px;
    width: calc(100% - 32px);
    margin-top: 10px;
    display: inline-block;
}

.post-comment-list {
    padding: 10px 20p;
}

.comment-item {
    display: flex;
    position: relative;
    padding: 10px 20px;
}

.comment-content {
    width: calc(100% - 43px);
}

.comment-content img {
    border-radius: 10px;
}

.comment-item .comment-tool {
    margin-left: 15px;
}

.creator a {
    font-weight: 500;
}

.post-comment {
    min-height: 5px;
    position: relative;
    background-color: #fff;
}

.comment-likes {
    position: absolute;
    right: 0
}

.comment-content .creator {
    background-color: #eee;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 5px 15px 0 15px;
}

.comment-content .comment-text {
    background-color: #eee;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 0 15px 10px 15px;
}

.reply-form textarea {
    background-color: #eee;
    border-radius: 10px;
    padding: 5px 15px;
    width: calc(100% - 32px);
    display: inline-block;
}

.main-wrap {     
    position: relative;
}

@media (min-width: 1400px) {
    .main-wrap {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1920.2px) {
    .main-wrap {
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 991.98px) {
    .main-wrap {
        
    }
}

@media (max-width: 575.98px) {
    .main-wrap {

    }
}

.main-wrap .main-footer{
    padding: 9px 15px;
}
.main-wrap .main-footer p{
    margin: 0;
}

.block-left {
    width: 250px;
    background-color: #fff;
    border-radius : 3px;
    height: max-content;
}

.block-left ul li a {
    padding: 5px 10px;
    width: 100%;
    display: block;
}

.block-right {
    width: calc(100% - 215px);
}

.profile-main {
    display: flex;
    gap: 24px;
    width: 100%;
}

.profile-summary {
    width: 300px;
    background-color: #fff;
    border-radius: 3px;
    padding: 5px;
}

.profile-summary .avatar {
    width: 250px;
    max-width: 100%;
    border: 1px solid #eee;
    left: 0;
    right: 0;
    margin: auto;
}

.profile-main .profile-detail {
    width: calc(100% - 520px);
    background-color: #fff;
    padding: 5px;
    border-radius: 3px;
}

.profile-summary ul {
    list-style-type: none;
}

.profile-summary ul li {
    display: flex;
}

.profile-summary ul li label {
    display: block;
    width: 145px;
}

@media (max-width: 991.98px) {
    .main-wrap .block-left, .main-wrap .block-right {
        width: 100%;
    }
    .profile-main {
        flex-wrap: wrap;
    }
    .profile-summary, .profile-detail{
        width: calc(50% - 12px) !important;
    }
}
@media (max-width: 767.98px) {
    .profile-summary, .profile-detail, .block-right .w-50, .control-block{
        width: 100% !important;
    }

}

@media (min-width: 768px){
    .control-block{
        width : 300px;
    }
}
.notify {
    position: fixed;
    bottom: -50px;
    left: 0;
    right: 0;
    z-index: 1055;
    margin: 0 auto;
    width: max-content;
    background-color: #3f4257;
    border-radius: 3px;
    padding: 10px 15px;
    color: #fff;
    font-size: 16px;
    box-shadow: 0px 3px 5px -3px #000;

    transition: all .1s linear;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
}
.notify span.material-symbols-outlined {
    font-size: 29px;
    margin-right: 10px;
}
.notify-success {
    background-color: #65B688;
    color: #fff;
    padding: 10px 15px;
}

.notify-info {
    background-color: #3CA2BB;
    color: #fff;
    padding: 10px 15px;
}

.notify-warning {
    background-color: #E7804F;
    color: #fff;
    padding: 10px 15px;
}

.notify-danger {
    background-color: #D65C4F;
    color: #fff;
    padding: 10px 15px;
}

.profile-summary .avatar label {
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.profile-summary .avatar label:hover span {
    display: block;
    font-size: 49px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 100%;
    color: #7c5ac2;
    background-color: #ebebeb96;
    line-height: 5;
}

.profile-summary .avatar span {
    display: none;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.btn-new-project {
    position: fixed;
    bottom: 20px;
    right: 80px;
    width: 40px;
    height: 40px;
    transition: all .1s linear;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    background-color: #ff5e3a;
    border-radius: 50%;
    color: #fff;
}

.btn-new-project span {
    font-size: 39px;
}

.btn-new-project:hover {
    color: #fff;
    transform: rotateZ(90deg);
    transition: all .1s linear;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
}

.project-item {
    width: 19.03%;
    background-color: #fff;
    overflow: hidden;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 15px;
    padding: 10px;
    position: relative;
}

@media (max-width: 1400px) {
    .project-item {
        width: 23.98%;
    }
}

@media (max-width: 991.98px) {
    .project-item {
        width: 32%;
    }
}

@media (max-width: 767.98px) {
    .project-item {
        width: 48%;
    }
}

@media (max-width: 479.98px) {
    .project-item {
        width: 100%;
    }
}

.project-item .pj-logo {
    width: 100%;
    max-width: 80%;
}

.project-item ul {
    list-style-type: none;
    justify-content: center;
    width: 100%;
    min-height: 32px;
}

.project-item ul .thumb {
    margin: 0;
}

.project-assignee li {
    position: relative;
    margin-left: -25px;
    margin-right: -25px;
}

.project-assignee li img {
    border: 2px solid #fff;
}

.project-item .role {
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 9px;
    color: #fff;
    background-color: #000;
}

.project-item .role.role-follower {
    background-color: #D65C4F;
}

.project-item .role.role-supporter {
    background-color: #E7804F;
}

.project-item .role.role-assignee {
    background-color: #65B688;
}

.project-item .role.role-manager {
    background-color: #3CA2BB;
}

.project-item .more {
    position: absolute;
    right: 10px;
    top: 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    display: block;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    margin:0 5px 5px 0;
}
.task-control ul {
    list-style-type: none;
    justify-content: space-between;
}

.task-item .task-header {
    width: 100%;
}

.task-header .creator {
    width: calc(100% - 65px);
}

.task-item .task-header .label-role {
    color: #fff;
    display: block;
    width: max-content;
    height: max-content;
    padding: 0px 5px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    position: absolute;
    top: 0px;
}

.task-item .task-body .task-title {
    display: block;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    width: 100%;
    min-height: 25px;
    margin-bottom: 8px;
}

.task-title span{
    vertical-align: middle;
}
.task-title span.material-symbols-outlined.fill{
    margin-top: -2px;
}
.task-item .task-body .fig-img{
    text-align: center;
}

.task-footer {
}

.label {
    color: #fff;
    border-radius: 15px;
    padding: 4px 8px;
    min-width: 20px;
    min-height: 21px;
    display: inline-block;
    text-align: center;
}

.label-default {
    color: #333;
    background-color: #ddd;
}

.label-success {
    background-color: #65B688;
}

.label-info {
    background-color: #3CA2BB;
}

.label-warning {
    background-color: #ff5e3a;
}

.label-danger {
    background-color: #D65C4F;
}
.label-purple{
    background-color: #7c5ac2;
}
.label-yellow{
    background-color: #ffc107;
}
.task-tracking-detail div {
    background-color: #fff;
    clear: both;
    margin-bottom: 10px;
    height: 20px
}

.task-tracking-detail div:hover {
    background-color: #ddd;
}

.task-tracking-detail div span {
    display: block;
    height: 100%;
    float: left;
}

.task-tracking-detail div span.checkin-item {
    background-color: rgba(243, 97, 97, 0.68);
}

.task-tracking-detail label {
    width: 100%;
    display: block;
    position: absolute;
}

.point-checkin {
    width: 7px;
    height: 7px;
    background-color: #aaa;
    display: inline-block;
    border-radius: 50%;
}

.point-checkin.active {
    background-color: #f00;
}

.point-checkin.active:before {
    border: 1px solid #f00;
    content: "";
    width: 7px;
    height: 7px;
    position: absolute;
    border-radius: 50%;
    margin-left: -1px;
    margin-top: -1px;
    animation: ringring 1s linear infinite;
}

@keyframes ringring {
    from {
        transform: scale(0);
        opacity: 1;
    }

    to {
        transform: scale(2);
        opacity: 0;
    }
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input[type=checkbox], input[type=radio] {
        --active: #65b688;
        --active-inner: #fff;
        --focus: 2px rgba(39, 94, 254, 0.3);
        --border: #bbc1e1;
        --border-hover: #65b688;
        --background: #fff;
        --disabled: #f6f8ff;
        --disabled-inner: #e1e6f9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background)) !important;
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

    input[type=checkbox]:after, input[type=radio]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }

    input[type=checkbox]:checked, input[type=radio]:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: 0.3s;
        --d-t: 0.6s;
        --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
    }
    
    input[type=checkbox]:disabled, input[type=radio]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }

    input[type=checkbox]:disabled:checked, input[type=radio]:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border);
    }

    input[type=checkbox]:disabled + label, input[type=radio]:disabled + label {
        cursor: not-allowed;
    }

    input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover);
    }

    input[type=checkbox]:focus, input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus);
        box-shadow: none;
        outline: none;
    }

    input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) {
        width: 21px;
    }

    input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after {
        opacity: var(--o, 0);
    }

    input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked {
        --o: 1;
    }

    input[type=checkbox] + label, input[type=radio] + label {
        font-size: 13px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }

    input[type=checkbox]:not(.switch) {
        border-radius: 0px;
    }

    input[type=checkbox]:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        transform: rotate(var(--r, 20deg));
        margin: auto;
    }

    input[type=checkbox]:not(.switch):checked {
        --r: 43deg;
    }

    input[type=checkbox].switch {
        width: 38px;
        border-radius: 11px;
    }

    input[type=checkbox].switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translateX(var(--x, 0));
    }

    input[type=checkbox].switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }

    input[type=checkbox].switch:disabled:not(:checked):after {
        opacity: 0.6;
    }

    input[type=checkbox].switch.lock {
        height: 34px;
        border-radius: 0;
    }

    input[type=checkbox].switch.lock:after {
        content: "\eb6a";
        font-family: 'icomoon';
        background-color: transparent;
        top: 0;
        left: 50%;
        transform: translate(-50%,0);
        line-height: 34px;
    }

    input[type=checkbox].switch.lock:checked:after {
        content: "\eb69";
        color: #fff;
    }

    input[type=radio] {
        border-radius: 50%;
    }

    input[type=radio]:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7));
    }

    input[type=radio]:checked {
        --s: 0.5;
    }
}

.task-body-bottom, .event-body-bottom {
    height: 42px;
    padding: 5px 0;
    width: max-content;
}

.task-attachment {
}

.btn-add {
    position: fixed;
    right: 80px;
    bottom: 10px;
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50%;
    text-align: center;
    background-color: #ff5e3a;
    line-height: 1.7;
    color: #fff;
    font-size: 29px;
    transition: all .1s linear;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
}

.btn-add:hover {
    color: #fff;
    transform: rotate(90deg);
    transition: all .1s linear;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
}

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

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

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

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

.sidebar-left,.sidebar-right {
    width: calc(25% - 20px);
}

.sidebar-left .birthday {
    display: inline-block;
    width: 100%;
}

.sidebar-left .birthday span {
    color: #ff5e3a;
    font-size: 16px;
}

@media (max-width: 991.98px) {
    .sidebar-left,.sidebar-right {
        width: calc(50% - 10px);
    }

    .sidebar-left {
        order: 0;
    }

    .sidebar-right {
        order: 1;
    }
}

@media (max-width: 575.98px) {
    .sidebar-left{
        width: 100%;
    }
    .sidebar-right {
        width: 100%;
        height: 500px;
        overflow: auto;
    }
}

.todo-header {
    background-color: #323258;
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.todo-header .today {
    text-align: center;
    font-size: 99px;
    display: block;
    color: #fff;
}

.todo-header .day-of-week, .todo-header .month-year {
    display: block;
    text-align: center;
}

.day-of-week {
    color: #fff;
    font-size: 19px;
}

.month-year {
    height: 40px
}

.todo-body ul {
    list-style-type: none;
    /* padding: 10px 10px 10px 20px; */
}

.todo-body li {
    position: relative;
    margin-bottom: 10px;
    /* list-style-type: decimal; */
}

.todo-body .pin-task li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    min-height: 62px;
}

.todo-body .material-symbols-outlined {
}

.todo-body li::after {
    /* content: ""; */
    /* position: absolute; */
    /* width: 5px; */
    /* height: 5px; */
    /* background-color: #fff; */
    /* border-radius: 50%; */
    /* left: 0px; */
    /* top: 7px; */
    /* box-shadow: 0px 0px 0px 3px #7dd2fa; */
}

.todo-body li.working::after {
    /* box-shadow: 0px 0px 0px 3px #ff5e3a; */
}

.todo-body li::before {
    /* content: ""; */
    /* position: absolute; */
    /* border-left: 1px solid #ddd; */
    /* height: 100%; */
    /* top: 15px; */
    /* left: 2px; */
}

.todo-body li:last-child::before {
    /* border: 0; */
}

.todo-body {
    position: relative;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.todo-body .todo-timeline, .todo-body .todo-title {
    display: inline-block;
}

.todo-body label {
    /* background-color: #65B688; */
    /* color: #fff; */
    /* padding: 5px 10px; */
    /* width: 100%; */
    /* display: inline-block; */
}

.activity-header {
    font-size: 14px;
    font-weight: bold;
    background-color: #fff;
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.activity-body {
    background-color: #fff;
    padding: 0 10px 10px 10px;
}

.activity-body ul {
    list-style-type: none;
    position: relative;
}

.activity-body ul li {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    padding: 15px 0;
    border-top: 1px solid #ddd;
    min-height: 50px;
}

.activity-body ul li .main-info {
    width: calc(100% - 42px);
}

.user-mouse {
    position: fixed;
    z-index: 999;
    cursor : grab;
    transition: all .7s linear;
    -webkit-transition: all .7s linear;
    -moz-transition: all .7s linear;
    -o-transition: all .7s linear;
   
}
.user-mouse span {
    background-color: #38a9ff;
    color: #fff;
    padding: 1px 5px;
    border-radius: 5px;
    margin-left: -10px;
    position: relative;
    top: 10px;
    font-size: 10px;
    box-shadow: 0px 0px 1px 0px #000000;
}

.user-mouse:hover{
    transform: scale(1.1);
    transition: all 0.1s linear 0s !important;
}

.fadeIn {
    visibility: visible;
    opacity: 1;
    transition: opacity 2s linear;
}

.fadeOut {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

.fig-cap {
    text-align: center;
    color: #aaa
}

.codex-editor__redactor {
    padding-bottom: 100px !important;
}



/*chat box*/
#chatbox-wrap {
    position: fixed;
    bottom: 0;
    right: 80px;
    z-index: 1055;
    height: 455px;
    max-width: 61.25rem;
    /*(320*3) + (10*2)*/
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    -webkit-transition: right 0.5s;
    -moz-transition: right 0.5s;
    -ms-transition: right 0.5s;
    -o-transition: right 0.5s;
    transition: right 0.5s;
}

.right-menu.open ~ #chatbox-wrap {
    right: calc(16.875rem + calc(16.875rem * 0.51));
}

.chatbox {
    width: 320px;
    min-width: 320px;
    z-index: 9;
    background-color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

@media (max-width: 479.98px) {
    #chatbox-wrap {
        left: 0.1rem;
        max-width: calc(100vw - 50px - 1.5rem);
        display: block;
    }

    #chatbox-wrap:not(:has(.chatbox:not(.hidden))) {
        display: none;
    }

    .right-menu.open ~ #chatbox-wrap {
        right: 76%;
        z-index: 1;
    }
}

.chat-header {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    padding: 0px 28px 0px 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #3f4257;
}
.chatbox-flash .chat-header{
    
    animation: cbFlash 0.5s infinite;
}
@keyframes cbFlash {
    0% {background-color: #7c5ac2;}
    50% {background-color: #D65C4F;}
    100% {background-color: #7c5ac2;}
  }

.chat-header .thumb {
    width: 32px;
    min-width: 32px;
    height: 32px;
}

.chat-header span {
    color: #fff;
    margin: 5px;
    display: inline-block;
    white-space: pre;
    max-width: 200px;
    overflow: hidden;
    height: 30px;
    line-height: 1.2;
    font-size: 85%;
}

.chat-body {
    height: calc(100% - 90px);
    background-color: #eee;
    overflow-y: scroll;
    padding-left: 6px;
}

.chat-footer {
    height: 50px;
    background-color: #eee;
    border-top: 1px solid #aaa;
    display: flex;
    justify-content: center;
    position: relative;
}

.chat-footer .textarea {
    border-radius: 20px;
    height: 30px;
    width: 275px;
    margin-top: 9px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 2;
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid #aaaaaa;
    color: #515365;
    overflow-y: auto;
}

.chat-footer .textarea::after {
    content: attr(data-placeholder);
    color: #aaa;  
    cursor: text;
  }
  
  .chat-footer .textarea:empty::after {
    display: block;
    z-index: 0;
    position: absolute;
  }
  
  .chat-footer .textarea:focus::after,
  .chat-footer .textarea:not(:empty)::after,
  .chat-footer .textarea:active::after {
    display: none;
  }


.chat-footer .btn-send {
    cursor: pointer;
    padding: 5px;
    margin-top: 9px;
    font-size: 19px;
    text-align: center;
}
.chat-footer .textarea .highlight{
    background-color: #1d85fc72;
}
.chat-date{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 11px;
}

.message-item.me .mes-content span {
    background-color: #2196F3;
    color: #fff;
    width: max-content;
    padding: 5px;
    border-radius: 15px;
}

.message-item {
    height: max-content;
    position: relative;
    padding: 5px 0px;
    clear: both;
}

.message-item small {
    margin-left: 35px;
    width: calc(100% - 35px);
    display: inline-block;
}

.message-item .mes-content {
    background-color: #cbcbcb;
    color: #333;
    width: max-content;
    padding: 5px 10px;
    border-radius: 15px;
    max-width: calc(80% - 33px);
    overflow-wrap: break-word;
    float: left;
    margin-left: 35px;
    position: relative;
}
.message-item .mes-content .time-ago{
    font-size: 11px;
}
.message-item .mes-content .mes-btn{
    margin-top: 5px;
    margin-bottom: 5px;
}

.message-item.me .mes-content {
    background-color: #2196F3;
    color: #fff;
    position: relative;
    float: right;
    margin-left: 0;
    margin-bottom: 15px;
}

.box-close {
    position: absolute;
    right: 0;
    font-size: 18px;
    float: right;
    margin-right: 5px;
    cursor: pointer;
    font-style: normal;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    line-height: 1;
    text-align: center;
}
.icon-close{
    cursor: pointer;
    border-radius: 50%;
}
.box-close:hover,.icon-close:hover {
    background-color: #ff5e3a;
    color: #fff;
}
.box-minimum{
    position: absolute;
    right: 30px;
    height: 20px;
    width: 20px;
    text-align: center;
    border-radius: 50%;
    line-height: 1;
    font-style: normal;
    font-size: 18px;
}
.box-minimum:hover{
    background-color: #333;
    cursor: pointer;
}
.mes-replied {
    width: calc(90% - 33px);
    overflow-wrap: break-word;
    float: left;
    margin-bottom: -10px;
    margin-left: 35px;
}

.me .mes-replied {
    float: right;
}

.mes-replied span {
    background-color: #ddd;
    display: block;
    padding: 10px;
    border-radius: 15px;
    width: max-content;
    max-width: 100%;
}

.me .mes-replied span {
    float: right;
}
.me .mes-replied img {
    clear: both;
    float: right;
    position: relative;
    height: 90px;
    right: 0;
}
.reaction{
    position: absolute;
    right: 0;
    margin-top: -5px;
    color: #ff5e3a;
    cursor: pointer;
    font-size: 16px;
    padding: 0px;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
}
.reaction span, .message-item.me .mes-content .reaction span{    
    width: 23px;    
    height: 22px;    
    display: inline-block;    
    background-color: #eee;    
    border-radius: 50%;    
    text-align: center;    
    line-height: 1.4;
    padding: 0;

}
.reaction span small {
    font-size: 10px;
    margin: 0;
    width: 12px;
    height: 12px;
    position: absolute;
    margin-top: -15px;
    margin-left: 3px;
    background-color: #eee;
    border-radius: 50%;
    color:#ff2f00;
}
.reaction-list{
    position: absolute;
    display: flex;
    margin-top: -37px;
    right: 0;
    background-color: #3f4257;
    padding: 5px;
    border-radius: 20px;
    font-size: 26px;
    z-index: 1;
    list-style-type: none;
}
@media only screen and (max-width: 1540px) {
    #chatbox-wrap {
        max-width: 860px;
        /*(280*3) + (10*2)*/
    }

    .chatbox {
        width: 100%;
        height: 100%;
    }

    .chat-footer textarea {
        width: 235px;
    }
}

@media only screen and (max-width: 1420px) {
    #chatbox-wrap {
        max-width: 580px;
        /*(280*2) + (10*2)*/
    }
}

@media only screen and (max-width: 1130px) {
    #chatbox-wrap {
        max-width: 280px;
    }
}

/*chatbox end*/
/*ps*/
.era-scroll {
    width: 100%;
    max-height: 100%;
    -ms-touch-action: auto;
    touch-action: auto;
    overflow: auto !important;
    -ms-overflow-style: none;
}

.control-icon .era-scroll {
    overflow: hidden;
    max-height: 300px;
}

.notification-list {
    margin-bottom: 0;
}

.more-dropdown ul {
    padding: 15px 25px;
    margin-bottom: 0;
}

.control-icon .more-dropdown .notification-list {
    padding: 0;
}

.control-icon .more-dropdown .notification-list .thumb {
    width: 45px;
}

.control-icon .more-dropdown .notification-list .chat-message-item{
    max-width: 100%;
    word-break: break-word;
}

.notification-list .selectize-dropdown-content > *, .notification-list li {
    padding: 25px;
    border-bottom: 1px solid #e6ecf5;
    display: block;
    position: relative;
    transition: all .3s ease;
}

.author-thumb {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.author-thumb img {
    border-radius: 100%;
    overflow: hidden;
    display: block;
}

.notification-list .selectize-dropdown-content > * > *, .notification-list li > * {
    margin-bottom: 0;
    display: inline-block;
    vertical-align: middle;
}

.control-block .author-thumb {
    margin-left: 8px;
    position: unset;
}

.notification-list .author-thumb {
    height: 40px;
    width: 40px;
}

.control-icon .notification-list li > * {
    vertical-align: top;
}

.control-icon .notification-list .author-thumb {
    height: 34px;
    width: 34px;
    margin-right: 0;
    overflow: hidden;
}

.notification-list .notification-event {
    padding-left: 15px;
}

.control-icon .notification-list li > * {
    vertical-align: top;
}

.control-icon .notification-list .notification-event {
    width: 75%;
}

.control-icon .notification-list.friend-requests .notification-event {
    width: 60%;
}

.notification-friend {
    margin-bottom: 0;
}

.notification-list .notification-friend {
    display: inline-block;
}

.friend-requests .notification-friend {
    display: block;
}

.control-icon .notification-list .notification-friend, .control-icon .notification-list .notification-link {
    padding: 0;
    font-size: 13px;
}

.notification-list .notification-friend, .notification-list .notification-link {
    display: inline-block;
}

.notification-list .notification-icon {
    color: #d7d9e5;
    fill: #d7d9e5;
    float: right;
    margin-top: 10px;
}

.friend-requests .notification-icon {
    margin-top: 0;
}

.control-icon .notification-list li > * {
    vertical-align: top;
}

.control-icon .notification-list .notification-icon {
    margin-top: 0;
}

.friend-requests .accepted .notification-icon {
    margin-top: 10px;
}

.control-icon .notification-list.friend-requests .accepted .notification-icon {
    margin-top: 0;
}

.notification-list .more {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 9px;
    color: #d6d9e6;
    opacity: 0;
}

.chat-message li > * {
    vertical-align: top;
}

.control-block .author-thumb {
    margin-right: 8px;
    position: unset;
}

.chat-message .author-thumb {
    height: 36px;
    width: 36px;
}

.control-icon .notification-list li > * {
    vertical-align: top;
}

.notification-list .author-thumb {
    height: 40px;
    width: 40px;
}

.control-icon .notification-list .author-thumb {
    height: 34px;
    width: 34px;
    margin-right: 0;
    overflow: hidden;
}

.chat-message li.chat-group .author-thumb {
    border-radius: 0;
}

.control-icon .chat-message li.chat-group .author-thumb {
    width: 36px;
}

.profile-status li a{
    padding-left: 2px;
    padding-right: 2px;
}

.chat-message li.chat-group .author-thumb img {
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 2px;
    margin-bottom: 2px;
    border-radius: 100%;
    overflow: hidden;
}

.author-page .more-dropdown {
    width: 230px;
    top: calc(100% + 19px);
    right: -6px;
    padding: 0;
}

.author-page .account-settings a {
    padding: 13px 0;
}

.more-dropdown li a > * {
    display: inline-block;
    vertical-align: middle;
}

.account-settings .material-symbols-outlined {
    margin-right: 15px;
    fill: #9a9fbf;
    width: 20px;
    height: 20px;
}

.author-thumb .icon-status {
    position: absolute;
    margin-right: 0;
    top: 0;
    left: auto;
    border: 1px solid #3f4257;
    width: 8px;
    height: 8px;
}

.author-page .chat-settings .icon-status {
    margin-right: 20px;
    position: relative;
    border: none;
}

.custom-status {
    margin: 15px 25px;
}

.custom-status.form-group {
    position: relative;
    margin-bottom: 1.4rem;
}

.form-group.with-button input {
    padding-right: 50px;
    padding-left: 15px;
}

.custom-status input {
    padding: 1.1rem;
    font-size: 11px;
    border: 1px solid #e6ecf5;
}

.form-group.with-button button {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 35px;
    text-align: center;
    line-height: 100%;
    color: #fff;
    fill: #fff;
    background-color: #d7d9e5;
    border: none;
}

.custom-status.form-group.with-button button {
    border-radius: 0 5px 5px 0;
    background-color: #7c5ac2;
    overflow: hidden;
}

.custom-status.form-group.with-button button svg {
    fill: #fff;
    width: 14px;
    height: 12px;
}

.back-to-top {
    position: fixed;
    z-index: 100;
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    box-shadow: 0 0 10px 0 rgb(63 66 87 / 40%);
    border-radius: 50%;
    background-color: #7c5ac2;
    color: #fff;
}

.back-to-top:hover {
    color: #fff;
    background-color: #936ae4;
}

.back-to-top .material-symbols-outlined {
    font-size: 23px;
}

.write-content {
    width: 700px;
    margin: auto;
}

.modal-close,.remove-item {
    float: right;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    line-height: 1.4;
}

.modal-close:hover,.remove-item:hover {
    background-color: #ff5e3a;
    color:#fff;
}

#task_list .task-column {
    height: max-content;
}

.range {
    border: 0;
    background-color: #fff;
    height: 34px;
    min-width: 250px;
    text-align: center;
    font-size: 13px;
}

.task-control li span {
    position: relative;
    top: 0px;
}

#timetracking_list span, #supporter_list span{
    display: inline-block;
    height: 100%;
}

#timetracking_list .progress-timetracking, #supporter_list .progress-timetracking {
    /*background-color: #7c5ac2;*/
}

#timetracking_list .progress-timecheckin, #supporter_list .progress-timecheckin {
    background-color: #ff5e3a;
}

#timetracking_list .progress-timetracking.status-online, .status-online {
    background-color: rgb(6 173 6 / 100%);
}

#timetracking_list .progress-timetracking.status-away, .status-away {
    background-color: #ffd52f;
}

#timetracking_list .progress-timetracking.status-disconected, .status-disconected {
    background-color: #7c5ac2;
}

#timetracking_list .progress-timetracking.status-working, .status-working {
    background-color: #ff4f60;
}

#timetracking_list .progress-timetracking.status-invisible, .status-invisible {
    background-color: #cbdfee;
}

.tracking-item {
    margin-bottom: 10px;
}
.tracking-item .thumb{
    margin-top: 4px;
}
.user-info {
    width: 200px;
    background-color: #7c5ac2;
    position: relative;
    padding: 3px;
    border-radius: 5px;
}

.user-info .thumb {
    float: left;
    width: 32px;
    height: 32px;
}

.user-info .creator {
    float: left;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 40px;
    height: max-content;
    color: #fff;
}

.total-time {
    width: 50px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background-color: #3f4257;
    border-radius: 5px;
    color: #ff4f60;
    line-height: 1;
    padding: 8px;
}
.total-time small{
    color: #06ad06;
}
.tracking-progress {
    width: 100%;
    background-color: #fff;
    border-radius: 3px;
    overflow: hidden;
}

.progress-item {
    display: inline-block;
    height: 14px;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
}

.tracking-item .tracking-progress {
    /*
    animation-name: tracking-scale;
    animation-duration: .5s;
    */
}

@keyframes tracking-scale {
    from {
        width: calc(0% - 250px)
    }

    to {
        width: calc(100% - 250px)
    }
}

.progress-bar {
    width: 100%;
    height: 15px;
    background-color: #eee;
    text-align: left;
}

.typing {
    position: absolute;
    left: 10px;
    margin-top: -20px;
}

.seen {
    display: flex;
    position: relative;
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1;
    width: 100%;
    height: max-content;
    text-align: right;
    justify-content: flex-end;
}

.seen img {
    width: 15px;
    height: 15px;
    border-radius: 10px;
}

.chat-message li.message-unread {
    background-color: #f7f9fc;
}

.img-wrap {
    overflow-x: auto;
    width: 100%;
    position: absolute;
    height: auto;
    top: -129%;
    scroll-direction: horizontal;
}

.img-list {
    height: max-content;
    left: 0;
    position: relative;
    /* padding-top: 5px; */
    width: max-content;
}

.img-box {
    padding: 5px;
    font-size: 19px;
    margin-top: 5px;
    cursor: pointer;
}

.chat-footer .img-list img {
    position: absolute;
    z-index: 1;
    background-color: #fff;
    padding: 3px;
    border-radius: 10px;
    box-shadow: 0 0 5px 0px #000;
}

.chat-footer .img-list .img-item {
    width: 55px;
    height: 50px;
    position: relative;
}

.chat-footer .img-list .img-item .rm-img {
    position: absolute;
    z-index: 1;
    color: #ffffff;
    font-size: 11px;
    background-color: #383838;
    border-radius: 10px;
    width: 17px;
    height: 17px;
    text-align: center;
    right: 5px;
    top: 0px;
    box-shadow: 0 0 3px 0 #000;
}

.message-item .image-attach {
    background-color: transparent !important;
    max-width: calc(100% - 33px);
    display: flex;
    flex-wrap: wrap;
    margin-left: 35px;
    clear: both;
    float: left;
}

.message-item.me .image-attach {
    float: right;
}

.message-item.me .image-attach {
    justify-content: flex-end;
}

.message-item .image-attach img {
    max-width: 90px;
    border-radius: 5px;
    height: 90px;
}

.modalBox {
    display: none;
    position: fixed;
    z-index: 100;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}

.modalBox img {
    background-color: #fff;
    cursor: pointer;
}
/*
.modal-content {
    display: block;
    width: 80%;
    max-width: 700px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
*/
.box-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.box-caption {
    animation-name: zoom;
    animation-duration: 0.6s;
    /*
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear; 
    */
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.close {
    position: fixed;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 29px;
    transition: 0.3s;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 1;
    border-radius: 50%;
}

.close:hover, .close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    background-color: #fc6363;
}

@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

.thumb.thumb-3,.thumb.thumb-2,.thumb.thumb-1 {
    display: flex;
    flex-wrap: wrap;
    float: left;
    width:32px;
}

.thumb.thumb-3 img,.thumb.thumb-2 img{
    width: 16px;
    height: 16px;
}
.thumb.thumb-1 img{
    height: 25px;
    width: 25px;
    border: 1px solid #d7d7d7;
}
.group-list .thumb.thumb-1 img:last-child{
    position:absolute;
    left: 7px;
    z-index: -1;
}
.author-thumb.thumb-4,.thumb.thumb-4 {
    display: flex;
    flex-wrap: wrap;
    float: left;
}

.author-thumb.thumb-4 img,.thumb.thumb-4 img {
    width: 16px;
    height: 16px;
}

.thumb-sender {
    border-radius: 50%;
    overflow: hidden;
    width: 28px;
    height: 28px;
    float: left;
    margin-right: 5px;
    position: absolute;
}

.working {
    position: relative;
    display: inline-block;
}

.working::before {
    content : "";
    width: 10px;
    height: 10px;
    position: relative;
    background-color: #ff5e3a;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: inline-block;
    top: 0;
}

.working::after {
    content : "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid #ff5e3a;
    left: 0px;
    top: 6px;
    border-radius: 50%;
    animation: wk .7s infinite;
}

@keyframes wk {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.5);
        opacity: 0;
    }
}

.task-warning {
    border-top: 3px solid #ff2f00;
}

.time-bar {
    width: 100%;
    height: 10px;
    position: relative;
}

.time-bar span {
    text-align: center;
    font-size: 9px;
    line-height: 1;
}

.worktimes {
    position: absolute;
    width: 100%;
    height: 10px;
}

.worktimes span {
    float: left;
}

.time-in-work {
    background-color: #46ad45a6;
}

.time-list {
    height: 10px;
    overflow: hidden;
    line-height: 0;
}

.account_verified {
    background-color: #2d88ff;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
}

.post-header .more,.task-header .more {
    height: 15px;
}

textarea.form-control {
    width: 100%;
}

#ticket_attachment i {
    font-size: 19px;
    color: #ff5e3a
}

.comment-text {
    overflow-wrap: break-word;
}

#timetracking_map .leaflet-marker-pane img {
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0px 3px 5px 0px #000;
}

#timetracking_map .leaflet-marker-pane img.is-online {
    border-color: #06ad06;
}

#timetracking_list, #supporter_list {
    width: 100%;
}

.block-right {
    width: calc(100% - 266px);
    border-radius: 3px;
}

.crm-avatar-large {
    font-size: 149px;
    border: 1px solid #aaa;
    padding: 15px;
    border-radius: 5px;
    width: 100%;
    text-align: center;
}

#switchboad-icon i {
    font-size: 29px;
}

.related-people .thumb {
    border: 1px solid #aaa;
    border-radius: 25px;
    margin-bottom: 5px;display: flex;
    align-items: center;
    padding: 2px 16px 2px 4px;
    gap: 5px;
}

.related-people .thumb img {
    width: 24px;
    height: 24px
}

.related-people .thumb span {
    line-height: 2;
    display: inline-block;
    vertical-align: top;
}

.related-people .flex {
    flex-wrap: wrap;
}

.bc {
    list-style: none;
    display: inline-block;
    padding-left: 0;
}

.bc .icon {
    font-size: 13px;
}

.bc li {
    float: left;
}

.bc li a {
    color: #FFF;
    display: block;
    background: #777;
    text-decoration: none;
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 10px 0 5px;
    text-align: center;
    margin-right: 21px;
    transition: all 0s ease-in-out;
}

.bc li:first-child a {
    padding-left: 15px;
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px 0 0 4px;
}

.bc li:first-child a:before {
    border: none;
}

.bc li:last-child a {
    padding-right: 15px;
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0;
    border-radius: 0 4px 4px 0;
}

.bc li:last-child a:after {
    border: none;
}

.bc li a:before, .bc li a:after {
    content: "";
    position: absolute;
    top: 0;
    border: 0 solid #777;
    border-width: 20px 10px;
    width: 0;
    height: 0;
}

.bc li a:before {
    left: -20px;
    border-left-color: transparent;
}

.bc li a:after {
    left: 100%;
    border-color: transparent;
    border-left-color: #777;
}

.bc li a:hover,.bc li a.active {
    background-color: #65b688;
}

.bc li a:hover:before,.bc li a.active:before {
    border-color: #65b688;
    border-left-color: transparent;
}

.bc li a:hover:after,.bc li a.active:after {
    border-left-color: #65b688;
}

.bc li a:active {
    background-color: #16a085;
}

.bc li a:active:before {
    border-color: #16a085;
    border-left-color: transparent;
}

.bc li a:active:after {
    border-left-color: #16a085;
}

.bc li:last-child a {
    margin-right: 0;
}

.bc li i {
    display: inline-block;
    font-size: 9px;
    margin-right: 25px;
}

#call_logs audio {
    height: 20px;
}

.post-item .sub-tasks {
    margin-top: 10px;
    padding-left: 50px;
}

.sub-tasks .post-item::before {
    content: "";
    border-left: 2px dashed #aaa;
    width: 2px;
    height: 100%;
    position: absolute;
    left: -30px;
    top: 0px;
}

.sub-tasks .post-item:last-child::before {
    height: 50%;
}

.sub-tasks .post-item::after {
    content: "";
    height: 2px;
    width: 25px;
    position: absolute;
    border-bottom: 2px dashed #aaa;
    top: 50%;
    left: -30px;
}

.sub-tasks .post-item {
    margin-bottom: 10px;
}

.has-clear + span {
    position: absolute;
    cursor: pointer;
    font-size: 19px;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
    width: 20px;
    height: 20px;
    line-height: 1;
    text-align: center;
    border-radius: 50%;
}

.has-clear:hover + span {
    opacity: 1;
}

.has-clear + span:hover {
    opacity: 1;
    background-color: #ddd;
}

.progress-duration {
    display: inline-block;
    background-color: #ff5e3a;
    height: 10px;
}

.nav-tabs .material-symbols-outlined {
    font-size: 23px;
}

.nav-tabs .active span {
    color: #ff5e3a;
}

.add-photo-status {
    font-size: 23px;
    cursor: pointer;
}

.add-photo-status:hover {
    color: #ff5e3a;
}

.attach-file {
    cursor: pointer;
}

.attach-file .material-symbols-outlined {
    font-size: 23px;
}

.me .mes-reply {
    float: right;
}

.mes-reply {
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    float: left;
}

.mes-reply:hover {
    background-color: #ddd;
}

.message-item:hover > .mes-reply {
    display: block;
    line-height: 1;
    text-align: center;
}

.message-reply-desc {
    position: absolute;
    width: 100%;
    height: 45px;
    top: -45px;
    overflow: hidden;
    padding: 5px;
    background-color: #eee;
    z-index: 1;
    box-shadow: 0px -4px 7px 0px #9494941f;
}

.msg-reply-close {
    position: absolute;
    top: 3px;
    right: 10px;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
}

.msg-reply-close:hover {
    background-color: #aaa;
    color: #fff;
}

.slash-icon {
    position: relative;
    display: inline;
}

.slash-icon::before {
    content: "⊘";
    position: absolute;
    box-sizing: border-box;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    line-height: 1;
}

#taskDetailModal .main-detail {
    border-right: 1px solid #ddd;
}

.flip-vertical {
    transform: rotateX(180deg);
}

.panel-header {
    background-color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-body {
    position: relative;
    height: auto;
    background-color: #fff;
    padding: 0 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.panel-body ul {
    background-color: #fff;
    height: max-content;
    padding: 0;
}

.panel-body li {
    position: relative;
    min-height: 80px;
    border-top: 1px solid #eee;
    vertical-align: middle;
    padding-top: 8px;
}

.panel-body li img {
    width: 80px;
}


@media (max-width: 1199.98px) and (min-width: 991.98px) {
    .panel-body li {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .panel-body li img {
        width: 60px;
    }

    .panel-body div {
        width: 100%;
    }
}

.panel-body li div a {
    word-break: break-word;
}

.panel-checkin ul {
    padding-bottom: 5px;
}

.panel-checkin li {
    min-height: max-content;
}

.post-comment-form .img-list {
    padding-left: 10px;
    padding-right: 10px;
}

.post-comment-form .img-box,.reply-form .img-box {
    width: 32px;
    display: inline-block;
    vertical-align: top;
    height: 32px;
    margin-top: 10;
}

.post-comment-form .img-item,.reply-form .img-item {
    position: relative;
}

.post-comment-form .rm-img,.reply-form .rm-img {
    font-style: normal;
    top: -5px;
    position: absolute;
    cursor: pointer;
    right: -5px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    line-height: 1;
    text-align: center;
    color: #eee;
    background-color: #777;
}

.post-comment-form .rm-img:hover,.reply-form .rm-img:hover {
    background-color: #444;
    color: #fff;
}

.mono-color {
    /*
    filter: grayscale(100%);
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    */
}

.tbl-service-list {
    width: 100%;
}

.tbl-service-list th,
.tbl-service-list td{
    padding: 4px 8px;
    vertical-align: top;
}

.tbl-service-list th:nth-child(1),
.tbl-service-list td:nth-child(1){
    width: 50px;
}
.tbl-service-list th:nth-child(1),
.tbl-service-list td:nth-child(1){
    width: 50px;
}
.tbl-service-list td input[type="text"], .tbl-service-list td input[type="number"], .tbl-service-list td textarea{
    min-height: 43px;
}
.tbl-service-list td .select2-container{
    /*width: 100% !important; kiểu này thì thua rồi Ngọc */
}
.tbl-service-list td>label{
    display: flex;
    gap: 8px;
    align-items: center;
}
.tbl-service-list td.description {
    white-space: pre-wrap;
}
.svc-gross,.svc-sale{
    padding-top: 9px;

}
.col-unit,.svc-unit,.col-qty,.svc-qty{
    width: 70px;
}

.select2-container .thumb {
    width: 20px;
    height: 20px;
    display: flex;
}
.select2-container .thumb>img {
    width: 100%;
    height: 100%;
}

.tbl-service-list .svc-gross {
    width: 100px;
}

.tbl-service-list input[type="number"],.deal-partially-paid {
    height: 34px;
    border: 1px solid #e6ecf5;
    border-radius: 3px;
    text-align: center;
}

.tbl-service-list textarea {
    border: 1px solid #e6ecf5;
}

#create-deal-modal .select2-container .select2-selection {
    padding: 6px;
}

#create-deal-modal .select2-container .select2-selection .select2-selection__arrow {
    top: 4px;
}

.tbl-service-list .svc-discount {
    width: 100px;
}

.tbl-service-list label input[type="checkbox"]:checked + input {
    display: inline-block;
}
.lead-UID{
    margin-bottom: 10px;
}
.contact-control {
    margin-top: 10px;
}
.contact-control a{
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}
.contact-control span.material-symbols-outlined{
    font-size: 26px;
    margin-right: 10px;
    vertical-align: middle;
}

.contact-control img{
    width: 27px;
    height : 27px;
    vertical-align: middle;
    margin-right: 10px;
}

.round {
    border-radius : 50%;
}

.scroll-horizontal {
    scroll-behavior: smooth;
}

.ui-block {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 1px 0px #ddd;
}

#task_open,#task_close {
    height: max-content;
}

.resource-wrap {
    background-color: #f2f6fc;
    border-radius: 5px;
    padding: 5px;
}

.more {
    width: max-content;
    display: inline-block;
    cursor: pointer;
}
.more.pull-right > label{        
    border-radius: 50%;        
    height: 23px;        
    width: 23px;        
    display: inline-block;        
    text-align: center;
}
.more.pull-right > label:hover{    
    background-color: #eee;        
}
.resource-wrap label {
    width: calc(100% - 48px);
    display: inline-block;
}

.resource-wrap .res-preview {
    height: 100px;
    background-color: #fff;
    overflow: hidden;
    position: relative;
}

.res-preview .progress {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 14px;
}

.res-preview:hover .res-tool li a {
    visibility: visible;
}

.res-tool li a {
    visibility: hidden;
}

.res-tool {
    display: flex;
    position: absolute;
    bottom: 0;
}

.visible {
    visibility: visible !important;
    opacity: 1 !important;
}

#tagList a.fill {
    padding: 5px;
    margin : 5px 0;
    display: block;
}

#tagList a.fill:hover {
    background-color: #eee;
}

#tabTagList label {
    padding: 0 5px;
}

.deal-name {
    padding: 6px;
}

.tab .nav-tabs li {
    display: inline-block;
    position: relative;
}

.tab .nav-link {
    border-left: 1px solid #e6ecf5;
    border-top: 1px solid #e6ecf5
}

.tab .tab-content > div {
    display: none;
}

.tab .tab-content > div.active {
    display: block;
}

.tab-close {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    line-height: 1;
    text-align: center;
}

.tab-close:hover {
    background-color: #ff5e3a;
    color: #fff;
}

.form-warning {
    border: 1px solid #ff5e3a !important;
}

#hasDateRange + #dateRange {
    opacity: 0.3;
    pointer-events: none;
}

#hasDateRange:checked + #dateRange {
    opacity: 1;
    pointer-events: auto;
}

.toastui-calendar-popup-section.toastui-calendar-section-button {
    display: none;
}

.calendar .prev, .calendar .next, .calendar .today {
    font-size: 39px;
    vertical-align: middle;
}

.pointer {
    cursor: pointer;
}

.action-edit, .module-edit {
    width: 200px
}

.module-edit .material-symbols-outlined,.action-edit .material-symbols-outlined {
    display: none;
    width: max-content;
    float: right;
}

.module-edit:hover > .material-symbols-outlined,.action-edit:hover > .material-symbols-outlined {
    display: block;
}

.module-edit > .material-symbols-outlined:hover,.action-edit > .material-symbols-outlined:hover {
    color: #fe5e3a;
}

.thumbnail {
    overflow: hidden;
    display: inline-block;
    position: relative;
}
.thumbnail img{

}
.thumbnail .material-symbols-outlined{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: max-content;
    height: max-content;
    display: none;
    z-index: 1;
}
.thumbnail:hover img{
    filter: blur(4px);
}
.thumbnail:hover > .material-symbols-outlined{
    display: block;
}
.front-id-card, .back-id-card {
    border-radius: 10px;
    cursor: pointer;
    max-width : 200px;
}

.front-id-card:hover, .back-id-card:hover {
    filter: blur(2px);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 13px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.accordion {
    border: 1px solid #ddd;
}

.accordion-cbx {
    display: none;
}

.accordion-label {
    cursor: pointer;
    width: 100%;
    display: inline-block;
    background-color: #eee;
    padding: 5px;
    margin-left: 0 !important;
}

.accordion-content {
    height: 0;
    overflow: hidden;
}

.accordion-cbx:checked ~ .accordion-content {
    height: max-content;
    padding: 5px;
}

.multiimage {
    height: 100px;
    cursor: pointer;
    background-color: #eee;
    padding: 5px;
    border: 2px dashed #aaa;
}

.multiimage .img-item {
    display: inline-block;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    margin-right: 5px;
}

.img-item, .multiimage img {
    height: 100%;
    min-width: 100px;
    border: 1px solid #ccc;
}

.multiimage .delete-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: max-content;
    height: max-content;
    display: none;
}
.multiimage .img-item:hover .delete-item{
    display:block;
}
.radio label {
    min-width: 50px;
    display: inline-block;
}
.area{
    padding-top:10px;
}
.area .select2-container{
    margin-bottom:10px;
}
.stage-item {
    width: 300px;
    margin-right: 10px;
}

.quick-send-email, .quick-form {
    position: fixed;
    width: 600px;
    height: 100vh;
    bottom: 0;
    left: 0;
    background-color: #fff;
    overflow: hidden;
    color: #000;
    box-shadow: 0px 0px 10px 0px #7c7c7c;
    z-index: 1055;
}
.compose-header, .quick-form .quick-header{
    background-color: #f2f2f2;
    padding: 10px;
}
.quick-send-email .compose-body, .quick-form .quick-body{
    height: calc(100% - 90px);
    overflow-y: scroll;
    overflow-x: hidden;
}
.quick-send-email .compose-subject input.form-control{
    padding-left: 15px;
    border:0;
    border-bottom: 1px solid #eee;
}
.quick-send-email .compose-body {
    padding: 1rem;
}
.compose-footer, .quick-form .quick-footer{
    padding: 5px
}
.compose-body .codex-editor{
    border:0;
}
.compose-attachment{
    padding: 20px;
}
.compose-attachment .file-item{
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 5px;
}
.compose-btn-attachment{
    margin-left: 20px;
}

.compose-from{
    width: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    gap: 3rem;
}
.compose-from .compose-txt {
    width: 8rem;
}
.sender-tags{
    border-radius: 5px;
    border: 1px solid #aaa;
    background-color: #f0f0f0;
    padding: 3px 10px;
    height: 28px;
    color: #515365;
    margin-top: 7px;
    width : 100%;
}
.compose-recipients {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3rem;
    width: 100%;
}
.compose-recipients .compose-to {
    width: 8rem;
}
.compose-subject {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3rem;
    width: 100%;
}
.compose-subject #subject{
    border: 1px solid #ced4da;
    border-radius: .375rem;
    line-height: 3;
    text-wrap: nowrap;
    overflow: hidden;
    padding: 0.5rem;
}
.compose-subject .compose-txt {
    width: 8rem;
}
.compose-body .compose-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3rem;
    width: 100%;
}

.compose-body .compose-row .compose-txt {
    width: 8rem;
}
#mailList .unread{
    font-weight: bold;
    background-color: #b19bdd;
    color: #fff;
}
#mailList .unread a{    
    color: #fff;
}
.mail .text-nowrap td, .mail .text-nowrap th{    
    display: inline-grid;
    vertical-align: middle;
    min-height: 44px;
}
.mail .text-nowrap td>div, .mail .text-nowrap th>div,.mail .text-nowrap td>a, .mail .text-nowrap th>a{
    overflow: hidden;
    text-overflow: ellipsis;
}
.mail .text-nowrap td .w-100, .mail .text-nowrap th .w-100{    
    overflow: hidden;
}
.mail-detail .more-dropdown{
    right: unset;
    left: -20px;
    width: 400px;
}
.mail-detail .more-dropdown::before{
    right: unset;
    left: 25px;
}
.attach-file-item{
    border: 1px solid #ddd;
    width: max-content;
    padding: 5px 10px;
    border-radius: 20px;
}
.process-task-item {
    background-color: #12cdd4;
    border-radius: 5px;
    padding: 11px 15px;
    margin-bottom: 10px;
}
.processes .task-list{
    margin-top:10px;
}
.process-task-item > a {
    display: inline-block;
    width: calc(100% - 23px); 
}
.mail-navbar li{
    width: 100%;
}
.mail-navbar li a{
    padding: 5px 0;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    width: 100%;
    display: inline-block;
}
.mail-navbar li.active a{
    background-color: #7c5ac2
}
.mail-navbar li.active a{
    color:#fff;
}
.mail-navbar li:hover a{
    background-color: #9b79df;
    color:#fff;
}

.post-comment .view-more{
    padding: 10px 20px;
    display: inline-block;
}
table a:not(.btn) {
    text-decoration: underline;
    text-decoration-style: dotted;
}
.spin {
    display: inline-block;
    -webkit-animation: rotation 2s linear infinite;
    -moz-animation: rotation 1s linear infinite;
    -ms-animation: rotation 1s linear infinite;
    -o-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
@-webkit-keyframes rotation {  
    100% {-webkit-transform: rotate(360deg);}
  }
  
  @-moz-keyframes indicator {   
    100% {-moz-transform: rotate(360deg);}
  }
  
  @-ms-keyframes indicator {   
    100% {-ms-transform: rotate(360deg);}
  }
  
  @-o-keyframes indicator {    
    100% {-o-transform: rotate(360deg);}
  }
  
  @keyframes indicator {   
    100% {transform: rotate(360deg);}
  }
  

blockquote::before{
  content: "\201C";
  color:#78C0A8;
  font-size: 3.9375em;
  position: absolute;
  left: 10px;
  top:10px;
}

blockquote::after{
  content: '';
}

blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}
blockquote cite:before{
	content : "— ";
}
blockquote cite{
	color:#333;
	font-style: normal;
	font-size: 14px;
}

.ql-editor blockquote{
    font-size: 1.0625rem;
    line-height: 1.75rem;    
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    padding: 1rem !important;;
    border-left: 0.5rem solid #78C0A8;
    color: #555;
    font-style: normal;    
    position: relative;
    background-color: #eee;
}

.group-list{
    position: relative;
}
.icon-new-message{
    position: absolute;
    left : 5px;
    margin-top: 12px;
}
.inline-block{
    display : inline-block;
}
#bulk-tool{
    margin-left: 30px;
}
.conversion-funnel-item{
    width: auto;
    height: auto;
    border: 1px solid #aaa;
    padding: 10px;
    border-radius: 5px;
}
#scorecard .dt-item{
    padding: 5px 20px;
    background-color: #ddd;
    width: 120px;
    min-width: max-content;
    border-radius: 5px;
    color:#fff;
}
#scorecard .dt-item h4{
    color:#fff;
}
#scorecard .dt-total, #scorecard .dt-total h4{
    color:#555
}
.bg-white{
    background-color: #fff; 
}
@media (max-width: 1219.98px) {
    .reportLead-head {
        overflow: auto;
        gap: 4px;
    }
}

.email-signatures iframe{
    border: 1px solid #ddd;
    height: 100%;
    border-radius: 3px;
   
}
.email-signature-copy {
    position: absolute;
    right: 10px;
}

.field_lock:checked + label .lock-close{
    display:inline-block;
}

input[type="checkbox"].field_lock:checked ~ a,.field_lock:checked + label .lock-open,.lock-close,input[type="checkbox"].field_lock:checked + label .icon-unlock{
  display:none;
}

.field_show:checked ~ span.eye-open,.eye-close{
    display: inline-block;
}
.field_show:checked ~ span.eye-close,.eye-open{
    display: none;
}

.attachment-item{
    border: 1px solid #aaa;
    border-radius: 20px;
    padding: 2px 10px;
    margin-top: 5px;
    margin-right: 5px;
    display: inline-block;
}
.editor_cursor{
    position: absolute;
    width: max-content;
    background-color: #4d8ceb;
    margin-top: -25px;
    margin-left: -15px;
    color: #fff;
    padding: 2px 7px;
    border-radius: 5px;
    box-shadow: 0 0 5px 0px #4d8ceb;
    z-index: 1;
}

.editor_cursor span{
	background-color: #4d8ceb;
    width: 2px;
    height: 20px;
    position: absolute;
    margin-top: 25px;
    margin-left: 8px;
}
.editor_cursor span:before{
	content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #4d8ceb;
    position: absolute;
    left: -4px;
}
.doc-content{
    position: relative;
}
input.trPicker {
    width: 100px;
}
#wsList span.ws-item{
    padding: 5px;
    cursor: pointer;
    display: inline-block;
    width: 100px;
}
#wsList span.ws-item:hover + .ws-mini-tool, .ws-mini-tool:hover{
    display: block;
}
.ws-mini-tool{
    position: absolute;
    display: none;
    margin-left: 85px;
    margin-top: -27px;
    cursor: pointer;
    padding: 0px;
}
.dayOfWeek label{
    width: 30px;
    height: 30px;
    text-align: center;
    background-color: #ddd;
    margin-left: 0 !important;
    line-height: 2.3 !important;
}
.dayOfWeek input:checked + label {
    background-color: #7c5ac2;
    color: #fff;
}

.calendar-mini{
    position: relative;
}
.calendar-mini .material-symbols-outlined{
    font-size: 49px;
}
.calendar-mini .prev{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height:max-content;
}
.calendar-mini .next{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height:max-content;
}
.tab-vertical{
    
}
.tab-vertical .tab-content input[type="radio"] + div{
    display:none;
}
.tab-vertical .tab-content input[type="radio"]:checked + div{
    display:block;
}
.tab-vertical .tab-nav{
    min-width: 200px;
    background-color: #fff;
    border-radius: 3px;
}
.tab-vertical .tab-nav label{
    padding: 5px;
    width: 100%;
    display: inline-block;    
}
.tab-vertical .tab-nav label:hover{
    background-color: #ddd;
}
.tab-vertical .tab-content{
    width: calc(100% - 215px);
    background-color: #fff;
    display: inline-block;
    padding : 5px;
    border-radius: 3px;
}

.tab-vertical .tab-nav .active{
    background-color: #7655b8;
    color: #fff;
}

.doc-content{
    position: relative;
}
input.trPicker {
    width: 100px;
}
#wsList span.ws-item{
    padding: 5px;
    cursor: pointer;
    display: inline-block;
    width: 100px;
}
#wsList span.ws-item:hover + .ws-mini-tool, .ws-mini-tool:hover{
    display: block;
}
.ws-mini-tool{
    position: absolute;
    display: none;
    margin-left: 85px;
    margin-top: -27px;
    cursor: pointer;
    padding: 0px;
}
.dayOfWeek label{
    width: 30px;
    height: 30px;
    text-align: center;
    background-color: #ddd;
    margin-left: 0 !important;
    line-height: 2.3 !important;
}
.dayOfWeek input:checked + label {
    background-color: #7c5ac2;
    color: #fff;
}

.calendar-mini{
    position: relative;
}
.calendar-mini .material-symbols-outlined{
    font-size: 49px;
}
.calendar-mini .prev{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height:max-content;
}
.calendar-mini .next{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height:max-content;
}
.tab-vertical{
    
}
.tab-vertical .tab-content input[type="radio"] + div{
    display:none;
}
.tab-vertical .tab-content input[type="radio"]:checked + div{
    display:block;
}
.tab-vertical .tab-nav{
    min-width: 200px;
    background-color: #fff;
    border-radius: 3px;
}
.tab-vertical .tab-nav label{
    padding: 5px;
    width: 100%;
    display: inline-block;    
}
.tab-vertical .tab-nav label:hover{
    background-color: #ddd;
}
.tab-vertical .tab-content{
    width: calc(100% - 215px);
    background-color: #fff;
    display: inline-block;
    padding : 5px;
    border-radius: 3px;
}

.tab-vertical .tab-nav .active{
    background-color: #7655b8;
    color: #fff;
}

.visual-item{
    background-color:#eee;
    position: absolute;
}

.task-rating span{
    font-size: 39px;
}

#compose_content{
    position: relative;
    min-height: calc(100% - 220px);
}
#compose_content textarea{
    height : 100%;
}
.module-header {
    border-bottom: 1px solid #eee;
    padding: 5px 0;
}
.module-body {
    padding: 5px 0;
}
.module-body .lesson-item {
    padding: 5px 0px 5px 15px;
    width: 100%;
}
.module-body .lesson-item:hover{
    background-color: #eee;
}
.module-body .unit-item {
    background-color: #f5f5f5;
    padding: 0px 15px;
}
.module-body .unit-header {
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
}
span.select2 span[aria-hidden="true"] {
    display: none;
}
span.select2:hover span[aria-hidden="true"] {
    display: block;
}
span.select2-container.select2-container--default.select2-container--open {
    z-index: 1055;
}
.ql-editor:not([contenteditable="true"]){
    font-size: 0.9375rem;
    height: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
}
.ql-editor figure{
    margin: 0;
}
.ql-editor figcaption{
    text-align: center;
    padding-top: 15px;
    padding-bottom:  5px;
}
.ql-bubble .ql-tooltip {
    z-index: 1046;
    border-radius: 5px !important;
}
.ql-toolbar {
    display: flex;
    flex-wrap: wrap;
}

.ql-toolbar .ql-formats {
    margin-bottom: 4px; /* Tạo khoảng cách giữa các dòng của các nhóm công cụ */
}
.qlbt-operation-menu {
    z-index: 1055;
}
.ql-editor ol {
    padding-left: 1.5em;
}
.ql-editor li[data-list=ordered] {
    counter-increment: list-0;
}
@supports (counter-set:none) {
    .ql-editor li[data-list] {
        counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    }
}
.ql-editor li {
    list-style-type: none;
    padding-left: 1.5em;
    position: relative;
    font-family: 1rem !important;
    line-height: 1.5rem !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
} 
.ql-editor li > .ql-ui:before {
    display: inline-block;
    margin-left: -1.5em;
    margin-right: .3em;
    text-align: right;
    white-space: nowrap;
    width: 1.2em;
}
.ql-editor li[data-list=bullet] > .ql-ui:before {
    content: '\2022';
}
.ql-editor li[data-list=ordered] > .ql-ui:before {
    content: counter(list-0, decimal) '. ';
}

/* Display mode: Quill content without contenteditable (for read-only display) */
.ql-editor:not([contenteditable="true"]) li[data-list=bullet] > .ql-ui:before,
.ql-editor[contenteditable="false"] li[data-list=bullet] > .ql-ui:before {
    content: '\2022' !important;
}
.ql-editor:not([contenteditable="true"]) li[data-list=ordered] > .ql-ui:before,
.ql-editor[contenteditable="false"] li[data-list=ordered] > .ql-ui:before {
    content: counter(list-0, decimal) '. ' !important;
}

/* For content without .ql-editor wrapper but has Quill structure */
ol:not(.ql-editor ol) li[data-list] {
    list-style-type: none;
    padding-left: 1.5em;
    position: relative;
    counter-increment: list-0;
}
ol:not(.ql-editor ol) li[data-list] > .ql-ui:before {
    display: inline-block;
    margin-left: -1.5em;
    margin-right: 0.3em;
    text-align: right;
    white-space: nowrap;
    width: 1.2em;
}
ol:not(.ql-editor ol) li[data-list=bullet] > .ql-ui:before {
    content: '\2022';
}
ol:not(.ql-editor ol) li[data-list=ordered] > .ql-ui:before {
    content: counter(list-0, decimal) '. ';
}

.modal-backdrop {
    pointer-events: none;  /* cho phép click xuyên qua backdrop */
}
.ql-editor .ql-block{
    font-size: 0.9375rem;
    color: #515365;
    line-height: 1.625rem;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
.ql-editor a{
    font-size: 0.9375rem;
    text-decoration: underline;
    color: #ff5e3a;
}
.ql-editor p{
    font-size: 0.9375rem;
    line-height: 1.625rem;    
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.ql-editor h1{
    font-size: 1.6875rem !important;
    line-height: 2.25rem !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}
.ql-editor h2{
    font-size: 1.4375rem !important;
    line-height: 2rem !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.875rem !important;
}
.ql-editor h3{
    font-size: 1.1875rem !important;
    line-height: 1.75rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}
.ql-editor h4{
    font-size: 1.0625rem !important;
    line-height: 1.5rem !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.625rem !important;
}
.ql-editor h5{
    font-size: 0.8125rem !important;
    line-height: 1.25rem !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}
.ql-editor h6{
    font-size: 0.6875rem !important;
    line-height: 1.125rem !important;
    margin-top: 0.875rem !important;
    margin-bottom: 0.4375rem !important;
}

.qlbt-operation-menu .qlbt-operation-color-picker .qlbt-operation-color-picker-item {
    width: 15px;
    height: 15px;
    /* border: 1px solid #595959; */
    margin-right: 1px;
    margin-bottom: 1px;
    cursor: pointer;
    border-radius: 50%;
}
.era-dr-initialized {
    width: 305px;
    max-width: 100%;
}
.comment-box {
    position: absolute;
    right : 20px;
    width: 300px;
    z-index: 1045;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  }
.ql-custom-image{
    text-align: center;
}
.ql-image-caption{
    padding: 7px;
    border: 0;
}
.comment-tooltip {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    display: none;
    pointer-events: none;
    font-size: 11px;
    z-index: 1000;
}
.commented-text {
    background-color: #FFFF00; /* Highlight màu nền */
    cursor: pointer;
}
.commented-focus{
    background-color: #fcbc03;
}

.modal-content-slide{ 
    transition: width 0.4s ease;
}
.ql-formats .material-symbols-outlined {
    color: #cccccc;
}

.page-a4 {
    width: 210mm; /* A4 width */
    height: 297mm; /* A4 height */
    margin: 10mm auto; /* Center the page and add some margin */
    padding: 20mm; /* Content padding */
    box-sizing: border-box;
    border: 1px solid #000; /* Optional border for visibility */
    background: #fff; /* Page background */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
    overflow: hidden; /* Avoid overflow */
  }
.gantt-target .gantt-container {
    height: calc(100vh - 179px);
}
.gantt .bar-wrapper.selected .bar{fill: #65B688;}
.gantt .bar-wrapper.selected .bar-progress{
    fill: #198754;
}
.gantt-tasks{
    height: calc(100vh - 90px);
    overflow: auto;
}

/* Styling cho toggle dropdown functionality */
.toggle-number-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 50px !important;
    flex-shrink: 0;
    padding-right: 4px;
}

.task-number {
    font-weight: 600;
    color: #495057;
    font-size: 13px;
    min-width: 20px;
    text-align: center;
    margin-left: 2px;
}

.task-content {
    flex-grow: 1 !important;
    overflow: hidden !important;
    min-width: 0; /* Important for text-overflow to work */
}

.toggle-icon {
    transition: transform 0.3s ease, color 0.2s ease, background-color 0.2s ease;
    cursor: pointer !important;
    user-select: none;
    font-size: 9px !important;
    width: 16px !important;
    height: 16px !important;
    text-align: center;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 3px;
    margin-right: 6px !important;
    background-color: #e9ecef !important;
    border: 1px solid #ced4da !important;
    color: #495057 !important;
}

.toggle-icon:hover {
    color: #ffffff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0,123,255,0.3);
}

.toggle-icon.fa-chevron-right {
    transform: rotate(-90deg);
    color: #ffffff !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.toggle-icon.fa-chevron-right:hover {
    background-color: #218838 !important;
    border-color: #218838 !important;
}

.toggle-icon.fa-chevron-down {
    transform: rotate(0deg);
    color: #495057 !important;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

.toggle-icon.fa-chevron-down:hover {
    color: #ffffff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

/* Visual indicator cho main task có subtasks bị thu gọn */
.list-group-item.has-collapsed-subtasks {
    background: linear-gradient(90deg, #ffffff 0%, #fff3cd 100%) !important;
    border-left-color: #ffc107 !important;
}

.list-group-item.has-collapsed-subtasks::after {
    content: " (collapsed)";
    font-size: 10px;
    color: #856404;
    font-style: italic;
}

/* Styling cho hierarchical task list */
.list-group-item.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: white !important;
}

/* Main task styling */
.gantt-tasks .list-group-item[style*="border-left: 4px solid #28a745"] {
    font-weight: 600;
    background-color: #ffffff;
    padding: 8px 12px !important;
}

.gantt-tasks .list-group-item[style*="border-left: 4px solid #28a745"]:hover {
    background-color: #f8f9fa;
}

/* Subtask styling */
.gantt-tasks .list-group-item[style*="border-left: 3px solid #2196F3"] {
    background-color: #f8f9fa;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    padding: 6px 12px !important;
    margin-left: 15px !important;
}

.gantt-tasks .list-group-item[style*="border-left: 3px solid #2196F3"]:hover {
    background-color: #e9ecef;
}

.gantt-tasks .list-group-item[style*="border-left: 3px solid #2196F3"] .toggle-number-container .fas.fa-level-down-alt {
    color: #2196F3 !important;
    background-color: #e3f2fd !important;
    border: 1px solid #2196F3 !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 3px;
    font-size: 9px !important;
}

.gantt-tasks .list-group-item[style*="border-left: 3px solid #2196F3"] .toggle-number-container .fas.fa-level-down-alt:hover {
    background-color: #2196F3 !important;
    color: #ffffff !important;
}

/* Subtask animation khi toggle */
.gantt-tasks .list-group-item[data-parent-task] {
    transition: all 0.3s ease, opacity 0.2s ease, max-height 0.2s ease;
}

/* List item flex layout */
.gantt-tasks .list-group-item.d-flex {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
}

.gantt-tasks .list-group-item.d-flex .task-content a {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.gantt-tasks .list-group-item.d-flex .task-content a:hover {
    color: inherit;
    text-decoration: none;
}

/* Toggle All button */
#toggleAllSubtasks {
    font-size: 11px;
    padding: 4px 8px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

#toggleAllSubtasks:hover {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

#toggleAllSubtasks i {
    font-size: 10px;
}

/* Counter badge styling */
.badge.bg-secondary {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
}

/* Styling cho hierarchical task list */
.list-group-item.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: white !important;
}

/* Main task styling */
.gantt-tasks .list-group-item[style*="border-left: 4px solid #28a745"] {
    font-weight: 600;
    background-color: #ffffff;
}

.gantt-tasks .list-group-item[style*="border-left: 4px solid #28a745"]:hover {
    background-color: #f8f9fa;
}

/* Subtask styling */
.gantt-tasks .list-group-item[style*="border-left: 3px solid #2196F3"] {
    background-color: #f8f9fa;
    position: relative;
}

.gantt-tasks .list-group-item[style*="border-left: 3px solid #2196F3"]:hover {
    background-color: #e9ecef;
}

/* Styling cho mũi tên dependencies trong Gantt chart */
.gantt .arrow {
    stroke: #2196F3 !important;
    stroke-width: 2px !important;
    fill: none !important;
    marker-end: url(#arrowhead) !important;
}

.gantt .arrow:hover {
    stroke: #FF5722 !important;
    stroke-width: 3px !important;
}

.gantt svg defs marker#arrowhead path {
    fill: #2196F3 !important;
    stroke: #2196F3 !important;
}

.gantt .dependency-line {
    stroke: #2196F3 !important;
    stroke-width: 2px !important;
    opacity: 0.8 !important;
}

.gantt .dependency-line:hover {
    stroke: #FF5722 !important;
    stroke-width: 3px !important;
    opacity: 1 !important;
}

/* Styling cho mũi tên dependencies trong Gantt chart */
.gantt .arrow {
    stroke: #2196F3 !important; /* Màu xanh dương cho mũi tên */
    stroke-width: 2px !important; /* Độ dày mũi tên */
    fill: none !important;
    marker-end: url(#arrowhead) !important;
}

.gantt .arrow:hover {
    stroke: #FF5722 !important; /* Màu cam khi hover */
    stroke-width: 3px !important;
}

/* Arrow head marker */
.gantt svg defs marker#arrowhead path {
    fill: #2196F3 !important;
    stroke: #2196F3 !important;
}

.gantt svg defs marker#arrowhead:hover path {
    fill: #FF5722 !important;
    stroke: #FF5722 !important;
}

/* Tăng cường hiển thị dependency lines */
.gantt .dependency-line {
    stroke: #2196F3 !important;
    stroke-width: 2px !important;
    stroke-dasharray: none !important; /* Đường liền, không đứt nét */
    opacity: 0.8 !important;
}

.gantt .dependency-line:hover {
    stroke: #FF5722 !important;
    stroke-width: 3px !important;
    opacity: 1 !important;
}
div.fancybox__container {
    z-index: 1055 !important;
}
.bd-links .btn::before {
    width: 1.25em;
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform 0.35s ease;
    transform-origin: .5em 50%
}
.bd-links .btn[aria-expanded="true"]::before {
    transform: rotate(90deg)
}

  #drop-area {
    border: 2px dashed #007bff;
    border-radius: 10px;
    cursor: pointer;
  }
  #drop-area.bg-light {
    background-color: #f8f9fa;
  }
  #file-info {
    margin-top: 15px;
  }
.left-menu ul li span.notification-number{
    right: 0%;
    top: 50%;
}
.suggest-strike {
    text-decoration: line-through;
}
.suggest-text {
    color: #4caf50;
}
.cursor-pointer{
    cursor: pointer;
}
.accordion-button::after {
    position: absolute;
    right: 15px;
    margin: auto;
    top: 0;
    bottom: 0;
}
input[type="radio"].objective-switch:checked + span{
    background-color: #007bff;
    color: #fff;
}
.flatpickr-time .numInputWrapper input{
    padding: 0;
    width: 100%;
}
.select2-sm {
    height: auto !important;
    min-height: 24px !important;
    display: flex;
    align-items: center;
}
.select2-sm .select2-selection--single{
    min-height: 24px;
    padding: .1rem .7rem;
}
.select2-sm .select2-container .select2-selection .select2-selection__arrow{
    top: 0;
}
.select2-sm .select2-container .select2-results__option{
    padding: 3px 7px!important;
}
.sl2-audience .material-symbols-outlined, small span.material-symbols-outlined{
    font-size: 17px;
    position: relative;
    top: -2px;
}
.ql-editor.ql-blank::before{
    font-style: normal!important;
    font-size: 0.9375rem;
}
.select2-selection__rendered .ui-sortable-placeholder {

    visibility: visible !important;
}
.select2-container .select2-selection--single .select2-selection__clear {
    margin-right: 0;
}
/* Gantt Task List Toggle Styles */
.toggle-number-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 50px !important;
    flex-shrink: 0;
}

.toggle-icon {
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #e9ecef;
    border: 1px solid #28a745;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 9px;
    margin-right: 6px;
}

.toggle-icon:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    transform: scale(1.1);
}

.task-number {
    font-weight: 600;
    color: #495057;
    font-size: 13px;
    min-width: 20px;
    text-align: center;
}

.task-content {
    flex-grow: 1 !important;
    overflow: hidden !important;
    min-width: 0;
}

/* Gantt alignment fixes */
.gantt-target .bar-wrapper {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.gantt-target .bar-wrapper[style*="visibility: hidden"] {
    pointer-events: none;
}

.gantt-target .arrow[style*="visibility: hidden"] {
    pointer-events: none;
}

/* Simple toggle styles */
.toggle-icon {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.toggle-icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Hide gantt bars when task items are hidden */
.gantt-target .bar-wrapper[style*="display: none"] {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Basic task list alignment - Loại bỏ hoàn toàn khoảng cách */
#taskList .list-group-item {
    display: flex;
    align-items: center;
    min-height: 40px;
    border: none;
    border-bottom: 1px solid #dee2e6;
    background: transparent;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1;
}

/* Task list dropdown animation styles - Dồn hàng hoàn toàn */
#taskList .list-group-item {
    transform-origin: top;
    overflow: hidden;
    box-sizing: border-box;
}

/* Smooth collapse/expand animation - Thu gọn hoàn toàn không chiếm không gian */
.task-item-collapsing {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Collapsed state - Hoàn toàn không chiếm không gian */
.task-item-collapsed {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transform: scaleY(0) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    visibility: hidden !important;
}

/* Expanded state */
.task-item-expanded {
    opacity: 1 !important;
    transform: scaleY(1) !important;
}

/* Smooth transitions for subtask items - Đảm bảo dồn hàng mượt mà */
#taskList .list-group-item[data-parent-task] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-sizing: border-box;
}

/* Đảm bảo task list không có gap khi collapse */
#taskList {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#taskList .list-group-item {
    flex-shrink: 0;
    min-height: 35px;
}

/* Loại bỏ hoàn toàn space giữa các items */
#taskList .list-group-item + .list-group-item {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Đảm bảo perfect alignment với gantt rows */
#taskList .list-group-item {
    height: 35px !important;
    max-height: 35px !important;
    min-height: 35px !important;
}

/* Khi collapse, hoàn toàn không chiếm không gian */
#taskList .list-group-item[style*="display: none"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    visibility: hidden !important;
}