seafile light blue

seafile light blue

/**
 * depends on bootstrap
 *
 * html { box-sizing: border-box; }
 * body { background: #fff; }
 * p { margin-top:0; margin-bottom:1rem; }
 *
 **/

/**
 * CONTENTS
 *
 * Font Icons
 * icon-xx ...............Font Awesome 3.2.1 by Dave Gandy
 * sf2-icon-xx ...........seafile-font2
 *
 * Reset
 * tags ..................reset styles of tags
 *
 * Helper
 * common class ..........common class
 *
 * UI Widgets(ui widgets)
 * path
 * btn-group
 * paginator
 * caret
 * tabnav
 * jquery tabs
 * left-right-tabs
 * side-tabnav
 * (...)
 * messages
 * narrow-panel
 * new-narrow-panel
 * text-panel
 * tab-tabs
 * tab-popup
 * op-confirm ()
 * simplemodal
 * ui-autocomplete ()
 * article
 * obv-btn
 * sf-popover
 * user-item
 * sf-dropdown
 * discussions/comments
 * custom select2
 * custom magnificPopup
 *
 * Container
 * Container ......... common container styles
 *
 * Separate pages
 *
 */

/*
 * z-index:
 *    sf-popover:  20
 *
 */

/* Variable for the two main colors */

:root {
    --darkMain: #004B87;
    /* Main color for elements */
    --lightMain: #346f83;
    /* Second color, e. g. for some selected items */
    --textLM: #000000;
    /* Text color for elements with lightMain */
}

/****** icon-xx ********/

/* Font Awesome 3.2.1 by Dave Gandy - http://fortawesome.github.com/Font-Awesome */

