/*!
 * 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"].rounded-xl {
  border-radius: 24px !important
}

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

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

[class*="pattern"].border-solid {
  border-style: solid !important
}

[class*="pattern"].border-2 {
  border-width: 2px !important
}

[class*="pattern"].block {
  display: block !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"].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"].py-10 {
  padding-top: 40px !important;
  padding-bottom: 40px !important
}

[class*="pattern"].py-16 {
  padding-top: 64px !important;
  padding-bottom: 64px !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"].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
}

@-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)
  }
}

@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
    }
  }
}

@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
    }
  }
}