/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
 This file is licensed under the Affero General Public License version 3 or late                                                                                             r.
 See the COPYING-README file. */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr                                                                                             e, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li                                                                                             , fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td                                                                                             , article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:                                                                                             0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-fam                                                                                             ily:inherit; vertical-align:baseline; cursor:default; }
html, body { height:100%; }
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:b                                                                                             lock; }
body { line-height:1.5; }
table { border-collapse:separate; border-spacing:0; white-space:nowrap; }
caption, th, td { text-align:left; font-weight:normal; }
table, td, th { vertical-align:middle; }
a { border:0; color:#ffffff00; text-decoration:none;}
a, a *, input, input *, select, .button span, label { cursor:pointer; }
ul { list-style:none; }

body {
        background-color: #ffffff;
        font-weight: 400;
        font-size: .8em;
        line-height: 1.6em;
        font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-                                                                                             serif;
        color: #000;
        height: auto;
}

#body-login {
     background-image: url('../img/city.jpg'); /* path to image */
     background-position: 50% 50%; /* ensure optimal scalability */
     background-repeat: no-repeat; /* prevent tiled background */
     background-size: cover; /* ensure screen coverage */
     text-align: center; /* Center Entitlement text, copyright */
/*     background-color: #4c3357 !important; */ /* Fallback for old browsers */
}
.two-factor-provider {
        text-align: center;
        width: 100%;
        display: inline-block;
}

a.two-factor-cancel {
        color: #fff;
}

.float-spinner {
        height: 32px;
        display: none;
}
#body-login .float-spinner {
        margin-top: -32px;
        padding-top: 32px;
}

#nojavascript {
        position: fixed;
        top: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        z-index: 9000;
        text-align: center;
        background-color: rgba(0,0,0,0.5);
        color: #fff;
        line-height: 125%;
        font-size: 24px;
}
#nojavascript div {
        display: block;
        position: relative;
        width: 50%;
        top: 35%;
        margin: 0px auto;
}
#nojavascript a {
        color: #fff;
        border-bottom: 2px dotted #fff;
}
#nojavascript a:hover,
#nojavascript a:focus {
        color: #ddd;
}

/* SCROLLING */
::-webkit-scrollbar {
        width: 8px;
}
::-webkit-scrollbar-track-piece {
        background-color: transparent;
}
::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
}

/* Searchbox */
.searchbox input[type="search"] {
        position: relative;
        font-size: 1.2em;
        padding: 3px;
        padding-left: 25px;
        background: transparent url('../img/actions/search-white.svg') no-repeat                                                                                              6px center;
        color: #fff;
        border: 0;
        border-radius: 3px;
        margin-top: 9px;
        float: right;
        width: 0;
        cursor: pointer;
        -webkit-transition: all 100ms;
        transition: all 100ms;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        opacity: .7;
}
.searchbox input[type="search"]:focus,
.searchbox input[type="search"]:active,
.searchbox input[type="search"]:valid {
        color: #fff;
        width: 155px;
        max-width: 50%;
        cursor: text;
        background-color: #112;
}

/* CONTENT ------------------------------------------------------------------ */
#controls {
        box-sizing: border-box;
        position: fixed;
        top: 45px;
        right: 0;
        left: 0;
        height: 44px;
        width: 100%;
        padding: 0;
        margin: 0;
        background-color: rgba(180, 180, 180);
        z-index: 50;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
}
/* position controls for apps with app-navigation */
#app-navigation+#app-content #controls {
        left: 250px;
}
.viewer-mode #app-navigation+#app-content #controls {
        left: 0;
}

#controls .button,
#controls button,
#controls input[type='submit'],
#controls input[type='text'],
#controls input[type='password'],
#controls select {
        box-sizing: border-box;
        display: inline-block;
        height: 36px;
        padding: 7px 10px
}

#controls .button.hidden {
        display: none;
}

#content {
        position: relative;
        height: 100%;
        width: 100%;
}
#content .hascontrols {
        margin-top: 45px;
}
#content-wrapper {
        position: absolute;
        height: 100%;
        width: 100%;
        overflow-x: hidden; /* prevent horizontal scrollbar */
        padding-top: 45px;
        box-sizing:border-box;
}
/* allow horizontal scrollbar for personal and admin settings */
#body-settings:not(.snapjs-left) .app-settings {
        overflow-x: auto;
}

