$bswp-color-white: #fff;
$bswp-color-addon-bottom: #fafafa;
$bswp-color-border: #ddd;
$bswp-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
$bswp-border-radius: 6px;
$bswp-settings-max-width: 50rem;
$bswp-status-indicator-bg: rgb(153, 153, 153);
$bswp-status-indicator-disabled: $bswp-color-white;
$bswp-status-indicator-enabled: #5ab750;
$bswp-status-enabled-shadow: inset 0 0px 0px 2px $bswp-status-indicator-enabled;
$bswp-status-indicator-size: 1.5rem;
$bswp-addon-padding: 1.2rem;

.bswp {
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  a:active,
  a:focus,
  li:focus,
  li:active {
    outline: none !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none;
  }

  &__container {
    @media (min-width: 600px) {
      padding-right: 1rem;
    }
  }

  &__title {
    margin-bottom: 2rem;
  }

  &__settings {
    max-width: $bswp-settings-max-width;
  }

  &__form-group {
    margin-bottom: 1rem;

    @media (min-width: 600px) {
      display: flex;
      align-items: center;
    }

    &__label {
      width: 8rem;
      flex: 0 1 8rem;
      margin-bottom: 0.5rem;
      display: block;

      @media (min-width: 600px) {
        margin-bottom: 0;
      }
    }

    input[type="text"] {
      margin-bottom: 0.5rem;
      width: 100%;

      @media (min-width: 600px) {
        flex: 1 1 auto;
        width: auto;
        margin-bottom: 0;
        margin-right: 0;
      }
    }
    .button {
      margin-bottom: 0;
      margin-top: 2rem;
      padding: 0 1.5rem;
    }
  }
  &__email-sending-group {
    h4 {
      font-weight: bold;
      margin-top: 2rem;
      margin-left: 1rem;
      display: inline-block;
      vertical-align: top;
    }
    div.email-sending-input {
      margin-left: 4rem;
      margin-top: 2rem;
      display: inline-block;
    }

    input {
      margin-left: 2rem;
    }
    input:nth-of-type(2) {
      display: block;
      width: 8rem;
      margin-top: 2rem;
    }
  }

  &__website-name {
    margin-top: 2rem;

    input {
      width: 50% !important;
    }

    label,
    p {
      margin-left: 2rem;
    }

    div {
      margin-top: 0.5rem;
    }
    p {
      margin-top: 0.5rem;
      font-style: italic;
    }
  }
  &__input-group {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;

    @media (min-width: 600px) {
      flex-direction: row;
      align-items: center;
      margin-left: 1rem;
    }
  }

  &__copy-input {
    position: relative;
    flex: 1;

    & > a {
      position: absolute;
      padding: 0 0.5rem;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      right: 0;
      top: 0;
      text-decoration: none;
    }

    & > input[type="text"] {
      width: 100%;
      margin: 0;
      padding-right: 4.5rem;
    }
  }

  &__addons {
    position: relative;

    @media (min-width: 600px) {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin: 0 -0.5rem;
    }
  }

  &__addon {
    min-width: 21rem;
    padding: $bswp-addon-padding;
    padding-bottom: 45px;
    position: relative;
    margin-bottom: 1rem;

    @media (min-width: 600px) {
      flex: 0 1 calc(20% - 2rem);
      margin-left: 0.5rem;
      margin-right: 0.5rem;
    }

    &__header {
      text-align: center;
      margin-bottom: 1rem;
    }

    &__title {
      margin: 0;
    }

    &__description {
      margin-bottom: 3rem;

      a {
        display: inline-block;
      }
    }

    &__btns {
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin: 10px auto 20px auto;

      .button {
        display: inline-block;
        flex: 1;
        flex-grow: 1;
        max-width: 50%;
        margin: 0 5px;
        padding: 5px 20px;
        text-align: center;
      }
    }

    &__link {
      & > strong {
        margin-bottom: 0.315rem;

        @media (min-width: 600px) {
          margin-right: 0.315rem;
          margin-bottom: 0;
        }
      }

      & > a {
        display: block;
      }

      & > a > span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
        font-size: 100%;
      }
    }

    &__toggle {
      bottom: 0px;
      padding: $bswp-addon-padding;
      display: flex;
      flex-direction: row;
      justify-content: center;
      left: 0;
      position: absolute;
      width: 100%;
      background-color: $bswp-color-addon-bottom;
      border-top: 1px solid $bswp-color-border;

      .disclaimer {
        text-align: center;
      }
    }

    &__status {
      display: flex;
      align-items: center;
    }

    &__status-label {
      margin-left: 0.5rem;
    }

    &__status-indicator {
      cursor: pointer;
      position: relative;
      display: inline-flex;
      width: $bswp-status-indicator-size * 2;
      height: $bswp-status-indicator-size;
      border-radius: 3rem;
      background: $bswp-status-indicator-bg;

      &::before {
        content: "";
        width: calc(#{$bswp-status-indicator-size} - 4px);
        height: calc(#{$bswp-status-indicator-size} - 4px);
        background: $bswp-status-indicator-disabled;
        border-radius: 50%;
        position: absolute;
        left: 2px;
        top: 2px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
      }

      &.active {
        background: $bswp-status-indicator-enabled;
        cursor: pointer;

        &::before {
          left: auto;
          right: 2px;
          box-shadow: 0 3px 8px rgba(95, 204, 98, 0.8);
        }
      }
    }

    &.plugin-unavailable {
      .bswp__addon__status-indicator {
        cursor: not-allowed;
      }
    }

    &__config {
      margin-left: auto;
    }

    &__settings {
      display: none;

      h4 {
        margin-bottom: 0;
        font-size: 1rem;
      }

      &.active {
        display: block;
      }
    }

    &__settings-group {
      margin-bottom: 1.5rem;
    }
  }

  &__checkbox {
    label {
      margin-right: 1rem;
    }
  }

  &__text {
    input {
      display: block;
      width: 100%;
    }
  }

  &__textarea {
    textarea {
      display: block;
      width: 100%;
    }
  }
  &__email-subject {
    position: relative;
    flex: 1;

    & > input[type="text"] {
      width: 100%;
      margin: 0;
    }
  }

  &__copy-variable {
    text-decoration: none;

    & > span {
      display: inline-block;
      width: 20px;
    }
  }

  &__variable-info {
    text-decoration: none;
    color: #1f2120;
  }

  &__spacer {
    margin: 1rem 0;
  }
  &__email-input-hidden {
    display: none !important;
  }

  &__short-code-container {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
    border: 1px solid #9b9999;
    line-height: 2.3rem;
    padding-left: 1rem;
    border-radius: 0.2rem;
    font-weight: bold;

    a {
      position: absolute;
      right: 1.4rem;
      text-decoration: none;
      display: flex;
    }
  }

  &__ui-template-tabs {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2.5rem;
  }

  &__ui-template-tabs label.bswp-tab-label {
    border-bottom: 1px solid #9b9999;
  }

  &__ui-template-tabs label.bswp-tab-label span:first-of-type {
    order: 1;
    display: inline-block;
    padding: 0.4rem 1rem;
    cursor: pointer;
    background: #d7d8da;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background ease 0.2s;
    border-radius: 0.2rem 0.2rem 0 0;
    position: relative;
    top: 0.8px;
    border: 1px solid #9b9999;
  }

  &__ui-template-tabs label.bswp-tab-label span:nth-of-type(2) {
    display: inline-block;
    width: 8px;
    height: 10px;
    position: relative;
    top: 12px;
  }
  &__ui-template-tabs label.bswp-tab-label:last-of-type {
    width: 100%;
    flex: 1;
  }

  &__ui-template-tabs .tab {
    order: 99;
    flex-grow: 1;
    width: 100%;
    display: none;
    padding: 1rem 2.5rem 4rem 2.5rem;
    border: 1px solid #9b9999;
    border-top: 1px solid transparent;

    .bswp-module-settings {
      margin-top: 2.5rem;

      .switch {
        position: relative;
        display: inline-block;
        width: 36px;
        height: 18px;
      }

      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: 0.4s;
        transition: 0.4s;
      }

      .slider:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 2px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: 0.4s;
        transition: 0.4s;
      }

      input:checked + .slider {
        background-color: #2196f3;
      }

      input:focus + .slider {
        box-shadow: 0 0 1px #2196f3;
      }

      input:checked + .slider:before {
        -webkit-transform: translateX(18px);
        -ms-transform: translateX(18px);
        transform: translateX(18px);
      }

      .slider.round {
        border-radius: 34px;
      }

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

      .bswp-toggle-label {
        margin-left: 0.8rem;
        font-weight: 500;
      }

      .bswp__form-group:nth-of-type(2) {
        margin-top: 2.5rem;
      }

      .bswp__form-group {
        flex-wrap: wrap;

        .break {
          flex-basis: 100%;
          height: 0;
        }

        label {
          font-weight: bold;
        }

        .bswp__input-group {
          margin-left: 0;
          margin-top: 0.5rem;
        }

        .bswp-page-url {
          margin-right: 1rem;
        }

        h4 {
          margin: 0.5rem 1.4rem 0 0;
        }

        .custom-message-toggle {
          margin: 0.5rem 1rem 0 0;
          font-weight: normal;

          span {
            margin-left: -0.2rem;
          }
        }

        select {
          flex: 1 1 auto;
          width: auto;
        }

        textarea {
          flex: 1 1 auto;
          width: auto;
          height: 12rem;
        }

        .cloud-sponge-config {
          margin-top: 3rem;
          a {
            margin-left: 1rem;
          }
        }
      }

      .bswp-social-networks-toggle {
        margin-top: 2.5rem;
      }
    }

    .wp-block-cgb-block-ea-better-sharing {
      width: 60%;
      margin: 2.5rem auto 0;

      h3 {
        margin-right: -20%;
      }

      .bswp-email-custom-message textarea {
        border: 1px solid #646970;
      }
    }
    .bswp-main-preview-container {
      margin-top: 2rem;

      & .wp-block-cgb-block-ea-better-sharing {
        margin-top: 0;
        padding-top: 0;
      }
    }

    .bswp-ui-template-module-hidden,
    .bswp-hidden-reorder-control,
    .bswp-hidden-social-share-control,
    .bswp-hidden-referral-link-control,
    .bswp-hidden-custom-message-container {
      display: none;
    }

    .bswp-block-module-container {
      padding-bottom: 2rem;
    }

    .bswp-handle-module {
      padding: 0 0.1rem 0.5rem 0.1rem;

      a {
        margin-right: 0.4rem;
      }

      .bswp-reorder {
        float: right;
      }
    }

    .bswp-ui-template-module {
      border: 1px solid #000;
      padding: 0 1.5rem 1rem 1.5rem;

      h4 {
        font-size: 1.2rem;
        margin-top: 0.6rem;
        margin-bottom: 0;
      }

      .bswp-sub-title {
        font-size: 1rem;
        line-height: 1rem;
        margin: 0.4rem 0 1.3rem 0;
        padding: 0;
      }
    }
  }
  &__ui-template-tabs input[type="radio"].tab-label {
    display: none;
  }
  &__ui-template-tabs
    input[type="radio"].tab-label:checked
    + label
    span:first-of-type {
    background: #fff;
    border-bottom: 1px solid transparent;
  }

  &__ui-template-tabs input[type="radio"].tab-label:checked + label + .tab {
    display: block;
  }

  &__general-tabs {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem;
  }

  &__general-tabs label.bswp-tab-label {
    border-bottom: 1px solid #9b9999;
  }

  &__general-tabs label.bswp-tab-label span {
    order: 1;
    color: #3c434a;
    display: inline-block;
    padding: 0.4rem 1rem;
    cursor: pointer;
    background: #d7d8da;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background ease 0.2s;
    border-radius: 0.2rem 0.2rem 0 0;
    position: relative;
    top: 0.8px;
    border: 1px solid #9b9999;
  }

  &__general-tabs label.bswp-tab-label:last-of-type {
    width: 100%;
    flex: 1;
  }

  &__general-tabs label.bswp-tab-label:not(:first-child)::before {
    content: "";
    display: inline-flex;
    width: 0.5rem;
  }

  &__general-tabs label.selected span {
    background: inherit !important;
    border-bottom: 1px solid #f0f0f1 !important;
  }

  &__general-tabs .tab {
    order: 99;
    flex-grow: 1;
    width: 100%;
    padding: 0.5rem 0;
    border-top: 1px solid transparent;
  }
}
.column-bswp_email_template_id {
  width: 10%;
}
#bswp_iu_template_settings {
  border: none;
  background-color: #f0f0f1;

  .inside {
    padding: 0;
  }
}

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

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

