/*

#
# --- BEGIN_HEADER ---
#
# default - default style settings for all pages
# Copyright (C) 2003-2021  The MiG Project lead by Brian Vinter
#
# This file is part of MiG.
#
# MiG is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation; either version 2 of the License, or
# (at your option) any later version.
#
# MiG is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program; if not, write to the Free Software
# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
#
# -- END_HEADER ---
#

*/

/* MiG default style sheet */

body {
  color: #000;
  font-family: verdana, helvetica, serif, times;
  margin: 0;
  padding: 0;
  font-size: 13px;
  /* prevent very low res from breaking all layout */
  min-width: 800px;
  min-height: 600px;
}


a {
  text-decoration: none;
  color: #666;
}

a:hover, a:active {
  text-decoration: underline;
  color: #999;
}

img {
  border: 0;
}

h1 {
  border: 1px solid darkgrey;
  border-radius: 4px;
  margin-top: 0;
  font-size: 16px;  
  padding: 4px;
}

h2 {
  border-bottom: 1px solid darkgrey;
  font-size: 14px;  
  padding: 2px;
}

h3 {
  border-bottom: 1px solid darkgrey;
  font-size: 16px;  
  padding: 3px;
}

div.container {
/* NOTE: obsolete with UI V3 global container introduction
  width: 98%;
  margin: 1%;
*/
}

/* Global Web Elements */
.global-container {
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	position: relative;
	/*margin: 20px;*/
	z-index: 1;
	min-height: 600px;
}

.global-full-height {
	min-height: 100vh;
}


.monospace {
  font-family: monospace;
}

th {

}

thead {

}

tbody {

}

tfoot {

}


table {
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  border: 1px solid #000;
  width: 100%;
}

table td a {
    /* make room for action icons */
    padding-top: 2px;
    padding-bottom: 2px;
}
div.icon, span.icon, .iconspace {
    /* make room for action icons */
    padding-top: 2px;
    padding-bottom: 2px;
    height: 22px;
}


table.columnsort {
  /* rounded border on sortable tables */
  border: 1px solid #999;
  border-radius: 5px;
  padding: 2px;
}

table.columnsort td {
    /* make room for action icons and borders */
    height: 22px;
}

table.submitstatus {}

table.files { 
/* TODO: can we remove cell borders? */
/* 
    border: 0;
    padding: 0;
    margin: 0;
*/
}
table.fileupload {}
table.stats {}
table.wc {}

table.jobs {
}
table.resubmit {}
table.changedstatusjobs {}
table.saveschedulejobs {}

table.vgrids {
}

table.resources {
  text-align: left;
}
table.resource td {
  padding: 5px;
}
table.people {
  text-align: left;
  vertical-align: middle;
}
/* user details */
.public_frame {
    width: 100%;
}
div.public_image {
    border-radius: 4px;
    overflow: hidden;
    border: none;
    float: none;
    margin: auto;
}
.profile-img {
    height: 200px;
    width: 200px;
}
.profile-thumb {
    height: 32px;
    width: 32px;
    border-radius: 50%;
}

table.user td {
  padding: 5px;
}
table.datatransfers {
}
/* avoid opaque background and border on nested datatransfer status table */
table.datatransfers.status {
    border: transparent;
    background-color: transparent;
}
table.frozenarchives {
}
table.transferkeys {
}
table.transferkeys td {
  vertical-align: middle;
}
/* 
   IMPORTANT: AdBlock Plus hides elements with class sharelink(s) so we stray
              from naming pattern and call it linkshares here to avoid trouble.
*/
table.linkshares {
}

table.forum {
  padding: 2px;
  text-align: left;
}
table.sandboxlogintext {
  width: 80%;
}
table.sandboxlogin {}
table.sandboxinfo {}
table.sandboxcreateimg {}

/* Make sure that e.g. wide CodeMirror instances don't overflow table width */
table.fixedlayout {
  table-layout: fixed;
}

table.downloads {
  text-align: center;
}

table.runtimeenvs {
}
table.runtimeenvdetails {
  padding: 2px;
}
table.runtimeenvdetails td {
  vertical-align: top;
}
table.runtimeenvsw {
  border: 0px solid #000;
}
table.runtimeenvsw td {
  padding: 5px;
}
table.runtimeenventry {
  border: 0px solid #000;
}
table.runtimeenvvars {
  border: 0px solid #000;
}
table.runtimeenvvars td {
  padding: 5px;
}
table.frozenarchivedetails {
  margin-top: 10px;
}
table.frozenarchivedetails td {
  vertical-align: top;
  padding: 4px;
}
table.frozenarchivedetails td.title {
  font-weight: bold;
}
table.frozenarchivedetails td.border {
  border: 1px solid #000;
}

