/* 
    Created on : Aug 11, 2014, 10:16:25 AM
    Author     : bgoodrich
*/

body.page-showcase {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@supports (height: 100dvh) {
  body.page-showcase { height: 100dvh; }
}

body.page-showcase::after {
  content: "";
  display: block;
  height: 1px; /* minimal scroll affordance */
}

.page-showcase .player_container {
    height:94%;
}

.page-showcase .bd.middle.playing{
   align-items: center;
}

.portfolio-list {
    flex:1;
    display: flex;
    flex-direction: column;
}

.portfolio-list.listview {
    flex:unset;
    width:200px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--middlegrey);
}

.portfolio-list .categories {
    order:2;
}

.portfolio-list .projects {
    order:3;
}

.showproject {
    flex:1;
    margin:20px;
}

.portfolio-list.projects .widget.categories.layout-list li .previews {
    display:none;
}

.portfolio-list.projects .widget.categories.layout-list li>.text {
    margin-left: 10px;
}

.portfolio-list.projects .widget.categories.layout-list li .name {
    height:unset;
    line-height:unset;
    max-width:140px;
}

.portfolio-list.projects .widget.categories li {
    cursor:pointer;
    padding: 5px 5px 5px 10px;
}

.portfolio-list.projects .widget.categories.layout-tile li {
    height: unset;
    flex-direction: column;
    padding: 10px;
    align-items: flex-start;
    background: var(--primary-green-light);
}

.portfolio-list.projects .widget.categories.layout-tile li svg {
    display:none;
}

.portfolio-list.projects .widget.categories.layout-tile li .previews {
    height: 50px;
    margin-bottom: 10px;
    position: relative;
    display: flex;
}

.portfolio-list.projects .widget.categories.layout-tile li .previews img {
    height: 50px;
    padding: 2px;
    border: 1px solid var(--middlegrey);
    border-radius: 6px;
    background:var(--white);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
}

.portfolio-list.projects .widget.categories.layout-tile li .previews img:not(:first-child) {
    position:relative;
    margin-left: -20px;
}

.portfolio-list.projects .widget.categories.layout-tile li .previews img:nth-child(1) { z-index: 4; transform: rotate(-5deg); }
.portfolio-list.projects .widget.categories.layout-tile li .previews img:nth-child(2) { z-index: 3; transform: rotate(-5deg); }
.portfolio-list.projects .widget.categories.layout-tile li .previews img:nth-child(3) { z-index: 2; transform: rotate(-5deg); }
.portfolio-list.projects .widget.categories.layout-tile li .previews img:nth-child(4) { z-index: 1; transform: rotate(-5deg); }

.portfolio-list.projects .widget.categories.layout-tile li .name {
    display: -webkit-box;
    -webkit-line-clamp: 2;       /* show up to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2em;          /* adjust as needed */
    max-height: calc(1.2em * 2); /* ensure two lines tall */
    white-space: unset;
}

.portfolio-list .projects.layout-tile li {
    display: flex;
    flex-direction: column;
    cursor:pointer;
}

.portfolio-list .projects.layout-tile li>div {
    display: flex;
    flex-direction: column;
}

.portfolio-list .projects.layout-tile .date {
    order: 3;
}

.portfolio-list .projects.layout-tile .owner {
    order: 2;
    display: block;
    margin-left:5px;
}

.portfolio-list .projects.layout-list .owner {
    display: block;
}

.portfolio-list .projects.layout-list .title.header {
    max-width: 130px;
}

.portfolio-list .projects.layout-list .date {
    display: none;
}

.portfolio-list .projects.layout-list > li {
    background-color:var(--white);
    cursor:pointer;
    padding: 10px;
}

.portfolio-list .projects.layout-list > li.active {
    background-color:var(--primary-color-light);
}

.portfolio-list .projects.layout-list > li:hover:not(.active) {
    background-color:var(--lightgrey);
}

.portfolio-list .projects.layout-list > * > :first-child {
    margin-right:10px;
}

.portfolio-list .projects.layout-list button img {
    max-width: 100%;
}

.portfolio-list .widget.breadcrumb {
    border-bottom: 1px solid var(--middlegrey);
    padding-left: 5px;
    flex-wrap: nowrap;
    flex: unset;
    order: 1;
}

.portfolio-list .widget.breadcrumb > li {
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-list.listview .widget.breadcrumb > li:not(:first-child) {
    color:transparent;
    background-image: url('/images/themes/1/folder_goldenrod.svg');
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: center;
    width:50px;
}

.portfolio-list .widget.breadcrumb > li:first-child {
    margin-left: 10px;
}

.portfolio-list.listview .widget.breadcrumb > li:first-child {
    margin-left: 0;
    margin-right: 10px;
}

.portfolio-list.listview .widget.breadcrumb > li:not(:first-child):before {
    margin:0;
}

.portfolio-list .widget.breadcrumb svg {
    fill: var(--primary-color);
    height:28px;
    width:28px;
}

.action-buttons {
    position: absolute;
    top: 54px;
    right: 20px;
}

.playing .action-buttons {
    display:none;
}

.action-buttons button.secondary.with-icon {
    padding:0;
    min-width:36px;
}

/**  myclasshtml (portfolio)  **/

button.select {
    display:none;
}

.page-myclasshtml.loggedin #utilitiesLoginForm {
    height:78px;
    overflow:hidden;
}

