@import "vendor/xeditable/_xeditable.scss";

#app-content.content-with-sidebar {
  width: 60%;
}

#emptycontent, .emptycontent {
  color: #888;
  text-align: center;
  margin-top: 30vh;
  width: 100%;
}

#emptycontent [class^="icon-"], .emptycontent [class^="icon-"], #emptycontent [class*=" icon-"], .emptycontent [class*=" icon-"] {
  background-size: 64px;
  height: 64px;
  width: 64px;
  margin: 0 auto 15px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  opacity: .4;
}

.icon-note, .icon-filetype-note {
  background-image: url("../img/app-icon.svg");
}

#emptycontent h2, .emptycontent h2 {
  margin-bottom: 10px;
  line-height: 150%;
}

.listing {
  height: 40pt;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0pt;
  font-size: 100%;
  font-family: inherit;
  line-height: 40pt;
  white-space: nowrap;
  padding: 0pt 15pt;
  width: 100%;
}

.listingTable {
  width: 100%;
}

.listingSort {
  height: 54pt;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0pt;
  font-size: 100%;
  font-family: inherit;
  line-height: 40pt;
  white-space: nowrap;
  padding: 0pt 0pt;
  width: 100%;
  thead tr th:first-child, tbody tr td:first-child {
    padding-left: 15px;
  }
  tr > td {
    border-top: 1px solid #EEE;
    &.actions {
      width: 50%;
      .share.shared {
        width: 70px;
        line-height: 34px;
        background-position-x: 0;
        text-align: right;
      }
    }
    &.info {
      width: 25%;
      padding-right: 15px;
    }
  }
}

.listingBlank {
  height: 40pt;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0pt;
  font-size: 100%;
  font-family: inherit;
  line-height: 40pt;
  white-space: nowrap;
  padding: 0pt 0pt;
  width: 100%;
}

.listing:hover {
  background-color: #EEE;
}

.pointer {
  cursor: pointer;
}

.file {
  font-weight: bold;
  line-height: 15px;
  width: 350px;
  @media screen and (max-width: 1200px){
    width: 150px;
  }
  .caption {
    width: 100px;

    @media screen and (min-width: 420px){
      width: 180px;
    }
    @media screen and (min-width: 720px){
      width: 450px;
    }
    @media screen and (min-width: 920px){
      width: 600px;
    }
    @media screen and (min-width: 994px){
      width: 150px;
    }
    @media screen and (min-width: 1600px){
      width: 300px;
    }
    display: inline-block;
    small {
      color: #959595;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      display: block;
    }
  }
}

.filesort {
  /*width: 60%;*/
}

.actions {
  padding-right: 15pt;
  .share-owner {
    color: #A0A0A0;
    display: inline-block;
    float: right;
    line-height: 26pt;
  }
}

.view-container {
  @media screen and(max-width: 994px){
    width: 200%;
  }

  .view-left {
    float: left;
    width: 50%;
    height: calc(100vh - 45px);
    overflow-y: auto;
    #controls{
      display: inline;
      .view-modes{
        float: right;

      }
    }
  }
  .view-right {
    float: left;
    width: 50%;
    height: calc(100vh - 45px);
    overflow: auto;
    border-left: 1px solid #c9c9c9;
    .controls{
      padding-left: 0;
      @media screen and (max-width: 994px){
        padding-left: 35px;
      }
      .note-title-form .newgroupinput {
        display: none;
      }
      .autosave {
        font-size: 16px;
        line-height: 44px;
        height: 44px;
        padding-right: 15px;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s 0.5s, opacity 0.5s linear;
        &.shown {
          visibility: visible;
          opacity: 1;
          transition: opacity 0.5s linear;
        }
      }
      .back{
        display: inline-block;
      }
    }
  }
}

.info {

  /*width: 30%;*/
}

.modified {
  display: inline-block;
  width: 100%;
}

.buttons {
  background-repeat: no-repeat;
  background-position: center center;
  float: right;
  height: 26pt;
  margin-left: 15pt;
  width: 26pt;

}

.app-nextnote {
  .button {
    display: inline-block;
  }
}

