/**
 * @author Jan-Christoph Borchardt, http://jancborchardt.net
 * @copyright Copyright (c) 2015, ownCloud, Inc.
 * @license AGPL-3.0
 *
 * This code is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License, version 3,
 * as published by the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License, version 3,
 * along with this program.  If not, see <http://www.gnu.org/licenses/>
 */

 @import url("design-tokens-telekom.css");
 @import url("icons.css");
 @import url("menu-bar.css");
 @import url("guest-view.css");
 @import url("footer.css");
 @import url("file-view.css");
 @import url("breadcrumb.css");
  @import url("sharing.css");
 @import url("settings.css");
 @import url("activity.css");
 @import url("welcome-modal.css");



 /* ---------------------------------------------------------------------------- */


 /* ----------------------------------COMMON------------------------------------ */


 /* ---------------------------------------------------------------------------- */

 html,
 body,
 div,
 span,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 code,
 del,
 dfn,
 em,
 img,
 q,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 dialog,
 figure,
 footer,
 header,
 hgroup,
 nav,
 section {
     font-family: TeleNeoWeb, TeleNeo, sans-serif;
     font-size: 16px;
     color: var(--scl-color-grey-90);
 }

 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box !important;
     -webkit-box-sizing: border-box !important;
 }

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


 /* ---------------------------------------------------------------------------- */

 #app-navigation:not(.vue)>ul>li>a,
 #app-navigation:not(.vue)>ul>li>ul>li>a {
     background-size: 24px 24px !important;
     background-position: 14px 9px !important;
 }

 #app-navigation,#app-navigation-vue{
     z-index: 10 !important;
     left: unset !important;
     top: 73px !important;
     height: calc(100% - 190px) !important;
 }


 #app-navigation:not(.vue) ul,#app-navigation-vue ul {
     padding-top: 4rem;
 }

 #app-navigation>ul>li.active,
 #app-navigation>ul>li.active>a,
 #app-navigation>ul>li a:active,
 #app-navigation>ul>li a:active>a,
 #app-navigation>ul>li a.selected,
 #app-navigation>ul>li a.selected>a,
 #app-navigation>ul>li a.active,
 #app-navigation>ul>li a.active>a {
     background-color: #f2f2f2 !important;
     color: #e20074 !important;
     text-decoration: none;
 }

 #app-navigation:not(.vue)>ul>li a:hover,
 #app-navigation:not(.vue)>ul>li a:hover>a,
 #app-navigation:not(.vue)>ul>li a:focus,
 #app-navigation:not(.vue)>ul>li a:focus>a {
     background-color: #f2f2f2;
     color: #e20074;
 }

 #app-navigation>ul>li>a,
 #app-navigation>ul>li>ul {
     line-height: 48px;
     padding: 0 1rem 0 0.875rem;
 }

 #sublist-favorites {
     display: none !important;
 }

 #app-navigation>ul>li>a:active,
 #app-navigation>ul>li>a::selection {
     color: var(--scl-color-magenta) !important;
     opacity: 1 !important;
     text-decoration: none;
 }
 #app-navigation img {
   width: 30px !important;
 }

 .NextCloudPorgressBar {
     margin: 1rem 0rem;
     padding: 0rem 2rem 0rem 1rem;
 }

 .NextCloudPorgressBar .customprogressbar {
     height: 4px;
     border-radius: 4px;
     margin-bottom: 0.5rem;
 }

 .NextCloudPorgressBar .styledbar {
     background-color: #e20074;
     border-radius: 4px;
     box-shadow: 4px 0px 0px 0px rgba(255, 255, 255, 0.99);
     -webkit-box-shadow: 4px 0px 0px 0px rgba(255, 255, 255, 0.99);
     -moz-box-shadow: 4px 0px 0px 0px rgba(255, 255, 255, 0.99);
 }

 .progress {
     overflow: hidden;
     background-color: #f2f2f2;
 }

 .progress-bar {
     height: 100%;
     -webkit-transition: width .6s ease;
     transition: width .6s ease;
 }

 #app-navigation .progress-bar-custom li {
     list-style: none;
 }

 #app-navigation .progress-bar-custom .bar {
     background-color: #e20074;
     display: block;
     height: 5px;
     border: 1px solid #e20074;
     border-radius: 3px;
     overflow: hidden;
     box-shadow: 0 0 10px #e20074ba;
 }

 #app-navigation .progress-bar-custom .bar span {
     height: 2px;
     float: left;
     background: #2187e7;
 }

 #app-navigation .progress-bar-custom .style-html {
     width: 90%;
     animation: style-html 2s;
 }

 @keyframes style-html {
     0% {
         width: 0%;
     }
     30% {
         width: 30%;
     }
     100% {
         width: 90%;
     }
 }

 #app-navigation .memorytext {
     font-weight: bold;
     font-size: 22px;
 }

 #app-navigation button {
     min-height: unset;
 }

 #app-navigation .custom-button {
     padding-left: 1rem;
 }

 #app-navigation .custom-button .btn-style {
     padding: 0.563rem 1.5rem !important;
     border: 1px solid #191919;
     background-color: #fff;
     color: #191919;
     display: inline-block;
     border-radius: 4px;
     font-family: TeleNeoWeb, TeleNeo, sans-serif !important;
     font-size: 1rem;
     line-height: 1.42857143;
     cursor: pointer;
     font-weight: 400;
 }

 #app-navigation .collapsible:before {
     content: unset !important;
 }

 #app-navigation .custom-button .btn-style:hover {
     color: #e20074 !important;
 }

 #app-navigation>ul>li::selection {
     background-color: #f2f2f2 !important;
 }

 #app-navigation>ul>li>ul>li>a:hover {
     color: var(--scl-color-magenta) !important;
     opacity: 1 !important;
 }

 #app-navigation>ul>li>a.nav-icon-recent:hover {
     background-image: var(--icon-files-recent-e20074);
 }

 #app-navigation>ul>li>.nav-icon-favorites.svg.active {
     background-image: var(--icon-star-dark-e20074);
 }

 #app-navigation>ul>li>a.nav-icon-favorites:hover {
     background-image: var(--icon-star-dark-e20074);
 }

 #app-navigation>ul>li>.nav-icon-files.svg.active {
     background-image: var(--icon-files-folder-e20074);
 }

 #app-navigation>ul>li>a.nav-icon-files:hover {
     background-image: var(--icon-files-folder-e20074);
 }

 #app-navigation>ul>li>.nav-icon-sharingout.svg.active {
     background-image: var(--icon-user-e20074);
 }

 #app-navigation .nav-icon-sharingout {
     background-image: var(--icon-user-000-org);
 }

 #app-navigation>ul>li>a.nav-icon-sharingout:hover {
     background-image: var(--icon-user-e20074);
 }

 #app-navigation>ul>li>.nav-icon-sharingin.svg.active {
     background-image: var(--icon-attachment-e20074);
 }

 #app-navigation .nav-icon-sharingin {
     background-image: var(--icon-attachment-000);
 }

 #app-navigation>ul>li>a.nav-icon-sharingin:hover {
     background-image: var(--icon-attachment-e20074);
 }

 #app-navigation>ul>li>ul>li>a.nav-icon-sharinglinks:hover {
     background-image: var(--icon-files-public-e20074);
 }

 #app-navigation>ul>li>ul>li>a.nav-icon-deletedshares:hover {
     background-image: var(--icon-files-unshare-e20074);
 }

 #app-navigation>ul>li>ul>li>a.nav-icon-pendingshares:hover {
     background-image: var(--icon-files-share-e20074);
 }

 #app-navigation>ul>li>a.nav-icon-systemtagsfilter:hover {
     background-image: var(--icon-tag-e20074);
 }

 #app-navigation>ul>li>.nav-icon-trashbin.svg.active {
     background-image: var(--icon-files-delete-e20074);
 }

 #app-navigation>ul>li>a.nav-icon-trashbin:hover {
     background-image: var(--icon-files-delete-e20074);
 }

 #app-navigation>ul>li>a.icon-quota:hover {
     background-image: var(--icon-quota-e20074);
 }

 #filestable>thead>tr>th>a {
     color: var(--color-main-text) !important;
 }

 #filestable>thead>tr>th>div>a {
     color: var(--color-main-text) !important;
 }

 #filestable>tbody>tr>td>a {
     color: var(--color-main-text) !important;
 }

 #filestable>tbody>tr>td>div>a {
     color: var(--color-main-text) !important;
 }

 #filestable>thead>tr>th>a:hover {
     opacity: 1 !important;
 }

 #filestable>thead>tr>th>div>a:hover {
     opacity: 1 !important;
 }

 #filestable>tbody>tr>td>a:hover {
     opacity: 1 !important;
 }

 #filestable>tbody>tr>td>div>a:hover {
     opacity: 1 !important;
 }

 #controls>.breadcrumb>div.crumb.svg>a:hover {
     opacity: 0.7 !important;
 }

 #controls>div.actions.creatable>a:hover {
     color: var(--scl-color-magenta);
 }

 #controls>div.actions.creatable>a>span.hidden-visually:hover {
     color: var(--scl-color-magenta);
     text-decoration: underline;
 }


 /* ----------------------------------HEADER------------------------------------ */

 .MenuWrapperParent {
     position: fixed;
     z-index: 999;
     background: #fff;
 }

 .header-brandbar-claim span {
     position: relative;
     animation: BrandbarAnimate 5s infinite;
 }

 @keyframes BrandbarAnimate {
     from {
         transform: translateY(0px);
     }
     to {
         transform: translateY(3px);
     }
 }

 #app-navigation,
 #app-sidebar-vue {
     width: 288px !important;
 }

 aside {
     top: 120px !important;
     min-width: unset !important;
     width: 288px !important;
     margin-left: 2rem;
 }

 .sticky {
     position: fixed;
     top: 5px;
     width: 100%;
 }

 #app-dashboard {
     height: 100%;
 }

 #content>.container-fixed, #content-vue>.container-fixed  {
     position: relative;
     display: flex;
 }

 /* App specific changes for photos app */
 /* .app-photos #app-navigation-vue {
     position: fixed;
 } */

 .app-photos .app-navigation__list .app-navigation-entry__title {
   line-height: 44px !important;
 }
 .app-photos .app-navigation--close {
   margin-left: -190px;
 }
 .photos-navigation__back{
   width: 20px !important;
   height: 20px !important;
 }

 .app-photos .folder-name{
   height: auto !important;
   flex-direction: row !important;
   align-items: center;
   bottom: 16px;
   left: 16px;
 }
 .app-photos .folder-name__name{
   width: 75%;
   text-align: left !important;
   padding: 0 !important;
 }
 .app-photos .folder-name__icon{
   margin-right: 4px;
   margin-top: 0 !important;
 }

 .app-photos .folder:not(.folder--clear):hover .folder-name,
 .app-photos .folder:not(.folder--clear):hover .cover{
   opacity: 1 !important;
 }

 .app-photos .folder .cover{
   opacity: 1 !important;
   background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 10%, rgba(0, 0, 0, 0.6) 100%);
   background-color: unset !important;
 }


 /**responsive **/
 @media screen and (max-width: 1599px) and (min-width: 1300px) {
     .brandbar>.container-fixed {
         width: 1236px;
     }
     #header>.container-fixed {
         width: 1236px;
     }
     #content>.container-fixed {
         width: 1236px;
     }
     #app-navigation:not(.hidden)+#app-content {
         margin-left: 320px;
     }
     .app-files #app-content, #app-content-vue {
         width: calc(100% - 320px);
     }
     aside {
         width: 288px !important;
     }
 }

 @media screen and (max-width: 1499px) and (min-width: 1236px) {
     .brandbar>.container-fixed {
         width: 1236px;
     }
     #header>.container-fixed {
         width: 1236px;
     }
     #content>.container-fixed {
         width: 1236px;
     }
 }

 @media screen and (min-width: 1024px) and (max-width: 1499px) {
     .brandbar>.container-fixed {
         width: 1009px;
     }
     #header>.container-fixed {
         width: 1009px;
     }
     #content>.container-fixed {
         width: 1009px;
     }
 }

 @media screen and (min-width: 1025px) and (max-width: 1499px) {
     #app-navigation:not(.hidden)+#app-content {
         margin-left: 320px;
     }
     .app-files #app-content, #app-content-vue {
         width: calc(100% - 320px);
     }
      #fileList td a a.action.action-menu {
         display: none !important;
     }
 }

 .shrink {
     height: 5px;
 }

 .MenuWrapperParent {
     top: 0;
     width: 100%;
     border-bottom: 1px solid #e5e5e5;
     line-height:1;
 }

 @media screen and (max-width: 640px) {
     .button.new .hidden-visually {
         display: none;
     }
     #app-navigation:not(.hidden)+#app-content {
         margin-left: 0 !important;
     }
     .app-files #app-content, #app-content-vue {
         width: 100% !important;
     }
     #uploadprogressbar {
         width: 80px !important;
     }
     #uploadprogressbar .label {
         top: 2px !important;
         width: 80px !important;
     }
     #uploadprogressbar .mobile {
         display: block !important;
     }
     .nmc_welcome_popup-header h2 {
       max-width: 320px;
    }
 }

 @media screen and (min-width: 1600px) {
     .container-fixed,
     .modal-header {
         width: 1536px !important;
     }

     #viewer .modal-header {
      width: 100% !important;
    }

     #app-navigation, #app-navigation-vue {
         width: 288px !important;
     }
     .app-sidebar-header__info {
         width: 352px !important;
     }
     #filestable.view-grid tbody {
         row-gap: 13px !important;
     }
     #app-navigation:not(.hidden)+#app-content {
         margin-left: 320px !important;
     }
     .app-files #app-content, #app-content-vue {
         width: calc(100% - 320px);
     }
     aside {
         width: 352px !important;
     }
     #app-content-files #fileList td a a.action.action-menu {
         display: none !important;
     }
     #nmc_welcome_popup .modal-header {
       width: unset !important;
    }
 }

 @media screen and (max-width: 1600px) {
  .menubar button.is-active.icon-bold {
    background-image: var(--icon-bold-custom) !important;
  }

  .icon-bold:hover {
    background-image: var(--icon-bold-custom) !important;
  }

  .menubar button.is-active.icon-h1:hover {
    background-image: var(--icon-h1-custom) !important;
  }

  .menubar button.is-active.icon-h1 {
    background-image: var(--icon-h1-custom) !important;
}

  .menubar button.is-active.icon-h2 {
    background-image: var(--icon-h2-custom) !important;
  }

  .menubar button.is-active.icon-h3 {
    background-image: var(--icon-h3-custom) !important;
  }

  .menubar button.is-active.icon-h4 {
    background-image: var(--icon-h4-custom) !important;
  }

  .menubar button.is-active.icon-h5 {
    background-image: var(--icon-h5-custom) !important;
  }

  .menubar button.is-active.icon-h6 {
    background-image: var(--icon-h6-custom) !important;
  }

  .menubar button.is-active.icon-italic,
  .icon-italic:hover
   {
    background-image: var(--icon-italic-custom) !important;
  }

  .menubar button.is-active.icon-ul,
  .icon-ul:hover
   {
    background-image: var(--icon-ul-custom) !important;
  }

  .menubar button.is-active.icon-ol,
  .icon-ul:hover
  {
    background-image: var(--icon-ol-custom) !important;
  }

  .icon-quote:hover
  {
    background-image: var(--icon-quote-custom) !important;
  }

  .icon-code:hover {
    background-image: var(--icon-code-custom) !important;
  }

.icon-undo:hover {
  background-image: var(--icon-backward-custom) !important;
}

.icon-redo:hover {
  background-image: var(--icon-forward-custom) !important;
}

.menubar button.is-active.icon-strike {
  background-image: var(--icon-strike-custom) !important;
}

.icon-strike:hover {
  background-image: var(--icon-strike-custom) !important;
}

.icon-h1:hover,
.icon-h2:hover,
.icon-h3:hover,
.icon-h4:hover,
.icon-h5:hover,
.icon-h6:hover,
.icon-tasklist:hover,
.icon-underline:hover,
.menubar button.is-active.icon-tasklist,
.menubar button.is-active.icon-table,
.menubar button.is-active.icon-quote,
.menubar button.is-active.icon-code
{
  filter: unset !important;
}

}

 @media screen and (min-width: 1300px) and (max-width: 1599px) {
     .container-fixed,
     .modal-header {
         width: 1280px !important;
     }

     #viewer .modal-header {
      width: 100% !important;
    }
     #app-navigation,#app-navigation-vue,
     #app-sidebar-vue {
         width: 288px !important;
     }
     .header-right .smallscreenSize {
         display: none !important;
     }
     #fileList td a a.action.action-menu {
         display: none;
     }
     #filestable.view-grid tbody {
         row-gap: 0px !important;
     }
     #nmc_welcome_popup .modal-header {
       width: unset !important;
   }
 }

 @media screen and (min-width: 1599px) {
     .header-right .smallscreenSize,
     #fileList td a a.action.action-menu {
         display: none !important;
     }
 }

 @media screen and (min-width: 1024px) and (max-width: 1299px) {
     .container-fixed,
     .modal-header {
         width: 1024px !important;
     }

     #viewer .modal-header {
      width: 100% !important;
    }

     #app-navigation,
     #app-sidebar-vue , #app-navigation-vue{
         width: 288px !important;
     }
     aside {
         width: 288px !important;
     }
     #nmc_welcome_popup .modal-header {
       width: unset !important;
     }
 }

 @media screen and (min-width: 640px) and (max-width: 1023px) {
     #app-navigation:not(.hidden)+#app-content{
         margin-left: 0 !important;
     }
     .app-files #app-content, #app-content-vue {
         width: 100% !important;
     }
     .nmc_welcome_popup-header h2 {
      max-width: 510px;
     }
 }

 @media screen and (max-width: 1299px) {
     .container-fixed,
     .modal-header {
         width: 100%;
     }

     #viewer .modal-header {
      width: 100% !important;
    }

     #filestable.view-grid tbody {
         row-gap: 16px !important;
     }
     .pending-share-row .fileactions .button-label{
       display: none;
      }
      .pending-share-row .fileactions .icon{
         display: block !important;
      }
      .pending-share-row .fileactions .action-button {
         border: 0;
         padding: 0;
      }
      .pending-share-row .fileactions .action-button.accept{
        background: none;
      }

 }

 @media screen and (max-width: 1599px) {
     #filestable tbody {
         row-gap: unset !important;
     }
 }


 /*---------------------------LeftNav-----------------------------------*/

 input[type="checkbox"].checkbox+label:before {
     border-radius: 3px !important;
     border: 1px solid #191919 !important;
 }

 input[type="checkbox"].checkbox+label:before:hover {
     border: 1px solid #e20074 !important;
 }

 #app-settings input[type="checkbox"].checkbox:checked+label:before {
     background-color: #e20074 !important;
     border: 1px solid #e20074 !important;
 }

 .round input[type="checkbox"]:checked+label:after {
     background-color: #e20074 !important;
     border: 1px solid #fff !important;
 }

 #app-navigation:not(.vue)>ul>li.pinned.first-pinned {
     margin-top: 0px !important;
 }

 #app-settings-header .settings-button , #app-settings__header .settings-button  {
     display: block;
     height: 20px;
     width: 100%;
     padding: 0;
     margin: 1rem 0rem 0.5rem 0rem !important;
     background-image: var(--icon-triangle-n-e20074);
     background-position: 14px center;
     background-repeat: no-repeat;
     box-shadow: none;
     border: 0;
     border-radius: 0;
     text-align: left;
     padding-left: 2.5rem;
     font-weight: normal;
     color: var(--color-main-text);
 }

 .app-photos .material-design-icon__svg{
   display: none;
 }


 #app-settings-header .settings-button.opened {
     border-top: unset !important;
     background-image: var(--icon-triangle-s-e20074);
 }



 /*-------------------MemoryUsed Left Nav------------------------------*/

 .avlspace {
     font-weight: 600;
     font-size: inherit;
 }

 .outoftext {
     padding-left: 4px;
     padding-right: 4px;
     font-size: inherit;
 }

 .totalspace {
     font-weight: 400;
     font-size: inherit;
     padding-left: 3px;
 }


 /*-------------------Memory Occupied Message Left Nav------------------------------*/

 .memory-ocup-message {
     font-size: 14px;
 }


 /*-------------------MemoryLogo------------------------------*/

 .Memory-consumed {
     padding-left: 1rem;
 }

 .Memory-consumed .left-logo {
     width: 30%;
     display: inline;
 }

 .logo-right-text {
   padding-left: 8px !important;
 }

 .Memory-consumed .logo-right-text {
     display: inline-block;
     vertical-align: middle;
     padding-top: 0.313rem;
     padding-left: 0.375rem;
     font-size: 1.25rem;
 }

 .Memory-consumed img {
     vertical-align: middle;
 }

 #app-settings-header .settings-button {
     color: #e20074 !important;
     font-size: 16px !important;
 }

 #app-settings__header .settings-button__label{
    color: #e20074 !important;
    font-size: 16px !important;
  }

 #app-settings-header .settings-button:hover {
     background-color: unset !important;
     text-decoration: underline !important;
 }

 #app-settings__header .settings-button__label:hover {
    background-color: unset !important;
    text-decoration: underline !important;
 }

 #app-settings-header {
     background-color: unset !important;
 }


 /*----right-click-menu------*/

 #rightClickMenu .option-details{
   display: none;
 }

 #rightClickMenu,
 .fileActionsMenu {
     margin: 0;
     padding: 0.813rem 0.625rem;
     box-shadow: var(--scl-shadow-level-2);
     filter: unset !important;
     border-radius: 8px !important;
 }

 #rightClickMenu span::first-letter {
     text-transform: capitalize;
 }

 .fileActionsMenu span:last-child,
 #rightClickMenu span:last-child {
     margin-left: .5rem;
 }

 #rightClickMenu.bubble li>a,
 .fileActionsMenu.bubble li>a {
     align-items: center !important;
 }

 #rightClickMenu.bubble li>a:hover,
 .fileActionsMenu.bubble li>a:hover {
     background-color: unset !important;
 }

 #view-toggle:hover,
 .icon-delete:hover,
 a.menu-option:hover>span,
 a.menuitem.action:hover>span,
 .icon-home:hover {
     filter: invert(11%) sepia(80%) saturate(6905%) hue-rotate(320deg) brightness(93%) contrast(110%);
 }


 /** New css for EMail and Profile Picture **/

 .header-right .emailmenu,
 .header-right .profilePicture {
     height: auto !important;
 }

 #controls,
 .controls-section {
     top: 73px;
     padding-top: 0.5rem;
     height: 45px;
 }

 .controls-section {
     position: sticky;
     z-index: 999;
     background-color:#fff;
 }

 #body-settings .controls-section {
   margin-top: -48px;
 }

 /* new custom changes*/

 .hide {
     display: none !important;
 }

 .breadcrumb-translation {
     top: 4.5em;
     border-top: 1px solid #e5e5e5;
 }

 #content,#content-vue {
     padding-top: 0;
     top: 135px;
     z-index: 99;
     min-height: calc(100% - 120px);
 }

 .container-fixed,
 .modal-header {
     margin-left: auto;
     margin-right: auto;
     box-sizing: border-box;
 }

 .actions {
     padding: 8px;
     margin-top: 0.188rem;
 }

 .actions.creatable a {
     width: 24px !important;
     height: 24px !important;
     min-height: 24px !important;
     opacity: 1;
     border-color: var(--scl-color-magenta) !important;
     margin-top: 2px
 }

 .actions.creatable .add-label{
   margin-left: 0.625rem;
   margin-top:0.125rem;
   font-weight: normal;
   color:#E20074;
 }

 #controls .actions > .button{
   justify-content: start !important;
   padding-left: 0.2rem !important;
   background: none;
 }


 div.crumb {
     padding: 0;
     margin-top: 2px;
 }

 div.crumb>a,
 div.crumb>span {
     opacity: 1 !important;
 }

 div.crumb>a:hover{
     color: #e20074;
 }
 div.crumb:last-child {
     margin-right: 0 !important;
 }

 #emptycontent,
 .emptycontent {
     margin-top: 20vh !important;
 }

 .crumb .icon-shared {
     display: none !important;
 }

 .crumb a {
     margin-right: 1.5rem;
 }

 #controls>div.actions.creatable>a:active,#controls>div.actions.creatable>a:focus {
   background: none !important;
   border-color: #e20074 !important;
 }

 #app-navigation-toggle {
     top: 8.5em;
     width: 24px;
     height: 48px;
     margin-left: 1rem;
 }

 .snapjs-left #app-content:not([style=''])>#app-navigation-toggle {
     left: 0;
     top: 0;
     transition: none;
 }

 #app-navigation-toggle.app-navigation-translation {
     top: 4.5em;
 }

 .translation {
     transition: all .4s;
 }

 .header-brandbar {
     transition: max-height .4s ease-out;
 }

 .header-brandbar-translate {
     -webkit-transform: translateY(18px) !important;
     transform: translateY(18px) !important;
     opacity: 0 !important;
 }

 .brandbar-logo-minified {
     max-width: 80px !important;
     opacity: 1 !important;
 }

 .content-translation {
     top: 73px !important;
 }

 .view-toggle-translation {
     top: 5.5rem !important;
     margin-top: -24px !important;
 }

 .mobile-content{
   top: 10px !important;
 }

 #app-navigation.app-navigation-translation,#app-navigation-vue.app-navigation-translation {
     top: 73px !important;
 }

 #app-content-recent, #app-content-favorites, #app-content-shareoverview, #app-content-sharingout,
 #app-content-sharingin, #app-content-sharinglinks, #app-content-deletedshares, #app-content-pendingshares {
     margin-top: 0 !important;
 }

 .tooltip .tooltip-inner, .vue-tooltip .tooltip-inner {
   background: #ffffff;
   color: #191919 !important;
   padding: 1rem !important;
   font-family: TeleNeo, sans-serif;
   max-width: 100%;
   border-radius: 8px !important;
   box-shadow: var(--scl-shadow-level-1) !important;
 }

 .popover__inner {
     padding-right: 30px !important;
 }

 .brand-bar-translation {
     height: 9px;
 }

 #rich-workspaceW {
     padding: 0 10px;
 }

 #rich-workspace .menubar{
   z-index: 50 !important;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 #filestable {
     padding-top: 16px;
 }

 #filestable thead {
     top: 118px;
 }

 #filelist-header #rich-workspace, #rich-workspace #editor-session-list{
     padding-right: 0 !important;
 }

 #rich-workspace #editor-session-list .save-status{
     align-items: flex-start !important;
     padding-right: 1.25rem !important;
     min-width: unset !important;
     top:0 !important;
 }

 #direct-editor .save-status {
   top: 0 !important;
 }

 /* Add Button*/

 .newFileMenu {
     padding: 0.813rem 0.625rem;
     box-shadow: var(--scl-shadow-level-2);
     border-radius: 8px;
 }

 .bubble li>button:hover,
 .bubble li>button:focus,
 .bubble li>a:hover,
 .bubble li>a:focus,
 .bubble li>.menuitem:hover,
 .bubble li>.menuitem:focus,
 .popovermenu li>button:hover,
 .popovermenu li>button:focus,
 .popovermenu li>a:hover,
 .popovermenu li>a:focus,
 .popovermenu li>.menuitem:hover,
 .popovermenu li>.menuitem:focus {
     background-color: unset !important;
 }

 .newFileMenu .menuitem .displayname:hover {
     color: #E20074;
 }

 .newFileMenu .menuitem .displayname {
     padding-left: 0.5rem;
 }

 .actions.creatable .popovermenu.menu-left a {
     width: unset !important;
     height: unset !important;
 }

 .newFileMenu ul>li:last-child {
     display: none;
 }

 .bubble,
 .app-navigation-entry-menu,
 .popovermenu {
     filter: none !important;
 }

 .menuitem:hover span {
     color: #E20074 !important;
 }

 button:not(:disabled):not(.primary):hover,
 button:not(:disabled):not(.primary):focus,
 .button:not(:disabled):not(.primary):hover,
 .button:not(:disabled):not(.primary):focus,
 .pager li a:not(:disabled):not(.primary):hover,
 .pager li a:not(:disabled):not(.primary):focus,
 .pager li a:not(:disabled):not(.primary).active {
     border-color: unset !important;
 }

 .menubar button.icon-undo,
 .menubar button.icon-redo {
     opacity: unset;
 }

 .submenu .menuitem span[class] {
     margin-right: 0.5rem !important;
 }

 .menubar button
 {
     width: 24px !important;
     height: 24px !important;
     background-size: unset !important;
     opacity: unset !important;
     margin-right: 1rem !important;
     padding: 0px !important;
 }

 .menubar button.icon-redo {
     margin-right: 2rem !important;
 }

 .menubar button.icon-ul {
     margin-left: 1rem !important;
 }

 .menubar button:hover,
 .menubar button:focus,
 .menubar button:active,
 #editor .action-item__menutoggle:hover,
 #editor .action-item__menutoggle:active,
