/*Write your custom css in this file.*/


/* Folder Template */
.folder-template-wrapper{
    background: #fff;
    min-height: 85vh;
    padding: 15px;
    border-radius: 5px;
}
.header-folder-template{
    border-bottom: 1px solid #f3f3f3;
    padding: 15px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.l_columns-1, .l_columns-2, .l_columns-3, .l_columns-4, .l_columns-5, .l_columns-6 {
    display: grid;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
    margin: 30px 0;
  }
  
  .l_columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .l_columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .l_columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .l_columns-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .l_columns-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .card-preview {
    padding: 15px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
    min-width: 175px;
  }
  .card-preview .folder-name{
    margin-left: 30px;
  }
  .card-preview.active {
    border: 1px solid #00b393;
    color: #00b393;
    background: #ddf6f1;
    transition: all 0.3s ease;
}
.card-preview .fa{
    font-size: 20px;
    position: absolute;
}
.label-title {
    position: relative;
    top: 15px;
    font-weight: 600;
    left: 10px;
}
.file-grid .file-preview {
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.file-icon-preview .fa{
  position: unset;
}
.file-grid .file-preview .file-preview-bg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ecedee;
  border-radius: 4px 4px 0px 0px;
  width: 100%;
  margin-top: -1px;
}
.file-grid .card-preview {
    height: 170px;
    padding: 0px;
    position: relative;
    /* overflow: hidden; */
}
.file-grid .file-name {
    height: 20%;
    display: flex;
    align-items: center;
    padding: 0px 15px;
}
.card-preview .file-name .name {
  margin-left: 25px;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-name .fa-file {
    font-size: 15px;
}
.custom_modal .modal-header{
    display: flex;
    justify-content: space-between;
    border-bottom: 0px;
}
.custom_modal .modal-footer{
    border: none;
}
.custom_modal .modal-footer button{
    min-width: 70px;
}
.custom_modal .modal-content{
    border-radius: 5px !important;
    border: none;
}
.custom_modal .modal-dialog.modal-dialog-centered {
    transform: translate(0, 100%) !important;
    width: 380px;
}
button.close span{
    outline: none !important;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-left: 15px;
  }
  .right-button{
    display: flex;
    align-items: center;
  }
  .upload-btn-wrapper input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  /* loader */
  .loader-content {
    background-color: rgb(255, 255, 255);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
  }
  
  .loader {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #009ed2;
    border-right-color: transparent;
    transform-origin: center;
    animation: rotate 1s linear infinite;
  }
  .loader-content._hide {
    z-index: -10;
    opacity: 0;
}
  
  @keyframes rotate {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  div#pre-loader.content-document {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
  /* end loader */
  .content-folder-wrapper{
    position: relative;
  }
/* End Folder Template */

/* DMS NEW */
.document-content {
  grid-area: content;
  padding: 15px;
  height: auto;
  background: #fff;
  min-height: 85vh;
}
.document-content .document-title {
  padding: 20px;
  background: #00b393;
  margin: 0 0 15px 0;
  border-radius: 15px;
  color: #fff;
  box-shadow: -1px 3px 4px 1px #d5d5d5;
  font-size: 22px
}

.document-breadcrumb {
  position: relative;
  margin-left: 15px;
  margin-top: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e3eaef;
}
.document-breadcrumb-icon {
  background: #00b393;
  background: -webkit-linear-gradient(to right, #2fb696, #00b393);
  background: linear-gradient(to right, #2fb696, #00b393);
  width: 60px;
  /* transform: skew(-10deg); */
  height: 60px;
  z-index: 5;
  top: -10px;
  position: absolute;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
img.breadcrumb-icon,
.document-breadcrumb-icon i {
  /* transform: skew(10deg); */
  color: #fff;
  padding: 13px;
}
.document-breadcrumb-icon i{
  font-size: 25px;
  /* margin: 2px 5px; */
}
ul.document-breadcrumb-icon-list {
  list-style: none;
  margin: 10px 20px 25px 5px;
  display: flex;
}
ul:not(.list-unstyled) {
  line-height: 28px;
}
ul.document-breadcrumb-icon-list li:first-child {
  padding: 5px 30px 5px 40px !important;
}
ul.document-breadcrumb-icon-list li:hover {
  z-index: 4 !important;
  text-overflow: unset;
  width: auto;
  transition: .5s ease-in;
}
ul.document-breadcrumb-icon-list li {
  width: 135px;
  font-weight: 600;
  transition: .5s ease-out;
  text-overflow: ellipsis;
  position: relative;
  margin: 0 -15px;
  border-radius: 30px;
  box-shadow: 0 5px 15px 0 hsla(0, 0%, 0%, .15) !important;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  color: #00b393;
  padding: 5px 30px 5px 15px;
  text-transform: capitalize;
  z-index: 2;
}
ul.document-breadcrumb-icon-list {
  list-style: none;
  margin: 10px 20px 25px 5px;
  display: flex;
}

/* DMS TOPBAR */
.document-topbar {
  margin-bottom: 20px;
}
.document-topbar .document-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.document-topbar .document-wrapper .document-group {
  padding: 10px;
}
.btn-success, .btn-success.disabled {
  box-shadow: 0 2px 6px #a8f5b4;
  background-color: #63ed7a;
  border-color: #63ed7a;
  color: #fff;
}
.btn-success {
  background: #2ecc71 !important;
  border: 0;
  border-radius: 20px;
}
.document-topbar .btn{
  border-radius: 20px;
}
.document-content .document-wrapper .document-action {
  float: right;
  padding: 20px;
  text-align:center;
}

.document-topbar .document-wrapper .document-group {
  padding: 10px
}

.document-topbar .document-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.document-topbar {
  margin-bottom: 20px
}

.document-search label {
  position: relative;
  top: 1px;
  left: 25px
}

.document-topbar .document-search input[type=text] {
  border-radius: 60px;
  height: 30px;
  border: 1px solid #3c4d83;
  padding: 10px 10px 10px 25px
}

.document-topbar-right {
  display: flex
}

.document-group label.btn-outline-primary input[type=radio] {
  display: none
}

.document-content .document-wrapper .document-list-detail {
  display: flex;
  margin: 10px;
  padding: 0 10px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 4px 2px 0 hsla(0, 0%, 0%, .1) !important;
  text-decoration: none
}

.document-content .document-wrapper .document-list-detail:hover {
  background: #cccccc26
}

.document-content .document-wrapper .document-list-detail a.document-value {
  font-weight: 700;
  display: block;
  width: 75%;
  color: #3c4d83;
  padding: 20px 0;
  text-decoration: none
}

.document-content .document-wrapper .document-list-detail .document-action {
  float: right;
  display: flex;
  align-items: center;
  padding: 10px 0
}

.document-content .document-wrapper .document-list-detail .document-action p {
  padding: 0 30px;
  margin-bottom: 0
}
.document-content .document-wrapper.anakpersoalan .document-list-detail .document-action p{
  padding-right: 65px;
}

.document-content .document-wrapper .document-list-detail-surat {
  border-bottom: 1px solid #cbc6c6;
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-areas: "judul no_surat action";
  margin: 0 10px;
  text-decoration: none;
  justify-content: space-between
}

.document-content .document-wrapper .document-list-detail-surat .document-value {
  font-weight: 700;
  display: block;
  color: #3c4d83;
  padding: 20px 0;
  text-decoration: none
}

.document-content .document-wrapper .document-list-detail-surat .document-action {
  float: right;
  display: flex;
  align-items: center
}

.document-content .document-wrapper .document-list-detail-surat .document-action p {
  padding: 0 30px;
  margin-bottom: 0
}

.document-content .document-wrapper .document-list-detail-surat .document-index-surat {
  padding: 20px 0
}

.document-content .document-wrapper-folder .document-folder {
  width: 150px;
  margin: 10px;
  border-radius: 10px
}

.document-content .document-wrapper-folder {
  flex-wrap: wrap;
  grid-area: content_folder;
  text-align: center;
  display:flex;
  height: 100%;
  width: 100%;
  padding: 40px 20px 20px;
}
.document-wrapper-folder .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.document-content .document-wrapper-arsip {
  flex-wrap: wrap;
  grid-area: content_folder;
  text-align: center;
  display: flex;
  height: 100%;
  width: 100%;
  padding: 40px 20px 20px;
}
.document-content .document-wrapper-arsip .document-folder-surat.suratmasuk{
  background-image: url(../icon/icon_surat/surat_keluar_back_icon.svg);
}
.document-content .document-wrapper-arsip .document-image{
  margin :20px 0;
}
.document-content .document-wrapper-arsip .document-folder-surat .document-value {
  font-size: 15px;
  display: block;
  color: #65769d;
  margin: 10px 0 !important;
}


.document-content .document-wrapper-arsip .document-folder-surat {
  width: 150px;
  background-color: #fff;
  background-position-x: 20%;
  background-repeat: no-repeat;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 2px 0 hsla(0, 0%, 0%, .1) !important;
}

.document-content .document-wrapper-folder .document-folder .document-image {
  margin: 20px 0
}

.document-content .document-wrapper-folder .document-folder .document-value {
  font-size: 15px;
  display: block;
  color: #65769d;
  margin: 10px 0 !important
}

.document-content .document-footer {
  display: flex;
  align-content: center;
  justify-content: space-between;
  margin: 50px 10px 0 10px
}

input:focus,
textarea:focus {
  outline: 0
}

.document-textbox-body-modal {
  display: block;
  width: 80%
}

.document-title-body-modal {
  padding: 10px 30px 10px 0
}

.document-textbox-body-modal input.form-control {
  border-radius: 10px
}

.document-textbox-body-modal input.form-control:active {
  border: 1px solid #273d62
}
.dropdown-menu {
  /* min-width: 6rem !important */
}
.dropdown-menu.document ul li i.fa {
  position: relative;
  margin-right: 5px;
  min-width: 25px;
}
.document-dropdown {
  cursor: pointer
}

.custom-control-label.jejak {
  font-size: 13px !important
}

.multiselect__tags {
  box-shadow: 0 4px 2px 0 hsla(0, 0%, 0%, .1) !important;
  max-height: 295px;
  /*overflow: hidden;*/
  overflow-x: auto;
}

label.jenis_surat {
  font-size: 16px !important
}

.btn-custom {
  border-radius: 5px !important;
  font-size: 12px !important
}

.btn-success.btn-custom {
  background-color: #2fcf72;
  background-image: linear-gradient(to bottom, #43d480, #2fcf72) !important
}

.btn-danger.btn-custom {
  background-color: #cf342f;
  background-image: linear-gradient(to bottom, #d44843, #cf342f) !important
}

.document-content .document-wrapper .document-list-surat a.document-value-suratsaya {
  font-weight: 700;
  display: block;
  width: 99%;
  font-size: 12pt;
  color: #3c4d83;
  padding: 20px 20px 20px 15px;
  text-decoration: none
}

.document-content .document-wrapper .document-list-surat .document-suratsaya-icon>img.document-icon {
  padding: 14px 14px
}

.document-content .document-wrapper .document-list-surat .document-tanggal {
  font-size: 11pt;
  font-weight: 600;
  color: #4e79c2
}

.document-content .document-wrapper .document-list-surat {
  display: grid;
  align-items: center;
  grid-template-columns: 63px auto 225px 245px 150px 40px;
  grid-template-areas: "icon nama status tanggal action";
  width: 100%;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 4px 2px 0 hsla(0, 0%, 0%, .1) !important;
  margin: 10px
}
.document-content .document-wrapper.surat-saya .document-list-surat {
  width: auto;
}

.document-status {
  align-items: center;
  align-content: center;
  align-self: center;
  text-align: center
}
.document-content .document-wrapper.surat-saya .document-head-surat{
  grid-template-columns: auto 320px 146px 210px;
}
.document-content .document-wrapper.nota-dinas .document-head-surat{
  grid-template-columns: auto 300px 145px 140px 70px
}
.document-content .document-wrapper.takah .document-head-surat.main{
  grid-template-columns: auto 60px;
}
.document-content .document-wrapper.anakpersoalan .document-head-surat{
  grid-template-columns: auto 185px 90px;
}
.document-wrapper.rekap .document-head-rekap,
.document-wrapper.rekap .document-list{
  grid-template-columns: auto 300px 100px !important;
}
.document-wrapper.rekap-detail .document-head-rekap-detail,
.document-wrapper.rekap .document-head-rekap{
  display: grid;
  padding: 15px 15px;
  background-color: #4e79c2;
  margin: 20px 10px 10px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  border-radius: 5px;
  box-shadow: 0 4px 2px 0 hsla(0, 0%, 0%, .1) !important;
  grid-template-columns: auto 200px 200px 150px 100px;
}

.document-wrapper.rekap-detail .document-list,
.document-wrapper.rekap .document-list {
  display: grid;
  padding: 15px 15px;
  margin: 20px 10px 10px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 5px;
  box-shadow: 0 4px 2px 0 hsla(0, 0%, 0%, .1) !important;
  grid-template-columns: auto 200px 200px 150px 100px;
}
.document-wrapper.perizinan .document-head-izin {
  display: grid;
  padding: 15px 15px;
  background-color: #4e79c2;
  margin: 20px 10px 10px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  border-radius: 5px;
  box-shadow: 0 4px 2px 0 hsla(0, 0%, 0%, .1) !important;
  grid-template-columns: auto 300px 100px;
}
.document-wrapper.perizinan .document-list {
  display: grid;
  padding: 15px 15px;
  margin: 20px 10px 10px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 5px;
  box-shadow: 0 4px 2px 0 hsla(0, 0%, 0%, .1) !important;
  grid-template-columns: auto 300px 100px;
}
.document-content .document-wrapper .document-head-surat {
  /* margin: 10px 10px 20px 10px;
  display: grid;
  grid-template-columns: auto 300px 165px 150px;
  padding-bottom: 5px;
  text-align: left;
  align-items: center;
  width: 100%;
  color: #3c4d83; */
  display: grid;
  grid-template-columns: auto 355px;
  text-align: center;
  background-color: #4e79c2;
  margin: 20px 10px 10px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  border-radius: 5px;
  box-shadow: 0 4px 2px 0 hsla(0, 0%, 0%, .1) !important;
}

.document-wrapper .document-head-surat>.document-head {
  padding: 10px 0;
  font-size: 12pt;
  display: flex;
  font-weight: 700;
  justify-content: center;
}
.document-wrapper.surat-saya .document-head-surat>.document-head,
.document-wrapper.takah .document-head-surat>.document-head {
  justify-content: flex-start;
  padding-left: 15px !important;
}
.document-wrapper.detail_wrapper {
  background: #fff;
  border-radius: 10px;
  margin: 10px;
  box-shadow: -1px 1px 4px 0 #d5d5d52b;
  padding-bottom: 40px;
  padding: 0 20px
}

.document-wrapper .detail-wrapper {
  margin: 10px 10px 20px 10px;
  display: grid;
  text-align: left;
  align-items: center;
  grid-template-columns: 250px auto;
  width: 100%
}

.document-wrapper .detail-wrapper .logo-detail {
  padding: 70px 0 30px 10px
}

.document-wrapper .detail-wrapper li.list-wrapper-detail-surat {
  list-style: none;
  display: grid;
  grid-template-columns: 150px auto;
  padding: 10px;
  font-size: 12pt
}

.document-wrapper .detail-wrapper li.list-wrapper-detail-surat>.head-list-detail {
  font-weight: 700
}

.label_pdf_detail_surat {
  width: fit-content;
  position: relative;
  right: -20px;
  top: -20px;
  color: #fff;
  font-size: 12pt;
  background: #007bff;
  padding: 10px;
  border-radius: 5px
}

.envelope {
  position: relative;
  width: fit-content;
  height: 120px;
  background: #d39d6f;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 0 1px #ce935f inset;
  margin-bottom: 30px
}

.envelope:after,
.envelope:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-width: 60px 80px
}

.envelope:before {
  border-bottom-color: #d39d6f;
  top: -100%;
  left: 40px
}

.envelope:after {
  border-right-color: #d6a57a;
  border-left-color: #daad86;
  border-bottom-color: #daad86;
  top: 0;
  left: 40px;
  border-radius: 0 0 6px 6px;
  transform: rotate(360deg)
}

.envelope:hover>.paper {
  top: -40px
}

.paper {
  position: absolute;
  width: 140px;
  left: 50px;
  height: 120px;
  margin: 0 auto;
  background: #fff;
  top: -4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  overflow: hidden;
  transition: top .5s ease-in;
  animation: hello-mail 10s forwards infinite
}

.paper:after,
.paper:before {
  content: '';
  position: absolute;
  left: 20px;
  background: #eee;
  height: 4px;
  border-radius: 6px
}

.paper:before {
  top: 30px;
  width: 40px
}

.paper:after {
  right: 20px;
  top: 50px;
  box-shadow: 0 20px 0 #eee, 0 40px 0 #eee, 0 60px 0 #eee, 0 80px 0 #eee
}

@keyframes hello-mail {
  0% {
      top: -4px
  }

  3% {
      top: -40px
  }

  16% {
      top: -40px
  }

  17% {
      top: -4px
  }
}

@-webkit-keyframes page_in {
  50% {
      -webkit-transform: translateY(-40px) rotate(25deg);
      transform: translateY(-40px) rotate(25deg)
  }

  75% {
      -webkit-transform: translateY(-35px) rotate(23deg);
      transform: translateY(-35px) rotate(23deg)
  }

  100% {
      -webkit-transform: translateY(-40px) rotate(25deg);
      transform: translateY(-40px) rotate(25deg)
  }
}

@keyframes page_in {
  50% {
      -webkit-transform: translateY(-40px) rotate(25deg);
      transform: translateY(-40px) rotate(25deg)
  }

  75% {
      -webkit-transform: translateY(-35px) rotate(23deg);
      transform: translateY(-35px) rotate(23deg)
  }

  100% {
      -webkit-transform: translateY(-40px) rotate(25deg);
      transform: translateY(-40px) rotate(25deg)
  }
}

@-webkit-keyframes page_clicked {
  0% {
      -webkit-transform: translateY(-40px) rotate(25deg);
      transform: translateY(-40px) rotate(25deg)
  }

  10% {
      -webkit-transform: translateY(-60px) rotate(20deg);
      transform: translateY(-60px) rotate(20deg)
  }

  100% {
      -webkit-transform: translateX(-10px) scale(1.5) rotate(0);
      transform: translateX(-10px) scale(1.5) rotate(0)
  }
}

@keyframes page_clicked {
  0% {
      -webkit-transform: translateY(-40px) rotate(25deg);
      transform: translateY(-40px) rotate(25deg)
  }

  10% {
      -webkit-transform: translateY(-60px) rotate(20deg);
      transform: translateY(-60px) rotate(20deg)
  }

  100% {
      -webkit-transform: translateX(-10px) scale(1.5) rotate(0);
      transform: translateX(-10px) scale(1.5) rotate(0)
  }
}

.folder {
  position: relative;
  -webkit-perspective: 600px;
  perspective: 600px;
  transition: all .2s ease-in-out
}

img.dms-image-dokumen-icon {
  width: 55px;
  top: 20px;
  left: 45px;
  position: absolute;
  opacity: .4
}

img.share-folder {
  position: absolute;
  left: 115px;
  width: 25px;
  top: 65px
}

.folder:hover {
  cursor: pointer
}

.folder__front {
  position: relative;
  width: 150px;
  height: 100px;
  background: #ffe89e;
  border-radius: 10px;
  transition: inherit;
  -webkit-transform: rotateX(-15deg);
  transform: rotateX(-15deg)
}
.folder__front .dropdown .dropdown-menu {
  top: 30px;
  left: 25px;
}
.folder__front>.dropdown .fa-cog {
  position: absolute;
  top: 10px;
  font-size: 18pt;
  left: 10px;
  color: #8d8d94;
  text-shadow: -1px -1px 0 #f0cd68
}

.folder__full--paper {
  position: absolute;
  left: 45px;
  top: 5px;
  width: 75px;
  height: 75px;
  background-color: #fff;
  border: 2px solid #e6e6e6;
  z-index: -1;
  transition: inherit
}

.folder__full--paper::after,
.folder__full--paper::before {
  position: absolute;
  content: '';
  height: 3px;
  background-color: #e6e6e6
}

.folder__full--paper::before {
  top: 10px;
  left: 10px;
  width: 65%
}

.folder__full--paper::after {
  top: 20px;
  left: 10px;
  width: 50%
}

.folder__full--paper .fa-cloud-download {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #e6e6e6
}

.folder__back {
  position: absolute;
  top: -2px;
  width: 150px;
  height: 100px;
  background: #f0cd68;
  border-radius: 10px;
  z-index: -2;
  transition: inherit;
  -webkit-transform: rotateX(15deg) scaleX(.96) translateY(-5px);
  transform: rotateX(15deg) scaleX(.96) translateY(-5px)
}

.folder__back::after {
  position: absolute;
  width: 50px;
  height: 10px;
  top: -10px;
  right: 20px;
  background-color: inherit;
  content: '';
  border-top-left-radius: 5px;
  border-top-right-radius: 5px
}

.folder:hover>.folder__front {
  -webkit-transform: rotateX(-25deg);
  transform: rotateX(-25deg)
}
.folder:hover.folder__front .dropdown .dropdown-menu{
  transform: rotateX(0deg) !important;
}

.folder:hover>.folder__back {
  -webkit-transform: rotateX(25deg) scaleX(.95) translateY(-6px);
  transform: rotateX(25deg) scaleX(.95) translateY(-6px)
}

.folder:hover>.folder__full--paper {
  -webkit-animation: page_in .5s ease .25s 1 normal both;
  animation: page_in .5s ease .25s 1 normal both
}

.folder.folder-open .folder__back,
.folder.folder-open>.folder__front {
  -webkit-transform: scale(.1);
  transform: scale(.1)
}

.folder.folder-open>.folder__full--paper {
  -webkit-animation: page_clicked .5s ease 1 normal both;
  animation: page_clicked .5s ease 1 normal both;
  z-index: 10
}

.folder__name {
  padding: 10px 10px;
  font-size: 11pt;
  overflow: hidden;
  max-height: 100px;
  color: #707070;
  text-overflow: ellipsis
}

.dropdown-menu.document{
  width: max-content;
}
.dropdown-menu.document.left{
  width: max-content;
  left: -120px;
}

.dropdown-item-icon {
  display: flex;
  align-items: center;
  /* padding: 3px 10px */
}

a.dropdown-item.folder {
  padding: 3px 1rem !important
}

li.dropdown-item-icon:hover {
  background: #d6e4e4;
  color: #007bff
}

ul.list-item {
  padding: 0 !important
}

.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover {
  background: 0 0
}

a.dropdown-item:active,
a.dropdown-item:focus {
  background: 0 0
}

.document-content .document-wrapper-folder-sidebar#sidebar_detail {
  display: grid;
  grid-template-columns: auto 350px;
  grid-template-areas: "content_folder sidebar_detail";
  overflow-x: hidden
}

.document-content .document-wrapper-folder-sidebar {
  display: block
}

.document-wrapper-sidebar-detail {
  grid-area: sidebar_detail;
  padding: 20px;
  font-size: 12px;
  border-left: 1px solid hsla(0, 0%, 0%, .15)
}

.document-wrapper-sidebar-detail td {
  padding: 10px
}

.document-wrapper-sidebar-detail .detail-header {
  padding: 10px;
  font-size: 20px
}

.document-wrapper-sidebar-detail .detail-header {
  font-size: 20px
}

.document-wrapper-sidebar-detail .detail-header a {
  color: #3c4d83
}

.badge-primary.badge-custom {
  background: #d7e5e5 !important;
  color: #3c4d83
}

.badge-primary.badge-custom>a>i {
  color: #e63d3d
}

.document-file-wrapper .document-head-file {
  display: grid;
  text-align: center;
  align-items: center;
  background-color: #4e79c2;
  margin: 20px 0px 10px 0px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  border-radius: 5px;
  box-shadow: 0 4px 2px 0 hsla(0, 0%, 0%, .1) !important;
  grid-template-columns: auto 165px 150px 40px;
  width: 100%;
  padding-bottom: 5px;
}

.document-file-wrapper .document-head-file .document-head {
  padding-left: 17px !important;
  padding: 10px 0;
  font-size: 12pt;
  display: flex;
  font-weight: 700;
  align-items: center;
}

.document-file-wrapper .document-list-file {
  margin: 15px;
  display: grid;
  align-items: center;
  border-bottom: 1px solid #d7e5e5;
  padding: 10px 0;
  grid-template-columns: auto 150px 150px 40px;
  width: 100%
}

.document-file-wrapper {
  max-height: 50vh;
  height: auto;
  overflow: auto;
  overflow-x: hidden
}

.document-file-name {
  display: flex;
  cursor: pointer;
  align-items: center
}

.document-file-name .document-file-text-name {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  font-weight: 500
}

.document-file-name .document-file-icon {
  background-size: 20px;
  background-repeat: no-repeat;
  content: '';
  width: 20px;
  height: 20px
}

.document-file-name .document-file-icon.avi {
  background-image: url(../icon/file_format/avi.svg)
}

.document-file-name .document-file-icon.doc {
  background-image: url(../icon/file_format/doc.svg)
}

.document-file-name .document-file-icon.docx {
  background-image: url(../icon/file_format/doc.svg)
}

.document-file-name .document-file-icon.docx {
  background-image: url(../icon/file_format/doc.svg)
}

.document-file-name .document-file-icon.fla {
  background-image: url(../icon/file_format/fla.svg)
}

.document-file-name .document-file-icon.gif {
  background-image: url(../icon/file_format/gif.svg)
}

.document-file-name .document-file-icon.jpg {
  background-image: url(../icon/file_format/jpg.svg)
}

.document-file-name .document-file-icon.jpeg {
  background-image: url(../icon/file_format/jpg.svg)
}

.document-file-name .document-file-icon.mov {
  background-image: url(../icon/file_format/mov.svg)
}

.document-file-name .document-file-icon.mp3 {
  background-image: url(../icon/file_format/mp3.svg)
}

.document-file-name .document-file-icon.mpg {
  background-image: url(../icon/file_format/mpg.svg)
}

.document-file-name .document-file-icon.pdf {
  background-image: url(../icon/file_format/pdf.svg)
}

.document-file-name .document-file-icon.png {
  background-image: url(../icon/file_format/png.svg)
}

.document-file-name .document-file-icon.ppt {
  background-image: url(../icon/file_format/ppt.svg)
}

.document-file-name .document-file-icon.txt {
  background-image: url(../icon/file_format/txt.svg)
}

.document-file-name .document-file-icon.wmv {
  background-image: url(../icon/file_format/wmv.svg)
}

.document-file-name .document-file-icon.xls {
  background-image: url(../icon/file_format/xls.svg)
}

.document-file-name .document-file-icon.csv {
  background-image: url(../icon/file_format/xls.svg)
}

.document-file-name .document-file-icon.zip {
  background-image: url(../icon/file_format/zip.svg)
}

.document-file-name .document-file-icon.lainnya {
  background-image: url(../icon/file_format/lainnya.svg)
}

.document-file-name .document-file-icon.undefined {
  background-image: url(../icon/file_format/lainnya.svg)
}

.display-content {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/lambang_tni_au.png);
  margin-bottom: 15px;
  content: '';
  width: 100%;
  height: 200px;
  background-position: center;
  background-size: cover
}

ul.document-breadcrumb-icon-list {
  list-style: none;
  margin: 10px 20px 25px 5px;
  display: flex
}
ul.document-breadcrumb-icon-list li.active {
  z-index: 1 !important;
  background: #00BA95 !important;
  color: #fff !important;
}


ul.document-breadcrumb-icon-list li:first-child {
  padding: 5px 30px 5px 40px !important
}

ul.document-breadcrumb-icon-list li.active:nth-child(3),
ul.document-breadcrumb-icon-list li.active:nth-child(4),
ul.document-breadcrumb-icon-list li.active:nth-child(5) {
  z-index: 2 !important
}

ul.document-breadcrumb-icon-list li.active:nth-child(2) {
  padding: 5px 30px 5px 40px !important
}

input[type=file]#file-upload {
  display: none
}

.vue-dropzone>.dz-preview .dz-details {
  background: rgb(99, 151, 211, .5) !important
}

.loader {
  position: absolute;
  top: 55%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 3px;
  background: #f3f6fe;
  border-radius: 3px;
  overflow: hidden
}

.loader::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #0055ea;
  border-radius: 3px;
  animation: loading 1.2s cubic-bezier(.62, 0, .38, 1) infinite
}

@-moz-keyframes loading {
  0% {
      left: -100%
  }

  70% {
      left: 100%
  }

  100% {
      left: 100%
  }
}

@-webkit-keyframes loading {
  0% {
      left: -100%
  }

  70% {
      left: 100%
  }

  100% {
      left: 100%
  }
}

@-o-keyframes loading {
  0% {
      left: -100%
  }

  70% {
      left: 100%
  }

  100% {
      left: 100%
  }
}

@keyframes loading {
  0% {
      left: -100%
  }

  70% {
      left: 100%
  }

  100% {
      left: 100%
  }
}

.text-info-kosong {
  font-size: 20px;
  font-weight: 700;
  text-align: center
}


.overlay-action{
  position: absolute;
  top: 0;
  background: #000000a6;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center; 
  transition: all 0.5s ease;
  opacity: 0;
}
.overlay-action .dropdown i.fa.fa-cog {
  color: darkgray;
  font-size: 25px;
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
}
.file-grid .card-preview:hover .overlay-action{
  opacity: 1;
}
.overlay-action .dropdown{
  position: absolute;
  left: 0;
  top: 0;
}
.overlay-action .dropdown-menu {
  top: 10px;
  left: 35px;
  width: 150px;
}
.overlay-action a.dropdown-item.folder {
  padding: 0px 25px !important;
}
.document-button-action{
  display: flex;
  align-items: center;
}

.modal-detail ._label-info {
  font-size: 14px;
  font-weight: 500;
  opacity: .5;
}

.modal-detail ._content {
  padding: 10px;
  background-color: #f3f3f3;
  border-radius: 5px;
  font-weight: 500;
  overflow-wrap: break-word;
}
.mb-3{
  margin-bottom: 1rem!important;
}
.modal-dialog.custom-width{
  margin-top: 180px;
  max-width: 400px;
}
span.date {
  font-weight: 700;
  color: orange;
}
button.tanggal:focus,button.tanggal:active{
  outline:none;
}
button.tanggal {
  font-size: 17px;
    color: #0089ff;
    border: none;
    display: flex;
    margin: 13px 0;
    align-items: center;
    width: 100%;
    padding: 5px 25px;
    border-radius: 5px;
    background: #f9f9f9;
    box-shadow: 0px 2px 7px -2px #00000025;
}
.tanggal > .fa.fa-chevron-right {
  float: right;
  font-size: 14px;
  display: flex;
  text-align: right;
  position: relative;
  right: -50px;
}

.avatar-wrapper li {
  list-style: none;
  display: inline-block;
  width: 45px;
  height: 40px;
  transition: all 0.3s ease;
}
.avatar-wrapper li:hover{
  background: #F6C800;
  border-radius: 5px;
}
.avatar-wrapper li.selected{
  background: #F6C800;
  border-radius: 5px;
}
.avatar-wrapper li:active,.avatar-wrapper li:focus{
  background: #F6C800;
  border-radius: 5px;
}
.legend.pull-left {
  display: flex;
  flex-direction: column;
}

.legend.pull-left li {
  list-style: none;
  display: flex;
  align-items: center;
}

li > .status.available {content: '';width: 10px;height: 10px;background: greenyellow;border-radius: 20px;margin-right: 5px;}

li > .status.not-available {
  content: '';
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 20px;
  margin-right: 5px;
}
.container-timeline ul {
  margin: 0;
  margin-top: 20px;
  list-style: none;
  position: relative;
  padding: 1px 100px;
  color: #fff;
  font-size: 13px;
  height: 275px;
  overflow-y: auto;
  /* max-height: 350px;
  overflow-y: auto; */
  margin-bottom: 40px !important;
}
.container-timeline ul:before {
  /* content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  border-left: 2px dashed #ccc; */
  content: "";
  width: 1px;
  height: 89%;
  left: calc(100% / 2 + 18px);
  position: absolute;
  border-left: 2px dashed #ccc;
  top: 11px;
}
.container-timeline ul li {
  margin-top: 10px;
  position: relative;
  margin-left: 30px;
  background: #56CCF2;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #2F80ED, #56CCF2);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #2F80ED, #56CCF2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


  padding: 14px;
  border-radius: 6px;
  width: 250px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08);
}
.container-timeline ul li:not(:first-child) {
  margin-top: 60px;
}
.container-timeline ul li > span {
  width: 2px;
  height: 100%;
  background: #2196F3;
  left: -30px;
  top: 0;
  position: absolute;
}
.container-timeline ul li > span:before, .container-timeline ul li > span:after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #2196F3;
  position: absolute;
  background: #fff;
  left: -3px;
  top: 0;
}
.container-timeline ul li span:after {
  top: 100%;
}
.container-timeline ul li > div {
  margin-left: 10px;
}
.container-timeline div .title, .container-timeline div .type {
  font-weight: 600;
  font-size: 12px;
}
.container-timeline div .info {
  font-weight: 300;
}
.container-timeline div > div {
  margin-top: 5px;
}
.container-timeline span.number {
  height: 100%;
}
.container-timeline span.number span {
  position: absolute;
  font-size: 10px;
  left: -35px;
  font-weight: bold;
}
.container-timeline span.number span:first-child {
  top: -20px;
}
.container-timeline span.number span:last-child {
  top: 100%;
}
span.number span {
  color: #2196F3;
}
.dropzone {
  background: white;
  border-radius: 5px;
  border: 2px dashed rgb(0, 135, 247);
  border-image: none;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.document-content{
  position: relative;
}
.document-content .app-loader {
  right: unset !important;
  bottom: unset !important;
}
.dragdropfile {
  border: 2px dashed #3d82be !important;
  border-radius: 2px;
  min-height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.dragdropfile .main-text {
  font-weight: 600;
  font-size: 18px;
  color: #bdbdbd;
}

.dragdropfile button.btn.btn-primary {
  margin-top: 10px;
}
.dragdropfile{
  transition: all 0.3s ease;
}
.dragdropfile:hover{
  background: #f4f4f4;
}
.document-dropzone .post-file-previews{
  padding: 7px;
}
.document-dropzone .post-file-dropzone-scrollbar{
  height: auto !important;
}
.d-flex{
  display: flex;
}
.justify-content-center{
  justify-content: center;
}
#detail_schedule .fa-calendar{
  position: absolute;
  left: 12px;
  background: #fea50b;
  color: #fff;
  padding: 16px;
  transform: skew(-12deg, 0deg);
  border-radius: 3px;
}
#detail_date button.close {
  position: absolute;
  right: 10px;
  top: 10px;
}
#detail_date .modal-content{
  height: 90vh;
}
#detail_schedule i.fa.fa-chevron-right {
  position: absolute;
  right: 25px;
  font-weight: 500;
  color: gray;
  transform: rotate(90deg);
  transition: all 0.3s ease;
}

