:root {
    --feedback-user:#f3f3f3;
    --feedback-student:#d3ffe2;
    --feedback-me:#daecf9;
    --handle-highlight:lightblue;
    --handle-speak:#ffff6d;  
    --handle-translate:lightcyan;
    --handle-selected:cyan;
}

html {
    overscroll-behavior-x: none;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    overscroll-behavior-x: none;
}

/*Read Only CSS*/
body.not-loggedin .toolbar_button.story, 
body.not-loggedin .storyboard_holder,
body.student.readonly:not(.player-view) .storyboard_holder,
body.student.readonly .workspace_tools,
body.teacher.student-project.readonly .toolbar_button.full,
.readonly .toolbar_button.delete,
.readonly .storyboard_new_page,
.readonly .toolbar_section.nav .toolbar_button.disabled,
.not-loggedin .toolbar_section.nav .toolbar_button.disabled,
.readonly .toolbar_section.nav .toolbar_button.previous.first,
.not-loggedin .toolbar_section.nav .toolbar_button.previous.first,
.readonly .toolbar_section.nav .toolbar_button.next.last,
.not-loggedin .toolbar_section.nav .toolbar_button.next.last,
.toolbar_button.next.last,
.toolbar_button.previous.first,
.toolbar_nav_pages,
.readonly .toolbar_nav_pages,
.not-loggedin .toolbar_nav_pages,
.not-loggedin .toolbar_menus,
body.type-whiteboard.not-loggedin .toolbar_menus {
    display:none;    
}

body.type-whiteboard .toolbar_section.print {
    order: 5;
    margin-left: 10px;
}

body.readonly .workspace_tools.open {
    display:block;
    z-index:997;
    background-color:var(--white);
    position: absolute;
    right: 5px;
    bottom: 5px;
    border: 1px solid var(--grey);
    padding-bottom: 40px;
    border-radius: 6px;
    max-height: 80vh;
}

body:not(.ipad):not(.iphone) .palette_undo .scale-switch {
    display: none;
}

.readonly .toolbar_section.nav,
.not-loggedin .toolbar_section.nav {
    z-index: 1000;
    width: initial;
}
   
.readonly.player-view .toolbar_section.nav .toolbar_button,
.not-loggedin .toolbar_section.nav .toolbar_button {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.6);
    top: 50vh;
    transform: translate(0, -50%);
    border: 1px solid var(--middlegrey);
    border-radius: 50%;
    padding:2px;
}

.readonly.player-view .toolbar_section.nav .toolbar_button:hover
.not-loggedin .toolbar_section.nav .toolbar_button:hover {
    background-color: var(--lightgrey);
    border: 1px solid var(--middlegrey);
    opacity:1;
}

.not-loggedin .toolbar_section.nav .toolbar_button.previous {
    right: 94vw;
    left:unset;
}

.not-loggedin .toolbar_section.nav .toolbar_button.next {
    left: 94vw;
    right:unset;
}

.readonly.player-view .toolbar_icon.previous:hover,
.readonly.player-view .toolbar_icon.next:hover,
.not-loggedin .toolbar_icon.previous:hover,
.not-loggedin .toolbar_icon.next:hover {
    opacity:1;
}

.not-loggedin .toolbar_section {
    flex: none;
    text-align: center;
}

/*End Read Only CSS*/

#palette_text_colors,
#palette_background_colors{
    display: none;
}

.teacher.single .socialmedia{
    display: none;
}

.ipad .autoplay,
.iphone .autoplay{
    display:none;
}
                
.toolbar_section.name {
    display: flex;
    text-align: left;
    margin-left: 0;
    flex: 1.5;
    margin-right: 15px;
    align-items: center;
}

.toolbar_section.slideshow {
    display:flex;
    margin-left:auto;
}

.playing .toolbar_section.undo {
    display:none;
}

.loggedin .toolbar_section.slideshow .translate_buttons {
    margin-right:15px;
}

.toolbar_section.print {
    width:80px;
}

.toolbar_account {
    text-align: right;
    margin: 0 10px 0 20px;
}

.page-authkey .toolbar_account{
    margin-left: auto;
}
                
.toolbar_button {
    display: inline-flex;
    align-items: center;
    text-align: center;
    color: var(--white);
    padding: 0 10px;
    font-size: .9em;
    height:50px;
    justify-content:center;
}

.toolbar_button.next,
.toolbar_button.previous{
    height:unset;
}

.toolbar_button.fullscreen {
    margin-right:10px;
}

.toolbar_button.fullscreen svg{
    margin:0;
}

.toolbar_button.view,
.toolbar_button.full{
    display:none;
}

.toolbar_button.assign {
    margin-right:10px;
}

.toolbar_button.lti[data-action="apiAllowSubmissions"] {
    background: var(--primary-orange);
}

.toolbar_button.undo {
    margin:0 5px;
}

.toolbar_button.team {
    position:relative;
}

.toolbar_button.undo,
.toolbar_button.redo{
    padding: 0;
    border-radius: 0;
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar_section.undo {
    display:flex;
}

.toolbar_section.undo .toolbar_button.undo,
.toolbar_section.undo .toolbar_button.redo{
    display:inline-flex;
    height: 50px;
    width: 36px;
}

.toolbar_section.undo .toolbar_button.undo:hover,
.toolbar_section.undo .toolbar_button.redo:hover{
    background-color: var(--primary-green);
}

.toolbar_section.undo .toolbar_button.undo svg,
.toolbar_section.undo .toolbar_button.redo svg{
    fill:var(--white);
}

.toolbar_section.undo .handles-switch {
    display:none;
}

.toolbar_button.complete {
    border: 1px solid transparent;
    padding: 0 10px 0 0;
    position: relative;
    top: 1px;
}

.toolbar_button.complete.disabled {
    opacity:.55;
}

.toolbar_button svg {
    height:26px;
    width:26px;
    fill: var(--white);
    margin-right:5px;
}

.toolbar_button.web svg {
    width:22px;
}

.toolbar_button.google svg {
    height:22px;
    width:22px;
    margin:2px 5px 2px 2px;
}

.toolbar_button.complete svg {
    border: 1px solid var(--white);
    border-radius: 50%;
    padding: 2px;
    margin-right: 8px;
}

.toolbar_button svg.lti {
    height:22px;
    width:22px;
}

.toolbar_button img.toolbar_img {
    height:22px;
    margin-right: 7px;
}

body:not(.type-whiteboard) .toolbar_button.text svg {
    margin-right:0px;
}

.toolbar_button.revert svg,
.toolbar_button.undo svg,
.toolbar_button.redo svg{
    height:30px;
    width:30px;
    fill: var(--black);
    margin-right:0;
}

.toolbar_button.revert {
    margin-left:auto;
    padding: 2px;
    margin-right: 10px;
}

.toolbar_button.revert:hover {
    background-color:var(--grey);
}

.toolbar_button.undo:hover,
.toolbar_button.undo:focus,
.toolbar_button.redo:hover,
.toolbar_button.redo:focus{
    background-color: var(--middlegrey);
}
                
.toolbar_button.active {
    background-color: var(--primary-color-dark);
    cursor: default;
}

.toolbar_button.edit {
    margin: 0 20px;
}
                
.toolbar_project_name {
    display: block;
    color: var(--white);
    font-size: 18pt;
    font-family: 'Roboto', Verdana, Arial, sans-serif;
    margin: 0;
    padding: 0 0 0 4px;
    width: 100%;
    border: none;
    background-color: transparent;
    overflow:hidden;
    text-overflow:ellipsis;
}

.toolbar_project_name_readonly {
    display: block;
    color: var(--white);
    font-size: 18pt;
    margin: 0;
    padding: 0 0 0 4px;
    border: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align:left;
}

.toolbar_project_name:not(.locked):focus,
.toolbar_project_name:not(.locked):hover{
    background-color: var(--white);
    color: var(--darkgrey);
}

.toolbar_project_name.locked {
    outline:none;
    user-select:none;
    cursor:default;
}
         
#save-status {
    color: var(--lightgrey);
    cursor: default;
    font-size: .65em;
    transition: opacity 0ms ease-out; /* pop in quick */
    opacity:1;
    position: fixed;
    top: 35px;
    left: 100px;
}

#save-status.savehidden {
    opacity:0;
    transition: opacity 500ms ease-out; /* sexy fade out */
}

.toolbar_menus {
    display: block;
    padding: 0px;
    height: 20px;
}

.toolbar-menu {
    display: inline-block;
    position: relative;
}

.toolbar_menu_item {
    color: var(--white);
    height: 20px;
    min-width:40px;
    cursor: pointer;
    text-align: left;
    padding: 0px 3px;
    margin: 0px;
    font-size: .8em;
    border: 1px solid transparent;
}
                
.toolbar_menu_item:focus,
.toolbar_menu_item:hover {
    background-color: var(--primary-green);
}

.admin .toolbar_menu_item:focus,
.admin .toolbar_menu_item:hover {
    background-color: var(--primary-green-dark);
}

.toolbar_menu_item.active {
    background-color: var(--lightgrey);
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
    color: var(--primary-text);
}

.toolbar-menu-list>li:hover,
.toolbar-menu-list>li:hover ul li:hover{
    background-color: var(--middlegrey);
}

.toolbar-menu-list>li.disabled:hover {
    background-color: transparent;
}

.toolbar-menu-list>li.disabled:hover ul {
    display: none;
}

.toolbar-menu-icon.assign {background-image:url(/images/themes/1/menu_assign.svg);}
.toolbar-menu-icon.print {background-image:url(/images/themes/1/menu_print.svg);}
.toolbar-menu-icon.show {background-image:url(/images/themes/1/toolbar_view_slideshow_black.svg);}
.toolbar-menu-icon.ruler {background-image:url(/images/themes/1/menu_ruler.svg);}
.toolbar-menu-icon.open {background-image:url(/images/themes/1/library_file_upload.svg);}
.toolbar-menu-icon.complete {background-image:url(/images/themes/1/menu_complete.svg);}
.toolbar-menu-icon.assessment {background-image:url(/images/themes/1/icon_rubric_black.svg);}
.toolbar-menu-icon.highlight {background-image:url(/images/themes/1/menu_highlight.svg);}
.toolbar-menu-icon.share {background-image:url(/images/themes/1/menu_share.svg);}
.toolbar-menu-icon.present {background-image:url(/images/themes/1/menu_show.svg);}
.toolbar-menu-icon.team {background-image:url(/images/themes/1/menu_team.svg);}
.toolbar-menu-icon.glue {background-image:url(/images/themes/1/menu_glue.svg);}
.toolbar-menu-icon.export {background-image:url(/images/themes/1/menu_export.svg);}
.toolbar-menu-icon.help {background-image:url(/images/themes/1/menu_help.svg);}
.toolbar-menu-icon.keyboard {background-image:url(/images/themes/1/menu_keyboard.svg);}
.toolbar-menu-icon.checked {background-image:url(/images/themes/1/menu_checked.svg);}
.toolbar-menu-icon.cut {background-image:url(/images/themes/1/menu_cut.svg);}
.toolbar-menu-icon.copy {background-image:url(/images/themes/1/menu_copy.svg);}
.toolbar-menu-icon.duplicate {background-image:url(/images/themes/1/button_duplicate.svg);}
.toolbar-menu-icon.delete {background-image:url(/images/themes/1/button_delete.svg);}
.toolbar-menu-icon.paste {background-image:url(/images/themes/1/menu_paste.svg);}
.toolbar-menu-icon.properties {background-image:url(/images/themes/1/menu_properties.svg);}
.toolbar-menu-icon.new_window {background-image:url(/images/themes/1/menu_new_window.svg);opacity: .3;float: right;background-size: 16px 16px;}

.toolbar-menu-list li.with-icon {
    display:flex;
    align-items:center;
}

.toolbar-menu-list li[data-action="team"],
.toolbar-menu-list li[data-action="show"] {
    display:none;
}

.toolbar-menu-list li.with-icon svg {
    pointer-events:none;
    height:20px;
    width:30px;
    fill:var(--primary-text);
    margin-right:5px;
}

.menu-arrow-right {
    margin-left:auto;
    width: 0px;
    height: 0px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 8px solid var(--black);
}

.menu-arrow-down-white {
    display: inline-block;
    position: relative;
    top: 6px;
    margin-right: 10px;
    width: 0px;
    height: 0px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 12px solid var(--white);
}
            
.toolbar_icon.editmenu {display:none;}

.toolbar_icon.send {display:none;}

.toolbar_menu_item.filemenu svg {display:none;}

.readonly .next .toolbar_button_label,
.readonly .previous .toolbar_button_label,
.not-loggedin .next .toolbar_button_label,
.not-loggedin .previous .toolbar_button_label {
    display: none;
}
                
.toolbar_collaborator_list {
    flex: 1;
    flex-wrap: wrap;
    text-align: left;
    padding: 2px;
}
                
.toolbar_profile_image {
    display: inline-block;
    width: 16px;
    border-radius: 50%;
    border: 2px solid var(--white);
    margin: 3px 0px 0px 5px;
}

.account_profile_image {
    color: var(--primary-color);
    font-size: .85em;
    margin-top: 15px;
    cursor: pointer;
    padding: 6px 8px;
    border: 1px solid var(--primary-color);
    border-radius: 14px;
}

.toolbar_voice_active {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: lime;
    position: relative;
    top: -41px;
    right: -14px;
}

.context-menu .toolbar-menu-list {
    max-height:200px;
}

.toolbar_insert_button_holder_callout {
        box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 20%);
        display:none;
}

.toolbar_insert_button_holder_callout.show{
    display:block;
    z-index: 5000;
    position: absolute;
    top: 45px;
    border-radius: 6px;
    border:1px solid var(--middlgrey);
    overflow: hidden;
    width:220px;
    height:200px;
}

.toolbar_insert_button_holder_callout .palette_row.grid.bubble {
    display:grid;
    border:none;
    border-radius:0;
    height:100%;
    overflow:auto;
    box-shadow: none;
    position: unset;
    min-width: unset;
}

.toolbar_insert_button_holder_callout .subpanel_grid_option {
    height:45px;
    width: 100%;
    padding: 2px;
    fill:var(--white);
    stroke:var(--black)
}

.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="bubble_none"]{display:none;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="rectangle_none"]{order:1;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="ellipse_none"]{order:2;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="diamond_none"]{order:3;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="banner0_default"]{order:8;}

.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="parallelogram_none"]{order:10;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="roundrect_none"]{order:11;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="triangle_none"]{order:12;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="triangle2_none"]{order:13;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="trianglert1_none"]{order:14;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="trianglert2_none"]{order:15;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="triangleacute_none"]{order:16;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="triangleobtuse_none"]{order:17;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="kite_none"]{order:18;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="trapezoid_none"]{order:19;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="trapezoid2_none"]{order:20;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="pentagon_none"]{order:21;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="hexagon_none"]{order:22;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="heptagon_none"]{order:23;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="octagon_none"]{order:24;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="arrowblockl_none"]{order:25;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="arrowblockr_none"]{order:26;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="arrowdouble_none"]{order:27;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="arrowheadl_none"]{order:28;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="arrowheadr_none"]{order:29;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="star_none"]{order:30;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="star2_none"]{order:31;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="star7_none"]{order:32;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="star10_none"]{order:33;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="star16_none"]{order:34;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="star24_none"]{order:35;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="star9r_none"]{order:36;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="star15r_none"]{order:37;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="heart_none"]{order:38;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="stadium_none"]{order:39;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="document_none"]{order:40;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="documents_none"]{order:41;}    
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="input_none"]{order:42;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="data_none"]{order:43;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="database_none"]{order:44;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="connector_none"]{order:45;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="delay_none"]{order:46;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="display_none"]{order:47;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="preparation_none"]{order:48;} 
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="storeddata_none"]{order:49;}  
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="file_none"]{order:50;}
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="folder_none"]{order:51;}  
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="plus_none"]{order:52;}  
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="tag_none"]{order:53;}  
.toolbar_insert_button_holder_callout .subpanel_grid_option[data-type="ribbon_default"]{order:54;} 

.main {
    flex: 1;
    display: flex;
    padding: 10px;
    min-height: 0;
    flex-grow: 1;
}

.storyboard_new_page {
    display:none;
}

.button_show_editors {display: none;}

.workspace_tools {
    display: flex;
    flex-direction: column;
    min-width: 200px;
}

.readonly.notools.noinstructions .workspace_tools,
.demo.notools.noinstructions .workspace_tools{
    display:none;
}

.canvas {
    overflow-y: auto;
    margin: 20px auto;
    background-color: var(--white);
    border: 1px solid var(--middlegrey);
    box-shadow: 0px 0px 2px var(--grey);
}

.wixie_canvas {
    box-shadow: 0px 0px 4px var(--grey);
}

.scrollthumb {
    background-color: var(--primary-color);
    border-radius: 20px;
    border: 6px solid transparent;
    box-sizing: border-box;
    background-clip: content-box;
}

.canvas_button.play_audio, 
.palette_button.play_audio {
    background-image:url(/images/themes/1/button_play_sound.svg); 
    background-color: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    transform: translate3d( 0,0,0 );
}
.canvas_button.zoom_in, .palette_button.zoom_in {background-image:url(/images/themes/1/button_zoom_in.svg);margin-left: auto;display:none;}
.canvas_button.zoom_out, .palette_button.zoom_out {background-image:url(/images/themes/1/button_zoom_out.svg);display:none;}