@font-face {
    font-family: 'FontAwesome';
    src: url('font/fontawesome-webfont.eot?v=3.0.1');
    src: url('font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    vertical-align: baseline;
    speak: none;
}

.icon-cloud-download:before {
    content: "\f0ed";
}

.icon-download:before {
    content: "\f01a";
}

.icon-trash:before {
    content: "\f014";
}

.icon-refresh:before {
    content: "\f021";
}

.icon-plus:before {
    content: "\f067";
}

.icon-minus:before {
    content: "\f068";
}

.icon-pencil:before {
    content: "\f040";
}

.icon-remove:before {
    content: "\f00d";
}

.icon-star:before {
    content: "\f005";
}

.icon-star-empty:before {
    content: "\f006";
}

.icon-upload:before {
    content: "\f01b";
}

.icon-upload-alt:before {
    content: "\f093";
}

.icon-ban-circle:before {
    content: "\f05e";
}

.icon-plus-sign-alt:before {
    content: "\f0fe";
}

.icon-double-angle-left:before {
    content: "\f100";
}

.icon-double-angle-right:before {
    content: "\f101";
}

.icon-double-angle-up:before {
    content: "\f102";
}

.icon-double-angle-down:before {
    content: "\f103";
}

.icon-zoom-in:before {
    content: "\f00e";
}

.icon-zoom-out:before {
    content: "\f010";
}

.icon-caret-down:before {
    content: "\f0d7";
}

.icon-caret-up:before {
    content: "\f0d8";
}

.icon-caret-left:before {
    content: "\f0d9";
}

.icon-caret-right:before {
    content: "\f0da";
}

.icon-search:before {
    content: "\f002";
}

.icon-move:before {
    content: "\f047";
}

.icon-copy:before {
    content: "\f0c5";
}

.icon-lightbulb:before {
    content: "\f0eb";
}

.icon-chevron-left:before {
    content: "\f053";
}

.icon-chevron-right:before {
    content: "\f054";
}

.icon-question-sign:before {
    content: "\f059";
}

.icon-building:before {
    content: "\f0f7";
}

.icon-phone:before {
    content: "\f095";
}

.icon-magic:before {
    content: "\f0d0";
}

.icon-eye:before {
    content: "\f06e";
}

.icon-eye-slash:before {
    content: "\f070";
}

.icon-plus-square:before {
    content: "\f0fe";
}

.icon-envelope:before {
    content: "\f0e0";
}

.icon-ellipsis-vertical:before {
    content: "\f142";
}

.icon-building:before {
    content: "\f0f7";
}

.fa-1x {
    font-size: 1.3em;
}

/****** sf2-icon-xx ********/

@font-face {
    font-family: 'seafile-font2';
    src: url('sf_font2/seafile-font2.eot');
    src: url('sf_font2/seafile-font2.eot?#iefix') format('embedded-opentype'), url('sf_font2/seafile-font2.woff') format('woff'), url('sf_font2/seafile-font2.ttf') format('truetype'), url('sf_font2/seafile-font2.svg#seafile-font2') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="sf2-icon-"],
[class*=" sf2-icon-"] {
    font-family: 'seafile-font2';
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

.sf2-icon-histogram:before {
    content: "\e000";
}

.sf2-icon-wrench:before {
    content: "\e001";
}

.sf2-icon-clock:before {
    content: "\e002";
}

.sf2-icon-bell:before {
    content: "\e003";
}

.sf2-icon-contacts:before {
    content: "\e004";
}

.sf2-icon-recycle:before {
    content: "\e005";
}

.sf2-icon-delete:before {
    content: "\e006";
}

.sf2-icon-monitor:before {
    content: "\e007";
}

.sf2-icon-download:before {
    content: "\e008";
}

.sf2-icon-file:before {
    content: "\e009";
}

.sf2-icon-folder:before {
    content: "\e00a";
}

.sf2-icon-msgs:before {
    content: "\e00b";
}

.sf2-icon-group:before {
    content: "\e00c";
}

.sf2-icon-library:before {
    content: "\e00d";
}

.sf2-icon-link:before {
    content: "\e00e";
}

.sf2-icon-user:before {
    content: "\e00f";
}

.sf2-icon-organization:before {
    content: "\e010";
}

.sf2-icon-share:before {
    content: "\e011";
}

.sf2-icon-star:before {
    content: "\e012";
}

.sf2-icon-wiki:before {
    content: "\e013";
}

.sf2-icon-history:before {
    content: "\e014";
}

.sf2-icon-cog1:before {
    content: "\e015";
}

.sf2-icon-trash:before {
    content: "\e016";
}

.sf2-icon-security:before {
    content: "\e017";
}

.sf2-icon-edit:before {
    content: "\e018";
}

.sf2-icon-edit2:before {
    content: "\e018";
}

/* for some reason */

.sf2-icon-eye:before {
    content: "\e019";
}

.sf2-icon-caret-down:before {
    content: "\e01a";
}

.sf2-icon-cog2:before {
    content: "\e01b";
}

.sf2-icon-minus:before {
    content: "\e01c";
}

.sf2-icon-x1:before {
    content: "\e01d";
}

.sf2-icon-tick:before {
    content: "\e01e";
}

.sf2-icon-x2:before {
    content: "\e01f";
}

.sf2-icon-user2:before {
    content: "\e020";
}

.sf2-icon-msgs2:before {
    content: "\e021";
}

/*.sf2-icon-group-settings:before { content:"\e022"; }*/

.sf2-icon-comment:before {
    content: "\e023";
}

.sf2-icon-wiki2:before {
    content: "\e024";
}

.sf2-icon-grid-view:before {
    content: "\e025";
}

.sf2-icon-list-view:before {
    content: "\e026";
}

.sf2-icon-plus:before {
    content: "\e027";
}

.sf2-icon-copy:before {
    content: "\e028";
}

.sf2-icon-move:before {
    content: "\e029";
}

.sf2-icon-reply:before {
    content: "\e02a";
}

.sf2-icon-invite:before {
    content: "\e02b";
}

.sf2-icon-lock:before {
    content: "\e02c";
}

.sf2-icon-unlock:before {
    content: "\e02d";
}

.sf2-icon-admin-log:before {
    content: "\e02e";
}

.sf2-icon-info:before {
    content: "\e02f";
}

.sf2-icon-logout:before {
    content: "\e030";
}

.sf2-icon-menu:before {
    content: "\e031";
}

.sf2-icon-more:before {
    content: "\e032";
}

.sf2-icon-plus2:before {
    content: "\e033";
}

.sf2-icon-upload:before {
    content: "\e034";
}

.sf2-icon-x3:before {
    content: "\e035";
}

/******* tags **********/

html,
body {
    height: 100%;
    overflow: hidden;
}

body,
ul,
ol,
li,
dl,
dt,
dd,
pre,
blockquote,
form,
input,
textarea,
select,
button,
img {
    padding: 0;
    margin: 0;
}

body,
input,
textarea,
button,
select {
    font: 13px/1.5 Arial, Helvetica, sans-serif;
    color: #333;
    word-wrap: break-word;
}

input,
button,
select {
    line-height: 19px;
    /*for ff*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.5;
    /* overwrite bootstrap */
}

h1 {
    font-size: 1.9em;
}

h2 {
    font-size: 1.5em;
    color: #222;
    font-weight: bold;
}

h3 {
    font-size: 16px;
    color: #322;
    font-weight: normal;
}

h4 {
    font-size: 1.1em;
    color: #222;
    font-weight: normal;
}

h5,
h6 {
    font-size: 1em;
}

ul {
    list-style: none;
}

dl {
    margin: 1.5em 0;
}

dt {
    color: #666;
    margin: 24px 0 2px;
    font-weight: normal;
}

dd {
    margin-bottom: .8em;
    color: #222;
}

a {
    color: var(--darkMain);
    text-decoration: none;
    font-weight: bold;
}

a.normal {
    font-weight: normal;
}

a:focus,
a:hover {
    color: var(--darkMain);
}

a.table-sort-op {
    color: inherit;
    font-weight: normal;
    display: block;
}

a.mobile-table-sort-op {
    display: inline-block;
    margin: 0 0 0 10px;
}

a.table-sort-op:hover,
a.table-sort-op:focus {
    outline: none;
    text-decoration: none;
}

img {
    border: none;
}

textarea {
    overflow: auto;
    /* rm default vertical scrollbar in ie */
    resize: vertical;
    /* for drag */
    outline: 0;
}

textarea,
input {
    border: 1px solid #ccc;
}

input {
    margin: 3px 0;
}

input,
button {
    display: inline-block;
    /*for ie*/
}

input[type=text],
input[type=password] {
    box-sizing: content-box;
    height: 22px;
}

select,
button {
    box-sizing: border-box;
}

button,
input[type=submit],
input[type=button],
input.submit,
.sf-btn-link,
.fileinput-button,
select {
    padding: 5px 6px;
    background: -webkit-linear-gradient(top, #fafafb, #eeeeee);
    background: -moz-linear-gradient(top, #fafafb, #eeeeee);
    background: linear-gradient(top, #fafafb, #eeeeee);
    border: 1px solid #c5c5c5;
    border-radius: 2px;
}

.sf-btn-link {
    display: inline-block;
    color: #333;
    line-height: 19px;
    text-decoration: none;
    font-weight: normal;
}

.big-btn-link {
    font-size: 14px;
    line-height: 1.5;
    padding: 6px 20px;
    border-radius: 3px;
}

.sf-btn-link:hover {
    color: #333;
    text-decoration: none;
}

input[type=radio] {
    border: 0;
    /*for ie*/
}

input:focus,
button:focus,
select:focus,
textarea:focus {
    border-color: #66afe9;
    outline: none;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: #66afe9 auto 1px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /*for input type="number" in chrome: to hide up/download arrow*/
    -webkit-appearance: none;
    margin: 0;
}

input::-moz-focus-inner,
button::-moz-focus-inner {
    /*Remove button padding in FF*/
    border: 0;
    padding: 0;
}

input[type=submit],
input.submit,
button.submit {
    margin-top: 8px;
}

input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover,
button:hover,
.sf-btn-link:hover,
.fileinput-button:hover {
    cursor: pointer;
    background: #fff;
}

input[type="file"] {
    border: none;
    height: 24px;
    line-height: 24px;
}

label {
    display: inline-block;
    margin: 4px 0px;
}

iframe {
    display: block;
    width: 100%;
}

pre,
code {
    font-family: Consolas, "Liberation Mono", Courier, monospace;
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

table {
    width: 100%;
    margin: 8px 0 40px;
}

caption {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: .6em;
}

th {
    text-align: left;
    font-weight: normal;
    color: #9c9c9c;
}

th,
td {
    padding: 5px 3px;
    border-bottom: 1px solid #eee;
}

td {
    color: #333;
    font-size: 14px;
    word-break: break-all;
    /* mainly for lib/folder/file name */
}

table img {
    vertical-align: middle;
}

/* custom scrollbar */

::-webkit-scrollbar {
    height: 9px;
    width: 9px;
}

::-webkit-scrollbar-button {
    display: block;
    height: 4px;
}

::-webkit-scrollbar-track-piece {
    background: #e9e9eb;
}

::-webkit-scrollbar-track-piece:vertical:start {
    border-radius: 5px 5px 0 0;
}

::-webkit-scrollbar-track-piece:vertical:end {
    border-radius: 0 0 5px 5px;
}

::-webkit-scrollbar-track-piece:horizontal:start {
    border-radius: 5px 0 0 5px;
}

::-webkit-scrollbar-track-piece:horizontal:end {
    border-radius: 0 5px 5px 0;
}

::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal {
    background: #ccc;
    border-radius: 5px;
    display: block;
}

/********** common class ***********/

.fleft {
    float: left;
}

.fright {
    float: right;
}

.clear {
    clear: both;
}

.d-flex {
    display: flex;
}

.fd-col {
    flex-direction: column;
}

.flex-auto {
    flex: auto;
}

.flex-1 {
    flex: 1;
}

.show {
    display: block;
}

.inline-block {
    display: inline-block;
}

.hide {
    display: none;
}

.error {
    color: red;
}

.errorlist {
    color: red;
}

.error-tip {
    text-align: center;
    margin-top: 5em;
}

.ovhd {
    overflow: hidden;
}

.ov-auto {
    overflow: auto;
}

.ov-vb {
    overflow: visible;
}

.bold {
    font-weight: bold;
}

.no-bold {
    font-weight: normal;
}

.w100 {
    width: 100%;
}

.h100 {
    height: 100%;
}

.vh {
    visibility: hidden;
}

.vam {
    vertical-align: middle;
}

.hl {
    background-color: #f8f8f8;
}

/* highlight */

.tip {
    color: #808080;
    font-size: 12px;
}

.tick-green {
    color: green;
}

.txt-before-btn {
    margin-bottom: 10px;
}

.strip-tip {
    padding: 3px 0;
    background: #fddaa4;
    color: #1f0600;
    text-align: center;
}

.top-bar {
    padding: 7px 4px;
    background: #fff1a8;
    text-align: center;
    border-bottom: 1px solid #ccc;
    margin: 0;
    z-index: 30;
}

.top-bar-click {
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
    color: #15c;
}

.outstanding-tip {
    color: red;
}

.label {
    color: #333;
    font-size: 12px;
    font-style: normal;
}

.italic {
    font-style: italic;
}

.alc {
    text-align: center;
}

.cspt {
    cursor: pointer;
}

.pos-rel {
    position: relative;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/** for input, textarea in form **/

/* e.g repo-create */

.input,
.textarea {
    width: 260px;
    padding: 2px 3px;
    border-radius: 2px;
    margin-bottom: 5px;
}

.textarea {
    height: 70px;
}

.repo-meta-info,
.dirent-meta-info {
    display: inline-block;
    margin-right: 8px;
    color: #666;
    font-size: 12px;
}

/* loading implemented with css  */

@-moz-keyframes loading {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes loading {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loading {
    0% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loading-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    border: 2px solid #eee;
    border-left-color: #aaa;
    border-radius: 50%;
    -moz-animation: loading 0.9s infinite linear;
    -webkit-animation: loading 0.9s infinite linear;
    animation: loading 0.9s infinite linear;
}

.loading-tip {
    display: block;
    margin: 1em auto;
}

.op,
.more {
    font-weight: normal;
    font-size: 12px;
}

.op {
    font-size: 13px;
    padding-right: 2px;
}

.op-target {
    color: var(--darkMain);
    word-wrap: break-word;
}

.op-icon {
    font-size: 20px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    margin-right: 3px;
    vertical-align: middle;
}

.op-icon.sf2-x,
.op-icon.sf2-x:hover {
    color: var(--darkMain);
}

.op-icon.sf2-x:hover,
.op-icon.sf2-x:focus {
    text-decoration: underline;
}

.sf2-icon-edit {
    font-size: 16px;
    opacity: 0.7;
}

.sf2-icon-edit:hover {
    opacity: 1;
}

a.op-icon:focus {
    outline: none;
    text-decoration: none;
}

.op-icon:hover {
    /** for <a> **/
    color: #888;
    text-decoration: none;
}

.more-op-icon {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
}

@media (max-width:767px) {
    .more-op-icon {
        padding: 6px;
        margin: 0;
    }
}

.full-width-btn {
    width: 100%;
    padding: .5em 0;
    background: #efefef;
    border: 0;
    color: #777;
}

.full-width-btn:hover {
    color: #000;
    background: #dfdfdf;
}

.no-deco,
.no-deco:hover,
.no-deco:focus {
    text-decoration: none;
}

.input-disabled {
    /* for type="password/text" etc*/
    background: #ebebe4;
}

.btn-disabled {
    /*for <input type="submit" />, <button>*/
    color: #999;
}

.btn-disabled:hover,
input.btn-disabled:hover {
    /*for input*/
    cursor: default;
    background: #efefef;
}

.modalCloseImg {
    background: transparent url('../img/bg.png') no-repeat scroll 0 0;
}

.add {
    color: #909090;
    margin-right: 3px;
}

.jstree a {
    font-weight: normal;
}

.placeholder {
    /*for ie */
    color: #aaa;
    line-height: 1.5;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    /* for FF */
    color: #aaa;
    line-height: 1.5;
}

::-webkit-input-placeholder {
    /*for chrome, safari */
    line-height: 1.5;
}

.avatar {
    border-radius: 3px;
}

.avatar-circle {
    border-radius: 1000px;
}

.empty-tips {
    padding: 30px 40px;
    background-color: #FAFAFA;
    border: solid 1px #DDD;
    border-radius: 3px;
    box-shadow: inset 0 0 8px #EEE;
    margin-top: 5.5em;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.split {
    border-left: 2px solid #888;
    padding-left: 1em;
    margin-left: 1em;
}

.menu-inner-divider {
    margin: 4px 0;
    border-top: 1px solid #ddd;
}

.shared-link {
    background: transparent;
    border: 0;
}

/**** btn with link styles ****/

.sf-link-btn {
    color: var(--darkMain);
    border: none;
    padding: 0;
    background: none;
}

.sf-link-btn:focus,
.sf-link-btn:hover {
    color: var(--darkMain);
    background: none;
    text-decoration: underline;
}

.small-hd {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    background: #f7f7f7;
    border-radius: 2px;
    margin: 15px 0;
}

.small-hd-heading {
    margin: 0;
    line-height: 29px;
}

/*******ui widgets**************/

/**** path ****/

.path-bar {
    font-size: 1rem;
    margin: 0;
    /* for merge with tabs */
    padding: 0.6rem 0rem 0.5rem;
    word-break: break-all;
}

.path-split {
    display: inline-block;
    padding: 0 5px;
    color: #818a91;
}

/**** btn-group ****/

.sf-btn-group {}

.sf-btn-group-btn {
    float: left;
    padding: 5px 10px;
    margin: 0;
    background: #fff;
    border-radius: 0;
    border-right-width: 0;
}

.sf-btn-group-btn-first {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.sf-btn-group-btn-last {
    border-right-width: 1px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.sf-btn-group-btn:focus {
    border-color: #c5c5c5;
}

.sf-btn-group-btn-cur,
.sf-btn-group-btn:hover {
    background: #efefef;
}

.sf2-icon-edit.sf-btn-group-btn {
    font-size: 20px;
    opacity: 1;
}

/**** paginator ****/

#paginator {
    text-align: center;
    margin: 10px 0;
    font-size: 14px;
}

#paginator .pg {
    font-weight: normal;
    margin: 0 3px;
}

#paginator .prev {
    margin-right: 30px;
}

#paginator .prev,
#paginator .next {
    text-decoration: underline;
}

#paginator .next {
    margin-left: 30px;
}

/**** caret ****/

.outer-caret,
.inner-caret {
    height: 0;
    width: 0;
    border-width: 14px 14px 0;
    /* default: arrow to the bottom */
    border-style: dashed solid;
    /* 'dashed' for firefox */
    border-color: #CBCBCB transparent;
    z-index: 100;
    margin: 0 auto;
}

.inner-caret {
    border-top-color: #fff;
    position: relative;
    top: -15px;
    left: -14px;
}

.up-outer-caret,
.up-outer-caret .inner-caret {
    border-width: 0 10px 10px;
}

.up-outer-caret .inner-caret {
    border-bottom-color: #fff;
    top: 1px;
    left: -10px;
}

.up-outer-caret {
    position: absolute;
    top: -11px;
}

.right-outer-caret,
.right-outer-caret .inner-caret {
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #CBCBCB;
}

.right-outer-caret {
    position: absolute;
    right: -11px;
}

.right-outer-caret .inner-caret {
    border-left-color: #fff;
    top: -10px;
    left: -11px;
}

.bottom-outer-caret,
.bottom-outer-caret .inner-caret {
    border-width: 10px 10px 0;
}

.bottom-outer-caret {
    position: absolute;
    bottom: -11px;
}

.bottom-outer-caret .inner-caret {
    border-top-color: #fff;
    top: -11px;
    left: -10px;
}

/**** tabnav *****/

.tabnav-tabs,
.tabnav-tab {
    display: inline-block;
}

.tabnav-tabs,
.tabnav-tab {
    *display: inline;
}

/**** jquery tabs ****/

.ui-tabs {
    position: relative;
    padding: .2em;
    zoom: 1;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    padding: 1em 1.4em;
}

.ui-tabs .ui-tabs-hide {
    display: none;
}

/**** left-right-tabs ****/

.nav-con-tabs {
    padding: 0;
    overflow: hidden;
}

@media (max-width:767px) {
    .nav-con-tabs-nav {
        background: #f2f2f2;
        padding: 2px;
        margin-bottom: 10px;
    }
    .nav-con-tabs-nav .tab {
        display: inline-block;
        margin: 3px 5px;
    }
    .nav-con-tabs-nav a {
        display: inline-block;
        padding: 3px 3px;
        color: #747476;
        font-size: 14px;
        outline: none;
        /* to overwrite webkit ':focus' style */
        text-decoration: none;
        border-bottom: 3px solid transparent;
    }
    .nav-con-tabs-nav a:hover,
    .nav-con-tabs-nav .ui-state-active a,
    .nav-con-tabs-nav .ui-state-active a:hover {
        color: var(--darkMain);
        border-color: var(--darkMain);
        text-decoration: none;
    }
}

@media (min-width:768px) {
    .nav-con-tabs-nav {
        float: left;
        margin-right: 15px;
    }
    .nav-con-tabs-content {
        float: right;
        width: 550px;
        padding: 0 1.4em 1em;
        min-height: 150px;
        max-height: 250px;
        overflow: auto;
    }
    .nav-con-tabs-nav a {
        display: block;
        padding: 5px 4px;
        border-radius: 3px;
        color: #747476;
        font-size: 14px;
        outline: none;
        /* to overwrite webkit ':focus' style */
        text-decoration: none;
    }
    .nav-con-tabs-nav a:hover {
        text-decoration: none;
        background: var(--lightMain);
        color: var(--textLM);
    }
    .nav-con-tabs-nav .ui-state-active a,
    .nav-con-tabs-nav .ui-state-active a:hover {
        background: var(--darkMain);
        color: #fff;
    }
}

.nav-con-tabs .tabs-panel {
    padding: 0;
}

/**** side-tabnav ****/

.side-textnav .hd,
.side-info .hd {
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1em;
}

@media (max-width: 767px) {
    .side-nav {
        background: #f8f8f8;
        width: 300px;
        position: fixed;
        left: -300px;
        top: 0;
        bottom: 0;
        z-index: 1;
        box-shadow: 0 0 4px #ccc;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .side-nav-shown {
        left: 0;
    }
}

.side-nav {
    padding: 20px;
    overflow: hidden;
    border-right: 1px solid #eee;
}

.side-nav:hover {
    overflow-y: auto;
}

.home-side-nav {
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* make .side-nav-footer on the bottom */
    overflow: hidden;
    /* for ff */
    border-right: 1px solid #eee;
}

.side-nav-con {
    overflow: hidden;
    padding: 20px;
}

.side-nav-con:hover {
    overflow-y: auto;
}

.side-nav-footer {
    display: flex;
    flex-shrink: 0;
    padding: 12px 20px 16px;
    background: #f8f8f8;
    border-top: 1px solid #eee;
}

.side-nav-footer .item {
    color: #666;
    font-weight: normal;
    margin-right: 10px;
}

.side-nav-footer .last-item {
    margin-left: auto;
}

.side-tabnav .hd {
    margin-bottom: 0.5em;
}

.side-tabnav h3.hd,
.side-tabnav .hd h3 {
    color: var(--darkMain);
}

.side-tabnav .hd h3 {
    margin-bottom: 0;
}

.side-tabnav .hd .avatar {
    /*for 'group'*/
    vertical-align: middle;
    border-radius: 1000px;
    margin: 0 6px 0 4px;
}

.side-tabnav .grp-name {
    /*for 'group'*/
    display: inline-block;
    max-width: 130px;
    font-weight: normal;
}

.side-tabnav-tabs {
    margin-bottom: 1em;
}

.side-tabnav-tabs .tab {
    border-radius: 2px;
    overflow: hidden;
}

.side-tabnav-tabs .tab a {
    /* for IE 11: no border-radius here */
    display: block;
    font-size: 15px;
    padding: 4px 4px 4px 0;
    color: #333;
    font-weight: normal;
}

.side-tabnav-tabs .tab a:focus {
    text-decoration: none;
}

.side-tabnav-tabs .tab ul a {
    font-size: 14px;
    line-height: 24px;
    padding: 0;
}

.side-tabnav-tabs .tab a:hover {
    background-color: var(--lightMain);
    text-decoration: none;
}

.side-tabnav-tabs .tab [class^="sf2-icon-"] {
    display: inline-block;
    width: 42px;
    margin-right: 5px;
    text-align: center;
    vertical-align: middle;
    font-size: 24px;
    line-height: 1;
    color: #999;
}

.side-nav-toggle {
    font-size: 1.5rem;
    color: #999;
    margin-right: 15px;
}

#group-nav .sharp,
#share-admin-nav .sharp {
    display: inline-block;
    width: 42px;
    margin-right: 5px;
    text-align: right;
    color: #aaa;
}

#group-nav .toggle-icon,
#share-admin-nav .toggle-icon {
    color: #999;
}

.side-tabnav-tabs .tab-cur a,
.side-tabnav-tabs .tab-cur a:hover {
    background-color: var(--darkMain);
}

.side-tabnav-tabs .tab-cur [class^="sf2-icon-"],
.side-tabnav-tabs .tab-cur a,
#group-nav .tab-cur .sharp,
#share-admin-nav .tab-cur .sharp {
    color: #fff;
}

.side-tabnav-tabs .tab-cur a {
    font-weight: bold;
}

.side-textnav .hd {
    margin: 2em 0 .5em;
}

.side-textnav-tabs .tab a {
    display: block;
    padding: 10px 0;
    font-weight: normal;
    color: #999;
    border-bottom: 1px solid #eee;
    margin-bottom: 3px;
}

.side-textnav-tabs .tab-cur a,
.side-textnav-tabs .tab a:hover {
    color: var(--darkMain);
    text-decoration: none;
}

.side-info dt {
    margin-top: 15px;
}

.side-search-form {
    margin-top: 25px;
}

.side-search-form .input {
    width: calc(100% - 12px);
    padding: 2px 5px;
    background: #fafafa;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

.side-search-form .input:focus {
    background: #fff;
}

/**** checkbox ****/

.checkbox-label {
    display: block;
}

/**** details-side-panel ****/

.details-panel {
    display: flex;
    flex-direction: column;
}

@media (max-width:767px) {
    .details-panel {
        width: 100%;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
    }
}

@media (min-width:768px) {
    .details-panel {
        width: 320px;
        border-left: 1px solid #e8e8e8;
    }
}

.details-panel-hd {
    background: #f8f8f8;
    padding: 10px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
}

.details-panel-title {
    text-align: center;
    margin: 0;
    flex: auto;
}

.details-panel-con {
    overflow-x: hidden;
    /* for mobile */
    overflow-y: auto;
    flex: auto;
}

.details-panel-item-name {
    display: inline-block;
    max-width: calc(100% - 24px);
}

.details-panel-img-container {
    text-align: center;
    height: 160px;
    padding: 6px 0;
}

.details-panel-img-container .thumbnail {
    max-width: calc(100% - 4px);
    /* `-4px` for full width thumbnail */
    max-height: 100%;
}

.details-panel-text-info-container {
    padding: 10px 20px;
}

.details-panel-text-info-container table {
    margin: 0;
}

.details-panel-text-info-container th,
.details-panel-text-info-container td {
    border: none;
}

/**** comments-panel ****/

/* such as group-discussions */

.comments-panel {
    display: flex;
    flex-direction: column;
}

@media (max-width:767px) {
    .comments-panel {
        width: 100%;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
    }
}

@media (min-width:768px) {
    .comments-panel {
        width: 320px;
        border-left: 1px solid #e8e8e8;
    }
}

.comments-panel-hd {
    background: #f8f8f8;
    padding: 10px;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
    display: flex;
}

.comments-panel-title {
    flex: auto;
    text-align: center;
    margin: 0;
}

.comments-panel-con {
    overflow-y: auto;
}

.comments-panel-footer {
    margin-top: auto;
}

.comments-panel-footer .msg-form {
    border-top: 1px solid #e8e8e8;
}

/**** messages ****/

.messages {
    position: fixed;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 999;
    /* for repo.html: to show on top of fixed-hd */
    -webkit-transition: top 0.5s ease;
    -moz-transition: top 0.5s ease;
    transition: top 0.5s ease;
}

.messages .info {
    padding: 5px;
    background: #f9edbe;
    margin: 0;
}

.messages .success {
    padding: 5px;
    background: #C4ECA9;
    margin: 0;
}

.messages .error {
    padding: 5px;
    background: #FDF;
    margin: 0;
    color: #000;
}

/***** header  *****/

.header-bar {
    padding: 9px 10px;
    background: #f2f2f2;
    margin-bottom: .5em;
    border-radius: 2px;
    padding-bottom: 0;
    height: 48px;
    overflow: hidden;
}

.header-bar h3 {
    line-height: 30px;
}

/**** narrow-panel ****/

.narrow-panel {
    width: 320px;
    min-height: 15em;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 5em auto 0;
}

.narrow-panel h2,
.narrow-panel h3 {
    margin: 0 0 0.9em;
    border-bottom: 1px solid #ddd;
}

.narrow-panel h2 {
    font-size: 1.3em;
}

.narrow-panel input {
    width: 312px;
    padding: 2px 3px;
    border-radius: 2px;
    margin: 0 0 0.6em;
}

.narrow-panel input.submit {
    width: auto;
    /*for fr,de etc*/
    height: 28px;
    padding: 4px 5px;
    margin: 8px 0 0;
}

.narrow-panel .note {
    color: #666666;
    font-size: 11px;
    margin: 2px 0 5px;
}

/**** new-narrow-panel  ****/

.new-narrow-panel {
    width: 388px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    box-shadow: 0 3px 2px #f5f5f5;
    margin: 5em auto;
}

@media (max-width: 387px) {
    .new-narrow-panel {
        width: 100%;
    }
}

.new-narrow-panel .hd {
    color: #fff;
    font-size: 16px;
    padding: 5px 20px;
    background: var(--darkMain);
    border-bottom: 1px solid #d5d5d5;
}

.new-narrow-panel .con {
    padding: 30px 0 60px;
    width: 268px;
    margin: 0 auto;
}

.new-narrow-panel .input {
    font-size: 14px;
    margin: 5px 0 20px;
}

/**** wide panel ****/

/* e.g. repo decrypt page */

.wide-panel {
    width: 928px;
    padding: 10px 10px 15px;
    border: 1px solid #DDD;
    border-radius: 3px;
    margin: 2em auto 0;
}

/**** text-panel ****/

/* e.g. logout */

.text-panel {
    font-size: 16px;
    text-align: center;
    padding-top: 7em;
}

/**** tab-tabs ****/

/* tabs in tab, e.g. myhome libs */

.tab-tabs,
.tab-popup-tabs {
    font-size: 1em;
    padding: 0;
    border: 0;
    min-height: 150px;
}

.tab-tabs {
    margin-bottom: 75px;
}

.tab-tabs .tab-tabs-nav {
    padding-top: 0;
}

.cur-view-path .tab-tabs-nav {
    font-size: 15px;
}

.tab-tabs-nav .tab {
    float: left;
    border: 0;
    background: none;
}

.tab-tabs-nav .tab.long-tab {
    margin-left: .4em;
}

.tab-tabs-nav .tab .a {
    color: #8A948F;
    font-weight: normal;
    padding: .3em 0;
    margin-right: 0.6em;
}

.tab-tabs-nav .ui-state-active .a {
    color: #DD4B39;
    border-bottom: 2px solid #DD4B39;
}

.tab-tabs-nav .tab .a:hover {
    color: #DD4B39;
}

.cur-view-path .tab-tabs-nav .ui-state-active .a,
.cur-view-path .tab-tabs-nav .a:hover {
    color: var(--darkMain);
    text-decoration: none;
    border-bottom-color: var(--darkMain);
}

.tab-tabs .ui-tabs-panel {
    padding: 0;
}

/**** tab-popup ****/

.tab-popup {
    min-width: 400px;
    width: auto;
    /*for 'long' lang*/
    padding-top: 10px;
}

.tab-popup .hd {
    padding-left: 12px;
}

.tab-popup-tabs .tab-popup-tabs-nav {
    height: 30px;
    padding: 0 0 0 12px;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
}

.tab-popup-tabs-nav .tab {
    display: inline-block;
}

.tab-popup-tabs-nav .tab .a {
    color: #000;
    font-size: 15px;
    line-height: 16px;
    display: inline-block;
    padding: 6px 13px 5px;
    border-bottom: 3px solid transparent;
    margin-right: 5px;
}

.tab-popup-tabs-nav .ui-state-active .a,
.tab-popup-tabs-nav .tab .a:hover {
    color: var(--darkMain);
    text-decoration: none;
    border-bottom-color: var(--darkMain);
}

.tab-popup-tabs .ui-tabs-panel .option-list {
    max-height: 200px;
    overflow: auto;
    margin-bottom: 5px;
    position: relative;
    /* to fix ie7 'scroll position' problem */
}

.tab-popup .ui-state-active a {
    border-radius: 3px 3px 0 0;
}

.tab-popup .bot {
    padding: 1em 1.4em;
    border-top: 1px solid #ddd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.tab-popup .tip {
    margin: 0;
}

/**** op confirm popup ****/

.op-confirm {
    position: absolute;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    z-index: 10;
}

.op-confirm button {
    margin-right: 8px;
}

/**** simplemodal ****/

#basic-modal-content {
    display: none;
}

#simplemodal-overlay {
    background-color: #000;
}

#simplemodal-container {
    padding: 20px;
    background-color: #fcfcfc;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

#simplemodal-container a {
    font-weight: normal;
}

#simplemodal-container table {
    margin: 0;
}

.modalCloseImg {
    position: absolute;
    width: 28px;
    height: 28px;
    background-position: 0 -1173px;
    cursor: pointer;
    top: -14px;
    right: -14px;
    z-index: 3200;
}

#simplemodal-container h3 {
    font-size: 1.5em;
    word-wrap: break-word;
    margin: 0 0 10px;
}

