@import 'style.scss';
$primaryColor: #6558f5;
$kellyGreen: #63be09;
$redColor: #e74c3c;
$grayBlue: #dfe6ed;
$headingColor: #333333;

.easy_email_integration-field-layout-list {
  display: block;
  margin: -6px 0;
  &.elementor-control-input-wrapper{
    margin-top: 4px;
  }
  &:after {
    content: '';
    display: table;
    clear: both;
  }
  > * {
    border: none;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    line-height: 20px;
    position: relative;
    margin: 6px 0;
    cursor: pointer;
    display: block;
    > input{
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
    &:after{
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      bottom: 0;
      right: 0;
      border: 4px solid #111111;
    }
    &.active{
      &:after{
        border-color: #16a085;
      }
    }
  }
}

.easy_email_integration-layout-style-{
  &1 .eei-skeleton{
    background-color: #3867d6;
  }
  &2 .eei-skeleton{  
      background-color: #8854d0;
  }
  &3 .eei-skeleton{
    background-color: #129385;
  }
  &4 .eei-skeleton{
    background-color: #180431;
  }
  &5 .eei-skeleton{
    background-color: white;
  }
}

.eei-skeleton{
  display: block;
  text-align: center;
  padding: 15px 10px;
  filter: saturate(0%);
  background-color: $primaryColor;
  .active &{
    filter: saturate(100%);
  }
  &.p0{
    padding: 0;
  }
  &.p1{
    padding: 8px;
  }
  .eei-sk{
    background-color: white;
    height: 10px;
    display: block;
    margin: 3px auto;
    &.left{
      margin-left: 0;
    }
    &.text{
      height: 5px;
      width: 70%;
      border-radius: 500px;
      background-color: rgba(white, 0.5);
    }
    &.full{
      width: 100%;
    }
    &.small {
      height: 3px;
      width: 50%;
    }
    &.smallfull{
      height: 3px;
      width: 100%;
    }
    &.big{
      height: 15px;
    }
    &.mb1{
      margin-bottom: 8px;
    }
    &.ws{
      width: 30%;
    }
    &.split{
      padding: 10px;
      margin: 0;
      height: auto;
    }
    &.vsplit{
      display: flex;
      margin: 0 -2px;
      background-color: transparent;
      height: auto;
      align-items: center;
      > *{
        flex: 1;
        margin: 0 2px; 
      }
    }
    &.vline{
      max-width: 1px;
      align-self: stretch;
      height: auto;
      background-color: rgba(white, 0.2);
    }
    &.transparent{
      height: auto;
      background-color: transparent;
    }
    &.image{
      height: 90px;
      border-radius: 3px;
      background-color: rgba(white, 0.2);
    }
    &.black{
      background-color: rgba(black, 0.5);
    }
    &.border.black{
      border-color: rgba(black, 0.5);
    }
    &.bgw{
      background-color: rgba(white, 0.2);
    }
    &.bg0{
      background-color: transparent;
    }
    &.yellow{
      background-color: #f7b731;
    }
    &.flex{
      display: flex;
      background-color: transparent;
      margin-left:-3px;
      margin-right: -3px;
      > *{
        flex: 1;
        margin: 0 3px;
        &.flex-2{
          flex: 2;
        }
      }
    }
    &.withsubmit{
      position: relative;
      &:after{
        content: "";
        background-color: white;
        position: absolute;
        right: 1px;
        top: 1px;
        bottom: 1px;
        width: 30%;
      }
    }
    &.border{
      border: 1px solid white;
      background-color: transparent;
    }
  }
}

.easy_email_integration-subscriber-table-actions {
  margin: 15px 0 10px;
  text-align: right;
  .easy_email_integration_buton {
    margin-left: 8px;
  }
  .eei-filter.easy-email-integration-delete{
    svg.easy_email_integration_bulk_delete_icon {
      position: absolute;
      top: 10px;
      right: 22px;
      fill: #636363;
      border: none;
      background-color: transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover{
        fill: #eb3b5a;
      }
    }
  }
  
}
.eei-filter {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
  &:hover{
    > .dashicons{
      color: $primaryColor;
    }
  }
  &.disabled{
    cursor:not-allowed;
    pointer-events: none;
  }
  > .dashicons {
    position: absolute;
    left: 20px;
    font-size: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #888888;
    + .inputPlaceholder,
    + input {
      padding-left: 46px;
      &.inputPlaceholderIcon{
        padding-left: 20px;
      }
    }
  }
  > .inputPlaceholder,
  > input {
    border: 2px solid #888888;
    font-size: 16px;
    font-weight: 700;
    color: #888888;
    line-height: 30px;
    padding: 2px 20px;
    display: block;
    border-radius: 2px;
    &:focus {
      outline: none;
      border-color: rgba($primaryColor, 0.5);
      color: $primaryColor;
    }
  }
  > .inputPlaceholder {
    cursor: pointer;
    min-height: 30px;
    z-index: 2;
    position: relative;
    &:hover{
      color: $primaryColor;
      border-color: rgba($primaryColor, 0.5);
    }
    *{
      pointer-events: none;
    }
  }
  > .inputPlaceholderDrop {
    max-width: 115px;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 36px;
    &:after {
      content: '\f347';
      font-family: dashicons;
      vertical-align: middle;
      margin-left: 4px;
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  > .inputPlaceholderIcon{
    cursor: pointer;
    background-color: transparent;
    &:after{
      content: none;
    }
  }
  .check-selection {
    position: absolute;
    background-color: white;
    padding: 15px 35px;
    right: 0;
    text-align: left;
    left: auto;
    max-height: 200px;
    overflow: auto;
    .selector-label {
      display: block;
      border-bottom: 2px solid $grayBlue;
      font-size: 16px;
      font-weight: 700;
      padding-bottom: 5px;
      white-space: nowrap;
    }
    .check-selector {
      label {
        display: block;
        font-size: 16px;
        white-space: nowrap;
        line-height: 24px;
        *{
          pointer-events: none;
        }
      }
    }
  }
}
.easy_email_integration_buton {
  display: inline-block;
  line-height: 2;
  font-weight: 700;
  background-color: #45aaf2;
  transition: all 0.3s ease;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 36px;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    background-color: darken(#45aaf2, 10);
    color: white;
  }
}
.easy_email_integration-wrap {
  padding-right: 20px;
  margin-top: 50px;
  box-sizing: border-box;
  .title {
    font-size: 36px;
    margin: 0 0 25px;
    font-weight: 700;
    line-height: 1;
  }
  .description {
    font-size: 16px;
    font-weight: 700;
    color: #888888;
  }
}
.easy_email_integration-subscriber-table {
  p {
    text-align: center;
    background-color: white;
    border-radius: 4px;
    text-align: center;
    padding: 15px;
    font-size: 20px;
  }
  table {
    min-width: 100%;
    overflow: hidden;
    border-collapse: collapse;
    a {
      text-decoration: none;
    }
    th {
      background-color: $grayBlue;
      text-align: left;
    }
    th,
    td {
      padding: 10px;
      border-top: 2px solid $grayBlue;
      vertical-align: top;
    }
    td {
      font-size: 15px;
      color: #444444;
      padding: 16px 8px;
      span {
        display: block;
      }
      .time {
        font-size: 14px;
        margin-top: 3px;
        color: #888888;
      }
    }
    .easy_email_integration_delete_entry {
      fill: #888;
      border: none;
      background-color: transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      &:hover{
        fill: #eb3b5a;
      }

      span.dashicons.dashicons-trash {
        font-size: 20px;
        color: #888;
      }

    }
  }
}

.eei-notification {
  position: fixed;
  z-index: 960;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
  min-width: 300px;
  text-align: center;
  background-color: #d63638 !important;
  border: none !important;
  color: white;
  &.success{
    background-color: #16a085 !important;
  }
}

.subscribe-pagination {
  text-align: right;
  font-size: 16px;
  margin-top: 15px;
  .page-numbers {
    text-decoration: none;
    display: inline-block;
    line-height: 30px;
    min-width: 30px;
    text-align: center;
    margin-left: 5px;
    font-weight: 700;
    color: #767676;
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 3px;
    .dashicons{
      display: inline-block;
      vertical-align: middle;
      pointer-events: none;
    }
    &.current {
      color: white;
      background-color: $primaryColor;
    }
    &:hover {
      color: white;
      background-color: $primaryColor;
    }
  }
}

/*** Integration form ***/
.easy_email_integration-integrations-form {
  .form-table {
    th {
      display: none;
    }
    td {
      padding: 0;
    }
  }
}

.eei-loader {
  text-align: center;
  padding: 30px;
  svg {
    width: 56px;
    stroke: $primaryColor;
    height: 56px;
  }
}

.easy_email_integration-integrations-field{
  position: relative;
  min-height: 56px;
  margin-top: 56px;
  .eei-loader {
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    + .easy_email_integration-row{
      opacity: 0.7;
    }
    svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.easy_email_integration-row {
  display: flex;
  margin: 0 -15px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  * {
    box-sizing: border-box;
  }
}

@for $i from 1 through 12 {
  .easy_email_integration-col-#{$i} {
    width: calc((100% * $i) / 12);
    padding: 0 15px;
  }
}

.easy_email_integration-available-integrations{
  padding-right: 35px;
}
.easy_email_integration-connected-integrations{
  padding-left: 35px;
}

.easy_email_integration-col-headings {
  margin-bottom: 30px;
  h4 {
    font-size: 24px;
    color: $headingColor;
    margin: 0;
    line-height: 40px;
    span {
      display: inline-block;
      margin-left: 15px;
      background-color: $headingColor;
      color: white;
      font-size: 18px;
      vertical-align: middle;
      line-height: inherit;
      padding: 0 20px;
      border-radius: 6px;
      overflow: hidden;
    }
    small {
      display: inline-block;
      margin-left: 15px;
      color: #888888;
      font-size: 16px;
      vertical-align: middle;
      line-height: 20px;
      font-weight: 400;
      &.red{
        color: #e74c3c;
      }
      a{
        cursor: pointer;
        display: block;
        &:hover{
          text-decoration: underline;
        }
      }
    }
  }
  p {
    color: #666666;
    font-size: 16px !important;
    margin-top: 5px;
    margin-bottom: 34px;
    min-height: 100px;
  }
  p.eei_integration_heading {
    margin-bottom: 0px;
  }
}
.eei-tooltip{
  background-color: transparent;
  position: relative;
  color: #888888;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin: 0 5px;
  cursor: pointer;
  svg{
    width: 16px;
    height: 16px;
  }
}
.__react_component_tooltip {
  max-width: 440px;
  &.show{
    opacity: 1 !important;
  }
  .multi-line{
    margin: 0 !important;
    background-color: transparent !important;
    font-size: 14px !important;
    padding: 0 !important;
      line-height: 1.5;
      text-align: left !important;
      display: block;
  }
}
.integration {
  display: block;
  border: 1px solid rgba(black, 0.12);
  border-radius: 4px;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  font-size: 0;
  background-color: white;
  + .integration {
    margin-top: 15px;
  }
  &:hover{
    border-color: $primaryColor;
  }
  &.integration-configuration-needed{
    border-color: transparent;
    background-color: rgba(black, 0.12);
  }
  &.pro-not-avail{
    background-color: rgba(black, 0.12);
    border-color: transparent;
    small{
      margin-left: 20px;
      display: inline-block;
      background-color: $primaryColor;
      color: white;
      font-weight: 400;
      padding: 3px 6px;
      border-radius: 20px;
      font-size: 11px;
      line-height: 11px;
    }
  }
  input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
  }
  &:after {
    content: '';
    display: table;
    clear: both;
  }
  .integration_icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: 24px;
    vertical-align: middle;
    svg{
      width: 24px;
      height: 24px;
    }
    img{
      max-width: 24px;
    }
  }
  .integration_name {
    font-weight: 700;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 92px);
  }
  .submission_on_date {
      display: block;
      font-size: small;
      font-weight: 400;
      margin-top: 4px;
  }
  .add-icon {
    width: 20px;
    height: 20px;
    margin-left: 24px;
    vertical-align: middle;
    display: inline-block;
  }
  .config-icon{
    width: 20px;
    height: 20px;
    margin-left: 24px;
    vertical-align: middle;
    display: inline-block;
    fill: $primaryColor;
  }
  .eei-upgrade-notice{
    background-color: #F5F5F5;
    margin: 15px 0 0;
    min-height: 0;
    font-size: 12px !important;
    padding: 9px 16px;
    color: #3B3B3B;
    svg {
      width: 14px;
      height: 14px;
      + span{
        width: calc(100% - 30px);
        margin-left: 10px;
      }
    }
    &:after{
      content: '';
      display: table;
      clear: both;
    }
  }
}


.configuration-window{
  position: fixed;
  top: 32px;
  left: 160px;
  bottom: 0;
  right: 0;
  background-color: rgba(darken($primaryColor, 80), 0.5);
  box-sizing: border-box;
  z-index: 100;
  *{
    box-sizing: border-box;
  }
  body.folded &{
    left: 36px;
  }
}

.close-wrapper{
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  color: white;
  cursor: pointer;
  .dashicons{
    pointer-events: none;
    font-size: 36px;
    width: 36px;
    height: 36px;
  }
}

.configuration-popup{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 740px;
  max-width: calc(100% - 60px);
  background-color: white;
  transform: translate(-50%, -50%);
  text-align: center;
  max-height: calc(100% - 80px);
  overflow: auto;
}

.configuration-header{
  height: 120px;
  background-color: #3a3a3a;
  padding: 35px;
  svg{
    height: 50px;
  }
  img{
    max-height: 50px;
    width: auto;
  }
}

.configuration-subheader{
  padding: 35px 40px;
  h4{
    font-size: 36px;
    line-height: 1;
    margin: 0;
  }
  h5{
    font-size: 24px;
    font-weight: 400;
    margin: 15px 0 0;
  }
  p{
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 18px;
    color: #222222;
    margin-top: 12px;
    a{
      color: $primaryColor;
      text-decoration: none;
    }
  }
}

.configuration_fields{
  padding: 0 40px 40px;
  text-align: left;
  label{
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    display: block;
    cursor: default;
    small{
      display: block;
      font-weight: 400;
    color: #888888;
    }
    input,
    + input{
      display: block;
      width: 100%;
      border: 2px solid rgba($primaryColor, 0.5);
      font-size: 14px;
      line-height: 24px;
      padding: 12px 16px;
      margin: 8px 0 20px;
      font-weight: 400;
      &:focus{
        outline: none;
        box-shadow: none;
        border-color: $primaryColor;
      }
      .touched &:invalid{
        outline: none;
        border-color: $redColor;
      }
    }
  }
  .text-right{
    text-align: right;
  }
  .disableConfig{
    color: #666666;
    background-color: transparent;
    border: 2px solid #a5a5a5;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    padding: 10px 35px;
    border-radius: 4px;
    cursor: pointer;
    transition:all 0.3s ease;
    margin-left: 15px;
    &:hover{
      background-color: #E8E8EB;
      color: #757575;
      border-color: #E8E8EB;
    }
  }
  .submitConfig{
    color: white;
    background-color: $kellyGreen;
    border: 2px solid transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    padding: 10px 35px;
    border-radius: 4px;
    margin-left: 15px;
    cursor: pointer;
    transition:all 0.3s ease;
    &:hover{
      background-color: darken($kellyGreen, 10);
    }
    &:disabled{
      background-color: #999999;
      cursor: default;
    }
  }
}

.multiselect{
  position: relative;
}
.multiselect-wrapper{
  position: relative;
  margin-bottom: 20px;
  cursor: pointer;
}
.multiselect-inputmock{
  display: block;
  width: 100%;
  border: 2px solid rgba(101, 88, 245, 0.5);
  font-size: 14px;
  line-height: 24px;
  padding: 7px;
  margin: 8px 0 0;
  font-weight: 400;
  border-radius: 4px;
  color: #888888;
  transition: all 0.3s ease;
  &.active{
    border-color: $primaryColor;
  }
  span{
    display: inline-block;
    background-color: rgba($primaryColor, 0.5);
    color: #111111;
    padding: 0 8px;
    margin: 1px;
    border-radius: 4px;
  }
}
.multiselect-options{
  position: absolute;
  top: 100%;
  background-color: lighten($primaryColor, 30);
  box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
  margin: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-radius: 4px;
  display: none;
  &.active{
    display: block;
  }
  li{
    font-weight: 400;
    margin: 0;
    padding: 12px 16px;
    color: $primaryColor;
    font-weight: 500;
    border-bottom: 1px solid rgba(black, 0.12);
    &:last-child{
      border-bottom: none;
    }
    &:hover{
      background-color: #f5f5f5;
    }
  }
}

.dependency-not-activated {
  text-align: center;
  margin: 0 auto 30px;
  font-size: 18px;
  max-width: 580px;
  overflow: hidden;
  img{
    max-width: 140px;
    margin: 0 auto 30px;
    display: block;
  }
}

.eei_install_plugin{
  color: white;
  background-color: $primaryColor;
  border: 2px solid transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  padding: 10px 35px;
  border-radius: 4px;
  margin: 32px 0 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
  &:hover{
    color: white;
    background-color: darken($primaryColor, 10);
  }
}

.eei-flexselect{
  display: flex;
  .components-base-control__label + &{
    margin-top: 8px;
  }
  button{
    flex: 1;
    border: none;
    background-color: rgba($primaryColor, 0.5);
    cursor: pointer;
    padding: 5px;
    &.active{
      background-color: $primaryColor;
      color: white;
    }
  }
}
.eei-image-selector-wrap{
  .eei-bg-image__preview{
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
  }
  .eei-bg-image__toggle{
    background-color: #999999;
    display: block;
    width: 100%;
    background-color: rgba($primaryColor, 0.2);
  }
  .eei-image-selector-btns{
    margin: 8px -8px 0;
    display: flex;
    align-items: center;
    > *{
      margin-left: 8px;
      margin-right: 8px;
    }
  }
}

//Dasboard & Statistics
.easy_email_integration-statistics{
  margin-top: 48px;
}
.eei-dashboard-box {
  background-color: white;
  padding: 35px;
  border-radius: 4px;
}
.eei_subscription_count{
  padding-right: 35px;
  display: flex;
  align-items: center;
  .dashicons{
    font-size: 80px;
    width: 80px;
    height: 80px;
    margin-right: 20px;
    text-align: left;
    color: #40ae9f;
  }
  .eei_subscription_data{
    font-weight: 500;
    font-size: 18px;
    > span{
      display: flex;
      line-height: 1.9;
      justify-content: space-between;
      align-items: center;
       + span{
         margin-top: 12px;
       }
      label{
        margin-right: 32px;
      }
      .count{
        background-color: #40ae9f;
        min-width: 52px;
        text-align: center;
        color: white;
        border-radius: 4px;
        padding: 0 15px;
      }
    }
  }
}

.eei_subscription_conversion_rate{
  padding-left: 35px;
  text-align: right;
  label{
    font-weight: 500;
    font-size: 18px;
    line-height: 1.9;
  }
  .conversion_rate{
    color: #e8833a;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .dashicons{
      font-size: 46px;
      width: 46px;
      height: 46px;
    }
    .count{
      font-size: 36px;
      font-weight: 700;
      display: inline-block;
      line-height: 1;
      margin-left: 15px;
    }
  }
}
.eei_dashbaord_widget{
  margin-top: 30px;
}
.eei_widget_header{
  margin-bottom: 30px;
  h4{
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #111111;
    line-height: 1;
  }
  p{
    font-size: 16px;
    font-weight: 500;
    color: #777777;
    line-height: 1;
    margin: 15px 0 0;
  }
}
.eei_weekly_trend,
.eei_weekly_performance{
  padding: 35px;
  background-color: white;
  border-radius: 4px;
}
.eicon-eei-icon{
  &:before{
    content: url('data:image/svg+xml; utf8, <svg width="30" height="30" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M65.428 17.4623H14.7613C13.6415 17.4623 12.5675 17.9107 11.7757 18.7089C10.9839 19.507 10.5391 20.5896 10.5391 21.7183V55.7663C10.5391 56.8951 10.9839 57.9776 11.7757 58.7758C12.5675 59.5739 13.6415 60.0223 14.7613 60.0223H65.428C66.5478 60.0223 67.6217 59.5739 68.4135 58.7758C69.2054 57.9776 69.6502 56.8951 69.6502 55.7663V21.7183C69.6502 20.5896 69.2054 19.507 68.4135 18.7089C67.6217 17.9107 66.5478 17.4623 65.428 17.4623V17.4623ZM60.7835 21.7183L40.0946 36.1462L19.4057 21.7183H60.7835ZM14.7613 55.7663V23.6548L38.8913 40.4873C39.2447 40.7344 39.6645 40.8668 40.0946 40.8668C40.5247 40.8668 40.9446 40.7344 41.298 40.4873L65.428 23.6548V55.7663H14.7613Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M50.9205 56.6988L50.6433 56.955L50.4508 57.1331C50.4508 57.1331 50.288 57.2786 49.971 57.5477L49.95 57.5662L49.9459 57.5699L49.9456 57.5701C49.6289 57.8497 49.1682 58.2565 48.5592 58.7644C47.3083 59.8076 45.4341 61.2974 42.8935 62.9454C40.3556 64.5934 37.1386 66.3743 33.3356 68.04C31.4368 68.8716 29.396 69.6821 27.2229 70.4107C26.6797 70.5922 26.131 70.7735 25.5742 70.9573C25.4784 70.99 25.3824 71.0233 25.2862 71.0567L25.2853 71.057C25.2199 71.0797 25.1543 71.1025 25.0886 71.1251C24.6959 71.2615 24.2995 71.3988 23.8979 71.531C22.7628 71.9038 21.5813 72.197 20.3718 72.4386C19.1622 72.6809 17.9194 72.8614 16.658 72.9377C16.0271 72.98 15.3917 72.997 14.7545 72.9775C14.1172 72.9639 13.478 72.9199 12.8453 72.8334C12.2127 72.7504 11.5837 72.6318 10.9639 72.4708C10.347 72.3047 9.74204 72.0971 9.15724 71.8403C7.98773 71.3259 6.91014 70.6051 6.01064 69.6727C5.97848 69.6383 5.94566 69.6043 5.91275 69.5703C5.83328 69.4881 5.75332 69.4054 5.68162 69.3146C5.65183 69.2794 5.62097 69.244 5.59003 69.2086L5.5885 69.2068C5.51183 69.1189 5.4351 69.0308 5.37445 68.946L5.23424 68.7663L5.1641 68.675L5.08397 68.5584L4.9211 68.3223L4.84899 68.2174C4.84343 68.2076 4.82968 68.1847 4.82812 68.183L4.79465 68.1291C4.4364 67.5667 4.13054 66.9614 3.87665 66.3214C3.36626 65.0441 3.07766 63.6286 2.96553 62.1599C2.91078 61.4257 2.89678 60.6787 2.92338 59.9218C2.95268 59.165 3.0198 58.4009 3.11932 57.635C3.21615 56.869 3.35079 56.0986 3.51497 55.3292C3.67654 54.5596 3.86495 53.788 4.08291 53.0201C4.9495 49.9457 6.20266 46.9024 7.70635 43.9445C9.21282 40.9841 10.97 38.1035 12.9126 35.3233C13.3137 34.7487 13.7228 34.1785 14.1396 33.6129V28.7943C12.8906 30.3464 11.6936 31.9371 10.5564 33.5642C8.54086 36.4482 6.71043 39.4463 5.13276 42.5495C3.55499 45.6527 2.22703 48.8693 1.28907 52.1868C1.05326 53.0155 0.846766 53.8533 0.669813 54.6948C0.492778 55.5364 0.34259 56.3843 0.235207 57.2391C0.125123 58.0938 0.0472043 58.9522 0.0149567 59.8148C-0.0146719 60.6775 -0.0011669 61.5415 0.0634102 62.4042C0.192646 64.1269 0.53714 65.8532 1.18324 67.4717C1.50498 68.2809 1.89752 69.0588 2.36142 69.7886L2.40521 69.8568L2.41732 69.8763C2.42518 69.8892 2.42747 69.8929 2.46971 69.9563L2.54983 70.0729L2.71271 70.309L2.79292 70.4256L2.894 70.5623L3.10165 70.8332C3.18925 70.9534 3.27837 71.0569 3.36718 71.16L3.38524 71.181C3.42969 71.2319 3.47405 71.2836 3.51808 71.3361C3.62448 71.4666 3.74111 71.5886 3.85725 71.7098L3.85746 71.71C3.8889 71.743 3.92034 71.776 3.95146 71.8089C5.13586 73.0394 6.54928 73.9732 8.01384 74.6164C8.74744 74.9392 9.4938 75.1926 10.2415 75.3934C10.9895 75.5892 11.7363 75.7282 12.4789 75.8256C13.2214 75.9265 13.9573 75.9765 14.6834 75.9926C15.4094 76.0112 16.1256 75.9943 16.8291 75.9485C18.2389 75.8629 19.6033 75.6638 20.9183 75.4028C21.5785 75.2748 22.2232 75.1214 22.8572 74.9655C23.4889 74.7977 24.1125 74.6299 24.7255 74.4528C25.3385 74.2791 25.9436 74.0995 26.5281 73.8859H26.5284C26.8191 73.7808 27.1099 73.6749 27.3931 73.5529C27.6762 73.4359 27.9567 73.3165 28.2321 73.1877C30.4475 72.1987 32.4564 71.0861 34.275 69.9458C37.9152 67.6596 40.8276 65.3235 43.1958 63.3946C45.5562 61.4515 47.3574 59.8788 48.585 58.8014C48.8489 58.5648 49.0876 58.3538 49.2986 58.1674L49.2988 58.1672L49.3086 58.1586L49.3167 58.1514L49.317 58.1512C49.5834 57.9157 49.8049 57.7199 49.976 57.5618C50.2879 57.2786 50.4508 57.1331 50.4508 57.1331C50.4508 57.1331 50.8301 56.7943 51.5436 56.1339H51.526C51.2875 56.3595 51.0854 56.5463 50.9241 56.6953L50.9205 56.6988ZM23.2922 18.9392L23.1451 19.0769L25.2566 21.15C25.3565 21.0565 25.4562 20.9631 25.5557 20.8694L26.5169 19.9873C31.5937 15.4042 37.1593 11.3372 43.0476 8.2355C45.9917 6.68882 49.0179 5.37857 52.0901 4.44295C53.6235 3.97375 55.1677 3.60225 56.7086 3.34777C58.2466 3.10152 59.7841 2.96661 61.2871 3.00907C62.7901 3.04864 64.2562 3.25431 65.6161 3.68241C66.9772 4.10781 68.223 4.7609 69.2641 5.63347C69.5243 5.85303 69.774 6.08335 70.0064 6.32715C70.035 6.35783 70.0637 6.38842 70.0932 6.41901C70.1807 6.5112 70.2683 6.60374 70.3485 6.70238C70.3592 6.71509 70.37 6.72779 70.3808 6.7405C70.3917 6.75321 70.4025 6.76593 70.4132 6.77864C70.5024 6.88169 70.59 6.98405 70.6604 7.08227L70.8036 7.26759L70.8396 7.31607L70.8813 7.37581L70.964 7.49529L71.1293 7.73705C71.1318 7.74273 71.1784 7.81095 71.1473 7.76544L71.1809 7.81942L71.248 7.9273L71.2726 7.96729C71.3544 8.0983 71.4354 8.22812 71.5066 8.36684C71.523 8.39545 71.5385 8.42397 71.5541 8.45248L71.5541 8.45254L71.5541 8.4526L71.5694 8.48038C71.6306 8.59201 71.6919 8.70365 71.7448 8.81969C72.348 10.0413 72.7303 11.3816 72.9201 12.7579C73.1133 14.1343 73.1329 15.5416 73.029 16.9286C72.9283 18.3185 72.7041 19.6907 72.4111 21.0273C71.8111 23.7031 70.9223 26.2392 69.909 28.6045C69.6626 29.1751 69.4122 29.7378 69.1536 30.2896V36.6094C69.7854 35.6195 70.3526 34.5553 70.8895 33.4394L70.9452 33.3252L70.9623 33.2895C71.502 32.17 72.0555 31.0217 72.5657 29.8237C73.6363 27.3209 74.5898 24.6196 75.2446 21.7003C75.5654 20.2391 75.8151 18.7228 75.9288 17.1551C76.0459 15.5875 76.0295 13.9656 75.7979 12.3206C75.5728 10.6786 75.1079 9.01002 74.3312 7.44335C74.2568 7.28685 74.1738 7.13537 74.0907 6.98353L74.0848 6.97287C74.0756 6.95569 74.0662 6.93849 74.0567 6.92128L74.0474 6.90427L74.0251 6.86304C73.9277 6.6798 73.8177 6.50131 73.7078 6.32297L73.6911 6.29588L73.6036 6.15674L73.5594 6.08581L73.498 5.992L73.3318 5.75024L73.2492 5.63076L73.2082 5.57101L73.1559 5.50254L72.9431 5.22315C72.8211 5.05913 72.6977 4.91365 72.5749 4.76894L72.5749 4.76885L72.5576 4.74844C72.5428 4.73158 72.5281 4.71463 72.5142 4.69768C72.3963 4.55447 72.2678 4.41872 72.1401 4.28424L72.1027 4.24483L72.0648 4.205C71.7596 3.88384 71.4314 3.58149 71.0892 3.2954C69.7249 2.15124 68.1206 1.32579 66.4583 0.807775C64.7941 0.286962 63.0705 0.0540962 61.3604 0.00825181C59.645 -0.037762 57.9403 0.111549 56.2536 0.383989C54.5694 0.662106 52.9033 1.06606 51.2641 1.56552C47.9854 2.56732 44.8067 3.94544 41.7288 5.56051C38.6537 7.17853 35.6845 9.04485 32.8234 11.0871C31.3955 12.1111 29.9932 13.1804 28.6221 14.2897C27.9339 14.8429 27.2587 15.4103 26.5861 15.9835C26.3954 16.1467 26.2064 16.3118 26.0177 16.4767C25.8735 16.6026 25.7295 16.7285 25.585 16.8532L24.5886 17.7426L23.6247 18.6273C23.5318 18.715 23.4385 18.8023 23.3451 18.8897L23.3441 18.8906L23.3001 18.9318L23.2922 18.9392Z" fill="black"/></svg>');
    height: 30px;
    width: 30px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
}
@media screen and (max-width: 991px){
  .easy_email_integration-col-6{
    width: 100%;
    + .easy_email_integration-col-6{
      margin-top: 30px;
    }
  }
  .eei_weekly_performance,
  .eei_weekly_trend,
  .eei_subscription_conversion_rate,
  .eei_subscription_count{
    padding: 0;
  }
  .eei_dashbaord_widget{
    margin-top: 50px;
  }

  .easy_email_integration-connected-integrations,
  .easy_email_integration-available-integrations{
    padding: 0;
  }
}

@media screen and (max-width: 960px){
  .configuration-window{
    left: 36px;
  }
  .easy_email_integration-subscriber-table table {
    min-width: 900px;
  }
  #subscriber_list_actions > div{
    overflow: auto;
    max-width: 100%;
  }
}