.canvas_button.play_audio {
    display: block;
    pointer-events: all;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.canvas_button.play_audio.disabled {
    display:none;
}

.canvas-name {
    position: absolute;
    top: 20px;
    right: 20px;
    left: 20px;
    font-size: 1em;
    z-index: 10;
}

.canvas_tools {
    position: absolute;
    z-index: 2000;
    bottom: 5%;
    right: 5%;
    pointer-events: none;
    }

.palette_options {
    display: none;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    margin: 0 0 0 10px;
    padding: 0 10px 0 0;
}

.palette_options.alttext textarea {
    resize: none;
    width: 100%;
    height: 5em;
}

.palette_options.eraser.show {
    display: flex;
    flex-direction: column;
}

.palette_options.instructions.show,
.palette_options.instructions.setting_show{
    display: flex;
    flex-direction: column;
}

.student:not(.readonly) .palette_options.instructions.show,
.student .palette_options.instructions.setting_show{
    justify-content:flex-end;
}

.palette_options.instructions p:not(:first-child) {
    margin: revert;
}

.palette_options .instructions-text{
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    margin-bottom: 5px;
}

.palette_options .instructions-text.hidden{
    display:none;
}

.palette_options.instructions .instructions_label {
    margin-top:10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.palette_options.instructions .instructions_label.hidden {
    display:none;
}

.palette_options.instructions .instructions_label .button{
    border: 1px solid var(--middlegrey);
    background: var(--white);
    border-radius: 15px;
    color: var(--primary-text);
    margin: 0;
    padding: 4px 12px;
}

.palette_options.instructions .instructions_label .button:hover{
    background: var(--middlegrey);
}

.palette_options .instructions-text .listen,
.palette_options.instructions .listen{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.palette_options.instructions .listen .translate-switch-holder svg,
.palette_options .instructions-text .listen .translate-switch-holder svg{
    display:none;
}

.palette_options.graphics .graphic-options-holder {
    display: flex;
    flex-direction: column;
}

.palette_options.graphics .graphic_size {order:1;}
.palette_options.graphics .align {order:0;}
.palette_options.graphics .video-controls {order:3;}
.palette_options.graphics .hue {order:4;}
.palette_options.graphics .opacity {order:5;}
.palette_options.graphics .shadow {order:7;}
.palette_options.graphics .filter {order:6;}
.palette_options.graphics .crop {order:7;}
.palette_options.graphics .shapes {order:8;}
.palette_options.graphics .autoplay {order:4;}
.palette_options.graphics .loop {order:5;}
.palette_options.graphics .wocontrols {order:11;}
.palette_options.graphics .graphic_flip {order:12;}
.palette_options.graphics .hyperlink {order:14;}
.palette_options.graphics .animation {order:13;}
.palette_options.graphics .graphic_vector {order:15;}
.palette_options.graphics .graphic_alt_text {order:16;}

.palette_options button.palette_switch {
    border-radius: 17px;
    background-color: var(--middlegrey);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin-left:10px;
}

.palette_options button.palette_switch.active {
    background-color: var(--primary-color);
    justify-content: flex-end;
}

.palette_options button.palette_switch span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    border-radius: 50%;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    font-size:.75em;
    font-weight: 500;
    margin:0 4px;
}

.palette_options .feedback-holder{
    padding: 10px;
    overflow: auto;
    background-color: var(--white);
    border: 1px solid var(--middlegrey);
    margin-top: 10px;
    flex: 1;
}

.palette_options .feedback-holder.hidden{
    display:none;
}

.pencilonly .palette_options.paintbrush,
.fillonly .palette_options.fill{
    flex:unset;
}

.feedback-text-speak-div {
    position:relative;
}
.feedback-text-speak-div p {
    position:absolute;
}

.feedback-speak {
    position: absolute;
    background-color: var(--lightgrey);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: -5px;
    left: -5px;
    border: 1px solid var(--grey);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url(/images/themes/1/button_play.svg);
    cursor:pointer;
}

.me .feedback-speak {
    left: 20px;
}

ul.feedback-text {
    padding: 0 0 0 5px;
}

.feedback-text li {
    display:flex;
    flex-direction:column;
    margin-bottom:20px;
    position: relative;
    font-size: .9em;
}

.feedback-text li p,
.feedback-text li div.userinfo {
    width:90%;
    box-sizing: border-box;
}

.feedback-text li p {
    border:1px solid var(--middlegrey);
    border-radius:6px;
    padding:12px 8px 8px 15px;
    margin-bottom:5px;
    box-sizing:border-box;
    overflow:hidden;
}

.feedback-text li.me p,
.feedback-text li.me div.userinfo{
    margin-left:auto;
}

.feedback-text li.User p{
    background-color:var(--feedback-user);
    margin-left: 10px;
}

.feedback-text li.Student p{
    background-color: var(--feedback-student);
}

.feedback-text li.me p{
    background-color: var(--feedback-me);
}

.feedback-text div.userinfo {
    padding:0 5px;
    align-items:center;
}

.feedback-text div.userinfo .displayName{
    flex:1;
    font-size:.9em;
}

.feedback-text li.me .displayName{
    display:none;
}

.feedback-text div.userinfo .date{
    color:var(--grey);
    font-size:.8em;
    margin-left: auto;
}

.feedback-text .profile-pic {
    margin-right:10px;
    height: 32px;
    width: 32px;
    display: flex;
}

.feedback-text .profile-pic span {
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white);
    text-align: center;
    font-size: 1.2em;
    padding: 4px 10px;
    line-height: 1.4em;
}

.feedback-text .profile-pic img {
    border-radius: 50%;
    height: 32px;
    width: 32px;
}

.feedback-holder .palette_row.center.reply-button {
    margin: 5px 0 10px 0;
}

body.teacher button.showfeedback {
    display:none;
}

button.showfeedback {
    background-image:url(/images/themes/1/button_feedback_show.svg);
    height: 32px;
    width: 32px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 998;
    outline:none;
}

button.showfeedback.down {
    background-image:url(/images/themes/1/button_feedback_hide.svg);
}

.readonly .palette_options {
    display: block;
}

.palette_options .section{
    margin-bottom: 20px;
}

.palette_options .video-controls {
    border-bottom:1px solid var(--middlegrey);
}

.palette_undo {   
    display: flex;
    margin-top: 0;
    height:46px;
    border-top: 1px solid var(--middlegrey);
    align-items: center;    
}

.notools .palette_undo,
.pencilonly .palette_undo,
.fillonly .palette_undo{   
    margin-top: auto;
}

.palette_undo .palette_label {
    margin-left: auto;
    min-width: unset;
    margin-right: 5px;
}

.palette_undo.zoom {
    padding:0 7px;
    box-sizing:border-box;
}

.palette_undo.zoom  .palette_label{
    margin-left:0;
}
                
.palette_row {
    margin: 8px 0 0;
}

.editor_text .palette_row {
    margin: 5px 0;
}

.palette_row.right {
    text-align:right;
}

#palette_brush_adjustable_factors {
    display:none;
}

#editor-graphic .palette_row.instructions,
#editor-placeholder .palette_row.instructions{
    padding: 5px;
    border: 1px solid var(--middlegrey);
}

#instructions_record_desc.palette_row.header {
    margin-top: 30px;
}

.palette_row.color {
    display:grid;
    grid-template-columns: repeat(7,1fr);
    grid-gap:5px;
    grid-row-gap: 5px;
    margin: 15px 5px 15px 0;
    text-align: center;
    align-items: center;
}

.pencilonly .palette_row.color,
.fillonly .palette_row.color{
    grid-template-columns: repeat(6,1fr);
}

.pencilonly .palette_row.color .paint_color.advanced,
.fillonly .palette_row.color .paint_color.advanced{
    display:none;
}

.pencilonly .palette_row.color .paint_color.outline,
.fillonly .palette_row.color .paint_color.outline {
    display:none;
}

.palette_row.slideshow{
    margin:0 0 10px 0;
    padding:10px 0 0 0;
}

.palette_row.spacer {
    flex-grow: 1;
}

.palette_row.measuring-tools{
    margin-top:0;
    padding-top:10px;
}

.palette_row.revert {
    padding: 10px 0;
    border-top:1px solid var(--middlegrey);
    text-align:center;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
}

.notools.noinstructions .palette_row.revert {
    border-top:0;
    text-align: center;
}

.palette_row.eraser_all {
    margin-top: auto;
    text-align: center;
}

.palette_row.eraser_all button{
    margin:10px 0;
}

.palette_row.split {
    justify-content: space-between;
}

.palette_row.flex {
    display: flex;
    align-items: center;
}

.palette_row.flex.wrap {
    flex-wrap: wrap;
    justify-content: center;
}

.palette_row.background {
    margin:10px 0;
}

.palette_row.background .palette_button.edit {
    display:none;
}

.palette_row.background button.background {
    padding: 0;
    min-width: unset;
    width: 36px;
    margin-left: 10px;
    border-color: var(--middlegrey);
}

.palette_row.background button.background svg {
    margin: 0;
}

.palette_row.background button.background span {
    display:none;
}

.palette_row.placeholder-alttext,
.palette_row.placeholder-unlock {
    display: none;
}

.palette_row.label-connection {
    border-top: 1px solid var(--middlegrey);
    padding: 12px 0 5px;
}

.palette_row.label-connection label {
    min-width: fit-content;
}

.palette_row.delete-connection {
    border-top: 1px solid var(--middlegrey);
    padding: 20px 5px 5px;
}

.palette_row.placeholder-action select {
    flex:1;
}

.palette_row.flex.hide {
    display: none;
}

.palette_row.flex.bubble {
    margin: 5px 0;
    min-height:40px;
}

.palette_row.flex.center {
    justify-content: center;
}

.palette_row.center {
    text-align:center;
}

.palette_row.center.sound {
    margin-bottom:10px;
}

.palette_row.only {
    margin: 20px 0 15px;
}

.palette_row.showgrid {
    border-top:1px solid var(--middlegrey);
    margin-top:10px;
    padding-top:10px;
}

.palette_row.showgrid button,
.palette_row.graphic_alt_text button.palette_switch {
    margin-left:auto;
}

.palette_row.align {
    border-bottom:1px solid var(--middlegrey);
    padding-bottom:5px;
}

.palette_row.align .palette_buttons.eight {
    display: flex;
    justify-content: space-evenly;
}

.text_editing_options .palette_row.align {
    border-bottom:1px solid var(--middlegrey);
    margin-bottom:10px;
    padding-bottom:10px;
    margin-top:10px;
}


.palette_row.align .palette_label {
    display:none;
}

.palette_row.font {
    flex: 1;
    overflow: auto;
    margin-top: 0;
    margin-bottom: 0;
    background-color: var(--white);
    outline: none;
}

.palette_row.grid {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 5px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.palette_row.grid.shape {
    grid-template-columns: repeat(5,1fr);
    justify-items:center;
}

.palette_row.grid.shape .palette_button svg{
    height:26px;
    width:26px;
}

.palette_row.grid.bubble {
    border: 1px solid var(--middlegrey);
    background-color: var(--white);
    margin: 0 auto 10px;
}

.palette_row.grid.shape {
    border: 1px solid var(--middlegrey);
    background-color: var(--white);
}

.palette_row.grid.spray {
    border: 1px solid var(--middlegrey);
    background-color: var(--white);
    margin: 0 auto;
}

.palette_row.editor_options {
    flex: 1;
    overflow-y:auto;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    margin: 5px 0 0;
    padding: 5px;
    border: 1px solid var(--middlegrey);
    background-color: var(--white);
    box-sizing: border-box;
}

.palette_row.editor_options.fills div{
    display: inline-block;
    position:relative;
}

.palette_row.editor_options.fills div svg + svg.check {
    display: none;
}

.palette_row.editor_options.fills div svg.active + svg.check {
    display:block;
    position: absolute;
    height: 35%;
    width: 35%;
    z-index: 10000;
    right: 10px;
    bottom: 10px;
    margin:0;
    border:0;
}

.palette_row.editor_options.fills svg:focus {
    outline:none;
}

.palette_row.editor_options.spray {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: min-content;
}

.palette_row.editor_options svg {
    height: 80px;
    width: 80px;
    border: 4px solid var(--white);
    cursor: pointer;
}

.palette_row.feedback {
    overflow:auto;
}

.editor_text .palette_row.linkto,
.palette_row.linkto {
    margin-top:20px;
}

.palette_row.linkto select,
.palette_row.linkurltarget select {
    flex:1;
    margin-right:15px;
}

.embedded .palette_row.linkurltarget {
    display:none;
}

/* .palette_row.linkto select option[value=project] {display: none;} */

.palette_row.nav .palette_label {
    display:flex;
    align-items:center;
}

.palette_row.nav .palette_label span{
    margin-right:5px;
}

.palette_row.nav .palette_label svg{
    height: 24px;
    width: 24px;
    border-radius: 50%;
    border: 1px solid var(--black);
    margin-left: 5px;
}

.palette_row.graphic_talkie_text_input textarea {
    resize: none;
    width: 100%;
    box-sizing: border-box;
    min-height: 6em;
    padding: 8px;
    border: 1px solid var(--grey);
}

.ipad .palette_row.graphic_talkie_text_input textarea {
    min-height: 4em;
}

.graphic_talkie_details.recording button:not(.stop) {
    margin-left:0;
}

.palette_row.graphic_talkie_activate {
    border-top:1px solid var(--middlegrey);
    padding-top:10px;
}

.palette_row.graphic_talkie_activate select {
    margin-right: 5px;
}

.palette_row.graphic_talkie_activate button {
    margin-left: auto;
    font-size: .8em;
    padding: 0 10px;
    height: 30px;
}

.palette_row.graphic_talkie_details .palette_row.playback {
    justify-content:center;
}

.palette_row.graphic_talkie_details .editor-button.record {
    margin-right:0;
}

.palette_row.graphic_talkie_details .editor-button svg,
.palette_row.graphic_talkie_details .secondary svg{
    display:none;
}

.palette_row.graphic_talkie_preview {
    padding-top: 9px;
    justify-content: center;
    border-top: 1px solid lightgrey;
}

.graphic_talkie_details select,
.graphic_talkie_details .graphic_talkie_speed select,
.graphic_talkie_details .graphic_talkie_voice select {
    flex:1;
}

#editor-animation-options select {
    flex-grow: 1;
}
#editor-animation-options button:not(#animation-back-button) {
    margin-left:auto;
    margin-right:auto;
}
#editor-animation-options label.disabled, 
#editor-animation-options input.disabled
{
    opacity: 50%;
}

#selection-indicator.path-edit-mode .handle {
    visibility: hidden;
}

.palette_row.look {
    border-top:1px solid var(--middlegrey);
    padding-top:5px;
}

.palette_row.look.active {
    border-bottom:1px solid var(--middlegrey);
    border-top:none;
    padding-bottom:5px;
    margin-top:unset;
}

.palette_row.look button.back {
    margin-right:10px;
}

.palette_row.look:not(.active) button.back {
    display:none;
}

.palette_row.look button.edit {
    margin-left:auto;
}

.palette_row.look.active button.edit {
    display:none;
}

.palette_row.wo-address {
    margin-top: 16px;
}

.palette_row .breakword {
    text-wrap: wrap;
    word-break: break-word;
}

.palette_row.wo-address .breakword {
    user-select: text;
    font-size:.85em;
    color:var(--grey);
    margin-left: auto;
    margin-right: 5px;
}

.palette_row .option_label {
    flex:1;
    text-align:right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.palette_row.graphic_size {
    border-bottom:1px solid var(--middlegrey);
    padding-bottom:5px;
    margin-top: 5px;
}

.palette_row.graphic_size .palette_buttons.three{
    display: flex;
    justify-content: space-evenly;
}

.palette_row.shadow {
    padding-bottom: 5px;
}

.palette_row.graphic_flip {
    border-bottom:1px solid var(--middlegrey);
    border-top:1px solid var(--middlegrey);
    padding:3px 0;
    margin: 0;
}

body.type-whiteboard .palette_row.graphic_flip {
    margin-top:10px;
}

.palette_buttons {
    flex: 1;
    display: grid;
    align-items: center;
    justify-items: center;
}

.palette_buttons.two {
    grid-template-columns: repeat(2,1fr);
    margin-right:auto;
}

.palette_buttons.three {
    grid-template-columns: repeat(3,1fr);
    margin-right:auto;
}

.palette_buttons.four {
    grid-template-columns: repeat(4,1fr);
    grid-template-areas: "btn1 btn2 btn3 btn4";
}

.palette_buttons.five {
    grid-template-columns: repeat(5,1fr);
}

.palette_buttons.six {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 44px 0 0;
    grid-row-gap: 30px;
    overflow: hidden;
    height: 40px;
}

.palette_buttons.seven {
    grid-template-columns: repeat(7,1fr);
}
    
.palette_buttons.seven .palette_button {
    width: 36px;
    height: 36px;
    background-size: 26px 26px;
}

.palette_buttons.eight {
    grid-template-columns: repeat(8,1fr);
    grid-gap:3px;
}
    
.palette_buttons.eight .palette_button {
    width: 32px;
    height: 32px;
}

.palette_buttons.eight .palette_button svg {
    width: 20px;
    height: 20px;
}
            
#graphic_shape .palette_buttons,
#placeholder_shape .palette_buttons {
    overflow-x:scroll;
}

.canvas_button,
.palette_button {
    display: inline-flex;
    width: 44px;
    height: 44px;
    cursor: pointer;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    border-radius: 50%;
    border:1px solid transparent;
    align-items: center;
    justify-content: center;
}

.canvas_button:focus,
.palette_button:focus {
    outline: none;
    border:1px solid var(--black);
}

.palette_button.active {
    background-color:var(--primary-color-light);
    border-color:var(--primary-color);
}

.palette_button.tool.active {
    background-color:var(--primary-color);
}

.palette_button.tool.instructions {
    position:relative;
}

.palette_button.text{
    display: inline-flex;
    border-radius: 4px;
    height: unset;
    flex: 1;
    border:1px solid transparent;
    padding:4px;
    box-sizing:border-box;
}

.palette_button.text.selected {
    border-color:var(--primary-color);
    background-color:var(--primary-color-light);
    cursor:pointer;
}

.palette_button svg {
    width: 30px;
    height: 30px;
    fill:var(--darkgrey);
}

.palette_button.remove_background svg {
    width: 36px;
    height: 36px;
    fill: var(--primary-color-dark);
}

.palette_button.text.single svg {
    width: 36px;
    height: 36px;
}

.palette_button.zoom_icon svg {
    width: 26px;
    height: 26px;
}

.palette_button.text.book svg {
    padding:3px;
}

.palette_button.text.single span,
.palette_button.text.book span{
    font-size:11pt;
}

.palette_button.tool.active svg {
    fill:var(--white);
}

.palette_button img {
    border-radius: 50%;
}

#graphic_shape .palette_button img,
#placeholder_shape .palette_buttons img {
    border-radius:unset;
}

