@font-face {
  font-family: "Circular";
  src: url("../fonts/CircularStd-Book.eot");
  src: url("../fonts/CircularStd-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/CircularStd-Book.woff2") format("woff2"), url("../fonts/CircularStd-Book.woff") format("woff"), url("../fonts/CircularStd-Book.ttf") format("truetype"), url("../fonts/CircularStd-Book.svg#CircularStd-Book") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular";
  src: url("../fonts/CircularSpotifyText-Light.eot");
  src: url("../fonts/CircularSpotifyText-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/CircularSpotifyText-Light.woff2") format("woff2"), url("../fonts/CircularSpotifyText-Light.woff") format("woff"), url("../fonts/CircularSpotifyText-Light.ttf") format("truetype"), url("../fonts/CircularSpotifyText-Light.svg#CircularSpotifyText-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular";
  src: url("../fonts/CircularStd-Medium.eot");
  src: url("../fonts/CircularStd-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/CircularStd-Medium.woff2") format("woff2"), url("../fonts/CircularStd-Medium.woff") format("woff"), url("../fonts/CircularStd-Medium.ttf") format("truetype"), url("../fonts/CircularStd-Medium.svg#CircularStd-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SourceCodeRoman";
  src: url("../fonts/SourceCodeRoman-ExtraLight.eot");
  src: url("../fonts/SourceCodeRoman-ExtraLight.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceCodeRoman-ExtraLight.woff2") format("woff2"), url("../fonts/SourceCodeRoman-ExtraLight.woff") format("woff"), url("../fonts/SourceCodeRoman-ExtraLight.ttf") format("truetype"), url("../fonts/SourceCodeRoman-ExtraLight.svg#SourceCodeRoman") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SourceCodeRoman";
  src: url("../fonts/SourceCodeRoman-ExtraLightItalic.eot");
  src: url("../fonts/SourceCodeRoman-ExtraLightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceCodeRoman-ExtraLightItalic.woff2") format("woff2"), url("../fonts/SourceCodeRoman-ExtraLightItalic.woff") format("woff"), url("../fonts/SourceCodeRoman-ExtraLightItalic.ttf") format("truetype"), url("../fonts/SourceCodeRoman-ExtraLightItalic.svg#SourceCodeRoman") format("svg");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Circular";
  src: url("../fonts/CircularStd-BookItalic.eot");
  src: url("../fonts/CircularStd-BookItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/CircularStd-BookItalic.woff2") format("woff2"), url("../fonts/CircularStd-BookItalic.woff") format("woff"), url("../fonts/CircularStd-BookItalic.ttf") format("truetype"), url("../fonts/CircularStd-BookItalic.svg#CircularStd-BookItalic") format("svg");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Circular";
  src: url("../fonts/CircularSpotifyText-LightItalic.eot");
  src: url("../fonts/CircularSpotifyText-LightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/CircularSpotifyText-LightItalic.woff2") format("woff2"), url("../fonts/CircularSpotifyText-LightItalic.woff") format("woff"), url("../fonts/CircularSpotifyText-LightItalic.ttf") format("truetype"), url("../fonts/CircularSpotifyText-LightItalic.svg#CircularSpotifyText-LightItalic") format("svg");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Circular";
  font-weight: normal;
  background-color: #F7DF58;
  overflow: hidden;
}

input, textarea, select, button {
  font-family: inherit;
}

.root--conatiner {
  margin: 50px;
  background-color: #ffffff;
  position: relative;
  width: calc(100dvw - 100px);
  height: calc(100dvh - 100px);
  border-radius: 10px;
  display: flex;
  flex-direction: row;
}
.root--conatiner__nav {
  width: 320px;
  height: 100%;
}
.root--conatiner__maincontent {
  background-color: green;
  width: calc(100% - 320px);
  height: 100%;
}

h1 {
  font-weight: 500;
  font-family: "Circular";
  margin: 0;
}

h3 {
  font-weight: 500;
  font-family: "Circular";
  font-size: 18px;
  margin: 0;
}

.link {
  font-size: 18px;
  font-weight: 300;
  font-family: "Circular";
  color: #212934;
  text-decoration: none;
}
.link span {
  position: relative;
  top: 1;
  margin-right: 3px;
  left: 0;
  transition: left 0.35s ease-in-out;
}
.link:hover span {
  left: -3px;
}

.link-btn a {
  text-decoration: none;
  color: #212934;
  font-size: 18px;
  font-weight: 300;
}
.link-btn a span {
  position: relative;
  top: 1px;
  margin-right: 5px;
}
.link-btn a span svg {
  transform: translateX(0);
  transition: transform 0.3s ease-in-out;
}
.link-btn a:hover span svg {
  transform: translateX(-3px);
}
.btn button {
  background-color: #ffffff;
  border: 1px solid #E4E4E4;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.btn button:hover {
  background-color: #F7DF58;
  border: 1px solid #F7DF58;
}
.btn.btn-edit button {
  width: 40px;
  height: 40px;
}
.btn.btn-edit button svg {
  width: 16px;
}
.btn.btn-history button {
  height: 40px;
  font-size: 18px;
  font-weight: 300;
  color: #212934;
  padding-right: 14px;
  padding-left: 14px;
}
.btn.btn-history button svg {
  width: 16px;
  margin-right: 4px;
  position: relative;
  top: 1px;
}
.btn.btn-delete button {
  width: 40px;
  height: 40px;
}
.btn.btn-delete button svg {
  width: 17px;
}
.btn.btn-addcontent button {
  height: 40px;
  background-color: #F7DF58;
  border: 1px solid #F7DF58;
  padding: 6px 20px;
  font-size: 18px;
  font-weight: 300;
  color: #212934;
  display: flex;
  column-gap: 20px;
  flex-direction: row;
}
.btn.btn-addcontent button svg {
  position: relative;
  top: 3px;
}
.btn.btn-addcontent button:hover {
  background-color: #ffffff;
  border: 1px solid #E4E4E4;
}

.add-new-tab {
  background-color: #ffffff;
  border: 1px solid #E4E4E4;
  border-radius: 10px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 150px;
  opacity: 1;
  transition: all 0.65s ease-in-out;
  overflow: hidden;
}
.add-new-tab.incative {
  max-width: 0;
  opacity: 0;
  padding: 0 0;
}
.add-new-tab input {
  font-size: 16px;
  line-height: 16px;
  font-weight: 300;
  border: none;
  background-color: #ffffff;
  color: #212934;
  margin: 0;
  padding: 0;
  position: relative;
  top: -1px;
}
.add-new-tab input:focus {
  outline: none;
  box-shadow: none;
}

.btn-tab {
  background-color: #ffffff;
  border: 1px solid #E4E4E4;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  font-size: 16px;
  font-weight: 300;
  padding: 9px 20px;
  text-decoration: none;
  color: #212934;
}
.btn-tab.btn-add {
  padding: 12px;
}
.btn-tab:hover {
  background-color: #E7E7E7;
  border: 1px solid #E7E7E7;
}
.btn-tab.active, .btn-tab:hover.btn-add {
  background-color: #F7DF58;
  border: 1px solid #F7DF58;
}

.zi-99 {
  z-index: 99;
}

.zi-98 {
  z-index: 100;
}

.pos-sty {
  position: sticky;
  top: 170px;
}

.fl-fs {
  align-items: flex-start !important;
}

.tag {
  border-radius: 10px;
  background-color: #D1D5DB;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  padding: 7px 10px;
  text-decoration: none;
}
.tag.tag {
  color: #212934;
  background-color: rgba(33, 41, 52, 0.1);
}
.tag.tag-red {
  color: #FF0040;
  background-color: rgba(255, 0, 64, 0.1);
}
.tag.tag-blue {
  color: #007BFF;
  background-color: rgba(0, 123, 255, 0.1);
}
.tag.tag-green {
  color: #00D420;
  background-color: rgba(0, 212, 32, 0.1);
}
.tag.tag-orange {
  color: #FF8000;
  background-color: rgba(255, 128, 0, 0.1);
}
.tag.tag-purple {
  color: #8000FF;
  background-color: rgba(128, 0, 255, 0.1);
}
.tag.tag-cyan {
  color: #00D0FF;
  background-color: rgba(0, 208, 255, 0.1);
}
.tag.tag-yellow-btn {
  color: #CCAA00;
  background-color: rgba(204, 170, 0, 0.1);
}
.tag.tag-gray {
  color: #666666;
  background-color: rgba(102, 102, 102, 0.1);
}
.tag.tag-teal {
  color: #00C7A9;
  background-color: rgba(0, 199, 169, 0.1);
}

.sti-0 {
  position: sticky;
  top: 0px;
}

.flex-75-25 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-items: stretch;
}
.flex-75-25 .flex-inner-75 {
  width: calc(75% - 60px);
  padding-right: 60px;
}
.flex-75-25 .flex-inner-25 {
  width: 25%;
  background-color: #ffffff;
}

.multiple-select {
  display: none;
}

.col-md-3.pl-spez {
  padding-right: 70px;
}

.ticket-tags-wrapper {
  display: flex;
  flex-direction: row;
  column-gap: 10px;
}
.ticket-tags-wrapper .ticket-tag {
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.35s ease-in-out;
}
.ticket-tags-wrapper .ticket-tag:after, .ticket-tags-wrapper .ticket-tag:before {
  content: unset;
}
.ticket-tags-wrapper .ticket-tag-grey {
  color: #212934;
  background-color: rgba(33, 41, 52, 0.1);
}
.ticket-tags-wrapper .ticket-tag-red {
  color: #FF0040;
  background-color: rgba(255, 0, 64, 0.1);
}
.ticket-tags-wrapper .ticket-tag-blue {
  color: #007BFF;
  background-color: rgba(0, 123, 255, 0.1);
}
.ticket-tags-wrapper .ticket-tag-green {
  color: #00D420;
  background-color: rgba(0, 212, 32, 0.1);
}
.ticket-tags-wrapper .ticket-tag-orange {
  color: #FF8000;
  background-color: rgba(255, 128, 0, 0.1);
}
.ticket-tags-wrapper .ticket-tag-purple {
  color: #8000FF;
  background-color: rgba(128, 0, 255, 0.1);
}
.ticket-tags-wrapper .ticket-tag-cyan {
  color: #00D0FF;
  background-color: rgba(0, 208, 255, 0.1);
}
.ticket-tags-wrapper .ticket-tag-yellow-btn {
  color: #CCAA00;
  background-color: rgba(204, 170, 0, 0.1);
}
.ticket-tags-wrapper .ticket-tag-gray {
  color: #666666;
  background-color: rgba(102, 102, 102, 0.1);
}
.ticket-tags-wrapper .ticket-tag-teal {
  color: #00C7A9;
  background-color: rgba(0, 199, 169, 0.1);
}
.ticket-tags-wrapper .ticket-tag:hover {
  color: #212934;
  background-color: #F7DF58;
}

.ui-widget.ui-widget-content {
  border-top: 1px solid #ffffff !important;
  border-bottom: 1px solid #212934 !important;
  border-left: 1px solid #212934 !important;
  border-right: 1px solid #212934 !important;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-top: -1px;
  overflow: hidden;
}
.ui-widget.ui-widget-content li div {
  padding: 8px 15px;
  font-size: 16px;
  font-weight: 300;
  color: #212934;
  background-color: #ffffff;
  transition: background-color 0.35s ease-in-out;
}
.ui-widget.ui-widget-content li div.ui-state-active {
  background-color: #F7DF58;
  border: none;
  margin: 0;
}

.bg-white {
  background-color: #ffffff;
  z-index: 40;
}

.st-checkbox input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}
.st-checkbox label {
  position: relative;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
}
.st-checkbox label:after {
  display: block;
  position: absolute;
  content: "";
  top: 14px;
  left: 15px;
  width: 0;
  height: 0;
  transition: all 0.35s ease-in-out;
  border-radius: 50%;
  opacity: 0;
}
.st-checkbox label:before {
  content: "";
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid #E4E4E4;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 14px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 20px;
}
.st-checkbox input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 6px;
  width: 18px;
  height: 18px;
  background-color: #E4E4E4;
  opacity: 1;
}

