* {
    box-sizing: border-box;
  }

body {
    color: #bbb;
    background-color: #222;
    margin: 0px;
    font-family: ubuntu, sans-serif;
}

a {
  color: #fff;
  text-decoration: none;
  /* font-weight: bold; */
}

.toolbar {
  padding: 4px;
}
#tools {
  /* border-bottom: 1px solid #666; */
}

#files {
    float: left;
}

#editor {
    float: right;
}

#mdHtml {
  background-color: #333;
  padding-left: 0.5em;
}

/* file list */

ul.fileList {
  padding-left: 0px;
  margin-left: 0.8em;
}
ul.fileList li {
  list-style: none;
}

li.link {
  cursor: pointer;
}
li.link:hover {
  background-color: #333;
}

li.file, li.dir {
  position: relative;
  padding-top: .2em;
}
li.dir {
  margin-top: .3em;
}

.breadcrumb {
  margin-left: .3em;
  cursor: pointer;
}
.dirLabel {
  background-color: #880;
  border-radius: .3em;
  padding: 0 .3em;
  color: white;
}
.fileLabel {
  margin-left: 1em;
}
.fileIcon::before {
  content: ' ';
  position: absolute;
}
.fileIcon::before, .addFile {
  background-color: #0f6892;
  top: .2em;
  min-width: .8em;
  min-height: 1em;
}
.addFile {
  border: 1px solid #008c8c;
}
.addDir {
  border: 1px solid #adad00;
  background-color: #880;
  border-radius: .3em;
}
span.addFile, span.addDir {
  padding: 0 .3em;
}


.shownOnHover {
  opacity: 0.2;
}

/* messages */

.message {
  background-color: #bb3;
  padding: .5em;
  color: #220;
  border: 1px solid #ee8;
}

/* inputs */

div#login {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  background-color: #210101aa;
  z-index: -100;
}

input {
  background-color: #bbb;
  border: none;
  color: #333;
  padding: .3em;
  font-size: 1.3em;
}

input[type=submit] {
  background-color: #8c8;
  border-radius: 2px;
}

input[type=button] {
  background-color: #88c;
}

/* responsive design */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.full {width: 100%;}

.col-dummy {height: 0.1px;}

[class*="col-"] {
    float: left;
    /* padding: 15px; */
    /* border: 1px solid red; */
  }

  .row::after {
    content: "";
    clear: both;
    display: table;
  }

  @media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
      width: 100%;
    }
  }

.right {
  text-align: right;
}