h1:has(action-menu) {
  display:flex;
  justify-content: space-between;
}

.close-glyph {
  color: inherit;
  font-family: 'Material Design Icons', sans-serif;
  font-weight: 900;
  font-size: 18pt;
  cursor: pointer;
}

.close-glyph:before {
  content:"\F05AD";
}

/** Inputs */
input-wrapper {
  display: inline-flex;
}

/* input-wrapper, input-text, input-user, input, textarea, input-password, button[native], [role='button'], action-menu, split-field  */
input, textarea, button[native], [role='button'], [__custom-input] {
  border: 1px solid var(--project-color-input-border-nofocus);
  background: var(--project-color-input-background);
  padding: .4rem;
  border-radius: 4px;
  font-size: 1.1rem;
  color: var(--project-color-input-text-color);
}

  :is(input-wrapper, input-password) :is(input, button) {
    border: unset;
    background: unset;
    padding: 0;
    border-radius: unset;
  }

  :is(input-wrapper, input-password) input:focus {
    border: unset;
  }

  /* input[invalid],
  textarea[invalid],
  :is(input-wrapper, input-password, input-text) input[invalid]
  input-array[invalid]  */
  :is(input, textarea, button[native], [role='button'], [__custom-input])[aria-invalid="true"]{
    border: 1px solid var(--project-color-input-invalid-border);
    background: var(--project-color-input-invalid-bg);
  }

  validation-issue.form-request--field-issue-message{
    background: var(--project-color-input-invalid-border);
    color: var(--project-color-input-invalid-label-text);
    font-size: .9rem;
    padding: .2rem;
    white-space: pre-line;
    box-shadow: var(--project-box-shadow);
    position: absolute;
    box-sizing: border-box;
    margin: 0;
  }
  
  .form-request--issue-fade-in {
    opacity:0;
    transform:translateX(-20%);
    animation: issueFadeIn 250ms 1 forwards ease-out running 300ms;
  }

  .form-request--issue-fade-out {
    animation: issueFadeIn 500ms 1 forwards ease-out running reverse;
  }

  @keyframes issueFadeIn{
    to{
      opacity: 1;
      transform: none;
    }
  }

  :is(input-wrapper, input-password):focus-within,input:focus{
    border: 1px solid var(--project-color-input-border-focus);
  }

  input::placeholder, textarea::placeholder, input + .placeholder {
    color: var(--project-color-input-border-nofocus);
  }

  input + .placeholder {
    background: transparent;
    position: absolute;
    transition: top 300ms, left 300ms, color 300ms, font-size 300ms;
    top:10px;
    left:10px;
    opacity: 1;
  }

  :focus-within .placeholder,
  input::not(:placeholder-shown) + .placeholder,
  textarea::not(:placeholder-shown) + .placeholder
  {
    color: var(--project-color-input-border-focus);
    background: var(--project-color-input-background);
    font-weight: bold;
    top:5px;
    left:5px;
  }

  textarea:focus::placeholder,
  input:focus::placeholder {
    color: var(--project-color-input-border-focus);
  }

input:focus, textarea:focus {
  background: var(--project-color-input-background-focus);
  box-shadow: none;
}

input:disabled, textarea:disabled, markdown-area[aria-disabled="true"], markdown-area[aria-disabled="true"] .CodeMirror {
  background: var(--project-color-input-disabled);
}

input-user {
  display: flex;
  padding: 0;
  align-items: center;
  overflow: hidden;
}

input-user fieldset.autocomplete--search-container{
  padding:0;
  margin: 0;
  border: none;
  flex-grow: 1;
}

input-user button {
  background: inherit;
}

input-user.value fieldset.autocomplete--search-container {
  display: none;
}

input-user [type='search'] {
  border: none;
}

input-user .cobalt-user--profile-display {
  margin-left: .5em;
  font-size: .95rem;
}

input-user .cobalt-user--profile-display .username {
  font-size: .8rem;
  color: var(--project-color-input-border-nofocus)
}


/** BUTTON LINKS **/