.table-settings .action-item__menutoggle:active,
.table-settings .action-item__menutoggle[data-v-2a98ba3b]:focus
{
     background-color: unset !important;
}

.submenu .popovermenu {
     box-shadow: var(--scl-shadow-level-2);
     padding: 0.813rem 0.625rem;
     border-radius: 8px;
     width: 178px;
     margin-top: 0.3125rem;
 }

 .submenu .popovermenu li>button,
 .submenu .popovermenu li>a,
 .submenu .popovermenu li>.menuitem {
     align-items: center !important;
 }

 li>button span[class^='icon-'],
 li>button span[class*=' icon-'],
 li>a span[class*=' icon-'],
 li>a[class^='icon-'],
 li>.menuitem span[class^='icon-'],
 li>.menuitem span[class*=' icon-'],
 li>.menuitem[class^='icon-'],
 li>.menuitem[class*=' icon-'] {
     background-size: 24px !important;
 }

 #editor-wrapper div.ProseMirror h1 span {
     font-size: 3.5rem !important;
     line-height: 100% !important;
 }

 #editor-wrapper div.ProseMirror h2 span {
     font-size: 2.5rem !important;
     line-height: 100% !important;
 }

 #editor-wrapper div.ProseMirror h3 span {
     font-size: 2rem !important;
     line-height: 100% !important;
 }

 #editor-wrapper div.ProseMirror h4 span {
     font-size: 1.5rem !important;
     line-height: 120% !important;
 }

 #editor-wrapper div.ProseMirror h5 span {
     font-size: 1.2rem !important;
     line-height: 120% !important;
 }

 #editor-wrapper div.ProseMirror h6 span {
     font-size: 1rem !important;
     line-height: 120% !important;
 }

 #editor-session-list .v-popover {
     display: none !important;
 }

 .menubar button.is-active::before {
     background: none !important;
 }

 .submenu .popovermenu li>a.active,
 .submenu .popovermenu li>.menuitem.active {
     background-color: unset !important;
     box-shadow: unset !important;
 }

 .popover__wrapper .popover__inner {
     padding: 0.813rem 1.5rem 0.813rem 0.625rem !important;
     border-radius: 8px;
 }

 .popover__wrapper .popover__inner li span.action-button__text{
     margin-right: 0.5rem;
 }

 .popover__wrapper .action-button {
     align-items: center !important;
     padding-right: 0 !important;
 }

 .popover__wrapper li.active {
     box-shadow: none !important;
     color: #E20074 !important;
 }

 .popover {
     box-shadow: var(--scl-shadow-level-2);
     filter: none !important;
     border-radius: 8px;
 }

 .action-button__text:hover {
     color: #E20074 !important;
 }

 #editor-wrapper div.ProseMirror blockquote {
     border-left: 4px solid #E20074 !important;
 }

 #editor-wrapper .popovermenu li>.menuitem {
  width: 100% !important;
  height: auto !important;
}

