.details-panel.home {
  background-color: @color-background;
  overflow: hidden;
  .content {
    display: flex;
    flex: 1 auto;
    flex-direction: row;
    padding: 1rem;
    .left {
      width: 100%;
      flex-direction: column;
      margin-right: 1rem;
    }
    .right {
      width: 40%;
      min-width: 200px;
      max-width: 600px;
      flex-direction: column;
    }
    .full {
      width: 100%;
    }
    .web-preview {
      margin-bottom: 1rem;
      .widget {
        .widget-style();
        .top-bar {
          .widget-bar-style();
        }
        background-color: white;
        width: 100%;
        height: 100%;
        p {
          font-size: 13px;
          color: @gray-normal;
          padding: 10px;
          padding-bottom: 0px;
        }
        .table {
          color: @gray-normal;
          font-size: 12px;
          margin-left: 0.2rem;
          max-width: 300px;
          tr {
            &:first-child {
              td {
                border: none;
              }
            }
            td {
              border-color: @color-divider;
              &.right {
                text-align: right;
              }
            }
          }
          th {
            font-size: 10px;
            color: @gray-lighter;
            font-weight: 500;
            border: none;
            &.right {
              text-align: right;
            }
          }
        }
        .frame {
          padding-top: 8rem;
          border: 0;
          position: absolute;
          left: -100%;
          top: -100%;
          height: 400%;
          width: 400%;
          transform: scale(0.5);
        }
        .frame-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 100;
          color: transparent;
        }
      }
    }
    .mini-logs {
      .widget {
        .widget-style();
        .top-bar {
          .widget-bar-style();
          background-color: darken(@gray-darkest, 3%);
          border-bottom: 1px solid rgba(255,255,255,0.1);
          .text {
            color: white;
          }
        }
        height: 100%;
        .logs {
          background-color: @gray-darkest;
          color: @gray-lightest;
          font-family: @font-code;
          font-size: 10px;
          white-space: pre-wrap;
          -webkit-user-select: text;
          padding: 1.2rem 1.2rem 5rem 1.2rem;
          overflow: auto;
          height: 100%;
        }
        p {
          margin-bottom: 0px;
        }
        /*.mini-logs-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 100;
          color: transparent;
          transition: all 0.25s;
          .icon {
            margin-top: 25%;
            display: block;
            font-size: 60px;
            text-align: center;
          }
          .text {
            font-family: @font-regular;
            font-size: 20px;
            text-align: center;
          }
          &:hover {
            color: white;
            background-color: @gray-darkest;
            opacity: 0.75;
          }
        }*/
      }
    }
    .folders {
      .widget {
        .widget-style();
        background-color: white;
        .top-bar {
          .widget-bar-style();
        }
        .folders-list {
          .folder {
            display: flex;
            padding: 1rem;
            border-bottom: 1px solid @color-divider;
            &:last-child {
              border-bottom: none;
            }
            &:hover {
              background-color: @color-box-button;
            }
            img {
              width: 32px;
              min-width: 32px;
              height: 25px;
            }
            .text {
              margin-top: 0.3rem;
              margin-left: 1rem;
              width: 180px;  
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}