.edit {
  opacity: 0.3;
  &:hover {
    opacity: 1;
  }
}

.share {
  .buttons {
    background-image: url("../../../core/img/actions/share.svg");
    opacity: 0.3;
  }
  &:hover > .buttons {
    opacity: 1;
  }
}

.delete {
  background-image: url("../img/delete.png");
  opacity: 0.3;
  &:hover {
    opacity: 1;
  }
}

.hidden {
  display: none !important;
}

.edit-note {
  background-image: url("../../../core/img/actions/rename.svg");
  opacity: 0.3;
  &:hover {
    opacity: 1;
  }
}

.restore-note {
  background-image: url('../../../core/css/../img/actions/history.svg?v=1');
  opacity: 0.3;
  &:hover {
    opacity: 1;
  }
}

.indent {
  margin-left: 10pt;
}

.notesort {
  > span {
    float: left;
  }
  font-weight: normal;
  color: #A0A0A0;
}

.sortarrow {
  background-repeat: no-repeat;
  background-position: center center;
  width: 20pt;
  height: 20pt;
  float: left;
  margin-top: 10pt;
  opacity: 0.3;
}

.sortup {
  background-image: url("../img/triangle-n.svg");
}

.sortdown {
  background-image: url("../img/triangle-s.svg");
}

.sorttitle {
  float: left;
}

.newfile, #controls .note-title-form .newgroupinput {
  display: none;
}

.fileinput {
  width: 80pt;
  height: 36px;
  display: inline-block;
  color: #A0A0A0;
}

.newfileinput {
  width: 80pt;
  height: 36px;
  display: inline-block;
}

.latestfile {
  color: #5cb85c;
}

#grouplist {
  /*z-index: 100;*/
  .add_group_container{
    padding: 0 5px 0 5px;
    input#new_group_name{
      width: 150px;
    }
  }
  .add-note {
    &:before {
      content: "+";
      font-size: 150%;
      font-weight: bold;
      left: 12px;
      position: absolute;
    }
    padding: 0 31px;
  }
  > li {
    height: 44px;
  }
}

.bold {
  font-weight: bold;
}

.mceNonEditable {
  padding: 10px;
}

#app-navigation {
  .active {
    font-weight: bold;
  }
  .utils {
    bottom: 0;
    font-size: 12px;
    padding: 7px 7px 0 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}

.action:not(.text), .icon:not(.text), [class^="icon-"]:not(.text), [class*=" icon-"]:not(.text) {
  display: inline-block;
  height: 16px;
  margin: 0;
  padding: 0;
  width: 16px;
}

#app-navigation li > .utils > {
  .numnotes {
    padding-right: 10px;
    text-align: right;
  }
  * {
    background-size: auto auto;
    float: left;
    height: 44px;
    line-height: 44px;
    width: 44px;
  }
}

[class^="icon-"], [class*=" icon-"], .action, .icon {
  background-repeat: no-repeat;
}

#content li {
  cursor: default;
}

#app-navigation {
  li > .utils > *:not(.numnotes):not(.starred) {
    display: none;
  }
  .utils {
    bottom: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  li.active[data-type="category"] > .utils > * {
    background-color: transparent;
    display: inline-block;
    float: left;
  }
}

.oc-addnew {
  display: block !important;
  padding: 0 !important;
  display: block !important;
  padding: 0 !important;
}

#app-navigation {
  .oc-addnew input[type="text"] {
    height: 34px !important;
    margin-left: 6px;
    margin-top: 5px;
  }
  input[type="text"] {
    width: 180px;
  }
}

.oc-addnew {
  input, select {
    border-bottom-right-radius: 0;
    border-right: 0 none;
    border-top-right-radius: 0;
    display: inline-block;
    float: left;
    margin: 0 0 5px;
  }
}

#app-navigation .oc-addnew .new-button {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px auto;
  margin-top: 5px;
  width: 32px;
}

.oc-addnew button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  display: inline-block;
  float: left;
  height: 34px !important;
  margin: 5px 0;
}

.editing {
  display: none;
}

