/* Content of https://bottr.me/shared-assets/styles/all.css */

@font-face {
  font-family: "Neue Helvetica";
  font-weight: 400;
  src: local("Helvetica Neue LT Regular"), url("/assets/fonts/Helvetica Neue LT 55 Roman.woff") format("truetype")
}

@font-face {
  font-family: "Neue Helvetica";
  font-style: normal;
  font-weight: 450;
  src: local("Helvetica Neue LT Medium"), url("/assets/fonts/Helvetica Neue LT 65 Medium.woff") format("truetype")
}

@font-face {
  font-family: "Neue Helvetica Semi Bold";
  src: local("Helvetica Neue LT Semi Bold"), url("/assets/fonts/Helvetica Neue LT 75 Bold.woff") format("truetype")
}

@font-face {
  font-family: "Neue Helvetica";
  font-weight: 700;
  src: local("Helvetica Neue LT Bold"), url("/assets/fonts/Helvetica Neue LT 75 Bold.woff") format("truetype")
}

body,
html {
  height: 100%
}

* {
  box-sizing: border-box;
  margin: 0;
  background-repeat: no-repeat;
  letter-spacing: 0;
  font-style: inherit;
  background-size: contain;
  background-color: unset;
  border: none
}

h1 {
  margin: 0
}

p {
  margin: 0
}

a,
a:active,
a:focus,
a:hover {
  text-decoration: none;
  color: var(--startup-tertiary-color, transparent)
}

a {
  color: var(--startup-primary-color, transparent)
}

ol.helptap-list,
ul.helptap-list {
  padding: 0
}

ol.helptap-list>li,
ul.helptap-list>li {
  margin: 0;
  padding: 0;
  list-style: none
}

input:focus,
select:focus,
textarea:focus {
  outline: 0
}

:focus {
  outline: 0
}

button {
  border: 0;
  padding: 0;
  font-family: var(--startup-font-family)
}

em {
  font-style: italic;
  color: inherit
}

strong {
  color: inherit
}

u {
  text-decoration: underline;
  color: inherit
}

:not(pre)>code {
  font-family: monospace;
  background-color: #eee;
  padding: 3px
}

blockquote {
  border-left: 2px solid #ddd;
  margin-left: 0;
  margin-right: 0;
  padding-left: 10px;
  color: #aaa;
  font-style: italic
}

th {
  margin: 0;
  padding: 0
}

ol.ordered-list,
ul.unordered-list {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 30px;
  list-style-position: outside;
  list-style-type: disc
}

ol.ordered-list li,
ul.unordered-list li {
  list-style-type: disc;
  height: unset
}

ol.ordered-list {
  list-style-type: decimal
}

ol.ordered-list li {
  list-style-type: decimal
}

:root {
  --application-box-shadow: 0px 0px 15px rgba(46, 49, 56, 0.3);
  --application-secondary-box-shadow: 0px 7px 15px rgba(46, 49, 56, 0.03);
  --application-editor-box-shadow: 0px 0px 15px rgba(46, 49, 56, 0.1);
  --community-right-section-width: 59.59%;
  --community-left-section-width: 42%;
  --application-delete-button-color: #FFFFFF;
  --icon-text-button-color: #F0F2F4;
  --white-color: #ffffff;
  --dark-color: #000;
  --selectot-label-color: #C0C1C2;
  --divider-color: #0820321A;
  --application-border-color: #e8e8e8;
  --application-transition-duration: 0.2s;
  --application-transition-function: ease;
  --application-border-radius: 5px;
  --application-remove-button-color: #EA5F66;
  --application-disabled-button-color: #EA5F66;
  /* --startup-tertiary-color: #C0C1C2; */
  --application-profile-picture-size: 40px;
  --body-font-size: 15px;

  /* Score palette, shared by every place that grades a value: consistency badges, artifact
     field confidence, artifact list rows, execution trace step kinds. */
  --score-high-color: #1f7a3d;
  --score-high-background-color: #e7f4ec;
  --score-mid-color: #b9770e;
  --score-mid-background-color: #f9f0db;
  --score-low-color: #c0392b;
  --score-low-background-color: #fcebe9;
}

.startup-icon path {
  stroke: var(--startup-primary-color)
}

.application-subtle-icon circle {
  stroke: var(--startup-tertiary-color)
}

.application-subtle-icon path {
  stroke: var(--startup-tertiary-color)
}

