#wpcontent {
    @apply pl-0;
}
* {
    @apply m-0 p-0 box-border;
}
body {
    font-family: "Lato", sans-serif;
    @apply text-sm font-normal bg-[#f7f8fc] text-[#3c434a];
}
.dashboard-section {
  a {
    @apply no-underline;
    &:focus {
      @apply shadow-none;
      outline: none;
    }
  }
}
.gp-notification-bar {
    @apply bg-white rounded-s w-[1180px] my-[50px] mx-auto max-w-[100%] border border-solid border-[#e5e7eb];
    ul {
        @apply m-0 p-0;
        li {
            @apply m-0 p-0;
        }
    }
    a {
        @apply no-underline text-inherit;
        &:focus {
          @apply shadow-none;
          outline: none;
        }
    }
}
.settings-section {
    @apply flex;
    .left-section {
        @apply flex-1;
        border-right: solid 1px #e5e7eb;

    }
    .right-section {
        @apply flex-1 p-4;
        @media screen and (max-width: 786px) {
            display: none;
        }
    }
}
.footer-section {
    @apply flex p-5 gap-2.5 ;
    border-top: solid 1px #e5e7eb;
    @media screen and (max-width: 420px)
    {
      @apply flex-col;
      button {
        @apply w-fit;
      }
    }
    button {
        @apply text-white rounded cursor-pointer py-2 px-[15px] bg-[#4F46E5] border border-solid border-[#4F46E5] text-[1rem];
        &.secondary-btn {
            @apply bg-white text-[#3c434a] border-[#3c434a];
        }
    }
}
a.preview-btn {
  @apply hidden text-white rounded cursor-pointer py-2 px-[15px] bg-[#4F46E5] border border-solid border-[#4F46E5] text-[1rem] fixed bottom-[100px] right-[-28px] rotate-[270deg];
  &:hover {
    @apply text-white;
  }
  @media screen and (max-width: 786px) {
    display: block;
  }
}
.gp-notification-bar , .notification-modal {
  input[type='text'], input[type='number'], input[type='tel'], textarea {
    @apply shadow-none outline-none text-[#3c434a] text-sm min-h-9;
    font-family: "Lato", sans-serif;
    &:focus {
      @apply outline-none border-[#5067f3];
    }
  }
  textarea {
    height: 80px !important;
    padding: 8px !important;
  }
}
.page-title {
    @apply text-xl font-medium py-[15px] px-5;
    border-bottom: solid 1px #e5e7eb;
}
.gp-title {
    @apply text-[1.2rem] leading-none font-medium pt-0 pr-0 pb-[15px] pl-0 mb-[15px];
    border-bottom: solid 1px #f7f8fc;
}
.setting-section {
    @apply p-5;
    +.setting-section {
      border-top: solid 1px #e5e7eb;
    }
}
.gp-form-field {
    .gp-form-label {
        @apply pb-[5px];
        padding-bottom: 5px;
    }
    + .gp-form-field {
        @apply mt-[15px];
    }
    &.is-flex {
        @apply flex;
        @media screen and (max-width: 1160px) {
          @apply block;
        }
        .gp-form-label {
            flex: 0 0 125px;
        }
        .gp-form-input {
            @apply flex-1;
        }

    }
    .gp-form-input {
        @apply w-full max-w-[360px];
        &.is-small {
            @apply max-w-[240px];
        }
        &.is-x-small {
            @apply max-w-[160px];
            max-width: 160px;
        }
        &.full-width {
            @apply max-w-full;
        }
        &.has-text {
            @apply relative;
            &:after {
                content: attr(data-text);
                @apply absolute right-px top-px py-0 px-2.5 rounded bg-[#e9e9e9] h-[34px] leading-[34px];
            }
        }
    }
    .gp-textarea-field {
        @apply w-full rounded h-20 p-2 border border-solid border-[#e5e7eb];
    }
    .gp-input-field {
        @apply w-full rounded h-9 min-h-9 py-0 px-2 max-w-[360px] border border-solid border-[#e5e7eb] outline-none shadow-transparent;
        &.ginger-input-error {
            border-color: rgb(225 29 72) !important;
        }
    }
    .gp-small-field {
        @apply w-10 rounded py-0 px-2 border border-solid border-[#e5e7eb] h-[26px] my-0 mx-[5px] px-[5px];
    }
}
.ginger-error-message {
    @apply text-rose-600 text-xs;
}
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
}
.gp-radio-buttons {
    @apply inline-flex bg-[#e9e9e9] p-[3px] rounded-[5px];
    .gp-radio-button {
        label {
            @apply inline-block cursor-pointer rounded py-[5px] px-2;
        }
        input:checked + label {
            @apply bg-white;
        }
        + .gp-radio-button {
            @apply ml-1;
        }
    }
}
.color-box {
    @apply h-8 w-8 rounded border border-solid border-[#e5e7eb];
}
.padding-setting {
    @apply inline-flex;
    .padding-field {
        @apply inline-flex h-8 items-center rounded bg-[#e9e9e9] pt-px pr-px pb-px pl-[10px];
        label {
          @apply min-w-[60px];
        }
        .padding-input {
            @apply outline-none rounded py-0 px-1.5 border-solid border-transparent w-[50px] h-[30px] min-h-[30px];
            &:focus {
                @apply outline-none shadow-none border-solid;
            }
        }
        +.padding-field {
            @apply ml-2.5;
        }
    }
    +.padding-setting {
        @apply mt-2.5;
    }
}
.gp-switch-buttons {
    @apply flex items-center;
}
.gp-switch-button {
    @apply relative inline-flex items-center align-middle;
    label {
        @apply cursor-pointer relative inline-flex items-center flex-wrap;
        > span {
            @apply h-4 rounded-lg mr-2 w-[34px] bg-[#e9e9e9] z-[1] relative;
            transition: all 0.2s ease-in-out;
            > span {
                content: "";
                @apply w-5 h-5 rounded-full inline-block absolute left-0 bg-white top-[-2px] border-2 border-solid border-[#e9e9e9] z-[99999];
                transition: all 0.2s ease-in-out;
            }
        }
    }
    input:checked {
        + label {
            > span {
                @apply bg-[#4F46E5];
                > span {
                    @apply bg-white border-[#4F46E5] left-[16px];
                }
            }
        }
    }
    + .gp-switch-button {
        @apply ml-5;
    }
}
.new-action-button {
    @apply py-1 px-2 inline-block rounded bg-white border border-solid border-[#e9e9e9] text-[#3c434a];
}
.page-rule {
    @apply flex mb-2.5 rounded p-2.5 gap-2 bg-[#f9f9f9] border border-solid border-[#e9e9e9];
    .page-condition {
        flex: 0 0 140px;
    }
    .page-rule-value {
        @apply flex-1;
    }
}
.gp-form-fields {
    @apply flex gap-5 max-w-[360px];
    @media screen and (max-width: 550px) {
      @apply block;
    }
    .gp-form-field {
        @apply flex-1;
        +.gp-form-field {
            @apply m-0;
        }
    }
}
.pro-features {
    @apply p-5 rounded relative bg-[#f7f8fc] mt-[15px];
    .pro-button {
        @apply absolute w-8 h-8 block right-[15px] top-[15px];
        svg {
            @apply w-full h-full;
        }
    }
}
.pro-feature-link {
    @apply w-4 h-4 inline-flex align-middle;
    svg {
        @apply w-4 h-4;
    }
}
.dashboard-header {
    @apply flex justify-around items-center mb-[15px];
    .header-left {
        @apply text-[1.4rem] font-bold;
    }
    .header-right {
        @apply flex-1 flex justify-end gap-2.5;
        a {
            @apply inline-flex text-white rounded border border-solid border-[#e5e7eb] py-2 px-[15px] no-underline bg-[#6458ed];
            &:hover {
                @apply bg-[#5a4fd5];
            }
        }
    }
}

.dashboard-section {
    @apply w-[1180px] my-[50px] mx-auto max-w-full px-5;
    .dashboard-content {
        @apply rounded;
        table {
            @apply w-full border-collapse;
            th, td {
                @apply py-2.5 px-[15px] text-left border-collapse ;
                border-bottom: solid 1px #e5e7eb;
                &.is-center {
                    @apply text-center w-[120px];
                }
                &.status-col {
                    @apply w-[100px] text-center;
                }
            }
            th {
                @apply bg-[#e5e7eb];
                &:first-child {
                    border-top-left-radius: 5px;
                }
                &:last-child {
                    border-top-right-radius: 5px;
                }
            }
            td {
                @apply bg-white;
            }
            .date-col {
              @apply min-w-[130px];
            }
            .action-col {
                @apply text-center min-w-[130px];
                a {
                    @apply w-[22px] h-[22px] my-0 mx-0.5 inline-flex p-1 rounded;
                    transition: all 0.2s linear;
                    svg {
                        @apply w-full h-full;
                    }
                    &.remove-action {
                        &:hover {
                            @apply bg-[#ffe0e0];
                            svg path {
                                @apply stroke-[#d01616];
                            }
                        }
                    }
                    &.clone-action {
                        &:hover {
                            @apply bg-[#fff4db];;
                            svg path {
                                @apply stroke-[#FFA500];
                            }
                        }
                    }
                    &.edit-action {
                        &:hover {
                            @apply bg-[#d6ebff];
                            svg path {
                                @apply stroke-[#0d66c2];
                            }
                        }
                    }
                }
            }
        }
    }
}
.notification-modal {
    @apply hidden w-full h-lvh fixed top-0 left-0 z-[9999];
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    &.active {
        @apply block;
    }
    .modal-content {
        @apply w-[540px] my-0 mx-auto max-h-[90vh] top-2/4 left-0 right-0 absolute bg-white rounded;
        transform: translate(0, -50%);
        max-width: calc(100% - 20px);
        .modal-title {
            @apply relative text-[1.2rem] font-semibold flex py-[15px] px-5;
            border-bottom: solid 1px #e5e7eb;
        }
        .modal-body {
            @apply py-[15px] px-5;
            .gp-form-field {
                .gp-form-input {
                    @apply max-w-full;
                }
                .gp-input-field {
                    @apply max-w-full;
                }
            }
        }
        .modal-footer {
            @apply py-[15px] px-5 flex items-center gap-2 justify-end;
            border-top: solid 1px #e5e7eb;
            a, button {
                @apply no-underline text-[#3c434a] py-1.5 px-[15px] border border-solid border-[#3c434a] bg-white rounded;
                transition: 0.2s ease-in-out;
                &:hover, &:focus {
                    @apply bg-[#e5e7eb];
                }
                &.primary-btn {
                    @apply bg-[#6458ed] text-white border-[#6458ed];
                    &:hover, &:focus {
                        @apply bg-[#5a4fd5] border-[#5a4fd5];
                    }
                }
                &.danger-btn {
                  @apply bg-[#dd0000] text-white border-[#dd0000];
                  &:hover, &:focus {
                    @apply bg-[#b71010] border-[#b71010];
                  }
                }
            }
        }
        .close-modal-btn {
            @apply absolute right-4 top-4 w-3.5 h-3.5 block z-[101];
            svg {
                @apply fill-[#3c434a];
            }
            &:hover {
                svg {
                    @apply fill-[#333333];
                }
            }
        }
    }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wp-picker-container {
    @apply relative h-8 w-8 rounded border border-solid border-[#e5e7eb];
    button.wp-color-result {
        @apply w-full h-full border-none min-h-full;
        .wp-color-result-text {
            @apply hidden;
        }
    }
    .custom-color-picker {
        @apply absolute left-0 border-[#e5e7eb] z-[1];
        top: calc(100% + 3px);
    }
    .wp-picker-clear {
        @apply hidden;
    }
    .wp-picker-holder {
        @apply absolute z-[99];
        top: calc(100% + 42px);
    }
  .iris-border {
    @apply border-[#e5e7eb];
  }
}
.SumoSelect {
  @apply w-full;
  >.CaptionCont
  {
    >span {
      @apply leading-9 text-sm;
    }
  }
  &.open{
    >.optWrapper {
      top: 38px;
    }
  }
  &.open {
    >.CaptionCont {
      @apply outline-none shadow-none border-[#5067F3];
    }
  }
  &:hover:not(.open) {
    >.CaptionCont {
      @apply outline-none shadow-none border-inherit;
    }
  }
  >.optWrapper{
    @apply border-[#e5e7eb];
    >.options{
      @apply max-h-[170px];
      li{
        label {
          @apply text-sm;
        }
        &.opt:hover {
          @apply bg-[#EFEEFD];
        }
        &.opt.selected {
          @apply bg-[#EFEEFD];
        }
      }
    }
  }
}
.action_url_field:not(.active) {
  display: none;
}

//Toaster CSS
.toasts-container {
  @apply fixed top-10 right-10 pl-10 z-[999999];
  .toast {
    @apply relative flex justify-between items-center max-w-[420px] min-w-[150px] rounded py-3 px-6 mb-[15px] opacity-0 translate-x-full overflow-x-hidden;
    transition: .25s ease-in-out;
    &.active {
      @apply opacity-100;
      transform: translateY(0);
    }
    .t-icon {
      @apply mr-2.5;
      svg {
        @apply fill-white w-5 h-5;
      }
    }
    .t-message {
      @apply text-white text-base flex-1;
    }
    .t-close {
      @apply absolute right-1 top-1;
      svg {
        @apply fill-white opacity-100 w-3 h-3 cursor-pointer;
        transition: opacity .5s;
      }
    }
    .t-progress-bar {
      @apply block absolute bottom-0 left-0 h-1.5 w-full rounded-tr-none rounded-tl-lg rounded-br-none rounded-bl-none;
      background-color: rgba(255, 255, 255, .5);
      animation: 3s linear forwards progress-bar-animation;
    }
    .t-progress-bar {
      &.t-5000 {
        animation-duration: 5s;
      }
    }
    &.success {
      @apply bg-[#4caf50];
    }
    &.system {
      @apply bg-[#2896f3];
    }
    &.warning {
      @apply bg-[#fbc107];
    }
    &.error {
      @apply bg-[#f55153];
    }
  }
}
@keyframes progress-bar-animation {
  from {
    width: 100%
  }
  to {
    width: 0%
  }
}

//empty screen

.gp-no-records * {
  @apply box-border;
}
.gp-no-records {
  @apply w-full relative bg-[#F7F7FF];
}

.gp-no-records-box {
  @apply w-full my-0 mx-auto;
}

.gp-no-records-top {
  @apply w-[500px] mt-0 mx-auto mb-5 max-w-full not-italic;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.gp-no-records-top img {
  @apply w-full;
}

.no-records-title {
  @apply text-2xl text-center font-semibold mb-5;
}

.no-records-features {
  @apply max-w-[750px] my-0 mx-auto py-[15px] px-[20px] rounded-[18px];
}

.no-records-features ul {
  @apply m-0 p-0;
}

.no-records-features ul li {
  @apply block pt-0 pr-0 pb-2.5 pl-5 text-xl not-italic font-normal relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.no-records-features ul li i {
  @apply text-[#4F46E5] text-[8px];
}


.gp-no-records-bottom {
  @apply text-center my-0 mx-0;
}
.gp-no-records-bottom .gp-action-button i {
  @apply ml-[15px];
}

.text-color {
  @apply text-[#4F46E5];
}
@media screen and (max-width: 782px) {
  .no-records-features {
    @apply p-[5px];
  }
}
.loader-btn {
  @apply flex items-center;
  .gp-loader {
    @apply hidden h-[15px] w-[15px] mr-[5px];
    svg {
      @apply fill-white h-full w-full;
      animation: spinner 1.5s linear infinite;
    }
    &.active {
      @apply inline-block;
    }
  }
  &.secondary-btn {
    .gp-loader {
      svg {
        @apply fill-black;
      }
    }
  }
}
@keyframes spinner {
  to { transform: rotate(360deg); }
}
.responsive-table {
  overflow-x: auto;
}

.gp-navigation {
  @apply text-right;
  ul {
    @apply m-0 p-0;
    &.page-numbers {
      @apply mt-5 mb-0 mx-0;
    }
    li {
      @apply inline-block m-0 p-0;
      a, a:hover , &.active a , &.disabled {
        @apply text-white no-underline;
      }
      a , &.active a , &.disabled  {
        @apply cursor-pointer py-1.5 px-3 inline-block border border-solid border-[#eee] text-[#333] rounded;
      }
      a:hover {
        @apply border-[#6458ed] bg-[#6458ed] text-white;
      }
    }
  }
  span {
    &.current {
      @apply cursor-pointer py-1.5 px-3 inline-block border border-solid border-[#6458ed] bg-[#6458ed] text-white rounded;
    }
  }
}
.gp-tooltip {
  @apply relative inline-flex w-3.5 h-3.5;
  .tooltip-text {
    @apply text-sm cursor-pointer;
    svg {
      @apply w-3.5 h-3.5;
    }
  }
  .gp-hover-text {
    @apply absolute w-max left-2 text-xs bg-[#ffffff] py-2 px-2.5 rounded border border-solid border-[#e5e7eb] pointer-events-none opacity-0 invisible text-[#3c434a];
    bottom: calc(100% + 4px);
    transform: translate(-50%, -15px);
    transition: all 0.2s ease-in-out;
    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
    &:after {
      content: "";
      @apply inline-block border-[7px] border-solid border-transparent absolute w-0 left-0 right-0 my-0 mx-auto top-full;
      border-top:8px solid #e5e7eb;
      border-bottom:0 none;
    }
  }
  &:hover {
    .gp-hover-text {
      @apply opacity-100 visible;
      transform: translate(-50%, -8px);
    }
  }
}
button:disabled , button.disabled , a.disabled {
  background-color: #e9e9e9 !important;
  border-color: #e9e9e9 !important;
  color: #3c434a !important;
  .gp-loader {
    svg {
      fill: #3c434a !important;
    }
  }
}
#wpbody-content:has( .gp-notification-bar) {
  @apply px-5;
}
input[type=text]:disabled ,input[type=number]:disabled {
  pointer-events: none;
}