body.imce {

  font-family:sans-serif;
  height:100% !important;
  background-color: _lighten($neutral-color, 0.48) !important;
  color: black;

  .imce-content {
    @include display-flex;
    @include flex-direction(column);
    height:100%;

    background:transparent;
  }

  #ops-wrapper {
    max-width:auto;
    background: linear-gradient(to bottom, #f2f2f2, #e9e9e9);
    border:1px solid #d2d2d2;
  }


  #op-contents {
    left:0 !important;
  }

  #ops-list a {
    padding:10px;
    font-size:14px;
    line-height:1em;
    font-weight:bold;
    span {
      color:$admin-link-color;
      &:hover {
        color:_lighten($admin-link-color, 10%);
      }
      &:before {
        font-family: FontAwesome;
      }
    }
  }
  #op-item-upload a {
    background:none;
    span:before { content: "\f093" "\00A0" "\00A0"; }
  }
  #op-item-delete a {
    background:none;
    span {
      color:#545454;
      &:hover { color:_lighten(#545454, 10%); }
    }
    span:before { content: "\f1f8" "\00A0" "\00A0"; }
  }
  #op-item-resize a {
    background:none;
    span:before { content: "\f0b2" "\00A0" "\00A0"; }
  }
  #op-item-mngdir a {
    background:none;
    span:before { content: "\f07c" "\00A0" "\00A0"; }
  }
  #op-item-sendto,
  #op-item-cancel {
    float:right;
  }
  #op-item-sendto a,
  #op-item-cancel a {
    margin-left:2px;
    padding:10px 20px;
    background:$admin-link-color;
    &:hover { background:_lighten($admin-link-color, 10%); }
    span { color:white !important; }
  }
  #op-item-sendto a span:before {
    content: "\f00c" "\00A0" "\00A0";
  }
  #op-item-cancel a span:before {
    content: "\f00d" "\00A0" "\00A0";
  }
  #op-item-help {
    display:none;
  }

  #navigation-header {
    background:#e0e0d8;
    height:auto;
    padding:6px 10px;
    span {
      color:black;
      background:none;
      padding:0;
      font-size:13px;
      font-weight:bold;
      text-transform:uppercase;
    }
  }
  #file-header-wrapper {
    pointer-events:none;
    background:#e0e0d8;
    height:auto;
    td.name {
      color:black;
      padding:6px 10px;
      font-size:13px;
      font-weight:bold;
      text-transform:uppercase;
      &:after { content:""; }
    }
  }


  #navigation-tree li a {
    font-size:13px;
    color:$admin-link-color;
    text-decoration:none;
    &.active,
    &:hover {
      color:black;
      font-weight:bold;
    }
  }
  #navigation-tree li a.folder {
    background:none;
    padding-left:0;
    &:before {
      color:#545454;
      font-family: FontAwesome;
      content:"\f07b" "\00A0" "\00A0";
    }
    &.active:before {
      content:"\f07c" "\00A0" "\00A0";
    }
  }
  #navigation-tree li.expanded > a.folder:before {
    content:"\f07c" "\00A0" "\00A0";
  }


  #file-list td {
    border:none;
    border-bottom:1px solid white;
    padding:6px 10px;
    font-size:13px;
    background:#eeeeee;
    color:$admin-link-color;
    &:hover {
      background:white;
    }
  }
  #file-list tr.selected td {
    background:white;
    font-weight:bold;
    span { color:black; }
  }
  #file-list img {
    display:none;
  }

  #dir-stat {
    display:block;
    width:100%;
    padding:6px 10px;
    font-size:11px;
    font-weight:bold;
    color:black;
    background:#e0e0d8;
  }

  #resizable-content {
    @include display-flex;
    width:100%;
    max-width:auto;

    position:relative;
    height:0;
    flex-grow:1;

    background-color:white;
  }

  #browse-wrapper {
    clear:none;
    width:250px;
    height:auto;
    vertical-align:top;
    flex-shrink:0;

    #navigation-wrapper { height:40%; }
    #sub-browse-wrapper { height:60%; }
  }

  #navigation-wrapper {
    width:auto;
    height:auto;
    float:none;
    clear:none;

    border-bottom:2px solid grey;
  }
  #sub-browse-wrapper {
    width:auto;
    height:auto;
    float:none;
    clear:none;

    td { display:none; }
    td.name { display:table-cell; }
  }

  #preview-wrapper {
    position:relative;
    height:auto;
    vertical-align:top;

    border-left:2px solid grey;
  }

  // preview styling
  .loading-message {
    padding:10px;
    font-size:14px;
  }
  .preview-container {
    display:table;
    width:100%;
    table-layout:fixed;
    padding:14px;
    * { font-size:14px; }

    .file-details {
      display:table-cell;
      vertical-align: top;
      width:50%;
      max-width:300px;
      text-align:left;

      .title {
        display:block;
        margin-bottom:12px;
        font-weight:bold;
        font-size:120%;
      }
      .file-info {
        display:block;
        margin-bottom:6px;
      }
      a {
        display:inline-block;
        margin:8px 0;
        padding: 10px;
        font-size:12px;
        line-height:1em;
        font-weight:bold;
        background-color:#eeeeee;
        color:#0074bd;
      }
      .label {
        font-weight:bold;
      }
    }
    .file-preview {
      display:table-cell;
      vertical-align: top;
      width:50%;

      img {
        float:right;
        width:100%;
        max-width:200px;
        height:auto;
        background:url('img/transparency_bkgd.jpg');
      }
    }

  }



  .crop-tool {
    clear:both;
    padding:14px;

    .crop-warning {
      display:block;
      width:92%;
      font-weight:bold;
      color:darkred;
      text-align:left;
      padding:5px 0;
      line-height:1.35em;
    }

    .crop-tabs {
      overflow:hidden;
      border-bottom:1px solid #e0e0d8;
    }
    .crop-tabs input {
      padding:10px;
      margin:0 2px 2px 0;
      width:33.33%;
      float:left;
      cursor:pointer;
      font-size:14px;
      font-weight:bold;
      background:#eeeeee;
      border:1px solid #eeeeee;
      color:$admin-link-color;

      border-radius:0;
      &:hover {
        background:_lighten($neutral-color, 0.43);
      }

      &.active {
        background:white;
        color:black;
        border:1px solid #e0e0d8;
      }

    }

    .actions {
      margin:4px;
    }

    .manualcrop-thumblist {
      font-size:11px;
      color:#545454;
      overflow:visible;
      > div {
        @include display-flex();
        @include flex-wrap(wrap);
      }
      a.manualcrop-style-thumb {
        @include display-flex();
        @include flex-direction(column-reverse);
        @include justify-content(flex-end);

        margin-bottom:75px;
        > * { margin-bottom:8px; }
      }
    }

    #crop-form-wrapper {
      border-bottom:1px solid #e0e0d8;
      padding-bottom:10px;
    }
  }

  .success-marker { display:inline;}
  .success-marker:after {
    font-family: FontAwesome;
    content: " " "\f05d"; // check-circle-o
    color:green;
  }


  // Following is copied from original imce styles with minimal changes;
  // just #imce-content changed to .imce-content
  .imce-content div.message {
    background: url(status.png) no-repeat 0 0;
    padding-left: 20px;
    margin: 2px 0;
  }
  .imce-content div.error {
    background: url(error.png) no-repeat 0 0;
    padding-left: 20px;
  }
  .imce-content div.warning {
    background: url(warning.png) no-repeat 0 0;
    padding-left: 20px;
  }
}