.dropdown_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-color: transparent;
  display: none;
}

.dropdown_overlay.active {
  display: block;
}

/* gantt workdload css start here*/
.tablegantt .thspace {
  padding: 4px 12px;
}

.tablegantt tr td {
  padding: 2.5rem 0.5rem !important;
}

.tableganttr table tr td:last-child,
.tableganttr table tr th:last-child {
  border-right: 1px solid #0000000D !important;
}

.thfirst {
  border-bottom: 0px !important;
}

.lilast {
  margin-right: 0px !important;
}

.workload1 {
  margin-top: 15rem !important;
}

.workloadrow {
  align-items: center;
  width: 95%;
  margin: 13.5rem auto 10px auto;
}

.workloadrow .col-md-6,
.workloadrow1 .col-md-12 {
  padding: 0px;
}

.iconset {
  margin-top: -8px;
}

.iconset span:last-child {
  margin-right: 0px;
}

.iconset span {
  margin-right: 2.2rem;
}

.form-select {
  display: block;
  width: 70%;
  border-radius: 3px;
  height: 28px;
  border: 1px solid #70707026;
  color: #616264;
  font-weight: 400;
  font-size: 13px;
}

input.lochsr1 {
  color: #505D6F;
    font-weight: 400;
    font-size: 13px;
    height: 35px;
    border-radius: 3px;
    border: 1px solid #70707026;
    margin-top: 0px;
    width: 90%;
    background: #ffffff url(../icons/search-1.svg) right 15px center no-repeat;
    padding: 0px 15px;
    background-size: 12px;
}

.form-group1 .selected {
  border: 1px solid #70707026;
  border-radius: 3px;
  margin-bottom: 0px;
  color: #616264;
  position: relative;
  height: 35px;
  font-weight: 400;
  font-size: 1.3rem;
  padding: 0rem 1rem;
  display: flex;
  align-items: center;
}
.form-group1 .selected::after {
  top: 9px;
  right: 8px;
  width: 18px;
}

textarea:focus,
input:focus,
select:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

select option {
  font-size: 14px;
  color: #000;
  line-height: 2;
}

select:focus {
  -webkit-box-shadow: none;
  box-shadow: none !important;
  border-color: #70707026 !important;
}

.custom-select .box12 {
  height: 28px !important;
  width: 60% !important;
  border-radius: 3px !important;
  border: 1px solid #70707026 !important;
  margin-top: 0px;
  margin-bottom: 0px !important;
}

.custom-select .box12 img {
  top: 10px !important;
}

.tablecal {
  width: 95%;
  border: 1px solid #0000000D;
  margin: 0 auto;
}

.tablecal1 tr td {
  font-size: 13px !important;
  color: #1E2022 !important;
  font-weight: 400 !important;
}

.tablecal1 .thspace {
  border-bottom: 0px !important;
  border-top: 0px !important;
  font-size: 15px;
  text-transform: none !important;
  color: #616264 !important;
  font-weight: 400;
  border-right: 1px solid #0000000D !important;
}

.gantt .tablecal1 .thspace p,
.gantt .tablecal1 .thspace span,
.workload .tablecal .thspace p,
.workload .tablecal .thspace span 
{
  font-size: 15px;
  color: #2762ed;
  display: inline;
  font-weight: 600;
}
.gantt .tablecal1 .thspace span.white,
.workload #benefitsdrop .table .thspace span.white,
.workload #benefits .table .thspace span.white
{
   color: #fff;
}
.gantt .tablecal1 .thspace select,
.workload .tablecal1 .thspace select
{
  margin-left: 1.5rem;
  border: 1px solid #cbcbcb;
  font-size: 14px;
  padding: 2px 10px;
}
table .thspace {
  padding: 14px 0px;
}

.tablecal .table {
  margin-bottom: 0px;
}

.tablecal table tr th p {
  font-size: 12px;
}

.tablecal table tr th {
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  border-bottom: 1px solid #0000000D;
  color: #000000;
  /* border-right: 1px solid #0000000D; */
  text-transform: uppercase;
  position: relative;
}

.tablecal table tr td:last-child,
.tablecal table tr th:last-child {
  border-right: 0px solid #0000000D;
}

.tablepro2 {
  position: absolute;
  top: 248px;
  left: 60%;
}

.tablepro1 {
  position: absolute;
  top: 169px;
  display: flex;
  left: 28%;
}

.task2 {
  width: 100px !important;
}

