/* GENERAL */

html, body {
    margin: 0;
    padding: 0;
}

html::-webkit-scrollbar {
    display:none;
}

/* Clear arrow icon on inputs with datalist */
[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}

.anagram-green {
    color: #19b572;
}

.anagram-red {
    color: #B55307;
}

@media (max-height: 960px) {
    .hero-body {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

@media (min-width: 1220px) {
    .hero-body.projects {
        margin-left: auto;
        margin-right: auto;
        width: 75%;
    }
}

.is-circle {
    border-radius: 99999px;
}

.card {
  border-radius: 2px;
  display: inline-block;
  height: 300px;
  margin: 1rem;
  position: relative;
  width: 300px;
}

.is-32x32 {
    width: 32px;
    height: 32px;
}

.margin-left-5 {
    margin-left: 5px;
}

.margin-left-10 {
    margin-left: 10px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-left-50 {
    margin-left: 50px;
}

.margin-top-30 {
    margin-top: 30px;
}

/* NAVBAR HEADER */

.project-name {
    padding-left: 0px;
    font-size: 14px;
}

.margin-right-10 {
    margin-right: 10px;
}

.navbar-item img {
    max-height: 2rem;
}

#user-photo {
    padding-right: 0px;
}

.items-center {
    display: flex;
    align-items: center;
}

.items-baseline {
    display: flex;
    align-items: baseline;
}

.under-modal {
    z-index: 39;
}

#user-info {
    position: absolute;
    top: 6px;
    right: 52px;
}

#user-info-loader {
    position: absolute;
    right: 100px;
    top: 18px;
}

/* ANNOTATION'S SCREEN HEADER */

#ps-button {
    height: 32px;
    width: 32px;
    padding-left: 0px;
    padding-right: 0px;
}

#ps-button-label {
    position: relative;
    line-height: 1;
}

.ps-item {
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
}

#ps-divider {
    padding-right: 5px;
    margin: 0px;
}

#profiles-strip {
    margin-top: 18px;
    position: absolute;
    bottom: 8px;
    right: 0px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

#project-name {
    cursor: pointer;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

.flex-row {
    flex-direction: row;
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
    display: flex;
}

.gap-10 {
    gap: 10px;
}

.qc-buttons {
    margin: -4px;
    width: 100%;
}

.qc-buttons > .MuiBox-root {
    display: inline-block;
    margin: 4px;
    width: calc(50% - 8px);
}

.qc-buttons .MuiButton-root {
    width: 100%;
}

@media (min-width: 2370px) {
    .qc-buttons > .MuiBox-root {
        width: calc(25% - 8px);
    }

    .qc-split {
        display: none;
    }
}

