/* RuW Workflow CSS*/

/*  @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);  */
@import url(./fonts.css);

:root {
    --background-messages: #444;
    --color-messages: #fff;
    --background-messages-error: #800;
    --color-messages-error: #fff;
    --background-messages-success: #080;
    --color-messages-success: #fff;
    --background-body: #F2E7CE;
    --background-bubble-archive: #666;
    --background-bubble-file: #bbb;
    --background-bubble: #e00;
    --background-buttonlg: #008;
    --background-buttonlg-yellow: #880;
    --background-buttonlg-green: #080;
    --background-dialog: #eee;
    --background-file-em: #f0f0f0;
    --background-file-pre: #008;
    --background-file: #fff;
    --background-input: #008;
    --border-file: 1px solid #ccc;
    --border-input: 1px solid #008;
    --color-body: #000;
    --color-bubble: #fff;
    --color-buttonlg-hover: #ff4;
    --color-buttonlg: #fff;
    --color-heading: #008;
    --color-icon-book: #0a9;
    --color-icon-code: #c60;
    --color-icon-database: #0a0;
    --color-icon-dir: #a60;
    --color-icon-pdf: #a00;
    --color-icon-play: #a00;
    --color-icon-word: #00a;
    --color-icon: #888;
    --color-icon-locked: #ccc;
    --color-input-hover: #ff4;
    --color-input: #ddd;
    --color-link-hover: #c22;
    --color-link-visited: #400;
    --color-link: #222;
    --color-message-err: #800;
    --color-message-ok: #080;
    --font-heading: 'Georgia', serif;
    --font-standard: 'Roboto Condensed', sans-serif;
    --radius-bubble: 10px;
    --radius-min: 2px;
    --radius-corner: 0px;
    --radius-norm: 4px;
    --font-brot-serif: Georgia, serif;
    --font-brot-sans-serif: Verdana, sans-serif;
    --font-brot-monotype: Courier, monotype;
}


select,
input[type = "file"],
input[type = "button"],
input[type = "submit"] {
    -moz-appearance: button;
    -webkit-appearance: button;
    appearance: button;
    border: var(--border-input);
    border-radius: var(--radius-corner);
    padding: 4px;
    font: inherit;
    min-height: 26px;
}

.file select {
    border: 2px solid var(--background-buttonlg);
    background-color: #ffffff;
    color: #000000;
    appearance: none;
    outline: none;
}

.file input[type = "submit"]  {
    border: 2px solid var(--background-buttonlg);
}

input[type = "submit"] {
    color: var(--color-input);
    font-weight: 700;
    background-color: var(--background-input);
}

input[type = "submit"]:hover {
    color: var(--color-input-hover);
    cursor: pointer;
}

body {
    color: var(--color-body);
    background: var(--background-body);
    font-family: var(--font-standard);
}

h1 {
    font-family: var(--font-heading);
    font-size: 2.1em;
    font-weight: 200;
    color: var(--color-heading);
}

h1 a:visited,
h1 a {
    color: inherit;
}

h2 {
    font-size: 1.2em;
}

a {
    text-decoration: none;
    color: var(--color-link);
}

a:hover {
    text-decoration: underline;
    color: var(--color-link-hover) !important;
}

a:visited {
    color: var(--color-link-visited);
}

.location a:visited {
    color: var(--color-link);
}

div.dialog {
    position: absolute;
    width: 340px;
    min-height: 100px;
    left: 50%;
    top: 45%;
    padding: 20px;
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .4);
    border-radius: var(--radius-norm);
    /*    border:1px solid #888;*/
    margin-left: -190px;
    margin-top: -70px;
    background: var(--background-dialog);
}


.fa.icon {
    float: left;
    font-size: 48px;
    margin-right: 12px;
    margin-left: -52px;
    color: var(--color-icon);
}

.fa.icon.dir {
    color: var(--color-icon-dir);
}