#editor-wrapper li>.menuitem span[class^='icon-']{
opacity: unset !important;
}

 #rich-workspace #editor-wrapper .ProseMirror p div{
   background-color: unset !important;
 }

 #rich-workspace #editor-wrapper .ProseMirror .image__view, #rich-workspace #editor-wrapper .image__view .image__caption input[type='text']{
   text-align: start !important;
 }

 .action-item.action-item--open .action-item__menutoggle {
     background-color: unset !important;
     background-image: var(--icon-menutoggle-magenta) !important;
 }

 .action-item__menutoggle--default-icon:before {
     content: '' !important;
 }


 /**Login Screen**/

#body-login,
#firstrunwizard .firstrunwizard-header,
#theming-preview {
  background: url('../../core/img/Background_consent.svg')!important;
  background-color: unset !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-position: center top !important;
  align-items: center !important;
  justify-content: center !important;
  display: flex !important;
}

.login-consent-layer-buuble-text {
  min-height: 50px;
  height: 30%;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  top: 0;
  z-index: -1;
}

 .login-main {
     display: flex;
     height: 70vh;
     align-items: center;
 }

.login-hidden{
  visibility: hidden;
}

.login-header {
     display: flex;
     width: 100%;
     justify-content: space-between;
     margin-top: 1em;
 }

 .login-header .app-claim img {
     width: 182px;
     height: 40px;
     vertical-align: middle;
 }

 .login-section {
     background: rgba(0, 0, 0, .4);
     width: 400px;
     margin: 0 auto;
     border-radius: 8px;
 }

 .login-section .logo {
     margin: 1.5rem auto 1rem auto;
 }

 .login-section h1 {
     font-family: TeleNeoWeb, TeleNeo, sans-serif;
     color: #fff;
     font-size: 1.5625em;
     font-weight: bold;
     margin-bottom: 3rem;
 }

 .login-section .logo-title {
     font-size: 1em;
     font-weight: normal !important;
     color: #fff;
 }

 .login-section fieldset {
     background: none;
 }

 .login-section .warning-info {
     margin-bottom: 0.5rem;
 }

 .login-section fieldset {
     width: auto;
     margin: .5rem 1.5rem 1.5rem 1.5rem;
     padding: 0;
 }

 .login-section .body-login-container a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: auto;
     background: none;
     border-radius: 8px;
     font-size: 1rem;
     margin: 0;
     padding: 0 1.5rem;
     min-height: 40px;
 }

 .login-section .body-login-container a svg {
     vertical-align: middle;
     margin-right: 5px;
 }

 .login-section .body-login-container a:hover,
 .login-section .body-login-container a:active,
 .login-section .body-login-container a:focus {
     color: #e20074 !important;
     background: #fff !important;
 }

 .login-section .body-login-container img {
     vertical-align: middle;
     margin-right: 0.5rem;
     margin-top: -2px;
 }

 .login-section .body-login-container a:hover img,
 .login-section .body-login-container a:active img,
 .login-section .body-login-container a:focus img {
     filter: invert(26%) sepia(93%) saturate(6250%) hue-rotate( 318deg) brightness(84%) contrast(114%);
 }

 .login-section .infogroup {
     background: none;
     border-radius: 8px;
     color: #fff;
     margin: 0.5rem 0 1.5rem 0 !important;
 }

 body#body-login.nmc-guest {
     background: #e20074 !important;
     background-image: none !important;
 }

 .nmc-guest .login-section {
     background: none;
     width: 460px;
 }

 .nmc-guest .body-login-container {
     box-sizing: border-box;
     margin-top: 5rem;
     padding: 1.5rem 1.5rem 2rem 1.5rem;
 }

 .nmc-guest .body-login-container h2 {
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
 }

 .nmc-guest .icon-search {
     width: 96px;
     height: 96px;
     background-size: 100% 100%;
     margin: 0 auto;
 }

 .nmc-guest .container-fixed,
 .nmc-login .container-fixed {
     padding: 0 1rem;
 }


 /**Login Screen**/


 /* video*/

 .video-js.vjs-big-play-centered .vjs-big-play-button {
     background-color: rgba(255, 255, 255, 0.4) !important;
 }

 .video-js:hover .vjs-big-play-button,
 .video-js .vjs-big-play-button:focus,
 .video-js .vjs-big-play-button:active {
     background-color: rgba(255, 255, 255, 1) !important;
 }

 .video-js .vjs-big-play-button {
     border: unset !important;
 }

 .vjs-icon-play:before,
 .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
     font-size: 2.5em !important;
     top: 5px !important;
 }

 .video-file-details {
     font-size: 1.25em !important;
 }

 .directDownload #downloadFile {
     margin-top: 1em;
     margin-bottom: 4em;
     padding: 0.625em 1.5em !important;
     border-radius: 8px !important;
 }

 .directDownload a {
     color: #ffffff !important;
 }


 /* pdf */

 .files-public-content iframe {
     padding-top: 1em !important;
 }


 /*Pop-up*/

 .closePopup {
     display: inline;
     float: right;
     margin-right: 3em;
 }

 .closePopup button,
 .closePopup .button,
 .closePopup input[type='button'],
 .closePopup input[type='submit'],
 .closePopup input[type='reset'] {
     font-weight: unset !important;
     border-radius: unset !important;
 }

 .closePopup select,
 .closePopup button,
 .closePopup .button,
 .closePopup input[type='button'],
 .closePopup input[type='submit'],
 .closePopup input[type='reset'] {
     background-color: unset !important;
 }

 .closePopup button,
 .closePopup .button {
     border: unset !important;
 }


 /*single files guest view*/

 .file-preview img {
     height: 192px !important;
     width: 192px !important;
     padding-top: 2em;
 }

 .unified-search__result-icon--with-thumbnail:not(.unified-search__result-icon--rounded) {
     max-width: 2.75rem !important;
     max-height: 2.75rem !important;
 }

 .unified-search__filters {
     display: none !important;
 }

 .unified-search__result-icon--no-preview {
     background-size: 150% 150% !important;
 }

 .icon-confirm {
     background-size: cover !important;
 }

 .breadcrumb .popovermenu {
     padding: 1rem !important;
     box-shadow: var(--scl-shadow-level-2);
     border-radius: 8px;
 }

 .breadcrumb .popovermenu li>a {
     align-items: center !important;
     margin-bottom: 1rem !important;
     padding: 0 !important;
 }

 .breadcrumb .popovermenu li:last-child a {
     margin-bottom: 0 !important;
 }

 .breadcrumb .popovermenu li>a span[class] {
     width: 24px !important;
     height: 24px !important;
     padding: 0;
     margin-right: .5rem !important;
     background-position: unset;
 }

 div.crumb.crumbmenu .popovermenu ul {
     padding-right: 0 !important;
 }

 div.crumb.crumbmenu a {
     opacity: 1;
 }

 .breadcrumb {
     margin-left: 1rem;
 }

 #app-content, #app-content-vue {
     position: static;
 }
