@toolbar-height: 30px;
@preview-height: 247px;

.project-list-item {
    position:relative;
    overflow:hidden;
    border-radius:3px;
    background-color:#fff;
    transition:background-color 0.3s;
    transition:box-shadow 0.3s;
    box-shadow: 0px 0px 3pt 2pt transparent;
    &:hover {
        box-shadow: 0px 0px 3px 3px #e0e0e0;
        cursor: pointer;
        .project-settings {
            top:0%;
            opacity:1;
        }
    }
    &.selected {
        color:#fff;
        background-color:#333c4e;
        .project-settings {
            top:0%;
            opacity:1;
        }

        .tags {

          li.tag {
            background-color:#293141;

            span {
              color:#E0E8F7;
              background-color:#293141;
            }

          }
        }
    }
    &.listing {
        width: 700px;
    }

    img {
        display:block;
    }

    .tags {

      li.tag {
        margin:2px 5px 2px 0px;
        padding:4px;
        display: inline-block;
        background-color:#9CABC4;

        span {
          color:#fff;
        }
      }


    }

    div.tag-container {
        overflow-y: auto;
    }
    .tag-container-no-items {
        margin-bottom:12px;
    }
    .project-details-tags {
        button {
            padding:4px 6px;
        }
    }
    .projects-details-value {
        button {
            margin-top:10px;
        }
    }
}

.shared-project-list-item {
    overflow:hidden;
    border-radius:3px;
    background-color:#fff;
    transition:background-color 0.3s;
    transition:box-shadow 0.3s;
    box-shadow: 0px 0px 3pt 2pt transparent;
    &:hover {
        box-shadow: 0px 0px 3px 3px #e0e0e0;
        cursor: pointer;
        .project-settings {
            top:0%;
            opacity:1;
        }
    }
    &.selected {
        color:#fff;
        background-color:#333c4e;
        .project-settings {
            top:0%;
            opacity:1;
        }

        .tags {

          li.tag {
            background-color:#293141;

            span {
              color:#E0E8F7;
              background-color:#293141;
            }

          }
        }
    }
    &.listing {
        width: 700px;
    }

    img {
        display:block;
    }

    .tags {

      li.tag {
        margin:2px 5px 2px 0px;
        padding:4px;
        display: inline-block;
        background-color:#9CABC4;

        span {
          color:#fff;
        }
      }


    }

    div.tag-container {
        height: 34px;
        overflow-y: auto;
    }
}

.project-header-inner {
    position:relative;
}

.project-detail-title {
    margin-bottom:10px;
    display: inline-block;
}

.project-settings {
    font-size: 16px;
    width:100%;
    height: @toolbar-height;
    opacity:1;
    background-color:rgba(255,255,255,1);
    transition:all 0.3s;
    a {
        color:#3e4960;
    }
}

.project-detail-hide-hero {
    .field-hero-image {
        display:none;
    }
}

.project-settings-inner {
    padding: 7px 6px;

    a.course-delete {
        float: right;
    }
}

.project-details-inner {
    padding:20px;
}

.project-details-row {
    font-size:11px;
}

.projects-details-label {
    color:#15a4fa;
    font-weight:600;
    margin-bottom:4px;
}

.shared-projects-details-label {
    color:#293141;
    font-weight: 600;
}

h4.project-detail-title-inner {
    height: 36px;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

     & span.highlighted {
    background-color: #ff0;
    }
}

.pos {
    top: @toolbar-height;
    height: @preview-height - @toolbar-height;
    position: absolute;
    background-color: rgba(0,0,0,0);
    
    &.large {
        width: 100%;
        z-index: 1;    
    }
    
    &.medium {
        width: 80%;
        z-index: 2;
        margin-left: 10%;
    }

    &.small {
        width: 60%;
        z-index: 3;
        margin-left: 20%;
    }
}

.preview-large {
    -ms-zoom: 0.222;
    -moz-transform:  scale(0.222);
    -moz-transform-origin: 0% 0px;
    -o-transform: scale(0.222);
    -o-transform-origin: 0px 0px;
    -webkit-transform: scale(0.222);
    -webkit-transform-origin: 0 0;
    top: @toolbar-height;
    width: 450%;
    height: 999px;
    position: relative;
}

.preview-medium { 
    -ms-zoom: 0.25;
    -moz-transform: scale(0.25);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.25);
    -o-transform-origin: 0 0;
    -webkit-transform: translateZ(0) scale(0.25);
    -webkit-transform-origin: 0 0;
    top: @toolbar-height;
    width: 320%;
    height: 866px;
    display: block;
    position: relative;
    margin-left: 10%;
}

.preview-small {
    -ms-zoom: 0.25;
    -moz-transform: scale(0.25);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.25);
    -o-transform-origin: 0px 0px;
    -webkit-transform: scale(0.25);
    -webkit-transform-origin: 0 0;
    top: @toolbar-height;
    width: 240%;
    height: 866px;
    display: block;
    position: relative;
    margin-left: 20%;
}

.frame {
    margin: 0 auto;
    height: @preview-height;
    margin-bottom: 10px;
    background-color: #293141;
    width: 100%;
    overflow: hidden;
}

.filler {
    padding-top: 27px;
    width: 300px;
    height: 222px;
}