/*____________ mixin _________________ */
.btn {
  min-width: 100px;
  direction: rtl;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1rem;
  padding: 0.8rem 1.5rem;
  border: thin solid #eaeaea;
  font-size: 14px;
  cursor: pointer;
  width: fit-content;
  white-space: nowrap;
  transition: all 0.1s ease-in-out;
}
.btn:focus, .btn:active {
  box-shadow: none !important;
}
.btn img {
  width: 18px;
}

.btn-light {
  background: transparent;
  color: #0b2746;
  border: thin solid #f3f4f6;
}
.btn-light:hover {
  background: #f3f4f6;
  border-color: transparent;
}

.btn-primary {
  background: #0a6fc2;
  color: #ffffff;
  border: thin solid transparent;
}
.btn-primary:hover {
  background: rgb(7.5, 83.25, 145.5);
  border-color: transparent;
}

.btn-primary-light {
  background: #e1effd;
  color: #0b2746;
  border: thin solid transparent;
}
.btn-primary-light:hover {
  background: rgb(105.46875, 175.25, 245.03125);
  border-color: transparent;
  color: #ffffff;
}

.btn-primary-outline {
  background: transparent;
  color: #0a6fc2;
  border: thin solid #0a6fc2;
}
.btn-primary-outline:hover {
  background: #0a6fc2;
  border-color: transparent;
  color: #ffffff;
}

.btn-primary-dark-outline {
  background: transparent;
  color: #0a6fc2;
  border: thin solid #0a6fc2;
}
.btn-primary-dark-outline:hover {
  background: #0c4a80;
  border-color: transparent;
  color: #ffffff;
}
.btn-primary-dark-outline:hover svg {
  fill: #fff;
}

.btn-secondary {
  background: #f3f4f6;
  color: #0b2746;
  border: thin solid transparent;
}
.btn-secondary:hover {
  background: rgb(213.8571428571, 217.2857142857, 224.1428571429);
  color: #0b2746;
  border-color: transparent;
}

.btn-secondary-light {
  background: #f9fafb;
  color: #0b2746;
  border: thin solid transparent;
}
.btn-secondary-light:hover {
  background: rgb(172.5, 186.25, 200);
  border-color: transparent;
}

.btn-secondary-outline {
  background: transparent;
  color: #f3f4f6;
  border: thin solid #f3f4f6;
}
.btn-secondary-outline:hover {
  background: #f3f4f6;
  border-color: transparent;
  color: #0b2746;
}

.btn-danger {
  background: #DD0417;
  color: #ffffff;
  border: thin solid transparent;
}
.btn-danger:hover {
  background: rgb(170.9066666667, 3.0933333333, 17.7866666667);
  border-color: transparent;
}

.btn-danger-light {
  background: rgba(255, 63, 51, 0.1019607843);
  color: #0b2746;
  border: thin solid transparent;
}
.btn-danger-light:hover {
  background: rgba(178.5, 10.5, 0, 0.1019607843);
  border-color: transparent;
}

.btn-danger-outline {
  background: transparent;
  color: #DD0417;
  border: thin solid #DD0417;
}
.btn-danger-outline:hover {
  background: #DD0417;
  border-color: transparent;
  color: #ffffff;
}

.btn-success {
  background: #1A9F58;
  color: #ffffff;
  border: thin solid transparent;
}
.btn-success:hover {
  background: rgb(18.8324324324, 115.1675675676, 63.7405405405);
  border-color: transparent;
}

.btn-success-light {
  background: rgba(11, 238, 45, 0.1019607843);
  color: #0b2746;
  border: thin solid transparent;
}
.btn-success-light:hover {
  background: rgba(5.3674698795, 116.1325301205, 21.9578313253, 0.1019607843);
  border-color: transparent;
}

.btn-success-outline {
  background: transparent;
  color: #1A9F58;
  border: thin solid #1A9F58;
}
.btn-success-outline:hover {
  background: #1A9F58;
  border-color: transparent;
  color: #ffffff;
}