.better-sharing-wrapper {
  min-height: 100%;
}

.better-sharing-container {
  margin-left: auto;
  margin-right: auto;
}

.better-sharing-container svg {
  max-width: 90%;
}

.better-sharing-logo {
  margin-top: 2rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}

.better-sharing-headline {
  margin: 2rem 0 3rem;
  text-align: center;
  font-weight: 600;
  font-size: 1.3rem;
}

.better-sharing-book {
  background-color: #425462;
  box-shadow: 0px 4px 4px 0px rgba(34, 34, 34, 0.2);
  border-radius: 0.5rem;
  border-width: 1px;

  color: #fff;
  font-weight: 600;
  text-align: center;
  text-decoration: none;

  padding: 0.8rem 1rem;
  margin-left: 0.75rem;
  margin-right: 0.75rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.better-sharing-book:hover {
  color: #fff;
}

.better-sharing-book::before {
  content: "";
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDEyQzEwLjQgMTIgMTAgMTEuNiAxMCAxMVYxQzEwIDAuNCAxMC40IDAgMTEgMEMxMS42IDAgMTIgMC40IDEyIDFWMTFDMTIgMTEuNiAxMS42IDEyIDExIDEyWk0yNyAxMkMyNi40IDEyIDI2IDExLjYgMjYgMTFWMUMyNiAwLjQgMjYuNCAwIDI3IDBDMjcuNiAwIDI4IDAuNCAyOCAxVjExQzI4IDExLjYgMjcuNiAxMiAyNyAxMloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xOSAyM0MyMC4xMDQ2IDIzIDIxIDIyLjEwNDYgMjEgMjFDMjEgMTkuODk1NCAyMC4xMDQ2IDE5IDE5IDE5QzE3Ljg5NTQgMTkgMTcgMTkuODk1NCAxNyAyMUMxNyAyMi4xMDQ2IDE3Ljg5NTQgMjMgMTkgMjNaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTEgMjNDMTIuMTA0NiAyMyAxMyAyMi4xMDQ2IDEzIDIxQzEzIDE5Ljg5NTQgMTIuMTA0NiAxOSAxMSAxOUM5Ljg5NTQzIDE5IDkgMTkuODk1NCA5IDIxQzkgMjIuMTA0NiA5Ljg5NTQzIDIzIDExIDIzWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTI3IDIzQzI4LjEwNDYgMjMgMjkgMjIuMTA0NiAyOSAyMUMyOSAxOS44OTU0IDI4LjEwNDYgMTkgMjcgMTlDMjUuODk1NCAxOSAyNSAxOS44OTU0IDI1IDIxQzI1IDIyLjEwNDYgMjUuODk1NCAyMyAyNyAyM1oiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMSAzMUMxMi4xMDQ2IDMxIDEzIDMwLjEwNDYgMTMgMjlDMTMgMjcuODk1NCAxMi4xMDQ2IDI3IDExIDI3QzkuODk1NDMgMjcgOSAyNy44OTU0IDkgMjlDOSAzMC4xMDQ2IDkuODk1NDMgMzEgMTEgMzFaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTkgMzFDMjAuMTA0NiAzMSAyMSAzMC4xMDQ2IDIxIDI5QzIxIDI3Ljg5NTQgMjAuMTA0NiAyNyAxOSAyN0MxNy44OTU0IDI3IDE3IDI3Ljg5NTQgMTcgMjlDMTcgMzAuMTA0NiAxNy44OTU0IDMxIDE5IDMxWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTI3IDMxQzI4LjEwNDYgMzEgMjkgMzAuMTA0NiAyOSAyOUMyOSAyNy44OTU0IDI4LjEwNDYgMjcgMjcgMjdDMjUuODk1NCAyNyAyNSAyNy44OTU0IDI1IDI5QzI1IDMwLjEwNDYgMjUuODk1NCAzMSAyNyAzMVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMyAzOEg1QzIuMiAzOCAwIDM1LjggMCAzM1Y5QzAgNi4yIDIuMiA0IDUgNEgzM0MzNS44IDQgMzggNi4yIDM4IDlWMzNDMzggMzUuOCAzNS44IDM4IDMzIDM4Wk01IDZDMy4zIDYgMiA3LjMgMiA5VjMzQzIgMzQuNyAzLjMgMzYgNSAzNkgzM0MzNC43IDM2IDM2IDM0LjcgMzYgMzNWOUMzNiA3LjMgMzQuNyA2IDMzIDZINVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=")
    no-repeat;
  background-size: 1.25rem 1.25rem;
  margin-right: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
}

.better-sharing-link {
  text-decoration: underline;
  color: #fff;
  font-weight: 500;
}

.better-sharing-h2 {
  font-weight: 700;
  font-size: 1.9rem;
  padding: 2.5rem 0 2rem;
  margin: 0;
  text-align: center;
}

.better-sharing-h3 {
  font-weight: 600;
  font-size: 1.5rem;
  padding: 0 0 1rem;
  margin: 0;
}

.better-sharing-h4 {
  padding: 0 0 0.2rem;
  margin: 0;
  font-weight: 600;
  font-size: 1.3rem;
  border-bottom: 0.5rem solid #afe261;
  display: inline-flex;
}

.better-sharing-block-description {
  padding: 1rem 0;
  font-weight: 400;
  font-size: 1rem;
}

.better-sharing-flex-row {
  display: flex;
  flex-direction: row;
  padding: 0;
}

.better-sharing-flex-column {
  flex: 50%;
  padding: 1.5rem;
}

.better-sharing-block {
  margin-bottom: 3rem;
}

.cloudsponge-logo {
  margin-left: 0.5rem;
}

.better-sharing-footer {
  margin-top: 6rem;
  padding: 2rem;
}

.better-sharing-heart {
  margin: 0 0.3rem;
}

.bswp_cloudsponge_title {
  display: flex;
  flex-direction: row;
  align-content: center;
}

@media (max-width: 768px) {
  .better-sharing-logo {
    padding-top: 2rem;
  }

  .better-sharing-flex-row {
    flex-direction: column;
  }

  .better-sharing-flex-column {
    padding: 1.5rem 0;
  }
}

@media (min-width: 1600px) {
  .better-sharing-container {
    width: 60vw;
  }
}