/* Styles for front page */

#main.front .folder > .header > .content-count {
  display: none;
}

#main.front .folder > .header {
  background-color: var(--base-color);
}

#main.front .folder.toplevel > .header > .name {
  font-size: var(--font-md);
}
/* Styles for config page */

#main.config .settings-section {
  margin-bottom: var(--spacing-md);
}

.settings-section .settings-value label {
  width: 300px;
  display: inline-block;
  vertical-align: top;
}

.settings-section .settings-value {
  margin-top: var(--spacing-2xs);
  margin-bottom: var(--spacing-2xs);
}

.settings-section .settings-value > input,
.settings-section .settings-value > select,
.settings-section .settings-value > div,
.settings-section .settings-value > textarea {
  width: 300px;
  display: inline-block;
  margin: var(--spacing-2xs) 0;
  padding: var(--spacing-2xs) var(--spacing-xs);
  box-sizing: border-box;
}
.settings-section .settings-value > input[type="text"],
.settings-section .settings-value > select,
.settings-section .settings-value > textarea {
}

.settings-section .settings-value > textarea {
  height: 10em;
}

/* Styles for journal page */

.cell-entry {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 90%;
  max-height: 48px;
}

/* Styles for statistics page */

.statistics canvas {
  float: left;
}

.statistics ul.bar-legend {
  position: relative;
  top: var(--spacing-md);
  left: var(--spacing-md);
  list-style: none;
  white-space: nowrap;
}

.statistics ul.bar-legend li span {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: var(--border-radius);
  margin-right: var(--spacing-2xs);
}
/* Styles for profile page */

#notify-on-custom-selector > div {
  margin-left: var(--spacing-md);
}

.required_field_marker {
  color: var(--highlight-color);
}

.profile-card {
  min-width: 40vw;
  flex: 1;
  align-self: stretch;
}

.profile-card > .card {
  min-height: 460px;
}
.profile-card > #notifications-card {
  min-height: 300px;
}
/*
 * User management page
 *
 */

.user_management #pUserManagement tr {
  vertical-align: top;
  text-align: left;
}

#pUserManagement form.user-pages label {
  display: block;
}
#pUserManagement h2 {
  margin-bottom: var(--spacing-2xs);
}

#pUserManagement .new-entry {
  background-color: rgb(180, 220, 180);
}

/*
 * Both
 *
 */

.add_new_user,
.user_management_list {
  min-width: 640px;
  box-sizing: border-box;
}

/*
 * Adding new users
 *
 */

.add_new_user {
  display: inline-block;
  background-color: rgba(90, 90, 90, 0.1);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm);
}

.add_new_user > div {
  margin-bottom: var(--spacing-2xs);
}
.add_new_user > div:last-child {
  margin-bottom: 0;
}

.add_new_user label {
  min-width: 50%;
  display: inline-block;
  vertical-align: top;
}

.add_new_user input[type="text"],
.add_new_user input[type="password"],
.add_new_user textarea {
  width: 45%;
  border-radius: var(--border-radius);
  border: none;
  padding: var(--spacing-2xs) var(--spacing-xs);
  margin-bottom: var(--spacing-2xs);
}
.add_new_user input[type="submit"] {
  padding: var(--spacing-2xs) var(--spacing-xs);
  margin-top: var(--spacing-sm);
}
.add_new_user .radio {
}
.add_new_user .radio label {
  min-width: 300px;
}
.add_new_user .radio > div {
  margin-bottom: var(--spacing-xs);
}
.add_new_user .radio > div:last-child {
  margin-bottom: 0;
}

/*
 * Managing existing users
 *
 */

.user_management_list thead {
  background-color: rgb(90, 90, 90);
}

.user_management_list thead th {
  color: white;
}

.user_management_list tbody {
  background-color: rgb(220, 220, 220);
}
.user_management_list tbody tr:hover {
  background-color: rgb(213, 213, 213);
}

.user_management_list td {
  padding: var(--spacing-xs);
}
.user_management_list th {
  padding: var(--spacing-xs);
}

.user_management_list td.active {
  text-align: center;
}

.user_management_list .name {
  min-width: 400px;
}
.user_management_list .name .p_user_mgm,
.user_management_list .name .p_statistics,
.user_management_list .name .p_config,
.user_management_list .name .p_econfig {
  font-weight: bold;
}
.user_management_list .name img {
  position: relative;
  top: 2px;
}

.user_management_list .privileges > a.clickable {
  color: rgb(150, 150, 150);
}

.user_management_section:not(:empty) {
  margin-top: 1.5em;
}

