:root{
    --bs-light-green:#17AF2E;
}
.fw-bold-2{
    font-weight: 500;
}
.text-black-2{
    color: #434744;
}
.text-black-3{
    color: #7B7B7B;
}
.text-black-4{
    color: #5D5D5D;
}

.text-purple{
    color: #7C51C8;
}

.bg-green{
    background-color:var(--bs-light-green);
}
.text-green{
    color:var(--bs-light-green);
}
.btn-green{
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-light-green);
    --bs-btn-border-color: var(--bs-light-green);
    --bs-btn-border-radius: .5rem;
    --bs-btn-hover-color: var(--bs-light-green);
    --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
    --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
    --bs-btn-focus-shadow-rgb: var(--bs-light-green-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
    --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};    
}
.btn-outline-green {
    --bs-btn-color: var(--bs-light-green);
    --bs-btn-border-color: var(--bs-light-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-light-green);
    --bs-btn-hover-border-color: var(--bs-light-green);
    --bs-btn-focus-shadow-rgb: 25,135,84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-light-green);
    --bs-btn-active-border-color: var(--bs-light-green);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-light-green);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-light-green);
    --bs-gradient: none;
}

/* bottom modal */
/* Top and Bottom */
.modal.left .modal-content,
.modal.right .modal-content,
.modal.top .modal-content,
.modal.bottom .modal-content,
.modal.full .modal-content {
  border-radius: 0;
  border: none;
}
.modal.bottom .modal-content{
    border-radius: 10px 10px 0 0;
}
.modal.top .modal-dialog,
.modal.bottom .modal-dialog {
  position: fixed;
  margin: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.modal.top .modal-content,
.modal.bottom .modal-content {
  height: auto;
  overflow-y: auto;
}

.modal.top .modal-body,
.modal.bottom .modal-body {
  padding: 15px 15px;
}
.modal.bottom.fade .modal-dialog {
    bottom: -100%;
    -webkit-transition: opacity 0.3s linear, bottom 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, bottom 0.3s ease-out;
    -o-transition: opacity 0.3s linear, bottom 0.3s ease-out;
    transition: opacity 0.3s linear, bottom 0.3s ease-out;
  }
  
  .modal.bottom.fade.show .modal-dialog {
    bottom: 0;
  }
  
  .modal.bottom.fade .modal-dialog {
    bottom: -100%;
  }