.basic-cardflow-1 {
  --taskflow-width: 100%;
  --taskflow-height: 100%;
  --cardslot-width: 221px;
  --cardslot-width-active: 294px;
  --cardslot-horiz-margin: 0.25rem;
  --cardslot-horiz-margin-active: -1.5rem;
  --accent-color: #6495ED;
  --text-color: #fff;
  --muted-color: #ccc;
  --background-color: #040404;
  --link-color: #98F5FF;
  --header-foreground: var(--text-color);
  --header-background: #999;
  --footer-foreground: var(--text-color);
  --footer-background: var(--accent-color);
  --card-foreground: var(--muted-color);
  --card-background: #222;
  --card-border: #999;
  --card-foreground-active: var(--text-color);
  --card-background-active: #444;
  --card-border-active: var(--link-color);
  --card-icon-size: 6rem;
  --card-icon-margin-bottom: 1rem;
}

.a4dn-taskflow {
  width: var(--taskflow-width);
  height: var(--taskflow-height);
  background-color: var(--background-color);
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}

.a4dn-taskflow-controls {
  color: var(--accent-color);
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  padding: 2px;
}

.a4dn-taskflow-voiceinput {
  width: 33%;
  flex: 1 1 auto;
}

.a4dn-taskflow-nav__up {
  width: 33%;
  flex: 1 1 auto;
  text-align: center;
}
.a4dn-taskflow-nav__up > a {
	display: none;
}
.a4dn-taskflow-nav__up.a4dn-active > a {
	display: block;
}
.a4dn-taskflow-nav__up .a4dn-arrow {
	width: 0;
	height: 0;
	border-left: 2rem solid transparent;
	border-right: 2rem solid transparent;
	border-bottom: 1rem solid var(--link-color);
	position: relative;
	top: -1.5rem;
}

.a4dn-taskflow-mockicons {
  width: 33%;
  flex: 1 1 auto;
  text-align: right;
}

.a4dn-taskflow-controls a {
  color: var(--link-color);
  text-decoration: none;
}

.a4dn-taskflow-header {
  color: var(--header-foreground);
  font-size: 1.25rem;
  text-align: center;
  padding: 2px 0.5rem;
  height: 2.25rem;
}
.a4dn-taskflow-header .a4dn-active {
  background-color: var(--header-background);
}
.a4dn-taskflow-header .a4dn-active:empty {
  background-color: transparent;
}

.a4dn-taskflow-footer {
  color: var(--footer-foreground);
  font-size: 1.25rem;
  text-align: left;
  padding: 2px 0.5rem;
  height: 2.25rem;
}
.a4dn-taskflow-footer .a4dn-active {
  background-color: var(--footer-background);
}
.a4dn-taskflow-footer .a4dn-active:empty {
  background-color: transparent;
}

.a4dn-taskflow-cardcontainer {
  flex: 1 0 auto;
  position: relative;
  box-sizing: border-box;
  width: 10000px;
  display: flex;
  flex-flow: row;
  left: var(--cardslot-width);  /* Adjusted dynamically to center active card */
  transition: left 0.2s ease-in-out;
}
.a4dn-taskflow-cardslot {
  color: var(--card-foreground);
  background-color: var(--card-background);
  margin: 1.5rem var(--cardslot-horiz-margin);
  width: var(--cardslot-width);
  box-sizing: border-box;
  padding: 1rem;
  border-bottom: 0.25rem solid var(--card-border);
  position: relative;
}

.a4dn-taskflow-cardslot.a4dn-active {
  color: var(--card-foreground-active);
  background-color: var(--card-background-active);
  width: var(--cardslot-width-active);
  border-bottom-color: var(--card-border-active);
  margin: 0.5rem var(--cardslot-horiz-margin-active) 1rem var(--cardslot-horiz-margin-active);
  border-bottom-color: var(--card-border-active);
  border-bottom-width: 0.5rem;
  z-index: 10;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

.a4dn-taskflow-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.a4dn-taskflow-nav__down {
  display: none;
  width: 100%;
  height: 2.5rem;
  position: absolute;
  bottom: -1.2rem;
  text-align: center;		/* Center downarrow */
}
.a4dn-active .a4dn-taskflow-nav__down {
  display: block;
}
.a4dn-taskflow-nav__down .a4dn-arrow {
  /*content: "";*/
  position: relative;
  bottom: -2.4rem;			/* Move arrow relative position to below border */
  width: 0;
  height: 0;
  border-left: 0.7rem solid transparent;
  border-right: 0.7rem solid transparent;
  border-top: 0.7rem solid var(--link-color);
}

.a4dn-taskflow-cardslot__empty {
  visibility: hidden;
}
.a4dn-taskflow-cardslot__empty .a4dn-taskflow-card { 
  visibility: hidden;
}

.a4dn-taskflow-icon {
	font-size: var(--card-icon-size);
	margin-bottom: var(--card-icon-margin-bottom);
}

.a4dn-taskflow-voiceinput > .btn {
    margin: 0;
    padding: 0;
    min-width: 0;
    text-transform: none;
    font-size: unset;
    background-color: transparent;
}
.a4dn-taskflow-voiceinput > .btn:hover,
.a4dn-taskflow-voiceinput > .btn:focus {
    color: unset;
}

.a4dn-taskflow-command {
    cursor: pointer;
}

/* Rotating Headers and Footers */

.a4dn-rotate {
  display: flex;
  flex-flow: row;
}

.a4dn-rotate > * {
  width: 100%;
}

.a4dn-rotate-hidden {
  display: none;
}