#emptycontent,
.emptycontent {
        color: #888;
        text-align: center;
        margin-top: 30vh;
        width: 100%;
}
#emptycontent.emptycontent-search,
.emptycontent.emptycontent-search {
        position: static;
}
#emptycontent h2,
.emptycontent h2 {
        margin-bottom: 10px;
        line-height: 150%;
}
#emptycontent [class^="icon-"],
.emptycontent [class^="icon-"],
#emptycontent [class*=" icon-"],
.emptycontent [class*=" icon-"] {
        background-size: 64px;
        height: 64px;
        width: 64px;
        margin: 0 auto 15px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
        opacity: .4;
}


/* LOG IN & INSTALLATION -------------------------------------------------------                                                                                             ----- */

#body-login {
        background-attachment: fixed; /* fix background gradient */
        height: 101%; /* fix sticky footer */
}

/* Dark subtle label text */
#body-login p.info,
#body-login form legend,
#body-login #datadirContent label,
#body-login form .warning-info,
#body-login form input[type="checkbox"]+label {
        text-align: center;
        color: #fff;
}

#body-login form label {
        color: #fff;
        text-align: left;
        margin-bottom: .5rem;
        font-weight: bold;
}
/* overrides another !important statement that sets this to unreadable black */
#body-login form .warning input[type="checkbox"]:hover+label,
#body-login form .warning input[type="checkbox"]:focus+label,
#body-login form .warning input[type="checkbox"]+label {
        color: #fff !important;
}

#body-login .update h2 {
        margin: 12px 0 20px;
}

#body-login .update a {
        color: #fff;
        border-bottom: 1px solid #aaa;
}

#body-login .infogroup {
        margin-bottom: 15px;
}

#body-login p#message img {
        vertical-align: middle;
        padding: 5px;
}

#body-login p.info {
        margin: 0 auto;
        padding-top: 20px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
}
#body-login p.info a {
        font-weight: 600;
        padding: 13px;
        margin: -13px;
}

#body-login form {
        position: relative;
        margin: 32px auto;
        min-width: 300px;
}

#body-login form fieldset {
        margin-bottom: 20px;
        text-align: left;
}
#body-login form #sqliteInformation {
        margin-top: -20px;
        margin-bottom: 20px;
}
#body-login form #adminaccount {
        margin-bottom: 15px;
}
#body-login form #adminaccount legend{
        margin-bottom: 15px;
}

#body-login #datadirContent {
        display: flex;
        justify-content: center;
        flex-direction: column;
        max-width: 300px;
        margin: 0 auto 1.2rem;
}

#body-login form fieldset legend, #datadirContent label {
        width: 100%;
}
#body-login #datadirContent label {
        display: block;
        margin-bottom: .5rem;
}
#body-login form #datadirField legend {
        margin-bottom: 15px;
}
#body-login #showAdvanced {
        padding: 13px; /* increase clickable area of Advanced dropdown */
}
#body-login #showAdvanced img {
        vertical-align: bottom; /* adjust position of Advanced dropdown arrow */
        margin-left: -4px;
}
#body-login .icon-info-white {
        padding: 10px;
}

#body-login footer {
        overflow: hidden;
}

#body-login footer * {
        transform: translate(0, 150%);
        transition: all .5s;
}

#body-login footer *.show {
        transform: translate(0, 0);
}

/* strengthify wrapper */
#body-login .strengthify-wrapper {
        display: inline-block;
        position: relative;
        left: 15px;
        bottom: 3px;
        width: 252px;
}

/* tipsy for the strengthify wrapper looks better with following font settings *                                                                                             /
#body-login .tipsy-inner {
        font-weight: bold;
        color: #ccc;
}

/* General new input field look */
#body-login input[type="text"],
#body-login input[type="password"],
#body-login input[type="email"] {
        border: none;
        font-weight: 300;
}


/* Nicely grouping input field sets */
.grouptop,
.groupmiddle,
.groupbottom {
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: flex;
        justify-content: center;
        flex-direction: column;
        max-width: 300px;
        margin: 0 auto 1.2rem;
}

