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

.characterMap {
    position: fixed;
    background: var(--lightgrey);
    border: 1px solid var(--middlegrey);
    border-radius: 6px;
    padding: 4px;
    width: 300px;
    max-width: calc(100vw - 10px);
    display: flex;
    flex-flow: row wrap;
    box-shadow: 0 3px 6px var(--middlegrey);
    z-index: 2001;
}

.characterMapHeader {
    display: flex;
    width: 100%;
}

.characterMapHeader button {
    border: 1px solid transparent;
    color: var(--primary-text);
    margin: 5px;
    width: 36px;
    height: 36px;
    background-size: 100%;
}

.characterMapHeader button:last-of-type { margin-left: auto; }
.characterMapHeader button.cmEmojis { background-image: url(/images/themes/1/charmap_emojis.svg); }
.characterMapHeader button.cmMaths { background-image: url(/images/themes/1/charmap_maths.svg); }
.characterMapHeader button.cmCharacters { background-image: url(/images/themes/1/charmap_characters.svg); }
.characterMapHeader button.cmSymbols { background-image: url(/images/themes/1/charmap_symbols.svg); }
.characterMapHeader button.cmClose { background-image: url(/images/themes/1/charmap_close.svg); }

.cmEmojis button.cmEmojis,
.cmMaths button.cmMaths,
.cmCharacters button.cmCharacters,
.cmSymbols button.cmSymbols {
    border: 1px solid var(--grey);
    background-color: var(--white);
}

.characterMapHeader button:hover { opacity: 0.5; }

.characterMapKeys {
    flex-basis: 100%;
    background: var(--white);
    border: 1px solid var(--middlegrey);
    padding: 2px;
    display: grid;
    grid-template-columns: repeat(9, auto);
    gap: 0;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.characterMapLabel {
    font-size: 10pt;
    color: var(--grey);
    grid-column: 1 / span 9;
    margin: 5px 0 0 5px;
}

.characterMapKey {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px;
    cursor: pointer;
    background: var(--lightgrey);
    border: 1px solid var(--middlegrey);
    text-align: center;
    font-size: 14pt;
    font-family: sans-serif;
    font-weight: 500;
    height: 26px;
}

.cmEmojis .characterMapKeys { grid-template-columns: repeat(8, auto); }
.cmEmojis .characterMapLabel { grid-column: 1 / span 8; }
.cmEmojis .characterMapKey {
    background: var(--white);
    height: 30px;
    padding-bottom: 1px;
}
.characterMapKey:hover { background: var(--middlegrey); }

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

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

.page-showcase section {
    padding:0;
}

.page-showcase section.bd {
    background: var(--white);
}

.page-showcase #split-nav-left {
    height:50px;
}

.page-showcase .toolbar-menu-button {
    height: 100%;
    width: fit-content;
    display: flex;
    align-items: center;
    color: var(--white);
    font-weight: 500;
}

.page-showcase .toolbar-menu-button:hover {
    background:var(--primary-green);
}

.page-showcase .toolbar-menu-button svg {
    height: 26px;
    width: 26px;
    margin: 0 10px;
    fill: var(--white);
}

.page-showcase .toolbar-menu-button span {
    margin-right: 20px;
}

.page-showcase .projects.layout-tile .title.header {
    display: block;
    height: unset;
    width: 100%;
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
    font-weight: 500;
    user-select: none;
    margin-bottom:0;
}

.page-showcase .widget.breadcrumb.assignmentname > li:not(:last-child):not(:only-child):hover {
    background: transparent;
    border-radius: 10px;
}
.page-showcase .widget.breadcrumb.assignmentname > li:not(:last-child) {
    color: var(--grey);
    cursor: default;
}

.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 .categories {
    order:1;
}

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

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

.portfolio-list.projects .widget.categories.layout-tile li {
    padding: 8px 8px 5px 8px;
    align-content: flex-start;
    flex-direction: column;
}

.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 > li svg {
    min-height: 26px;
    min-width: 26px;
    fill: var(--primary-color);
}

.portfolio-list.projects .widget.categories.layout-tile li .project-icons {
    margin-bottom:8px;
}

.portfolio-list.projects .widget.categories.layout-tile li .project-name {
    display: flex;
    align-items: center;
    width: 100%;
    flex: 1;
}

.portfolio-list.projects .widget.categories.layout-tile li .text {
    display: flex;
    align-items: center;
}

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

