:root {
  --theme-green-color: #0FB3A2;
  --theme-green-color-opacity: #0FB3A214;
  --text-color: #131314;
  --theme-purple-color: #7A5191;
  --theme-purple-color-opacity: #7A519130;
  --bs-font-sans-serif: Poppins, sans-serif !important;
  --bs-body-font-size: 0.8125rem !important;
  --pc-sidebar-background: #fff;
  --td-active-bg: var(--theme-green-color) !important;
}

body {
  font-size: 0.8125rem !important;
}

.fa-icon-large {
  font-size: 1.25rem;
}

*:focus {
    box-shadow: none !important;
}

.fa-question-circle
{

    color: #E90084 !important;;
}

.btn {
   font-size: 0.813rem !important;
   border: 1px solid rgba(0, 0, 0, .15);
}

.btn-primary {
    padding: 8px 20px 8px 20px !important;
    border-radius: 8px !important;
    opacity: 0px !important;
    background-color: var(--theme-purple-color) !important;
    border-color: var(--theme-purple-color) !important;
    font-weight: bold !important;
    color: white !important;
    border: none !important;
}

.btn-primary-outline {
    padding: 8px 20px 8px 20px !important;
    border-radius: 8px !important;
    opacity: 0px !important;
    background-color: #ffffff !important;
    border-color: var(--theme-purple-color) !important;
    color: var(--theme-purple-color);
    font-size: 0.813rem !important;
    border: 1px solid var(--theme-purple-color) !important;
} 

.btn-secondary {
    padding: 8px 20px 8px 20px !important;
    border-radius: 8px !important;
    opacity: 0px !important;
    background-color: var(--theme-green-color) !important;
    border-color: var(--theme-green-color) !important;
    color: white !important;
    font-size: 0.813rem !important;
    border: none !important;
    border: 1px solid var(--theme-green-color) !important;
}

.btn-secondary:hover {
    padding: 8px 20px 8px 20px !important;
    border-radius: 8px !important;
    opacity: 0px !important;
    background-color: #14c3b1 !important;
    border-color: #14c3b1 !important;
    color: white !important;
    font-size: 0.813rem !important;
    border: none !important;
    border: 1px solid #14c3b1 !important;
}


.btn-secondary.disabled, .btn-secondary:disabled {
    background-color: #949699 !important;
    border-color: #949699 !important;
    color: #dbdbdb !important;
} 

.btn-secondary-outline {
    padding: 8px 20px 8px 20px !important;
    border-radius: 8px !important;
    opacity: 0px !important;
    background-color: #ffffff !important;
    border-color: var(--theme-green-color) !important;
    color: var(--theme-green-color) !important;
    font-size: 0.813rem !important;
    border: 1px solid var(--theme-green-color) !important;
} 

.btn-secondary-outline:hover {
    padding: 8px 20px 8px 20px !important;
    border-radius: 8px !important;
    opacity: 0px !important;
    background-color: #ffffff !important;
    border-color: #17cbb8 !important;
    color: #17cbb8 !important;
    font-size: 0.813rem !important;
    border: 1px solid #17cbb8 !important;
}

.btn-secondary-outline-group, .btn-secondary-group {
  border-radius: 0px 8px 8px 0px !important;
}

.btn-file {
  border-radius: 0px 8px 8px 0px !important;
}

.btn-file:hover {
  border-radius: 0px 8px 8px 0px !important;
}

@media (max-width:400px) {
  .btn-no-margin-end {
    margin-right: 0rem !important;
  }
}

@media (max-width:400px) {
  .btn-no-margin-end {
    margin-right: 0rem !important;
  }
}

.pink {
  color: #E90084 !important
}

/* -------------------------------------navbar---------------------------------- */
.form-search {
  position: relative;
  display: inline-block;
  margin-right: 13px;
}

a {
  color: var(--theme-purple-color) !important;
  display: block;
  text-decoration: none !important;
}

a:hover {
  text-decoration: underline !important;
}

.text-btn:hover, .showHelp:hover {
  text-decoration: none !important;
}

.form-search .form-control {
  padding: 10px;
  padding-right: 40px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  height: 32px !important;
  width: 350px !important;
  line-height: 2.5 !important;
  font-weight: 500;
}

.form-search .form-control {
  max-width: 350px !important;
  border: 1px solid var(--text-color) !important;
}

label {
  font-weight: bold
}

.icon-search {
  margin-left: -26px;
}

.search-icon {
  display: none;
}

.element-class {
  height: 21px;
  display: flex;
  margin-top: 40px;
  align-items: baseline;
  opacity: 0.7;
  line-height: 10px;
}

.CreateAccount p {
  color: var(--theme-green-color) !important;
}

.create-account-btn button {
  background-color: var(--theme-green-color);
  color: white;
  border-radius: 8px;
  padding: 4px 20px !important;
  height: 32px;
  border: none;
}

.create-account-btn button:hover {
    background-color: #14c3b1 !important;
    color: white;
    border-radius: 8px;
    padding: 4px 20px !important;
    height: 32px;
    border: none;
}

.basket-btn button {
  background-color: var(--theme-green-color);
  color: white;
  border-radius: 8px;
  padding: 4px 20px !important;
  height: 32px;
  border: none;
}

.basket-btn button:hover {
    background-color: #14c3b1 !important;
    color: white;
    border-radius: 8px;
    padding: 4px 20px !important;
    height: 32px;
    border: none;
}

.login-btn button {
  background-color: var(--theme-green-color);
  color: white;
  border-radius: 8px;
  padding: 4px 20px !important;
  height: 32px;
  border: none;

}

.login-btn button:hover {
    background-color: #14c3b1 !important;
    color: white;
    border-radius: 8px;
    padding: 4px 20px !important;
    height: 32px;
    border: none;
}

.login-btn a:hover, .create-account-btn a:hover {
  text-decoration: none !important; 
}

.mob-icon img {
  width: clamp(30px, 1vw, 40px) !important;
}

.owl-carousel .card-img-top {
  display: block !important;
  width: 100% !important;
}



/*
.owl-carousel .owl-item img {
  display: inline-flex !important;
  width: auto !important;
}
*/
.owl-carousel.owl-drag .owl-item {

  margin-top: 19px !important;
}

/*
.box-border {
  border: 2px solid #E90084 !important;
}
*/
/*
.offcanvas-start {
  width: 280px !important;
}
*/
.offcanvas-bottom {
  height: 280px !important;
}

/* -=---------------------------------home  top navbar----------------------------- */
/* -=---------------------------------home  top navbar----------------------------- */
.school-left .btn {

  color: #ffffff;
  border-radius: 30px !important;
  font-size: clamp(11px, 1vw, 16px) !important;
}

.school-left .btn-menu-green {
  background-color: var(--theme-green-color) !important;
}

.school-left .btn-menu-purple {
  background-color: var(--theme-purple-color) !important;
}

.breadcrumb {
  margin-bottom: 0rem;
}

nav {
  border-radius: 8px !important;
  padding: 0.5rem;
  background-color: #f8f9fa;
  margin-bottom: 1rem;
}

.breadcamb-text {
  font-size: small;
}

.breadcamb-text p {
  font-weight: 400;
}

.hero-banner-text {
  font-size: clamp(0.75rem, 1vw, 0.8125rem) !important;
}

.topnavbar {
  display: flex;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  border: 1px solid #DADADA;
  border-radius: 8px;
}

.topnavbar a {
  text-decoration: none;
  color: black;
  border-left: 1px solid #DADADA;
  border-right: 1px solid #DADADA;
  padding: 8px 32px;
  display: flex;
  gap: 5px;
  align-items: center;
}

.mobile-menu i {
  width: 20px;
}

.mobile-menu a {
  padding: 5px 19px;
}

.mobile-menu .active a {
  color: var(--theme-green-color) !important;
}