.sub-text {
  font-size: 12px;
  color: var(--startup-tertiary-color)
}

.application-button {
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--application-transition-duration) var(--application-transition-function), color var(--application-transition-duration) var(--application-transition-function), fill var(--application-transition-duration) var(--application-transition-function), stroke var(--application-transition-duration) var(--application-transition-function);
  user-select: none;
  padding: 7px;
  color: var(--startup-tertiary-color)
}

.application-button path {
  fill: var(--startup-tertiary-color);
  transition: fill var(--application-transition-duration) var(--application-transition-function), stroke var(--application-transition-duration) var(--application-transition-function)
}

.application-button.active,
.application-button:hover {
  background-color: var(--startup-secondary-color);
  color: var(--startup-primary-color)
}

.application-button.active path,
.application-button:hover path {
  fill: var(--startup-primary-color)
}

.application-button.active.button-with-stroke-svg path,
.application-button:hover.button-with-stroke-svg path {
  fill: unset;
  stroke: var(--startup-primary-color);
  stroke-width: 1.5
}

.application-button.active.with-ellipse-svg ellipse,
.application-button:hover.with-ellipse-svg ellipse {
  fill: var(--startup-primary-color)
}

.application-button.active.button-with-circle-svg circle,
.application-button:hover.button-with-circle-svg circle {
  fill: var(--startup-primary-color)
}

.application-button.active.button-with-circle-path-svg circle,
.application-button:hover.button-with-circle-path-svg circle {
  stroke: var(--startup-primary-color)
}

.application-button.round-button {
  border-radius: 40px
}

.application-button.square-button {
  border-radius: var(--application-border-radius)
}

.application-button.button-with-stroke-svg path {
  fill: unset;
  stroke: var(--startup-tertiary-color);
  transition: stroke var(--application-transition-duration) var(--application-transition-function);
  stroke-width: 1.5
}

.application-button.with-ellipse-svg ellipse {
  fill: var(--startup-tertiary-color);
  transition: fill var(--application-transition-duration) var(--application-transition-function)
}

.application-button.button-with-circle-svg circle {
  fill: var(--startup-tertiary-color);
  transition: fill var(--application-transition-duration) var(--application-transition-function)
}

.application-button.button-with-circle-path-svg circle {
  stroke: var(--startup-tertiary-color)
}

.application-plain-button path {
  stroke: var(--startup-tertiary-color)
}

.application-plain-button:hover path {
  stroke: var(--startup-text-color)
}

.clickable-or-selectable-text {
  color: var(--startup-primary-color)
}

.dialog-header-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--startup-text-color)
}

.link {
  cursor: pointer;
  color: var(--startup-primary-color);
  transition: color var(--application-transition-duration) var(--application-transition-function)
}

.link:hover {
  color: var(--startup-secondary-color)
}

.empty-content-notification-banner {
  color: var(--startup-tertiary-color);
  display: inline-block;
  text-align: center;
  width: 100%
}

.status-label {
  align-items: center;
  background-color: var(--startup-secondary-color);
  border-radius: var(--application-border-radius);
  color: var(--startup-primary-color);
  display: flex;
  font-size: 12px;
  height: 18px;
  padding: 3px 5px
}

body,
html {
  font-family: var(--startup-font-family, "Neue Helvetica"), Helvetica, Arial;
  color: var(--startup-text-color)
}

button {
  cursor: pointer
}

h1 {
  font-size: 25px
}

h2 {
  font-size: 20px
}

h3 {
  font-size: 18px
}

h4 {
  font-size: 16px;
  font-weight: 400
}

h5 {
  font-size: 15px;
  font-weight: 500
}

a {
  cursor: pointer
}

.startup-themed-button {
  background-color: var(--startup-button-background-color);
  color: #fff
}

a.startup-themed-button {
  background-color: var(--startup-button-background-color);
  color: #fff
}

.primary-element {
  color: var(--startup-primary-color)
}

.secondary-element {
  color: var(--startup-secondary-color)
}

input,
select,
textarea {
  background-color: var(--startup-secondary-background-color)
}

.primary-background {
  background-color: var(--startup-primary-background-color)
}

.secondary-background {
  background-color: var(--startup-secondary-background-color)
}