.task3 {
  border-radius: 5px;
  background: #D1F0F6;
  padding: 8px 0px;
  text-align: center;
  width: 300px;
  color: #616264;
  font-size: 14px;
  font-weight: 500;
}

.task1 {
  border-radius: 5px;
  padding: 8px 0px;
  text-align: center;
  width: 200px;
  height: 40px;
  margin-right: 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.hide1 {
  display: none;
  position: absolute;
  margin-top: 30px;
  background-color: #ffffff;
  box-shadow: 0px 3px 14px #00000029;
  border: 1px solid #70707003;
  border-radius: 2px;
  left: 35%;
  z-index: 2;
  padding: 15px;
}

.hide3,
.hide4 {
  display: none;
  position: absolute;
  margin-top: 30px;
  background-color: #ffffff;
  box-shadow: 0px 3px 14px #00000029;
  border: 1px solid #70707003;
  border-radius: 2px;
  top: 50px;
  left: 70%;
  z-index: 2;
  padding: 15px;
}

.hide4 {
  display: none;
  position: absolute;
  margin-top: 30px;
  background-color: #ffffff;
  box-shadow: 0px 3px 14px #00000029;
  border: 1px solid #70707003;
  border-radius: 2px;
  top: 10px;
  left: 3%;
  z-index: 2;
  padding: 15px;
}

.hide5 {
  display: none;
  position: absolute;
  margin-top: 30px;
  background-color: #ffffff;
  box-shadow: 0px 3px 14px #00000029;
  border: 1px solid #70707003;
  border-radius: 2px;
  top: 10px;
  left: 60%;
  z-index: 2;
  padding: 15px;
}

.hide6 {
  top: 2px !important;
  left: 14% !important;
}

.hide7 {
  top: 2px !important;
  left: 50% !important;
}

.hide8 {
  top: 2px !important;
  left: 70% !important;
}

.phide {
  font-weight: normal !important;
  margin-top: 10px;
}

.onhover {
  cursor: pointer;
}

.task1:hover+.hide1,
.onhover:hover+.hide2,
.collapsetip:hover+.hide3,
.progresstip:hover+.hide4,
.progresstip1:hover+.hide5,
.progresstip2:hover+.hide6,
.progresstip3:hover+.hide7,
.progresstip4:hover+.hide8 {
  display: block;
  color: #616264;
  font-size: 13px;
  font-weight: bold;
}

.tablepro .progress-bar, 
.tablepro .whiteprog-bar, 
.tablepro .redprog-bar
{
  border-radius: 8px;
  width: 100%;
  margin-top: 1rem;
}
.tablepro .whiteprog-bar, 
.tablepro .redprog-bar
{
  margin-top: 0rem;
  width: 5vw;
  background: red;
  position: absolute;
  top: 10px;
  z-index: 4;
  margin-left: 30rem;
  height: 10px;
  display: none;
}
.tablepro .whiteprog-bar
{
  background-color: #fff;
  border-radius: 0px;
}
.progress-bar1 {
  background: #1FC875;
}

.progress-bar4 {
  background: #1CA9ED;
}

.progress-bar2 {
  background: #F6BE75;
}

.tablepro .progress {
  height: 10px;
  background-color: transparent;
  overflow: visible;
}

.pright {
  margin-right: 180px;
}

.tableproben1 {
  margin-top: 100px;
}
.tablepro {
  width: 100%;
  position: absolute;
  top: 13px;
}
#benefits
{
  max-height: 450px;
  overflow-y: auto;
  overflow-x: hidden;
}
#benefits .resource
{
  margin-bottom: 3rem;
}
#benefits .tableprogian .resource .tablepro
{
  position: relative;
  top: 85px;
}
#benefits table tbody tr:first-child,
#benefitsdrop table tbody tr:first-child,
#benefits table tbody tr:first-child + tr,
#benefitsdrop table tbody tr:first-child + tr
{
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #fff; 
}
#benefits table tbody tr:first-child + tr,
#benefitsdrop table tbody tr:first-child + tr
{
  z-index: 4;
  top: 58px;
}
#benefits .tableprogian .tablepro .textdiv
{
  position: absolute;
  top: -6px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  width: 9.1vw;
}
#benefits .tableprogian .tablepro .textdiv div
{
  background: #F3D2D2;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  float: left;
  margin-top: 3px;
  display: flex;
  align-items: center;
  margin-right: 10px;
}
#benefits table tbody tr td span,
#benefits .tableprogian .tablepro .textdiv p
{
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: text;
}
#benefits table tbody tr td span
{
  color: #fff;
}
.respro .resprogress
{
  font-size: 0.75rem;
  background-color: transparent;
  border-radius: 0.25rem;
}
.resource .progress .progress-bar{
    width: 20.136vw;
    margin-left: 10.978vw;
    height: 10px;
    background: #2762ed;
}
.resource .tablepro .resTimeline
{
  margin-bottom: 2.8rem;
}
.resource .tablepro .taskList .progress
{
  margin-bottom: 0.9rem;
}
.dot1 div {
  background: #8AB8B7 !important;
}

.dot div,
.dot1 div {
  background: #fff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  float: left;
  margin-top: 3px;
  display:flex;
  align-items:center;
  margin-right: 10px;
}
.dot div img,
.dot1 div img
{
   margin-right: 8px;
}
.borderbot {
  border-bottom: 1px solid #0000000D;
}

.tablecal table tr td {
  border-bottom: 0px;
  padding: 4rem 0.5rem;
  font-size: 12px;
  font-weight: normal;
  color: #000000;
  border-right: 1px solid #0000000D;

}
.tablecal table tr td.dot {
  padding: 0.6rem 0.5rem;
  display: flex;
  padding-left: 13px;
  border-right: none;
}
#benefitsdrop .tableprogian
{
   position: absolute;
   top: 111px;
   width: 100%;
}
#benefitsdrop .tableprogian .employee
{
  padding: 2rem 0rem;
  position: relative;
  width: 100%;
}
#benefitsdrop .tableprogian .img_emp>img
{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
#benefitsdrop .tableprogian .img_emp
{
  padding: 0 0.8rem 1.5rem;
  display:flex;
  align-items:center; 
}
#benefitsdrop .tableprogian .img_emp .text_div
{
  font-size: 12px;
  width: 5vw;
  height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  z-index: 4;
}

#benefitsdrop tbody td.fixedvw
{
  border-right: none;
}
/* #benefitsdrop .tableprogian .border-bottom
{
  border-bottom: 1px solid rgb(212, 212, 212);
} */
.tablecal1 table tr th {
  border-top: 1px solid #0000000D !important;
  color: #fff;
}

.tablecal1 table tr th.fixedWidth,
.tablecal table tr th.fixedWidth {
  width: 2.517vw;
}
.tablecal1 table tr th::before,
.tablecal table tr th::before
{
  content: '';
  position: absolute;
  top: -6px;
  right: -0.05rem;
  width: 1px;
  height: 118%;
  background-color: #0000000D;
}

.tablecal1 table tr th.dateVirtual {
  color: #000;
}

#benefits,
#benefitsdrop,
#benefits2 {
  position: relative;
  max-height: 58vh;
  overflow-y: auto;
  overflow-x: hidden;
}

#benefits td img,
#benefitsdrop td img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.gantt #benefits2 {
  transition: all 0.3s ease-in;
}
.gantt #benefits2 .fixedvw
{
  width: 10.125vw;
}
.gantt .tablegantt tr th.VDate,
.gantt .tablegantt tr th.VQuarter,
.gantt .tablegantt tr th.VYear
{
  padding: 15px 0;
}
.gantt .tablegantt tr th.deactive,
.gantt .tablegantt tr td.deactive,
.workload .table tr th.deactive,
.workload .table tr td.deactive
{
  display: none;
}
.gantt #benefits2 .first1 .mycollapse
{
  height: 0px;
  transition: height 0.3s ease-out;
}
.gantt #benefits2.active {
  display: block;
  animation: slideRight 0.3s ease-in-out;
}

