/* windows hackery to avoid horrible font rendering */
html body div {
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: subpixel-rendering !important;
}

@font-face {
  font-family: "Aleo-Light";
  src: url("./fonts/Aleo/Light/aleo-light-webfont.woff") format("woff"), url("./fonts/Aleo/Light/aleo-light-webfont.eot") format("eot");
}

@font-face {
  font-family: "Aleo-Regular";
  src: url("./fonts/Aleo/Regular/aleo-regular-webfont.woff") format("woff"), url("./fonts/Aleo/Regular/aleo-regular-webfont.eot") format("eot");
}

@font-face {
  font-family: "CooperHewitt-Bold";
  src: url("./fonts/CooperHewitt/CooperHewitt-Bold.woff") format("woff"), url("./fonts/CooperHewitt/CooperHewitt-Bold.eot") format("eot");
}

@font-face {
  font-family: "CooperHewitt-BoldItalic";
  src: url("./fonts/CooperHewitt/CooperHewitt-BoldItalic.woff") format("woff"), url("./fonts/CooperHewitt/CooperHewitt-BoldItalic.eot") format("eot");
}

@font-face {
  font-family: "CooperHewitt-Medium";
  src: url("./fonts/CooperHewitt/CooperHewitt-Medium.woff") format("woff"), url("./fonts/CooperHewitt/CooperHewitt-Medium.eot") format("eot");
}

@font-face {
  font-family: "CooperHewitt-MediumItalic";
  src: url("./fonts/CooperHewitt/CooperHewitt-MediumItalic.woff") format("woff"), url("./fonts/CooperHewitt/CooperHewitt-MediumItalic.eot") format("eot");
}

@font-face {
  font-family: "CooperHewitt-Light";
  src: url("./fonts/CooperHewitt/CooperHewitt-Light.woff") format("woff"), url("./fonts/CooperHewitt/CooperHewitt-Light.eot") format("eot");
}

@font-face {
  font-family: "CooperHewitt-LightItalic";
  src: url("./fonts/CooperHewitt/CooperHewitt-LightItalic.woff") format("woff"), url("./fonts/CooperHewitt/CooperHewitt-LightItalic.eot") format("eot");
}

@font-face {
  font-family: "CooperHewitt-Book";
  src: url("./fonts/CooperHewitt/CooperHewitt-Book.woff") format("woff"), url("./fonts/CooperHewitt/CooperHewitt-Book.eot") format("eot");
}

html, body, div, p, h1, h2, h3, h4, h5 {
  display: flex;
  box-sizing: border-box;
  /* <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>  */
  flex: 0 1 auto;
}

html {
   height: 100%;
   width: 100%;
   overflow: hidden;
   -webkit-user-select: none;
}

body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  font-size: 16px;
  font-family: 'Aleo';
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: rgb(43,43,51);
  cursor: default;
  display: flex;
  flex-direction: row;
}

::-webkit-input-placeholder {
  color: rgba(43, 43, 51, 0.5);
  font-style: italic;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: none;
}

::-webkit-scrollbar-thumb {
    background: rgb(56,69,79);
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(43,43,51);
}

::selection {
  background: white;
  color: black;
}

.clickable {
  opacity: 0.8;
  cursor: pointer;
}

.clickable:hover {
  opacity: 0.99;
}

/* datasource loading spinner */

.spinner {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
