/* main style */
div.feature {
  padding: 0px;
  padding-bottom: 0.25em;
  margin-bottom: 20px;
  background-color: #eee;
  #border: 1px solid;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

div.feature p {
  margin: 0.5em 1em 0.5em 1em;
  padding: 0;
}

div.feature p a {
  color: inherit !important;
}

div.feature div.highlight {
  margin-left: 1em;
  margin-right: 1em;
}

div.feature table.highlighttable {
  padding-left: 1em;
  padding-right: 1em;
}

div.feature table.highlighttable div.highlight {
  margin-left: 0;
  margin-right: 0;
}

div.feature ul,
div.feature ol {
  margin: 0.1em 0.5em 0.5em 3em;
  padding: 0;
}

/* title style */
div.feature p.feature-title {
  color: #fff;
  background-color: #D3351F;
  margin: 0;
  padding: 0.2em 0 0.2em 0.5em;
  font-weight: bold;
  display: block;
}

div.feature p.feature-title:before {
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
  background-repeat: no-repeat;
  height: 24px; width: 24px;
  background-size: 24px;
  vertical-align: -40%;
  padding-right: 1em;
}

/* icons data */
div.feature .feature-default-icon:before {
  background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M9 12l2 2l4 -4" /></svg>');
}

div.feature .bolt:before {
  background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"/></svg>');
}

div.feature .loadbalancer:before {
    background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 13a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M11 20a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 16v3" /><path d="M12 10v-7" /><path d="M9 6l3 -3l3 3" /><path d="M12 10v-7" /><path d="M9 6l3 -3l3 3" /><path d="M14.894 12.227l6.11 -2.224" /><path d="M17.159 8.21l3.845 1.793l-1.793 3.845" /><path d="M9.101 12.214l-6.075 -2.211" /><path d="M6.871 8.21l-3.845 1.793l1.793 3.845" /></svg>');
}

div.feature .gear:before {
    background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg>');
}

div.feature .resize:before {
    background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11v8a1 1 0 0 0 1 1h8m-9 -14v-1a1 1 0 0 1 1 -1h1m5 0h2m5 0h1a1 1 0 0 1 1 1v1m0 5v2m0 5v1a1 1 0 0 1 -1 1h-1" /><path d="M4 12h7a1 1 0 0 1 1 1v7" /></svg>');
}

div.feature .topology-star:before {
    background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 18a2 2 0 1 0 -4 0a2 2 0 0 0 4 0" /><path d="M20 6a2 2 0 1 0 -4 0a2 2 0 0 0 4 0" /><path d="M8 6a2 2 0 1 0 -4 0a2 2 0 0 0 4 0" /><path d="M20 18a2 2 0 1 0 -4 0a2 2 0 0 0 4 0" /><path d="M14 12a2 2 0 1 0 -4 0a2 2 0 0 0 4 0" /><path d="M7.5 7.5l3 3" /><path d="M7.5 16.5l3 -3" /><path d="M13.5 13.5l3 3" /><path d="M16.5 7.5l-3 3" /></svg>');
}