table.monitor {
  font-size: 10px;
}
table.monitorstats {}
table.monitorstats td {
  vertical-align: top;
}
table.monitorjobs {
  border: 0px solid #000;
}
table.monitorresreq {
  border: 0px solid #000;
}
div.monitorruntimeenvdetails {
  /* force scroll box if list is longer than bounding box */
  height: 220px;
  overflow: auto;
}
table.monitorruntimeenvdone {
  border: 0px solid #000;
}

table.liveio table {
  border: 0px solid #000;
}
table th.icon {
  width: 8px;
}
table.peers {
}

/* format the contents of any element like a pre element */
.verbatim {
    display: block;
    font-family: monospace; 
    white-space: pre;
}

.menublock {
  width: 160px;
  float: left;
  margin: 4px;
  padding: 0;
}

#content {
    /* Handle menu spacing in V2 jquery.managers.css */
    /*
      margin-left: 168px;
    */
}
.contentblock {
  margin: 4px;
  padding: 0;
  /* Prevent footer overlap with menu */
  min-height: 500px;
}

/* override block layout for maximized areas like wshell */
.nomenu #content, .nomenu .contentblock {
  margin: 4px;
}

/* V3 Nav */
.home-nav-logo {
    /* Override in skins */
    background-image: url("/images/img/home_logo.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* V3 Background */
.img-content {
	background-image: url("/images/img/index_background.jpg");
}

/* V2 Nav */
#sideBar {
  position: fixed;
	z-index: 99;
}

/* Mask validation helper popups on account req pages */
.valid-feedback, .invalid-feedback {
    display: none;
}

/* Legacy nav menu */
.navmenu {
  border-radius: 5px;
  border: 1px solid grey;
  padding: 0;
  margin: 0;
}

.navmenu ul {
  margin: 0;
  padding: 2px 0;
}

.navsubmenu ul {
  padding: 0;
}

.navmenu ul li, .navsubmenu ul li {
  margin: 4px;
  list-style-type: none;
}

.navmenu ul li.home a, #legacy-ui-body .app-grid .fas.home {
  background-image: url('/images/icons/application_home.png');
}
.navmenu ul li.dashboard a, #legacy-ui-body .app-grid .fas.dashboard {
  background-image: url('/images/icons/application.png');
}
.navmenu ul li.submitjob a, #legacy-ui-body .app-grid .fas.submitjob {
  background-image: url('/images/icons/cog_add.png');
}
.navmenu ul li.files a, #legacy-ui-body .app-grid .fas.files {
  background-image: url('/images/icons/drive.png');
}
.navmenu ul li.jobs a, #legacy-ui-body .app-grid .fas.jobs {
  background-image: url('/images/icons/cog.png');
}
.navmenu ul li.vgrids a, #legacy-ui-body .app-grid .fas.vgrids {
  background-image: url('/images/icons/chart_organisation.png');
}
.navmenu ul li.vmachines a, #legacy-ui-body .app-grid .fas.vmachines {
  background-image: url('/images/icons/computer.png');
}
.navmenu ul li.resources a, #legacy-ui-body .app-grid .fas.resources {
  background-image: url('/images/icons/server.png');
}
.navmenu ul li.downloads a, #legacy-ui-body .app-grid .fas.downloads {
  background-image: url('/images/icons/download.png');
}
.navmenu ul li.crontab a, #legacy-ui-body .app-grid .fas.crontab {
  background-image: url('/images/icons/hourglass_go.png')
}
.navmenu ul li.seafile a, #legacy-ui-body .app-grid .fas.seafile {
  background-image: url('/images/icons/seafile.png')
}
.navmenu ul li.jupyter a, #legacy-ui-body .app-grid .fas.jupyter {
  background-image: url('/images/icons/jupyter.png')
}
.navmenu ul li.runtimeenvs a, #legacy-ui-body .app-grid .fas.runtimeenvs {
  background-image: url('/images/icons/database.png');
}
.navmenu ul li.archives a, #legacy-ui-body .app-grid .fas.archives {
  background-image: url('/images/icons/box.png');
}
.navmenu ul li.setup a, #legacy-ui-body .app-grid .fas.setup {
  background-image: url('/images/icons/wrench.png');
}
.navmenu ul li.settings a, #legacy-ui-body .app-grid .fas.settings {
  background-image: url('/images/icons/user.png');
}
.navmenu ul li.shell a, #legacy-ui-body .app-grid .fas.shell {
  background-image: url('/images/icons/application_osx_terminal.png');
}
.navmenu ul li.people a, #legacy-ui-body .app-grid .fas.people {
  background-image: url('/images/icons/group.png');
}
.navmenu ul li.peers a, #legacy-ui-body .app-grid .fas.peers {
  background-image: url('/images/icons/forum.png');
}
.navmenu ul li.cloud a, #legacy-ui-body .app-grid .fas.cloud {
  background-image: url('/images/icons/bricks.png');
}
.navmenu ul li.transfers a, #legacy-ui-body .app-grid .fas.transfers {
  background-image: url('/images/icons/table_refresh.png');
}
.navmenu ul li.sharelinks a, #legacy-ui-body .app-grid .fas.sharelinks {
  background-image: url('/images/icons/table_link.png');
}
.navmenu ul li.migadmin a, #legacy-ui-body .app-grid .fas.migadmin {
  background-image: url('/images/icons/server_lightning.png');
}