#simplemodal-container h3,
#simplemodal-container h4,
#simplemodal-container label {
    font-weight: bold;
}

#simplemodal-container label {
    margin: 8px 0 4px;
}

#simplemodal-container .radio-item,
#simplemodal-container .checkbox-option {
    font-weight: normal;
}

#simplemodal-container .radio-item,
#simplemodal-container .checkbox-label {
    margin: 4px 0;
}

.simplemodal-close {
    margin-left: 5px;
}

#confirm-popup {
    min-width: 255px;
}

/**** ui-autocomplete *****/

.ui-autocomplete {
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    overflow: auto;
}

.ui-menu .ui-menu-item a {
    display: block;
    padding: .2em .4em;
    font-size: 1.1em;
    line-height: 1.5;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px;
    zoom: 1;
}

.ui-menu .ui-menu-item a.ui-state-hover {
    border-color: #fbcb09;
    background: #fdf5ce;
    color: #c77405;
}

/**** article ****/

.article {
    padding: 40px 200px 40px 60px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
    margin: 1.2em 0 0.4em;
    color: #333;
    font-weight: bold;
}

.article h1+p,
.article h2+p,
.article h3+p,
.article h4+p,
.article h5+p,
.article h6+p,
.article h1+pre,
.article h2+pre,
.article h3+pre,
.article h4+pre,
.article h5+pre,
.article h6+pre,
.article h1+ul,
.article h2+ul,
.article h3+ul,
.article h4+ul,
.article h5+ul,
.article h6+ul,
.article h1+ol,
.article h2+ol,
.article h3+ol,
.article h4+ol,
.article h5+ol,
.article h6+ol {
    margin-top: 0;
}