#lightbox {
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.7);
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
#lightbox.active {
  width: 100%;
  height: 100dvh;
  opacity: 1;
}
#lightbox .lightbox--closer {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  padding: 11px;
}
#lightbox .lightbox--closer svg {
  width: 25px;
  height: auto;
}
#lightbox .lightbox--wrapper {
  max-width: 860px;
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid #E4E4E4;
  margin-left: auto;
  margin-right: auto;
  max-height: calc(100dvh - 100px);
  height: auto;
  min-height: 50px;
  top: 50%;
  position: relative;
  transform: translateY(-50%);
  padding: 40px;
  padding-right: 20px;
}
#lightbox .lightbox--inner {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100dvh - 100px);
}
#lightbox .lightbox--inner::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: #D1D5DB;
  border-radius: 10px;
}
#lightbox .lightbox--inner::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
  border-radius: 10px;
}
#lightbox .lightbox--inner::-webkit-scrollbar-thumb {
  background-color: #212934;
  border-radius: 10px;
}
#lightbox form {
  padding-right: 20px;
}
#lightbox form .lb-formrow {
  margin-bottom: 40px;
}
#lightbox form .lb-formrow label {
  display: block;
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 10px;
}
#lightbox form .lb-formrow input[type=text], #lightbox form .lb-formrow textarea {
  border-radius: 5px;
  border: 1px solid #E4E4E4;
  font-size: 18px;
  font-weight: 300;
  width: 100%;
  display: block;
  padding: 10px 15px;
}
#lightbox form .lb-formrow input[type=text]:focus, #lightbox form .lb-formrow textarea:focus {
  outline: none;
  box-shadow: none;
}
#lightbox form .lb-formrow textarea {
  height: 180px;
}
#lightbox form .lb-formrow .st-checkbox input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}
#lightbox form .lb-formrow .st-checkbox label {
  position: relative;
  cursor: pointer;
  font-size: 18px;
}
#lightbox form .lb-formrow .st-checkbox label:after {
  display: block;
  position: absolute;
  content: "";
  top: 14px;
  left: 15px;
  width: 0;
  height: 0;
  transition: all 0.35s ease-in-out;
  border-radius: 5px;
  opacity: 0;
}
#lightbox form .lb-formrow .st-checkbox label:before {
  content: "";
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid #E4E4E4;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 8px;
  top: -2px;
}
#lightbox form .lb-formrow .st-checkbox input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 6px;
  width: 18px;
  height: 18px;
  background-color: #E4E4E4;
  opacity: 1;
}
#lightbox form .lb-formrow .boxwrapper {
  display: flex;
  column-gap: 30px;
}
#lightbox form .lb-formrow.lb-formrow--submit {
  margin-bottom: 0;
  display: flex;
  justify-content: flex-end;
  column-gap: 20px;
}
#lightbox form .lb-formrow .btn {
  padding: 5px 15px;
  border-radius: 5px;
  color: #212934;
  font-size: 18px;
  cursor: pointer;
  font-weight: 300;
  display: flex;
  flex-direction: row;
  column-gap: 10px;
  align-items: center;
}
#lightbox form .lb-formrow .btn-cancel {
  border: 1px solid #E4E4E4;
  background-color: #ffffff;
}
#lightbox form .lb-formrow .btn-save {
  border: 1px solid #F7DF58;
  background-color: #F7DF58;
}

#message-box {
  border-radius: 10px;
  position: fixed;
  bottom: 30px;
  right: -410px;
  z-index: 9999;
  bottom: 30px;
  font-size: 16px;
  font-weight: 300;
  max-width: 400px;
  overflow: hidden;
  transition: all 0.35s ease-in-out;
}
#message-box .message-box-iner {
  padding: 20px;
  display: block;
}
#message-box.active {
  right: 30px;
}
#message-box.error {
  border-left: 3px solid #FF0040;
  background-color: #FF0040;
  background-color: #FFF2F5;
  color: #FF0040;
}
#message-box.success {
  border-left: 3px solid #00D420;
  background-color: #00D420;
  background-color: #F2FCF4;
  color: #00D420;
}

.block-link {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.container-fluid {
  max-width: 1576px;
  width: calc(100% - 24px);
  height: 100vh;
  overflow: hidden; /* Prevent container from scrolling */
}

/* Ensure scrollbar height matches content */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

main {
  height: calc(100vh - 105px);
  overflow-y: hidden;
  position: relative;
  margin-top: 0;
}
main.start {
  height: calc(100vh - 133px);
}

#nav--wrapper {
  padding: 50px 30px;
  height: calc(100% - 100px);
  overflow: hidden;
}

#logo a {
  position: relative;
  display: block;
}
#logo a svg,
#logo a img {
  width: 167px;
  height: auto;
  display: block;
}

#searchblock-nav-container {
  margin-top: 50px;
  margin-bottom: 50px;
  position: relative;
}
#searchblock-nav-container label {
  font-size: 18px;
  font-weight: 300;
  position: absolute;
  top: 7px;
  left: 51px;
  font-family: "Circular";
  transition: all 0.35s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  color: #212934;
}
#searchblock-nav-container span {
  position: absolute;
  top: 11px;
  left: 15px;
}
#searchblock-nav-container span svg {
  width: 17px;
  height: 17px;
}
#searchblock-nav-container span svg path {
  fill: #212934;
}
#searchblock-nav-container button {
  position: absolute;
  border: none;
  background-color: transparent;
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
  opacity: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.75, 0.25, 0.25, 0.75);
}
#searchblock-nav-container button svg {
  width: 17px;
  height: 17px;
}
#searchblock-nav-container button svg path {
  fill: #212934;
}
#searchblock-nav-container input {
  border: 1px solid #E4E4E4;
  background-color: #ffffff;
  border-radius: 5px;
  width: 100%;
  padding: 6px 14px;
  padding-left: 50px;
  font-size: 18px;
  font-weight: 300;
  transition: all 0.35s cubic-bezier(0.75, 0.25, 0.25, 0.75);
}
#searchblock-nav-container input:focus {
  outline: 0;
  border: 1px solid #212934;
  background-color: #ffffff;
}
#searchblock-nav-container.active label {
  top: -22px;
  left: 0px;
  font-size: 14px;
  color: #000000;
  font-weight: 300;
}
#searchblock-nav-container.active input {
  border: 1px solid #212934;
  background-color: #ffffff;
}
#searchblock-nav-container.active button {
  opacity: 1;
}