.palette_button.align_justify {background-image:url(/images/themes/1/button_align_justify.svg);}
.palette_button.animals {background-image:url(/images/themes/1/shape-category-animals.svg);}
.palette_button.back {background-image:url(/images/themes/1/toolbar_nav_previous_black.svg);width: 40px;height: 40px;}
.palette_button.basic {background-image:url(/images/themes/1/shape-category-basic.svg);}
.palette_button.bubble {background-image:url(/images/themes/2/icon_bubble.svg);}
.palette_button.coolword {background-image:url(/images/themes/1/button_coolword.svg);order: 4;}
.palette_button.convertsticker {background-image:url(/images/themes/1/button_convertsticker.svg);order: 3;}
.palette_button.converttalkie {background-image: url(/images/themes/1/button_converttalkie.svg);order: 4;background-size: 26px 26px;}
.palette_button.cursor {background-image:url(/images/themes/1/palette_cursor.svg);}
.palette_button.duplicate {background-image:url(/images/themes/1/button_duplicate.svg);order: 1;}
.palette_button.edit {background-image:url(/images/themes/1/toolbar_nav_next_black.svg);margin-left: 10px;width: 40px;height: 40px;}
.palette_button.eraser_chalk {background-image:url(/images/themes/1/palette_eraser_chalk.svg);}
.palette_button.eraser_pencil {background-image:url(/images/themes/1/palette_eraser_pencil.svg);}
.palette_button.font.large {background-image:url(/images/themes/2/icon_font_large.svg);}
.palette_button.font.small {background-image:url(/images/themes/2/icon_font_small.svg);}
.palette_button.general {background-image:url(/images/themes/1/shape-category-nature.svg);}
.palette_button.glue {background-image:url(/images/themes/1/menu_glue.svg);order: 2;background-size: 28px 28px;}
.palette_button.launch {background-image:url(/images/themes/1/button_launch.svg);margin-left: 5px;}
.palette_button.lock {background-image:url(/images/themes/1/icon_lock.svg);order: 3;}
.palette_button.marquee_rect {background-image:url(/images/themes/1/palette_marquee.svg);}
.palette_button.marquee_lasso {background-image:url(/images/themes/1/palette_marquee_lasso.svg);}
.palette_button.marquee_oval {background-image:url(/images/themes/1/palette_marquee_oval.svg);}
.palette_button.marquee_wand {background-image:url(/images/themes/1/palette_marquee_wand.svg);}
.palette_button.more {background-image:url(/images/themes/1/palette_more.svg);}
.palette_button.numbers {background-image:url(/images/themes/1/shape-category-numbers.svg);}
.palette_button.pencil {background-image:url(/images/themes/1/palette_pencil.svg);}
.palette_button.people {background-image:url(/images/themes/1/shape-category-people.svg);}
.palette_button.play {background-image:url(/images/themes/1/button_play.svg);}
.palette_button.redo {background-image:url(/images/themes/1/palette_redo.svg);}
.palette_button.settings {background-image:url(/images/themes/1/icon_gear.svg);}
.palette_button.size.large {background-image:url(/images/themes/2/icon_size_large.svg);}
.palette_button.size.small {background-image:url(/images/themes/2/icon_size_small.svg);}
.palette_button.stroke.thin {background-image:url(/images/themes/2/icon_stroke_thin.svg);}
.palette_button.stroke.wide {background-image:url(/images/themes/2/icon_stroke_wide.svg);}
.palette_button.shadow_icon {background-image:url(/images/themes/2/icon_shadow.svg);}
.palette_button.shadow_text {background-image:url(/images/themes/2/icon_shadow_text.svg);}
.palette_button.smaller {background-image:url(/images/themes/1/button_smaller.svg);}
.palette_button.bigger {background-image:url(/images/themes/1/button_bigger.svg);}
.palette_button.rotate_l {background-image:url(/images/themes/1/button_rotate_left.svg);}
.palette_button.rotate_r {background-image:url(/images/themes/1/button_rotate_right.svg);}
.palette_button.flip_h {background-image:url(/images/themes/1/button_flip_horiz.svg);background-size: 24px 24px;}
.palette_button.flip_v {background-image:url(/images/themes/1/button_flip_vert.svg);background-size: 24px 24px;}
.palette_button.symmetry_2 {background-image:url(/images/themes/1/palette_mirror2.svg);}
.palette_button.symmetry_4 {background-image:url(/images/themes/1/palette_mirror4.svg);}
.palette_button.symmetry_6 {background-image:url(/images/themes/1/palette_mirror6.svg);}
.palette_button.symmetry_8 {background-image:url(/images/themes/1/palette_mirror8.svg);}
.palette_button.ttext {background-image:url(/images/themes/1/icon_keyboard.svg);}
.palette_button.tobject {background-image:url(/images/themes/1/icon_text_object.svg);}
.palette_button.trecord {background-image:url(/images/themes/1/icon_voice_over.svg);}
.palette_button.tfile {background-image:url(/images/themes/1/icon_library_music.svg);}
.palette_button.undo {background-image:url(/images/themes/1/palette_undo.svg);}

.palette_button.tool-protractor svg {
    position: relative;
    top: 6px;
}

.palette_buttons.seven .palette_button svg {
    width: 26px;
    height: 26px;
}

.palette_button.shape_fill svg {
    width: 22px;
    height: 22px;
    border: 1px solid var(--black);
    fill:var(--black);
}

.palette_button.shape_rotate svg {
    fill:var(--black);
}

/*.palette_button.coolword,
#toolbar-menu-item-cool-word,
.ipad .palette_button.coolword,
.ipad #toolbar-menu-item-cool-word{
    display:none;
}*/

.ipad .palette_button.edit,
.filter .palette_button.edit{
    margin-left:0;
}

.palette_button.edit_colors {
    width:100%;
    height:100%;
    background-image:url(/images/themes/1/toolbar_nav_next_black.svg);
}

.fillonly .palette_button.edit_colors,
.pencilonly .palette_button.edit_colors{
    display:none;
}

.palette_button.bold {
    font-size:18pt;
    font-weight: bold;
}

.palette_button.italic {
    font-size: 19pt;
    font-style: italic;
    font-family:serif;
    font-weight:bold;
}

.palette_button.underline {
    font-size: 17pt;
    text-decoration: underline;
    position: relative;
    top: -1px;
    font-weight: 500;
}

.filter .palette_buttons.four{
    justify-items:flex-end;
}

.filter .palette_button.edit{
    grid-area: btn4;
}

.filter .palette_button.invert{
    grid-area: btn3;
}

.filter .palette_button.greyscale{
    grid-area: btn2;
}

.filter .palette_button.remove_background{
    grid-area: btn1;
}

.palette_buttons .palette_button.highlight {
    background-image:url(/images/themes/1/button_highlighter.svg);
    background-size: 21px 21px;
}

.palette_buttons .palette_button.highlight[disabled=""] {
    opacity:0;
}

.palette_button.revert.disabled {opacity: 25%;}

.palette_button.undo,
.palette_button.redo {
    height: 50px;
    width:50px;
}

.ipad .palette_button.undo {
    margin-right: 10px;
}

.palette_button.revert:hover {opacity: 1;}

#currentSymmetryButton.palette_button {
    height: 32px;
    width: 32px;
    margin-left: 5px;
    background-size: 24px 24px;
    vertical-align: middle;
}

#currentSymmetryButton.palette_button.active {
    background-color: initial;
    cursor: initial;
}

.palette_button.smaller,
.palette_button.bigger {
    display: none;
}

.filter_button {
    display: inline-block;
    padding: 7px 5px;
    cursor: pointer;
    vertical-align: middle;
    justify-self: center;
    outline: none;
    margin: 0 auto;
}

.palette_button .greyscale {filter: grayscale(100%);}
.palette_button .sepia {filter: sepia(100%);}
.palette_button .blur {filter: blur(2px);}
.palette_button .invert {filter: invert(100%);}
.palette_button .cameo {border-radius:50%;}
.palette_button .rounded {border-radius:4px;}
.palette_button .leaf {border-radius:10% 40% 10%;}
.palette_button .rounded_edge {border-radius:20%/30%;}

.filter_button.active{
    background-color: var(--middlegrey);
}
                
.filter_button:hover,
.canvas_button:hover,
.canvas_button:focus,
.palette_button:hover,
.palette_shape_button:hover,
.palette_shape_button:focus {
    background-color: var(--lightgrey);
    border-color: var(--middlegrey);
}

.palette_button.active:hover {
    background-color: var(--primary-color-light);
}

.palette_button.tool.active:hover {
    background-color: var(--primary-color);
}

.palette_button.disabled:hover,
.palette_button.font.large:hover,
.palette_button.font.small:hover,
.palette_button.shadow_text:hover,
.palette_button.size.large:hover,
.palette_button.size.small:hover,
.palette_button.stroke.thin:hover,
.palette_button.stroke.wide:hover{
    background-color: transparent;
    cursor:default;
}
                
.palette_button_icon {
    height: 30px;
    width: 30px;
}

.palette_options.slideshow .palette_switch,
.palette_options.presentation .palette_switch,
.palette_options.placeholder .palette_switch{
    margin-left: auto;
}

.filters .palette_row.flex {
    position:relative;
}

.filters .palette_row.flex.shapes {
    border-bottom: 1px solid var(--middlegrey);
    margin: 6px 0;
    padding: 0 0 4px 0;
}

.filters .palette_row.flex.greyscale,
.filters .palette_row.flex.invert,
.filters .palette_row.flex.rbackground {
    display:none;
}

.filters .palette_label.slider {
    position: absolute;
    font-size: .8em;
    top: 5px;
    left: 40px;
}

.filters .palette_row.flex:not(.shapes) img {
    border-radius:50%;
    margin-right:10px;
    height: 30px;
    width:30px;
}

.filters svg {
    border-radius:50%;
    margin-right:10px;
    height: 36px;
    width:36px;
}

.filters .header img {
    border-radius:50%;
    margin:0 20px 0 auto;
    display:none;
}

.filters img.greyscale {filter: grayscale(100%);}
.filters img.sepia {filter: sepia(100%);}
.filters img.blur {filter: blur(2px);}
.filters img.invert {filter: invert(100%);}
.filters img.brightness {filter: brightness(200%);}
.filters img.contrast {filter: contrast(200%);}
.filters img.saturation {filter: saturate(200%);}

.filters .size_slider {
    margin: 20px 10px 20px auto;
    order: 3;
    position: relative;
    top: 3px;
}

.filters .palette_switch.right {
    order:4;
    min-width:60px;
}

.subpanel_grid_option {
    box-sizing: border-box;
    height:62px;
    width:100%;
    padding: 4px;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    user-select: none;
    fill:#ffffff;
    stroke:#3c3c3c;
    border: 1px solid transparent;
}

.subpanel_grid_option.shape {
    width: 60px;
    height: 60px;
}

.subpanel_grid_option.spray {
    height: 80px;
    width: 80px;
    padding: 0;
    border: 6px solid var(--white);
    background-color: var(--white);
}

#shape_options_short_list .subpanel_grid_option.shape {
    height: 44px;
    width: 44px;
}

#spray_options_short_list .subpanel_grid_option.spray {
    height: 44px;
    width: 44px;
}

.subpanel_grid_option:hover {
    background-color: var(--lightgrey);
    border-color: var(--middlegrey);
}

.spray .subpanel_grid_option:hover {
    background-color: var(--white);
    border-color: var(--grey);
}

.subpanel_grid_option.active{
    background-color: var(--primary-color-light);
    border-color: var(--primary-color);
}

.spray .subpanel_grid_option.active{
    background-color: var(--white);
    border-color: var(--primary-color-light);
}

.subpanel_grid_option img,
.subpanel_grid_option svg{
    height: 100%;
    max-width: 100%;
}

#shape_list .palette_label,
#spray_options .palette_label{
    margin-right:0;
}

#shape_list .palette_button.edit,
#spray_options .palette_button.edit{
    margin-left:0;
}

#shape_options_short_list .palette_button svg{
    height:26px;
    width:26px;
}

.palette_shape_button {
    height: 28px;
    width: 28px;
    padding: 6px;
    margin-right: 5px;
    cursor: pointer;
}

.svg_shape_option {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.font_option {
    border-bottom: 1px solid var(--middlegrey);
    padding: 10px 15px 6px;
    cursor: pointer;
    width: 100%;
    display: block;
    text-align: left;
}

.font_option:last-child {
    border-bottom: none;
}

.font_option img {
    height: 36px;
    user-select: none;
    pointer-events: none;
}

.font_option.brush {
    display: block;
    width: 100%;
    text-align: center;
}

.font_option.brush img {
    width: 80%;
}

.font_option.path img {
    width: 100%;
}
.palette_brush_option {
    border: 1px solid var(--middlegrey);
    padding: 2px 10px;
    background-color: var(--white);
    justify-self: center;
    cursor: pointer;
}

.palette_brush_option.active,
.palette_brush_option.active:hover,
.font_option.active,
.font_option.active:hover{
    background-color: var(--middlegrey);
}

.palette_brush_option:hover,
.font_option:hover{
    background-color: var(--lightgrey);
}

.font_option.path[data-path="ellipse"] {
    display:none;
}

.editor_count_indicator {
    display: none;
    position: absolute;
    height: 16px;
    width: 16px;
    padding: 1px;
    color: var(--white);
    border-radius: 50%;
    background-color: red;
    font-size: 8pt;
}

.editor_count_indicator.comments {
    left: 17px;
    bottom: 3px;
    line-height: 13pt;
}

.editor_count_indicator.team {
    line-height:13pt;
    margin-left: 10px;
    bottom: 8px;
    left: 12px;
}

.palette_icon {
    width: 44px;
    height: 44px;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center; 
}
                
.palette_icon.brush {background-image:url(/images/themes/1/palette_paint_brush.svg);}

.palette_header {
    margin-left: 5px;
    font-weight: 500;
    user-select: none;
}

.palette_note {
    color: var(--darkgrey);
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.palette_text_field {
    border: 1px solid var(--middlegrey);
    background-color: var(--white);
    flex: 1;
    height: 32px;
    padding-left: 10px;
    width: 80%;
}

#color_options_hex .palette_text_field {
    max-width: 150px;
}

.palette_row.instructions_text {
    flex:1;
}

.teacher.readonly .palette_row.instructions_text {
    overflow:auto;
}

.teacher.readonly .palette_row.sound {
    margin-bottom:auto;
}

.project_instructions_text {
    border: 1px solid var(--middlegrey);
    min-height: 80px;
    height: 98%;
    font-size: .9em;
    width: 100%;
    font-family: 'Roboto', verdana, sans-serif;
    padding:5px;
    box-sizing: border-box;
    margin-bottom:10px;
}

.project_instructions_text.student {
    overflow-y: auto;
    height:unset; 
    padding: 5px 5px 5px 8px;
}

.editor_text select.anyFormField,
#editor-graphic select.anyFormField {
    min-width:100px;
}

.editor_text .palette_row.font_size {
    height:44px;
}

body:not(ipad) .editor_text .palette_row.flex.font_choice {
    margin-bottom:10px;
}

.editor_text .palette_row.flex.font_style {
    margin:10px 0 15px;
    padding-bottom:5px;
    border-bottom:1px solid var(--middlegrey);
}

.ipad .editor_text .palette_row.flex.font_style {
    margin:8px 0 10px;
}

.editor_text .palette_row.shape {
    padding-top:10px;
    border-top:1px solid var(--middlegrey);
}

.ipad .editor_text .palette_row.shape {
    padding-top:6px;
}

.editor_text .palette_row.shape::-webkit-scrollbar {
    display: none;
}

.editor_text .palette_row.shape button.edit{
    margin-left:unset;
}

.editor_text .palette_row.shape svg {
    order:8;
}

.editor_text .palette_row.shape svg.wxm {
    order:6;
}

.editor_text .palette_row.shape svg.wxc {
    order:5;
}

.editor_text .palette_row.shape svg[data-type="bubble_none"] {order:1;}
.editor_text .palette_row.shape svg[data-type="rectangle_none"] {order:2;}
.editor_text .palette_row.shape svg[data-type="ellipse_none"] {order:3;}
.editor_text .palette_row.shape svg[data-type="ellipse_straight"] {order:4;}
.editor_text .palette_row.shape svg[data-type="rectangle_straight"] {order:5;}

.editor_text .palette_row.shape button {order:7;}

.editor_text .palette_row.shape svg{
    padding: 2px;
    border-radius: 4px;
    width: 90%;
    height: 36px;
}

.palette_font_holder {
    display: flex;
    background-color: var(--white);
    border: 1px solid var(--middlegrey);
    text-align: right;
    flex: 1;
    overflow: hidden;
    align-items:center;
    height:40px;
    box-sizing:border-box;
    margin-right:10px;
}

.palette_font_current {
    font-size:16pt;
    text-align: right;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor:pointer;
}

.palette_font_holder button.palette_button.edit {
    height:32px;
    width:32px;
    margin:0 5px;
}

.font_choice .palette_text_color {
    height:40px;
    width:50px;
    box-sizing:border-box;
    margin-right:5px;
}

.palette_font_current.roboto {font-family: 'Roboto', sans-serif;}
.palette_font_current.multiple {font-style: italic;}

.palette_text_color, .palette_background_color {
    width: 80px;
    height:34px;
    border: 1px solid var(--middlegrey);
    box-shadow: inset 0 0 0 4px var(--white),inset 0 0 0 5px rgba(0, 0, 0, 0.15);
    margin-left: auto;
    cursor:pointer;
    margin-right: 5px;
    border-radius: 4px;
}

.palette_text_color.black, .palette_background_color.black {background-color: var(--black);}
.palette_text_color.white, .palette_background_color.white {background-color: var(--white);}

.brush_sample, .path_sample {
    border: 1px solid var(--middlegrey);
    padding: 3px;
    background-color: var(--white);
    margin-left: auto;
    text-align:center;
    cursor: pointer;
    display: inline-flex;
    border-radius: 4px;
}
     
.path_sample {
    flex:1;
    padding: 5px;
}
.path_sample img {
    width:100%;
    height: 100%;
}
#animation-path-type-current {
    height:40px;
}
.paint_color {
    background-color: var(--white);
    width: 100%;
    padding-bottom:100%;
    box-shadow:inset 0 0 0 5px var(--white),inset 0 0 0 6px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--middlegrey);
    vertical-align: middle;
    border-radius: 5px;
}

.paint_color.active,
.paint_color.active:focus {
    box-shadow: inset 0 0 0 5px var(--primary-color-light);
    border: 1px solid var(--primary-color);
}

.paint_color:hover,
.paint_color:focus {
    box-shadow: inset 0 0 0 4px var(--lightgrey);
    outline: none;
}

.paint_color:disabled {
    opacity:0.3;
}
                
