.safe-area-indicator-container {
  position: absolute;
  width: 40px;
  /* height: var(--current-subtitle-font-size); */
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
}

.safe-area-indicator-container > .indicator {
  width: 40px;
  min-height: var(--current-subtitle-font-size);
  font-size: 15px;
  padding: 0;
  margin: 0 2px 5px 0;
  color: yellow;
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
  /* -webkit-text-stroke: 2px #000; */
  text-shadow: var(--text-shadow);

  display: grid;
  align-items: end;
  justify-items: end;
  display: none;
}

.safe-area-indicator-container > .indicator:has(span) {
  display: block;
}

.current-subtitle-container[style*="justify-content: flex-start"] .safe-area-indicator-container {
  justify-content: flex-start;
  transform: translate(0, 1em);
}
.current-subtitle-container[style*="justify-content: flex-end"] .safe-area-indicator-container {
  justify-content: flex-end;
}

.current-subtitle-container {
  position: relative;
  z-index: 2;
}

.current-subtitle-container,
.tab-subtitle-container {
  display: flex;
  justify-content: center;
  font-size: var(--current-subtitle-font-size);
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  outline: none;
  background-color: rgba(0, 0, 0, 0) !important;
  color: white;
}
.tab-subtitle-container {
  color: rgba(255, 255, 255, 0.74);
  position: relative;
  z-index: 1;
}
.current-subtitle,
.tab-subtitle {
  display: block;
  background-color: rgba(0, 0, 0, 0);
  text-align: center;
  outline: none;
  white-space: nowrap;
  font-size: var(--current-subtitle-font-size);
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
  /* -webkit-text-stroke: 2px #000; */
  text-shadow: var(--text-shadow);
}

.current-subtitle > *[font_number="0"],
.tab-subtitle > *[font_number="0"] {
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
  /* -webkit-text-stroke: 2px #000; */
  text-shadow: var(--text-shadow);
  font-size: var(--font1-size);
  padding-top: 0.14em;
}

.current-subtitle > *[font_number="1"],
.tab-subtitle > *[font_number="1"] {
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
  /* -webkit-text-stroke: 2px #000; */
  text-shadow: var(--text-shadow);
  font-size: var(--font2-size);
  padding-top: 0.2em;
}

.current-subtitle,
.current-subtitle p {
  width: 100%;
}

.current-subtitle p,
.tab-subtitle p {
  margin: 0.1em 0;
}

.tab-subtitle,
.tab-subtitle p {
  width: 100%;
}

.current-subtitle,
.tab-subtitle {
  margin-top: calc(0.58em + var(--top-margin-offset));
  margin-bottom: calc(0.62em + var(--bottom-margin-offset));
  padding-left: calc(1.5em + var(--left-margin-offset));
  padding-right: calc(1.5em + var(--right-margin-offset));
}

.current-subtitle[row_position="center"],
.tab-subtitle-container[row_position="center"] {
  text-align: center;
}

.current-subtitle[row_position="right"] p[dir="ltr"],
.current-subtitle[row_position="left"] p[dir="rtl"],
.tab-subtitle-container[row_position="left"] p[dir="rtl"],
.tab-subtitle-container[row_position="right"] p[dir="ltr"] {
  text-align: right;
}

.current-subtitle[row_position="right"] p[dir="rtl"],
.current-subtitle[row_position="left"] p[dir="ltr"],
.tab-subtitle-container[row_position="left"] p[dir="ltr"],
.tab-subtitle-container[row_position="right"] p[dir="rtl"] {
  text-align: left;
}

.current-subtitle-container.blackbox p,
.tab-subtitle-container.blackbox p {
  background-color: black;
  width: fit-content;
  max-width: 100%;
}

.current-subtitle-container.blackbox .current-subtitle,
.tab-subtitle-container.blackbox .tab-subtitle {
  display: flex;
  flex-direction: column;
}

.current-subtitle-container.blackbox .current-subtitle[row_position="center"],
.tab-subtitle-container.blackbox[row_position="center"] .tab-subtitle {
  align-items: center;
}