.article p {
    margin: 0.8em 0;
}

.article ul {
    list-style-type: disc;
}

.article ul,
.article ol {
    padding-left: 2em;
    margin: 0.5em 0;
}

.article code {
    font-size: 12px;
    white-space: pre-wrap;
    padding: 1px 5px 0;
    background-color: #F8F8F8;
    border: 1px solid #dadada;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    margin: 0 2px;
}

.article pre {
    font-size: 13px;
    padding: 5px 10px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin: 1em 0;
}

.article pre code {
    white-space: pre-wrap;
    padding: 0;
    margin: 0;
    border: none;
}

.article a {
    font-weight: normal;
}

.article blockquote {
    color: #777;
    padding: 0 15px;
    border-left: 4px solid #DDD;
    margin: 1.2em 0;
}

.article table {
    table-layout: auto;
    width: auto;
    margin: 0.8em 0;
}

.article tr:nth-child(2n) {
    background-color: #F8F8F8;
}

.article th,
.article td {
    padding: 6px 13px;
    border: 1px solid #ccc;
}

/**** obv-btn ****/

/* e.g. download btn in shared file/dir */

.obv-btn {
    display: inline-block;
    color: #fff;
    padding: 4px 10px;
    background: #004B87;
    border: 1px solid #346f83;
    border-radius: 3px;
}

.obv-btn:hover {
    color: #fff;
    text-decoration: none;
}

/**** sf-popover ****/

/* e.g. top notice popup, group members popup */

.sf-popover-container {
    position: relative;
}

.sf-popover {
    width: 240px;
    background: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    box-shadow: 0 0 4px #ccc;
    position: absolute;
    z-index: 20;
}

.sf-popover-hd {
    padding: 5px 0 3px;
    border-bottom: 1px solid #dfdfe1;
    margin: 0 10px;
}

.sf-popover-title {
    text-align: center;
}

.sf-popover-close {
    font-size: 16px;
    color: #b9b9b9;
    margin: 4px 0 0;
}

.sf-popover-con {
    padding: 0 10px;
    overflow: auto;
}

a.sf-popover-item {
    display: block;
    color: #444;
    font-weight: normal;
    line-height: 31px;
    text-decoration: none;
    padding: 0 10px;
    margin: 5px -10px;
}

/**** user-item ****/

/* e.g. group member in 'group members' panel */

.user-item {
    padding: 0 10px;
    margin: 5px -10px;
}

.user-item .txt {
    margin-left: 40px;
}

.user-item .txt-item {
    margin: 0;
}

/**** sf-dropdown ******/

.sf-dropdown {
    position: relative;
}

.sf-dropdown-inline {
    display: inline-block;
}

button.sf-dropdown-toggle:focus {
    background-color: #ddd !important;
    outline: none;
}

.sf-dropdown-menu {
    position: absolute;
    background: #fff;
    padding: 6px 1px;
    margin: 2px 0 0;
    border: 1px solid rgba(34, 36, 38, .15);
    border-radius: 3px;
    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, .15);
    z-index: 10;
}

.sf-dropdown-menu li a,
.sf-dropdown-menu a {
    display: block;
    padding: 4px 12px;
    min-width: 130px;
    white-space: nowrap;
    color: #444;
    font-weight: normal;
}

.sf-dropdown-menu a:hover {
    background: var(--lightMain);
    text-decoration: none;
    color: var(--textLM);
}

/**** discussions/comments ****/

.msg {
    padding: 5px 10px;
}

.msg-body {
    margin-left: 44px;
}

.msg-op {
    color: #aaa;
    font-size: 18px;
}

.msg-username {
    display: inline-block;
    vertical-align: bottom;
    max-width: 30%;
}

.msg-time {
    font-size: 11px;
    color: #999;
    margin-left: 5px;
}

.msg-form {
    padding: 10px;
    background: #f2f2f2;
    border-top: 1px solid #c9c9c9;
}

.msg-input {
    width: 100%;
    padding: 3px 5px;
    height: 60px;
}

.msg-submit {
    color: #fff;
    background: #4abb49;
    border: 1px solid #5cb25b;
}

.msg-submit:hover {
    background: #55ab22;
}

.no-discussion-tip {
    text-align: center;
    margin: 10px 0;
}

.load-more-discussion {
    color: var(--darkMain);
    margin-top: 1rem;
    cursor: pointer;
    text-align: center;
}

/**** custom select2 ****/

.select2-container-multi .select2-choices {
    border-color: #ddd;
    border-radius: 2px;
    background-image: none;
    /* rm the shadow */
}

.select2-container-multi .select2-choices .select2-search-field {
    float: none;
}

.select2-container-multi .select2-choices .select2-search-field input {
    padding: 2px 2px 2px 5px;
    font-family: inherit;
    font-size: 13px;
}

.select2-container-multi .select2-choices .select2-search-choice {
    border: none;
    border-radius: 0;
    background: #eee;
}

.select2-container .avatar,
.select2-results .select2-result-label .avatar {
    vertical-align: middle;
    margin-right: 3px;
}

.select2-result-label .text {
    display: inline-block;
    width: calc(100% - 42px);
}

.select2-results .select2-result-label .avatar {
    margin-right: 10px;
}

.select2-result-label .avatar,
.select2-result-label .text {
    vertical-align: middle;
}

/**** custom magnificPopup ****/

.mfp-bottom-bar {
    position: relative;
}

.mfp-title {
    min-width: 230px;
    padding-right: 60px;
}

.mfp-close:hover,
.mfp-arrow:hover {
    background: transparent;
}

/********** Container ***********/

#wrapper {}

#header {
    background: #f4f4f7;
    width: 100%;
    height: 53px;
    font-size: 14px;
    border-bottom: 1px solid #e8e8e8;
    padding: 8px 16px 4px;
    /*display:flex;*/
    justify-content: space-between;
    flex-shrink: 0;
}

#wide-panel-noframe {
    padding-top: 16px;
}

.side-panel {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

@media (max-width: 767px) {
    .side-panel {
        background: #f8f8f8;
        width: 300px;
        height: 100%;
        position: fixed;
        left: -300px;
        z-index: 1;
        /* important! */
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
}

.side-panel-close {
    margin: 10px 0 0 auto;
}

.main-panel {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.panel-top {
    padding: .5rem 1rem .25rem;
    background: #f4f4f7;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    flex-shrink: 0;
}

.side-panel-top {
    padding: .5rem 1rem;
}

@media (max-width: 767px) {
    .side-panel-top {
        border-right: 1px solid #eee;
    }
}

@media (min-width: 768px) {
    .cur-view-toolbar {
        position: relative;
        /* for the ':before' */
    }
    .cur-view-toolbar:before {
        content: '';
        border-left: 1px solid #ddd;
        position: absolute;
        top: 3px;
        left: -16px;
        height: 23px;
    }
}

.common-toolbar {
    margin-left: auto;
    display: flex;
}

#right-panel {
    padding-top: 16px;
    padding-bottom: 20px;
}

.main-panel-main {
    flex: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* for ff */
}

.main-panel-main-with-side {
    flex-direction: row;
}

.cur-view-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cur-view-path {
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px 0;
    background: #f9f9f9;
    position: relative;
    /* for the ':after' */
}

.cur-view-path:after {
    content: '';
    border-bottom: 1px solid #e8e8e8;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
}

.cur-view-path-path {
    /* for the real path */
    font-size: 16px;
    word-break: break-all;
}

.cur-view-main-con {
    padding: 10px 16px 20px;
    border-right: 4px solid transparent;
    overflow: auto;
    flex: auto;
}

#title-panel h2 {
    margin-bottom: 0.45em;
}

#right-panel h3:first-child,
#left-panel h3:first-child {
    margin-top: 0px;
}

#right-panel .hd,
.tabnav,
.repo-file-list-topbar,
.commit-list-topbar,
.file-audit-list-topbar,
#dir-view .repo-op,
.wiki-top {
    padding: 9px 10px;
    background: #f2f2f2;
    margin-bottom: .5em;
    border-radius: 2px;
}

#right-panel .hd,
.tabnav,
.wiki-top {
    padding-bottom: 0;
    height: 48px;
}

#organization-repos .hd {
    position: relative;
}

.group-top-op-icon {
    display: inline-block;
    font-size: 22px;
    margin: 3px 0 0 10px;
}