.paint_color.red {background-color:red; order:1;}
.paint_color.orange {background-color:orange; order:2;}
.paint_color.yellow {background-color:yellow; order:3;}
.paint_color.green {background-color:#009f00; order:4;}
.paint_color.blue {background-color:blue; order:5;}
.paint_color.purple {background-color:#921DF2; order:6;}
.paint_color.black {background-color:#3c3c3c; order:7;}
.paint_color.violet {background-color:violet; order:8;}
.paint_color.pink {background-color:#ffadad; order:9;}
.paint_color.lemon {background-color:#FFFFB8; order:10;}
.paint_color.lime {background-color:#B8E986; order:11;}
.paint_color.skyblue {background-color:#7cd3ff; order:12;}
.paint_color.lavender {background-color:#D8B0FF; order:13;}
.paint_color.white {background-color:white; order:14;}
.paint_color.skin3 {background-color:#8E5B3C; order:15;}
.paint_color.skin2 {background-color:#D1A282; order:16;}
.paint_color.skin1 {background-color:navajowhite; order:17;}
.paint_color.grey {background-color:#a9a9a9; order:18;}
.paint_color.outline {background-color:#000000; order:19;}
.paint_color.advanced {order:20;}
.palette_button.edit_colors {border-radius:5px; order:21;}

.paint_color.grey2 {background-color:#cbcbcb; order:18;}

.fillonly .paint_color.red {order:1;}
.fillonly .paint_color.orange {order:2;}
.fillonly .paint_color.yellow {order:3;}
.fillonly .paint_color.green {order:4;}
.fillonly .paint_color.blue {order:5;}
.fillonly .paint_color.purple {order:6;}
.fillonly .paint_color.black {order:7;}
.fillonly .paint_color.violet {order:8;}
.fillonly .paint_color.pink {order:9;}
.fillonly .paint_color.lemon {order:10;}
.fillonly .paint_color.lime {order:11;}
.fillonly .paint_color.skyblue {order:12;}
.fillonly .paint_color.lavender {order:13;}
.fillonly .paint_color.white {order:14;}
.fillonly .paint_color.skin3 {order:15;}
.fillonly .paint_color.skin2 {order:16;}
.fillonly .paint_color.skin1 {order:17;}
.fillonly .paint_color.grey {order:18;}

.pencilonly .paint_color.red {order:1;}
.pencilonly .paint_color.orange {order:2;}
.pencilonly .paint_color.yellow {order:3;}
.pencilonly .paint_color.green {order:4;}
.pencilonly .paint_color.blue {order:5;}
.pencilonly .paint_color.purple {order:6;}
.pencilonly .paint_color.black {order:7;}
.pencilonly .paint_color.violet {order:8;}
.pencilonly .paint_color.pink {order:9;}
.pencilonly .paint_color.lemon {order:10;}
.pencilonly .paint_color.lime {order:11;}
.pencilonly .paint_color.skyblue {order:12;}
.pencilonly .paint_color.lavender {order:13;}
.pencilonly .paint_color.white {order:14;}
.pencilonly .paint_color.skin3 {order:15;}
.pencilonly .paint_color.skin2 {order:16;}
.pencilonly .paint_color.skin1 {order:17;}
.pencilonly .paint_color.grey {order:18;}

.paint_color.coloringbook.black {background-color:rgb(30, 30, 30);}
.paint_color.rainbow {
    background:radial-gradient(red,orange,yellow,green,blue,pink,purple,teal,blueViolet,brown,cornflowerBlue,chartreuse,
        darkMagenta,goldenRod,fuchsia,hotPink,khaki,lavender,mediumPurple,midnightBlue,paleVioletRed);
}
.paint_color.picker{
    background-image:url(/images/themes/1/palette_eyedropper.svg);
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center; 
}
.paint_color.more{
    background-image:url(/images/themes/1/palette_more.svg);
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center; 
}

.paint_color.advanced {
    padding:4px;
    display: flex;    
    align-items: center;
    justify-content: center;
    height: 100%;
    box-shadow: none;
}

.paint_color.outline {
    padding:4px;
    display: flex;    
    align-items: center;
    justify-content: center;
    height: 100%;
}

.paint_color.outline svg,
.paint_color.advanced svg{
    height:100%;
    width:100%;
}

.paint_color.outline svg{
    background:#ffffff;
}

.paint_color.image {
    background-image:url(/images/themes/1/palette_image.svg);
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
}

.palette_options.color_options.bubble .paint_color.red {background-color:#fd9090;}
.palette_options.color_options.bubble .paint_color.orange {background-color:#ffdc9c;}
.palette_options.color_options.bubble .paint_color.yellow {background-color:#ffffb5;}
.palette_options.color_options.bubble .paint_color.green {background-color:#c9ffc9;}
.palette_options.color_options.bubble .paint_color.purple {background-color:#ebd0ff;}
.palette_options.color_options.bubble .paint_color.blue {background-color:#ceceff;}
.palette_options.color_options.bubble .paint_color.violet {background-color:#a7d8ff;}
.palette_options.color_options.bubble .paint_color.skin1 {background-color:#ffadfc;}

.palette_options.color_options.bubble .paint_color.pink,
.palette_options.color_options.bubble .paint_color.skyblue,
.palette_options.color_options.bubble .paint_color.lavender,
.palette_options.color_options.bubble .paint_color.lemon,
.palette_options.color_options.bubble .paint_color.lime,
.palette_options.color_options.bubble .paint_color.grey2,
.palette_options.color_options.bubble .paint_color.grey {
    display:none
}

.fill_color {
    background-color: var(--white);
    width: 38px;
    height: 38px;
    box-shadow: inset 0 0 0 4px white;
    border: 1px solid var(--grey);
    margin-left: auto;
    margin-right: 10px;
}

.es_ES #fill_sample_label,
.fr_FR #fill_sample_label{display: none;}

.background-sound-view {
    display: flex;
    flex:1;
    align-items: center;
}

.background-sound-view .palette_button.delete {
    margin-left: auto;
}

.morecolorlabel {
    margin-top: -13px;
    height: 30px;
    width: 30px;
    cursor: pointer;
}

.pickerlabel {
    margin-top: -12px;
    height: 30px;
    width: 30px;
    cursor: pointer;
    padding-right: 13px;
}

.morecolorsvg {
    width: 32px;
    height: 32px;
   
}

.colorpickercursor {
    cursor: url(/images/cursors/cursor_eyedropper.svg) 0 31, auto !important;
}

.eyedropper-stage-indicator {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.5);
    position: absolute;
    z-index: 10000;
}

.cursor-tool {
    position: absolute;
    z-index: 10000;
    text-align: center;
    transform-origin: top left;
    pointer-events: all;
}

.cursor-tool.ruler-in {
    width: 444px;
}

.cursor-tool.ruler-cm {
    width: 436px;
}

.cursor-tool .rotate {
    transform-origin: center;
}

.cursor-tool svg {
    width: 260px;
}

.cursor-tool.ruler-in svg {
    width: 444px;
}

.cursor-tool.ruler-cm svg {
    width: 436px;
}

.cursor-tool.circle svg {
    height: 260px;
}

.cursor-tool.white svg {
    fill:var(--white);
}

.cursor-handle {
    z-index: 10001;
    margin: 0 auto 20px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: lightcyan;
    border: 2px solid var(--black);
    box-sizing: border-box;
}

.cursor-tool.white .cursor-handle {
    border-color:var(--white);
}

.colorpickerinput {
    display: none;
    opacity: 0;
}

.color_wheel {
    /* setting the padding-bottom to 100% will keep the square aspect ratio */
    width:90%;
    padding-bottom: 60%;
    
    background: rgb(0,0,0);
    background: linear-gradient(rgba(125, 125, 125, 0) 0%, rgb(125, 125, 125) 100%), 
        linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);
    overflow: hidden;
    
    border: 1px solid var(--darkgrey);
    margin: auto;
    cursor: pointer;
}

.color_wheel:focus {
    outline: none;
}

.color_wheel_target {
    background-color:var(--white);
    border:3px solid var(--white);    
    height:30px;
    border-radius:50%;
    width:30px;
    box-sizing: border-box;

    position: relative;
    top: 0px;
    left: 0px;
    background: transparent;
}

.color_lightness {
    height: 40px;
    width: 90%;
    background: rgb(0,0,0);
    overflow: hidden;
    
    border: 1px solid var(--darkgrey);
    margin: auto;
    cursor: pointer;
}

.color_lightness:focus {
    outline: none;
}

.color_lightness_target {
    background-color:var(--white);
    border:3px solid var(--white);    
    height:100%;
    width:30px;
    box-sizing: border-box;
    position: relative;
    top: 0px;
    left: 0px;
}

.width_slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 70%;
    height: 10px;
    background: var(--grey); /* Grey background */
    outline: none; /* Remove outline */
    opacity: 1; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

.width_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 15px;
    background: var(--grey);
    cursor: pointer;
}

.width_slider::-moz-range-thumb {
    width: 20px;
    height: 15px;
    background: var(--grey);
    cursor: pointer;
}

.slider_value {
    min-width: 34px;
    text-align: center;
    user-select: none;
}

.editor-button {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--grey);
    border-radius: 17px;
    color: var(--primary-text);
    height: 34px;
    padding: 0 14px;
    margin-left: 2px;
    margin-right: 10px;
    font-weight: 500;
    font-size: .9em;
    user-select: none;
}

.editor-button.background {
    background-color:transparent;
    border: none;
    margin:0;
    font-size: unset;
    font-weight: unset;
    padding: 5px 10px 5px 6px;
    height: unset;
}

.editor-button svg {
    height: 26px;
    width: 26px;
    vertical-align: middle;
    margin-right: 4px;
    fill: var(--primary-text);
}

.editor-button.play svg {
    height: 14px;
    width: 14px;
    margin-right: 8px;
}

.editor-button.pause svg {
    height: 16px;
    width: 16px;
    margin-right: 8px;
}

.editor-button.background svg {
    height: 34px;
    width: 34px;
    vertical-align: middle;
    margin-right: 8px;
    fill: var(--primary-text);
}

.editor-button.background .button-label {
    position: relative;
    top: 2px;
}

.editor-button.erase-all {
    background-color:transparent;
    border: none;
    font-size: unset;
    font-weight: unset;
    padding: 5px 10px 7px;
    height: unset;
}

.editor-button.highlight {
    color: var(--white);
    background-color:var(--primary-color);
}

.editor-button.highlight img.loading {
    background: var(--white);
    padding: 4px;
    border-radius: 50%;
}

.editor-button.highlight svg {
    fill:var(--white);
    height:14px;
    width:14px;
    vertical-align: middle;
    margin-right: 6px;
    pointer-events:none;
}

.editor-button.highlight.record svg {
    height:24px;
    width:24px;
}

.editor-button.highlight.rewind,
.editor-button.highlight.fullscreen{
    padding: 0;
    width: 34px;
    justify-content: center;
}

.editor-button.highlight.rewind svg,
.editor-button.highlight.fullscreen svg{
    height:24px;
    width:24px;
    margin:0;
}

.editor-button.highlight.fullscreen {
    margin:0 10px 0 auto;
}

#editor-instructions .editor-button.highlight {
    color: var(--primary-text);
    background-color:var(--lightgrey);
}

#editor-instructions .editor-button.highlight svg {
    fill: var(--primary-text);
}

.editor-button.record .record{
    margin-right: 5px;
}

.editor-button:hover,
.editor-button:focus{
    outline: none;
    background-color: var(--lightgrey);
}

.editor-button.highlight:hover,
.editor-button.highlight:focus{
    background-color: var(--primary-color-dark);
}

progress.editor-recording-sound {
    height: 20px;
    width: 90%;
}

progress.editor-recording-sound::-webkit-progress-bar {
  background-color: var(--lightgrey);
  border: 1px solid var(--middlegrey);
  border-radius: 2px;
}

.presentation .slideshow button.secondary.with-icon.bsound,
.slideshow .slideshow button.secondary.with-icon.bsound {
    padding:0 14px;
}

.presentation .bsound svg,
.slideshow .bsound svg {
    display: none;
}

.spray-list-image {
    flex: 0 0 160px;
    margin: 0 0 10px 10px;
    text-align: center;
    cursor: pointer;   
    border: solid 1px var(--black);
}
.spray-list-image.active {
    border: 2px solid var(--primary-color);
}

.history-row {
    display: flex;
    align-items: center;
}

.history-row.header {
    border-bottom: 1px solid var(--middlegrey);
    padding: 5px 0;
}

.history-row.header.shape,
.history-row.header.bubble {
    border-bottom: none;
}

.history-row.header.sprays {
    padding: 15px 0px;
    border-bottom: none;
}

.history-row.header select{
    flex: 1;
}

.history-list {
    background-color: var(--white);
}

.history-list-item {
    padding: 5px;
}

.history-list-item.date {
    font-size: .9em;
    font-weight: 500;
}

.history-list-item.date:not(:first-child) {
    border-top: 1px solid var(--middlegrey);
}

.history-list-item.date:not(:last-child) {
    border-bottom: 1px solid var(--middlegrey);
}

.history-list-item.contribution {
    padding-left: 15px;
}

.history-list-item-name {
    display: inline-block;
    vertical-align: middle;
    font-weight: 500;
    font-size: .9em;
}

.history-list-item-time {
    display: inline-block;
    vertical-align: middle;
    float: right;
    font-family: verdana, arial, sans-serif;
    font-size: 8pt;
    color: var(--darkgrey);
}

.history-list-item-action {
    font-family: verdana, arial, sans-serif;
    font-size: 8pt;
}

#editor-history.palette_options.tattle.show {
    margin: 5px 0 20px 10px;
}

/**
* Styling for the selection div and its node handles.  See /js/selection-manager.js.
*/

.selectionDiv {
    position: absolute;
    z-index: 4;
    cursor: pointer;
    display: none;
}

.selected {
    border: 3px dashed var(--grey);
    cursor: move;
    display: block;
}

.handle {
    z-index: 5;
    position: absolute;
    border: 1px solid var(--black);
    border-radius: 50%;
    height: 20px;
    width: 20px;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center; 
    cursor: move;
}

.touch .handle{
    height: 24px;
    width: 24px;
    box-sizing:border-box;
}

.ipad .handle,
.iphone .handle,
.android .handle{
    height: 30px;
    width: 30px;
}

.handleSelected {
    position: absolute;
    background-color: var(--handle-selected);
    cursor: default;
    z-index: 5;
    cursor: move;
}

.handleDisabled {
    display: none!important;
    background-color: var(--middlegrey);
}

.handleTextEditing {
    visibility: hidden;
}


/* northwest handle - scale */
.handle0 {
    background-image:url(/images/themes/1/cursor_nw_resize.svg);
    cursor: nw-resize;
} 

/* north handle - scale */
.handle1 {
    background-image:url(/images/themes/1/cursor_ns_resize.svg);
    cursor: ns-resize;
} 

/* northeast handle - scale */
.handle2 {
    background-image:url(/images/themes/1/cursor_ne_resize.svg);
    cursor: ne-resize;
} 

/* east handle - scale */
.handle3 {
    background-image:url(/images/themes/1/cursor_ew_resize.svg);
    cursor: ew-resize;
} 

.text-object .handle3 {
    background-color:var(--handle-translate);
} 

/* southeast handle - scale */
.handle4 {
    background-image:url(/images/themes/1/cursor_nw_resize.svg);
    cursor: nw-resize;
}

/* south handle - scale */
.handle5, .handle19 {
    background-image:url(/images/themes/1/cursor_ns_resize.svg);
    cursor: ns-resize;
} 

/* southwest handle - scale - tts text */
.handle6 {
    background-image:url(/images/themes/1/cursor_ne_resize.svg);
    cursor: ne-resize;
} 

/* west handle - scale */
.handle7 {
    background-image:url(/images/themes/1/cursor_ew_resize.svg);
    cursor: ew-resize;
    display:none!important;
}

/* west crop handle */
.handle20 {
    background-image:url(/images/themes/1/cursor_ew_resize.svg);
    cursor: ew-resize;
}

/* rotate */
.handle8 {
    background-color: var(--handle-translate);
    background-image:url(/images/themes/1/cursor_rotate.svg);
    cursor: url('/images/themes/1/cursor_rotate_16.svg'), alias;
}


/* delete */
.handle9 {
    background-color: var(--primary-red);
    background-image:url(/images/themes/1/cursor_delete_white.svg);
    cursor: pointer;
    background-size: 10px 10px;
}

/* TTS/speak */
.handle10 {
    background-color: var(--handle-speak);
    background-image:url(/images/themes/1/cursor_tts.svg);
    cursor: pointer;
}

/* Speech recognition/dictation */
.handle11 {
    background-color: var(--white);
    background-image:url(/images/themes/1/cursor_mic.svg);
    cursor: pointer;
}

/* Speech recognition/dictation - stop */
.handle11_stop {
    background-color: var(--white);
    background-image:url(/images/themes/1/cursor_stop.svg);
    cursor: pointer;
}

/* Callout/bubble tail */
.handle12 {
    background-color: var(--white);
    background-image:url(/images/themes/1/cursor_callout.svg);
    cursor: move;
}

/* Callout/bubble tail */
.handle13 {
    background-color: var(--lightgrey);
    background-image:url(/images/themes/1/cursor_menu.svg);
    background-size: 18px 18px;
    cursor: pointer;
}

/* Character map */
.handle14 {
    background-color: var(--white);
    background-image:url(/images/themes/1/charmap_emojis.svg);
    cursor: pointer;
    background-size: 15px 15px;
    border-radius:4px;
}

/* Object connections handle */
.handle15, .handle16, .handle17, .handle18 {
    background-color: #ff47ff;
    background-size: 16px 16px;
    cursor: pointer;
}

/* Object crop handle */
.handle19, .handle20, .handle21 {
    background-color: #47ff47;
    background-size: 16px 16px;
}

.handle21 {
    cursor: move;
}

.handle15 {
    background-image: url(/images/themes/1/arrow_up.svg);
}

.handle16 {
    background-image: url(/images/themes/1/arrow_right.svg);
}

.handle17 {
    background-image: url(/images/themes/1/arrow_downward.svg);
}

.handle18 {
    background-image: url(/images/themes/1/arrow_left.svg);
}

.handle15.highlight, .handle16.highlight, .handle17.highlight, .handle18.highlight {
    outline: 3px solid var(--handle-highlight);
}


.connectionHandle {
    z-index: 1000;
    background-color: var(--lightgrey);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.connectionHandle svg {
    height:16px;
    width:16px;
}

.connectionHandle.handle9 {
    background-color: red;
}

.connectionHandle.handle9 svg{
    display:none;
}

#editor-connection-options .palette_header {
    margin-top:5px;
    margin-bottom:5px;
}


/* locked */
.handle_locked {
    background-color: var(--white);
    background-image:url(/images/themes/1/cursor_lock.svg);
    cursor: default;
}

/* clonable */
.handle_clonable {
    background-color: var(--white);
    background-image:url(/images/themes/1/cursor_clone.svg);
    cursor: default;
}

/* protected */
.handle_protected {
    background-color: var(--white);
    background-image:url(/images/themes/1/cursor_protect.svg);
    cursor: default;
}


/* Shown during selection drag when selecting one or more elements lasso style */
.inprogress-selection-highlight {
    outline: 3px solid var(--handle-highlight);
}

.inprogress-selection-highlight > span {
    outline: 3px solid var(--handle-highlight);
}

/*
* Angle input styles
*/

.default-input {
  position: relative;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  box-shadow: inset 0 0 1px var(--grey);
  border: 1px solid var(--darkgrey);
  background: linear-gradient(to bottom,  var(--white) 0%,var(--lightgrey) 3%,#e1e1e1 96%,#f6f6f6 100%);
  margin: 5px auto;
  cursor: pointer;
  outline: none;
}

.default-input:focus {
  border: 1px solid #0af;
  cursor: pointer;
}

.angle-input-knob {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  height: 2px;
}

.default-input .angle-input-knob::before {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  width: 20px;
  margin-top: -6px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: 0 0 1px var(--grey);
  border: 1px solid var(--middlegrey);
}

.default-input:focus .angle-input-knob::before {
  box-shadow: 0 0 1px #04f;
  border: 1px solid #0af;
}

#instructions-comment-list .displayName {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette_button.shadow_icon,
.palette_button.font.small,
.palette_button.font.large,
.palette_button.font_icon,
.palette_button.shadow_text_icon,
.palette_button.bubble_icon,
.palette_button.size.small,
.palette_button.size.large,
.palette_button.volume.low,
.palette_button.volume.high,
.palette_button.timing_icon,
.palette_graphic.hue_icon,
.palette_button.zoom_icon
{display:none;}

.pencilonly .palette_undo .scale-switch,
.fillonly .palette_undo .scale-switch{
    display: none;
}

/** REPLAY MODE **/
.replayMode.not-loggedin .toolbar_section.nav {
    display:none;
}

@media (max-width: 900px), (orientation:portrait) {
    
    .toolbar_button,
    .toolbar_button:active,
    .toolbar_button:focus{
        border: none;
    }
    
    .toolbar_button.complete {
        padding: 0;
        margin: auto 0 auto 10px;
        top:0;
    }
    
    .toolbar_button.complete svg {
        margin: 0 8px 0 0;
        fill: var(--primary-color);
        background-color: var(--white);
        padding: 0;
        border: none;
        height: 22px;
        width: 22px;
    }
    
    #shape_options_short_list,
    #spray_options_short_list{
        margin-left: 0;
        min-width: 196px;
    }
    
}

@media (min-width: 901px) {
    
    .not-loggedin .toolbar_section.name {
        max-width: 50%;
        margin-right: 40px;
    }
    
    body.type-whiteboard.not-loggedin .toolbar_section.name,
    body.type-whiteboard.readonly .toolbar_section.name{
        max-width: unset;
        margin-right: 20px;
    }
    
    body.type-whiteboard .toolbar_section.name h1{
        margin-left:10px;
    }
    
    body.type-whiteboard.not-loggedin .toolbar_section.name h1{
        text-align:center;
        margin-left:0;
    }
    
    .readonly.lti-li .toolbar_section.activity {
        flex: unset;
        margin-left: auto;
    }
    
    .palette_row.editor_options.fills {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap:5px;
        margin:0;
        border-top: none;
    }

    .palette_row.editor_options.fills div svg:first-child {
        height:100%;
        width:100%;
        box-sizing: border-box;
        margin:0;
        border:none;
    }

}

@media (min-width: 901px) and (min-height:500px){
    
    .toolbar_button.favorite,
    .toolbar_button.assign,
    .toolbar_button.try{
        min-width:120px;
    }

}

@media (max-aspect-ratio: 16/10), (max-height:500px) {
    
    .toolbar_insert_button_holder.show {
        width:150px;
    }
    
    .toolbar_button.page,
    .toolbar_button.text,
    .toolbar_button.image,
    .toolbar_button.symbol,
    .toolbar_button.video,
    .toolbar_button.web,
    .toolbar_button.url,
    .toolbar_button.project {
        display: flex;
        width: 100%;
        background-color: var(--white);
        z-index: 2000;
        border-top: 1px solid var(--middlegrey);
        color: var(--primary-text);
        text-align: left;
        border-radius: 0;
        height: 44px;
        box-sizing: border-box;
        justify-content: flex-start;
        position: initial;
        box-shadow: none;
    }
    
    .toolbar_button.page:hover,
    .toolbar_button.text:hover,
    .toolbar_button.symbol:hover,
    .toolbar_button.image:hover,
    .toolbar_button.video:hover,
    .toolbar_button.web:hover,
    .toolbar_button.url:hover,
    .toolbar_button.project:hover
    {background-color: var(--middlegrey);
    }
    
    .toolbar_button.page.show,
    .toolbar_button.text.show,
    .toolbar_button.video.show,
    .toolbar_button.web.show,
    .toolbar_button.image.show,
    .toolbar_button.symbol.show,
    .toolbar_button.url.show,
    .toolbar_button.project.show
    {display: block;}
    
    .toolbar_icon.page,
    .toolbar_icon.text,
    .toolbar_icon.image,
    .toolbar_icon.symbol,
    .toolbar_icon.video,
    .toolbar_icon.full,
    .toolbar_icon.storyboard,
    .loggedin .toolbar_icon.slideshow{
        display: inline-block; 
        width: 30px;
        vertical-align: middle;
        margin-left: 10px; 
        margin-right: 10px;
    }
    
    .toolbar_button.edit {
        margin-left: 0;
    }
    
    .toolbar_button.page svg,
    .toolbar_button.text svg,
    .toolbar_button.image svg,
    .toolbar_button.symbol svg,
    .toolbar_button.project svg,
    .toolbar_button.url svg,
    .toolbar_button.web svg,
    .toolbar_button.video svg {
        fill: var(--primary-text);
        margin: 0 7px 0 10px;
        vertical-align: middle;
    }    
    
    .not-loggedin .toolbar_button.play svg {
        fill: var(--white);
    }
    
    .editor-button:not(.reply,.unlock) {
        padding: 0;
        width: 34px;
        justify-content: center;
        border-radius: 50%;
    }
    
    .editor-button.bsound {
        padding: 0 14px;
        width: unset;
        border-radius: 17px;
    }
    
    .editor-button svg,
    .editor-button.highlight svg,
    .editor-button.pause svg{
        margin-right:0;
    }
    
    .editor-button.play svg{
        margin-right: 0;
        margin-left:3px;
    }
    
    .editor-button span {
        display: none;
    }
    
    .editor-button.play span.material-icons,
    .editor-button.pause span.material-icons{
        display: inline;
        margin:0;
    }
    
    .editor-button.highlight,
    .editor-button.highlight.rewind,
    .editor-button.highlight.fullscreen{
        padding: 0;
        height: 44px;
        width: 44px;
    }
    
}

@media (min-aspect-ratio: 16/10) and (max-height:500px) {
    
    .tiles {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(108px, 150px));
        grid-gap: 10px;
        margin:10px;
    }
    
    .stage {margin:10px;}
    
    .toolbar_menu_item.filemenu {
        height:44px;
        margin:0;
    }
    
    #toolbar-menu-item-new-project {
        display:none;
    }
    
    .toolbar_menu_item:focus, .toolbar_menu_item:hover {
        border: 1px solid transparent;
        background-color: transparent;
    }
    
    .page-editor .toolbar_home, .page-authkey .toolbar_home {order: 2;margin: 5px 0;}   
    .page-editor .toolbar_section.name {order: 3;flex:none;height:44px;margin-left:0px;width:44px;max-width:unset;margin-right:0;}    
    .page-editor .toolbar_section.insert {order: 6;flex: 1;position: relative;}
    .page-editor .toolbar_section.print {order: 4;flex: none;width: 48px;}
    .page-editor .toolbar_section.team {order: 9;flex: none;}   
    .page-editor .toolbar_section.lti {order: 5;flex: none;} 
    .page-editor .toolbar_section.google {order: 5;flex: none;}
    .page-editor .toolbar_section.complete {order: 7;margin:0 0 30px;}
    .page-editor .toolbar_section.view {order: 8;flex: none;width: 48px;margin-right:0px;margin-top:auto;}
    .page-editor .toolbar_section.slideshow {order: 11;flex: none;margin-top: auto;}  
    .page-editor .toolbar_section.nav {order: 10;display: flex;flex-direction:column;margin-top: auto;} 
    .page-editor .toolbar_section.activity{order: 7;flex: none;}
    .page-editor .toolbar_section.undo{order: 12;flex: 1;display: flex;flex-direction:column;}
    
    body.readonly:not(.player-view) .toolbar_section.view {display:none;}
    
    body.page-editor.readonly:not(.player-view) .toolbar_section.slideshow {
        margin-top: unset;
    }
    
    .page-editor .toolbar_account {    
        margin: 10px auto;
        order: 1;
        width: initial;
    }
    
    .page-editor .sboard .toolbar_section.insert {display:none;}
    
    .toolbar_icon.filemenu {background-image:url(/images/themes/1/toolbar_more_white.svg); display:block;}
    
    .toolbar_insert_button_holder{
        display:none;
        box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 20%);
    }
    
    .toolbar_insert_button_holder.show,
    .toolbar_insert_button_holder_callout.show 
    {
        display:block;
        z-index: 5000;
        position: absolute;
        top: -30px;
        left:45px;
    }
    
    .toolbar_button {
        height: 42px;
        padding: 0;
        width: 48px;
        justify-content: center;
        border:none;        
    }
    
    .toolbar_button img.toolbar_img {
        margin-right: 0;
        height: 24px;
    }
    
    .toolbar_button svg {
        margin-right:0;
    }
    
    .toolbar_section.undo .toolbar_button.undo, 
    .toolbar_section.undo .toolbar_button.redo {
        width:48px;
        height:40px;
        margin:0;
    }
    
    .toolbar_button.lti {
        margin-right: 0;
    }
    
    .toolbar_button.complete {
        padding: 0;
        margin: auto 0;
    }
    
    .toolbar_button.complete svg {
        margin: 0;
        fill: var(--primary-color);
        background-color: var(--white);
        padding: 0;
        border: none;
    }
    
    .toolbar_menu_item.filemenu svg{
        display:block;
        width: 26px;
        height: 26px;
        margin-left: 5px;
    }
    
    .toolbar_button.assign {
        margin:0;
    }
    
    .toolbar_button.previous,
    .toolbar_button.next {
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
        z-index: 998;
    }
    
    .toolbar_button.previous {
        left: -20px;
    }
    
    .readonly .toolbar_section.nav .toolbar_button.previous {
        right:unset;
        left:60px;
    }
    
    .toolbar_button.next {
        right: -20px;
    }
    
    .readonly .toolbar_section.nav .toolbar_button.next {
        right:20px;
        left:unset;
    }
    
    .toolbar_button.previous svg,
    .toolbar_button.next svg {
        fill:var(--primary-text);
    }
    
    .toolbar_button.add .toolbar_button_label,
    .toolbar_button.story .toolbar_button_label,
    .toolbar_button.full .toolbar_button_label,
    .toolbar_button.play .toolbar_button_label,
    .toolbar_button.team .toolbar_button_label,
    .toolbar_button.next .toolbar_button_label,
    .toolbar_button.previous .toolbar_button_label,
    .toolbar_button.delete .toolbar_button_label,
    .toolbar_button.lti .toolbar_button_label,
    .toolbar_button.google .toolbar_button_label,
    .toolbar_button.edit .toolbar_button_label,
    .toolbar_button.assign .toolbar_button_label,
    .toolbar_button.complete .toolbar_button_label,
    .toolbar_button.present .toolbar_button_label,
    .toolbar_button.customize .toolbar_button_label,
    .toolbar_button.try .toolbar_button_label,
    .toolbar_button.favorite .toolbar_button_label,
    .toolbar_menu_item.filemenu .toolbar_button_label{display: none;}
    
    .toolbar_button.full.show,
    .toolbar_button.story.show,
    .toolbar_button.play.show {
        display: block;
    }
    
    .toolbar_button.edit {margin: 0;}    
    
    #toolbar-edit-menu,
    .toolbar_account,
    .toolbar_project_name,
    .toolbar_project_name_readonly {display: none;}
    
    .toolbar_project_name.show {
        display: block;
        position: absolute;
        z-index: 2000;
        border: 1px solid var(--middlegrey);
        background: var(--lightgrey);
        color: var(--primary-text);
        left: 52px;
        width: 300px;
        top: 20px;
        box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 20%);
    }
    
    .toolbar-menu-list {position: absolute; left: 50px; top: -56px;}
    .toolbar-menu-item {height: 44px;}
    
    .toolbar-menu-list li[data-action="assessment"],
    .toolbar-menu-list li[data-action="standards"] {
        display:none;
    }
    
    .storyboard_holder {display: none;}
    
    .storyboard_holder.show {flex:1;}
    
    .page-editor .main {
        padding: 0;
    }
    
    .workspace_tools {
        width: 230px;
        margin: 5px 0px 0px 10px;
    }
    
    .workspace_tools .palette_tools {
        padding-bottom:5px;
    }
    
    .palette_button {
        width: 36px;
        height: 36px;
    }
    
    .palette_button svg {
        width: 24px;
        height: 24px;
    }
    
    .palette_button.edit{
        margin-left:0;
        width: 34px;
        height: 34px;
    }
    
    .palette_button.edit_colors{
        width: 100%;
    }
    
    .brush_sample canvas{
        width:100px;
    }
    
    .history-row.header.sprays {
        padding: 8px 0px;
    }
    
    .palette_options {
        margin: 0 0 0 5px;
        padding: 0 5px 0 0;
    }
    
    .palette_options.instructions.show, 
    .palette_options.instructions.setting_show {
        justify-content: flex-start;
    }
    
    #editor-text .palette_row {margin: 6px 0;}
    
    .palette_font_current {
        padding:5px;
    }
    
    .palette_button.tool-circle,
    .palette_button.tool-protractor,
    .palette_button.tool-ruler-in,
    .palette_button.tool-ruler-cm,
    .palette_button.marquee_rect,
    .palette_button.marquee_oval,
    .palette_button.marquee_lasso,
    .palette_button.marquee_wand,
    .palette_button.eraser_pencil,
    .palette_button.eraser_chalk,
    .palette_button.bold,
    .palette_button.italic,
    .palette_button.underline,
    .palette_button.highlight,
    .palette_button.align_left,
    .palette_button.align_center,
    .palette_button.align_right,
    .palette_button.align_justify,
    .palette_button.launch {
        width: 38px;
        height: 38px;
        background-size: 24px 24px;
    }
    
    .palette_button.launch {
        margin-left:0;
    }
    
    #shape_options_short_list, 
    #spray_options_short_list {min-width:unset;}
    
    .palette_button.shapes,
    #spray_options_short_list .subpanel_grid_option.spray{
        width: 32px;
        height: 32px;
    }
    
    #shape_options_short_list .palette_button svg{
        height: 20px;
        width: 20px;
    }
    
    #instructions_record_desc.palette_row.header {
        font-size:.8em;
    }
    
    .notools.noinstructions .workspace_tools {
        width:unset;
        min-width:unset;
    }
    
    .notools.noinstructions .palette_row.revert {
        border:0;
        padding-right:10px;
    }
    
    body.type-whiteboard.page-editor .toolbar_section.name,
    body.type-whiteboard.page-editor .toolbar_section.insert{
        flex:unset;
    } 
    
    body.type-whiteboard.page-editor .workspace_tools {
        margin: 0;
    }
    
    body.type-whiteboard.page-editor  .scrollbar {
        display:none!important;
    }
    
    body.type-whiteboard.page-editor  .palette_undo {
        top: unset;
        left:unset;
        bottom:10px;
        right:10px;
    }
    
    body.type-whiteboard.page-editor .palette_undo .toolbar_button {
        height: 38px;
        width: 38px;
    }
    
    body.type-whiteboard.page-editor  .palette_tools {
        right: 10px;
    }
    
    body.type-whiteboard.page-editor  .palette_options.show {
        right: 65px;
    }
    
    body.type-whiteboard.page-editor  .palette_undo.zoom {
        display:none;
    }
    
}

@media (min-aspect-ratio: 16/10) and (max-height:500px) and (min-width:950px) {
    .workspace_tools {
        width: 300px;
    }
}

@media (orientation:portrait) {
  /* Styles for Portrait screen */
  
    .main {
         flex-direction: column;
         padding: 0;
    }
    
    .stage {
        flex: 1;
        order: 1;
        margin: 10px;
        display: flex;
    }
    
    .canvas {
        height: auto;
        width: 96%;
    }
    
    .storyboard_holder {
        display: none;
        order:3;
    }
    
    .tiles {
        overflow-y: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-wrap: wrap;
        grid-template-columns:repeat(auto-fit, minmax(170px, 170px));
        grid-gap:15px;
        margin: 10px;
    }
    
    body.readonly:not(.player-view) .toolbar_section.view {
        display: none;
    }
    
    .toolbar_home {order:1;}
    .toolbar_section.name {order:2;}
    .toolbar_section.insert {order:3;position: relative;flex: 1;text-align: center;max-width: 80px;}
    .toolbar_section.activity {order:3;display: flex;justify-content: center;flex: 1;}
    .toolbar_section.team {order:4;flex: 1;text-align: center;max-width: 80px;}
    .toolbar_section.view {order:5;}
    .toolbar_section.google {order:6;}
    .toolbar_section.complete {order:6;}
    .toolbar_section.lti {order:7;margin: 0;text-align:right;}
    .toolbar_section.slideshow {order:8;max-width: 80px;flex: 1;justify-content: center;}
    .toolbar_section.undo {order:9;}
    .toolbar_account {order:10;}
    
    .toolbar_section.name {
        max-width:50%;
    }
    
    .toolbar_section.nav {
        z-index: 998;
        width: initial;
    }
    
    .toolbar_section.nav .toolbar_button {
        width: 40px;
        height:40px;
        background-color: rgba(255, 255, 255, 0.5);
        padding:0;
        justify-content: center;
        border-radius:50%;
        position: absolute;
        top: 46%;
        border:1px solid var(--middlegrey);
    }
    
    .toolbar_section.nav .toolbar_button.previous {left:-10px;}
    .toolbar_section.nav .toolbar_button.next {right:-10px;}
    
    .toolbar_section.nav .toolbar_button.previous svg,
    .toolbar_section.nav .toolbar_button.next svg {
        fill:var(--primary-text);
        margin-right:0;
    }
    
    .toolbar_section.nav .toolbar_button.previous span,
    .toolbar_section.nav .toolbar_button.next span {display: none}
    
    .toolbar_section.nav .toolbar_button.previous.disabled , 
    .toolbar_section.nav .toolbar_button.next.disabled { display: none;}
    
    .not-loggedin .toolbar_section.nav .toolbar_button.previous, 
    .not-loggedin .toolbar_section.nav .toolbar_button.next {top:50vh;}
    
    .toolbar_insert_button_holder{
        display:none;
        box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 20%);
    }
    
    .toolbar_insert_button_holder.show {
        display:block;
        z-index: 5000;
        position: absolute;
        top: 45px;
    }
    
    .toolbar_button.full {
        display:inline-flex;
    }
    
    .workspace_tools {
        order:2;
        flex: 1;
        margin-top: 5px;
        overflow: hidden;
    }
    
    .palette_options {
        padding: 0 15px 10px;
        margin:0;
    }
    
    .palette_background_color{
        margin-left: 20px;
    }
    
    .palette_symmetry_options {
        display: inline-block;
        margin-left: 40px;
        text-align: center;
        align-items: center;
    }
    
    .palette_undo {
        text-align: right;
        margin-top: auto;
    }
    
    .palette_undo.zoom .zoom_slider {
        margin-left:10px;
    }
    
    .palette_button.text.single,
    .palette_button.text.book {
        flex-direction:row;
    }
    
    .palette_undo.zoom .palette_label {
        margin-left:auto;
    }
    
    .subpanel_grid_option.shape {
        width: 72px;
        height: 72px;
        margin-right: 10px;
    }
    
    .subpanel_grid_option {
        display: inline-block;
        width: 62px;
    }
    
    .palette_header {
        user-select: none;
    }
    
    .teacher .palette_options.instructions.show,
    .teacher .palette_options.instructions.setting_show{
        display: block;
    }

    .palette_options.presentation select.anyFormField {
        width:100%;
    }
    
    .palette_options.presentation input.size_slider {
        margin:10px;
    }
    
    .palette_options.presentation label.palette_switch {
        margin-left:0;
    }
    
    body.android.teacher:not(.readonly) #editor-instructions {
        position: absolute;
        background-color: var(--lightgrey);
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        z-index: 4000;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
    }
    
    body.android.teacher:not(.readonly) #editor-instructions.show {
        display: flex;
        justify-content: flex-start;
    }
    
    body.android.teacher:not(.readonly) .palette_row.instructions_text {
        flex: .8;
    }
    
    body.android.teacher:not(.readonly) #instructions-back {
        display: block;
        position: absolute;
        bottom: 20px;
        right: 30px;
    }
    
    #editor-animation-options .path_sample {
        margin-left:10px;
    }
    
    #editor-animation-options button:not(#animation-back-button) {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    #editor-animation-options .palette_switch.right,
    #editor-animation-options .size_slider {
        margin-left:10px;
    }
    
    body.type-whiteboard .main .palette_undo.zoom {
        top: 10px;
        left: 38px;
        bottom: unset;
    }
    
}

@media (orientation:portrait) and (max-width: 380px)  {
    .palette_undo.zoom {
        display:none;
    }
}

@media (orientation:portrait) and (max-width: 598px)  {
    
    ul.toolbar-menu-list.show {
        left: -30px;
    }
    
    .toolbar-menu-list li[data-action="team"],
    .toolbar-menu-list li[data-action="show"] {
        display:flex;
    }
    
    #toolbar-edit-menu,
    li.rulers
    {display: none;}
    
    .toolbar .toolbar_home {
        width: 32px;
        height: 32px;
    }
    
    .toolbar_menu_item.filemenu svg{
        display:block;
        width: 26px;
        height: 26px;
        margin-left: 0;
    }
    
    .toolbar_project_name {flex:1; font-size:14pt;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .toolbar_menus {display: inline-block; height: 50px; width: 44px;margin-left: auto;}
    .not-loggedin .toolbar_menus {display: none;}
    .toolbar_menu_item {height: 50px;width: 44px;}
    body:not(.type-whiteboard).toolbar-menu-list {right:-15px;top: 46px;}
    
    .toolbar_menu_item.filemenu .toolbar_button_label{display: none;}
    
    #save-status {
        display:none;
    }
    
    .readonly .toolbar_section {
        width: unset;
    }
    
    header:not(.playing) .toolbar_section.team,
    header:not(.playing) .toolbar_section.slideshow {
        display:none;
    }
    
    .toolbar_section.name {
        display: flex;
        flex: 1;
        margin-left: 0;
        align-items:center;
        width: unset;
        margin-right: 0;
        max-width:unset;
    }
    
    .not-loggedin .toolbar_section.name {
        max-width:50%;
    }
    
    .toolbar_section.insert {
        margin-left:auto;
    }
    
    .toolbar_section.add,
    .toolbar_section.view {
        flex: none;
        display: inline-block;
    }
    
    .toolbar_section.view {
        margin-right: 5px;
    }
    
    .toolbar_insert_button_holder.show {
        top: 45px;
        right:0;
    }
    
    .toolbar_button {
        padding: 0;
        height: 50px;
        width: 44px;
        justify-content: center;
    }
    
    .toolbar_button.page.show,
    .toolbar_button.text.show,
    .toolbar_button.video.show,
    .toolbar_button.web.show,
    .toolbar_button.project.show,
    .toolbar_button.url.show,
    .toolbar_button.image.show,
    .toolbar_button.symbol.show,
    .toolbar_button.full.show,
    .toolbar_button.story.show,
    .toolbar_button.play.show
    {width:unset;}
    
    .toolbar_button.page.show svg,
    .toolbar_button.text.show svg,
    .toolbar_button.video.show svg,
    .toolbar_button.web.show svg,
    .toolbar_button.project.show svg,
    .toolbar_button.url.show svg,
    .toolbar_button.image.show svg,
    .toolbar_button.symbol.show svg,
    .toolbar_button.full.show svg,
    .toolbar_button.story.show svg,
    .toolbar_button.play.show svg
    {margin:0;}
    
    .toolbar_button.complete .toolbar_button_label{display: none;}
    
    .toolbar_button.play{
        padding: 0;
        margin: 3px 5px;
    }
    
    .toolbar_insert_button_holder_callout.show{
        right: 20px;
    }
    
    .loggedin .toolbar_button.play {display: none;}
    
    .toolbar_icon.previous {background-image:url(/images/themes/1/toolbar_nav_previous_black.svg);}
    .toolbar_icon.next {background-image:url(/images/themes/1/toolbar_nav_next_black.svg);}
    
    .tiles {
        grid-template-columns:repeat(auto-fit, minmax(108px, 1fr));
    }
    
    .canvas {
        margin: 10px auto;
    }
    
    .ipad .handle,
    .iphone .handle,
    .android .handle {
        height: 40px;
        width:40px;
        background-size: 24px 24px;
    }
    
    .size-slider {
        margin: 10px 10px 10px auto;
    }
    
    body #editor-instructions {
        position: absolute;
        background-color: var(--white);
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        z-index: 1999;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
    }
    
    body.notools #editor-instructions,
    body.pencilonly #editor-instructions,
    body.fillonly #editor-instructions,
    body.readonly #editor-instructions{
        position: unset;
        margin: 0;
        background: transparent;
    }
    
    #instructions_close {
        display: block;
        position: absolute;
        bottom: 20px;
        right: 30px;
    }
    
    button.primary.small-screen.instructions {
        display:block;
        position: absolute;
        bottom: 20px;
        right: 10px;
    }

    .readonly button.primary.small-screen.instructions,
    .pencilonly button.primary.small-screen.instructions,
    .notools button.primary.small-screen.instructions{
        display:none;
    }

    .palette_row.font {flex: none;}

    .stage {flex: .9;text-align: center;display: flex;}
    .toolbar_account {display: none;margin-right:5px}
    .workspace_tools {padding: 0; margin: 0;}
    
    .palette_tools {
        display: flex;
        overflow-y: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding: 8px 0;
        border-bottom: 1px solid var(--middlegrey);
        border-top: 1px solid var(--middlegrey);
        box-shadow: 0px 0px 3px var(--grey);
    }
    
    .palette_tools button.arrow { order:1;}
    .palette_tools button.mic { order:2;}
    .palette_tools button.brush { order:3;}
    .palette_tools button.marquee { order:9;}
    .palette_tools button.eraser { order:4;}
    .palette_tools button.shape { order:8;}
    .palette_tools button.spray { order:6;}
    .palette_tools button.fill { order:5;}
    .palette_tools button.smudge { order:7;}
    .palette_tools button.instructions { order:10;}
    
    .palette_tools button {
        margin:0 5px;
        min-width: 44px;
    }
    
    .editor_count_indicator.comments {left: 15px;}
    .palette_label {font-size: .9em;}
    
    .color_wheel {
        padding-bottom: 28%;
    }
    
    .color_lightness {
        height:30px;
    }
    
    .palette_row.revert {
        text-align:left;
        justify-content: flex-start;
        display:none;
    }
    
    button.secondary.with-icon.background {
        padding: 0;
        width: 36px;
        min-width: unset;
    }
    
    button.secondary.with-icon:not(.bsound) span {
        display: none;
    }
    
    button.secondary.with-icon.revert,
    button.secondary.with-icon.complete{
        margin-right:10px;
    }
    
    button.secondary.with-icon.revert span,
    button.secondary.with-icon.complete span{
        display: inline;
        margin-left:5px;
    }
    
    .brush_sample {
        height: 38px;
        box-sizing: border-box;
    }
    
    .palette_undo.zoom .zoom_slider {
        max-width:125px;
        margin-left:5px;
    }
    
    .palette_options button.secondary.with-icon svg {
        margin: 0;
    }
    
    .palette_options {
        padding: 0 10px;
    }
    
    .modal-footer.flex.container.flexrow {
        padding:10px;
    }
    
    .modal-footer.flex.container.flexrow button.primary {
        margin-left:10px;
    }
    
    .widget.assign {
        box-sizing: border-box;
        width: 100%;
    }
    
    .palette_row.filter .palette_buttons.four {
        margin-left:auto;
    }
    
    body.type-whiteboard .stage {
        flex:1;
    }
    
    body.type-whiteboard .scrollbar {
        display:none!important;
    }
    
    body.type-whiteboard.page-editor .palette_tools {
        left: 5px;
        top:5px;
        flex-direction: row;
        right: unset;
    }
    
    body.type-whiteboard.page-editor .palette_undo {
        right: 5px;
        top:5px;
        left:unset;
        flex-direction:row;
    }
    
    body.type-whiteboard.page-editor .palette_undo.zoom {
        display:none;
    }
    
    body.type-whiteboard.page-editor .palette_options.show {
        right: unset;
        left: 5px;
        top: 65px;
    }
    
    body.type-whiteboard.page-editor .holder_toggle_editors {
        order: 5;
        border-bottom: 0;
        padding: 0 0 0 5px;
        margin: 0 0 0 5px;
        border-left: 1px solid var(--middlegrey);
    }
    
    .pencilonly .palette_row.color,
    .fillonly .palette_row.color{
        grid-template-columns: repeat(12,1fr);
    }
    
    .palette_row.editor_options,
    .palette_row.editor_options.spray,
    .palette_row.grid.bubble {
        display: block;
        overflow-y:hidden;
        overflow-x:auto;
        -webkit-overflow-scrolling: touch;
        white-space:nowrap;
        margin-left: 0;
        width: 100%;
        flex: none;
        border:none;
    }
    
    #shape_options_long_list.palette_row.grid {
        margin-top:0;
        grid-template-columns: repeat(6, 1fr);
    }
    
    .palette_options.paintbrush.show {
        display:flex;
        flex-direction:column;
    }
    
    #editor-paintbrush .palette_row.flex.brushes {order:3;} 
    #editor-paintbrush .palette_row.color.paint {order:1;} 
    #editor-paintbrush .palette_row.flex.size {order:2;} 
    #editor-paintbrush .palette_row.flex.symmetry {order:4;} 
    
    .filters .palette_row.flex.shapes label {
        display:none;
    }
    
    .yammerz-holder {
        flex-direction: column;
    }
    
    .yammerz-editors {
        border-left: 0;
        max-width: unset;
    }
    
    .yammerz-toolbar.palette_tools {
        border-bottom:0;
        box-shadow:none;
    }
    
}

