.wrapper {
  width: 100%;
  height: calc(100vh - 140px);
  display: flex;
}

.drag-drawflow {
  border-bottom: none !important;
  padding-left: 20px;
  cursor: move;
  user-select: none;
}

.modal .wrapper {
  height: 100%;
  width: 100%;
}

.modal #drawflow {
  width: 100%;
}

#drawflow {
  position: relative;
  width: 100vw;
  height: 100%;
  background: var(--background-color);
  background-size: 25px 25px;
  background-image: linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
}

.drawflow_content_node {
  width: 295px !important;
}

@media only screen and (max-width: 768px) {
  .col {
    width: 50px;
  }

    .col .drag-drawflow span {
      display: none;
    }

  #drawflow {
    width: calc(100vw - 51px);
  }
}



/* Editing Drawflow */

.drawflow .drawflow-node {
  background: unset !important;
  border: unset !important;
  -webkit-box-shadow: unset !important;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  padding: 0px !important;
  width: 200px !important;
}

  .drawflow .drawflow-node:has(.card_start),
  .drawflow .drawflow-node:has(.card_end) {
    width: fit-content !important;
  }

  .drawflow .drawflow-node.selected {
    background: unset;
  }

    .drawflow .drawflow-node.selected .title-box {
      color: #22598c;
      /*border-bottom: 1px solid #4ea9ff;*/
    }

.drawflow .connection .main-path {
  stroke: #4ea9ff;
  stroke-width: 3px !important;
}

.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover {
  background: #4ea9ff;
}

.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
  background: #10788F !important;
  border: none !important;
}

.drawflow .drawflow-node .input {
  left: -24px !important;
}

.drawflow .drawflow-node .output {
  right: -5px !important;
}

.drawflow > .drawflow-delete {
  border: 2px solid #43b993;
  background: white;
  color: #43b993;
  -webkit-box-shadow: 0 2px 20px 2px #43b993;
  box-shadow: 0 2px 20px 2px #43b993;
}

.drawflow-delete {
  border: 2px solid #4ea9ff;
  background: white;
  color: #4ea9ff;
  -webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
  box-shadow: 0 2px 20px 2px #4ea9ff;
}

.drawflow .connection .point {
  stroke: var(--border-color);
  stroke-width: 2;
  fill: white;
}

  .drawflow .connection .point.selected, .drawflow .connection .point:hover {
    fill: #4ea9ff;
  }

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


/*code css workflow*/
.group_square {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  vertical-align: middle;
}

#drawflow:has(.card_work) .card_work,
#drawflow:has(.card_func) .card_func {
  width: 295px;
}

.card_work {
  border-radius: 8px;
  background: #ECF0FF;
}

  .card_work.is_doing {
    background: #305297;
  }

  .card_work.is_waiting {
    background: #EEEFF2;
  }

  .card_work.is_doing *,
  .card_work.is_cancel * {
    color: white !important;
  }

  .card_work.is_doing .user_name,
  .card_work.is_cancel .user_name {
    color: black !important;
  }

  .card_work.is_done {
    background: #ADFFCA;
  }

    .card_work.is_done .title-card {
      color: #0A6129;
    }

  .card_work.is_cancel {
    background: #E75555;
  }

.card_func {
  border-radius: 8px;
  background: #3597AA;
  color: white;
}

.drawflow-node:has(.card_start) {
  justify-content: end;
}

.drawflow_content_node:has(.card_start),
.drawflow_content_node:has(.card_end) {
  width: fit-content !important;
}

.card_start {
  border-radius: 100px;
  background: #ECF0FF;
  width: fit-content;
}

.card_end {
  border-radius: 100px;
  background: #CEF9CC;
  color: #045438;
  width: fit-content;
}

.card_input_sample {
  border-radius: 4px;
  background: #F1F7F7;
}

.btn-workflow {
  border-radius: 100px !important;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);
  padding: 10px 16px;
  z-index: 5;
}

.btn-collapse {
  background: #E6F5F5;
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.btn-publish {
  position: absolute;
  top: 20px;
  left: 20px;
}

.drawflow-node:has(.card_start) .drawflow-delete,
.drawflow-node:has(.is_doing) .drawflow-delete,
.drawflow-node:has(.is_done) .drawflow-delete,
.drawflow-node:has(.is_cancel) .drawflow-delete {
  display: none !important;
}

.group-workflow {
  border-bottom: 1px solid #dbdbdb;
}

  .group-workflow .hander-drop {
    width: 25%;
    height: unset;
  }

  .group-workflow:has(.not-drop) .hander-drop {
    display: none;
  }

.tooltips-func {
  background: #3DBD5E;
  width: 350px;
  z-index: 1;
  margin-top: -20px;
  right: 0;
  bottom: 60px;
  position: absolute;
  border-radius: 8px;
  height: fit-content;
}

.arrow-down-tooltip {
  right: 21px;
  position: absolute;
  bottom: 50px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #3DBD5E;
}

#main:has(#header-mytask-moblie-workflow) {
  padding-top: 0;
}

