/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 4px !important;  
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 4px !important;
  background: #8bc34a;
  width: 0%;
}

.menu-active a{
  color: #8bc34a !important;
  font-weight: bold !important;
}

.video {
	margin: 0 auto;
	border: 3px dashed lightgray;
}

input.ng-invalid.ng-touched {
  border: 1px solid red;
}

.table-striped tr:nth-child(even) {background-color: #f2f2f2;}

.form-group input.ng-invalid.ng-touched, 
.form-group input.ng-invalid:focus, 
.form-group select.ng-invalid.ng-touched, 
.form-group textarea.ng-invalid.ng-touched,
.form-submit input.ng-invalid,
.form-submit select.ng-invalid,
.form-submit  textarea.ng-invalid
{
    border-color: #ff4c6a;
}

.invalid-feedback.form-error {
    display: block;
}

.list-paginate {
  text-align: center;
  font-size: 1.2em;
}

  .list-paginate /deep/ .ngx-pagination .current {
    background-color: black;
  }

  .list-paginate /deep/ .ngx-pagination li {
    border: none !important;
  }

  .list-paginate /deep/ .ngx-pagination a {
    color: #8bc34a;
  }

    .list-paginate /deep/ .ngx-pagination a:hover {
      text-decoration: none;
      color: black;
      background-color: #fff;
    }

.list-item-name {
  color: rgb(158, 0, 34);
  width: 250px;
}

th.donoate-amount, td.donoate-amount {
  color: rgb(158, 0, 34);
  text-align: right !important;
}

table {
  border-collapse: collapse !important;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

  table tr {
    padding: .35em;
  }

  table th,
  table td {
    padding: .625em;
    text-align: left;
    border: none;
    border-bottom: 1px solid #eeeeee;
  }


tr.total-row, td.total-col {
  border: none !important;
}

.list-bottom-paginate {
  display: none !important;
}

@media screen and (max-width: 600px) {
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
  }

  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }

    table td::before {
      content: attr(data-label);
      float: left;
    }

  .list-bottom-paginate {
    display: inherit !important;
  }
}

ngb-carousel {
  max-width: 100%;
  margin: 10px auto;
}

  ngb-carousel:focus {
    outline: 0 !important;
  }

  ngb-carousel:hover > .show {
    opacity: 1;
  }

  ngb-carousel img {
    
    max-width:600px;
    outline: none;
  }



.carousel-inner {
  overflow: visible;
}

/*.carousel-item {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease-in-out, visibility 1.2s;
  z-index: -1;
}

.carousel-item.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}*/


.carousel-item {
  display: block !important;
  z-index: 1;
  position: absolute;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

  .carousel-item.active {
    position: relative;
    transition: opacity 0.5s ease-in-out;
    visibility: visible;
    opacity: 1;
  }


/*
.carousel-item {
  padding: 40px 55px;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block !important;
}

  .carousel-item.active {
    z-index: 1;
    opacity: 1;
    transition-delay: .3s;
    transform: none;
    animation: slideFromLeft .3s;
    animation-delay: .3s;
  }

  
@keyframes slideFromLeft {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: none;
  }
}
*/

/*
.carousel-item {
  display: block;
  opacity: 0;
  transition: opacity 2s;
}

  .carousel-item.active {
    display: block;
    opacity: 1;
    transition: opacity 2s;
  }

*/

.carousel-control-prev {
  z-index: 20;
}


.carousel-control-next {
  z-index: 20;
}

.carousel-indicators {
  z-index: 20; 
}

/*
  .carousel-indicators li {
    width: 10px !important;
    background-color: lightgray;
  }
*/
/*
.carousel-control-next-icon {
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon {
  content: '<';
  font-size: 55px;
  color: red;
}
 */


.carousel-control-next-icon {
  opacity: 1;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3e%3cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.568 18.005l-1.414-1.415 4.574-4.59-4.574-4.579 1.414-1.416 5.988 5.995-5.988 6.005z'/%3e%3c/svg%3e");
}

.carousel-control-prev-icon {
  opacity: 1;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3e%3cpath d='M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z'/%3e%3c/svg%3e");
}

.home-carousel .carousel-control-next-icon {
  opacity: 1;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24'%3e%3cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.568 18.005l-1.414-1.415 4.574-4.59-4.574-4.579 1.414-1.416 5.988 5.995-5.988 6.005z'/%3e%3c/svg%3e");
}

.home-carousel .carousel-control-prev-icon {
  opacity: 1;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24'%3e%3cpath d='M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z'/%3e%3c/svg%3e");
}

/*
.carousel-control-next,
.carousel-control-prev {
  filter: invert(100%);
}
 */