.navmenu ul li.statistics a, #legacy-ui-body .app-grid .fas.statistics {
  background-image: url('/images/icons/statistics-icon.png');
}
.navmenu ul li.docs a, #legacy-ui-body .app-grid .fas.docs {
  background-image: url('/images/icons/txt.png');
}
.navmenu ul li.logout a, #legacy-ui-body .app-grid .fas.logout {
  background-image: url('/images/icons/door_in.png');
}
.navmenu ul li.close a, #legacy-ui-body .app-grid .fas.close {
  background-image: url('/images/icons/book_previous.png');
}

#legacy-ui-body .app-grid .fas.fa-plus {
  background-image: url('/images/icons/add.png');
}

.navmenu ul li a:hover, .navsubmenu ul li a:hover {
  background-color: #444;
  color: white;
}

.navmenu ul li.selected a {
  background-color: #111;
  color: white;
}

.navmenu ul li a, .navsubmenu ul li a {
  border-radius: 4px;
  display: block;
  
  background-repeat: no-repeat;
  background-image: url('/images/icons/bullet_black.png');
  background-position: 5px 50%;
  
  border: 1px solid darkgrey;
  color: white;
  font-size: 13px;
  font-weight: bold;
  padding: 3px 5px 3px 24px;
  text-decoration: none;
  background-color: rgb(100,100,100);
}

.navsubmenu ul li a {
  display: inline;
  float: left;
}

.styled_button:hover {
  background-color: #444;
  color: white;
}

.styled_button.selected {
  background-color: #111;
  color: white;
}

.styled_button {
  border-radius: 4px;
  display: block;
  
  background-repeat: no-repeat;
  background-image: url('/images/icons/bullet_black.png');
  background-position: 5px 50%;
  
  border: 1px solid darkgrey;
  color: white;
  font-size: 13px;
  font-weight: bold;
  padding: 3px 5px 3px 24px;
  text-decoration: none;
  background-color: rgb(100,100,100);
}

.styled_button input {
  display: inline;
  float: left;
}

/* Download button grid */
.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, auto));
}
.button-grid > * {
}

/* Grid layouts with one to four horizontal items */
.one-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96%, auto));
}
.two-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48%, auto));
}
.three-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32%, auto));
}
.four-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24%, auto));
}
.five-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19.2%, auto));
}
.six-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16%, auto));
}
.one-col-grid > *, .two-col-grid > *, .three-col-grid > *, .four-col-grid > *,
.five-col-grid > *, .six-col-grid > * {
}


/* Cloud instance grid */
.cloud-instance-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}
/*
.cloud-instance-grid > div.cloud-instance-grid-middle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
*/
.cloud-instance-grid > div.cloud-instance-grid-left {
    grid-column-start: 1;
    grid-column-end: 4;
}
.cloud-instance-grid > div.cloud-instance-grid-middle {
    grid-column-start: 5;
    grid-column-end: 9;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.cloud-instance-grid > div.cloud-instance-grid-right {
    grid-column-start: 10;
    grid-column-end: 12;
}
.one-column-grid {
  display: grid;
  grid-row-gap: 2px;
  grid-template-columns: repeat(1, 1fr);
}
.two-column-grid {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 2px;
  grid-template-columns: repeat(2, 1fr);
}

/* align checkboxes vertically with text */
input[type=checkbox], input[type=radio] {
  vertical-align: middle;
}

/* Prevent undersized number fields in e.g. submit job and datatransfer form */
input[type=number] {
  min-height: 32px;
}
.premenuwidgets {
  color: black;
}

.postmenuwidgets {
  color: black;
}

.precontentwidgets {
  color: black;
}

.postcontentwidgets {
  color: black;
}

.inlineeditor {
  border: 1px inset grey;
  border-radius: 4px;
  padding: 3px;
  background: white;
}

.editortoolbar {
  border-radius: 4px;
  padding: 6px;
  background: #ddd;
}


/* Used in one place... maybe that place should be fixed? to use h1 instead */
#migheader {
  font-size: 28px;
  border: 0;
  border-radius: 4px;
  color: #111;
  background: #fff;
}

