.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
.driver-active .driver-overlay,
.driver-active * {
  pointer-events: none
}

.driver-active .driver-active-element,
.driver-active .driver-active-element *,
.driver-popover,
.driver-popover * {
  pointer-events: auto
}

@keyframes animate-fade-in {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.driver-fade .driver-overlay {
  animation: animate-fade-in .2s ease-in-out
}

.driver-fade .driver-popover {
  animation: animate-fade-in .2s
}

.driver-popover {
  /* all: unset;
  box-sizing: border-box;
  color: #2d2d2d;
  margin: 0; */
  /* padding: 15px; */
  border-radius: .5rem;
  /* min-width: 250px;
  max-width: 300px;
  box-shadow: 0 1px 10px #0006; */
  z-index: 1000000000;
  position: fixed;
  top: 0;
  right: 0;
  /* background-color: #fff */
}

.driver-popover * {
  font-family: Helvetica Neue, Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif
}

.driver-popover-title {
  /* font: 19px/normal sans-serif;
  font-weight: 700;
  display: block;
  position: relative;
  line-height: 1.5;
  zoom: 1;
  margin: 0 */
}

.driver-popover-close-btn {
  all: unset;
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 28px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  color: #d2d2d2;
  z-index: 1;
  text-align: center;
  transition: color;
  transition-duration: .2s
}

.driver-popover-close-btn:hover,
.driver-popover-close-btn:focus {
  color: #2d2d2d
}

.driver-popover-title[style*=block]+.driver-popover-description {
  margin-top: 5px
}

.driver-popover-description {
  /* margin-bottom: 0;
  font: 14px/normal sans-serif;
  line-height: 1.5;
  font-weight: 400;
  zoom: 1 */
}

.driver-popover-footer {
  margin-top: 15px;
  text-align: right;
  zoom: 1;
  display: none;
  /* display: flex; */
  align-items: center;
  justify-content: space-between
}

.driver-popover-progress-text {
  font-size: 13px;
  font-weight: 400;
  color: #727272;
  zoom: 1
}

.driver-popover-footer button {
  all: unset;
  display: inline-block;
  box-sizing: border-box;
  padding: 3px 7px;
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff;
  background-color: #fff;
  color: #2d2d2d;
  font: 12px/normal sans-serif;
  cursor: pointer;
  outline: 0;
  zoom: 1;
  line-height: 1.3;
  border: 1px solid #ccc;
  border-radius: 3px
}

.driver-popover-footer .driver-popover-btn-disabled {
  opacity: .5;
  pointer-events: none
}

:not(body):has(>.driver-active-element) {
  overflow: hidden !important
}

.driver-no-interaction,
.driver-no-interaction * {
  pointer-events: none !important
}

.driver-popover-footer button:hover,
.driver-popover-footer button:focus {
  background-color: #f7f7f7
}

.driver-popover-navigation-btns {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end
}

.driver-popover-navigation-btns button+button {
  margin-left: 4px
}

.driver-popover-arrow {
  content: "";
  position: absolute;
  border: 10px solid #F82B2F;
}

.driver-popover-arrow-side-over {
  display: none
}

.driver-popover-arrow-side-left {
  left: 100%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

.driver-popover-arrow-side-right {
  right: 100%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

.driver-popover-arrow-side-top {
  top: 100%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.driver-popover-arrow-side-bottom {
  bottom: 100%;
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
}

.driver-popover-arrow-side-center {
  display: none
}

.driver-popover-arrow-side-left.driver-popover-arrow-align-start,
.driver-popover-arrow-side-right.driver-popover-arrow-align-start {
  top: 15px
}

.driver-popover-arrow-side-top.driver-popover-arrow-align-start,
.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start {
  left: 15px
}

.driver-popover-arrow-align-end.driver-popover-arrow-side-left,
.driver-popover-arrow-align-end.driver-popover-arrow-side-right {
  bottom: 15px
}

.driver-popover-arrow-side-top.driver-popover-arrow-align-end,
.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end {
  right: 15px
}

.driver-popover-arrow-side-left.driver-popover-arrow-align-center,
.driver-popover-arrow-side-right.driver-popover-arrow-align-center {
  top: 50%;
  margin-top: -5px
}

.driver-popover-arrow-side-top.driver-popover-arrow-align-center,
.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center {
  left: 50%;
  margin-left: -5px
}

.driver-popover-arrow-none {
  display: none
}
.glider-contain {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.glider {
  margin: 0 auto;
  position: relative;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  transform: translateZ(0);
}
.glider-track {
  transform: translateZ(0);
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  z-index: 1;
}
.glider.draggable {
  user-select: none;
  cursor: -webkit-grab;
  cursor: grab;
}
.glider.draggable .glider-slide img {
  user-select: none;
  pointer-events: none;
}
.glider.drag {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.glider-slide {
  user-select: none;
  justify-content: center;
  align-content: center;
  width: 100%;
}
.glider-slide img {
  max-width: 100%;
}
.glider::-webkit-scrollbar {
  opacity: 0;
  height: 0;
}
.glider-prev,
.glider-next {
  user-select: none;
  position: absolute;
  outline: none;
  background: none;
  padding: 0;
  z-index: 2;
  font-size: 40px;
  text-decoration: none;
  left: -23px;
  border: 0;
  top: 30%;
  cursor: pointer;
  color: #666;
  opacity: 1;
  line-height: 1;
  transition: opacity 0.5s cubic-bezier(0.17, 0.67, 0.83, 0.67),
    color 0.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.glider-prev:hover,
.glider-next:hover,
.glider-prev:focus,
.glider-next:focus {
  color: #a89cc8;
}
.glider-next {
  right: -23px;
  left: auto;
}
.glider-next.disabled,
.glider-prev.disabled {
  opacity: 0.25;
  color: #666;
  cursor: default;
}
.glider-slide {
  min-width: 150px;
}
.glider-hide {
  opacity: 0;
}
.glider-dots {
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}
.glider-dot {
  border: 0;
  padding: 0;
  user-select: none;
  outline: none;
  display: block;
  cursor: pointer;
  color: #ccc;
  border-radius: 999px;
  background: #ccc;
  width: 12px;
  height: 12px;
  margin: 7px;
}
.glider-dot:hover,
.glider-dot:focus,
.glider-dot.active {
  background: #a89cc8;
}
@media (max-width: 36em) {
  .glider::-webkit-scrollbar {
    opacity: 1;
    -webkit-appearance: none;
    width: 7px;
    height: 3px;
  }
  .glider::-webkit-scrollbar-thumb {
    opacity: 1;
    border-radius: 99px;
    background-color: rgba(156, 156, 156, 0.25);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.25);
  }
}
.fade-out {
  display: inline-block;
  color: #864AF9;
  animation: fadeInAndOut 1.5s forwards;
}

.label-4 {
  color: #864AF9;
}

@keyframes fadeInAndOut {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* .copied-message {
  cursor: default;
  color: #693ac3;
  float: right;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-out {
  animation: fadeOut 2s forwards;
} */

@keyframes colorTransition {
  0% {
    fill: #8f77bd;
    
  }
  100% {
    fill: black;
  }
}

.copy-icon.clicked path {
  animation: colorTransition 1s ease-in-out;
}
.file-menu {
  background: #333;
  display: inline-block;
  position: absolute;
  z-index: 1;
  border: 2px solid #693ac3;
  border-radius: 4px;
}

.file-option {
  display: block;
  white-space: nowrap;
  padding: 12px;
}

.file-option:hover {
  background: #693AC3;
}

.file-option:hover > a {
  color: white !important;
}

.file-option a { 
  display: block;
  width: 100%;
  text-align: left;
}
.dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.dot {
  width: 8px;
  height: 8px;
  margin: 0 3px;
  background-color: #693ac3;
  border-radius: 50%;
  animation: bounce 1s infinite ease-in-out both;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%, 80%, 100% {
      transform: scale(0);
  }
  40% {
      transform: scale(1);
  }
}

.synonym-loader-container {
  width: 10%;
  padding-top: 16px;
  padding-bottom: 16px;
}
:root, body {
  --default-font-family: font-family: url(/assets/ABCDiatypeVariableEdu-2da0d0a1eece5ce1e1d6461486daf781e4fa93193a05e9f98c3c529b679a0f7c.woff2) format("woff2");
  --rpx: 100vw / 1512;
}

.main-container {
  overflow: hidden;
}

.main-container,
.main-container * {
  box-sizing: border-box;
}

input,
select,
textarea,
button {
  outline: 0;
}

.main-container {
  position: relative;
  width: calc(1512 * var(--rpx));
  height: 100%;
  /* margin: 0 auto; */
  background: #cccccc;
  overflow: hidden;
  /* border-radius: calc(8 * var(--rpx)); */
}
.title-bar {
  position: relative;
  width: calc(1512 * var(--rpx));
  height: calc(98 * var(--rpx));
  margin: 0 0 0 0;
}
.wf-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  position: absolute;
  width: calc(1512 * var(--rpx));
  height: calc(98 * var(--rpx));
  top: 0;
  left: 0;
  background: #333333;
  overflow: hidden;
}
.padding {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  position: relative;
  min-width: 0;
  padding: calc(24 * var(--rpx)) calc(104 * var(--rpx)) calc(24 * var(--rpx))
    calc(104 * var(--rpx));
}
.wf-tab-bar {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(24 * var(--rpx));
  position: relative;
  width: calc(178 * var(--rpx));
  background: #333333;
}
.tab {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(8 * var(--rpx));
  position: relative;
  width: calc(52 * var(--rpx));
  padding: calc(12 * var(--rpx)) 0 calc(12 * var(--rpx)) 0;
}
.icon-left {
  flex-shrink: 0;
  position: relative;
  width: calc(16 * var(--rpx));
  height: calc(16 * var(--rpx));
  overflow: hidden;
}
.shape {
  position: relative;
  width: calc(12 * var(--rpx));
  height: calc(14.666666030883789 * var(--rpx));
  margin: calc(0.666748046875 * var(--rpx)) 0 0 calc(2 * var(--rpx));
  background: url(/assets/songwriter_icons/file-322921f0fc844d65a5307da47dd3828f7a6ec3fce600d7bacd314ccc4527f639.png)
  no-repeat center;
  background-size: 100% 100%;
}
.label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  width: calc(28 * var(--rpx));
  height: calc(24 * var(--rpx));
  color: #9b9b9b;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(16 * var(--rpx));
  font-weight: 700;
  line-height: calc(24 * var(--rpx));
  text-align: center;
  white-space: nowrap;
  letter-spacing: calc(-0.16 * var(--rpx));
}
.tab-1 {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(8 * var(--rpx));
  position: relative;
  width: calc(102 * var(--rpx));
  padding: calc(12 * var(--rpx)) 0 calc(12 * var(--rpx)) 0;
}
.icon-left-2 {
  flex-shrink: 0;
  position: relative;
  width: calc(16 * var(--rpx));
  height: calc(16 * var(--rpx));
  overflow: hidden;
}
.shape-3 {
  position: relative;
  width: calc(16.00135612487793 * var(--rpx));
  height: calc(13.331706047058105 * var(--rpx));
  margin: calc(1.3349609375 * var(--rpx)) 0 0 calc(-0.003662109375 * var(--rpx));
  background: url(/assets/songwriter_icons/save-ace07784a95b6cb3fa8099077f5d75950c4fdc12ca7eacd7906d2a70e2329ab7.png)
  no-repeat center;
  background-size: 100% 100%;
}
.label-4 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  width: calc(78 * var(--rpx));
  height: calc(24 * var(--rpx));
  color: #9b9b9b;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(16 * var(--rpx));
  font-weight: 700;
  line-height: calc(24 * var(--rpx));
  text-align: center;
  white-space: nowrap;
  letter-spacing: calc(-0.16 * var(--rpx));
}
.navigation {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(32 * var(--rpx));
  position: relative;
  /* width: calc(610 * var(--rpx)); */
}
.wf-tab-bar-5 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(32 * var(--rpx));
  position: relative;
  width: calc(490 * var(--rpx));
  height: calc(48 * var(--rpx));
  padding: 0;
}
.button-stack {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(16 * var(--rpx));
  position: relative;
  width: calc(88 * var(--rpx));
  cursor: pointer;
  background: transparent;
  border: none;
}
.wf-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(8 * var(--rpx));
  position: relative;
  width: calc(88 * var(--rpx));
  padding: calc(12 * var(--rpx)) calc(20 * var(--rpx)) calc(12 * var(--rpx))
    calc(20 * var(--rpx));
  background: #693ac3;
  overflow: hidden;
  border-radius: calc(6 * var(--rpx));
  box-shadow: 0 calc(10 * var(--rpx)) calc(40 * var(--rpx)) 0
    rgba(0, 0, 0, 0.08);
}
.label-6 {
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  height: calc(24 * var(--rpx));
  color: #ffffff;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(16 * var(--rpx));
  font-weight: 700;
  line-height: calc(24 * var(--rpx));
  text-align: left;
  white-space: nowrap;
  letter-spacing: calc(-0.16 * var(--rpx));
}
.divider {
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  min-width: 0;
  height: calc(2 * var(--rpx));
  background: #696969;
  opacity: 0.3;
}
.song-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  height: calc(48 * var(--rpx));
  top: calc(25 * var(--rpx));
  /* left: calc(739 * var(--rpx)); */
  left: 50%;
  transform: translate(-50%, 0);
  color: #ffffff;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(32 * var(--rpx));
  font-weight: 600;
  line-height: calc(48 * var(--rpx));
  text-align: left;
  white-space: nowrap;
}
.lyricsai {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  height: calc(36 * var(--rpx));
  top: calc(31 * var(--rpx));
  left: calc(769 * var(--rpx));
  color: #ffffff;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(24 * var(--rpx));
  font-weight: 600;
  line-height: calc(36 * var(--rpx));
  text-align: left;
  white-space: nowrap;
}
.flex-row-b {
  position: relative;
  width: calc(1408 * var(--rpx));
  height: 100%;
  margin: 0 0 0 calc(104 * var(--rpx));
}
.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  position: relative;
  width: calc(375 * var(--rpx));
  margin: 0 0 0 0;
  padding: calc(10 * var(--rpx)) 0 calc(8 * var(--rpx)) 0;
}
.toolbar-items-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(2 * var(--rpx));
  position: relative;
  width: calc(375 * var(--rpx));
  height: calc(80 * var(--rpx));
  background: #ffffff;
  overflow: hidden;
}
.toolbar-items {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(8 * var(--rpx));
  position: relative;
  min-width: 0;
  padding: 0 calc(8 * var(--rpx)) 0 calc(8 * var(--rpx));
}
.toolbar-item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  position: relative;
  height: calc(64 * var(--rpx));
  background: #ffffff;
  opacity: 0.5;
}
.toolbar-item.active {
  opacity: 1;
  border-bottom: calc(2* var(--rpx)) solid #693ac3;
}
.icon-container {
  position: relative;
  width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
  margin: calc(11 * var(--rpx)) 0 0 calc(30 * var(--rpx));
  overflow: hidden;
}
.word-tool-icon-unselected {
  background: url(/assets/songwriter_icons/word-5687efe3b2b95ee83594ba7a454512b38129bc27412e73856f50e335a6bb6d9b.png)
}
.song-tool-icon-unselected {
  background: url(/assets/songwriter_icons/song-dd2aab09ff641bf524e565ed7bbc4261f8529d2f42250a878bd4cd67799a9b15.png)
}
.notepad-tool-icon-unselected {
  background: url(/assets/songwriter_icons/note-7d1dfc51575db301df84cc9ff55b21fe432e4449d0ceebf1071ac22d02c37beb.png)
}
.settings-tool-icon-unselected {
  background: url(/assets/songwriter_icons/settings-e29bcee54a7549d2a5190b4fd227c07c5b9c84ec9ea164a0bf2f7e3332efd40d.png)
}
.tool-icon {
  position: relative;
  width: calc(18 * var(--rpx));
  height: calc(18 * var(--rpx));
  margin: calc(3 * var(--rpx)) 0 0 calc(3 * var(--rpx));
  no-repeat center;
  background-size: 100% 100%;
}
.wf-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: calc(16 * var(--rpx));
  position: absolute;
  width: calc(954 * var(--rpx));
  height: calc(306 * var(--rpx));
  top: calc(45 * var(--rpx));
  left: 0;
  padding: calc(32 * var(--rpx)) calc(32 * var(--rpx)) calc(32 * var(--rpx))
    calc(32 * var(--rpx));
  background: #333333;
  overflow: hidden;
  border-radius: calc(8 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(5.400000095367432 * var(--rpx)) 0
    rgba(51, 51, 51, 0.08);
}
.wf-tab-bar-10 {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  position: absolute;
  width: calc(954 * var(--rpx));
  height: calc(94 * var(--rpx));
  top: calc(45 * var(--rpx));
  left: 0;
  padding: 0 calc(92 * var(--rpx)) 0 calc(92 * var(--rpx));
  background: #333333;
}
.tab-11 {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(8 * var(--rpx));
  position: relative;
  width: calc(74 * var(--rpx));
  min-height: 0;
  padding: calc(12 * var(--rpx)) 0 calc(12 * var(--rpx)) 0;
}
.icon-left-12 {
  flex-shrink: 0;
  position: relative;
  width: calc(16 * var(--rpx));
  height: calc(16 * var(--rpx));
  overflow: hidden;
}
.shape-13 {
  position: relative;
  width: calc(13.999935150146484 * var(--rpx));
  height: calc(13.999996185302734 * var(--rpx));
  margin: calc(1 * var(--rpx)) 0 0 calc(1 * var(--rpx));
  background: url(/assets/songwriter_icons/search-a0b3974ffb2019c4fd63467e7bc2f73721738135d6441ee9b924957bc4f143fc.png)
  no-repeat center;
  background-size: cover;
}
.label-14 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  width: calc(50 * var(--rpx));
  height: calc(24 * var(--rpx));
  color: #ffffff;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(14 * var(--rpx));
  font-weight: 700;
  line-height: calc(24 * var(--rpx));
  text-align: center;
  white-space: nowrap;
  letter-spacing: calc(-0.14 * var(--rpx));
}
.wf-tab-bar-15 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: calc(20 * var(--rpx));
  position: absolute;
  width: calc(141 * var(--rpx));
  height: calc(94 * var(--rpx));
  top: calc(45 * var(--rpx));
  left: calc(813 * var(--rpx));
  background: #696969;
  border-top: calc(1 * var(--rpx)) solid #864af9;
  border-left: calc(1 * var(--rpx)) solid #864af9;
  border-radius: 0 0 0 calc(50 * var(--rpx));
}
.tab-16 {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(8 * var(--rpx));
  position: relative;
  width: calc(72 * var(--rpx));
  min-height: 0;
  padding: calc(12 * var(--rpx)) calc(4 * var(--rpx)) calc(12 * var(--rpx))
    calc(4 * var(--rpx));
}
.icon-left-17 {
  flex-shrink: 0;
  position: relative;
  width: calc(16 * var(--rpx));
  height: calc(16 * var(--rpx));
  overflow: hidden;
}
.shape-18 {
  position: relative;
  width: calc(13.33335018157959 * var(--rpx));
  height: calc(14.666741371154785 * var(--rpx));
  margin: calc(0.666748046875 * var(--rpx)) 0 0
  calc(1.333251953125 * var(--rpx));
  background: url(/assets/songwriter_icons/ideas-0ac11cf4d6094eb6ede21cc93f86e70308ee0f78ecb90b46b76ab3a64624b207.png)
  no-repeat center;
  background-size: 100% 100%;
}
.label-19 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  width: calc(40 * var(--rpx));
  height: calc(24 * var(--rpx));
  color: #e5e5e5;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(14 * var(--rpx));
  font-weight: 700;
  line-height: calc(24 * var(--rpx));
  text-align: center;
  white-space: nowrap;
  letter-spacing: calc(-0.14 * var(--rpx));
}
.explore-common-lyrics {
  position: absolute;
  width: calc(277.1339111328125 * var(--rpx));
  height: calc(34 * var(--rpx));
  top: calc(167 * var(--rpx));
  left: calc(92 * var(--rpx));
  font-family: Century Gothic, var(--default-font-family);
  font-size: calc(24 * var(--rpx));
  font-weight: 700;
  line-height: calc(33.599998474121094 * var(--rpx));
  text-align: left;
  text-overflow: initial;
  white-space: nowrap;
}
.explore-common {
  position: relative;
  color: #e5e5e5;
  font-family: Century Gothic, var(--default-font-family);
  font-size: calc(24 * var(--rpx));
  font-weight: 400;
  line-height: calc(33.599998474121094 * var(--rpx));
  text-align: left;
}
.empty {
  position: relative;
  color: #ffffff;
  font-family: Century Gothic, var(--default-font-family);
  font-size: calc(24 * var(--rpx));
  font-weight: 400;
  line-height: calc(33.599998474121094 * var(--rpx));
  text-align: left;
}
.lyrics {
  position: relative;
  color: #f8e559;
  font-family: Century Gothic, var(--default-font-family);
  font-size: calc(24 * var(--rpx));
  font-weight: 700;
  line-height: calc(33.599998474121094 * var(--rpx));
  text-align: left;
}
.empty-1a {
  position: relative;
  color: #f8e559;
  font-family: Century Gothic, var(--default-font-family);
  font-size: calc(24 * var(--rpx));
  font-weight: 400;
  line-height: calc(33.599998474121094 * var(--rpx));
  text-align: left;
}
.about-anarchy {
  position: absolute;
  width: calc(198 * var(--rpx));
  height: calc(34 * var(--rpx));
  top: calc(195 * var(--rpx));
  left: calc(92 * var(--rpx));
  font-family: Century Gothic, var(--default-font-family);
  font-size: calc(24 * var(--rpx));
  font-weight: 400;
  line-height: calc(33.599998474121094 * var(--rpx));
  text-align: left;
  text-overflow: initial;
  white-space: nowrap;
}
.about-anarchy-1b {
  position: relative;
  color: #e5e5e5;
  font-family: Century Gothic, var(--default-font-family);
  font-size: calc(24 * var(--rpx));
  font-weight: 400;
  line-height: calc(33.599998474121094 * var(--rpx));
  text-align: left;
}
.period {
  position: relative;
  color: #f8e559;
  font-family: Century Gothic, var(--default-font-family);
  font-size: calc(24 * var(--rpx));
  font-weight: 400;
  line-height: calc(33.599998474121094 * var(--rpx));
  text-align: left;
}
.wf-input-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: calc(8 * var(--rpx));
  position: absolute;
  width: calc(638 * var(--rpx));
  height: calc(48 * var(--rpx));
  top: calc(276 * var(--rpx));
  left: 50%;
  transform: translate(-95.92%, 0);
  overflow: hidden;
}
.text-input-1c {
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  min-width: 0;
  height: calc(48 * var(--rpx));
  background: #ffffff;
  border: calc(2 * var(--rpx)) solid #cccccc;
  border-radius: calc(6 * var(--rpx));
}
.icon {
  position: absolute;
  width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
  top: calc(10 * var(--rpx));
  right: calc(10 * var(--rpx));
  overflow: hidden;
}
.shape-1d {
  position: relative;
  width: calc(22.0000057220459 * var(--rpx));
  height: calc(22.000032424926758 * var(--rpx));
  margin: calc(1 * var(--rpx)) 0 0 calc(1 * var(--rpx));
  background: url(/assets/songwriter_icons/submit-20940d5a12289b50f50df0b8404e9082293e8d39b74f61d6d317bd491da5efca.png)
  no-repeat center;
  background-size: 100% 100%;
}
.value-1e {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  height: calc(21 * var(--rpx));
  top: calc(12 * var(--rpx));
  right: calc(42 * var(--rpx));
  left: calc(10 * var(--rpx));
  color: #9b9b9b;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(14 * var(--rpx));
  font-weight: 400;
  line-height: calc(21 * var(--rpx));
  text-align: left;
  white-space: nowrap;
  letter-spacing: calc(-0.14 * var(--rpx));
}
.input {
  flex-shrink: 0;
  position: absolute;
  width: calc(638 * var(--rpx));
  height: calc(48 * var(--rpx));
  top: 0;
  left: 0;
  background: transparent;
  border: none;
  outline: none;
}
.icon-maximize {
  position: absolute;
  width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
  top: calc(300 * var(--rpx));
  left: calc(880 * var(--rpx));
  overflow: hidden;
}
.shape-1f {
  position: relative;
  width: calc(20 * var(--rpx));
  height: calc(20 * var(--rpx));
  margin: calc(2 * var(--rpx)) 0 0 calc(2 * var(--rpx));
  margin: calc(2 * var(--rpx)) 0 0 calc(2 * var(--rpx));
  background: url(/assets/songwriter_icons/expand-cf0edd82eb1d5fd06e50a0f97f05c61475366980681068cb6248c20ff438c2ed.png)
  no-repeat center;
  background-size: 100% 100%;
}

