.dev-tools-btn {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 60px;
  height: 60px;
  z-index: 9998;
  display: flex;
  justify-content: center;
  background-color: #fff;
  padding: 0 !important;
}
.dev-tools-btn svg {
  width: 40px;
  height: 60px;
  display: block;
}

#dev-tools-window {
  z-index: 9999;
}
#dev-tools-window .btn {
  all: unset;
  cursor: pointer;
}
#dev-tools-window .btns-wrapper {
  gap: 2px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#dev-tools-window .btn-pin {
  border: 0;
  border-radius: 5px;
  opacity: 0.65;
  background-color: transparent;
  cursor: pointer;
}
#dev-tools-window .btn-pin:hover {
  opacity: 1;
}
#dev-tools-window .btn-pin svg {
  position: relative;
  width: 20px;
  height: 20px;
}
#dev-tools-window .btn-pin svg:nth-child(2) {
  display: none;
}
#dev-tools-window .btn-pin.active svg:nth-child(1) {
  display: none;
}
#dev-tools-window .btn-pin.active svg:nth-child(2) {
  display: block;
}
#dev-tools-window .offcanvas-header {
  justify-content: space-between;
}
#dev-tools-window .offcanvas-title {
  font-weight: bold;
}
#dev-tools-window .sep {
  margin-left: -16px;
  margin-right: -16px;
  width: calc(100% + 32px) !important;
}
#dev-tools-window .form-check-input[role=switch] {
  transform: translateX(6px);
}

.dev-tools-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentcolor;
}

.bootstrap-columns-overlay {
  position: fixed;
  display: flex;
  flex: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 8999;
}
.bootstrap-columns-overlay .content {
  background-color: rgba(15, 50, 215, 0.1);
}
@media (max-width: 767.5px) {
  .bootstrap-columns-overlay .col-3:nth-child(n+5) {
    display: none;
  }
}

#entrypoints-wrapper .btn {
  opacity: 0.75;
  padding: 3px 2px 0;
  transition: opacity 100ms ease-in-out;
  --bs-btn-active-border-color: transparent;
}
#entrypoints-wrapper .btn:hover {
  opacity: 1;
}

body[data-dev-code-select-element=true] {
  cursor: url('data:image/svg+xml,<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="m27.95 15a12 12 0 0 0 -10.95-10.95v-4.05h-2v4.05a12 12 0 0 0 -10.95 10.95h-4.05v2h4.05a12 12 0 0 0 10.95 10.95v4.05h2v-4.05a12 12 0 0 0 10.95-10.95h4.05v-2zm-2 2a10 10 0 0 1 -8.95 8.95v-3.95h-2v3.95a10 10 0 0 1 -8.95-8.95h3.95v-2h-3.95a10 10 0 0 1 8.95-8.95v3.95h2v-3.95a10 10 0 0 1 8.95 8.95h-3.95v2z"/><circle cx="16" cy="16" r="2"/></svg>') 16 16, auto;
}
body[data-dev-code-select-element=true] * {
  cursor: inherit !important;
}

#dev-tools-window #source-code-element-selector {
  width: 32px;
  height: 32px;
  z-index: 999;
  border: none;
  cursor: pointer;
}
#dev-tools-window #source-code-nodes {
  background-color: rgb(240, 250, 255);
}
#dev-tools-window #source-code-nodes .node {
  border-top: 2px solid #fff;
}
#dev-tools-window .source-code {
  padding: 0 4px;
}
#dev-tools-window .source-code .icons {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#dev-tools-window .source-code .node {
  position: relative;
  line-height: 1;
}
#dev-tools-window .source-code .node:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 22px;
  pointer-events: none;
}
#dev-tools-window .source-code .node.highlight:after {
  animation: nav-node-blink 400ms ease-in-out infinite;
}
#dev-tools-window .source-code .node .node {
  margin-left: 10px;
}
#dev-tools-window .source-code .node:has(> .icons .include-children[data-value=false]) .children {
  opacity: 0.25;
}
#dev-tools-window .source-code .node:has(> .icons .include-children[data-value=false]) .children .children {
  opacity: 1;
}
#dev-tools-window .source-code .node .node-name {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-top: 3px;
  max-width: calc(100% - 75px);
}
#dev-tools-window .source-code .node .icons > span {
  display: inline-block;
  cursor: pointer;
  transition: transform 100ms ease-in-out;
}
#dev-tools-window .source-code .node .icons > span > svg {
  pointer-events: none;
}
#dev-tools-window .source-code .node .icons > span:hover {
  transform: scale3d(1.05, 1.05, 1.05);
}
#dev-tools-window .source-code .node .icons > span svg {
  display: block;
  position: relative;
  margin: auto;
}
#dev-tools-window .source-code .node .icons .include-children[data-value=true] svg {
  top: 1px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
#dev-tools-window .source-code .node .icons .include-children[data-value=true] svg:nth-of-type(2) {
  display: none;
}
#dev-tools-window .source-code .node .icons .include-children[data-value=false] svg {
  left: 1px;
  top: 2px;
  width: 18px;
  height: 18px;
}
#dev-tools-window .source-code .node .icons .include-children[data-value=false] svg:nth-of-type(1) {
  display: none;
}
#dev-tools-window .source-code .node .icons .highlight-target svg {
  top: 1px;
  height: 18px;
  width: 18px;
}
#dev-tools-window .source-code .node .icons .copy-to-clipboard svg {
  top: 0.5px;
  width: 12px;
  height: 16px;
}
#dev-tools-window .source-code .node .icons .copy-to-clipboard svg:nth-of-type(2) {
  display: none;
}
#dev-tools-window .source-code .node .icons .copy-to-clipboard.done svg:nth-of-type(1) {
  display: none;
}
#dev-tools-window .source-code .node .icons .copy-to-clipboard.done svg:nth-of-type(2) {
  display: block;
  transform: scale(0.6);
}

[data-source-code=true] {
  outline: 1px dashed #421bdf;
}
[data-source-code=true][data-source-code-highlight=true] {
  animation: node-blink 400ms ease-in-out infinite;
}

@keyframes nav-node-blink {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  50% {
    background-color: rgba(200, 115, 255, 0.25);
  }
  100% {
    background-color: rgba(0, 0, 0, 0);
  }
}
@keyframes node-blink {
  0% {
    outline-width: 1px;
  }
  50% {
    outline-width: 3px;
    outline-color: #df1baf;
  }
  100% {
    outline-width: 1px;
  }
}
#dev-tools-window #inline-scripts-nodes,
#dev-tools-window #templates-nodes {
  background-color: rgb(255, 244, 240);
}
#dev-tools-window #inline-scripts-nodes .node,
#dev-tools-window #templates-nodes .node {
  border-top: 2px solid #fff;
}
