html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html, body {
  position: relative;
  height: 100%;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.border-dashed {
  border-style: dashed;
}

.drag-over {
  background-color: rgba(0, 123, 255, 0.1);
}

#file-drop-zone, #template-drop-zone {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: 400px;
  word-wrap: break-word;
}

.mapping-pane {
  position: relative;
}

.source-item, .destination-item {
  position: relative;
}

.connector-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: crosshair;
  transition: transform 0.2s;
  z-index: 10;
  position: relative;
  background-color: #6c757d;
}

.connector-dot:hover {
  transform: scale(1.25);
}

.source-dot {
  margin-left: auto;
}

.dest-dot {
  margin-left: auto;
}

#connector-svg {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
}

#connector-svg path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.dimmed-path {
  opacity: 0.3;
}

.highlighted-path {
  opacity: 1;
}

.pattern-bg-0::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, currentColor 10px, currentColor 11px);
  background-size: 20px 20px;
}

.pattern-bg-1::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, currentColor 10px, currentColor 11px);
  background-size: 20px 20px;
}

.pattern-bg-2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, currentColor 10px, currentColor 11px);
  background-size: 20px 20px;
}

.pattern-bg-3::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 10px, currentColor 10px, currentColor 11px);
  background-size: 20px 20px;
}

.pattern-bg-4::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background-image: radial-gradient(circle, transparent 4px, currentColor 5px);
  background-size: 10px 10px;
}

.source-dot[data-color="0"] {
  background-color: #C71585;
}

.source-dot[data-color="1"] {
  background-color: #BDB76B;
}

.source-dot[data-color="2"] {
  background-color: #008B8B;
}

.source-dot[data-color="3"] {
  background-color: #32CD32;
}

.source-dot[data-color="4"] {
  background-color: #006400;
}

.source-dot[data-color="5"] {
  background-color: #0000FF;
}

.source-dot[data-color="6"] {
  background-color: #8B0000;
}

.source-dot[data-color="7"] {
  background-color: #AFEEEE;
}

.source-dot[data-color="8"] {
  background-color: #4B0082;
}

.source-dot[data-color="9"] {
  background-color: #FF00FF;
}

.source-dot[data-color="10"] {
  background-color: #1E90FF;
}

.source-dot[data-color="11"] {
  background-color: #FFD700;
}

.source-dot[data-color="12"] {
  background-color: #800080;
}

.source-dot[data-color="13"] {
  background-color: #DB7093;
}

.source-dot[data-color="14"] {
  background-color: #DC143C;
}

.source-dot[data-color="15"] {
  background-color: #9400D3;
}

.source-dot[data-color="16"] {
  background-color: #87CEFA;
}

.source-dot[data-color="17"] {
  background-color: #008000;
}

.source-dot[data-color="18"] {
  background-color: #F0E68C;
}

.source-dot[data-color="19"] {
  background-color: #FFB6C1;
}

.source-dot[data-color="20"] {
  background-color: #00FF00;
}

.source-dot[data-color="21"] {
  background-color: #483D8B;
}

.source-dot[data-color="22"] {
  background-color: #FFFF00;
}

.source-dot[data-color="23"] {
  background-color: #00FFFF;
}

.dest-dot[data-color="0"] {
  background-color: #C71585;
}

.dest-dot[data-color="1"] {
  background-color: #BDB76B;
}

.dest-dot[data-color="2"] {
  background-color: #008B8B;
}

.dest-dot[data-color="3"] {
  background-color: #32CD32;
}

.dest-dot[data-color="4"] {
  background-color: #006400;
}

.dest-dot[data-color="5"] {
  background-color: #0000FF;
}

.dest-dot[data-color="6"] {
  background-color: #8B0000;
}

.dest-dot[data-color="7"] {
  background-color: #AFEEEE;
}

.dest-dot[data-color="8"] {
  background-color: #4B0082;
}

.dest-dot[data-color="9"] {
  background-color: #FF00FF;
}

.dest-dot[data-color="10"] {
  background-color: #1E90FF;
}

.dest-dot[data-color="11"] {
  background-color: #FFD700;
}

.dest-dot[data-color="12"] {
  background-color: #800080;
}

.dest-dot[data-color="13"] {
  background-color: #DB7093;
}

.dest-dot[data-color="14"] {
  background-color: #DC143C;
}

.dest-dot[data-color="15"] {
  background-color: #9400D3;
}

.dest-dot[data-color="16"] {
  background-color: #87CEFA;
}

.dest-dot[data-color="17"] {
  background-color: #008000;
}

.dest-dot[data-color="18"] {
  background-color: #F0E68C;
}

.dest-dot[data-color="19"] {
  background-color: #FFB6C1;
}

.dest-dot[data-color="20"] {
  background-color: #00FF00;
}

.dest-dot[data-color="21"] {
  background-color: #483D8B;
}

.dest-dot[data-color="22"] {
  background-color: #FFFF00;
}

.dest-dot[data-color="23"] {
  background-color: #00FFFF;
}

.source-dot.custom-column {
  color: #ca5500 !important;
  background-color: #ca5500 !important;
}

.custom-column {
  color: #ca5500 !important;
}

.source-dot[data-color="0"] {
  background-color: #C71585;
}

.source-dot:hover {
  background-color: #8e8e8e !important;
}

.dest-dot:hover {
  background-color: #8e8e8e !important;
}