/* MiG logo */
#topspace {
  /* no top space */
  padding: 0px;
}
#toplogo {
  padding: 0px;
  margin: 0px;
  border: 1px solid black;
  background-position: left;
  font-size: 22px;
  font-weight: bold;
  color: black;
  border-spacing: 0;
  /* IMPORTANT: height must match at least logoimage height plus vertical padding */
  height: 30px;
  width: 100%;
}
/* keep toplogo bar elements in check */
#toplogoleft {
  /* align with menu block */
  width: 160px;
  padding: 0px 4px;
  margin: 0;
  float: left;
  height: 30px;
  vertical-align: middle;
}
#toplogocenter {
  /* just right of toplogoleft */
  padding: 0px 0px;
  margin: 0;
  float: left;
  height: 30px;
  vertical-align: middle;
}
#toplogoright {
  /* hidden by default */
  display: none;
  /* just right of toplogocenter if enabled */
  padding: 0px 0px;
  margin: 0;
  float: right;
  height: 30px;
  vertical-align: middle;
}
#logoimageleft {
  opacity: 0.7;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  display: block;
  vertical-align: middle;
}
#logoimageright {
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  display: block;
  vertical-align: middle;
}
#logotitle {
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

.migtable {
  border: 1px solid darkgrey;
  width: 100%;
  border-spacing: 0;
}

.odd {
  background-color: white;
}

.even {
  background-color: #ccc;
}

#exitcode {
  font-family: Small Fonts, VT100, Arial, Helvetica;
  font-size: 8px;
  color: #333;
  margin-bottom: 2px;
  text-align: right;
  width: 100%;
}
#exitcode .spacer {
  padding: 4px;
}

.vertical-spacer {
  height: 20px;
  width: 100%;
}

#bottomspace {
  padding: 10px;
}
#bottomlogo {
  border: 1px solid black;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: normal;
  color: black;
  border-spacing: 0;
  min-height: 20px;
}
/* keep bottomlogo bar elements in check */
#bottomlogo div, #bottomlogo p, #bottomlogo span {
  vertical-align: middle;
  margin: 0;
}
#bottomlogoleft {
  padding: 0px 2px;
  margin: 0;
  vertical-align: middle;
  float: left;
  border-radius: 4px;
}
#bottomlogoright {
  padding: 0px 2px;
  margin: 0;
  text-align: right;
  vertical-align: middle;
  float: right;
  border-radius: 4px;
}
#supportimage {
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  display: inline;
  vertical-align: middle;
}
.supporttext {
  display: inline;
}
#support {
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  font-size: 12px;
  font-weight: bold;
}
#privacyimage {
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  display: inline;
  vertical-align: middle;
}
#privacy {
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
}
#privacy a {
}
.privacytext {
  display: inline;
}
#creditsimage {
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  display: inline;
  vertical-align: middle;
}
#credits {
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
}
#credits a {
}
.creditstext {
  display: inline;
}

#content, .content {
  background: white;
  border: 1px solid black;
  border-radius: 4px;
  padding: 8px; 
}

.migcontent {}

.rawtext {
  background: #fff;
  border: 0;
  padding: 5px;
  text-align: left;
}

.icontext{
  font-size: 20px;
  vertical-align: middle;
}
.smallcontent{
  font-size: 10px;
}

.lefttext {
  text-align: left;
}

.centertext {
  text-align: center;
}

.righttext {
  text-align: right;
}

.centerall {
  margin: 0;
  text-align: center;
}

.publickey {
  width: 99%;
}
.transferkeys .publickey {
  margin: 0;
  float: right;
}

.title {
  font-weight: bold;
}

.errortext, .criticaltext {
  color: red;
}

.warningtext, .importanttext {
  color: orange;
}
.draft {
  font-size: 16px;
  font-weight: bold;
}

.even_row {
  background: #eee;
}

.odd_row {
  background: #ddd;
}

.status_unavailable {
  color: grey;
}

.status_online {
  color: green;
}