#announcement {
  padding: 10px;
  h1 {
    color: #1D2D44;
    font-weight: bold;
    font-style: italic;
    font-size: 12pt;
  }
  a {
    color: #1D2D44;
    text-decoration: underline;
    font-weight: bold;
  }
}

#announcement-dismiss {
  padding: 10px;
  a {
    color: #1D2D44;
    text-decoration: underline;
    font-weight: bold;
  }
}
#ownnote{
  overflow: hidden;
}
#ownnote-l10n {
  display: none;
}

#dropdown.shareDropDown {
  @media screen and (max-width: 1785px) {
    clear: both;
  }
  #shareWith {
    width: 165px;
  }
  #shareWithList li {
    background-color: #dfdfdf;
    .unshare {
      float: right;
    }
    .avatar {
      float: left;
    }
    .username {
      float: left;
      height: 32px;
      line-height: 32px;
      padding-left: 15px;
      &:after {
        clear: both;
        display: table;
      }

    }
    .sharingOptionsGroup {
      &:before {
        clear: both;
        display: table;
        content: "";
      }
      display: block;
      //clear: both;
      //height: 32px;
      line-height: 32px;
      @media screen and (max-width: 1280px) {
        label {
          display: block;
        }
      }
    }
  }
}
.mce-branding {
  display: none !important;
}
.mce-container {
  .mce-window-head {
    .mce-title {
      img {
        display: none;
      }
    }
    height: 20px !important;
  }


}
.mce-floatpanel.mce-window {
  .mce-container.mce-abs-layout-item {
    .mce-container-body .mce-container-body .mce-container-body {
      //max-height: 50px;
    }
    .mce-textbox {
      padding: 0px;
      margin: 0;
      max-width: 282px;
    }
    .mce-filepicker {
      .mce-textbox {
        margin-right: 0;
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      .mce-btn.mce-open {
        button {
          min-height: 24px;
        }
      }
    }
  }
}
.nav-trashbin {
  bottom: 0;
  .nav-icon-trashbin {

    background-image: url(../../../apps/files/css/../img/delete.svg?v=1);
    padding-left: 44px !important;
    background-size: 16px 16px;
    background-position: 14px center;
    background-repeat: no-repeat;
  }
}

.editable-text {
  padding-left: 9px;
  width: 100%;
  padding-right: 9px;
  input[type="text"] {
    width: 130px !important;
  }
}

.btn {
  &:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
  }
  background-color: #fff;
  border-color: #ccc;
}

.btn-primary {
  &:hover {
    background-color: #286090;
    border-color: #204d74;
  }
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

.icon-ok {
  background-image: url('../../../core/img/actions/checkmark-white.svg?v=2');
}

.icon-remove {
  background-image: url('../../../core/img/actions/close.svg?v=2');
}

.ui-dialog.ui-widget[aria-describedby="mceNextcloudFileBrowser"] {
  z-index: 99999;
}

#mceNextcloudFileBrowser {
  background-color: #fff;
  max-height: 500px !important;
  #currentDir {
    margin-bottom: 5px;
    font-weight: bold;
    position: fixed;
    background-color: #fff;
  }
  #fileList {
    list-style-type: none;
    margin-top: 25px;
    li {
      &.dir {
        background-image: url('../../../core/img/filetypes/folder.svg?v=0');

      }
      &.file {
        background-image: url('../../../core/img/filetypes/image.svg?v=0');
      }
      &.back {
        background-image: url('../../../core/img/filetypes/folder.svg?v=0');
      }
      background-repeat: no-repeat;
      background-size: 25px;
      background-position-y: 10px;
      line-height: 25px;
      padding-left: 30px;
      border-top: 1px solid #000;
      padding-top: 10px;
      padding-bottom: 10px;
      cursor: pointer;
    }

  }
}

.ui-button.ui-button-icon-only {
  min-height: auto !important;
}

.view-note-container {
  h1 {
    font-size: 28px;
    line-height: 28px;
    margin-bottom: 10px;
  }
  .noteContent, h1 {
    padding-left: 10pt;
    padding-right: 10pt;
  }
}

