/* This style is for version 10+, for older versions use custom_v9.css */

/* Header color "ZoneCloud", app names */

/* Logo positioned to left */
#owncloud {
    left:                       0 !important;
    transform:                  none !important;
    /* Always show logo */
    display:                    inline !important;
    opacity:                    1 !important;
    padding:                    0 !important;
}

#owncloud h1 {
    padding-top:                4px !important;
    font-weight:                600 !important;
}

a#owncloud {
    display:                    flex !important;
    align-items:                center;
}

/* App menu toggle is never shown on wide screens */
@media only screen and (min-width: 775px) {
    .header-appname-container {
        display:               none !important;
    }
}

/* App loading icon position */
@media only screen and (min-width: 775px) {
    .icon-loading-dark {
        position:           relative !important;
        top:                -5px !important;
        left:               -10px !important;
        width:              5px !important;
        height:             5px !important;
    }
}

/* Always hide current app name and "burger" inside app menu */
.header-appname {
    display:                    none !important;
}

/* Convert burger inside appmenu toggle to caret */
.header-appname-container .burger:before
{
    background-color:           transparent !important;
}

.header-appname-container .burger
{
    content:                    " " !important;
    height:                     14px !important;
    width:                      14px !important;
    border-radius:              2px !important;
    border:                     1px solid white !important;
    border-left:                0 !important;
    border-right:               0 !important;
    border-top:                 0 !important;
    border-bottom:              0 !important;
    /*background-color:           red !important;*/
    background-image:           url(../../../core/img/actions/caret.svg) !important;
    background-repeat:          no-repeat !important;
    background-position:        center !important;
    font-size:                  0px !important;
    position:                   absolute !important;
    right:                      0px !important;
    margin:                     0px !important;
    padding:                    0px !important;
    margin-top:                 3px !important;
}

.burger {
    border: 1px solid white !important;
}

/* Clickable app toggler next to logo */
/* Clicking logo takes to index, clicking toggler shown app menu on narrow screens */
.header-appname-container {
    width:                      107px;
    height:                     33px;
    left:                       65px !important;
}

/* Hide search box on very narrow displays */
@media screen and (max-width: 385px) {
    #header .searchbox {
        display:                none !important;
    }
}

/* App menu always wisible on wide screens */
@media screen and (min-width: 775px) {
    #navigation {
        border:                 0 !important;
        display:                block !important;
        width:                  270px !important;
        position:               absolute !important;
        top:                    0 !important;
        left:                   245px !important;
        background-color:       transparent !important;
        overflow-x:             visible;
        overflow-y:             visible;
    }

    #navigation a span {
        display:                none !important;
    }

    #navigation div ul li a {
        margin:                 0;
        padding:                12px;
        padding-left:           1px;
        padding-right:          1px;
        width:                  35px;
        height:                 33px;
        position:               static;
        text-align:             center;
        color:                  #1d2d44 !important;
    }

    /* App labels */
    #navigation li:hover span {
        position:                   absolute !important;
        display:                    block !important;
        z-index:                    2001 !important;
        background-color:           white !important;
        border:                     1px solid lightgray !important;
        margin-left:                -25px !important;
        margin-top:                 8px !important;
        padding:                    3px !important;
        border-radius:              2px;
        overflow:                   visible !important;
    }

    /* Pointing arrow above app labels */
    #navigation li span:after {
        bottom:                     100%;
        border:                     solid transparent;
        content:                    " ";
        height:                     0;
        width:                      0;
        position:                   absolute;
        pointer-events:             none;
        border-bottom-color:        white;
        border-width:               10px;
        left:                       40%;
    }

    div#apps {
        height: 47px !important;
    }
}

/* Slightly smaller icons on wider screens */
@media only screen and (min-width: 775px) {
    #navigation img.app-icon {
        width:                  20px !important;
        height:                 20px !important;
    }
}

/* App icons opacity*/
#navigation a:hover img {
    opacity: 1;
}
#navigation a img {
    opacity: 0.8;
}

/* App navigation label color */
#navigation a span {
    color:                      inherit !important;
}

/* Menu carets inside header */
.icon-caret {
    background-color:           white !important;
}

/* Floating app menu inside header*/
#navigation {
    background-color:           #fefefe;
    box-shadow:                 none;
}

@media screen and (max-width: 774px) {
    /* App menu border when floating */
    #navigation {
        border:                 1px solid lightgray;
    }

    /* App icons when floating */
    #navigation .app-icon {
        background-color:       lightgray;
        padding:                5px;
    }
}

/* Arrow on top of floating menus */
#navigation:after,
#expanddiv:after
{
    bottom:                     100%;
    border:                     solid transparent;
    content:                    " ";
    height:                     0;
    width:                      0;
    position:                   absolute;
    pointer-events:             none;
    border-bottom-color:        white;
    border-width:               10px;
}

#expanddiv:after {
    right:                       0;
}

#navigation:after {
    left:                       144px;
}

/* always disable server2server sharing form (settings do not work) */
#details #save,
#body-settings #goto-federated-cloud,
#body-settings a[href*="goto-federated"] {
    display:                    none;
}

/* hide unneeded stuff */
#app-content #OCA\5c Notifications\5c Panels\5c Personal\5c NotificationsPanel,
#app-content #OCA\5c Activity\5c PersonalPanel,
#app-content #OCA\5c FederatedFileSharing\5c PersonalPanel,

#app-navigation > ul > li.nav-extstoragemounts,                 /* External storage / Files app */
#app-content #app-content-extstoragemounts,

.app-settings form#lostpassword,                                /* Lost password / Settings */