#mainnav .nav-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 60px;
}
#mainnav .nav-header:first-of-type {
  margin-top: 0;
}
#mainnav .nav-header p {
  font-size: 20px;
  font-family: "Circular";
  font-weight: normal;
  color: #212934;
  margin: 0;
}
#mainnav .nav-header span {
  border: 1px solid #E4E4E4;
  border-radius: 5px;
  width: 33px;
  height: 33px;
  background-color: #ffffff;
  cursor: pointer;
  opacity: 0;
  transition: all 0.35s ease-in-out;
}
#mainnav .nav-header span svg {
  width: 16px;
  height: 16px;
  transform: translate(9px, 9px);
}
#mainnav .nav-header span:hover {
  background-color: #F7DF58;
  border: 1px solid #F7DF58;
}
#mainnav .nav-header:hover span {
  opacity: 1;
}
#mainnav .nav-wrapper {
  min-height: 50px;
  background-color: transparent;
  overflow-y: scroll;
  position: relative;
  direction: rtl;
}
#mainnav .nav-wrapper::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: #D1D5DB;
  border-radius: 10px;
}
#mainnav .nav-wrapper::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
  border-radius: 10px;
}
#mainnav .nav-wrapper::-webkit-scrollbar-thumb {
  background-color: #212934;
  border-radius: 10px;
}
#mainnav .nav-wrapper ul {
  direction: ltr;
  list-style-type: none;
  padding-left: 20px;
  margin: 0;
}
#mainnav .nav-wrapper ul li {
  margin-bottom: 15px;
  max-height: 55px;
  transition: all 0.6s ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  border-radius: 10px;
  transition: all 0.35s ease-in-out;
}
#mainnav .nav-wrapper ul li > a {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#mainnav .nav-wrapper ul li:last-of-type {
  margin-bottom: 0;
}
#mainnav .nav-wrapper ul li.faded-out {
  margin-bottom: 0px;
  opacity: 0;
  max-height: 0px;
}
#mainnav .nav-wrapper ul li .nav-edit-wrapper {
  flex-direction: row;
  position: relative;
  top: 0;
  column-gap: 8px;
  opacity: 0;
  flex-shrink: 0;
  display: flex;
  margin-right: 0;
  max-width: 0px;
  transition: all 0.35s ease-in-out;
}
#mainnav .nav-wrapper ul li .nav-edit-wrapper svg {
  width: 15px;
  height: auto;
  cursor: pointer;
}
#mainnav .nav-wrapper ul li .nav-edit-wrapper svg.delete-li-not {
  width: 0;
  transition: all 0.35s ease-in-out;
}
#mainnav .nav-wrapper ul li .nav-edit-wrapper svg.delete-li-not path {
  stroke: #00D420;
}
#mainnav .nav-wrapper ul li input {
  font-size: 18px;
  font-weight: 300;
  color: #212934;
  border: 1px solid transparent;
  background-color: transparent;
  margin-left: 3px;
  flex: 1;
  min-width: 0;
  width: 100%;
  transition: all 0.35s ease-in-out;
}
#mainnav .nav-wrapper ul li input:focus {
  outline: none;
  box-shadow: none;
}
#mainnav .nav-wrapper ul li a {
  text-decoration: none;
  font-size: 18px;
  font-weight: 300;
  color: #212934;
  padding: 10px 15px;
  transition: all 0.35s ease-in-out;
  border: 1px solid transparent;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
#mainnav .nav-wrapper ul li a .text-overlay {
  position: absolute;
  top: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
  left: 0;
  padding-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  right: 0;
  transition: all 0.35s ease-in-out;
}
#mainnav .nav-wrapper ul li a svg {
  width: 16px;
  height: auto;
}
#mainnav .nav-wrapper ul li a > svg {
  position: relative;
  top: 1px;
  margin-right: 6px;
  width: 20px;
  flex-shrink: 0;
}
#mainnav .nav-wrapper ul li a > svg path {
  transition: all 0.35s ease-in-out;
}
#mainnav .nav-wrapper ul li a .flex-fill {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  position: relative;
}
#mainnav .nav-wrapper ul li.nav-add {
  border-radius: 10px;
  background-color: transparent;
  transition: all 0.35s ease-in-out;
  margin-bottom: 0;
  opacity: 0;
  max-height: 0px;
  transition: all 0.6s ease-in-out;
}
#mainnav .nav-wrapper ul li.nav-add.active {
  margin-bottom: 15px;
  opacity: 1;
  max-height: 55px;
}
#mainnav .nav-wrapper ul li.nav-add:hover {
  background-color: #ffffff !important;
}
#mainnav .nav-wrapper ul li.nav-add .closenavadd {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#mainnav .nav-wrapper ul li.nav-add .nav-add-wrapper {
  border: 1px solid #212934;
  border-radius: 10px;
  padding: 8px 15px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
#mainnav .nav-wrapper ul li.nav-add .nav-add-wrapper input {
  font-size: 18px;
  font-weight: 300;
  color: #212934;
  border: 1px solid transparent;
  background-color: transparent;
  margin-left: 3px;
  transition: all 0.35s ease-in-out;
}
#mainnav .nav-wrapper ul li.nav-add .nav-add-wrapper input:focus {
  outline: none;
  box-shadow: none;
}
#mainnav .nav-wrapper ul li.nav-add .nav-add-wrapper span:last-of-type {
  position: absolute;
  right: 15px;
  top: 15px;
}
#mainnav .nav-wrapper ul li.nav-add .nav-add-wrapper svg {
  width: 16px;
  height: auto;
}
#mainnav .nav-wrapper ul li.nav-add .nav-add-wrapper > svg {
  position: relative;
  top: 1px;
  margin-right: 0;
  width: 20px;
  flex-shrink: 0;
}
#mainnav .nav-wrapper ul li.nav-add.active {
  background-color: #ffffff;
}
#mainnav .nav-wrapper ul li.nav-add.active input {
  border: 1px solid transparent;
  background-color: transparent;
}
#mainnav .nav-wrapper ul li.active {
  background-color: #F7DF58;
}
#mainnav .nav-wrapper ul li.active:hover {
  background-color: #F7DF58;
}
#mainnav .nav-wrapper ul li.active.fade-out-search {
  max-height: 0px;
  opacity: 0;
  margin-bottom: 0;
}
#mainnav .nav-wrapper ul li.edit {
  background-color: #ffffff;
}
#mainnav .nav-wrapper ul li.edit .nav-edit-wrapper {
  opacity: 1;
  max-width: 75px;
  margin-right: 10px;
}
#mainnav .nav-wrapper ul li.edit .text-overlay {
  display: none;
}
#mainnav .nav-wrapper ul li.edit:hover {
  background-color: #ffffff;
}
#mainnav .nav-wrapper ul li.fade-out-search {
  max-height: 0px;
  opacity: 0;
  margin-bottom: 0;
}
#mainnav .nav-wrapper ul li.delete {
  opacity: 0.75;
  background-color: #E7E7E7;
}
#mainnav .nav-wrapper ul li.delete .nav-edit-wrapper {
  opacity: 1;
  max-width: 75px;
  margin-right: 10px;
}
#mainnav .nav-wrapper ul li.delete .text-overlay {
  color: #FF0040;
}
#mainnav .nav-wrapper ul li.delete .delete-li-not {
  width: 17px !important;
}
#mainnav .nav-wrapper ul li.delete a > svg path {
  fill: #FF0040;
}
#mainnav .nav-wrapper ul li.delete.fade-out {
  max-height: 0px;
  opacity: 0;
  margin-bottom: 0;
}
#mainnav .nav-wrapper ul li.delete .nav-edit-wrapper {
  opacity: 1;
}
#mainnav .nav-wrapper ul li.delete .nav-edit-wrapper:hover {
  opacity: 1;
}
#mainnav .nav-wrapper ul li.delete:hover {
  background-color: #E7E7E7;
}
#mainnav .nav-wrapper ul li:hover {
  background-color: #E7E7E7;
  gap: 10px;
}
#mainnav .nav-wrapper ul li:hover .nav-edit-wrapper {
  opacity: 1;
  max-width: 75px;
  margin-right: 10px;
}
#mainnav .nav-wrapper ul li .noedit {
  justify-content: flex-start;
}
#mainnav .nav-wrapper ul li .noedit .text-overlay-noedit {
  position: relative;
  left: unset;
  top: unset;
}

#content-topbar {
  position: sticky;
  top: 30px;
  background-color: #ffffff;
  border-bottom: 1px solid #E4E4E4;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 23px;
  padding-bottom: 23px;
  z-index: 100;
}

.login-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.login-box img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}

#titlebar {
  background-color: #ffffff;
  width: 100%;
  position: sticky;
  top: 0;
  padding-top: 35px;
  padding-bottom: 35px;
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#titlebar h1 {
  font-size: 25px;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}
#titlebar .btn {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#titlebar .btn.btn-history button {
  margin-left: 150px;
}
#titlebar .btn.btn-delete button {
  margin-left: 20px;
}
#titlebar:hover .btn {
  opacity: 1;
}
#titlebar.titlebar--start {
  padding-top: 24px;
  padding-bottom: 24px;
}
#titlebar.titlebar--start .btn {
  opacity: 1;
}
#titlebar.titlebar--start h1 {
  font-size: 60px;
}
#titlebar.titlebar--start .login-box {
  margin-left: 40px;
}
#titlebar.titlebar--overview {
  padding-top: 24px;
  padding-bottom: 24px;
}
#titlebar.titlebar--overview .btn {
  opacity: 0;
}
#titlebar.titlebar--overview h1 {
  font-size: 40px;
}
#titlebar.titlebar--overview:hover .btn {
  opacity: 1;
}

#content-tabs {
  background-color: #ffffff;
  display: flex;
  column-gap: 20px;
  border-bottom: 1px solid #E4E4E4;
  padding-bottom: 20px;
  padding-top: 30px;
  position: sticky;
  top: 67px;
}
#content-tabs .content-tabs-scroller {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  column-gap: 20px;
}
#content-tabs .content-tabs-scroller::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: #ffffff;
  border-radius: 10px;
}
#content-tabs .content-tabs-scroller::-webkit-scrollbar {
  height: 1px;
  background-color: #ffffff;
  border-radius: 10px;
}
#content-tabs .content-tabs-scroller::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border-radius: 10px;
}
#content-tabs .btn-add {
  opacity: 0;
}
#content-tabs .btn-add svg {
  transform: rotate(0);
  transition: transform 0.35s ease-in-out;
}
#content-tabs:hover .btn-add, #content-tabs.active .btn-add {
  opacity: 1;
}
#content-tabs.active .btn-tab.btn-add {
  border-color: #F7DF58 !important;
  background-color: #F7DF58 !important;
}
#content-tabs.active .btn-tab.btn-add svg {
  transform: rotate(45deg);
}
#content-tabs.content-tabs-start, #content-tabs.content-tabs-overview {
  padding-top: 55px;
  padding-bottom: 50px;
  border-bottom: none;
  top: 60px;
  z-index: 40;
}
#content-tabs.content-tabs-start .btn-add, #content-tabs.content-tabs-overview .btn-add {
  width: 16px;
  margin-left: auto;
  border-color: #F7DF58;
  background-color: #F7DF58;
}
#content-tabs.content-tabs-overview {
  flex-wrap: wrap;
}
#content-tabs.content-tabs-overview .btn-add {
  margin-left: unset;
  border-color: #E4E4E4;
  background-color: #ffffff;
}
#content-tabs.content-tabs-overview .btn-add:hover {
  border-color: #F7DF58;
  background-color: #F7DF58;
}
#content-tabs.content-tabs-overview:after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #E4E4E4;
  margin-top: 20px;
}