.commit-list-topbar,
.file-audit-list-topbar,
.repo-file-list-topbar {
    margin-bottom: 0;
}

#dir-view .repo-file-list-topbar {
    background: none;
    padding: 0;
}

#right-panel .hd h3,
#right-panel h3.hd {
    line-height: 30px;
    margin-bottom: 0;
}

#right-panel .hd .tab {
    padding-bottom: 0;
    margin-bottom: 0;
    top: 0;
}

#right-panel .hd .a,
.tabnav-tab a,
.wiki-nav .link {
    display: inline-block;
    font-size: 15px;
    color: #333;
    line-height: 1.5;
    font-weight: normal;
    padding: 4px 10px 9px;
    border-bottom: 3px solid transparent;
    margin-left: 5px;
}

.tabnav-tab-cur a,
.tabnav-tab a:hover,
.wiki-nav .cur-item .link,
.wiki-nav .link:hover,
#right-panel .hd .ui-state-active .a,
#right-panel .hd .a:hover {
    color: var(--darkMain);
    text-decoration: none;
    border-bottom-color: var(--darkMain);
}

.btn-white,
.tabnav button,
.repo-file-list-topbar .op-btn {
    height: 29px;
    background: #fff;
    line-height: 17px;
}

.cur-view-toolbar .btn-white {
    min-width: 55px;
}

@media (max-width:767px) {
    .cur-view-toolbar .mobile-icon {
        color: #999;
        line-height: 1.63;
        font-size: 22px;
        margin-right: 8px;
    }
}

/* info-bar */

#info-bar {
    color: #1f0600;
    padding: 1px 25px 1px 10px;
    background: #fddaa4;
    position: relative;
}

#info-bar .close {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 16px;
    margin: 0;
}

#info-bar-info {
    margin: 3px 0;
}

#info-bar-info a {
    color: #a68558;
    text-decoration: underline;
}

/* top-bar */

#logout-icon {
    margin: 5px 0 0 25px;
    font-size: 22px;
    line-height: 1;
    color: #999;
}

@media (max-width: 390px) {
    #logout-icon {
        margin-left: 10px;
    }
}

#notifications {
    position: relative;
    margin: 5px 0 0 25px;
}

@media (max-width: 390px) {
    #notifications {
        margin-left: 8px;
    }
}

#notifications .sf2-icon-bell {
    font-size: 24px;
    line-height: 1;
    color: #999;
}

#notifications .num {
    position: absolute;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 1px 2px;
    background: var(--darkMain);
    border: 1px solid #cb8a5d;
    top: 0;
    left: 15px;
}

#notice-popover {
    top: 38px;
    right: -16px;
}

#notice-popover .outer-caret {
    right: 18px;
}

#notice-popover a {
    font-weight: normal;
}

#notice-popover li {
    padding: 9px 0 3px;
    border-bottom: 1px solid #dfdfe1;
}

#notice-popover li.unread {
    background: #f5f5f7;
    padding-right: 10px;
    padding-left: 8px;
    border-left: 2px solid var(--darkMain);
    margin: 0 -10px;
}

#notice-popover .avatar {
    border-radius: 1000px;
    float: left;
}

#notice-popover .brief {
    margin-left: 40px;
}

#notice-popover .time {
    color: #999;
    text-align: right;
    margin: 0;
    clear: both;
}

#notice-popover .view-all {
    display: block;
    padding: 7px 0;
    text-align: center;
    color: #a4a4a4;
}

#account {
    position: relative;
    margin-left: 32px;
}

#account .avatar {
    vertical-align: middle;
    border-radius: 1000px;
}

#my-info {
    display: inline-block;
    color: #d6d6d6;
}

@media (max-width:767px) {
    #account {
        margin: 5px 0 0 10px;
    }
    .account-toggle {
        font-size: 22px;
        line-height: 1;
        color: #999;
        margin-top: 8px;
    }
}

.account-popup .avatar {
    float: left;
}

.account-popup .txt {
    margin-left: 45px;
}

.account-popup {
    right: 0;
    top: 52px;
    font-size: 13px;
}

.account-popup .outer-caret {
    top: -10px;
    right: 16px;
}

.account-popup .sf-popover-con {
    padding: 0;
}

.account-popup .item {
    display: block;
    padding: 8px 18px;
    border-bottom: 1px solid #ddd;
}

.account-popup a.item {
    color: #333;
    font-weight: normal;
}

.account-popup a.item:hover {
    background: #fafafa;
    text-decoration: none;
}

#account .manage {
    position: absolute;
    left: 60px;
    top: -16px;
}

#account .manage .a:hover {
    text-decoration: none;
}

#lang-context-selector {
    position: absolute;
    top: 23px;
    white-space: nowrap;
    width: auto;
    min-width: 200px;
}

#lang-context-selector .sf-popover-con {
    padding: 10px;
}

#lang-context-selector a {
    color: #000;
    display: block;
    padding: 1px 5px;
    font-weight: normal;
}

#lang-context-selector a:hover {
    background: #eee;
    text-decoration: none;
}

/* header */

#logo {
    margin-right: 30px;
}

/*** separate pages ***/

/* login */

#lang {
    font-weight: normal;
    font-size: 13px;
    margin-top: 12px;
}

#lang-context:hover {
    text-decoration: none;
}

.captcha {
    float: right;
}

#refresh-captcha {
    margin: 10px 3px 0 5px;
}

#id_captcha_1 {
    width: auto;
    height: 36px;
    padding: 2px 10px;
    border-radius: 3px;
    margin: 0;
}

.login-panel {
    background: #f5f6f7;
    border-radius: 3px;
    padding: 20px 60px;
    width: 390px;
    margin: 0 auto;
    box-shadow: 0 0 8px #a7a6a9;
}

@media (max-width:389px) {
    .login-panel {
        width: 100%;
        padding-left: calc((100% - 270px)/2);
        padding-right: calc((100% - 270px)/2);
    }
}

.login-panel-logo {
    display: block;
    margin: 0 auto 20px;
}

.login-panel-hd {
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    margin: 5px 0 15px;
}

.login-panel .input {
    margin: 0;
    border: 1px solid #cdcdcd;
    padding: 2px 10px;
    height: 36px;
    width: 248px;
    font-size: 14px;
}

.login-panel .name-input {
    border-radius: 3px 3px 0 0;
    border-bottom-width: 0;
}

.login-panel .passwd-input {
    border-radius: 0 0 3px 3px;
    margin-bottom: 10px;
}

.login-panel .remember {
    margin: 20px 0 10px;
}

.login-panel .submit {
    margin: 20px 0 15px;
    border-width: 0;
    border-radius: 4px;
    width: 100%;
    height: 42px;
    background: var(--darkMain);
    color: #f8f9fa;
    font-size: 14px;
}

.login-panel-bottom-container {
    margin-top: 10px;
    text-align: right;
}

#signup-form .input {
    margin-bottom: 5px;
}

/*myhome*/

#quota-bar {
    display: block;
    height: 1em;
    border: 1px solid #ddd;
    margin: 5px 0;
    border-radius: 2px;
    overflow: hidden;
    /* for usage > 100% */
}

#quota-bar .usage {
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

#my-usage,
#quota-usage {
    background: var(--darkMain);
}

#share-usage {
    background: #eee;
}

#usage-details {
    font-size: 12px;
    color: #888;
}

#traffic-stat {
    color: #333;
    font-weight: normal;
}

#repo-create-form {
    padding: 0 5px;
}

#repo-create-form .select {
    width: 268px;
    margin-bottom: 5px;
}

#repo-create-form .checkbox-label {
    /* for "Encrypt" */
    margin: 10px 0 0;
}

.activity-group-hd {
    padding: 8px;
    color: #444;
    font-size: 16px;
    border-bottom: 1px solid #e5e5e5;
    margin: 0;
}

.activity-group-bd {
    list-style-type: none;
    font-size: 15px;
    line-height: 21px;
    padding: 0;
    margin: 0 0 15px 0;
}

.event-item {
    padding: 7px 8px;
    border-bottom: 1px solid #e5e5e5;
}

.event-item .txt {
    margin-left: 45px;
}

.event-item .cmt-desc {
    display: block;
}

.event-item p {
    margin: 0;
}

.event-item .time {
    color: #888;
}

.event-item .avatar {
    float: left;
    border-radius: 1000px;
    margin-top: 3px;
}

#notices-loading,
#trash-more-loading {
    text-align: center;
    width: 100%;
}

#trash-more {
    margin-bottom: 30px;
}

#notices-more {
    margin: -20px 0 20px;
}

/* avatar */

.avatar-op .avatar {
    border-radius: 4px;
    -moz-border-radius: 4px;
}

.group .avatar {
    background: #fdfdfd;
    border-radius: 1000px;
}

.avatar-op h3 {
    border: none;
    margin-bottom: 2px;
}

.avatar-op .upload-new-avatar-hd {
    margin-top: 15px;
}

/*user-basic-info*/

.setting-item {
    margin-top: 15px;
    margin-bottom: 30px;
}

.setting-item h3 {
    color: #000;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0.7em;
}

#user-basic-info label {
    width: 5.6em;
    margin-right: 1em;
}

.ru #user-basic-info label {
    width: 9em;
}

.es #user-basic-info label,
.hu #user-basic-info label {
    width: 7em;
}

.it #user-basic-info label {
    width: 6em;
}

.fr #user-basic-info label {
    width: 8em;
}

#user-basic-info .avatar,
#user-basic-info textarea {
    vertical-align: text-top;
}

#user-basic-info .avatar {
    margin-bottom: 8px;
}

#user-avatar-form {
    display: inline-block;
    vertical-align: text-top;
    margin-left: 10px;
}

#repo-file-list {
    margin-bottom: 100px;
}

.path {
    margin: 1.4em 0 0;
}

.access-notice {
    margin: 0.8em 0 0.4em;
}

#repo-file-list .repo-op {
    text-align: right;
    margin-bottom: 4px;
}

.repo-op .op-btn {
    *margin-left: 5px;
    /* for ie 7*/
}

.repo-op .op-btn [class^="icon-"],
.repo-op .op-btn [class^="sf-icon-"] {
    margin-right: 3px;
}

.repo-op .op-btn {
    vertical-align: middle;
}

.set-file-type {
    padding: 2px;
    line-height: 1.2;
    margin: 2px 0 5px;
}

.file-audit-list-topbar .path,
.commit-list-topbar .path,
.repo-file-list-topbar .path {
    font-size: 14px;
    line-height: 25px;
    margin: 0;
}

#dir-view .repo-op .op-btn {
    padding: 5px 14px;
}

.repo-file-list {
    margin: 0;
}

@media (min-width:768px) {
    /* for mv by 'drag & drop' in 'dir view' page */
    .repo-file-list .select {
        padding-left: 10px;
    }
    .repo-file-list .hl .select {
        background: transparent url('../img/grippy_large.png') scroll no-repeat 1px 50%;
    }
}

.repo-file-list .icon-star-empty {
    color: #d0d0d0;
}

.repo-file-list .icon-star {
    color: #505050;
}

.repo-file-list .icon-star-empty,
.repo-file-list .icon-star {
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    line-height: 19px;
    vertical-align: middle;
}

.repo-file-list .dirent-icon {
    text-align: center;
}

.repo-file-list .dirent-name {
    display: inline-block;
}

@media (max-width:767px) {
    .repo-file-list .dirent-name,
    .repo-file-list .img-name-link {
        display: block;
    }
}

.repo-file-list .file-locked-icon {
    position: absolute;
    right: 0;
    bottom: 0;
}