.fa.icon.code {
    color: var(--color-icon-code);
}

.fa.icon.file-word-o {
    color: var(--color-icon-word);
}

.fa.icon.book {
    color: var(--color-icon-book);
}

.fa.icon.pdf,
.fa.icon.file-pdf-o {
    color: var(--color-icon-pdf);
}

.fa.icon.database {
    color: var(--color-icon-database);
}

.fa.icon.play,
.fa.icon.cogs {
    color: var(--color-icon-play);
}

.fa.icon.locked_True {
    color: var(--color-icon-locked) !important;
}


.batchwrap select,
.batchwrap .submitbutton,
.batchwrap button,
#upload input#submit,
#id_jobs,
#upload input#id_file,
.batchwrap input {
    height: 40px; /* Einheitliche Höhe */
    font-size: 14px;
    border-radius: 0; /* Keine runden Ecken */
    padding: 0 12px;
}

/* Selectbox-Styling */

.batchwrap input,
.batchwrap select,
#id_jobs,
#upload input#id_file {
    border: 2px solid var(--background-buttonlg); /* Blauer Rand */
    background-color: #ffffff; /* Weißer Hintergrund */
    color: #000000; /* Schwarze Schrift */
    appearance: none;
    outline: none;
}

#upload input#id_file {
    padding: 6px 0 6px 6px;
}


#upload select#id_jobs {
    width: 167px;
}

#upload input#submit {
    width: 167px;
    margin-left: 6px;
}

#upload input#id_file {
    width: 340px;

}



.batchwrap select:focus {
    box-shadow: 0 0 4px var(--background-buttonlg);
    font-size: 1em;
}

/* Button-Styling */

button,
input {
    font-family: var(--font-standard);
}

.batchwrap button,
.batchwrap .submitbutton {
    background-color: var(--background-buttonlg); /* Blauer Button über Variable */
    color: #ffffff; /* Weiße Schrift */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.batchwrap .submitbutton:hover {
    filter: brightness(90%);
}

.iconbutton::first-letter {
    font-family: FontAwesome;
}

.iconbutton {
    position: relative;
    cursor: pointer;
    font-family: var(--font-standard);
}

.iconbutton.filter.off::before {
    font-family: FontAwesome;
    content: "\f00d";
    display: inline-block;
    position: absolute;
    color: #fff;
    left: 6px;
    top: 14px;
}

.iconbutton.filter.off::first-letter {
    color: #888;
}

.buttons .buttonwrap,
.file .filewrap,
.panes,
.dirlist .filewrap,
.batchwrap {
    position: relative;
    display: inline-block;
    width: 300px;
    padding: 6px;
    margin: 2px;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2);
    border-radius: var(--radius-norm);
    border: var(--border-file);
    background: var(--background-file);
    /*    background: #fff url('./img/xmlico72.png') no-repeat 10px 10px;*/
    /*    background:#fff;*/
    /*    background: linear-gradient(#eee, #fff 20%, #fff 70%, #ddd ); */
}

.batchwrap {
    width: auto;
}

.buttons .buttonwrap {
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
    background: rgb(235, 235, 235);
    background: linear-gradient(0deg, rgba(234, 225, 220, 1) 0%, rgba(242, 231, 230, 1) 29%, rgba(255, 255, 255, 1) 71%, rgba(255, 255, 255, 1) 100%);
    /*    background: #fff url('./img/xmlico72.png') no-repeat 10px 10px;*/
    /*    background:#fff;*/
    /*    background: linear-gradient(#eee, #fff 20%, #fff 70%, #ddd ); */
}

.buttons .buttonwrap .button,
.file .filewrap .file,
.dirlist .filewrap .file {
    margin-left: 60px;
}