.status_slack {
  color: orange;
}

.status_offline {
  color: red;
}
.icon_online {
  background: url('/images/status-icons/online.png') left center no-repeat;
}
.icon_slack {
  background: url('/images/status-icons/slack.png') left center no-repeat;
}
.icon_offline {
  background: url('/images/status-icons/offline.png') left center no-repeat;
}

.optional {
  color: black;
}

.mandatory {
  color: blue;
}

.status_box {
  padding: 2px;
  margin: 2px;
  border: 1px dashed black;
  border-radius: 4px;
  background-position: 0% 50%;
  clear: both;
  display: block;
}

.hidden { 
  display: none;
}

.highlight_message {
  font-weight: bold;
}

.new_message {
  background: url('/images/icons/new.png') left center no-repeat;
  padding-left: 16px;
}

.warn_message {
  background: url('/images/icons/error.png') left center no-repeat;
  padding-left: 20px;
  color: orange;
}

.scrollselect {
  height: 120px;
  width: 570px; /* matches 80col textarea width in default text size */
  padding: 5px;
  overflow: auto;
  background: #fff;
  border: 1px inset grey;
  border-radius: 4px;
}

/* Force wrapping of extremely long lines in otherwise verbatim freeze archive
   descriptions.
*/
div.archive pre {
    white-space: pre-wrap;
}

/* Job manager */
.jm {
  margin-top: -15px; 
}

/* language/country dropdown modification */
.langselect {
  margin-bottom: 8px; 
}
.langselect select {
  width: 120px;
}
.langselect div {
  text-align: left;
}

/* General helper icons */
.spinner { 
    background-image: url(/images/icons/spinner.gif);
    background-repeat: no-repeat;
    background-position: left center;
 }