#body-login .grouptop input,
.grouptop input,
#body-login .groupmiddle input,
.groupmiddle input,
#body-login .groupbottom input,
.groupbottom input {
        box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
}

#body-login .submit-wrap {
        display: flex;
        justify-content: center;
        flex-direction: column;
        max-width: 300px;
        margin: 32px auto 1.2rem;
}

.loading-spinner {
        display: none;
        position: relative;
        width: 40px;
        height: 10px;
        margin: 0 auto;
}

/* Disable old loading spinner icon */
.submit-wrap button#submit.icon-loading-small:after,
.submit-wrap button#submit.icon-loading-small span {
        display: none !important;
}

.submit-wrap button#submit.icon-loading-small {
        background-image: none !important;
}

.submit-wrap .icon-loading-small .loading-spinner {
        display: inline-block;
}

.loading-spinner div {
        position: absolute;
        top: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loading-spinner div:nth-child(1) {
        left: 4px;
        animation: loading-spinner1 0.6s infinite;
}
.loading-spinner div:nth-child(2) {
        left: 4px;
        animation: loading-spinner2 0.6s infinite;
}
.loading-spinner div:nth-child(3) {
        left: 16px;
        animation: loading-spinner2 0.6s infinite;
}
.loading-spinner div:nth-child(4) {
        left: 28px;
        animation: loading-spinner3 0.6s infinite;
}
@keyframes loading-spinner1 {
        0% {
                transform: scale(0);
        }
        100% {
                transform: scale(1);
        }
}
@keyframes loading-spinner3 {
        0% {
                transform: scale(1);
        }
        100% {
                transform: scale(0);
        }
}
@keyframes loading-spinner2 {
        0% {
                transform: translate(0, 0);
        }
        100% {
                transform: translate(12px, 0);
        }
}

#body-login form input[type="checkbox"]+label {
        position: relative;
        margin: 0;
        padding: 14px;
        padding-left: 28px;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
}

#body-login form .errors { background:#fed7d7; border:1px solid #f00; list-style                                                                                             -position:inside; margin:0 0 2em; padding:1em; }
#body-login .success { background:#d7fed7; border:1px solid #0f0; width: 35%; ma                                                                                             rgin: 30px auto; padding:1em; text-align: center;}

#body-login #showAdvanced > img {
        padding: 4px;
        box-sizing: border-box;
}

#body-login p.info a, #body-login #showAdvanced {
        color: #fff;
}

#body-login #remember_login:hover+label,
#body-login #remember_login:focus+label,
#body-login p.info a:hover,
#body-login p.info a:focus  {
        opacity: .6;
}

/* Show password toggle */
#showadminpass, #showdbpass {
        position: absolute;
        right: 1em;
        top: .8em;
        float: right;
}
#showadminpass, #showdbpass, #personal-show {
        display: none;
}
#showadminpass + label, #showdbpass + label {
        right: 10px;
        bottom: 11px !important;
        margin: -14px !important;
        padding: 14px !important;
}
#showadminpass:checked + label, #showdbpass:checked + label, #personal-show:chec                                                                                             ked + label {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        opacity: .8;
}
#showadminpass + label, #showdbpass + label, #personal-show + label {
        position: absolute !important;
        height: 20px;
        width: 24px;
        background-image: url('../img/actions/toggle.svg');
        background-repeat: no-repeat;
        background-position: center;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        opacity: .3;
}
#showadminpass + label:before, #showdbpass + label:before, #personal-show + labe                                                                                             l:before {
        display: none;
}
#pass2, input[name="personal-password-clone"] {
        padding: .6em 2.5em .4em .4em;
        width: 8em;
}
#personal-show + label {
        height: 14px;
        margin-top: 14px;
        margin-left: -36px;
}
#passwordbutton {
        margin-left: .5em;
}

/* Database selector */
#databaseBackend legend {
        margin-bottom: .5rem;
}

#body-login form #selectDbType { text-align:center; margin: 0 !important; }
#body-login form #selectDbType .info {
        white-space: normal;
}
#body-login form #selectDbType label {
        position:static; margin:0 -3px 5px; padding:.4em;
        font-size:12px; background:#f8f8f8; color:#888; cursor:pointer;
        border: 1px solid #ddd;
}

#body-login form #selectDbType label span {
        cursor: pointer;
}