#detail_schedule .tanggal.collapsed i.fa.fa-chevron-right {
  transform: rotate(0deg);
}
.header-document-project{
  font-size: 21px;
  font-weight: 600;
}
/* empty */
.empty-state {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width:100%;
  filter: grayscale(100%);
}
.empty-state img{
  width:64px;
}
.icon-wrapper img {
  margin-bottom: 5px;
}
.icon-wrapper {
  text-align: center;
  width: 64px;
  font-size: 13px;
  font-weight: 600;
  height: 90px;
}
.icon-wrapper:hover {
  filter: grayscale(100%);
  cursor: pointer;
}
.line-dashed {
  content: '';
  border: 1px dashed gray;
  height: 210px;
  width: 0;
  position: absolute;
  left: 57%;
}
label.label_share {
  font-weight: 600;
  font-size: 15px;
}

@media (max-width: 1191px){
  .l_columns-5{
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1003px){
  .l_columns-5{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 813px){
  .l_columns-5{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 422px){
  .l_columns-5{
    grid-template-columns: repeat(1, 1fr);
  }
}

.schedule-wrapper.container-timeline {
  position: relative;
  margin-top: 85px;
  opacity: 0;
  transition: all 0.3s ease;
  height: 0;
}
.schedule-wrapper.container-timeline.show{
  opacity: 1;
  height: auto;
}
.person-selected-wrapper {
  background: aliceblue;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding:0 10px;
}
.tag-action {
  /* width: fit-content; */
  display: inline-flex;
  margin: 5px;
  align-items: center;
  background: #ccc;
  padding: 0 5px;
  border-radius: 5px;
}
.tag-wrapper {
  height: auto;
  max-height: 100px;
  overflow-y: auto;
}
.d-none{
  display: none;
}
.p-3{
  padding: 1rem;
}
.justify-content-end{
  justify-content: flex-end;
}


/* TEMPLATE TABLE ACTUAL */
#actual-table tr td{
  white-space: nowrap;
  padding: 5px 10px;
  text-align: center;
  transition: all 0.3s ease;
}
#actual-table tr.row-task{
  border:1px solid #ccc;
}
#actual-table td.task {
text-align: left;
}
.isHeader-tr td{
  background: #00B848;
}
.date-milestone{
  text-align: center !important;
}
#actual-table td.milestone {
text-align: left;
background:#00B848;
color:#fff;
/* border:1px solid #000; */
border:0;
font-weight:600;
}
#actual-table td.planning{
background:#C5CCDE;
color:#333;
}
#actual-table td.bg-red,
#actual-table .bg-red{
background:#FFE4D4;
color:#CB313E;
padding: 5px 10px!important;
}
.editable._focus{
  color: #333 !important;
  transition: all 0.4s ease !important;
  background: rgb(255, 239, 119) !important;
  background-color: rgb(255, 239, 119) !important;
}
#actual-table td.week{
background:#efeeee;
font-weight:700;
font-size: 12px;
color:#FF9400;
min-width:30px;
min-height: 28px;
height: 28px;
}
#actual-table td.bg-green{
background:#BFE4B0;
color:#333;
font-weight:700;
}
#actual-table td.total_calender{
  background:#eee;
  color:#FF9400;
  font-weight:700;
}
.sticky-col_1{
  left: 0px !important;
  text-align: left !important;
}
.sticky-col_1.open_child i.fa.fa-chevron-right {
  transform: rotate(45deg);
}
.sticky-col_1 i.fa.fa-chevron-right {
  cursor: pointer;
  /* position: absolute;
  right: 10px;
  top: 23px; */
  transition: all 0.3s ease;
}