.add_new_user .error {
  margin: 5px 0 var(--spacing-xs);
}
/* Styles for downloads */

.download-file p label {
  display: inline-block;
  width: 100px;
  font-weight: bold;
}

.download-file {
  width: 400px;
  margin: auto;
  padding: var(--spacing-xs);
  border-radius: var(--spacing-xs);
  border: 1px solid rgb(90, 90, 90);
}

.download-pw,
.download-link {
  text-align: left;
  display: flex;
  margin-left: auto;
  margin-right: auto;
}
.download-pw > img,
.download-pw > div,
.download-pw > form {
  display: table-cell;
}

.download-pw img,
.download-link img {
  margin-right: var(--spacing-sm);
}
.download-pw > form > input {
  margin-right: var(--spacing-sm);
}

.download-pw .pw-protected {
  margin-top: 0;
  vertical-align: top;
}

.download-link a {
  display: inline-block;
  vertical-align: top;
}

.link {
  text-decoration: underline;
  cursor: pointer;
}
/* Styles for help page */

.help-page .section:first-child h1:first-child {
  margin-top: 0;
}

.help-page .section h1 {
  font-size: 22px;
}

.help-page .subsection {
  margin: 15px 0px;
  padding: 1px var(--spacing-xs);
  border: 1px dotted rgb(90, 90, 90);
  border-radius: 4px;
  background-color: #fefefe;
}

.help-page .subsection h2 {
  font-weight: bold;
  font-size: 17px;
}

.help-page .subsection h3 {
  font-style: italic;
}

.help-page .icon.help {
  position: relative;
  top: 9px;
  margin-right: 4px;
  margin-left: 4px;
}
.help-page .icon.help.small {
  top: 3px;
  margin-right: 2px;
  margin-left: 2px;
}

.help-page dl {
  padding-left: 2em;
}
.help-page dl dt {
  display: list-item;
  list-style-type: disc;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: var(--spacing-2xs);
}
.help-page dl dd p:first-child {
  margin-top: 0;
}

.help-page dd > .info,
.help-page dd > .warning {
  max-width: 500px;
  margin-left: 2em;
}

.help-folder {
  border: 1px solid rgb(90, 90, 90);
}

/* Styles for home */
.notext > span {
  display: none;
}

#webattach .close_button {
  background-image: url("../../img/icons/close.svg");
  background-repeat: no-repeat;
  background-position: center;

  width: 20px;
  height: 20px;
  border: none;
  margin: var(--spacing-2xs);

  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);

  cursor: pointer;

  z-index: 10;

  /* hide text */
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/*
 * Both
 *
 */

.file > .name .filename.editable form,
.folder > .header > .name.editable form {
  margin: var(--spacing-xs);
  padding: var(--spacing-xs);
}

.file > .name .filename.editable form input,
.folder > .header > .name.editable form input {
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  border: 0;
  margin: var(--spacing-xs);
  padding: var(--spacing-2xs);
}

.file > .name .filename.editable form button[type="submit"],
.folder > .header > .name.editable form button[type="submit"] {
  margin-left: 2px;
  margin-right: 2px;
}

/*
 * Files
 *
 */

.file > .name .filename.editable {
  display: inline-block;
}

.file > .name {
  font-weight: bold;
  margin-left: var(--spacing-2xs);
}
.file > .name span {
  vertical-align: center;
  text-decoration: none;
}

.file .url {
  border-right: 1px solid gray;
  padding-right: var(--spacing-sm);
  margin-right: var(--spacing-2xs);
}
.file .url input {
  background: none;
  display: inline-block;
  vertical-align: top;
  border: none;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0px;
  margin: 0;
  width: 160px;
  box-sizing: border-box;
}
.file .url img {
  margin-left: var(--spacing-2xs);
}

.content .files .file .size {
  display: inline-block;
  border-right: 1px solid gray;
  padding-right: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}

.file .timeperiod {
  display: inline-block;
  border-right: 1px solid gray;
  padding-right: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}
.timeperiod .date.changeable {
  cursor: pointer;
}
.timeperiod .icon {
  top: 1px;
  margin: 0 0 0 3px;
}

.file .actions {
  min-width: 200px;
  text-align: right;
  padding: var(--spacing-2xs);
}

.file .actions > .action {
  margin-right: var(--spacing-2xs);
  margin-top: -2px;
}