.repo-file-list th {
    padding-top: 1rem;
}

#repo-file-list .fixed-hd {
    position: fixed;
    width: 950px;
    top: 0;
    z-index: 11;
    /*make it on top of dirent op(popup)*/
    border-color: #efefef;
    /*for repo-file-list-topbar*/
}

#repo-file-list .repo-file-list-topbar.fixed-hd {
    width: 930px;
    z-index: 12;
    /* to make #upload-menu be on top of .repo-file-list tr.fixed-hd */
}

.repo-file-list .fixed-hd th {
    background: #fff;
    -webkit-box-shadow: 0 2px 2px -1px #aaa;
    box-shadow: 0 2px 2px -3px #aaa;
}

.repo-file-list .repo-file-op {
    position: relative;
}

.displayed-op {
    display: inline;
    margin-right: 5px;
}

.audit-item .audit-select-hidden {
    position: absolute;
    background: #fff;
    padding: 6px 1px;
    border: 1px solid #eee;
    border-radius: 5px;
    z-index: 10;
}

.audit-select-hidden li a {
    display: block;
    padding: 0 12px;
}

.file-choose-form {
    width: 500px;
    padding: 10px 20px;
}

@media (max-width:579px) {
    .file-choose-form {
        padding: 0;
        width: 280px;
    }
}

.file-tree-cont,
.dir-tree-cont {
    padding: 5px;
    height: 280px;
    overflow: auto;
    border: 1px solid #eee;
    margin: 5px 0 10px;
}

#mv-dir-list .icon-caret-down,
#mv-dir-list .icon-caret-right {
    margin-right: 15px;
}

.inline-rename-form .input {
    font-size: 14px;
}

@media (max-width:321px) {
    .inline-rename-form .input {
        width: 225px;
    }
    #dir-view .inline-rename-form .input {
        width: 200px;
    }
}

@media (min-width:375px) and (max-width:400px) {
    .inline-rename-form {
        width: 270px;
    }
}

.web-setting-form .cancel,
.inline-rename-form .cancel {
    color: #666;
}

.inline-rename-form .input,
.inline-rename-form .submit {
    margin: 0;
}

.web-setting-form .submit,
.web-setting-form .cancel,
.inline-rename-form .submit,
.inline-rename-form .cancel {
    font-size: 16px;
    line-height: 1;
}

#repo-latest-commit .avatar {
    vertical-align: middle;
}

#repo-latest-commit .time {
    color: #666;
    margin-left: 5px;
}

.lsch,
.lsch-encrypted,
.file-diff {
    font-size: 12px;
    font-weight: normal;
    color: #666;
    text-decoration: underline;
}

#ls-ch {
    /*repo commit details container*/
    min-width: 300px;
    min-height: 300px;
    max-width: 850px;
    max-height: 550px;
    overflow: auto;
    line-height: 1.6;
}

#ls-ch h2,
#ls-ch h3 {
    margin: 0 0 0.2em;
    color: #333;
    font-weight: bold;
}

#ls-ch .commit-time,
.commit-time {
    color: #333;
    font-size: 13px;
    font-weight: normal;
    margin-top: 0em;
}

#ls-ch ul {
    padding: 0 0 6px 0;
}

#ls-ch a {
    color: var(--darkMain);
    font-weight: normal;
}

#dirs {
    /* file mv */
    margin-top: 8px;
}

/* file upload */

.fixed-upload-file-dialog {
    width: 540px;
    position: fixed;
    bottom: 0;
    right: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: 0 0 6px #ddd;
}

.fixed-upload-file-dialog .hd {
    padding: 6px 10px;
    background: #f0f0f0;
    margin: 0;
}

.fixed-upload-file-dialog .con {
    height: 164px;
    overflow-y: auto;
}

.fixed-upload-file-dialog .ops {
    position: absolute;
    top: 10px;
    right: 10px;
}

.fixed-upload-file-dialog .op-icon {
    font-size: 18px;
    color: #b8b8b8;
    margin: 0;
}

.fixed-upload-file-dialog .sf-close,
.fileupload-buttonbar .cancel {
    *margin-left: 5px;
}

.fixed-upload-file-dialog .total-error {
    margin: 10px;
}

.fileupload-progress {
    margin-top: 5px;
}

.fileinput-button {
    display: inline-block;
    line-height: 19px;
    position: relative;
    overflow: hidden;
}

.fileinput-button .icon-plus {
    font-size: 13px;
    color: #333;
}

.fileinput-button input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    height: 27px;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
}

.fileupload-table {
    margin-bottom: 0;
    table-layout: fixed;
}

.fileupload-table .name,
.fileupload-table .error {
    padding-left: 7px;
    margin: 0;
}

.fixed-upload-file-dialog .fileupload-buttonbar .cancel,
.template-upload .btn {
    background: transparent;
    border: none;
    color: var(--darkMain);
}

.fixed-upload-file-dialog .fileupload-buttonbar .cancel {
    color: #909090;
}

.template-upload .btn {
    font-size: 1em;
    padding: 0;
}

.ui-progressbar,
.progress {
    background-color: #F7F7F7;
    background-image: linear-gradient(to bottom, #F5F5F5, #F9F9F9);
    background-repeat: repeat-x;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    height: 1em;
    overflow: hidden;
}

#mv-progress {
    margin: 10px 0;
}

.template-upload .progress {
    width: 90%;
}

.ui-progressbar-value,
.progress .bar {
    background: var(--darkMain);
    height: 100%;
}

.fade {
    opacity: 0;
    visibility: hidden;
    /*for ie*/
}

.fade.in {
    opacity: 1;
    visibility: visible;
    /*for ie*/
}

#upload-file-form .tip {
    padding-left: 1.5em;
    *padding-left: 1.9em;
    margin-top: 5px;
}

/* repo-history */

#back {
    margin-top: 3px;
}

.file-audit-list,
.commit-list {
    margin-bottom: 20px;
}

.file-audit-list .user,
.commit-list .time {
    padding-left: 10px;
}

.file-audit-list .avatar,
.commit-list .avatar {
    border-radius: 2px;
}

.file-access-hd,
.repo-trash-hd,
.repo-snapshot-hd {
    margin-bottom: 10px;
}

.repo-snapshot-commit {
    margin-bottom: 6px;
}

#online-gc {
    margin-left: 5px;
}

/*repo-share-form*/

#email_or_group,
#share-link,
#added-member-name {
    width: 260px;
    height: 80px;
    padding: 2px;
}

#myhome-mods-enable-form,
#mods-enable-form {
    width: 266px;
}

#email_or_group,
#added-member-name {
    width: 98.5%;
}

#emails {
    width: 98.5%;
    height: 80px;
    padding: 2px;
}

/* file/dir share popup */

.ellipsis-op-target {
    display: inline-block;
    vertical-align: bottom;
}

#share-popup .op-target {
    max-width: 400px;
}

@media (max-width:767px) {
    #share-popup .op-target {
        max-width: 240px;
    }
}

#mv-form .op-target {
    max-width: 410px;
}

@media (max-width:579px) {
    #mv-form .op-target {
        max-width: 280px;
    }
}

#folder-perm-popup .op-target {
    max-width: 540px;
}

#confirm-popup .op-target,
#repo-transfer-form .op-target {
    max-width: 200px;
}

/* group, org */

.user-list {
    margin-top: 30px;
}

.user-list .user {
    display: inline-block;
    /* to handle different height of items */
    vertical-align: top;
    width: 330px;
    margin: 0 17px 30px 0;
}

.user-list .user {
    *display: inline;
    /* for ie 6,7 */
}

.user-list .txt {
    width: 265px;
}

.member {
    _height: 21px;
    padding-bottom: 4px;
}

.member .avatar {
    border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 5px;
}

.member .avatar,
.member .name {
    vertical-align: middle;
}

/* notification admin */

.cur-note {
    color: red;
    font-size: 75%;
}

/*file upload*/

.files-add {
    position: relative;
    overflow: hidden;
    margin-bottom: 7px;
}

.files-add .op {
    font-size: 1.15em;
    font-weight: bold;
    display: inline-block;
    padding-left: 18px;
    background-color: #fff;
    background-position: 0 -207px;
}

#upload-file-form .files-add input {
    cursor: pointer;
    position: absolute;
    top: 0;
    margin: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

#upload-file-form .MultiFile-label {
    padding: 4px 0;
    border-bottom: 1px solid #ebebeb;
}

#upload-file-form .MultiFile-remove {
    padding: 0 4px;
    color: #000;
    font-weight: bold;
    border: 1px solid #eee;
}

#upload-file-form .MultiFile-remove:hover {
    text-decoration: none;
}

.upload-progress-con,
.upload-cancel {
    margin-top: .8em;
}

.upload-progress-bar {
    /*for progress container*/
    height: 1em;
    margin-top: -3px;
}

.upload-progress-bar .ui-progressbar-value {
    /*for progress*/
    background: var(--darkMain);
    margin: 0;
}

/* file view online, file edit */

.file-view-hd {
    font-size: 1.4em;
    margin-bottom: 0px;
}

.file-view-op {
    margin-top: 10px;
}

.file-view-meta-info {
    margin: 0;
}

#link-options {
    margin-bottom: 10px;
}

#text-diff-output {
    padding: 3px;
    background: #dedede;
    border-radius: 3px;
    -moz-border-radius: 3px;
    margin-top: 12px;
}

#file-enc-cont {
    width: 950px;
    margin: -20px auto 6px;
    text-align: right;
}

#file-enc {
    padding: 0;
}

#file-view-tip {
    height: 130px;
    padding: 30px 10px 10px;
    width: 950px;
    background: #fff;
    text-align: center;
}

#docu-view {
    font-size: 14px;
    /*override .ace_editor*/
    line-height: 1.6em;
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    /*override .ace_editor*/
    min-height: 200px;
}

#img-prev,
#img-next {
    position: absolute;
    top: 48%;
    text-decoration: none;
    color: #888;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 100%;
    line-height: 50px;
}

#img-prev {
    left: 15px;
}

#img-next {
    right: 15px;
}

#img-prev:hover,
#img-next:hover {
    color: #333;
}

#image-view {
    padding: 1px;
    background: #fff;
    border: 1px solid #eee;
    width: auto;
    height: auto;
    max-width: calc(100% - 4px);
    max-height: calc(100% - 4px);
    font-size: 0;
    line-height: 0;
}

.image-file-view:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    font-size: 0;
    line-height: 0;
}

#svg-view {
    max-width: calc(100% - 4px);
    max-height: calc(100% - 4px);
}

#docu-view,
#md-view,
#md-edit {
    background: #fff;
}

#md-view,
#md-edit {
    width: 756px;
}

#md-view h2,
#wiki-content h2 {
    border-bottom: 1px solid #ccc;
}

.wiki-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

#wiki-content img {
    padding: 5px;
    border: 1px solid #DDD;
    box-shadow: 0 1px 1px #CCC;
    border-radius: 2px;
    max-width: calc(100% - 12px);
    margin: 15px 0;
}

#wiki-content .file-icon {
    border: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 2px 0 0;
}

.anchor {
    font-size: 0.8em;
    margin-left: 6px;
}

.anchor:hover {
    text-decoration: none;
}

#pdf {
    width: 950px;
    margin: 0 auto;
}

.pdf-page {
    position: relative;
}

.pdf-page-canvas {
    display: block;
    max-width: 100%;
    box-shadow: 0 0 6px #ccc;
    margin: 0 auto 20px;
}

.pdf-page-text-layer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: 0.2;
    line-height: 1.0;
}