.button, button, [role='button'] {
  --btn-normal: var(--project-color-button-init);
  --btn-text: var(--project-color-button-text);
  --btn-hover: var(--project-color-button-hover);
  --btn-hover-text: var(--project-color-button-hover-text);
  background-color: var(--btn-normal);
  color: var(--btn-text);
  padding: .7rem 1.4rem;
  border-radius: 2rem;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.1rem;
  white-space: nowrap;
  box-sizing: border-box;
}

.button,[role='button'] {
  border-radius: 0;
  border: 1px solid var(--project-color-input-border-nofocus);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: normal;
  user-select: none;
}

:is(.button, button, [role='button']) loading-spinner{
  font-size: 1em;
  height: 1em;
  width: 1em;
}

a.button {
  color: var(--btn-text);
}

.button.light-alt {
  --btn-normal: rgba(255, 255, 255, .8);
  --btn-text: #000;
  --btn-hover: #FFF;
  --btn-hover-text: #000;
  border: 1px solid;
}

.button.dark-alt {
  --btn-normal: #000;
  --btn-text: #FFF;
  --btn-hover: #101010;
  --btn-hover-text: #FFF;
  border: 1px solid;
}

.button:hover,button:hover, action-menu:hover, [role='button'] {
  background-color: var(--btn-hover);
  color: var(--btn-hover-text);
}

/* .button */

.lightbox-item {
  cursor: pointer;
}

.lightbox-zoom {
  cursor: zoom-in;
}

:is(input-array, input-user-array){
  display: inline-flex;
  flex-direction: column;
  border: 1px solid var(--project-color-input-border-nofocus);
  background: var(--project-color-input-background);
  padding: 0;
  border-radius: 4px;
  font-size: 1.1rem;
  overflow: hidden;
  box-sizing: border-box;
}

  fieldset > :is(input-array, input-user-array){
    width: 100%;
  }

  :is(form-request) :is(input-array, input-user-array) fieldset,
  :is(input-array, input-user-array) fieldset{
    display: flex;
    flex-wrap: wrap;
    flex-grow:1;
    min-height: 2rem;
    /* border: 0; */
    border-bottom: 1px solid var(--project-color-input-border-nofocus);
    background: var(--project-color-input-disabled);
    margin: 0;
    padding:.4rem;
    gap: .4rem;
    max-width: 100%;
  }

  :is(input-array:disabled,input-array[disabled], input-user-array[disabled]) :is(.autocomplete--search-container, input-array-tag) {
    background-color: var(--project-color-input-disabled);
    pointer-events: none;
  }

  :is(input-array:disabled, input-array[disabled], input-user-array[disabled]) :is(input-array-tag input[type="button"]) {
    display: none;
  }

  :is(input-array, input-user-array) fieldset:empty{
    text-align: center;
  }

  :is(input-array, input-user-array) fieldset:empty:before{
    content:"Use the field below to add items to this list";
    font-style:italic;
    opacity: .6;
    font-size: .6em;
  }

  :is(input-array, input-user-array) input[type="search"]{
    border: none;
    border-radius: unset;
    font-size: .9rem;
    background-color: inherit;
    margin:0;
  }

  :is(input-array, input-user-array) input[type="search"]:focus{
    background: var(--project-color-input-background);
  }

  .autocomplete--search-container {
    display:flex;
    flex-direction:row;
    background: var(--project-color-input-background);
    cursor: text;
    padding:none;
  }

  .autocomplete--search-container:focus-within {
    outline: 1px solid var(--project-color-input-border-focus);
  }

  .autocomplete--search-container input[type='search'] {
    width:100%;
  }

  :is(input-array, input-user-array) optgroup, :is(input-array, input-user-array) option{
    display: none;
  }

   .input-array--search-results, autocomplete-results-container{
    display: block;
    font-size: .9rem;
    padding: .2rem;
    margin:0;
    list-style: none;
    position:absolute;
    background: var(--project-color-input-background);
    border: 1px solid var(--project-color-input-border-nofocus);
    border-top: none;
    width: calc(100% - .2rem);
    top:100%;
    left:.1rem;
    z-index: calc(var(--project-modal-z-index) + 100);
    box-sizing: border-box;
  }

  .input-array--search-results:empty, autocomplete-results-container:empty{
    display:none;
  }

   .input-array--search-results li, autocomplete-results-container li{
    padding: .2rem;
    border: 1px solid transparent;
    box-sizing: border-box;
  }

  .input-array--search-results li+li, autocomplete-results-container li+li{
    margin-top: .1rem;
  }

   .input-array--search-results li:hover,
   .input-array--search-results li:focus,
   .input-array--search-results li.input-array--will-select-on-enter,
   autocomplete-results-container li:hover,
   autocomplete-results-container li:focus,
   autocomplete-results-container li.input-array--will-select-on-enter {
    background: var(--project-color-input-disabled);
    border:1px solid var(--project-color-input-border-nofocus);
    cursor:pointer;
    color:black;
  }

  li.input-array--list-custom,
  li.autocomplete--list-custom{
    font-weight: bold;
  }

  li.input-array--list-custom:not(.input-array--will-select-on-enter),
  li.autocomplete--list-custom:not(.input-array--will-select-on-enter){
    color:var(--project-color-input-border-nofocus);
  }

   li.input-array--list-custom:before,
   li.autocomplete--list-custom:before{
    content: "+";
    margin: 0 0.4rem 0 .2rem;
    font-weight: bold;
    color: white;
    background: var(--project-color-input-border-nofocus);
    border-radius: 50%;
    width: 1rem;
    display: inline-flex;
    height: 1rem;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

input-array-item,
input-array-tag{
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--project-color-input-border-nofocus);
  background: var(--project-color-input-background);
  border-radius: 4px;
  font-size: 1rem;
  overflow: hidden;
}

  input-array-item span,
  input-array-tag label{
    margin: 0 .3rem;
  }

  input-array-item input[type='button'],
  input-array-tag input[type='button'],
  input-user > button{
    font-size: .8rem;
    color: var(--project-color-input-border-nofocus);
    border: none;
    border-left: 1px solid var(--project-color-input-border-nofocus);
    border-radius: unset;
    margin: 0;
    height: 100%;
  }

  input-array-tag input[type='button']:hover,
  input-user > input[type='button'] {
    background-color:var(--project-color-problem);
    color:white;
  }