.mobile-menu li.active, .navbar-nav li.active  {
  background-color: var(--theme-green-color-opacity) !important;
}

.mobile-menu .fa-question-circle:before
{
  color: var(--theme-purple-color) !important;
}

.navbar .fa-question-circle:before
{
  color: var(--theme-green-color) !important;
}

.fa-question-circle:before 
{
  color: var(--theme-green-color);
}

.navbar .fa-question-circle:before 
{
  color: var(--theme-green-color);
}

.fa-question-circle:before 
{
  color: #e90084 !important;
}

.mobile-bar i {
  font-size: 28px;
  /*color: var(--theme-green-color);*/
}
.topnavbar a:hover {
  background-color: #ddd;
}

.topnavbar a .fas {
  margin-right: 5px;
  color: var(--theme-green-color);
}

.topnavbar a .badge {
  background-color: var(--theme-purple-color);
  color: white;
  padding: 4px;
  width: 24px;
  height: 20px;
  border-radius: 4px;
}

.topnavbar::-webkit-scrollbar {
  height: 3px;
}

.topnavbar::-webkit-scrollbar-thumb {
  background-color: var(--theme-green-color);
  border-radius: 10px;
}

.topnavbar::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.offcanvas.show {
    visibility: visible;
}
.offcanvas.show .navbar-collapse {
    display: flex;
}

/* -----------------------------------------Quiz Time Page----------------------------- */

.ticket-container {
  border-radius: 5px;
  padding: 15px;
  box-shadow: 2px 2px 24px 0px rgba(122, 81, 145, 0.32);
  margin-bottom: 15px;
}