.portfolio-list.projects .widget.categories.layout-tile li .previews {
    height: 50px;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
    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;
    font-weight: 500;
    font-size: .9em;
    margin: 0 5px;
}

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

.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;
    margin-left: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2em;
    max-height: calc(1.2em * 3);
    white-space: unset;
}

.portfolio-list .projects.layout-tile .owner.assignment {
    margin-top: 5px;
    font-weight: 500;
    color: var(--primary-text);
    font-size: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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.projects .widget.projects.layout-tile li button.options.threedots {
    top:unset;
    bottom:50px;
}

.student .portfolio-list.projects .widget.projects.layout-tile li button.options.threedots {
    bottom:32px;
}

.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;
}

.page-showcase .breadcrumb-holder {
    order: unset;
    padding: 5px 0;
    margin-top: 0;
    background: var(--lightgrey);
    border-bottom: 1px solid var(--middlegrey);
    align-items: center;
}

.action-buttons {
    display:flex;
    align-items: center;
    margin:0 20px 0 auto;
}

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

button.secondary.with-icon.showcomments svg,
.action-buttons button.secondary.with-icon svg{
    margin:0;
}

.action-buttons button.share {order:4;margin-left:12px;}
.action-buttons button.playall {order:5;margin-left:12px;}
.action-buttons button.newfolder {order:1;margin-right:20px;}
.action-buttons button.select {order:2;margin-left:12px;}
.action-buttons button.merge {order:3;margin-right:20px;}

#ul-projects > li.selected {
    outline: 3px solid var(--primary-color);
    border-radius: 4px;
}

#portfolio-list > .selection-instructions {
    order: 2;
    padding: 12px;
    color: var(--grey);
    overflow-wrap: anywhere;
}

#btn-select-mode[data-selected="true"] {
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

body.playing:has(#btn-select-mode) .action-buttons {
    display: flex;
}

.page-showcase #dialog-edit-folder .color-buttons {
    display:none;
}

.page-showcase #dialog-moveto .modal-header {
    height: 57px;
}

.page-showcase #dialog-moveto div[data-id="1"] > button.moveto.back,
.page-showcase #dialog-moveto div:not([data-id]) > button.moveto.back {
    display:none;
}

button.secondary.with-icon.openemojis,
button.secondary.with-icon.showcomments {
    padding:0;
    width:36px;
    height:36px;
    min-width:36px;
}

button.secondary.with-icon.showcomments {
    position:absolute;
    bottom:10px;
    right:10px;
}

button.secondary.with-icon.openemojis {
    border:0;
}

.ipad button.secondary.with-icon.openemojis,
.ipad button.secondary.with-icon.openemojis {
    display:none;
}

section.showcomments {
    width: 200px;
    border-left: 1px solid var(--middlegrey);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

section.showcomments > p {
    margin:8px;
}

section.showcomments ul.comments {
    margin:0;
    flex:1;
    overflow:auto;
}

section.showcomments ul.comments li.comment {
    font-size:.85em;
    margin: 5px;
    cursor: default;
    margin-bottom: 15px;
}

section.showcomments ul.comments li.comment .profile-pic {
    align-content: flex-start;
}

section.showcomments ul.comments li.comment > div > p {
    line-height: normal;
}

section.showcomments ul.widget.comments li.widget.comment > div > p.comment {
    margin:0;
}

section.showcomments ul.comments li.comment > div > button.delete.notbutton{
    text-align: left;
    margin-top: 8px;
    color: var(--grey);
}

section.showcomments ul.comments li.comment > div > button.delete.notbutton:hover{
    color: var(--primary-color);
}

section.showcomments ul.comments li.comment > div:not(.profile-pic) {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
}

section.showcomments ul.comments .comment-replies {
    list-style: none;
    padding: 0 0 0 6px;
    margin: 8px 0 0;
    border-left: 1px solid var(--middlegrey);
}

section.showcomments ul.comments .comment-replies li.comment {
    font-size: inherit;
    margin: 8px 0;
}

section.showcomments ul.comments li.comment .profile-pic {
    flex-shrink: 0;
}

section.showcomments button.reply.notbutton {
    text-align: left;
    margin-top: 8px;
    color: var(--grey);
}

section.showcomments button.reply.notbutton:hover {
    color: var(--primary-color);
}

section.showcomments #comment-reply-target {
    margin: 5px;
    overflow-wrap: anywhere;
}

