#root {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);  /* issue#592 */
}

body {
  margin: 0px;
  background-color: #FFFFFF;
}

body::-webkit-scrollbar, div::-webkit-scrollbar {
  width: 3px;
  height: 0px;
}

::-webkit-scrollbar-track {
  background: #ff000000;
}

::-webkit-scrollbar-thumb {
  background: #88888855;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
/*
* Styles for the splashscreen and image splashscreen with a fade in animation;
*/

#splashscreen {
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: white;
  background-color: #FFFFFF;
  top: 0;
  left: 0;
}


.imageSplashScreen {
  display: block;
  margin: auto;
  max-width: 200px;
  animation: fadeIn 1s;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

/*
Set default styling for custom text inputs

usage:
<div
  contentEditable=true
  data-placeholder="Edit me"
  data-placholder-color="#aaa"
  ...
*/
div[contentEditable="true"]:empty:before {
  content: attr(data-placeholder);
}