.current-subtitle-container.blackbox .current-subtitle[row_position="left"] p[dir="rtl"],
.current-subtitle-container.blackbox .current-subtitle[row_position="right"] p[dir="ltr"],
.tab-subtitle-container.blackbox[row_position="left"] p[dir="rtl"],
.tab-subtitle-container.blackbox[row_position="right"] p[dir="ltr"] {
  align-self: flex-end;
}

.current-subtitle-container.blackbox .current-subtitle[row_position="right"] p[dir="rtl"],
.current-subtitle-container.blackbox .current-subtitle[row_position="left"] p[dir="ltr"],
.tab-subtitle-container.blackbox[row_position="right"] p[dir="rtl"],
.tab-subtitle-container.blackbox[row_position="left"] p[dir="ltr"] {
  align-self: flex-start;
}

/* //////////////////////// BOXES /////////////////////////// */
/* boxed */
.current-subtitle[box="boxed"] p,
.tab-subtitle-container[box="boxed"] p {
  /* background-color: black; */
  width: fit-content;
  max-width: 100%;
  /* padding: var(--box-top-padding) var(--box-right-padding) var(--box-bottom-padding) var(--box-left-padding); */
  margin: var(--box-top-margin) var(--box-right-margin) var(--box-bottom-margin) var(--box-left-margin);
  position: relative;
}

.current-subtitle[box="boxed"] p::before,
.tab-subtitle-container[box="boxed"] p::before {
  background-color: black;
  color: rgba(0, 0, 0, 0);
  text-shadow: none;
  width: 100%;
  height: 100%;
  content: "123";
  position: absolute;
  z-index: -1;
  padding: var(--box-top-padding) var(--box-right-padding) var(--box-bottom-padding) var(--box-left-padding);
  top: calc(var(--box-top-padding) * -1);
  right: calc(var(--box-right-padding) * -1);
}

.current-subtitle[box="boxed"] p:has(br),
.tab-subtitle-container[box="boxed"] p:has(br) {
  padding: 0 0;
}

.current-subtitle[box="boxed"] p:has(br)::before,
.tab-subtitle-container[box="boxed"] p:has(br)::before {
  padding: 0 0;
  content: "";
}

.current-subtitle[box="boxed"],
.tab-subtitle-container[box="boxed"] .tab-subtitle {
  display: flex;
  flex-direction: column;
}

.current-subtitle[row_position="center"][box="boxed"],
.tab-subtitle-container[row_position="center"][box="boxed"] .tab-subtitle {
  align-items: center;
}

.current-subtitle[row_position="left"][box="boxed"] p[dir="rtl"],
.current-subtitle[row_position="right"][box="boxed"] p[dir="ltr"],
.tab-subtitle-container[row_position="left"][box="boxed"] p[dir="rtl"],
.tab-subtitle-container[row_position="right"][box="boxed"] p[dir="ltr"] {
  align-self: flex-end;
}

.current-subtitle[row_position="right"][box="boxed"] p[dir="rtl"],
.current-subtitle[row_position="left"][box="boxed"] p[dir="ltr"],
.tab-subtitle-container[row_position="right"][box="boxed"] p[dir="rtl"],
.tab-subtitle-container[row_position="left"][box="boxed"] p[dir="ltr"] {
  align-self: flex-start;
}

/* ghost */
.current-subtitle[box="ghost"] p,
.tab-subtitle-container[box="ghost"] p {
  /* background-color: rgba(0, 0, 0, var(--box-opacity)); */
  width: fit-content;
  max-width: 100%;
  /* padding: var(--box-top-padding) var(--box-right-padding) var(--box-bottom-padding) var(--box-left-padding); */
  margin: var(--box-top-margin) var(--box-right-margin) var(--box-bottom-margin) var(--box-left-margin);
  position: relative;
}