.primary-element-fill {
  fill: var(--startup-primary-color, #05A2B5)
}

.secondary-element-fill {
  fill: var(--startup-secondary-color, #E8EFF0)
}

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

.dim-text {
  color: var(--startup-tertiary-color)
}

span {
  color: inherit;
  font-family: inherit
}

span.editor-element {
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit
}

.italic {
  font-style: italic
}

.editor-element .divider-block {
  display: flex;
  height: 45px;
  padding-top: 22.5px
}

.editor-element .divider-block .divider-element {
  height: 1px;
  border-top: 1px solid var(--startup-tertiary-color);
  width: 100%
}

.editor-element .ht-files-display {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%
}

.editor-element .ht-files-display.ht-image-display {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: center
}

.editor-element .ht-files-display.ht-image-display.square {
  aspect-ratio: 1/1
}

.editor-element .ht-files-display.ht-image-display.square img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.editor-element .ht-files-display.ht-image-display.circle {
  aspect-ratio: 1/1;
  clip-path: circle(50%)
}

.editor-element .ht-files-display.ht-image-display.circle img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.editor-element .ht-files-display.ht-image-display.star {
  aspect-ratio: 1/1;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}

.editor-element .ht-files-display.ht-image-display.star img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.editor-element .ht-files-display.ht-image-display.triangle {
  aspect-ratio: 1/1;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
}

.editor-element .ht-files-display.ht-image-display.triangle img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.editor-element .ht-files-display.ht-image-display img {
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  margin: 0 auto
}

.editor-element .ht-files-display video {
  width: 100%;
  height: 100%;
  border-radius: 10px
}

@media (max-width: 500px) {
  .editor-element .ht-files-display.ht-image-display.square img {
    object-fit: contain
  }

  .editor-element .ht-files-display.ht-image-display.circle img {
    object-fit: contain
  }

  .editor-element .ht-files-display.ht-image-display.star img {
    object-fit: contain
  }

  .editor-element .ht-files-display.ht-image-display.triangle img {
    object-fit: contain
  }
}

.editor-element .authenticator-button,
.editor-element .ht-button {
  height: 100%;
  border-radius: 5px;
  color: inherit;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--application-transition-duration) var(--application-transition-function), color var(--application-transition-duration) var(--application-transition-function);
  background-color: inherit;
  -webkit-user-select: none;
  user-select: none;
  text-align: inherit;
  display: flex;
  align-items: center;
  border-radius: inherit
}

.editor-element .link-button-control {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  padding: 1px 0;
  cursor: pointer;
  color: inherit;
  text-decoration: unset
}

.editor-element .link-button-control .editor-element {
  height: auto;
  min-height: unset
}

.editor-element .multiple-columns-layout {
  display: flex;
  column-gap: 5px;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 2px;
  min-height: 41px;
  flex-wrap: nowrap;
  flex-direction: row
}

.editor-element .columns-count-2 {
  grid-template-columns: auto auto
}

.editor-element .columns-count-4 {
  grid-template-columns: auto auto auto auto
}

.editor-element .columns-v2 {
  display: grid;
  column-gap: 5px
}

@media (max-width: 768px) {
  .editor-element .multiple-columns-layout {
    flex-direction: column;
    row-gap: 5px
  }

  .editor-element .multiple-columns-layout .editor-column {
    width: 100%
  }
}

.mobile-preview-medium .editor-element .multiple-columns-layout {
  flex-direction: column;
  row-gap: 5px
}

.mobile-preview-medium .editor-element .multiple-columns-layout .editor-column {
  width: 100%
}

@media (max-width: 500px) {
  .editor-element .multiple-columns-layout {
    flex-direction: column;
    row-gap: 5px
  }

  .editor-element .multiple-columns-layout .editor-column {
    width: 100%
  }
}

.mobile-preview-small .editor-element .multiple-columns-layout {
  flex-direction: column;
  row-gap: 5px
}

.mobile-preview-small .editor-element .multiple-columns-layout .editor-column {
  width: 100%
}

.editor-element .columns-layout {
  display: flex;
  column-gap: 5px;
  width: 100%;
  height: auto;
  min-height: 41px;
  flex-wrap: nowrap;
  flex-direction: row
}

@media (max-width: 768px) {
  .editor-element .columns-layout {
    flex-direction: column
  }

  .editor-element .columns-layout .column {
    width: 100%
  }
}

.mobile-preview-medium .editor-element .columns-layout {
  flex-direction: column
}

.mobile-preview-medium .editor-element .columns-layout .column {
  width: 100%
}

@media (max-width: 500px) {
  .editor-element .columns-layout {
    flex-direction: column
  }

  .editor-element .columns-layout .column {
    width: 100%
  }
}

.mobile-preview-small .editor-element .columns-layout {
  flex-direction: column
}

.mobile-preview-small .editor-element .columns-layout .column {
  width: 100%
}

.hamburger>.hamburger-button {
  display: none;
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  z-index: 1
}

.hamburger>.hide-hamburger-menu-button {
  display: none;
  top: 0;
  position: absolute;
  width: 20px;
  height: 20px;
  cursor: pointer;
  z-index: 2
}

.hamburger.hamburger-left>.hamburger-button {
  left: 0
}

.hamburger.hamburger-left>.hide-hamburger-menu-button {
  right: 0
}

.hamburger.hambuger-right>.hamburger-button {
  right: 0
}

.hamburger.hambuger-right>.hide-hamburger-menu-button {
  left: 0
}

@media (max-width: 768px) {
  .hamburger.on>.editor-element {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--startup-primary-background-color);
    z-index: 1
  }

  .hamburger.on>.hamburger-button {
    display: none
  }

  .hamburger.on>.hide-hamburger-menu-button {
    display: block
  }

  .hamburger>.editor-element {
    display: none
  }

  .hamburger>.hamburger-button {
    display: block
  }
}

