/* Override the editor button's saved inline styles for existing and new posts. */
.article-body .utotimes-at-a-glance {
  box-sizing: border-box;
  direction: rtl;
  text-align: right;
  margin: 26px 0 34px !important;
  padding: 24px 28px !important;
  border: 1px solid #003A7E1F;
  border-radius: 2px !important;
  background: #003A7E05 !important;
  color: #222 !important;
}

.article-body .utotimes-at-a-glance > div:first-child {
  display: block !important;
  margin: 0 0 17px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #003a7e !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.6;
}

.article-body.ut-editor-content .utotimes-at-a-glance > ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.article-body.ut-editor-content .utotimes-at-a-glance > ul > li {
  position: relative;
  margin: 0 !important;
  padding: 0 34px 0 0;
  list-style: none;
  color: #222 !important;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 2.1 !important;
}

.article-body.ut-editor-content .utotimes-at-a-glance > ul > li + li {
  margin-top: 11px !important;
}

.article-body .utotimes-at-a-glance > ul > li::before {
  content: '';
  position: absolute;
  top: calc((2.1em - 24px) / 2);
  right: 0;
  width: 24px;
  height: 24px;
  background: url('../images/at-a-glance-list.svg') center / contain no-repeat;
}

@media (max-width: 767px) {
  .article-body .utotimes-at-a-glance {
    padding: 18px 16px !important;
  }

  .article-body .utotimes-at-a-glance > div:first-child {
    font-size: 16px !important;
    margin-bottom: 14px !important;
  }

  .article-body.ut-editor-content .utotimes-at-a-glance > ul > li {
    padding-right: 28px;
    font-size: 13px !important;
  }

  .article-body .utotimes-at-a-glance > ul > li::before {
    top: calc((2.1em - 20px) / 2);
    width: 20px;
    height: 20px;
  }
}