@media (orientation:portrait) and (min-width:599px) {
    
    .toolbar_button svg {
        height: 30px;
        width: 30px;
        margin-right: 0;
    }
    
    #toolbar-menu-item-show {
        display: none;
    }
    
    .stage {
        display: flex;
        flex: 1.4;
        position: relative;
        text-align:center;
    }
    
    .notools.noinstructions .stage {
        flex: 2.6;
    }
    
    .pencilonly .workspace_tools,
    .fillonly .workspace_tools{
        margin-top: 0;
    }
    
    .palette_tools {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border: 1px solid var(--middlegrey);
        align-items: center;
        height: 44px;
        margin: 0 15px;
        border-radius: 6px;
        box-shadow: 0px 0px 3px var(--grey);
    }
   
    .palette_button.edit,
    .palette_row.look button.edit {
        margin-left: 10px;
    }
    
    .palette_row.spacer {display:none;}

    .brush_sample {margin-left: 0;}
    .size_slider {margin: 10px;width: 66%;}
    #text_size_slider.size_slider {width: 53%;}
    .fill_color {margin-left: 10px;}

    .color_wheel {
        padding-bottom: 10%;
    }
    
    .palette_options {
        margin: 5px 15px;
        border-radius: 6px;
    }  
    
    body.readonly:not(.player-view) .palette_options.instructions.show {
        padding:0;
        display:flex;
    }
    
    .palette_options.instructions.show {
        position:relative;
    }
    
    .palette_options.instructions .instructions_label {
        grid-area: buttons;
        justify-content: flex-start;
    }
    
    .palette_options.instructions .instructions_label .header {
        order:1;
        margin:10px 0;
    }
    
    .palette_options.instructions .instructions_label .button {
        order:2;
        margin-left: 10px;
    }
    
    .palette_options .instructions-text {
        grid-area: instructions;
    }
    
    .palette_options .feedback-holder {
        grid-area: instructions;
        margin-bottom: 10px;
    }
    
    .palette_options .instructions-text .listen {
        margin: 0 0 8px 0;
        position: absolute;
        right: 20px;
        top: 15px;
    }
    
    .project_instructions_text {
        margin-bottom: 0;
    }
    
    #instructions_record_desc.palette_row.header {
        margin-top: 20px;
    }
    
    #editor-row-recording-panel .palette_row.only {
        margin: 10px 0 15px;
    }
    
    .toolbar_account {
        margin-left: 20px;
    }
    
    .palette_row.revert {
        padding: 10px 40px;
        justify-content: space-evenly;
    }
    
    #editor-paintbrush.palette_options.show,
    #editor-fill.palette_options.show,
    #editor-shape.palette_options.show,
    #editor-spray.palette_options.show{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 10px 30px;
        flex:unset;
    }
    
    #editor-shadow.palette_options.show{
        display: flex;
        flex-direction:row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    #editor-shadow .history-row,
    #editor-bubble .history-row{
        margin-bottom: 10px;
        width: 100%;
    }
    
    .palette_row.color{
        margin: 15px auto 0;
        width:100%;
        padding: 0;
        order: 3;
    }
    
    .color_options .palette_row.color{
        width:50%;
    }
    
    .palette_options .video-controls{
        margin: 15px auto;
        width:100%;
        padding: 0 0 10px;
        order: 3;
    }
    
    .paint_color.outline,
    .paint_color.advanced {
        height:unset;
    }
    
    .palette_buttons {
        flex:unset;
    }
    
    #editor-fill .palette_row.flex.fills {grid-column: 2;grid-row: 1;margin-top: 15px;} 
    #editor-fill .palette_row.color.fill {order:1;grid-column: 1;grid-row: 1 / 4;} 
    
    #editor-spray .palette_row.flex.spray_list {grid-column: 2;grid-row: 1;margin-top: 15px;} 
    #editor-spray .palette_row.color.spray {order:1;grid-column: 1;grid-row: 1 / 4;} 
    #editor-spray .palette_row.flex.size {order:3;grid-column: 2;grid-row: 2;}
    
    #editor-paintbrush .palette_row.flex.brushes {order:2;grid-column: 2;grid-row: 1;margin-top: 15px;} 
    #editor-paintbrush .palette_row.color.paint {order:1;grid-column: 1;grid-row: 1 / 4;} 
    #editor-paintbrush .palette_row.flex.size {order:3;grid-column: 2;grid-row: 2;} 
    #editor-paintbrush .palette_row.flex.symmetry {order:4;grid-column: 2;grid-row: 3;} 
    
    .palette_row.grid.shape,
    .palette_row.editor_options.spray {
        grid-template-columns: repeat(7, 1fr);
    }
    
    .subpanel_grid_option.spray {
        height: 44px;
        width: 44px;
    }
    
    .palette_buttons.five {
        grid-gap: 5px;
        margin-left: 5px;
    }
    
    #editor-text .palette_row.flex.linkurl,
    #editor-graphic .palette_row.flex.linkurl,
    #editor-graphic .palette_row.flex.wo-address,
    #editor-graphic .palette_row.flex.look.active {
        width:100%;
    }
    
    #editor-graphic .palette_row.flex.video {
        margin:0 auto;
        width:100%;
        padding:0 20px;
        box-sizing: border-box;
    }
    
    #editor-graphic .palette_row.flex.autoplay {
        width:48%;
        order:7;
    }
    
    #editor-graphic .palette_row.flex.autoplay .palette_switch.right{
        margin-left:20px;
    }
    
    .text_editing_options,
    .palette_options.graphics .graphic-options-holder {
        display:flex;
        flex-wrap:wrap;
        justify-content: space-between;
        flex-direction: row;
    }
    
    #editor-graphic .talkie-controls {
        width: 100%;
        display: flex;
        flex-wrap:wrap;
        justify-content: space-between;
    }
    
    #editor-graphic .talkie-controls .graphic_talkie_options{
        order:1;
        width:46%;
    }
    
    #editor-graphic .talkie-controls .graphic_talkie_preview{
        order:2;
        width:46%;
        justify-content: flex-end;
        padding-top: 0;
        border: none;
    }
    
    #editor-graphic .talkie-controls .graphic_talkie_details.text,
    #editor-graphic .talkie-controls .graphic_talkie_details.object,
    #editor-graphic .talkie-controls .graphic_talkie_details.recording,
    #editor-graphic .talkie-controls .graphic_talkie_details.file{
        order:3;
        width:100%;
    }

    
    #editor-graphic .talkie-controls .graphic_talkie_details.voices {
        order:4;
        display:flex;
        justify-content:space-between;
        width:100%;
    }
    
    #editor-graphic .talkie-controls .graphic_talkie_details.voices .graphic_talkie_voice,
    #editor-graphic .talkie-controls .graphic_talkie_details.voices .graphic_talkie_speed{
        width:46%;
    }
    
    #editor-graphic .palette_row.flex.look {
        width:100%;
    }
    
    #editor-graphic .talkie-controls select.anyFormField {
        width:280px;
    }
    
    #text_font.palette_row.flex {order:1;width:46%;}
    #text_color.palette_row.flex {order:3;}
    #text_size.palette_row.flex {order:2;width:46%;}
    #text_style.palette_row.flex {order:3;width:46%;border-bottom: none;}
    #text_align.palette_row.flex {order:4;}
    #text_shadow.palette_row.flex {order:4;width:46%;border-bottom:none;}
    #text_bubble.palette_row.flex {order:8;}
    #text_link.hyperlink {order:8;width:46%;}
    #text_animation.palette_row.flex {order:6;width:46%;}
    #text_shape.palette_row.shape {order:5;width:46%;border-top:none;}
    #palette_shape_fill_color.palette_row.flex {order:7;width:46%;}
    
    #graphic_size.palette_row.flex {
        order:1;
        width: 46%;
        border: 1px solid var(--middlegrey);
        margin: 5px 0;
        padding: 5px 0;
    }
    
    #graphic_rotate.palette_row.flex {
        order:2;
        width: 46%;
        border: 1px solid var(--middlegrey);
        margin: 5px 0;
        padding: 5px 0;
    }
    
    #graphic_link.palette_row.hyperlink {order:8;width:46%}
    #graphic-opacity.palette_row.flex {order:3;width:46%}
    #graphic_webobjects.wo-controls {order:3;}
    #graphic-hue.palette_row.flex {order:4;width:46%}
    #graphic_shadow.palette_row.flex {order:6;width:46%;border-bottom:none;padding-bottom:0;}
    #graphic_filter.palette_row.flex {order:5;width:46%;justify-content: space-between;}
    #graphic_shape.palette_row.flex {order:7;}
    #graphic_animation.palette_row.flex {order:8;width:46%}
    #graphic_crop.palette_row.flex {order:10;width:46%}
    
    .filters .palette_row input {order:3;}
    .filters .palette_row label.palette_switch {order:4;}
    .filters .palette_label.slider {
        position: unset;
    }
    
    .filters #graphic_shape .palette_buttons.crop_mask_list {
        flex: 1;
        overflow: unset;
    }
    
    .palette_row.flex.graphic_size .palette_buttons.three,
    .palette_row.flex.graphic_flip .palette_buttons.four {
        justify-content: space-around;
        display: flex;
        width: 100%;
    }
    
    #palette_bubble_stroke_width {order:2;}
    #palette_bubble_stroke_color {order:1;}
    #palette_bubble_fill_color {order:3;}
    
    #shape_list {order:1;grid-column: 2; grid-row: 1;}
    #shape_paint_colors {order:3;grid-column: 1;grid-row: 1 / 4;}
    #palette_stroke_width {order:2;grid-column: 2; grid-row: 2;}
    #shape_options{order:4;grid-column: 2; grid-row: 3;}
    
    #graphic_filter.palette_row.flex.hide,
    #graphic_shape.palette_row.flex.hide {
        display: none;
    }
    
    #editor-presentation.palette_options.subpanel.show {
        display:block;
    }
    
    #editor-presentation .palette_label {
        min-width:100px;
    }
    
    .palette_options.presentation .palette_row.advance{
        width:200px;
        display:inline-flex;
    }
    
    .palette_options.presentation .palette_row.transition,
    .palette_options.presentation .palette_row.loop,
    .palette_options.presentation .palette_row.speak {
        width:180px;
        display:inline-flex;
    }
    
    .palette_options.presentation .palette_row.playstyle,
    .palette_options.presentation .palette_row.timing {
        width:46%;
        display:inline-flex;
    }
    
    .palette_options.presentation .palette_row.speak .palette_label,
    .palette_options.presentation .palette_row.transition .palette_label,
    .palette_options.presentation .palette_row.loop .palette_label {
        text-align:right;
    }
    
    .palette_options.presentation .palette_row.timing label {
        display:none;
    }
    
    .palette_options.bubbleoptions .bubble-options {
        display: flex;
        flex-wrap: wrap;
    }
    
    .palette_row.flex.smudge,
    .palette_row.flex.eraser.size {
        width:fit-content;
    }
    
    .brush_sample,
    #shape_options_short_list,
    #spray_options_short_list{
        display: inline-block;
        vertical-align: middle;
    }
    
    #palette_symmetry .palette_label {
        margin-right: 25px;
    }
    
    .palette_text_field {width: 80%;}
    
    .palette_font_current{
        display: inline-block;
        vertical-align: middle;
        width: 48%;
    }
    
    .plain-angle-input{
        display: inline-block;
        vertical-align: middle;
        margin-left: 20px;
    }
    
    .palette_row.font {
        display: grid;
        grid-template-columns:1fr 1fr 1fr;
        grid-gap:0;
        background-color: transparent;
        border-left: 1px solid var(--middlegrey);
    }
    
    .font_option {
        border-right: 1px solid var(--middlegrey);
        background-color: var(--white);
    }
    
    .font_option:last-child {
        border-bottom: 1px solid var(--middlegrey);
    }
    
    body.type-whiteboard #editor-page.palette_options, 
    body.type-whiteboard #editor-text.palette_options, 
    body.type-whiteboard #editor-graphic.palette_options {
        margin-top: 0;
        padding: 0 8px 8px;
    }
    
    body.type-whiteboard #graphic-hue.palette_row.flex,
    body.type-whiteboard #graphic_shape.palette_row.flex,
    body.type-whiteboard #graphic_link.palette_row.hyperlink,
    body.type-whiteboard #text_font.palette_row.flex,
    body.type-whiteboard #text_style.palette_row.flex,
    body.type-whiteboard #text_size.palette_row.flex,
    body.type-whiteboard #text_shape.palette_row.shape,
    body.type-whiteboard #palette_shape_fill_color.palette_row.flex,
    body.type-whiteboard #text_link.hyperlink,
    body.type-whiteboard #editor-paintbrush .palette_row.flex, 
    body.type-whiteboard #editor-shape .palette_row.flex, 
    body.type-whiteboard #editor-shadow .palette_row.flex, 
    body.type-whiteboard #editor-bubble .palette_row.flex {
        width: unset;
        margin-left:0;
    }
    
    body.type-whiteboard .paint_color, 
    body.type-whiteboard .palette_button.edit_colors {
        height:unset;
    }
    
    

}

