.button{
  border: 1px solid var(--text-color);
  background-color: var(--text-color);
  color:var(--highlight-color);
  cursor:pointer;
  font-size: var(--main-font-size-h4);
  margin-bottom:var(--space-0-8);
  display:inline-block;
  text-align: center;
  padding:6px;
  transition: background-color 0s ease;
  -webkit-transition: background-color 0s linear;
  box-shadow: 0px 4px 8px rgba(160, 160, 160, 0.2);

  border-radius: 2px;
  transition: border-radius 0.2s ease;
  transition: background-color 0.2s ease;
  transition: box-shadow 0.2s;
}


.button:hover{
  transition: box-shadow 0.2s;
  box-shadow:  0px 4px 6px rgba(160, 160, 160, 1);

}
.button:active{
  border-radius: 4px;
  background-color: var(--text-color);
    box-shadow: inset 0px 0px 12px rgba(200, 200, 200, 0.4);
}
.buttonSelected{
  padding:6px;
  border: 1px solid var(--text-color);
  cursor:pointer;
  font-size: var(--main-font-size-h4);
  margin-bottom:1rem;
  display:inline-block;
  margin-top:-1px;
  background-color: #181818;
  color: var(--main-color);
}

/*----------------------------------------------------------------------------*/
.longB{
  position:relative;
  width:calc(100% );
  /*margin-left:15%;
  margin-right:15%; */
  padding:0px;
  padding-top:6px;
  padding-bottom:6px;
}
.smallB{
  position:relative;
  width:calc(40% );
  padding-top:6px;
  padding-bottom:6px;
}

.twobutton{
  display:flex;
  position:relative;
  width:100%;
  flex-direction: row;
  justify-content: space-between;
}
/*----------------------------------------------------------------------------*/

.buttonSecondary{
  border: 1px solid var(--text-color);
  background-color: var(--highlight-color);
  color: var(--text-color);
  cursor:pointer;
  font-size: var(--main-font-size-h4);
  margin-bottom:var(--space-0-8);
  display:inline-block;
  text-align: center;
  padding:6px;
  transition: background-color 0s ease;
  -webkit-transition: background-color 0s linear;
    box-shadow: 0px 4px 8px rgba(160, 160, 160, 0.2);
  transition: box-shadow 0.1s ease;

  border-radius: 2px;
  transition: border-radius 0.2s ease;
  transition: background-color 0.2s ease;
}


.buttonSecondary:hover{
  background-color: white;
  box-shadow:  0px 4px 8px rgba(160, 160, 160, 0.6);
}

/*----------------------------------------------------------------------------*/

.buttonIcon{
  border: 0.5px solid rgba(90, 90, 90, 0.4);
  background-color: var(--highlight-color);
  color: rgba(50, 50, 50, 1);
  cursor:pointer;
  font-size: var(--main-font-size-h4);
  margin-bottom:var(--space-0-8);
  display:inline-block;
  text-align: left;
  padding:6px;

  transition: background-color 0s ease;
  -webkit-transition: background-color 0s linear;
    box-shadow: 0px 2px 3px rgba(160, 160, 160, 0.2);
  transition: box-shadow 0.1s ease;

  border-radius: 2px;
  transition: border-radius 0.2s ease;
  transition: background-color 0.2s ease;

  max-width:184px;
  max-height: 18px;

  display:flex;
  flex-direction: row;
  align-items: center;
}


.buttonIcon:hover{
  background-color: #F2F2F2;
  background-color: white;
  box-shadow:  0px 3px 4px rgba(160, 160, 160, 0.5);
  border: 1px solid var(--text-color);
  color:var(--text-color);
}

.buttonIcon:hover svg path{
  fill: var(--text-color);
}
.buttonIcon svg{
  margin-left:0.6rem;
  margin-right:1rem;
  fill: var(--text-color);
  fill:rgba(90, 90, 90, 1);
}

.buttonIcon svg path{
  fill: var(--text-color);
  fill:rgba(90, 90, 90, 1);
}

/*----------------------------------------------------------------------------*/

.buttonThird{
  cursor:pointer;
  text-decoration: underline;
}
.buttonThird:hover{
  text-decoration: underline;
}


.buttonBar{
  cursor:pointer;
}


.contlab{
  height:auto;
}
.contlab:hover .label{
    display:block;
}
/*----------------------------------------------------------------------------*/


.buttonSequence{
  display:flex;
  flex-direction: row;
  border: 1px solid var(--text-color-semi);
  justify-content: space-between;
  margin-bottom:var(--space-1);
  position:relative;
  width:100%;
}

.buttonSequence > * {
    flex: 1;
    min-width: 0;
}

.buttonSequence > *:first-child {
    margin-left:0;
}

.buttonSeqInd{
  text-align: center;
  width:auto;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  transition: background-color 0.2s;
  -webkit-transition: background-color 0.2s;
  font-weight: 500;
  color:var(--text-color-semi);
}
.buttonSeqInd:hover{
  color:var(--highlight-color);
  cursor:pointer;
  background-color: var(--text-color-faded);
}

.BSS{
  color:var(--highlight-color);
  background-color: var(--text-color-semi);
  box-shadow:  inset 0 0 6px rgba(40,40,40,0.3); */
}
/*----------------------------------------------------------------------------*/


.sidebarArrow{
  position:absolute;
  right:-1.5rem;
  width:auto;
  height:4rem;
  background-color: var(--main-color) ;
  display:flex;
  align-items: center;
  top:calc(50vh - var(--space-4));
  cursor: pointer;
  opacity:0.3;
}
.sidebarArrow svg{
  fill: var(--text-color-faded);
}
.sidebarArrow:hover{
  opacity:1;
}
.sidebarArrow:hover svg{
  fill: var(--text-color);
}
/*-----------------------------------------------------------------------------*/
.botbutton path{
  fill: var(--text-color-faded);
}

.botbutton:hover path{
 fill: var(--text-color);
}

.botbutton:hover path{
  fill: var(--text-color);
}
#titlesvg path{
  fill: var(--highlight-color);
}


.textbox div {
  display:flex;
  align-items: center;
  justify-content: center;
}
.textbox div svg{
  width:16px;
  height:16px;
  fill: var(--text-color-faded);
}

.textbox div svg:hover {
  fill: var(--text-color);
}

/*-------------------------------------------------------------------------- SPECIALS */

.buttonTextBoxCont{
  margin-top:var(--space-1);
}
.buttonExportBoxCont{
  margin-top:var(--space-1-4);
}
#tiletwoButton{
  margin-top:var(--space-2);
}
#filtersButton{
  margin-top:var(--space-2);
}