#intro {
  overflow: hidden;
}
#intro p {
  font-weight: 300;
  margin-top: 0px;
  font-size: 16px;
  margin-bottom: 20px;
}
#intro a {
  color: #212934;
  text-decoration: none;
  position: relative;
  transition: color 0.35s ease-in-out;
  isolation: isolate;
}
#intro a:before {
  background-color: #F7DF58;
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 2px;
  left: 0;
  z-index: -1;
  transition: height 0.35s ease-in-out, color 0.1s ease-in-out;
}
#intro a:after {
  background-color: #212934;
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 2px;
  left: 0;
  transition: all 0.35s ease-in-out;
}
#intro a:hover:before {
  height: 19px;
  background-color: #F7DF58;
  transition: height 0.35s ease-in-out, color 0.35s ease-in-out;
}
#intro a:hover:after {
  width: 0;
  left: 50%;
}
#intro ul {
  list-style-type: circle;
}
#intro ul, #intro ol {
  font-family: "Circular";
  font-weight: 300;
  padding-left: 24px;
}

#tags-wrapper-detail {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 12px;
  position: sticky;
  top: 0;
  background-color: #ffffff;
  padding-top: 25px;
  padding-bottom: 105px;
}

#tags-edit-box {
  background-color: #F5F5F5;
  border-radius: 10px;
  padding: 25px 20px;
  overflow: hidden;
}
#tags-edit-box .add-tag {
  position: relative;
  margin-top: 35px;
  margin-bottom: 35px;
}
#tags-edit-box .add-tag label {
  font-size: 16px;
  font-weight: 300;
  position: absolute;
  top: 7px;
  left: 15px;
  font-family: "Circular";
  transition: all 0.35s ease-in-out;
  color: #212934;
  font-weight: 300;
  height: 23px;
  overflow: hidden;
  cursor: text;
}
#tags-edit-box .add-tag label span {
  position: relative;
  top: unset;
  left: unset;
  right: unset;
  opacity: 1;
  transition: none;
  display: block;
  transition: top 0.35s ease-in-out;
  top: 0;
  cursor: text;
}
#tags-edit-box .add-tag label span:last-of-type {
  color: #FF0040;
}
#tags-edit-box .add-tag input {
  border: 1px solid #E4E4E4;
  background-color: #F5F5F5;
  border-radius: 5px;
  width: 100%;
  padding: 6px 15px;
  font-size: 16px;
  font-weight: 300;
  padding-right: 28px;
  transition: all 0.35s ease-in-out;
}
#tags-edit-box .add-tag input:focus {
  outline: 0;
  border: 1px solid #212934;
  background-color: #ffffff;
}
#tags-edit-box .add-tag span {
  position: absolute;
  right: 10px;
  top: 11px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.35s ease-in-out;
}
#tags-edit-box .add-tag.active label {
  top: -22px;
  left: 0px;
  font-size: 14px;
  color: #000000;
  font-weight: 300;
}
#tags-edit-box .add-tag.active input {
  border: 1px solid #212934;
  background-color: #ffffff;
}
#tags-edit-box .add-tag.active span {
  opacity: 1;
}
#tags-edit-box .existing-tags {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  padding-left: 20px;
  direction: ltr;
}
#tags-edit-box .existing-tags-wrapper {
  overflow-y: scroll;
  direction: rtl;
  height: 160px;
}
#tags-edit-box .existing-tags-wrapper::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: #D1D5DB;
  border-radius: 10px;
}
#tags-edit-box .existing-tags-wrapper::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
  border-radius: 10px;
}
#tags-edit-box .existing-tags-wrapper::-webkit-scrollbar-thumb {
  background-color: #212934;
  border-radius: 10px;
}
#tags-edit-box .existing-tag {
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #E4E4E4;
  background-color: #ffffff;
  direction: ltr;
  display: flex;
  flex-direction: row;
  height: 22px;
  transition: border 0.6s ease-in-out, background-color 0.6s ease-in-out;
}
#tags-edit-box .existing-tag:hover {
  border: 1px solid #F7DF58;
  background-color: #F7DF58;
}
#tags-edit-box .existing-tag.copied {
  border: 1px solid #E4E4E4;
  background-color: rgba(0, 212, 32, 0.5);
  transition-delay: 1s;
}
#tags-edit-box .existing-tag.delete-tagged {
  border: 1px solid #FF0040;
  background-color: rgba(255, 0, 64, 0.5);
}
#tags-edit-box .existing-tag a {
  font-size: 16px;
  font-weight: 300;
  color: #212934;
  text-decoration: none;
  display: block;
}
#tags-edit-box .existing-tag a span {
  position: relative;
}
#tags-edit-box .existing-tag span {
  position: relative;
  top: 3px;
  margin-left: 5px;
  cursor: pointer;
}
#tags-edit-box.error #add-tag-input, #tags-edit-box.error .delete-input-value {
  animation: horizontal-shaking 0.35s ease-in-out 2;
}
@keyframes horizontal-shaking {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(20px);
  }
  50% {
    transform: translateX(-20px);
  }
  75% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}
#tags-edit-box.error .add-tag label span {
  top: -23px;
}
#tags-edit-box.error .add-tag.ctive .add-tag label span {
  top: -18px;
}

#ankermenu {
  height: 190px;
  background-color: #ffffff;
  overflow-y: scroll;
  position: relative;
  direction: rtl;
  border-top: 40px solid #ffffff;
  margin-left: 20px;
}
#ankermenu::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: #D1D5DB;
  border-radius: 10px;
}
#ankermenu::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
  border-radius: 10px;
}
#ankermenu::-webkit-scrollbar-thumb {
  background-color: #212934;
  border-radius: 10px;
}
#ankermenu ul {
  direction: ltr;
  list-style-type: none;
  padding-left: 12px;
  margin-top: 0;
  margin-bottom: 0;
}
#ankermenu ul li {
  margin-bottom: 30px;
}
#ankermenu ul li a {
  color: #E4E4E4;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 30px;
  display: block;
  transition: all 0.3s ease-in-out;
}
#ankermenu ul li a:hover, #ankermenu ul li a.active {
  color: #212934;
}
#ankermenu ul:last-of-type {
  margin-bottom: 0;
}