#body-login form #selectDbType label {
        background-color: #041e42;
}
#body-login form #selectDbType label.ui-state-hover, #body-login form #selectDbT                                                                                             ype label.ui-state-active { background-color:#4e85c8; }


/* Warnings and errors are the same */
#body-login .warning,
#body-login .update,
#body-login .error {
        display: block;
        padding: 10px;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        cursor: default;
        border: 1px solid rgba(255,255,255,.5);
        margin-bottom: 1rem;
}

#body-login .update {
        width: inherit;
        text-align: center;
}

#body-login .update .appList {
        list-style: disc;
        text-align: left;
        margin-left: 25px;
        margin-right: 25px;
}

#body-login .update img.float-spinner {
        float: left;
}

#body-user .warning, #body-settings .warning {
        margin-top: 8px;
        padding: 5px;
        background: #fdd;
        border-radius: 3px;
}

.warning legend,
.warning a,
.error a {
        color: #fff !important;
        font-weight: 600 !important;
}
.error a.button {
        color: #555 !important;
        display: inline-block;
        text-align: center;
}
.error pre {
        white-space: pre-wrap;
        text-align: left;
}

.error-wide .button {
        color: black !important;
}

.warning-input {
        border-color: #ce3702 !important;
}

/* Fixes for log in page, TODO should be removed some time */
/* 2021/04: lol */
#body-login .warning {
        text-align: center;
}
#body-login .warning legend {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
}
#body-login a.warning {
        cursor: pointer;
}

/* fixes for update page TODO should be fixed some time in a proper way */
/* this is just for an error while updating the ownCloud instance */
#body-login .updateProgress .error {
        margin-top: 10px;
        margin-bottom: 10px;
}

/* Alternative Logins */
form#alternative-logins {
        border-top: 1px solid rgba(255,255,255,0.8);
        padding-top: 16px;
}
#alternative-logins ul {text-align: center;}
#alternative-logins legend { margin-bottom:16px; }
#alternative-logins li {
        height:40px;
        display:inline-block;
        white-space:nowrap;
        width: 100%;
        margin-top: 1.2em;
}

#alternative-logins li:first-child {
        margin-top: 0;
}

#alternative-logins li a.button,
html #body-login input[type="submit"],
html #body-login button[type="submit"] {
        display: block;
        color: #ffffff;
        border-width: 1px;
        border-color: rgba(0,0,0,0);
        font-size: 1rem;
        font-weight: 600;
        background-color: #cd0202;
        transition: all 300ms ease 0ms;
        padding: 0.65rem;
        text-align: center;
        margin: 0;
        cursor: pointer;
}

#alternative-logins li a.button span,
html #body-login input[type="submit"] span,
html #body-login button[type="submit"] span {
        cursor: pointer;
}

#alternative-logins li a.button:hover,
html #body-login input[type="submit"]:hover,
html #body-login button[type="submit"]:hover {
        color: #ffffff;
        border-color: rgb(66, 116, 176);
        border-width: 1px;
        background-image: initial;
        background-color: rgb(66, 116, 176);
}

/* Log in and install button */
#body-login input {
        font-size: 1rem;
        margin: 0px;
        padding: 0.65rem;
        width: calc(100% - 1.3rem);
}

#remember_login {
        margin: 18px 5px 0 16px !important;
}
#body-login .remember-login-container {
        margin: 16px 0;
        text-align: center;
}

#body-login .v-align {
        padding: 2rem;
        border-radius: 5px;
        margin: 0 auto;
        background-color: rgba(1 2 2 / 83%);
        display: none;
}

#body-login.has-theme .v-align {
/*        background-color: unset;*/
}

/* Force constant vertical height for login box over all devices */
#body-login .wrapper {
        margin: 0 auto -70px;
        width: 100%;
        min-height: 100vh; /* fix IE11 */
        -ms-flex-direction: row !important;
        -ms-flex-pack: center !important;
        -ms-flex-align: center !important;
        display: flex !important;
        flex-direction: row !important;
        align-self: center !important;
        align-items: center !important;
}

@media all and (min-width: 600px) {
        #body-login .wrapper {
                min-width: calc(700px + 4rem);
                max-width: calc(700px + 4rem);
        }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        #body-login .wrapper {
                display: block !important;
        }
}


