i.df.df-alt-snap {
  width: inherit;
  height: inherit;
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyLjcgMTIuNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIxLjU4NzUiIHk9IjEuNTg3NSIgd2lkdGg9IjkuNTI1IiBoZWlnaHQ9IjkuNTI1IiByeT0iMS4yMDI3IiBmaWxsPSJub25lIiBzdHJva2U9IiNiYmIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjA1ODMiLz48ZyBmaWxsPSIjYmJiIj48cmVjdCB4PSI1LjU1NjMiIHk9IjUuNTU2MyIgd2lkdGg9IjEuNTg3NSIgaGVpZ2h0PSIxLjU4NzUiIHJ4PSIuNDI1NDYiIHJ5PSIuNDI1NDYiIHN0eWxlPSJwYWludC1vcmRlcjpmaWxsIG1hcmtlcnMgc3Ryb2tlIi8+PHJlY3QgeD0iNy45Mzc1IiB5PSI1LjU1NjMiIHdpZHRoPSIxLjU4NzUiIGhlaWdodD0iMS41ODc1IiByeD0iLjQyNTQ2IiByeT0iLjQyNTQ2IiBzdHlsZT0icGFpbnQtb3JkZXI6ZmlsbCBtYXJrZXJzIHN0cm9rZSIvPjxyZWN0IHg9IjMuMTc1IiB5PSI1LjU1NjMiIHdpZHRoPSIxLjU4NzUiIGhlaWdodD0iMS41ODc1IiByeD0iLjQyNTQ2IiByeT0iLjQyNTQ2IiBzdHlsZT0icGFpbnQtb3JkZXI6ZmlsbCBtYXJrZXJzIHN0cm9rZSIvPjxyZWN0IHg9IjUuNTU2MyIgeT0iMy4xNzUiIHdpZHRoPSIxLjU4NzUiIGhlaWdodD0iMS41ODc1IiByeD0iLjQyNTQ2IiByeT0iLjQyNTQ2IiBzdHlsZT0icGFpbnQtb3JkZXI6ZmlsbCBtYXJrZXJzIHN0cm9rZSIvPjxyZWN0IHg9IjUuNTU2MyIgeT0iNy45Mzc1IiB3aWR0aD0iMS41ODc1IiBoZWlnaHQ9IjEuNTg3NSIgcng9Ii40MjU0NiIgcnk9Ii40MjU0NiIgc3R5bGU9InBhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiLz48L2c+PC9zdmc+");
}

i.df.df-alt-join {
  width: inherit;
  height: inherit;
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyLjcgMTIuNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyLjExNjciIGN5PSIxMC41ODMiIHI9IjEuMDU4MyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9Ii41MjkxNyIvPjxjaXJjbGUgY3g9IjEwLjU4MyIgY3k9IjIuMTE2NyIgcj0iMS4wNTgzIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjUyOTE3Ii8+PGcgZmlsbD0iI2ZmZiI+PHJlY3QgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1KSIgeD0iLTUuMTU5NCIgeT0iOC40NTExIiB3aWR0aD0iMTAuMzE5IiBoZWlnaHQ9IjEuMDU4MyIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2Utd2lkdGg9Ii4yNTI2OSIvPjxyZWN0IHRyYW5zZm9ybT0icm90YXRlKDkwKSIgeD0iMy43MDQyIiB5PSItNi42MTQ2IiB3aWR0aD0iNS4yOTE3IiBoZWlnaHQ9Ii41MjkxNyIvPjxyZWN0IHg9IjMuNzA0MiIgeT0iNi4wODU0IiB3aWR0aD0iNS4yOTE3IiBoZWlnaHQ9Ii41MjkxNyIvPjwvZz48L3N2Zz4K");
}

i.df.df-alt-split {
  width: inherit;
  height: inherit;
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyLjcgMTIuNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyLjExNjciIGN5PSIxMC41ODMiIHI9IjEuMDU4MyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9Ii41MjkxNyIvPjxjaXJjbGUgY3g9IjEwLjU4MyIgY3k9IjIuMTE2NyIgcj0iMS4wNTgzIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjUyOTE3Ii8+PHJlY3QgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1KSIgeD0iLTUuMTU5NCIgeT0iOC40NTExIiB3aWR0aD0iMTAuMzE5IiBoZWlnaHQ9IjEuMDU4MyIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2Utd2lkdGg9Ii4yNTI2OSIvPjxjaXJjbGUgY3g9IjYuMzUiIGN5PSI2LjM1IiByPSIxLjA1ODMiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9Ii41MjkxNyIvPjwvc3ZnPgo");
}

.df-arch-counter {
  position: fixed;
  bottom: auto;
  padding: 0.5em 1em;
  background: url(/ui/denim075.png) repeat;
  color: white;
  border: solid thin black;
  text-align: center;
  border-right: none;
  border-radius: 5px 0px 0px 5px;
  right: 305px;
  overflow: hidden;
  top: 10px;
}
.df-arch-counter output {
  font-size: x-large;
}
.df-arch-counter label {
  font-size: small;
}

.df-arch-tile-config {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.df-arch-tile-config img,
.df-arch-tile-config video {
  flex: 0 0;
  max-width: 200px;
  max-height: 100px;
  object-fit: contain;
}
.df-arch-tile-config output {
  flex: 1 0;
  margin-left: 1em;
}

.df-arch-scale {
  flex: auto 0 !important;
  width: 36.5px;
}
.df-arch-scale i {
  margin: 0;
}

.df-arch-layervisible {
  animation: color-change 2s infinite;
}

@keyframes color-change {
  0% {
    color: var(--color-text-light-heading);
  }
  50% {
    color: cornflowerblue;
  }
  100% {
    color: var(--color-text-light-heading);
  }
}