.buttons .buttonwrap .button .buttonlabel,
.file .filewrap .file .filename,
.dirlist .filewrap .file .filename {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file .filewrap .logbuch {
    margin: 2em 0 0 0;
    max-height: calc(100vh - 350px);
    overflow-y: scroll;
}

.sftplink {
    width: 100%;
    margin-top: 6px;
}

.file .filewrap .logbuch * {
    margin: 6px 0;
}

.file .filewrap .log,
.file .filewrap .errors {
    /*    display:block;*/
    padding: 3px;
    background: var(--background-file-em);
}

.file .filewrap.validFalse pre,
.dirlist .filewrap.validFalse pre {
    background-color: var(--background-file-pre) !important;
}


.buttonlg {
    position: relative;
    display: inline-block;
    width: 260px;
    height: 26px;
    padding: 30px;
    font-size: 20px;
    line-height: 26px !important;
    margin: 0 auto;
    margin: 4px 2px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
    border-radius: var(--radius-norm);
    /*    border:1px solid #ccc;*/
    background: var(--background-buttonlg);
    color: var(--color-buttonlg);
    cursor: pointer;
    overflow: hidden; /* NEUES LAYOUT */
}

.buttonlg.yellow {
    background: var(--background-buttonlg-yellow);
}

.buttonlg.green {
    background: var(--background-buttonlg-green);
}

.buttonlg .fa {
    font-size: 32px;
    vertical-align: -4px;
    line-height: 26px !important;
}

/* NEUES LAYOUT */

.buttonlg .fa:before {
    display: inline-block;
    position: absolute;
    font-size: 120px;
    transform: rotate(345deg);
    opacity: .2;
    top: 30;
}

a:hover .buttonlg {
    color: var(--color-buttonlg-hover);
}



.bubble {
    display: block;
    position: absolute;
    height: 16px;
    border-radius: var(--radius-bubble);
    background-color: var(--background-bubble);
    color: var(--color-bubble);
    font: sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 2px 6px;
    line-height: 16px;
    min-width: 8px;
    right: 12px;
    top: 12px;
}

.bubble.c0 {
    display: none;
}


.filewrap .bubble {
    background-color: var(--background-bubble-file);
}

.archive .bubble,
.homedir .bubble,
.gpclipbrd .bubble {
    background-color: var(--background-bubble-archive);
}

.dirlist form {
    margin: 0;
    display: inline;
}

.dirlist .file .filename {
    /*    display: inline-block;*/
    min-width: 200px;
    font-size: 1.4em;
    font-weight: 200;
}

.dirlist .file .action {
    /*    display: inline-block;*/
}

p.buttonlabel,
p.filename {
    margin: 6px 0 3px 0;
    font-weight: bold;
}

div.filemeta {
    margin: 0 0 0px 0;
}

p.filedate,
p.filesize {
    margin: 0 0 0 0;
}

.filewrap.c0 {
    display: none;
}


.dialog h2 {
    margin: 0;
}

.dialog .w200 {
    width: 200px;
}

.dialog .message {
}

.dialog .message.none {
    display: none;
}


.dialog .message.ok {
    color: var(--color-message-ok);
}

.dialog .message.error,
.dialog .message.invalid {
    color: var(--color-message-err);
}

/* CONTEXT MENU */

.contextmenu {
    position: absolute;
    z-index: 1000;
    background: #fff;
    right: 0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
}

.contextmenu summary {
    width: 10px;
    text-align: right;
    position: absolute;
    background: #fff;
    right: 6px;
    outline: none;
    cursor: pointer;
}

.contextmenu[open],
#user[open] {
    background: #ffd;
    z-index: 10000;
}

.contextmenu ul,
#user ul {
    display: block;
    padding: 0;
    margin: 0;
}

.contextmenu li,
#user li {
    display: block;
    padding: 6px 12px;
    margin: 0;
}

.contextmenu li:last-child {
    padding-right: 2em;
}