@media screen and (max-width: 782px){
  .configuration-window{
    left: 0;
  }
  .eei-filter{
    display: block;
    margin: 8px 0px;
    width: 100%;
    text-align: center;
  }
  .eei-filter > .inputPlaceholder, .eei-filter > input{
    width: 100%;
  }
  .eei-filter > .inputPlaceholderDrop{
    max-width: none;
    box-sizing: border-box;
  }
  .easy-email-integration-export,
  .easy-email-integration-delete,
  .easy-email-integration-display{
    > .dashicons{
      left: auto;
    }
  }
}

.synced-progress{
  height: 5px;
  border-radius: 3px;
  background-color: #d3dae0;
  margin: 15px 0;
  div{
    height: 5px;
    border-radius: 3px;
  }
}

.eei-sync-status{
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  margin-left: 20px;
  border: 1px solid #00afa0;
  color: #00afa0;
  font-weight: 400;
  padding: 1px 10px;
  border-radius: 15px;
  line-height: 18px;
  svg{
    width: 12px;
    height: 12px;
    fill: #00afa0;
  }
  span{
    margin-left: 6px;
  }
  &.eei-sync-status-crossed{
    color: #ef8446;
    border-color: #ef8446;
    svg{
      fill: #ef8446;
    }
  }
  &.eei-sync-status-error{
    color: #D3455B;
    border-color: #D3455B;
    background-color: #D3455B;
    color: white;
    svg{
      fill: white;
    }
  }
}

