#toplevel_page_vidd-hfvp .external_link .dashicons {
  right: 0.25em;
  top: 1em;
  height: 1em;
}

#embed-example-list {
  background: #fff;
  border: 1px solid #ccd0d4;
  border-left: 4px solid #a527f5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  padding: 1px 12px;
}

#vidd-hfvp-no-account {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #ccd0d4;
  border-left: 4px solid #a527f5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
#vidd-hfvp-no-account .content {
  padding: 1px 12px;
}
#vidd-hfvp-no-account .aside {
  width: 4em;
  background: #f9f7f9;
}
#vidd-hfvp-no-account .aside img {
  width: 3em;
  margin: 0.5em;
  border-radius: 100%;
  display: block;
  height: auto;
}

.vidd-hfvp-embed-item {
  display: flex;
  flex-wrap: wrap;
  background: #e5e5e5;
  margin: 0.5em 0;
  padding: 0.5em;
  max-width: 60em;
}
.vidd-hfvp-embed-item-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.vidd-hfvp-embed-item-row > div {
  padding: 0.25em;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.vidd-hfvp-embed-item label {
  padding: 0.25em;
  display: block;
  width: 100%;
  font-weight: bold;
  font-size: smaller;
}
.vidd-hfvp-embed-item input,
.vidd-hfvp-embed-item select {
  width: 100%;
}
#add-embed {
  margin: 0.5em;
}

#vidd-hfvp-guide {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #ccd0d4;
  border-left: 4px solid #9b9b9b;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  padding: 1px 12px;
}

.w-50 {
  width: 50%;
}
.w-100 {
  width: 100%;
}

@media (min-width: 768px) {
  .md\:w-100 {
    width: 100%;
  }
  .md\:w-75 {
    width: 75%;
  }
  .md\:w-66 {
    width: 66.666%;
  }
  .md\:w-50 {
    width: 50%;
  }
  .md\:w-33 {
    width: 33.333%;
  }
  .md\:w-25 {
    width: 25%;
  }
  .md\:w-20 {
    width: 20%;
  }
  .md\:w-auto {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .lg\:w-100 {
    width: 100%;
  }
  .lg\:w-75 {
    width: 75%;
  }
  .lg\:w-66 {
    width: 66.666%;
  }
  .lg\:w-50 {
    width: 50%;
  }
  .lg\:w-33 {
    width: 33.333%;
  }
  .lg\:w-25 {
    width: 25%;
  }
  .lg\:w-20 {
    width: 20%;
  }
  .lg\:w-auto {
    width: auto;
  }
}

@media (min-width: 1280px) {
  .xl\:w-100 {
    width: 100%;
  }
  .xl\:w-75 {
    width: 75%;
  }
  .xl\:w-66 {
    width: 66.666%;
  }
  .xl\:w-50 {
    width: 50%;
  }
  .xl\:w-33 {
    width: 33.333%;
  }
  .xl\:w-25 {
    width: 25%;
  }
  .xl\:w-20 {
    width: 20%;
  }
  .xl\:w-auto {
    width: auto;
  }
}