.pdf-page-text-layer>div {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

.pdf-page-text-layer ::selection {
    background: blue;
}

.pdf-page-text-layer ::-moz-selection {
    background: blue;
}

#doc-view {
    min-height: 700px;
    _height: 700px;
}

#op-after-edit {
    margin-top: .9em;
}

#file-edit-submit {
    margin-left: 5px;
}

#file-edit-cancel {
    color: #900;
    font-weight: normal;
    margin-left: 3px;
}

#md-view {
    padding: 40px 96px;
}

#side-toolbar {
    position: fixed;
    right: 0;
}

.side-toolbar .item {
    box-sizing: content-box;
    width: 59px;
    height: 40px;
    padding-top: 18px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    border: 1px solid #c0c0c0;
    border-right: 0;
    border-top: 0;
}

.side-toolbar .item:first-child {
    border-top: 1px solid #c0c0c0;
    border-top-left-radius: 3px;
}

.side-toolbar .item:last-child {
    border-bottom-left-radius: 3px;
}

/* shareadmin & useradmin */

.select-white,
.folder-perm-select,
.share-permission-select,
.user-role-select,
.admin-role-select,
.user-status-select {
    position: relative;
    /*for long text in other lang in 'share admin'*/
    padding: 3px 2px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
}

/* text file diff */

.file-modification-hd .modifier,
.file-modification-hd .time {
    font-weight: normal;
    font-size: 13px;
    color: #666;
}

.file-modification-hd a {
    margin: 0 3px 0 5px;
}

.file-modification-hd .avatar,
.file-modification-meta-info .span {
    vertical-align: middle;
}

.file-modification-hd .time {
    margin-left: 5px;
}

#text-diff-output {
    font-size: 14px;
    font-family: monospace;
}

#text-diff-output .blank-file,
#text-diff-output .diff-con {
    background: #fff;
    border: 1px solid #ccc;
    margin: 0;
}

#text-diff-output .blank-file {
    padding: 2em 1em;
}

#text-diff-output th {
    text-align: center;
}

#text-diff-output td {
    font-size: 12px;
    word-wrap: break-word;
    padding: 2px 3px;
    border-bottom: none;
}

#text-diff-output .diff-header {
    text-align: right;
    vertical-align: top;
    /* make the line number stay there even its right td gets multi lines of content */
    background-color: #ebebeb;
    border-right: 1px solid #eee;
}

.diff-add {
    color: #080;
}

.diff-sub {
    color: #c00;
}

.diff-chg {
    color: #c3f;
}

.video-container {
    margin: auto;
    width: 800px;
    height: 400px;
}

.audio-container {
    margin: auto;
    width: 500px;
    height: 30px;
}

/* wiki page */

.wiki-top {
    /* for lang with long words */
    text-align: right;
    height: auto;
}

.wiki-top .btn-white {
    margin-left: 3px;
}

.wiki-nav .item {
    float: left;
}

.wiki-nav .link {
    color: #333;
    font-weight: normal;
}

#new-wiki {
    margin-left: auto;
}

.wiki-page-ops {
    position: fixed;
    top: 10px;
}

@media (min-width: 768px) {
    .wiki-page-ops:before {
        content: '';
        border-left: 1px solid #ddd;
        position: absolute;
        top: 3px;
        left: -16px;
        bottom: 3px;
    }
}

.wiki-pages-heading {
    text-align: center;
    padding-bottom: .5em;
    border-bottom: 1px solid #e8e8e8;
}

#wiki-page-list {
    margin-top: 1.6em;
}

.wiki-page-list-item {
    word-break: break-all;
    line-height: 1.6;
    margin: 3px 0;
}

.wiki-page-link,
.wiki-page-link:hover {
    font-size: 1.15em;
    font-weight: normal;
    color: #444;
    margin-left: 5px;
}

#wiki-area {
    padding: 30px 0 0;
}

#wiki-last-modified,
#wiki-page-last-modified {
    margin-top: 40px;
    font-size: 12px;
    color: #666;
}

#wiki-pages {
    list-style-type: disc;
    padding-left: 2em;
    margin-top: 1.6em;
}

.wiki-page-missing {
    color: red;
}

/* search */

.search-input {
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.search-form .search-submit {
    /* the icon submit */
    position: absolute;
    right: 1px;
    top: 1px;
    width: 30px;
    height: 24px;
    padding: 0;
    border: 0;
    margin: 0;
    background: #fff;
}

.search-form .icon-search {
    font-size: 16px;
    color: #aaa;
}

.search-form .icon-caret-down {
    color: #bbb;
    cursor: pointer;
    line-height: 24px;
}

#advanced-search-form {
    position: absolute;
    width: 500px;
    padding: 18px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: 0 0 10px #ddd;
    z-index: 100;
    /* for pages with jquery tabs*/
}

#advanced-search-form .search-input {
    width: 98%;
    padding: 1px 3px;
}

#advanced-search-form .submit {
    margin-bottom: 0;
}

.search-scales {
    margin-top: 8px;
}

.search-scales .item {
    width: 48%;
}

.search-repos {
    border-bottom: 1px dotted #ddd;
    margin-bottom: 3px;
}

.search-time-range {
    border-top: 1px dotted #ddd;
    margin-top: 3px;
    padding-top: 3px;
}

.custom-ftype-options {
    font-size: 13px;
    padding: 2px 0;
    background: #fafafa;
}

.custom-ftype-options .checkbox-label {
    display: inline-block;
    margin: 0 10px 0 0;
}

.custom-ftype-options .fileext-input {
    width: 70%;
}

@media (max-width:400px) {
    .custom-ftype-options .fileext-input {
        width: 95%;
    }
}

.top-search-link {
    margin-top: 5px;
}

.top-search-link .icon-search {
    font-size: 19px;
    line-height: 1;
    color: #999;
}

#top-search-form {
    position: relative;
    margin-top: 3px;
}

#top-search-form .search-input {
    width: 155px;
    padding: 1px 30px 1px 5px;
}

#search-form,
#search-link-form,
#search-user-form,
#search-group-form,
#search-repo-form {
    padding: 10px;
    background: #f7f7f8;
    border-radius: 2px;
    margin-bottom: 1.2rem;
}

#search-form {
    margin-top: 30px;
}

#search-form .input_and_submit {
    display: inline-block;
    position: relative;
    width: 60%;
}

#search-form .advanced-search {
    color: #666;
    font-size: 16px;
    cursor: pointer;
    margin-left: 4px;
}

#search-form .search-input {
    width: calc(100% - 35px);
    height: 24px;
    padding: 0 30px 0 5px;
}

#search-results a {
    font-weight: normal;
}

#search-results b {
    font-weight: bold;
}

.search-results-item {
    margin-top: 15px;
}

.search-results-item .main-con {
    margin-left: 45px;
}

.search-results-item .parent-dir-link {
    color: #888;
}

.search-results-item .time {
    color: #666;
}

.search-results-item .highlight-content {
    margin: 0;
}

#plan-form {
    width: 260px;
}

#mass-msg {
    width: 424px;
    height: 100px;
    padding: 2px;
    margin-bottom: 3px;
}

#mass-email {
    width: 432px;
    padding: 0;
}

/* payments */

#plans {
    margin-top: 24px;
}

#plans p {
    margin: 13px 0;
}

#plans th,
#plans td {
    text-align: center;
    padding: 6px 10px;
    border: 1px solid #ede;
}

#plans th {
    color: var(--darkMain);
    font-weight: bold;
    font-size: 16px;
}

#plans .price {
    color: #666;
    font-size: 14px;
}

#plans tr:nth-child(even) td {
    background: #f8f8f8;
}

#plans .empty-cell {
    border-top-color: transparent;
    border-left-color: transparent;
}

#plans .item {
    text-align: right;
    font-weight: bold;
    color: #555;
}

#plan-form .options {
    margin-right: 15px;
}

.signup-btn {
    font-size: 14px;
    padding: 10px 14px;
    margin: 10px 15px 20px 0;
}

.enable-mods-icon {
    margin: 3px 0 0;
    color: #ccc;
    font-size: 18px;
}

.help-con {
    padding: 20px;
}

.help-con img {
    max-width: 100%;
    margin: 5px 0;
}

#right-panel.help-con .hd {
    font-weight: normal;
    margin-bottom: 15px;
}

/* wiki index */

.wiki-index {
    margin-top: 25px;
}

.grp-wiki-index {
    margin-left: 12px;
}

.wiki-index h3 {
    color: #333;
}

.wiki-index-edit-icon {
    font-size: 16px;
    color: #d7d7d7;
    margin: 3px 0 0;
}

#wiki-index-con {
    padding-left: 12px;
}

.grp-wiki-index #wiki-index-con {
    padding: 0;
}

#wiki-index-con ul {
    list-style-type: square;
    padding-left: 1.5em;
    margin-bottom: 5px;
    color: #8c8c8c;
}

#wiki-index-con a {
    font-weight: normal;
    color: #8c8c8c;
}

#wiki-index-con a:hover {
    color: #f93;
    text-decoration: underline;
}

/* client list */

.client-list .lib-num {
    cursor: pointer;
}

.client-list .dir-icon {
    color: #666;
}

/* side-info */

#left-panel .side-info .hd {
    /* '#left-panel' to override some style */
    margin-top: 19px;
}

.go-back {
    position: absolute;
    left: -41px;
    top: 9px;
    padding: 0 5px;
    font-size: 25px;
    color: #ccc;
}

.go-back:hover {
    color: #f93;
    text-decoration: none;
}

#set-quota-form {
    min-width: 255px;
}

#set-quota-form .input {
    width: 180px;
}

/* org reg */

#org-url {
    white-space: nowrap;
}

#org-url-prefix {
    width: 50px;
}

/* notice page */

#notices-table .unread {
    font-weight: bold;
}

#notices-table .avatar-cell {
    vertical-align: top;
    text-align: center;
    padding-top: 8px;
}

#notices-table .avatar {
    border-radius: 1000px;
}

#notices-table .brief,
#notices-table .detail {
    margin: 0.2em 100px .2em 0;
}

#notices-table .detail {
    color: #9d9b9c;
    cursor: pointer;
    font-weight: normal;
}

#notice-list .topic,
#notices-table .topic {
    padding: 4px 13px;
    border-left: 3px solid #e0e0e0;
    margin-left: 7px;
}

#notices-table a {
    font-weight: normal;
}

/* pwd strength */

#pwd_strength {
    margin: -15px 0 20px;
}

#pwd_strength span {
    display: inline-block;
    width: 70px;
    border: 1px solid #fff;
    background: #e4e4e4;
    color: #cecece;
    text-align: center;
    vertical-align: middle;
    line-height: 16px;
}

/* repo setting TODO*/

.user-perm-add-tr input,
.group-perm-add-tr input {
    padding: 2px 5px;
}

#perm-add-grp-name {
    width: 95%;
}

.perm-add-select-folder {
    position: relative;
    right: 18px;
    cursor: pointer;
}

/* file audit*/

.audit-show-select {
    font-weight: normal;
    font-size: 13px;
    padding-right: 2px;
}

#audit-unselect-op div {
    display: inline-block;
    height: 20px;
    border: 1px solid #ccc;
    background: #f2f2f2;
    cursor: pointer;
}

#audit-unselect-op span {
    margin-right: 5px;
}

#audit-unselect-op a {
    margin: 0 8px;
    text-decoration: none;
    font-size: 14px;
}

/* multi repo operation */

.repo-op .op-link {
    display: inline-block;
    height: 29px;
    margin-right: 15px;
    color: #8a8a8a;
    font-size: 22px;
}

