@font-face {
  font-family: 'emptyfont1F500';
  src: url("https://unicode-table.com/fonts/empty/1F500.eot");
  src: url("https://unicode-table.com/fonts/empty/1F500.eot?#iefix") format('embedded-opentype'),
  url("https://unicode-table.com/fonts/empty/1F500.woff2") format('woff2'),
  url("https://unicode-table.com/fonts/empty/1F500.woff") format('woff'),
  url("https://unicode-table.com/fonts/empty/1F500.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  background: #000;
  color: #fff;
  padding: 0;
  margin: 0;
}
header {
  line-height: 80px;
  background-color: #222222;
  color: #fff;
  padding: 0 40px;
  display: flex;
  flex-direction: row;
}
header h1 {
  padding:0;
  margin:0;
  font-weight: 100;
  line-height: 80px;
  font-size: 24px;
  float: left;
  width: 75%;
}
header a {
  width: 25%;
  float: left;
  text-align: right;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
}
article {
  padding: 20px 20px 40px 20px;
}
iframe {
  border-radius: 20px;
  margin: 0px auto 10px auto;
  border: 1px solid #333;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  height: 480px;
}
footer {
  background-color: #222222;
  color: #fff;
  padding: 40px;
  font-size: 18px
}
footer div {
  margin: 0px auto;
  max-width: 960px;
  width: 100%;
}
header a, footer a { color: #ff3158;}
iframe {
  margin-bottom: 10px;
  border: 1px solid #333;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5)
}

footer h2 {
  font-size: 24px
}

.showcase_container{
  align-self: center;
}

.showcase_overlay {
  position: absolute;
  left: auto; right: auto; top: 0; bottom: 0;
  width: 100%;
  height: 480px;
  opacity: 0;
  -moz-opacity: 0;
  filter: alpha(opacity=0);
  display: none;
}

#app button {
  line-height: 40px;
  padding: 0 40px;
  width: 100%;
  display: block;
  cursor: pointer;
  margin: 15px 15px 0px 15px;
  border-radius: 10px;
  padding: 10px 20px;
  background-color:  #353535;
  text-decoration: none;
  border: none;
  color: #eee;
  font-size: 13pt;
  line-height: 40px;
  transition: background-color 0.25s, color 0.25s;
}
#app button:hover {
  background-color: #ff3158;
  cursor: pointer;
  color: rgb(19, 19, 19);  
}
.sid_selector{
  width: 100%;
  height: 25px;
  font-size: 14pt;
  left: auto;
  right: auto;
  align-self: center;
  margin: 5px;
}

/* tag stuff */
.scrollable {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  flex: 0 0 auto;
  margin-top: 15px;
  box-shadow: 0 4px 8px rgb(43, 43, 43, 0.5);
}
.scrollable tbody{
  overflow-y: scroll;
  height: 500px;
  width: 100%;
}
.scrollable thead th{
  padding: 5px;
}
.scrollable thead{
  border: 1px solid #353535;
  background-color: #353535;
  width: 100%;
  color: #eee;
}
.scrollable, .scrollable td{
  border: 1px solid  #353535;
}
.scrollable input{
  background-color: #353535;
  padding: 5px;
  color: #eee;
}
.scrollable td, .scrollable input{
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
}
.scrollable tbody tr:hover{
  background-color: #222222;
  cursor: pointer;
}
.scrollable input, .scrollable textarea {
  width: 90%;
  height: 100%;
  padding: 5px;
  background-color: #eee;
  color: black;
  font: consolas, courier 10px;
  line-height: 1.5em;
}
.scrollable textarea {
  height: 200px;
}
.scrollable td.actions { white-space: nowrap }
.scrollable td.actions span { width: 40px; height: 40px; margin: 0 8px; }
.scrollable td.image { width: 80px; overflow: hidden; font-size: 8px; }

.label {
  width: 35%;
}
.color, .delete, .goto, .update {
  width: 20px;
  height: 20px;
  text-align: center;
}
.color div{
  width: 13px;
  height: 13px;
  margin-left: auto;
  margin-right: auto;
}
.color input{
  width: 100px;
  height: 10px;
}

.delete:hover{
  cursor: pointer;
}

.delete:after{
  display: inline-block;
  content: "\00d7";
  font-size: 16pt;
  color: rgb(161, 0, 0);
}
.goto:after {
  display: inline-block;
  content: "\2197";
  font-size: 16pt;
  color: rgb(0, 0, 161);
  text-align: center;
}
.update:after {
  display: inline-block;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 2C0 .9.9 0 2 0h14l4 4v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5 0v6h10V2H5zm6 1h3v4h-3V3z'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  font-size: 16pt;
  color: rgb(17, 161, 0);
  text-align: center;
}

/* Buttons */

.color_picker {
  color: red;
  min-width: min-content;
  min-height: min-content;
}