input-object-array {
  display: flex;
  flex-wrap: wrap;
  min-height: 2rem;
  position: inherit;
  border: 1px solid var(--project-color-input-border-nofocus);
  background: var(--project-color-input-disabled);
  margin: 0;
  padding: .4rem;
  max-width: 100%;
  border-radius: 4px;
  gap: .4rem;
}
  input-object-array var{
    display: none;
  }

  input-object-array .input-object-array--add-button{
    margin-left:auto;
  }

copy-span {
  display: inline-block;
  border: 1px solid var(--project-color-input-border-nofocus);
  border-radius: 4px;
  background: var(--project-color-input-background);
  position: relative;
  box-sizing: border-box;
}

  copy-span input {
    display: inline-block;
    border: 1px solid transparent;
    background: transparent;
    padding: calc(.4rem - 2px);
    box-sizing: border-box;
    width:100%;
  }

  copy-span input:focus{
    outline: 1px solid transparent;
    border: 1px solid transparent;
    background: transparent;
  }

  copy-span:focus-within{
    border: 1px solid var(--project-color-input-border-focus);
  }

  :is(copy-span:focus-within) :is(button){
    border-left-color: var(--project-color-input-border-focus);
    color:black;
  }

  copy-span button{
    border: none;
    background: var(--project-color-input-background);
    border-left: 1px solid var(--project-color-input-border-nofocus);
    border-radius: 0 4px 4px 0;
    color:var(--project-color-input-border-nofocus);
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
  }

  copy-span button:hover{
    color: black;
  }

  copy-span .copy-span--confirm{
    position: absolute;
    width: 100%;
    top: calc(100% - 4px);
    animation: 800ms ease forwards 1;
    text-align: center;
    border: inherit;
    background: inherit;
    box-shadow: 0 3px 5px rgba(0,0,0,.3);
    border-radius: 0 0 4px 4px;
    box-sizing: inherit;
    /* color: var(--project-color-input-border-nofocus); */
    cursor: normal;
  }

  copy-spawn .copy-span--spawn{
    animation-name: MessageSpawnIn;
  }

  copy-spawn .copy-span--disappear{
    animation-name: MessageDespawn;
  }

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

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