@media (orientation:landscape) {
  /* Styles for Landscape screen */
  
  #toolbar-menu-item-show {
        display: none;
    }
  
  .stage {
    flex:1;
    display: flex;
    flex-direction: column;
    text-align:right;
}
  
  .canvas {
    height: auto;
    width: 94%;
}
    
    .palette_tools {
        display: grid;
        grid-template-columns: repeat(5,1fr);
        padding-bottom: 6px;
        border-bottom: 1px solid var(--middlegrey);
        align-items: center;
        justify-items: center;
        grid-row-gap: 5px;
    }
    
    .palette_symmetry_options {
        display: block;
        margin: 20px 0;
        text-align: center;
        align-items: center;
    }
    
    #editor-text .animation {
        padding-top: 2px;
    }
    
    .ipad .palette_options {
        padding:0;
    }
    
    .ipad .palette_row.graphic_talkie_text_input textarea {
        min-height: 9em;
    }
    
}

@media (orientation:landscape) and (max-aspect-ratio:16/10) {
    
    .toolbar_home {order:1;}
    .toolbar_section.name {order:2;}
    .toolbar_section.insert {order:3;position: relative;flex: 1;text-align: center;}
    .toolbar_section.activity {order:3;display: flex;justify-content: center;flex: 1;}
    .toolbar_section.team {order:4;flex: 1;text-align: center;max-width: 200px;}
    .toolbar_section.view {order:5;}
    .toolbar_section.google {order:6;}
    .toolbar_section.complete {order:6;}
    .toolbar_section.lti {order:7;margin: 0;text-align:right;}
    .toolbar_section.slideshow {order:8;max-width: 200px;flex: 1;justify-content: center;}
    .toolbar_section.undo {order:9;}
    .toolbar_account {order:10;}
    
    .lti-li.teacher .toolbar_section.lti {order:3; flex:1; text-align: left;}
    .lti-li.teacher .toolbar_section.activity {order:4;}
    .lti-li.teacher .toolbar_section.insert {order:4;text-align:center;}
    
    .playing .toolbar_section.slideshow {order:8;max-width: unset; margin-left:auto;justify-content: flex-end;}
    
    .toolbar_section.nav{
        display: none;
    }
    
    .not-loggedin .toolbar_section.nav{
        display: block;
    }
    
    .toolbar_section.name {
        max-width:35%;
    }
    
    .toolbar_insert_button_holder{
        display:none;
        box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 20%);
    }
    
    .toolbar_insert_button_holder.show {
        display:block;
        z-index: 5000;
        position: absolute;
        top: 45px;
        border-radius: 10px;
        overflow: hidden;
    }
    .toolbar_insert_button_holder_callout.show {
        left:-50px;
    }
    
    body:not(.nostoryboard) .toolbar_button.page {
        display:none;
    }
    
    .toolbar_button.play {
        margin-right: 20px;
    }
    
    .toolbar_button.page.show {
        display: none;
    }
    
    .loggedin:not(.type-whiteboard) .main {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 120px;
        gap: 0px 0px;
        grid-template-areas:
            "Stage Stage Stage Editors"
            "Stage Stage Stage Editors"
            "Stage Stage Stage Editors"
            "Stage Stage Stage Editors"
            "Storyboard Storyboard Storyboard Storyboard";
        padding:0;
    }
    
    .loggedin.nostoryboard .main,
    .loggedin.notools.nostoryboard .main,
    .loggedin.pencilonly.nostoryboard .main,
    .loggedin.fillonly.nostoryboard .main{
        grid-template-areas:
            "Stage Stage Stage Editors"
            "Stage Stage Stage Editors"
            "Stage Stage Stage Editors"
            "Stage Stage Stage Editors"
            "Stage Stage Stage Editors";
    }
    
    .student.loggedin.notools.noinstructions .main,
    .loggedin.notools.noinstructions.lti-sg .main{
        grid-template-areas:
            "Stage Stage Stage Stage"
            "Stage Stage Stage Stage"
            "Stage Stage Stage Stage"
            "Stage Stage Stage Stage"
            "Storyboard Storyboard Storyboard Storyboard";
    }
    
    .student.loggedin.notools.nostoryboard.noinstructions .main,
    .loggedin.nostoryboard.lti-sg .main,
    .loggedin.notools.nostoryboard.lti-sg .main,
    .loggedin.pencilonly.nostoryboard.lti-sg .main,
    .loggedin.fillonly.nostoryboard.lti-sg .main{
        grid-template-areas:
            "Stage Stage Stage Stage"
            "Stage Stage Stage Stage"
            "Stage Stage Stage Stage"
            "Stage Stage Stage Stage"
            "Stage Stage Stage Stage";
    }
    
    .loggedin.lti-sg .main {
        grid-template-areas:
            "Stage Stage Stage Stage"
            "Stage Stage Stage Stage"
            "Stage Stage Stage Stage"
            "Stage Stage Stage Stage"
            "Storyboard Storyboard Storyboard Storyboard";
    }
    
    body.student.readonly.loggedin:not(.player-view) .main,
    body.teacher.student-project.readonly.loggedin:not(.player-view) .main{
        display:flex;
    }
    
    .stage {
        grid-area:Stage;
        margin:10px;
    }
    
    .workspace_tools {
        grid-area:Editors;
        border-left: 1px solid var(--middlegrey);
        padding-top: 6px;
    }
    
    .palette_tools {
        padding-bottom: 3px;
    }
    
    .palette_button.tool {
        height:40px;
        width:40px;
    }
    
    .palette_button.tool svg{
        height:28px;
        width:28px;
    }
    
    #shape_options_short_list .palette_button svg {
        height: 22px;
        width: 22px;
    }
    
    .palette_button {
        width: 36px;
        height: 36px;
        background-size: 26px 26px;
    }
    
    .palette_button.shape_fill svg {
        width: 18px;
        height: 18px;
    }
    
    .palette_button.shape_dashed svg {
        width: 26px;
        height: 26px;
    }
    
    .palette_buttons.crop_mask_list .palette_button {
        height:40px;
        width:40px;
        margin-right:5px;
    }
    
    .palette_buttons.crop_mask_list .palette_button img {
        height:28px;
        width:28px;
    }
    
    .palette_options {
        margin: 0 8px 0 8px;
        padding:0;
    }
    
    .palette_buttons.seven .palette_button {
        width: 35px;
        height: 35px;
        background-size: 26px 26px;
    }
    
    .palette_options.subpanel.fontoptions,
    .palette_options.subpanel.brushoptions{
        margin: 0;
        padding:0;
    }
    
    .palette_text_color, .palette_background_color {
        width: 55px;
    }
    
    .palette_button.edit {
        margin-left: 3px;
    }
    
    .palette_row.align .palette_buttons.eight {
        grid-gap:0;
    }
    
    .palette_row.align .palette_buttons.eight .palette_button {
        width: 30px;
        height: 30px;
    }
    
    .storyboard_holder {
        grid-area:Storyboard;
        border-top: 1px solid var(--middlegrey);
        display: flex;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
    }
    
    .toolbar_button.story {
        display: none;
    }
    
    .wixie_storyboard {
        order:2;
        height: 100%;
    }
    
    .tiles {
        overflow:auto;
        display: flex;
        height: 100%;
    }
    
    .tile {
        border: none;
        border-radius:0px;
        display: inline-flex;
        flex-direction:column;
        justify-content: center;
        align-items:center;
        padding: 0 10px;
        width: unset;
    }
    
    .tile.active {
        background-color: var(--primary-color-light);
        border:none;
    }
    
    .tile.deleted {
        background-color:darkgray;
    }
    
    .tile::after {
        content:attr(title);
        margin-top:4px;
        font-size:.8em;
    }
    
    .tile img {
        width: 90px;
        border:1px solid var(--middlegrey);
        height: 68px;
        object-fit: contain;
    }
    
    .tile img.portriat {
        width: 64px;
        border:1px solid var(--middlegrey);
        height: 88px;
        object-fit: contain;
    }
    
    .tattle .storyboard_new_holder {
        display:none;
    }
    
    .storyboard_new_holder {
        order:1;
        height:100%;
        display:flex;
        flex-direction:column;
    }
    
    .storyboard_new_page{
        display: block;
        border-right:1px solid var(--middlegrey);
        width:50px;
        flex:1;
    }
    
    .storyboard_new_page svg{
        width:36px;
        height:36px;
        fill:var(--primary-text);
    }
    
    .storyboard_new_page span{
        display:none;
    }
    
    .storyboard_new_page.blank{
        height: 36px;
        border-top: 1px solid var(--middlegrey);
        flex:unset;
    }
    
    .storyboard_new_page.blank svg{
        width:22px;
        height:22px;
    }
    
    body.nostoryboard .storyboard_holder {
        display:none;
    }
    
    /*Hide all tools and no instructions - revert button*/
    .notools.noinstructions .workspace_tools{
        min-width: unset;
        border: none;
        padding: 0;
    }
    
    .notools.noinstructions .palette_options.instructions {
        margin:0;
    }
    
    .notools.noinstructions button.revert {
        color: var(--white);
        position: absolute;
        top: 9px;
        left: 50%;
        transform: translate(-50%, 0);
        height: 32px;
        background: transparent;
        border: 1px solid var(--white);
        font-size: .9em;
    }
    
    .notools.noinstructions button.revert svg{
        fill: var(--white);
    }
    
    .nostoryboard .toolbar_section.nav {
        display:flex;
    }

    .nostoryboard .toolbar_button.previous,
    .nostoryboard .toolbar_button.next {
        position: absolute;
        z-index: 1000;
        border-radius:50%;
        padding:2px;
        border: 1px solid var(--black);
        background-color: var(--lightgrey);
    }
    
    .nostoryboard .toolbar_button.next {
        bottom: 0;
        left: 55%;
    }
    
    .nostoryboard .toolbar_button.previous {
        bottom: 0;
        left: 45%;
    }
    
    .nostoryboard .toolbar_button.previous.first,
    .nostoryboard .toolbar_button.next.last {
        display:none;
    }
    
    .nostoryboard .toolbar_button.previous svg,
    .nostoryboard .toolbar_button.next svg {
        height: 28px;
        width: 28px;
        fill: var(--primary-text);
        margin-right:0;
    }
    
    .nostoryboard .toolbar_button.previous span,
    .nostoryboard .toolbar_button.next span {
        display:none;
    }
    
    .toolbar_button.previous:hover, 
    .toolbar_button.previous:focus,
    .toolbar_button.next:hover, 
    .toolbar_button.next:focus{
        border: 1px solid var(--black);
        background-color: var(--lightgrey);
        outline: none;
    }
    
}