.iconleftpad, .leftpad {
  padding-left: 20px;
}
.error {
    background-image: url('/images/icons/exclamation.png');
    background-repeat: no-repeat;
    background-position: left center;
}
.warn {
    background-image: url('/images/icons/error.png');
    background-repeat: no-repeat;
    background-position: left center;
}
.info {
    background-image: url('/images/icons/information.png');
    background-repeat: no-repeat;
    background-position: left center;
}
.ok {
    background-image: url('/images/icons/accept.png');
    background-repeat: no-repeat;
    background-position: left center;
}
.help, .question {
    background-image: url('/images/icons/help.png');
    background-repeat: no-repeat;
    background-position: left center;
}
.personal {
    background-image: url('/images/icons/personal.png');
    background-repeat: no-repeat;
    background-position: left center;
}
.tip {
    background-image: url('/images/icons/lightbulb.png');
    background-repeat: no-repeat;
}
.disable-link {
  pointer-events: none;
  cursor: default;
  color: gray;
  text-decoration: none;
}
.urllink {
  background: url('/images/icons/html.png') no-repeat;
  padding-left: 18px;
}
.infolink {
  background: url('/images/icons/information.png') no-repeat;
  padding-left: 18px;
}
.shadeinfolink {
  background: url('/images/icons/information_grey.png') no-repeat;
  padding-left: 18px;
}
.viewlink {
  background: url('/images/icons/html.png') no-repeat;
  padding-left: 18px;
}
.openlink {
  background: url('/images/icons/txt.png') no-repeat;
  padding-left: 18px;
}
.editlink {
  background: url('/images/icons/page_edit.png') no-repeat;
  padding-left: 18px;
}
.userlink {
  background: url('/images/icons/user.png') no-repeat;
  padding-left: 18px;
}
.sharedfolderlink {
  background: url('/images/icons/folder_link.png') no-repeat;
  padding-left: 18px;
}
.folderlink {
  background: url('/images/icons/folder.png') no-repeat;
  padding-left: 18px;
}
.wikilink {
  background: url('/images/icons/overlays.png') no-repeat;
  padding-left: 18px;
}
.scmlink {
  background: url('/images/icons/calendar.png') no-repeat;
  padding-left: 18px;
}
.trackerlink {
  background: url('/images/icons/table_gear.png') no-repeat;
  padding-left: 18px;
}
.workflowslink {
  background: url('/images/icons/table_refresh.png') no-repeat;
  padding-left: 18px;
}
.forumlink {
  background: url('/images/icons/comments.png') no-repeat;
  padding-left: 18px;
}
.monitorlink {
  background: url('/images/icons/server_chart.png') no-repeat;
  padding-left: 18px;
}
.adminlink {
  background: url('/images/icons/wrench.png') no-repeat;
  padding-left: 18px;
}
.computerlink {
  background: url('/images/icons/computer.png') no-repeat;
  padding-left: 18px;
}
.sandboxlink {
  background: url('/images/icons/hourglass_go.png') no-repeat;
  padding-left: 18px;
}
.createarchivelink, .doishowdetails {
  background-image: url('/images/icons/book_add.png');
  background-repeat: no-repeat;
  padding-left: 18px;
}
.viewarchivelink, .doisearchlink {
  background-image: url('/images/icons/book_open.png');
  background-repeat: no-repeat;
  padding-left: 18px;
}
.editarchivelink {
  background-image: url('/images/icons/book_edit.png');
  background-repeat: no-repeat;
  padding-left: 18px;
}
.deletearchivelink, .doihidedetails {
  background-image: url('/images/icons/book_delete.png');
  background-repeat: no-repeat;
  padding-left: 18px;
}
.finalizearchivelink {
  background-image: url('/images/icons/book_key.png');
  background-repeat: no-repeat;
  padding-left: 18px;
}
.registerarchivelink {
  background-image: url('/images/icons/book_link.png');
  background-repeat: no-repeat;
  padding-left: 18px;
}
.previewarchivelink, .doilink {
  background-image: url('/images/icons/book_link.png');
  background-repeat: no-repeat;
  padding-left: 18px;
}
.danishlink {
  background: url('/images/crystal-icons/unknown.png') no-repeat;
  padding-left: 18px;
}
.englishlink {
  background: url('/images/crystal-icons/unknown.png') no-repeat;
  padding-left: 18px;
}
.backlink {
  background: url('/images/icons/arrow_left.png') no-repeat;
  padding-left: 18px;
}
.swrepolink {
  background: url('/images/icons/table_go.png') no-repeat;
  padding-left: 18px;
}
.addlink {
  background: url('/images/icons/add.png') no-repeat;
  padding-left: 18px;
}
.addadminlink {
  background: url('/images/icons/cog_add.png') no-repeat;
  padding-left: 18px;
}
.additemlink, .invitelink, .peerlink {
  background: url('/images/icons/page_white_add.png') no-repeat;
  padding-left: 18px;
}
.removelink {
  background: url('/images/icons/delete.png') no-repeat;
  padding-left: 18px;
}
.removeadminlink {
  background: url('/images/icons/cog_delete.png') no-repeat;
  padding-left: 18px;
}
.removeitemlink, .rejectlink {
  background: url('/images/icons/page_white_delete.png') no-repeat;
  padding-left: 18px;
}
.previouslink {
  background: url('/images/icons/resultset_previous.png') no-repeat;
  padding-left: 18px;
}
.nextlink {
  background: url('/images/icons/resultset_next.png') no-repeat;
  padding-left: 18px;
}
.firstlink {
  background: url('/images/icons/resultset_first.png') no-repeat;
  padding-left: 18px;
}
.lastlink {
  background: url('/images/icons/resultset_last.png') no-repeat;
  padding-left: 18px;
}
.submitfieldslink {
  background: url('/images/icons/table.png') no-repeat;
  padding-left: 18px;
}
.submittextarealink {
  background: url('/images/icons/txt.png') no-repeat;
  padding-left: 18px;
}
.submitfileslink {
  background: url('/images/icons/page_white_get.png') no-repeat;
  padding-left: 18px;
}
.seafilelink {
  background: url('/images/icons/seafile.png') no-repeat;;
  padding-left: 18px;
}
.duplicatilink {
  background: url('/images/icons/duplicati.png') no-repeat;;
  padding-left: 18px;
}
.crontablink {
  background: url('/images/icons/hourglass_go.png') no-repeat;;
  padding-left: 18px;
}
.introguidelink {
  background: url('/images/icons/lightbulb.png') no-repeat;
  padding-left: 18px;
}
.userguidelink {
  background: url('/images/icons/book.png') no-repeat;
  padding-left: 18px;
}
.statusnewslink {
  background: url('/images/icons/server_chart.png') no-repeat;
  padding-left: 18px;
}
.userfaqlink {
  background: url('/images/icons/table_go.png') no-repeat;
  padding-left: 18px;
}
.usertermslink {
  background: url('/images/icons/txt.png') no-repeat;
  padding-left: 18px;
}

/* UI V2 Settingsi/Setup nav */
.settingsbutton {
  padding: 8px;
  border: 2px solid grey;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: 1px center;
  background-color: #eee;
}
a.settingsbutton {
  text-decoration: none;
  font-weight: bold;
}

a:hover.settingsbutton {
  font-weight: bold;
  border: 2px solid #333; 
  background-color: #999; 
  color: #fff; 
}