.tab-holder {
  max-width: 90%;
}
.section-top-content {
    background: #333;
    padding: calc(20 * var(--rpx)) calc(50 * var(--rpx)) calc(30 * var(--rpx)) calc(90 * var(--rpx));
    width: calc(954 * var(--rpx));
    position: relative;
    top: calc(45 * var(--rpx));
    border-radius: calc(8 * var(--rpx));
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
.section-top-content .expand-button {
  position: absolute;
  right: calc(50 * var(--rpx));
  bottom: calc(30 * var(--rpx));
}
.section-top-content .header-holder {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: calc(35 * var(--rpx));
}
.section-top-content .right-filter-holder .rounded-md {
    background: #696969;
    border-radius: 25px;
}
.section-top-content .right-filter-holder button {
    border-radius: 25px;
    gap: 10px;
    box-shadow: none;
    border-color: transparent;
}
.section-top-content .right-filter-holder button.active,
.section-top-content .right-filter-holder button:focus,
.section-top-content .right-filter-holder button:hover {
    background: #693AC3;
    outline: none;
    box-shadow: none;
}
.section-top-content .banner-title {
    color: #e5e5e5;
    font-family: Century Gothic,var(--default-font-family) ;
    font-size: calc(20 * var(--rpx));
    line-height: 1.4;
    margin-bottom: calc(20 * var(--rpx));
}
.section-top-content .banner-title .yellow {
    color: #f8e559;
    font-weight: 700;
}
.section-top-content .bottom-action-holder {
  display: flex;
  justify-content: space-between;
  margin-top: calc(30 * var(--rpx));
}
.section-top-content .bottom-action-holder .link {
  color: #A886FA;
  font-weight: 700;
  font-size: calc(12 * var(--rpx));
}
.section-top-content .bottom-action-holder .btn-right {
  display: flex;
  color: #A886FA;
  gap: 5px;
  align-items: center;
}
.form-holder .field-holder {
  margin-bottom: calc(12 * var(--rpx));
}
.form-holder .field-holder .help-text {
  color: #E5E5E5;
}
.form-holder .field-holder .help-text .yellow {
  color: #F8E559;
}
.form-holder .field-holder .field-icon {
  right: calc(20 * var(--rpx));
}
.form-holder .field-holder .form-control-field {
  border-radius: calc(6 * var(--rpx));
  border: 1px solid #CCC;
  color: #333;
  font-size: calc(14 * var(--rpx));
}

.field-holder .form-control-field {
  border-radius: calc(6 * var(--rpx));
  border: 1px solid #CCC;
  color: #333;
  font-size: calc(14 * var(--rpx));
}
.field-holder.sidebar-field {
  margin-top: 10px;
  width: 100%
}
.field-holder .field-icon {
  right: calc(20 * var(--rpx));
}

.response-holder {
  background: #fff;
  color: #696969;
  border: 1px solid #864AF9;
  border-radius: calc(8 * var(--rpx));
  position: relative;
}
.response-holder .response-header {
  padding: calc(12 * var(--rpx)) calc(50 * var(--rpx)) calc(12 * var(--rpx)) calc(16 * var(--rpx));
  border-bottom: 1px solid #9B9B9B;
}
.response-holder .response-header .btn-close {
  position: absolute;
  top: calc(15 * var(--rpx));
  right: calc(12 * var(--rpx));
}
.response-holder .response-title h3 {
  margin: 0;
  color: #5831A4;
  font-size: calc(12 * var(--rpx));
  font-weight: 700;
}
.response-holder .response-content {
  padding: calc(6 * var(--rpx)) calc(30 * var(--rpx)) calc(18 * var(--rpx));
  font-size: calc(10 * var(--rpx));
  color: #696969;
}
# filters holder
.filters-holder {
  display: none;
}
.filters-holder .title-search-holder {
  display: flex;
  justify-content: space-between;
}
.ideas-holder .btn-holder,
.filters-holder .btn-holder {
  display: flex;
  justify-content: end;
}
.text-kia-gray {
  color: #696969;
}
.filters-holder .text-kia-gray {
  font-size: calc(10 * var(--rpx));
}
.form-control-field.form-control-textarea {
  padding: calc(20 * var(--rpx)) calc(20 * var(--rpx));
}
.textarea-holder .field-icon {
  top: auto;
  bottom: calc(18 * var(--rpx));
}
.filters-holder .btn-holder {
  gap: calc(10 * var(--rpx));
}
.ideas-holder .b-kia-blue {
  background: #693AC3;
  color: #fff;
  gap: 5px;
}
.filters-holder .b-kia-blue {
  background: #fff;
  color: #333;
  gap: 5px;
}
.ideas-holder .b-kia-blue:hover {
  background: #fff;
  color: #333;
}
.filters-holder .b-kia-blue:hover {
  background: #693AC3;
  color: #fff;
}
# Ideas Holder
.ideas-holder {
  display: none;
}
.ideas-holder .title-s-holder {
  display: flex;
  justify-content: space-between;
}
.ideas-holder .title-search-holder {
  display: flex;
  justify-content: space-between;
}
.title-search-holder .form-holder {
  width: 50%;
}
.title-search-holder .banner-title {
  width: 45%;
}
.ideas-holder .key-holder {
  margin-top: 20px;
}
.ideas-holder .key-holder .key-title h3 {
  color: #E5E5E5;
  margin: 0 0 calc(20 * var(--rpx));
}
.ideas-holder .key-holder .keywords {
  max-height: calc(150 * var(--rpx));
}
.keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-height: calc(150 * var(--rpx));
  overflow: scroll;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
  margin-bottom: calc(20 * var(--rpx));
}
.keywords::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}
.keywords .bg-gray-800 {
  background: #696969;
}
.keywords button:hover,
.keywords button:active,
.keywords button.active {
  background: #693AC3;
}
.ai-search-holder {
  margin-bottom: calc(30 * var(--rpx));
}
.table-holder .icon-holder {
  display: flex;
  gap: 5px;
  margin-top: calc(2 * var(--rpx));
}
.table-holder {
  border-radius: calc(8 * var(--rpx));
  max-height: 260px;
  overflow: scroll;
}