#searchbar-content {
  position: sticky;
  top: 162px;
  display: flex;
  flex-direction: row;
  padding-top: 40px;
  padding-bottom: 40px;
  column-gap: 40px;
  justify-content: space-between;
  background-color: #ffffff;
  z-index: 40;
}
#searchbar-content .searchbar {
  flex: 1;
  position: relative;
}
#searchbar-content .searchbar label {
  font-size: 18px;
  font-weight: 300;
  position: absolute;
  top: 7px;
  left: 40px;
  font-family: "Circular";
  transition: all 0.35s ease-in-out;
  color: #212934;
  font-weight: 300;
}
#searchbar-content .searchbar span {
  position: absolute;
  top: 11px;
  left: 15px;
}
#searchbar-content .searchbar span svg {
  width: 17px;
  height: 17px;
}
#searchbar-content .searchbar span:last-of-type {
  position: absolute;
  right: 10px;
  left: unset;
  opacity: 0;
  cursor: pointer;
  transition: all 0.35s ease-in-out;
}
#searchbar-content .searchbar input:not(.choices__input) {
  border: 1px solid #E4E4E4;
  background-color: #ffffff;
  border-radius: 10px;
  width: 100%;
  padding: 6px 14px;
  padding-left: 39px;
  font-size: 18px;
  font-weight: 300;
  transition: all 0.35s ease-in-out;
}
#searchbar-content .searchbar input:not(.choices__input).border {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
#searchbar-content .searchbar input:not(.choices__input):focus {
  outline: 0;
  border: 1px solid #212934;
  background-color: #ffffff;
}
#searchbar-content.active label {
  top: -22px;
  left: 0px;
  font-size: 14px;
  color: #000000;
  font-weight: 300;
}
#searchbar-content.active input {
  border: 1px solid #212934;
  background-color: #ffffff;
}
#searchbar-content.active span:last-of-type {
  opacity: 1;
}
#searchbar-content.searchbar-content-start, #searchbar-content.searchbar-content-overview {
  padding-top: 30px;
  padding-bottom: 0;
  top: 132px;
  gap: 20px;
  z-index: 41;
  top: 0px;
  background-color: #ffffff;
}
#searchbar-content.searchbar-content-start .searchbar, #searchbar-content.searchbar-content-overview .searchbar {
  flex: none;
}
#searchbar-content.searchbar-content-start .searchbar:first-of-type, #searchbar-content.searchbar-content-overview .searchbar:first-of-type {
  flex: 1;
}
#searchbar-content.searchbar-content-start .searchbar:first-of-type input, #searchbar-content.searchbar-content-overview .searchbar:first-of-type input {
  border-radius: 5px;
}
#searchbar-content.searchbar-content-start .searchbar:first-of-type input.border, #searchbar-content.searchbar-content-overview .searchbar:first-of-type input.border {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
#searchbar-content.searchbar-content-start.active .searchbar:first-of-type input, #searchbar-content.searchbar-content-overview.active .searchbar:first-of-type input {
  border: 1px solid #212934;
}
#searchbar-content.searchbar-content-start .searchbar-keywords, #searchbar-content.searchbar-content-overview .searchbar-keywords {
  border: 1px solid #E4E4E4;
  border-radius: 5px;
  width: 22.2%;
  position: relative;
  padding: 5px 15px;
  transition: all 0.35s ease-in-out;
}
#searchbar-content.searchbar-content-start .searchbar-keywords .searchbar-keywords-icon, #searchbar-content.searchbar-content-overview .searchbar-keywords .searchbar-keywords-icon {
  width: 16px;
  position: absolute;
  left: 15px;
  top: 13px;
}
#searchbar-content.searchbar-content-start .searchbar-keywords .searchbar-keywords-label, #searchbar-content.searchbar-content-overview .searchbar-keywords .searchbar-keywords-label {
  position: absolute;
  left: 37px;
  top: 6px;
  transition: all 0.35s ease-in-out;
}
#searchbar-content.searchbar-content-start .searchbar-keywords .searchbar-keywords-label p, #searchbar-content.searchbar-content-overview .searchbar-keywords .searchbar-keywords-label p {
  font-size: 18px;
  font-weight: 300;
  padding: 0;
  margin: 0;
  color: #212934;
  transition: all 0.35s ease-in-out;
}
#searchbar-content.searchbar-content-start .searchbar-keywords .searchbar-keywords-label.active, #searchbar-content.searchbar-content-overview .searchbar-keywords .searchbar-keywords-label.active {
  top: -22px;
  left: 0px;
}
#searchbar-content.searchbar-content-start .searchbar-keywords .searchbar-keywords-label.active p, #searchbar-content.searchbar-content-overview .searchbar-keywords .searchbar-keywords-label.active p {
  font-size: 14px;
}
#searchbar-content.searchbar-content-start .searchbar-keywords.activep, #searchbar-content.searchbar-content-overview .searchbar-keywords.activep {
  border: 1px solid #212934;
  color: #212934;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#searchbar-content.searchbar-content-start .searchbar-keywords.activep .searchbar-keywords-label p, #searchbar-content.searchbar-content-overview .searchbar-keywords.activep .searchbar-keywords-label p {
  color: #000000;
}
#searchbar-content.searchbar-content-start .searchbar-keywords .choices, #searchbar-content.searchbar-content-overview .searchbar-keywords .choices {
  position: absolute;
  background-color: transparent;
  left: 0;
  width: 100%;
  top: 0;
  bottom: 0;
}
#searchbar-content.searchbar-content-start .searchbar-keywords .choices-scroller, #searchbar-content.searchbar-content-overview .searchbar-keywords .choices-scroller {
  position: absolute;
  width: 250px;
  height: 97%;
  background-color: transparent;
  top: 1px;
  left: 37px;
  overflow-y: hidden;
  overflow-x: scroll;
  display: flex;
  column-gap: 7px;
  direction: ltr;
}
#searchbar-content.searchbar-content-start .searchbar-keywords .choices-scroller::-webkit-scrollbar-track, #searchbar-content.searchbar-content-overview .searchbar-keywords .choices-scroller::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: #ffffff;
  border-radius: 10px;
}
#searchbar-content.searchbar-content-start .searchbar-keywords .choices-scroller::-webkit-scrollbar, #searchbar-content.searchbar-content-overview .searchbar-keywords .choices-scroller::-webkit-scrollbar {
  height: 1px;
  background-color: #ffffff;
  border-radius: 10px;
}
#searchbar-content.searchbar-content-start .searchbar-keywords .choices-scroller::-webkit-scrollbar-thumb, #searchbar-content.searchbar-content-overview .searchbar-keywords .choices-scroller::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border-radius: 10px;
}
#searchbar-content.searchbar-content-start .searchbar-areas, #searchbar-content.searchbar-content-overview .searchbar-areas {
  border: 1px solid #E4E4E4;
  border-radius: 5px;
  width: 14.2%;
  transition: all 0.35s ease-in-out;
}
#searchbar-content.searchbar-content-start .searchbar-areas .searchbar-areas-icon, #searchbar-content.searchbar-content-overview .searchbar-areas .searchbar-areas-icon {
  width: 16px;
  position: absolute;
  left: 15px;
  top: 10px;
}
#searchbar-content.searchbar-content-start .searchbar-areas .searchbar-areas-label, #searchbar-content.searchbar-content-overview .searchbar-areas .searchbar-areas-label {
  position: absolute;
  left: 37px;
  top: 6px;
  transition: all 0.35s ease-in-out;
}
#searchbar-content.searchbar-content-start .searchbar-areas .searchbar-areas-label p, #searchbar-content.searchbar-content-overview .searchbar-areas .searchbar-areas-label p {
  font-size: 18px;
  font-weight: 300;
  padding: 0;
  margin: 0;
  color: #212934;
  transition: all 0.35s ease-in-out;
}
#searchbar-content.searchbar-content-start .searchbar-areas .searchbar-areas-label.active, #searchbar-content.searchbar-content-overview .searchbar-areas .searchbar-areas-label.active {
  top: -22px;
  left: 0px;
}
#searchbar-content.searchbar-content-start .searchbar-areas .searchbar-areas-label.active p, #searchbar-content.searchbar-content-overview .searchbar-areas .searchbar-areas-label.active p {
  font-size: 14px;
}
#searchbar-content.searchbar-content-start .searchbar-areas.activep, #searchbar-content.searchbar-content-overview .searchbar-areas.activep {
  border: 1px solid #212934;
  color: #000000;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#searchbar-content.searchbar-content-start .searchbar-areas.activep .searchbar-areas-label, #searchbar-content.searchbar-content-overview .searchbar-areas.activep .searchbar-areas-label {
  color: #000000;
}
#searchbar-content.searchbar-content-start .searchbar-areas .choices, #searchbar-content.searchbar-content-overview .searchbar-areas .choices {
  position: absolute;
  background-color: transparent;
  left: 0;
  width: 100%;
  top: 0;
  bottom: 0;
}
#searchbar-content.searchbar-content-start .searchbar-areas .choices-scroller, #searchbar-content.searchbar-content-overview .searchbar-areas .choices-scroller {
  position: absolute;
  width: 124px;
  height: 97%;
  background-color: transparent;
  top: 1px;
  left: 37px;
  overflow-y: hidden;
  overflow-x: scroll;
  display: flex;
  column-gap: 7px;
  direction: ltr;
}
#searchbar-content.searchbar-content-start .searchbar-areas .choices-scroller::-webkit-scrollbar-track, #searchbar-content.searchbar-content-overview .searchbar-areas .choices-scroller::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: #ffffff;
  border-radius: 10px;
}
#searchbar-content.searchbar-content-start .searchbar-areas .choices-scroller::-webkit-scrollbar, #searchbar-content.searchbar-content-overview .searchbar-areas .choices-scroller::-webkit-scrollbar {
  height: 1px;
  background-color: #ffffff;
  border-radius: 10px;
}
#searchbar-content.searchbar-content-start .searchbar-areas .choices-scroller::-webkit-scrollbar-thumb, #searchbar-content.searchbar-content-overview .searchbar-areas .choices-scroller::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border-radius: 10px;
}
#searchbar-content.searchbar-content-start.active .choices input, #searchbar-content.searchbar-content-overview.active .choices input {
  border: none !important;
  background-color: transparent !important;
}
#searchbar-content.searchbar-content-overview {
  padding-top: 40px;
  z-index: 45;
}

.choices .choices__list--dropdown {
  border: 1px solid #E4E4E4;
  transition: all 0.35s ease-in-out;
}
.choices.is-open .choices__list--dropdown {
  border: 1px solid #212934;
}
.choices .choices__inner {
  cursor: text;
  padding: 0;
  min-height: unset;
  border-radius: unset;
  font-size: 18px;
  border: none;
  background-color: transparent;
}
.choices .choices__inner .choices__input {
  width: 1px;
  background-color: transparent;
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 300;
  border: none;
  outline: none;
  flex: 0 0 auto;
  color: #212934;
}
.choices .choices__inner .choices__input::placeholder {
  font-size: 18px;
  font-weight: 300;
  color: #212934;
}
.choices .choices__inner .choices__list {
  position: relative;
  background-color: transparent;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  column-gap: 7px;
  width: max-content !important;
  flex: 0 0 auto;
  align-items: center;
}
.choices .choices__inner .choices__list .choices__item {
  cursor: default;
}
.choices .choices__inner .choices__list .choices__item.is-highlighted {
  background-color: #F7DF58 !important;
  border: 1px solid #F7DF58 !important;
}
.choices .choices__list--dropdown {
  left: -1px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #E4E4E4;
}
.choices .choices__list--dropdown .choices__list {
  background-color: #ffffff;
}
.choices .choices__list--dropdown .choices__list .choices__item {
  font-size: 16px;
  font-weight: 300;
  padding: 8px 15px;
  background-color: #ffffff;
  transition: background-color 0.35s ease-in-out;
  flex: 0 0 auto;
  white-space: nowrap;
}
.choices .choices__list--dropdown .choices__list .choices__item:hover, .choices .choices__list--dropdown .choices__list .choices__item.is-highlighted {
  background-color: #F7DF58 !important;
}
.choices .choices__list--dropdown .choices__list .choices__item:after {
  content: unset;
}
.choices .choices__list--dropdown .choices__list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: #ffffff;
  border-radius: 10px;
}
.choices .choices__list--dropdown .choices__list::-webkit-scrollbar {
  width: 6px;
  background-color: #ffffff;
  border-radius: 10px;
}
.choices .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
  background-color: #F5F5F5;
  border-radius: 10px;
}
.choices .choices__list--multiple .choices__item {
  color: #212934;
  font-size: 12px;
  border: 1px solid #F7DF58;
  background-color: #F7DF58;
  margin: 0;
  font-weight: 300;
  padding: 5px 9px;
  border-radius: 5px;
  cursor: pointer;
}
.choices .choices__list--multiple .choices__item.is-hightlighted {
  border: 1px solid #F7DF58;
  background-color: #F7DF58;
}
.choices .choices__list--multiple .choices__item .choices__button {
  cursor: pointer;
  opacity: 1;
  margin: 0;
  border-left: none;
  background-size: 13px;
  padding-left: 11px;
  background-image: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.8706 3.87653L3.62366 11.1235" stroke="%23212934" stroke-linecap="round"></path><path d="M10.8706 11.1235L3.62366 3.87653" stroke="%23212934" stroke-linecap="round"></path></svg>');
  overflow: hidden;
}