.page-myclasshtml.loggedin #t4l_loginForm {
    display:none;
}

.page-myclasshtml #t4l_loginForm > div {
    margin-top:10px !important;
}

.page-myclasshtml #utilities #plinks,
.page-myclasshtml #utilities #plinks > * {
    margin-top:0;
    top:0px;
}

.page-myclasshtml .bd > .fixed, .bd > .fixed-width {
    display: none;
}

.page-myclasshtml .flex-right-flow {
    flex:1 1 0;
    overflow-x:hidden;
    overflow-y: visible;
}

.page-myclasshtml .column-one-left {
    height:99.8423%;
    width:95%;
}

.page-myclasshtml .flex-right-flow .hiliteBar3:last-child {
    height:98.2%;
    position:relative;
    width:98.2%;
}


.page-myclasshtml #div-holder-project{
    height:425px;
    width:565px;
    margin: 0 auto 10px;
}

.page-myclasshtml h4 {
    word-break: break-all;
}

.page-myclasshtml .projectinfo.flex.container.flexrow > label::after {
    content: ":";
    margin-right: 10px;
}


.page-myclasshtml .t4l_small.bold > a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 190px;
}

.page-myclasshtml .thumb {
    margin-right:6px;
}

.page-myclasshtml .thumb > img {
    margin-top: 5px;
    height: 36px;
    width: 48px;    
}

.page-myclasshtml .info {
    margin-top:2px;
}

.page-myclasshtml .info > * {
    display: block;
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 220px;
}

.page-myclasshtml .layout-list li.project.active {
    background-color:#daecf9;
}

.page-myclasshtml ul.display.folders {
    display:flex;
    flex-direction:column;
}


.page-myclasshtml ul.display.folders > li {
    display:none;
}


.page-myclasshtml ul.display.folders > [data-type="showcase"] {
    display:flex;
}

.page-myclasshtml ul.display.folders > [data-type="showcase"] {
    order:1;
}

.page-myclasshtml ul.display.folders > [data-type="assignments"] {
    order:100;
}

.page-myclasshtml .breadcrumb-holder {
    position: unset;
}

.page-myclasshtml .highlightslink {
    border-bottom: none;
    padding:0;
    height:54px;
    position: absolute;
    top: 50px;
    background: transparent;
    right: 0;
}

.page-myclasshtml:not(.loggedin) .highlightslink {
    display:none;
}

.page-myclasshtml .highlightslink button.share {
    margin-right:0px;
}

.widget.highlightslink button.play-all {
    margin: 0 10px;
}

.page-myclasshtml ul.projects {
    order:100;
}

button.share,
body:not(.loggedin) .widget.toggle.view {
    margin-right:60px;
}


/**  end myhtml (portfolio)  **/

/**  portfolio page  **/

img.logo {
    height: 42px;
    margin-left: 6px;
}

body.page-showcase header.toolbar h1 {
    margin-right: 168px;
}

.page-portfolio:not(.loggedin) .links{
    display:none;
}

.page-portfolio form {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;    
    padding:4px;    
    width:auto;
    margin:40px auto;
}

.page-portfolio form > * {
    display:flex;
    flex-direction:column;
    align-content: center;
    margin:8px 0;
}

.page-portfolio form input {
    margin:8px 0 0;
}

.page-portfolio ul.display.folders > li {
    display:none;
}


.page-portfolio ul.display.folders > li.active {
    display:flex;
}

.page-portfolio .hd.top,  
.page-myclasshtml .hd.top {
    justify-content:flex-end;
}


.page-portfolio .hd.top .widget.search,
.page-myclasshtml .hd.top .widget.search {
    display:none;
    max-width:1000px;
}


ul.projects > li  .details-student {
    cursor:default;
    display:flex;
    flex-direction: row;
    align-items:center;
}

ul.projects.layout-tile > li  .details-student {
    padding:4px 0;
}

.projects.layout-list > li  .details-student > * {
    margin-right:4px;
}


/**  end portfolio page  **/

/**  portfolio page Wixie 4 **/

.page-portfolio .panel.folders.fixed,
.page-portfolio .panel.folders.fixed-width,
.page-myclasshtml .panel.folders.fixed,
.page-myclasshtml .panel.folders.fixed-width,
.page-portfolio .widget.highlightslink,
.page-portfolio .grades,
.page-portfolio .complete,
.page-portfolio .score,
.page-portfolio .comment,
.page-portfolio .portfolio,
.page-portfolio .projects.layout-list .team .details .team-count,
.page-portfolio .projects.layout-tile .team .details .team-count{
    display: none;
}

