.price-table, body {
  @apply bg-white;
}

.ginger-box {
  @apply bg-white rounded-[5px] text-sm w-[1060px] max-w-full my-0 mx-auto;
}

.price-switch, .table-body {
  border-top: 1px solid #eaeff2
}

.ginger-box * {
  @apply box-border;
}

.ginger-box.no-bg {
  @apply bg-transparent border-none;
}

.ginger-inner-box {
  @apply bg-white rounded-[5px] p-[15px];
}

.clear {
  @apply clear-both;
}

.ginger-box h2 {
  @apply m-0 my-[15px] py-0 text-2xl text-center;
}

.pricing-container {
  @apply py-[30px] px-0;
}

.price-table {
  @apply rounded-md mt-0 mx-0 mb-[30px] border border-solid border-[#eaeff2];
  box-shadow: 0 0 10px -3px rgba(34, 68, 136, .2);
  -webkit-box-shadow: 0 0 10px -3px rgba(34, 68, 136, .2);
  -moz-box-shadow: 0 0 10px -3px rgba(34, 68, 136, .2)
}

.package-desc, a.checkout-url {
  @apply rounded text-center;
}

.package-price {
  @apply text-[4rem] leading-[4.5rem] text-center text-black pt-2.5 pb-0 px-0;
}

.package-price span {
  @apply text-[#111b21] text-base font-bold;
}

.credit-cards, .table-head {
  @apply text-center;
}

.package-desc {
  @apply text-[#111b21] py-1 px-2.5 inline-block mt-2.5 mb-[15px] mx-auto bg-[#efefef];
}

.col-md-4 {
  @apply w-1/3 py-0 px-[15px] box-border float-left;
}

.table-body {
  @apply p-2.5 text-base;
}

.table-body ul {
  @apply m-0 p-0 list-none;
}

.table-body ul li {
  @apply block text-left leading-[22px] relative z-[2] m-0 py-2 px-0;
}

.table-body ul li:last-child:after, .table-body ul li:last-child:before {
  @apply hidden;
}

.table-body a, .table-body a:focus, .table-body a:hover {
  @apply text-[#111b21] no-underline block;
}

.table-body ul li .dashicons {
  @apply inline-block align-bottom my-0 mr-1 ml-0;
}

a.checkout-url {
  @apply block bg-[#6458ed] text-white py-3 px-0 no-underline text-lg;
}

a.checkout-url:hover {
  @apply bg-[#5a4fd5];
}

.price-switch {
  @apply flex items-center shrink-0 py-[15px] px-0 bg-white;
}

label.checkbox-switch {
  @apply relative w-[50px] align-top h-[30px] bg-white my-0 mx-auto rounded-[20px] border-2 border-solid border-[#6458ed] cursor-pointer block;
}

.table-footer {
  @apply pt-0 px-[15px] pb-[15px];
}

label.checkbox-switch:before {
  @apply  content-[''] w-[22px] h-[22px] bg-[#6458ed] absolute rounded-[18px] left-0.5 top-0.5 ml-0;
  transition: .15s linear;
  box-shadow: 0 0 19px 0 rgba(45, 8, 133, .5) inset;
  -webkit-box-shadow: 0 0 19px 0 rgba(45, 8, 133, .5) inset;
  -moz-box-shadow: 0 0 19px 0 rgba(45, 8, 133, .5) inset
}

input[type=checkbox]:checked + label.checkbox-switch:before {
  @apply ml-[19px];
}

.plan-switch {
  @apply w-20 text-center;
}

.yearly-plan {
  width: calc(50% - 40px)
}

.price-switch .plan-price {
  @apply text-2xl line-through;
}

.price-switch .plan-desc {
  @apply text-sm;
}

.price-switch .plan-desc, .price-switch .plan-price {
  @apply text-[#111b21] font-bold;
  transition: .25s linear;
}

.price-switch .active .plan-desc, .price-switch .active .plan-price {
  @apply text-[#6458ed] no-underline;
}

.text-right {
  text-align: right !important
}

.sr-only {
  @apply absolute w-px h-px p-0 m-[-1px] overflow-hidden;
  clip: rect(0, 0, 0, 0);
  border: 0
}

.tooltip-text {
  @apply bg-[#111b21] rounded bottom-full text-white left-0 opacity-0 py-[5px] px-2.5 absolute invisible w-auto z-[1] text-sm text-left my-0 mx-2;
  transition: opacity .25s;
  box-shadow: 0 0 10px 0 rgba(34, 68, 136, .2);
  -webkit-box-shadow: 0 0 10px 0 rgba(34, 68, 136, .2);
  -moz-box-shadow: 0 0 10px 0 rgba(34, 68, 136, .2)
}

.money-back, .package-name, .plan-title, .pricing-switch {
  @apply text-center;
}

.tooltip:hover .tooltip-text:after {
  @apply border-[5px] border-solid left-[15px] absolute top-full;
  content: "";
  border-color: #111b21 transparent transparent;
}

.tooltip:hover .tooltip-text {
  @apply opacity-100 visible;
}

.credit-cards img {
  @apply max-w-full h-auto;
}

.money-back {
  @apply pt-2.5 px-0 pb-[30px] font-bold;
}

.price-table.is-fixed {
  @apply pb-[140px] relative;
}
.price-table .plan-price-bottom {
  @apply sticky bottom-0 z-[11] bg-white;
}

.price-table.is-fixed .plan-price-bottom.active {
  @apply bottom-0;
}

.price-table.is-fixed .plan-price-bottom {
  @apply fixed z-[99999];
}

.plan-title {
  @apply text-[1.4rem] leading-[1.2] my-5;
}

.faqs-title, .package-name {
  @apply text-2xl font-bold;
}

.pricing-switch {
  @apply mt-[25px] mx-auto mb-10;
}

.plan-duration {
  @apply inline-block p-1;
}

.plan-duration a {
  @apply inline-block font-bold relative py-2 px-5 text-[#6458ed] rounded;
  border-bottom: 2px solid transparent;
}

.plan-duration .year-plan span {
  @apply absolute w-[150px] left-full pt-0 px-0 pb-[3px];
}

.plan-duration a:hover {
  @apply text-[#6458ed] bg-[#efeefd];
}

.plan-duration a.active {
  @apply bg-[#6458ed] text-white rounded;
}

a:focus {
  @apply no-underline outline-none shadow-none;
}

a {
  @apply no-underline;
}

.pricing-switch-box {
  @apply inline-flex bg-white rounded border border-solid border-[#ede5ff];
  box-shadow: 0 0 10px -3px rgba(80, 103, 243, .2);
  -webkit-box-shadow: 0 0 10px -3px rgba(80, 103, 243, .2)
}

.package-name {
  @apply text-[#323232] py-[15px] px-0 leading-6;
  border-bottom: 1px solid #eaeff2;
}

@media only screen and (max-width: 1024px) {
  .ginger-box {
    @apply w-full p-5 box-border;
  }

  .gp-faq-section .ginger-box {
    @apply p-0;
  }
}

@media only screen and (max-width: 880px) {
  .pricing-tables .col-md-4 {
    @apply w-1/2;
  }
}

@media only screen and (max-width: 640px) {
  .pricing-tables .col-md-4 {
    @apply w-full;
  }

  .gp-faq-box {
    @apply block p-[25px];
  }

  .gp-faq-box-right {
    @apply pt-[25px] px-0 pb-0;
  }
}