.ticket-image {
  width: 80px;
  height: 80px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticket-image-mobile {
  width: 80px;
  height: 80px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticket-details p {
  margin-top: 0px ;
  font-size: 0.813rem;

}

.math-button {
  border-radius: 50% !important;
  border: none;
}

.event-share-card {
  border-radius: 15px !important;
  box-shadow: 2px 2px 24px 0px rgba(122, 81, 145, 0.32);
}

.social-icons .btn {
  padding: 0;
}

.social-icons {
  width: 100%;
  justify-content: center;
}

.social-icons .btn {
  padding: 0;
}

.booking-price {
  width: fit-content;

}

.booking-table tbody,
.booking-table td,
.booking-table tfoot,
.booking-table th,
.booking-table thead,
.booking-table tr {
  border: none !important;
}

.avd-text {
  font-size: clamp(12px, 1vw, 0.813rem) !important;
}

.btn-outline-green {
  color: var(--theme-green-color) !important;
  border: 2px solid var(--theme-green-color) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}

.eventView {
  padding-right: 0px !important;
  padding-left: 0px !important;
  margin-top: 1rem;
  margin-bottom: 1rem;
}  

.ticket-container .productImage {
  height: 80px !important;
  width: 80px;
  object-fit: cover !important;
}  

.ticket-container .productImageMobile {
  max-height: 80px !important;
  max-width: 80px;
  object-fit: cover !important;
} 

.ticket-container .productInformation {
  background-color: grey;
} 

/* ---------------------------------------home page ----------------------------- */
.MeetYourPTA {
  display: flex;
  align-items: center;
}

.btn-outline-secondary {
  width: 100%;
  text-align: left;
  border: none !important;
}

.btn-outline-success {
  border-color: var(--theme-green-color) !important;
}

.footer-buttn span,
.footer-buttn a {
  color: var(--theme-green-color) !important;
}

.footer-buttn:active span,
.footer-buttn:active a {
  color: #ffffff !important;
}

.footer-buttn:hover span,
.footer-buttn:hover a {
  color: #ffffff !important;
}

.input-group {
  width: 100%;
}

.dropdown-menu {
  min-width: 100% !important;
  font-size: var(--bs-body-font-size) !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #ecf9f8 !important;
}

.dropdown-item.disabled, .dropdown-item:disabled {
    color: #adb5bd !important;
}

.filter-box .border-box {
  border: 1px solid #DADADA;
  display: flex;
  align-items: center;
}


/* ---------------------optionabar ---------------- */


.filter-box .dropdown {
  width: 100%;
}

.filter-box .dropdown-toggle {
  width: 100%;
}

.filter-box .input-group {
  width: 100%;
}

.filter-box .input-group .form-control {
  border-right: 0;
}

.filter-box .input-group .btn {
  border-left: 0;
}



.btn-outline-secondary.dropdown-toggle.show,
.btn-outline-secondary:active {
  background-color: transparent !important;
  color: var(--text-color) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.search-btn {
    border-top: 1px solid var(--text-color) !important;
    border-right: 1px solid var(--text-color) !important;
    border-bottom: 1px solid var(--text-color) !important;
    height: 32px !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    margin-left: -2px !important;
    border-left: 3px solid #ffffff !important;
    background-color: #ffffff;
}

.search-btn:hover, .search-btn:active, .search-btn:focus {
    color: var(--theme-green-color) !important;
    background-color: #ffffff !important;
    border-top: 1px solid var(--text-color) !important;
    border-right: 1px solid var(--text-color) !important;
    border-bottom: 1px solid var(--text-color) !important;
    height: 32px !important;
    border-top-right-radius: 8px !important;
    margin-left: -2px !important;
    border-left: 3px solid #ffffff !important;
}

/*
.dropdown-toggle::after {
  display: inline-block !important;
  margin-left: .255em !important;
  vertical-align: -5PX !important;
  content: "" !important;
  border: none !important;
  width: 12px; 
  height: 16px;
  background-image: url('../images/icons/Shape\ \(2\).png');
  background-size: contain;
  background-repeat: no-repeat;
}
*/

.event-card {
  border: 1px solid #ddd;
  border-radius: 8px 8px 8px 8px !important;
  margin-bottom: 20px;
  box-shadow: 2px 2px 24px 0px rgba(122, 81, 145, 0.32);
}

.event-card li {
  font-size: 0.813rem;
}

.event-card img {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.card-img-top {
  height: 140px !important;
  object-fit: cover; !important;
  object-position: center;
}

@media (max-width:770px) {
  .card-img-top {
      height: 200px !important;
      object-fit: cover;
      object-position: center;
  }
}

.event-card .card-body {
  position: relative;
}

@media (max-width:430px) {
  .cardtitle {
      height: 56px !important;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 3;
  }
  .eventtitle {
      height: 47px !important;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 2;
  }
}

@media (max-width:360px) {
  .cardtitle {
      height: 62px !important;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 3;
  }
  .eventtitle {
      height: 41px !important;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 2;
  }
}

@media (min-width:431px) {
  .event-card .card-body .cardtitle {
      height: 58px !important;
      -webkit-line-clamp: 3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }  
  .eventtitle {
      height: 33px !important;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 2;
  }
}

.event-card .card-body .card-title {
  position: absolute;
  top: -31px;
  padding: 8px 12px 4px 12px;
  background-color: white;
  border-radius: 8px 8px 0px 0px;
  font-size: 1rem;
}

.event-card .card-text {
  font-weight: bold;
  font-size: 0.813rem;
}

.promoted {
  background: rgba(233, 0, 132, 1);
  color: white;
  padding: 4px 12px !important;
  border-radius: 48px;
  position: absolute;
  top: -14px;
  left: 15px;
  font-size: 0.813rem;
  font-weight: bold;
}

.promoted-listing {
  background-color: #ff66a5;
  color: white;
  padding: 5px;
  border-radius: 5px;
  position: absolute;
  top: 15px;
  left: 15px;
}

.alert-info {
  background: rgba(15, 179, 162, 0.08);
  color: rgba(0, 0, 0, 1);
  border: 1px solid var(--theme-green-color);
}

.alert-danger {
    color: #842029;
    background-color: #f7e2e2 !important;
    border-color: #e55664 !important;
}

.danger {
  background-color: #f8d7da !important;
}

.eventlayout {
  display: flex;
  justify-content: center;
}

.eventlayout img {
  max-width: 100%;
}

.business-directory {
  margin-bottom: 25px !important;
}

.user-text {
  color: #999999;
  font-size: 12px;
}

.advertising-banner {
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
  padding: 24px 24px;
  border-radius: 16px !important;
  width: fit-content;
  text-align: center;
}

.advertising-banner a {
  font-size: 10px;
  text-transform: uppercase !important;
  padding: 10px;
}

.advertising-banner .advertising-banner-link {
  color: #7A5191 !important;
}

.alert-btn {
  width: 146px;
  padding: 4px 24px;
  border-radius: 8px;
  opacity: 0px;
  border: 1px solid var(--theme-green-color);
  color: var(--theme-green-color) !important;
  font-weight: bold;
  background-color: white;
}

.event-card .tickets-btn {
  background-color: var(--theme-green-color) !important;
  color: white;
  width: 100%;
  height: 40px;
  font-size: 1rem;
  padding: 8px 40px;
  border-radius: 8px;
  border: none;
}

.ReadMore-btn {
  background-color: transparent !important;
  color: var(--theme-green-color);
  text-align: center;
  align-items: center;
  display: flex;
  font-size: 1rem;

  width: 168px;
  justify-content: center;
  height: 40px;
  padding: 8px 40px;
  border-radius: 8px;
  border: 1px solid var(--theme-green-color);
}

.EventImage {
  width: 100%;
  align-items: center;
  display: flex;
  height: 241px;
  object-fit: cover;
  object-position: center;
}

.event-card .badge {
  position: absolute;
  top: 15px;
  right: 10px;
  background-color: white;
  color: black !important;
  border-radius: 50px;
  padding: 5px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-card .promoted-badge {
  position: absolute;
  left: 15px;
  bottom: 15px;
  font-weight: 700;
  background-color: white;
  color: black !important;
  border-radius: 50px;
  padding: 5px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.prize-card .badge {
  position: absolute;
  top: 25px;
  right: 25px;
  background-color: white;
  color: black !important;
  border-radius: 50px;
  padding: 5px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.file-card .badge-new {
  position: absolute;
  top: 25px;
  right: 25px;
  background-color: white;
  color: black !important;
  border-radius: 50px;
  padding: 5px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: var(--theme-green-color) !important;
}

.badge-stock-green {
  position: absolute;
  top: 15px;
  right: 10px;
  background-color: #00a15e;
  color: white !important;
  border-radius: 50px;
  padding: 2px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: bold;
}

.badge-stock-amber {
  position: absolute;
  top: 15px;
  right: 10px;
  background-color: #fbb755;
  color: white !important;
  border-radius: 50px;
  padding: 2px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: bold;
}

.badge-stock-red {
  position: absolute;
  top: 15px;
  right: 10px;
  background-color: #e1504d;
  color: white !important;
  border-radius: 50px;
  padding: 2px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: bold;
}

.badge-stock-white {
  position: absolute;
  top: 15px;
  right: 10px;
  background-color: #ffffff;
  color: black !important;
  border-radius: 50px;
  padding: 2px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: bold;
}

@media(max-width: 600px) {
  .badge-stock-red, .badge-stock-amber, .badge-stock-green {
    font-size: smaller;
  }
}  

.badge-product-modal {
  top: 25px !important;
  right: 25px !important;
}

.product-title {
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-information .badge {
  position: relative;
  top: 15px;
  right: 10px;
  background-color: white;
  color: black !important;
  border-radius: 50px;
  padding: 5px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-card .date {
    background-color: #7a5191;
    margin-bottom: 0;
    max-width: 100px;
    color: #ffffff;
    text-align: center;
    font-size: 28px;
    line-height: 1;
    font-family: 'Poppins';
    padding: 10px 20px;
    position: absolute;
    border-radius: 0.25rem;
    top: 10px;
    right: 10px;
}
.event-card .date span {
    display: block;
    font-weight: normal;
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 8px;
    font-family: 'Poppins';
}

.business-directory h5 {
  font-size: 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.business-directory h5 .icon {
  margin-right: 8px;
}

.view-all {
  color: #007bff;
  text-decoration: none;
  font-size: 0.813rem;
}

.business-list {
  margin-top: 16px;
}

.business-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 23px;
  border-bottom: 1px solid #DADADA;
}

.business-item:last-child {
  margin-bottom: 0;
}

.business-image {
  margin-right: 10px;
}

.business-details h6 {
  font-size: 1rem;
  margin: 0 0 8px 0;
  font-weight: bold;
}

.business-details p,
.business-details a {
  font-size: 0.813rem;
  margin: 0;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}

.business-details a {
  color: #007bff;
  display: block;
  margin-bottom: 15px;
  text-decoration: none;
}

.business-details .icon {
  margin-right: 4px;
}

.advertisement {
  margin-top: 24px;
}

.advertisement h5 {
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.advertisement img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 16px;
}

.view-ads {
  color: #007bff;
  text-decoration: none;
  font-size: 0.813rem;
}

.sidebar-img {
  padding: 60px 0px 24px 0px;
}

.main-advertisement a {
  font-size: 10px;
}

.main-advertisement .link-text {
  color: #7A5191 !important;
}


.fundraising-card {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0px 0px 16px 0px #00000014;

  padding: 20px;
  margin: auto;
}

.progress {
  border-radius: 5px;
  background-color: #f0f0f0;
  height: 24px !important;
  font-weight: 700;
  font-size: 0.813rem;

}

.progress-bar {
  background-color: var(--theme-green-color) !important;
  border-radius: 0px 8px 8px 0px;
  width: 15%;
  text-align: end !important;
  padding-right: 10px;
}

.progress-bar-checkout {
    background-color: #E90084 !important;
}

.checkout-progress-bar .progress-text {
    color: #E90084;
    font-weight: 400 !important;
    font-size: 14px !important;
}

.checkout-progress-bar .progress {
    height: 8px !important;
    background-color: rgba(233, 0, 132, 0.08) !important;
}

.progress-barhome
{
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
  padding: 24px 24px;
  border-radius: 16px !important;
}

.booking-information-form label {
    font-weight: bold;
}

.fundraising-info {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.fundraising-info div {
  text-align: left;
}

.fundraising-info div h5 {
  margin: 5px 0;
  font-weight: 700;
}

.donate-btn {
  padding: 8px 40px 8px 40px;
  border-radius: 8px;
  opacity: 0px;
  background-color: var(--theme-green-color) !important;
  font-weight: bold;
  color: white;
  font-size: 1rem;
  width: 100%;
  border: none;

}

.amount-box {
  width: 100%;
  /*height: 64px;*/
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 8px 24px 8px 24px;
  gap: 8px;
  border-radius: 8px;
  border: 2px solid black;


}

.text-center {
    text-align: center !important;
}


.avtar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: $border-radius;
  font: {
    size: 18px;
    weight: 600;
  }
  width: 48px;
  height: 48px;

  &.avtar-xxs {
    width: 16px;
    height: 16px;
    font-size: 0.813rem;
    border-radius: 12px;
  }

  &.avtar-xs {
    width: 32px;
    height: 32px;
    font-size: 0.675rem;
    border-radius: 12px;
  }

  &.avtar-s {
    width: 40px;
    height: 40px;
    font-size: 0.813rem;
    border-radius: 12px;
  }

  &.avtar-l {
    width: 64px;
    height: 64px;
    font-size: 20px;
    border-radius: 12px;
  }

  &.avtar-xl {
    width: 80px;
    height: 80px;
    font-size: 24px;
    border-radius: 12px;
  }

  &.avtar-square {
    border-radius: 4px;
    border: 2px solid;
  }

  &.avtar-icon {
    border: 2px solid $border-color;

    > img {
      width: 60%;
    }
  }
}

.user-group {
  /*display: inline-flex;*/
  align-items: center;
  margin-bottom: 20px;

  .avtar,
  img {
    cursor: pointer;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 2;
    transition: all 0.1s ease-in-out;
    border: 2px solid $card-bg;
    display: inline-flex !important;
    width: auto!important;
    +.avtar,
    +img {
      margin-left: -14px;
    }

    &:hover {
      z-index: 5;
    }
  }
}

.separator {
    position: relative;
    display: flex;
    align-self: center;
    justify-content: center;

    &:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      background: #dbe0e5;
      z-index: 1;
    }

    span {
      font-size: 0.813rem;
      padding: 8px 12px;
      background: #ffffff;
      z-index: 5;
      text-transform: capitalize;
      font-weight: bold;
    }

}    

.bg-light-blue {
    background: #e6f6fe;
    color: #04a9f5;
}

.bg-light-green {
    background: #e8fdf8;
    color: #1de9b6;
}

.bg-light-yellow {
    background: #fef9ea;
    color: #f4c22b;
}

.bg-light-red {
    background: #feeceb;
    color: #f44236;
}

.bg-light-primary {
  background: #e6f6fe;
  color: #04a9f5;
}

.bg-light-secondary {
  background: var(--theme-green-color-opacity) !important;
  color: var(--theme-green-color) !important;
}

.bg-light-user {
  background: #61bff84f !important;
}

.bg-light-1 {
  background: #faedcb !important;
}

.bg-light-2 {
  background: #c9e4de !important;
}

.bg-light-3 {
  background: #c6def1 !important;
}

.bg-light-4 {
  background: #dbcdf0 !important;
}

.bg-light-5 {
  background: #f2c6de !important;
}

.bg-light-6 {
  background: #f7d9c4 !important;
}

.bg-light-7 {
  background: #a2e1db !important;
}

.bg-light-8 {
  background: #c6dbda !important;
}

.bg-light-8 {
  background: #ffaea5 !important;
}

.bg-light-9 {
  background: #ffffb5 !important;
}

.bg-light-10 {
  background: #eceae4 !important;
}

.bg-secondary {
  background-color: var(--theme-green-color) !important;
  color: #ffffff;
  font-size: 0.8125rem !important;
  padding: .35em .65em;
}

.bg-green {
  background: #468847;
  color: #ffffff;
  padding: 0px 5px 0px 5px !important;
  font-size: 0.8125rem !important;
}

.bg-amber {
  background: #f0ad4e;
  color: #ffffff;
  padding: 0px 5px 0px 5px !important;
  font-size: 0.8125rem !important;
}

.bg-red {
  background: #e1504d;
  color: #ffffff;
  padding: 0px 5px 0px 5px !important;
  font-size: 0.8125rem !important;
}

.eventprogress-bar {
  background-color: var(--theme-purple-color) !important;
  border-radius: 0px 8px 8px 0px;
  width: 15%;
  text-align: end !important;
  padding-right: 10px;
}

.event-card small {
  font-size: 0.675rem;
} 

/* ----------------------------------login page css ------------------------------ */
.navigation-text {
  opacity: 0.7;
}

.login-text-color {
  color: var(--theme-green-color) !important;
}

.login-form-btn {
  background-color: var(--theme-green-color) !important;
  font-size: 0.813rem !important;
  font-weight: bold !important;
}

.form-check-input {
  width: 25px;
  height: 25px;
}

.form-check-input:checked {
  background-color: var(--theme-green-color) !important;
  border-color: var(--theme-green-color) !important;
}

/* ----------------------------------footer custom css ------------------------------ */
.pta-text {
  opacity: 0.8;
  font-size: clamp(0.813rem, 1vw, 0.813rem) !important;
}

.footer-links a {
  font-size: clamp(0.813rem, 1vw, 0.813rem) !important;
  font-weight: 600;
}

.list-unstyled {
  font-size: clamp(0.813rem, 1vw, 0.813rem) !important;
}

.list-unstyled.eventInformation li {
  margin-top: .5rem !important;
  margin-bottom: .5rem !important;
  padding-left: 2px;
}

.list-unstyled.eventInformation li i {
  width: 20px;
}

.footer-bottom-color {
  background-color: #824D9A !important;
}

.footer-bottom-text {

  opacity: 0.8;
  font-size: clamp(0.813rem, 1vw, 0.813rem) !important;
}

/* ----------------------------------Registration Page css ------------------------------ */
.register-form .fas {
  color: #E90084 !important;
}

.register-form label {
  font-weight: bold;
}

.help-desk-card {
  border-radius: 16px !important;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.help-title {
  text-transform: uppercase;
}

.register-btn {
  color: white;
  background-color: var(--theme-green-color) !important;
}

.register .form-check-input {
  border-color: var(--theme-green-color) !important;
  width: 25px;
  height: 25px;
}

.register .form-check-input:checked {
  background-color: var(--theme-green-color) !important;
  border-color: var(--theme-green-color) !important;
  width: 25px;
  height: 25px;

}

/* Drop down menus */

.dropdown-item:active {
  background-color: var(--theme-green-color-opacity) !important;
}

/* ----------------------------------Your PTA------------------------------ */

.pta-title{
  font-family:'Poppins';
  font-size: 20px !important;
  font-weight: 500 !important;
}
.WhatWeDo p{
}

.accordion-title h5{
  font-size: 16px;
  font-weight: 700;
  /* margin: 1px 0px; */
  margin-top: 13px;
  
}
.Committee.Minutes  .accordion-flush .accordion-item .accordion-button
{
border-radius: 16px 16px 0px 0px ;
align-items: end;
transition: 0.5s;
}
.Committee.Minutes .accordion-header
{
border-radius: 16px 16px 0px 0px  !important;

}
.Committee.Minutes .accordion-button:not(.collapsed)
{

  background-color: white !important;
  color: #000000;
  padding-bottom: 0px !important;
  box-shadow: none;
  align-items: start !important;
transition: 0.5s;


}
.Committee.Minutes .accordion-item {

  margin: 18px 0px !important;
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
border-radius: 16px 16px 0px 0px  !important;

}
.Committee.Minutes .accordion-flush .accordion-collapse {

  padding: 0px 20px !important;
}
.accordion-button:focus 
{
  border-color: transparent !important;
  box-shadow: none !important;
}
.PTAFiles  .table>:not(caption)>*>*
{
  min-width: 150px !important;
}
.list-unstyled>a>i
{
  color: #000000 !important;
} 
.business-title
{
font-size: 24px;
font-weight: 700;
}
.FQR-accordion .accordion-flush .accordion-item:last-child {
  border-bottom: 1px solid !important;
}

.FQR-accordion .accordion-flush .accordion-item:first-child {
  border-top: 1px solid !important;
} 
.FQR-accordion .accordion-button:not(.collapsed) {
  color: black !important;
  background-color: white !important; 
 box-shadow: none;
}
.FQR-accordion .accordion-item
{
  border: 1px solid !important;
  border-left: 0px !important;
border-right:0px !important ;
border-top: 0px !important  ;
}
.FQR-accordion .accordion-button
{
  padding: 24px 1.25rem !important;
}
.FQR-accordion .accordion-body
{
  padding-top: 0px !important;
}

.checkoutdate  p{
  font-size: 14px;
}
.order-title
{
  font-size: 14px;
}

/* ----------------------------------My Account------------------------------ */

.site-settings .nav-tabs .nav-link.active 
{
  background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
  border-color:transparent !important;
  color: var(--theme-green-color);
  font-weight: 500 !important;
  border-bottom: 1px solid var(--theme-green-color) !important;
}
.site-settings .nav-tabs .nav-link.active .my-account-tab {
  color: var(--theme-purple-color);
}
.site-settings .nav-tabs .nav-link .my-account-tab {
  color: var(--theme-green-color);
}
.site-settings .nav-tabs
{
  border-bottom: transparent !important;
}
.site-settings .nav-link
{
  color: var(--theme-purple-color);
  padding: 10px 17px;
}

.site-settings .nav-link:hover
{
  border: 1px solid transparent !important;
  color: var(--text-color);
}

.MyAccount  label {
  font-weight: 700;
  color: #000000 !important;
  font-size: inherit;
}
.span-color p
{
  color: #E90084;
  font-size: 20px;
  margin-bottom: 0px;
}
.MyAccount .form-select {
  border-radius: 8px !important;
  padding: .5rem .75rem !important;
  /*border-color: black;*/
}

.MyAccount .form-control {
  border-radius: 8px !important;
  padding: .5rem .75rem !important;
  /*border-color: black;*/
}

.MyAccount .file-upload-wrapper {
 
  width: 100%;
}

.MyAccount .file-upload {
  position: relative;
  display: block;
  width: 100%;
  max-height: 129px;
  max-width: 342px;
  border: 1px dashed rgba(233, 0, 132, 1);
  border-radius: 10px;
  background-color:rgba(233, 0, 132, 0.08)
  ;
  background-size: cover;
  overflow: hidden;
  text-align: center;
  transition: all .2s ease-in-out;
}

.MyAccount .file-upload input[type="file"] {
  position: absolute;
  font-size: 100px;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer
}

.MyAccount  table.dataTable.display tbody td {
  border: 1px solid rgba(122, 81, 145, 0.4)
  !important;
}


.MyAccount .file-upload .icon {
  font-size: 22px;
  color:var(--text-color);
  
  margin-top: 40px;
}
.MyAccount-title
{
 font-weight: 700;
 font-size: 14px !important;
}
.MyAccount .Preferences-content p
{
  font-family: "Poppins", sans-serif !important ;
  color: #000000;
}
.MyAccount .file-upload h3 {
  margin: 0;
  font-size: 12px
  ;
  font-weight: 600;
  color:var(--text-color) ;

}
/*.MyAccount .file-preview
{
  width: 100px;
  height: 96px;
}*/
.MyAccount .file-preview img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.MyAccount .form-check-input {
  border-radius: 8px !important;
  width: 25px;
  height: 25px;
}

.MyAccount .form-check-input:checked {
  background-color: var(--theme-green-color) !important;
  border-radius: 8px !important;
  width: 25px;
  height: 25px;
}

.MyAccount .file-upload p {
  margin: 0;
  font-size: 12px;
  color:var(--text-color) ;
}
.btn-Details {
  background-color: var(--theme-green-color) !important;
  color: white;
  height: 40px;
  font-size: 16px;
  padding: 8px 40px;
  border-radius: 8px;
  border: none;
}
.MyAccount .Youritems-bar 
{
  align-items: start;
}
.MyAccount   table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd ,table.dataTable.display tbody tr.odd > .sorting_1,table.dataTable.display tbody tr.even > .sorting_1
{
  background: transparent !important;


}

.MyAccount   table.dataTable.display tbody tr.odd > .sorting_1,table.dataTable.display tbody tr.even > .sorting_1
{
  color: #7A5191 !important;  
}
.dataTables_info {
  display: none;
}
.dataTables_wrapper .dataTables_paginate {
  float: none !important;

  justify-content: space-between;
  display: flex !important;
  padding-top: 0.25em;
}
.MyAccount .dataTables_wrapper .dataTables_paginate .paginate_button 
{
  background: transparent !important;
  border: none !important;
}
.status-dispatched {
  background-color: #00c9a7 !important;
  color: white;
  padding: 5px 10px;
  border-radius: 12px;
  text-align: center;
}
.MyAccount table.dataTable tbody th, .MyAccount table.dataTable tbody td {
  font-size: 13px;
}
.color-qr
{
  color: #7A5191 !important;
}
.MyAccount table.dataTable thead th , .MyAccount table.dataTable thead td {
  padding: 10px 18px;
  border: 1px solid rgba(122, 81, 145, 0.4)!important;
  min-width: 78px !important;

}
.MyAccount table.dataTable.no-footer 
{
  border-bottom: none;
  border-radius: 10px;
}
.MyAccount .dataTables_wrapper {
  position: relative;
  clear: both;
  width: 100%;
  overflow-x: auto;
}
.MyAccount .first ,.MyAccount .last
{
  display: none !important;
}
.MyAccount .dataTables_wrapper .dataTables_paginate .paginate_button:hover
{
  color: #000000 !important;
}
.MyAccount .dataTables_wrapper .dataTables_length {
  float: left;
  margin: 17px 10px;
}
.MyAccount .Youritems-bar 
{
  font-size: 12px;
}
.tab-height
{
  min-height: 52vh;
}
.BaseLayer-text h1
{
  font-weight: 600;

}

.accordion-button:not(.collapsed) {
    color: #000000 !important;
    background-color: #0fb3a214 !important;
}

.accordion-button:not(.collapsed)::after {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* ---------------------------------- Reports ------------------------------ */

.Reporting  table.dataTable.display tbody td {
  border: 1px solid rgba(122, 81, 145, 0.4)
  !important;
}
.Reporting .table-bordered>:not(caption)>*>*
{
  box-shadow: none !important;


}
.Reporting .dataTables_info
{
  display: none !important;
}
.reportsOverImg{
  height: 100px;
}
.Reporting .nav-tabs .nav-link.active 
{
  background-color: transparent;
  border-color:transparent !important;
  color: var(--theme-green-color);
  font-weight: 500 !important;
  border-bottom: 1px solid var(--theme-green-color) !important;
}
.Reporting .nav-tabs
{
  border-bottom: transparent !important;
}
.Reporting .nav-link
{
  color: var(--text-color);
  padding: 10px 14px;
}

.Reporting .nav-link:hover
{
  border: 1px solid transparent !important;
  color: var(--text-color);
}
.Reporting .first
{
  display: none !important;
} 
.Reporting .last{
  display: none;
}
.btn-outline-green {
  color: var(--theme-green-color) !important;
  border: 2px solid var(--theme-green-color) !important;
  font-weight: 600 !important;
  padding: 4px 20px 4px 20px;
  border-radius: 10px !important;
  background-color: transparent;
}

.completed-line {
  background: rgba(15, 179, 162, 0.08);
  padding: 16px 20px;
  border-radius: 8px;
}

.page-item.active .page-link {
    background-color: #0FB3A2 !important;
    border: 1px solid #0FB3A2;
    color: white !important;
}
.page-link {
    color: black !important;
}
.buttons-excel{
  margin-left: 5px !important;
  margin-right: 5px !important;
}
div.dt-buttons > .btn {
   margin-bottom: 10px;
}

div.dt-length > label, div.dt-search > label {
  font-weight: normal;
}

.Reporting  table.dataTable.display tbody td {
  border: 1px solid rgba(122, 81, 145, 0.4)
  !important;
  min-width: fit-content !important;
  white-space: nowrap !important;
  padding: 10px 18px;
 
}

.Reporting  table.dataTable.display tfoot td {
  border: 1px solid rgba(122, 81, 145, 0.4)
  !important;
  min-width: fit-content !important;
  white-space: nowrap !important;
  padding: 10px 18px;
  background: #FFFFFF !important;
 
}
.Reporting   table.dataTable.stripe tbody tr.odd,table.dataTable tbody tr, table.dataTable.display tbody tr.odd ,table.dataTable.display tbody tr.odd > .sorting_1,table.dataTable.display tbody tr.even > .sorting_1
{
  background: #FFFFFF !important;


} 

table.dataTable thead .sorting:after {
  content: "" !important;
}

.m-top {
  margin-top: 55px;
  margin-bottom: 100px;
}

.Reporting   table.dataTable.display tbody tr.odd > .sorting_1,table.dataTable.display tbody tr.even > .sorting_1
{
  color: #7A5191 !important;  
  text-align: center;
}
.dataTables_wrapper .dataTables_paginate {
  float: none !important;

  justify-content: space-between;
  display: flex !important;
 
  padding-top: 0.25em;
}
.Reporting .dataTables_wrapper .dataTables_paginate .paginate_button:hover
{
  color: #000000 !important;
}
.id-color
{
  color: #7A5191;
}
.Reporting .first ,.Reporting .last
{
  display: none !important;
}
.Reporting table.dataTable thead th {
  border: 1px solid rgba(122, 81, 145, 0.4) !important;
  min-width: fit-content !important;
  white-space: nowrap !important;
  padding: 10px 18px;
  background-color: #b7a5c166;
 
}
.Reporting .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: transparent !important;
  border: none !important;
}

.Reporting .dataTables_wrapper {
  position: relative;
  clear: both;
  width: 100%;
  overflow-x: auto;
}
.Reporting .dataTables_wrapper .dataTables_length
{
  margin: 18px 0px;
}
.dataTables_wrapper .dataTables_length {
  float: left !important;
}
.Reporting  .nav-tabs .nav-link.active {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--primary_colour);
  font-weight: 500 !important;
  border-bottom: 1px solid var(--primary_colour) !important;
}

.table > tbody > tr > td {
     vertical-align: middle;
}

/*daterangepicker  */
.btn-outline-green input
{
  color: var(--primary_colour);
}
.daterangepicker .calendar-table {
  background-color: #fff;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color:var(--primary_colour);
  color: #fff;
}
.daterangepicker .ranges li.active {
  background-color:var(--primary_colour);
  color: #fff;
}
.daterangepicker .drp-calendar.left .calendar-table .end-date {
  background-color:var(--primary_colour);
  color: #fff;
}
.daterangepicker .drp-buttons .btn {
  background-color:var(--primary_colour);
  border-color:var(--primary_colour);
  color: #fff;
}
.daterangepicker .drp-buttons .btn:hover {
  background-color:var(--primary_colour);
  border-color:var(--primary_colour);
  color: #fff;
}
.daterangepicker .ranges li.active , .daterangepicker td.active
{
  background-color:var(--primary_colour) !important;

}
.Reporting .form-select {
    padding: 9px 15px;
    border-radius: 8px;
    border: 1px solid black !important;
    font-size: 0.813rem !important;
  }

/* ---------------------------------- Advanced Filtering ------------------------------ */
.AdvancedFiltering
{
  background: var(--pc-sidebar-background);
  max-width: 420px;
  width: 100%;
  position: fixed;
  top: 142px !important;
  right: -420px;
  transition: all 0.2s ease-in-out;
  z-index: 1026;
  height: 100vh !important;
  border-radius: 16px 0px 0px 0px;

  border-right: var(--pc-sidebar-border);
}
.AdvancedFiltering.Advanced-active {
  right: 0;
}  
.AdvancedFiltering.Advanced-active .filtering {
  position: relative;
  z-index: 5;
  background: inherit;
  height: 85vh;
  border-radius: 16px 0px 0px 0px;
  overflow-y:auto;
  padding: 30px;

}
.filtering h3
{
  font-size: 20px;
  font-weight: 500;
  font-family: 'Poppins';

}

.Advanced-active .close-x {
  position: absolute;
  top: 50px;
  width: 32px;
  height: 32px;
  left: -31px;
  background-color:#fff;
  z-index: 6;
  display: flex;
  align-items:center;
  border-radius: 8px 0px 0px 8px ;
  justify-content: center;


}



.advanced-filtering {
  margin-top: 20px;
}

.advanced-filtering h3 {
  margin-bottom: 20px;
}

.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.filters .form-group {
  margin-bottom: 15px;
  
}
.filters label
{
  margin: 5px 0px;
}
.filters .btn-outline-green
{
  padding: 8px 32px 8px 32px;
}

.success p
{
font-weight: 500;
font-size: 18px !important;
}
.success {
  font-size: 18px !important;
}
.bg-white
{
  background-color: white;
}
.listings .UpcomingEvent
{
  height: 100%;
}
.btn-group-listing .btn-outline-green
{
  padding: 8px 48px 8px 48px
  ;
}
.cardPositionAlign{
  top: 150px !important;
}

/* ----------------------------------Media Query css ------------------------------ */


@media (max-width:1200px) {
  .amount-box {
    font-size: 25px;
    height: 48px !important;
  }
  .cardPositionAlign{
    top: 105px !important;
  }
  .AdvancedFiltering{
    top: 97px !important;
  }
  .fundraising-info div h5 {
    margin: 5px 0;
    font-size: 1rem;

  }

  .progress-bar {
    width: 20%;
  }

  .fundraising-info div p {

    font-size: 0.813rem;
  }
}

@media (max-width: 600px) {
  .topnavbar a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width:768px) {
  .Fundraising p {
    margin: 0;
    font-size: 0.813rem;
  }
}

@media (max-width: 993px) {
  .form-search .form-control {
    max-width: 200px !important;
  }

  .CreateAccount p {
    font-size: 0.813rem;
  }

  .progress-bar {
    width: 25%;
  }
}


@media (max-width: 767.98px) {

  .flyer,
  .qr-code {
    align-items: center;
    text-align: center;
  }

  .flyer .event-details,
  .qr-code .event-share-card {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .form-search {
    display: none;
  }

  .search-icon {
    display: block;
  }

  .progress-bar {
    width: 40%;
  }
}

@media (max-width:450px) {
  .close-x {
    position: absolute;
    top: 2PX !important;
    width: 32px;
    height: 32px;
    left: 92% !important;
    background-color: #fff;
    z-index: 6;
    display: flex;
    border: 1px SOLID !important;
    align-items: center;
    border-radius: 8px 0px 0px 8px;
    justify-content: center;
  }
}

@media (max-width:400px) {
  .filter-box .btn {
    font-size: 12px !important;
    padding: .375rem 3px !important;
  }
  .rounded-2 .form-control {
    font-size: 12px !important;
  }

  
}

@media (max-width: 1400px) {
  .navbar {
    display: none;
  }  
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-heading-color);
  word-break: normal;
}

h1, .h1 {
  font-size: calc(1.3625rem + 1.35vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 1.6rem !important;
    font-weight: bold !important;
  }
}

h2, .h2 {
  font-size: calc(1.3125rem + 0.75vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 1.5rem !important;
    font-weight: bold !important;
  }
}

h3, .h3 {
  font-size: calc(1.0rem + 0.3vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.35rem !important;
    font-weight: bold !important;
  }
}

h4, .h4 {
  font-size: 1.25rem !important;
}

h5, .h5 {
  font-size: 1rem !important;
}

h6, .h6 {
  font-size: 0.850rem !important;
}

p {
  margin-top: 0;
  margin-bottom: 1rem !important;
}

.form-control {
  font-size: 0.813rem !important;
  padding: .5rem .75rem !important;
}

.form-select{
  font-size: 0.813rem !important;
  padding: .5rem .75rem !important;
}
.popover-header {
  font-size: 0.8125rem !important;
  font-weight: bold;
}
.popover-body {
  font-size: 0.8125rem !important;
}

.terms-and-conditions .terms {
    line-height: 1.5rem;
    list-style: none;
}


/* Settings Style 
----------------------------------------------------------*/

.card-custom {
  border: 2px solid #98c379;
  border-radius: 10px;
  padding: 13px 15px;
  display: flex;
  background-color: rgba(105, 176, 94, 0.08)
  ;
  align-items: center;
  gap: 15PX;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.card-custom .fa-regular {

  font-size: 35px;
}
.card-custom h5 {
  color: #98c379;
  font-weight: bold;
  font-size: 14px;
}
.icon-card {
  height: 63px !important;
  border-radius: 8px;
  background: rgba(48, 105, 172, 0.08); /* Setting the opacity here */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  vertical-align: center;
  text-align: center;
  position: relative;
}

.icon-card::after {
  font-family: 'Font Awesome 5 Free'; /* Ensure Font Awesome is loaded */
  /*content: "\f00c" !important; /* Unicode for Font Awesome checkmark icon */*/
  font-weight: 900; /* Solid style requires the font-weight to be 900 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  position: absolute;
  color: #69B05E !important;
  opacity: 1 !important; /* Ensure full opacity */
  z-index: 2;
}

.card-custom p {
  color: #6c757d;
  font-size: 12px;
}

.card-image {
  min-height:75px;
  min-width:75px;
  max-height:75px;
  max-width:75px;
  object-fit: contain;
}

.chek{
  height: 40px !important;
  width: 40px !important;
  border-radius: 8px !important;
  position: relative;
  border: 1px solid black;
}

/* MFA */

.form__group--error.form__pincode > input, .form__group--error.form__recoverycode > input {
  color: #842029;
  background-color: #f7e2e2 !important;
  border-color: #e55664 !important;
}
.form__group--error.form__pincode > input[disabled], .form__group--error.form__recoverycode > input[disabled] {
  background-color: #f7e2e2 !important;
  border-color: #e55664 !important;
  color: #842029;
  opacity: 1;
}
.form__group--success.form__pincode > input, .form__group--success.form__recoverycode > input {
  background-color: rgba(15, 179, 162, 0.08);
}
.form__group--success.form__pincode > input[disabled], .form__group--success.form__recoverycode > input[disabled]  {
  background-color: rgba(15, 179, 162, 0.08);
  border: 1px solid var(--theme-green-color);
  color: #fff;
  opacity: 1;
}
.form__pincode, .form__recoverycode {
  display: block;
  width: 100%;
  margin: 10px auto 20px;
  padding: 0;
}
.form__pincode:before,
.form__pincode:after,
.form__recoverycode:before,
.form__recoverycode:after {
  display: table;
  content: '';
}
.form__pincode:after, .form__recoverycode:after {
  clear: both;
}
.form__pincode > label, .form__recoverycode > label{
  display: block;
  text-align: center;
  margin: 10px 0;
}
.form__pincode > input[type="number"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.form__pincode > input {
  display: inline-block;
  float: left;
  width: 15%;
  height: 50px;
  background-color: #e1e1e1;
  line-height: 48px;
  text-align: center;
  font-size: 2em !important;
  color: #181819;
  border: 0;
  border-bottom: 2px solid rgba(0,0,0,0.3);
  border-radius: 2px 2px 0 0;
  transition: background-color 0.3s, color 0.3s, opacity 0.3s;
  cursor: default;
  user-select: none;
  margin: 0;
  margin-top: 10px;
  margin-right: 2%;
  padding: 0;
}
.form__recoverycode > input {
  display: inline-block;
  float: left;
  width: 18%;
  height: 50px;
  background-color: #e1e1e1;
  line-height: 48px;
  text-align: center;
  font-size: 1.2em;
  color: #181819;
  border: 0;
  border-bottom: 2px solid rgba(0,0,0,0.3);
  border-radius: 2px 2px 0 0;
  transition: background-color 0.3s, color 0.3s, opacity 0.3s;
  cursor: default;
  user-select: none;
  margin: 0;
  margin-top: 10px;
  margin-right: 2%;
  padding: 0;
}
.mfa-separator {
  display: inline-block;
  float: left;
  width: 5%;
  height: 50px;
  line-height: 48px;
  text-align: center;
  font-size: 1.5em;
  color: #181819;
  border: 0;
  cursor: default;
  user-select: none;
  margin: 0;
  margin-top: 10px;
  margin-right: 2%;
  padding: 0;
}
.form__pincode > input:focus, .form__recoverycode > input:focus {
  outline: 0;
  box-shadow: none;
  border-color: #1486f0;
  animation: border-pulsate 1.5s infinite;
  -webkit-tap-highlight-color: transparent;
}
.form__pincode > input:last-child, .form__recoverycode > input:last-child  {
  margin-right: 0;
}
.form__pincode > input[disabled], .form__recoverycode > input[disabled] {
  background: #eee;
  opacity: 1;
}
.form__buttons {
  text-align: center;
  margin: 0 auto;
  padding: 20px 0 0;
}
.mfa_other_options  {
  text-align: center;
  margin: 0 auto;
  padding: 20px 0 0;
}
/* Button
   ============================================== */
.continueToELCCS {
  padding: 0 20px;  
}
.mfa-button {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  outline: 0;
  cursor: pointer;
  height: 50px;
  line-height: 50px;
  margin: 0;
  padding: 0 20px;
/* primary */
}
.button--primary {
  background-color: #4776e6;
  color: #fff;
  line-height: 48px;
  border: 1px solid transparent;
  border-radius: 50px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  -webkit-touch-callout: none;
rgba(0,0,0,0.3)
/* disabled */
}
.button--primary:focus,
.button--primary:hover {
  background-color: #2d62e2;
  color: #fff;
}
.button--primary:active {
  background-color: #1d53d4;
  color: #fff;
  box-shadow: inset 0 0 4px 2px rgba(0,0,0,0.1);
}
.button--primary[disabled] {
  background-color: #4776e6;
  user-select: none;
  pointer-events: none;
  cursor: not-allowed;
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}
/* Placeholder
   ============================================== */
/* Chrome/Opera/Safari */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.7;
}
/* Firefox 19+ */
::-moz-placeholder {
  color: inherit;
  opacity: 0.7;
}
/* IE 10+ */
:-ms-input-placeholder {
  color: inherit;
  opacity: 0.7;
}
/* Firefox 18- */
:-moz-placeholder {
  color: inherit;
  opacity: 0.7;
}
/* Animations
   ============================================== */
@-moz-keyframes border-pulsate {
  0% {
    border-color: #1486f0;
  }
  50% {
    border-color: rgba(0,0,0,0.3);
  }
  100% {
    border-color: #1486f0;
  }
}
@-webkit-keyframes border-pulsate {
  0% {
    border-color: #1486f0;
  }
  50% {
    border-color: rgba(0,0,0,0.3);
  }
  100% {
    border-color: #1486f0;
  }
}
@-o-keyframes border-pulsate {
  0% {
    border-color: #1486f0;
  }
  50% {
    border-color: rgba(0,0,0,0.3);
  }
  100% {
    border-color: #1486f0;
  }
}
@keyframes border-pulsate {
  0% {
    border-color: #1486f0;
  }
  50% {
    border-color: rgba(0,0,0,0.3);
  }
  100% {
    border-color: #1486f0;
  }
}
/* Flipdown */
/* Rotor tops */
.flipdown.flipdown__theme-dark .rotor,
.flipdown.flipdown__theme-dark .rotor-top,
.flipdown.flipdown__theme-dark .rotor-leaf-front {
  color: #FFFFFF;
  background-color: var(--theme-purple-color);
}
/* Rotor bottoms */
.flipdown.flipdown__theme-dark .rotor-bottom,
.flipdown.flipdown__theme-dark .rotor-leaf-rear {
  color: #EFEFEF;
  background-color: #815798;
}
.flipdown.flipdown__theme-dark {
  font-family: 'Poppins';
}
/* Hinge */
.flipdown.flipdown__theme-dark .rotor:after {
  border-top: solid 1px var(--theme-purple-color);
}

/* Shareable icons */

.shareable-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
}
@media (hover: hover) {
    .shareable-icons>a {
        transition: color .2s, background .2s;
    }
}
.shareable-icons>a {
    width: 40px;
    height: 40px;
    border: 1px solid var(--theme-green-color);
    border-radius: 36px;
    color: var(--theme-green-color) !important;
    padding: 10px;
    text-decoration: none !important;
}
.shareable-icons>a:hover {
    width: 40px;
    height: 40px;
    border: 1px solid var(--theme-purple-color);
    border-radius: 36px;
    color: var(--theme-purple-color) !important;
    padding: 10px;
    text-decoration: none;
}
.shareable-icons>a>i {
    font-size: 1.5em;
}
.shareable-icons .fa-chain:before, .shareable-icons .fa-link:before {
    margin-left: -2px;
}

.modal-footer {
    justify-content: space-between;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #ecf9f8;
}

/* Botttom Sticky Advert */

.close-adhesive{
    box-sizing:content-box;
    width:16px;
    height:16px;
    position:absolute;
    right:0;
    padding:5px;
    background-color:#f2f6f7;
    text-align:center;
    cursor:pointer;
}
.close-adhesive.bottom{
    top:0;
}
.close-adhesive.top{
    bottom:0;
}
.close-adhesive.bottom.extern{
    top:-21px;
    padding-bottom:0;
}
.close-adhesive.top.extern{
    bottom:-21px;
    padding-top:0;
}
.close-adhesive>svg{
    display:block;
}
.close-adhesive-icon{
    fill:#7A5191;
    stroke-width:3;
    stroke:#73d9c6;
}
.snigel-adhesive{
    box-sizing:content-box;
    position:fixed;
    height: 65px;
    left:0;
    right:0;
    z-index:99999;
    text-align:center;
    padding-top:5px;
    padding-bottom:5px;
    background-color:#fefefe;
    box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); 
    transition:all 1500ms ease-out;
}
.snigel-adhesive{
    text-align: -webkit-center;
}
.snigel-adhesive{
    text-align: -moz-center;
}
@media screen and (min-width: 767.98px) {
    .snigel-adhesive {
        /*display: none;*/
    }
} 
.snigel-adhesive.bottom{
    bottom:0;
}
.snigel-adhesive.top{
    top:0;
}
.snigel-adhesive-center{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}
.snigel-adhesive-centered{
    position:absolute;
    margin:0;
    transform:translateY(-50%);
    right:0;
    left:0;
}
.close-adhesive{
    box-sizing:content-box;
    width:16px;
    height:16px;
    position:absolute;
    right:0;
    padding:5px;
    background-color:#f2f6f7;
    text-align:center;
    cursor:pointer;
}
.close-adhesive.bottom{
    top:0;
}
.close-adhesive.top{
    bottom:0;
}
.close-adhesive.bottom.extern{
    top:-21px;
    padding-bottom:0;
}
.close-adhesive.top.extern{
    bottom:-21px;
    padding-top:0;
}
.close-adhesive>svg{
    display:block;
}
.close-adhesive-icon{
    fill:#7A5191;
    stroke-width:3;
    stroke:#73d9c6;
}
.logo-adhesive{
    cursor:pointer;
    opacity:0.65;
    position:absolute;
    left:5px;
    top:5px;
    width:24px;
    height:24px;
    background:url("https://cdn.snigelweb.com/resources/img/logo/snigel-icon-48.png") no-repeat 50% 50%/contain;
}
.logo-adhesive:hover{
    opacity:1;
}
.logo-adhesive.adhesive-hidden{
    left:-500px;
}
@media (min-width: 900px) {
  .snigel-adhesive {
    height: 105px;
  }  
}
/*
.password-field {
  border-right: 1px solid #ffffff !important;
}  
.password-input-group-text {
  background-color: #ffffff;
}
*/
.sticky-top {
  z-index: 998 !important;
}

.tempus-dominus-widget .calendar-header {
  margin-top: 10px;
}

div.error, label.error {
  color: rgba(var(--bs-danger-rgb)) !important;
  margin-top: 1em;
  border-color: rgba(var(--bs-danger-rgb)) !important;
  font-weight: 400;
}

input.error, textarea.error, select.error, checkbox.error, radio.error {
  color: rgba(var(--bs-danger-rgb)) !important;
  border-color: rgba(var(--bs-danger-rgb)) !important;
}

.help-scroll-bar {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 10px;
  }
    /* width */
.help-scroll-bar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
.help-scroll-bar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.help-scroll-bar::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.help-scroll-bar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td  {
  padding: 10px 8px !important;
} 

.manage-table tbody tr {
  height: 50px;
}

.responsive-adverts-1, .responsive-adverts-2 {
width: 300px;
height: 250px;
max-width: 250px;
max-height: 250px;
margin: auto;
}
.responsive-adverts-3 {
width: 300px;
height: 250px;
max-width: 250px;
max-height: 250px;
margin: auto;
}
.responsive-adverts-fixed-bottom {
 width: 320px;
height: 50px;
max-width: 320px;
max-height: 50px;
margin: auto; 
}
@media(min-width: 500px) {
.responsive-adverts-1 {
width: 320px;
height: 250px;
max-width: 320px;
max-height: 250px;
margin: auto;
}
.responsive-adverts-2 {
width: 320px;
height: 250px;
max-width: 320px;
max-height: 250px;
margin: auto;
}
.responsive-adverts-3 {
width: 250px;
height: 250px;
max-width: 250px;
max-height: 250px;
margin: auto;
}
.responsive-adverts-fixed-bottom {
 width: 320px;
height: 50px;
max-width: 320px;
max-height: 50px;
margin: auto; 
}
}
@media(min-width: 800px) {
.responsive-adverts-1 {
width: 728px;
height: 90px;
max-width: 728px;
max-height: 90px;
margin: auto;
}
.responsive-adverts-2 {
width: 728px;
height: 90px;
max-width: 728px;
max-height: 90px;
margin: auto;
}
.responsive-adverts-3 {
width: 300px;
height: 250px;
max-width: 300px;
max-height: 250px;
margin: auto;
}
}
.fileinput-remove {
  display: none;
}

.toast {
  background-color: #ffffff;
}

.toast-container {
   z-index: 1050;
}

.sorting-table:hover{
  cursor: all-scroll;
}
.dt-paging nav{
  background-color: white;
}
.terms {
  line-height: 1.5rem;
}

#CookiebotWidget {
  bottom: 10px !important;
  positions: absolute !important;
}


table.dataTable thead th, table.dataTable thead td {
  border-bottom: 2px solid #111 !important;
  border-top: 1px solid #dee2e6 !important;
}

.table>:not(:first-child) {
  border-top: 1px solid #dee2e6 !important;
}
.table-info {
    --bs-table-bg: rgba(15, 179, 162, 0.08);
    --bs-table-striped-bg: rgba(15, 179, 162, 0.08);
    --bs-table-striped-color: #000;
    --bs-table-active-bg: rgba(15, 179, 162, 0.08);
    --bs-table-active-color: #000;
    --bs-table-hover-bg: rgba(15, 179, 162, 0.08);
    --bs-table-hover-color: #000;
}

.dateformat {
display:block;
width:40px;
text-align:center;
text-transform:uppercase;
font-weight:bold;
float:left;
margin:3px 5px 3px 3px;
}
a.dateformat {
text-decoration:none!important;
}
a.dateformat div {
width:100%!important;
}
.eventslatest .jeviconnotdate {
margin:3px 0px 3px 48px!important;
border-style:solid;
border-width:0px 4px 0px 0px;
padding-right:3px!important;
width:auto!important;
}
span.dateformat1, span.dateformat2 {
margin:0px;
display:block;
}
.events_cal .dateformat {
background-color: #084e4b;
color:#fff!important;
border:solid 1px #084e4b;
}
.events_cal .dateformat1 {
background-color: #fff;
color:#084e4b!important;
}

.mfa-separator {
  display: inline-block;
  float: left;
  width: 5%;
  height: 50px;
  line-height: 48px;
  text-align: center;
  font-size: 1.5em;
  color: #181819;
  border: 0;
  cursor: default;
  user-select: none;
  margin: 0;
  margin-top: 10px;
  margin-right: 2%;
  padding: 0;
}