@keyframes slideRight {
  0% {
    transform: translateX(25%);
  }

  100% {
    transform: translateX(0%);
  }
}

.gantt #benefits2 .thfirst {
  display: flex;
  align-items: center;
  height: 50px;
  justify-content: center;
}

.tableprogian1 {
  left: 26% !important;
  top: 220px !important;
}

.tableprogian {
  width: 100%;
  position: absolute;
  top: 88px;
}

.gantprwid1 {
  margin-left: 22% !important;
}

.firstext {
  font-size: 13px;
  color: #1E2022;
  font-weight: 600;
  margin-top: 0.9rem;
  overflow: hidden;
  width: 9%;
  height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 8px;
}

.gantleft {
  background: #F6BE75 !important;
  width: 67% !important;
  margin-left: 18% !important;
}

.first1 {
  margin: 17px 0 15px;
  display: none;
}

.first1.active {
  display: block;
}

.benerow {
  border-bottom: 1px solid #0000000D;
  position: relative;
}

.gantprwid {
  width: 58% !important;
}

.gantpr {
  padding: 8px 0px;
  border-radius: 5px;
  color: #FFFFFF;
  height: 38px;
  font-size: 14px;
  margin-left: 16%;
  margin-top: -24px;
  text-align: center;
}

.gantprTask2 {
  padding: 6px 0px;
  border-radius: 5px;
  color: #FFFFFF;
  font-size: 14px;
  margin-left: 34%;
  margin-top: -24px;
  text-align: center;
}