.sticky-col_2{
  left: 47px !important;
  white-space: normal !important;
  max-width: 360px;
  min-width: 360px;
  border: none;
  max-height: 40px;
}
.row-task-top .sticky-col_2,
.row-task-bottom .sticky-col_2,
.row-task-top .sticky-col_3,
.row-task-bottom .sticky-col_3{
  border-right: 2px solid #eee !important;
}
.sticky-col_3{
  /* left: 540px !important; */
  left: 405px !important;
}
.sticky-col_4{
  /* left: 640px !important; */
  left: 488px !important;
}
.sticky-col_5{
  /* left: 740px !important; */
  left: 575px !important;
}
.sticky-col_6{
  /* left: 786px !important; */
  left: 617px !important;
}
.sticky-col_7{
  /* left: 886px !important; */
  left: 646px !important;
}
td.sticky-cell.sticky-col_7:after {
  position: absolute;
  content: '';
  background: #333;
  width: 1px;
  height: 100px;
  right: 0px;
  top: 0px;
}
.row-task-top td {
  border-top: 1px solid #333;
  border-right: 1px solid #eee;
}
tr.row-task-top{
  border-top: 1px solid #333 !important;
}
tr.row-task-bottom{
  border-bottom: 1px solid #333;
}
.row-task td.border-right{
  position: relative;
  border-right: unset !important;
}
.border-right{
  position: relative;
}
.border-right:after{
  position: absolute;
  content: '';
  background: #9c9c9c;
  width: 1px;
  height: 100%;
  right: 0px;
  top: 0px;
}
.sticky-top-1,
.sticky-row .week{
  position: sticky !important;
  top: 0;
  z-index: 15;
}
.sticky-top-2 td{
  position: sticky;
  top: 28px;
  z-index: 15;
  background: #fff;
}
.sticky-top-3 td{
  position: sticky;
  top: calc(28px * 2);
  z-index: 15;
}
.sticky-top-4 td{
  position: sticky;
  top: calc(28px * 3);
  z-index: 9;
}