.tabs-content-wrapper {
  margin-top: 30px;
}
.tabs-content-wrapper .tabs-content {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.35s ease-in-out;
  position: absolute;
  width: 100%;
  pointer-events: none;
  height: 0;
}
.tabs-content-wrapper .tabs-content.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
  height: auto;
}
.tabs-content-wrapper .data-overview-block {
  border: 1px solid #E4E4E4;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 50px;
  overflow: hidden;
  transition: background-color 0.35s ease-in-out;
  display: block;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.tabs-content-wrapper .data-overview-block.search-inactive {
  display: none;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content h2 {
  margin-top: 0px;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content h2 span {
  font-size: 14px;
  font-weight: 300;
  color: #E4E4E4;
  margin-left: 2px;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  margin-top: 25px;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content p {
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 20px;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content p:last-of-type {
  margin-bottom: 0;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content strong {
  font-weight: 500;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content strong em {
  font-style: italic;
  font-weight: 500;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content em {
  font-style: italic;
  font-weight: 300;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content em strong {
  font-style: italic;
  font-weight: 500;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content ul {
  margin-bottom: 20px;
  margin-top: 20px;
  padding-left: 15px;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content ul li {
  font-size: 16px;
  font-weight: 300;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content a {
  color: #212934;
  text-decoration: none;
  position: relative;
  transition: color 0.35s ease-in-out;
  isolation: isolate;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content a:before {
  background-color: #F7DF58;
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 2px;
  left: 0;
  z-index: -1;
  transition: height 0.35s ease-in-out, color 0.1s ease-in-out;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content a:after {
  background-color: #212934;
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 2px;
  left: 0;
  transition: all 0.35s ease-in-out;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content a:hover:before {
  height: 19px;
  background-color: #F7DF58;
  transition: height 0.35s ease-in-out, color 0.35s ease-in-out;
}
.tabs-content-wrapper .data-overview-block .data-overview-block-content a:hover:after {
  width: 0;
  left: 50%;
}
.tabs-content-wrapper .data-overview-block .ticket-tags-wrapper {
  margin-top: 30px;
}
.tabs-content-wrapper .data-overview-block .data-path-copy {
  margin: 0;
  position: absolute;
  bottom: 0;
  font-size: 12px;
  font-weight: 300;
  background: linear-gradient(to right, #F7DF58 0%, #F7DF58 60%, transparent 100%);
  padding-left: 10px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-right: 80px;
  max-width: 30%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  left: 0;
  transition: all 0.35s ease-in-out;
}
.tabs-content-wrapper .data-overview-block:hover {
  background-color: rgba(245, 245, 245, 0.4);
}
.tabs-content-wrapper .data-overview-block:hover .data-path-copy {
  opacity: 1;
}
.tabs-content-wrapper.tabs-content-wrapper-overview {
  margin-top: 30px;
}

.add-data-totab {
  position: sticky;
  top: 170px;
  background-color: #ffffff;
  z-index: 41;
  padding-top: 0;
  padding-bottom: 25px;
  display: flex;
  justify-content: flex-end;
}

.br-element-wrapper {
  border: 1px solid #ffffff;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 15px;
  display: flex;
  column-gap: 20px;
  flex-direction: row;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.35s ease-in-out;
}
.br-element-wrapper > div:nth-of-type(2) {
  width: 25%;
  display: flex;
  justify-content: center;
  align-self: center;
}
.br-element-wrapper h3 {
  font-size: 16px !important;
  font-weight: 400 !important;
  margin-top: 0;
  margin-bottom: 10px;
}
.br-element-wrapper p {
  font-size: 14px !important;
  font-weight: 300 !important;
}
.br-element-wrapper .copy-br-element {
  display: none;
}
.br-element-wrapper:hover {
  background-color: #F7DF58;
  border: 1px solid #F7DF58;
}

.content-box {
  background-color: #F8F8F8;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
}
.content-box .content-box-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #E4E4E4;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.content-box .content-box-header h2 {
  font-size: 18px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 0;
}
.content-box .content-box-header .content-box-header-edit {
  display: flex;
  flex-direction: row;
  column-gap: 10px;
}
.content-box .content-box-header .content-box-header-edit a {
  padding: 9px 12px;
}
.content-box .content-box-header .content-box-header-edit a svg {
  width: 16px;
  height: auto;
}
.content-box .content-box-content p {
  font-size: 16px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 20px;
}
.content-box .content-box-content p:last-of-type {
  margin-bottom: 0;
}
.content-box pre code.hljs {
  padding: 15px;
  border-radius: 10px;
  background-color: #F3F0EE;
  line-height: 1.5;
  font-size: 13px;
  font-family: monospace;
  font-weight: normal !important;
  margin-top: 40px;
}
.content-box pre code.hljs::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: #D1D5DB;
  border-radius: 10px;
}
.content-box pre code.hljs::-webkit-scrollbar {
  height: 6px;
  background-color: #F5F5F5;
  border-radius: 10px;
}
.content-box pre code.hljs::-webkit-scrollbar-thumb {
  background-color: #212934;
  border-radius: 10px;
}
.content-box pre code.hljs .hljs-name {
  color: #007BFF;
}
.content-box .content-box-info {
  padding-top: 30px;
}
.content-box .content-box-info a {
  text-decoration: none;
  font-size: 16px;
  font-weight: 300;
  color: #E4E4E4;
}
.content-box-rte .content-box-content h3 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
  margin-top: 30px;
}
.content-box-rte .content-box-content h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  margin-top: 25px;
}
.content-box-rte .content-box-content strong {
  font-weight: 500;
}
.content-box-rte .content-box-content strong em {
  font-style: italic;
  font-weight: 500;
}
.content-box-rte .content-box-content em {
  font-style: italic;
  font-weight: 300;
}
.content-box-rte .content-box-content em strong {
  font-style: italic;
  font-weight: 500;
}
.content-box-rte .content-box-content ul {
  margin-bottom: 20px;
  margin-top: 20px;
  padding-left: 19px;
}
.content-box-rte .content-box-content ul li {
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 10px;
}
.content-box-rte .content-box-content ul li:last-of-type {
  margin-bottom: 0;
}
.content-box-rte .content-box-content ul li::marker {
  color: #E4E4E4;
}
.content-box-rte .content-box-content ul.linkliste {
  margin-bottom: 0;
}
.content-box-rte .content-box-content ul.documents {
  margin-bottom: 0;
  list-style-type: none;
  padding-left: 0;
}
.content-box-rte .content-box-content a {
  color: #212934;
  text-decoration: none;
  position: relative;
  transition: color 0.35s ease-in-out;
  isolation: isolate;
}
.content-box-rte .content-box-content a:before {
  background-color: #F7DF58;
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 2px;
  left: 0;
  z-index: -1;
  transition: height 0.35s ease-in-out, color 0.1s ease-in-out;
}
.content-box-rte .content-box-content a:after {
  background-color: #212934;
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 2px;
  left: 0;
  transition: all 0.35s ease-in-out;
}
.content-box-rte .content-box-content a:hover:before {
  height: 19px;
  background-color: #F7DF58;
  transition: height 0.35s ease-in-out, color 0.35s ease-in-out;
}
.content-box-rte .content-box-content a:hover:after {
  width: 0;
  left: 50%;
}
.content-box-image picture img {
  width: 100%;
  height: auto;
  margin-top: 30px;
}
.content-box-image picture:first-of-type img {
  margin-top: 0px;
}

#login-container {
  background-color: #F7DF58;
  width: 100%;
  height: 100vh;
}
#login-container .login-container-logo {
  display: inline-block;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  margin-top: clamp(20px, (100vh - 543px) / 3 * 2, 200px);
  margin-bottom: clamp(20px, (100vh - 543px) / 3 * 1, 100px);
}
#login-container .login-container-logo svg {
  height: clamp(60px, (100vh - 543px) / 3 * 1, 100px);
}
#login-container .login-container-inner {
  background-color: #ffffff;
  border-radius: 10px;
  width: 650px;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  padding: 50px;
}
#login-container .login-container-inner.login-fail {
  animation: horizontal-shaking 0.35s ease-in-out 2;
}
@keyframes horizontal-shaking {
  0% {
    transform: translateX(-50%);
  }
  25% {
    transform: translateX(calc(-50% + 20px));
  }
  50% {
    transform: translateX(calc(-50% - 20px));
  }
  75% {
    transform: translateX(calc(-50% + 20px));
  }
  100% {
    transform: translateX(-50%);
  }
}
#login-container form {
  margin: 0;
}
#login-container h1 {
  font-size: 25px;
  font-weight: 500;
  font-family: "Circular";
  margin-top: 0;
  margin-bottom: 25px;
}
#login-container p {
  margin-top: 0;
  margin-bottom: 0;
}
#login-container .lostpassword-alert-container {
  background-color: #ffffff;
  position: absolute;
  width: calc(100% - 100px);
  max-width: 0;
  left: 0;
  top: 0;
  height: calc(100% - 100px);
  max-height: 0;
  border-radius: 10px;
  opacity: 0;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.6s ease-in-out;
}
#login-container .lostpassword-alert-container .lostpassword-alert-container-inner a {
  text-decoration: none;
  color: #212934;
  font-family: "Circular";
  font-weight: 300;
  display: block;
  text-align: center;
  margin-top: 40px;
  font-size: 22px;
}
#login-container .lostpassword-alert-container .lostpassword-alert {
  font-size: 25px;
  font-weight: 500;
  font-family: "Circular";
  text-align: center;
}
#login-container .lostpassword-alert-container.active {
  max-width: 900px;
  max-height: 500px;
  opacity: 1;
  z-index: 90;
}
#login-container .lostpassword-alert-container-reset {
  height: 230px;
  background-color: #ffffff;
  position: absolute;
  width: calc(100% - 100px);
  left: 0;
  top: 0;
  border-radius: 10px;
  opacity: 0;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.6s ease-in-out;
}
#login-container .lostpassword-alert-container-reset .lostpassword-alert-container-inner a {
  text-decoration: none;
  color: #212934;
  font-family: "Circular";
  font-weight: 300;
  display: block;
  text-align: center;
  margin-top: 40px;
  font-size: 22px;
}
#login-container .lostpassword-alert-container-reset .lostpassword-alert {
  font-size: 25px;
  font-weight: 500;
  font-family: "Circular";
  text-align: center;
}
#login-container .lostpassword-alert-container-reset.active {
  opacity: 1;
}
#login-container .lostpassword-alert-container-reset-inner {
  background-color: #ffffff;
  position: absolute;
  width: calc(100% - 100px);
  max-width: 0;
  left: 0;
  top: 0;
  height: calc(100% - 100px);
  max-height: 0;
  border-radius: 10px;
  opacity: 0;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.6s ease-in-out;
}
#login-container .lostpassword-alert-container-reset-inner .lostpassword-alert-container-inner a {
  text-decoration: none;
  color: #212934;
  font-family: "Circular";
  font-weight: 300;
  display: block;
  text-align: center;
  margin-top: 40px;
  font-size: 22px;
}
#login-container .lostpassword-alert-container-reset-inner .lostpassword-alert {
  font-size: 25px;
  font-weight: 500;
  font-family: "Circular";
  text-align: center;
}
#login-container .lostpassword-alert-container-reset-inner.active {
  max-width: 900px;
  max-height: 500px;
  opacity: 1;
}
#login-container label {
  font-size: 18px;
  font-weight: normal;
  font-family: "Circular";
  color: #D1D5DB;
  display: block;
  margin-top: 30;
  margin-bottom: 12px;
  transition: color 0.3s ease-in-out;
}
#login-container label.active {
  color: #212934;
}
#login-container input:not([type=submit]) {
  display: block;
  font-size: 18px;
  font-weight: 300;
  font-family: "Circular";
  color: #212934;
  width: 100%;
  border: 1px solid #D1D5DB;
  border-radius: 5px;
  padding: 11px;
  transition: border 0.3s ease-in-out;
}
#login-container input:not([type=submit]):focus {
  outline: none;
  box-shadow: none;
  border: 1px solid #212934;
}
#login-container .error label {
  color: #212934;
}
#login-container .error input:not([type=submit]) {
  border: 1px solid red;
}
#login-container .active label {
  color: #212934;
}
#login-container .active input:not([type=submit]) {
  border: 1px solid #212934;
}
#login-container .reset-pw-wrapper {
  position: absolute;
  bottom: 114px;
  right: 50px;
}
#login-container .reset-pw-wrapper a {
  font-size: 12px;
  font-weight: 500;
  font-family: "Circular";
  text-decoration: none;
  display: inline-block;
  color: #212934;
  position: relative;
}
#login-container .reset-pw-wrapper a:after {
  content: "";
  width: 0;
  height: 1px;
  background-color: #212934;
  left: 50%;
  bottom: 0;
  position: absolute;
  transition: all 0.35s ease-in-out;
}
#login-container .reset-pw-wrapper a:hover:after {
  content: "";
  width: 100%;
  left: 0;
}
#login-container .login-submit {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
#login-container .login-submit a {
  font-size: 18px;
  text-decoration: none;
  color: #212934;
  font-family: "Circular";
  font-weight: 300;
  margin-top: 55px;
  position: relative;
}
#login-container .login-submit a:after {
  content: "";
  width: 0;
  height: 1px;
  background-color: #212934;
  left: 50%;
  bottom: 7px;
  position: absolute;
  transition: all 0.35s ease-in-out;
}
#login-container .login-submit a:hover:after {
  content: "";
  width: 100%;
  left: 0;
}
#login-container .login-submit-wp {
  justify-content: space-between;
}
#login-container [type=submit] {
  background-color: #F7DF58;
  border: 1px solid #F7DF58;
  border-radius: 5px;
  color: #212934;
  font-size: 18px;
  font-weight: 300;
  font-family: "Circular";
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 50px;
  cursor: pointer;
  transition: all 0.35s ease-in-out;
}
#login-container [type=submit]:hover {
  border: 1px solid #E7E7E7;
  background-color: #E7E7E7;
}

