div#notif-popup,
div#switch-popup {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
div#notif-popup > div#notif-overlay,
div#switch-popup > div#notif-overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(57, 69, 57, 0.3);
}
div#notif-popup > div#notif-panel,
div#switch-popup > div#notif-panel {
  position: absolute;
  top: 30%;
  left: 50%;
  margin-left: -17.5%;
  padding: 1.25rem;
  width: 35%;
  text-align: left;
}
div#notif-popup > div#notif-panel > div > em,
div#switch-popup > div#notif-panel > div > em {
  color: #6aa67d;
  font-style: normal;
  font-weight: 700;
}
div#notif-popup > div#notif-panel > div:not(#label-notif-title),
div#switch-popup > div#notif-panel > div:not(#label-notif-title) {
  margin-top: 1.25rem;
}
div#notif-popup > div#notif-panel > div#label-notif-title,
div#switch-popup > div#notif-panel > div#label-notif-title {
  font-size: 1.4rem;
  font-weight: 700;
}
div#notif-popup > div#notif-panel > button#button-notif-close,
div#switch-popup > div#notif-panel > button#button-notif-close {
  position: absolute;
  top: -1.15625em;
  right: 0;
  margin-top: 0.25rem;
  margin-right: 0.25rem;
}
div#notif-popup > div#notif-panel > div#bar-notif-buttons,
div#switch-popup > div#notif-panel > div#bar-notif-buttons {
  vertical-align: middle;
  text-align: right;
}

div#notif-popup.el-active,
div#switch-popup.el-active {
  display: block;
}

/************** MOBILE ***************/
@media only screen and (max-width: 1024px) {
  div#notif-popup > div#notif-panel,
div#switch-popup > div#notif-panel {
    margin-left: -25%;
    width: 50%;
  }
}
@media only screen and (max-width: 768px) {
  div#notif-popup > div#notif-panel,
div#switch-popup > div#notif-panel {
    margin-left: -35%;
    width: 70%;
  }
}
@media only screen and (max-width: 600px) {
  div#notif-popup > div#notif-panel,
div#switch-popup > div#notif-panel {
    margin-left: -45%;
    width: 90%;
  }
}