.milestone-progress{
  background: #00B848;
  color: #fff;
  border: 0;
  font-weight: 600;
}
.z-20{
  z-index: 20 !important;
}
.sub-task-1{
  margin-left: 20px;
}
.sub-task-2{
  margin-left: 30px;
}
.sub-task-3{
  margin-left: 40px;
}
.sub-task-4{
  margin-left: 50px;
}
.sub-task-5{
  margin-left: 60px;
}

td.task.subtask-1 {
  padding-left: 30px!important;
}
td.task.subtask-2 {
  padding-left: 60px!important;
}
td.task.subtask-3 {
  padding-left: 50px!important;
}
td.task.subtask-4 {
  padding-left: 120px!important;
}
td.task.subtask-5 {
  padding-left: 150px!important;
}
#actual-table tr td.date {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 3px;
}
#actual-table .bg-white{
  background:#fff;
  color:#fff;
  padding: 5px 10px!important;
}
/* END TEMPLATE TABLE ACTUAL */
.text-bold{
  font-weight: 700;
}
/* color picker */
.title-color{
  text-align:center;
  font-weight:600;
  width:100%;
  padding-top:10px;
}
.colorSelector{
	width: 100%;
	min-height: 35px;
	display: inline;
}
.colorSelector .buttonContainer{
	display: inline-block;
}
.colorSelector input[type="radio"]{
	display:none;
	height: 0;
	width: 0;
}
.colorSelector label:hover .colorOption {
    transform: scale(1.25);
}