.floater--new-item{
  position:fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 2rem;
  right: 2rem;
  box-sizing: border-box;
  border: none;
  background: var(--project-color-button-init);
  color: var(--project-color-button-text);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}

a.floater--new-item{
  text-decoration: none;
}

  .floater--new-item:hover{
    background:var(--project-color-button-hover);
    /* color:var(--project-color-button-hover-text); */
  }

  .floater--new-item:visited {
    color: var(--project-color-button-text);
  }

  .floater--new-item:focus{
    background: var(--project-color-button-pressed);
  }

  .floater--new-item::before{
    content: "+";
    font-weight: bolder;
    font-size: 2.5rem;
  }

progress-bar {
  display: block;
  position: relative;
  width: 100%;
  height: 1rem;
  border: 1px solid var(--project-color-input-border-nofocus);
  background: var(--project-color-input-disabled);
  /* border-radius: 4rem; */
  overflow:hidden;
}

progress-bar::before{
  content:"";
  height:100%;
  width:100%;
  position: absolute;
  top:0;
  left:0;
  background-image: linear-gradient(
    90deg,
    var(--project-body-background) 0%,
    var(--project-color-input-border-nofocus) 40%,
    var(--project-color-input-border-nofocus) 70%,
    var(--project-body-background) 100%
  );
  background-repeat: none;
  background-color: var(--project-body-background);
  background-size: 100% 100%;
  animation: progressBarIdle 1s linear infinite;
  transition: height 600ms ease-out;
}

progress-bar.spa-loading-indicator {
  border: none;
  position: fixed;
  top: -100%;
  left: 0;
  opacity: 0;
  transition: top .5s, opacity .5s;
  z-index: calc(var(--project-modal-z-index) * 100);
  pointer-events: none;
}

.form-request--processing progress-bar{
  max-width: 50%;
  margin: 10px auto;
}

progress-bar .progress-bar--indicator{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--project-color-button-init);
  transition: width 400ms ease-out;
  border-radius: 6px;
}

@keyframes progressBarIdle{
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 100vw 0;
  }
}

.cobalt-query-controls {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.cobalt-query-controls .page-controls {
  font-size: 1.3em;
}

.cobalt-query-controls button {
  border: none;
  background-color: var(--project-calendar-cell-txt);
  border-radius: 50%;
  width: 50px;
  height:50px;
  color: var(--project-calendar-cell-bg);
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cobalt-query-controls :is(:disabled, [disabled="disabled"], [disabled]) {
  opacity: .2;
  pointer-events: none;
}

input-password {
  display: flex;
  padding: unset;
  flex-grow: 1;
}

input-password > input {
  padding: .2rem;
  margin: 0;
  width:100%;
}

input-password > button {
  background: transparent;
  border: unset;
  padding: 0 .4rem;
}

input-password > button:hover {
  background: transparent;
}

input-password > input + button:before {
  content: "\F06D1";
  color: var(--project-color-input-border-nofocus);
  font-family: "Material Design Icons";
}

input-password > button:hover:before{
  color: black;
}

input-password > input[type='password'] + button:before {
  content: "\F0208";
}


.cobalt-sortable--drop-indicator {
  display: inline-block;
  width: 4px;
  color: var(--project-color-active);
  background-color: var(--project-color-active);
  padding: 4px;
}

.cobalt--fs-directory-listing {
  display: flex;
  flex-wrap: wrap;
}

.cobalt-sortable--current-drag-item {
  opacity: .2;
}


progress.spa-loading-indicator {
  width: 100%;
  height: 15px;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: -25px;
  z-index: var(--project-modal-z-index);
  margin: unset;
  opacity: 0;
  pointer-events: none;
  /* -webkit-appearance: none; */
  accent-color: var(--project-color-input-border-nofocus);
  /* background-color: var(--project-color-input-disabled); */
}

progress.spa-loading-indicator.navigation-start {
  transition: top .5s, opacity .5s;
  z-index: calc(var(--project-modal-z-index) * 100);
  top: -4px;
  opacity: 1;
}