section.showcomments #btn-add-comment {
    white-space: normal;
    min-width: 0;
    margin-left: auto;
}

section.showcomments ul.comments li .profile_initial {
    align-items: center;
    height: 28px;
    width: 28px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white);
    margin-right: 8px;
}

section.showcomments ul.comments li img {
    height:28px;
    width:28px;
    border-radius: 50%;
    margin-right:8px;
}

section.showcomments ul.comments li > span > .displayname{
    line-height: normal;
}

section.showcomments .holder-add-comments {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin-top:auto;
    border-top:1px solid var(--middlegrey);
}

section.showcomments #input-add-comment {
    box-sizing: border-box;
    overflow-y: hidden;
    resize: none;
    border: none;
    padding:5px
}

section.showcomments .holder-add-comments > div{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: space-between;
    margin:5px;
}

section.showcomments .characterMap[data-anchored="true"] {
    position: absolute;
    right: calc(100% + 8px);
    bottom: 5px;
}

.page-showcase .bd.middle.playing .control_bar .control_button.translate_project_button{
   display:none;
}

@media (max-width: 600px) {
    section.showcomments .characterMap[data-anchored="true"] {
        right: 0;
        top: auto;
        bottom: calc(100% + 8px);
    }
}

/**  myclasshtml (portfolio)  **/

.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;
    cursor:pointer;
}

.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;
}

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) {
    
    .portfolio-list.listview {
        flex:unset;
        width:160px;
        overflow-x: hidden;
        overflow-y: auto;
        border-right: 1px solid var(--middlegrey);
    }

    .portfolio-list.listview .layout-tile {
        display: block;
        padding: 5px;
    }

    .portfolio-list.listview .layout-tile li {
        padding-top: 20px;
        width: 100%;
    }

    .portfolio-list.listview  .widget.categories.layout-tile li {
        margin-bottom: 10px;
    }

    .portfolio-list.listview  .widget.categories.layout-tile li .project-icons {
        grid-template-columns: 1fr 36px;
        grid-template-rows: repeat(3, 20px);
        margin-bottom: 4px;
    }

    .portfolio-list.listview .widget.categories.layout-tile li .project-icons:not(.folders) .imgholder:not(:first-child) {
        padding: 0;
    }

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

    .portfolio-list.listview .layout-tile li .title.header {
        margin-top:0;
        font-size:.85em;
    }

    .portfolio-list.listview .layout-tile li .owner {
        font-size:.75em;
        line-height: 1em;
    }

    .portfolio-list.listview .layout-tile li button.options.threedots{
        display:none;
    }

    .portfolio-list.listview .layout-tile li.active button img {
        border: 4px solid var(--primary-color);
    }
    
}

@media (orientation:landscape) and (max-height:550px) {
    
    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.showproject {
        order:1;
        flex:1;
    }
    
    .portfolio-list .projects.layout-list .title.header {
        max-width: unset;
    }

    .portfolio-list.listview {
        order:2;
        border-top:1px solid var(--middlegrey);
        flex: 1;
        overflow: auto;
    }

    .portfolio-list.listview .layout-tile li.active button img {
        border: 4px solid var(--primary-color);
    }

    section.showcomments {    
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 40%;
        z-index: 1000;
        background: var(--white);
        border-radius: 20px 20px 0 0;
        border: 1px solid var(--middlegrey);
        padding-top: 8px;
    }

    section.showcomments::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 25%;
        width: 50%;
        border-top: 4px solid var(--middlegrey);
    }
    
}


@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;
    }

    .page-showcase:not(.student) .breadcrumb-holder {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        height: unset;
    }

    .page-showcase .breadcrumb-holder .widget.breadcrumb {
        padding-left: 5px;
    }

    .page-showcase .breadcrumb-holder .action-buttons {
        margin: 0;
        padding: 0 10px;
    }

    .page-showcase .breadcrumb-holder .action-buttons button:not(:last-child){
        margin-right: 15px;
    }

}

@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;
    }

    .page-showcase .header-link.try {
        display: flex;
    }
   
}

@media (min-aspect-ratio: 1601/1000)and (max-height:500px) {
    
    body.page-showcase.loggedin{
        display: grid;
        grid-template-columns: 48px 1fr;
        grid-template-rows: 55px 1fr;
        grid-template-areas: "toolbar hd" "toolbar bd";
        grid-gap: 0px 0px;
        overflow: hidden;
    }
}