.nav-holder {
  position: relative;
}
.nav-holder .tab-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  gap: 10px;
  justify-content: end;
}
.nav-holder .tab-list li {
  position: relative;
  display: flex;
  gap: 10px;
}

.nav-holder .tab-list li.hidden {
  display: none;
}

.nav-holder .tab-list li:not(:first-child):before {
  content: '/';
  width: 10px;
  height: 30px;
  display: block;
  color: #ccc;
  margin-top: 5px;
}
.nav-holder .tab-list li button {
  color: #ccc;
}
.nav-holder .tab-list li button:hover,
.nav-holder .tab-list li button:focus,
.nav-holder .tab-list li button.active {
  background: #9B9B9B;
  color: #fff;
}

.filters-holder button.active {
  background: #693AC3;
  color: rgb(255 255 255);
}

.min-width-75 {
  min-width: 75px;
}
/* @font-face {
  font-family: 'Poppins';
  src: url(/poppins.woff2) format("woff2");
} */

.tools-sidebar {
  position: absolute;
  width: calc(377 * var(--rpx));
  top: 0;
  bottom: calc(91 * var(--rpx));
  left: calc(1031 * var(--rpx));
  background: #ffffff;
  border-left: calc(1 * var(--rpx)) solid #cccccc;
  overflow: hidden;
  min-height: 100%;
  height: fit-content;
  overflow: visible;
}
.sidebar-nav-containter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(2 * var(--rpx));
  position: relative;
  width: calc(375 * var(--rpx));
  height: calc(80 * var(--rpx));
  background: #ffffff;
  overflow: hidden;
}
.sidebar-nav {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(8 * var(--rpx));
  position: relative;
  min-width: 0;
  padding: 0 calc(8 * var(--rpx)) 0 calc(8 * var(--rpx));
}
.nav-button-span {
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  height: calc(24 * var(--rpx));
  font-family: Poppins, var(--default-font-family);
  font-size: calc(14 * var(--rpx));
  font-weight: 700;
  line-height: calc(24 * var(--rpx));
  text-align: left;
  white-space: nowrap;
  letter-spacing: calc(-0.14 * var(--rpx));
}
.nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  gap: calc(8 * var(--rpx));
  position: relative;
  padding: calc(8 * var(--rpx)) calc(12 * var(--rpx)) calc(8 * var(--rpx))
    calc(12 * var(--rpx));
  cursor: pointer;
  background: #e5e5e5;
  border: none;
  overflow: hidden;
  border-radius: calc(6 * var(--rpx));
  box-shadow: 0 calc(10 * var(--rpx)) calc(40 * var(--rpx)) 0
    rgba(0, 0, 0, 0.08);
}
.nav-button.active {
  background: #693ac3;
  color: #ffffff;
}
.section-title {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  height: calc(18 * var(--rpx));
  color: #4e4e4e;
  font-family: Inter, var(--default-font-family);
  font-size: calc(12 * var(--rpx));
  font-weight: 600;
  line-height: calc(28 * var(--rpx));
  text-align: left;
  white-space: nowrap;
  margin-bottom: 12px;
}
.section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  /* gap: calc(8 * var(--rpx)); */
  position: relative;
  width: 100%;
  /* min-height: calc(95 * var(--rpx)); */
  height: fit-content;
  /* margin: 0 0 0 calc(27 * var(--rpx)); */
  padding: 0 calc(30 * var(--rpx));
}
.choice {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  min-width: 0;
  width: calc(100% + calc(60 * var(--rpx)));
  color: #333333;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(14 * var(--rpx));
  font-weight: 400;
  line-height: calc(21 * var(--rpx));
  text-align: left;
  white-space: nowrap;
  letter-spacing: calc(-0.14 * var(--rpx));
  padding: calc(12 * var(--rpx)) calc(30 * var(--rpx)) calc(12 * var(--rpx)) calc(30 * var(--rpx));
  color: #696969;
  margin: 0 calc(-30 * var(--rpx));
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.choice-container {
  display: grid;
#   grid-template-columns: 80% auto;
  position: relative;
}
.delete-rhyme-scheme-form {
  position: relative;
  display: grid;
  align-items: center;
  z-index: 1;
}
.cross-icon {
  width: calc(12 * var(--rpx));
  height: calc(14 * var(--rpx));
  background: url(/assets/songwriter_icons/cross-cef51f4fb5c9105fd89d0e53910869f9800b8406db4cc37bb287e28547349744.png) no-repeat center;
  background-size: 100% 100%;
}
.choice:hover {
  background: #f0eded;
}
.choice.active {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(10 * var(--rpx));
  position: relative;
  background: #d9d9d9;
}
.sidebar-tab-label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: calc(84 * var(--rpx));
  height: calc(18 * var(--rpx));
  margin: calc(8 * var(--rpx)) 0 0 0;
  color: #333333;
  font-family: Inter, var(--default-font-family);
  font-size: calc(12 * var(--rpx));
  font-weight: 600;
  line-height: calc(18 * var(--rpx));
  text-align: center;
  white-space: nowrap;
}
.title {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(10 * var(--rpx));
  position: relative;
  min-width: 0;
  padding: calc(12 * var(--rpx)) calc(16 * var(--rpx)) calc(12 * var(--rpx))
    calc(16 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid #cccccc;
}
.label-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(8 * var(--rpx));
  position: relative;
  min-width: 0;
  margin-top: 12px;
}
.description {
  align-self: stretch;
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  height: calc(21 * var(--rpx));
  color: #696969;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(14 * var(--rpx));
  font-weight: 400;
  line-height: calc(21 * var(--rpx));
  text-align: left;
  white-space: nowrap;
  letter-spacing: calc(-0.14 * var(--rpx));
}
.text-input {
   /* display: flex; */
   /* flex-direction: column; */
   /* align-items: flex-start; */
  align-self: stretch;
  flex-wrap: nowrap;
  /* flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0; */
  gap: calc(10 * var(--rpx));
  position: relative;
  min-width: 0;
  min-height: 52%;
  margin-top: 3%;
  padding: calc(12 * var(--rpx)) calc(12 * var(--rpx)) calc(12 * var(--rpx)) calc(12 * var(--rpx));
  margin-bottom: 10px;
  cursor: pointer;
  background: #ffffff;
  border: calc(1 * var(--rpx)) solid #864af9;
  border-radius: calc(6 * var(--rpx));
}
.content-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  /* gap: calc(10 * var(--rpx)); */
  position: relative;
  /* padding: calc(8 * var(--rpx)) calc(8 * var(--rpx)) calc(8 * var(--rpx)) calc(8 * var(--rpx)); */
}
.value {
  align-self: stretch;
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  height: calc(24 * var(--rpx));
  color: #4e4e4e;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(16 * var(--rpx));
  font-weight: 400;
  line-height: calc(24 * var(--rpx));
  text-align: center;
  white-space: nowrap;
  letter-spacing: calc(-0.16 * var(--rpx));
}
.results {
  display: grid;
  grid-gap: 6px;
  width: 100%;
  padding: 25px 0 0 0;
}
.list-results {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.list-results .list {
  display: flex;
  justify-content: space-between;
  gap: calc(10 * var(--rpx));
  align-items: center;
}
.list-results .list .icon-holder{
  display: flex;
  align-items: center;
  gap: calc(4 * var(--rpx));
}
.list-results .result {
  text-align: left;
}
.two-col {
  grid-template-columns: auto auto;
}
.result {
  grid-template-columns: 100%;
  height: calc(24 * var(--rpx));
  color: #4e4e4e;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(14 * var(--rpx));
  font-weight: 400;
  line-height: calc(24 * var(--rpx));
  text-align: center;
  white-space: nowrap;
  letter-spacing: calc(-0.16 * var(--rpx));
}
.input-container-small {
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  margin-top: 3%;
}
.text-area-base {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  gap: calc(8 * var(--rpx));
  position: relative;
  min-width: 0;
  min-height: 0;
}
.small-input-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(8 * var(--rpx));
  position: relative;
}
.title-small {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  width: calc(320 * var(--rpx));
  height: calc(21 * var(--rpx));
  color: #696969;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(14 * var(--rpx));
  font-weight: 400;
  line-height: calc(21 * var(--rpx));
  text-align: left;
  white-space: nowrap;
  letter-spacing: calc(-0.14 * var(--rpx));
}
.text-input-small {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 8px;
  position: relative;
  padding: 8px;
  background: #ffffff;
  border: calc(1 * var(--rpx)) solid #864af9;
  border-radius: calc(6 * var(--rpx));
}
.input-content-small-container{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(10 * var(--rpx));
  position: relative;
  padding: calc(8 * var(--rpx)) calc(8 * var(--rpx)) calc(8 * var(--rpx))
    calc(16 * var(--rpx));
}
.content-small {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  /* width: calc(295 * var(--rpx)); */
  width: 78%;
  height: calc(36 * var(--rpx));
  color: #333333;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(12 * var(--rpx));
  font-weight: 400;
  line-height: calc(18 * var(--rpx));
  text-align: left;
}
.sidebar-text-input {
  border: none;
}
.sidebar-text-input:focus {
  /* TODO: Get this text input highlight to not render  */
  outline: none !important;
  -webkit-appearance: none;
  outline-width: 0px;
}
.submit-small-container {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(8 * var(--rpx));
  position: relative;
}
.submit-small-button {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // flex-wrap: nowrap;
  // flex-shrink: 0;
  // gap: calc(8 * var(--rpx));
  // position: relative;
  // width: calc(66 * var(--rpx));
  // padding: calc(8 * var(--rpx)) calc(12 * var(--rpx)) calc(8 * var(--rpx))
  //   calc(12 * var(--rpx));
  // cursor: pointer;
  // background: transparent;
  // border: calc(1.5 * var(--rpx)) solid #693ac3;
  // overflow: hidden;
  // border-radius: calc(6 * var(--rpx));
  background: url(/assets/songwriter_icons/submit-20940d5a12289b50f50df0b8404e9082293e8d39b74f61d6d317bd491da5efca.png) no-repeat center;
  background-size: 100% 100%;
  height: 28px;
  width: 28px;
  margin: auto;
}
.submit-label-small {
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  height: calc(18 * var(--rpx));
  color: #333333;
  font-family: Inter, var(--default-font-family);
  font-size: calc(12 * var(--rpx));
  font-weight: 600;
  line-height: calc(18 * var(--rpx));
  text-align: left;
  white-space: nowrap;
}
#song-section-container {
  /* display: flex; */
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: calc(6 * var(--rpx));
  position: relative;
  /* width: calc(82 * var(--rpx)); */
  padding: calc(4 * var(--rpx)) calc(8 * var(--rpx)) calc(4 * var(--rpx))
    calc(8 * var(--rpx));
  border: none;
  overflow: hidden;
  border-radius: calc(4 * var(--rpx));
  background: #e5e5e5;
}
#song-section-name {
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  height: calc(21 * var(--rpx));
  color: #696969;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(14 * var(--rpx));
  font-weight: 400;
  line-height: calc(21 * var(--rpx));
  text-align: left;
  white-space: nowrap;
  letter-spacing: calc(-0.14 * var(--rpx));
  width: 100%;
  text-align: center;
}

