/**
    Color palettes
 */
/**
    Spacing
 */
.clearfix::after {
  display: block;
  content: "";
  clear: both;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.flex-grow {
  flex-grow: 1;
}

.kcmp-tab-button,
.kcmp-icon-button,
.kcmp-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  padding: 0.75em 1.25em;
  cursor: pointer;
  border-radius: 2px;
  line-height: 1;
  font-size: 12px;
  transition: all ease 0.2s;
  background: var(--kcmp-button-background-initial);
  color: var(--kcmp-button-text-initial);
  border: 1px solid var(--kcmp-button-border-initial);
  text-decoration: none;
}
.kcmp-tab-button svg,
.kcmp-icon-button svg,
.kcmp-button svg {
  width: 12px;
  height: 12px;
  fill: var(--kcmp-button-text-initial);
}
.kcmp-tab-button:focus, .kcmp-tab-button:hover,
.kcmp-icon-button:focus,
.kcmp-icon-button:hover,
.kcmp-button:focus,
.kcmp-button:hover {
  background: var(--kcmp-button-background-hover);
  color: var(--kcmp-button-text-hover);
  border: 1px solid var(--kcmp-button-border-hover);
}
.kcmp-tab-button:focus svg, .kcmp-tab-button:hover svg,
.kcmp-icon-button:focus svg,
.kcmp-icon-button:hover svg,
.kcmp-button:focus svg,
.kcmp-button:hover svg {
  fill: var(--kcmp-button-text-hover);
}

.kcmp-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9999px;
}

.kcmp-button-solid {
  --kcmp-button-text-initial: #ffffff;
  --kcmp-button-text-hover: #ffffff;
  --kcmp-button-background-initial: #0258c7;
  --kcmp-button-background-hover: #0e80e8;
  --kcmp-button-border-initial: #0258c7;
  --kcmp-button-border-hover: #0e80e8;
}

.kcmp-button-outline {
  --kcmp-button-text-initial: #0258c7;
  --kcmp-button-text-hover: #ffffff;
  --kcmp-button-background-initial: transparent;
  --kcmp-button-background-hover: #0e80e8;
  --kcmp-button-border-initial: #0258c7;
  --kcmp-button-border-hover: #0e80e8;
}

.kcmp-info-box {
  width: 100%;
  padding: 24px;
  border: 1px solid #0258c7;
  color: #0258c7;
  border-radius: 2px;
  background: rgba(14, 128, 232, 0.08);
}

.kenta_page_kenta-starter-sites #wpwrap {
  background: #f8fafc;
}
.kenta_page_kenta-starter-sites #wpcontent {
  padding-left: 0;
}

.kenta-wrap {
  padding: 24px;
}
.kenta-wrap, .kenta-wrap div, .kenta-wrap ul, .kenta-wrap ol, .kenta-wrap p, .kenta-wrap h1, .kenta-wrap h2, .kenta-wrap h3, .kenta-wrap h4, .kenta-wrap h5, .kenta-wrap h6, .kenta-wrap img {
  box-sizing: border-box;
}

.kcmp-page-container {
  max-width: 600px;
  margin: 48px auto;
  background: #ffffff;
  border: 1px solid #ccc;
  padding: 48px 24px;
  text-align: center;
}
.kcmp-page-container, .kcmp-page-container p {
  font-size: 16px;
}
.kcmp-page-container .kenta-logo {
  width: 72px;
  height: 72px;
}
.kcmp-page-container h1 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 12px;
}
.kcmp-page-container p {
  margin-bottom: 24px;
}

