@font-face {
  font-family: 'Open Sans';
  src: url('fnts/Open Sans/OpenSans-Regular.ttf');
}
@font-face {
  font-family: 'Signature';
  src:  url('fnts/signature/Signature.otf'),
        url('fnts/signature/Signature.ttf');
}
body {
    font: 1em 'Helvetica', 'Arial', sans-serif;
    padding: 0;
    margin: 0;
    height: 100%;
}
html {
  height: 100%;
}
* {
  padding: 0px;
  margin: 0px;
}


p {
    margin-bottom: 20px;
}

.content {
    width: 800px;
    width: 70%;
    margin: 32px auto;
}

code {
    display: inline-block;
    background: #eee;
    color: #333;
    padding: 3px 5px;
    margin: 2px 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size:1.2em;
}

header {
  position: fixed;
  z-index: 20;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 40px;
  background: #446CB3;
  /*background: #F9BF3B;*/
  font-family: 'Libertinage';
  font-size: 24px;
  line-height: 35px;
  padding-left: 20px;
  color: whitesmoke;
}
#files {
  height: 100%;
  width: 250px;
  margin-top: 40px;
  padding-top: 10px;
  /*overflow: scroll;*/
}
#files h2 {
  color: #303030;
  font-weight: 300;
  font-size: 18px;
  text-align: center;
  padding: 5px 25px
}
#files input[type=text]{
  width: 90%;
  display: block;
  margin: 15px auto;
  padding-top: 10px;
  padding-bottom: 10px;
  border: none;
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  text-indent: 10px;
}
#files ul {
  list-style-type: none;
  margin: 0;
  margin-left: 15px;
  padding: 0;
  width: 235px;
  height: 100%;
}
#files .file, #files .dir {
  font-size: 12px;
  padding: 0px;
  text-indent: 0;
  width: 100%;
  word-wrap: break-word;
}
#files .file span, #files .dir span {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  width: calc(100% - (21px + 16px));
}
#files .file .icon, #files .dir .icon {
  width: 21px;
  margin: 5px auto;
  margin-right: 10px;
  vertical-align: middle;
}

#viewer {
  position: fixed;
  top: 45px;
  right: 5px;
  left: 260px;
  bottom: 0;
  border-left: solid 1px #C3C3C3;
}
#viewer iframe {
  width: 100%;
  height: 100%;
  border: none;
}

#context_menu {
  position: absolute;
  z-index: 10;
  width: 175px;
  height: 165px;
  background: #FFF;
  border: solid 1px #ddd;
  display: none;
  padding-top: 5px;
}
#context_menu.context_menu-active {
  display: block;
}

#context_menu ul {
  list-style-type: none;
}