.current-subtitle[box="ghost"] p::before,
.tab-subtitle-container[box="ghost"] p::before {
  background-color: rgba(0, 0, 0, var(--box-opacity));
  color: rgba(0, 0, 0, 0);
  text-shadow: none;
  width: 100%;
  height: 100%;
  content: "123";
  position: absolute;
  z-index: -1;
  padding: var(--box-top-padding) var(--box-right-padding) var(--box-bottom-padding) var(--box-left-padding);
  top: calc(var(--box-top-padding) * -1);
  right: calc(var(--box-right-padding) * -1);
}

.current-subtitle[box="ghost"] p:has(br)::before,
.tab-subtitle-container[box="ghost"] p:has(br)::before {
  padding: 0 0;
  content: "";
}

.current-subtitle[box="ghost"] p:has(br),
.tab-subtitle-container[box="ghost"] p:has(br) {
  padding: 0 0;
}

.current-subtitle[box="ghost"],
.tab-subtitle-container[box="ghost"] .tab-subtitle {
  display: flex;
  flex-direction: column;
}

.current-subtitle[row_position="center"][box="ghost"],
.tab-subtitle-container[row_position="center"][box="ghost"] .tab-subtitle {
  align-items: center;
}

.current-subtitle[row_position="left"][box="ghost"] p[dir="rtl"],
.current-subtitle[row_position="right"][box="ghost"] p[dir="ltr"],
.tab-subtitle-container[row_position="left"][box="ghost"] p[dir="rtl"],
.tab-subtitle-container[row_position="right"][box="ghost"] p[dir="ltr"] {
  align-self: flex-end;
}

.current-subtitle[row_position="right"][box="ghost"] p[dir="rtl"],
.current-subtitle[row_position="left"][box="ghost"] p[dir="ltr"],
.tab-subtitle-container[row_position="right"][box="ghost"] p[dir="rtl"],
.tab-subtitle-container[row_position="left"][box="ghost"] p[dir="ltr"] {
  align-self: flex-start;
}

/* striped */
.current-subtitle[box="striped"] p,
.tab-subtitle-container[box="striped"] p {
  background-color: rgba(0, 0, 0, 1);
  padding: var(--box-top-padding) var(--box-right-padding) var(--box-bottom-padding) var(--box-left-padding);
}

.current-subtitle[box="striped"] p:has(br),
.tab-subtitle-container[box="striped"] p:has(br) {
  background-color: rgba(0, 0, 0, 0);
}