/* round profile photos */
.avatar,
.avatar img,
.avatardiv,
.avatardiv img {
        border-radius: 50%;
}
td.avatar {
        border-radius: 0;
}


#notification-container {
        position: absolute;
        top: 0;
        width: 100%;
        text-align: center;
        z-index: 8000;
        pointer-events: none;
}
#notification {
        pointer-events: auto;
        margin: 0 auto;
        max-width: 60%;
        z-index: 8000;
        background-color: #fc4;
        border: 0;
        padding: 1px 8px;
        display: none;
        position: relative;
        top: 0;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
        opacity: .9;
}
#notification span {
        cursor: pointer;
        margin-left: 1em;
}
#notification {
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 100px;
}
#notification .row {
        position: relative;
}
#notification .row .close {
        display: inline-block;
        vertical-align: middle;
        position: absolute;
        right: 0;
        top: 0;
}
#notification .row.closeable {
        padding-right: 20px;
}

tr .action:not(.permanent),
.selectedActions a {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
}
tr:hover .action,
tr:focus .action,
tr .action.permanent,
.selectedActions a {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        opacity: .5;
}
tr .action {
        width: 16px;
        height: 16px;
}
.header-action {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        opacity: .8;
}
tr:hover .action:hover,
tr:focus .action:focus,
.selectedActions a:hover,
.selectedActions a:focus,
.header-action:hover,
.header-action:focus {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
}
tbody tr:hover,
tbody tr:focus,
tbody tr:active {
        background-color: #f8f8f8;
}

code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono                                                                                             ", monospace; }

#quota {
        cursor: default;
        padding: 0 !important;
}
#quota div {
        padding: 0;
        background-color: rgb(220,220,220);
        font-weight: normal;
        white-space: nowrap;
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
        min-width: 1%;
        max-width: 100%;
}
#quotatext {padding:.6em 1em;}

#quota div.quota-warning {
        background-color: #fc4;
}

.pager { list-style:none; float:right; display:inline; margin:.7em 13em 0 0; }
.pager li { display:inline-block; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-s                                                                                             tate-default { overflow:hidden; text-overflow:ellipsis; }
.separator { display:inline; border-left:1px solid #d3d3d3; border-right:1px sol                                                                                             id #fff; height:10px; width:0px; margin:4px; }

a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin                                                                                             g-top:0px;padding-bottom:2px; text-decoration:none; margin-top:5px }

.exception{color:#000;}
.exception textarea{width:95%;height:200px;background:#ffe;border:0;}

.ui-icon-circle-triangle-e{ background-image:url('../img/actions/play-next.svg')                                                                                             ; }
.ui-icon-circle-triangle-w{ background-image:url('../img/actions/play-previous.s                                                                                             vg'); }

.ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff;                                                                                              }

/* ---- DIALOGS ---- */
#oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; }
#oc-dialog-filepicker-content .dirtree .home {
        background-image:url('../img/places/home.svg');
        background-repeat:no-repeat;
        background-position: left center;
        width: 30px;
        display: inline-block;
}
#oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer;                                                                                              }
#oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
#oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '                                                                                             >'; padding: 3px;}
#oc-dialog-filepicker-content .filelist {
        overflow-y:auto;
        height: 300px;
        background-color:white;
        width:100%;
}
#oc-dialog-filepicker-content .filelist li {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
}

#oc-dialog-filepicker-content .filelist div {
        display: flex;
        justify-content: space-between;
        width: 100%;
}

#oc-dialog-filepicker-content .filelist .filename {
        max-width: 60%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
}
#oc-dialog-filepicker-content .filelist img {
        margin: 2px 1em 0 4px;
        width: 32px;
        height: 32px;
}
#oc-dialog-filepicker-content .filelist .date {
        margin-right: 10px;
}

#oc-dialog-filepicker-content .filepicker_element_selected { background-color:li                                                                                             ghtblue;}
.ui-dialog {position:fixed !important;}
span.ui-icon {float: left; margin: 3px 7px 30px 0;}

.move2trash { /* decrease spinner size */
        width: 16px;
        height: 16px;
}