#header-mytask-moblie-workflow {
  background: white;
  z-index: 1;
  width: 100%;
  position: fixed;
  top: 51px;
  left: 0;
  right: 0;
  overflow: visible !important;
}

#function-workflow {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
}

#content:has(#header-mytask-moblie-workflow) #sidebar {
  display: none;
}

.workflow-hightlight {
  z-index: 99 !important;
  position: relative !important;
}

.timeline_border > .item_success {
  position: relative;
  border-left: 2px dashed #3dbd5e;
  padding-left: 20px;
}

  .timeline_border > .item_success::before {
    content: "";
    position: absolute;
    left: -8.5px;
    top: 10px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAMJSURBVDiNbZNfTFt1FMc/vx+3/yisrGUVHM4RN7Pa4iYUM1AQUjWBqG/yYGI2kiXgDJo4NhMNMzNRp6uamKlkmS8SZnSPmxgDzk2JS5aMtdJuw2IC4gI6O7jC7tqL9/58kC108zydnJzPOTnnm6/gtmge3lmDsHYpIWLAxpXylIIRTaqjp1sHUqv7xc2kbajHteTSPxSIrocDEfloeS3rPUHuL91I1tQZmTvL4PTXliVU//xfxivpjuPmrQFtQz2uRZf+TaW7vPWNyG5CpdWk9AyTSzMkFybYVraFp+9uxVQmexNxxvXMqWvZG23pjuOmAGj6bsenFe5Ad390P3/ksrxz6ShT168UnOaQDvaGOnky2EjP2FuM65nDP8Y+7xHNwztrkCrxSbRPCuDlsYPkbfP211CiFbOsltmzpZPm8jraz7xg/yPUgxJh7ar3R2SotJqDlz77X7hYczO4/V2ObT/E4YlBnMLJc/e2yyLsfVIJ+XjTulpSeoap61doCdbj1TwFm79siLPWuQafowSvVszJ2TM8UdGIskWHBLVhvecuMku/0RKs50DkReJbe/FqHpzSwRcN7+FzlGLay3Se62M2d5XE/EUCTh8IXBqgQCERnMuOk9InqfFtJr61F8PKFcAzxuyK+AK1oqEEMfP7jT+5r2QDhpVjT+IQF+YvE/Ztot4fuRMGtpWFyJoLoMhLhRoevTpGxLeZam8VOSvPqz9/wIX5y/y6NHMH7JQOnqp8jJG5syBIi5bvn4/Ytkx8XPd6kSY1Xhp7m5xlUlzkxiEd6MuLBYr0hbtoDDxE2w/dKNQz8nTrQMoW9L+Z7ifo8vNR7WtUe6swrFwB7JQO+sJdxIIN9CbjoFRyNDZwQgCEv3rW6Q94hirc5bH94W4eWLOJi39P8sviNMmFCerWhmivbCFv5+lNxknrk9cMn/ue89Ejxi0zrQx5XyB2R/1h2bSujqpVZvp27ieOTZ8EpZJGmafxfPSIUeDGm/HIqR3hIux9yhYdSFz/6UUeQVopdWA0NnBidf+/Ppk8kKMEhfAAAAAASUVORK5CYII=");
  }

.timeline_border > .item_pending {
  position: relative;
  padding-left: 20px;
}

  .timeline_border > .item_pending::before {
    content: "";
    position: absolute;
    left: -6.5px;
    top: 10px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InJhZGlvX2J1dHRvbl9jaGVja2VkIiBjbGlwLXBhdGg9InVybCgjY2xpcDBfNzE2OV8xMjI0MCkiPgo8cGF0aCBpZD0iVmVjdG9yIiBkPSJNNy45OTg3IDQuNjY1MzZDNi4xNTg3IDQuNjY1MzYgNC42NjUzNiA2LjE1ODcgNC42NjUzNiA3Ljk5ODdDNC42NjUzNiA5LjgzODcgNi4xNTg3IDExLjMzMiA3Ljk5ODcgMTEuMzMyQzkuODM4NyAxMS4zMzIgMTEuMzMyIDkuODM4NyAxMS4zMzIgNy45OTg3QzExLjMzMiA2LjE1ODcgOS44Mzg3IDQuNjY1MzYgNy45OTg3IDQuNjY1MzZaTTcuOTk4NyAxLjMzMjAzQzQuMzE4NyAxLjMzMjAzIDEuMzMyMDMgNC4zMTg3IDEuMzMyMDMgNy45OTg3QzEuMzMyMDMgMTEuNjc4NyA0LjMxODcgMTQuNjY1NCA3Ljk5ODcgMTQuNjY1NEMxMS42Nzg3IDE0LjY2NTQgMTQuNjY1NCAxMS42Nzg3IDE0LjY2NTQgNy45OTg3QzE0LjY2NTQgNC4zMTg3IDExLjY3ODcgMS4zMzIwMyA3Ljk5ODcgMS4zMzIwM1pNNy45OTg3IDEzLjMzMkM1LjA1MjAzIDEzLjMzMiAyLjY2NTM2IDEwLjk0NTQgMi42NjUzNiA3Ljk5ODdDMi42NjUzNiA1LjA1MjAzIDUuMDUyMDMgMi42NjUzNiA3Ljk5ODcgMi42NjUzNkMxMC45NDU0IDIuNjY1MzYgMTMuMzMyIDUuMDUyMDMgMTMuMzMyIDcuOTk4N0MxMy4zMzIgMTAuOTQ1NCAxMC45NDU0IDEzLjMzMiA3Ljk5ODcgMTMuMzMyWiIgZmlsbD0iIzM1NUNBQSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzcxNjlfMTIyNDAiPgo8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
  }

