body
{
  margin: 0;
  padding: 0;
  overflow: hidden;
}

header
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 4vh;
  padding: 0.25vh 0.3vw;
}

header #logo
{
  display: inline-block;
  margin: 0.5vh 0.5vw;
}

header #logout
{
  margin: 0.5vh 1vw;
  float: right;
}

main
{
  position: fixed;
  top: calc(4.5vh + 2px);
  left: 0;
  width: 100vw;
  height: 96vh;
  overflow-x: hidden;
}

main section#authentication .form
{
  width: 40vw;
  height: 40vh;
  padding: 5vh 5vw;
  margin: auto;
}

main section#info,
main section#navigation
{
  height: 10vh;
  padding: 2vh 5vw;
  margin: auto;
}

main section#info
{
  width: 40vw;
}

main section#navigation
{
  width: 12.3vw;
}

main section#info h2
{
  display: block;
  width: 7em;
  margin: auto;
}

main section#info table
{
  margin: auto;
  padding: 0.5vh 1vw;
}

main section#info table td
{
  width: 50%;
  height: 2.5vh;
}

.form
{
  display: block;
  position: relative;
}

.form input
{
  width: 100%;
  display: block;
}

.form input.button
{
  width: 30%;
  margin: auto;
  margin-top: 10vh;
}

section#folders
{
  position: relative;
  height: 100%;
  width: 30vw;
  float: left;
  display: inline-block;
  scrollbar-width: thin;
  overflow-y: scroll;
  overflow-x: auto;
  margin: 0;
}

section#folders #edit_categories
{
  position: absolute;
  top: calc(0.2vh + 1px);
  left: 1vw;
}

section#folders #new
{
  position: absolute;
  top: 0.2vh;
  right: 2vw;
}

section#folders ul
{
  margin: 2em 0 0 0;
  list-style-type: none;
}

section#folders ul li
{
  cursor: pointer;
}


section#folder_detail
{
  height: calc(100% - 1vh);
  width: 69.5vw;
  float: right;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  position: relative;
  padding-bottom: 1vh;
}

section#folder_detail div#files,
section#preview div#files
{
  height: calc(100% - 2em);
  width: 100%;
  display: grid;
  grid-template-columns: 16.5vw 16.5vw 16.5vw 16.5vw;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  scrollbar-width: thin;
  overflow-y: scroll;
  overflow-x: auto;
  margin: 0;
}

section#folder_detail div#meta
{
  height: 2em;
  width: 100%;
  display: block;
  overflow: hidden;
  margin: 0;
}

section#folder_detail div#meta #label
{
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.3em;
  font-weight: 700;
  margin-left: 0.5em;
}

section#folder_detail div#meta #tools
{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 2em;
}

section#folder_detail div#meta #tools .config
{
  position: absolute;
  top: 0;
  right: 0.3em;
  font-size: 3em;
  line-height: 1em;
}

section#folder_detail div#meta #tools #edit
{
  position: absolute;
  top: calc(0.2vh + 1px);
  right: 2.5vw;
}

section#folder_detail div#meta #tools #delete
{
  position: absolute;
  top: calc(0.2vh + 1px);
  right: 9vw;
}

section#folder_detail div#files .file
{
  height: 12vh;
  margin: 0.3em;
  padding: 0.41em;
  position: relative;
}

section#folder_detail div#files .file:hover
{
  cursor: pointer;
}

section#folder_detail div#files .file .thumbnail,
section#folder_detail div#files .file .filename
{
  display: inline-block;
}

section#folder_detail div#files .file .filename
{
  overflow: hidden;
  height: 1.3em;
  max-width: calc(100% - 2.5em);
  text-overflow: ellipsis;
  white-space: nowrap;
}

section#folder_detail div#files .file .thumbnail
{
  width: 30%;
}


section#folder_detail div#files .file .meta
{
  display: inline-block;
  width: calc(70% - 0.3em);
  vertical-align: top;
  height: 100%;
}

.file .meta label
{
  display: inline-block;
  margin-top: 0.5em;
  margin-bottom: 0.1em;
}

.file .meta .added,
.file .meta .size
{
  display: inline-block;
}

.file .meta .added
{
  margin-right: 2em;
}

section#folder_detail div#files .file .thumbnail img
{
  width: 100%
}

section#folder_detail div#files .file .dl_show button {
    position: absolute;
    left: 1%;
    bottom: 1%;
}

