/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
/* hide by default; only show with script in supported browsers */
.wp-block-push-notification-signup.notifications-not-supported {
  display: none; }

.push-notification-category {
  padding-left: 25px;
  line-height: 1.7; }

.wp-block-push-notification-signup__categories {
  -webkit-column-width: 6em;
     -moz-column-width: 6em;
          column-width: 6em;
  margin-top: 20px; }

.push-notification-category input[type="checkbox"] {
  margin-left: -25px;
  width: 25px; }

.permission-status > * {
  display: inline-block;
  margin: 0 5px; }

.permission-status_loading-icon {
  display: inline-block;
  vertical-align: middle; }

.alignright .permission-status_loading-icon {
  float: left; }

.permission-status_message {
  text-align: center; }

/* show new and subscribed users different messages */
.subscribed-user .wp-block-group.subscribed-user {
  display: block; }

.subscribed-user .wp-block-group.new-user {
  display: none; }

.wp-block-group.subscribed-user {
  display: none; }

/* always show both in editor */
.editor-styles-wrapper .subscribed-user .wp-block-group.new-user,
.editor-styles-wrapper .wp-block-group.subscribed-user {
  display: block; }

/* Loading/complete animation */
.load-complete.load-failed .block {
  display: block; }

.load-complete.load-failed .checkmark {
  display: none; }

.load-complete .checkmark {
  display: block; }

.circle-loader {
  border: 0.4em solid rgba(0, 0, 0, 0.2);
  border-left-color: white;
  -webkit-animation: loader-spin 1.2s infinite linear;
          animation: loader-spin 1.2s infinite linear;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  width: 2em;
  height: 2em; }

.load-complete {
  -webkit-animation: none;
  animation: none;
  border-color: white;
  -webkit-transition: border 500ms ease-out;
  transition: border 500ms ease-out;
  background: #5cb85c;
  border-color: #5cb85c; }

.load-complete.load-failed {
  background: red;
  border-color: red; }

.checkmark, .block {
  display: none; }
  .checkmark:after, .block:after {
    opacity: 1;
    height: 1em;
    -webkit-transform-origin: left top;
        -ms-transform-origin: left top;
            transform-origin: left top;
    border-top: 3px solid white;
    content: '';
    left: 0.1em;
    top: 0.64em;
    position: absolute; }

.checkmark.draw:after {
  -webkit-animation-duration: 800ms;
          animation-duration: 800ms;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-name: checkmark;
          animation-name: checkmark;
  -webkit-transform: scaleX(-1) rotate(135deg);
      -ms-transform: scaleX(-1) rotate(135deg);
          transform: scaleX(-1) rotate(135deg); }

.checkmark:after {
  border-right: 3px solid white;
  width: 0.5em; }

.block.draw:after {
  -webkit-animation-duration: 500ms;
          animation-duration: 500ms;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-name: blockanim;
          animation-name: blockanim; }

.block:after {
  border-right: none;
  border-width: 4.8px;
  width: 1em;
  top: 0.512em; }

@-webkit-keyframes loader-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes loader-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@-webkit-keyframes blockanim {
  0% {
    width: 0;
    opacity: 1; }
  100% {
    width: 1em;
    opacity: 1; } }

@keyframes blockanim {
  0% {
    width: 0;
    opacity: 1; }
  100% {
    width: 1em;
    opacity: 1; } }

@-webkit-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1; }
  20% {
    height: 0;
    width: 0.5em;
    opacity: 1; }
  40% {
    height: 1em;
    width: 0.5em;
    opacity: 1; }
  100% {
    height: 1em;
    width: 0.5em;
    opacity: 1; } }

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1; }
  20% {
    height: 0;
    width: 0.5em;
    opacity: 1; }
  40% {
    height: 1em;
    width: 0.5em;
    opacity: 1; }
  100% {
    height: 1em;
    width: 0.5em;
    opacity: 1; } }


/*# sourceMappingURL=index.css.map*/