.buttonContainer input:checked ~ .colorOption{
	transform: scale(1.6);
}

.colorOption {
    background: #4CAF50;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    transition: all 0.15s ease;
    margin: 15px
}

.colorOption.color1 {
    background: #3ae374;
}
.colorOption.color2 {
    background: #fffa65;
}
.colorOption.color3 {
    background: #ff4d4d;
}

#nama_project:after{
  position: absolute;
  content: '';
  bottom: -5px;
  left: 0px;
  height: 5px;
  width: 100%;
  background: #fff;
}
.start-date-week td:before{
  position: absolute;
  content: '';
  bottom: -2px;
  left: 0px;
  height: 2px;
  width: 100%;
  background: #ffffff;
}
.plan-week td:before{
  position: absolute;
  content: '';
  bottom: -2px;
  left: 0px;
  height: 2px;
  width: 100%;
  background: #C5CCDE;
}

.remove-member-role.delete:hover{
  background: #d9534f;
  color: #fff;
  border: 1px solid #d9534f;
}
.remove-member-role.delete{
  cursor: pointer;
  min-width: 28px;
  background: #fff;
  color: #a1a3a5;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align: central;
  text-align: center;
  margin: 0 5px;
  padding: 4px 0px;
  border: 1px solid #e2e7f1;
}
.cusbtn-bb:hover{
  background: #0c8989;
}
.cusbtn-bb {
  transition: all 0.3s ease;
  background: #16a2a3;
  padding: 5px 15px;
  border-radius: 30px;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}

tr#precentage_plan td:first-child,
tr#week_number td:first-child,
tr#precentage_actual td:first-child,
tr#precentage_deviasi td:first-child
 {
  position: sticky;
  left: 0;
  background: #1d2731;
}

tr#precentage_plan td:first-child:after,
tr#week_number td:first-child:after,
tr#precentage_actual td:first-child:after,
tr#precentage_deviasi td:first-child:after{
  content: '';
  position: absolute;
  width: 1px;
  right: -1px;
  top: 0px;
  height: 100%;
  background: #eeeeee;
}
tr#precentage_plan td:first-child:before,
tr#week_number td:first-child:before,
tr#precentage_actual td:first-child:before,
tr#precentage_deviasi td:first-child:before{
  content: '';
  position: absolute;
  width: 1px;
  left: -1px;
  top: 0px;
  height: 100%;
  background: #eeeeee;
}

