:root {
  --scrollbarBG: #fff;
  --thumbBG: #c4c4c4;
  --primary-color: rgb(130, 0, 150);
  --active-unfocused-icons: #8d8d8d;
  --iOS-active-unfocused-icons: #9a99a2;
  --active-focused-icons: #272727;
  --active-focused-icons-escuro: #838383;
  --inactive-icons: #c7c7c7;
  --text-high-emphasis: #242424;
  --text-low-emphasis: #bdbdbd;
  --text-error-color: #b00020;
  --cor-conteudo-site: #f7f7f7;
  --branco: #ffffff;
  --laranja: #ff8e11;
  --laranja-gradiente: linear-gradient(
    180deg,
    #feb523 0%,
    #fe8e10 54.69%,
    #fe6d00 100%
  );
  --gradiant-primary-secondary: linear-gradient(
    180deg,
    #9c00b4 22.4%,
    #78008b 100%
  );
}

.notificationButton {
  background: none;
  border: none;
}

.sidebarStyle {
  position: fixed;
  top: 70px;
  right: -400px;
  width: 400px !important;
  max-width: 100vw !important;
  height: calc(100vh - 70px);
  transition: right 0.3s ease-in-out;
  z-index: 1000;
}

.sidebarStyle.sidebar-visible {
  right: 0;
}

.sidebarStyle a {
  display: block;
  padding: 15px;
  color: white;
  text-decoration: none;
}

.sidebarNotifHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #333;
  color: white;
  position: relative;
}

.sidebarNotifHeader .dropdown-menu.show {
  width: 220px;
}

.sidebarNotifHeader .dropdown :hover {
  filter: none !important;
  -webkit-filter: none !important;
}

.sidebarNotifHeader .dropdown-item:active {
  background-color: none !important;
  color: var(--active-focused-icons);
}

.sidebarTittle {
  position: relative;
  text-align: center;
  z-index: 1;
  overflow: hidden;
  font-weight: 800;
}

.sidebarTittle:before,
.sidebarTittle:after {
  position: absolute;
  top: 51%;
  overflow: hidden;
  width: 48%;
  height: 1px;
  content: '\a0';
  background-color: var(--active-focused-icons);
  margin-left: 2%;
}
.sidebarTittle:before {
  margin-left: -50%;
  text-align: right;
}

.notificationsAccordionItems {
  border-radius: 6px;
  background: var(--branco);
  box-shadow: 0px 3px 4px 0px rgba(177, 177, 177, 0.2);
}

.notificationsAccordionItems .accordion-body {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  max-height: 350px;
  overflow: auto;
}

.notificationsAccordionItems button {
  background: none;
  background-color: var(--branco);
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 800;
  padding: 12px;
}

.notificationsAccordionItems .accordion-button:focus {
  border: none;
  box-shadow: none;
}

.notificationsAccordionItems .accordion-button:not(.collapsed) {
  color: var(--active-focused-icons);
  background-color: unset;
  box-shadow: unset;
}

.notificationsAccordionItems button[aria-expanded='false']::after {
  width: 24px;
  height: 24px;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13 5H11V11H5V13H11V19H13V13H19V11H13V5Z' fill='%23820096'/%3E%3C/svg%3E%0A");
}
.notificationsAccordionItems button[aria-expanded='true']::after {
  width: 24px;
  height: 24px;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13L5 11L19 11L19 13L5 13Z' fill='%23820096'/%3E%3C/svg%3E");
}

.sidebarNotifContent {
  overflow-y: auto;
  height: 95%;
  padding: 16px;
  background-color: #fff;
}

.sidebarNotifContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  border-radius: 10px;
  background-color: transparent;
}

.sidebarNotifContent::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}

.sidebarNotifContent::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #c4c4c4;
}

.sliderLabel {
  display: inline-block;
  height: 20px;
  position: relative;
  width: 45px;
  margin: 0;
}

.sliderLabel input {
  display: none;
}

.sliderLabel .notificationSlider {
  background-color: #8d8d8d;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.sliderLabel .notificationSlider:before {
  background-color: #fff;
  bottom: 0px;
  content: '';
  height: 20px;
  left: 3px;
  position: absolute;
  transition: 0.4s;
  width: 20px;
}

.sliderLabel input:checked + .notificationSlider {
  background-color: #820096;
}

.sliderLabel input:checked + .notificationSlider:before {
  transform: translateX(20px);
}

.sliderLabel .notificationSlider.round {
  border-radius: 34px;
}

.sliderLabel .notificationSlider.round:before {
  border-radius: 50%;
}

#sidebarConfig {
  background-color: #efefef;
  overflow: auto;
}

#sidebarConfigHeader {
  padding: 16px;
}

#sidebarConfigSliders {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#backToNotifButton {
  background: none;
  border: none;
  transform: rotate(180deg);
}

#sidebarNotifs {
  display: flex;
  flex-direction: column;
  gap: 10px 0;
}

.sliderNotifsTittle {
  font-weight: 800;
}

.notificationDescription {
  font-size: 14px;
  margin-top: 6px;
}

.notificationItems {
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #c7c7c7;
  cursor: pointer;
  position: relative;
  border-radius: 10px;
  background-color: #fff;
  filter: drop-shadow(0px 5px 8px rgba(177, 177, 177, 0.4));
}

.notificationItems img {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  filter: drop-shadow(0px 5px 8px rgba(177, 177, 177, 0.4));
  margin-top: 10px;
}

.notificationItems div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.notificationItems .col-2 {
  position: relative;
}

.notificationItems .col-2:first-child {
  max-width: fit-content;
}

.notificationItems .col-2:last-child {
  max-width: 24px;
}

.notificationItems .col-8 {
  flex-direction: column;
  align-items: flex-start;
}

.notificationItems h5 {
  font-size: 14px;
  font-weight: 800;
}

.notificationItems span {
  font-size: 12px;
}

.notificationsDate {
  position: absolute;
  top: 0;
  left: 0;
}

.newNotificationsAlert_number {
  color: var(--branco);
  background-color: var(--laranja);
  border-radius: 50%;
  padding: 8px;
  font-size: 14px;
  position: absolute;
  right: 55px;
  text-align: center;
}

.newNotificationsAlert_sign {
  background-color: var(--laranja);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 0;
}

.newNotificationSignStyle {
  background-color: var(--laranja);
  border-radius: 50%;
  border: 1px solid #fff;
  width: 10px;
  height: 10px;
  position: relative;
  right: 18px;
  bottom: 7px;
}