.bookmark-model,
.bookmark-collection,
.bookmark-builder { border: 1px solid #dfe5ed; border-radius: 7px; background: #fff; }
.bookmark-model { overflow: hidden; background: #f7f9fc; }
.bookmark-model__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #efd3e2; background: #fff8fc; }
.bookmark-model__heading span, .bookmark-model__heading strong { display: block; }
.bookmark-model__heading span { color: #a70f62; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.bookmark-model__heading strong { margin-top: 2px; color: #202635; font-size: 14px; }
.bookmark-model__heading small { color: #748197; font-size: 8px; white-space: nowrap; }
.bookmark-model__heading b { color: #c40f70; }
.bookmark-model__route { display: grid; grid-template-columns: minmax(0, 1fr) 35px minmax(0, 1fr); align-items: center; gap: 6px; padding: 11px 12px; background: #edf3f9; }
.bookmark-model__route > span { position: relative; display: grid; min-width: 0; gap: 2px; padding: 7px 7px 7px 26px; border: 1px solid #d1dce8; border-radius: 6px; background: #fff; }
.bookmark-model__route > span:first-child { border-color: #ee9bc7; }
.bookmark-model__route i { position: absolute; left: 8px; top: 50%; width: 10px; height: 10px; border: 2px solid #ec168c; border-radius: 2px; transform: translateY(-50%) rotate(45deg); }
.bookmark-model__route > span:last-child i { border-color: #4f86b7; border-radius: 50%; }
.bookmark-model__route strong { overflow: hidden; color: #213047; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-model__route small { color: #7b8798; font-size: 7px; }
.bookmark-model__route > b { position: relative; height: 2px; background: #7192b5; }
.bookmark-model__route > b::after { content: ""; position: absolute; right: 0; top: -3px; width: 8px; height: 8px; border-top: 2px solid #7192b5; border-right: 2px solid #7192b5; transform: rotate(45deg); }
.bookmark-context { display: grid; gap: 2px; padding: 8px 11px; border-top: 1px solid #dfe5ed; background: #fff; }
.bookmark-context span { color: #7a8798; font-size: 8px; }
.bookmark-context strong { color: #202635; font-size: 10px; }
.bookmark-context small { overflow: hidden; color: #748197; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.bookmark-collection, .bookmark-builder { padding: 11px 12px; }
.bookmark-heading { margin-bottom: 8px; }
.bookmark-heading h3, .bookmark-heading p { margin: 0; }
.bookmark-heading h3 { color: #202635; font-size: 13px; font-weight: 700; }
.bookmark-heading p { margin-top: 2px; color: #7c8798; font-size: 8px; line-height: 1.45; }
.bookmark-list { display: grid; gap: 5px; }
.bookmark-list > p { margin: 0; color: #7c8798; font-size: 9px; }
.bookmark-item { display: grid; align-items: center; width: 100%; min-width: 0; min-height: 42px; padding: 6px 8px; border: 1px solid #e0e6ee; border-radius: 6px; color: #1f2d40; background: #f9fbfd; text-align: left; }
.bookmark-item:hover, .bookmark-item:focus-visible { border-color: #ec168c; background: #fff4fa; outline: 0; }
.bookmark-item--target { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 7px; }
.bookmark-item--target > i { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #6d95bc; border-radius: 50%; color: #326794; font-size: 8px; font-style: normal; font-weight: 700; }
.bookmark-item > span { min-width: 0; }
.bookmark-item strong, .bookmark-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-item strong { font-size: 9px; }
.bookmark-item small { margin-top: 2px; color: #7b8799; font-size: 7px; }
.bookmark-item code { color: #386c9d; font-size: inherit; }
.bookmark-item > b { color: #a70f62; font-size: 7px; }
.bookmark-item--link { grid-template-columns: minmax(0, 1fr) minmax(70px, auto); gap: 7px; }
.bookmark-item--link > b { overflow: hidden; padding-left: 7px; border-left: 1px solid #dce3ec; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.bookmark-builder { border-color: #ef9dc7; background: #fff8fc; }
.bookmark-step { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 8px; margin-top: 7px; padding: 9px; border: 1px solid #e1e6ed; border-radius: 7px; background: #f8f9fb; opacity: .7; }
.bookmark-step.is-active { border-color: #ed83ba; background: #fff; opacity: 1; }
.bookmark-step > span { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #cbd4df; border-radius: 50%; color: #7b8798; background: #fff; font-size: 9px; font-weight: 700; }
.bookmark-step.is-active > span { border-color: #ec168c; color: #fff; background: #ec168c; }
.bookmark-step > div { min-width: 0; }
.bookmark-step > div > strong, .bookmark-step > div > small { display: block; }
.bookmark-step > div > strong { color: #202635; font-size: 10px; }
.bookmark-step > div > small { margin-top: 2px; color: #7c8798; font-size: 8px; line-height: 1.4; }
.bookmark-step .demo-field-label { display: block; margin-top: 8px; font-size: 8px; }
.bookmark-step .demo-text-input { width: 100%; margin-top: 4px; }
.bookmark-step .btn { margin-top: 8px; }
.bookmark-web-action { margin: 10px 0 0 33px; padding: 0; border: 0; color: #a70f62; background: transparent; font: inherit; font-size: 8px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.bookmark-web-action:hover:not(:disabled) { color: #ec168c; }
.bookmark-web-action:disabled { color: #aab2be; }

@media (max-width: 575.98px) {
    .bookmark-model__route { grid-template-columns: 1fr; }
    .bookmark-model__route > b { width: 2px; height: 16px; justify-self: center; }
    .bookmark-model__route > b::after { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); }
}