.sdevs-install-plugin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 20px;
}

.sdevs-install-plugin > .sdevs-notice-icon {
  margin-right: 25px;
}

.sdevs-install-plugin > .sdevs-notice-icon > img {
  max-width: 64px;
}

.sdevs-notice-content {
  flex-grow: 1;
  padding: 20px 0px 20px 0px;
}

.sdevs-notice-content > h2 {
  margin-bottom: 5px;
  margin-top: 0;
}

.sdevs-notice-content > p {
  margin: 0;
}

.sdevs-install-notice-button > a {
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  align-items: center;
}

.sdevs-loading-icon {
  width: 17px;
  height: 17px;
  margin-right: 5px;
  position: relative;
  top: 3px;
  left: 3px;
  -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
  }
}

/* ---------------------------------------------------------------------------
 * "Not fully active" warning row on the plugins list page.
 * ------------------------------------------------------------------------- */

/*
 * The plugin row's own data-slug is derived from the plugin name, so target the
 * stable data-plugin value (the plugin basename) instead.
 */
tr[data-plugin="subscription/subscription.php"] > * {
  background: #fef2f2 !important; /* red-50 */
  box-shadow: none !important;
}

tr[data-plugin="subscription/subscription.php"] .check-column,
.subscrpt-plugin-warning-row .check-column {
  border-left: 4px solid #dc2626 !important; /* red-600 */
}

.subscrpt-plugin-warning-row > * {
  background: #fef2f2 !important; /* red-50 */
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

.subscrpt-plugin-warning-row .check-column span {
  display: block;
  margin-inline: auto;
  margin-top: 4px;
}

.subscrpt-plugin-warning-row .check-column span::before,
.subscrpt-plugin-warning-row .column-primary p {
  color: #dc2626 !important; /* red-600 */
}