.timeline_border > .item_cancel {
  position: relative;
  padding-left: 20px;
}

  .timeline_border > .item_cancel::before {
    content: "";
    position: absolute;
    left: -6.5px;
    top: 10px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAIISURBVDiNfZPNTlNRFIW/ddoJJCVRhBixMTboBHwDB42kLa3G0DSNIx3UkU+gEsbE+AQqCRNGpjQGQqlF1L4DODIMSOiIoiYQCAm928E99Iege3bP3WudvdZeR1woKzy6g9rPESlMVwCQ/SbQBrhFVdZ+9varA0wmo1wbeAOkMVZBMZyNARCoCXaIeAzUaZ28VqNx1iGwZDLKyMAKsEtgCaTMxcl81TB2keK0jmfUaJw5AH/zLqbp/4ABsog0sMfw4DyAsye5u0CawBJgt0M9tgTs9wBPgXdAG0hgFsdZ1oqZcUfbShirnZvNllT5/Iy2e+BJTlFQ0HLtBTDrnctBsIKp5BApxFDXVk1b/uGkPlW3PUle5XrV8ulRxNPuuiIxUCrqVzUGdv5rhEjwzYq5KZWrW8C2FbMjGJsYk11VdgO4GpooM/prCLObna8gGAWuX+aq8yFp9hkWaq5ZPj1qhcyEKvUfSFN9xoom8MuFCbPDHoJ6R3M08hW571bM3VN5fQvjQ3cqjoAN+ehWgD0g6+nfg90HJnz7PrAAvAQiyKqgWzhmwiQWcm/BYj4kicu0dr1jB2kT7I+Wa69CEw+OZ5HioC8Y6/8Ey6oePEbrZC604pw4mYwyPDiPs2wYkkjMrwqkJoEdIWaANVonc32PqW/CYmYcUwmUAg370wNggwiL+ljb6e3/C1GTzOswXc7dAAAAAElFTkSuQmCC");
  }

#statistical_list .workflow-mission {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--Secondary-Secondary-80, #C0C6DC);
  background: #FFF;
}

  #statistical_list .workflow-mission .mission {
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
    border-radius: 4px;
    background: var(--Analogous-Analogous-95, #F1F7F7);
  }

#statistical_list .stacked_chart {
  /* display: flex; */
  padding: 16px;
  gap: 24px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--Secondary-Secondary-80, #C0C6DC);
  background: #FFF;
}

.details-mission {
  display: flex;
  padding: 8px;
  width: 25%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
  border-radius: 4px;
  background: var(--Analogous-Analogous-95, #F1F7F7);
}

.details-mission-by-users {
  display: flex;
  padding: 8px;
  width: 20%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
  border-radius: 4px;
  background: var(--Analogous-Analogous-95, #F1F7F7);
}

#workflow_list_body .sticky_statistic {
  width: max-content;
  min-width: 100%;
  /* box-shadow: inset 0px -2px 0px 0px #cfcfcf; */
  padding-right: 8px;
  position: sticky;
  top: -4px;
  z-index: 9;
}

.detail-chart {
  padding: 16px;
  gap: 24px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--Secondary-Secondary-80, #C0C6DC);
  background: #FFF;
}

#statistical_content {
  background: white;
}

#workflow_list_body .sticky:hover,
#workflow_list_body:has(.dropdown-customize.is-active) .table_list_header .sticky,
.table_list .work-item:has(.dropdown-forward.is-active) .sticky.last {
  z-index: 99;
}

#workflow_list_body:has(.dropdown-customize.is-active) .sticky {
  z-index: 1;
}

.workflow-customize .column {
  background: white;
}

.tab_in_popup button {
  border-radius: 4px;
  height: 25px
}

.tab_in_popup .is-active {
  background: var(--Text-Primary-Primary-80, #D6DEEE);
  color: var(--Primary-Primary-40, #305297);
}

.sticky_comments_mission {
  align-items: flex-end;
  width: 99%;
  position: sticky;
  z-index: 99;
  top: 0px;
  background: white;
}

.button_filter_mission {
  border: none;
  color: #575E72;
  background: none;
}

  .button_filter_mission:hover,
  .button_filter_mission.is-active {
    background: #EEEFF2;
  }

    .button_filter_mission:hover .icon,
    .button_filter_mission.is-active .icon {
      color: black;
    }

  .button_filter_mission.is-filter {
    color: #305297;
    background: #D6DEEE;
  }

.tag.text_1_line.tag-label {
  max-width: 108px;
  line-height: 26px;
  height: 26px;
  max-height: unset !important;
}