.activebutton {
  border: 2px solid #333;
  background-color: #fff;
}

/* Settings/setup tab button icons - use background-image */
.generalsettingslink {
  background-image: url('/images/icons/table.png');
  padding-left: 18px;
}
.jobsettingslink {
  background-image: url('/images/icons/cog.png');
  padding-left: 18px;
}
.stylesettingslink {
  background-image: url('/images/icons/psd.png');
  padding-left: 18px;
}
.profilesettingslink {
  background-image: url('/images/icons/user.png');
  padding-left: 18px;
}
.twofactorsettingslink {
  background-image: url('/images/icons/computer_key.png');
  padding-left: 18px;
}
.widgetssettingslink {
  background-image: url('/images/icons/application.png');
  padding-left: 18px;
}
.sftpsettingslink {
  background-image: url('/images/icons/computer_link.png');
  padding-left: 18px;
}
.webdavssettingslink {
  background-image: url('/images/icons/computer_link.png');
  padding-left: 18px;
}
.ftpssettingslink {
  background-image: url('/images/icons/computer_link.png');
  padding-left: 18px;
}
.seafilesettingslink {
  background-image: url('/images/icons/seafile.png');
  padding-left: 18px;
}
.duplicatisettingslink {
  background-image: url('/images/icons/duplicati.png');
  padding-left: 18px;
}
.cloudsettingslink {
  background-image: url('/images/icons/computer_go.png');
  padding-left: 18px;
}
.arcsettingslink {
  background-image: url('/images/icons/ng-arc.png');
  padding-left: 18px;
}
/* Icons for inline link use - need background and no-repeat */
.newpostlink {
  background: url('/images/icons/comment.png') no-repeat;
  padding-left: 18px;
}
.replylink {
  background: url('/images/icons/comment_add.png') no-repeat;
  padding-left: 18px;
}
.searchlink {
  background: url('/images/icons/magnifier.png') no-repeat;
  padding-left: 18px;
}
.refreshlink {
  background: url('/images/icons/arrow_refresh.png') no-repeat;
  padding-left: 18px;
}
.certrenewlink {
  background: url('/images/icons/arrow_refresh.png') no-repeat;
  padding-left: 18px;
}
.cloudsetuplink {
  background: url('/images/icons/computer_go.png') no-repeat;
  padding-left: 18px;
}
.consolelink {
  background: url('/images/icons/computer_link.png') no-repeat;
  padding-left: 18px;
}

.realres {
  background: url('/images/icons/computer.png') no-repeat;
  padding-left: 18px;
}
.sandboxres {
  background: url('/images/icons/box.png') no-repeat;
  padding-left: 18px;
}
.sendemaillink {
  background: url('/images/icons/email_protocol.png') no-repeat;
  padding-left: 18px;
}
.sendjabberlink {
  background: url('/images/icons/jabber_protocol.png') no-repeat;
  padding-left: 18px;
}
.sendmsnlink {
  background: url('/images/icons/msn_protocol.png') no-repeat;
  padding-left: 18px;
}
.sendaollink {
  background: url('/images/icons/aol_protocol.png') no-repeat;
  padding-left: 18px;
}
.sendyahoolink {
  background: url('/images/icons/yahoo_protocol.png') no-repeat;
  padding-left: 18px;
}
.sendicqlink {
  background: url('/images/icons/icq_protocol.png') no-repeat;
  padding-left: 18px;
}
.public_profile{
  float: left;
  border: 1px inset blue;
  padding: 20px;
}
.public_image{
  float: right;
  border: 1px inset grey;
}
.public_frame{
  width: 90%;
}

.genericbutton {
  margin: 2px;
  padding: 4px;
  border: 2px solid grey;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: 1px center;
  background-color: #eee;
}
.genericbutton.iconspace {
  padding-left: 18px;
}  
a.genericbutton {
  text-decoration: none;
  font-weight: bold;
}

a:hover.genericbutton {
  font-weight: bold;
  border: 2px solid #333; 
  background-color: #999; 
  color: #fff; 
}
/* half width */
.halfwidth {
  width: 50%;
}
/* half width with room for minor padding */
.halfwidth.padspace {
  width: 49%;
}
/* 60 % width */
.p60width {
  width: 60%;
}
/* 80 % width */
.p80width {
  width: 80%;
}
/* full width */
.fillwidth {
  width: 100%;
  width: -moz-available;
  width: -webkit-fill-available;
}
/* full width with room for minor padding */
.fillwidth.padspace {
  width: 98%;
  width: -moz-available;
  width: -webkit-fill-available;
}
.dbllineheight {
  line-height: 2.0;
}