.note-holder {
  padding: calc(18 * var(--rpx));
  border: 1px solid #864AF9;
  margin-top: calc(30 * var(--rpx));
  border-radius: 6px;
  width: 100%;
}
.note-field-holder input {
  padding: 0;
  outline: none;
  box-shadow: none !important;
  color: #333;
}
.bookmark-holder {
  margin-top: calc(30 * var(--rpx));
}
.bookmark-holder .blue-box {
  padding: calc(18 * var(--rpx));
  border: 1px solid #864AF9;
  border-radius: 6px;
  color: #333;
}
.bookmark-holder .blue-box p:not(:last-child) {
  margin-bottom: calc(15 * var(--rpx));
}
.example-holder {
  margin-top: calc(15 * var(--rpx));
}
.example-holder .example-title {
  margin-bottom: calc(30 * var(--rpx));
  font-weight: 400;
  color: #696969
}
.example-holder .example-box-title {
  margin-bottom: calc(10 * var(--rpx));
  font-weight: 700;
  color: #333;
  font-size: calc(18 * var(--rpx));
}
.example-holder .example-box {
  color: #333;
}
.example-holder .example-box p {
  margin-bottom: calc(10 * var(--rpx));
}
.layout-holder {
   margin-top: calc(30 * var(--rpx));
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   justify-content: end;
}
.layout-holder .layout-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 48%;
  align-items: center;
}
.layout-holder .layout-style rect {
  fill: #9B9B9B;
}
.layout-holder .layout-style.active rect {
  fill: #5831A4;
}
.blue-box-holder {
  border: 1px solid #864AF9;
  padding: calc(10 * var(--rpx));
  border-radius: calc(6 * var(--rpx));
  width: 100%;
  margin-top: calc(10 * var(--rpx));
}
.blue-box-holder textarea {
  width: 100%;
}
#rhyme_schemes {
  width: 100%;
}
#rhyme_scheme_form {
  width: 100%;
  margin-top: calc(10 * var(--rpx));
}
.delete-rhyme-scheme-form {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.title-button {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}
.title-button .description {
  margin-top: 10px;
}
.title-button .b-kia-white {
  gap: 10px;
}
.title-icon {
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}
.icon-tooltip {
  position: relative;
}
.icon-tooltip:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
.icon-tooltip .tooltip.opacity-0 {
  background: #9B9B9B;
  right: 0;
  top: 100%;
  width: 200px;
}
.songwriter-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: calc(12 * var(--rpx));
  position: relative;
  width: calc(954 * var(--rpx));
  min-height: calc(608 * var(--rpx));
  top: calc(60 * var(--rpx));
  left: 0;
  padding: 58px;
  padding-bottom: 200px;
  background: #ffffff;
  overflow: scroll;
  border-radius: calc(8 * var(--rpx)) calc(8 * var(--rpx)) 0 0;
  box-shadow: 0 calc(4 * var(--rpx)) calc(5.400000095367432 * var(--rpx)) 0
    rgba(51, 51, 51, 0.08);
}
.refresh-icon {
  flex-shrink: 0; /* Prevent the icon from shrinking */
  position: relative;
  width: calc(16 * var(--rpx));
  height: calc(13.330169677734375 * var(--rpx));
  margin-right: 8px;
  background: url(/assets/songwriter_icons/refresh-3f4adf328f27e0d33d810014039a7805370d10c4aa12cda154fede2a2877bdb6.png) no-repeat center;
  background-size: 100% 100%;
}
.rhyme-letter {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  width: calc(12 * var(--rpx));
  height: calc(24 * var(--rpx));
  color: #9b9b9b;
  font-family: Poppins, var(--default-font-family);
  font-size: calc(16 * var(--rpx));
  font-weight: 700;
  line-height: calc(24 * var(--rpx));
  text-align: center;
  white-space: nowrap;
  letter-spacing: calc(-0.16 * var(--rpx));
  margin-right: 42px;
}
/*
.editable {
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
  white-space: normal; 
  position: relative;
  height: calc(21 * var(--rpx));
  color: #333333;
  font-family: Poppins, var(--default-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: calc(21 * var(--rpx));
  letter-spacing: calc(-0.14 * var(--rpx));
}
*/