.file {
  /* border: 1px solid rgb(180, 180, 180); */
  overflow: hidden;
  background-color: rgba(240, 240, 240, 1);
}
.file:hover {
  background-color: var(--highlight-color-alpha);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.file-controls {
  float: right;
}

.file-controls * {
  display: inline-block;
}

.files .file {
  /* margin: var(--spacing-2xs); */
  padding: var(--spacing-xs);
}
.files .file,
.subfolders .folder {
  display: block;
  /* margin-left: var(--spacing-sm); */
  width: auto;
}

.content .files .file .name > *,
.content .files .file .actions > *,
.content .files .file .timeperiod,
.content .files .file .size,
.content .files .file .url > * {
  display: inline-block;
  position: relative;
  top: 2px;
  padding-top: 0;
}

/*
 * Folders
 *
 */

.folder > .header > .content-count {
  display: block;
  margin-top: var(--spacing-2xs);
  margin-left: var(--spacing-xl);
}

.folder > .header > .actions {
  position: absolute;
  right: var(--spacing-xs);
  height: 100%;
  margin: auto;
}
.folder > .header > .actions > .action > .icon {
  margin: 0 var(--spacing-xs);
}

.folder > .header > .actions > div {
  display: inline-block;
  /* margin-right: var(--spacing-sm); */
}

.folder > .header > .child {
  background-color: transparent;
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-2xs);
  margin-right: var(--spacing-xl);
  padding: var(--spacing-xs);
  float: right;
  color: rgb(90, 90, 90);
  clear: both;
  position: relative;
  /* box-shadow: var(--box-shadow); */
}
.folder > .header > .child h1:first-child {
  margin-top: var(--spacing-xs);
}
.folder > .header > .child > * {
  background-color: var(--base-color-light);
  border-radius: var(--border-radius);
}
.folder > .header > .child * {
  position: relative;
}

.folder > .content {
  margin-left: var(--spacing-md);
  /* margin-right: var(--spacing-sm); */
  margin-bottom: var(--spacing-xs);
  /* box-shadow: var(--box-shadow); */

  /* display: none; */
}
/* .folder > .content > div:nth-of-type(1) {
  display: block;
} */