.edit-note-container {
  .controls {
    position: static;
    left: 0 !important;

  }
}
.app-nextnote {
  @media only screen and (max-width: 1280px) {
    #body-login #header {
      padding-top: 10px;
    }
    /* line 7, /var/www/nextcloud14/core/css/mobile.scss */
    #body-login .wrapper {
      display: flex;
      flex-direction: row;
      align-self: center;
      align-items: center;
    }
    /* line 15, /var/www/nextcloud14/core/css/mobile.scss */
    #update-notification {
      display: none !important;
    }
    /* line 20, /var/www/nextcloud14/core/css/mobile.scss */
    #dropdown {
      margin-right: 10% !important;
      width: 80% !important;
    }
    /* line 26, /var/www/nextcloud14/core/css/mobile.scss */
    .ui-autocomplete {
      z-index: 1000 !important;
    }
    /* line 31, /var/www/nextcloud14/core/css/mobile.scss */
    .error-wide {
      width: 100%;
      margin-left: 0 !important;
      box-sizing: border-box;
    }
    /* line 40, /var/www/nextcloud14/core/css/mobile.scss */
    #app-navigation, #app-content {
      position: absolute !important;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    /* line 49, /var/www/nextcloud14/core/css/mobile.scss */
    #app-navigation {
      width: 250px !important;
    }
    /* line 53, /var/www/nextcloud14/core/css/mobile.scss */
    #app-content {
      width: 100% !important;
      left: 0 !important;
      background-color: #fff;
      overflow-x: hidden !important;
      z-index: 1000;
    }
    /* line 63, /var/www/nextcloud14/core/css/mobile.scss */
    #body-settings #app-content {
      overflow-x: auto !important;
    }
    /* line 67, /var/www/nextcloud14/core/css/mobile.scss */
    #app-navigation-toggle {
      position: fixed;
      display: inline-block !important;
      //top: 45px;
      left: 0;
      width: 44px;
      height: 44px;
      z-index: 200;
      background-color: rgba(255, 255, 255, .7);
      cursor: pointer;
      opacity: 0.6;
    }
    /* line 79, /var/www/nextcloud14/core/css/mobile.scss */
    #app-navigation-toggle:hover, #app-navigation-toggle:focus {
      opacity: 1;
    }
    /* line 85, /var/www/nextcloud14/core/css/mobile.scss */
    #app-navigation + #app-content #controls {
      padding-left: 44px;
    }
    /* line 90, /var/www/nextcloud14/core/css/mobile.scss */
    #body-user .app-files.viewer-mode #controls {
      padding-left: 0 !important;
    }
    /* line 93, /var/www/nextcloud14/core/css/mobile.scss */
    .app-files.viewer-mode #app-navigation-toggle {
      display: none !important;
    }
    /* line 97, /var/www/nextcloud14/core/css/mobile.scss */
    table.multiselect thead {
      left: 0 !important;
    }
    /* line 103, /var/www/nextcloud14/core/css/mobile.scss */
    #usersearchform {
      display: none;
    }
    /* line 106, /var/www/nextcloud14/core/css/mobile.scss */
    #body-settings #controls {
      min-width: 768px !important;
    }
    /* line 112, /var/www/nextcloud14/core/css/mobile.scss */
    #oc-dialog-filepicker-content .filelist .filesize, #oc-dialog-filepicker-content .filelist .date {
      display: none;
    }
    /* line 116, /var/www/nextcloud14/core/css/mobile.scss */
    #oc-dialog-filepicker-content .filelist .filename {
      max-width: 80%;
    }
    /* line 122, /var/www/nextcloud14/core/css/mobile.scss */
    .snapjs-left #app-navigation-toggle, .snapjs-left #controls {
      top: 0;
    }
    /* line 126, /var/www/nextcloud14/core/css/mobile.scss */
    .snapjs-left table.multiselect thead {
      top: 44px;
    }
  }
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table !important;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table !important;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table !important;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table !important;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.tooltip {
  z-index: 2001 !important;
}
.oc-dialog{
  z-index: 999999;
  .message{
    padding-left: 35px;
    li{
      list-style: disc;
      margin-left: 15px;
    }
  }
}
.mce-tinymce.mce-fullscreen{
  margin-top: 45px;
}

.note-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block !important;
}