.current-subtitle[box="striped"],
.tab-subtitle-container[box="striped"] .tab-subtitle {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.current-subtitle[row_position="center"][box="striped"],
.tab-subtitle-container[row_position="center"][box="striped"] .tab-subtitle {
  align-items: center;
}

.current-subtitle[row_position="left"][box="striped"] p[dir="rtl"],
.current-subtitle[row_position="right"][box="striped"] p[dir="ltr"],
.tab-subtitle-container[row_position="left"][box="striped"] p[dir="rtl"],
.tab-subtitle-container[row_position="right"][box="striped"] p[dir="ltr"] {
  align-self: flex-end;
}

.current-subtitle[row_position="right"][box="striped"] p[dir="rtl"],
.current-subtitle[row_position="left"][box="striped"] p[dir="ltr"],
.tab-subtitle-container[row_position="right"][box="striped"] p[dir="rtl"],
.tab-subtitle-container[row_position="left"][box="striped"] p[dir="ltr"] {
  align-self: flex-start;
}

/* ghost_striped */
.current-subtitle[box="ghost_striped"] p,
.tab-subtitle-container[box="ghost_striped"] p {
  background-color: rgba(0, 0, 0, var(--box-opacity));
  padding: var(--box-top-padding) var(--box-right-padding) var(--box-bottom-padding) var(--box-left-padding);
}

.current-subtitle[box="ghost_striped"] p:has(br),
.tab-subtitle-container[box="ghost_striped"] p:has(br) {
  background-color: rgba(0, 0, 0, 0);
}

.current-subtitle[box="ghost_striped"],
.tab-subtitle-container[box="ghost_striped"] .tab-subtitle {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.current-subtitle[row_position="center"][box="ghost_striped"],
.tab-subtitle-container[row_position="center"][box="ghost_striped"] .tab-subtitle {
  align-items: center;
}

.current-subtitle[row_position="left"][box="ghost_striped"] p[dir="rtl"],
.current-subtitle[row_position="right"][box="ghost_striped"] p[dir="ltr"],
.tab-subtitle-container[row_position="left"][box="ghost_striped"] p[dir="rtl"],
.tab-subtitle-container[row_position="right"][box="ghost_striped"] p[dir="ltr"] {
  align-self: flex-end;
}

.current-subtitle[row_position="right"][box="ghost_striped"] p[dir="rtl"],
.current-subtitle[row_position="left"][box="ghost_striped"] p[dir="ltr"],
.tab-subtitle-container[row_position="right"][box="ghost_striped"] p[dir="rtl"],
.tab-subtitle-container[row_position="left"][box="ghost_striped"] p[dir="ltr"] {
  align-self: flex-start;
}

/* block boxed*/
.current-subtitle[box="block"],
.tab-subtitle-container[box="block"] .tab-subtitle {
  /* background-color: black; */
  width: fit-content;
  max-width: 100%;
  padding: 0;
  position: relative;
}

.current-subtitle[box="block"]::before,
.tab-subtitle-container[box="block"] .tab-subtitle::before {
  background-color: black;
  color: rgba(0, 0, 0, 0);
  text-shadow: none;
  width: 100%;
  height: 100%;
  content: "123";
  position: absolute;
  z-index: -1;
  padding: var(--box-top-padding) var(--box-right-padding) var(--box-bottom-padding) var(--box-left-padding);
  top: calc(var(--box-top-padding) * -1);
  right: calc(var(--box-right-padding) * -1);
}

.current-subtitle[box="block"] p,
.tab-subtitle-container[box="block"] p {
  width: fit-content;
  max-width: 100%;
  margin: var(--box-top-margin) var(--box-right-margin) var(--box-bottom-margin) var(--box-left-margin);
}

.current-subtitle[box="block"] p:has(br),
.tab-subtitle-container[box="block"] p:has(br) {
  padding: 0 0;
}

.current-subtitle[box="block"],
.tab-subtitle-container[box="block"] .tab-subtitle {
  display: flex;
  flex-direction: column;
}

.current-subtitle[row_position="center"][box="block"],
.tab-subtitle-container[row_position="center"][box="block"] .tab-subtitle {
  align-items: center;
}

.current-subtitle[row_position="left"][box="block"] p[dir="rtl"],
.current-subtitle[row_position="right"][box="block"] p[dir="ltr"],
.tab-subtitle-container[row_position="left"][box="block"] p[dir="rtl"],
.tab-subtitle-container[row_position="right"][box="block"] p[dir="ltr"] {
  align-self: flex-end;
}

.current-subtitle[row_position="right"][box="block"] p[dir="rtl"],
.current-subtitle[row_position="left"][box="block"] p[dir="ltr"],
.tab-subtitle-container[row_position="right"][box="block"] p[dir="rtl"],
.tab-subtitle-container[row_position="left"][box="block"] p[dir="ltr"] {
  align-self: flex-start;
}

/* ghost_block */
.current-subtitle[box="ghost_block"],
.tab-subtitle-container[box="ghost_block"] .tab-subtitle {
  /* background-color: rgba(0, 0, 0, var(--box-opacity)); */
  width: fit-content;
  max-width: 100%;
  padding: 0;
  position: relative;
}

.current-subtitle[box="ghost_block"]::before,
.tab-subtitle-container[box="ghost_block"] .tab-subtitle::before {
  background-color: rgba(0, 0, 0, var(--box-opacity));
  color: rgba(0, 0, 0, 0);
  text-shadow: none;
  width: 100%;
  height: 100%;
  content: "123";
  position: absolute;
  z-index: -1;
  padding: var(--box-top-padding) var(--box-right-padding) var(--box-bottom-padding) var(--box-left-padding);
  top: calc(var(--box-top-padding) * -1);
  right: calc(var(--box-right-padding) * -1);
}

.current-subtitle[box="ghost_block"] p,
.tab-subtitle-container[box="ghost_block"] p {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  /* padding: var(--box-top-padding) var(--box-right-padding) var(--box-bottom-padding) var(--box-left-padding); */
  margin: var(--box-top-margin) var(--box-right-margin) var(--box-bottom-margin) var(--box-left-margin);
}

.current-subtitle[box="ghost_block"] p:has(br),
.tab-subtitle-container[box="ghost_block"] p:has(br) {
  padding: 0 0;
}

.current-subtitle[box="ghost_block"],
.tab-subtitle-container[box="ghost_block"] .tab-subtitle {
  display: flex;
  flex-direction: column;
}

.current-subtitle[row_position="center"][box="ghost_block"],
.tab-subtitle-container[row_position="center"][box="ghost_block"] .tab-subtitle {
  align-items: center;
}

.current-subtitle[row_position="left"][box="ghost_block"] p[dir="rtl"],
.current-subtitle[row_position="right"][box="ghost_block"] p[dir="ltr"],
.tab-subtitle-container[row_position="left"][box="ghost_block"] p[dir="rtl"],
.tab-subtitle-container[row_position="right"][box="ghost_block"] p[dir="ltr"] {
  align-self: flex-end;
}

.current-subtitle[row_position="right"][box="ghost_block"] p[dir="rtl"],
.current-subtitle[row_position="left"][box="ghost_block"] p[dir="ltr"],
.tab-subtitle-container[row_position="right"][box="ghost_block"] p[dir="rtl"],
.tab-subtitle-container[row_position="left"][box="ghost_block"] p[dir="ltr"] {
  align-self: flex-start;
}

.current-subtitle-container:has(.current-subtitle[box="ghost_block"][row_position="left"] p[dir="rtl"]),
.current-subtitle-container:has(.current-subtitle[box="block"][row_position="left"] p[dir="rtl"]),
.tab-subtitle-container[box="ghost_block"][row_position="left"]:has(p[dir="rtl"]),
.tab-subtitle-container[box="block"][row_position="left"]:has(p[dir="rtl"]),
.current-subtitle-container:has(.current-subtitle[box="ghost_block"][row_position="right"] p[dir="ltr"]),
.current-subtitle-container:has(.current-subtitle[box="block"][row_position="right"] p[dir="ltr"]),
.tab-subtitle-container[box="ghost_block"][row_position="right"]:has(p[dir="ltr"]),
.tab-subtitle-container[box="block"][row_position="right"]:has(p[dir="ltr"]) {
  align-items: end;
  margin-left: 1.5em;
  margin-right: 1.5em;
}

.current-subtitle-container:has(.current-subtitle[box="ghost_block"][row_position="right"] p[dir="rtl"]),
.current-subtitle-container:has(.current-subtitle[box="block"][row_position="right"] p[dir="rtl"]),
.tab-subtitle-container[box="ghost_block"][row_position="right"]:has(p[dir="rtl"]),
.tab-subtitle-container[box="block"][row_position="right"]:has(p[dir="rtl"]),
.current-subtitle-container:has(.current-subtitle[box="ghost_block"][row_position="left"] p[dir="ltr"]),
.current-subtitle-container:has(.current-subtitle[box="block"][row_position="left"] p[dir="ltr"]),
.tab-subtitle-container[box="ghost_block"][row_position="left"]:has(p[dir="ltr"]),
.tab-subtitle-container[box="block"][row_position="left"]:has(p[dir="ltr"]) {
  align-items: start;
  margin-left: 1.5em;
  margin-right: 1.5em;
}

.current-subtitle {
  white-space: pre;
}

.current-subtitle::after {
  direction: var(--previw-subtitle-dir);
  content: var(--previw-subtitle);
  background-color: black;
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translate(50%, 110%);
  cursor: pointer;
}

/* .current-subtitle:has(p[dir="rtl"])::after {
  direction: rtl;
  content: var(--previw-subtitle);
  background-color: black;
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translate(50%, 110%);
}
.current-subtitle:has(p[dir="ltr"])::after {
  direction: ltr;
  content: var(--previw-subtitle);
  background-color: black;
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translate(50%, 110%);
} */