/*!
 * Tailwind Styles
 *
 * Tailwind styles get applied and enqueued on both the front of your
 * site and in the editor.
 *
 * All styles get prepended with a custom namespace so Tailwind styles
 * don't bleed into the rest of the site.
 *
 * i.e. - If your plugin slug is 'test-test' then all Tailwind styles
 * will be prepended with [class*="test-test"].
 *
 * You can edit the prepended selector in the root postcss.config.js file
*/

/* @tailwind base; */

[class*="pattern"].container {
  width: 100%;
}

@media (min-width: 640px) {
  [class*="pattern"].container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  [class*="pattern"].container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  [class*="pattern"].container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  [class*="pattern"].container {
    max-width: 1280px;
  }
}

[class*="pattern"].ml-0 li {
  margin-left: 0 !important;
}

[class*="pattern"].text-black.text-opacity-50 li {
  --text-opacity: 1 !important;
  color: #000000 !important;
  color: rgba(0, 0, 0, var(--text-opacity)) !important;
  --text-opacity: 0.5 !important;
}

@-webkit-keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@-webkit-keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@-webkit-keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
            animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
            animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
            animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
            animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

[class*="pattern"].rounded-xl {
  border-radius: 24px !important;
}

[class*="pattern"].shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

[class*="pattern"].shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

[class*="pattern"].block {
  display: block !important;
}

[class*="pattern"].h-auto {
  height: auto !important;
}

[class*="pattern"].list-none {
  list-style-type: none !important;
}

[class*="pattern"].my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

[class*="pattern"].my-3 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

[class*="pattern"].mt-0 {
  margin-top: 0 !important;
}

[class*="pattern"].mb-0 {
  margin-bottom: 0 !important;
}

[class*="pattern"].ml-0 {
  margin-left: 0 !important;
}

[class*="pattern"].mb-2 {
  margin-bottom: 12px !important;
}

[class*="pattern"].max-w-1\/2 {
  max-width: 50% !important;
}

[class*="pattern"].p-4 {
  padding: 24px !important;
}

[class*="pattern"].p-8 {
  padding: 32px !important;
}

[class*="pattern"].p-16 {
  padding: 64px !important;
}

[class*="pattern"].py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

[class*="pattern"].px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

[class*="pattern"].py-10 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

[class*="pattern"].px-10 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

[class*="pattern"].pt-0 {
  padding-top: 0 !important;
}

[class*="pattern"].pb-0 {
  padding-bottom: 0 !important;
}

[class*="pattern"].pt-10 {
  padding-top: 40px !important;
}

[class*="pattern"].static {
  position: static !important;
}

[class*="pattern"].text-center {
  text-align: center !important;
}

[class*="pattern"].text-right {
  text-align: right !important;
}

[class*="pattern"].text-black {
  --text-opacity: 1 !important;
  color: #000000 !important;
  color: rgba(0, 0, 0, var(--text-opacity)) !important;
}

[class*="pattern"].text-opacity-50 {
  --text-opacity: 0.5 !important;
}

@media (min-width: 640px) {
  [class*="pattern"].sm\:container {
    width: 100%;
  }

  @media (min-width: 640px) {
    [class*="pattern"].sm\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    [class*="pattern"].sm\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    [class*="pattern"].sm\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    [class*="pattern"].sm\:container {
      max-width: 1280px;
    }
  }
}

@media (min-width: 768px) {
  [class*="pattern"].md\:container {
    width: 100%;
  }

  @media (min-width: 640px) {
    [class*="pattern"].md\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    [class*="pattern"].md\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    [class*="pattern"].md\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    [class*="pattern"].md\:container {
      max-width: 1280px;
    }
  }

  [class*="pattern"].md\:rounded-r-none {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  [class*="pattern"].md\:rounded-l-none {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  [class*="pattern"].md\:mb-10 {
    margin-bottom: 40px !important;
  }

  [class*="pattern"].md\:p-16 {
    padding: 64px !important;
  }

  [class*="pattern"].md\:px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  [class*="pattern"].md\:py-16 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  [class*="pattern"].md\:text-left {
    text-align: left !important;
  }
}

@media (min-width: 1024px) {
  [class*="pattern"].lg\:container {
    width: 100%;
  }

  @media (min-width: 640px) {
    [class*="pattern"].lg\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    [class*="pattern"].lg\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    [class*="pattern"].lg\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    [class*="pattern"].lg\:container {
      max-width: 1280px;
    }
  }
}

@media (min-width: 1280px) {
  [class*="pattern"].xl\:container {
    width: 100%;
  }

  @media (min-width: 640px) {
    [class*="pattern"].xl\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    [class*="pattern"].xl\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    [class*="pattern"].xl\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    [class*="pattern"].xl\:container {
      max-width: 1280px;
    }
  }
}