.first .card {
  text-align: center;
  border: none;
  background: transparent;
}

.gantt .slide_bottom, 
.workload .slide_bottom 
{
  padding: 3rem;
}

.gantt .slide_bottom .img1,
.gantt .slide_bottom .img2, 
.workload .slide_bottom .img1,
.workload .slide_bottom .img2{
  margin-right: 2rem;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background-color: rgb(235, 237, 243);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.gantt .slide_bottom .img2, 
.workload .slide_bottom .img2 
{
  margin-right: 0rem;
}

.gantt .slide_bottom .img1 img,
.gantt .slide_bottom .img2 img, 
.workload .slide_bottom .img1 img,
.workload .slide_bottom .img2 img
{
  width: 18px;
  height: auto;
}

.gantt .slide_bottom .img2 img, 
.workload .slide_bottom .img2 img 
{
  transform: rotate(180deg);
}

.gantt .timelinetooltip, 
.gantt .milestonetooltip, 
.gantt .tasktooltip,
.workload .timelinetooltip, 
.workload .milestonetooltip, 
.workload .tasktooltip 
{
  position: absolute;
  background-color: #fff;
  padding: 15px;
  max-width: 244px;
  border-radius: 3px;
  z-index: 500;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  display: none;
}

.gantt .timelinetooltip h4, 
.gantt .milestonetooltip h4, 
.gantt .tasktooltip h4,
.workload .timelinetooltip h4, 
.workload .milestonetooltip h4, 
.workload .tasktooltip h4 
{
  font-size: 14px;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #3d3d3d;
}

.gantt .timelinetooltip p, 
.gantt .milestonetooltip p, 
.gantt .tasktooltip p,
.workload .timelinetooltip p, 
.workload .milestonetooltip p, 
.workload .tasktooltip p 
{
  font-size: 13px;
  margin-top: 0.5rem;
  color: #535353;
}


 /* .workload */

.workload #benefits, 
.workload #benefitsdrop
{
  display: none;
} 

/* .workload #benefits.active, 
.workload #benefitsdrop.active
{
  display: block;
}  */

/*ramyaresponsiveworkload*/
@media (max-width:1300px) {
  .tableprogian {
    top: 111px;

  }

  .firstext {
    margin-left: 1.5%;
  }

}

@media (max-width:992px) {

  .pright {
    margin-right: 0px;
  }

  .pright1 {
    margin-top: 70px;
  }

  .tableproben1,
  .tableproben,
  .tablepro {
    width: 100% !important;
  }

  input.lochsr1,
  .form-select {
    width: 100% !important;
    background: #ffffff url(../icons/search-1.svg) right 11px center no-repeat;
    padding: 0px 11px;
    background-size: 12px;
  }

  #box12 {
    width: 100% !important;
  }

  .iconset {
    margin-top: 10px;
  }

}

@media (max-width:781px) {
  .workloadrow {
    padding: 0px;
    margin-top: 22rem !important;
  }

  .workloadrow,
  .tablecal {
    margin: 13.5rem 10px 10px -10px;
    width: 99%;
  }

  .progress3 {
    margin-top: 70px;
  }

  .lilast {
    margin-right: 1.8rem !important;
  }

  .gantpr {
    width: 100%;
    margin-left: 36%;
  }

  .gantpr3 {
    width: 100% !important;
    margin-left: 48% !important;
  }

  .gantpr4 {
    width: 90% !important;
    margin-left: 40% !important;
  }

  .gantprwid {
    width: 99% !important;
  }

  .gantprwid1 {
    margin-left: 50% !important;
  }

  .gantleft {
    width: 100% !important;
    margin-left: 40% !important;
  }

  .first .card {
    text-align: left;
    margin-left: 32%;
  }
}

.gantpr22 {
  margin-top: 1.2rem;
  height: 38px;
}

.vl {
  position: absolute;
  border-left: 2px solid #8a8888d2;
  height: 33px;
  top: -2px;
  z-index: -1;
}