.app-settings #app-navigation > ul > li:nth-child(3),           /* Salvestusmaht / Settings */
.app-settings #OCA\5c Files_External\5c Panels\5c Personal,

.app-settings #OC\5c Settings\5c Panels\5c Personal\5c Cors,

.app-settings #app-navigation > ul > li:nth-child(6),           /* Additional / Settings */
.app-settings #OC\5c Settings\5c Panels\5c Personal\5c Legacy
{
    display:                    none;
}

/* floating user menu */
#header #expanddiv {
    background-color:           #fefefe;
    border:                     1px solid lightgray;
    box-shadow:                 none;
}

/* floating user menu top arrow*/
#header #expanddiv:after {
    border-bottom-color:        white;
}

/* item color inside floating user menu */
#header #expanddiv a {
    color:                      initial !important;
}

/* item icons visibility inside floating user menu */
#header #expanddiv li img {
    padding:                    4px;
    background-color:           lightgray;
}

/* search form visibility */
form.searchbox {
    color:                      #333 !important;
}

form.searchbox input {
    color:                      #333 !important;
}

.searchbox input[type="search"]:focus, .searchbox input[type="search"]:active, .searchbox input[type="search"]:valid {
    background: white url(/core/img/actions/search.svg) no-repeat 6px center;
}

/* Expand menu caret */
#expand:after {
    border-color:               white transparent transparent transparent !important;
}

/* displayname visibility */
#expandDisplayName {
    opacity:                    0.8;
    color:                      white;
    font-weight:                bold;
    max-width:                  180px !important;
    overflow:                   hidden !important;
    height:                     33px !important;
}

#expandDisplayName:hover {
    opacity:                    1;
}

@media screen and (min-width: 890px) {
    /* always show displayname on wider screens */
    #expandDisplayName {
        display:                block !important;
    }
}

@media screen and (min-width: 960px) {
    /* always show displayname on wider screens */
    #expandDisplayName {
        max-width:              250px !important;
    }
}

@media screen and (min-width: 1000px) {
    /* always show displayname on wider screens */
    #expandDisplayName {
        max-width:              350px !important;
    }
}

@media screen and (min-width: 1150px) {
    /* always show displayname on wider screens */
    #expandDisplayName {
        max-width:              550px !important;
    }
}


/* fix calendar settings button to allow inserting print button next to it */
.app-calendar #app-settings .settings-button {
    width:                      50%;
    display:                    inline-block;
}

#calendar-print-button {
    z-index:                    52;
    width:                      40px;
    height:                     40px;
    cursor:                     pointer;
    float:                      right;
}

/* full window image preview on publicshare page (uz-override) */
#zshare-fullscreen-preview {
    position:                   absolute;
    margin:                     0;
    padding:                    0;
    width:                      100%;
    height:                     100%;
    z-index:                    7654321;
    background-color:           rgba(0,0,0,0.85);
    text-align:                 center;
    vertical-align:             middle;
    overflow:                   hidden;
}

#zshare-fullscreen-preview div {
    position:                   absolute;
    top:                        20px;
    right:                      35px;
    text-align:                 right;
    float:                      right;
}

#zshare-fullscreen-preview img {
    position:                   absolute;
    vertical-align:             middle;
    padding:                    5px;
    margin:                     auto;
    top:                        0;
    bottom:                     0;
    left:                       0;
    right:                      0;
}

#zshare-fullscreen-preview i {
    color:                      white;
    opacity:                    0.7;
    cursor:                     pointer;
    font-size:                  3em;
    -moz-text-shadow:           0 0 2px black;
    -webkittext-shadow:         0 0 2px black;
    text-shadow:                0 0 2px black;
}

#zshare-fullscreen-preview i:hover {
    color:                      red;
    opacity:                    1;
}

/* semi transparent client download buttons (on settings and login page) */
#clientsbox img {
    opacity:                    0.8;
}

#clientsbox img:hover {
    opacity:                    1;
}

/* slightly smaller client download buttons on login page */
#body-login #clientsbox img {
    height:                     auto;
    width:                      auto;
    max-height:                 30px;
}

/* even smaller client download buttons on login page and narrow displays */
@media screen and (max-width: 774px) {

    #body-login #clientsbox img {
        height:                 auto;
        width:                  auto;
        max-height:             25px;
    }

}

/* second factor login message */
#body-login div.warning {
    float:                      left;
    margin:                     20px;
    margin-top:                 5px;
}

#body-login div.warning legend {
    white-space:                nowrap;
}

/* second factor error message */
#body-login input#ztotp-challenge {
    text-align:                 center;
}

/* second factor login error */
#body-login div.totp-error {
    color:                      red;
    background-color:           transparent;
    text-align:                 center;
    float:                      left;
    width:                      100%;
}

/* 2fa-totp challenge parent template elements */
body#body-login fieldset.warning,
body#body-login span.warning {
    display:                    none;
}

#faqlinkwrapper {
    text-align:                 center;
}

#zc-faq-link {
    color:                      white;
    opacity:                    0.8;
}

#zc-faq-link:hover,
a.two-factor-cancel:hover,
footer > p.info > a:hover {
    opacity:                    1;
}

/* footer color + font weight */
a.two-factor-cancel,
footer > p.info,
footer > p.info > a {
    color:                      white !important;
    font-weight:                normal !important;
}

#body-login p.info a {
    opacity:                    0.8;
}

#body-login p.info a:hover {
    opacity:                    1;
}

/* Calendar app, month view, wrap event title; 20171006 pdegmn */
.fc-month-view .fc-day-grid-event .fc-content {
    white-space:                normal !important;
    max-height:                 53px !important;
    overflow:                   hidden;
}