@media (orientation:landscape) and (max-aspect-ratio:16/10) and (max-width:725px) {
    .notools.noinstructions button.revert {
        left: 50%;
        transform: translate(-50%, 0);
    }
}

@media (orientation:landscape) and (min-width: 815px) and (max-width: 1200px) {
    
    .not-loggedin .toolbar_section.nav {
        display: block;
    }
    
    .toolbar_section.team,
    .toolbar_section.view{
        text-align:center;
    }
    
    .palette_row.color {
        grid-gap: 2px;
        grid-row-gap: 5px;
    }
    
    .paint_color.active, 
    .paint_color.active:focus {
        box-shadow: inset 0 0 0 5px var(--primary-color);
        outline:none;
    }
    
    .color_lightness {
        height: 30px;
    }
    
    .palette_brush_option {
        width: 90%;
        margin-bottom: 5px;
    }
    
    .palette_row.flex.size {
        margin: 10px 0;
    }
    
    .palette_row.measuring-tools label {
        margin-right:10px;
    }
    
    .palette_row.measuring-tools button {
        width: 36px;
        height: 36px;
        background-size: 28px 28px;
        padding:0;
    }
    
    #shape_list .palette_label,
    #spray_options .palette_label {
        display: none;
    }
    
    .palette_row.grid.shape {
        grid-template-columns: repeat(4,1fr);
        grid-gap: 6px;
    }
    
    .palette_row.grid.shape .palette_button svg {
        height: 20px;
        width: 20px;
    }
    
    .modal-content.show.backgroundImage,
    .modal-content.show.backgroundSound{
        width: 80%;
    }
    
    .subpanel_grid_option.spray {
        height: 50px;
        width: 50px;
    }
    
    .palette_row.editor_options svg {
        height: 60px;
        width: 60px;
        margin: 0;
    }
    
    .history-row.header.sprays .palette_button {
        width:32px;
        height: 32px;
        background-size: 24px 24px;
    }
    
}

@media (min-aspect-ratio: 16/10) and (min-height:501px) {
    
    .toolbar_section.activity {
        flex:1;
        order:3;
        justify-content: center;
        display: flex;
    }
    
    .toolbar_section.nav {
        display: none;
    }
    
    .not-loggedin .toolbar_section.nav {
        display: block;
    }
    
    .toolbar_button:hover,
    .toolbar_button:focus{
        background-color: var(--primary-green);
        outline: none;
    }
    
    .toolbar_button.complete:hover,
    .toolbar_button.complete:focus{
        border: 1px solid transparent;
    }
    
    .admin .toolbar_button:hover,
    .admin .toolbar_button:focus{
        background-color: var(--primary-green-dark);
    }
    
    .toolbar_button.add,
    .toolbar_button.story
    {display:none;}
    
    .main {
        padding:0;
    }
    
    .storyboard_holder{
        order:1;
        flex:unset;
        border-right: 1px solid var(--middlegrey);
        display: flex;
        flex-direction: column;
        width: 172px;
    }
    
    .stage {
        order:2;
        margin:10px;
    }
    
    .workspace_tools {
        order:3;
        width: 320px;
        padding:10px 0 0 0;
        margin:0;
        border-left:1px solid var(--middlegrey);
    }
    
    .notools.noinstructions .workspace_tools {
        border: none;
        width: unset;
        min-width: unset;
    }
    
    .teacher.notools.noinstructions .workspace_tools {
        max-width:300px;
    }
    
    .toolbar_home {order:1;}
    .toolbar_section.name {order:2;max-width: 30%;}
    .toolbar_section.insert {order:3;}
    .toolbar_section.undo {order:10;flex: 1;justify-content: flex-end;max-width: 150px;}
    .toolbar_section.team {order:4;}
    .toolbar_section.view {order:5;}
    .toolbar_section.google {order:6;}
    .toolbar_section.complete {order:7;margin: 0 10px 0 auto;}
    .toolbar_section.lti {order:8;}
    .toolbar_section.slideshow {order:9;}
    .toolbar_account {order:11;}
    
    .toolbar_section.insert,
    .toolbar_section.google,
    .toolbar_section.lti,
    .toolbar_section.team{
        margin:0 auto;
    }
    
    .toolbar_section.team{
        margin:0 auto;
        text-align: center;
        flex: 1;
    }
    
    .toolbar_section.lti {
        text-align: right;
    }   
    
    .toolbar_section.view{
        display:none
    }
    
    .toolbar_section.insert button {
        min-width:105px;
    }
    
    body:not(.nostoryboard) .toolbar_button.page {
        display: none;
    }
    
    .storyboard_holder .tiles {
        display:flex;
        flex-direction:column;
    }
    
    .tile {
        border: none;
        display: inline-flex;
        flex-direction: row;
        align-items: initial;
        justify-content: flex-end;
        padding: 8px 8px 8px 4px;       
    }
    
    .tile.active {
        background-color: var(--primary-color-light);
    }
    
    .deleted:first-child, :not(.deleted) + .deleted {
        border-top:1px solid var(--grey);
        margin-top:5px;
    }
    
    .tile::before {
        content:attr(title);
        margin-right:4px;
        font-size:.9em;
        pointer-events:none;
    }
    
    .tile::after {
        content:"";
        margin-top:0;
        pointer-events:none;
    }
    
    .tile img {
        width: 124px;
        border:1px solid var(--middlegrey);
        box-sizing: border-box;
        pointer-events:none;
        height: 94px;
        object-fit: contain;
    }
    
    .tile img.portriat {
        width: unset;
        aspect-ratio: 3 / 4;
        margin: 0 auto;
    }
    
    .tattle .storyboard_new_holder {
        display:none;
    }
    
    .storyboard_new_holder {
        width:100%;
        display:flex;
    }
    
    .storyboard_new_page{
        display: flex;
        align-items: center;
        justify-content: center;
        border-top:1px solid var(--middlegrey);
        flex:1;
        height:46px;
    }
    
    .storyboard_new_page:hover,
    .storyboard_new_page:focus {
        outline:none;
        background-color: var(--middlegrey);
    }
    
    .storyboard_new_page svg{
        width:30px;
        height:30px;
        fill:var(--primary-text);
    }
    
    .storyboard_new_page span{
        position: relative;
        top: 1px;
        margin-left: 3px;
        color: var(--primary-text);
    }
    
    .storyboard_new_page.blank{
        width: 36px;
        border-left: 1px solid var(--middlegrey);
        flex:unset;
    }
    
    .storyboard_new_page.blank svg{
        width:22px;
        height:22px;
    }
    
    .toolbar_button.play {
        margin-left: auto;
        margin-right: 20px;
    }
    
    .notools.noinstructions button.revert {
        color: var(--white);
        position: absolute;
        top: 9px;
        left: 50%;
        transform: translate(-50%, 0);
        height: 32px;
        background: transparent;
        border: 1px solid var(--white);
        font-size: .9em;
    }
    
    .notools.noinstructions button.revert svg{
        fill: var(--white);
    }
    
    .nostoryboard .toolbar_section.nav {
        display:flex;
    }

    .nostoryboard .toolbar_button.previous,
    .nostoryboard .toolbar_button.next {
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
        z-index: 1000;
        border-radius:50%;
        padding:2px;
    }
    
    .nostoryboard .toolbar_button.previous.first,
    .nostoryboard .toolbar_button.next.last {
        display:none;
    }
    
    .nostoryboard .toolbar_button.previous {
        left: 10px;
    }
    
    .nostoryboard .toolbar_button.next {
        right: 10px;
    }
    
    .nostoryboard .toolbar_button.previous svg,
    .nostoryboard .toolbar_button.next svg {
        height: 28px;
        width: 28px;
        fill: var(--primary-text);
        margin-right:0;
    }
    
    .nostoryboard .toolbar_button.previous span,
    .nostoryboard .toolbar_button.next span {
        display:none;
    }
    
    body.nostoryboard .storyboard_holder {
        display:none;
    }
    
    .toolbar_button.previous:hover, 
    .toolbar_button.previous:focus,
    .toolbar_button.next:hover, 
    .toolbar_button.next:focus{
        border: 1px solid var(--black);
        background-color: var(--lightgrey);
        outline: none;
    }
    
}