/* ---- TOOLTIPS ---- */
.extra-data {
        padding-right: 5px !important;
}
.tipsy-inner {
        max-width: 400px !important;
        overflow: hidden;
        text-overflow: ellipsis;
}

/* ---- TAGS ---- */
#tagsdialog .content {
        width: 100%; height: 280px;
}
#tagsdialog .scrollarea {
        overflow:auto; border:1px solid #ddd;
        width: 100%; height: 240px;
}
#tagsdialog .bottombuttons {
         width: 100%; height: 30px;
}
#tagsdialog .bottombuttons * { float:left;}
#tagsdialog .taglist li { background:#f8f8f8; padding:.3em .8em; white-space:now                                                                                             rap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-colo                                                                                             r 500ms; transition:background-color 500ms; }
#tagsdialog .taglist li:hover, #tagsdialog .taglist li:active { background:#eee;                                                                                              }
#tagsdialog .addinput { width: 90%; clear: both; }

/* ---- APP SETTINGS - LEGACY, DO NOT USE THE POPUP! ---- */
.popup {
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 0 10px #aaa;
        color: #3330;
        padding: 10px;
        position: fixed !important;
        z-index: 100;
}
.popup.topright { top:7em; right:1em; }
.popup.bottomleft { bottom:1em; left:33em; }
.popup .close { position:absolute; top:0.2em; right:0.2em; height:20px; width:20                                                                                             px; background:url('../img/actions/close.svg') no-repeat center; }
.popup h2 { font-size:20px; }
.arrow { border-bottom:10px solid white; border-left:10px solid transparent; bor                                                                                             der-right:10px solid transparent; display:block; height:0; position:absolute; wi                                                                                             dth:0; z-index:201; }
.arrow.left { left:-13px; bottom:1.2em; -webkit-transform:rotate(270deg); -ms-tr                                                                                             ansform:rotate(270deg); transform:rotate(270deg); }
.arrow.up { top:-8px; right:6px; }
.arrow.down { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); tr                                                                                             ansform:rotate(180deg); }


/* ---- BREADCRUMB ---- */
div.crumb {
        float: left;
        display: block;
        background-image: url('../img/breadcrumb.svg');
        background-repeat: no-repeat;
        background-position: right center;
        height: 44px;
        background-size: auto 24px;
}
div.crumb.hidden {
        display: none;
}
div.crumb a,
div.crumb span {
        position: relative;
        padding: 12px 24px 14px 17px;
        color: #555;
        display: flex;
}
div.crumb:first-child a {
        position: relative;
}
div.crumb.last {
        font-weight: 600;
        margin-right: 10px;
}
div.crumb a.ellipsislink {
        padding: 0 !important;
        position: relative;
        top: 8px !important;
}
div.crumb .img {
        background-position: 2px;
        background-repeat: no-repeat;
        padding-left: 26px;
}

/* some feedback for hover/tap on breadcrumbs */
div.crumb:hover,
div.crumb:focus,
div.crumb a:focus,
div.crumb:active {
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        opacity:.7;
}

.appear {
        opacity: 1;
        -webkit-transition: opacity 500ms ease 0s;
        -moz-transition: opacity 500ms ease 0s;
        -ms-transition: opacity 500ms ease 0s;
        -o-transition: opacity 500ms ease 0s;
        transition: opacity 500ms ease 0s;
}
.appear.transparent {
        opacity: 0;
}


/* public footer */
#body-public footer {
        position: relative;
        text-align: center;
}

#body-public footer .info {
        color: #777;
        text-align: center;
        margin: 0 auto;
}

#body-public footer .info a {
        color: #777;
        font-weight: 600;
        padding: 13px;
        margin: -13px;
        display: inline;
}


footer .info a {
        display: inline-block;
}

/* LEGACY FIX only - do not use fieldsets for settings */
fieldset.warning legend, fieldset.update legend {
        top: 18px;
        position: relative;
}
fieldset.warning legend + p, fieldset.update legend + p {
        margin-top: 12px;
}


/* for IE10 */
@-ms-viewport {
        width: device-width;
}

/* hidden input type=file field */
.hiddenuploadfield {
   width: 0;
   height: 0;
   opacity: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

@media only screen and (max-width: 1030px) {
    #body-login p.info {
        margin: 0 auto;
        padding-top: 35px;
    }
}