fieldset label {
    float: left;
    width: 25%;
    margin-right: 0.5em;
    padding-top: 0.2em;
    font-weight: bold;
}
fieldset label.halffield {
    width: 50%;
}
fieldset label.widefield_center {
    width: 70%;
    text-align: center;
}
fieldset .singlefield {
    width: 70%;
    overflow: auto;
}

.fieldlabel {
    font-weight: bold;
}
.fieldheader {
    font-size: 18px;
}
.fieldheadersep {
    border-bottom: 1px solid #333; 
}


/* hide complexity for sharelink ls page */
body.sharelink_ls #content {
  padding: 10px 100px;
  min-height: 600px;
}
body.sharelink_ls #content .if_full, body.sharelink_ls #content .empty_cell {
    display: none;
}
/* layout table elements on ls page used e.g. for sharelinks */
.files td.file_details {
    width: 420px;
    text-align: center;
}
.files td.narrow {
    width: 32px;
    text-align: center;
}

.systemnote {
    margin: 0px 40px;
    padding: 4px 10px;
    vertical-align: top;
    border: 1px solid gold;
    border-radius: 4px;
    color: black;
    background-color: gold;
}
.systemwarn {
    margin: 0px 40px;
    padding: 0px 20px;
    vertical-align: top;
    border: 1px solid gold;
    border-radius: 4px;
    color: red;
    font-size: 14px;
    font-weight: bold;
    background-color: gold;
    background-image: url('/images/icons/error.png');
    background-position: left center;
    background-repeat: no-repeat;
}
/* link in systemwarn flies around in chrome */
.systemwarn a, .systemnote a {
    vertical-align: top;
}

/* Simple centered layout for grid_openid login page */
div.openidlogin {
    width: 600px;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Layout for 2FA token entry page and verification popup */
div.twofactorbg {
    min-height: 360px;
    min-width: 360px;
}
#content div.twofactorbg {
    min-height: 600px;
}
#twofactorbox input[type=text], #twofactorbox select {
    width: 200px;
    padding: 12px 16px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}
#twofactorbox input[type=submit] {
    width: 100px;
    background-color: #ccc;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
#twofactorbox input[type=submit]:hover {
    background-color: #999;
}
#twofactorbox {
    position: absolute;
    width: 260px;
    height: 260px;
    left: 50%;
    /* For popup default relative offset is fine */
    top: 50%;
    margin-top: -150px;
    margin-left: -150px;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
}
#content #twofactorbox {
    /* Adjust to fit page footer with static position based on min-height: adjust */ 
    top: 300px;
}
#twofactorbox img.authlogo {
    width: 120px;
    height: 120px;
}
div.twofactorresult {
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -140px;
}
div.twofactorsupport {
    position: absolute;
    left: 50%;
    top: 500px;
    margin-left: -140px;
}
span.fakelink {
  text-decoration: none;
  color: #666;
}
span.fakelink:hover {
  text-decoration: underline;
  color: #999;
  cursor: pointer;
}

div.savestatus {
    min-height: 30px;;
}

/* Layout boxes for archive landing pages */
.standardfonts {
  font-family: verdana, helvetica, serif, times;
}
.archive-box {
  border: solid #ccc 1px;
  border-radius: 4px; 
  padding: 2px;
}

#confirm-dialog {
    background: #fff;
}

/* NOTE: used to reserve space for tips accordion to avoid 'jump' on load */
.tips-placeholder {
    height: 22px;
}

/* Mark optional and required form fields */
form.needs-validation input, form.needs-validation select, form.needs-validation textarea {
  border: 1px solid grey;
  border-radius: 4px;
  border-width: 1px;
  border-left-width: thick;
}
form.needs-validation input[type=submit] {
  border-left-width: thin;
  padding: 2px 8px;
}
form.needs-validation :optional {
    border-left-color: silver;
}
form.needs-validation :required {
    border-left-color: limegreen;
}
form.needs-validation :valid:required {
    border-left-color: green;
}
/* NOTE: text mentions mandatory field marking with this class - keep in sync 
   with '*:required' color above */
.highlight_required {
    color: limegreen;
    font-weight: bold;
}


/* 
*************************************************************************

   IMPORTANT: these overrides must come after .*link settings to work

*************************************************************************
*/
.owner {
  border: 1px solid gold;
  border-radius: 4px;
}
.member {
  background-color: transparent;
}
.public {
  background-color: silver;
}