@media (max-width: 500px) {
  .hamburger.on>.editor-element {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0
  }

  .hamburger.on>.hamburger-button {
    display: none
  }

  .hamburger.on>.hide-hamburger-menu-button {
    display: block
  }

  .hamburger>.editor-element {
    display: none
  }

  .hamburger>.hamburger-button {
    display: block
  }
}

.editor-element .table-of-content-item {
  cursor: pointer
}

.editor-element .content-level-1 {
  padding-left: 10px
}

.editor-element .content-level-2 {
  padding-left: 20px
}

.editor-element .content-level-3 {
  padding-left: 30px
}

.editor-element .content-level-4 {
  padding-left: 40px
}

.editor-element .content-level-5 {
  padding-left: 50px
}

.data-collection-layout {
  display: grid;
  gap: 10px
}

.last-updated {
  display: flex;
  width: 300px;
  flex-direction: row;
  column-gap: 5px;
  align-items: center
}

.page-author {
  display: flex;
  flex-direction: column;
  row-gap: 5px
}

.page-author .page-author-details {
  display: flex;
  flex-direction: row;
  column-gap: 5px;
  align-items: center
}

.page-author .page-author-picture {
  width: 25px;
  border-radius: var(--application-border-radius);
  height: 25px;
  overflow: hidden
}

.page-author .page-author-picture img {
  max-height: 100%;
  max-width: 100%
}

.product-viewer-main {
  display: grid;
  grid-template-rows: 46px;
  row-gap: 10px;
  position: relative;
  padding: 10px
}

.product-viewer-main .product-details {
  display: grid;
  grid-auto-rows: fit-content(0) fit-content(0) fit-content(0);
  row-gap: 5px
}

.product-viewer-main .edit-product-icon {
  position: absolute;
  top: 5px;
  right: 5px
}

.product-viewer-main .product-button-controls {
  display: flex;
  align-items: center;
  justify-content: center
}

.table-layout {
  border-collapse: collapse;
  width: 100%
}

.table-layout .table-body .table-row .table-cell {
  border: 1px solid var(--startup-tertiary-color);
  padding: 5px
}

.table-wrapper {
  display: block
}

.email-quote-element .email-quote-header {
  font-size: 14px
}

.email-quote-element .email-quote-container {
  display: none
}

.email-quote-element .email-quote-container:target {
  display: block
}

.toggle-list-head {
  display: grid;
  grid-template-columns: 20px auto;
  column-gap: 5px
}

.toggle-list-head .toggle-button {
  cursor: pointer
}

.toggle-list-head .toggle-button>svg {
  width: 20px;
  height: 20px
}

.indentation-main {
  padding-left: 20px
}

.youtube-video-main {
  border-radius: var(--application-border-radius);
  overflow: hidden
}

.youtube-video-main iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border: 0
}

.youtube-video-container,
.youtube-video-main {
  width: 100%;
  height: 100%
}

.editor-node-main {
  position: relative;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 160%;
  color: var(--startup-text-color)
}

.editor-node-main.highlight>.editor-element {
  background-color: var(--startup-secondary-background-color);
  border-radius: var(--application-border-radius)
}

