/* Cyan Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --primary: #00acc1;
  --primary-hover: #0097a7;
  --primary-focus: rgba(0, 172, 193, 0.125);
  --primary-inverse: #FFF;
}

/* Cyan Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --primary: #00acc1;
    --primary-hover: #00bcd4;
    --primary-focus: rgba(0, 172, 193, 0.25);
    --primary-inverse: #FFF;
  }
}

/* Cyan Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary: #00acc1;
  --primary-hover: #00bcd4;
  --primary-focus: rgba(0, 172, 193, 0.25);
  --primary-inverse: #FFF;
}

/* Cyan (Common styles) */
:root {
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);
  --danger: #e53935;
  --success: #43a047;
}


/* Color helpers */
.primary { color:  var(--primary) !important;}
.danger { color:  var(--danger) !important;}
.success { color:  var(--success) !important;}
.bg-primary {
  background-color: var(--primary);
  padding: var(--block-spacing-vertical) 0;
}
.bg-primary .headings > :last-child, hgroup > :last-child {
  color: var(--h1-color);
  opacity: 0.8;
}
.muted { color: var(--muted-color) }

/*alignment helpers */
.right { text-align: right; }


.center { text-align: center; }
.vcenter { align-self: center; vertical-align: middle;  }

.clickable { cursor: pointer; }
.oneline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.notopmargin { margin-top: 0; }

/* Other helpers */
.is-fullwidth { width: 100%; }
.is-opaque { opacity: 0.4; }
.large { font-size: 36px; }
.hidden { display: none; }
ion-icon { vertical-align: middle; }

.has-actions .actions { opacity:0; transition: opacity 0.3s; }
.has-actions:hover .actions { opacity: 1; }




@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
  text-decoration: blink;
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 2.0s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-direction: alternate;
}

/* Icons in fields */
label.has-icon, label.has-icons, label.has-icon div { position: relative; }
label.has-icon ion-icon, label.has-icons ion-icon {
  position: absolute;
  top: 0;
  left: 20px;
  height: calc(100% - var(--spacing));
}
label.has-icons ion-icon:nth-of-type(2) {
    left: unset;
    right: 20px;
}
label.has-icon input {
  padding-left: 54px;
}
label.has-icons input {
  padding-left: 54px;
  padding-right: 54px;
}


/* Grids */
.grid.auto-content {grid-template-columns: auto max-content; }
.grid.sidebar {grid-template-columns: 350px auto; }
#featurerequests article.grid {grid-template-columns: 60px auto max-content; }
#projectlist.grid { grid-template-columns: auto max-content; }
#featureadd {grid-template-columns: auto max-content;}
.newfeaturestep {grid-template-columns: auto max-content minmax(auto,max-content) max-content auto}
.newfeaturestep {grid-template-columns: minmax(max-content,auto) minmax(auto,max-content) minmax(max-content,auto)}

.newfeaturestep .center {align-self: center;}
#featureadd label > :where(input, select, textarea), #featurerequests label > :where(input, select, textarea)  { margin-top: unset; }

.featurerequest:hover { background-color: #80808017; }
.featurerequest a.requesttitle:hover { text-decoration: underline; }

article.grid { 
  gap: 20px 20px;
  padding: 20px;
  margin-bottom: 10px;
} 



#featureadd { 
margin-top: calc(-1 *var(--spacing));
}
.newfeaturestep ion-icon { font-size: 48px; }

#continuefeatureadd {
  position: sticky;
  bottom: 0;
  background-color: var(--card-background-color);
box-shadow: 0px -8px 17px 0px var(--card-background-color);
}



#featurerequests .upvote {
/*  border: var(--border-width) solid var(--muted-color); */
}
.upvote { 
  min-width: 60px;

  color: var(--muted-color);
}

.large .upvote { min-width: 95px; }

footer {
  background-color: var(--muted-border-color);
  margin-top: 30px;
}

/*
@media only screen and (max-width: 960px) {
  .right { text-align: center; margin-bottom: 20px; }
}
*/


.avatar { border-radius:20% }
label[for=avatar] { position: relative; width:130px; margin: 0 auto; }
label[for=avatar] ion-icon {
position: absolute;
  bottom: -8px;
  left: 100px;
  background: #11191f;
    background-color: rgb(17, 25, 31);
  padding: 7px;
  border-radius: 50%;
  --background-color: var(--form-element-background-color);
  --border-color: var(--form-element-border-color);
  --color: var(--form-element-color);
  --box-shadow: none;
  border: var(--border-width) solid var(--border-color);
  outline: 0;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
  transition: background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition);
}

.sidebar h2 { margin-bottom: var(--nav-element-spacing-vertical); }
.sidebar a[role=button] {
  display: grid;
  grid-template-columns: auto 32px;
  margin-bottom: var(--nav-element-spacing-vertical);
}
@media only screen and (max-width: 960px) {
  .sidebar { display: block; }
  }