/*
 .app-photos #app-content-vue {
  margin-left: 2.5rem !important;
 } */

 /* preview css*/

#viewer #collaboraframe{
  width: 100% !important;
 }

 #viewer .richEditor .action-item__menutoggle--default-icon
 {
   filter: unset;
   background-position: center !important;
 }


 .richEditor .action-item__menutoggle.icon-table_settings
 {
    margin-top: 0.75rem !important;
 }

 #viewer {
     margin-top: 4px;
 }

 #viewer[view="application/pdf"] a.prev,
 #viewer[view="application/pdf"] a.next,
 #viewer[view="text/markdown"] a.prev,
 #viewer[view="text/markdown"] a.next {
     visibility: hidden !important;
 }

 #viewer a.prev,
 #viewer a.next {
     position: fixed !important;
     top: 0 !important;
     display: flex !important;
     left: 44.5% !important;
     height: 70px !important;
     min-width: auto !important;
     width: auto !important;
     opacity: .7;
     z-index: 99999;
     visibility: visible !important;
     margin: 0 2rem;
 }

 #viewer a.prev:hover,
 #viewer a.next:hover {
     opacity: 1;
 }

 #viewer a.next {
     right: 42.5% !important;
     left: unset !important;
 }

 .modal-header {
     position: relative !important;
     height: 63px !important;
     background: #191919;
     justify-content: space-between !important;
     visibility: visible !important;
 }

 .modal-wrapper {
     border-top: 1px solid #e5e5e5;
 }

 .modal-header .modal-title {
     font-size: 1rem !important;
     width: auto !important;
     padding: 0 !important;
     margin-left: 1rem;
     text-align: left !important;
 }

 #viewer .modal-header .modal-title {
  max-width:400px;
}

 #viewer .action-item.header-actions {
     padding: 0 !important;
     margin: 0 !important;
     margin-right: 1.5rem !important;
 }

 #viewer .modal-header .action-item__menutoggle--default-icon {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(148deg) brightness(105%) contrast(101%);
  min-width: 24px;
  min-height: 24px;
  height: 24px;
  padding: 0 !important;
  opacity: 1 !important;
}

 #viewer .action-item.action-item--single.header-close {
     background-image: unset !important;
     width: 24px;
     min-width: 24px;
     height: 24px;
     padding: 0;
     margin: 0;
     margin-right: 1rem;
 }

 .icon-previous::before,
 .icon-next::before,
 .play-icon::before {
     content: '' !important;
 }

 .icon-previous,
 .icon-next,
 .play-icon {
     width: 40px !important;
     height: 40px !important;
     margin: 0 !important;
     padding: 0 !important;
     background-size: cover;
 }

 #viewer .play-pause-icons {
     position: fixed;
     left: 50%;
     top: 0;
     width: auto;
     height: 70px;
 }

 .popover .action-link {
     align-items: center !important;
 }

 #viewer iframe {
  top: 2rem !important;
  width: 85% !important;
}

 #viewer .viewer__content {
     align-self: start;
     height: auto !important;
     margin-top: 1rem;
     width: inherit !important;
     margin-top: 0px !important;
 }

 #viewer .modal-container {
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

 #viewer .modal-container > * {
   z-index: 999999;
 }

 #viewer #editor-container {
     top: 64px !important
 }

 #viewer .plyr audio,
 #viewer .plyr iframe,
 #viewer .plyr video,
 iframe.viewer__file {
     width: inherit !important;
 }

 #viewer .action-item__menutoggle--default-icon,
 #viewer .action-item.action-item--single.header-close {
     background: none;
 }

 .modal-mask .play-pause-icons .progress-ring {
     top: 10px !important;
     left: 0px !important;
 }

 #viewer circle.progress-ring__circle {
     r: 20;
 }

 .modal-header .icons-menu .play-pause-icons .icon-pause {
     opacity: 1;
     border-radius: 22px;
     background-color: rgb(255 255 255 / 25%);
     height: 40px !important;
     width: 40px !important;
     margin: 0 !important;
     padding: 9px !important;
 }

 #viewer .modal-wrapper .material-design-icon__svg, #viewer .play-icon .material-design-icon__svg {
  display: none;
}