@media (min-aspect-ratio: 16/10) and (min-height:501px) and (max-width:1150px) {
    .workspace_tools {
        width:280px;
    }
}

/*Android CSS Portrait*/
@media (max-device-aspect-ratio: 1/1) and (orientation:landscape) {
    
    body.android.page-editor {
        flex-direction:column;
    }
    
    .android.page-editor .main{
        display:flex;
        flex-direction:column;
    }
    
    .android.page-editor .storyboard_holder{
        display: none;
    }
    
    .android .toolbar, 
    .android.admin .toolbar {
        height: 50px;
        flex-direction: row;
        width: 100%;
    }
    
    .android.page-editor .toolbar_home{
        order: unset;
        margin: 0 0 0 10px;
    }
    
    .android.page-editor .toolbar_section.name {
        margin-left: 10px;
        height:unset;
        max-width: 40%;
        flex: 1.5;
        margin-right: 20px;
    }
    
    .android.page-editor .toolbar_section.insert,
    .android.page-editor .toolbar_section.team,
    .android.page-editor .toolbar_section.view {
        margin: 0 0 0 20px;
    }
    
    .android .toolbar_project_name,
    .android .toolbar_account,
    .android .toolbar_menu_item.filemenu .toolbar_button_label{
        display:block;
    }
    
    .android .toolbar_menu_item {
        height:20px;
    }
    
    .android #toolbar-edit-menu {
        display: inline-block;
    }
    
    .android .toolbar_menu_item.filemenu svg {
        display:none;
    }
    
    .android .toolbar_section.insert {
        margin: 0;
        flex:unset;
    }
    
    .android.page-editor .toolbar_section.slideshow {
       margin: 0 0 0 20px;
       width:unset;
    }
    
    .android .toolbar_button {
        height: unset;
        padding: 2px 10px;
        width: 48px;
    }
    
    .android .toolbar_account {
        margin:0 20px;
        order:20;
    }
    
    .android .main:not(.input-focus) .workspace_tools {
        display: none;
    }
    
    .android .main.input-focus .stage,
    .android .main.input-focus .palette_tools,
    .android .main.input-focus .palette_undo,
    .android .main.input-focus .palette_row:not(.hyperlink):not(.instructions_text){
        display: none;
    }
    
    .android .main.input-focus .workspace_tools {
        width:unset;
    }
    
    body.android:not(.readonly) #editor-instructions {
        position: absolute;
        background-color: var(--lightgrey);
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        z-index: 4000;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
    }
    
    .android #instructions_close {
        display: block;
        position: absolute;
        bottom: 20px;
        right: 30px;
    }
    
    body.android.teacher:not(.readonly) #editor-instructions {
        position: absolute;
        background-color: var(--lightgrey);
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        z-index: 4000;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
    }
    
    body.android.teacher:not(.readonly) #editor-instructions.show {
        display: flex;
        justify-content: flex-start;
    }
    
    body.android.teacher:not(.readonly) .palette_row.instructions_text {
        flex: .8;
    }
    
    body.android.teacher:not(.readonly) #instructions-back {
        display: block;
        position: absolute;
        bottom: 20px;
        right: 30px;
    }
    
}

.show {
    display:block;
}

/** Presentation Styles **/

.main.playing {
    display:block!important;
    width: 100%;
    height: 100%;
    padding: 10px!important;
    box-sizing: border-box;
}

.main.playing .control_bar {
    position: unset;
    background-color: transparent;
    border: none;
    box-shadow: none;
    height: 0px;
    width: 0px;
}

.main.playing .control_button.fullscreen_button {
    display:none;
}

.main.playing .control_button, .tattle .control_button {
    position: absolute;
    border: 2px solid var(--black);
    border-radius: 50%;
    background-color: #ffffff90;
}
.tattle .control_button {
    position: unset;
}

.main.playing .control_button.next_button {
    right:1%;
    top: 50%;
    transform: translate(0, -50%);
}

.main.playing .control_button.prev_button {
    left:1%;
    top: 50%;
    transform: translate(0, -50%);
}

.main.playing .control_button.prev_button.disabled, 
.main.playing .control_button.next_button.disabled {
    display:none;
}

.main.playing .control_button.play_button,
.main.playing .control_button.play_page_button,
.main.playing .control_button.pause_button{
    left:50%;
    bottom: 1%;
    transform: translate(-50%, 0);
}

.main.playing .control_button.fullscreenexit_button{
    left:50%;
    bottom: 1%;
    transform: translate(-70px, 0);
}

/** End Presentation Styles **/

/** Text object Character Map **/

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

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

.characterMapHeader button:last-of-type {
    margin-left: auto;
}

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

button.cmEmojis {
    background-image:url(/images/themes/1/charmap_emojis.svg);
}
button.cmMaths {
    background-image:url(/images/themes/1/charmap_maths.svg);
}
button.cmCharacters {
    background-image:url(/images/themes/1/charmap_characters.svg);
}
button.cmSymbols {
    background-image:url(/images/themes/1/charmap_symbols.svg);
}
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);
    column-gap: 0;
    row-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;
    float: left;
    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;
}

.characterMapKey:hover,
.cmEmojis .characterMapKey:hover {
    background: var(--middlegrey);
}

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

/** End Text object Character Map **/

/** Whiteboarding **/

body.type-whiteboard .toolbar_section.view {
    display:none;
}

.toolbar_project_name {
    order:2;
}

.toolbar_menus {
    display: inline-block;
    height: 50px;
    width: 44px;
    margin-left: auto;
}

.toolbar_menu_item {
    height: 38px;
    width: 38px;
    border-radius: 50%;
    position: relative;
    top: 6px;
    margin-left: 3px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.toolbar_menu_item.filemenu svg {
    display: block;
    width: 26px;
    height: 26px;
}

.toolbar_menu_item.filemenu .toolbar_button_label,
body.type-whiteboard .toolbar-menu.editmenu{
    display: none;
}

body.type-whiteboard .toolbar_button.page {
    display: none;
}

body.type-whiteboard #save-status {
    display:none;
}

body.type-whiteboard .main {
    position:relative;
    padding:0;
}

body.type-whiteboard .stage {
    margin: 2px;
}

body.type-whiteboard .wixie_canvas {
    height:100%;
    width:100%;
    transform: none !important;
    box-shadow:none;
}

body.type-whiteboard .scrollbar.horizontal {
    top: -20px;
}

body.type-whiteboard .scrollbar.vertical {
    left: -10px;
}

body.type-whiteboard nav {
    min-width:unset;
    width:unset;
    border:none;
    padding:0;
    z-index:1000;
    flex: unset;
    margin-top: 0;
}

body.type-whiteboard .palette_tools {
    background:var(--white);
    border:1px solid var(--middlegrey);
    border-radius:4px;
    display:flex;
    flex-direction:column;
    padding:6px;
    position:absolute;
    top: 10px;
    right: 40px;
    height: unset;
}

body.type-whiteboard #editor-page-button {
    order: 1;
}
body.type-whiteboard #editor-pan-button {
    order: 2;
}
body.type-whiteboard #editor-paintbrush-button {
    order: 4;
    display:none;
}
body.type-whiteboard #editor-shape-button {
    order: 3;
    display:none;
}

body.type-whiteboard #editor-instructions-button {
    order: 5;
    grid-column: 5;
}

body.type-whiteboard .holder_toggle_editors {
    order: 0;
    grid-column: 0;
    border-bottom:1px solid var(--middlegrey);
    padding-bottom:5px;
    margin-bottom: 5px;
}

body.type-whiteboard .palette_options.show {
    display:none;
    position: absolute;
    right: 100px;
    top: 10px;
    width: 275px;
    max-height: 90%;
    box-sizing: border-box;
    padding: 0 8px 8px;
    background: var(--white);
    border: 1px solid var(--middlegrey);
    border-radius: 4px;
}

body.type-whiteboard .palette_row.graphic_size {
    display:none;
}

body.type-whiteboard nav.showeditor .palette_options.show {
    display:block;
}

body.type-whiteboard nav.showeditor .palette_options.bubbleoptions.show {
    display:flex;
}

body.type-whiteboard .text_editing_options {
    display:flex;
    flex-direction:column;
}

body.type-whiteboard .palette_options.editor_text .font_style {
    order: 6;
    border-top:1px solid var(--middlegrey);
    padding: 10px 0;
    margin:5px 0 0;
}

body.type-whiteboard .palette_options.editor_text .font_choice {
    order: 3;
    border-top:1px solid var(--middlegrey);
    padding-top:14px;
}

body.type-whiteboard .palette_options.editor_text .font_size {
    order: 4;
    margin-top:0;
}

body.type-whiteboard .palette_options.editor_text .palette_row.shape {
    order: 1;
    border-top:0;
    padding-top: 0;
}

body.type-whiteboard .palette_options.editor_text .shape-fill {
    order: 2;
}

body.type-whiteboard #editor-text.palette_options.editor_text .hyperlink {
    border-top:0;
    order: 7;
    margin:5px 0 0;
}

body.type-whiteboard .palette_label {
    margin-left:5px;
}

body.type-whiteboard .palette_background_color {
    margin-left: auto;
}

body.type-whiteboard .shapes .palette_label, 
body.type-whiteboard .filter .palette_label, 
body.type-whiteboard .shape_list .palette_label {
    display:none;
}

body.type-whiteboard .palette_row.color {
    grid-template-columns: repeat(6, 1fr);
}

body.type-whiteboard .palette_row.color .skin3,
body.type-whiteboard .palette_row.color .skin2 {
    display:none;
}

body.type-whiteboard .paint_color.red {order:1;}
body.type-whiteboard .paint_color.orange {order:2;}
body.type-whiteboard .paint_color.yellow {order:3;}
body.type-whiteboard .paint_color.green {order:4;}
body.type-whiteboard .paint_color.indigo {order:5;}
body.type-whiteboard .paint_color.blue {order:6;}
body.type-whiteboard .paint_color.violet {order:7;}
body.type-whiteboard .paint_color.skin1 {order:8;}
body.type-whiteboard .paint_color.skin2 {order:9;}
body.type-whiteboard .paint_color.skin3 {order:10;}
body.type-whiteboard .paint_color.lavender {order:12;}
body.type-whiteboard .paint_color.pink {order:13;}
body.type-whiteboard .paint_color.white {order:14;}
body.type-whiteboard .paint_color.grey {order:15;}
body.type-whiteboard .paint_color.black {order:16;}
body.type-whiteboard .paint_color.advanced {order:17;}
body.type-whiteboard .palette_button.edit_colors {order:18;}

body.type-whiteboard .paint_color.grey2 {display:none};

body.type-whiteboard .palette_options.instructions .editor-button {
    width: 34px;
    padding: 0;
    justify-content: center;
    align-items: center;
}

body.type-whiteboard .palette_options.instructions .editor-button span{
    display:none;
}

body.type-whiteboard .palette_options.instructions .editor-button svg{
    margin-right:0;
}

body.type-whiteboard .palette_options.instructions .editor-button.play svg{
    position: relative;
    left: 1px;
}

body.type-whiteboard .palette_undo {
    flex-direction:column;
    position: absolute;
    left: 10px;
    top:10px;
    z-index:1001;
    border:1px solid var(--middlegrey);
    border-radius:4px;
    background:var(--white);
    width: fit-content;
    height:unset;
}

body.type-whiteboard .palette_undo .toolbar_button {
    margin: 5px;
    border-radius:50%;
}

body.type-whiteboard .palette_undo .toolbar_button:hover,
body.type-whiteboard .palette_undo .toolbar_button:focus{
    border:1px solid var(--middlegrey);
    background: var(--lightgrey);
}

body.type-whiteboard .palette_switch.scale-switch {
    margin: 0px 0px 5px;
}

body.type-whiteboard .palette_undo.zoom label {
    display:none;
}

body.type-whiteboard .palette_undo.zoom {
    top: 10px;
    width:58px;
    align-items:center;
}

body.type-whiteboard.not-loggedin .palette_undo.zoom {
    top: 10px;
}

body.type-whiteboard.ipad .palette_undo.zoom 
body.type-whiteboard.iphone .palette_undo.zoom 
body.type-whiteboard.android .palette_undo.zoom 
body.type-whiteboard.embedded .palette_undo.zoom {
    top: 185px;
    display:none;
}

body.type-whiteboard .palette_label.scale-switch {
    margin-top: 5px;
    margin-bottom: 5px;
}

body.type-whiteboard .palette_undo.zoom .palette_button.zoom_icon {
    display:inline-flex;
}

body.type-whiteboard .palette_undo.zoom .palette_button.zoom_icon:hover {
    background:transparent;
    border:0;
}

body.type-whiteboard:not(.safari) .palette_undo.zoom input.zoom_slider {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 14px;
    vertical-align: bottom;
    height: unset;
    margin: 0 auto 10px;
    position: initial;
}

body.type-whiteboard.ipad .palette_undo.zoom,
body.type-whiteboard.iphone .palette_undo.zoom,
body.type-whiteboard.android .palette_undo.zoom {
    top: 190px;
    width: 63px;
    display:none;
}

body.type-whiteboard.safari .palette_undo.zoom {
    top: 200px;
    left: -56px;
    width: fit-content;
    height: 58px;
    flex-direction: row-reverse;
    align-items: center;
    transform: rotate(-90deg);
}

body.type-whiteboard.safari .palette_undo.zoom .palette_button.zoom_icon {
    transform: rotate(90deg);
}

body.type-whiteboard .palette_row.background button.background {
    display:none;
}

body.type-whiteboard .palette_row.slideshow {
    display:none;
}

body.type-whiteboard .palette_row.measuring-tools .palette_label{
    display:none;
}

body:not(.type-whiteboard) .palette_row.measuring-tools .tool-grid {
    display:none;
}

body.type-whiteboard #bubble_list svg {
    order: 7;
}

body.type-whiteboard .font_style .palette_buttons.seven {
    grid-gap: 2px;
}

body.type-whiteboard .font_style .palette_buttons.seven .palette_button {
    width: 100%;
    height: 100%;
}

body.type-whiteboard .font_style .palette_buttons.seven .palette_button svg {
    width: 80%;
    max-height: 26px;
}
    
body.type-whiteboard .shape .palette_buttons.six {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 44px 0 0;
    grid-row-gap: 30px;
    overflow: hidden;
    height: 40px;
}

body.type-whiteboard .editor_text .palette_row.shape svg.wxc {
    order: 6;
}

body.type-whiteboard .editor_text .palette_row.shape svg[data-type="rectangle_none"]{
    order : 2;
}

body.type-whiteboard .editor_text .palette_row.shape svg[data-type="ellipse_none"] {
    order : 3;
}

body.type-whiteboard .editor_text .palette_row.shape svg[data-type="diamond_none"]{
    order : 4;
}

body.type-whiteboard .editor_text .palette_row.shape svg[data-type="parallelogram_none"]{
    order : 7;
}

body.type-whiteboard .editor_text .palette_row.shape svg[data-type="bubble_none"]{
    order : 1;
}

body.type-whiteboard .bubble svg[data-type="rectangle_straight"]{
    display: none;
}

body.type-whiteboard .bubble svg[data-type="bubble_default"]{
    display: none;
}

body.type-whiteboard .bubble svg[data-type="rectangle_arrow"]{
    display: none;
}

body.type-whiteboard .bubble svg[data-type="rectangle_straight_unequal"]{
    display: none;
}

body.type-whiteboard .bubble svg[data-type="roundrect_straight_unequal"]{
    display: none;
}

body.type-whiteboard .bubble svg[data-type="ellipse_curved_unequal"]{
    display: none;
}

body.type-whiteboard .bubble svg[data-type="spike_straight"]{
    display: none;
}

body.type-whiteboard .bubble svg[data-type="ellipse_straight"]{
    display: none;
}

body.type-whiteboard .bubble svg[data-type="ellipse_curved"]{
    display: none;
}
body.type-whiteboard .editor_text .palette_row.shape svg.wxm {display:none;}
body.type-whiteboard .editor_text .palette_row.shape svg.wbm {display:inline-flex;}

body.type-whiteboard .palette_row.flex.linkto {
    display:none;
}

body.type-whiteboard .palette_row.grid.shape {
    grid-template-columns: repeat(4, 1fr);
}

body.type-whiteboard .palette_row.align {
    margin-bottom: 0;
}

body.type-whiteboard .palette_buttons.eight .palette_button {
    width: 26px;
    height: 26px;
}

body.type-whiteboard .palette_buttons.eight .palette_button svg{
    width: 18px;
    height: 18px;
}

body.type-whiteboard .projectSettings .project-settings-menu button.newpages,
body.type-whiteboard .projectSettings .project-settings-options .projectopens,
body.type-whiteboard .projectSettings .project-settings-options .nowhiteboard {
    display:none;
}

body.type-whiteboard .widget.project-settings-options div.modal-section-row .flex-container {
    max-width: unset;
}

body.type-whiteboard .connectionDiv {
    position:absolute;
    pointer-events:none;
}

body.type-whiteboard .connectionLabel {
    position:absolute;
    pointer-events:none;
    background-color:white;
    text-align:center;
    min-width:100px;
}

/** End Whiteboarding **/