/*

#cpt-doc-startseite {
	padding-top: 63px;
}











#main-nav-container {
	background-color: $grey-light;
	border-radius: 10px;
	margin-top: 50px;
	margin-right: 55px;
	padding: 30px;
	position: relative;
    padding-bottom: 247px;

	.logo {
		margin-bottom: 96px;
		display: block;
	}

	nav {

		div {

			p {
				font-size: 16px;
				font-weight: 500;
				font-family: 'Circular';
				display: block;
				margin-bottom: 0;
				color: $text;
				border-bottom: 1px solid $text;
				padding-left: 21px;
				padding-right: 21px;
				padding-bottom: 9px;
				padding-top: 9px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				cursor: pointer;

				span {
					position: relative;
					top: 5px;

					svg {
						transform: rotate(0deg);
						transition: all .9s ease-in-out;
					}
				}
			}

			&.active {
				p {

					span {

						svg {
							transform: rotate(45deg);
						}
					}
				}
			}
		}

		.menudetail {
			margin-top: 0;
			margin-bottom: 0;
			overflow: hidden;
			max-height: 0;
			transition: all .9s ease-in-out;

			&:last-of-type {
				ul {
					margin-bottom: 0;
				}
			}

			&.active {

				ul {
					li {
						opacity: 1;
					}
				}
			}
		}

		ul {
			list-style-type: none;
			padding-left: 0;
			margin-top: 30px;
			margin-bottom: 70px;

			li {
				margin-bottom: 21px;
				border-radius: 5px;
				opacity: 0;
				transition: background-color .3s ease-in-out, opacity .3s ease-in-out;

				a {
					font-size: 20px;
					font-weight: 300;
					font-family: 'Circular';
					text-decoration: none;
					color: $text;
					padding-left: 21px;
					display: block;
					padding-top: 7px;
    				padding-bottom: 7px;
				}

				&.active{
					background-color: #E7E7E7;

					a {
						font-weight: 500;
					}
				}

				&:hover {
					background-color: #E7E7E7;
				}
			}
		}


	}

	.login-bar {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		justify-items: start;
		position: absolute;
		bottom: 30px;
		width: calc(100% - 60px);

		img {
			width: 47px;
			height: 47px;
			border-radius: 50%;
			margin-right: 20px;
			object-fit: cover;
			border-radius: 50%;
		}

		h2 {
			margin-top: 0;
			margin-bottom: 0;
			font-size: 20px;
			font-weight: normal;
			font-family: 'Circular';
			position: relative;
    		top: 10px;
		}

		.logout {
			display: flex;
			flex-grow: 1;
			justify-content: flex-end;

			a {
				padding-top: 13px;
			}
		}
	}
}



























main {

	h1 {
		margin-top: 0px;
		margin-bottom: 68px;
		font-size: 60px;
		font-weight: 500;
		font-family: "Circular";
	}

	h2 {
		font-size: 18px;
		font-weight: normal;
		font-family: 'Circular';
		margin-top: 11px;
		margin-bottom: 0;
	}

	.intro {
		p {
			font-size: 16px;
			font-family: 'Circular';
			font-weight: 300;
			margin-top: 11px;
		}
	}
}

#cpt-doc-bafr-container {
	padding-top: 80px;
}

.overview-container {
	border-top: 1px solid $grey;
	padding-top: 55px;
	margin-top: 23px;

	&__box {
		border: 1px solid $grey;
		border-radius: 10px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 25px;
		padding-bottom: 25px;
		margin-bottom: 43px;
		position: relative;
	}
}

.search-bar {
	display: flex;
    flex-direction: row;
    gap: 11px;

	&-searchinput {
		display: flex;
		flex-grow: 1;
		position: relative;

		&:after {
			content: url('data:image/svg+xml,<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.731 12.365C4.13233 12.365 2.77733 11.8097 1.666 10.699C0.555333 9.589 0 8.23433 0 6.635C0 5.03567 0.555333 3.68067 1.666 2.57C2.77667 1.45933 4.13167 0.904333 5.731 0.904999C7.33033 0.905666 8.685 1.461 9.795 2.571C10.905 3.681 11.4603 5.03567 11.461 6.635C11.461 7.32967 11.338 8.002 11.092 8.652C10.846 9.302 10.5227 9.858 10.122 10.32L16.031 16.227C16.1243 16.3203 16.1743 16.4353 16.181 16.572C16.187 16.7073 16.137 16.8283 16.031 16.935C15.9243 17.0417 15.8063 17.095 15.677 17.095C15.5477 17.095 15.4297 17.0417 15.323 16.935L9.415 11.027C8.915 11.453 8.34 11.7827 7.69 12.016C7.04 12.2493 6.38667 12.366 5.73 12.366M5.73 11.366C7.05667 11.366 8.177 10.9093 9.091 9.996C10.0043 9.08267 10.461 7.96233 10.461 6.635C10.461 5.30767 10.0047 4.18767 9.092 3.275C8.17933 2.36233 7.05933 1.90567 5.732 1.905C4.40467 1.905 3.28433 2.36167 2.371 3.275C1.45767 4.18833 1.00067 5.30833 1 6.635C0.999333 7.96167 1.456 9.08167 2.37 9.995C3.284 10.9083 4.404 11.365 5.73 11.365" fill="black"/></svg>');
			position: absolute;
			left: 15px;
			top: 12px;
		}

		input {
			width: 100%;
			border-radius: 5px;
			border: 1px solid $grey;
			font-size: 18px;
			font-family: 'Circular';
			font-weight: 300;
			padding-left: 65px;
			color: $text;

			&::placeholder {
				color: $text;
			}

			&:focus, &:active {
				outline: none;
				box-shadow: none;
			}
		}
	}

	&.search-bar-detail {
		input {
			height: 42px;
		}
	}

	&-searchselect {
		width: 140px;
		border-radius: 5px;

		border: 1px solid $grey;
		height: 40px;
	}
}

.w3c_label-container {

	.w3c_label {
		background-color: rgba($text, 0.1);
		border-radius: 10px;
		text-decoration: none;
		color: $text;
		font-family: 'Circular';
		font-size: 14px;
		font-weight: 500;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-right: 5px;
		display: inline-block;

		&:last-of-type {
			margin-right: 0;
		}


	}
}

.workart-container {
	margin-bottom: 0;
	margin-top: 30px;

	.workart_item {
		font-family: 'Circular';
		font-size: 14px;
		font-weight: 500;
		background-color: rgba($text, 0.1);
		color: $text;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		text-decoration: none;
		border-radius: 10px;
		margin-right: 10px;
		display: inline-block;

		&:last-of-type {
			margin-right: 0;
		}

		&.design {
			background-color: rgba($red, 0.1);
			color: $red;
		}

		&.entwicklung {
			background-color: rgba($blue, 0.1);
			color: $blue;
		}

		&.content {
			background-color: rgba($green, 0.1);
			color: $green;
		}
	}
}

.hided-container {
	max-height: 0;
    overflow: hidden;
    border-top: 1px solid transparent;
	transition: all .6s ease-in-out;

	&.active {
		border-top: 1px solid $grey;
		max-height: 100%;
	}

}

.todo-list {
	padding-left: 20px;
	margin-top: 30px;
	margin-bottom: 0;

	li {
		font-size: 16px;
		font-weight: 300;
		font-family: 'Circular';
		list-style-image: url('data:image/svg+xml,<svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.90874 2.17459C7.83813 2.10879 7.78149 2.02944 7.7422 1.94127C7.70292 1.8531 7.68179 1.75793 7.68009 1.66142C7.67839 1.56492 7.69614 1.46905 7.73229 1.37956C7.76844 1.29006 7.82225 1.20876 7.8905 1.14051C7.95875 1.07226 8.04005 1.01845 8.12954 0.982303C8.21904 0.946154 8.3149 0.928402 8.41141 0.930104C8.50792 0.931807 8.60309 0.95293 8.69126 0.992214C8.77942 1.0315 8.85877 1.08814 8.92457 1.15875L12.7579 4.99209C12.8925 5.12685 12.9681 5.30954 12.9681 5.50001C12.9681 5.69047 12.8925 5.87316 12.7579 6.00792L8.92457 9.84126C8.85877 9.91187 8.77942 9.96851 8.69126 10.0078C8.60309 10.0471 8.50792 10.0682 8.41141 10.0699C8.3149 10.0716 8.21904 10.0539 8.12954 10.0177C8.04005 9.98156 7.95875 9.92775 7.8905 9.8595C7.82225 9.79125 7.76844 9.70995 7.73229 9.62045C7.69614 9.53096 7.67839 9.4351 7.68009 9.33859C7.68179 9.24208 7.70292 9.14691 7.7422 9.05874C7.78149 8.97057 7.83813 8.89122 7.90874 8.82542L10.5154 6.21876L1.22916 6.21875C1.03853 6.21875 0.855717 6.14303 0.720925 6.00824C0.586134 5.87345 0.510409 5.69063 0.510409 5.5C0.510409 5.30938 0.586134 5.12656 0.720925 4.99177C0.855717 4.85698 1.03853 4.78125 1.22916 4.78125L10.5154 4.78126L7.90874 2.17459Z" fill="black"/></svg>');
		margin-bottom: 22px;
		padding-left: 12px;

		&::marker {
			margin-right: 16px;
		}

		&:last-of-type {
			margin-bottom: 0;
		}

		p {
			margin-top: 0px;
			margin-bottom: 0px;
		}
	}
}

.w3c_todocounter-container {
	position: absolute;
	top: 25px;
	right: 20px;

	a {
		display: inline-block;
		font-family: 'Circular';
		font-size: 18px;
		font-weight: 300;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		color: $text;
		background-color: rgba($text, 0.1);
		border-radius: 5px;
		text-decoration: none;
		display: inline-block;
		transition: background-color .6s ease-in-out;

		span {
			top: 3px;
			position: relative;
			margin-right: 3px;
		}

		&.active {
			background-color: $yellow !important;
		}
	}
}

.edit-container {
	display: flex;
	gap: 20px;
	justify-content: flex-end;
	margin-bottom: 26px;
	margin-top: -17px;

	a {
		display: flex;
		width: 40px;
		height: 40px;
		border: 1px solid $grey;
		border-radius: 10px;
		background-color: $white;
		justify-content: center;
   		flex-direction: column;
		transition: all .6s ease-in-out;



		text-decoration: none;
		padding-left: 20px;
		padding-right: 20px;
		color: $black;
		font-weight: 300;

		&:hover {
			background-color: $yellow;
			border: 1px solid $yellow;
		}

		svg {
			margin: auto;
		}

		&.active {
			background-color: $yellow;
			border-color: $yellow;
		}

	}
}

.detail-top-menu-bar {
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid $grey;
	padding-bottom: 21px;
	margin-bottom: 40px;

	& > div {

		&.back-trigger {
			padding-top: 7px;

			a {
				font-size: 18px;
				font-weight: 300;
				font-family: 'Circular';
				text-decoration: none;
				color: $text;

				svg {
					margin-right: 7px;
					position: relative;
					top: 1px;
				}
			}
		}

		&.w3c_label-container {
			margin-right: 20px;
		}

		&.title {
			display: flex;
			flex-grow: 1;
			justify-content: center;

			h1 {
				margin-bottom: 0px;
				font-size: 25px;
			}
		}

		&.workart-container {
			margin-top: 0;

			.workart_item {
				margin-right: 5px;
			}
		}
	}

}

.detail-content {
	margin-top: 35px;

	.detail-box {
		background-color: $grey-light;
		border-radius: 10px;
		margin-bottom: 50px;
		overflow: hidden;
		padding-top: 25px;
		padding-bottom: 25px;
		padding-left: 20px;
		padding-right: 20px;

		img {
			width: 100%;
			height: auto;
		}

		h2 {
			color: $black;
			font-size: 18px;
			text-decoration: none;
			font-weight: normal;
			font-family: 'Circular';
			margin-top: 0px;
			margin-bottom: 20px;
		}

		h3 {
			color: $black;
			font-size: 16px;
			text-decoration: none;
			font-weight: normal;
			font-family: 'Circular';
		}

		strong {
			font-size: 16px;
			font-weight: normal;
			font-family: 'Circular';
		}

		p {
			color: $black;
			font-size: 16px;
			text-decoration: none;
			font-weight: 300;
			font-family: 'Circular';
			margin-top: 0px;
			margin-bottom: 40px;

			a {
				color: $black;
				font-size: 16px;
				text-decoration: underline;
				font-weight: normal;
				font-family: 'Circular';
			}
		}

		ul {
			padding-left: 17px;

			li {
				color: $black;
				font-size: 16px;
				text-decoration: none;
				font-weight: 300;
				font-family: 'Circular';

				a {
					color: $black;
					font-size: 16px;
					text-decoration: underline;
					font-weight: normal;
					font-family: 'Circular';
				}
			}
		}

		&.detail-box-linklist {
			ul {
				padding-left: 17px;

				li {
					color: $black;
					font-size: 16px;
					text-decoration: none;
					font-weight: 300;
					font-family: 'Circular';

					a {
						color: $black;
						font-size: 16px;
						text-decoration: underline;
						font-weight: normal;
						font-family: 'Circular';
					}
				}
			}	
		}
	}
}

.juper-navigation {
	list-style-type: none;
	padding-left: 0;
	margin-top: 100px;
    margin-left: 40px;
    margin-bottom: 0;
	border-left: 2px solid $grey-light;
	padding-left: 13px;

	li {
		margin-bottom: 22px;

		&:last-of-type {
			margin-bottom: 0;
		}

		a {
			color: $grey;
			font-size: 18px;
			text-decoration: none;
			font-weight: normal;
			font-family: 'Circular';
		}
	}
}

.keywords-container {
	background-color: $grey-light;
	border-radius: 10px;
	margin-top: 75px;
	margin-bottom: 50px;
    margin-left: 40px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 25px;
	padding-bottom: 25px;

	h3 {
		margin-top: 0;
		margin-bottom: 0;
		font-size: 18px;
		font-weight: normal;
		font-family: 'Circular';
		margin-bottom: 20px;
	}

	input {
		width: 100%;
		font-size: 18px;
		font-weight: 300;
		font-family: 'Circular';
		height: 33px;
		border-radius: 5px;
		border: 1px solid $grey;
		padding-left: 10px;
		padding-right: 10px;

		&::placeholder {
			color: $text;
			font-size: 16px;
			font-weight: 300;
			font-family: 'Circular';
		}

		&:focus, &:active {
			outline: none;
			box-shadow: none;
		}
	}

	.keywords-checked {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 20px;

		.keyword-block {
			height: 33px;
			border: 1px solid $grey;
			border-radius: 5px;
			background-color: $white;
			padding-left: 10px;
			padding-right: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;

			p {
				margin-top: 0;
				margin-bottom: 0;
				font-size: 16px;
				font-weight: 300;
				font-family: 'Circular';

				span {
					margin-left: 3px;
					top: 2px;
					position: relative;
				}
			}
		}
	}
}

.breakdance-copyblock {

	.codecopy {
		border-radius: 5px;
		border: 1px solid black;
		background-color: white;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 25px;
		padding-bottom: 25px;
		display: block;
		margin-bottom: 40px;
		cursor: pointer;
		transition: background-color 0.3s ease;

		&.saved {
			background-color: lightgreen;
		}
	}
}








//OPTIONS PAGE

#config-page {
	margin-top: 50px;
}



//BAUSTEINE

#content-option-bar {
	border-bottom: 1px solid $grey;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-top: 6px;
	padding-bottom: 21px;
	margin-bottom: 25px;
}

.link {
	font-size: 18px;
	font-weight: 300;
	font-family: 'Circular';
	color: $text;
	text-decoration: none;

	span {
		position: relative;
		top: 1;
		margin-right: 3px;
		left: 0;
		transition: left .35s ease-in-out;
	}

	&:hover {

		span {
			left: -3px;
		}
	}
}

.login-box {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;

	img {
		width: 40px;
		height: 40px;
		object-fit: cover;
		border-radius: 50%;

	}
}

#title-details-bar {
	margin-top: 25px;
	margin-bottom: 75px;

	h1 {
		font-size: 40px;
		font-weight: 500;
		font-family: 'Circular';
		margin: 0;
	}
}

#filter-options-block {
	margin-top: 75px;
}

.searchbar-wrapper {

}

*/