thead.no-wrap tr th,
.no-wrap {
  white-space: nowrap;
}

.file-icon-preview img {
    width: 100%;
    max-height: 135px;
    object-fit: contain;
}
.modal-dialog.custom-width{
  margin: 60px auto;
}

.file-icon-preview i{
  font-size: 50px !important;
}
.file-icon-preview i.fa-file-pdf-o,
.file-name i.fa-file-pdf-o{
  color: #d6090a !important;
}
.file-icon-preview i.fa-file-word-o,
.file-name i.fa-file-word-o{
  color: blue !important;
}
.file-icon-preview i.fa-file-excel-o,
.file-name i.fa-file-excel-o{
  color: #31a031 !important;
}

.dropdown-item-icon a.dropdown-item i{
  color: #4e5e6a;
}

.dropdown-item-icon a.dropdown-item:hover i{
  color: #007bff;
}
.dropdown-item-icon a.dropdown-item{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  padding: 3px 10px;
}

.dropdown-item-icon a.dropdown-item{
  display: flex;
  width: 100%;
  align-items: center;
}

/* td[fi] */
.tree-icon.tree-folder{
  display: none;
}
tr.datagrid-header-row td div span,
.datagrid-header-rownumber {
  font-weight: 600;
  color: #4e5e6a;
}
.datagrid-header-over{
  background: #fff !important;
  background-color: #fff;
}
.tree-icon.tree-file{
  display: none;
}
td[field="weight"],
td[field="deadline"],
td[field="start_date"],
td[field="options"],
td[field="progress"],
td[field="task_no"]{
  text-align: center;
}
td[field="task_no"],
td[field="title"],
td[field="start_date"],
td[field="deadline"],
td[field="assign_to"],
td[field="collaborators"],
td[field="weight"],
td[field="progress"],
td[field="status"],
td[field="options"] {
  border-right: 1px solid #eeeeee !important;
}
td[field="collaborators"] div{
  white-space: nowrap !important;
}
td[field="options"] a {
  cursor: pointer;
  min-width: 28px;
  background: #fff;
  color: #a1a3a5;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align: central;
  text-align: center;
  margin: 0 5px;
  padding: 4px 0px;
  border: 1px solid #e2e7f1;
}

td[field="options"] a:hover {
  background: #2ac2d4;
  color: #fff;
  border: 1px solid #2ac2d4;
}

.datagrid-wrap.panel-body.panel-body-noheader,
.datagrid-view
/* .datagrid-body */
{
  /* height: 58vh !important; */
  height: calc(100vh - 330px) !important;
}

.datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber{
  padding: 8px 5px !important;
}
/* table.datagrid-btable,
.datagrid-header-inner {
  width: 100% !important;
} */
.datagrid-view2 .datagrid-header .datagrid-header-inner table.datagrid-htable{
  width: calc(100% - 8px);
}
/* table.datagrid-htable {width: calc(100% - 8px);} */

.datagrid-row-selected {
  background: unset !important;
  color: unset !important;
}
table.datagrid-htable {
  height: 50px !important;
}
.datagrid-header .datagrid-header-inner table.datagrid-htable {
  /* width: calc(100% - 8px); */
}
/* span.tree-indent {
  display: none;
} */
.tree-node{
  display:flex;
}
/* page */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzc.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc9.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc9.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');
}
.animate-bar {
  text-align: center;
  margin-top: 30px;
}
.bar {
  width: 3px;
  height: 22px;
  background-color: #5c5673;
  display: inline-block;
}
.bar:nth-child(1) {
  animation: upNdown 700ms infinite linear;
}
.bar:nth-child(2) {
  animation: upNdown 700ms infinite linear;
  animation-delay: 200ms;
}
.bar:nth-child(3) {
  animation: upNdown 700ms infinite linear;
  animation-delay: 400ms;
}
@keyframes upNdown {
  0% {
    transform: translate(0, 0);
  }
  35% {
    transform: translate(0, -5px);
  }
  70% {
    transform: translate(0, 5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.under-cons {
  text-align: center;
  font-family: Roboto;
}
.under-cons h2 {
  color: #5c5673;
}

._treegrid-search{
  display: inline-block;
}
.custom-toolbar._treegrid{
  display: flex;
  justify-content: end;
  flex-direction: row-reverse;
}
.datagrid-header-row td{
  border-top: 1px solid #dfdfdf !important;
}
tbody tr.datagrid-row td[field="task_no"] {
  text-align: left;
}
.panel.datagrid.panel-htop{
  overflow: auto !important;
}
input[type="radio"]+label {
  padding: 5px;
  color: #00BA95;
}
input[type="radio"]:checked+label {
  color: #fff;
  background: #00BA95;
}
.toggle-radios[type="radio"] {
  display: none;
}
.file-row:hover {
  background: #cccccc78;
}
.file-row {
  border-bottom: 1px solid #e1e1e1;
  width: 100%;
  height: 50px;
  cursor: pointer;
}
.file-row:last-of-type {
  border-bottom: 0;
}
.file-row .row {
  padding-top: 15px;
  padding-left: 15px;
}
.file-icon {
  margin-right: 10px;
}
.header-file-list {
  padding: 10px;
  font-weight: 700;
  position: relative;
  cursor:pointer;
}
.header-file-list.asc:after{
  font-family: FontAwesome;
  content: "\f107";
  float: right;
}
.header-file-list.desc:after{
  font-family: FontAwesome;
  content: "\f106";
  float: right;
}
.row.file-legend {
  margin: 0 10px;
}
.tree-hit {
  position: relative;
  min-width: 15px;
}

/* tab active */
#page-wrap:after,
#page-wrap:before {
  content: "";
  width: 90%;
  position: absolute;
  height: 20px;
  box-shadow: 0 20px 20px #000;
  bottom: 25px;
  transform: rotate(5deg);
  z-index: -1;
  right: 5px
}
 #page-wrap:after {
    transform: rotate(-5deg);
    left: 5px;
  }
 .tab-content-hold {
  width: 100%;
  float: left;
  height: 0em;
  overflow: hidden;
  transition: 0.5s;
  margin-top: 15px;
}
input[type="radio"]:checked+label.tabb{
  background:#2ecc71 !important;
  color: #fff;
}
#tab1:checked~#tab1tab {
  height: 175px;
}

#tab2:checked~#tab2tab {
  height: 85px;
  margin: 0;
}
.tab-hold input[type="radio"]{
  display: none;
}
.tab-hold label.tabb {
  left: 10px;
  position: relative;
  padding: 6px 12px;
  font-size: 15px;
  /* min-width: 150px; */
  text-align: center;
  border: 1.5px solid #2ecc71;
  margin: 5px;
  cursor: pointer;
  transition: all 0.2s;
}

.datavisual .card{
  padding: 15px;
  min-height: 215px;
}
g[aria-labelledby="id-66-title"]{
  display: none;
}
.rightwrapper-project {
  /* width: 40%;
  position: absolute;
  top: 0;
  right: 0; */
  padding: 20px;
  position: relative;
}
.title-project h5 {
  display: inline-block;
  background: #00b393;
  color: #fff;
  padding: 10px 15px;
  min-width: 150px;
  text-align: center;
  border-radius: 5px 5px 50px 0px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: relative;
}
.title-project .status-project {
  position: absolute;
  right: -60px;
  background: orange;
  text-transform: none !important;
  font-weight: 500;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 30px;
  bottom: 0;
}
.rightwrapper-project .desc p{
  text-align: justify;
  padding-right: 15px;
  border-bottom: 1px solid #80808014;
}
.chartwrapper{
  /* width: 60%; */
  position: relative;
}
.chartwrapper .icon-chart{
  /* width: 30px; */
  /* height: 30px; */
  /* background: #627b911f; */
  position: absolute;
  top: calc(50% - 61.33px/2);
  left: calc(50% - 80.89px/2);
  /* border-radius: 100%; */
  text-align: center;
}
.icon-chart h5 {
  font-size: 40px;
  position: relative;
  margin: 0;
  color: #00b393;
}
.text-italic{
  font-style: italic;
}

.rightwrapper-project .item-desc, .item-desc {
  display: inline-block;
  margin-top: 10px;
  margin-right: 15px;
}

.item-desc .title-desc {
  font-weight: bold;
  font-size: 11px;
}