span.editor-element {
  min-height: unset
}

.editor-element {
  font-style: normal;
  font-size: var(--startup-text-size, 15px);
  font-weight: 400;
  line-height: 150%;
  color: var(--startup-text-color);
  min-height: 26px;
  height: 100%
}

.editor-element .editor-checkbox-list-item {
  position: relative
}

.editor-element .editor-checkbox-list-item input[type=checkbox] {
  cursor: pointer
}

.editor-element .two-column-main {
  display: grid;
  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
  column-gap: 10px;
  min-height: 16px
}

.editor-element .link {
  text-decoration: none;
  color: var(--startup-primary-color);
  cursor: pointer
}

.editor-element .link:hover {
  color: var(--startup-secondary-color)
}

.editor-element .mention-element {
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  display: inline-block
}

.editor-element .url-embed-details .url-embed-data {
  display: flex;
  column-gap: 10px;
  padding: 15px;
  border-radius: var(--application-border-radius);
  border: 1px solid var(--application-border-color);
  background-color: var(--startup-secondary-background-color);
  flex-direction: column
}

.editor-element .url-embed-details .url-embed-data-description-url {
  color: var(--startup-tertiary-color)
}

.editor-element .url-embed-details .url-embed-data-text-details {
  display: flex;
  flex-direction: column;
  row-gap: 3px;
  font-size: 14px;
  padding-top: 5px
}

.editor-element .url-embed-details .url-embed-data-image-details {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%
}

.editor-element .url-embed-details .url-embed-data-image {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  position: relative
}

.editor-element .mention-handle {
  font-weight: 700;
  color: var(--startup-primary-color)
}

.editor-element .ht-startup-event-element {
  margin: 0 auto
}

.editor-element span {
  line-height: 150%
}

li.editor-element {
  overflow-y: unset
}

.editor-h1 {
  font-style: normal;
  font-weight: 700;
  font-size: var(--startup-h1-size, 26px);
  line-height: var(--startup-header-line-height, 33px);
  min-height: 43px
}

.editor-h2 {
  font-style: normal;
  font-weight: 700;
  font-size: var(--startup-h2-size, 22px);
  line-height: var(--startup-header-line-height, 33px);
  min-height: 43px
}

.editor-h3 {
  font-style: normal;
  font-weight: 700;
  font-size: var(--startup-h3-size, 20px);
  line-height: var(--startup-header-line-height, 33px);
  min-height: 43px
}

.editor-h4 {
  font-style: normal;
  font-weight: 700;
  font-size: var(--startup-h4-size, 18px);
  line-height: var(--startup-header-line-height, 33px);
  min-height: 43px
}

.editor-h5 {
  font-style: normal;
  font-weight: 700;
  font-size: var(--startup-h5-size, 16px);
  line-height: var(--startup-header-line-height, 33px);
  min-height: 43px
}

.editor-h6 {
  font-style: normal;
  font-weight: 700;
  font-size: var(--startup-h6-size, 14px);
  line-height: var(--startup-header-line-height, 33px);
  min-height: 43px
}

@media (max-width: 400px) {
  .editor-element {
    font-size: 13px;
    min-width: 80%
  }
}

.mobile-preview-mini .editor-element {
  font-size: 13px;
  min-width: 80%
}

@media (max-width: 500px) {
  .editor-element {
    min-width: 80%
  }
}

.mobile-preview-small .editor-element {
  min-width: 80%
}

.primary-cta,
.startup-themed-button {
  border-radius: 5px;
  color: var(--startup-button-text-color);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  border: 0;
  padding: 12px;
  height: 46px;
  cursor: pointer;
  transition: background-color var(--application-transition-duration) var(--application-transition-function), color var(--application-transition-duration) var(--application-transition-function);
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: stretch;
  background-color: var(--startup-primary-color);
  user-select: none
}

.primary-cta.large,
.startup-themed-button.large {
  height: 60px
}

.primary-cta:hover,
.startup-themed-button:hover {
  background-color: var(--startup-secondary-color);
  color: var(--startup-primary-color)
}

.primary-cta:active,
.startup-themed-button:active {
  background-color: var(--startup-primary-color)
}

.primary-cta:disabled,
.startup-themed-button:disabled {
  color: var(--application-disabled-button-color);
  background-color: var(--startup-tertiary-color);
  cursor: not-allowed
}

.primary-cta.cta-button,
.startup-themed-button.cta-button {
  width: 150px
}