.page-portfolio h3.highlight-owner,
.page-myclasshtml .hd > :first-child {
    flex: 1;
    margin-left: 20px;
}

.page-portfolio:not(.loggedin) .threedots,
.page-myclasshtml:not(.loggedin) .threedots {
    display: none;
}

.page-myclasshtml li.highlight-owner.orgname {
    font-family: 'Roboto', Verdana, Arial, sans-serif;
    font-size: 1.2em;
    font-weight:500;
    cursor:pointer;
}

/**  project page  **/
.page-wixiehtml #utilities {
    bottom:-22px;
}

.page-wixiehtml .holder.projectassessment {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

.page-wixiehtml .holder.projectassessment .hiliteBar3 {
    border-width:0 1px 1px; 
    padding:0;
}

/**  end project page  **/


/**  view project page  **/


.page-wixiehtml #table-under-content {width:auto;} 
.page-wixiehtml #table-under-content td {padding-right: 5px; padding-left: 5px;}

.page-wixiehtml .flex-right-flow {
    margin-right: 20px;
}
    
.page-wixiehtml .project-title-tools {
    display: flex;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.page-wixiehtml .project-title {
    flex: 1;
    padding-top: 4px;
    line-height: 2em;
    word-break: break-all;
}
    
.page-wixiehtml .project-score {
    width: 140px;
    text-align: center;
    padding-top: 8px;
}

.page-wixiehtml .project-tools {
    width: 240px;
    text-align: right;
}

.page-wixiehtml .project-actions {
    display: flex;
    align-items: center;
}

.page-wixiehtml .project-actions > * {
    cursor:pointer;
}

.page-wixiehtml .project-actions > .material-icons {
    color:#848484;
}

#div_projectActions span {display:inline-block;margin-right:4px;}
#div_projectActions span.disabled {background-color: white;opacity:0.5;}
#div_projectActions span:last-child {margin-right:0;}

/**  end view project page  **/

@media (orientation:landscape) and (max-height:550px) {
    
    body.page-showcase.playing .portfolio-list.listview {
        display:none;
    }
    
    body.page-showcase.playing  header.toolbar {
        display:none;
    }
    
    body.page-showcase.playing .showproject {
        margin: 5px;
    }
    
}

@media (orientation:portrait) {
    
    body.page-showcase header.toolbar h1 {
        text-align: right;
        margin-right: 20px;
    }
    
    .bd.middle {
        flex-direction:column;
    }
    
    .bd .portfolio-list.listview {
        order:2;
        width:unset;
        border-right:none;
        border-top:1px solid var(--middlegrey);
        flex: 1;
    }
    
    .bd .portfolio-list.showproject {
        order:1;
        flex:1;
    }
    
    .portfolio-list .projects.layout-list .title.header {
        max-width: unset;
    }
    
}


@media (max-width: 500px) {
    
    .page-wixiehtml #page,
    .page-portfolio #page {
    padding: 10px;
    }
    
    .page-portfolio #div_selectedProject {height:250px;}
    
    .page-portfolio .project-buttons {
    width: 70px;
    }
    
    .page-portfolio .portfolio-sorter {
        display: none;
    }
    
}

@media (max-width: 599px) {
    
    .page-showcase .toolbar #split-nav-left li {
        padding:0;
    }
    
    .page-showcase .toolbar #split-nav-left li img {
        height:36px;
    }
    
    body.page-showcase header.toolbar h1 {
        margin-right: 10px;
    }
    
    body.page-showcase .toolbar_button.translate svg {
        margin-right:0;
    }
    
    .portfolio-list.projects .widget.categories.layout-tile li .previews img:not(:first-child) {
        margin-left: -36px;
    }
    
    .portfolio-list .projects.layout-tile .title.header {
        margin-bottom:0;
    }
    
    .widget.highlightslink button.play-all {
        right: 5px;
    }
    
    button.share,
    body:not(.loggedin) .widget.sort {
        margin-right: 50px;
    }

}

/** begin ipad view **/

@media (min-width: 501px) and (max-width: 900px) {
    
    .page-portfolio #div_selectedProject {height:520px;}
}

@media (max-width: 900px) {
    
    .page-wixiehtml .flex-right-flow{
        display: block;
        margin-right: 0px;
    }
    
    .page-wixiehtml .project-title-tools {
        display: block;
    }
    
    .page-wixiehtml .project-score {
        text-align: left;
        padding: 0;
        margin-bottom: 10px;
    }

    .page-wixiehtml .project-tools {
        width: 100%;
        text-align: left;
    }
    
    .page-wixiehtml .icon {
        margin: 5px;
    }
   
}

@media (min-width: 1100px) and (min-height: 900px) {
    .widget.highlightslink button.play-all {
        top: 68px;
        right: 200px;
    }
}

@media (min-width: 400px) and (max-width: 1100px) and (max-height:500px) and (min-device-aspect-ratio: 1/1) {
    .widget.highlightslink button.play-all {
        top: 8px;
    }
}