@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
body {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: 1.6; }
  body.waiting::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 999999999;
    cursor: wait !important; }

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0; }

p {
  margin: 0 0 4px; }

.height-auto {
  height: auto; }

.h-100 {
  height: 100%; }

.mh-100 {
  max-height: 100%; }

.mx-2 {
  margin-left: 2px;
  margin-right: 2px; }

.ml-2 {
  margin-left: 2px; }

.mr-2 {
  margin-right: 2px; }

.mr-auto {
  margin: auto; }

.px-5 {
  padding-left: 5px;
  padding-right: 5px; }

.px-10 {
  padding-left: 10px;
  padding-right: 10px; }

.px-15 {
  padding-left: 15px;
  padding-right: 15px; }

.px-20 {
  padding-left: 20px;
  padding-right: 20px; }

.py-5 {
  padding-top: 5px;
  padding-bottom: 5px; }

.py-10 {
  padding-top: 10px;
  padding-bottom: 10px; }

.py-15 {
  padding-top: 15px;
  padding-bottom: 15px; }

.py-20 {
  padding-top: 20px;
  padding-bottom: 20px; }

.pr-5 {
  padding-right: 5px; }

.pr-10 {
  padding-right: 10px; }

.pr-15 {
  padding-right: 15px; }

.pr-20 {
  padding-right: 20px; }

.pl-5 {
  padding-left: 5px; }

.pl-10 {
  padding-left: 10px; }

.pl-15 {
  padding-left: 15px; }

.pl-20 {
  padding-left: 20px; }

.pb-10 {
  padding-bottom: 10px; }

[class^="col-"] {
  padding-left: 10px;
  padding-right: 10px; }

.table-striped > tbody > tr:nth-of-type(even) td {
  background-color: #fff; }

.table-striped > tbody > tr:nth-of-type(odd) td {
  background-color: #f9f9f9; }

.table-hover > tbody > tr:hover td {
  background-color: #cfcfcf; }

.content-detail ul,
.content-detail ol {
  text-align: left;
  list-style: initial;
  padding-left: 20px; }
  .content-detail ul li,
  .content-detail ol li {
    text-align: left;
    display: list-item; }
.content-detail h2 {
  font-size: 22px;
  margin-bottom: 10px; }
.content-detail p,
.content-detail div,
.content-detail img {
  margin: 0 0 5px 0; }
.content-detail img {
  margin: 5px auto;
  width: 100%;
  max-width: 100%; }
.content-detail table {
  width: 100%;
  background-color: #fffdf6;
  border-collapse: collapse;
  margin: 20px auto; }
  .content-detail table tr {
    border: 1px solid #000;
    color: #000;
    background: #e2e2e2; }
    .content-detail table tr:nth-child(2n + 1) {
      background: #fff; }
    .content-detail table tr:first-child {
      background: #3c8dbc;
      color: #fff;
      font-weight: bold; }
    .content-detail table tr td {
      margin: 0;
      padding: 5px 10px;
      border: 1px solid #000;
      vertical-align: middle; }
      .content-detail table tr td ul {
        width: 100%; }
        .content-detail table tr td ul li {
          width: 100%;
          padding-left: 0;
          padding-right: 0;
          text-indent: 10px; }
    .content-detail table tr p {
      width: 100%;
      padding: 5px 0;
      margin: 0; }
.content-detail iframe {
  max-width: 100%;
  width: 100% !important; }
.content-detail blockquote {
  padding: 10px;
  margin: 0 0 10px;
  font-size: 14px;
  border-left: 5px solid #cdcdcd; }

.block-description {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 5px; }
  .block-description .desc-title {
    display: block;
    font-weight: 700;
    margin-bottom: 6px; }

.row {
  margin-right: -10px;
  margin-left: -10px; }

.no-data {
  padding: 2px 5px;
  text-align: center; }

.display-none {
  display: none; }

.overflow-hidden {
  overflow: hidden; }

.overflow-auto {
  overflow: auto; }

.required {
  color: red; }

.btn.btn-app {
  height: initial;
  min-width: initial;
  padding: 8px 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  margin: 0 0 5px 5px; }
  .btn.btn-app .fa,
  .btn.btn-app .glyphicon {
    font-size: 14px;
    margin-right: 6px; }

.box-header {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .box-header .box-title a {
    color: #646464; }
    .box-header .box-title a:hover {
      color: deepskyblue; }
  .box-header:before, .box-header:after {
    display: none; }

.one_row {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  white-space: nowrap; }

.login-logo,
.register-logo {
  font-size: 28px; }

.login-page {
  background-color: #fff; }

.login-page a {
  text-decoration: none; }

.login-page .login-box {
  padding: 7% 0 0;
  width: 380px; }

.login-page .login-box .login-box-body {
  border: 1px solid #e3e3e3;
  background: #f5f5f5;
  padding: 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); }

.login-page .login-box .login-box-msg {
  font-size: 13pt; }

.login-page .login-box button {
  margin: 15px auto 0;
  padding: 6px 22px;
  border-radius: 3px; }

.login-page .notice .inner .alert-danger {
  margin: auto;
  width: 360px;
  padding: 10px 0;
  text-align: left;
  font-size: 15px;
  color: #bf0000 !important;
  border: 0 !important;
  background-color: initial !important; }

.user-panel {
  display: none; }

.skin-blue .main-header .sidebar-toggle {
  padding: 14px 15px 13px; }

.skin-blue .main-header .navbar {
  height: 50px;
  display: flex; }
  .skin-blue .main-header .navbar .navbar-button {
    flex: auto;
    display: flex;
    align-items: center; }
    .skin-blue .main-header .navbar .navbar-button .btn-group {
      margin-right: 4px;
      display: flex; }
      .skin-blue .main-header .navbar .navbar-button .btn-group button {
        font-size: 11px;
        padding: 6px; }

.skin-blue .main-header .navbar .nav > li > a {
  height: 100%; }

.skin-blue .main-header .navbar .navbar-custom-menu {
  height: 100%; }

.skin-blue .main-header .navbar .navbar-custom-menu .navbar-nav {
  height: 100%;
  display: flex; }

.skin-blue .main-header .navbar .navbar-custom-menu .navbar-nav .user-menu {
  height: 100%; }

.skin-blue .sidebar-menu > li.active > a {
  border-color: #f39b12; }

.skin-blue .sidebar-menu li .menu-icon img {
  width: 20px;
  padding-right: 5px; }

.wrapper .content-wrapper .alert {
  margin: 15px 0 0; }

.modal {
  overflow: auto !important; }

.logo span {
  height: 100%;
  padding: 5px;
  display: flex !important;
  justify-content: center;
  align-items: center; }
  .logo span img {
    max-height: 100%;
    max-width: 100%; }

.content-wrapper .alert {
  position: absolute;
  z-index: 999;
  right: 15px;
  max-width: 300px;
  width: 100%; }

#table_data thead tr th {
  vertical-align: middle; }

#table_data thead tr th:last-child {
  text-align: center;
  padding-right: 8px; }

#table_data tbody tr td:last-child {
  text-align: center; }

#table_data tbody tr td .glyphicon-check-on {
  width: 100%;
  text-align: center; }

#table_data tbody tr td .glyphicon-ban-circle-off {
  width: 100%;
  text-align: center; }

#table_data tbody tr td .btn.btn-xs {
  margin: 0 2px; }

#table_data tfoot tr td:last-child {
  text-align: center; }

table tfoot .form-control {
  width: 100% !important;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box; }

table thead tr th {
  background-color: #fff; }
table.table-bordered {
  border-collapse: separate; }
  table.table-bordered > tbody > tr td {
    border-width: 0 1px 1px 0px; }
    table.table-bordered > tbody > tr td.sticky {
      border-right-width: 1px; }
  table.table-bordered > thead > tr th {
    border-width: 0 1px 1px 0px; }
    table.table-bordered > thead > tr th.sticky {
      border-right-width: 1px;
      z-index: 1; }
table .sticky {
  position: sticky; }

.user-panel .image .img-circle {
  width: 100%;
  max-width: 45px; }

.btn.add-new {
  margin: auto; }

.glyphicon.glyphicon-check {
  color: green; }

.glyphicon.glyphicon-ban-circle {
  color: red; }

.status {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 19px;
  cursor: pointer; }

.status-1 {
  color: green;
  text-align: center; }

.status-0 {
  color: red;
  text-align: center; }

.select2-container {
  width: 100% !important; }

.select2-container--default .select2-selection--single {
  border: 1px solid #d2d6de;
  border-radius: 0; }

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #3c8dbc; }

.select2-container .select2-selection--single {
  height: 34px; }

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d; }
  .btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62; }

.d-flex {
  display: flex; }

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

.d-flex-column {
  flex-direction: column; }

.d-flex-row {
  flex-direction: row; }

.justify-content-between {
  justify-content: space-between; }

.justify-content-evenly {
  justify-content: space-evenly; }

.justify-content-start {
  justify-content: flex-start; }

.justify-content-end {
  justify-content: flex-end; }

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

.align-items-start {
  align-items: flex-start; }

.align-items-end {
  align-items: flex-end; }

.badge {
  font-weight: 300;
  font-size: 11px;
  padding: 2px 6px; }

.img-circle {
  border-radius: 50%;
  overflow: hidden;
  border-style: solid;
  border-width: 1px; }

.img-background {
  height: 100%;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important; }
  .img-background img {
    display: none; }

.border-width-3 {
  border-width: 3px; }

.avatar-wrap {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 100%; }

.avatar-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 22px;
  text-shadow: 1px 0 #747474, -1px 0 #747474, 0 1px #747474, 0 -1px #747474, 1px 1px #747474, -1px -1px #747474, 1px -1px #747474, -1px 1px #747474; }

.avatar-img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center top;
  background-color: #fff; }

.avatar {
  width: 100%;
  max-width: 80px;
  margin: auto;
  background-color: #fff;
  position: relative; }
  .avatar .image {
    display: block;
    width: 100%;
    padding-top: 100%;
    position: relative; }
  .avatar.leader {
    border-width: 3px;
    position: relative; }
    .avatar.leader .image {
      border: 3px solid #fff;
      padding-top: calc(100% - 6px);
      border-radius: 50%;
      overflow: hidden; }
  .avatar.w-35 {
    max-width: 35px; }
  .avatar.w-50 {
    max-width: 50px; }

.width-border {
  border-style: solid;
  position: relative; }
  .width-border::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 2px solid #fff;
    border-radius: 50%; }

.dropdown-menu > li > a {
  color: #777 !important;
  font-size: 12px;
  padding: 6px 16px; }

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:before, .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
  display: none; }

.navbar-custom-menu > .navbar-nav > li {
  height: 100%; }
  .navbar-custom-menu > .navbar-nav > li a {
    display: flex;
    align-items: center; }

.main-header .navbar-nav .messages-menu .dropdown-toggle {
  width: 42px !important; }
  .main-header .navbar-nav .messages-menu .dropdown-toggle .label {
    display: flex;
    align-items: center;
    justify-content: center; }
.main-header .navbar-nav .messages-menu .dropdown-menu {
  width: 300px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18); }
  .main-header .navbar-nav .messages-menu .dropdown-menu li .menu {
    max-height: calc(100vh - 160px); }

.main-header .navbar-nav .timekeeping-menu .dropdown-toggle {
  background: #4186af;
  border-radius: 50%;
  height: 42px !important;
  width: 42px !important;
  margin-top: 4px;
  border: 1px solid #37789f; }

.navbar-nav > .user-menu .user-image {
  border: 1px solid #ccc;
  background-color: #fff;
  overflow: hidden; }

.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  height: 160px; }
  .navbar-nav > .user-menu > .dropdown-menu > li.user-header .avatar {
    width: 80px;
    height: 80px;
    margin: auto; }
.navbar-nav > .user-menu .dropdown-toggle {
  display: flex;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important; }
  .navbar-nav > .user-menu .dropdown-toggle .avatar {
    width: 40px;
    height: 40px;
    margin-right: 6px;
    position: relative; }
    .navbar-nav > .user-menu .dropdown-toggle .avatar .avatar-text {
      font-size: 1vw; }

.sidebar-menu > li .label.label-menu {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -7px; }