.item-desc .content-desc {
  font-style: italic;
  margin-top: 5px;
  min-height: 19.13px;
}
.text-normal{
  font-style: normal;
}
.title-projectmember {
  margin-top: 15px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1.5px solid #00b393;
  display: inline-block;
}
.list-project-member .item-member {
  margin-top: 10px;
  display: inline-flex;
  margin-right: 5px;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
  border-radius: 4px;
  cursor: pointer;
  padding: 10px;
}
.item-member span {
  font-size: 11px;
  background: #6771dc;
  color: #fff;
  padding: 4px 5px;
  border-radius: 3px;
}
.list-project-member .item-member:hover{
  background: #f3f3f3;
}
.wrapper-project-member{
  width: 50%;
}
.list-project-member{
  /* max-width: calc(100% / 2); */
  max-height: 235px;
  overflow: auto;
}
.item-member a.member-name {
  margin-bottom: 5px;
  transition: all 0.3s ease;
}
.item-member a.member-name:hover {
  font-weight: 500;
  transform: scale(1.1);
}
.item-member a.role-name{
  transition: all 0.3s ease;
}
.item-member a.role-name:hover{
  transform: scale(1.1);
}
/* list project visual data */
.project-card-wrapper {
  width: 95%;
  max-width: 100%;
  margin: 1.1em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
  grid-gap: 20px;
  align-items: stretch;
}
.project-card {
  /* background: #02AAB0;
  background: -webkit-linear-gradient(to right, #02AAB0, #00CDAC);
  background: linear-gradient(to right, #02AAB0, #00CDAC); */
  background: #16222A;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #3A6073, #213844);
  background: linear-gradient(to left, #3A6073, #213844);
  color: #f2f2f2;
  padding: 10px;
  border-radius: 4px;
  /* cursor: pointer; */
  box-shadow: 1px 2px 4px 0px #0003;
  opacity: 0.9;
  transition: all 0.3s ease;
  /* max-width: 300px; */
  min-height: 200px;
  position: relative;
}
.project-card .item-desc{
  margin-top: 20px;
}
.project-card:hover{
  opacity: 1;
}
.project-card .project-name {
  font-weight: 600;
  font-size: 15px;
}
.content-desc.bottom {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-style: normal;
  font-weight: normal;
}
span.badge.badge-warning {
  background: #ecc22b;
}
span.badge.badge-danger {
  background: #a94442;
}
.wrapper-text {
  display: inline-block;
  padding: 10px;
  margin-right: 30px;
}

.infographic-wrapper-project {
  padding: 1rem;
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

.wrapper-text .title-text {
  font-size: 20px;
  font-weight: bold;
  color: #4a48bd;
  margin-bottom: 5px;
  min-width: 195px;
  text-align: center;
  border-bottom: 1px solid #8080802e;
}
.wrapper-text .title-text span{
  font-size: 14px;
  font-weight: normal;
}
.icon-compare img {
  width: 60px;
  margin: 0 15px;
}
.actual-planning .items {
  border: 1px solid;
  margin: 8px auto;
  padding: 5px;
  border-radius: 3px;
  max-width: 130px;
}
.items.planning {
  color: #00b44b;
  font-weight: bold;
}
.items.planning {
  color: #00b44b;
  font-weight: bold;
}

.items.actual {
  color: #ff6d15;
  font-weight: 600;
}
.infographic-text {
  max-width: 200px;
  font-size: 16px;
  /* margin-left: 30px; */
  padding: 0px 10px;
  border-left: 1.2px solid #4a48c3;
}
span.progress_ {
  font-weight: bold;
  font-size: 20px;
  color: #00b44b;
}
.actual-planning.now .items{
  border-radius: 2px 15px 2px 2px;
  text-align: left;
  white-space: nowrap;
}
.actual-planning .items{
  border-radius: 15px 2px 2px 2px;
  text-align: right;
  white-space: nowrap;
}
.icon-back{
  margin-right: 10px;
  width: 20px;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.2s ease;
  font-size: 15px;
}
.icon-back:hover{
  color: gray;
}
.infographic-wrapper-project .wrapper-button{
  position: relative;
  left: 30px;
  bottom: -15px;
}
.btn.btn-custom.view-detail-project {
  color: #fff;
  background: #00b393;
  border-radius: 50px !important;
  cursor: pointer;
  opacity: 0.9;
  transition: all 0.3s ease;
}
.btn.btn-custom.view-detail-project {
  opacity: 1;
}
.loader-rightwrapper-project.show{
  opacity: 1;
  visibility: visible;
}
.loader-rightwrapper-project{
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: #fff;
  z-index: 2;
  opacity: 0;
  transition: all 0.5s ease;
  visibility: hidden;
}
table#issue_log_datatable tbody td{
  background-color: transparent !important;
}
table#issue_log_datatable.dataTable.display tbody tr.bg-orange td,
table#issue_log_datatable.dataTable.display tbody tr.bg-green td,
table#issue_log_datatable.dataTable.display tbody tr.bg-red td{
  border: 1px solid transparent !important;
}
tr.bg-gray {
  background-color: rgba(0,0,0,.075) !important;
}
tr.bg-blue {
  background-color: #b8daff !important;
}
span.text-color {
  font-weight: 600;
  color: #1e56b1;
}

span.percent_ {
  background: orange;
  color: #3e2800;
  padding: 5px;
  border-radius: 50%;
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid #ffe4b2;
  font-size: 20px;
}
.ml2{
  margin-left: 0.5rem;
}
.align-items-center{
  align-items: center;
}
.rata-rata{
  margin-top: 0.5rem;
}
span.time-done {
  /* background: #00b393; */
  background: orange;
  border: 2px solid #ffe4b2;
  color: #fff;
  font-size: 11px;
  padding: 1px 5px;
  display: inline-block;
  border-radius: 20px;
}
span.percent-lite {
  font-weight: bold;
  font-size: 23px;
  color: #009a7f;
}
span.task-tersisa {
  color: #d40400;
  font-weight: bold;
  border: 1px solid;
  border-radius: 4px;
  padding: 1px 5px;
}
span.total {
  color: #00b393;
  font-weight: bold;
  border: 1px solid;
  border-radius: 4px;
  padding: 1px 5px;
}
.total-task{
  margin-top: 10px;
}
.total-progress {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  font-style: italic;
}
.total-progress label{
  font-weight: bold;
}
.card{
  position: relative;
}

.loader-card.show{
  opacity: 1;
  visibility: visible;
  z-index: 5;
}
.loader-card {
  z-index: -10;
  opacity: 0;
  visibility: hidden;
  transition: all 0.8s ease;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: flex !important;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}

/* bounce loading */
.bouncing-bar {
  display: -webkit-box;
  display: flex;
}

.line {
  height: 20px;
  width: 4px;
  background: #00b393;
  margin-right: 4px;
  border-radius: 6px;
  -webkit-animation: line-bounce 1s infinite ease-in-out;
          animation: line-bounce 1s infinite ease-in-out;
}
.line:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.line:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.line:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.line:nth-child(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

@-webkit-keyframes line-bounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1, 2);
            transform: scale(1, 2);
  }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes line-bounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1, 2);
            transform: scale(1, 2);
  }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/* circle loader */
.circle {
  width: 50px;
  height: 50px;
  border: 6px rgb(221, 221, 221) solid;
  border-top: 6px rgb(199, 199, 199) solid;
  border-radius: 50%;
  -webkit-animation: spin-circle .8s infinite linear;
          animation: spin-circle .8s infinite linear;
}

@-webkit-keyframes spin-circle {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin-circle {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.focus {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--icon-color);
}
.focus:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid #fff;
  top: -6px;
  left: -6px;
  -webkit-animation: focus 1s infinite ease-in-out;
          animation: focus 1s infinite ease-in-out;
}