.contextmenu summary::-webkit-details-marker,
.contextmenu summary::marker {
    display: none;
    content: "≡" !important; /* Verwendung des "Pfeil"-Symbols anstelle des Dreiecks */
    transition: all 0.5s;
}

.contextmenu[open] summary::-webkit-details-marker,
.contextmenu[open] summary::marker {
    content: "×";
    color: red;
}

.contextmenu li::first-letter {
    font-family: FontAwesome;
}


.contextmenu .disabled {
    color: gray;
    cursor: not-allowed;
}


/**/

.warning .type {
    color: #c80;
    font-weight: 600;
    text-transform: capitalize;
}

.err .type {
    color: #e00;
    font-weight: 600;
    text-transform: capitalize;
}



#user {
    display: block;
    position: absolute;
    top: 1em;
    right: 1em;
    max-width: 200px;
    padding: .5em .5em .5em 1.5em;
}

#user[open] {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
}

#user summary {
    cursor: pointer;
    /*    text-align: right;*/
}

#user > ul {
    right: 1em;
    max-width: 200px;
}

#user > ul > li {
    white-space: nowrap;
}

.vgp-list {
    display: block;
    padding: 0;
}

.vgp-item {
    display: block;
}


/* Entfernen Sie das standardmäßige Dreiecksymbol */

#user > summary {
    list-style: none;
    border-left: 1px dotted #008;
    border-bottom: 1px dotted #008;
    padding: 4px;
    min-width: 150px;
}

#user > summary::-webkit-details-marker {
    display: none;
}

/* Stil für das benutzerdefinierte Symbol im geschlossenen Zustand */

#user[open] > summary::before,
#user > summary::before {
    padding-left: .5em;
    font-family: "FontAwesome";
    content: '\f007'; /* Symbol im geschlossenen Zustand */
    position: absolute;
    left: 0;
}

#user a {
    display: inline-block;
    text-align: center;
    padding: .5em;
    background: #008;
    color: white !important;
    width: calc(100% - 16px);
}

.icon {
    font-family: "FontAwesome";
}

.icon.locked_True:after {
    color: #c00;
    display: block;
    position: absolute;
    content: '\f023';
    font-size: 32px;
    line-height: 32px;
    margin-top: -28px;
    margin-left: 20px;
}


.icon.button {
    font-size: 19px;
}

.ruwlogo small {
    font-size: 50%;
    letter-spacing: -40%;
    font-weight: 600;
}

.success:after {
    content: '\f00c';
    font-family: "FontAwesome";
    color: #0c0;
}

.file-check-box {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 22px;
    height: 22px;
    opacity: .9;
    accent-color: red;
}

#messages summary {
    cursor: pointer;
    font-weight: bold;
}

#messages ul {
    display: block;
    display: block;
    padding: 0;
    margin: 0;
}

#messages li {
    background-color: var(--background-messages);
    color: var(--color-messages);
    display: block;
    padding: 3px;
    margin: 6px 0px;
}

#messages li.error {
    background-color: var(--background-messages-error);
    color: var(--color-messages-error);
}

#messages li.success {
    background-color: var(--background-messages-success);
    color: var(--color-messages-success);
}

#upbutton {
    height: 32px;
    min-width: 32px;
    position: fixed;
    right: 12px;
    bottom: 12px;
    text-align: center;
    font-size: 20px;
    line-height: 28px;
}

#upbuttonx {
    background-color: var(--background-buttonlg); /* Blauer Button über Variable */
    color: #ffffff; /* Weiße Schrift */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    height: 32px;
    width: 32px;
    display: inline-block;
    /*border-radius: 50%;*/
}

#upbuttonx a {
    color: #fff;
}

#upbuttonx:hover {
    color: #ff0 !important;
    text-decoration: none;
}

#upbuttonx::first-letter {
    font-family: FontAwesome;
}

#sysinfo {
    color: #666;
    margin-top: 2em;
    position: absolute;
    bottom: 1em;
    font-size: 8pt;
}