section#folder_detail .loading
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:  100%;
  margin: 0 auto;
  z-index: 999;
}

section#folder_detail .loading *
{
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  text-align: center;
}

section#def #content
{
  width: 70vw;
  margin: auto;
}

section#def #content .tab h2
{
  padding: 0 3vw;
}

section#def #content .label,
section#def #content .include
{
  margin-top: 3vh;
}

section#def #content .label label
{
  margin-right: 1vw;
}

section#def #content .label input#label
{
  width: 61vw;
}

section#def .rules input.date,
section#def .rules input.time,
section#def .rules input[type="number"]
{
  /* width: 3em; */
  appearance: textfield;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
}

section#def .rules #details #fields > *,
section#def .rules #details > .none
{
  display: none;
}

section#def .rules #details.none > .none,
section#def .rules #details.one #fields > .one,
section#def .rules #details.two #fields > .one,
section#def .rules #details.two #fields > .two
{
  display: inline-block;
}

section#def #content .include #tabs span
{
  /* Unfocused */
  cursor: pointer;
}

section#def #content .include.selected-rules #tabs #rules,
section#def #content .include.selected-files #tabs #files
{
  /* Focused */
  padding: 0.2em 0.5em 0.1em 0.5em;
}

section#def #content .include .tab
{
  display: none;
}

section#def #content .include.selected-rules .tab#tab_rules,
section#def #content .include.selected-files .tab#tab_files
{
  display: block;
}

section#actions
{
  position: fixed;
  top: 10vh;
  right: 2vw;
}

section#actions button
{
  display: block;
  width: 100%;
  height: 6vh;
  margin: 2vh 0;
}

section .include .rules
{
  width: 90%;
  margin: 0 auto 2vh;
  padding: 0;
}

section .include .rules li
{
  width: 100%;
  margin: 1vh auto 0;
  padding: 1vh 0;
  list-style: none;
  cursor: pointer;
}

section .include .rules li.add span
{
  display: block;
  width: 100%;
  margin-top: -0.5vh;
}

section .include .rules li.rule
{
  position: relative;
  padding: 0;
}

section .include .rules li.rule .control
{
  position: absolute;
  top: 0.25vh;
  width: 2vh;
  height: 2vh;
}

section .include .rules li.rule .control .emphasis
{
  margin: 0 0.2em;
}

section .include .rules li.rule .resize
{
  left: 0.5vw;
}

section .include .rules li.rule.complete .resize
{
  rotation-point: 50% 50%;
  rotate: 180deg;
}

section .include .rules li.rule .delete
{
  right: 0.5vw;
}

section .include .rules li.rule .content
{
  width: calc(100% - 4vw);
  margin: 0.25vh auto;
}

section .include .rules li.rule.compound > .content > div
{
  display: none;
}

section .include .rules li.rule.compound.simple   > .content > .simple,
section .include .rules li.rule.compound.complete > .content > .complete,
section .include .rules li.rule.compound          > .content > div.radio-group
{
  display: block;
  width: 100%;
  height: 100%;
}

section .include .rules li.rule.complete > .content > .complete > ul
{
  padding: 0 0.5vw;
}

section .include .rules li.define
{
  display: none;
  position: relative;
}

section .include .rules li.define > div
{
}

section .include .rules li.define div.active
{
  display: block;
  width: 100%;
  height: 100%;
}

section .include .rules li.define .controls,
section .include .rules li.rule .content .complete .controls,
section .include .rules li.rule .controls
{
  position: absolute;
  top: 0;
  right: 0.25vw;
}

section .include .rules li.rule .controls > div
{
  display: none;
}

section .include .rules li.rule .controls.display > .display,
section .include .rules li.rule .controls.edit > .edit
{
  display: block;
}

section .include .rules #rule_type .choice
{
  margin-left: 2vw;
}

section .include .rules #rule_type #cancel
{
  position: absolute;
  bottom: 3px;
  right: 3px;
}

section .include .rules #rule_type #simple
{
  display: inline-block;
  width: 40%;
}

section .include .rules #rule_type #compound
{
  display: inline-block;
  width: 40%;
}

section .include .radio-group
{
  width: 90%;
  margin: auto;
}

section .include .radio-group label
{
  margin-right: 10%;
}

