:root {
    --background-color: #2A2B2D;
    --primary-color: #D9514E;
    --secondary-color: #2DA8D8;
}

* {
    outline: none;
}

.bci_stimuli {
    display: inline-flex;
}


@keyframes contract  {
  from {width: 85%;}
  to {width: 15%;}
} 

@keyframes expand  {
  from {width: 15%;}
  to {width: 85%;}
} 
  
 .area {
    height: 100vh;
    width: 100%;
 }
  
.primary-area {
    background: var(--background-color);
    width: 85%;
}

.secondary-area {
    background: var(--background-color);
    width: 15%;
}

.contract  {
   animation-name: contract;
   animation-duration: 1s;
}

.expand  {
   animation-name: expand;
   animation-duration: 1s;
}



.cue {
    height: 50px;
    margin: 30px 10px;
    border: none;
    width: calc(100% - 20px);
    font-size: 25px;
    color: #e9e0d6;
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: 2px;
}


.secondary.show,
.cue.show {
  display: block;
}

.secondary.hide,
.cue.hide {
  display: none;
}


.cue.primary {
    background-color: var(--background-color);
    border: 1px solid  var(--primary-color);
}

.cue.secondary {
    background-color: var(--background-color);
    border: 1px solid  var(--secondary-color);
}


.cue.primary.blink,
.cue.primary:hover {
    background-color: var(--primary-color);
}

.cue.secondary.blink,
.cue.secondary:hover {
    background-color: var(--secondary-color);
}



.back-arrow {

position: absolute;
bottom: 0px;
margin: 10px;
width: 80px;
height: 80px;
border-radius: 50%;
font-size: 60px !important;
text-align: center;
padding-bottom: 75px;
line-height: 75px;

}


.categorical-area {
    display: inline-block;
    width: 100%;
}

.boolean-area,
.slider-area {
    display: inline-flex;
    width: 80%;
    padding-left: 10%;
}

.boolean-area {
    flex-wrap: wrap;
}

.boolean-row {
    display: inline-flex;
    flex-basis: 100%;
}

.slider-area  .cue.slider {
    font-family: monospace;
}

.gui-value {
    background-color: #2a2b2d;
    font-family: monospace;
    border: none;
    color: white;
    font-size: 200%;
    text-align: center;
    width: 100%;
}



