/* @font-face{
  font-family: "ShareTech";
  src: url("ShareTech-Regular.ttf");
}

@font-face{
  font-family: "ShareTechMono";
  src: url("ShareTechMono-Regular.ttf")
} */

body{
  font-family: 'Inter', sans-serif;  
  font-size: 1.5em;
  text-align: justify;
  background: #F2F3EB;  
  /* overflow-y: hidden; */
  user-select: none;
  padding-top: 2em;
  padding-bottom: 2em;  
}

.preload *{
  animation-duration: 0s !important;
  -webkit-animation-duration: 0s !important;
  transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}

.disabled{
  pointer-events: none;
  opacity: 0.5;
}

a{
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

a:hover{
  text-decoration:underline;
}

.download-link{
  font-weight: inherit;
  font-family: 'Share Tech', sans-serif;
}

li{
  text-align: left;
}

h1, h2, h3, h4, h5{
  font-family: 'Share Tech', sans-serif;
}

hr{
  border: solid 0.5px #474544;
  opacity: 50%;
  margin: 1em;
  z-index: -1;
}

button, select, .button {
  text-transform: none;
}

button, input, select, textarea, .button {
  color: #5A5A5A;
  font: inherit;
  margin: 0;
}

input {
  line-height: normal;
}

textarea {
  overflow: auto;
}

input[type='text'], [type='email'], [type='number'], select, textarea {
  background: none;
  border: none;
  border-bottom: solid 2px #474544;
  border-radius: 0;
  color: #474544;
  font-size: 1.000em;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0em 0 0.5em 0;
  padding: 0 0 0 0;
  /* text-transform: uppercase; */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

input[type='number']{
  width: 8ch;
  text-align: center;
}

input[type='checkbox']{
  appearance: none;
  background-color: #ddded7;
  margin: 0.5em;
  font: inherit;
  /* color: #474544; */
  width: 1em;
  height: 1em;
  border: none;
  border-bottom: solid 2px #474544;
  /* transform: translateY(0.15em); */
  display: inline-grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  opacity: 0;
  transition: 0.25s ease-in-out;
  box-shadow: inset 1em 1em #474544;
  /* Windows High Contrast Mode */
  background-color: CanvasText;
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)
}

input[type="checkbox"]:checked::before {
  opacity: 1;
}

select {
  background: url('down.svg') no-repeat right;
  font-family: 'Share Tech', sans-serif;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 10px;
  padding-right: 32px;
  text-transform: lowercase;
}

select::-ms-expand {
  display: none;
}

textarea{
  background: #ddded7;
  font-family: "ShareTechMono","Courier New";
}

table{
  margin: auto;
  width: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

td, th{
  padding: 5px;
  vertical-align: top;
  /* margin-left: 0.3em;
  margin-right: 0.3em; */
  border-left: 0.5em;
  border-right: 0.5em;
  border-style: solid;
  border-color: #ddded7;
  transition: all 0.3s;
}

input[type='text'].invalid{
  border-bottom: solid 2px #cc6d3d;
}

label{
  font-family: 'Share Tech', sans-serif;
}

#main-wrapper{
  width: 80%; max-width: 900px; margin: auto;
}

.selected{
  background-color: #474544;
  color: #F2F3EB;
}

input[type='text'].selected{
  border-bottom: solid 2px #F2F3EB;
  color: #F2F3EB;
}

.hidden{
  display: none;
  visibility: hidden;
  opacity: 0;
}

.numCol, .addCol{
  width: 50px;
}

.colHeader{
  transform: translateY(0.3em);
}

button, .button {
  overflow: visible;
  font-family: 'Share Tech', sans-serif;  
  background: none;
  border: solid 2px #474544;
  color: #474544;
  cursor: pointer;
  display: inline-block;
  outline: none;
  padding: 10px 35px;
  /* text-transform: uppercase; */
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

button:hover, .button:hover {
  background: #474544;
  color: #F2F3EB;
  text-decoration: none;
}

button:disabled, button:disabled:hover{
  color: #DEDED7;
  border: solid 2px #DEDED7;
  background: none;
}

label{
  text-transform: lowercase;
  padding-right: 0.5em;
}

.inputCell{
  width: 100%;
  display: inline-block;
  margin: auto;
  text-overflow: ellipsis;
}

.rowNumber{
  width: 50%;
  margin-bottom: -50%;
}

.colName{
  max-width: calc(100% - 2em);
  display: inline-block;
  padding: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: middle;
  /* enable the following if later it should be possible to click on the column name */
  /* position: relative; */
  /* z-index: 999; */
}

.unused{
  opacity: 0.5;
}

.miniBtn{
  padding: 0;
  margin: 0;
  border: none;
  position: relative;
  font-size: 0.9em;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: 0.3s;
  opacity: inherit;
  z-index: 999;
}

.addAbove, .removeRow{
  float: right;
  width: 30%;
}

.addBefore, .removeCol{
  display: inline-block;
  opacity: 0;
  transition: 0.3s;
}

.miniBtn:hover{
  background: none;
  color: inherit;
}

.miniBtn:hover{
  transform: scale(2,2);
}

.miniBtn:active{
  opacity: 0.5;
}

.swapBtn{
  /* font-size: 1em; */
  display: block;
  position: relative;
  /* color: #5A5A5A; */
  z-index: 999;
  float: left;
  margin-top: 0.5em;
  margin-left: -1.5em;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Fire */
}

.swapBtn:active{
  transform: scale(-2,2);
}

.swapIcon{
  height: 16px;
  width: 16px;
}

.rowControls{
  opacity: 0;
  transition: 0.3s;
  margin-bottom: -0.25em;
}

.selectAreaCol, .selectAreaRow{
  position: relative;
  padding: 3px;
  z-index: 1;
  transition: 0.3s;
  background-color: #474544;
  opacity: 0;
  float: left;
}

.selectAreaCol.selected, .selectAreaRow.selected{
  opacity: 0.05;
}

.selectAreaCol{
  margin-left: -2.5px; /* to compensate padding */
  margin-top: -1.5em;
  height: 100%;
  width: 100%;
}

.selectAreaRow{
  margin-top: -2.25em;
  height: 2em;
  width: 100%;
}

.selectAreaCol:hover, .selectAreaRow:hover{
  /* background-color: #474544; */
  opacity: 0.1;
}

.arrow {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
}

.arrow.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arrow.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.arrow.up {
  transform: translateY(2px) rotate(-135deg);
  -webkit-transform:  translateY(2px) rotate(-135deg);
}

.arrow.down {
  transform: translateY(-2px) rotate(45deg);
  -webkit-transform: translateY(-2px) rotate(45deg);
}

.infoContainer{
  position: relative;
  display: inline-block;
  transform: translateY(-0.1em)
}

.infoIcon{
  margin-left: 2px;
  border-radius: 50%;
  width: 0.8em;
  height: 0.8em;
  font-size: 0.8em;
  line-height: 0.7em;
  color: #F2F3EB;
  background-color: #474544;
  border: solid 1px #474544;
  text-align: center;
}

.infoBox{
  visibility: hidden;
  position: absolute;
  /* bottom: 100%; */ /* set inline */
  width: max-content;
  max-width: 300px;
  max-height: 200px;
  padding: 2px;
  margin: 1px;
  font-size: 0.9em;
  overflow: scroll;
  color: #F2F3EB;
  background-color: #474544;
  border: solid 2px #474544;
  transition: visibility 0.5s, opacity 0.5s;
  opacity: 0;
  z-index: 99;
  text-transform: none;
}

.infoContainer:hover .infoBox{
  visibility: visible;
  opacity: 1;  
}

.small{
  font-size: medium;
}

#hex-logo{
  width: 80px;
  height: 80px;
  margin: auto;
  float: left;
}

#topArea{
  width: 90%;
  margin: auto;
  height: 80px;
}

