/* Animations */
@keyframes slideLeft {
  0% {
    left: 700px;
  }

  100% {
    left: 0px;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0%;
  }

  100% {
    opacity: 100%;
  }
}

@keyframes blinkInOut {
  0% {
    opacity: 0%;
  }
  50% {
    opacity: 100%;
  }
  100% {
    opacity: 0%;
  }
}

@keyframes slideUp {
  0% {
    top: 500px;
  }

  100% {
    top: 0px;
  }
}

/*Custom CSS*/

/*Animation*/
.fadeIn {
  animation-name: fadeIn;
  animation-duration: 0.5s;
}

/*Alert Page */
.alertItem {
  animation-name: fadeIn;
  animation-duration: 0.7s;
}

.alertList {
  animation-name: fadeIn;
  animation-duration: 0.7s;
}
.alertBadge {
  justify-content: center;
  display: inline-flex;
  height: fit-content;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
/*Dashboard Page */
.dashboardWidget {
  animation-name: fadeIn;
  animation-duration: 0.7s;
}
.errorAlertCard {
  animation-name: blinkInOut;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

/*MembersPage*/
.memberItem {
  box-shadow: 0 0 25px rgba(27, 26,26,0.5252);
  width: 365px;
  cursor: pointer;
}

/*Report Page*/
.reportCard {
  width: 100%;
  animation-name: fadeIn;
  animation-duration: 0.5s;
}

.reportButton {
  height: 60px;
  width: 100%;
}
.reportButtonText {
  font-size: 0.75rem;
  color: white;
}

.reportView {
  animation-name: fadeIn;
  animation-duration: 1s;
}

.rdrDefinedRangesWrapper,
.rdrStaticRange {
  background: transparent; /*BackO_324*/
  color: black !important; /*BackO_324*/
  
}

.react-select-container .react-select__control {
  /* background: #5c2853; */
  color: black !important; /*BackO_324*/
}

.rdrStaticRange:hover .rdrStaticRangeLabel,
.rdrStaticRange:focus .rdrStaticRangeLabel {
  background: #ff8080 !important; /*BackO_324*/
  color: white; /*BackO_324*/
  font-weight: 500; /*BackO_324*/
}

.rdrCalendarWrapper {
  width: 100%;
}

.css-1wa3eu0-placeholder,
.css-1uccc91-singleValue,
.css-1uccc91-singleValue {
  color: black !important; /*BackO_324*/
}
/*Settings*/
.settingsCard {
  animation-name: fadeIn;
  animation-duration: 0.5s;
}

.activeTab {
  background: #C00707 !important;/*BackO_324*/
  color: ghostwhite !important;/*BackO_324*/
  font-weight: 500;/*BackO_324*/
  text-transform: uppercase;/*BackO_324*/
}

/*Sign In Page*/

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  background: lightgray; /*BackO_324*/
  color: white !important;
  cursor: pointer;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: black !important;
  cursor: default;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
/*Light/DarkMode Theme*/
.backgroundColorLight {
  background-color: #413d3d; /*BackO_324*/
}
.backgroundColorSubLight {
  background-color: #d3d3d3; /*BackO_324*/
}
.backgroundColorDark {
  background-color: #413d3d; /*BackO_324*/
}
.backgroundColorSubDark {
  background-color: #272323; /*BackO_324*/
}
.darkModeFont {
  color: ghostwhite !important;/*BackO_324*/
}
.lighModeFont {
  color: black !important; /*BackO_324*/
}
.muteColorDark {
  background-color: #A14F4F !important ;
}
.muteColorLight {
  background-color: #C00707 !important;
}

/*General*/
.backofficeCard {
  width: 100%;
  box-shadow: 0 0 25px rgba(27, 26, 26, 0.952) !important; /*BackO_324*/
  animation-name: fadeIn;
  animation-duration: 0.5s;
  border-radius: 20px;
  text-transform: uppercase;/*BackO_324*/
}

.card {
  border-radius: 10px;
}

.hide {
  display: none;
}

.sidebar-content {
  box-shadow: 0 0 20px rgba(27, 26, 26, 0.952);
}

.content {
  min-height: inherit;
}

.shadow {
  box-shadow: 0 0 20px rgba(27, 26, 26, 0.9) !important; /*BackO_324*/
}

.card-header {
  border-radius: 20px 20px 0px 0px !important;
}

.white-font {
  color: white !important;
}

.sidebar-link:hover,
.list-group-item-action:hover {
  background: #c0070774 !important;/*BackO_324*/
  color: white !important;/*BackO_324*/
}
.list-group-item-action:focus {
  background: #C00707 !important;/*BackO_324*/
}

/*the colored section on the top of page */
/* .wrapper:before{
  height: 100%;
} */
.wrapper:before {
  /*BackO_324*/
  width: 100%; /* Take the full width of the parent */
  height: 100%; /* Take the full height of the parent */
  z-index: -1; /* Ensure the pseudo-element is behind the wrapper content */
}

.sidebar-content {
  background: transparent;
}

.sidebar-brand,
.sidebar-brand:hover {
  background: transparent;
}

/*Highlights active tab on side nav*/
.sidebar-item.active > .sidebar-link
 {
  background: #C00707 !important;/*BackO_324*/
  color: white !important;/*BackO_324*/
  font-weight: 500;/*BackO_324*/
}
.active .name{
  color: white;/*BackO_324*/
}

.rdrDateRangePickerWrapper {
  width: 100%;
}

.scroll-container {
  cursor: grab;
}