/*
Logo fonts
*/

@font-face {
  font-family:'NasaFont';
  src:url('../logos/nasa.otf') format('opentype');
}
@font-face {
  font-family:'BassproFont';
  src:url('../logos/basspro.ttf') format('truetype');
}
@font-face {
  font-family:'IkeaFont';
  src:url('../logos/ikea.ttf') format('truetype');
}
@font-face {
  font-family:'BkFont';
  src:url('../logos/bk.ttf') format('truetype');
}
@font-face {
  font-family:'AdidasFont';
  src:url('../logos/adidas.otf') format('opentype');
}
@font-face {
  font-family:'ToysterFont';
  src:url('Toyster.otf') format('opentype');
}

/*
Page & header
*/

html, body {
  height:100%;
	margin: 0;
	background-color: white;
  user-select: none;
  font-family:Verdana, sans-serif;
  font-size:1.6vh;
}
.header {
  position:relative;
  height:80px;
  padding:10px 0;
  background-color:black;
}
.header .logo {
  margin:0 10px;
  height:60px;
  vertical-align:bottom;
  display:inline-block;
}
.header .text {
  font-family: ToysterFont;
  font-size: 50px;
  display: inline-block;
  line-height: 60px;
  color: white;
  -webkit-text-stroke-width: 2.5px;
  -webkit-text-stroke-color: black;
  letter-spacing: 2px;
  text-shadow: 3px 3px white;
}
.header button {
  float:right;
  font-size:20px;
  margin-top:8px;
  margin-left:10px;
}
.header button i {
  margin-left:5px;
}
.page {
  height:100%;
}
.page-content {
  height:calc(100% - 80px);
  overflow:hidden;
}

/*
Side bar
*/

.sidebar {
  position:relative;
  box-shadow:0px 0 5px -2px;
  transition: flex-basis 0.3s ease-out;
  overflow:hidden;
}
.sidebar-container {
  height:100%;
}

.bar-content {
    overflow-y:scroll;
}
.action-container {
    flex-basis:10px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:2vh 2vh;
    background:black;
}
.button {
  background-color:#eee;
  color:black;
  margin:1vh 0;
  padding:10px;
  border-radius:100px;
  cursor:pointer;
  text-align:center;
}
.button:hover {
  background-color:#fff;
}
.button span {
  width:1.6vh;
  height:1.6vh;
  background-size:cover;
  display:inline-block;
  margin-right:12px;
}
span.auto {
  background-image:url(magic.svg);
}
span.upload {
  background-image:url(file-earmark-arrow-down-fill.svg);
}

.accordion img {
    padding:4px;
    margin:2px;
    width:calc(33% - 8px);
    border:1px solid transparent;
    cursor:pointer;
}
.accordion img:hover {
    border:1px solid #aaa;
}
.accordion img.selected {
    border:1px solid black;
}
textarea {
  font-size:5vh !important;
}
input {
  font-size:5vh !important;
}

/*
Logo view
*/

.logo-view {
  position:relative;
  overflow:hidden;
  height:100%;
  flex:1;
  background-color:#eee;
}
.logo-view canvas {
  width:100% !important;
  height:100% !important;
  cursor:grab;
}