.anno-header-tile {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.flex-center-y {
    display: flex;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-right {
    display: flex;
    justify-content: flex-end;
}

.flex-bottom {
    align-items: flex-end;
}

.flex-left {
    justify-content: flex-start;
}

.is-borderless {
    border: none;
}

.inherit-y {
    height: inherit;
}

.max-height-80 {
    max-height: 80%;
}

.max-height-60 {
    max-height: 60%;
}

/* PROJECTS DROPDOWN */

.grey-text-opacity {
    opacity: 0.56;
}

.grey-icon-opacity {
    opacity: 0.76;
}

.priority-tag {
    border-radius: 5px;
    padding: 0px 5px;
}

.critical {
    border: 1px solid red;
    color: red;
}

.major {
    border: 1px solid #E65100;
    color: #E65100;
}

.normal {
    border: 1px solid #0277BD;
    color: #0277BD;
}

.minor {
    border: 1px solid #29B6F6;
    color: #29B6F6;
}

.projects-dropdown .dropdown-menu {
    padding-top: 0px;
}

div.projects-dropdown.dropdown-content {
    max-height: 400px;
}

.projects-dropdown button.dropdown-item {
    width: calc(100% - 10px);
    padding-right: 1rem;
    white-space: inherit;
    background: inherit;
    margin-bottom: 2px;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: 4px;
}

.projects-dropdown button.dropdown-item:first-child {
     margin-top: 10px;
}

.projects-dropdown button.dropdown-item:last-child {
     margin-bottom: 10px;
}

.projects-dropdown .dropdown-item {
    cursor: pointer;
    padding: 0.5rem 1rem;
    text-align: left;
    border: 0px;
}

.projects-dropdown .dropdown-content {
    max-height: 400px;
    overflow-y: auto;
    padding: 0px;
}

.projects-dropdown .button {
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

/*card-1 box-shadow here*/
.projects-dropdown .button:hover {
    border-color: #b5b5b5;
    color: #363636;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/*card-2 box-shadow here*/
.projects-dropdown .button:focus:not(:active) {
    border-color: #b5b5b5;
    color: #363636;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.width-max-content {
    width: max-content;
}

.project-title:hover {
    color: hsl(204, 86%, 53%); /*is_info color in Bulma*/
}

/* Move project title tooltip left a bit*/
.project-title.tooltip.is-tooltip-bottom:focus::before,
.project-title.tooltip.is-tooltip-bottom:hover::before,
.project-title.tooltip.is-tooltip-bottom.is-tooltip-active::before {
    left: -10px;
    transform: translate(0px, 8px);
}

.project-title.tooltip.is-tooltip-bottom:focus:not(.is-loading)::after,
.project-title.tooltip.is-tooltip-bottom:hover:not(.is-loading)::after,
.project-title.tooltip.is-tooltip-bottom.is-tooltip-active:not(.is-loading)::after {
    left: 30px;
}

/* And for fullhd screens */
.project-title.is-fullhd.tooltip.is-tooltip-bottom:focus::before,
.project-title.is-fullhd.tooltip.is-tooltip-bottom:hover::before,
.project-title.is-fullhd.tooltip.is-tooltip-bottom.is-tooltip-active::before {
    transform: translate(-30px, 0.5rem);
}

.project-title.is-fullhd.tooltip.is-tooltip-bottom::before {
    top: 55px;
    left: 15px;
}

.project-title.is-fullhd.tooltip.is-tooltip-bottom:focus:not(.is-loading)::after,
.project-title.is-fullhd.tooltip.is-tooltip-bottom:hover:not(.is-loading)::after,
.project-title.is-fullhd.tooltip.is-tooltip-bottom.is-tooltip-active:not(.is-loading)::after {
    top: 55px;
    left: 20px;
}

.projects-dropdown .dropdown-item:hover {
    background: whitesmoke !important;
    border: none;
}

/* SNIPPET PANEL */

.height-100 {
    height: 100%;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.textarea:not([rows]) {
    max-height: 1200px;
    min-height: 100px;
}

/* ANNOTATION PANEL */

.flex-grow-2 {
    flex-grow: 1;
}

.flex-grow-3 {
    flex-grow: 3;
}

.small-mh {
    min-height: 100px;
}

.scroll-x {
    overflow-x: auto;
}

.scroll-y {
    overflow-y: auto;
}

#annotation-editor {
    border: none;
    padding: 16px 24px 16px 24px;
    resize: none;
    height: 100%;
}

.ae-box {
    flex-direction: column;
    display: flex;
    margin-top: 0px;
    margin-left: 0px;
}

.border-radius-2 {
    border-radius: 2px;
}

#annotation-preview {
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 0px !important;
}

.ae-footer {
    margin-top: 8px;
}

.ae-button {
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    font-size: 16px;
    letter-spacing: 0.5px;
}
.ae-button:hover {
    color: #48c774;
}

.ae-button:focus {
     box-shadow: 0 3px 6px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.18);
     outline: none;
}

.ae-button.is-disabled {
    color:rgb(110, 110, 110);
    cursor: not-allowed;
    pointer-events: all !important;
    box-shadow: none;
    outline: none;
}

.annotation-item {
    margin-bottom: 5px !important;
    margin-right: 8px;
    margin-left: 8px;
    padding: 7px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.annotation-item:last-child {
    margin-bottom: 8px !important;
}

.annotation-item:not(:hover) .delete {
    visibility: hidden;
}

.annotation-item .word:not(:last-child)::after {
    content: " ";
}

.annotation-group:not(:last-child) {
    margin-bottom: 20px;
}

.annotation-group.selected .annotation-item {
    border-left: solid 4px #c9def7;
}

.arrow {
    color: #9b9b9b;
    font-size: 16px;
    font-family: -webkit-pictograph;
}

.annotation-item.selected {
    background: rgba(73,143,226,.1);
    border: 1px solid rgba(73,143,226,.3);
    margin: 12px 8px 12px 8px !important;
}

.annotation-item.selected:first-child {
    margin: 0px 8px 12px 8px !important;
}

.line-through {
    text-decoration: line-through;
}

.preview-problem {
    padding: 7px 32px 7px 7px;
}

/* PROJECT'S PAGE */

.flex-center {
    align-items: flex-center;
}

.width-100 {
    width: 100%;
}

.height-100 {
    height: 100%;
}

.project-input-tile {
    padding-bottom: 20px;
    padding-top: 10px;
}

.find-box {
    display: flex;
    align-items: center;
    width: 100%;
}

@media (max-width: 869px) {
    .find-box {
        margin: 0rem 0rem 1rem 1rem;
        width: -webkit-fill-available;
    }
}

.border-bottom {
    border-bottom: 1px solid #d3d3d3;
}

.border-bottom-black {
    border-bottom: 1px solid black;
}

.project-description {
    margin-bottom: 10px;
    margin-right: 20px;
    white-space: pre-line;
}

.project-page-title {
    padding: 20px 20px;
}

.stats-page-title {
    padding-bottom: 20px;
}

.project {
    min-height: 130px;
    padding: 30px 20px;
    margin: 5px 0px;
    border-bottom: 1px solid #d3d3d3;
}

.project:hover {
    box-shadow: 0px 4px 4px -2px rgba(0,0,0,.2);
}

.project .edit-popups, .project .download-links {
    visibility: hidden;
}

.project:hover .edit-popups, .project:hover .download-links {
    visibility: visible;
}
.project .statistics {
    margin-bottom: 5px;
    margin-left: 4px;
}

.project .statistics.with-title:first-child {
    margin-bottom: 15px;
}
.project .statistics.with-title:not(:first-child) {
    margin-bottom: 5px;
}

.project .completion-label.shallow:first-child  {
    margin-top: 29px;
}

.project .completion-label.shallow:not(:first-child)  {
    margin-top: 44px;
}

.pointer {
    cursor: pointer;
}

.button:focus {
  outline: none;
}

.flex-direction-column {
    flex-direction: column;
}

.flex-align-left {
    align-items: flex-start;
}

.flex-align-right {
    align-items: flex-end;
}

.projects-btn {
    width: 110px;
    margin-bottom: 5px;
    margin-right: 20px;
}


.qc-checkmark.tooltip.is-tooltip-bottom:focus::before,
.qc-checkmark.tooltip.is-tooltip-bottom:hover::before,
.qc-checkmark.tooltip.is-tooltip-bottom.is-tooltip-active::before {
    transform: translate(-27%, 0.5rem);
}

.label .tooltip:focus::before,
.label .tooltip:hover::before,
.label .tooltip.is-tooltip-active::before {
    font-weight: 400;
}


.label-project-checkbox {
    margin-right: 32px;
    width: 240px;
}

.project-checkbox {
    margin-right: 32px;
    width: 190px;
}

/* POPUPS */

.no-border {
    border: none !important;
}

.padding-top-0 {
    padding-top: 0px;
}

.modal-card-title {
    font-size: 1.2em;
}

#logout-popup {
    width: 450px;
}

.modal-card-foot .button:not(:last-child) {
    margin-right: 1em;
}

.files-popup {
    min-width: 800px;
    width: fit-content;
}

.file-link:hover {
    text-decoration: underline;
    color: blue;
}

.word-wrap {
    word-wrap: break-word;
}

.remove-annotator-button:hover {
    filter: brightness(0.8);
}

.remove-annotator-button:active {
    filter: brightness(0.6);
}

/* LOADER ICONS */

.custom-loader {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.custom-loader div {
  position: absolute;
  border: 4px solid #19b572;
  opacity: 1;
  border-radius: 50%;
  animation: custom-loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.custom-loader div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes custom-loader {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}

.custom-loader-small {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 32px;
}

.custom-loader-small div {
  position: absolute;
  border: 2px solid #19b572;
  opacity: 1;
  border-radius: 50%;
  animation: custom-loader-small 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.custom-loader-small div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes custom-loader-small {
  0% {
    top: 13px;
    left: 13px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 29px;
    height: 29px;
    opacity: 0;
  }
}

/* Validations */

.input-warning {
    height: fit-content;
    font-size: 14px;
    margin-left: 10px;
    min-height: 21px;
}

.no-margin-bottom {
    margin-bottom: 0px !important;
}

.valid-field {
    margin-bottom: 21px !important;
}

.field-with-validation {
    width: -webkit-fill-available;
}

.field-with-validation:last-child,
.field-with-validation:last-child .valid-field {
    margin-bottom: 8px !important;
}

.invalid-field {
    margin-bottom: 0px !important;
}

/* Annotator's Popup */

.anno-list {
    width: 450px;
    max-height: 400px;
    overflow-y: auto;
}

.float-right {
    float: right;
}

.anno-input-label {
    width: fit-content;
    cursor: pointer;
}

/* File's Popup */

.files-upload-btn {
    position: absolute;
    top: 0;
    margin-left: 15px;
    right: 0;
}


.file-upload-ctrl {
    margin-bottom: 24px;
}

/* Borders for Annotations */

.border-both.red {
    border-color: #B55307 !important;
}

.border-both.red.opaque {
    border-color: rgba(181,83,7,0.25) !important;
}

.border-both.grey {
    border-color: #939393 !important;
}

.border-both.grey.opaque {
    border-color: rgba(147,147,147,0.25) !important;
}

.border-both.green {
    border-color: #19b572 !important;
}

.border-both.green.opaque {
    border-color: rgba(25,181,114,0.25) !important;
}

.border-bottom.green {
    border-color: none !important;
    border-bottom-color: #19b572 !important;
}

.border-bottom.red {
    border-color: none !important;
    border-bottom-color: #B55307 !important;
}

.border-bottom.grey {
    border-color: none !important;
    border-bottom-color: #939393 !important;
}

.border-bottom.grey.opaque {
    border-color: none !important;
    border-bottom-color: rgba(147,147,147,0.5) !important;
}

.border-bottom.green.opaque {
    border-color: none !important;
    border-bottom-color: rgba(25,181,114,0.25) !important;
}

.border-bottom.red.opaque {
    border-color: none !important;
    border-bottom-color: rgba(181,83,7,0.25) !important;
}

.border-bottom.grey.hidden {
    border-color: none !important;
    border-bottom-color: rgba(147,147,147,0.0) !important;
}

/*Decorations for Annotations*/

.strikeout span:not(.token-arrow), .strikeout-opaque span:not(.token-arrow) {
    position: relative;
}

.strikeout span:not(.token-arrow)::after {
  border-bottom: 2px solid #B55307;
  content: "";
  left: 0;
  margin-top: 1px;
  position: absolute;
  right: 0;
  top: 50%;
}

.strikeout-opaque span:not(.token-arrow)::after {
  border-bottom: 2px solid rgba(181,83,7,0.4);
  content: "";
  left: 0;
  margin-top: 1px;
  position: absolute;
  right: 0;
  top: 50%;
}

.insert-box .insert-mark {
    content: "⋎";
    cursor: pointer;
    font-weight: 200;
    font-size: 38px;
    color: #B55307;
    position: absolute;
    top: -19px;
    right: -14px;
    transition: color 200ms ease-out;
}

.insert-box .insert-mark.opaque {
    color: rgba(181,83,7,0.25);
}

.token-arrow {
    position: absolute;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
    transition: border-color 200ms ease-out;
}

.token-arrow.left {
    top: -1px;
    left: 0px;
    border-width: 5px 5px 0px 0px;
    border-top-color: #B55307;
}

.token-arrow.right {
    bottom: 0px;
    /*hack for multiline spans*/
    transform: translate(-4px, 2px);
    border-width: 0px 0px 6px 6px;
}

.token-arrow.right-top {
    border-width: 0px 5px 5px 0px;
}

/* Snippet */

.is-open-sans {
    font-family: 'Open Sans', sans-serif;
}

#main .textarea-card,
.MuiDialog-container .textarea-card {
    border-radius: 16px;
    flex-grow: 1;
    height: calc(100% - 16px);
    padding-right: 2px;
}

#main .textarea-container,
.MuiDialog-container .textarea-container {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.MuiDialog-container .textarea-old {
    min-height: 240px;
}

#main .textarea-card {
    margin: 0 26px 16px 26px;
}

.textarea-old {
    cursor: text;
    display: block;
    position: relative;
    font-size: 17px;
    line-height: 32px;
    margin: 16px 0 0 32px;
    padding-right: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    resize: none;
    overflow-wrap: anywhere;
}

#ft-edit {
    user-select: auto;
    -webkit-user-select: auto;
    -moz-user-select: auto;
}

.textarea-old .overlay {
    position: absolute;
    padding-right: 32px;
    padding-bottom: 16px;
}

.textarea-old:not(.label-mode) .overlay:not(.text-overlay) {
    color: rgba(0,0,0,0);
}

.textarea-old .edited-text {
    position: absolute;
    padding-right: 32px;
    padding-bottom: 16px;
}

.textarea-old .highlights {
    z-index: 11;
}

.active-correction-overlay {
    z-index: 12;
}

.selection-overlay {
    z-index: 13 !important;
}

.text-overlay {
    z-index: 9;
}

.text-overlay .replace, .text-overlay .insert-box {
    visibility: hidden;
}

.selection-overlay .temporary-selection {
    color:black;
    background-color: #a8cdfe;
}

.active-correction-overlay .replace,
.highlights .replace {
    margin-top: -3px;
    border-bottom: 2px solid rgba(0,0,0,0);
    border-top: 2px solid rgba(0,0,0,0);
    color: rgba(0,0,0,0);
    transition: border-color 200ms ease-out;
}

.highlights .replace {
    color: #823B05;
    cursor: pointer;
}

/*Insertion Styles for Picker*/

.insert-top-line {
    position: absolute;
    width: 20px;
    height: 2px;
    left: -8px;
    top: -10px;
}

.active-correction-overlay, .insert-top-line,
.highlights .insert-top-line {
    background: none;
    /*if you want the topline visible, just set this color*/
}

.active-correction-overlay .insert-box  .token-arrow.right-top,
.highlights .insert-box .token-arrow.right-top {
    top: -9px;
    left: 8px;
}


.active-correction-overlay .insert-box  .token-arrow.left,
.highlights .insert-box .token-arrow.left {
    left: -9px;
    top: -9px;
}

.highlights .token-arrow.left, .active-correction-overlay .token-arrow.left {
    border-top-color: #B55307;
}

.highlights .token-arrow.right, .active-correction-overlay .token-arrow.right {
    border-bottom-color: #B55307;
}

.highlights .token-arrow.right-top,
.active-correction-overlay .token-arrow.right-top {
    border-right-color: #B55307;
}

/* OTHER TOKEN'S STYLES*/

.show-linebreaks {
    white-space: pre-line;
}

.overlay .raw-spaces, .edited-text .raw-spaces {
    white-space: pre-line;
}

/* Preview Styles*/

.edited-text .annotation {
    cursor: pointer;
    border-bottom: 2px solid;
    border-top: 2px solid rgba(0,0,0,0);
    transition: border-color 200ms ease-out;
}

.submit-control .edited-text .annotation,
.shallow-preview .edited-text .annotation {
    cursor: text;
}

.annotation.replace, .annotation.insert {
    color: #128252;
}

.edited-text .annotation.not-annotatable,
edited-text .annotation.fragment {
    color: #616161;
}

.edited-text .annotation.remove {
    color: #823B05;
}

.edited-text .annotation.remove.strikeout-opaque {
    opacity: 0.7;
}

.edited-text .annotation.correction.remove .token-arrow.left {
    border-top-color: #B55307;
}

.edited-text .annotation.correction.remove .token-arrow.right {
    border-bottom-color: #B55307;
}

.edited-text .annotation.correction.remove {
    border-bottom-color: #B55307;
}

.edited-text .annotation.correction .token-arrow.left {
    border-top-color: #19b572;
}

.edited-text .annotation.correction .token-arrow.right {
    border-bottom-color: #19b572;
}

.edited-text .annotation.mark .token-arrow.left {
    border-top-color: #939393;
}

.edited-text .annotation.mark .token-arrow.right {
    border-bottom-color: #939393;
}

/* Login Page*/

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-40 {
    margin-bottom: 40px;
}

/* End of project list */

.eop-title {
    padding-top: 5px;
    padding-left: 20px;
    padding-bottom: 10px;
}

.eop-subtitle {
    padding-left: 20px;
    padding-bottom: 20px;
}

.eop-container {
    overflow-y: auto;
    padding: 0px 12px;
}

/*Annotators tab*/

.delete-annotator {
    top: 6px;
    left: 6px;
}

.annotators-btn {
    width: 90px;
    margin-bottom: 5px;
    margin-right: 20px;
}

/* Animations */

.fade-in-100 {
  animation-name: fadein;
  animation-duration: 0.1s;
  animation-timing-function: ease-out;
}

.insert-box, .insert-box .token-arrow, .active-correction-overlay .replace, .fade-in, .fadein
{
  animation-name: fadein;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
}

.fade-in-300 {
  animation-name: fadein;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
}

.notification, .login-container, .tool-button, .fade-in-400 {
  animation-name: fadein;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.loader.green {
    border: 2px solid  #19b572;
    border-right-color: transparent;
    border-top-color: transparent;
}

.loader.blue {
    border: 2px solid #3273dc;
    border-right-color: transparent;
    border-top-color: transparent;
}

.has-text-anagram {
    color: #19b572 !important;
}
.decline-input {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.decline-control {
    margin-top: 10px;
    margin-down: 0px;
}

.decline-text {
    width: 375px;
}

.tabs.review  li a {
    border-bottom-width: 2px;
    margin-bottom: 3px;
}

.shallow-label {
    top: 0px;
    left: 19px;
    z-index: 2;
    width: 0px;
}

.shallow-label-number {
    top: -4px;
    position: relative;
    font-weight: 600;
}

.shallow-comment {
    padding: 10px 20px;
}

.progress-wrapper {
  position: relative;
}

.progress-value {
  position: absolute;
  top: 14px;
  right: 0px;
  font-size: calc(1.35rem / 1.5);
  font-family: 'Open Sans', sans-serif;
  line-height: 1.35rem;
}

.is-transparent {
    opacity: 0;
}

.tabs.review::-webkit-scrollbar {
    display: none;
}

/* Label Mode colors */

/* We add this as a guarantee that alignment panel will not intersect text*/
.label-mode.alignment-tools .overlay {
    padding-right: 40px;
}

.label-button.tooltip::before {
    font-size: 0.75rem;
}

/* Annotation Labels Styles */

.label-mode .labeled .token-arrow.left {
    top: -13px;
}

.label-mode .insertion.labeled, .label-mode .replace.labeled {
    padding-top: 12px;
}

.textarea-old.label-mode {
    line-height: 44px;
    margin-top: 16px; /* Reduce the margin for highlights to be visible */
}

.label-mode .label {
    flex-basis: 0;
    flex-shrink: 1;
    flex-grow: 1;
    font-size: 11px;
}

.label-mode .label.selected {
    opacity: 1;
}

.annotation-and-label-wrapper {
    display: inline-block;
    position: relative;
}

.label-mode .label-wrapper {
    top: -15px;
    left: 3px;
    display: flex;
    flex-direction: row;
    position: absolute;
    z-index: -1;
    width: 100%;
    max-width: -webkit-fill-available;
    justify-content: space-between;
}

.label-mode .label-wrapper .label-qc-icon {
    transform: scale(0.7) translate(5px, 13px);
}

.cut-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.info-button {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
}

.align-right {
    position: absolute;
    right: 0px;
}

/*Alignments Tools*/

.cut-pointer {
    cursor: url('img/cut.png'), auto !important;
}

.merge-right-pointer {
    cursor: url('img/arrow-right.png'), auto !important;
}

.merge-left-pointer {
    cursor: url('img/arrow-left.png'), auto !important;
}

.swap-right-pointer {
    cursor: url('img/double-angle-right.png'), auto !important;
}

.swap-left-pointer {
    cursor: url('img/double-angle-left.png'), auto !important;
}

.merge-pointer {
    cursor: url('img/expand.png'), auto !important;
}

/* Statistics Page */

input.is-date::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.is-sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 1;
}

.is-sticky-footer {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0px;
    z-index: 1;
}

.is-sticky-column {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
}

table.table.stats-table {
    width: calc(100% - 16px);
}

.stats-table tbody td:first-child,
.stats-table thead tr:first-child th:first-child,
.stats-table tfoot td:first-child {
    border-right: 1px solid #dbdbdb;
    border-collapse: separate;
    padding: 0.5rem 1rem;
}

.stats-table thead th .flex-row {
    align-items: baseline;
    justify-content: center;
}

.stats-table thead th:first-child,
.stats-table tfoot td:first-child {
    z-index: 2;
}

.stats-table {
    margin-right: 16px;
    border-collapse: separate;
}

.stats-table tbody tr:nth-child(even) td {
    background: #fafafa;
}

.stats-table tbody tr:nth-child(odd) td,
.stats-table thead th,
.stats-table tfoot td {
    background: white;
}

.filters-tile label.checkbox {
    display: flex;
    align-items: center;
}

.filters-tile label.checkbox input {
    margin-right: 6px;
}

.filters-tile .tag .icon:first-child:last-child {
    margin: 0;
}

.column-selection {
    padding: 7px 16px;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
}

.is-extra-small {
    font-size: 0.8em;
}

.filters-tile .loader {
    max-width: 1em;
    max-height: 1em;
}

/* TODO: Update for Material UI */
.fix-label-qc-buttons {
    margin-left: 5px;
    margin-top: 5px;
}

.fix-label-qc-buttons-block {
    margin-top: -20px;
}

.fix-label-qc-panel {
    margin-left: 20px;
    margin-top: 20px
}

.fix-annotation-delete {
    transform: scale(0.8) translate(-14px, -2px);
    position: absolute;
    background-color: rgb(100, 100, 100);
}

.fix-annotation-delete:hover{
    background-color: rgb(200, 50, 50);
}

/*if neighbouring annotation is labeled we need to push the button a bit*/
.labeled ~ .fix-annotation-delete {
    transform: scale(0.8) translate(-10px, -15px);
}

/* User messages */

.message-box {
    min-width: 400px;
    max-width: 400px;
    max-height: 400px;
    margin: 5px;
    transition: all 0.3s;
}

.message-box.is-slided {
    transform: translateX(410px); /* 400 + 2*5 */
}

.message-box.is-shrinked {
    max-height: 0px;
}

/* Dropdown */

div.dropdown span.tag {
    border-radius: 1em;
    margin: 2px;
    overflow: hidden;
    max-width: -webkit-fill-available;
    max-width: -moz-fill-available;
}

.dropdown-placeholder {
    height: 1.75em;
}

div.dropdown button.button {
    height: auto;
    justify-content: space-between;
    padding: calc(0.5em - 1px) 10px;
}

div.dropdown button.button.multi-selection {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: calc(0.5em - 3px) 12px;
}

div.dropdown button.button input {
    border: none;
    outline: none;
    height: 24px;
    margin: 2px;
    flex-grow: 1;
}

div.selection-items {
    position: absolute;
    margin: 0.5em 12px;
}

div.dropdown-content {
    max-height: 220px;
}

button.dropdown-item {
    padding-right: 12px;
    border: none;
    outline: none;
    background: inherit;
    cursor: pointer;
}

button.dropdown-item:focus {
    background-color: #EEEEEE;
}

button.dropdown-item span.icon.is-left {
    margin-right: 12px;
    opacity: 0;
}

button.dropdown-item span.icon.is-left.is-active {
    opacity: 1;
}

div.dropdown-content.grid-menu button.dropdown-item {
    width: auto;
    padding: 2px;
}

div.dropdown-content.grid-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px;
}

.loader-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

/* Projects filter dropdown */

div.dropdown.projects-filter-dropdown button.button {
    padding: 0px 1em;
    height: 27px;
}

/* Project tags */

.list-item.tags-list-item {
    padding-top: 0px;
    padding-bottom: 0px;
}

.tags-list-item .columns {
    margin-top: 0px;
    margin-bottom: 0px;
}

.tags-list-item .input-with-validation {
    padding-top: 18px;
    padding-bottom: 0px;
    height: 60px;
    align-self: flex-begin;
}

.tags-list-item input {
    border: none;
    outline: none;
    height: 1.5em;
    font-size: 1em;
    width: 100%;
}

.tags-list-item .input-warning {
    margin: 0;
    font-size: 12px;
    min-height: auto;
}

.tags-list-item .dropdown button.dropdown-trigger {
    border: none;
    outline: none;
}

.tags-list-item .dropdown .dropdown-menu {
    width: 208px;
}

.button.create-tag .icon:first-child:last-child {
    margin-right: 0;
}

.tags-list {
    margin-top: 0.5em;
    margin-bottom: 1.5rem;
}

span.tag {
    border-radius: 1em;
    margin: 2px;
    max-width: -webkit-fill-available;
    max-width: -moz-fill-available;
}

.tags-list span.tag {
    font-size: 0.85em;
}

.icon.pointer:hover {
    border-radius: 0.75rem;
    background-color: #dfdfdf;
}

.color-picker-item {
    border-radius: 8px;
    width: 20px;
    height: 20px;
}

.wide-modal {
    width: min(1000px, calc(100% - 40px));
    min-height: 400px;
}

.project-dialog .loader {
    width: 1em;
    height: 1em;
}

.flex-center-x {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Datacat */
.dcat-fix-border-overflow {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 4px;
    padding-right: 4px;
}

.dcat-filename {
    width: 50%;
}

.dcat-time {
    width: 30%;
}

.dcat-last-export {
    background-color: #EEEEEE !important;
}

.ctx-item {
    text-decoration: none !important;
}

div.floating-button {
    width: 88px;
    height: 88px;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

div.floating-button span.icon {
    padding: 28px;
    border-radius: 28px;
    background-color: #48c774;
    z-index: 9999;
    cursor: pointer;
}

div.floating-button span.icon i {
    color: white;
    font-size: 20px;
}

/* Util */

.display-none {
    display: none;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-align-center {
    display: flex;
    align-items: center;
}

.flex-justify-center {
    display: flex;
    justify-content: center;
}

.flex-justify-end {
    display: flex;
    justify-content: flex-end;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Material */

b.MuiTypography-root {
    font-weight: 600;
}

.MuiDialog-container > .MuiPaper-root {
    width: 100%;
}

.MuiDialog-container > .MuiPaper-root > .MuiDialogTitle-root {
    padding: 24px 24px 8px 24px;
    width: 90%;
    margin: auto;
}

.MuiDialog-container > .MuiPaper-root > .MuiDialogActions-root {
    padding: 8px 16px 16px 16px;
    width: 90%;
    margin: auto;
}

.MuiDialog-container > .MuiPaper-root > .MuiDialogContent-root {
    padding: 16px 24px 16px 24px;
}

.MuiDialog-container > .MuiPaper-root > .MuiDialogContent-root > * {
    width: 90%;
    margin: auto;
}

.MuiFormGroup-root ~ .MuiFormHelperText-root {
    margin-left: 0;
}

.MuiRadioGroup-root ~ .MuiFormHelperText-root {
    margin-left: 0;
}

/* Scroll */

body ::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}
 
body ::-webkit-scrollbar-track, body ::-webkit-scrollbar-corner {
    visibility: none;
}
 
body ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 100px;
    background-clip: content-box;
    background-color: rgba(99, 115, 129, 0.48);
}

/* Annotation panels */

/* Labels */

.label-mode .insertion, .label-mode .replace {
  cursor: pointer;
  border-bottom: 2px solid !important;
  border-top: 2px solid rgba(0, 0, 0, 0) !important;
  transition: border-color 200ms ease-out !important;
  color: #737373 !important;
}

.label-mode .replace.fix-annotation {
  border-bottom: 2px dashed !important;
  border-top: 2px dashed rgba(0, 0, 0, 0) !important;
}

.label-mode .replace.fix-annotation.border-both {
  border-bottom: 2px dashed !important;
  border-top: 2px dashed !important;
}

.label-mode .replace.fix-annotation:hover {
  border-bottom: 2px dashed !important;
  border-top: 2px dashed !important;
}

.label-mode .strikeout span:not(.token-arrow)::after {
  border-bottom: 2px solid #939393 !important;
}

.label-mode .strikeout-opaque span:not(.token-arrow)::after {
  border-bottom: 2px solid rgba(147, 147, 147, 0.6) !important;
}

.label-mode .token-arrow.right {
  border-bottom-color: #939393 !important;
}

.label-mode .token-arrow.left {
  border-top-color: #939393 !important;
}

/*hsla(204, 86%, 53%, 0.5)*/
.label-mode .is-white .label {
  color: #999999 !important;
}

.label-mode .is-white .label.selected {
  color: #737373 !important;
}

.label-mode .is-white .token-arrow.right {
  border-bottom-color: gray !important;
}

.label-mode .is-white .token-arrow.left {
  border-top-color: gray !important;
}

.label-mode .strikeout.is-white span:not(.token-arrow)::after {
  border-bottom-color: gray !important;
}

.label-mode .strikeout-opaque.is-white span:not(.token-arrow)::after {
  border-bottom-color: rgba(128, 128, 128, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-white {
  border-color: none !important;
  border-bottom-color: gray !important;
}

.border-bottom.is-white.opaque {
  border-color: none !important;
  border-bottom-color: rgba(128, 128, 128, 0.75) !important;
}

.border-both.is-white {
  border-color: gray !important;
}

.border-both.is-white.opaque {
  border-color: rgba(128, 128, 128, 0.75) !important;
}

.label-mode .is-black .label {
  color: #999999 !important;
}

.label-mode .is-black .label.selected {
  color: #737373 !important;
}

.label-mode .is-black .token-arrow.right {
  border-bottom-color: gray !important;
}

.label-mode .is-black .token-arrow.left {
  border-top-color: gray !important;
}

.label-mode .strikeout.is-black span:not(.token-arrow)::after {
  border-bottom-color: gray !important;
}

.label-mode .strikeout-opaque.is-black span:not(.token-arrow)::after {
  border-bottom-color: rgba(128, 128, 128, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-black {
  border-color: none !important;
  border-bottom-color: gray !important;
}

.border-bottom.is-black.opaque {
  border-color: none !important;
  border-bottom-color: rgba(128, 128, 128, 0.75) !important;
}

.border-both.is-black {
  border-color: gray !important;
}

.border-both.is-black.opaque {
  border-color: rgba(128, 128, 128, 0.75) !important;
}

.border-both.grey {
    border-color: #939393 !important;
}

.border-both.grey.opaque {
    border-color: rgba(147,147,147,0.25) !important;
}

.label-mode .is-light .label {
  color: #999999 !important;
}

.label-mode .is-light .label.selected {
  color: #737373 !important;
}

.label-mode .is-light .token-arrow.right {
  border-bottom-color: gray !important;
}

.label-mode .is-light .token-arrow.left {
  border-top-color: gray !important;
}

.label-mode .strikeout.is-light span:not(.token-arrow)::after {
  border-bottom-color: gray !important;
}

.label-mode .strikeout-opaque.is-light span:not(.token-arrow)::after {
  border-bottom-color: rgba(128, 128, 128, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-light {
  border-color: none !important;
  border-bottom-color: gray !important;
}

.border-bottom.is-light.opaque {
  border-color: none !important;
  border-bottom-color: rgba(128, 128, 128, 0.75) !important;
}

.border-both.is-light {
  border-color: gray !important;
}

.border-both.is-light.opaque {
  border-color: rgba(128, 128, 128, 0.75) !important;
}

.label-mode .is-dark .label {
  color: #999999 !important;
}

.label-mode .is-dark .label.selected {
  color: #737373 !important;
}

.label-mode .is-dark .token-arrow.right {
  border-bottom-color: gray !important;
}

.label-mode .is-dark .token-arrow.left {
  border-top-color: gray !important;
}

.label-mode .strikeout.is-dark span:not(.token-arrow)::after {
  border-bottom-color: gray !important;
}

.label-mode .strikeout-opaque.is-dark span:not(.token-arrow)::after {
  border-bottom-color: rgba(128, 128, 128, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-dark {
  border-color: none !important;
  border-bottom-color: gray !important;
}

.border-bottom.is-dark.opaque {
  border-color: none !important;
  border-bottom-color: rgba(128, 128, 128, 0.75) !important;
}

.border-both.is-dark {
  border-color: gray !important;
}

.border-both.is-dark.opaque {
  border-color: rgba(128, 128, 128, 0.75) !important;
}

.label-mode .is-primary .label {
  color: #999999 !important;
}

.label-mode .is-primary .label.selected {
  color: #00b398 !important;
}

.label-mode .is-primary .token-arrow.right {
  border-bottom-color: #00ccad !important;
}

.label-mode .is-primary .token-arrow.left {
  border-top-color: #00ccad !important;
}

.label-mode .strikeout.is-primary span:not(.token-arrow)::after {
  border-bottom-color: #00ccad !important;
}

.label-mode .strikeout-opaque.is-primary span:not(.token-arrow)::after {
  border-bottom-color: rgba(0, 204, 173, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-primary {
  border-color: none !important;
  border-bottom-color: #00ccad !important;
}

.border-bottom.is-primary.opaque {
  border-color: none !important;
  border-bottom-color: rgba(0, 204, 173, 0.75) !important;
}

.border-both.is-primary {
  border-color: #00ccad !important;
}

.border-both.is-primary.opaque {
  border-color: rgba(0, 204, 173, 0.75) !important;
}

.label-mode .is-link .label {
  color: #999999 !important;
}

.label-mode .is-link .label.selected {
  color: #1e55ae !important;
}

.label-mode .is-link .token-arrow.right {
  border-bottom-color: #2160c4 !important;
}

.label-mode .is-link .token-arrow.left {
  border-top-color: #2160c4 !important;
}

.label-mode .strikeout.is-link span:not(.token-arrow)::after {
  border-bottom-color: #2160c4 !important;
}

.label-mode .strikeout-opaque.is-link span:not(.token-arrow)::after {
  border-bottom-color: rgba(33, 96, 196, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-link {
  border-color: none !important;
  border-bottom-color: #2160c4 !important;
}

.border-bottom.is-link.opaque {
  border-color: none !important;
  border-bottom-color: rgba(33, 96, 196, 0.75) !important;
}

.border-both.is-link {
  border-color: #2160c4 !important;
}

.border-both.is-link.opaque {
  border-color: rgba(33, 96, 196, 0.75) !important;
}

.label-mode .is-info .label {
  color: #999999 !important;
}

.label-mode .is-info .label.selected {
  color: #2183c4 !important;
}

.label-mode .is-info .token-arrow.right {
  border-bottom-color: #2592da !important;
}

.label-mode .is-info .token-arrow.left {
  border-top-color: #2592da !important;
}

.label-mode .strikeout.is-info span:not(.token-arrow)::after {
  border-bottom-color: #2592da !important;
}

.label-mode .strikeout-opaque.is-info span:not(.token-arrow)::after {
  border-bottom-color: rgba(37, 146, 218, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-info {
  border-color: none !important;
  border-bottom-color: #2592da !important;
}

.border-bottom.is-info.opaque {
  border-color: none !important;
  border-bottom-color: rgba(37, 146, 218, 0.75) !important;
}

.border-both.is-info {
  border-color: #2592da !important;
}

.border-both.is-info.opaque {
  border-color: rgba(37, 146, 218, 0.75) !important;
}

.label-mode .is-success .label {
  color: #999999 !important;
}

.label-mode .is-success .label.selected {
  color: #2a894b !important;
}

.label-mode .is-success .token-arrow.right {
  border-bottom-color: #309c56 !important;
}

.label-mode .is-success .token-arrow.left {
  border-top-color: #309c56 !important;
}

.label-mode .strikeout.is-success span:not(.token-arrow)::after {
  border-bottom-color: #309c56 !important;
}

.label-mode .strikeout-opaque.is-success span:not(.token-arrow)::after {
  border-bottom-color: rgba(48, 156, 86, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-success {
  border-color: none !important;
  border-bottom-color: #309c56 !important;
}

.border-bottom.is-success.opaque {
  border-color: none !important;
  border-bottom-color: rgba(48, 156, 86, 0.75) !important;
}

.border-both.is-success {
  border-color: #309c56 !important;
}

.border-both.is-success.opaque {
  border-color: rgba(48, 156, 86, 0.75) !important;
}

.label-mode .is-warning .label {
  color: #999999 !important;
}

.label-mode .is-warning .label.selected {
  color: #d6ab00 !important;
}

.label-mode .is-warning .token-arrow.right {
  border-bottom-color: #f0c000 !important;
}

.label-mode .is-warning .token-arrow.left {
  border-top-color: #f0c000 !important;
}

.label-mode .strikeout.is-warning span:not(.token-arrow)::after {
  border-bottom-color: #f0c000 !important;
}

.label-mode .strikeout-opaque.is-warning span:not(.token-arrow)::after {
  border-bottom-color: rgba(240, 192, 0, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-warning {
  border-color: none !important;
  border-bottom-color: #f0c000 !important;
}

.border-bottom.is-warning.opaque {
  border-color: none !important;
  border-bottom-color: rgba(240, 192, 0, 0.75) !important;
}

.border-both.is-warning {
  border-color: #f0c000 !important;
}

.border-both.is-warning.opaque {
  border-color: rgba(240, 192, 0, 0.75) !important;
}

.label-mode .is-danger .label {
  color: #999999 !important;
}

.label-mode .is-danger .label.selected {
  color: #ef2a51 !important;
}

.label-mode .is-danger .token-arrow.right {
  border-bottom-color: #f14164 !important;
}

.label-mode .is-danger .token-arrow.left {
  border-top-color: #f14164 !important;
}

.label-mode .strikeout.is-danger span:not(.token-arrow)::after {
  border-bottom-color: #f14164 !important;
}

.label-mode .strikeout-opaque.is-danger span:not(.token-arrow)::after {
  border-bottom-color: rgba(241, 65, 100, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-danger {
  border-color: none !important;
  border-bottom-color: #f14164 !important;
}

.border-bottom.is-danger.opaque {
  border-color: none !important;
  border-bottom-color: rgba(241, 65, 100, 0.75) !important;
}

.border-both.is-danger {
  border-color: #f14164 !important;
}

.border-both.is-danger.opaque {
  border-color: rgba(241, 65, 100, 0.75) !important;
}

.label-mode .is-lime .label {
  color: #999999 !important;
}

.label-mode .is-lime .label.selected {
  color: #47a108 !important;
}

.label-mode .is-lime .token-arrow.right {
  border-bottom-color: #52b909 !important;
}

.label-mode .is-lime .token-arrow.left {
  border-top-color: #52b909 !important;
}

.label-mode .strikeout.is-lime span:not(.token-arrow)::after {
  border-bottom-color: #52b909 !important;
}

.label-mode .strikeout-opaque.is-lime span:not(.token-arrow)::after {
  border-bottom-color: rgba(82, 185, 9, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-lime {
  border-color: none !important;
  border-bottom-color: #52b909 !important;
}

.border-bottom.is-lime.opaque {
  border-color: none !important;
  border-bottom-color: rgba(82, 185, 9, 0.75) !important;
}

.border-both.is-lime {
  border-color: #52b909 !important;
}

.border-both.is-lime.opaque {
  border-color: rgba(82, 185, 9, 0.75) !important;
}

.label-mode .is-cyan2 .label {
  color: #999999 !important;
}

.label-mode .is-cyan2 .label.selected {
  color: #009dbd !important;
}

.label-mode .is-cyan2 .token-arrow.right {
  border-bottom-color: #00b3d6 !important;
}

.label-mode .is-cyan2 .token-arrow.left {
  border-top-color: #00b3d6 !important;
}

.label-mode .strikeout.is-cyan2 span:not(.token-arrow)::after {
  border-bottom-color: #00b3d6 !important;
}

.label-mode .strikeout-opaque.is-cyan2 span:not(.token-arrow)::after {
  border-bottom-color: rgba(0, 179, 214, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-cyan2 {
  border-color: none !important;
  border-bottom-color: #00b3d6 !important;
}

.border-bottom.is-cyan2.opaque {
  border-color: none !important;
  border-bottom-color: rgba(0, 179, 214, 0.75) !important;
}

.border-both.is-cyan2 {
  border-color: #00b3d6 !important;
}

.border-both.is-cyan2.opaque {
  border-color: rgba(0, 179, 214, 0.75) !important;
}

.label-mode .is-bhole .label {
  color: #999999 !important;
}

.label-mode .is-bhole .label.selected {
  color: #404040 !important;
}

.label-mode .is-bhole .token-arrow.right {
  border-bottom-color: #4d4d4d !important;
}

.label-mode .is-bhole .token-arrow.left {
  border-top-color: #4d4d4d !important;
}

.label-mode .strikeout.is-bhole span:not(.token-arrow)::after {
  border-bottom-color: #4d4d4d !important;
}

.label-mode .strikeout-opaque.is-bhole span:not(.token-arrow)::after {
  border-bottom-color: rgba(77, 77, 77, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-bhole {
  border-color: none !important;
  border-bottom-color: #4d4d4d !important;
}

.border-bottom.is-bhole.opaque {
  border-color: none !important;
  border-bottom-color: rgba(77, 77, 77, 0.75) !important;
}

.border-both.is-bhole {
  border-color: #4d4d4d !important;
}

.border-both.is-bhole.opaque {
  border-color: rgba(77, 77, 77, 0.75) !important;
}

.label-mode .is-neutral .label {
  color: #999999 !important;
}

.label-mode .is-neutral .label.selected {
  color: #a6a6a6 !important;
}

.label-mode .is-neutral .token-arrow.right {
  border-bottom-color: #b3b3b3 !important;
}

.label-mode .is-neutral .token-arrow.left {
  border-top-color: #b3b3b3 !important;
}

.label-mode .strikeout.is-neutral span:not(.token-arrow)::after {
  border-bottom-color: #b3b3b3 !important;
}

.label-mode .strikeout-opaque.is-neutral span:not(.token-arrow)::after {
  border-bottom-color: rgba(179, 179, 179, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-neutral {
  border-color: none !important;
  border-bottom-color: #b3b3b3 !important;
}

.border-bottom.is-neutral.opaque {
  border-color: none !important;
  border-bottom-color: rgba(179, 179, 179, 0.75) !important;
}

.border-both.is-neutral {
  border-color: #b3b3b3 !important;
}

.border-both.is-neutral.opaque {
  border-color: rgba(179, 179, 179, 0.75) !important;
}

.label-mode .is-pink .label {
  color: #999999 !important;
}

.label-mode .is-pink .label.selected {
  color: #cf17a1 !important;
}

.label-mode .is-pink .token-arrow.right {
  border-bottom-color: #e61ab3 !important;
}

.label-mode .is-pink .token-arrow.left {
  border-top-color: #e61ab3 !important;
}

.label-mode .strikeout.is-pink span:not(.token-arrow)::after {
  border-bottom-color: #e61ab3 !important;
}

.label-mode .strikeout-opaque.is-pink span:not(.token-arrow)::after {
  border-bottom-color: rgba(230, 26, 179, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-pink {
  border-color: none !important;
  border-bottom-color: #e61ab3 !important;
}

.border-bottom.is-pink.opaque {
  border-color: none !important;
  border-bottom-color: rgba(230, 26, 179, 0.75) !important;
}

.border-both.is-pink {
  border-color: #e61ab3 !important;
}

.border-both.is-pink.opaque {
  border-color: rgba(230, 26, 179, 0.75) !important;
}

.label-mode .is-purple .label {
  color: #999999 !important;
}

.label-mode .is-purple .label.selected {
  color: #8c3cdd !important;
}

.label-mode .is-purple .token-arrow.right {
  border-bottom-color: #9952e0 !important;
}

.label-mode .is-purple .token-arrow.left {
  border-top-color: #9952e0 !important;
}

.label-mode .strikeout.is-purple span:not(.token-arrow)::after {
  border-bottom-color: #9952e0 !important;
}

.label-mode .strikeout-opaque.is-purple span:not(.token-arrow)::after {
  border-bottom-color: rgba(153, 82, 224, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-purple {
  border-color: none !important;
  border-bottom-color: #9952e0 !important;
}

.border-bottom.is-purple.opaque {
  border-color: none !important;
  border-bottom-color: rgba(153, 82, 224, 0.75) !important;
}

.border-both.is-purple {
  border-color: #9952e0 !important;
}

.border-both.is-purple.opaque {
  border-color: rgba(153, 82, 224, 0.75) !important;
}

.label-mode .is-caution .label {
  color: #999999 !important;
}

.label-mode .is-caution .label.selected {
  color: #d39c50 !important;
}

.label-mode .is-caution .token-arrow.right {
  border-bottom-color: #d8a864 !important;
}

.label-mode .is-caution .token-arrow.left {
  border-top-color: #d8a864 !important;
}

.label-mode .strikeout.is-caution span:not(.token-arrow)::after {
  border-bottom-color: #d8a864 !important;
}

.label-mode .strikeout-opaque.is-caution span:not(.token-arrow)::after {
  border-bottom-color: rgba(216, 168, 100, 0.75) !important;
  /*maybe darken?*/
}

.border-bottom.is-caution {
  border-color: none !important;
  border-bottom-color: #d8a864 !important;
}

.border-bottom.is-caution.opaque {
  border-color: none !important;
  border-bottom-color: rgba(216, 168, 100, 0.75) !important;
}

.border-both.is-caution {
  border-color: #d8a864 !important;
}

.border-both.is-caution.opaque {
  border-color: rgba(216, 168, 100, 0.75) !important;
}

/* Accordion styles */
.accordion {
  border-radius: 8px;
  overflow-y: auto;
  position: relative;
}
.accordion input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.accordion .fold {
  width: 100%;
  color: white;
  min-height: 60px;
  display: table;
}
.accordion .fold-label {
  display: flex;
  justify-content: space-between;
  padding: 0.75em;
  background: whitesmoke;
  font-weight: bold;
  color: #4a4a4a;
  cursor: pointer;
  border-bottom: 1px solid #bfbfbf;
  margin: 5px;
  /* Icon */
}
.accordion .fold-label:hover {
  background: #dbdbdb;
}
.accordion .fold-label::after {
  content: "❯";
  text-align: center;
  padding: 0px 5px;
  transition: all 0.2s ease-in, color 0ms;
}
.accordion .fold-content {
  display: none;
  max-height: 0;
  padding: 0 1em;
  color: #4a4a4a;
  background: white;
}

input:checked + .fold-label {
  background: #dbdbdb;
}
input:checked + .fold-label:hover {
  background: #dbdbdb;
}
input:checked + .fold-label::after {
  transform: rotate(90deg);
}
input:checked ~ .fold-content {
  max-height: inherit;
  display: table-row;
  padding: 1em;
  transition: all 0.1s ease-in;
}

/* Navbar */

#navbar-container {
    transition: min-width 0.3s;
}

#navbar-body {
    height: 100vh;
    display: inline-block;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    z-index: 14;
    transition: width 0.3s, box-shadow 0.3s;
}

.navbar-header {
    padding-left: 20px;
}

#navbar-container .logo-panel {
    padding: 24px 0 0 9px;
    transition: transform 0.3s;
}

#navbar-container .anagram-logo {
    font-size: 38px;
    margin: 1px 3px 1px 3px;
}

#navbar-container .minify-button {
    width: 40px;
    height: 40px;
    margin: 26px 26px 0 0;
}

#navbar-container .anagram-logo-details {
    transition: opacity 0.3s;
}

#navbar-container .user-profile {
    align-items: center;
    flex-wrap: nowrap;
    margin: 20px 20px 12px 0;
    padding: 16px 20px 16px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s;
}

.user-list-line {
    align-items: center;
}

.user-list-line, .user-profile-details {
    /* Without fixed metric in parent ellipsis does not work */
    min-width: 0;
}

#navbar-container .user-profile-details {
    transition: opacity 0.3s;
}

#navbar-container .nav-list {
    padding: 0 16px 0 16px;
}

.nav-list .MuiListSubheader-root .MuiListItem-root {
    padding: 16px 0 0 0;
}

.nav-list .MuiTypography-root {
    transition: opacity 0.3s;
}

.nav-list .MuiListItemButton-root {
    border-radius: 8px;
}

.nav-list .MuiListItemButton-root .MuiSvgIcon-root {
    transition: color 0.3s;
}

.nav-list .MuiListItemButton-root .MuiTypography-root {
    transition: color 0.3s, opacity 0.3s;
}

.nav-list .MuiListItemButton-root .MuiTouchRipple-child {
    transition: background-color 0.3s;
}

#navbar-container.minified {
    min-width: 84px;
}

#navbar-container.persistent {
    min-width: 320px;
}

#navbar-container.persistent .nav-list,
#navbar-container.minified #navbar-body:hover .nav-list
{
    width: 320px;
}

#navbar-container.minified #navbar-body:not(:hover) .nav-list {
    transition: width 0.3s;
}

#navbar-container.minified #navbar-body:not(:hover),
#navbar-container.minified #navbar-body:not(:hover) .nav-list {
    width: 84px;
}

#navbar-container.minified #navbar-body:not(:hover) .logo-panel {
    transform: translate(-9px);
}

#navbar-container.minified #navbar-body:not(:hover) .user-profile {
    transform: translate(-18px);
    background-color: rgba(0,0,0,0);
}

#navbar-container.minified #navbar-body:not(:hover) .user-profile .MuiTouchRipple-root {
    display: none;
}

#navbar-container.minified #navbar-body:not(:hover) .anagram-logo-details,
#navbar-container.minified #navbar-body:not(:hover) .user-profile-details,
#navbar-container.minified #navbar-body:not(:hover) .MuiListItemText-root .MuiTypography-root {
    opacity: 0;
}
    
.navbar-content, #navbar-container.persistent #navbar-body, #navbar-container.minified #navbar-body:hover {
    width: 320px;
}

#navbar-container.minified #navbar-body:hover {
    box-shadow: 3px 0 30px rgba(0,0,0,0.16), 0 0 10px rgba(0,0,0,0.23);
}

/* Main */

#app {
    height: 100vh;
    overflow: auto;
}

#app-content {
    flex-grow: 1;
    height: 100%;
}

#toolbar {
    display: flex;
    flex-direction: row;
    min-height: 92px;
    height: 92px;
    padding: 0 26px 0 26px;
    align-items: center;
    justify-content: space-between;
}

#toolbar .toolbar-actions {
    position: absolute;
    top: 0;
    right: 26px;
    height: 92px;
    align-items: center;
}

#main {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    max-width: calc(min(100vw - 110px, max(1080px, 100vw - 346px)));
}

iframe {
    border: none;
}

/* Custom design */

.cm-editor {
    outline: none;
}

#preview-toolbar {
    display: flex;
    flex-direction: row;
    padding: 26px;
    align-items: center;
    justify-content: space-between;
}


/* This file is autogenerated by Grammarly Design System */
:root {
  --blue-0: #f3f6ff;
  --blue-10: #d1dbfe;
  --blue-20: #adbff9;
  --blue-30: #7d99f0;
  --blue-40: #3e6cf4;
  --blue-60: #2551da;
  --blue-80: #02379e;
  --blue-90: #000a62;
  --blue-100: #000a26;
  --blue-gray-0: #f4f4f6;
  --blue-gray-5: #e2e4e9;
  --blue-gray-10: #cdd1dc;
  --blue-gray-20: #c2c6d4;
  --blue-gray-30: #adb2c3;
  --blue-gray-35: #99a0b3;
  --blue-gray-40: #878da2;
  --blue-gray-50: #798096;
  --blue-gray-60: #646b81;
  --blue-gray-70: #565b6c;
  --blue-gray-80: #474b58;
  --blue-gray-90: #27282e;
  --blue-gray-100: #161719;
  --gold-0: #fff6e0;
  --gold-10: #ffebb8;
  --gold-20: #ffdc85;
  --gold-30: #ffbf47;
  --gold-40: #ffa10a;
  --gold-60: #e57300;
  --gold-80: #bd5200;
  --gold-90: #7a3500;
  --gold-100: #1a0b00;
  --green-0: #eafaf9;
  --green-10: #b1f0e8;
  --green-20: #73e1d4;
  --green-30: #2cc9b6;
  --green-40: #15a694;
  --green-60: #027e6f;
  --green-80: #016a5e;
  --green-90: #014c43;
  --green-100: #00231f;
  --light-green: #00e0ac;
  --magenta-0: #ffe5f0;
  --magenta-10: #fec8dd;
  --magenta-20: #faaccb;
  --magenta-30: #f079a8;
  --magenta-40: #e14683;
  --magenta-60: #d21861;
  --magenta-80: #990c43;
  --magenta-90: #600428;
  --magenta-100: #26000f;
  --neutral-gray-0: #f5f5f5;
  --neutral-gray-5: #e6e6e6;
  --neutral-gray-10: #ebebeb;
  --neutral-gray-20: #d9d9d9;
  --neutral-gray-30: #bcbcbc;
  --neutral-gray-35: #a9a9a9;
  --neutral-gray-40: #a8a8a8;
  --neutral-gray-50: #858585;
  --neutral-gray-60: #707070;
  --neutral-gray-70: #616161;
  --neutral-gray-80: #545454;
  --neutral-gray-90: #2e2e2e;
  --neutral-gray-100: #1c1c1c;
  --purple-0: #f7f6fe;
  --purple-10: #ddd9f9;
  --purple-20: #cac3f7;
  --purple-30: #a598f0;
  --purple-40: #8675eb;
  --purple-60: #5e47e5;
  --purple-80: #3d27c0;
  --purple-90: #1b0d6f;
  --purple-100: #0e073b;
  --red-0: #ffeae9;
  --red-10: #ffd1d0;
  --red-20: #ffa8a8;
  --red-30: #ff7a74;
  --red-40: #ff4d45;
  --red-60: #eb0a00;
  --red-80: #cd0800;
  --red-90: #8f0600;
  --red-100: #510300;
  --teal-0: #e6fdfd;
  --teal-10: #ccfafa;
  --teal-20: #b3f8f8;
  --teal-30: #80f3f3;
  --teal-40: #00e6e6;
  --teal-60: #00c4c4;
  --teal-80: #027d7d;
  --teal-90: #005c5c;
  --teal-100: #001f1f;
  --transparent: #ffffff00;
  --white: #ffffff;
  --yellow-green: #d5ff00;
}
/* This file is autogenerated by Grammarly Design System */
:root {
  --elevation100-border: 1px solid var(--color-elevation-outline-default-1);
  --elevation100-shadow: 0px 1px 4px 0.5px var(--color-border-base-default-f3);

  --elevation200-border: 1px solid var(--color-elevation-outline-default-1);
  --elevation200-shadow: 0px 1px 8px 0.5px var(--color-border-base-default-f5);

  --elevation300-border: 1px solid var(--color-elevation-outline-default-1);
  --elevation300-shadow: 0px 2px 12px 0.5px var(--color-border-base-default-f5);

  --elevation-low-border: 1px solid var(--color-elevation-outline-default-1);
  --elevation-low-shadow: 0px 1px 4px 0.5px var(--color-elevation-base-default-f5);

  --elevation-medium-border: 1px solid var(--color-elevation-outline-default-1);
  --elevation-medium-shadow: 0px 1px 8px 0.5px var(--color-elevation-base-default-f4);

  --elevation-high-border: 1px solid var(--color-elevation-outline-default-1);
  --elevation-high-shadow: 0px 2px 12px 0.5px var(--color-elevation-base-default-f3);
}
/* This file is autogenerated by Grammarly Design System */
:root {
  --radius-half: calc(0.125px * var(--rem, 16));
  --radius-0: calc(0px * var(--rem, 16));
  --radius-1: calc(0.25px * var(--rem, 16));
  --radius-1-and-half: calc(0.375px * var(--rem, 16));
  --radius-2: calc(0.5px * var(--rem, 16));
  --radius-2-and-half: calc(0.625px * var(--rem, 16));
  --radius-3: calc(0.75px * var(--rem, 16));
  --radius-4: calc(1px * var(--rem, 16));
  --radius-5: calc(1.25px * var(--rem, 16));
  --radius-6: calc(1.5px * var(--rem, 16));
  --radius-25: calc(6.25px * var(--rem, 16));
}
/* This file is autogenerated by Grammarly Design System */
:root,
[data-gds-theme="light"] {
  --color-background-addition-default: #016a5e;
  --color-background-addition-subdued: #eafaf9;
  --color-background-base-default: #ffffff;
  --color-background-base-subdued: #f5f5f5;
  --color-background-base-inverse: #1c1c1c;
  --color-background-brand-default: #027e6f;
  --color-background-brand-subdued: #eafaf9;
  --color-background-business-default: #707070;
  --color-background-business-subdued: #f5f5f5;
  --color-background-clarity-default: #2551da;
  --color-background-clarity-subdued: #f3f6ff;
  --color-background-correctness-default: #eb0a00;
  --color-background-correctness-subdued: #ffeae9;
  --color-background-critical-default: #eb0a00;
  --color-background-critical-subdued: #ffeae9;
  --color-background-deletion-default: #eb0a00;
  --color-background-deletion-subdued: #ffeae9;
  --color-background-delivery-default: #5e47e5;
  --color-background-delivery-subdued: #f7f6fe;
  --color-background-engagement-default: #016a5e;
  --color-background-engagement-subdued: #eafaf9;
  --color-background-enterprise-default: #1b0d6f;
  --color-background-neutral-default: #707070;
  --color-background-plagiarism-default: #027d7d;
  --color-background-plagiarism-subdued: #e6fdfd;
  --color-background-premium-default: #ffbf47;
  --color-background-premium-subdued: #fff6e0;
  --color-background-pro-default: #ffbf47;
  --color-background-success-default: #016a5e;
  --color-background-success-subdued: #eafaf9;
  --color-background-warning-default: #bd5200;
  --color-background-warning-subdued: #fff6e0;
  --color-border-addition-default: #016a5e;
  --color-border-addition-subdued: #73e1d4;
  --color-border-base-default: #7f7f7f;
  --color-border-base-subdued: #d9d9d9;
  --color-border-base-inverse: #ffffff;
  --color-border-brand-default: #027e6f;
  --color-border-brand-subdued: #73e1d4;
  --color-border-business-default: #707070;
  --color-border-business-subdued: #d9d9d9;
  --color-border-clarity-default: #3e6cf4;
  --color-border-correctness-default: #f00c00;
  --color-border-critical-default: #eb0a00;
  --color-border-critical-subdued: #ffa8a8;
  --color-border-deletion-default: #696969;
  --color-border-deletion-subdued: #696969;
  --color-border-delivery-default: #5e47e5;
  --color-border-elevated-default: #ffffff00;
  --color-border-engagement-default: #016a5e;
  --color-border-plagiarism-default: #027d7d;
  --color-border-premium-default: #ffa10a;
  --color-border-premium-subdued: #ffa10a;
  --color-border-pro-default: #ffa10a;
  --color-border-success-default: #016a5e;
  --color-border-success-subdued: #73e1d4;
  --color-border-warning-default: #bd5200;
  --color-border-warning-subdued: #ffdc85;
  --color-elevation-base-default: #707070;
  --color-elevation-outline-default: #d9d9d9;
  --color-highlight-addition-default: #def6f3;
  --color-highlight-deletion-default: #ebebeb;
  --color-icon-addition-default: #016a5e;
  --color-icon-addition-inverse: #2cc9b6;
  --color-icon-base-default: #707070;
  --color-icon-base-subdued: #bcbcbc;
  --color-icon-base-inverse: #ffffff;
  --color-icon-brand-default: #027e6f;
  --color-icon-business-default: #707070;
  --color-icon-critical-default: #cd0800;
  --color-icon-critical-inverse: #ff7a74;
  --color-icon-deletion-default: #cd0800;
  --color-icon-delivery-default: #5e47e5;
  --color-icon-delivery-inverse: #a598f0;
  --color-icon-premium-default: #7a3500;
  --color-icon-pro-default: #1c1c1c;
  --color-icon-pro-inverse: #ffbf47;
  --color-icon-success-default: #016a5e;
  --color-icon-warning-default: #e57300;
  --color-icon-warning-inverse: #ffbf47;
  --color-illustration-fill-1: #ebebeb;
  --color-illustration-fill-2: #ffffff;
  --color-illustration-fill-default: #1c1c1c;
  --color-illustration-shadow-default: #a8a8a8;
  --color-illustration-stroke-1: #1c1c1c;
  --color-illustration-stroke-2: #1c1c1c;
  --color-illustration-stroke-3: #ffffff;
  --color-illustration-stroke-default: #1c1c1c;
  --color-text-addition-default: #016a5e;
  --color-text-base-default: #1c1c1c;
  --color-text-base-subdued: #707070;
  --color-text-base-inverse: #ffffff;
  --color-text-brand-default: #027e6f;
  --color-text-business-default: #545454;
  --color-text-clarity-default: #02379e;
  --color-text-correctness-default: #cd0800;
  --color-text-critical-default: #cd0800;
  --color-text-dark-default: #1c1c1c;
  --color-text-deletion-default: #696969;
  --color-text-delivery-default: #3d27c0;
  --color-text-engagement-default: #016a5e;
  --color-text-enterprise-default: #ffffff;
  --color-text-light-default: #ffffff;
  --color-text-plagiarism-default: #027d7d;
  --color-text-premium-default: #7a3500;
  --color-text-pro-default: #1c1c1c;
  --color-text-success-default: #016a5e;
  --color-text-warning-default: #7a3500;
  --color-elevation-outline-default-1: rgba(217, 217, 217, 1);
  --color-border-base-default-f3: rgba(127, 127, 127, 0.3);
  --color-border-base-default-f5: rgba(127, 127, 127, 0.5);
  --color-elevation-base-default-f5: rgba(112, 112, 112, 0.5);
  --color-elevation-base-default-f4: rgba(112, 112, 112, 0.4);
  --color-elevation-base-default-f3: rgba(112, 112, 112, 0.3);
}
/* This file is autogenerated by Grammarly Design System */
[data-gds-theme="dark"] {
  --color-background-addition-default: #2cc9b6;
  --color-background-addition-subdued: #014c43;
  --color-background-base-default: #1c1c1c;
  --color-background-base-subdued: #2e2e2e;
  --color-background-base-inverse: #ffffff;
  --color-background-brand-default: #2cc9b6;
  --color-background-brand-subdued: #014c43;
  --color-background-business-default: #bcbcbc;
  --color-background-business-subdued: #2e2e2e;
  --color-background-clarity-default: #7d99f0;
  --color-background-clarity-subdued: #000a62;
  --color-background-correctness-default: #ff7a74;
  --color-background-correctness-subdued: #510300;
  --color-background-critical-default: #ff7a74;
  --color-background-critical-subdued: #510300;
  --color-background-deletion-default: #ff7a74;
  --color-background-deletion-subdued: #510300;
  --color-background-delivery-default: #a598f0;
  --color-background-delivery-subdued: #1b0d6f;
  --color-background-engagement-default: #2cc9b6;
  --color-background-engagement-subdued: #014c43;
  --color-background-enterprise-default: #ffffff;
  --color-background-neutral-default: #bcbcbc;
  --color-background-plagiarism-default: #80f3f3;
  --color-background-plagiarism-subdued: #005c5c;
  --color-background-premium-default: #ffbf47;
  --color-background-premium-subdued: #ffdc85;
  --color-background-pro-default: #ffbf47;
  --color-background-success-default: #2cc9b6;
  --color-background-success-subdued: #014c43;
  --color-background-warning-default: #ffbf47;
  --color-background-warning-subdued: #7a3500;
  --color-border-addition-default: #2cc9b6;
  --color-border-addition-subdued: #016a5e;
  --color-border-base-default: #7f7f7f;
  --color-border-base-subdued: #545454;
  --color-border-base-inverse: #ffffff;
  --color-border-brand-default: #2cc9b6;
  --color-border-brand-subdued: #016a5e;
  --color-border-business-default: #bcbcbc;
  --color-border-business-subdued: #707070;
  --color-border-clarity-default: #3e6cf4;
  --color-border-correctness-default: #f00c00;
  --color-border-critical-default: #ff7a74;
  --color-border-critical-subdued: #cd0800;
  --color-border-deletion-default: #ff4d45;
  --color-border-deletion-subdued: #ff4d45;
  --color-border-delivery-default: #a598f0;
  --color-border-elevated-default: #545454;
  --color-border-engagement-default: #2cc9b6;
  --color-border-plagiarism-default: #80f3f3;
  --color-border-premium-default: #e57300;
  --color-border-premium-subdued: #ffdc85;
  --color-border-pro-default: #ffa10a;
  --color-border-success-default: #2cc9b6;
  --color-border-success-subdued: #016a5e;
  --color-border-warning-default: #ffbf47;
  --color-border-warning-subdued: #bd5200;
  --color-elevation-base-default: #1c1c1c;
  --color-elevation-outline-default: #545454;
  --color-highlight-addition-default: #014c43;
  --color-highlight-deletion-default: #2e2e2e;
  --color-icon-addition-default: #2cc9b6;
  --color-icon-addition-inverse: #016a5e;
  --color-icon-base-default: #d9d9d9;
  --color-icon-base-subdued: #707070;
  --color-icon-base-inverse: #1c1c1c;
  --color-icon-brand-default: #2cc9b6;
  --color-icon-business-default: #bcbcbc;
  --color-icon-critical-default: #ff7a74;
  --color-icon-critical-inverse: #cd0800;
  --color-icon-deletion-default: #ff7a74;
  --color-icon-delivery-default: #a598f0;
  --color-icon-delivery-inverse: #5e47e5;
  --color-icon-premium-default: #7a3500;
  --color-icon-pro-default: #1c1c1c;
  --color-icon-pro-inverse: #ffbf47;
  --color-icon-success-default: #2cc9b6;
  --color-icon-warning-default: #ffbf47;
  --color-icon-warning-inverse: #e57300;
  --color-illustration-fill-1: #bcbcbc;
  --color-illustration-fill-2: #ebebeb;
  --color-illustration-fill-default: #545454;
  --color-illustration-shadow-default: #545454;
  --color-illustration-stroke-1: #a8a8a8;
  --color-illustration-stroke-2: #ffffff;
  --color-illustration-stroke-3: #ebebeb;
  --color-illustration-stroke-default: #545454;
  --color-text-addition-default: #2cc9b6;
  --color-text-base-default: #ffffff;
  --color-text-base-subdued: #bcbcbc;
  --color-text-base-inverse: #1c1c1c;
  --color-text-brand-default: #2cc9b6;
  --color-text-business-default: #bcbcbc;
  --color-text-clarity-default: #7d99f0;
  --color-text-correctness-default: #ff7a74;
  --color-text-critical-default: #ff7a74;
  --color-text-deletion-default: #a8a8a8;
  --color-text-delivery-default: #a598f0;
  --color-text-engagement-default: #2cc9b6;
  --color-text-enterprise-default: #1b0d6f;
  --color-text-plagiarism-default: #00e6e6;
  --color-text-premium-default: #7a3500;
  --color-text-pro-default: #1c1c1c;
  --color-text-success-default: #2cc9b6;
  --color-text-warning-default: #ffbf47;
  --color-elevation-outline-default-1: rgba(84, 84, 84, 1);
  --color-elevation-base-default-1: rgba(28, 28, 28, 1);

  --elevation-low-border: 1px solid var(--color-elevation-outline-default-1);
  --elevation-low-shadow: 0px 1px 4px 0.5px var(--color-elevation-base-default-1);

  --elevation-medium-border: 1px solid var(--color-elevation-outline-default-1);
  --elevation-medium-shadow: 0px 1px 8px 0.5px var(--color-elevation-base-default-1);

  --elevation-high-border: 1px solid var(--color-elevation-outline-default-1);
  --elevation-high-shadow: 0px 2px 12px 0.5px var(--color-elevation-base-default-1);
}

[data-gds-theme="dark"] {
  --button-primary-background-default: var(--green-30);
  --button-primary-background-hover: var(--green-20);
  --button-primary-background-active: var(--green-10);
  --button-primary-text-default: var(--neutral-gray-100);
  --button-primary-text-hover: var(--neutral-gray-100);
  --button-primary-text-active: var(--neutral-gray-100);
  --button-primary-shortcut-background-default: var(--green-20);
  --button-primary-shortcut-background-hover: var(--green-10);
  --button-primary-shortcut-background-active: var(--green-20);
  --button-primary-shortcut-text-default: var(--neutral-gray-100);
  --button-primary-shortcut-text-hover: var(--neutral-gray-100);
  --button-primary-shortcut-text-active: var(--neutral-gray-100);
  --button-secondary-background-default: transparent;
  --button-secondary-background-hover: var(--neutral-gray-90);
  --button-secondary-background-active: var(--neutral-gray-80);
  --button-secondary-border-default: var(--neutral-gray-80);
  --button-secondary-border-hover: var(--neutral-gray-80);
  --button-secondary-border-active: var(--neutral-gray-80);
  --button-secondary-text-default: var(--color-text-base-default);
  --button-secondary-text-hover: var(--color-text-base-default);
  --button-secondary-text-active: var(--color-text-base-default);
  --button-secondary-shortcut-border-default: var(--neutral-gray-80);
  --button-secondary-shortcut-border-hover: var(--neutral-gray-80);
  --button-secondary-shortcut-border-active: var(--neutral-gray-60);
  --button-secondary-shortcut-text-default: var(--neutral-gray-20);
  --button-secondary-shortcut-text-hover: var(--neutral-gray-20);
  --button-secondary-shortcut-text-active: var(--green-0);
  --button-secondary-shortcut-background-default: var(--neutral-gray-80);
  --button-secondary-shortcut-background-hover: var(--neutral-gray-80);
  --button-secondary-shortcut-background-active: var(--neutral-gray-60);
  --button-tertiary-background-default: transparent;
  --button-tertiary-background-hover: #3f3f3f;
  --button-tertiary-background-active: var(--neutral-gray-80);
  --button-tertiary-border-default: transparent;
  --button-tertiary-border-hover: transparent;
  --button-tertiary-border-active: transparent;
  --button-tertiary-text-default: var(--neutral-gray-30);
  --button-tertiary-text-hover: var(--neutral-gray-30);
  --button-tertiary-text-active: var(--neutral-gray-20);
  --button-tertiary-shortcut-border-default: var(--neutral-gray-10);
  --button-tertiary-shortcut-border-hover: var(--neutral-gray-10);
  --button-tertiary-shortcut-border-active: var(--neutral-gray-10);
  --button-tertiary-shortcut-text-default: var(--neutral-gray-30);
  --button-tertiary-shortcut-text-hover: var(--neutral-gray-30);
  --button-tertiary-shortcut-text-active: var(--neutral-gray-20);
  --button-ghost-background-default: transparent;
  --button-ghost-background-hover: var(--green-100);
  --button-ghost-background-active: var(--green-90);
  --button-ghost-text-default: var(--green-30);
  --button-ghost-text-hover: var(--green-20);
  --button-ghost-text-active: var(--green-20);
  --button-ghost-shortcut-background-default: var(--green-30);
  --button-ghost-shortcut-background-hover: var(--green-30);
  --button-ghost-shortcut-background-active: var(--green-30);
  --button-ghost-shortcut-text-default: var(--neutral-gray-100);
  --button-ghost-shortcut-text-hover: var(--neutral-gray-100);
  --button-ghost-shortcut-text-active: var(--neutral-gray-100);
  --button-critical-background-default: var(--red-30);
  --button-critical-background-hover: var(--red-20);
  --button-critical-background-active: var(--red-10);
  --button-critical-text-default: var(--neutral-gray-100);
  --button-enterprise-text-default: var(--color-text-enterprise-default);
  --button-enterprise-background-default: var(--color-background-enterprise-default);
  --button-enterprise-background-hover: var(--purple-20);
  --button-enterprise-background-active: var(--purple-10);
}
/* This file is autogenerated by Grammarly Design System */
:root {
  --space-quarter: calc(0.0625px * var(--rem, 16));
  --space-half: calc(0.125px * var(--rem, 16));
  --space-0: calc(0px * var(--rem, 16));
  --space-1: calc(0.25px * var(--rem, 16));
  --space-1-and-half: calc(0.375px * var(--rem, 16));
  --space-2: calc(0.5px * var(--rem, 16));
  --space-3: calc(0.75px * var(--rem, 16));
  --space-4: calc(1px * var(--rem, 16));
  --space-5: calc(1.25px * var(--rem, 16));
  --space-6: calc(1.5px * var(--rem, 16));
  --space-8: calc(2px * var(--rem, 16));
  --space-10: calc(2.5px * var(--rem, 16));
  --space-12: calc(3px * var(--rem, 16));
  --space-14: calc(3.5px * var(--rem, 16));
  --space-16: calc(4px * var(--rem, 16));
  --space-18: calc(4.5px * var(--rem, 16));
  --space-20: calc(5px * var(--rem, 16));
}
/* This file is autogenerated by Grammarly Design System */
:root,
:host {
  --rem: 16;
  --font-stack-inter: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
  --font-stack-matter: Matter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.gds-token-typography-heading-large,
.gds-token-typography-heading-medium,
.gds-token-typography-heading-small,
.gds-token-typography-heading-x-small,
.gds-token-typography-heading-xx-small,
.gds-token-typography-text-large,
.gds-token-typography-text-medium,
.gds-token-typography-text-small,
.gds-token-typography-text-x-small {
  all: unset;
  letter-spacing: normal;
  font-weight: 400;
  font-feature-settings:
    "ss03" on,
    "ss01" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

.gds-token-typography-heading-large {
  font-family: var(--font-stack-matter);
  font-size: calc(2px * (var(--rem) - 2));
  line-height: calc(2.286px * (var(--rem) - 2));
  font-weight: 700;
  letter-spacing: -0.0025em;
}

.gds-token-typography-heading-medium {
  font-family: var(--font-stack-matter);
  font-size: calc(1.714px * (var(--rem) - 2));
  line-height: calc(2.286px * (var(--rem) - 2));
  font-weight: 700;
  letter-spacing: -0.002em;
}

.gds-token-typography-heading-small {
  font-family: var(--font-stack-matter);
  font-size: calc(1.429px * (var(--rem) - 2));
  line-height: calc(1.7144px * (var(--rem) - 2));
  font-weight: 600;
}

.gds-token-typography-heading-x-small {
  font-family: var(--font-stack-matter);
  font-size: calc(1.143px * (var(--rem) - 2));
  line-height: calc(1.7144px * (var(--rem) - 2));
  font-weight: 600;
}

.gds-token-typography-heading-xx-small {
  font-family: var(--font-stack-matter);
  font-size: calc(1px * (var(--rem) - 2));
  line-height: calc(1.5px * (var(--rem) - 2));
  font-weight: 600;
}

.gds-token-typography-text-large {
  font-family: var(--font-stack-inter);
  font-size: calc(1.286px * (var(--rem) - 2));
  line-height: calc(2.2862px * (var(--rem) - 2));
}

.gds-token-typography-text-medium {
  font-family: var(--font-stack-inter);
  font-size: calc(1.143px * (var(--rem) - 2));
  line-height: calc(1.714px * (var(--rem) - 2));
}

.gds-token-typography-text-small {
  font-family: var(--font-stack-inter);
  font-size: calc(1px * (var(--rem) - 2));
  line-height: calc(1.51px * (var(--rem) - 2));
}

.gds-token-typography-text-x-small {
  font-family: var(--font-stack-inter);
  font-size: calc(0.86px * (var(--rem) - 2));
  line-height: calc(1.2868px * (var(--rem) - 2));
}
/* stylelint-disable comment-empty-line-before */
/* NOTE: not using typography.css to avoid `all: unset` */

.gds-typography {
  margin: 0;
  padding: 0; /* for legend */
  text-align: inherit;
  font-family: var(--font-stack-inter);
  /* 
    see https://rsms.me/inter/#:~:text=Listing%20of%20all%20features 
    - Open digits (ss01)
    - Uppercase I with serif (cv08)
  */
  font-feature-settings:
    "ss01" on,
    "cv08" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gds-text-large {
  font-size: calc(1.286px * (var(--rem) - 2));
  line-height: calc(2.2862px * (var(--rem) - 2));
}

.gds-text-medium {
  font-size: calc(1.143px * (var(--rem) - 2));
  line-height: calc(1.714px * (var(--rem) - 2));
}

.gds-text-small {
  font-size: calc(1px * (var(--rem) - 2));
  line-height: calc(1.51px * (var(--rem) - 2));
  /* FIXME: should be 1.5px */
}

.gds-text-xsmall {
  font-size: calc(0.86px * (var(--rem) - 2));
  line-height: calc(1.2868px * (var(--rem) - 2));
}

.gds-heading {
  font-weight: 700;
  font-family: var(--font-stack-matter);
  font-feature-settings: normal;
}

.gds-heading-large {
  font-size: calc(2px * (var(--rem) - 2));
  line-height: calc(2.286px * (var(--rem) - 2));
  letter-spacing: -0.0025em;
}

.gds-heading-medium {
  font-size: calc(1.714px * (var(--rem) - 2));
  line-height: calc(2.286px * (var(--rem) - 2));
  letter-spacing: -0.002em;
}

.gds-heading-small {
  font-weight: 600;
  font-size: calc(1.429px * (var(--rem) - 2));
  line-height: calc(1.7144px * (var(--rem) - 2));
}

.gds-heading-xsmall {
  font-weight: 600;
  font-size: calc(1.143px * (var(--rem) - 2));
  line-height: calc(1.7144px * (var(--rem) - 2));
}

.gds-heading-xxsmall {
  font-weight: 600;
  font-size: calc(1px * (var(--rem) - 2));
  line-height: calc(1.5px * (var(--rem) - 2));
}
:root,
:host {
  --z-index-modal: 1000;
  --z-index-popover: 1010;
  --z-index-tooltip: 1020;
}
.gds-badge {
  box-sizing: border-box;
  padding: 0 6px; /* deviation from space-1 is important */
  color: var(--color-text-base-inverse);
  border: 1px solid var(--white);
  border-radius: var(--radius-3);
  display: inline-flex;
  justify-content: center;
  min-width: 18px;
  height: fit-content;
}

.gds-badge:focus-visible {
  outline: 2px solid var(--color-border-brand-default);
}

.gds-badge-tooltip {
  cursor: pointer;
}
/* based on https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/helpers/_visually-hidden.scss#L16 */
.gds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px; /* avoid scrollbar if container is using something like vh units  */
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;

  /* Prevent a user unintentionally copying more text than they intended and needing to manually trim it down again. */
  user-select: none;
}

/*
Absolute positioning has the unintended consequence of removing any whitespace surrounding visually hidden text from the accessibility tree.
Insert a space character before and after visually hidden text to separate it from any visible text surrounding it. 
*/
.gds-sr-only::before,
.gds-sr-only::after {
  content: "\00a0";
}
.gds-tooltip {
  color: var(--color-text-light-default);
  border: 1px solid var(--color-border-elevated-default);
  border-radius: var(--radius-1);
  box-sizing: border-box;
  width: max-content;
  max-width: 200px;
  transition-property: opacity, transform;
  z-index: var(--z-index-tooltip);
}

.gds-tooltip-content {
  background-color: var(--color-background-base-subdued);
  border-radius: var(--radius-1);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
}

.gds-tooltip-content-annotation {
  color: var(--color-text-base-subdued);
  border: solid 1px var(--color-border-base-subdued);
  border-radius: var(--radius-1);
  height: fit-content;
  padding: 0 var(--space-1);
}

.gds-arrow {
  fill: var(--neutral-gray-90);
  width: 14px;
}

.gds-tooltip[data-status="open"],
.gds-tooltip[data-status="close"] {
  transition-duration: 200ms;
}

.gds-tooltip[data-status="initial"],
.gds-tooltip[data-status="close"] {
  opacity: 0;
}

.gds-tooltip[data-status="initial"][data-placement^="top"],
.gds-tooltip[data-status="close"][data-placement^="top"] {
  transform: translateY(5px);
}

.gds-tooltip[data-status="initial"][data-placement^="bottom"],
.gds-tooltip[data-status="close"][data-placement^="bottom"] {
  transform: translateY(-5px);
}

.gds-tooltip[data-status="initial"][data-placement^="left"],
.gds-tooltip[data-status="close"][data-placement^="left"] {
  transform: translateX(5px);
}

.gds-tooltip[data-status="initial"][data-placement^="right"],
.gds-tooltip[data-status="close"][data-placement^="right"] {
  transform: translateX(-5px);
}

@media (prefers-reduced-motion) {
  .gds-tooltip[data-status="open"],
  .gds-tooltip[data-status="close"] {
    transition-duration: 0ms;
  }
}
.gds-box {
  display: block;
  box-sizing: border-box;
}

.gds-box-elevation-low {
  border: var(--elevation-low-border);
  box-shadow: var(--elevation-low-shadow);
}

.gds-box-elevation-medium {
  border: var(--elevation-medium-border);
  box-shadow: var(--elevation-medium-shadow);
}

.gds-box-elevation-high {
  border: var(--elevation-high-border);
  box-shadow: var(--elevation-high-shadow);
}
/* stylelint-disable rule-empty-line-before */
.gds-icon {
  fill: transparent;
  box-sizing: border-box;
  overflow-clip-margin: border-box;
  overflow: auto;
}

.gds-icon-default [stroke] {
  stroke: var(--color-icon-base-default);
}
.gds-icon-default [fill] {
  fill: var(--color-icon-base-default);
}

.gds-icon-business [stroke] {
  stroke: var(--color-icon-business-default);
}
.gds-icon-business [fill] {
  fill: var(--color-icon-business-default);
}

.gds-icon-addition [stroke] {
  stroke: var(--color-icon-addition-default);
}
.gds-icon-addition [fill] {
  fill: var(--color-icon-addition-default);
}

.gds-icon-critical [stroke] {
  stroke: var(--color-icon-critical-default);
}
.gds-icon-critical [fill] {
  fill: var(--color-icon-critical-default);
}

.gds-icon-deletion [stroke] {
  stroke: var(--color-icon-deletion-default);
}
.gds-icon-deletion [fill] {
  fill: var(--color-icon-deletion-default);
}

.gds-icon-premium [stroke] {
  stroke: var(--color-icon-premium-default);
}
.gds-icon-premium [fill] {
  fill: var(--color-icon-premium-default);
}

.gds-icon-pro [fill] {
  fill: var(--color-icon-pro-inverse);
}

.gds-icon-success [stroke] {
  stroke: var(--color-icon-success-default);
}
.gds-icon-success [fill] {
  fill: var(--color-icon-success-default);
}

.gds-icon-warning [stroke] {
  stroke: var(--color-icon-warning-default);
}
.gds-icon-warning [fill] {
  fill: var(--color-icon-warning-default);
}

.gds-icon-inverse [stroke] {
  stroke: var(--color-icon-base-inverse);
}
.gds-icon-inverse [fill] {
  fill: var(--color-icon-base-inverse);
}

.gds-icon-brand [stroke] {
  stroke: var(--color-icon-brand-default);
}
.gds-icon-brand [fill] {
  fill: var(--color-icon-brand-default);
}

.gds-icon-inherit [stroke] {
  stroke: currentcolor;
}
.gds-icon-inherit [fill] {
  fill: currentcolor;
}

/* 
  override stroke/fill in SVG of nocolor icons to use color tokens instead so they obey dark mode 
  see writeIconComponent.ts for list of nocolor icons
*/
[data-icon="InterfaceMinus"] [fill],
[data-icon="InterfaceOk"] [fill],
[data-icon="InterfaceError"] [fill],
[data-icon="InterfaceWarning"] [fill],
[data-icon="InterfaceSuicidePrevention"] [fill] {
  fill: currentcolor;
}

[data-icon="InterfaceMinus"] {
  color: var(--color-icon-critical-default);
}
[data-icon="InterfaceMinus"].gds-icon-inverse {
  color: var(--color-icon-critical-inverse);
}

[data-icon="InterfaceOk"] {
  color: var(--color-icon-addition-default);
}
[data-icon="InterfaceOk"].gds-icon-inverse {
  color: var(--color-icon-addition-inverse);
}

[data-icon="InterfaceError"] {
  color: var(--color-icon-critical-default);
}
[data-icon="InterfaceError"].gds-icon-inverse {
  color: var(--color-icon-critical-inverse);
}

[data-icon="InterfaceWarning"] {
  color: var(--color-icon-warning-default);
}
[data-icon="InterfaceWarning"].gds-icon-inverse {
  color: var(--color-icon-warning-inverse);
}

[data-icon="InterfaceSuicidePrevention"] {
  color: var(--color-icon-delivery-default);
}
[data-icon="InterfaceSuicidePrevention"].gds-icon-inverse {
  color: var(--color-icon-delivery-inverse);
}
/* stylelint-disable no-descending-specificity */

.gds-button {
  /* reset browser defaults */
  align-items: center;
  appearance: none;
  border-radius: calc(var(--radius-half) + var(--radius-1));
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  gap: var(--space-1);
  justify-content: center;
  outline: none;
  padding: 0;
  text-align: start;
  transition: background-color 0.1s ease;
  white-space: nowrap;
  position: relative;
  width: fit-content;
}

/* NOTE: dark colors are found in semantic_colors_dark.css */
:root,
:host,
[data-gds-theme="light"] {
  --button-primary-background-default: var(--green-60);
  --button-primary-background-hover: var(--green-80);
  --button-primary-background-active: var(--green-90);
  --button-primary-text-default: var(--white);
  --button-primary-text-hover: var(--white);
  --button-primary-text-active: var(--white);
  --button-primary-shortcut-background-default: var(--green-90);
  --button-primary-shortcut-background-hover: var(--green-90);
  --button-primary-shortcut-background-active: var(--green-60);
  --button-primary-shortcut-text-default: var(--white);
  --button-primary-shortcut-text-hover: var(--white);
  --button-primary-shortcut-text-active: var(--white);
  --button-secondary-background-default: transparent;
  --button-secondary-background-hover: var(--neutral-gray-10);
  --button-secondary-background-active: var(--neutral-gray-20);
  --button-secondary-border-default: var(--neutral-gray-20);
  --button-secondary-border-hover: var(--neutral-gray-20);
  --button-secondary-border-active: var(--neutral-gray-20);
  --button-secondary-text-default: var(--neutral-gray-100);
  --button-secondary-text-hover: var(--neutral-gray-100);
  --button-secondary-text-active: var(--neutral-gray-100);
  --button-secondary-shortcut-border-default: var(--neutral-gray-10);
  --button-secondary-shortcut-border-hover: var(--neutral-gray-20);
  --button-secondary-shortcut-border-active: var(--neutral-gray-30);
  --button-secondary-shortcut-text-default: var(--neutral-gray-80);
  --button-secondary-shortcut-text-hover: var(--neutral-gray-80);
  --button-secondary-shortcut-text-active: var(--neutral-gray-90);
  --button-secondary-shortcut-background-default: var(--neutral-gray-10);
  --button-secondary-shortcut-background-hover: var(--neutral-gray-20);
  --button-secondary-shortcut-background-active: var(--neutral-gray-30);
  --button-tertiary-background-default: transparent;
  --button-tertiary-background-hover: var(--neutral-gray-10);
  --button-tertiary-background-active: var(--neutral-gray-20);
  --button-tertiary-border-default: transparent;
  --button-tertiary-border-hover: transparent;
  --button-tertiary-border-active: transparent;
  --button-tertiary-text-default: var(--neutral-gray-60);
  --button-tertiary-text-hover: var(--neutral-gray-80);
  --button-tertiary-text-active: var(--neutral-gray-80);
  --button-tertiary-shortcut-border-default: var(--neutral-gray-60);
  --button-tertiary-shortcut-border-hover: var(--neutral-gray-80);
  --button-tertiary-shortcut-border-active: var(--neutral-gray-80);
  --button-tertiary-shortcut-text-default: var(--neutral-gray-60);
  --button-tertiary-shortcut-text-hover: var(--neutral-gray-80);
  --button-tertiary-shortcut-text-active: var(--neutral-gray-80);
  --button-ghost-background-default: transparent;
  --button-ghost-background-hover: var(--green-0);
  --button-ghost-background-active: var(--green-10);
  --button-ghost-text-default: var(--green-60);
  --button-ghost-text-hover: var(--green-80);
  --button-ghost-text-active: var(--green-80);
  --button-ghost-shortcut-background-default: var(--green-60);
  --button-ghost-shortcut-background-hover: var(--green-60);
  --button-ghost-shortcut-background-active: var(--green-60);
  --button-ghost-shortcut-text-default: var(--white);
  --button-ghost-shortcut-text-hover: var(--white);
  --button-ghost-shortcut-text-active: var(--white);
  --button-premium-background-default: var(--gold-30);
  --button-premium-background-hover: var(--gold-20);
  --button-premium-background-active: var(--gold-10);
  --button-premium-text-default: var(--gold-90);
  --button-premium-text-hover: var(--gold-90);
  --button-premium-text-active: var(--gold-90);
  --button-critical-background-default: var(--red-60);
  --button-critical-background-hover: var(--red-80);
  --button-critical-background-active: var(--red-90);
  --button-critical-text-default: var(--white);
  --button-pro-text-default: var(--color-text-pro-default);
  --button-pro-text-hover: var(--gold-30);
  --button-pro-text-active: var(--neutral-gray-20);
  --button-pro-background-default: var(--color-background-pro-default);
  --button-pro-background-hover: var(--neutral-gray-100);
  --button-pro-background-active: var(--neutral-gray-100);
  --button-enterprise-text-default: var(--color-text-enterprise-default);
  --button-enterprise-background-default: var(--color-background-enterprise-default);
  --button-enterprise-background-hover: var(--purple-80);
  --button-enterprise-background-active: var(--purple-60);
}

.gds-button-small,
.gds-icon-button-small {
  height: 24px;
}

.gds-icon-button-small {
  width: 24px;
}

.gds-button-small {
  padding: 3px var(--space-2);
}

.gds-button-medium,
.gds-icon-button-medium {
  height: 32px;
}

.gds-icon-button-medium {
  width: 32px;
}

.gds-button-medium {
  padding: 5.5px var(--space-3);
}

.gds-button-large,
.gds-icon-button-large {
  height: 40px;
}

.gds-icon-button-large {
  width: 40px;
}

.gds-button-large {
  border-radius: var(--radius-2);
  gap: calc(var(--space-1) + var(--space-half));
  padding: 5.5px var(--space-4);
}

.gds-button-xlarge,
.gds-icon-button-xlarge {
  height: 48px;
}

.gds-icon-button-xlarge {
  width: 48px;
}

.gds-button-xlarge {
  border-radius: var(--radius-2);
  gap: var(--space-2);
  padding: 5.5px var(--space-5);
}

.gds-button-2xlarge,
.gds-icon-button-2xlarge {
  height: 56px;
}

.gds-button-2xlarge {
  border-radius: var(--radius-2);
  gap: calc(var(--space-2) + var(--space-half));
  padding: 5.5px var(--space-6);
}

.gds-button-3xlarge,
.gds-icon-button-3xlarge {
  height: 72px;
}

.gds-button-3xlarge {
  border-radius: var(--radius-2);
  gap: var(--space-3);
  padding: 5.5px calc(var(--space-6) + var(--space-1));
}

.gds-button-3xlarge .gds-text {
  font-size: 20px;
}

.gds-button-4xlarge,
.gds-icon-button-4xlarge {
  height: 88px;
}

.gds-button-4xlarge {
  border-radius: var(--radius-2);
  gap: var(--space-3);
  padding: 5.5px var(--space-8);
}

.gds-button-4xlarge .gds-text {
  font-size: 24px;
}

/* iconStart */
.gds-button .gds-icon:first-child {
  margin-inline-start: calc(-1 * var(--space-1));
}

/* iconEnd */
.gds-button .gds-icon:last-child {
  margin-inline-end: calc(-1 * var(--space-1));
}

/* iconStart */
.gds-button-small .gds-icon:first-child,
.gds-button-medium .gds-icon:first-child {
  margin-inline-start: calc(-1 * var(--space-half));
}

/* iconEnd */
.gds-button-small .gds-icon:last-child,
.gds-button-medium .gds-icon:last-child {
  margin-inline-end: calc(-1 * var(--space-half));
}

a.gds-button:hover {
  text-decoration: none;
}

.gds-button-focus-visible {
  outline: 2px solid var(--color-border-brand-default);
  outline-offset: 2px;
}

.gds-button-disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.gds-button-full {
  width: 100%;
}

/* see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html on why we have a custom class for pressed events */
.gds-button-pressed {
  background-color: var(--gds-button-background-color-active);
  color: var(--gds-button-color-active);
}

.gds-button-shortcut {
  border-radius: var(--radius-1);
  padding-inline: var(--space-1);
  margin-inline-start: var(--space-1);
  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  box-shadow: none;
  border: none;
}

.gds-button-3xlarge .gds-button-shortcut,
.gds-button-4xlarge .gds-button-shortcut {
  margin-inline-start: var(--space-2);
}

.gds-button-3xlarge .gds-icon {
  width: 28px;
  height: 28px;
}

.gds-button-4xlarge .gds-icon,
.gds-icon-button-xlarge .gds-icon {
  width: 32px;
  height: 32px;
}

/* Button variants */

/* primary */
.gds-button-primary {
  color: var(--button-primary-text-default);
  background-color: var(--button-primary-background-default);
}

.gds-button-primary:hover:not(.gds-button-disabled, .gds-button-pressed, .gds-button-loading),
.gds-button-primary[data-simulate="hover"]:not(
    .gds-button-disabled,
    .gds-button-pressed,
    .gds-button-loading
  ) {
  color: var(--button-primary-text-default);
  background-color: var(--button-primary-background-hover);
}

.gds-button-primary:hover:not(.gds-button-disabled, .gds-button-pressed) .gds-button-shortcut,
.gds-button-primary[data-simulate="hover"]:not(.gds-button-disabled, .gds-button-pressed)
  .gds-button-shortcut {
  background-color: var(--button-primary-shortcut-background-hover);
}

.gds-button-primary.gds-button-pressed:not(.gds-button-loading) {
  background-color: var(--button-primary-background-active);
}

.gds-button-primary .gds-button-shortcut {
  color: var(--button-primary-shortcut-text-default);
  background-color: var(--button-primary-shortcut-background-default);
}

.gds-button-primary.gds-button-pressed .gds-button-shortcut {
  background-color: var(--button-primary-shortcut-background-active);
}

/* secondary */
.gds-button-secondary {
  color: var(--button-secondary-text-default);
  background-color: var(--button-secondary-background-default);
  box-shadow: inset 0 0 0 1px var(--button-secondary-border-default);
}

.gds-button-secondary .gds-icon [stroke] {
  stroke: var(--color-icon-base-default);
}

.gds-button-secondary:hover:not(.gds-button-disabled, .gds-button-pressed, .gds-button-loading),
.gds-button-secondary[data-simulate="hover"]:not(
    .gds-button-disabled,
    .gds-button-pressed,
    .gds-button-loading
  ) {
  color: var(--button-secondary-text-hover);
  background-color: var(--button-secondary-background-hover);
}

.gds-button-secondary:hover:not(.gds-button-disabled, .gds-button-pressed) .gds-button-shortcut,
.gds-button-secondary[data-simulate="hover"]:not(.gds-button-disabled, .gds-button-pressed)
  .gds-button-shortcut {
  background-color: var(--button-secondary-shortcut-background-hover);
  border-color: var(--button-secondary-shortcut-border-hover);
  color: var(--button-secondary-shortcut-text-hover);
}

.gds-button-secondary:hover:not(.gds-button-disabled, .gds-button-pressed) .gds-icon [stroke],
.gds-button-secondary[data-simulate="hover"]:not(.gds-button-disabled, .gds-button-pressed)
  .gds-icon
  [stroke] {
  stroke: currentcolor;
}

.gds-button-secondary.gds-button-pressed:not(.gds-button-loading) {
  background-color: var(--button-secondary-background-active);
  color: var(--button-secondary-text-active);
}

.gds-button-secondary.gds-button-pressed .gds-button-shortcut {
  background-color: var(--button-secondary-shortcut-background-active);
  border-color: var(--button-secondary-shortcut-border-active);
}

.gds-button-secondary.gds-button-pressed .gds-icon [stroke] {
  stroke: currentcolor;
}

.gds-button-secondary .gds-button-shortcut {
  background-color: var(--button-secondary-shortcut-background-default);
  border: 1px solid var(--button-secondary-shortcut-border-default);
  border-radius: var(--radius-1);
}

/* tertiary */
.gds-button-tertiary {
  color: var(--button-tertiary-text-default);
  background-color: transparent;
  border-color: transparent;
}

.gds-button-tertiary:hover:not(.gds-button-disabled, .gds-button-pressed, .gds-button-loading),
.gds-button-tertiary[data-simulate="hover"]:not(
    .gds-button-disabled,
    .gds-button-pressed,
    .gds-button-loading
  ) {
  background-color: var(--button-tertiary-background-hover);
  color: var(--button-tertiary-text-hover);
}

.gds-button-tertiary:hover:not(.gds-button-disabled, .gds-button-pressed) .gds-button-shortcut,
.gds-button-tertiary[data-simulate="hover"]:not(.gds-button-disabled, .gds-button-pressed)
  .gds-button-shortcut {
  background-color: transparent;
  color: var(--button-tertiary-shortcut-text-hover);
}

.gds-button-tertiary.gds-button-pressed:not(.gds-button-loading) {
  background-color: var(--button-tertiary-background-active);
  color: var(--button-tertiary-text-active);
}

.gds-button-tertiary .gds-button-shortcut {
  background-color: transparent;
  border: 1px solid var(--button-tertiary-shortcut-border-default);
  border-radius: var(--radius-1);
  color: var(--button-tertiary-shortcut-text-default);
}

.gds-button-tertiary.gds-button-pressed .gds-button-shortcut {
  border: 1px solid var(--button-tertiary-shortcut-border-active);
  color: var(--button-tertiary-shortcut-text-active);
}

/* ghost */
.gds-button-ghost {
  color: var(--button-ghost-text-default);
  background-color: var(--button-ghost-background-default);
  border-color: transparent;
}

.gds-button-ghost:hover:not(.gds-button-disabled, .gds-button-pressed, .gds-button-loading),
.gds-button-ghost[data-simulate="hover"]:not(
    .gds-button-disabled,
    .gds-button-pressed,
    .gds-button-loading
  ) {
  background-color: var(--button-ghost-background-hover);
  color: var(--button-ghost-text-hover);
}

.gds-button-ghost:hover:not(.gds-button-disabled, .gds-button-pressed) .gds-button-shortcut,
.gds-button-ghost[data-simulate="hover"]:not(.gds-button-disabled, .gds-button-pressed)
  .gds-button-shortcut {
  background-color: var(--button-ghost-shortcut-background-hover);
}

.gds-button-ghost.gds-button-pressed:not(.gds-button-loading) {
  background-color: var(--button-ghost-background-active);
  color: var(--button-ghost-text-active);
}

.gds-button-ghost .gds-button-shortcut {
  background-color: var(--button-ghost-shortcut-background-default);
  border: 1px solid transparent;
  color: var(--button-ghost-shortcut-text-default);
}

/* premium */
.gds-button-premium {
  color: var(--button-premium-text-default);
  background-color: var(--button-premium-background-default);
}

.gds-button-premium:hover:not(.gds-button-disabled, .gds-button-pressed, .gds-button-loading),
.gds-button-premium[data-simulate="hover"]:not(
    .gds-button-disabled,
    .gds-button-pressed,
    .gds-button-loading
  ) {
  background-color: var(--button-premium-background-hover);
}

.gds-button-premium.gds-button-pressed:not(.gds-button-loading) {
  background-color: var(--button-premium-background-active);
}

/* critical */
.gds-button-critical {
  color: var(--button-critical-text-default);
  background-color: var(--button-critical-background-default);
}

.gds-button-critical:hover:not(.gds-button-disabled, .gds-button-pressed, .gds-button-loading),
.gds-button-critical[data-simulate="hover"]:not(
    .gds-button-disabled,
    .gds-button-pressed,
    .gds-button-loading
  ) {
  background-color: var(--button-critical-background-hover);
}

.gds-button-critical.gds-button-pressed:not(.gds-button-loading) {
  background-color: var(--button-critical-background-active);
}

/* Pro */
.gds-button-pro {
  color: var(--button-pro-text-default);
  background-color: var(--button-pro-background-default);
}

.gds-button-pro:hover:not(.gds-button-disabled, .gds-button-pressed, .gds-button-loading),
.gds-button-pro[data-simulate="hover"]:not(
    .gds-button-disabled,
    .gds-button-pressed,
    .gds-button-loading
  ) {
  color: var(--button-pro-text-hover);
  background-color: var(--button-pro-background-hover);
}

.gds-button-pro.gds-button-pressed:not(.gds-button-loading) {
  color: var(--button-pro-text-active);
  background-color: var(--button-pro-background-hover);
}

/* Enterprise */
.gds-button-enterprise {
  color: var(--button-enterprise-text-default);
  background-color: var(--button-enterprise-background-default);
}

.gds-button-enterprise:hover:not(.gds-button-disabled, .gds-button-pressed, .gds-button-loading),
.gds-button-enterprise[data-simulate="hover"]:not(
    .gds-button-disabled,
    .gds-button-pressed,
    .gds-button-loading
  ) {
  color: var(--button-enterprise-text-default);
  background-color: var(--button-enterprise-background-hover);
}

.gds-button-enterprise.gds-button-pressed:not(.gds-button-loading) {
  background-color: var(--button-enterprise-background-active);
}

/* Loading */
.gds-button-loader {
  stroke: currentcolor;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gds-button-3xlarge .gds-button-loader {
  width: 28px;
  height: 28px;
}

.gds-button-4xlarge .gds-button-loader {
  width: 32px;
  height: 32px;
}

.gds-button-loading .gds-text {
  color: transparent !important; /*  hide text but keep it available for a11y */
}

.gds-button-loading .gds-button-shortcut {
  visibility: hidden;
}

.gds-button-loading .gds-icon [stroke] {
  stroke: transparent;
}

.gds-button-loading .gds-icon [fill] {
  fill: transparent;
}

/* ButtonAsLink styling */
.gds-button-as-link {
  text-decoration: none;
}
.gds-branded-loader-container-size-small {
  width: 24px;
  height: 24px;
}

.gds-branded-loader-container-size-medium {
  width: 64px;
  height: 64px;
}

.gds-branded-loader-bobble {
  transform-origin: 50% 50%;
  transform: scale(0);
  animation: show-pulse-hide 2.5s ease-in-out infinite forwards;
}

.gds-branded-loader-bottom-right {
  animation-delay: 0s;
}

.gds-branded-loader-top-left {
  animation-delay: 0.2s;
}

.gds-branded-loader-top-right {
  animation-delay: 0.4s;
}

.gds-branded-loader-bottom-left {
  animation-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .gds-branded-loader-bobble {
    animation: show-pulse-hide-5-sec-pause 6.5s ease-in-out infinite forwards;
  }

  .gds-branded-loader-bottom-right {
    animation-delay: 0s;
  }

  .gds-branded-loader-top-left {
    animation-delay: 0.2s;
  }

  .gds-branded-loader-top-right {
    animation-delay: 0.4s;
  }

  .gds-branded-loader-bottom-left {
    animation-delay: 0.6s;
  }
}

@keyframes show-pulse-hide {
  0% {
    transform: scale(0);
  }

  18.75% {
    transform: scale(0.9);
  }

  37.5% {
    transform: scale(0.7);
  }

  56% {
    transform: scale(0.9);
  }

  75% {
    transform: scale(0);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes show-pulse-hide-5-sec-pause {
  0% {
    transform: scale(0);
  }

  6.25% {
    transform: scale(0.9);
  }

  12.5% {
    transform: scale(0.7);
  }

  18.75% {
    transform: scale(0.9);
  }

  95% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(0);
  }
}

.simulate-reduced-motion path[class^="gds-branded-loader"] {
  animation: none !important;
  transform: scale(0.9);
}
.gds-circular-loader-container {
  display: flex;
  align-items: center;
}

.gds-circular-loader-container-size-small {
  width: var(--space-4);
  height: var(--space-4);
}

.gds-circular-loader-container-size-medium {
  width: var(--space-5);
  height: var(--space-5);
}

.gds-circular-loader-container-size-large {
  width: var(--space-6);
  height: var(--space-6);
}

.gds-circular-loader {
  animation:
    spinner 1.5s ease-in-out infinite,
    rotate 2s linear infinite;
  stroke-dasharray: 1px, 200px;
  stroke-dashoffset: 1px;
  stroke-linecap: round;

  /* required for firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1209061 */
  transform-box: fill-box;
  transform-origin: center center;
}

@keyframes spinner {
  0% {
    stroke-dasharray: 1px, 200px;
    stroke-dashoffset: 1px;
  }

  50% {
    stroke-dasharray: 89px, 200px;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dasharray: 89px, 200px;
    stroke-dashoffset: -124px;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.gds-circular-loader-variant-default {
  stroke: var(--color-icon-base-default);
}

.gds-circular-loader-variant-inverse {
  stroke: var(--color-icon-base-inverse);
}

.gds-circular-loader-variant-inherit {
  stroke: currentcolor;
}

.gds-circular-loader-small {
  stroke-width: 5px;
}

.gds-circular-loader-medium {
  stroke-width: 5.5px;
}

.gds-circular-loader-large {
  stroke-width: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .gds-circular-loader {
    animation: none;
    stroke-dasharray: 89px, 200px;
    stroke-dashoffset: -35px;
  }
}
.gds-checkbox {
  --gds-checkbox-size-medium: 16px;
  --gds-checkbox-size-large: 20px;
  --gds-checkbox-size-xlarge: 24px;

  width: fit-content;
  border-radius: var(--space-half);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
}

.gds-checkbox-input {
  /* align for screen readers */
  position: absolute;
  left: 0;
  top: 2px;
  margin: 0;
}

.gds-checkbox-input-medium {
  /* align for screen readers */
  width: var(--gds-checkbox-size-medium);
  height: var(--gds-checkbox-size-medium);
}

.gds-checkbox-input-large {
  /* align for screen readers */
  width: var(--gds-checkbox-size-large);
  height: var(--gds-checkbox-size-large);
}

.gds-checkbox-input-xlarge {
  /* align for screen readers */
  width: var(--gds-checkbox-size-xlarge);
  height: var(--gds-checkbox-size-xlarge);
}

.gds-checkbox-icon,
.gds-checkbox .gds-input-label {
  cursor: pointer;
}

.gds-checkbox-icon {
  box-sizing: border-box;
  border-radius: var(--radius-1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter;
}

.gds-checkbox-icon-medium {
  min-width: var(--gds-checkbox-size-medium); /* used to prevent icon collapsing on resize */
  width: var(--gds-checkbox-size-medium);
  height: var(--gds-checkbox-size-medium);
}

.gds-checkbox-icon-large {
  min-width: var(--gds-checkbox-size-large); /* used to prevent icon collapsing on resize */
  width: var(--gds-checkbox-size-large);
  height: var(--gds-checkbox-size-large);
}

.gds-checkbox-icon-xlarge {
  min-width: var(--gds-checkbox-size-xlarge); /* used to prevent icon collapsing on resize */
  width: var(--gds-checkbox-size-xlarge);
  height: var(--gds-checkbox-size-xlarge);
  border-radius: calc(var(--radius-1) + var(--space-half));
}

.gds-checkbox-focus-visible {
  outline: 2px solid var(--color-background-brand-default);
  outline-offset: 2px;
}

.gds-checkbox-disabled .gds-input-label {
  cursor: not-allowed;
}

.gds-checkbox-element-disabled {
  background: var(--color-background-base-subdued);
  cursor: not-allowed;
  opacity: 0.4;
}

.gds-checkbox-group {
  all: unset;
}

.gds-checkbox-group legend {
  padding: 0;
}

.gds-checkbox-group-columns {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-4);
  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  row-gap: var(--space-3);
  margin-top: var(--space-1);

  /* fake error border to avoid CLS */
  border-radius: var(--space-1);
  border: 1px solid transparent;
  padding: var(--space-1);
}

.gds-checkbox-column-1 {
  grid-template-columns: 1fr;
}

.gds-checkbox-column-2 {
  grid-template-columns: 1fr auto;
  column-gap: var(--space-4);
}

.gds-checkbox-group-row {
  display: flex;
}

.gds-checkbox-group-error {
  border: 1px solid var(--color-border-critical-default);
  padding: var(--space-1);
  margin-bottom: var(--space-1);
}

.gds-checkbox-group-medium .gds-checkbox-group-error {
  border-radius: calc(var(--radius-1) + var(--radius-half));
}

.gds-checkbox-group-large .gds-checkbox-group-error {
  border-radius: calc(var(--radius-1) + var(--radius-half));
}

.gds-checkbox-group-xlarge .gds-checkbox-group-error {
  border-radius: var(--radius-2);
}

/*
  Used to align checkbox size and error/helper message with checkbox label text
  e.g.:
  [x] checkbox label
->    error text
->    helper text
*/
.gds-checkbox .gds-input-label-helper,
.gds-checkbox-label-margin {
  /* used to add indent to multiline text */
  box-decoration-break: clone;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-decoration-break: clone;
}

.gds-checkbox-medium .gds-input-label-helper,
.gds-checkbox-medium .gds-checkbox-label-margin {
  margin-inline-start: calc(var(--space-2) + var(--gds-checkbox-size-medium));
}

.gds-checkbox-large .gds-input-label-helper,
.gds-checkbox-large .gds-checkbox-label-margin {
  margin-inline-start: calc(var(--space-2) + var(--gds-checkbox-size-large));
}

.gds-checkbox-xlarge .gds-input-label-helper,
.gds-checkbox-xlarge .gds-checkbox-label-margin {
  margin-inline-start: calc(var(--space-2) + var(--gds-checkbox-size-xlarge));
}
.gds-flex {
  display: flex;
  flex-flow: row nowrap;
}

.gds-flex-direction-column {
  flex-direction: column;
}

.gds-flex-wrap {
  flex-wrap: wrap;
}

.gds-flex-elevation-low {
  border: var(--elevation-low-border);
  box-shadow: var(--elevation-low-shadow);
}

.gds-flex-elevation-medium {
  border: var(--elevation-medium-border);
  box-shadow: var(--elevation-medium-shadow);
}

.gds-flex-elevation-high {
  border: var(--elevation-high-border);
  box-shadow: var(--elevation-high-shadow);
}

.gds-flex-align-self-start {
  align-self: flex-start;
}

.gds-flex-align-self-end {
  align-self: flex-end;
}

.gds-flex-align-self-center {
  align-self: center;
}

.gds-flex-align-self-baseline {
  align-self: baseline;
}

.gds-flex-align-self-stretch {
  align-self: stretch;
}
[data-gds-theme] {
  color: var(--color-text-base-default);
}
.gds-combobox {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

.gds-combobox-icon-button {
  border: none;
  background: transparent;
  top: 32px;
}

.gds-combobox-icon-button-content {
  align-self: center;
}

.gds-combobox-listbox {
  border: var(--color-border-base-default) 1px solid;
  border-radius: var(--radius-1);
  list-style: none;
  background-color: var(--color-background-base-default);
  margin: 0;
  margin-top: var(--space-1);
  padding: var(--space-2);
  cursor: pointer;
  max-height: 165px;
  overflow: auto;
}

.gds-combobox-listbox-item {
  --combobox-item-hover: var(--neutral-gray-60);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  min-height: 32px;
  padding: var(--space-half) var(--space-2);
  border-radius: var(--radius-1);
}

.gds-combobox-listbox-item[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.gds-combobox-listbox-item-focused {
  background-color: var(--combobox-item-hover);
  color: var(--color-text-base-inverse);
}

.gds-combobox-listbox-item-focused p,
.gds-combobox-listbox-item-focused span {
  color: var(--color-text-base-inverse) !important;
}

.gds-combobox-listbox-item-focused .gds-icon path {
  stroke: var(--color-icon-base-inverse);
}

.gds-combobox .gds-input-decoration {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gds-combobox .gds-input-decoration + .gds-text-field-input {
  padding-left: 40px;
}
.gds-form {
  --form-row-spacing: var(--space-2);
  --form-footer-margin-top: var(--space-2);
  --form-fieldset-margin-top: var(--space-1);
  --form-header-margin-bottom: var(--space-0);

  display: flex;
  flex-direction: column;
  gap: var(--form-row-spacing);
}

.gds-form.gds-form-standard {
  --form-row-spacing: var(--space-3);
  --form-footer-margin-top: var(--space-3);
  --form-fieldset-margin-top: var(--space-3);
  --form-header-margin-bottom: var(--space-1);
}

.gds-form.gds-form-spacious {
  --form-row-spacing: var(--space-4);
  --form-footer-margin-top: var(--space-6);
  --form-fieldset-margin-top: var(--space-8);
  --form-header-margin-bottom: var(--space-4);
}

.gds-form-header {
  display: flex;
  gap: var(--space-half);
  flex-direction: column;
  margin-bottom: var(--form-header-margin-bottom);
}

.gds-form-row {
  display: flex;
  gap: var(--space-3);
  flex-flow: wrap;
}

.gds-form-fieldset {
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--form-row-spacing);
  margin: var(--form-fieldset-margin-top) 0;
}

.gds-form-fieldset legend {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-bottom: var(--form-row-spacing);
}

.gds-form-fieldset .gds-form-legend-indicator {
  color: var(--color-text-base-subdued);
  padding-inline-start: var(--space-2);
}

.gds-form-footer {
  margin-top: var(--form-footer-margin-top);
  display: flex;
  gap: var(--space-2);
}
.gds-multiline-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gds-illustration {
  display: block;
  width: 100%;
}

.gds-illustration-small > svg,
.gds-illustration-medium > svg,
.gds-illustration-large > svg,
.gds-illustration-xlarge > svg {
  width: 100%;
  height: 100%;
}

.gds-illustration-small {
  width: 32px;
  height: 32px;
}

.gds-illustration-medium {
  width: 56px;
  height: 56px;
}

.gds-illustration-large {
  width: 80px;
  height: 80px;
}

.gds-illustration-xlarge {
  width: 96px;
  height: 96px;
}
.gds-link {
  --link-underline-thickness: max(1.5px, 0.0625rem);

  appearance: none;
  display: inline;
  text-decoration: underline;
  text-decoration-thickness: var(--link-underline-thickness);
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}

.gds-link-block {
  display: block;
  width: fit-content;
}

.gds-link-inline-block {
  display: inline-block;
}

.gds-link-bold {
  font-weight: bold;
}

.gds-link-underline-hover {
  text-decoration-line: none;
}

.gds-link:hover,
.gds-link[data-simulate="hover"] {
  text-decoration-line: underline;
  text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
}

/* Safari only hacks - it has bugs with text-decoration-thickness, so just keep it constant */
/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  _::-webkit-full-page-media,
  _:future,
  :root .gds-link:hover {
    text-decoration-thickness: var(--link-underline-thickness);
  }
}

.gds-link-primary {
  color: var(--color-text-brand-default);
  text-decoration-color: var(--color-border-brand-default);
}

.gds-link-secondary {
  color: var(--color-text-base-subdued);
  text-decoration-color: var(--color-text-base-subdued);
}

.gds-link-inherit {
  color: inherit;
  text-decoration-color: inherit;
}

.gds-link-focus-visible {
  outline: 2px solid var(--color-border-brand-default);
  outline-offset: 2px;
  border-radius: var(--radius-half);
}
.gds-menu-container {
  position: relative;
  display: inline-block;
}

.gds-menu-dropdown {
  border-radius: var(--radius-1);
  border: var(--elevation-low-border);
  box-shadow: var(--elevation-low-shadow);
  z-index: var(--z-index-popover);

  --color-menu-background-hover: var(--neutral-gray-10);
  --color-menu-background-active: var(--neutral-gray-20);
  --color-menu-icon-hover: var(--neutral-gray-100);
}

[data-gds-theme="dark"] .gds-menu-dropdown {
  --color-menu-background-hover: var(--neutral-gray-80);
  --color-menu-background-active: var(--neutral-gray-60);
  --color-menu-icon-hover: var(--white);
}

.gds-menu-list {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-radius: var(--radius-1);
  background-color: var(--color-background-base-default);
}

.gds-menu-item {
  box-sizing: border-box;
  min-height: 32px;
  padding: 0 var(--space-2);
  color: var(--color-text-base-default);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: start;
  cursor: pointer;
  border-radius: var(--radius-0);
  width: max-content;
  min-width: 100%;
  flex: 1 1 auto;
}

.gds-menu-item:hover:not(.gds-menu-item-disabled) {
  background: var(--color-menu-background-hover);
  border-radius: var(--radius-1);
}

.gds-menu-item:hover:not(.gds-menu-item-disabled) .gds-icon [stroke] {
  stroke: var(--color-menu-icon-hover);
}

.gds-menu-item:hover:not(.gds-menu-item-disabled) .gds-icon [fill] {
  fill: var(--color-menu-icon-hover);
}

.gds-menu-item:active:not(.gds-menu-item-disabled) {
  background-color: var(--color-menu-background-active);
}

.gds-menu-group li {
  padding: var(--space-1) var(--space-2);
}

.gds-menu-item-pressed li:focus {
  border-radius: var(--radius-1);
  outline: 2px solid var(--color-border-brand-default);
  outline-offset: 2px;
  position: relative;
  z-index: 10;
  opacity: 1;
}

.gds-menu-item-container li:focus {
  border-radius: var(--radius-1);
  outline: none;
  background-color: var(--color-menu-background-active);
}

.gds-menu-item-disabled {
  cursor: not-allowed;
}

.gds-menu-item-disabled svg,
.gds-menu-item-disabled span {
  opacity: 0.4;
}

.gds-menu-separator {
  margin: var(--space-1) calc(-1 * var(--space-2));
  border-radius: var(--radius-0);
  border-top: 1px solid var(--color-border-base-subdued);
}

.gds-menu-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.gds-menu-section-label {
  display: block;
  padding: var(--space-1) var(--space-2);
}

.gds-menu-item-link {
  text-decoration: none;
  background: none;
  color: inherit;
  width: 100%;
  display: block;
}

.gds-menu-group {
  padding: var(--space-0);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.gds-modal-backdrop {
  display: none;
  position: fixed;
  overflow-y: auto;
  inset: 0;
  z-index: 1;
}

.gds-modal-backdrop-active {
  display: block;
}
:root,
:host {
  --animation-duration: 0.2s;
}

.gds-modal-container {
  align-items: center;
  animation: fade-in var(--animation-duration) ease-in-out forwards;
  /* stylelint-disable-next-line color-function-notation */
  background-color: rgba(71, 75, 88, 60%);
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--z-index-modal);
}

.gds-modal-container.hide {
  animation: fade-out var(--animation-duration) ease-in-out forwards;
}

.gds-modal-overlay {
  animation:
    fade-in var(--animation-duration) ease-in-out forwards,
    scale-in var(--animation-duration) ease-in-out forwards;
  background-color: var(--color-background-base-default);
  border-radius: var(--radius-2);
  border: 1px solid var(--color-border-base-subdued);
  box-shadow: var(--elevation300-shadow);
  position: relative;
}

.gds-modal-overlay.hide {
  animation:
    fade-out var(--animation-duration) ease-in-out forwards,
    scale-out var(--animation-duration) ease-in-out forwards;
}

.gds-modal-content {
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  min-width: 320px;
  position: relative;
  word-wrap: break-word;
}

.gds-modal-small {
  width: 480px;
}

.gds-modal-medium {
  width: 640px;
}

/* Extra right spacing needed to account for Close IconButton */
.gds-modal-header {
  padding: var(--space-4) var(--space-20) var(--space-4) var(--space-8);
  overflow-wrap: break-word;
}

.gds-modal-header-description {
  margin-top: var(--space-3);
}

.gds-modal-close-button {
  padding: var(--space-4);
  position: absolute;
  right: 0;
  z-index: 10;
}

.gds-modal-body {
  flex-grow: 1;
  padding: var(--space-2) var(--space-8) var(--space-8);
  overflow: auto;
}

.gds-modal-body-border-top {
  border-top: 1px solid var(--color-border-base-subdued);
}

.gds-modal-footer {
  align-items: center;
  background-color: var(--color-background-base-subdued);
  border-bottom-left-radius: var(--radius-2);
  border-bottom-right-radius: var(--radius-2);
  box-sizing: content-box;
  display: flex;
  min-height: var(--space-8);
  max-height: var(--space-8);
  padding: var(--space-3) var(--space-8);
}

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

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes scale-in {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scale-out {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.8);
  }
}

.gds-modal-overlay .gds-button:focus {
  outline: 2px solid var(--color-border-brand-default);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gds-modal-container,
  .gds-modal-overlay,
  .gds-modal-container.hide,
  .gds-modal-overlay.hide {
    animation: none;
  }
}
.gds-plan-tag {
  height: var(--plan-tag-height);
  width: fit-content;
}

.gds-plan-tag svg {
  height: 100%;
  width: auto;
}

.gds-plan-tag-xsmall {
  --plan-tag-height: 22px;
}

.gds-plan-tag-small {
  --plan-tag-height: 32px;
}

.gds-plan-tag-medium {
  --plan-tag-height: 48px;
}

.gds-plan-tag-large {
  --plan-tag-height: 72px;
}
.gds-popover {
  border: 1px solid var(--color-border-elevated-default);
  border-radius: var(--radius-2);
  min-width: 225px;
  max-width: calc(480px - (var(--space-4) * 2));
  z-index: var(--z-index-popover);
}

.gds-popover .gds-arrow {
  fill: var(--neutral-gray-90);
  width: 14px;
  height: 14px;
}

.gds-popover-content {
  background: var(--color-background-base-subdued);
  border-radius: var(--radius-2);
  color: var(--color-text-light-default);
  padding: var(--space-4);
  position: relative;
}

.gds-popover-close-button {
  padding: var(--space-2);
  position: absolute;
  right: 0;
  top: 0;
}
.gds-radio-group {
  all: unset;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-width: 0;
  border-width: 0;
  color: var(--color-text-base-default);
  display: block;
}

.gds-radio-group * {
  box-sizing: border-box;
}

.gds-radio-group legend {
  padding: 0;
}

.gds-radio-group-border-error {
  border: 1px solid var(--color-border-critical-default);
  border-radius: calc(var(--radius-1) + var(--radius-half));
}

.gds-radio-group-xlarge .gds-radio-group-border-error {
  border-radius: var(--radius-2);
}

.gds-radio-button-container {
  width: fit-content;
  min-width: 150px;
  margin-top: var(--space-1);
  row-gap: var(--space-2);
  margin-inline-start: calc(-1 * var(--space-half));
}

.gds-radio-button-container + .gds-input-error {
  margin-top: var(--space-1);
}

.gds-radio-button-container-column-1 {
  display: grid;
  grid-template-columns: 1fr;
}

.gds-radio-button-container-column-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-5);
}

.gds-radio-button-container-single-row {
  display: flex;
  column-gap: var(--space-3);
  flex-wrap: wrap;
}

.gds-radio-button {
  border: 2px solid transparent;
  border-radius: var(--radius-1);
  padding: var(--space-1);

  /* Overlaps focus border with error border */
  margin: -1px;
}

.gds-radio-button-label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.gds-radio-button-label-disabled {
  cursor: not-allowed;
}

.gds-radio-button .gds-radio-button-input {
  margin-inline-end: var(--space-2);
  position: relative;
  background-color: var(--color-background-base-default);
  border-color: var(--color-border-base-default);
  border-radius: 50%;
  border-width: var(--space-quarter);
  border-style: solid;
  margin-top: var(--space-half);
}

.gds-radio-button .gds-radio-button-input-medium {
  width: var(--space-4);
  height: var(--space-4);
  min-width: var(--space-4);
}

.gds-radio-button .gds-radio-button-input-large {
  width: var(--space-5);
  height: var(--space-5);
  min-width: var(--space-5);
}

.gds-radio-button .gds-radio-button-input-xlarge {
  width: var(--space-6);
  height: var(--space-6);
  min-width: var(--space-6);
  margin-top: var(--space-1);
}

.gds-radio-button-input.gds-radio-button-input-disabled {
  background-color: var(--color-background-base-subdued);
  opacity: 0.4;
}

.gds-radio-button input {
  cursor: pointer;
  opacity: 0;
  width: var(--space-4);
  height: var(--space-4);

  /* Ensures Screen Reader focus indicator is aligned */
  position: absolute;
  top: -2px;
  left: -2px;
  margin: 1px;
}

.gds-radio-button-input-large input {
  width: var(--space-5);
  height: var(--space-5);
}

.gds-radio-button-input-xlarge input {
  width: var(--space-6);
  height: var(--space-6);
}

.gds-radio-button-input-disabled,
.gds-radio-button-input-disabled input {
  cursor: not-allowed;
}

.gds-radio-button-input.gds-radio-button-input-checked {
  border-color: var(--color-background-brand-default);
  border-width: 5px;
  background-color: var(--color-background-base-default);
}

.gds-radio-button-input-large.gds-radio-button-input-checked {
  border-width: 6px;
}

.gds-radio-button-input-xlarge.gds-radio-button-input-checked {
  border-width: 7px;
}

/* Ensures Screen Reader focus indicator is aligned when the radio button is checked */
.gds-radio-button-input-checked input {
  top: -6px;
  left: -6px;
}

.gds-radio-button-focus-visible {
  outline: 2px solid var(--color-background-brand-default);
  outline-offset: -2px;
}

.gds-radio-button-helper-message {
  display: inline;
  margin-inline-start: var(--space-6);

  /* used to add indent to multiline text */
  box-decoration-break: clone;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-decoration-break: clone;
}

.gds-radio-group-large .gds-radio-button-helper-message {
  margin-inline-start: calc(var(--space-6) + var(--space-1));
}

.gds-radio-group-xlarge .gds-radio-button-helper-message {
  margin-inline-start: var(--space-8);
}
.gds-text-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-1);
  text-align: start;
  min-width: 130px;
}

.gds-text-field .gds-text-field-input {
  all: unset;
  border-radius: calc(var(--radius-1) + var(--radius-half));
  border: 1px solid var(--color-border-base-default);
  color: var(--color-text-base-default);
  box-sizing: border-box;
  padding: var(--space-1) var(--space-3);
  width: 100%;
}

.gds-text-field-container {
  position: relative;
  border-radius: calc(var(--radius-1) + var(--radius-half));
  display: flex;
  align-items: center;
}

.gds-text-field-medium .gds-text-field-input {
  height: 32px;
  font-size: 14px;
}

.gds-text-field-large .gds-text-field-input {
  height: 40px;
  font-size: 16px;
}

.gds-text-field-large .gds-text-field-container {
  margin-top: var(--space-half);
}

.gds-text-field-xlarge .gds-text-field-input {
  height: 48px;
  border-radius: var(--radius-2);
  font-size: 18px;
}

.gds-text-field-xlarge .gds-text-field-container {
  border-radius: var(--radius-2);
  margin-top: var(--space-1);
}

.gds-text-field-xlarge .gds-text-field-icon-start svg {
  width: 24px;
  height: 24px;
}

/* hide the spinner buttons, which look bad and mostly are not useful */
.gds-text-field-input[type="number"]::-webkit-inner-spin-button,
.gds-text-field-input[type="number"]::-webkit-outer-spin-button {
  opacity: 0;
}

.gds-text-field-input[type="number"] {
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -moz-appearance: textfield !important; /* Firefox */
}

.gds-text-field-icon-start {
  display: flex;
  position: absolute;
  padding: 0 var(--space-3);
  pointer-events: none;
}

.gds-text-field-input[aria-invalid="true"] {
  border-color: var(--color-border-critical-default);
}

.gds-text-field-icon-start + .gds-text-field-input {
  padding-inline-start: calc(var(--space-3) + 20px + var(--space-3));
}

.gds-text-field-container-password .gds-text-field-input {
  padding-inline-end: var(--space-8);
}

.gds-text-field-input::placeholder {
  color: var(--color-text-base-subdued);

  /* Needed for Firefox */
  opacity: 1;
}

.gds-text-field-input:disabled {
  border-color: var(--color-border-base-subdued);
  cursor: not-allowed;
}

.gds-text-field-input:active:not([disabled]),
.gds-text-field-input[data-simulate="active"] {
  border-color: var(--color-border-brand-default);
}

.gds-text-field-container:focus-within,
.gds-text-field-container:has([data-simulate="focus"]) {
  outline: 2px solid var(--color-border-brand-default);
  outline-offset: 2px;
}

/* password visibility button etc */
.gds-text-field button {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  background: 0 0;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  outline: none;
  position: absolute;
  right: 0;
  padding: 0;
  margin-inline-end: var(--space-2);
}

.gds-text-field button:focus-visible,
.gds-text-field button[data-simulate="focus"] {
  border-color: var(--color-border-brand-default);
}
.gds-text-field-input::-webkit-search-cancel-button {
  display: none;
}

.gds-text-field-input::-webkit-textfield-decoration-container {
  margin-inline-end: var(--space-4);
}
.gds-select {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-1);
  text-align: start;
}

.gds-select .gds-select-inner {
  box-sizing: border-box;
  background-color: unset;
  border-radius: var(--radius-1);
  border: 1px solid var(--color-border-base-default);
  padding: var(--space-1) var(--space-8) var(--space-1) var(--space-3);
  margin: 0;
  color: var(--color-text-base-default);
  appearance: none;
  font-family: inherit;
  font-size: 14px;
  height: 32px;
  line-height: 1.5;
  width: 100%;
}

.gds-select-inner[aria-invalid="true"] {
  border-color: var(--color-border-critical-default);
}

.gds-select-inner:focus-visible {
  outline: none;
}

.gds-select-inner:disabled {
  border-color: var(--color-border-base-subdued);
  cursor: not-allowed;
  resize: none;
}

.gds-select-inner:active:not([disabled]),
.gds-select-inner[data-simulate="active"]:not([disabled]) {
  border-color: var(--color-border-brand-default);
}

.gds-select-container {
  /* provide border for high-contrast mode */
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  margin-inline-start: calc(-1 * var(--space-half));
  display: flex;
  align-items: center;
  position: relative;
}

.gds-select-container .gds-icon {
  position: absolute;
  right: var(--space-3);
}

.gds-select-container:focus-within,
.gds-select-container:has([data-simulate="focus"]) {
  outline: 2px solid var(--color-border-brand-default);
  outline-offset: 1px;
}

.gds-select-icon {
  pointer-events: none;
}
.gds-skeleton-rectangle {
  border-radius: var(--space-half);
}
.gds-skeleton-circle {
  border-radius: 50%;
  aspect-ratio: 1;
  height: 100%;
  overflow: hidden;
  flex: 0 0 auto;
}
.gds-skeleton-frame {
  width: auto;
  position: relative;
}

.gds-skeleton-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
  z-index: 1;
  user-select: none;
  text-align: center;
  padding: 0 var(--space-2) var(--space-half);
  border-radius: var(--radius-3);
  background: var(--color-background-base-default);
  border: var(--elevation100-border);
  border-color: var(--color-border-base-subdued);
  box-shadow: var(--elevation100-shadow);
  animation: fade-in-down ease-in-out 300ms;
}

[data-gds-theme="dark"] .gds-skeleton-label {
  box-shadow: none;
}

@keyframes fade-in-down {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.gds-skeleton-item {
  width: 100%;
}

.gds-skeleton-item-inner {
  --skeleton-shimmer: var(--neutral-gray-20);
  --skeleton-bg: var(--neutral-gray-10);

  display: block;
  border-radius: var(--radius-1);
  background-color: var(--skeleton-bg);
  position: relative;
  overflow: hidden;
  mix-blend-mode: multiply; /* better contrast on background-base-subdued */
}

.gds-skeleton-item-inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--skeleton-shimmer) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.gds-skeleton-item-circle {
  border-radius: 50%;
  aspect-ratio: 1;
}

[data-gds-theme="dark"] .gds-skeleton-item-inner {
  --skeleton-bg: var(--color-background-base-subdued);
  --skeleton-shimmer: var(--neutral-gray-80);

  mix-blend-mode: screen; /* better contrast on background-base-subdued */
}

@media (prefers-reduced-motion: reduce) {
  .gds-skeleton-label,
  .gds-skeleton-item-inner::after {
    animation: none;
  }
}
.gds-sticker {
  background-size: contain;
  display: flex;
  font-weight: 600;
  height: var(--sticker-size);
  position: relative;
  width: var(--sticker-size);
  font-family: var(--font-stack-matter);
}

.gds-sticker-discount {
  align-items: center;
  display: flex;
  flex-direction: column;
  color: var(--color-text-pro-default);
  justify-content: center;
  height: var(--sticker-size);
  line-height: normal;
  width: var(--sticker-size);
  z-index: 1;
}

.gds-sticker-discount p {
  margin: 0;
}

.gds-sticker-flap {
  z-index: 10;
}

.gds-sticker-background {
  position: absolute;
  width: var(--sticker-size);
  height: var(--sticker-size);
}

.gds-sticker-discount .gds-sticker-discount-text {
  font-size: var(--sticker-discount-text-size);
}

.gds-sticker-discount .gds-sticker-percent-text {
  font-size: var(--sticker-percent-text-size);
}

.gds-sticker-discount .gds-sticker-off-text {
  font-size: var(--sticker-off-text-size);
  line-height: var(--sticker-off-line-height);
  text-transform: uppercase;
}

.gds-sticker-discount .gds-sticker-plan-text {
  font-size: var(--sticker-plan-text-size);
}

.gds-sticker-small {
  --sticker-size: 96px;
  --sticker-discount-text-size: 35px;
  --sticker-percent-text-size: 21px;
  --sticker-off-text-size: 9px;
  --sticker-off-line-height: 9px;
  --sticker-plan-text-size: 9px;
}

.gds-sticker-medium {
  --sticker-size: 120px;
  --sticker-discount-text-size: 44px;
  --sticker-off-text-size: 11px;
  --sticker-off-line-height: 11px;
  --sticker-plan-text-size: 11px;
  --sticker-percent-text-size: 26px;
}

.gds-sticker-large {
  --sticker-size: 144px;
  --sticker-discount-text-size: 53px;
  --sticker-off-text-size: 13px;
  --sticker-off-line-height: 13px;
  --sticker-plan-text-size: 13px;
  --sticker-percent-text-size: 31px;
}
.gds-switch {
  display: flex;
  gap: var(--space-2);
  max-width: 480px;
  position: relative;
}

.gds-switch-label,
.gds-switch-indicator,
.gds-switch-input {
  cursor: pointer;
}

/* align for screen readers */
.gds-switch-input {
  position: absolute;
  margin: 2px;
  opacity: 0;
}

.gds-switch-label {
  display: flex;
}

.gds-switch [data-size="small"] {
  height: 20px;
  width: 36px;
}

.gds-switch [data-size="medium"] {
  height: 23px;
  width: 42px;
}

.gds-switch [data-size="large"] {
  height: 26px;
  width: 46px;
}

.gds-switch [data-size="xlarge"] {
  height: 34px;
  width: 62px;
}

.gds-switch-animation {
  transition: all 0.3s;
  transition-timing-function: ease-out;
}

.gds-switch-check-animation-turning-on {
  transition: opacity 0.2s;
  transition-delay: 0.2s;
}

.gds-switch-check-animation-turning-off {
  transition: opacity 0.1s;
  transition-delay: 0s;
}

.gds-switch[data-label-display="top"] {
  flex-wrap: wrap;
}

.gds-switch[data-label-display="right"] {
  flex-direction: row-reverse;
}

/* Setting the width to fit the content for hidden labels so the focus ring 
   will be tight around the Switch. In all other cases, we want the Switch to fill 
   the width of the container. 
   */
.gds-switch[data-label-display="hidden"] {
  width: fit-content;
}

.gds-switch[data-disabled="true"] .gds-switch-label,
.gds-switch[data-disabled="true"] .gds-switch-indicator,
.gds-switch[data-disabled="true"] .gds-switch-input {
  cursor: not-allowed;
}

.gds-switch[data-disabled="true"] .gds-switch-indicator {
  opacity: 0.4;
}

@supports selector(:has(a, b)) {
  .gds-switch:has(.gds-switch-input:focus-visible) {
    outline: 2px solid var(--color-border-brand-default);
    outline-offset: 2px;
    border-radius: var(--radius-half);
  }
}

@supports (not selector(:has(a, b))) and (selector(:focus-visible)) {
  .gds-switch-input:focus-visible + .gds-switch-indicator {
    outline: 2px solid var(--color-border-brand-default);
    outline-offset: 2px;
    border-radius: var(--radius-half);
  }
}

@supports (not selector(:has(a, b))) and (not selector(:focus-visible)) {
  .gds-switch-input:focus + .gds-switch-indicator {
    outline: 2px solid var(--color-border-brand-default);
    outline-offset: 2px;
    border-radius: var(--radius-half);
  }
}
.gds-tabs {
  display: block;
  width: 100%;
}

.gds-tabs-list-container {
  border-bottom: 1px solid var(--color-border-base-subdued);
  box-sizing: border-box;
  height: var(--tabs-list-height);
  overflow: hidden;
  position: relative;
}

/* 
 * Font size here is used for the ::after psuedo element to avoid UI jumping 
 * TODO: These should use typography tokens for font-size 
 */
.gds-tabs-list-container-small {
  --tabs-list-height: 32px;
  --tabs-tab-padding: 6px;
  --tabs-tab-font-size: 12px;
  --tabs-tab-underline-height: 2px;
}

.gds-tabs-list-container-medium {
  --tabs-list-height: 40px;
  --tabs-tab-padding: var(--space-2);
  --tabs-tab-font-size: 14px;
  --tabs-tab-underline-height: 3px;
}

.gds-tabs-list-container-large {
  --tabs-list-height: 48px;
  --tabs-tab-padding: var(--space-3);
  --tabs-tab-font-size: 16px;
  --tabs-tab-underline-height: 3px;
}

.gds-tabs-list-container-xlarge {
  --tabs-list-height: 72px;
  --tabs-tab-padding: var(--space-5);
  --tabs-tab-font-size: 18px;
  --tabs-tab-underline-height: 4px;
}

.gds-tabs-list-container-auto {
  --tabs-list-height: auto;
  --tabs-tab-underline-height: 3px;
}

.gds-tabs-list-container.gds-tabs-border-none {
  border-bottom: 0;
}

.gds-tabs-list {
  height: 100%;
  overflow: auto;
}

.gds-tabs-list-container button[class*="gds-tabs-list-overflow-button-"] {
  position: absolute;
  background: white;
  transform: translate(0, -50%);
  top: 50%;
}

.gds-tabs-list-container .gds-tabs-list-overflow-button-right {
  right: 0;
}

.gds-tabs-tab-container {
  background-color: transparent;
  border: none;
  color: var(--color-text-base-subdued);
  cursor: pointer;
  height: 100%;
  padding: 0;
}

.gds-tabs-full-width .gds-tabs-tab-container {
  width: 100%;
}

.gds-tabs-tab-container:focus-visible {
  border-radius: var(--radius-1);
  outline: 2px solid var(--color-border-brand-default);
  outline-offset: -2px;
}

.gds-tabs-tab {
  border-bottom: var(--tabs-tab-underline-height) solid transparent;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding-left: var(--tabs-tab-padding);
  padding-right: var(--tabs-tab-padding);
  text-wrap: nowrap;
}

.gds-tabs-tab-selected {
  font-weight: 600;
}

.gds-tabs-tab-container[aria-selected="true"] .gds-tabs-tab {
  border-bottom: var(--tabs-tab-underline-height) solid var(--color-border-brand-default);
  color: var(--color-text-brand-default);
}

/* Hack used to avoid jumping tabs due to bold weight when selected */
.gds-tabs-tab::after {
  content: attr(data-text);
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 600;

  /* TODO: Should use a global typography token in the future */
  font-size: calc(var(--tabs-tab-font-size) + 2px);
}

@media speech {
  .gds-tabs-tab:hover {
    border-bottom: 3px solid var(--neutral-gray-40);
  }

  .gds-tabs-tab::after {
    display: none;
  }
}

.gds-tabs-panel {
  padding-top: var(--space-6);
}
/* Base tag styles */
.gds-tag {
  all: unset;
  border-radius: var(--radius-25);
  padding: var(--space-quarter) var(--space-2);
  display: flex;
  align-items: center;
  width: fit-content;
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
  font-weight: 500;
  color: var(--color-text-dark-default);
}

/* Modifiers */
.gds-tag-inline {
  display: inline-flex;
}

/* Define theme-agnostic color variables */
:root {
  --tag-neutral-bg: var(--neutral-gray-10);
  --tag-critical-bg: var(--red-10);
  --tag-success-bg: var(--green-10);
  --tag-tip-bg: var(--blue-10);
  --tag-warning-bg: var(--gold-10);
  --tag-brand-bg: var(--teal-20);
  --tag-pro-bg: var(--neutral-gray-100);
  --tag-pro-text: var(--color-text-light-default);
}

/* Dark theme color overrides */
[data-gds-theme="dark"] {
  --tag-neutral-bg: var(--neutral-gray-20);
  --tag-critical-bg: var(--red-20);
  --tag-success-bg: var(--green-20);
  --tag-tip-bg: var(--blue-20);
  --tag-warning-bg: var(--gold-20);
  --tag-brand-bg: var(--teal-30);
  --tag-pro-bg: var(--gold-30);
  --tag-pro-text: var(--color-text-dark-default);
}

/* Tag variants */
.gds-tag-neutral,
.gds-tag-business {
  background-color: var(--tag-neutral-bg);
}

.gds-tag-critical,
.gds-tag-deletion {
  background-color: var(--tag-critical-bg);
}

.gds-tag-success,
.gds-tag-addition {
  background-color: var(--tag-success-bg);
}

.gds-tag-tip {
  background-color: var(--tag-tip-bg);
}

.gds-tag-warning {
  background-color: var(--tag-warning-bg);
}

.gds-tag-brand {
  background-color: var(--tag-brand-bg);
}

.gds-tag-inverse {
  background-color: var(--white);
}

/* Light mode special cases */
.gds-tag-pro {
  background-color: var(--tag-pro-bg);
  color: var(--tag-pro-text);
}

.gds-tag-premium {
  background-color: var(--color-background-premium-default);
  color: var(--color-text-premium-default);
}

/* Applies special padding to Pro, Premium, and Tip tags with icons */
.gds-tag-with-icon {
  padding: var(--space-quarter) var(--space-2) var(--space-quarter) var(--space-1-and-half);
}

.gds-tag-icon {
  margin-right: var(--space-half);
}

/* Dark mode special cases */
[data-gds-theme="dark"] .gds-icon-pro [fill] {
  fill: var(--color-icon-pro-default);
}

[data-gds-theme="dark"] .gds-tag-tip {
  background-color: var(--blue-20);
  color: var(--color-text-dark-default);
}
/* stylelint-disable rule-empty-line-before */
.gds-text-area {
  --g-text-area-border: var(--color-border-base-default);

  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-1);
  text-align: start;
}

.gds-text-area .gds-text-area-input {
  box-sizing: border-box;
  background-color: unset;
  border-radius: var(--radius-1);
  border: 1px solid var(--g-text-area-border);
  padding: var(--space-1) var(--space-3);
  margin: 0;
  color: var(--color-text-base-default);
  appearance: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
}

.gds-text-area-resize-on {
  resize: both;
}
.gds-text-area-resize-off {
  resize: none;
}
.gds-text-area-resize-horizontal {
  resize: horizontal;
}
.gds-text-area-resize-vertical {
  resize: vertical;
}

.gds-text-area-input[aria-invalid="true"] {
  --g-text-area-border: var(--color-border-critical-default);
}

.gds-text-area-input::placeholder {
  color: var(--color-text-base-subdued);

  /* Needed for Firefox */
  opacity: 1;
}

.gds-text-area-input:disabled {
  --g-text-area-border: var(--color-border-base-subdued);

  cursor: not-allowed;
  resize: none;
}

.gds-text-area-input:active:not([disabled]),
.gds-text-area-input[data-simulate="active"] {
  --g-text-area-border: var(--color-border-brand-default);
}

.gds-text-area-container {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  display: flex;
  align-items: center;
  margin-inline-start: calc(-1 * var(--space-half));
}

.gds-text-area-container:focus-within > .gds-text-area-input,
.gds-text-area-container:has([data-simulate="focus"]) > .gds-text-area-input {
  outline: 2px solid var(--color-border-brand-default);
  outline-offset: 2px;
}
.gds-toast {
  border-radius: var(--radius-1);
  border: 1px solid var(--color-border-elevated-default);
  color: var(--color-text-base-inverse);
  display: inline-block;
  max-width: 400px;
  min-width: 210px;
}

/* Success icon inverse color */
.gds-toast-success.inverse .gds-toast-icon-success path {
  fill: var(--color-icon-success-default);
}

/* Warning icon inverse color */
.gds-toast-warning.inverse .gds-toast-icon-warning path {
  fill: var(--color-icon-warning-default);
}

/* Critical icon inverse color */
.gds-toast-critical.inverse .gds-toast-icon-critical path {
  fill: var(--color-icon-critical-default);
}

/* Loading icon inverse color */
.gds-toast-loading.inverse .gds-toast-icon-loading path {
  stroke: var(--color-icon-base-default);
}

.gds-toast-icon {
  line-height: 0;
}

.gds-toast-text {
  display: block;
}

.gds-toast .gds-icon-button-medium {
  flex-shrink: 0;
}
.gds-verification-code {
  display: flex;
  flex-direction: column;
  border: none;
  padding: var(--space-2) 0;
  margin: 0;
}

.gds-verification-code-large {
  --verification-code-height: 56px;
  --verification-code-width: 48px;
  --verification-code-font-size: 28px;
  --verification-code-border-radius: var(--space-1);
}

.gds-verification-code-medium {
  --verification-code-height: 48px;
  --verification-code-width: 40px;
  --verification-code-font-size: 24px;
  --verification-code-border-radius: 3.29px;
}

.gds-verification-code-small {
  --verification-code-height: 40px;
  --verification-code-width: 32px;
  --verification-code-font-size: 18px;
  --verification-code-border-radius: 2.74px;
}

.gds-verification-code-input {
  background-color: var(--color-background-base-default);
  border-radius: var(--verification-code-border-radius);
  border: 1px solid var(--color-border-base-default);
  color: var(--color-text-base-default);
  box-sizing: border-box;
  padding: var(--space-1);
  height: var(--verification-code-height);
  width: var(--verification-code-width);
  font-size: var(--verification-code-font-size);
  text-align: center;
}

.gds-verification-code-input:focus-within,
.gds-verification-code-input:has([data-simulate="focus"]) {
  outline: 2px solid var(--color-border-brand-default);
  outline-offset: 2px;
}

.gds-verification-code-input[aria-invalid="true"] {
  border-color: var(--color-border-critical-default);
}

.gds-verification-code-input:disabled {
  border-color: var(--color-border-base-subdued);
  cursor: not-allowed;
  color: var(--color-text-base-subdued);
}

/* remove the spinner buttons, which can cause accidental changing of the code */
.gds-verification-code-input[type="number"]::-webkit-inner-spin-button,
.gds-verification-code-input[type="number"]::-webkit-outer-spin-button {
  display: none;
}

.gds-verification-code-input[type="number"] {
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -moz-appearance: textfield !important; /* Firefox */
}
.gds-accordion {
  display: block;
  overflow: hidden;

  --color-menu-background-hover: var(--neutral-gray-10);
  --accordion-animation-duration: 300ms;
  --accordion-animation-easing: cubic-bezier(0.87, 0, 0.13, 1);
}

[data-gds-theme="dark"] .gds-accordion {
  --color-menu-background-hover: var(--neutral-gray-80);
}

.gds-accordion details:focus-visible {
  outline: none;
}

.gds-accordion-list-item {
  width: 100%;
  overflow: hidden;
}

.gds-accordion-list-separators .gds-accordion-list-item:not(:last-of-type) {
  border-bottom: 1px solid var(--color-border-base-subdued);
}

.gds-accordion-list-item .gds-accordion-arrow-icon {
  transition: transform var(--accordion-animation-duration) var(--accordion-animation-easing);
}

.gds-accordion-arrow-expanded {
  transform: rotate(-180deg);
}

details.gds-accordion-list-item > summary {
  list-style: none;
}

details.gds-accordion-list-item > summary::-webkit-details-marker {
  display: none;
}

.gds-accordion-list-item-summary {
  border-radius: var(--radius-2);
}

details.gds-accordion-list-item > summary:focus-visible {
  outline: none;
}

details.gds-accordion-list-item > summary:focus-visible .gds-accordion-list-item-summary {
  outline: 2px solid var(--color-border-brand-default);
  outline-offset: -4px;
}

details.gds-accordion-list-item > summary:hover {
  background-color: var(--color-menu-background-hover);
  cursor: pointer;
}

/* Animation for accordion content */
.gds-accordion-content {
  overflow: hidden;
  transition: height var(--accordion-animation-duration) var(--accordion-animation-easing);
  height: 0;
}

.gds-accordion-list-item[open] .gds-accordion-content {
  height: auto;
}

/* Add prefers-reduced-motion support */
@media (prefers-reduced-motion: reduce) {
  .gds-accordion {
    --accordion-animation-duration: 0ms;
  }

  .gds-accordion-list-item .gds-accordion-arrow-icon,
  .gds-accordion-content {
    transition: none;
  }
}


.rewrite-module_rewrite_kEIEV{overflow-x:visible;overflow-y:hidden;max-height:155px;position:relative;padding:4px}.rewrite-module_rewriteContent_Nd5Kv{overflow-y:auto;max-height:155px}.rewrite-module_delete_EHKh4{color:var(--color-text-deletion-default);text-decoration:line-through}.rewrite-module_deleteHighlighted_13VUT{color:var(--color-text-deletion-default);text-decoration:line-through;background-color:var(--color-background-base-subdued)}.rewrite-module_insert_Hs39F{color:var(--color-text-brand-default)}.rewrite-module_insertHighlighted_HA9K4{color:var(--color-text-brand-default);background-color:var(--color-background-brand-subdued)}.rewrite-module_retain_0wCzT{color:var(--color-text-base-default)}.rewrite-module_popoverWrapper_q3YVd{height:0;width:0}.rewrite-module_revertButton_Luc3g{width:0;height:0;margin:0;padding:0;border:none;cursor:pointer}.revertible-rewrite-diff-module_revertibleRewriteDiffLabel_nd6s-{padding:2px 4px;font-size:12px;color:#fff;border-radius:3px 3px 3px 0;background:var(--neutral-gray-100);line-height:18px;cursor:pointer}.revertible-rewrite-diff-module_revertibleRewriteDiffButton_UVjgI{cursor:pointer;outline:none}.revertible-rewrite-diff-outline-module_svg_ZVCiU{position:absolute;inset:0 auto 0 0;pointer-events:none;max-height:155px}.revertible-rewrite-diff-outline-module_path_H5FBL{pointer-events:auto;fill:transparent;cursor:pointer}.flex-module_flexFix_ba6rh>*{flex:1 1 auto;min-width:0}.locked-ui-rewrite-card-module_cardWrapper_IwxTH{border-radius:18px}.locked-ui-rewrite-card-module_obscured_yqnnb{filter:blur(6px);user-select:none;pointer-events:none}.gds-icon.locked-ui-rewrite-card-module_uphookIcon_t1Mgk path{fill:var(--color-background-pro-default)}.locked-ui-rewrite-card-module_lockedTitle_zmG4n{line-height:18px}.comment-card-module_widthLimit_rwpow{width:100%;box-sizing:border-box}.comment-card-module_iconContainer_VRgbz{flex-shrink:0;margin-top:3px}.comment-card-module_referenceContainer_ZfKql{flex-wrap:nowrap;width:100%;margin-bottom:var(--space-1)}.comment-card-module_limitToOneLine_ErWan{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1}.comment-card-module_separator_1U-cD{flex:1}.comment-card-module_diff_fZ47b{border-left:solid 2px var(--color-border-base-subdued);box-sizing:border-box}.comment-card-module_loaderContainer_TdFln{flex:1;margin:var(--space-2) 0}.comment-card-module_seeMoreLink_vJg1O{color:var(--green-60);cursor:pointer;flex-shrink:0}.comment-card-module_link_jan-2{text-decoration:none!important;background-color:var(--color-background-base-subdued);color:var(--color-text-base-subdued);padding:2px 8px;border-radius:24px;font-weight:500;font-size:12px;line-height:18px}