.eei-upgrade-notice{
  margin: 34px 0 24px;
  background-color: rgba(0,0,0, 0.04);
  padding: 12px 16px;
  word-break: break-word;
  svg{
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
  span{
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
  }
}

.delete-popup{
  position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(black, 0.5);
    z-index: 2;
}
.delete-popup-wrapper{
  background-color: white;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 780px;
  max-width: calc(100% - 60px);
  max-height: calc(100% - 60px);
  overflow: auto;
  text-align: center;
  padding: 45px 35px;
  box-sizing: border-box;
  .close-btn{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 48px;
    width: 48px;
    height: 48px;
    cursor: pointer;
  }
  h3{
    margin: 0;
    font-size: 40px;
    line-height: 1;
  }
  p{
    margin: 30px auto 0;
    font-size: 20px;
    max-width: 600px;
    line-height: 1.75;
  }
  .eei-btn-group{
    margin-top: 30px;
  }
}
.actionBtn{
  color: white;
  background-color: $kellyGreen;
  border: 2px solid transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  padding: 10px 35px;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition:all 0.3s ease;
  min-width: 220px;
  display: inline-block;
  + .actionBtn{
    margin-left: 15px;
  }
  &:hover{
    background-color: darken($kellyGreen, 10);
  }
  &:disabled{
    background-color: #999999;
    cursor: default;
  }
  &.actionDelete{
    background-color: $redColor;
    &:hover{
      background-color: darken($redColor, 10);
    }
  }
  &.actionCancel{
    background-color: #c3cfd8;
    color: $headingColor;
    &:hover{
      background-color: darken(#c3cfd8, 10);
    }
  }
}
.pro-popup{
  position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(black, 0.5);
    z-index: 2;
}
.pro-popup-wrapper{
  background-color: white;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 675px;
  max-width: calc(100% - 60px);
  max-height: calc(100% - 60px);
  overflow: auto;
  text-align: center;
  padding: 45px 35px;
  box-sizing: border-box;
  .close-btn{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 48px;
    width: 48px;
    height: 48px;
    cursor: pointer;
  }
  h3{
    margin: 0;
    font-size: 40px;
    line-height: 1;
  }
  p{
    margin: 30px auto 0;
    font-size: 20px;
    max-width: 450px;
    line-height: 1.5;
  }
  .eei-btn-group{
    margin-top: 30px;
  }
}

.actionBtn{
  &.actionPro{
    background-color: $primaryColor;
    color: white;
    &:hover{
      background-color: darken($primaryColor, 10);
    }
  }
}

@media screen and (max-width: 520px){
  .configuration_fields {
    .submitConfig,
    .disableConfig{
      display: block;
      margin: 0;
      width: 100%;
      text-align: center;
    }
    .disableConfig{
      margin-bottom: 15px;
    }
  }
}

// Lock 
.components-base-control.components-toggle-control.is-disabled {
  height: 14px;
}

.components-base-control.components-toggle-control.is-disabled .components-base-control__field{
  pointer-events: none !important;
  opacity: 0.7 !important;
}
.components-base-control.components-toggle-control.is-disabled:after{
  content: "Premium";
  background-color: #6558f5;
  margin-left: 20px;
  display: inline-block;
  color: #fff;
  font-weight: 400;
  padding: 3px 6px;
  border-radius: 20px;
  font-size: 11px;
  line-height: 11px;
  position: relative;
    bottom: 20px;
    right: 0px;
    left: 171px;
}

.components-flex.components-select-control.isEEISelectControl select.components-select-control__input{
  overflow-y: scroll !important;
  height: 61px !important;

  &::-webkit-scrollbar {
    width: 0px;
  }

}
// Fix and remove suffix icon from block{
  span.components-input-control__suffix {
    display: none !important;
}


.components-flex.components-select-control.isEEISelectControl select.components-select-control__input::-webkit-scrollbar {
  width: 0px;
}

.easy_email_integration-integrations-field .configuration-popup button.components-button {
  background-color: #4CAF50;
  border: none;
  border-radius: 2px;
  color: white;
  padding: 6px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}

// bulk delete
span.inputPlaceholder.inputPlaceholderDrop.inputPlaceholderIcon.active {
  border: 2px solid rgb(207, 98, 98);
}
.eei-filter.easy-email-integration-delete.inactive svg{
  fill: rgb(255, 0, 0) !important;
}
span.inputPlaceholder.inputPlaceholderDrop.inputPlaceholderIcon.active:hover {
  border: 2px solid rgb(255, 0, 0);
}

.eei-filter:hover>.dashicons.dashicons-trash.bulkdelete {
  color: rgb(255, 0, 0);
}


// Headway design 
.eeiheading {
  display: flex;
  align-items: center;
}
.easy_email_integration-wrap .title{
  flex: 1;
}

h3.eei_headway {
  display: flex;
  flex-direction: row-reverse;
  text-align: center;
  align-items: center;
  color: #5a5a5a;
}
span.emoji {
  margin-left: 6px;
}