.repo-op .op-link:hover {
    color: var(--darkMain);
    text-decoration: none;
}

/* multi dirents operation */

#multi-dirents-op .op-btn {
    margin: 0;
}

#dir-private-share .label {
    margin: 6px 0 8px;
}

#dir-private-share .select2-container {
    margin-bottom: 10px;
}

#dir-private-share .submit {
    margin-top: 18px;
}

.lib-decrypt-form {
    padding: 25px 40px 30px;
}

.lib-decrypt-form .intro {
    font-size: 19px;
    color: #464646;
}

.lib-decrypt-form .input {
    height: 30px;
    width: 194px;
    margin-top: 10px;
}

.lib-decrypt-form .submit {
    width: 202px;
    height: 36px;
    margin: 21px 0 10px;
}

/* user & group folder perm */

#repo-folder-perm .nav-con-tabs-content {
    /* for the case that the scrollbar appears */
    width: 630px;
    padding-right: 0;
}

#repo-folder-perm .jstree {
    margin: 10px 0 4px;
}

.repo-folder-perm-folder-path {
    width: 150px;
    padding: 3px 33px 3px 5px;
    border: 1px solid #ddd;
    border-radius: 2px;
    margin: 0;
}

.repo-folder-perm-add-folder {
    position: absolute;
    right: 0;
    top: 1px;
    width: 29px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-left: 1px solid #ddd;
    margin: 0;
}

.repo-folder-perm-content {
    width: 612px;
    /* for the table in it. */
}

#share-popup .share-permission-select,
.folder-perm-select {
    height: 30px;
}

#dir-user-share .submit,
#dir-group-share .submit,
#folder-perm-tabs .submit {
    box-sizing: border-box;
    height: 30px;
    margin: 0;
}

#add-group-members-form {
    margin-bottom: 4px;
}

/* add repo to public */

#add-pubrepo-popup {
    width: 500px;
}

#add-pubrepo-popup tbody {
    display: block;
    max-height: 150px;
    width: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* share popup */

#download-link-operations dl {
    margin-top: 0;
}

#download-link-operations dt {
    margin: 0;
}

/* shared upload link */

#upload-link-panel {
    width: 600px;
    padding: 10px 20px 20px;
}

#upload-link-panel .avatar {
    vertical-align: middle;
}

/* sysadmin */

#import-members-btn .icon-upload-alt {
    color: #777;
    margin-right: 3px;
}

#traffic-month-form {
    margin-top: 10px;
}

#traffic-month-form .input {
    width: 100px;
}

/* guide for new */

#guide-for-new {
    width: 450px;
}

#guide-for-new .icon-lightbulb {
    font-size: 6em;
    color: var(--darkMain);
}

#guide-for-new .txt {
    margin-left: 6.4em;
}

/* user profile */

#user-profile {
    width: 290px;
    border: 1px solid #eee;
    border-radius: 5px;
    margin: 50px auto 0;
}

#user-profile .avatar {
    display: block;
    border-radius: 1000px;
    margin: 8px auto;
}

.user-profile-nickname {
    padding: 0 15px 8px;
    margin: 0;
    font-size: 18px;
    text-align: center;
}

.user-profile-info {
    padding: 8px 15px;
    border-top: 1px solid #eee;
}

.user-profile-info-icon {
    display: inline-block;
    width: 1.4em;
}

/* shared file view */

#shared-file-view-hd .cur-path,
#shared-file-view-hd .share-by {
    margin: 0;
}

.shared-file-op-btn {
    padding: 7px;
    margin-top: 9px;
}

/*random password */

#share-popup .passwd-wrapper,
#add-user-form .passwd-wrapper {
    position: relative;
    width: 268px;
}

#share-popup .passwd,
#add-user-form .passwd {
    width: 188px;
    padding-right: 75px;
}

#share-popup .generate-random-password,
#add-user-form .generate-random-password,
#share-popup .show-or-hide-password,
#add-user-form .show-or-hide-password {
    position: absolute;
    top: 4px;
    right: 0;
    width: 36px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    opacity: 0.65;
}

#share-popup .show-or-hide-password,
#add-user-form .show-or-hide-password {
    right: 36px;
    background: #fff;
}

#share-popup .generate-random-password,
#add-user-form .generate-random-password {
    background: #ccc;
}

#share-popup .generate-random-password:hover,
#add-user-form .generate-random-password:hover,
#share-popup .show-or-hide-password:hover,
#add-user-form .show-or-hide-password:hover {
    opacity: 1;
}

/* image thumbnail */

img.thumbnail {
    max-width: 24px;
    max-height: 24px;
}

/* seahub web settings */

.seahub-web-settings h4 {
    padding: 3px 10px;
    background: #f7f7f7;
    border-radius: 2px;
    margin: 15px 0;
}

.web-setting-form {
    margin-bottom: 20px;
}

.web-setting-name,
.web-setting-input,
.web-setting-ops {
    display: inline-block;
}

.web-setting-name {
    width: 180px;
    padding: 0 10px;
    vertical-align: top;
    font-weight: normal;
    line-height: 28px;
}

.web-setting-input {
    width: 400px;
}

.web-setting-name,
.web-setting-input .input {
    margin: 0;
}

.web-setting-input .textarea {
    box-sizing: content-box;
    height: 95px;
    margin: 0;
}

.web-setting-input .code-textarea {
    width: calc(100% - 38px);
    height: 245px;
}

.web-setting-ops {
    width: 100px;
    vertical-align: top;
}

.web-setting-form .submit,
.web-setting-input {
    margin-top: 0;
}

.web-setting-form .submit {
    margin-right: 5px;
}

.web-setting-file-input {
    position: relative;
}

.web-setting-file-upload {
    position: absolute;
    right: 0;
    top: 0;
}

.web-setting-cur-img {
    margin-bottom: 5px;
}

/* view shared dir */

.mode-link {
    display: inline-block;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 0;
    line-height: 0;
}

.list-mode-link {
    border-right: 0;
}

.cur-mode-link {
    background: #ccc;
}

.shared-dir-zip {
    margin-left: 5px;
}

/**** #groups ****/

/* groups page */

#groups .group-name {
    font-size: 16px;
    padding-left: 3px;
    border-bottom: 1px solid #e6e6e6;
    margin: 15px 0 0;
}

#groups .group-name .a {
    color: #322;
}

#group-list table {
    margin: 0 0 32px;
}

#group-list th {
    font-size: 0;
    padding: 0;
    border-bottom: 0;
}

#groups-list td {
    border-bottom: 0;
}

#groups .empty-tip {
    color: #a4a4a4;
    padding: 4px 0;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 0 32px;
}

/**** #group ****/

/* group page */

#group-path {
    display: flex;
    justify-content: space-between;
}

.address-book-group-icon {
    color: #888;
}

.group-toolbar-2 {
    position: relative;
    flex: none;
    margin-left: 10px;
}

#group-members,
#group-settings {
    position: absolute;
    top: 42px;
    right: 0;
}

.group-setting-list {
    border-bottom: 1px solid #e3e3e5;
}

#add-group-members-form .submit {
    margin: 0 0 0 5px;
}

.group-discussions-con .msg:first-child {
    margin-top: 0.5rem;
}

.group-admin-txt {
    font-size: 12px;
    color: #888;
}

/* view mode */

.switch-mode {
    margin-left: 15px;
}

.grid-view-icon-btn,
.list-view-icon-btn {
    display: inline-block;
    padding: 0 6px;
    height: 29px;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 18px;
    color: #aaa;
    cursor: pointer;
    border-radius: 0;
}

.grid-view-icon-btn.active,
.list-view-icon-btn.active {
    color: #fff;
    background: #ccc;
    cursor: default;
}

/* grid view */

.grid-item {
    display: inline-block;
    width: 140px;
    padding: 10px 4px;
    position: relative;
}

.grid-item .img-link {
    position: relative;
    /* for locked icon */
    display: block;
    text-align: center;
    width: 100px;
    height: 100px;
    font-size: 0;
    line-height: 0;
    border-radius: 3px;
    margin: 0 auto 6px;
}

.grid-item .img-link:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.grid-item .img-link.hl {
    background: #f8f8f8;
}

.grid-item .thumbnail {
    max-width: 96px;
    max-height: 96px;
    padding: 1px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.grid-item .text-link {
    display: block;
    text-align: center;
    color: #333;
    font-size: 14px;
    line-height: 17px;
}

.grid-item .text-link.hl {
    color: #f93;
    background: #fff;
}

.grid-item .op-icon {
    position: absolute;
    top: 10px;
    right: 24px;
    padding: 2px 6px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 3px;
    margin: 0;
}

.grid-file-locked-icon {
    position: absolute;
    bottom: 0px;
    right: 10px;
}

.grid-item-op {
    /* the context menu */
    box-shadow: 0 2px 2px #aaa;
}

#dir-view .grid-item {
    width: 134px;
}

/* devices */

.device-libs-dropdown-menu {
    min-width: 200px;
}

/* link audit */

#link-audit-form .email-input {
    margin-bottom: 5px;
}

#link-audit-form .get-code-btn {
    margin-bottom: 20px;
}

/* about dialog */

.about-content {
    min-width: 280px;
    padding-top: 20px;
    text-align: center;
}

/* two-factor-auth */

.two-factor-auth-wizard-btns {
    margin-top: 8px;
}

.two-factor-auth-backup-token-list {
    margin-bottom: 1rem;
}

.input.two-factor-auth-login-token-input {
    margin-bottom: 15px;
}

#id_generator-token,
#id_sms-number,
#id_validation-token {
    /* token input */
    width: 260px;
    padding: 2px 3px;
    border-radius: 2px;
}

/* terms & conditions */

#tc-content {
    padding-top: 0;
    padding-left: 0;
}

.tc-accept-form {
    padding-bottom: 30px;
}

#tc-preview {
    box-sizing: border-box;
    padding: 40px;
    width: 800px;
    overflow: auto;
}

/* tags in detail panel */

.tags-label {
    vertical-align: top;
}

.cur-tag {
    padding: 1px 5px;
    background: #eee;
    border-radius: 3px;
    margin: 0 8px 8px 0;
    white-space: nowrap;
    /* for snapshot label */
}

/* sysadmin statistic */

.system-statistic-time-range {
    margin: 15px 0 25px;
}

.date-custom-form {
    margin-left: 15px;
}

.date-custom-form .input,
.date-custom-form .submit {
    margin: 0;
}

.date-custom-form .input {
    height: 25px;
    width: 75px;
}

.date-custom-form .submit {
    margin-left: 5px;
}

/* system info */

.license-file-upload {
    margin-top: 5px;
}

/* file comment */

.file-comment-panel-item-name {
    display: inline-block;
    max-width: 215px;
}

/* dir view */

#dir-view-path {
    display: flex;
    justify-content: space-between;
}

.dir-toolbar-2 {
    flex: none;
    margin-left: 10px;
}

.dir-toolbar-2 .op-link {
    font-size: 21px;
    color: #8a8a8a;
    margin-left: 8px;
}

.dir-toolbar-2 .op-link:hover {
    color: var(--darkMain);
    text-decoration: none;
}

/* address book */

#address-book-group .empty-tip {
    color: #a4a4a4;
    text-align: center;
    margin-bottom: 30px;
}

#address-book-group .hd {
    height: auto;
}

.invite-link-in-popup,
.invite-link-in-popup:hover {
    text-decoration: none;
}

#share-popup .invite-link-in-popup {
    display: inline-block;
    margin-top: 4px;
}