section#preview
{
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

section#preview h2
{
  margin: 0;
  padding: 0;
  padding-left: 0.67em;
  height: 2em;
}

section#preview .content
{
  position: absolute;
  left: 3vw;
  top: 3vh;
  width: 94vw;
  height: 94vh;
}

section#preview .content #files
{
  width: calc(100% - 0.5em);
  height: calc(100% - 3.5em);
  position: absolute;
  left: 0.5em;
  top: 3.5em;
  overflow: hidden scroll;
}

section#file_details
{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

section#file_details #content
{
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}

section#file_details #content .header
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 11vh;
}

section#file_details #content .header .thumbnail
{
  display: inline-block;
  padding: 3px;
  height: calc(100% - 6px);
  vertical-align: top;
}

section#file_details #content .header .thumbnail img
{
  width: auto;
  height: 100%;
  image-rendering: optimizequality;
  display: block;
}

section#file_details #content .header .thumbnail .meta
{
  display: inline-block;
}

section#file_details #content .header .meta
{
  display: inline-block;
  padding-top: 0.5em;
  width: calc(100% - 9em);
}

section#file_details #content .custom
{
  position: absolute;
  top: 11vh;
  left: 0;
  width: 100%;
  height: calc(100% - 11vh);
}

section#file_details #content .custom .add .controls
{
  float: right;
}

section#file_details #content #details .detail .controls > div
{
  display: none;
}

section#file_details #content #details .detail .controls.show > div.show,
section#file_details #content #details .detail .controls.edit > div.edit
{
  display: block;
}

section#file_details #content #details .detail .remove_from_folder
{
  float: right;
  margin-right: 1em;
}

section#upload #droptarget
{
    width: 100%;
    display: block;
    height: 4.3em;
    padding: 0;
    margin: 0;
    margin-bottom: 13px;
    cursor: pointer;
}

section#upload #droptarget form
{
    height: 100%;
}

section#upload #droptarget label
{
    vertical-align: middle;
    height: 0;
    display: inline-block;
}

section#upload #droptarget *
{
    cursor: pointer;
}

section#progress .placeholder,
#results .placeholder
{
    display: block;
}

section#progress .progress_entry
{
  margin: 0 0 1em 1em;
  display: inline-block;
  padding: 0.5em;
  width: 20vw;
}

section#progress .progress_entry.template
{
  display: none;
}

section#tags,
section#folder_targets
{
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}

section#tags h1,
section#folder_targets h1
{
  margin: 0;
}

.file #details .category .label .toggle
{
  display: inline-block;
  width: 1em;
  height: 1em;
  cursor: pointer;
  margin: 0 0.5em;
}

.file #details .category .label h2
{
  display: inline-block;
  margin: 0;
}

.file #details .category .contents .detail
{
  width: 95%;
  margin-left: 4%;
  padding-left: 0.5em;
  margin-bottom: 0.5em;
}

.file #details .category .contents .detail .controls
{
  float: right;
}

#folder_select_modal
{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999
}

#folder_select_modal .container
{
  position: fixed;
  left: 35vw;
  top: 15vh;
  width: 30vw;
  height: 60vh;
}

#folder_select_modal .container ul
{
  list-style: none;
  padding: 0;
  margin: 0;
  height: calc(100% - 2.5em);
  overflow-x: hidden;
  overflow-y: scroll;
}

#folder_select_modal .container ul li
{
  cursor: pointer;
  padding: 0.1em 0.5em;
}

#folder_select_modal .container button
{
  position: absolute;
  bottom: 0.5em;
  height: 2em;
}

#folder_select_modal .container button#add_folder
{
  float: right;
}

ul.files
{
  list-style: none;
  padding: 0;
}

ul.files li
{
  padding: 0.1em 0.5em;
  width: 90%;
}

ul.files li img
{
  width: 50px;
  height: 50px;
  margin-right: 1em;
}

ul.files li button.remove
{
  float: right;
}

button:hover,
.button:hover
{
  cursor: pointer;
}

button.disabled,
button.disabled:hover,
.button.disabled,
.button.disabled:hover
{
  cursor: not-allowed;
}

#auto_options
{
  list-style: none;
  padding: 0 3px;
  margin: 0;
}

.spinner {
  display: inline-block;
  margin: 0;
  margin-right: 13px;
  margin-bottom: -0.3em;
  height: 1em;
  width: 1em;
  animation: rotateSpinner 0.67s infinite linear;
}

@keyframes rotateSpinner {
  0%    { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}


/* Never display these */
iframe,
.template
{
    width: 0;
    height: 0;
    display: none;
}