.icon-text-button {
  border-radius: 5px;
  background-color: var(--icon-text-button-color);
  color: var(--dark-color);
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: auto auto;
  column-gap: 5px
}

.icon-button {
  width: 25px;
  height: 25px;
  cursor: pointer
}

.delete-button {
  background-color: var(--application-delete-button-color);
  color: var(--startup-primary-color);
  border-radius: 5px;
  font-size: 16px;
  padding: 12px;
  height: 46px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: stretch
}

.delete-button:hover {
  background-color: var(--startup-secondary-color)
}

.delete-button:active {
  background-color: var(--startup-secondary-color)
}

.delete-button.application-delete-button {
  color: var(--application-remove-button-color);
  border: 1px solid var(--application-remove-button-color)
}

.delete-button.application-delete-button:hover {
  background-color: var(--application-remove-button-color);
  color: var(--startup-primary-background-color)
}

.delete-button.application-delete-button:active {
  background-color: var(--startup-primary-background-color)
}

.close-button {
  width: 30px;
  height: 30px;
  background-image: url(/assets/images/close-button-icon.svg);
  background-position: initial
}

.dialog-close-button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--application-transition-duration) var(--application-transition-function);
  border-radius: 40px;
  z-index: 6
}

.dialog-close-button:hover {
  background-color: var(--startup-secondary-color)
}

.dialog-close-button:hover path {
  fill: var(--startup-primary-color)
}

.dialog-close-button svg path {
  fill: var(--startup-tertiary-color);
  transition: fill var(--application-transition-duration) var(--application-transition-function)
}

.link-button {
  color: var(--startup-tertiary-color);
  transition: color var(--application-transition-duration) var(--application-transition-function)
}

.link-button:hover {
  color: var(--startup-primary-color)
}

input,
select,
textarea {
  border: 1px solid var(--application-border-color);
  border-radius: 5px;
  padding: 13px 20px;
  background-color: var(--startup-secondary-background-color);
  font-weight: 400;
  font-size: 15px;
  line-height: 19px;
  color: var(--startup-text-color);
  transition: border-color var(--application-transition-duration) var(--application-transition-function);
  width: 100%;
  font-family: var(--startup-font-family)
}

input:placeholder,
select:placeholder,
textarea:placeholder {
  color: var(--startup-tertiary-color)
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: .5;
  cursor: not-allowed
}

input:focus,
input:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
  border-color: var(--startup-primary-color)
}

.disabled {
  opacity: .5;
  cursor: not-allowed
}

input[type=checkbox],
input[type=radio] {
  cursor: pointer
}

::-webkit-input-placeholder {
  color: var(--startup-tertiary-color)
}

::-moz-placeholder {
  color: var(--startup-tertiary-color)
}

:-ms-input-placeholder {
  color: var(--startup-tertiary-color)
}

:-moz-placeholder {
  color: var(--startup-tertiary-color)
}

textarea {
  font-size: 15px
}

.form-input-row {
  display: grid;
  grid-template-columns: auto 490px;
  column-gap: 10px;
  align-items: center
}

.field-label {
  font-weight: 600;
  font-size: 15px;
  line-height: 19px;
  text-align: left;
  color: var(--startup-text-color);
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  color: var(--startup-primary-color);
  font-size: 14px;
  opacity: .75
}

.error-message {
  font-size: 12px;
  line-height: 130%;
  color: #082032;
  text-align: left;
  color: red
}

.date-input,
.text-input {
  width: 100%;
  height: 45px;
  box-sizing: border-box;
  line-height: 160%
}

.date-input {
  cursor: pointer
}

.textarea-input {
  width: 100%;
  min-height: 84px;
  box-sizing: border-box;
  line-height: 160%;
  resize: none
}

.single-select-input {
  -webkit-appearance: none;
  background-image: url(/assets/images/single-select-arrow.svg);
  background-size: initial;
  background-position: right 20px center
}

.form-input-row {
  row-gap: 10px;
  display: flex;
  flex-direction: column;
  align-items: unset
}

.form-input-row.columns {
  grid-template-columns: 200px auto
}

.disable-scroll {
  overflow: hidden
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none
}

.hide-scrollbar::-webkit-scrollbar {
  display: none
}

.hidden {
  display: none
}

::selection {
  background: var(--startup-secondary-color)
}

input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus {
  background: var(--startup-secondary-color)
}

.display-content-on-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%
}