.addProject {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.addProject aside {
  width: 280px;
  background: #ffffff;
  border-radius: 1rem;
  margin-top: 1rem;
}
.addProject aside ul {
  scrollbar-color: #e1effd #ffffff;
  white-space: nowrap;
  padding: 1rem;
  margin: 0r;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0.5rem;
  box-shadow: 0 3px 25px 0 rgba(10, 111, 194, 0.0784313725);
  border-radius: 1rem;
}
.addProject aside ul::-webkit-scrollbar {
  height: 8px;
}
.addProject aside ul::-webkit-scrollbar-track {
  background: #e1effd;
  border-radius: 4px;
}
.addProject aside ul::-webkit-scrollbar-thumb {
  background: #e1effd;
  border-radius: 4px;
}
.addProject aside ul::-webkit-scrollbar-thumb:hover {
  background: #e1effd;
}
.addProject aside ul li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  white-space: nowrap;
  min-width: fit-content;
  border: thin solid #eaeaea;
  border-radius: 0.5rem;
  font-weight: bold;
  cursor: pointer;
}
.addProject aside ul li svg {
  fill: #0a6fc2;
}
.addProject aside ul li svg.stroke, .addProject aside ul li svg .stroke {
  stroke: #0a6fc2;
}
.addProject aside ul li:hover {
  border-color: transparent;
  color: #ffffff;
  background: #0a6fc2;
}
.addProject aside ul li:hover svg {
  fill: #ffffff;
}
.addProject aside ul li:hover svg.stroke, .addProject aside ul li:hover svg .stroke {
  stroke: #ffffff;
}
.addProject aside ul li span {
  font-size: 0.8rem;
}
.addProject aside ul li.active {
  border-color: transparent;
  color: #ffffff;
  background: #0a6fc2;
}
.addProject aside ul li.active svg {
  fill: #ffffff;
}
.addProject aside ul li.active svg.stroke, .addProject aside ul li.active svg .stroke {
  stroke: #ffffff;
}
.addProject .steps-cont {
  width: calc(100% - 290px);
}
.addProject .steps-cont .card .card-body .table-container {
  padding: 0;
  margin: 0;
}
.addProject .steps-cont .card .card-body .table-container .box {
  padding: 0;
  margin: 0;
}
.addProject .steps-cont .card .card-body .table-container table {
  border-collapse: separate;
  border-spacing: 0;
  border-top-right-radius: 9px;
  border-top-left-radius: 9px;
  overflow: hidden;
  border: 1px solid #EAEAEA;
}
.addProject .steps-cont .card .card-body .table-container table thead th:first-child {
  border-top-right-radius: 10px;
}
.addProject .steps-cont .card .card-body .table-container table thead th:last-child {
  border-top-left-radius: 10px;
}
.addProject .steps-cont .card .card-body .table-container table th, .addProject .steps-cont .card .card-body .table-container table tr {
  text-align: start;
}

.stages-container .stage {
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.stages-container .stage .title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  border: thin solid #eaeaea;
  border-radius: 1rem;
  padding: 1rem;
  cursor: pointer;
}
.stages-container .stage.active .arrow svg {
  transform: rotate(180deg);
}
.stages-container .stage.active .title, .stages-container .stage:hover .title {
  background-color: #e1effd;
}
.stages-container .stage .substages-container {
  padding-right: 2rem;
  padding-top: 0.25rem;
}
.stages-container .stage .substages-container .substage {
  border-radius: 1rem;
  padding: 0.75rem;
  margin-bottom: 0.25rem;
  cursor: pointer;
}
.stages-container .stage .substages-container .substage.active, .stages-container .stage .substages-container .substage:hover {
  background-color: #e1effd;
}

@media (max-width: 450px) {
  .addProject aside {
    width: 100%;
  }
  .addProject aside ul {
    min-width: 100%;
    overflow-x: scroll;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
  }
}
@media (min-width: 451px) and (max-width: 767px) {
  .addProject aside {
    width: 100%;
  }
  .addProject aside ul {
    min-width: 100%;
    overflow-x: scroll;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
  }
  .addProject .steps-cont {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .addProject aside {
    width: 100%;
  }
  .addProject aside ul {
    min-width: 100%;
    overflow-x: scroll;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
  }
  .addProject .steps-cont {
    width: 100%;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .addProject aside {
    width: 100%;
  }
  .addProject aside ul {
    min-width: 100%;
    overflow-x: scroll;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
  }
  .addProject .steps-cont {
    width: 100%;
  }
}

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