.treeview-menu > li > a {
  font-size: 13px; }

.list-group-unbordered {
  margin: 0; }
  .list-group-unbordered > .list-group-item {
    border-top: 0;
    margin: 0; }
    .list-group-unbordered > .list-group-item:last-child {
      border-bottom: 0; }

.row-header-title {
  padding: 0 10px; }

.notifs li .notifs-wrap {
  margin: 0;
  padding: 10px; }
  .notifs li .notifs-wrap .item {
    padding: 2px 4px;
    border-bottom: 1px solid #f4f4f4; }
    .notifs li .notifs-wrap .item .item-wrap {
      display: flex !important;
      flex-wrap: wrap;
      border-radius: 5px;
      overflow: hidden;
      white-space: normal !important;
      color: #333 !important;
      border: 0 !important;
      padding: 10px; }
      .notifs li .notifs-wrap .item .item-wrap .item-image {
        position: relative;
        width: 50px;
        height: 50px; }
        .notifs li .notifs-wrap .item .item-wrap .item-image img {
          max-width: 100%;
          width: initial;
          height: initial;
          object-fit: cover; }
        .notifs li .notifs-wrap .item .item-wrap .item-image > .fa {
          position: absolute;
          bottom: 6px;
          right: 6px;
          transform: translate(50%, 50%);
          padding: 4px;
          border-radius: 6px;
          font-size: 12px; }
        .notifs li .notifs-wrap .item .item-wrap .item-image .img-circle {
          width: 100%;
          height: 100%;
          background: #e7e7e7;
          display: flex;
          justify-content: center;
          align-items: center; }
          .notifs li .notifs-wrap .item .item-wrap .item-image .img-circle .fa {
            font-size: 35px; }
      .notifs li .notifs-wrap .item .item-wrap .item-info {
        width: calc(100% - 62px);
        padding: 0 2px 0 6px; }
        .notifs li .notifs-wrap .item .item-wrap .item-info .item-date {
          color: #1876f2; }
      .notifs li .notifs-wrap .item .item-wrap .item-check {
        margin-left: 0;
        width: 12px;
        display: flex;
        align-items: center; }
        .notifs li .notifs-wrap .item .item-wrap .item-check span {
          display: none;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #1876f2; }
          .notifs li .notifs-wrap .item .item-wrap .item-check span.active {
            display: block; }
            .notifs li .notifs-wrap .item .item-wrap .item-check span.active:hover {
              background-color: #1d4b87; }
      .notifs li .notifs-wrap .item .item-wrap:hover {
        background-color: #f1f1f1; }
      .notifs li .notifs-wrap .item .item-wrap::before, .notifs li .notifs-wrap .item .item-wrap::after {
        display: none; }
.notifs li.notifs-header, .notifs li.notifs-footer {
  display: flex;
  justify-content: flex-end;
  padding: 4px 10px; }
  .notifs li.notifs-header a, .notifs li.notifs-footer a {
    display: block;
    padding: 6px 12px;
    font-size: 15px;
    font-weight: 600;
    text-align: right;
    justify-content: flex-end;
    color: #333 !important;
    border-radius: 8px; }
    .notifs li.notifs-header a:hover, .notifs li.notifs-footer a:hover {
      background: #f1f1f1; }
.notifs li.notifs-header {
  border-bottom: 1px solid #f4f4f4; }

.box-change-password .alert {
  display: flex;
  opacity: 1; }

.box-department .nav-stacked {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .box-department .nav-stacked li {
    width: calc(100%); }
    .box-department .nav-stacked li a {
      padding: 5px 15px; }
  .box-department .nav-stacked:before, .box-department .nav-stacked:after {
    display: none; }

.box-member .box-body {
  display: flex;
  flex-wrap: wrap; }
  .box-member .box-body .item {
    width: calc(100% / 3);
    padding: 10px 5px;
    text-align: center; }
    .box-member .box-body .item .fullname {
      display: block;
      padding: 5px 2px 0; }
.box-member .label-member {
  font-size: 12px;
  margin-left: 6px;
  color: #000;
  font-style: italic; }

.box-birthday-in-month .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px; }
  .box-birthday-in-month .item .item-info {
    width: calc(100% - 50px);
    display: flex;
    align-items: center; }
    .box-birthday-in-month .item .item-info .avatar {
      max-width: 60px; }
    .box-birthday-in-month .item .item-info .info {
      width: calc(100% - 70px);
      padding: 5px 10px; }
      .box-birthday-in-month .item .item-info .info .fullname {
        font-size: 16px;
        font-weight: 500; }
      .box-birthday-in-month .item .item-info .info p {
        color: #65676b; }
  .box-birthday-in-month .item .age {
    width: 50px;
    color: #65676b; }
  .box-birthday-in-month .item:last-child {
    margin: 0; }

.select2-container--default .select2-selection--multiple {
  border-radius: 0;
  border: 1px solid #d2d6de;
  height: 34px; }

.select_status + .select2-container .select2-selection {
  overflow-x: auto; }

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

ul.wysihtml5-toolbar {
  padding: 5px 0 0 5px;
  background: #f1f1f1;
  border: 1px solid #d2d6de;
  border-bottom: 0; }
  ul.wysihtml5-toolbar li {
    margin: 0 5px 5px 0; }

iframe.wysihtml5-sandbox {
  resize: vertical; }
  iframe.wysihtml5-sandbox .work_comment p {
    margin: 0 0 5px; }

.home-leave .box-body {
  height: calc(100% - 40px); }
  .home-leave .box-body .table-wrap {
    height: 100%; }

.box-leave table .col_fullname.sticky {
  left: 0;
  border-right: 1px solid #ccc; }
.box-leave table .col_action.sticky {
  right: 0;
  border-left: 1px solid #ccc; }

tr.sub-item {
  background: #bfbfbf !important; }
  tr.sub-item > td {
    padding: 0 !important;
    background: transparent !important; }

.alert {
  min-width: 300px;
  max-width: 400px;
  position: fixed;
  z-index: 9999;
  top: 1rem;
  right: 1rem;
  padding: 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  opacity: 0;
  transition: all 0.2s linear; }
  .alert.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem 1.25rem;
    color: inherit; }
  .alert.active {
    opacity: 1;
    display: block !important;
    transition: all 0.2s linear; }

.note-new {
  margin-right: 10px;
  display: flex;
  align-items: center; }
  .note-new span {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #1f9502;
    border-radius: 2px;
    overflow: hidden;
    margin-right: 5px; }
  .note-new .note-transaction {
    background-color: #1f9502; }
  .note-new .note-package {
    background-color: #d81b60; }
  .note-new .note-customer {
    background-color: #f39c12; }

span.accounting {
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: #027e00; }

.box-chart-column {
  min-height: 60px; }
  .box-chart-column .box-body {
    padding-right: 0;
    padding-left: 0;
    margin-right: 10px;
    margin-left: 10px;
    overflow-x: scroll; }
    .box-chart-column .box-body .chart-inner {
      min-width: 800px; }

.box {
  position: relative; }
  .box .table {
    max-width: initial; }
    .box .table tbody tr td .icon {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center; }
      .box .table tbody tr td .icon .fa {
        width: 22px;
        height: 14px; }
      .box .table tbody tr td .icon .fa-caret-down {
        display: none; }
    .box .table tbody tr td .row-btn {
      display: flex;
      flex-wrap: wrap; }
      .box .table tbody tr td .row-btn button,
      .box .table tbody tr td .row-btn a {
        display: flex;
        align-items: center;
        height: 23px;
        margin: 0 2px 2px 0; }
        .box .table tbody tr td .row-btn button i,
        .box .table tbody tr td .row-btn a i {
          width: 26px; }
    .box .table tbody tr td.showdetail {
      cursor: pointer; }
    .box .table tbody tr td.col-account_link a {
      color: #ff00c0; }
      .box .table tbody tr td.col-account_link a:hover {
        color: #000; }
    .box .table tbody tr td.col-less_zero {
      color: #ff0000; }
    .box .table tbody tr.active > td .icon .fa-caret-down {
      display: block; }
    .box .table tbody tr.active > td .icon .fa-caret-right {
      display: none; }
    .box .table tbody tr.out-of-date td {
      background-color: #ffe1e1; }
    .box .table tbody tr:hover td {
      background-color: #cfcfcf !important; }
  .box .list_work_member {
    position: relative; }
    .box .list_work_member .item-avatar {
      width: 35px;
      height: 35px;
      padding: 2px; }
      .box .list_work_member .item-avatar .avatar-text {
        font-size: 14px; }
  .box .box-transaction {
    max-width: 900px;
    border: 1px solid #f4f4f4;
    background: #fff;
    margin: 10px auto; }
    .box .box-transaction .box-body {
      position: relative; }
      .box .box-transaction .box-body .page-header {
        cursor: pointer; }
        .box .box-transaction .box-body .page-header:hover {
          color: deepskyblue; }
      .box .box-transaction .box-body .item-info {
        overflow: hidden; }

.box-transaction .modal-title {
  cursor: pointer; }
  .box-transaction .modal-title:hover {
    color: deepskyblue; }

.box-transaction-item tr.new {
  color: #1f9502; }
.box-transaction-item .label-new {
  display: inline-block;
  width: 10px;
  height: 10px;
  padding: 0;
  margin-right: 2px; }
.box-transaction-item .box-footer {
  display: flex;
  align-items: center; }

.box-saler-activity {
  overflow: auto; }
  .box-saler-activity .chart {
    min-width: 450px; }

.box-saler-kpi-wrap {
  height: calc(100% - 40px);
  min-height: 360px;
  overflow: auto; }
  .box-saler-kpi-wrap .box-saler-kpi {
    height: 100%;
    padding-bottom: 10px; }
    .box-saler-kpi-wrap .box-saler-kpi .item {
      flex: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      height: 100%;
      padding-left: 6px;
      padding-right: 16px; }
      .box-saler-kpi-wrap .box-saler-kpi .item .item-kpi {
        height: 30px;
        font-size: 13px; }
      .box-saler-kpi-wrap .box-saler-kpi .item .item-progress-inner {
        height: calc(100% - 50px);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center; }
        .box-saler-kpi-wrap .box-saler-kpi .item .item-progress-inner .item-progress {
          background-color: #bbbbbb !important; }
          .box-saler-kpi-wrap .box-saler-kpi .item .item-progress-inner .item-progress.progress {
            height: calc(100% - 30px);
            margin-bottom: 10px; }
          .box-saler-kpi-wrap .box-saler-kpi .item .item-progress-inner .item-progress .progress-bar {
            z-index: 4; }
          .box-saler-kpi-wrap .box-saler-kpi .item .item-progress-inner .item-progress .progress-kpi {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            z-index: 1; }
            .box-saler-kpi-wrap .box-saler-kpi .item .item-progress-inner .item-progress .progress-kpi.kpi-low {
              opacity: 0.3;
              background-color: #f7f7f7;
              z-index: 3; }
            .box-saler-kpi-wrap .box-saler-kpi .item .item-progress-inner .item-progress .progress-kpi.kpi-medium {
              opacity: 0.5;
              background-color: #d5d5d5;
              z-index: 2; }
      .box-saler-kpi-wrap .box-saler-kpi .item .item-title {
        height: 40px;
        font-size: 13px;
        text-align: center; }

.box-service-activity {
  overflow: auto; }
  .box-service-activity .chart {
    min-width: 450px; }

.box-service-kpi-wrap {
  height: calc(100% - 40px);
  min-height: 360px;
  overflow: auto; }
  .box-service-kpi-wrap .box-service-kpi {
    height: 100%;
    padding-bottom: 10px; }
    .box-service-kpi-wrap .box-service-kpi .item {
      flex: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      height: 100%;
      padding-left: 6px;
      padding-right: 16px; }
      .box-service-kpi-wrap .box-service-kpi .item .item-kpi {
        height: 30px;
        font-size: 13px; }
      .box-service-kpi-wrap .box-service-kpi .item .item-progress-inner {
        height: calc(100% - 50px);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center; }
        .box-service-kpi-wrap .box-service-kpi .item .item-progress-inner .item-progress {
          background-color: #bbbbbb !important; }
          .box-service-kpi-wrap .box-service-kpi .item .item-progress-inner .item-progress.progress {
            height: calc(100% - 30px);
            margin-bottom: 10px; }
          .box-service-kpi-wrap .box-service-kpi .item .item-progress-inner .item-progress .progress-bar {
            z-index: 4; }
          .box-service-kpi-wrap .box-service-kpi .item .item-progress-inner .item-progress .progress-kpi {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            z-index: 1; }
            .box-service-kpi-wrap .box-service-kpi .item .item-progress-inner .item-progress .progress-kpi.kpi-low {
              opacity: 0.3;
              background-color: #f7f7f7;
              z-index: 3; }
            .box-service-kpi-wrap .box-service-kpi .item .item-progress-inner .item-progress .progress-kpi.kpi-medium {
              opacity: 0.5;
              background-color: #d5d5d5;
              z-index: 2; }
      .box-service-kpi-wrap .box-service-kpi .item .item-title {
        height: 40px;
        font-size: 13px;
        text-align: center; }

.box-overview-statistic-service table tr td {
  padding: 5px; }

.box-statistic-service-fanpage {
  height: 100%; }

.box-overview-service-chart table tr td {
  padding: 3px 1px; }

.progress-group {
  padding: 4px 0 6px; }

.box-statistic-member table tr td {
  padding: 5px; }

.box-statistic-package table tr td {
  padding: 5px; }

.box-business-detail .description {
  white-space: break-spaces;
  background: #f5f5f5;
  padding: 10px;
  border-radius: 5px; }
  .box-business-detail .description .desc-title {
    display: block;
    font-weight: 700;
    margin-bottom: 6px; }

.box-business-kpi {
  position: relative; }
  .box-business-kpi .block-note {
    height: calc(100% - 40px);
    max-height: 460px;
    overflow-y: auto; }

.modal-erp .modal-dialog {
  width: calc(100% - 20px); }
  .modal-erp .modal-dialog > .modal-content > .modal-header {
    background: whitesmoke; }

.modal-package {
  /* ul.wysihtml5-toolbar {
  	li {
  		&:first-child { display: none; }
  		&:nth-child(n+3) { display: none; }
  	}
  } */ }
  .modal-package .check-list {
    display: flex;
    align-items: center; }
    .modal-package .check-list input[type="checkbox"],
    .modal-package .check-list input[type="radio"] {
      margin: 0 8px 0 0; }

.priority_normal {
  background-color: #0489ff; }

.priority_low {
  background-color: #888888; }

.priority_high {
  background-color: #03aa00; }

.priority_important {
  background-color: #ff3300; }

.priority_urgent {
  background-color: purple; }

.label_badge {
  display: inline;
  padding: 0.2em 1em;
  font-size: 90%;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em; }
  .label_badge.badge_ {
    display: none; }
  .label_badge.badge_normal {
    background-color: #0489ff; }
  .label_badge.badge_low {
    background-color: #888888; }
  .label_badge.badge_high {
    background-color: #03aa00; }
  .label_badge.badge_important {
    background-color: #ff3300; }
  .label_badge.badge_urgent {
    background-color: purple; }
  .label_badge.badge_work_open {
    background-color: #3578ff; }
  .label_badge.badge_work_working {
    background-color: #0489ff; }
  .label_badge.badge_work_completed {
    background-color: #00b507; }
  .label_badge.badge_work_voided {
    background-color: #ff8823; }
  .label_badge.badge_work_cancelled {
    background-color: #5d5a57; }
  .label_badge.badge_work_outofdate {
    background-color: #b80000; }

.info_description {
  padding: 10px;
  border: 1px solid #d1d1d1;
  border-radius: 5px;
  background: #f7f7f7;
  overflow: hidden; }

.badge_notif {
  position: absolute;
  top: -3px;
  right: -5px;
  font-size: 11px;
  font-weight: 400;
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 10px; }

.overlay-inner {
  display: none;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 9; }

.overlay-inner img {
  position: relative;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  max-height: 100%; }

.overlay-bg {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 2000; }
  .overlay-bg img {
    position: fixed;
    top: calc(50% - 58px);
    left: calc(50% - 58px);
    z-index: 20001; }

.overflow-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; }
  .overflow-ellipsis.line-clamp-2 {
    -webkit-line-clamp: 2; }

.box-overlay-bg {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000; }
  .box-overlay-bg img {
    position: absolute;
    top: calc(50% - 58px);
    left: calc(50% - 58px);
    z-index: 10001; }

.page-dashboard .row {
  margin-right: -5px;
  margin-left: -5px; }
  .page-dashboard .row [class^="col-"] {
    padding-left: 5px;
    padding-right: 5px; }

.widget-box {
  width: calc(100% / 4);
  padding: 0 10px 20px; }
  .widget-box .widget-box-wrap {
    height: 100%;
    display: flex;
    background: #fff;
    cursor: pointer; }
    .widget-box .widget-box-wrap .widget-box-icon {
      width: 70px;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center; }
    .widget-box .widget-box-wrap .widget-box-content {
      width: calc(100% - 70px);
      padding: 5px 6px;
      display: flex;
      flex-direction: column;
      text-align: left;
      line-height: 1.5; }
      .widget-box .widget-box-wrap .widget-box-content .widget-box-title {
        font-size: 10px;
        color: #888;
        text-transform: uppercase; }
      .widget-box .widget-box-wrap .widget-box-content .widget-box-text {
        font-size: 15px; }
      .widget-box .widget-box-wrap .widget-box-content .widget-box-number {
        font-size: 22px; }
    .widget-box .widget-box-wrap:hover {
      box-shadow: 0 0 10px 0px #ccc; }

.box-account-kpi {
  background-color: #ececec;
  padding: 5px 10px 0; }
  .box-account-kpi .widget-box {
    width: 100%;
    padding: 0 5px 5px; }
    .box-account-kpi .widget-box .widget-box-wrap .widget-box-content .widget-box-text {
      font-size: 14px; }
    .box-account-kpi .widget-box .widget-box-wrap .widget-box-content .widget-box-number {
      font-size: 18px;
      line-height: 1; }

.box-total-kpi .box-account-kpi {
  padding: 5px 0 0;
  background-color: transparent; }
  .box-total-kpi .box-account-kpi .widget-box {
    padding: 5px; }
    .box-total-kpi .box-account-kpi .widget-box .widget-box-wrap {
      box-shadow: 0 0 5px 1px #ccc; }

.checklist_item_info {
  padding-bottom: 16px; }
  .checklist_item_info dl {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 20px 8px 0; }
    .checklist_item_info dl dt {
      margin-bottom: 6px;
      font-weight: 500; }
    .checklist_item_info dl.due-date dd, .checklist_item_info dl.create-date dd {
      background: #daeaff;
      padding: 8px 12px;
      border-radius: 5px; }
    .checklist_item_info dl.create-date dd {
      background: #fff0e6; }

.show-work .dropdown-menu {
  min-width: 140px;
  padding: 10px 0;
  margin-top: -8px;
  left: 10px; }
  .show-work .dropdown-menu li {
    cursor: pointer;
    padding: 5px 10px; }
    .show-work .dropdown-menu li:hover {
      background-color: #f1f1f1; }

.work-manager {
  background: url("../images/work_bg.jpg") no-repeat center bottom/cover; }

.module-work-manager {
  padding: 10px 5px; }
  .module-work-manager [class^="col-"] {
    padding-left: 5px;
    padding-right: 5px; }

.module-work-detail [class^="col-"] {
  padding-left: 5px;
  padding-right: 5px; }
.module-work-detail .work-info {
  padding-bottom: 15px; }
.module-work-detail .btn-edit-description:hover .fa {
  color: red !important; }
.module-work-detail .info-box {
  min-height: 50px; }
  .module-work-detail .info-box .info-box-icon {
    height: 55px;
    width: 50px;
    font-size: 20px;
    line-height: 55px; }
  .module-work-detail .info-box .info-box-content {
    margin-left: 50px; }
    .module-work-detail .info-box .info-box-content .info-box-text {
      text-transform: initial; }
    .module-work-detail .info-box .info-box-content .info-box-number {
      font-size: 14px; }
.module-work-detail .work_description {
  background-color: rgba(9, 30, 66, 0.06);
  border-radius: 3px;
  min-height: 60px;
  padding: 8px 12px; }
.module-work-detail .box-work-history {
  padding-bottom: 20px; }
  .module-work-detail .box-work-history .box-body {
    max-height: 600px;
    overflow: auto; }
  .module-work-detail .box-work-history .timeline {
    margin: 0;
    padding: 0 0 5px; }
    .module-work-detail .box-work-history .timeline:before {
      top: 15px; }
    .module-work-detail .box-work-history .timeline:after {
      content: " ";
      position: absolute;
      bottom: -2px;
      width: 20px;
      height: 20px;
      background: #b94da9;
      left: 23px;
      margin: 0;
      border-radius: 50%;
      border: 1px solid #ddd; }
    .module-work-detail .box-work-history .timeline .fa {
      top: 10px; }
    .module-work-detail .box-work-history .timeline > li > .timeline-item {
      box-shadow: unset;
      border-radius: 0;
      margin-left: 60px;
      margin-right: 0; }
      .module-work-detail .box-work-history .timeline > li > .timeline-item .avatar {
        max-width: 50px; }
      .module-work-detail .box-work-history .timeline > li > .timeline-item .timeline-header {
        padding: 5px 0;
        font-size: 15px; }
      .module-work-detail .box-work-history .timeline > li > .timeline-item .timeline-body {
        flex-grow: 1;
        padding: 5px 15px 5px 0; }
        .module-work-detail .box-work-history .timeline > li > .timeline-item .timeline-body .timeline-content {
          font-weight: 400; }
        .module-work-detail .box-work-history .timeline > li > .timeline-item .timeline-body .time {
          color: #767676;
          font-size: 95%; }
.module-work-detail .box-comments {
  background: #fff; }
  .module-work-detail .box-comments .box-body {
    padding: 0;
    max-height: 600px;
    overflow: auto; }
    .module-work-detail .box-comments .box-body .comment-item {
      padding: 10px; }
      .module-work-detail .box-comments .box-body .comment-item + .comment-item {
        padding-bottom: 0 !important; }
      .module-work-detail .box-comments .box-body .comment-item .avatar {
        width: 40px;
        margin: 0; }
      .module-work-detail .box-comments .box-body .comment-item .comment-text {
        width: calc(100% - 40px);
        padding-left: 10px;
        margin: 0; }
        .module-work-detail .box-comments .box-body .comment-item .comment-text img {
          width: auto !important;
          height: auto !important;
          max-width: 100%; }
        .module-work-detail .box-comments .box-body .comment-item .comment-text .content-detail {
          background: #f3f3f3;
          padding: 5px;
          border-radius: 5px; }
  .module-work-detail .box-comments .box-footer {
    background-color: #dedfe1;
    position: relative; }
    .module-work-detail .box-comments .box-footer .avatar {
      width: 40px; }
    .module-work-detail .box-comments .box-footer .comment-push {
      width: calc(100%); }
    .module-work-detail .box-comments .box-footer .comment {
      overflow-y: hidden;
      resize: none;
      min-height: 42px;
      width: 100%;
      padding: 5px 10px;
      font-size: 12px;
      line-height: 1.5;
      border: 1px solid #d2d6de;
      background: #fff;
      border-radius: 5px; }
      .module-work-detail .box-comments .box-footer .comment:focus {
        border: 1px solid #3c8dbc; }
    .module-work-detail .box-comments .box-footer .btn-send-comment {
      margin-top: 20px; }
  .module-work-detail .box-comments .comment__container {
    padding: 10px;
    /* comment component */
    /* simplified comment tree connectors */ }
    .module-work-detail .box-comments .comment__container .user {
      flex: 0 0 var(--avatar-size);
      width: var(--avatar-size);
      height: var(--avatar-size);
      background-color: lightgrey;
      border-radius: 50%;
      z-index: 2; }
    .module-work-detail .box-comments .comment__container .comment__item--appended {
      position: relative; }
      .module-work-detail .box-comments .comment__container .comment__item--appended:before {
        content: "";
        position: absolute;
        inset-inline-start: 12px;
        top: calc(var(--size) + 8px);
        bottom: 0;
        width: 1px;
        background: #ccc; }
    .module-work-detail .box-comments .comment__container .comment__container .list li {
      list-style: none !important; }
    .module-work-detail .box-comments .comment__container .comment__item {
      --avatar-size: 32px;
      --size: 2rem;
      position: relative;
      display: flex;
      gap: 0.5rem; }
      .module-work-detail .box-comments .comment__container .comment__item .comment__wrap {
        width: 100%; }
      .module-work-detail .box-comments .comment__container .comment__item.highlight .comment__body {
        background-color: rgba(108, 150, 241, 0.2); }
      .module-work-detail .box-comments .comment__container .comment__item p {
        color: #9a9a9a; }
        .module-work-detail .box-comments .comment__container .comment__item p.name {
          margin-bottom: 0; }
        .module-work-detail .box-comments .comment__container .comment__item p strong {
          color: #222; }
      .module-work-detail .box-comments .comment__container .comment__item .count_reply {
        padding: 2px 0 10px 20px;
        font-weight: 500;
        color: #0072ff;
        font-size: 14px; }
        .module-work-detail .box-comments .comment__container .comment__item .count_reply:hover {
          text-decoration: underline; }
@container style(--depth: 1) or style(--depth: 2) {
  .module-work-detail .box-comments .comment__container .comment__item {
    --size: 1.5rem; } }
    .module-work-detail .box-comments .comment__container .comment__actions {
      display: flex;
      gap: 1rem;
      padding-block: 4px;
      padding-inline-start: 1rem;
      align-items: flex-start;
      margin-top: 3px; }
      .module-work-detail .box-comments .comment__container .comment__actions .react__block {
        position: relative; }
        .module-work-detail .box-comments .comment__container .comment__actions .react__block:hover .react__cont {
          display: block !important; }
      .module-work-detail .box-comments .comment__container .comment__actions .react__cont {
        display: none !important;
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
        width: 280px;
        border-radius: 20px;
        transform: translateX(-22px);
        overflow: hidden; }
        .module-work-detail .box-comments .comment__container .comment__actions .react__cont .react__wrap {
          display: flex;
          align-items: center; }
          .module-work-detail .box-comments .comment__container .comment__actions .react__cont .react__wrap .react__item {
            cursor: pointer; }
            .module-work-detail .box-comments .comment__container .comment__actions .react__cont .react__wrap .react__item .react__label {
              display: block;
              margin-bottom: 0;
              cursor: pointer; }
              .module-work-detail .box-comments .comment__container .comment__actions .react__cont .react__wrap .react__item .react__label:hover img {
                transform: scale3d(1.4, 1.4, 1.4); }
              .module-work-detail .box-comments .comment__container .comment__actions .react__cont .react__wrap .react__item .react__label img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                transition: all 0.3s ease; }
              .module-work-detail .box-comments .comment__container .comment__actions .react__cont .react__wrap .react__item .react__label.react__dislike {
                transform: rotate(180deg); }
      .module-work-detail .box-comments .comment__container .comment__actions a {
        text-decoration: none;
        color: #222;
        font-size: 12px;
        font-weight: 500;
        position: relative;
        display: block; }
      .module-work-detail .box-comments .comment__container .comment__actions .reactBtn {
        display: flex;
        align-items: center;
        gap: 3px; }
        .module-work-detail .box-comments .comment__container .comment__actions .reactBtn img {
          width: 12px;
          height: 12px; }
        .module-work-detail .box-comments .comment__container .comment__actions .reactBtn.like {
          color: #2876f9; }
        .module-work-detail .box-comments .comment__container .comment__actions .reactBtn.dislike {
          color: #6b0000; }
          .module-work-detail .box-comments .comment__container .comment__actions .reactBtn.dislike img {
            transform: rotate(180deg); }
        .module-work-detail .box-comments .comment__container .comment__actions .reactBtn.love {
          color: #f44336; }
        .module-work-detail .box-comments .comment__container .comment__actions .reactBtn.haha {
          color: #f4b400; }
        .module-work-detail .box-comments .comment__container .comment__actions .reactBtn.wow {
          color: #f4b400; }
        .module-work-detail .box-comments .comment__container .comment__actions .reactBtn.sad {
          color: #f4b400; }
        .module-work-detail .box-comments .comment__container .comment__actions .reactBtn.angry {
          color: #f46600; }
      .module-work-detail .box-comments .comment__container .comment__actions span {
        font-size: 12px;
        color: #9a9a9a; }
    .module-work-detail .box-comments .comment__container .comment__body {
      background-color: #f0f2f5;
      padding: 1rem;
      border-radius: 15px;
      width: fit-content;
      position: relative; }
      .module-work-detail .box-comments .comment__container .comment__body .comment__reacts {
        position: absolute;
        bottom: -8px;
        right: 0;
        cursor: pointer; }
        .module-work-detail .box-comments .comment__container .comment__body .comment__reacts--wrap {
          display: flex;
          align-items: center;
          gap: 6px;
          background-color: #fff;
          padding: 3px 6px;
          box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
          border-radius: 12px; }
        .module-work-detail .box-comments .comment__container .comment__body .comment__reacts--result {
          display: none; }
          .module-work-detail .box-comments .comment__container .comment__body .comment__reacts--result.active {
            display: block;
            position: absolute;
            top: 100%;
            right: 0;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 10;
            padding: 10px;
            border-radius: 5px;
            width: 120px; }
            .module-work-detail .box-comments .comment__container .comment__body .comment__reacts--result.active .member__reaction {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-left: 0;
              margin-bottom: 6px; }
              .module-work-detail .box-comments .comment__container .comment__body .comment__reacts--result.active .member__reaction:first-child {
                margin-bottom: 0; }
              .module-work-detail .box-comments .comment__container .comment__body .comment__reacts--result.active .member__reaction::after {
                display: none; }
              .module-work-detail .box-comments .comment__container .comment__body .comment__reacts--result.active .member__reaction strong,
              .module-work-detail .box-comments .comment__container .comment__body .comment__reacts--result.active .member__reaction span {
                display: block;
                color: #fff; }
              .module-work-detail .box-comments .comment__container .comment__body .comment__reacts--result.active .member__reaction img {
                width: 14px;
                height: 14px; }
        .module-work-detail .box-comments .comment__container .comment__body .comment__reacts .react__type {
          display: flex;
          align-items: center;
          gap: 3px;
          font-size: 12px;
          font-weight: 400;
          line-height: 1;
          color: #666; }
          .module-work-detail .box-comments .comment__container .comment__body .comment__reacts .react__type img {
            width: 14px;
            height: 14px; }
            .module-work-detail .box-comments .comment__container .comment__body .comment__reacts .react__type img.dislike {
              transform: rotate(180deg); }
      .module-work-detail .box-comments .comment__container .comment__body .content {
        min-height: auto;
        margin-top: 0;
        padding: 2px 6px; }
        .module-work-detail .box-comments .comment__container .comment__body .content * {
          color: #606060 !important; }
        .module-work-detail .box-comments .comment__container .comment__body .content a {
          color: #6394fe !important; }
        .module-work-detail .box-comments .comment__container .comment__body .content img {
          max-width: 48px;
          max-height: 48px;
          width: auto;
          height: auto; }
          .module-work-detail .box-comments .comment__container .comment__body .content img.emoji {
            max-width: 24px;
            max-height: 24px; }
      .module-work-detail .box-comments .comment__container .comment__body > * + * {
        margin-top: 0.5rem; }
    .module-work-detail .box-comments .comment__container .reply__form {
      background-color: #f0f2f5;
      padding: 10px;
      border-radius: 6px; }
      .module-work-detail .box-comments .comment__container .reply__form--action {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-top: 6px;
        gap: 6px; }
        .module-work-detail .box-comments .comment__container .reply__form--action i {
          margin-right: 2px; }
      .module-work-detail .box-comments .comment__container .reply__form li {
        padding: 0 !important; }
    .module-work-detail .box-comments .comment__container .comment-tree {
      --avatar-size: 32px;
      --spine-x: 20px;
      --connector-color: #d3d7db;
      --connector-width: 1px;
      --node-spacing: 12px;
      list-style: none;
      margin: 6px 0 0 0;
      padding: 0 0 0 calc(var(--spine-x) + var(--avatar-size) + 8px);
      position: relative; }
      .module-work-detail .box-comments .comment__container .comment-tree .comment-node {
        position: relative;
        margin: var(--node-spacing) 0; }
        .module-work-detail .box-comments .comment__container .comment-tree .comment-node:before {
          content: "";
          position: absolute;
          left: calc(-1 * var(--spine-x) - 8px);
          top: calc(var(--avatar-size) / 2);
          width: var(--spine-x);
          height: var(--connector-width);
          background: var(--connector-color); }
        .module-work-detail .box-comments .comment__container .comment-tree .comment-node:not(:first-child):after {
          content: "";
          position: absolute;
          left: calc(-1 * var(--spine-x) - 8px);
          top: calc(-1 * var(--node-spacing));
          height: calc(var(--avatar-size) / 2 + var(--node-spacing));
          width: var(--connector-width);
          background: var(--connector-color); }
        .module-work-detail .box-comments .comment__container .comment-tree .comment-node:not(:last-child):after {
          bottom: calc(-1 * var(--node-spacing));
          height: auto; }
        .module-work-detail .box-comments .comment__container .comment-tree .comment-node:last-child {
          margin-bottom: 0; }

.check-list {
  padding: 6px 10px;
  border-radius: 5px;
  overflow: hidden;
  font-weight: 400;
  cursor: pointer; }
  .check-list .icheckbox_flat-blue {
    margin-right: 5px; }
  .check-list:hover {
    background-color: rgba(9, 30, 66, 0.04); }

.col-list {
  border: 1px solid #f4f4f4;
  border-radius: 5px;
  padding: 10px;
  height: 100%;
  max-height: 435px;
  overflow: auto; }
  .col-list.old-list .check-list {
    color: #333;
    text-decoration: initial; }
    .col-list.old-list .check-list.checked {
      text-decoration: line-through;
      color: #b0b0b0; }
  .col-list.new-list .check-list {
    color: #b0b0b0; }
    .col-list.new-list .check-list.checked {
      color: #333; }

.checklist_item {
  width: 100%;
  margin-bottom: 4px;
  align-items: flex-start;
  padding: 3px 6px 3px;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  border-left: 4px solid rgba(0, 0, 0, 0.03); }
  .checklist_item:has(.checklist_item_detail .view):hover, .checklist_item:has(.checklist_item_detail .view).active {
    background-color: rgba(9, 30, 66, 0.03) !important; }
  .checklist_item:hover {
    background-color: rgba(9, 30, 66, 0.02) !important; }
  .checklist_item:last-child {
    margin-bottom: 0; }
  .checklist_item.highlight {
    box-shadow: rgba(49, 111, 246, 0.4) 0px 1px 1px, rgba(49, 111, 246, 0.6) 0px 1px 1px; }
  .checklist_item.cretorIsCompleted {
    border-left-color: #4bce97 !important;
    background-color: rgba(75, 206, 151, 0.05) !important; }
    .checklist_item.cretorIsCompleted > .checklist_item_detail > .checklist_item_head .checklist_item_label .title {
      text-decoration: line-through;
      text-decoration-color: rgba(0, 0, 0, 0.4);
      -moz-text-decoration-color: rgba(0, 0, 0, 0.4); }
  .checklist_item.voided {
    cursor: not-allowed;
    border-color: #ff851b;
    background-color: rgba(255, 133, 27, 0.05); }
    .checklist_item.voided > * {
      cursor: not-allowed; }
    .checklist_item.voided .checklist_item_label .title {
      text-decoration: line-through;
      text-decoration-color: rgba(0, 0, 0, 0.4);
      -moz-text-decoration-color: rgba(0, 0, 0, 0.4); }
  .checklist_item.cancelled {
    cursor: not-allowed;
    border-color: #161616;
    background-color: rgba(22, 22, 22, 0.1); }
    .checklist_item.cancelled > * {
      cursor: not-allowed; }
    .checklist_item.cancelled .checklist_item_label .title {
      text-decoration: line-through;
      text-decoration-color: rgba(0, 0, 0, 0.4);
      -moz-text-decoration-color: rgba(0, 0, 0, 0.4); }
  .checklist_item.not-work {
    cursor: not-allowed;
    border-color: #00afd0;
    background-color: rgba(0, 175, 208, 0.1); }
    .checklist_item.not-work > * {
      cursor: not-allowed; }
    .checklist_item.not-work .checklist_item_label .title {
      text-decoration: line-through;
      text-decoration-color: rgba(0, 0, 0, 0.4);
      -moz-text-decoration-color: rgba(0, 0, 0, 0.4); }
  .checklist_item.memberIsCompleted .checklist_item_label .title {
    text-decoration: line-through;
    text-decoration-color: #666;
    -moz-text-decoration-color: #666; }
  .checklist_item .checklist_item_checkbox {
    padding: 0;
    margin: 2px 5px 0 0;
    font-weight: normal; }
  .checklist_item .checklist_item_detail {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    font-weight: 400;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease; }
    .checklist_item .checklist_item_detail .checklist_item_head {
      display: flex;
      gap: 4px;
      align-items: flex-start;
      justify-content: end; }
      .checklist_item .checklist_item_detail .checklist_item_head .checklist_item_label {
        width: calc(100% - 125px); }
      .checklist_item .checklist_item_detail .checklist_item_head .checklist_item_close {
        display: none !important; }
      .checklist_item .checklist_item_detail .checklist_item_head button .fa {
        font-size: 9px; }
    .checklist_item .checklist_item_detail .checklist_item_change--btn,
    .checklist_item .checklist_item_detail .checklist_item_close,
    .checklist_item .checklist_item_detail .checklist_item_edit--btn,
    .checklist_item .checklist_item_detail .checklist_item_add--btn,
    .checklist_item .checklist_item_detail .checklist_item_convert--btn,
    .checklist_item .checklist_item_detail .checklist_item_to_subtask--btn {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #818181;
      outline: none;
      background-color: #eeeeee;
      border: 1px solid #818181; }
      .checklist_item .checklist_item_detail .checklist_item_change--btn:hover,
      .checklist_item .checklist_item_detail .checklist_item_close:hover,
      .checklist_item .checklist_item_detail .checklist_item_edit--btn:hover,
      .checklist_item .checklist_item_detail .checklist_item_add--btn:hover,
      .checklist_item .checklist_item_detail .checklist_item_convert--btn:hover,
      .checklist_item .checklist_item_detail .checklist_item_to_subtask--btn:hover {
        background-color: #fff; }
    .checklist_item .checklist_item_detail .checklist_item_add--btn i {
      position: relative;
      top: 0.8px; }
    .checklist_item .checklist_item_detail .checklist_item_menu {
      width: 22px; }
      .checklist_item .checklist_item_detail .checklist_item_menu:hover button {
        background-color: #fff; }
      .checklist_item .checklist_item_detail .checklist_item_menu button {
        padding: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        height: 20px;
        border-radius: 50%;
        outline: none !important;
        background-color: #eee; }
      .checklist_item .checklist_item_detail .checklist_item_menu span {
        display: inline-block;
        width: 2.5px;
        height: 2.5px;
        border-radius: 50%;
        background-color: #818181; }
    .checklist_item .checklist_item_detail .checklist_item-due {
      padding: 4px 5px 3px;
      border-radius: 10px;
      color: #3c3c3c;
      margin: 0 0 0 5px;
      font-size: 11px;
      line-height: 1;
      border: 1px solid #c1c1c1; }
      .checklist_item .checklist_item_detail .checklist_item-due.due-soon {
        background: #e7e7e7; }
      .checklist_item .checklist_item_detail .checklist_item-due.due-past {
        background: #c9372c;
        border: 1px solid #bb261b;
        color: #fff; }
      .checklist_item .checklist_item_detail .checklist_item-due.due-warning {
        background: #f5cd47;
        border: 1px solid #b99621; }
      .checklist_item .checklist_item_detail .checklist_item-due.due-success {
        background: #4bce97;
        border: 1px solid #00a577;
        color: #fff; }
    .checklist_item .checklist_item_detail .checklist_item_label {
      display: flex;
      justify-content: space-between; }
      .checklist_item .checklist_item_detail .checklist_item_label .checklist_item-label_controls {
        display: flex;
        align-items: flex-start;
        flex: none; }
        .checklist_item .checklist_item_detail .checklist_item_label .checklist_item-label_controls .member-working .item-avatar {
          width: 20px;
          height: 20px;
          position: relative; }
          .checklist_item .checklist_item_detail .checklist_item_label .checklist_item-label_controls .member-working .item-avatar.memberIsCompleted::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 8px;
            height: 8px;
            background-color: #4bce97;
            border-radius: 50%; }
          .checklist_item .checklist_item_detail .checklist_item_label .checklist_item-label_controls .member-working .item-avatar a {
            pointer-events: none;
            cursor: default; }
    .checklist_item .checklist_item_detail .checklist_item_subtasks--label {
      display: flex;
      align-items: center;
      margin: 6px 0;
      padding-top: 4px;
      border-top: 1px solid #e6e6e6; }
      .checklist_item .checklist_item_detail .checklist_item_subtasks--label.hide {
        display: none; }
      .checklist_item .checklist_item_detail .checklist_item_subtasks--label i {
        margin-right: 6px;
        font-size: 10px; }
      .checklist_item .checklist_item_detail .checklist_item_subtasks--label .title {
        font-weight: 500;
        margin-right: 4px; }
      .checklist_item .checklist_item_detail .checklist_item_subtasks--label p {
        margin-bottom: 0; }
    .checklist_item .checklist_item_detail .checklist_item_subtasks .checklist_item-0 {
      padding-left: 0; }
    .checklist_item .checklist_item_detail .checklist_item_subtasks .checklist_item {
      background-color: #f9f9f9;
      padding: 5px 0 2px 6px; }
    .checklist_item .checklist_item_detail .checklist_item_content {
      display: none; }
      .checklist_item .checklist_item_detail .checklist_item_content input,
      .checklist_item .checklist_item_detail .checklist_item_content textarea {
        margin-bottom: 6px; }
      .checklist_item .checklist_item_detail .checklist_item_content .checklist_item_action {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 6px 0 0; }
        .checklist_item .checklist_item_detail .checklist_item_content .checklist_item_action .checklist_item_controls {
          border-radius: 5px; }
        .checklist_item .checklist_item_detail .checklist_item_content .checklist_item_action .checklistItemStartDate {
          background-color: rgba(108, 117, 125, 0.6); }
        .checklist_item .checklist_item_detail .checklist_item_content .checklist_item_action .btn {
          margin-right: 5px;
          margin-bottom: 5px; }
          .checklist_item .checklist_item_detail .checklist_item_content .checklist_item_action .btn:last-child {
            margin-right: 0; }
    .checklist_item .checklist_item_detail .checklist_item_global {
      display: block; }
      .checklist_item .checklist_item_detail .checklist_item_global .checklist_item_description {
        display: none; }
      .checklist_item .checklist_item_detail .checklist_item_global .box-comment__wrap {
        display: none; }
    .checklist_item .checklist_item_detail .checklist_item_spacer {
      flex: 1; }
    .checklist_item .checklist_item_detail .checklist_item_title {
      margin-bottom: 4px; }
      .checklist_item .checklist_item_detail .checklist_item_title h3 {
        margin: 0;
        font-weight: 600;
        font-size: 14px; }
    .checklist_item .checklist_item_detail.active {
      padding: 10px; }
      .checklist_item .checklist_item_detail.active > .checklist_item_content {
        display: block; }
      .checklist_item .checklist_item_detail.active > .checklist_item_head {
        display: none; }
    .checklist_item .checklist_item_detail.view {
      padding: 0; }
      .checklist_item .checklist_item_detail.view .comment__container {
        padding: 0; }
        .checklist_item .checklist_item_detail.view .comment__container .comment__body {
          background-color: #fff;
          box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px, rgba(0, 0, 0, 0.24) 0px 1px 1px; }
      .checklist_item .checklist_item_detail.view > .checklist_item_global > .checklist_item_description {
        display: block; }
      .checklist_item .checklist_item_detail.view > .checklist_item_global > .box-comment__wrap {
        display: block; }
      .checklist_item .checklist_item_detail.view .checklist_item_description {
        margin-top: 6px;
        padding: 10px 6px;
        border-top: 1px solid #e6e6e6; }
        .checklist_item .checklist_item_detail.view .checklist_item_description .content-detail {
          width: auto !important;
          height: auto !important;
          max-width: 100%; }
          .checklist_item .checklist_item_detail.view .checklist_item_description .content-detail img {
            max-width: 95%; }
      .checklist_item .checklist_item_detail.view > .checklist_item_head .checklist_item_close {
        display: flex !important; }
      .checklist_item .checklist_item_detail.view > .checklist_item_head .checklist_item_menu {
        display: none; }
      .checklist_item .checklist_item_detail.view > .checklist_item_head .checklist_item_label .title {
        font-weight: 600; }
      .checklist_item .checklist_item_detail.view > .checklist_item_global {
        display: block; }
    .checklist_item .checklist_item_detail .box-comment__wrap .box-comment__label {
      display: flex;
      align-items: center;
      margin: 6px 0;
      padding: 6px 0;
      border-bottom: 1px solid #e6e6e6; }
      .checklist_item .checklist_item_detail .box-comment__wrap .box-comment__label i {
        margin-right: 6px;
        font-size: 10px; }
      .checklist_item .checklist_item_detail .box-comment__wrap .box-comment__label .title {
        font-weight: 500;
        margin-right: 4px; }
      .checklist_item .checklist_item_detail .box-comment__wrap .box-comment__label p {
        margin-bottom: 0; }
    .checklist_item .checklist_item_detail .box-comment__control {
      border-top: none;
      background-color: transparent;
      padding: 20px 0 5px 0; }
      .checklist_item .checklist_item_detail .box-comment__control .box-comment__form {
        display: none; }
        .checklist_item .checklist_item_detail .box-comment__control .box-comment__form--ctr {
          margin-top: 10px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          gap: 6px; }
      .checklist_item .checklist_item_detail .box-comment__control textarea {
        height: 80px; }
  .checklist_item.checklist_item-0 {
    padding-left: 28px;
    display: none; }
    .checklist_item.checklist_item-0.active {
      display: block; }

.popover#popoverCheckListItemMenu {
  min-width: 230px; }
  .popover#popoverCheckListItemMenu .body-inner {
    gap: 10px 0; }
    .popover#popoverCheckListItemMenu .body-inner .btn {
      background-color: #fff;
      border: 1px solid #ccc; }
      .popover#popoverCheckListItemMenu .body-inner .btn:hover {
        background-color: #eee; }
.popover#popoverCheckListItemChange .popover-footer, .popover#popoverCheckListItemChangeSubTask .popover-footer {
  padding-top: 12px; }

.select2-dropdown {
  z-index: 9999; }

.see-more__wrap {
  width: 35px;
  height: 35px;
  padding: 2px; }

.see-more__member {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500 !important;
  border: 1px solid #000;
  font-size: 10px;
  color: #000; }

.list_work.list_package_item .list_item .item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  line-height: 22px;
  transition: all 0.3s ease; }
  .list_work.list_package_item .list_item .item .item-stt {
    font-weight: 400;
    padding-right: 5px; }
  .list_work.list_package_item .list_item .item .item-detail {
    flex: 1; }
    .list_work.list_package_item .list_item .item .item-detail .item-name {
      font-weight: 400; }
    .list_work.list_package_item .list_item .item .item-detail .item-info {
      font-size: 13px; }
      .list_work.list_package_item .list_item .item .item-detail .item-info .service_package_name {
        margin-left: 10px; }
      .list_work.list_package_item .list_item .item .item-detail .item-info .item-timeline {
        color: #8e8e8e; }
    .list_work.list_package_item .list_item .item .item-detail .item-team span {
      margin-right: 5px; }
    .list_work.list_package_item .list_item .item .item-detail .list_work_member {
      position: relative; }
      .list_work.list_package_item .list_item .item .item-detail .list_work_member .member {
        width: 35px;
        height: 35px;
        padding: 2px; }
  .list_work.list_package_item .list_item .item:hover {
    background-color: #f7f7f7;
    padding: 8px 10px;
    transition: all 0.3s ease; }

.module-work-list {
  padding-top: 0; }
  .module-work-list [class^="col-"] {
    padding-left: 5px;
    padding-right: 5px; }
  .module-work-list .box .box-title {
    font-size: 15px;
    color: #172b4d;
    font-weight: 600; }

.modal-backdrop {
  display: none !important; }

.work_comment {
  width: 100%;
  height: 200px;
  font-size: 14px;
  line-height: 18px;
  border: 1px solid #dddddd;
  padding: 10px; }
  .work_comment p {
    margin: 0 0 5px; }

tr.tr-work-item a {
  font-weight: 400; }

.note-color {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 10px; }
  .note-color [class^="priority-"] {
    display: flex;
    align-items: center;
    line-height: 1;
    margin-right: 8px;
    color: #525252;
    font-size: 11px; }
  .note-color span {
    width: 10px;
    height: 10px;
    margin-right: 2px;
    border-radius: 2px;
    overflow: hidden; }
  .note-color .priority-low span {
    background-color: #9f9f9f; }
  .note-color .priority-high span {
    background-color: #ff7c00; }
  .note-color .priority-important span {
    background-color: #ff0000; }
  .note-color .priority-urgent span {
    background-color: #a400ff; }

.package-item-manager {
  width: 100%;
  overflow: auto; }
  .package-item-manager .package-item-manager-wrap {
    display: flex;
    flex-direction: row;
    height: 100%;
    min-width: 1100px;
    padding-bottom: 20px; }
  .package-item-manager.show-list {
    overflow: initial; }
    .package-item-manager.show-list .package-item-manager-wrap {
      flex-direction: column;
      min-width: 100%;
      justify-content: flex-start; }
      .package-item-manager.show-list .package-item-manager-wrap .box-task-wrap {
        background-color: #fff; }
      .package-item-manager.show-list .package-item-manager-wrap .box-body {
        max-height: 360px; }
        .package-item-manager.show-list .package-item-manager-wrap .box-body .todo-list .item-task {
          box-shadow: unset;
          border-radius: 0;
          margin: 0;
          border: 0;
          border-top: 1px solid rgba(0, 0, 0, 0.2); }
          .package-item-manager.show-list .package-item-manager-wrap .box-body .todo-list .item-task .item-task-wrap {
            padding: 5px 0; }

.box-task {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-left: 5px;
  padding-right: 5px;
  min-width: 300px; }
  .box-task .box-task-wrap {
    border: 1px solid #cfcfcf;
    background: #f2f2f2;
    overflow: hidden; }
    .box-task .box-task-wrap .box-header {
      padding: 12px 20px;
      border-bottom: 2px solid #8edbff; }
      .box-task .box-task-wrap .box-header .box-title {
        font-size: 15px;
        font-weight: 500;
        padding: 0; }
        .box-task .box-task-wrap .box-header .box-title a {
          color: #161616; }
    .box-task .box-task-wrap .box-body {
      position: relative;
      padding: 16px 5px; }
    .box-task .box-task-wrap.box-work-manager .box-header {
      background: rgba(142, 219, 255, 0.2);
      border-color: #8edbff; }
    .box-task .box-task-wrap.box-work-waiting .box-header {
      background: rgba(231, 161, 60, 0.2);
      border-color: #e7a13c; }
    .box-task .box-task-wrap.box-work-working .box-header {
      background: rgba(253, 136, 164, 0.2);
      border-color: #fd88a4; }
    .box-task .box-task-wrap.box-work-completed .box-header {
      background: rgba(75, 163, 97, 0.2);
      border-color: #4ba361; }
    .box-task .box-task-wrap.box-work-finished .box-header {
      background: rgba(100, 100, 100, 0.4);
      border-color: #646464; }

.todo-list .item-task {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px;
  margin: 0 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
  background-color: #fff;
  transition-duration: 0.3s; }
  .todo-list .item-task a:hover {
    color: #000; }
  .todo-list .item-task .item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px !important;
    height: 16px !important;
    margin-right: 5px;
    flex-shrink: 0; }
  .todo-list .item-task .item-task-wrap {
    display: block;
    position: relative; }
    .todo-list .item-task .item-task-wrap .item-name {
      margin: 0;
      font-weight: 400;
      color: #333;
      line-height: 1.3;
      font-size: 14px;
      padding: 2px 0;
      display: flex;
      align-items: flex-start; }
      .todo-list .item-task .item-task-wrap .item-name span {
        padding: 2px;
        border-radius: 50%;
        overflow: hidden; }
        .todo-list .item-task .item-task-wrap .item-name span .fa {
          justify-content: center;
          font-size: 8px;
          color: #fff; }
        .todo-list .item-task .item-task-wrap .item-name span.assign {
          background-color: #4ba361; }
        .todo-list .item-task .item-task-wrap .item-name span.receive {
          background-color: #e67f22; }
  .todo-list .item-task .item-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 12px;
    color: #636363; }
    .todo-list .item-task .item-info .item-detail {
      display: flex;
      flex-direction: column;
      width: 100%; }
      .todo-list .item-task .item-info .item-detail .item-service {
        display: flex; }
        .todo-list .item-task .item-info .item-detail .item-service .service_package_name,
        .todo-list .item-task .item-info .item-detail .item-service .service_name {
          display: flex;
          align-items: center;
          line-height: 1;
          margin-right: 5px;
          padding-bottom: 2px; }
          .todo-list .item-task .item-info .item-detail .item-service .service_package_name .item-icon,
          .todo-list .item-task .item-info .item-detail .item-service .service_name .item-icon {
            font-size: 13px; }
      .todo-list .item-task .item-info .item-detail .item-timeline {
        display: flex;
        align-items: center; }
        .todo-list .item-task .item-info .item-detail .item-timeline .time-range {
          border-radius: 3px;
          font-weight: 400; }
        .todo-list .item-task .item-info .item-detail .item-timeline.is-due-complete {
          background-color: #1f845a;
          color: #fff; }
        .todo-list .item-task .item-info .item-detail .item-timeline.is-due-soon {
          background-color: #e2b203;
          color: #172b4d; }
        .todo-list .item-task .item-info .item-detail .item-timeline.is-due-past {
          background-color: #ff4e37;
          color: #fff; }
      .todo-list .item-task .item-info .item-detail .item-team {
        display: flex;
        align-items: center;
        flex-wrap: wrap; }
        .todo-list .item-task .item-info .item-detail .item-team span {
          margin-right: 5px; }
      .todo-list .item-task .item-info .item-detail .item-more {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; }
        .todo-list .item-task .item-info .item-detail .item-more .item-desc {
          display: flex;
          align-items: center; }
        .todo-list .item-task .item-info .item-detail .item-more .item-check,
        .todo-list .item-task .item-info .item-detail .item-more .item-comment {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-right: 10px;
          font-size: 13px; }
          .todo-list .item-task .item-info .item-detail .item-more .item-check .item-icon,
          .todo-list .item-task .item-info .item-detail .item-more .item-comment .item-icon {
            margin-right: 4px; }
          .todo-list .item-task .item-info .item-detail .item-more .item-check .fa,
          .todo-list .item-task .item-info .item-detail .item-more .item-comment .fa {
            font-size: 14px; }
      .todo-list .item-task .item-info .item-detail .list-children {
        border-top: 1px solid #ebebeb;
        margin-top: 5px;
        padding-top: 5px; }
        .todo-list .item-task .item-info .item-detail .list-children .item-children {
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
          padding-bottom: 4px; }
          .todo-list .item-task .item-info .item-detail .list-children .item-children .item-title {
            font-weight: 400;
            color: #277bb7;
            width: calc(100% - 22px);
            line-height: 1.4; }
            .todo-list .item-task .item-info .item-detail .list-children .item-children .item-title:hover {
              color: #585858; }
    .todo-list .item-task .item-info .item-tag {
      min-width: 55px; }
      .todo-list .item-task .item-info .item-tag .list_work_member {
        position: relative; }
        .todo-list .item-task .item-info .item-tag .list_work_member .item-avatar {
          width: 25px;
          height: 25px; }
  .todo-list .item-task.priority-low {
    border-color: #9f9f9f; }
  .todo-list .item-task.priority-high {
    border-color: #ff7c00; }
  .todo-list .item-task.priority-important {
    border-color: #ff0000; }
  .todo-list .item-task.priority-urgent {
    border-color: #a400ff; }
  .todo-list .item-task:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background-color: #f8f8f8;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); }

.box-work-relative .todo-list {
  display: flex;
  flex-wrap: wrap; }
  .box-work-relative .todo-list .item-task {
    width: 300px;
    margin: 0 6px 12px;
    background: #fdfdfd; }

.checkpoint-section-wrap {
  max-width: 800px;
  margin: 0 auto; }
  .checkpoint-section-wrap .checkpoints-header {
    font-size: 22px;
    font-weight: 600;
    border-bottom: 1px solid #dfdfdf;
    margin: 0;
    padding: 10px 0;
    display: flex; }
    .checkpoint-section-wrap .checkpoints-header .fa {
      width: 25px;
      display: flex;
      justify-content: center;
      margin-right: 6px; }
  .checkpoint-section-wrap .checkpoints-title {
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    padding: 0 0 15px;
    margin: 0; }
    .checkpoint-section-wrap .checkpoints-title span {
      width: 26px;
      height: 26px;
      display: inline-block;
      border-radius: 50%;
      background-color: #0049ff;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 16px;
      margin-right: 8px; }
  .checkpoint-section-wrap .checkpoints-item h3 {
    font-weight: 500;
    font-size: 15px;
    padding: 10px;
    background-color: #eee;
    margin: 0; }
  .checkpoint-section-wrap .checkpoints .category-container__body {
    padding-bottom: 15px; }
  .checkpoint-section-wrap .checkpoints .wrap {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .checkpoint-section-wrap .checkpoints .wrap .checkpoints__score {
      display: flex;
      align-items: flex-end;
      gap: 10px; }
      .checkpoint-section-wrap .checkpoints .wrap .checkpoints__score .score-col {
        width: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; }
        .checkpoint-section-wrap .checkpoints .wrap .checkpoints__score .score-col:last-child input {
          color: #ff5d29; }
        .checkpoint-section-wrap .checkpoints .wrap .checkpoints__score .score-col label {
          font-weight: 500;
          text-align: center;
          margin-bottom: 5px; }
        .checkpoint-section-wrap .checkpoints .wrap .checkpoints__score .score-col input {
          width: 35px;
          height: 35px;
          text-align: center;
          font-weight: 700;
          font-size: 14px;
          color: #0049ff;
          box-shadow: 0 0 5px 0 #e9e9e9;
          border: 1px solid #ededed;
          border-radius: 5px;
          outline: 0; }
  .checkpoint-section-wrap .checkpoints__input-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px; }
    .checkpoint-section-wrap .checkpoints__input-list .item label {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      margin: 0; }
      .checkpoint-section-wrap .checkpoints__input-list .item label input[type="radio"] {
        display: none; }
      .checkpoint-section-wrap .checkpoints__input-list .item label img {
        width: 35px;
        height: 35px;
        object-fit: contain;
        margin-bottom: 12px; }
      .checkpoint-section-wrap .checkpoints__input-list .item label span {
        border: 1px solid #c7c7c7;
        display: block;
        background-color: transparent;
        width: 15px;
        height: 15px;
        border-radius: 50%; }
      .checkpoint-section-wrap .checkpoints__input-list .item label input[type="radio"].active ~ span {
        border-color: #ff5d29;
        background-color: #ffdfcd; }
      .checkpoint-section-wrap .checkpoints__input-list .item label input[type="radio"]:checked ~ span {
        border-color: #0049ff;
        background-color: #a9eaff; }
    .checkpoint-section-wrap .checkpoints__input-list .item.manager input[type="radio"].active ~ span {
      border-color: #0049ff;
      background-color: #a9eaff; }
    .checkpoint-section-wrap .checkpoints__input-list .item.manager input[type="radio"]:checked ~ span {
      border-color: #ff5d29;
      background-color: #ffdfcd; }
  .checkpoint-section-wrap .checkpoints .checkpoint_total {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #d5d5d5;
    margin-bottom: 20px;
    background: #f5f5f5; }
    .checkpoint-section-wrap .checkpoints .checkpoint_total .wrap {
      padding: 10px 26px; }
      .checkpoint-section-wrap .checkpoints .checkpoint_total .wrap .checkpoints__text {
        font-weight: 500;
        font-size: 18px;
        color: #f15813; }

.form-container {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #d5d5d5;
  margin-bottom: 20px; }
  .form-container__header {
    background-color: #ededed;
    padding: 0 20px; }
    .form-container__header--title {
      color: #000;
      font-size: 18px;
      font-weight: 600;
      text-transform: uppercase;
      margin: 0;
      padding: 15px 0; }
  .form-container__body {
    padding: 6px; }
    .form-container__body p {
      font-weight: 500;
      font-size: 16px;
      margin-bottom: 6px; }
    .form-container__body .comfirm-wrap {
      padding-bottom: 10px; }
      .form-container__body .comfirm-wrap .comfirm-options {
        display: flex;
        gap: 0 20px; }
        .form-container__body .comfirm-wrap .comfirm-options .comfirm-radio {
          display: flex;
          align-items: center;
          cursor: pointer; }
          .form-container__body .comfirm-wrap .comfirm-options .comfirm-radio p {
            margin-bottom: 0;
            margin-left: 16px; }
          .form-container__body .comfirm-wrap .comfirm-options .comfirm-radio input[type="radio"] {
            display: none; }
          .form-container__body .comfirm-wrap .comfirm-options .comfirm-radio span {
            border: 2px solid #777;
            display: block;
            background-color: transparent;
            width: 30px;
            height: 30px;
            border-radius: 50%; }
          .form-container__body .comfirm-wrap .comfirm-options .comfirm-radio input[type="radio"]:checked ~ span {
            border-color: #0049ff;
            background-color: #a9eaff; }
    .form-container__body .amount-salary {
      padding-bottom: 10px; }
      .form-container__body .amount-salary .input {
        padding: 10px 20px;
        border: 1px solid #d5d5d5;
        border-radius: 5px;
        outline: 0; }
    .form-container__body .form-content-inputs textarea {
      padding: 16px;
      border: 1px solid #d5d5d5;
      border-radius: 5px;
      outline: 0;
      width: 100%;
      margin-top: 6px; }

.paginator {
  display: flex;
  justify-content: center; }

#box-checklist .box-checklist {
  margin-bottom: 10px; }

.checklist_item .member-working {
  display: flex;
  align-items: center;
  gap: 12px; }
  .checklist_item .member-working__list {
    display: flex;
    align-items: center;
    gap: 3px; }
  .checklist_item .member-working .item-avatar {
    width: 20px;
    height: 20px; }
    .checklist_item .member-working .item-avatar a {
      pointer-events: none;
      cursor: default; }

.checklist_item_detail .dueDate {
  display: none;
  align-items: center;
  padding: 6px 0;
  gap: 0 10px; }
  .checklist_item_detail .dueDate.active {
    display: flex; }
  .checklist_item_detail .dueDate-cont {
    display: flex;
    align-items: center;
    gap: 0 4px;
    border: 1px solid #a3a3a3;
    padding: 0 6px;
    border-radius: 3px; }
    .checklist_item_detail .dueDate-cont span {
      font-weight: 600; }
.checklist_item_detail .check-list__label {
  font-weight: 600; }
.checklist_item_detail .comment__count {
  display: flex;
  align-items: center;
  font-size: 9px;
  width: 22px;
  height: 22px;
  background-image: url("../images/comment_bg.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #818181;
  font-weight: 500;
  position: relative;
  top: -1px; }
  .checklist_item_detail .comment__count span {
    position: relative;
    top: 0.8px; }

.box-checklist .box-header {
  flex-wrap: wrap;
  padding: 5px 10px; }
  .box-checklist .box-header .box-title {
    width: calc(100% - 320px);
    font-size: 15px; }
    .box-checklist .box-header .box-title a i {
      width: 20px; }
.box-checklist .box-header__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 320px; }
.box-checklist .checklist__member--working {
  display: flex;
  align-items: center;
  gap: 10px; }
  .box-checklist .checklist__member--working .item-member {
    display: flex;
    align-items: center;
    gap: 0 10px; }
    .box-checklist .checklist__member--working .item-member .avt {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border-width: 1px;
      border-style: solid;
      position: relative; }
      .box-checklist .checklist__member--working .item-member .avt:hover .removeMember {
        visibility: visible; }
      .box-checklist .checklist__member--working .item-member .avt img {
        width: 100%;
        display: block;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 50%; }
.box-checklist .checklistItemMemberBtn {
  display: flex;
  align-items: center;
  gap: 10px; }
.box-checklist .box-header__progress {
  width: 100%;
  padding: 3px 0;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .box-checklist .box-header__progress .checklist-progress__per {
    width: 30px;
    font-size: 11px;
    font-weight: 400; }
.box-checklist .checklist-progress__wrap {
  background-color: #eee;
  border-radius: 5px;
  height: 6px;
  width: calc(100% - 30px); }
.box-checklist .checklist-progress__bar {
  height: 100%;
  border-radius: 5px;
  background-color: #ccc;
  background: #3498db;
  animation: progressAnimationStrike 3s;
  position: relative; }
.box-checklist .progress__percent {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-align: right;
  line-height: 20px;
  padding-right: 8px; }
@keyframes progressAnimationStrike {
  from {
    width: 0; }
  to {
    width: 100%; } }
.box-checklist .checklist-btns {
  display: flex;
  align-items: center; }
  .box-checklist .checklist-btns .btn {
    padding: 5px; }
    .box-checklist .checklist-btns .btn:hover {
      background: #e7e7e7; }

.task_detail_title {
  margin: 10px 0 5px; }
  .task_detail_title .checklist_item_status {
    margin: 2px 6px 0 0;
    font-size: 22px; }
  .task_detail_title.completed {
    color: green; }
  .task_detail_title.voided {
    color: #ff851b; }
  .task_detail_title.cancelled {
    color: #6e6e6e; }
  .task_detail_title.not_work {
    color: #00afd0; }

.checkbox-pt {
  display: flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  padding: 0; }
  .checkbox-pt input[type="checkbox"] {
    display: none; }
    .checkbox-pt input[type="checkbox"]:checked ~ span {
      background-color: #3498db;
      border: 1px solid #3498db; }
      .checkbox-pt input[type="checkbox"]:checked ~ span::after {
        display: flex; }
  .checkbox-pt span {
    height: 16px;
    width: 16px;
    position: relative;
    border-radius: 2px;
    background-color: #d7dcde;
    border: 1px solid #b1b1b1; }
    .checkbox-pt span::after {
      content: "\f00c";
      font-size: 9px;
      font-family: FontAwesome;
      color: #fff;
      display: none;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }
    .checkbox-pt span:hover {
      border-color: #3498db; }
      .checkbox-pt span:hover::after {
        display: flex; }
  .checkbox-pt p {
    font-weight: 400; }
  .checkbox-pt.task_detail {
    margin: 3px 10px 0 0; }
    .checkbox-pt.task_detail span {
      border-radius: 50%; }

#reload__site {
  position: absolute;
  top: 0;
  height: 100%;
  width: 40px;
  display: inline-block;
  margin-left: 42px;
  display: flex;
  justify-content: center;
  align-items: center; }
  #reload__site:hover {
    background: #367fa9; }
  #reload__site i {
    color: #fff;
    font-size: 14px; }

.startCalendar,
.dueCalendar {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 20px; }
  .startCalendar .ui-datepicker-inline,
  .dueCalendar .ui-datepicker-inline {
    position: relative;
    width: 100%; }
  .startCalendar .ui-datepicker-header,
  .dueCalendar .ui-datepicker-header {
    height: 100%;
    line-height: 50px;
    background: rgba(9, 30, 66, 0.04);
    color: #000; }
  .startCalendar .ui-datepicker .ui-datepicker-prev span,
  .dueCalendar .ui-datepicker .ui-datepicker-prev span {
    background-image: url("../images/chevron-left.png");
    background-size: contain;
    display: block;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center; }
  .startCalendar .ui-datepicker .ui-datepicker-next span,
  .dueCalendar .ui-datepicker .ui-datepicker-next span {
    background-image: url("../images/chevron-right.png");
    background-size: contain;
    display: block;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center; }
  .startCalendar .ui-datepicker-prev,
  .startCalendar .ui-datepicker-next,
  .dueCalendar .ui-datepicker-prev,
  .dueCalendar .ui-datepicker-next {
    width: 30px;
    height: 30px;
    text-indent: 9999px;
    cursor: pointer;
    overflow: hidden;
    margin-top: 12px; }
  .startCalendar .ui-datepicker .ui-datepicker-prev,
  .startCalendar .ui-datepicker .ui-datepicker-next,
  .dueCalendar .ui-datepicker .ui-datepicker-prev,
  .dueCalendar .ui-datepicker .ui-datepicker-next {
    margin: 0; }
  .startCalendar .ui-datepicker-title,
  .dueCalendar .ui-datepicker-title {
    text-align: center; }
  .startCalendar .ui-datepicker-calendar,
  .dueCalendar .ui-datepicker-calendar {
    width: 100%;
    text-align: center; }
    .startCalendar .ui-datepicker-calendar thead tr th,
    .dueCalendar .ui-datepicker-calendar thead tr th {
      padding: 4px; }
      .startCalendar .ui-datepicker-calendar thead tr th span,
      .dueCalendar .ui-datepicker-calendar thead tr th span {
        display: block;
        width: 100%;
        color: #000;
        margin-bottom: 5px;
        font-size: 13px; }
    .startCalendar .ui-datepicker-calendar .ui-state-default,
    .dueCalendar .ui-datepicker-calendar .ui-state-default {
      display: block;
      text-decoration: none;
      color: #666;
      line-height: 32px;
      font-size: 12px;
      text-align: center; }
      .startCalendar .ui-datepicker-calendar .ui-state-default:hover,
      .dueCalendar .ui-datepicker-calendar .ui-state-default:hover {
        background: rgba(0, 0, 0, 0.02); }
    .startCalendar .ui-datepicker-calendar .ui-state-highlight,
    .dueCalendar .ui-datepicker-calendar .ui-state-highlight {
      color: #ccc; }
    .startCalendar .ui-datepicker-calendar .ui-state-active,
    .dueCalendar .ui-datepicker-calendar .ui-state-active {
      color: #000;
      background-color: rgba(131, 146, 167, 0.12);
      font-weight: 600; }
    .startCalendar .ui-datepicker-calendar .ui-datepicker-unselectable .ui-state-default,
    .dueCalendar .ui-datepicker-calendar .ui-datepicker-unselectable .ui-state-default {
      color: #777;
      border: 2px solid transparent; }
  .startCalendar.open,
  .dueCalendar.open {
    max-height: 400px; }
    .startCalendar.open .input button,
    .dueCalendar.open .input button {
      background: #ccc; }

.box-work-report-inner {
  display: flex;
  flex-wrap: wrap; }
  .box-work-report-inner .box-work-report-item {
    width: 100%; }
  .box-work-report-inner .box-work-report-total {
    width: 100%;
    padding: 20px 0 0; }
    .box-work-report-inner .box-work-report-total .work_report-item .item {
      flex: auto !important; }

.work_report .work_report-wrap .work_report-name {
  font-weight: 400; }
.work_report .work_report-wrap .work_report-item {
  background: #fff;
  padding: 5px 10px;
  border-radius: 5px; }
  .work_report .work_report-wrap .work_report-item .item {
    flex: 1;
    min-width: 160px;
    padding: 5px 10px; }
    .work_report .work_report-wrap .work_report-item .item .item-wrap {
      height: 100%;
      display: flex;
      background: #fff;
      cursor: pointer; }
      .work_report .work_report-wrap .work_report-item .item .item-wrap .item-icon {
        width: 6px;
        font-size: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px; }
      .work_report .work_report-wrap .work_report-item .item .item-wrap .item-content {
        width: calc(100% - 6px);
        padding: 0 6px;
        display: flex;
        flex-direction: column;
        text-align: left;
        line-height: 1.5; }
        .work_report .work_report-wrap .work_report-item .item .item-wrap .item-content .item-title {
          font-size: 10px;
          color: #888;
          text-transform: uppercase; }
        .work_report .work_report-wrap .work_report-item .item .item-wrap .item-content .item-text {
          font-size: 12px;
          font-weight: 500; }
        .work_report .work_report-wrap .work_report-item .item .item-wrap .item-content .item-number {
          font-size: 16px; }
      .work_report .work_report-wrap .work_report-item .item .item-wrap:hover .item-content span {
        color: #0050b1 !important; }

.page-home .work_report .work_report-wrap .work_report-item .item {
  min-width: calc(100% / 3); }

.award_of_year {
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden; }
  .award_of_year img {
    width: 100%; }

.modal-award_of_year .modal-content {
  background: transparent;
  border-radius: 25px; }
.modal-award_of_year .modal-body {
  padding: 0;
  font-family: "Courier", "Helvetica", "monospace";
  font-weight: 700; }
  .modal-award_of_year .modal-body .image {
    position: relative; }
    .modal-award_of_year .modal-body .image img {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      border-radius: 25px; }
  .modal-award_of_year .modal-body .member {
    position: relative;
    z-index: 1;
    padding-top: 8%; }
    .modal-award_of_year .modal-body .member .item-avatar {
      position: relative;
      display: flex;
      justify-content: center;
      padding: 17px 0 0 0; }
      .modal-award_of_year .modal-body .member .item-avatar .avatar {
        max-width: 110px; }
      .modal-award_of_year .modal-body .member .item-avatar img {
        position: absolute;
        top: 0;
        margin: auto; }
    .modal-award_of_year .modal-body .member .item-name {
      color: #fff;
      font-size: 25px;
      text-transform: uppercase;
      text-align: center;
      padding: 20px 10px; }
  .modal-award_of_year .modal-body .inner {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    justify-content: center; }
    .modal-award_of_year .modal-body .inner .item {
      width: 40%;
      padding: 30px 20px 10px;
      text-align: center; }
      .modal-award_of_year .modal-body .inner .item .title {
        color: #fff;
        font-size: 22px;
        text-transform: uppercase;
        line-height: 1.2; }
      .modal-award_of_year .modal-body .inner .item .count {
        color: yellow;
        font-size: 30px; }

.box-bxh {
  min-width: 700px; }
  .box-bxh .item {
    border-bottom: 1px solid #fff;
    cursor: pointer; }
  .box-bxh .info-header .item-name,
  .box-bxh .info-header .item-cell {
    font-weight: 600; }
  .box-bxh .item-name {
    width: 300px; }
    .box-bxh .item-name .item-stt {
      width: 55px;
      padding: 0 8px;
      text-align: center;
      margin-right: 10px; }
      .box-bxh .item-name .item-stt img {
        width: 100%; }
  .box-bxh .item-info {
    width: calc(100% - 300px); }
    .box-bxh .item-info .item-cell {
      width: 120px; }
  .box-bxh.list_work.list_package_item .list_item .item:hover {
    padding: 8px 0px;
    transition: all 0.3s ease;
    border-bottom: 1px solid #d8d8d8; }

.fc-content-skeleton {
  height: 100%; }
  .fc-content-skeleton table {
    min-height: 4em;
    height: 100%; }
  .fc-content-skeleton thead {
    height: 100%; }

table .fc-day:hover,
table .fc-day-number:hover {
  background: #e5e5e5 !important; }

.box-personal-info .single_quick_activity {
  background-color: #fff;
  border-radius: 10px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  padding: 20px;
  position: relative;
  margin-bottom: 20px; }
  .box-personal-info .single_quick_activity h4 {
    font-size: 17px;
    margin-bottom: 0;
    font-weight: 700;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    color: #fff;
    margin-bottom: 12px; }
  .box-personal-info .single_quick_activity h3 {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 0;
    font-weight: 900;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    color: #fff;
    margin-bottom: 7px; }
  .box-personal-info .single_quick_activity p {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    font-size: 13px;
    font-weight: 400;
    color: #fff; }

.table-sticky thead {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* hiệu ứng shadow */ }
  .table-sticky thead th {
    background: #ecfbff;
    /* tránh chữ bị đè khi scroll */ }
.table-sticky input {
  width: 100%; }
  .table-sticky input.format_number, .table-sticky input[type="number"] {
    text-align: right; }

.table-salary thead tr th:not(.sticky) {
  position: relative; }
.table-salary thead tr th sup {
  position: absolute;
  top: 8px;
  right: 2px;
  color: #8b8b8b;
  font-weight: 400; }

/* ***** dropzone ****** */
.panel-body {
  padding: 0; }

.dropzone,
.dropzone * {
  box-sizing: border-box; }

.dropzone {
  min-height: 150px;
  border: 1px solid #d2d6de;
  background: white; }

.dropzone.dz-clickable {
  cursor: pointer; }

.dropzone.dz-clickable * {
  cursor: default; }

.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
  cursor: pointer; }

.dropzone.dz-started .dz-message {
  display: none; }

.dropzone.dz-drag-hover {
  border-style: solid; }

.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5; }

.dropzone .dz-message {
  text-align: center;
  margin: 2em 0; }

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px;
  min-height: 100px; }

.dropzone .dz-preview:hover {
  z-index: 1000; }

.dropzone .dz-preview:hover .dz-details {
  opacity: 1; }

.dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 20px;
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd); }

.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1; }

.dropzone .dz-preview.dz-image-preview {
  background: white; }

.dropzone .dz-preview.dz-image-preview .dz-details {
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear; }

.dropzone .dz-preview .dz-remove {
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none; }

.dropzone .dz-preview .dz-remove:hover {
  text-decoration: underline; }

.dropzone .dz-preview:hover .dz-details {
  opacity: 1; }

.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%; }

.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px; }

.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap; }

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8); }

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis; }

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent; }

.dropzone .dz-preview .radi {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 10px; }

.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 3px; }

.dropzone .dz-preview:hover .dz-image img {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  -webkit-filter: blur(8px);
  filter: blur(8px); }

.dropzone .dz-preview .dz-image {
  overflow: hidden;
  width: 150px;
  height: 150px;
  position: relative;
  display: block;
  z-index: 10; }

.dropzone .dz-preview .dz-image img {
  display: block;
  width: 100%;
  height: 100%; }

.dropzone .dz-preview.dz-success .dz-success-mark {
  -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }

.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px; }

.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px; }

.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear; }

.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in; }

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  -webkit-animation: pulse 6s ease infinite;
  -moz-animation: pulse 6s ease infinite;
  -ms-animation: pulse 6s ease infinite;
  -o-animation: pulse 6s ease infinite;
  animation: pulse 6s ease infinite; }

.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 80px;
  margin-left: -40px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-transform: scale(1);
  border-radius: 8px;
  overflow: hidden; }

.dropzone .dz-preview .dz-progress .dz-upload {
  background: #333;
  background: linear-gradient(to bottom, #666, #444);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out; }

.dropzone .dz-preview.dz-error .dz-error-message {
  display: block; }

.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto; }

.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #be2626;
  background: linear-gradient(to bottom, #be2626, #a92222);
  padding: 0.5em 1.2em;
  color: white; }

.dropzone .dz-preview .dz-error-message:after {
  content: "";
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #be2626; }

/* ***** /dropzone ****** */
/* ***** /popover ****** */
.popover {
  min-width: 300px; }
  .popover.active {
    display: block !important; }
  .popover-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center; }
  .popover-title {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 16px;
    padding-right: 30px; }
  .popover .inputs {
    gap: 0 8px; }
    .popover .inputs .input-group.date {
      min-width: 60%; }

.staff-image img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #999;
  object-fit: cover;
  object-position: center; }

/* ***** /popover ****** */
@media (max-width: 1600px) {
  .box-total-kpi .box-account-kpi .widget-box {
    width: calc(100% / 3); } }
@media (min-width: 1600px) {
  .box-total-kpi .box-account-kpi .widget-box {
    width: initial;
    flex: 1; } }
@media (max-width: 1200px) {
  .box-work-report-inner {
    flex-wrap: wrap; }
    .box-work-report-inner .box-work-report-total {
      width: 100%;
      padding: 20px 0 0; }
      .box-work-report-inner .box-work-report-total .work_report-item .item {
        width: initial !important;
        flex: initial !important; }

  .box-work-report-item {
    width: 100%; }
    .box-work-report-item .work_report .work_report-wrap .work_report-item .item {
      flex: unset; } }
@media (max-width: 1100px) {
  .box-checklist .box-header .box-title {
    width: 100%; }
  .box-checklist .box-header .box-header__action {
    width: 100%;
    justify-content: flex-end; } }
@media (max-width: 1000px) {
  .widget-box {
    width: calc(100% / 2); }

  .box-total-kpi .box-account-kpi .widget-box {
    width: calc(100% / 2); } }
@media (max-width: 560px) {
  .widget-box {
    width: calc(100%);
    padding: 0 0 10px; }

  .box-total-kpi .box-account-kpi .widget-box {
    width: calc(100%); } }
@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding-top: 5px;
    padding-bottom: 5px; } }
@media (max-width: 768px) {
  .box-leave table .col_action.sticky {
    position: relative; }

  .checklist_item .checklist_item_detail .checklist_item_head {
    flex-wrap: wrap; }
    .checklist_item .checklist_item_detail .checklist_item_head .checklist_item_label {
      width: 100%; }
  .checklist_item .checklist_item_detail .checklist_item_action {
    flex-direction: column-reverse !important; }
    .checklist_item .checklist_item_detail .checklist_item_action .btn {
      width: 100%;
      text-align: center;
      justify-content: center;
      margin: 0 0 6px !important; } }
@media (max-width: 500px) {
  .modal-checkpoint .modal-body {
    padding: 20px 6px; }

  .checkpoint-section-wrap .checkpoints .wrap {
    padding: 10px 2px; }
    .checkpoint-section-wrap .checkpoints .wrap .checkpoints__score {
      gap: 0; }
  .checkpoint-section-wrap .checkpoints__input-list {
    gap: 12px; }
    .checkpoint-section-wrap .checkpoints__input-list .item label img {
      width: 25px;
      height: 25px; }
  .checkpoint-section-wrap .checkpoints__score .score-col label {
    font-size: 10px; }
  .checkpoint-section-wrap .checkpoints__score .score-col input {
    width: 30px;
    height: 30px;
    font-size: 6px; } }
@media (max-width: 620px) {
  .modal-award_of_year .modal-body .member {
    padding-top: 4%; }
    .modal-award_of_year .modal-body .member .item-name {
      padding: 20px 10px 0; }
  .modal-award_of_year .modal-body .inner .item {
    width: 50%;
    padding: 10px 20px 10px; }
    .modal-award_of_year .modal-body .inner .item .title {
      font-size: 20px;
      font-weight: 500; }
    .modal-award_of_year .modal-body .inner .item .count {
      font-size: 22px; } }
@media (max-width: 560px) {
  .modal-award_of_year .modal-body .inner {
    padding: 0 10%; }
    .modal-award_of_year .modal-body .inner .item .title {
      font-size: 18px; } }
@media (max-width: 420px) {
  .modal-award_of_year .modal-body .member {
    padding-top: 0; }
    .modal-award_of_year .modal-body .member .item-avatar .avatar {
      max-width: 100px; }
    .modal-award_of_year .modal-body .member .item-avatar img {
      width: 150px; }
    .modal-award_of_year .modal-body .member .item-name {
      padding: 10px 10px 0; }
  .modal-award_of_year .modal-body .inner {
    padding: 0 8%; }
    .modal-award_of_year .modal-body .inner .item {
      padding: 4px 20px 8px; }
      .modal-award_of_year .modal-body .inner .item .title {
        font-size: 15px; }
      .modal-award_of_year .modal-body .inner .item .count {
        font-size: 20px; } }

/*# sourceMappingURL=style.css.map */