#context_menu ul li {
  padding: 6px 15px;
  font-size: 14px;
  word-wrap: break-word;
  transition: all 300ms;
  color: #303030;
  cursor: pointer;
}
#context_menu ul li:hover {
  color: #446CB3;
}
.back {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.new_dir-back {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 300ms;
}
.new_dir-back.new_dir-active {
  pointer-events: auto;
  opacity: 1;
}
.new_dir {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 350px;
  height: 125px;
  border-radius: 4px;
  margin: auto;
  padding: 25px;
  background: #FFF;
  cursor: default;
}
.new_dir h2 {
  font-weight: 300;
  text-align: center;
  margin-bottom: 25px;
}
.dirnameInput {
  display: block;
  width: 325px;
  height: 33px;
  margin: auto;
  padding: 0px 10px;
}
.new_dir button {
  display: block;
  margin: 12px auto;
  transform: scale(1.2);
  padding: 4px;
}
.infos-back {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 300ms;
}
.infos-back.infos-active {
  pointer-events: auto;
  opacity: 1;
}
.infos {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 400px;
  height: 450px;
  margin: auto;
  background: #FFF;
  cursor: default;
}
.infos ul {
  list-style-type: none;
  padding: 25px;
}
.infos li {
  margin: 15px auto;
  font-weight: 300;
}
.infos li.filename {
  text-align: center;
  font-weight: 600;
  padding-bottom: 20px;
}
.infos li span{
  font-weight: 400;
}
.infos li img {
  display: block;
  margin: auto;
  margin-bottom: 25px;
}

.rename-back {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 300ms;
}
.rename-back.rename-active {
  pointer-events: auto;
  opacity: 1;
}
.rename {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 350px;
  height: 125px;
  border-radius: 4px;
  margin: auto;
  padding: 25px;
  background: #FFF;
  cursor: default;
}
.rename h2 {
  font-weight: 300;
  text-align: center;
  margin-bottom: 25px;
}
.renameInput {
  display: block;
  width: 325px;
  height: 33px;
  margin: auto;
  padding: 0px 10px;
}
.rename button {
  display: block;
  margin: 12px auto;
  transform: scale(1.2);
  padding: 4px;
}
.share-back {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 300ms;
}
.share-back.share-active {
  pointer-events: auto;
  opacity: 1;
}
.share {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 900px;
  height: 155px;
  border-radius: 4px;
  margin: auto;
  padding: 25px;
  background: whitesmoke;
  cursor: default;
  line-height: 52px;
  font-size: 14px;
}
.share label {
  display: inline-block;
  width: 100px;
  color: #303030;
}
.share span {
  border-bottom: solid 1px #446cb3;
  color: #446cb3;
  cursor: text;
}
.done {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 250px;
  height: 250px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  text-align: center;
  color: #FFF;
  font-weight: 300;
  opacity: 0;
  pointer-events: none;
  transition: all 300ms;
}
.done.active {
  pointer-events: auto;
  opacity: 1;
}
.done .message {
  opacity: 0;
  transition-delay: 300ms;
  transition-property: opacity;
  transition-duration: 300ms;
}
.done.active .message {
  opacity: 1;
}

.done .check{
  opacity: 0;
  fill:none;
  stroke:#FFF;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
  transition: 300ms;
}
.done.active .check{
  opacity: 1;
}

.done.active .check {
	stroke-dasharray: 60 200;
	animation: check 3s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.0s;
	opacity: 0;
}

@-webkit-keyframes check {
	0% {stroke-dashoffset: 60;
  opacity: 1;}

	80% {stroke-dashoffset: 293;
	opacity: 1;}
	100% {stroke-dashoffset: 293;
	opacity: 0;}
}

.done.active .smaller {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}
#files.upload_nav {
  height: calc(65vh - 40px);
  width: 100%;
  margin-top: 0px;
  padding-top: 60px;
  border-right: none;
  border-bottom: 1px solid #CCC;
  overflow: scroll;
}
#files.upload_nav ul {
  list-style-type: none;
  margin: 0;
  margin-left: 0;
  padding: 0;
  width: 100%;
  height: auto;
}
#files.upload_nav .file, #files.upload_nav .dir {
  display: inline-block;
  font-size: 12px;
  padding: 0px;
  text-indent: 0;
  width: 23vw;
  margin: 0.6vw;
  word-wrap: break-word;
}
#files.upload_nav .file {
  display: none;
  font-size: 12px;
  padding: 0px;
  text-indent: 0;
  width: 23vw;
  margin: 0.6vw;
  word-wrap: break-word;
}
#files.upload_nav .file span, #files.upload_nav .dir span {
  display: block;
  vertical-align: auto;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
#files.upload_nav .file .icon, #files.upload_nav .dir .icon {
  display: block;
  width: 15%;
  margin: 15px auto;
  margin-right: auto;
  vertical-align: auto;
}
#dropArea {
  display: inline-block;
  width: 30vw;
  height: calc(35vh - 21px);
  background-color: #446CB3;
  transition: all 300ms;
}
#dropArea.hover {
  background-color: #244C93;
  transition: all 300ms;
}
#dropArea.uploading {
  /*background: #244C93 url('/public/img/loaders/circle.gif') center 30% no-repeat;*/
}
#dropArea h2 {
  color: whitesmoke;
  font-weight: 300;
  font-size: 1.6em;
  text-align: center;
  /*line-height: calc(35vh - 21px);*/
  line-height: 50px;
}
#resultArea {
  display: inline-block;
  vertical-align: top;
  width: 70vw;
  height: calc(35vh - 21px);
  margin: auto -4px;
  overflow: scroll;
}
#resultArea h3 {
  font-weight: 300;
  font-size: 1.3em;
  text-align: center;
  color: #303030;
  margin-top: 12px;
}
.fileUploaded {
  padding: 12px 25px;
}
.fileUploaded p {
  display: inline-block;
  vertical-align: middle;
  margin-left: 13px;
}
#loader {
  background: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: all 300ms;
}
#loader.active {
  opacity: 1;
}