@-webkit-keyframes focus {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes focus {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.table-overflow-scroll table{
  margin: 0px;
}
.table-overflow-scroll{
  max-height: 230px;
  margin-bottom: 15px;
  margin-top: 10px;
}
th.sticky-top {
  position: sticky;
  top: 0;
  background: #ffed86;
}
div#wrapper-circle-project {
  display: flex;
  overflow-x: auto;
}
.total-user{
  margin-top: 10px;
  margin-right: 2px;
  font-style: italic;
}

/* resume */

.resume {
  /* width: 870px; */
  background: #fbfbfb;
  /* margin: 20px auto; */
  border: 1px solid #bbb;
  box-shadow: 0 0 20px -3px #bbb;
  position: relative;
  display: flex;
}
.resume::before {
  content: "";
  width: 100%;
  height: 6px;
  background: #1C2533;
  position: absolute;
  bottom: 0;
  left: 0;
}
.resume::after {
  content: "";
  display: block;
  clear: both;
}
.resume .base, .resume .func {
  box-sizing: border-box;
  float: left;
}
.resume .base > div, .resume .func > div {
  padding-bottom: 10px;
}
.resume .base > div:last-of-type, .resume .func > div:last-of-type {
  padding-bottom: 0;
}
.resume .base {
  width: 225px;
  padding: 30px 15px;
  background: rgba(238, 238, 238, 0.6);
}
.resume .base .profile {
  background: #1C2533;
  padding: 30px 15px 5px 15px;
  margin: -30px -15px 45px -15px;
  position: relative;
  z-index: 2;
}
.resume .base .profile::after {
  content: "";
  position: absolute;
  background: #1C2533;
  width: 100%;
  height: 30px;
  bottom: -15px;
  left: 0;
  transform: skewY(-5deg);
  z-index: -1;
}
.resume .base .profile .photo img {
  width: 100%;
  border-radius: 50%;
}
.resume .base .profile .photo.danger {
  border: 3px solid #f95555;
  border-radius: 50%;
}
.resume .base .profile .photo.primary {
  border:3px solid #55a6f9;
  border-radius: 50%;
}
.resume .base .profile .photo.warning {
  border:3px solid #f9a855;
  border-radius: 50%;
}
.resume .base .profile .info {
  text-align: center;
  color: #fcfcfc;
}
.resume .base .profile .info .name {
  margin-top: 10px;
  min-width: 200px;
  margin-bottom: 0;
  font-size: 1.5em;
  font-weight: normal;
}
.resume .base .contact div {
  line-height: 24px;
}
.resume .base .contact div a:hover {
  color: #e07a5f;
}
.resume .base .contact div a:hover span::after {
  width: 100%;
}
.resume .base .contact div:hover i {
  color: #e07a5f;
}
.resume .base .contact div i {
  color: #1C2533;
  width: 20px;
  height: 20px;
  font-size: 20px;
  text-align: center;
  margin-right: 15px;
  transition-duration: 0.3s;
}
.resume .base .contact div span {
  position: relative;
}
.resume .base .contact div span::after {
  content: "";
  position: absolute;
  background: #e07a5f;
  height: 1px;
  width: 0;
  bottom: 0;
  left: 0;
  transition-duration: 0.3s;
}
.resume .base .follow .box {
  text-align: center;
  vertical-align: middle;
}
.resume .base .follow .box a {
  display: inline-block;
  vertical-align: text-bottom;
}
.resume .base .follow .box a:hover i {
  background: #e07a5f;
  border-radius: 5px;
  transform: rotate(45deg) scale(0.8);
}
.resume .base .follow .box a:hover i::before {
  transform: rotate(-45deg) scale(1.5);
}
.resume .base .follow .box i {
  display: inline-block;
  font-size: 30px;
  background: #1C2533;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 60px;
  color: #fcfcfc;
  margin: 0 10px 10px 10px;
  transition-duration: 0.3s;
}
.resume .base .follow .box i::before {
  transition-duration: 0.3s;
}
.resume .base .follow .box i.fa::before {
  display: block;
}
.resume .func {
  width: 645px;
  padding: 30px 25px;
}
.resume .func:hover > div {
  transition-duration: 0.3s;
}
.resume .func:hover > div:hover h3 {
  letter-spacing: 1.6px;
}
.resume .func:hover > div:hover h3 i {
  transform: scale(1.2);
}
.resume .func:hover > div:not(:hover) {
  opacity: 0.5;
}
.resume .func h3 {
  transition-duration: 0.3s;
  margin-top: 0;
}
.resume .func h3 i {
  color: #fcfcfc;
  background: #1C2533;
  width: 42px;
  height: 42px;
  font-size: 20px;
  line-height: 42px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  margin-right: 8px;
  transition-duration: 0.3s;
}
.resume .func .work, .resume .func .edu {
  float: left;
}
.resume .func .work small, .resume .func .edu small {
  display: block;
  opacity: 0.7;
}
.resume .func .work ul li, .resume .func .edu ul li {
  position: relative;
  margin-left: 15px;
  padding-left: 25px;
  padding-bottom: 15px;
}
.resume .func .work ul li:hover::before, .resume .func .edu ul li:hover::before {
  animation: circle 1.2s infinite;
}
.resume .func .work ul li:hover span, .resume .func .edu ul li:hover span {
  color: #e07a5f;
}
@keyframes circle {
  from {
    box-shadow: 0 0 0 0px #3d405b;
  }
  to {
    box-shadow: 0 0 0 6px rgba(61, 64, 91, 0);
  }
}
.resume .func .work ul li:first-of-type::before, .resume .func .edu ul li:first-of-type::before {
  width: 10px;
  height: 10px;
  left: 1px;
}
.resume .func .work ul li:last-of-type, .resume .func .edu ul li:last-of-type {
  padding-bottom: 3px;
}
.resume .func .work ul li:last-of-type::after, .resume .func .edu ul li:last-of-type::after {
  border-radius: 1.5px;
}
.resume .func .work ul li::before, .resume .func .work ul li::after, .resume .func .edu ul li::before, .resume .func .edu ul li::after {
  content: "";
  display: block;
  position: absolute;
}
.resume .func .work ul li::before, .resume .func .edu ul li::before {
  width: 7px;
  height: 7px;
  border: 3px solid #3d405b;
  background: #fcfcfc;
  border-radius: 50%;
  left: 3px;
  z-index: 1;
}
.resume .func .work ul li::after, .resume .func .edu ul li::after {
  width: 3px;
  height: 100%;
  background: #3d405b;
  left: 5px;
  top: 0;
}
.resume .func .work ul li span, .resume .func .edu ul li span {
  transition-duration: 0.3s;
}
.resume .func .work {
  width: 42%;
}
.resume .func .edu {
  width: 58%;
}
.resume .func .skills-soft ul {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.resume .func .skills-soft ul li {
  position: relative;
}
.resume .func .skills-soft ul li:hover svg .cbar {
  stroke: #e07a5f;
  stroke-width: 4px;
}
.resume .func .skills-soft ul li:hover span, .resume .func .skills-soft ul li:hover small {
  transform: scale(1.2);
}
.resume .func .skills-soft ul li svg {
  width: 95%;
  fill: transparent;
  transform: rotate(-90deg);
}
.resume .func .skills-soft ul li svg circle {
  stroke-width: 1px;
  stroke: #cdcdcd;
}
.resume .func .skills-soft ul li svg .cbar {
  stroke-width: 3px;
  stroke: #1C2533;
  stroke-linecap: round;
}
.resume .func .skills-soft ul li span, .resume .func .skills-soft ul li small {
  position: absolute;
  display: block;
  width: 100%;
  top: 52%;
  transition-duration: 0.3s;
}
.resume .func .skills-soft ul li span {
  top: 40%;
}
.resume .func .interests-items {
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
  border: 1px solid #cdcdcd;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.resume .func .interests-items div {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.resume .func .interests-items div:hover i {
  transform: scale(1.2);
}
.resume .func .interests-items div:hover span {
  color: #e07a5f;
  transition-duration: 0.3s;
}
.resume .func .interests-items div i {
  font-size: 45px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  color: #1C2533;
  transition-duration: 0.3s;
}
.resume .func .interests-items div i.guitar {
  display: block;
  margin: 0 auto;
}
.resume .func .interests-items div i.guitar svg {
  width: 50px;
  height: 50px;
  margin-top: 5px;
  fill: #1C2533;
}
.resume .func .interests-items div span {
  display: block;
}
.resume ul {
  list-style-type: none;
  padding: 0;
}
.resume h3 {
  color: #3d405b;
  margin: 10px 0;
  text-transform: uppercase;
  font-size: 18px;
}
.circle-danger {
  width: 16px;
  height: 16px;
  background: #f98989;
  border-radius: 40px;
  margin-right: 5px;
}

ul.nt li {
  display: flex;
  margin: 0 5px;
  align-items: center;
}

ul.nt {
  padding: 0;
  float: right;
  display: flex;
}

.circle-primary {
  width: 16px;
  height: 16px;
  background: #89bff9;
  border-radius: 40px;
  margin-right: 5px;
}
.circle-warning {
  width: 16px;
  height: 16px;
  background: #FFD186;
  border-radius: 40px;
  margin-right: 5px;
}

#header-role .sticky-top:after{
  position: absolute;
  height: 1px;
  left: 0;
  width: 100%;
  content: '';
  background: white;
  top: -1px;
}
.file-list{
  display: flex;
    align-items: center;
}

.chart-small-top {
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 10px;
}
.chart-small-top .chart-circle canvas {
  /* background: #08090a52; */
  background: transparent;
}

.chart-small-top span.percent.chart-label {
  font-size: 24px;
  top: -7px;
}
.chart-main tspan {
  fill: #fff;
}

#visual-service .project-card{
  background: #136a8a;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #267871, #136a8a);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #267871, #136a8a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.chart-main textPath {
  fill: #fff;
}
.status-summary {
  font-size: 18px;
  border: 1.1px solid #a94442;
  padding: 2px 15px;
  border-radius: 30px;
  font-weight: 600;
  color: #a94442;
  display: inline-block;
}
.text-desc span.text-danger {
  font-weight: bold;
  font-style: italic;
}
.text-desc {
  border-left: 1.2px solid #454ebb;
  padding-left: 10px;
}

.text-desc span.user {
  font-weight: bold;
  font-size: 16px;
  color: #454ebb;
}

span.count-project,
span.count-task {
  display: inline-block;
  background: #f3a006;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: bold;
}
#kesimpulan.show{
  height: 130px;
  display: flex !important;
  margin-top: 15px;
}
#kesimpulan{
  height: 0px;
  overflow: hidden;
  transition: all 0.3s ease;
}
#kesimpulan .left,
#kesimpulan .right{
  padding: 10px;
}
tr.bg-green {
  background: #c3e6cb !important;
  /* background: #00B848 !important;
  color: #fff; */
}