.ayyash-options {
  /**
   * Tabs
   */
  /**
   * Panel
   */
  /**
   * Plugin Card
   */
}
.ayyash-options-wrap {
  --ayyash-color-primary: #064AF3;
  --ayyash-color-secondary: #08A3EE;
  --ayyash-color-heading: #101318;
  --ayyash-color-global: #494C51;
  font-family: "inter", sans-serif;
  font-size: 14px;
  color: var(--ayyash-color-global);
  display: grid;
  grid-auto-columns: 7fr 3fr;
  grid-gap: 30px;
  margin-right: 20px;
}
.ayyash-options-wrap .ayyash-options-button {
  background-color: var(--ayyash-color-primary);
  color: #ffffff;
  padding: 3px 8px;
  line-height: 1;
  border: 0;
  box-shadow: 0 0 4px rgba(0, 128, 103, 0.2);
}
.ayyash-options-wrap .ayyash-options-button:hover, .ayyash-options-wrap .ayyash-options-button:focus {
  box-shadow: none;
  outline: 0;
  background-color: var(--ayyash-color-primary);
}
.ayyash-options-header {
  background-color: #ffffff;
  padding: 14px 30px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.06);
  margin: 20px 20px 20px 2px;
}
.ayyash-options-header__content {
  display: flex;
  align-items: center;
}
.ayyash-options-sidebar {
  margin-top: 20px;
}
.ayyash-options-sidebar img {
  width: 100%;
}
.ayyash-options-tabs__content-item {
  display: none;
}
.ayyash-options-tabs__content-item.tab--is-active {
  position: relative;
  z-index: 1;
  display: block;
}
.ayyash-options-tabs__nav {
  padding: 16px 0;
}
.ayyash-options-tabs__nav-item {
  border-radius: 5px 5px 0 0;
  padding: 16px 10px;
  color: var(--ayyash-color-heading);
  text-decoration: none;
  background-color: #F9F9FD;
  margin-right: 2px;
  position: relative;
}
.ayyash-options-tabs__nav-item:hover, .ayyash-options-tabs__nav-item:focus {
  outline: 0;
  box-shadow: none;
  color: var(--ayyash-color-heading);
}
.ayyash-options-tabs__nav-item.tab--is-active {
  background-color: #ffffff;
}
.ayyash-options-panel__body {
  background-color: #ffffff;
  padding: 30px;
}
.ayyash-options-panel__recommended-plugins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-gap: 30px;
}
.ayyash-options-panel__theme-documentation {
  position: relative;
  display: block;
  width: 100%;
}
.ayyash-options-panel__theme-documentation ul {
  list-style: decimal;
  margin-inline: 10px;
  padding-inline: 10px;
  margin-block: 10px;
}
.ayyash-options-panel__theme-documentation ul li a {
  color: var(--ayyash-color-global);
  text-decoration: none;
}
.ayyash-options-panel__theme-documentation ul li a:hover {
  color: var(--ayyash-color-primary);
  text-decoration: underline;
}
.ayyash-options-plugin-card__wrap {
  width: 100%;
  background: #ededf9;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.06);
  border: 0;
  border-radius: 5px;
}
.ayyash-options-plugin-card__wrap:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
.ayyash-options-plugin-card__wrap.plugin-card {
  margin: 0;
  padding: 0;
}
.ayyash-options-plugin-card__wrap.plugin-activated {
  position: relative;
  box-shadow: 0 0 4px rgba(0, 128, 103, 0.06);
}
.ayyash-options-plugin-card__wrap.plugin-activated:hover {
  box-shadow: 0 0 8px rgba(0, 128, 103, 0.1);
}
.ayyash-options-plugin-card__wrap.plugin-activated:before {
  content: "";
  background: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17%208.26858V9.00458C16.999%2010.7297%2016.4404%2012.4083%2015.4075%2013.79C14.3745%2015.1718%2012.9226%2016.1826%2011.2683%2016.6717C9.61394%2017.1608%207.84581%2017.1021%206.22757%2016.5042C4.60934%2015.9064%203.22772%2014.8015%202.28877%2013.3542C1.34981%2011.907%200.903833%2010.195%201.01734%208.47363C1.13085%206.75223%201.79777%205.11364%202.91862%203.80224C4.03948%202.49083%205.55423%201.57688%207.23695%201.1967C8.91967%200.816507%2010.6802%200.990449%2012.256%201.69258%22%20stroke%3D%22%23008067%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M16.9991%202.60449L8.99912%2010.6125L6.59912%208.21249%22%20stroke%3D%22%23008067%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  position: absolute;
  top: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  background-size: 20px;
}
.ayyash-options-plugin-card__wrap.plugin-activated .ayyash-options-plugin-card__body {
  background: #F2F9F7;
}
.ayyash-options-plugin-card__wrap.plugin-activated .ayyash-options-plugin-card__footer {
  background-color: #E3F2EE;
  border-top: 1px solid #CEE7E1;
}
.ayyash-options-plugin-card__wrap.plugin-activated .ayyash-options-plugin-card__footer-link a {
  background: #ffffff;
  color: var(--ayyash-color-global);
  box-shadow: 0 0 4px rgba(0, 128, 103, 0.2);
}
.ayyash-options-plugin-card__body {
  background-color: #FCFCFE;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ayyash-options-plugin-card__body img {
  width: 100%;
  max-width: 100px;
  height: auto;
}
.ayyash-options-plugin-card__footer {
  display: flex;
  align-items: center;
  background: #F9F9FD;
  border-top: 1px solid #EEF1F7;
  padding: 14px 20px;
  gap: 20px;
}
.ayyash-options-plugin-card__footer .updating-message:before,
.ayyash-options-plugin-card__footer .updated-message:before {
  display: none;
}
.ayyash-options-plugin-card__footer-title {
  flex: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ayyash-options-plugin-card__footer-link {
  flex: 0 0 auto;
}

@media (min-width: 499.98px) {
  .ayyash-options-tabs__nav-item {
    padding: 16px 40px 16px 68px;
    margin-right: 6px;
  }
  .ayyash-options-tabs__nav-item:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-size: 20px;
    left: 40px;
  }
  .ayyash-options-tabs__nav-item--recommended-plugins:before {
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9.99984%201.6665L1.6665%205.83317L9.99984%209.99984L18.3332%205.83317L9.99984%201.6665Z%22%20stroke%3D%22%23101318%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M1.6665%2014.1665L9.99984%2018.3332L18.3332%2014.1665%22%20stroke%3D%22%23101318%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M1.6665%2010L9.99984%2014.1667L18.3332%2010%22%20stroke%3D%22%23101318%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  }
  .ayyash-options-tabs__nav-item--theme-documentation:before {
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2221%22%20viewBox%3D%220%200%2020%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M11.6668%202.17432H5.00016C4.55814%202.17432%204.13421%202.34991%203.82165%202.66247C3.50909%202.97503%203.3335%203.39896%203.3335%203.84098V17.1743C3.3335%2017.6163%203.50909%2018.0403%203.82165%2018.3528C4.13421%2018.6654%204.55814%2018.841%205.00016%2018.841H15.0002C15.4422%2018.841%2015.8661%2018.6654%2016.1787%2018.3528C16.4912%2018.0403%2016.6668%2017.6163%2016.6668%2017.1743V7.17432L11.6668%202.17432Z%22%20stroke%3D%22%23101318%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M11.6665%202.17432V7.17432H16.6665%22%20stroke%3D%22%23101318%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M13.3332%2011.3413H6.6665%22%20stroke%3D%22%23101318%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M13.3332%2014.6743H6.6665%22%20stroke%3D%22%23101318%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M8.33317%208.00781H7.49984H6.6665%22%20stroke%3D%22%23101318%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  }
}
@media (min-width: 782.98px) {
  .ayyash-options-wrap {
    grid-auto-flow: column;
  }
  .ayyash-options-sidebar {
    margin-top: 48px;
  }
}