.kcmp-notice {
  border-left-color: #0258c7;
  padding: 0;
  display: flex;
}
.kcmp-notice .notice-action {
  font-weight: bold;
  background: #0258c7;
  color: #ffffff;
  border-radius: 4px;
  display: inline-block;
  padding: 4px 12px;
  margin: 0 2px;
  text-decoration: none;
  line-height: 1;
}
.kcmp-notice .notice-action i {
  margin-right: 4px;
}
.kcmp-notice .notice-action:hover {
  background: #0e80e8;
}
.kcmp-notice .kcmp-notice-logo,
.kcmp-notice .kcmp-notice-message {
  padding: 24px;
}
.kcmp-notice .kcmp-notice-logo h1,
.kcmp-notice .kcmp-notice-message h1 {
  padding: 0;
}
.kcmp-notice .kcmp-notice-logo {
  background-color: #f2f8ff;
}
.kcmp-notice.notice-error {
  border: 2px solid #d63638;
}
.kcmp-notice.notice-error .kcmp-notice-logo {
  background-color: #fbf3f3;
}
.kcmp-notice h1 {
  font-weight: bold;
}
.kcmp-notice p {
  font-size: 16px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.kcmp-notice .loader {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  display: inline-block;
  border-top: 3px solid currentColor;
  border-right: 3px solid transparent;
  box-sizing: border-box;
  -webkit-animation: rotation 1s linear infinite;
          animation: rotation 1s linear infinite;
}
@-webkit-keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.kenta-spinner {
  text-align: center;
  padding: 200px 0;
}

.kenta-starter-templates-header {
  text-align: center;
  padding: 24px 0;
}
.kenta-starter-templates-header h2 {
  font-size: 24px;
  margin-bottom: 48px;
}
.kenta-starter-templates-header .search-form {
  width: 480px;
  max-width: 100%;
  height: 38px;
  position: relative;
  margin: 0 auto 24px;
}
.kenta-starter-templates-header .search-form .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  margin-top: -7px;
}
.kenta-starter-templates-header .search-form .search-icon svg {
  fill: #334155;
  width: 12px;
  height: 12px;
}
.kenta-starter-templates-header .search-form input {
  display: block;
  width: 100%;
  height: 38px;
  border-radius: 2px;
  padding-left: 32px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  transition: all ease 0.2s;
}
.kenta-starter-templates-header .search-form input:focus {
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  border-color: #0e80e8;
}
.kenta-starter-templates-header .templates-filters {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 0 24px;
  min-height: 48px;
}
.kenta-starter-templates-header .templates-filters .kcmp-icon-button {
  margin-left: 12px;
}
.kenta-starter-templates-header .templates-filters ul, .kenta-starter-templates-header .templates-filters li {
  margin: 0;
}
.kenta-starter-templates-header .templates-filters ul li {
  float: left;
  padding: 12px;
  margin: 0 4px;
  cursor: pointer;
  transition: color ease 0.2s;
  position: relative;
  font-weight: bold;
  color: #334155;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}
.kenta-starter-templates-header .templates-filters ul li.active {
  border-color: #0258c7;
  background: #0258c7;
  color: #ffffff;
}
.kenta-starter-templates-header .templates-filters ul li:not(.active):hover {
  color: #0258c7;
}
.kenta-starter-templates-header .templates-plan-filter {
  margin: 24px auto;
}
.kenta-starter-templates-header .templates-plan-filter .kcmp-tab-button {
  width: 100px;
  border-radius: 0;
  border-right-width: 0;
  --kcmp-button-text-initial: #0258c7;
  --kcmp-button-text-hover: #0258c7;
  --kcmp-button-background-initial: transparent;
  --kcmp-button-background-hover: transparent;
  --kcmp-button-border-initial: #0258c7;
  --kcmp-button-border-hover: #0258c7;
}
.kenta-starter-templates-header .templates-plan-filter .kcmp-tab-button.active {
  --kcmp-button-text-initial: #ffffff;
  --kcmp-button-text-hover: #ffffff;
  --kcmp-button-background-initial: #0258c7;
  --kcmp-button-background-hover: #0e80e8;
  --kcmp-button-border-initial: #0258c7;
  --kcmp-button-border-hover: #0e80e8;
}
.kenta-starter-templates-header .templates-plan-filter .kcmp-tab-button:first-of-type {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.kenta-starter-templates-header .templates-plan-filter .kcmp-tab-button:last-of-type {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-right-width: 1px;
}

.kenta-starter-templates {
  margin: -24px;
}
.kenta-starter-templates .template-wrap {
  width: 100%;
  float: left;
  padding: 24px;
}
.kenta-starter-templates .template-wrap .template-item {
  position: relative;
  min-height: 400px;
  border: 1px solid #e2e8f0;
  transition: border-color ease 0.2s;
}
.kenta-starter-templates .template-wrap .template-item:hover {
  border-color: #0258c7;
}
.kenta-starter-templates .template-wrap .template-item:hover .template-actions {
  opacity: 1;
}
.kenta-starter-templates .template-wrap .mixed-badge,
.kenta-starter-templates .template-wrap .premium-badge {
  position: absolute;
  display: inline-block;
  color: #ffffff;
  top: 0;
  right: 0;
  font-size: 14px;
  line-height: 1;
  padding: 0.5em 0.75em;
}
.kenta-starter-templates .template-wrap .mixed-badge {
  background: #ffc107;
}
.kenta-starter-templates .template-wrap .premium-badge {
  background: #0caf2a;
}
.kenta-starter-templates .template-wrap .template-meta {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 12px;
}
.kenta-starter-templates .template-wrap .template-meta .template-name {
  font-size: 16px;
  font-weight: bold;
}
.kenta-starter-templates .template-wrap .template-meta .template-actions {
  position: absolute;
  opacity: 0;
  height: 100%;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #f8fafc;
  border-left: 1px solid #e2e8f0;
}
.kenta-starter-templates .template-wrap .template-meta .template-actions .kcmp-button {
  margin-left: 4px;
}
.kenta-starter-templates .template-wrap img {
  max-width: 100%;
}

.kenta-more-starter-sites-info {
  display: block;
  float: none;
  width: 100%;
  margin: 48px 0;
  text-align: center;
}

@media screen and (min-width: 480px) {
  .kenta-starter-templates .template-wrap {
    width: 50%;
  }
}
@media screen and (min-width: 1120px) {
  .kenta-starter-templates .template-wrap {
    width: 33.33%;
  }
}
@media screen and (min-width: 1640px) {
  .kenta-starter-templates .template-wrap {
    width: 25%;
  }
}
.kenta-template-preview {
  background: #f8fafc;
}
.kenta-template-preview .wp-full-overlay-header .kcmp-button {
  float: right;
  margin: 8px 10px 0 0;
}
.kenta-template-preview .wp-full-overlay-sidebar-content .kcmp-theme-screenshot {
  position: relative;
  margin: 15px auto;
  border: 1px solid #e2e8f0;
}
.kenta-template-preview .wp-full-overlay-sidebar-content .kcmp-theme-screenshot img {
  display: block;
  width: 100%;
}
.kenta-template-preview .wp-full-overlay-sidebar-content .kcmp-theme-screenshot .mixed-badge,
.kenta-template-preview .wp-full-overlay-sidebar-content .kcmp-theme-screenshot .premium-badge {
  position: absolute;
  display: inline-block;
  color: #ffffff;
  top: 0;
  right: 0;
  font-size: 14px;
  line-height: 1;
  padding: 0.5em 0.75em;
}
.kenta-template-preview .wp-full-overlay-sidebar-content .kcmp-theme-screenshot .mixed-badge {
  background: #ffc107;
}
.kenta-template-preview .wp-full-overlay-sidebar-content .kcmp-theme-screenshot .premium-badge {
  background: #0caf2a;
}
.kenta-template-preview .wp-full-overlay-main {
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.14);
}

@-webkit-keyframes kenta-infinite-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes kenta-infinite-rotate {
  100% {
    transform: rotate(360deg);
  }
}
.kenta-template-import-screen {
  position: fixed;
  visibility: visible;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f8fafc;
  z-index: 99999;
  padding: 24px;
  overflow-y: auto;
}
.kenta-template-import-screen .important {
  color: #d63638;
}
.kenta-template-import-screen .importing-status {
  padding: 24px;
  text-align: center;
}
.kenta-template-import-screen .importing-status .working-icon svg {
  width: 48px;
  height: 48px;
  fill: #0258c7;
}
.kenta-template-import-screen .importing-status .working-icon.animate svg {
  -webkit-animation: kenta-infinite-rotate 3s linear infinite;
          animation: kenta-infinite-rotate 3s linear infinite;
}
.kenta-template-import-screen .importing-status .importing-progress {
  margin-top: 24px;
}
.kenta-template-import-screen .importing-status .importing-errors, .kenta-template-import-screen .importing-status .importing-errors li {
  margin: 0;
  padding: 0;
}
.kenta-template-import-screen .importing-status .importing-errors li {
  text-align: center;
  padding: 12px 24px;
  margin-bottom: 12px;
}
.kenta-template-import-screen .importing-status .importing-errors li .title, .kenta-template-import-screen .importing-status .importing-errors li .code {
  display: block;
}
.kenta-template-import-screen .importing-status .importing-errors li .title {
  font-size: 16px;
  margin-bottom: 12px;
}
.kenta-template-import-screen .importing-status .importing-errors li .message {
  font-size: 12px;
}
.kenta-template-import-screen .importing-status .importing-errors li .title, .kenta-template-import-screen .importing-status .importing-errors li .message {
  font-weight: bold;
}
.kenta-template-import-screen .importing-status .importing-errors li.error {
  border-radius: 2px;
  border: 1px solid #d63638;
  background: rgba(214, 54, 56, 0.05);
}
.kenta-template-import-screen .importing-status .importing-errors li.error .message {
  color: #d63638;
}
.kenta-template-import-screen .import-screen-container {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}
.kenta-template-import-screen .import-preview {
  width: 240px;
  min-height: 300px;
  position: relative;
  border: 1px solid #e2e8f0;
  margin-right: 24px;
  flex-shrink: 0;
}
.kenta-template-import-screen .import-preview img {
  max-width: 100%;
}
.kenta-template-import-screen .import-preview .template-name {
  box-sizing: border-box;
  padding: 12px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #e2e8f0;
  background-color: #f1f5f9;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
}
.kenta-template-import-screen .import-card {
  flex-grow: 1;
  border: 1px solid #e2e8f0;
  border-radius: 2px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}
.kenta-template-import-screen .import-card-content {
  flex-grow: 1;
  padding: 24px;
}
.kenta-template-import-screen .import-card-content, .kenta-template-import-screen .import-card-content p {
  font-size: 15px;
  line-height: 1.5;
}
.kenta-template-import-screen .import-screen-section {
  margin-bottom: 36px;
}
.kenta-template-import-screen .import-card-header,
.kenta-template-import-screen .import-card-footer {
  flex-shrink: 0;
  padding: 12px 24px;
  background-color: #f1f5f9;
}
.kenta-template-import-screen .import-card-header {
  font-weight: bold;
  font-size: 16px;
  border-bottom: 1px solid #e2e8f0;
}
.kenta-template-import-screen .import-card-footer {
  border-top: 1px solid #e2e8f0;
  text-align: right;
}
.kenta-template-import-screen .import-card-footer .kcmp-button {
  margin-left: 12px;
}

.premium-plugins-notice {
  background-color: #fff490;
  padding: 24px;
}

.kenta-plugin-list {
  list-style: none;
  border-radius: 2px;
  border: 1px solid #e2e8f0;
}
.kenta-plugin-list,
.kenta-plugin-list li {
  margin: 0;
  padding: 0;
}
.kenta-plugin-list li {
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  font-weight: bold;
}
.kenta-plugin-list li a {
  color: #0258c7;
}
.kenta-plugin-list li a:hover {
  color: #0e80e8;
}
.kenta-plugin-list li:last-of-type {
  border-bottom: none;
}
.kenta-plugin-list li:nth-child(odd) {
  background-color: #f1f5f9;
}
.kenta-plugin-list li span {
  padding: 0 6px;
  font-size: 0.8rem;
  font-weight: normal;
}
.kenta-plugin-list li span a {
  padding: 0 6px;
}

.kenta-import-options {
  list-style: none;
}
.kenta-import-options, .kenta-import-options li {
  margin: 0;
  padding: 0;
}
.kenta-import-options li {
  margin-bottom: 12px;
}
.kenta-import-options li label {
  margin-left: 12px;
}