.new_folder img,
.new_folder span {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.new_folder span {
  margin-left: var(--spacing-xs);
  color: var(--base-color-light);
}
.button.action.clickable.new_folder {
  background-color: var(--highlight-color);
  box-shadow: var(--shadow-sm);
  margin: var(--spacing-xs) var(--spacing-md);
}
.button.action.clickable.new_folder:hover {
  background-color: var(--highlight-color-light);
}

.folder > .header {
  padding: var(--spacing-sm);
  overflow: hidden;
  margin-top: var(--spacing-sm);
  /* box-shadow: var(--box-shadow-sm); */
}

.folder > .header > * {
  vertical-align: middle;
  display: inline-block;
}

.folder > .header > .toggle {
  margin-right: var(--spacing-2xs);
}

.folder > .header > .name {
  font-weight: bold;
  margin: 0 var(--spacing-sm);
}

.folder {
  background-color: rgba(230, 230, 230, 0.8);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.folder.toplevel {
  /* border: 1px solid rgb(90, 90, 90); */
  border-radius: var(--border-radius);
  padding: var(--spacing-xs) var(--spacing-md);
}

.folder > .header {
  background-color: var(--base-color);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  min-height: var(--spacing-xl);
  /* border-bottom: 1px solid rgb(90, 90, 90); */
}

.folder .content .folder > .header {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.folder > .content {
  /* padding: var(--spacing-xs); */
  /* background: var(--highlight-color-bright); */
  /* border-radius: var(--border-radius); */
  border-left: 1px solid rgb(90, 90, 90);
}
.folder .folder > .content {
  /* border-bottom: 1px solid rgb(90, 90, 90); */
  /* border-right: 1px solid rgb(90, 90, 90); */
  /* border-radius: var(--border-radius); */
  margin-left: var(--spacing-lg);
}

.folder > .header > .action {
  display: inline-block;

  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;

  margin-right: var(--spacing-2xs);
  margin-left: var(--spacing-2xs);

  /* hide text */
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.folder > .header > .action.closed {
  background-image: url("../../img/icons/open_folder.svg");
  margin: 0;
}
.folder > .header > .action.open {
  background-image: url("../../img/icons/close_folder.svg");
  margin: 0;
}

/* sub folders and file content */

.subfolders > .entry > .fs_tree {
  top: 21px;
}

.entry {
  width: 100%;
}
.entry > .file {
  margin: var(--spacing-2xs) 0;
}
.entry > .fs_tree {
  display: block;
  vertical-align: top;
  width: 13px;
  border: none;
  /* border-top: 1px solid rgb(90, 90, 90); */
  height: 1px;
  position: relative;
  top: 18px;
}

.entry > * {
  display: inline-block;
}

.new-entry > .file {
  background-color: var(--success-color-light);
}
.new-entry > .file:hover {
  background-color: var(--success-color);
}

/*
 * Rights management
 *
 */

.user_management > div > label {
  padding: var(--spacing-2xs) 0;
}

.user_management > div > input {
  padding: var(--spacing-2xs);
}

.user_management > div > button {
  padding: var(--spacing-2xs) var(--spacing-xs);
  margin: 0 var(--spacing-xs);
  box-sizing: border-box;
}

.user_management > div > label {
  padding: var(--spacing-2xs) 0;
}

.user_management form {
  border: 1px dotted rgb(90, 90, 90);
  padding: var(--spacing-2xs);
  margin: 0 0 0 20px;
  display: inline-block;
}

.user_management .user_list {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: -5px;
}

.user_management .user_list form {
  position: relative;
  display: block;
  margin: var(--spacing-2xs);
}
.user_management .user_list form > input[type="submit"],
.user_management .user_list form > label {
  display: block;
}
.user_management .user_list form > input[type="submit"] {
  margin-top: var(--spacing-2xs);
  font-size: 14px;
}

.user_management .user_list li {
}

.user_management .user_list a {
  cursor: pointer;
}
.user .actions > input[type="checkbox"] {
  margin: 0 var(--spacing-xs);
}

/* style for different rights */
.user_management .user_list .username .name {
  font-style: italic;
}
.user_management .user_list .username.can_write .name {
  font-style: normal;
}
.user_management .user_list .username.can_ewrite .name,
.user_management .user_list .username.can_delete .name,
.user_management .user_list .username.can_edelete .name,
.user_management .user_list .username.can_protect .name,
.user_management .user_list .username.can_crypto .name {
  font-style: normal;
  font-weight: bold;
}

.user {
  overflow: hidden;
  /* border: 1px solid rgb(90, 90, 90); */
  border-radius: var(--border-radius);
  padding: var(--spacing-xs);
  background-color: var(--highlight-color-alpha);
  margin: var(--spacing-sm);
}

.user > * {
  display: inline;
}

.user > .remove_user img {
  position: relative;
  top: 2px;
  padding-right: var(--spacing-2xs);
}

.user > .actions {
  margin: 0 var(--spacing-xs);
  float: right;
}
.user > .actions .action {
  margin-left: var(--spacing-xs);
}

.user > .actions .remove_user img {
  vertical-align: middle;
}

.user > .actions .expand_custom:not(:empty) {
  display: inline-block;
  padding-left: var(--spacing-2xs);
  font-size: var(--font-md);
  position: relative;
  top: 2px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
}

.user > .actions .expand_custom:not(.open) {
  background-image: url("../../img/icons/plus.svg");
}
.user > .actions .expand_custom.open {
  background-image: url("../../img/icons/minus.svg");
}

.user > .child form.user_administration label {
  display: inline-block;
  width: 200px;
}
.user > .child form.user_administration input[type="password"],
.user > .child form.user_administration input[type="text"] {
  width: 200px;
}

.actions-column {
  width: 120px;
  padding: auto;
}

/*
 * File Upload
 *
 */

.folder .files .action img {
  vertical-align: top;
}

.folder .files .action span {
  text-decoration: underline;
  vertical-align: top;
}

.folder > .header > .child .fileupload {
  padding: var(--spacing-2xs) var(--spacing-xs);
  min-width: 35%;

  /* margin: var(--spacing-sm); */
}
.folder > .header > .child .fileupload .info {
  margin: 0;
}

.fileupload .file > div {
  display: block;
}

.clickable.action.uploadcancel > .icon {
  margin-top: var(--spacing-sm);
}

.folder > .header {
  position: relative;
}

.folder > .header.droparea {
  position: relative;
}

.folder > .header.child {
  margin: var(--spacing-md);
}

/* Upload notification for drag & drop */

.folder > .header:before,
.folder > .header:after {
  opacity: 0;
  position: absolute;
  display: none;
}
.folder > .header.droparea:before {
  content: attr(data-uploadcaption);
  color: #205791;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  vertical-align: bottom;
  z-index: 1;
}
.folder > .header.droparea.current:before {
  color: #264409;
}
.folder > .header.droparea:after {
  content: "\A";
  /*border-radius: 15px;*/
  border: 2px dotted #205791;
  /*background: rgba(0,0,0,0.15);*/
}
.folder > .header.droparea.current:after {
  border: 2px dotted #264409;
}

.folder > .header.droparea:before,
.folder > .header.droparea:after {
  display: inline-block;
  opacity: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 3px;
  padding: var(--spacing-2xs);
  padding-right: 20px;
}
.folder > .header > .actions {
  opacity: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.folder > .header.droparea > .actions,
.folder > .header.droparea > .content-count {
  opacity: 0.2;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.folder > .header > .child .fileupload .file {
  margin: var(--spacing-xs) 0;
  padding: var(--spacing-2xs) var(--spacing-xs);
  background: rgb(230, 230, 230);
  border-radius: var(--border-radius-sm);
}

.folder > .header > .child .fileupload .file .name {
  display: inline-block;
  font-weight: bold;
  background-color: transparent;
  border: none;
  width: 300px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder > .header > .child .fileupload .file .actions {
  white-space: nowrap;
  float: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.folder > .header > .child .fileupload .file .actions div {
  display: inline-block;
}

.folder > .header > .child .fileupload .file .actions .progress-info-container {
  height: 28px;
  padding: var(--spacing-2xs) var(--spacing-xs);
  display: flex;
  justify-content: center;
  align-items: center;
}

.folder
  > .header
  > .child
  .fileupload
  .file
  .actions
  .progress-info-container
  .progress-bar {
  margin: var(--spacing-2xs) 0;
  display: inline-block;
  border: 1px solid rgb(90, 90, 90);
  width: 48px;
  height: 100%;
  position: relative;
}
.folder
  > .header
  > .child
  .fileupload
  .file
  .actions
  .progress-info-container
  .progress-bar
  > .progress-value {
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.folder > .header > .child .fileupload .file .actions .upload-button {
  vertical-align: top;
  margin-left: var(--spacing-2xs);
}

.upload-controls {
  display: flex;
  margin-right: var(--spacing-lg);
}
.upload-controls > span {
  margin: var(--spacing-xs);
}

span.fileuploadbutton.button {
  background-color: var(--highlight-color);
  border-radius: var(--border-radius);
  color: var(--base-color-light);
  padding: var(--spacing-2xs) var(--spacing-xs);
  cursor: pointer;
}

span.fileuploadallbutton.button {
  border-radius: var(--border-radius);
  padding: var(--spacing-2xs) var(--spacing-xs);
  cursor: pointer;
}
.folder > .header > .child .fileuploadbutton > input,
span.fileuploadbutton > input[type="file"] {
  cursor: pointer;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.folder {
  background: none;
}

/* .folder > .header .delete_folder {
  margin-left: 20px;
} */

.col-form-label {
  padding-bottom: 0;
  margin-top: var(--spacing-sm);
}

@media (min-width: 768px) {
  .login-mask {
    max-width: 50vw;
  }
}
.tooltip-element {
  position: absolute;
  top: -12px;
  right: 0;
  padding: var(--spacing-3xs) var(--spacing-2xs);
  font-size: var(--font-sm);
  background-color: rgba(250, 250, 250, 0.9);
  width: auto;
  text-align: center;
  border-radius: var(--border-radius-sm);
  white-space: nowrap;
}
.tooltip-container {
  position: relative;
}
.file .url {
  padding-top: 0;
}

.file .url input {
  cursor: pointer;
}
.file .url input:focus {
  outline: none;
}
.file .url .url-copy-container {
  padding: 0 var(--spacing-xs);
  cursor: pointer;
  border-radius: var(--border-radius-sm);
}
.file .url img.clipboard-icon {
  visibility: hidden;
  margin: 0;
  margin-left: 2px;
  height: 18px;
}
.file .url .url-copy-container {
  padding-top: 0;
  top: 0;
  position: relative;
  display: inline-block;
}
.file .url .url-copy-container:hover {
  background-color: var(--highlight-color-alpha);
}
.file .url .url-copy-container:hover input {
  color: white;
}
.file .url .url-copy-container:hover img.clipboard-icon {
  visibility: visible;
}

.content .files .file .file-controls .file-menu {
  display: none;
}

.content .files .file .file-controls .file-menu .menu-actions {
  position: absolute;
  right: 40px;
  background-color: white;
  display: none;
  border-radius: var(--border-radius-sm);
  z-index: 1;
}
.content .files .file .file-controls .file-menu .menu-actions .menu-action {
  display: block;
  padding: var(--spacing-2xs) var(--spacing-xs);
}
.content
  .files
  .file
  .file-controls
  .file-menu
  .menu-actions
  .menu-action:hover {
  background-color: var(--highlight-color-alpha);
}

@media (max-width: 768px) {
  .content .files .file .url,
  .content .files .file .file-controls > *,
  .content .files .file .name > .action {
    display: none;
  }

  .content .files .file .file-controls .file-menu {
    display: inline-block;
  }
}