#viewer .close-icon .material-design-icon__svg,#viewer .pause-icon .material-design-icon__svg  {
  color:#fff;
}
 #content.app-files_sharing.mobile-content.content-translation {
  top: 120px !important;
  }


 /*Copy-move-dialog*/

 .oc-dialog {
     padding: 1.5rem !important;
     box-shadow: var(--scl-shadow-level-2) !important;
 }

 .oc-dialog .oc-dialog-title {
     font-size: 1.5rem !important;
     margin-bottom: 0.375rem !important;
 }

 .oc-dialog .oc-dialog-close {
     margin: 1.5rem !important;
     padding: 0.938rem !important;
     opacity: unset !important;
 }

 #oc-dialog-filepicker-content .dirtree {
     padding-left: 0.125rem !important;
 }

 .oc-dialog-buttonrow button {
     height: 40px !important;
     min-width: 135px !important;
     border-radius: 8px !important;
     padding: 0 1.5rem !important;
     background-color: #ffffff;
     border-color: #191919;
     margin: 0px !important;
 }

 .oc-dialog-buttonrow button:hover {
     border-color: #e20074 !important;
     color: #e20074 !important;
 }

 .oc-dialog-buttonrow.onebutton .primary,
 .oc-dialog-buttonrow.twobuttons .primary {
     background-color: #e20074 !important;
     border-color: #e20074 !important;
     color: #ffffff !important;
     margin: 0 0 0 0.5rem !important;
 }

 .oc-dialog-buttonrow.onebutton .primary:hover,
 .oc-dialog-buttonrow.twobuttons.aside .primary:hover {
     background-color: #f90984 !important;
 }
 .oc-dialog-buttonrow.onebutton button:disabled{
     opacity: unset;
 }
 .oc-dialog-buttonrow button {
     font-size: 1rem !important;
 }

 #oc-dialog-filepicker-content #picker-filestable.filelist .filename {
     background-size: 44px !important;
     background-position: 5px 14px !important;
 }

 #picker-filestable thead tr {
     height: 32px !important;
 }

 #picker-filestable tr {
     height: 68px !important;
 }

 #picker-filestable tbody tr:hover,
 #picker-filestable tbody tr:focus,
 #picker-filestable tbody tr:active {
     background-color: rgb(242 242 242 / 50%) !important;
 }

 .oc-dialog-buttonrow {
     padding: 0 !important;
 }

 #oc-dialog-filepicker-content .filelist-container {
     margin-bottom: 1.5rem;
     margin-top: 0.75rem;
 }

 #oc-dialog-filepicker-content #picker-filestable.filelist {
     margin-bottom: 0 !important;
 }

 #oc-dialog-filepicker-content #picker-filestable.filelist td.filename {
     width: 200px !important;
 }

 #oc-dialog-filepicker-content #picker-filestable.filelist td.filesize {
     padding: 0.875rem 1rem !important;
     width: 50px !important;
 }

 #oc-dialog-filepicker-content #picker-filestable.filelist td.date {
     padding: 0.875rem 1rem !important;
     text-align: right !important;
     width: calc(100% - 250px) !important;
 }

 #oc-dialog-filepicker-content #picker-filestable.filelist th .columntitle.name {
     padding: 1.25rem 1rem 1.25rem 0.313rem !important;
     margin-left: 2.688rem !important;
 }

 #oc-dialog-filepicker-content #picker-filestable.filelist th .columntitle.size {
     padding: 1.25rem 1rem !important;
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-between;
 }

 #oc-dialog-filepicker-content #picker-filestable.filelist th .columntitle#modified {
     padding: 1.25rem 1rem !important;
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-between;
 }

 #oc-dialog-filepicker-content .actions.creatable {
     background-color: unset !important;
     border: unset !important;
 }

 #oc-dialog-filepicker-content .actions.creatable a {
     background-color: unset !important;
 }

 #oc-dialog-filepicker-content #picker-filestable.filelist thead tr th {
     border: unset !important;
 }

 #oc-dialog-filepicker-content #picker-filestable.filelist thead tr th {
     border-bottom: 1px solid var(--color-border) !important;
 }

 .oc-dialog div.crumb {
     background-size: auto 24px !important;
 }

 #oc-dialog-filepicker-content .actions.creatable {
     left: 6px !important;
     top: 10px !important;
 }

 #oc-dialog-filepicker-content #picker-view-toggle {
     display: none;
 }

 #oc-dialog-filepicker-content .breadcrumb {
     margin-left: 0 !important;
     padding-bottom: 1.5rem;
 }

 .oc-dialog-content {
     max-width: unset !important;
 }

 #picker-filestable .view-grid tbody {
     display: none !important;
 }

 .oc-dialog ::-webkit-scrollbar {
     width: 4px !important;
 }

 .oc-dialog ::-webkit-scrollbar-thumb {
     background: #cccccc !important;
     border: unset !important;
 }

 #oc-dialog-filepicker-content #picker-filestable.filelist th #headerName-container .sort-indicator {
     margin-left: -4.375rem !important;
 }
 #oc-dialog-filepicker-content #picker-filestable.filelist th .sort-indicator {
   opacity: unset !important;
 }
 #oc-dialog-filepicker-content #picker-filestable.filelist th .sort-indicator {
   margin-left: 0.875rem !important;
   margin-right:0.5rem !important;
 }
 #oc-dialog-filepicker-content .filenameform input{
  width:130px !important;
  margin:0 !important;

 }

 #oc-dialog-filepicker-content .filenameform input.icon-confirm{
  width:34px !important;
  margin-left: -0.5rem !important;

 }
 /*** Custom conflict dialog ******************************************************/

 #oc-dialog-filepicker-content .emptycontent {
   margin-top:1rem !important;
 }

 .oc-conflict-pre-dlg {
     padding-left: 1.5rem !important;
     padding-right: 1.5rem !important;
     padding-top: 2rem;
     padding-bottom: 2rem;
     width: 16px !important;
 }

 .oc-conflict-pre-dlg-button {
     width: 100% !important;
     margin-bottom: 0.5rem !important;
     font-size: 1rem !important;
     font-weight: 400 !important;
     height: 2.5rem !important;
     background-color: #FFFFFF !important;
     color: #000000 !important;
     border-radius: 8px !important;
     text-overflow: ellipsis !important;
     font-family: TeleNeoWeb, TeleNeo, sans-serif !important;
     border: 1px solid #191919 !important;
     padding:0.375rem !important;
 }

 .oc-conflict-pre-dlg-replace-button {
     background-color: #E20074 !important;
     color: #FFFFFF !important;
     border: 1px solid #E20074 !important;
 }

 .oc-conflict-pre-dlg .fileexists {
     margin-bottom: 1.5rem !important;
 }

 .flex-container {
     display: flex;
 }

 .oc-conflict-pre-dlg-title-div {
     flex: 1;
 }

 .oc-conflict-pre-dlg-close-div {
     flex: 1;
     text-align: right;
 }

 .oc-conflct-pre-dlg-title {
     font-size: 1.25rem !important;
     margin-bottom: 0.5rem !important;
     width: 180px !important;
 }

 .fourbuttons button:hover,
 .fourbuttons button:focus,
 .fourbuttons button:active {
     color: #E20074;
 }

 .fourbuttons button:last-child:hover,
 .fourbuttons button:last-child:focus,
 .fourbuttons button:last-child:active {
     color: #FFFFFF;
 }

 .oc-conflict-pre-dlg {
   width:288px !important;
 }

 .oc-conflict-pre-dlg-close-div a {
     padding-right: 1.375rem !important;
     padding-bottom: 0.37rem;
     background-size: 1.5rem 1.5rem !important;
 }

 .icon-loading-small-dark,.icon-loading-small,.icon-loading-small:after, .icon-loading-small-dark:after,
 .action-share .icon-loading:after {
   display: none;
 }

 .app-photos li:hover span,
 .app-photos li:active span{
   color: #e20074 !important;
 }

 .app-photos .app-navigation-entry.active span {
   color: #e20074 !important;
 }

 .app-photos .app-navigation-entry.active .app-navigation-entry-icon ,
 .app-photos .app-navigation-entry:hover .app-navigation-entry-icon {
   filter: invert(11%) sepia(80%) saturate(6905%) hue-rotate(320deg) brightness(93%) contrast(110%);
 }

 .app-photos .app-navigation-entry.active {
   background-color: var(--color-background-hover) !important;
 }

  .fourbuttons button:nth-child(3){
      display:none;
  }

  .app-navigation-entry .app-navigation-entry-link .app-navigation-entry-icon,
   .app-navigation-entry .app-navigation-entry-div .app-navigation-entry-icon {
    background-size: unset !important;
  }

  #app-settings-content .section h2 {
    display: none !important;
  }


  .app-navigation-entry-icon.icon-share {
    margin-top:0.125rem !important;
  }


  .app-photos input[type='checkbox'].checkbox + label:before,
  .app-photos input[type='radio'].checkbox + label:before {
   margin: 0 0.5rem 0.188rem 0.188rem !important;
  }

  #app-settings-content {
    padding:0rem 0rem 0rem 1rem !important;
  }

  #app-settings-content input[type='checkbox'].checkbox+label {
   line-height: 1 !important;
 }

 .app-photos .section {
   padding:unset !important;
 }

  .oc-dialog .oc-dialog-close:hover,
 #uploadprogresswrapper .icon-close:hover,
 .app-sidebar__close:hover,
 .oc-conflict-pre-dlg-close-div a:hover,
 .nmc_welcome_popup-header button.modal-default-button:hover {
   filter: invert(11%) sepia(80%) saturate(6905%) hue-rotate(320deg) brightness(93%) contrast(110%);
 }
  /*photo-gallery-icon*/

  .app-photos [class^='icon-'],
  .app-photos [class*=' icon-'] {
      min-width:24px !important;
      min-height:24px !important;
    }

  .icon-video-white {
    position: absolute !important;
    top: 40% !important;
    left: 50% !important;
    transform: translate(-50%) !important;
    z-index: 20 !important;
  }
  /* hiding icon share email on mobile */
  #direct-editor .icon-share,.app-photos .photos-navigation__share, .app-photos .app-navigation-toggle {
    display: none !important;
  }
  .photos-navigation {
    margin-top: 1rem !important;
    margin-left: 0.5rem;
  }

  .app-photos .app-nav-main {
    position: fixed;
    margin-left: .5rem;
    margin-top: 1.5rem;
    z-index:99;
  }

  .app-photos .icon-vue-toggle
  {
    display: block;
    background: var(--icon-menu-custom) !important;
    width: 24px !important;
    height: 24px !important;
  }

  .app-photos .photos-navigation__back{
    margin: 0 .5rem 0 0 !important;
    padding: 0 !important;
  }

  .app-photos .photos-navigation > *:hover {
    color:#E20074;

  }
  .app-photos .photos-navigation__back:hover {
    filter: invert(15%) sepia(90%) saturate(5967%) hue-rotate(320deg) brightness(87%) contrast(105%);
  }

  .app-photos #app-navigation-vue{
    left: 0 !important;
    transition: margin .4s,opacity .4s;
    height: calc(100vh - 140px) !important;
    opacity: 1;
  }

  .app-photos .grid-title{
    font-size: 1.5rem;
  }

  .grid-container{
    padding: 0 0 10rem 2rem !important;
  }

  .app-photos button:not(:disabled):not(.primary):hover,
  .app-photos button:not(:disabled):not(.primary):focus,
  .app-photos button:not(:disabled):not(.primary):active
  {
    background-color:unset !important;
  }

  .app-photos .photos-navigation__title{
    padding: 0 !important;
  }

  .app-photos img {
    background: #f2f2f2;
  }
  .app-navigation--close{
    transform: translateX(-100vw) !important;
  }

  .app-photos .app-navigation--close {
    opacity: 0 !important;
  }

  /* photos app*/

  /* NMC-251-blink folder name issue*/
  .vue-tooltip[data-v-f56d517]{
    display: none !important;
  }

  /* NMC-678 VIDEO PLAYER BUTTON NOT VISIBLE */
  .plyr__controls__item  .plyr__control {
    color: white !important;
    }

  /*Responsive Styling*/

 @media screen and (max-width: 375px) {
     .nmc-guest .login-section .logo {
         margin: 5rem auto .5rem auto;
     }
     .nmc-guest .body-login-container {
         margin-top: 0;
     }
     .login-section h1 {
         display: none;
     }
     .nmc-guest .login-section {
         margin-bottom: 5rem;
     }
     .login-section .body-login-container a {
         margin: 0 -1rem;
         padding: 0 0.5rem !important;
     }
     .login-main {
         height: 66vh;
     }
     .nmc-guest .body-login-container {
         padding-top: 0.5rem;
         padding-bottom: 1rem;
     }
     .personal-settings-setting-box .section input[type='text'],
     .personal-settings-setting-box .section input[type='email'],
     #personal-settings .multiple-mail input,
      #webdav-address input[type='text'], #security input[type='text'] {
        width:290px !important;
      }
      select#languageinput {
       width:290px !important;
     }
     .para-2 {
       max-width:300px;
     }

     #body-settings #quota {
       width:290px;
     }

     .telekom-link p {
       width:300px !important;
     }

     #nextcloud h5, #nextcloud span {
       font-size: 1rem !important;
     }
     .actions-selected span:nth-child(2){
       display:none;
     }

     #selectedActionsList .popovermenu {
       right: -50px;
     }

     .header-menu__wrapper{
       top: 62px !important;
     }
     #uploadprogressbar {
       width: 25px !important;
     }
     .modal-mask#nmc_welcome_popup .modal-container {
       max-height: 420px !important;
     }

     table.multiselect th .columntitle.name span{
       font-size: 0.875rem;
     }

     #app-tokens-table .token-name input{
      width: 100px !important;
     }
     #nmc_welcome_popup a.button ,
     #nmc_welcome_popup button.primary {
       max-width:120px !important;
     }
     .nmc_welcome_popup-header h2 {
      max-width: 220px !important;
     }
 }

 @media (min-width: 0px) and (max-width: 410px){
 .grid-container {
     padding: 0 1rem 10rem 1rem !important;
  }
  .photos-navigation{
    margin-left: 2.5rem;
    padding: 0 !important
  }
 }

 @media screen and (max-width: 640px) {
     .nmc-login .login-section,
     .nmc-guest .login-section {
         width: 100%;
     }
     .menubar button {
         margin-right: 0rem !important;
     }
     #editor .menubar button {
        margin-right: 1rem !important;
    }
     .menubar button.icon-redo {
         margin-right: 0.5rem !important;
         margin-left: 0.5rem !important;
     }
     .brand-footer {
         position: relative;
         padding: 1rem 0 1.5rem 0;
     }
     #personal-settings .brand-footer {
         position: fixed;
     }
     #personal-settings #tarrifInfo {
       margin-bottom: 5.25rem;
     }
     .brand-footer .brand-footer-bar {
         justify-content: center !important;
         height: auto;
     }
     .brand-footer .brand-footer-nav li {
         width: 100%;
         text-align: center;
     }
     .brand-footer .brand-footer-bar-text {
         margin-left: 0;
         margin-bottom: 1rem;
     }
     .login-section .body-login-container a {
         padding: 0 1rem;
     }
     .brand-footer ul li:nth-child(2n) {
         margin: .5rem 0;
     }
     #nextcloud h5,
     #nextcloud span {
         padding: 0 !important;
         font-size: 1.25rem !important;
     }
     #header .logo-area {
         display: none;
     }
     #viewer .viewer__content {
         margin: auto 1rem !important;
     }
     .icon-previous,
     .icon-next,
     .play-icon {
         width: 24px !important;
         height: 24px !important;
     }
     #viewer .modal-wrapper a.prev {
         left: 31.5% !important;
     }
     #viewer .modal-wrapper a.next {
         right: 25% !important;
     }
     #viewer .modal-header .modal-title {
         width: calc(50% - 70px)!important;
     }
     #filestable .summary {
         height: 320px;
     }
     .toastify.dialogs{
       max-width: 312px !important;
       min-width: 312px !important;
       margin-left: -9.75rem !important;
     }
     .action-restore.permanent span:not(.icon) {
       display: none;
     }

     .personal-settings-setting-box .section input[type='text'],
     .personal-settings-setting-box .section input[type='email'],
     #personal-settings .multiple-mail input,
      #webdav-address input[type='text'], #security input[type='text'] {
        width:350px;
      }

      #personal-settings .multiple-mail input{
        margin-top:unset !important;
     }
     #personal-settings-avatar-container .telekom-link p,
     .personal-settings-setting-box.personal-settings-group-box.section
     {
       max-width: 380px;
     }

     #app-tokens-table .token-name input{
      width: 190px;
     }

      select#languageinput {
       width:350px;
     }

    #nmc_welcome_popup .modal-footer button {
      margin:0 0.25rem 0 0 !important;
    }
    .app-photos #app-navigation-vue{
      height: calc(100vh - 65px) !important;
    }
    #nmc_welcome_popup .modal-footer {
     display:inline-block;
    }
    .footer-actions {
      display: inline-block;
      margin-top:0.5rem;
    }

 }

 @media screen and (max-width: 689px) {
     #fileList td a a.action.action-share.shared-style {
         width: 0 !important;
     }
 }

 @media screen and (min-width: 640px) and (max-width: 1023px) {
     .breadcrumb {
         margin-left: 2rem;
     }
     #viewer .modal-wrapper a.prev {
         left: 36.5% !important;
     }
     #viewer .modal-wrapper a.next {
         right: 31% !important;
     }
 }

 @media screen and (max-width: 1024px) {
     .brand-footer .brand-footer-bar {
         justify-content: space-between;
     }
     .closePopup {
         margin-right: 0;
     }
     #controls {
         margin-bottom: 1rem !important;
         padding: 0 0 0 2.5rem !important;
     }
     #rich-workspace {
         padding: 0 1rem !important;
     }

     #direct-editor{
       padding: 0 1rem !important;
     }

     #contactsmenu,
     #settings .menutoggle,
     .nmc_spica_wrapper,
     .search-outer a.header-menu__trigger{
         flex-direction: column;
     }

     .nmc_spica_wrapper .has-unread {
       position: absolute;
       right: 0.25rem;
       top: 2rem;
       padding: 0.063rem 0.125rem 0 0.125rem;
     }

     .nmc_spica_wrapper div {
       font-size: 0.625rem;
       color: var(--scl-color-grey-90);
     }

     #appmenu {
         display: none;
     }
     #more-apps {
         display: block !important;
         margin-left: 1rem;
     }
     .menu-search-text,
     .right-menu-font {
         display: flex;
         font-size: .625rem;
         margin-top: 0.25rem;
     }
     #more-apps .right-menu-font,
     .menu-search-text,
     #contactsmenu .right-menu-font {
         margin-top: .375rem;
     }
     #contactsmenu svg,
     #settings svg,
     .unified-search__trigger,
     #more-apps .icon-more-white {
         width: 20px !important;
         height: 20px !important;
         margin: 0 auto;
     }
     #contactsmenu,
     #unified-search {
         margin-right: 1rem;
     }
     #viewer a.prev {
         left: 39.5% !important;
     }
     #viewer a.next {
         right: 36% !important;
     }
     .modal-header .modal-title {
         width: calc(50% - 150px)!important;
     }

    .app-navigation[data-v-36d636e7]:not(.app-navigation--close) {
       margin-left: 0;
    }
    .pending-share-row .fileactions .button-label{
     display: none;
    }
    .pending-share-row .fileactions .icon{
       display: block !important;
    }
    .pending-share-row .fileactions .action-button {
       border: 0;
       padding: 0;
    }
    .pending-share-row .fileactions .action-button.accept{
       background: none;
    }
    .activitysubject{
       width: 50%;
    }
    .nmc_spica_wrapper .icon-mail{
       background-image: var(--icon-email-custom) !important;
       padding: 0;
       min-height: 20px;
       min-width: 20px;
       margin-bottom: 0.25rem;
       margin-left: 0.5rem;
    }

    .app-photos .app-nav-main{
      margin-left: 1rem !important;
    }
    .app-nav-main.app-nav-close {
      left: 285px;
      transition: left 2s ease 0s;
    }
    .modal-wrapper {
      height: 86% !important;
    }
    #viewer .modal-wrapper {
      height: 100% !important;
    }
    .profile-settings-container .multiple-mail,
    .personal-settings-container{
      flex-direction: column;
    }
}

 @media screen and (min-width: 1025px) and (max-width: 1600px) {
     #viewer a.prev {
         left: 42% !important;
     }
     #viewer a.next {
         right: 39.1% !important;
     }
     #fileList td a a.action.action-menu {
         display: none !important;
     }
 }

 @media screen and (min-width: 1025px) {
     .breadcrumb-translation {
         transition: top .4s ease-out;
     }
     .oc-dialog {
         width: 640px !important;
     }
     .oc-conflict-pre-dlg {
       width: 288px !important;
   }
     .menu-search-text,
     .email-menu-text,
     .username-lable {
         margin-left: 0.5rem;
     }
     .app-photos .app-navigation--close + main#app-content-vue {
      margin-left: 20px !important;
    }
 }

 @media screen and (min-width: 641px) {
     #uploadprogressbar .desktop {
         display: block !important;
     }
 }

 @media screen and (max-width: 650px) {

   .header-menu__carret {
     right: 12.4375rem;
   }

   #header-menu-unified-search{
     position: fixed !important;
     width: 100%;
   }
 }


 @media screen and (max-height: 700px) {
     #app-navigation:not(.vue) ul {
         padding-top: 0;
     }
 }

 @media (min-width: 700px) and (max-width: 1024px){
  .app-photos .grid-container{
    padding:0 3rem 10rem 3rem !important;
  }
  .app-photos .photos-navigation{
    margin-left: 3.2rem;
    padding: 0 !important;
  }
}
 @media screen and (max-width: 420px) {

     .menububble{
       height: 60px !important;
     }

     .header-menu__carret {
       right: 10.4375rem !important;
     }
 }

 @media screen and (max-width: 320px) {
   table.multiselect th .columntitle.name span{
     font-size: 0.8125rem !important;
   }
   table.multiselect th .columntitle .headerSizeOpen,
   table.multiselect th .columntitle #headerSizeCount{
     display: none;
   }
 }

 @media screen and (max-width: 768px) {
     .app-password-username-row {
     display: table-caption;
   }

   .button-vue[data-v-609b0a50]{
      margin:0 !important;
   }

}

 @media screen and (max-width: 480px) {
     .app-password-row {
     display: table-caption !important;
   }

   .devices-session .clientslinks {
     display: grid !important;
   }

     #clientslinks{
     display: grid !important;
   }

   #webdav-address div {
     display: grid;
   }

   #filestable th .columntitle.name {
     margin-left: 1.625rem;
   }

   #app-content-sharingout #filestable th .columntitle.name,
   #app-content-sharingin #filestable th .columntitle.name,
   #app-content-favorites #filestable th .columntitle.name
   {
     margin-left: 5.4rem;
   }

   #app-content-trashbin #selectedActionsList .popovermenu {
     right:0 !important
   }

   #app-content-trashbin table th .selectedActions {
     float: unset !important;
   }

   table.multiselect th .columntitle.name {
     padding-left: 0 !important;
     font-size: 0.875rem;
   }

   .username-lable{
     text-overflow: ellipsis;
     overflow: hidden;
     width: 2.5rem;
     height: 0.75rem;
   }
   .username-lable .right-menu-font {
     margin-top: 0.0625rem;
   }

   #app-tokens-table .token-name input{
    width: 175px;
   }

 }

 @media all and (min-width: 1024px) and (max-width: 1072px){
   #files-public-content .item-download{
     padding-right: 2rem;
   }
 }


 @media screen and (max-width: 1366px) and (min-height: 1024px) {
   #app-content-files #fileList td a a.action.action-menu {
     display: flex !important;
   }
 }


 @media screen and (min-width: 568px) and (max-height: 414px) {
   #app-navigation:not(.vue) ul {
    height: auto !important;
    overflow-x: unset !important;
    overflow-y: unset !important;
    }
   }

   @media only screen and (max-width: 988px) and (min-width: 1025px), only screen and (max-width: 688px){
    #filestable.view-grid #fileList a.action-share span:not(.icon):not(.avatar) {
       position: unset !important;
       left: unset !important;
       top: unset !important;
       width: unset !important;
       height: unset !important;
   }
 }

 @media only screen and (max-width: 1000px){
  #fileList a.action-share span:not(.icon):not(.avatar) {
      position: absolute;
      left: -10000px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
  }
  }

.cl-main a{
  color: #00739f !important;
}

 /*Responsive Styling*/