#nav{
  text-align: center;
}

#buttons{
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);  
}

#buttons.leftAlign{
  margin-left: 90px;
  text-align: left;
}

#inputBox{
  display: inline-block;
  position: relative;
  box-sizing: border-box; /* to stop padding adding width */
  border: none;
  border-bottom: solid 2px #474544;
  color: #474544;
  background: #ddded7;
  font-family: "ShareTechMono","Courier New";
  clear: both;
  height: calc(100% - 250px);
  min-height: 100px;
  width: 90%;
  transition: 0.5s;
  margin: 0em 0 0.875em 0;
  padding: 0 0 0.875em 0;
  overflow: scroll;
}


#controlsEtc{
  height: 200px;
  overflow: visible;
}

/* #previewTitle{
  visibility: hidden;
}

#previewArea{
  border: solid 2px #474544;
  width: 80%;
  margin: auto;
  visibility: hidden;
} */

#settingsTitle{
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#categoryPicker{
  background-color: #ddded7;
  float: left;
  font-size: 1.25em;
  font-weight: 600;
  margin-bottom: 1em;
}

#advancedExport{
  display: none;
  position: relative;  
}
/* see more in toggle-switch.css */

#packageIDWrapper{
  position: relative;
  display: inline-block;
}

.setting{
  width: 100%;
  -webkit-column-break-inside: avoid;
}

.hiddenLeft {
  animation: shrinkToLeft 500ms;
  opacity: 0;
  pointer-events: none;
}

.expandedLeft {
  animation: expandFromLeft 500ms;
  opacity: 1;
  pointer-events: auto;
}

@keyframes expandFromLeft {
  from {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes shrinkToLeft {
  from {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
  to {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }
}


.showSettingsButton{
  display: inline-block;
  vertical-align: middle;
  /* height: 24px; */
  transition: 0.5s;
  margin: 0.25em;
}

.settingsArea{
  border: none;
  box-sizing: border-box; /* to stop padding adding width */
  border-bottom: solid 2px #474544;
  width: 90%;
  margin: auto;
  height: 0;
  background: #E8E9E1;
  clear: both;
  transition: height 0.5s;
  overflow-y: scroll;
  overflow-x: visible;
  z-index: 1;
}

.openSettings{
  height: 220px;
  /* padding: 20px; */
  transition: height 0.5s;
}

.settingsAreaInner{
  padding: 20px;
  /* text-align: left; */  
}

.exampleBtn{
  margin-bottom: 20px;
}

#generateBtn{
  border: 0;
  padding: 0;
  transition: 0.1s  ease-in-out;
}

#generateBtn:hover{
  background: transparent;  
}

#generateBtn:hover #generateIcn{
  transform: rotate(270deg);
}

#generateBtn:active{
  transform: scale(0.75);
}

#generateIcn{
  fill: #474544;
  height: 19px;
  width: 19px;
  transition: 0.5s ease-in-out;
}