.subscriptionPopup {
  font-family: sans-serif;
  /*display: none;*/
  padding: 20px;
  width: 500px;
  box-sizing: border-box;
  /*box-shadow: 3px 3px 3px #cccccc;*/
  position: fixed;
  /*right: -500px;*/
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #dddddd;
  border-radius: 5px;
  text-align: center;
  z-index: 1000;
  background-color: white;
}

/*.subscriptionPopup.show {*/
/*  display: block;*/
/*  overflow: hidden;*/
/*  top: -5px;*/
/*  !*right: calc(50vw - 250px);*!*/
/*}*/

.subscriptionPopup p {
  padding: 10px 20px 20px 20px;
  margin: 0 0 20px 0;
  border-bottom: 1px solid #cccccc;
  font-size: 1.5em;
  line-height: 1.3;
  /*text-align: center;*/
}

.subscriptionPopup button {
  /*margin: 0 10px;*/
  padding: .75em 1.5em;
  border: 0;
  background-color: white;
  color: #0078d1;
  font-size: 1em;
  border-radius: 7px;
  cursor: pointer;
}

/*.subscriptionPopup button.subscriptionAccepted {*/
/*  background-color: #0078d1;*/
/*  color: white;*/
/*}*/

/*.bellPopup {*/
/*  font-family: sans-serif;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  position: fixed;*/
/*  !*width: 70px;*!*/
/*  z-index: 1000;*/
/*}*/

.bell svg {
  position: fixed;
  padding: 5px;
  width: 40px;
  box-sizing: border-box;
  background-color: rgba(255,255,255,1);
  border-radius: 50%;
  border: 1px solid #d3202e;
  cursor: pointer;
  opacity: 0.8;
  bottom: 30px;
}

.bell.left svg{
  left: 30px;
}

.bell.right + #topics-container .topics-form {
  right: 30px;
  left: auto
}

.bell.left + #topics-container .topics-form {
  left: 30px;
  right: auto;
}

.bell.right svg{
  right: 30px;
}

.subscriptionPopup .bell svg {
  position: relative;
  width: 60px;
  bottom: auto;
}
  /*.bell.subscribed svg {*/
/*  width: 40px;*/
/*  opacity: 0.8;*/
/*}*/

/*.bellPopup.right {*/
/*  right: 20px;*/
/*  bottom: 300px;*/
/*}*/

/*.bellPopup.left {*/
/*  left: 20px;*/
/*  bottom: 170px;*/
/*}*/

/*.subscriptionPopup .bellPopup {*/
/*  position: relative;*/
/*  display: inline-block;*/
/*  !*float: left;*!*/
/*  !*margin-right: 20px;*!*/
/*  width: 100px;*/
/*  left: auto;*/
/*  bottom: auto;*/
/*  padding: 0;*/
/*}*/
/*.subscriptionPopup a {*/
/*  text-decoration: underline;*/
/*}*/
/*.buttonsContainer {*/
/*  !*padding: 20px 0;*!*/
/*}*/

/*#bellOption {*/
/*  margin-left: 5px;*/
/*  padding: 5px 10px;*/
/*  background-color: #d3202e;*/
/*  color: white;*/
/*  border-radius: 5px;*/
/*  cursor: pointer;*/
/*}*/
.bg-blue {
  background-color: #0078d1!important;
  color: white!important;
}

.topics-form {
  width: max-content;
  position: fixed;
  bottom: 30px;
  left: 30px;
  font-family: sans-serif;
  font-size: 16px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: white;
  z-index: 2;
}

.topics-form-content {
  height: 500px;
  overflow: auto;
}

.topics-form label {
  display: flex;
  padding: 5px 0;
  /*align-items: start;*/
  justify-content: space-between;
  align-items: center;
}

.topics-form-title {
  margin: 5px 0 20px 0;
  padding: 0 0 20px 0;
  border-bottom: 1px solid #ccc;
  font-family: sans-serif;
  font-size: 24px;
  line-height: 1.4;
  text-align: center;
}

.topics-form-footer label {
  justify-content: center;
}

.topics-form-content label span {
  padding-right: 10px;
}

.topics-form button {
  margin: 20px auto 0 auto;
  padding: .75em 1.5em;
  border: 0;
  color: white;
  background-color: #0078d1;
  font-size: 1em;
  border-radius: 7px;
  cursor: pointer;
}

.topics-form-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ccc;
  text-align: center;
}

.toggle-slider {
  width: 42px;
  height: 24px;
  background-color: #ccc;
  border-radius: 9999px;
  position: relative;
  transition: background-color 0.3s;
  cursor: pointer;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  height: 20px;
  width: 20px;
  background: white;
  border-radius: 9999px;
  transition: transform 0.3s;
}
input:checked + .toggle-slider {
  background-color: #4ade80;
}
input:checked + .toggle-slider::before {
  transform: translateX(18px);
}
.ios-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.btn-container {
  display: flex;
  justify-content: space-between;
}
#cancel-btn {
  /*color: black;*/
  color: #0078d1;
  background-color: transparent;
}

#bell-container {
  position:relative;
  z-index: 999999999;
}

@media only screen and (max-width: 767px) {
  .subscriptionPopup {
    max-width: 100vw;
  }
  .topics-form-content {
    max-height: 50vh;
  }
}