.vl2 {
  position: absolute;
  border-left: 2px solid #8a8888d2;
  height: 57px;
  top: 45px;
  left: 12%;
}

.v2 {
  position: absolute;
  border-left: 2px solid #8a8888d2;
  height: 58px;
  left: 12%;
  top: -16px;
}

.v3 {
  position: absolute;
  border-left: 2px solid #8a8888d2;
  width: 3.5vw;
  height: 2px;
  top: 42px;
  transform: translate(0px, 0px);
  background: #8a8888d2;
  left: 12%;
}

.v4 {
  position: absolute;
  border-left: 2px solid #8a8888d2;
  width: 2px;
  height: 58px;
  top: 44px;
  transform: translate(0px, 0px);
  background: #8a8888d2;
  left: 12%;
}

.v5 {
  position: absolute;
  border-left: 2px solid #8a8888d2;
  width: 19.5vw;
  height: 2px;
  top: 101px;
  transform: translate(0px, 0px);
  background: #8a8888d2;
  left: 12%;
}

.v6 {
  position: absolute;
  border-left: 2px solid #8a8888d2;
  width: 2px;
  height: 60px;
  top: 101px;
  transform: translate(0px, 0px);
  background: #8a8888d2;
  left: 12%;
}

.v9::after {
  position: absolute;
  top: -11px;
  color: grey;
  transform: translate(0px, 0px);
  left: 12%;
}

.v5::after {
  position: absolute;
  top: -11px;
  color: grey;
  transform: translate(0px, 0px);
  left: 12%;
}

.card-body-bg {
  background: none;
}

.milestonediv1 {
  width: 100%;
}
.gantt .milestonediv1 .firstDesc,
.gantt .milestonediv2 .firstDesc,
.gantt .collapsed .firstDesc
{
  position: absolute;
  z-index: -1;
  transform: translateY(6px);
  transition: all 0.2s ease;
}
.gantt .collapsed .firstDesc
{
  transform: translateY(7px);
}
.gantt .milestonediv2 .firstDesc.translate0
{
  transform: translateY(0px);
}
.gantt .milestonediv1 .firstDesc p span:nth-child(2),
.gantt .milestonediv2 .firstDesc p span:nth-child(2)
{
  font-size: 19px;
  color: #a0a0a0;
}
.milestonediv1 .milestonediv11 {
  width: 54.5%;
}

.milestonediv2 {
  width: 100%;
}

.milestonediv2 .milestonediv22 {
  width: 11%;
}

.milestonediv3 {
  width: 81%;
}

.milestonediv3 .milestonediv33 {
  margin-left: 15%;
  width: 51%;
}

.milestonediv4 {
  width: 89%;
}

.milestonediv4 .milestonediv44 {
  margin-left: 29%;
  width: 13%;
}

.hide2 {
  display: none;
  position: absolute;
  margin-top: 30px;
  background-color: #ffffff;
  box-shadow: 0px 3px 14px #00000029;
  border: 1px solid #70707003;
  border-radius: 2px;
  left: 70%;
  top: 39px;
  z-index: 3;
  padding: 15px;
}

@media (max-width:849px) {

  .milestonediv1 {
    margin-left: 26%;
  }

  .milestonediv1 .milestonediv11 {
    width: 53%;
  }

  .milestonediv2 {
    margin-left: 20%;
    z-index: 2;
  }

  .milestonediv2 .milestonediv22 {
    width: 45%;
  }

  .milestonediv3 {
    margin-left: 26%;
  }

  .milestonediv3 .milestonediv33 {
    width: 50%;
  }

  .milestonediv4 {
    margin-left: 45%;
  }

  .milestonediv4 .milestonediv44 {
    width: 32%;
  }

  .v9 {

    width: 28.4vw;
  }

  .v9::after {
    left: 91%;
  }

  .v8 {
    left: 90%;
  }

  .hide3 {
    width: 61%;
    z-index: 3;
  }

  .hide2 {
    width: 48%;
  }

  .gantt #benefits2 {
    background-color: #fff;
  }

  .firstext {
    width: 19.5%;
    height: 19px;
  }
  .form-group1 .selected {
    background: #fff;
  }
  .form-group1 .selected::after {
    width: 16px;
  }
  .cal_setting {
    display: none !important;
  }
  .tablecal {
    margin-top: 9px;
    background: #fff;
    margin-left: -0.9rem;
    width: 99%;
  }
  .form-group.form-group1
  {
    margin-top: 12px;
  }
  .tableprogian {
    width: 95.5%;
  }
}

/* gantt workdload css start end*/