/*
.maybes-dropdown {
  flex-shrink: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 16px;
  height: 8px;
  margin-left: 8px;
  background: url(/assets/songwriter_icons/dropdown-b0972e383e0365a3c3dddcbf646f9f894095823f856131e6817c715c0d138dae.png) no-repeat center;
  background-size: 100% 100%;
}
*/
.suggestions-loading-container {
  height: 40px;
  width: 6%;
}

#list-container {  
  position: absolute;
  z-index: 100;
}

.insert-maybe-button {
  margin-left: auto;
  background: url(/assets/songwriter_icons/plus-a4ca194f6f50947354446fb9a8f93bea1d00afc40e9157ddf8adf715c9d7abb8.png) no-repeat center;
  height: 18px;
  width: 18px;
  background-size: 100% 100%;
}

.insert-button {
  background: url(/assets/songwriter_icons/insert-de183341548492b64efa12c5451a1080225fdb3945757b1a7e88bb89b6ab5de7.png) no-repeat center;
  height: 18px;
  width: 18px;
  background-size: 100% 100%;
  margin-left: 12px;
}

.suggestions-list {
  padding-top: 12px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #CCC;
}

:root {
  --tagify-dd-color-primary: rgb(53, 149, 246);
  --tagify-dd-text-color: black;
  --tagify-dd-bg-color: white;
  --tagify-dd-item-pad: 0.3em 0.5em;
  --tagify-dd-max-height: 300px;
}
.tagify {
  --tags-disabled-bg: #f1f1f1;
  --tags-border-color: #ddd;
  --tags-hover-border-color: #ccc;
  --tags-focus-border-color: #3595f6;
  --tag-border-radius: 3px;
  --tag-bg: black;
  --tag-hover: black;
  --tag-text-color: white;
  --tag-text-color--edit: black;
  --tag-pad: 0.3em 0.5em;
  --tag-inset-shadow-size: 1.1em;
  --tag-invalid-color: #d39494;
  --tag-invalid-bg: rgba(211, 148, 148, 0.5);
  --tag--min-width: 1ch;
  --tag--max-width: 100%;
  --tag-hide-transition: 0.2s;
  --tag-remove-bg: black;
  --tag-remove-btn-color: white;
  --tag-remove-btn-bg: none;
  --tag-remove-btn-bg--hover: #c77777;
  --input-color: inherit;
  --placeholder-color: rgb(107, 114, 128);
  --placeholder-color-focus: rgb(107, 114, 128);
  --loader-size: 0.8em;
  --readonly-striped: 1;
  display: inline-flex;
  align-items: flex-start;
  flex-wrap: wrap;
  border: 1px solid var(--tags-border-color);
  padding: 0;
  line-height: 0;
  outline: 0;
  position: relative;
  box-sizing: border-box;
  transition: 0.1s;
}
@keyframes tags--bump {
  30% {
    transform: scale(1.2);
  }
}
@keyframes rotateLoader {
  to {
    transform: rotate(1turn);
  }
}
.tagify:has([contenteditable="true"]) {
  cursor: text;
}
.tagify:hover:not(.tagify--focus):not(.tagify--invalid) {
  --tags-border-color: var(--tags-hover-border-color);
}
.tagify[disabled] {
  background: var(--tags-disabled-bg);
  filter: saturate(0);
  opacity: 0.5;
  pointer-events: none;
}
.tagify[disabled].tagify--select,
.tagify[readonly].tagify--select {
  pointer-events: none;
}
.tagify[disabled]:not(.tagify--mix):not(.tagify--select),
.tagify[readonly]:not(.tagify--mix):not(.tagify--select) {
  cursor: default;
}
.tagify[disabled]:not(.tagify--mix):not(.tagify--select) > .tagify__input,
.tagify[readonly]:not(.tagify--mix):not(.tagify--select) > .tagify__input {
  visibility: hidden;
  width: 0;
  margin: 5px 0;
}
.tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag > div,
.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag > div {
  padding: var(--tag-pad);
}
.tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag > div::before,
.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag > div::before {
  animation: readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused;
}
@keyframes readonlyStyles {
  0% {
    background: linear-gradient(45deg, var(--tag-bg) 25%, transparent 25%, transparent 50%, var(--tag-bg) 50%, var(--tag-bg) 75%, transparent 75%, transparent) 0/5px 5px;
    box-shadow: none;
    filter: brightness(0.95);
  }
}
.tagify[disabled] .tagify__tag__removeBtn,
.tagify[readonly] .tagify__tag__removeBtn {
  display: none;
}
.tagify--loading .tagify__input > br:last-child {
  display: none;
}
.tagify--loading .tagify__input::before {
  content: none;
}
.tagify--loading .tagify__input::after {
  content: "";
  vertical-align: middle;
  opacity: 1;
  width: 0.7em;
  height: 0.7em;
  width: var(--loader-size);
  height: var(--loader-size);
  min-width: 0;
  border: 3px solid;
  border-color: #eee #bbb #888 transparent;
  border-radius: 50%;
  animation: rotateLoader 0.4s infinite linear;
  content: "" !important;
  margin: -2px 0 -2px 0.5em;
}
.tagify--loading .tagify__input:empty::after {
  margin-left: 0;
}
.tagify + input,
.tagify + textarea {
  position: absolute !important;
  left: -9999em !important;
  transform: scale(0) !important;
}
.tagify__tag {
  display: inline-flex;
  align-items: center;
  max-width: var(--tag--max-width);
  margin-inline: 5px 0;
  position: relative;
  /* z-index: 1; */
  outline: 0;
  line-height: normal;
  cursor: default;
  transition: 0.13s ease-out;
}
.tagify__tag > div {
  display: flex;
  flex: 1;
  vertical-align: top;
  box-sizing: border-box;
  max-width: 100%;
  padding: var(--tag-pad);
  padding-left: 0px;
  color: var(--tag-text-color);
  line-height: inherit;
  border-radius: var(--tag-border-radius);
  white-space: nowrap;
  transition: 0.13s ease-out;
}
.tagify__tag > div > * {
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: top;
  min-width: var(--tag--min-width);
  max-width: var(--tag--max-width);
  transition: 0.8s ease, 0.1s color;
}
.tagify__tag > div > [contenteditable] {
  display: block;
  outline: 0;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
  margin: -2px;
  padding: 2px;
  max-width: 350px;
}
.tagify__tag > div > :only-child {
  width: 100%;
}
.tagify__tag > div::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  inset: var(--tag-bg-inset, 0);
  z-index: -1;
  pointer-events: none;
  transition: 120ms ease;
  animation: tags--bump 0.3s ease-out 1;
  box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-bg) inset;
}
.tagify__tag:focus div::before,
.tagify__tag:hover:not([readonly]) div::before {
  --tag-bg-inset: -2.5px;
  /* --tag-bg: var(--tag-hover); */
}
.tagify__tag:hover > div {
  color: #ffffff;
}
.tagify__tag:hover > x {
  color: #ffffff;
}
.tagify__tag--loading {
  pointer-events: none;
}
.tagify__tag--loading .tagify__tag__removeBtn {
  display: none;
}
.tagify__tag--loading::after {
  --loader-size: 0.4em;
  content: "";
  vertical-align: middle;
  opacity: 1;
  width: 0.7em;
  height: 0.7em;
  width: var(--loader-size);
  height: var(--loader-size);
  min-width: 0;
  border: 3px solid;
  border-color: #eee #bbb #888 transparent;
  border-radius: 50%;
  animation: rotateLoader 0.4s infinite linear;
  margin: 0 0.5em 0 -0.1em;
}
.tagify__tag--flash div::before {
  animation: none;
}
.tagify__tag--hide {
  width: 0 !important;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  opacity: 0;
  transform: scale(0);
  transition: var(--tag-hide-transition);
  pointer-events: none;
}
.tagify__tag--hide > div > * {
  white-space: nowrap;
}
.tagify__tag.tagify--noAnim > div::before {
  animation: none;
}
.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div > span {
  opacity: 0.5;
}
.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before {
  --tag-bg: var(--tag-invalid-bg);
  transition: 0.2s;
}
.tagify__tag[readonly] .tagify__tag__removeBtn {
  display: none;
}
.tagify__tag[readonly] > div::before {
  animation: readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused;
}
@keyframes readonlyStyles {
  0% {
    background: linear-gradient(45deg, var(--tag-bg) 25%, transparent 25%, transparent 50%, var(--tag-bg) 50%, var(--tag-bg) 75%, transparent 75%, transparent) 0/5px 5px;
    box-shadow: none;
    filter: brightness(0.95);
  }
}
.tagify__tag--editable > div {
  color: var(--tag-text-color--edit);
}
.tagify__tag--editable > div::before {
  box-shadow: 0 0 0 2px var(--tag-hover) inset !important;
}
.tagify__tag--editable > .tagify__tag__removeBtn {
  pointer-events: none;
}
.tagify__tag--editable > .tagify__tag__removeBtn::after {
  opacity: 0;
  transform: translateX(100%) translateX(5px);
}
.tagify__tag--editable.tagify--invalid > div::before {
  box-shadow: 0 0 0 2px var(--tag-invalid-color) inset !important;
}
.tagify__tag__removeBtn {
  order: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  cursor: pointer;
  font: 14px/1 Arial;
  background: var(--tag-remove-btn-bg);
  color: #464646;
  /* width: 14px; */
  height: 14px;
  overflow: hidden;
  transition: 0.2s ease-out;
}
.tagify__tag__removeBtn::after {
  content: url(/assets/tag_x-732d2d68cc022d12cadf95a169d688cca20335fe43c5bf7a2cd2056d447fdda7.svg);
  width: 14px;
  height: 16px;
  display: inline-block;
  transition: 0.3s, color 0s;
}
.tagify__tag:hover .tagify__tag__removeBtn::after {
  content: url(/assets/tag_x_white-b5544dbaea0a34700554ade9a421797904a073e67ae983b6ef438ed198c34260.svg);
}
.tagify__tag__removeBtn:hover {
  color: #fff;
  /* background: var(--tag-remove-btn-bg--hover); */
}
.tagify__tag__removeBtn:hover + div > span {
  opacity: 0.5;
}
.tagify__tag__removeBtn:hover + div::before {
  box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg, rgba(211, 148, 148, 0.3)) inset !important;
  transition: box-shadow 0.2s;
}
.tagify:not(.tagify--mix) .tagify__input br {
  display: none;
}
.tagify:not(.tagify--mix) .tagify__input * {
  display: inline;
  white-space: nowrap;
}
.tagify__input {
  flex-grow: 1;
  display: inline-block;
  min-width: 110px;
  margin: 5px;
  padding: var(--tag-pad);
  line-height: 12px;
  position: relative;
  white-space: pre-wrap;
  color: var(--input-color);
  box-sizing: inherit;
  overflow: hidden;
}
.tagify__input:focus {
  outline: 0;
}
.tagify__input:focus::before {
  transition: 0.2s ease-out;
  opacity: 0;
  transform: translatex(6px);
}
@supports (-ms-ime-align: auto) {
  .tagify__input:focus::before {
    display: none;
  }
}
.tagify__input:focus:empty::before {
  transition: 0.2s ease-out;
  opacity: 1;
  transform: none;
  color: rgba(0, 0, 0, 0.25);
  color: var(--placeholder-color-focus);
}
@-moz-document url-prefix() {
  .tagify__input:focus:empty::after {
    display: none;
  }
}
.tagify__input::before {
  content: attr(data-placeholder);
  width: 100%;
  height: 100%;
  margin: auto 0;
  z-index: 1;
  color: var(--placeholder-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  position: absolute;
}
.tagify__input::after {
  content: attr(data-suggest);
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  min-width: calc(100% - 1.5em);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
  color: var(--tag-text-color);
  opacity: 0.3;
  pointer-events: none;
  max-width: 100px;
}
.tagify__input .tagify__tag {
  margin: 0 1px;
}
.tagify--mix {
  display: block;
}
.tagify--mix .tagify__input {
  padding: 5px;
  margin: 0;
  width: 100%;
  height: 100%;
  line-height: 1.5;
  display: block;
}
.tagify--mix .tagify__input::before {
  height: auto;
  display: none;
  line-height: inherit;
}
.tagify--mix .tagify__input::after {
  content: none;
}
.tagify--select {
  cursor: default;
}
.tagify--select::after {
  content: ">";
  opacity: 0.5;
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  font: 16px monospace;
  line-height: 8px;
  height: 8px;
  pointer-events: none;
  transform: translate(-150%, -50%) scaleX(1.2) rotate(90deg);
  transition: 0.2s ease-in-out;
}
.tagify--select[aria-expanded="true"]::after {
  transform: translate(-150%, -50%) rotate(270deg) scaleY(1.2);
}
.tagify--select .tagify__tag {
  flex: 1;
  max-width: none;
  margin-inline-end: 2em;
  margin-block: 0;
  padding-block: 5px;
  cursor: text;
}
.tagify--select .tagify__tag div::before {
  display: none;
}
.tagify--select .tagify__tag + .tagify__input {
  display: none;
}
.tagify--empty .tagify__input::before {
  transition: 0.2s ease-out;
  opacity: 1;
  transform: none;
  display: inline-block;
  width: auto;
}
.tagify--mix .tagify--empty .tagify__input::before {
  display: inline-block;
}
.tagify--focus {
  --tags-border-color: var(--tags-focus-border-color);
  transition: 0s;
}
.tagify--invalid {
  --tags-border-color: #d39494;
}
.tagify__dropdown {
  position: absolute;
  z-index: 9999;
  transform: translateY(-1px);
  border-top: 1px solid var(--tagify-dd-color-primary);
  overflow: hidden;
}
.tagify__dropdown[dir="rtl"] {
  transform: translate(-100%, -1px);
}
.tagify__dropdown[placement="top"] {
  margin-top: 0;
  transform: translateY(-100%);
}
.tagify__dropdown[placement="top"] .tagify__dropdown__wrapper {
  border-top-width: 1.1px;
  border-bottom-width: 0;
}
.tagify__dropdown[position="text"] {
  box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), 0.1);
  font-size: 0.9em;
}
.tagify__dropdown[position="text"] .tagify__dropdown__wrapper {
  border-width: 1px;
}
.tagify__dropdown__wrapper {
  max-height: var(--tagify-dd-max-height);
  overflow: hidden;
  overflow-x: hidden;
  color: var(--tagify-dd-text-color);
  background: var(--tagify-dd-bg-color);
  border: 1px solid;
  border-color: var(--tagify-dd-color-primary);
  border-bottom-width: 1.5px;
  border-top-width: 0;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  transition: 0.3s cubic-bezier(0.5, 0, 0.3, 1), transform 0.15s;
  animation: dd-wrapper-show 0s 0.3s forwards;
}
@keyframes dd-wrapper-show {
  to {
    overflow-y: auto;
  }
}
.tagify__dropdown__header:empty {
  display: none;
}
.tagify__dropdown__footer {
  display: inline-block;
  margin-top: 0.5em;
  padding: var(--tagify-dd-item-pad);
  font-size: 0.7em;
  font-style: italic;
  opacity: 0.5;
}
.tagify__dropdown__footer:empty {
  display: none;
}
.tagify__dropdown--initial .tagify__dropdown__wrapper {
  max-height: 20px;
  transform: translateY(-1em);
}
.tagify__dropdown--initial[placement="top"] .tagify__dropdown__wrapper {
  transform: translateY(2em);
}
.tagify__dropdown__item {
  box-sizing: border-box;
  padding: var(--tagify-dd-item-pad);
  margin: 1px;
  white-space: pre-wrap;
  cursor: pointer;
  border-radius: 2px;
  position: relative;
  outline: 0;
  max-height: 60px;
  max-width: 100%;
  line-height: normal;
  position: relative;
}
.tagify__dropdown__item--active {
  background: var(--tagify-dd-color-primary);
  color: #fff;
}
.tagify__dropdown__item:active {
  filter: brightness(105%);
}
.tagify__dropdown__item--hidden {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0 1px;
  pointer-events: none;
  overflow: hidden;
  max-height: 0;
  transition: var(--tagify-dd-item--hidden-duration, 0.3s) !important;
}
.tagify__dropdown__item--hidden > * {
  transform: translateY(-100%);
  opacity: 0;
  transition: inherit;
}
.tagify__dropdown__item--selected::before {
  content: "✓";
  font-family: monospace;
  position: absolute;
  inset-inline-start: 6px;
  text-indent: 0;
  line-height: 1.1;
}
.tagify__dropdown:has(.tagify__dropdown__item--selected) .tagify__dropdown__item {
  text-indent: 1em;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


#password_error_message, #password_error_message, #confirm_error_message {
  display: none;
}

@font-face {
  font-family: 'ABCDiatypeVariableEdu';
  src: url(/assets/ABCDiatypeVariableEdu-2da0d0a1eece5ce1e1d6461486daf781e4fa93193a05e9f98c3c529b679a0f7c.woff2) format('woff2');
}

body {
  font-family: 'ABCDiatypeVariableEdu', sans-serif;
}