@font-face {
    font-family: nunito;
    src: url(/librsc/css/fonts/Nunito/Nunito-Regular.ttf);
    font-style: normal;
}

@font-face {
    font-family: nunito;
    src: url(/librsc/css/fonts/Nunito/Nunito-Bold.ttf);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: nunito;
    src: url(/librsc/css/fonts/Nunito/Nunito-Italic.ttf);
    font-style: italic;
}

@font-face {
    font-family: nunito;
    src: url(/librsc/css/fonts/Nunito/Nunito-Bold-Italic.ttf);
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: inter;
    src: url('/librsc/css/fonts/Inter/Inter-VariableFont_slnt_wght.ttf') format('truetype');
    font-weight: 100 900;
}

:root {
    font-family: nunito;
    font-weight: 360;
    --active-green: #07ad86;
    --placement-bg: white;
    --placement-text: #333;
    --page-background: #ffffff;
    --old-navy: #DDDFD6;
    --header-col: rgb(102 102 102);
    /*formerly 3C4950*/
    --ptask-col: #ffffff;
    /* formerly  #eff1ff*/
    --budget-child-placements: #507799;
    --standards-background: #0d3d81;
    --topics-background: #286ebd;
    --ccs-background: #5397e4;
    --compfams-background: #000a0a;
    --comment-avatar-1: #dceafa;
    --comment-initial-1: #5b83b3;
    --comment-avatar-2: #fff4ad;
    --comment-initial-2: #9e8900;
    --comment-avatar-3: #ffecd6;
    --comment-initial-3: #b07c40;
    --comment-avatar-new: #dcf5e6;
    --comment-initial-new: #36965c;
    --minimal-std-color: #0d3d81;
    --minimal-topic-color: #3478c8;
    --minimal-cc-color: #3589e8;
    --minimal-compfam-color: #1f1f1f;
    --skills-h: 181;
    --skills-s: 94%;
    --skills-l: 26%;
    --skills: hsl(var(--skills-h), var(--skills-s), var(--skills-l));
    --skills-background: hsl(var(--skills-h), calc(var(--skills-s)/2.7), calc(var(--skills-l)*3.2));
    --character-h: 39;
    --character-s: 100%;
    --character-l: 37%;
    --character: hsl(var(--character-h), var(--character-s), var(--character-l));
    --character-background: hsl(var(--character-h), calc(var(--character-s)/1.3), calc(var(--character-l)*2.45));
    --meta-learning-h: 264;
    --meta-learning-s: 40%;
    --meta-learning-l: 61%;
    --meta-learning: hsl(var(--meta-learning-h), var(--meta-learning-s), var(--meta-learning-l));
    --meta-learning-background: hsl(var(--meta-learning-h), calc(var(--meta-learning-s)/1.3), calc(var(--meta-learning-l)*1.4));
}

grabbable- {
    --placement-bg: white;
    --placement-text: #333;
    --page-background: #f5f5f5;
    --old-navy: #DDDFD6;
    --header-col: rgb(102 102 102);
    /*formerly 3C4950*/
    --ptask-col: #ffffff;
    /* formerly  #eff1ff*/
    --budget-child-placements: #507799;
    --standards-background: #0d3d81;
    --topics-background: #286ebd;
    --ccs-background: #5397e4;
    --compfams-background: #000a0a;
}

* {
    box-sizing: border-box;
}

strong {
    font-weight: bold !important;
}

h3 {
    font-weight: bold;
}

html {
    overflow: hidden;
    scroll-behavior: smooth;
}

html,
body {
    background-color: var(--page-background);
    /*font-size: 0.95em;*/
}

#resize-handle {
    width: 10px;
    padding: 0;
    cursor: ew-resize;
    flex: 0 0 auto;
    box-shadow: 3px 0px 8px -4px #2b2b2b inset, -18px 0px 6px -18px #2b2b2b inset;
}

#splitbody {
    display: flex;
    height: 100%;
}

body {
    padding: 0px;
    margin: 0px;
    /*display: grid;
grid-template-rows: 4em minmax(0px, 1fr);*/
    position: fixed;
    top: 0;
    grid-template-rows: [header] 5em [content] 1fr;
    bottom: 0;
    display: grid;
    height: 100%;
    left: 0;
    max-width: 100vw;
    min-height: 100vh;
    background: #f1f1f1;
    /* max-width: 83vw; */
    right: 0;
}

b {
    font-weight: bold !important;
}

.splitbox {
    margin: 0px;
    padding: 8px 0px 8px 8px;
    min-width: 20em;
    flex: 1 1 auto;
    display: grid;
}

#outer-body {
    display: grid;
    grid-template-rows: min-content minmax(0, 1fr);
    grid-template-columns: 100%;
    /*height: calc(100vh - 16px);
height: min-content;*/
    max-height: 100vh;
    padding: 0px;
    flex-grow: 1;
    overflow: auto;
}

#inner-body {
    grid-row: 2;
    /*min-height: 100vh;*/
    max-height: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    align-content: stretch;
    flex-grow: 1;
    /* align-self: auto; */
    /* overflow: hidden; */
    grid-template-rows: minmax(0, 1fr);
}

#iframe-blinder {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    /*background-color: #00F8;*/
    grid-row: 1;
    grid-column: 1;
}

menu-button label>* {
    display: inline !important;
}

label:not(.inline-label) {
    display: block;
    /*margin: 1em 0;*/
}

label:not(.inline-label)>* {
    display: block;
    /*margin: 1em 0;*/
}

label.sync-radio {
    margin: 0 !important;
}

label.sync-radio * {
    margin: 0 !important;
}

label.flex-check {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin: 0.3em 0.5em;
}

.flex-check-container {
    display: flex;
}

.input-locked {
    box-shadow: 0px 0px 5px 2px red inset, 0px 0px 5px 2px red !important;
}

input[type=text],
input[type=password],
input[type=email],
textarea {
    border: 1px solid #dbdbdb !important;
    padding: 0.75em 1em !important;
    border-radius: 12px;
    font-family: nunito;
}

input[type=number] {
    border: 1px solid #dbdbdb;
    border-radius: 12px;
}

label>input[type="checkbox"] {
    display: inline;
    margin-top: 0em;
    margin-bottom: 0em;
}

#workspace_setup_grid {
    display: grid;
    grid-template-columns: auto auto;
    min-width: max-content;
}

.workspace_setup label {
    margin: 0em;
}

#workspace_setup_grid input[type="text"] {
    margin-top: 0em;
    margin-bottom: 0em;
    display: inline;
}

.workspace-wizard {
	justify-content: flex-start !important;
	max-width: 1440px;
}

#workspace-wizard-graphic {
	content: url(/librsc/img/workspace-create.png);
	align-self: baseline;
}

.radio-blocks {
	display: flex;
	grid-gap: 0.5em;
}

.radio-block {
	display: none;
}

.for-radio-block {
	border: 1px solid #dbdbdb;
	border-radius: 8px;
	display: inline-flex !important;
	flex-direction: row !important;
	padding: 0.75em;
	cursor: pointer; 
}

.radio-block:checked+.for-radio-block {
	border: 2px solid var(--active-green);
	margin: -1px;
}

#features {
    grid-column: 1;
}

#templates {
    grid-column: 2;
}

#template-info-overlay table {
    border-spacing: 0px;
}

#template-info-overlay td {
    /* border: 1px solid black; */
    border-width: 0px 1px 1px 0px;
    border-color: #0000005e;
    border-style: solid;
    padding: 10px;
    text-align: center;
}

#template-info-overlay th {
    /* border: 1px solid black; */
    border-width: 0px 1px 1px 0px;
    border-color: #0000005e;
    border-style: solid;
    border-spacing: 0px;
    padding: 10px;
    border-spacing: 0px;
    padding-bottom: 5px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}

.template_level {
    position: relative;
    padding: 5px;
    border-bottom: #0005;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.template_level .hover-icons {
    position: absolute;
    top: 0em;
    right: -0.3em;
}

.generic-topper {
    /*  position: absolute;
top: 5px;
right: 6px;*/
    width: fit-content;
    display: inline-flex;
    align-items: center;
    grid-gap: 0.5625em;
    /* display: inline-flex; */
    /* flex-wrap: nowrap; */
    /* height: 100%; */
    z-index: 300;
    /* grid-row-start: 1; */
    /* grid-row-end: 2; */
}

.pview_select {
    margin-top: 0em;
    margin-bottom: 0em;
    display: inline;
}

span.leveltext {
    display: inline;
}

.disciplines-checkbox-container {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
}

.padded-select {
    padding: 0.5em;
}

.disciplines-checkbox-container label {
    margin: 0.25em 1em;
}

.disciplines-checkbox-container label>* {
    display: inline !important;
}

.password-reset-button {
    width: 12em;
}

#navBar {
    display: flex;
    flex-direction: column;
    height: 5em;
    padding-left: 5px;
}

#navBar span {
    margin: 0.25em 0;
}

#activity-task-grid {
    display: grid;
    width: 75%;
    margin: 0.3em auto;
    grid-template-columns: auto auto auto auto auto;
    grid-gap: 1px;
}

#activity-task-grid>span {
    background-color: whitesmoke;
    padding: 0.3em;
    display: flex;
    text-align: center;
    justify-content: center;
}

#activity-task-grid>span.grid-heading {
    padding: 0.4em;
    font-weight: bold;
}

#activity-input-fields {
    width: 75%;
    margin: auto;
    border-bottom: 1px solid grey;
}

#activity-input-fields shared-input {
    background-color: whitesmoke;
}

#activity-more-information {
    width: 95%;
    margin: auto;
    padding: 1em 0.2em;
}

#activity-linked-containers {
    display: flex;
    flex-direction: column;
}

#activity-linked-containers>span {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

#activity-linked-containers .dropzone {
    max-height: 10em;
    overflow-y: auto;
}

#activity-linked-containers>span>span {
    width: 40%;
    margin: 0.7em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#activity-verticals {
    display: flex;
    flex-direction: column;
    border-top: 1px solid grey;
}

#activity-ptags {
    margin: 0.5em 0 0 0;
}

.vertical {
    margin: 0.3em 0;
}

.vertical-controls {
    display: inline-flex;
    border: 1px solid grey;
    border-bottom: none;
    border-radius: 3px;
    background-color: whitesmoke;
    min-height: 2em;
}

.vertical-dc {
    min-height: 5em;
}

.subp-exportables-container {
    width: 100%;
}

.dropzone.exportable-dc {
    min-height: 0.5em !important;
    background-color: unset !important;
    border: none;
}

.exportable {
    border: 2px solid #e0e0e0;
    padding: 1em;
    border-radius: 12px;
    background-color: white;
    margin: 9px 0;
}

.exportable-cont {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.exportable-goals {
    display: flex;
    flex-direction: column;
}

.exportable-goals>span:first-of-type {
    margin: 0.5em 0;
    display: flex;
    align-items: flex-end;
}

.exportable-goals>span:not(:first-of-type) {
    display: none;
}

.exportable-goals>span span {
    cursor: pointer;
}

.exportable-goals>span:not(:first-of-type) span {
    margin-left: 1em;
}

.exportable-goals>span:first-of-type span:before {
    content: "see more";
    text-decoration: underline;
    margin-left: 0.3em;
}

.goals-edit .exportable-goals>span:first-of-type span:before {
    content: "see less";
}

.exportable.goals-edit .exportable-goals>span {
    display: inline;
}

.exportable-goals drop-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: unset !important;
    min-height: unset;
    border: none;
    align-items: center;
}

.exportable:not(.goals-edit) .exportable-goals drop-container {
    padding-left: 0;
}

.exportable:not(.goals-edit) .exportable-goals drop-container.no-children {
    display: none;
}

.exportable-goals drop-container::before,
.exportable-goals>span {
    margin-right: 0.5em;
    color: #5a5a5a;
    font-size: 0.875em;
}

.exportable.goals-edit .exportable-goals drop-container::before {
    display: none;
}

.exportable-goals drop-container.task-dc::before {
    content: "Content:";
}

.exportable-goals drop-container.topic-dc::before {
    content: "Contexts:";
}

.exportable-goals drop-container.cc-dc::before {
    content: "Core Concepts:";
}

.exportable-goals drop-container.compfam-dc::before {
    content: "Competencies:";
}

.inline-goal-cont {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap;
    padding: 0.625em;
    font-size: 0.875em;
}

.exportable-goals button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
}

menu-button.three-dots {
    display: inline-flex !important;
}

menu-button.three-dots::part(menu-container) {
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    border-color: #0005;
}

grabbable-:not(.three-dots-open) .three-dots-menu {
    display: none;
}

.three-dots-menu {
    position: absolute;
    width: 1px;
    right: -4px;
    top: 32px;
    bottom: 0;
    font-size: 16px;
}

.three-dots-menu>span {
    border: 1px solid lightgrey;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 10em;
    margin-left: -1em;
    background-color: whitesmoke;
    cursor: pointer;
}

.three-dots-menu>span span {
    padding: 0.5em 1em;
    border-bottom: 1px dotted lightgrey;
}

.three-dots-menu>span span:hover {
    text-decoration: underline;
}

.three-dots-menu>span span {
    display: contents;
}

.three-dots-menu>span span:last-child {
    border-bottom: none;
}

.add-above {
    height: 16px;
    position: absolute;
    top: -19px;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

.placement .add-above {
    /*margin-left: -1.75em;*/
}

.placement .add-above:focus-within,
.placement .add-above:hover,
.exportable .add-above:focus-within,
.exportable .add-above:hover,
.placement-children>span:hover,
#placements>span:last-child:hover {
    outline: 1px dashed #3aae86;
    outline-offset: -0.5em;
    z-index: 12;
    transition: box-shadow 0.2s 0.2s;
}

.heightchanging {
    transform-origin: 50% 0% 0;
    overflow-y: hidden;
    height: 1px !important;
    width: 100%;
    transform: scale(1, 0.1);
}

.add-above>span {
    display: flex;
    justify-content: space-around;
    visibility: hidden;
    filter: opacity(0);
    transition-delay: 0.2s;
    transition-duration: 0.2s;
    cursor: pointer;
    position: relative;
    z-index: -1;
    width: 100%;
    justify-content: center;
}

.add-above>span:first-child,
.placement-children>span>span:first-child,
#placements>span:last-child>span:first-child {
    width: unset;
    background: white;
    padding: 0 2em;
    z-index: 1;
}

.exportable .add-above>span:last-child {
    display: none;
}

.add-above>span:hover,
.add-above:focus-within,
.add-above:hover>span,
.add-above:hover>span:hover,
grabbable-:focus .add-above>span,
.placement-children>span:hover,
#placements>span:last-child:hover,
.placement:focus-within>.add-above,
.placement:focus-within>.add-above>span {
    visibility: visible;
    filter: opacity(1);
}

#pexportables-container .pexportables-buttons {
    display: none;
}

.pexportables-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 30em;
    background-color: white;
    padding: 0.1em;
    border-radius: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: #0005;
}

form.wizard.for-bucket .not-for-bucket {
    display: none !important;
}

.awaiting * {
    position: relative;
}

.awaiting:before {
    content: url(/librsc/img/loading.gif);
    position: absolute;
    visibility: visible !important;
    filter: invert(1);
}

.exportable.resource-preview>div:first-child {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.resource-preview-anchor .for-view-mode {
    padding: calc(0.3em + 1px);
}

.resource-preview-description {
    display: flex;
}

.loaded .resource-preview-description {
    flex-direction: column;
}

.resource-preview-description>span {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-left: 1.5em;
}

.resource-preview:not(.is-youtube) .for-youtube {
    display: none;
}

.for-youtube {
    display: flex;
    flex-direction: column;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1em;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5em;
}

label.for-youtube span {
    color: #5a5a5a;
    font-size: 0.875em;
}

label.for-youtube shared-input {
    width: 4em;
    margin-right: 0 !important;
    font-weight: 600;
}

.resource-preview-preview {
    position: relative;
    width: 55%;
    min-height: 100px;
    display: flex;
}

.loaded .resource-preview-preview {
    width: 100%;
    margin-right: 0;
}

.loaded .resource-preview-preview iframe {
    width: 100%;
    min-height: 300px;
}

.resource-preview-preview img {
    width: 100%;
    object-fit: contain;
    border-radius: 12px;
    overflow: clip;
}

.resource-preview-preview>span:first-child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.preview-thumbnail {
    cursor: pointer;
}

.loaded .resource-preview-preview>span:first-child,
.loaded .preview-thumbnail {
    display: none;
}

.is-youtube .resource-preview-preview>span:first-child:before {
    content: url(/librsc/img/youtube-small.png);
}

.resource-preview-preview img.loading {
    filter: invert();
    width: unset;
}

.loaded .preview-loaded {
    width: 100%;
}

.exportable .boxContsCont {
    /*	position: absolute;
right: -100px;
top: -50px;
display: flex;
flex-direction: column;
z-index: 999;
box-shadow: 0px 0px 5px #0005;
border-radius: 5px;
background-color: white;*/
    padding: 1em 1.5em;
    display: none;
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
    margin: 0.2em 0;
}

.exportable.goals-open .boxContsCont {
    display: flex;
}

.exportable.goals-open .push-pin {
    border-style: inset;
    border-width: 1px;
}

.placement.trashed > .placement-cont > .placement-self .placement-topper,
.placement:not(.trashed) > .placement-cont > .placement-self .trashed-topper, 
.exportable.trashed .exportable-topper,
.exportable:not(.trashed) .trashed-topper {
	display: none;
}

.to-trashed, .to-restored {
	transition: opacity 0.2s !important;	
}

.to-trashed {
	opacity: 0.5 !important;
}

.to-restored {
	opacity: 1 !important;
}

.placement-topper.awaiting,
.trashed-topper.awaiting {
	visibility: hidden;
}

.exportable-topper,
.placement-topper,
.trashed-topper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 5;
    width: 10em;
    right: 0px;
    margin-right: 0px;
    margin-left: auto;
    grid-gap: 1.25em;
}

.exportable-topper>button,
.placement-topper>button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    /*padding: 6px;*/
    /*margin: 0 0.25em;*/
    cursor: pointer;
    border: none;
    background: none;
}

.exportable-topper>button:hover,
.placement-topper>button:hover {
    /*box-shadow: 0 0 2px;*/
}

.three-dots-open .three-dots {
    border: 1px inset;
}

menu-button {
    cursor: pointer;
    width: 32px;
    right: 0px;
    text-align: center;
    filter: brightness(1);
    /*hack to force menu position alignment without width*/
}

.reverse-wrapper {
    display: flex;
    flex-direction: column-reverse !important;
}

.googledoc {
    justify-content: center;
    align-items: center;
}

.googledoc iframe {
    width: 100%;
    min-height: 250px;
}

.circle-admin-container,
.workspace-admin-container {
    max-width: 60em;
    display: flex;
    flex-direction: column;
    margin: 1em 0;
}

.container-top-bar {
    display: inline-flex;
    align-items: baseline;
}

.container-top-bar span {
    margin: 0 0.3em;
    cursor: pointer;
}

.circle-admin-container shared-input,
.workspace-admin-container shared-input {
    width: 25em;
    background-color: white;
}

.circle-admin-container drop-container,
.workspace-admin-container drop-container {
    background-color: white;
    min-height: 10em;
    border: 1px solid grey;
    border-radius: 5px;
}

.user-row,
.clique {
    border-bottom: 1px solid lightgrey;
}

.user-row:nth-of-type(2n),
.clique:nth-of-type(2n) {
    background-color: whitesmoke;
}

.user-infor-row {
    cursor: default !important;
}

.clique-cont .hover-icons {
    top: 0px;
}

.user-row .admin-toggle,
.clique .access-label {
    text-decoration: underline;
    opacity: 0.7;
    font-size: 0.85em;
}

.user-row .admin-toggle.is-admin {
    opacity: 1;
}

.clique .permission-select {
    background: none;
}

#placement-center .cc-contents,
#placement-center .placement-task,
#placement-center .topic-cont {
    /*height: 3.4em; 
width: 20em;*/
    overflow: ellipsis;
}

.cc-grabbable .icon,
.compfam-grabbable .icon,
.placement-task .icon {
    width: 30px;
    display: inline;
}

.cc-inline {
    border-width: 0px 0px 0px 2px;
    border-color: var(--ccs-background)!important;
    border-style: solid;
    border: none;
}

.cc-inline .icon,
.compfam-inline .icon,
.task-inline .icon {
    width: 15px;
    display: inline;
}

.cc-inline .cc-contents {
    border: none;
    height: inherit;
    width: inherit;
    border-radius: 0 !important;
}

.compfam-inline {
    /*	min-height: 2.1em;*/
    /*border-width: 0px 0px 0px 2px;
border-color: black !important;border-style: solid;*/
    /* border-left: 2px black !important; */
    border: none !important;
}

.exportable .icon {
    min-width: 25px !important;
    display: inline-block;
}

.exportable .icon img {
    margin-right: 1em;
}

.snippet-wrapper {
    width: 100%;
}

.snippet-inline {
    min-height: 50px;
    overflow: visible;
}

.type-of-snippet {
    display: flex;
    padding: 1em;
    align-items: center;
}

.type-of-snippet label {
    margin-left: 1em;
}

.type-of-snippet>span {
    opacity: 0.8;
    size: 1.2em;
    font-weight: bold;
    text-decoration: underline;
}

.exportable-title-container {
    display: flex;
    align-items: flex-end;
    font-size: 16px;
    font-weight: bold;
}

.exportable-title {
    padding-left: 0 !important;
}


/*
.empty-exportable-title {
margin-top: -2em;
margin-left: -2px;
}
.exportable-title-container.empty-exportable-title {
width: fit-content;
background-color: var(--placement-bg);
padding-left: 5px;
padding-right: 5px;
padding-top: 0.15em;
filter: drop-shadow(0px -1px 2px #3333);
}

.empty-exportable-title.exportable-blurred {
display: none;
}

.exportable-blurred shared-input.exportable-title {
border-color: #0000;
}
*/

shared-jodit {
    min-height: 10em;
    width: 100%;
    height: 10em;
    width: 40px;
    min-width: 40px;
    /* background: red; */
    margin-top: 2px;
    position: relative;
    z-index: 50;
}

.jodit-wysiwyg p {
    margin-block-start: 0em;
}

grabbable-.exportable:focus-within,
grabbable-.exportable:focus {
    box-shadow: 0px 0px 3px 1px #0000004f, 0px 0px 2px 0px #00000022;
    z-index: 3;
}

.exportable .inline-preview-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 1.1em;
    width: 100%;
}

#organize,
#workspace,
#inbox,
#my-courses {
    display: flex;
    flex-direction: column;
    /* height: 90vh; */
    width: 100%;
    /* justify-content: center; */
    -webkit-user-select: none;
    /* Safari 3.1+ */
    -moz-user-select: none;
    /* Firefox 2+ */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Standard syntax */
    /*cursor: pointer;*/
    background: #f0f0f0;
}

#organize> :not(#organizer) {
    display: none;
}

#my-courses {
    overflow-y: auto;
    height: 100%;
}

#workspace {
    margin-left: 10px;
}

.grab-drop {
    z-index: -4;
    position: absolute;
    display: none;
}

.grab-drop.active {
    z-index: 10;
    /*background-color: #FF00FF33; 
border-color: #FF00FF22;
border-width: 2px; 
border-style: solid;*/
    display: block;
    transition: 0.25s !important;
}

drop-container[type="v-ordered"]>grabbable->.b-gd {
    left: 0px;
    bottom: -5%;
    height: 30%;
    width: 100%;
    display: none;
    transition: 0.25s !important;
}

drop-container[type="v-ordered"]>grabbable->.t-gd {
    top: -5%;
    left: 0px;
    height: 30%;
    width: 100%;
    display: none;
}

drop-container[type="v-ordered"]>grabbable-.fourxone>.t-gd {
    height: 12%;
}

drop-container[type="v-ordered"]>grabbable-.fourxone>.b-gd {
    height: 12%;
}

drop-container[type="h-ordered"]>grabbable->.l-gd {
    top: 0px;
    left: -5%;
    width: 30%;
    height: 100%;
    display: none;
    transition: 0.25s !important;
}

drop-container[type="h-ordered"]>grabbable->.r-gd {
    top: 0px;
    right: -5%;
    width: 30%;
    height: 100%;
    display: none;
    transition: 0.25s !important;
}

drop-container.can-accept>grabbable-,
.drop-container.can-accept>grabbable- {
    transition: 0.25s !important;
}

.grab-drop.forefrontinflation {
    z-index: 20;
}

grabbable-.inflated-nextward-h {
    transition: 0.25s !important;
}

grabbable-.inflated-nextward-v {
    transition: 0.25s !important;
}

grabbable-.inflated-prevward-v {
    transition: 0.25s !important;
}

grabbable-.inflated-prevward-h {
    transition: 0.25s !important;
}

drop-container[type="h-ordered"]>grabbable-.inflated-nextward-h {
    transform: translateX(15%);
}

drop-container[type="h-ordered"]>grabbable-.inflated-nextward-h>.l-gd {
    border-color: #00FF0044;
    border-width: 0px 0px 0px 3px;
    border-style: solid;
    transform: scaleX(200%) !important;
}

drop-container[type="v-ordered"]>grabbable-.inflated-nextward-v {
    transform: translateY(15%);
}

drop-container[type="v-ordered"]>grabbable-.fourxone.inflated-nextward-v {
    transform: translateY(6%);
}

drop-container[type="v-ordered"]>grabbable-.inflated-nextward-v>.t-gd {
    border-color: #00FF0044;
    border-width: 3px 0px 0px 0px;
    border-style: solid;
    transform: scaleY(270%) !important;
}

drop-container[type="h-ordered"]>grabbable-.inflated-prevward-h {
    transform: translateX(-15%);
}

drop-container[type="h-ordered"]>grabbable-.inflated-prevward-h>.r-gd {
    border-color: #00FF0044;
    border-width: 0px 3px 0px 0px;
    border-style: solid;
    transform: scaleX(200%) !important;
}

drop-container[type="v-ordered"]>grabbable-.inflated-prevward-v {
    transform: translateY(-15%);
}

drop-container[type="v-ordered"]>grabbable-.fourxone.inflated-prevward-v {
    transform: translateY(-6%);
}

drop-container[type="v-ordered"]>grabbable-.inflated-prevward-v>.b-gd {
    border-color: #00FF0044;
    border-width: 0px 0px 3px 0px;
    border-width: 2px;
    border-style: solid;
    transform: scaleY(270%) !important;
}

#organizer {
    display: grid;
    grid-template-columns: [leftpane] minmax(3em, 45%) [centerpane] minmax(66%, 1fr);
    /* display: flex; */
    height: 100%;
    width: 100%;
    max-width: calc(100vw - 5px);
    flex-grow: 1;
    overflow: hidden;
    align-content: stretch;
    /* transform: scale(1.01); */
    background: #f0f0f0;
    justify-content: stretch;
    align-items: stretch;
    justify-items: stretch;
    /* overflow: auto; */
    grid-gap: 6px;
    position: relative;
}

#organizer.noleft {
    grid-template-columns: [leftpane] minmax(0.1em, 6.25em) [centerpane] 1fr;
}

#topics-here {
    padding: 1em 0;
    flex-direction: column;
    justify-content: start;
    min-height: 15em;
}

#placement-topics {
    height: 100%;
    /*grid-template-rows: [placements] 1fr [topics] minmax(min-content, 1fr);*/
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    background-color: #636460;
}

#placements {
    /* width: 90%; */
    margin-left: 1.5em;
    margin-right: 0;
    margin-top: 1em;
    display: flex;
    flex-direction: column;
}

#placement-center {
    overflow-y: scroll;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: [placements] minmax(0, 1fr) [comments] minmax(20em, 26%);
    grid-template-rows: [wheader] 5.5em [breadcrumbs] 2.5em [placementshere] auto;
    height: 100%;
    flex-direction: row;
    position: relative;
    z-index: 1;
    min-width: 100%;
    justify-self: start;
    align-self: start;
    flex-shrink: 1;
    flex-grow: 4;
    flex-basis: 45em;
    flex-wrap: wrap;
}

#workspace-header {
    display: flex;
    width: 100%;
    padding: 0.875em;
    justify-content: space-between;
    align-items: center;
    border-bottom: 6px solid #F0F0F0;
    background: white;
    grid-row: wheader;
    grid-column: 1/-1;
}

#workspace-header>span {
    display: flex;
    grid-gap: 0em 1em;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-shrink: 2;
    justify-content: flex-end;
    width: 20em;
}

#workspace-header>span:first-child {
    margin-left: 1.25em;
    flex-wrap: nowrap;
    flex-grow: 2;
    justify-content: flex-start;
    flex-shrink: 1;
    width: 58%;
    min-width: max-content;
}

#workspace-information {
    display: inline-flex;
    flex-direction: column;
}

#workspace-title {
    font-size: 2em;
    font-weight: 800;
}

#workspace-details {
    letter-spacing: 1.2px;
    font-size: 0.6875em;
    display: flex;
    align-items: baseline;
}

#workspace-discipline:not(:empty)~#workspace-grade:not(:empty)::before {
    width: 0.375em;
    height: 0.375em;
    border-radius: 50%;
    background: #757575;
    content: "";
    display: inline-block;
    margin: 0 0.5em;
}

#workspace-header button {
    border-radius: 18px;
    border: solid 1.3px #1f1f1f;
    background: none;
    font-size: 0.875em;
    padding: 1em;
    font-weight: bold;
    width: 6em;
    min-height: min-content;
    /* height: 1em; */
    cursor: pointer;
}

#current-placement-breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    column-gap: 0.4em;
    grid-row: breadcrumbs;
    font-size: 0.7em;
    letter-spacing: 1.2px;
    font-family: ProximaNova !important;
    padding: 1em;
    text-transform: uppercase;
    overflow-x: clip;
    margin-left: 2em;
    width: 100%;
    grid-column-start: placements;
    grid-column-end: 4;
}

#placement-center>span {
    display: flex;
    flex-direction: column;
    /* transform: scale(1); */
    /* max-width: 100em; */
    grid-row: placementshere;
    width: 95%;
    grid-column: placements;
    max-width: 100em;
    min-width: 729px;
    margin-left: 2em;
    /* margin: auto; */
    /* margin-right: 15em; */
    /*height: 100%;*/
    padding-bottom: 10em;
}


/*#placement-center .tabcontentrow {
overflow-y: hidden !important;
}*/

select {
    font-size: inherit !important;
}

#DOMCache {
    display: none;
}

.cache {
    display: none;
}

.global-tt {
    /*max-width:15em;*/
    padding: 0.5em;
    border-radius: 15px;
    pointer-events: none !important;
    background-color: #FFFD;
    width: 20em;
    /*backdrop-filter: blur(20px);*/
    box-shadow: 0px 0px 15px -5px #0004;
}

#etherpad-container {
    height: 100%;
    grid-row: 1;
    grid-column: 1;
}

#etherpad-iframe {
    height: 100%;
    width: 100%;
    z-index: 0;
}

#tooltipShell {
    display: block;
    position: absolute;
    border-radius: 5px;
    opacity: 0;
    transform-origin: 0% 0% 0;
    z-index: 9999999;
    pointer-events: none !important;
    /*backdrop-filter: blur(20px);*/
}

span.inline-menu.active {
    height: 0px;
    display: block;
}

span.inline-menu.active {
    height: 0px;
    display: none;
}

.menu-content {
    height: min-content;
    background-color: aqua;
}

#contextShell {
    display: block;
    position: absolute;
    background-color: #141414e3;
    border-radius: 5px;
    color: white;
    padding: 0.5em 0;
    cursor: context-menu;
    opacity: 0;
    transform: scale(0.7, 0);
    transform-origin: 0% 0% 0;
    box-shadow: 2px 2px 3px 2px #f1cfafa8;
    z-index: 9999999;
}

#contextShell ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#contextShell li {
    padding: 0.25em 2em;
    transition-property: background-color, box-shadow;
    transition: 0.3s ease;
}

.context {
    cursor: context-menu;
}

#overlayShell {
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Black background with opacity */
    /*z-index: 2;  Specify a stack order in case you're using a different order for other elements 
cursor: pointer; */
    overflow-y: auto;
    filter: opacity(0);
}

.jodit_container {
    min-width: 700px;
    margin: 0.5em;
}

.jodit-workplace {
    cursor: text;
    border: 1px solid rgba(211, 211, 211, 0.897);
}

.overlayBody {
    display: flex;
    margin: auto;
/*    justify-content: space-around;*/
    flex-direction: column;
    padding: 1em 5em;
}

.overlayBody input[type='text'],
.overlayBody textarea,
.overlayBody shared-input {
    background-color: white;
    padding: 0.5em;
    border: 1px solid lightgrey;
    resize: none;
}

.overlayBody input[type=number] {
    padding: 0.75em 1em;
    max-width: 6em;
}

.overlayBody input[type='submit']:not(.buttonSubmit) {
    padding: 0.5em;
}

.overlayBody[data-overlay='placementExport'] {
    text-align: center;
}

[data-overlay=splashDefaultComps] {
	width: 50em;
	grid-gap: 1em;
	justify-content: flex-start;
}

[data-overlay=splashDefaultComps] > p {
	
}

[data-overlay=splashDefaultComps] grabbable- {
	box-shadow: none !important;
}


[data-overlay=splashDefaultComps] .generic-topper {
	display: none;
}

[data-overlay=splashDefaultComps] .buttonSubmit {
	align-self: center;
	padding: 1em 4em;
	border-radius: 12px;
}

.wizard {
    grid-gap: 3em;
    position: relative;
    background: white;
    overflow-y: auto;
    justify-content: flex-start !important;
}

.wizard[data-overlay=placement-wizard] {
    width: 60em;
}

.wizard[data-overlay=exportable-wizard] {
    width: 60em;
}

.wizard-subtitle {
    position: absolute;
    top: 3em;
    left: 0;
    right: 0;
    text-align: center;
}

form.wizard>span {
    display: flex;
}

form.wizard>span:first-child {
    flex-direction: column;
    align-items: center;
}

form.wizard>span:first-child>span:first-child {
    font-size: 1.5em;
    font-weight: bold;
}

#placement-wizard-graphic {
    height: 20em;
    width: 15em;
    padding: 1.25em;
    /* margin-right: -0.75em; */
    position: relative;
    background: url(/librsc/img/purple-dots.png);
}

#placement-wizard-graphic>span:first-child {
    font-size: 1.5em;
    font-weight: bold;
}

form.wizard button {
    cursor: pointer;
}

form.wizard fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    /* padding-left: 0px; */
    /* margin-left: 0px; */
    flex-shrink: 50;
    grid-gap: 2em;
    flex-grow: 1;
    /* justify-content: space-between; */
}

form.wizard fieldset > span:not(.wizard-subtitle) {
	font-weight: bold;
}

form.wizard fieldset:not(.active-fieldset) {
    display: none;
}

form.wizard fieldset>button {
    /* flex-grow: 1; */
    display: flex;
    align-items: center;
    background: none;
}

form.wizard[data-overlay=placement-wizard] fieldset>button {
    grid-gap: 1em;
    width: 100%;
    border: 1px solid #dbdbdb;
    padding: 1.25em;
    border-radius: 16px;
}

form.wizard[data-overlay=placement-wizard] fieldset>button>span:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-gap: 0.25em;
    color: #1f1f1f;
    font-size: 1em;
}

form.wizard[data-overlay=placement-wizard] fieldset>button>span:nth-child(2)>span:first-child {
    font-weight: bold;
}

form.wizard[data-overlay=placement-wizard] fieldset>button>span:nth-child(2)>span:last-child {
    font-size: 0.875em;
    opacity: 0.8;
    text-align: left;
    /* display: flex; */
}

form.wizard[data-overlay=placement-wizard] fieldset>button img:last-child {
    margin-left: auto;
}

form.wizard[data-overlay=exportable-wizard] fieldset:first-of-type {
    flex-direction: row;
    flex-wrap: wrap;
    grid-gap: 2.25em 1.875em;
}

form.wizard[data-overlay=exportable-wizard] fieldset>button {
    flex-direction: column;
    grid-gap: 1em;
    border: none;
    font-weight: bold;
}

form.wizard .button-row {
    display: flex;
    grid-gap: 1em;
    margin-top: 1em;
}

form.wizard .button-row button {
    width: unset;
    border-radius: 21px;
    padding: 0.75em;
    font-size: 0.875em;
    font-weight: bold !important;
    min-width: 11em;
}

form.wizard .button-row button[type=submit], .buttonSubmit {
    color: white;
    background: var(--active-green);
    border: 1px solid var(--active-green);
    cursor: pointer;
    font-weight: bold;
    padding: 1em 4em;
    border-radius: 12px;
}

.buttonSubmit[disabled] {
	background: #b8b8b8;
	border-color: #b8b8b8;
	cursor: unset;
}

form.wizard label {
    display: flex;
    flex-direction: column;
    grid-gap: 0.5em;
    position: relative;
}

form.wizard label > span {
    font-weight: bold;
}

form.wizard label select {
	align-self: flex-start;
	border: 1px solid #dbdbdb;
	padding: 0.75em 2em 0.75em 1em;
	border-radius: 12px;
	background: none;
}

select.has-floor option {
	display: none;
}

select.has-floor option:first-child, 
select.has-floor .floor, 
select.has-floor .floor ~ option {
	display: unset;
}

select.has-ceil .ceil~option {
	display: none;
}

form.wizard .cancel-x {
    background: none;
    border: none;
    color: #e0e0e0;
    position: absolute;
    top: 1em;
    right: 1em;
    cursor: pointer;
}

#msg {
    padding: 0.25em;
    position: fixed;
    top: 0;
    color: red;
    left: 0;
    right: 0;
    background-color: gainsboro;
    display: block;
    animation: msg 7s ease-in 0s both;
    border-bottom: 1px solid grey;
    border-top: 1px solid grey;
    z-index: 99999;
}

#login {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    margin: auto;
}

#login input,
#login label {
    width: 100%;
}

[data-overlay="passwordReset"],
[data-overlay="passwordResetExternal"] {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	grid-gap: 1em;
}

[data-overlay="passwordReset"] span:first-child,
[data-overlay="passwordResetExternal"] span:first-child {
	align-self: flex-start;
	font-size: 1.125em;
	font-weight: bold;
}


#login input[type=submit],
[data-overlay=passwordReset] input[type=submit],
[data-overlay=passwordResetExternal] input[type=submit] {
	padding: 1em 2em;
	border-radius: 12px;
	font-weight: bold;
	cursor: pointer;
}

#login form {
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-gap: 1em;
}

#login img {
    height: 42vh;
    object-fit: contain;
    margin: 1em 0;
}

#ccr-header {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-row: 1;
    padding: 1.25em;
    margin-bottom: 6px;
    /*height: 4em;*/
    background-color: white;
}

#ccr-content {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* overflow: auto; */
    /* padding: 0em 2em; */
    /* margin-right: -11px; */
}

.header-right {
    display: flex;
    flex-direction: column;
}

.header-right>span {
    display: flex;
}

.header-right>span:first-child {
    grid-gap: 0.5em;
    padding: 0 1em;
}

.header-right>span:last-child {
    position: relative;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 3;
}

.header-right.inbox-open>span:last-child {
    opacity: 1;
    visibility: visible;
}

#header-dropdown {
    position: absolute;
    right: 1em;
    top: 0.5em;
    height: 85vh;
    width: fit-content;
    border: 4px solid #e0e0e0;
    border-radius: 12px;
    background: white;
    box-shadow: 3px 3px 4px #00000054;
    display: flex;
}

.header-right>span:first-child button {
    border: none;
    background: none;
    font-size: 1.2em;
    color: var(--header-col);
    cursor: pointer;
}

.header-right button img {
    height: 18px !important;
}

#inbox-icon {
	position: relative;
}

#inbox-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;	
    color: white;
    background-color: #af65c2;
    position: absolute;
    top: -8px;
    right: -4px;
    height: 17px;
    width: 17px;
    font-size: 0.625em;
    font-weight: bold;
}

#inbox-icon.is-active #inbox-indicator {
	background-color: var(--active-green);
}

#inbox-indicator:empty {
	display: none;
}

#comments-dropdown {
    display: flex;
    flex-direction: column;
    width: 23em;
}

#comments-dropdown>span:first-child {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 1em;
    grid-gap: 1em;
}

#comments-dropdown-select {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.875em;
    font-weight: bold;
}

#inbox-workspaces-cont::before,
#inbox-workspaces-cont .comments-cont::before
 {
    content: "Nothing here.";
    position: absolute;
    display: flex;
    justify-content: center;
    right: 0;
    left: 0;
    padding: 0.75em;
    font-style: italic;
}

#comments-dropdown.only-subscribed .inbox-workspace:not(.has-subscribed, .is-current-workspace), 
#comments-dropdown.only-subscribed .inbox-comment:not(.is-subscribed), 
#comments-dropdown.only-subscribed .inbox-comment.resolved-comment, 
#comments-dropdown.only-subscribed .count-total, 
#comments-dropdown:not(.only-subscribed) .count-subscribed, 
#comments-dropdown:not(.only-subscribed) .comment-re button, 
#comments-dropdown.only-unresolved .inbox-workspace:not(.has-unresolved, .is-current-workspace), 
#comments-dropdown.only-unresolved .inbox-comment.resolved-comment,
#comments-dropdown.only-unresolved .count-total,
#comments-dropdown:not(.only-unresolved) .count-unresolved {
	display: none;
}

.thread .inbox-comment {
	display: flex;
}

.is-current-workspace a,
.inbox-workspace:not(.is-current-workspace) a- {
	display: none !important;
}

details.inbox-workspace {
	border-bottom: 1px solid #e0e0e0;
	padding: 0 1em;
	background: white;
	z-index: 1;
	position: relative;
}

details.inbox-workspace summary {
	font-size: 0.875em;
	padding: 1em 0;
	font-weight: bolder;
	text-transform: uppercase;
	display: flex;
	cursor: pointer;
}

.comments-cont {
	display: flex;
	flex-direction: column;
	min-height: 3em;
}

details.inbox-workspace summary :not(.name) {
	margin-left: auto; 
}

details.inbox-workspace summary::after {
	margin-left: 1em !important;
}

.inbox-comment {
	display: flex;
	flex-direction: column;
	padding: 1.5em 0;
	border: none;
	border-bottom: 2px solid #e0e0e0 !important;
	background: white;
	z-index: 1;
	position: relative;
}

.inbox-comment:last-of-type {
	border-bottom: none;
}

.inbox-comment .comment-details {
	align-items: center;
}

.comment-re {
	font-size: 0.875em;
	margin-bottom: 1em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: bold;
	opacity: 0.6;
	display: flex;
}

.comment-re *:not(button) {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.comment-re-name {
	font-weight: normal;
}

.comment-re button {
	font-weight: normal !important;
	margin-left: auto;
}

.inbox-comment .comment-time {
	margin-left: auto;
}

.inbox-comment .comment-body {
	opacity: 0.8;
	text-align: justify;
	font-size: 0.875em;
}

.link-to-placement {
	background: #07ad860D;
	padding: 0.75em;
	border-radius: 8px;
	margin: 0.75em 0;
	font-size: 0.875em;
	font-weight: bold;
}

.link-to-placement,
.link-to-placement a, 
.link-to-placement a- {
	display: flex;
	align-items: center;
	grid-gap: 0.5em;
}

.link-to-placement a::before,
.link-to-placement a-::before {
	content: url('/librsc/img/comment-link.svg');
	height: 32px;
}

.link-to-placement a:link, 
.link-to-placement a:visited, 
.link-to-placement a:active, 
.link-to-placement a:hover {
	font-size: unset !important;
	color: black !important;
}

.link-to-placement a:hover {
	text-decoration: underline;
} 

.inbox-comment input[type=submit] {
	align-self: flex-start;
	padding: 0.325em;
}

.resolved-comment form {
	display: none;	
}

.inbox-comment .inbox-comment {
	border: none !important;
	display: flex !important;
	padding: 0.5em 0;
}

#dynamic-content {
    flex-grow: 0.85;
}

#goals {
    display: inline-block;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    height: 100%;
    width: 100%;
    min-width: 35em;
    overflow: auto;
}

#standards {
    width: 76.5%;
    display: inline-block;
}

#competencies {
    width: 20%;
    display: inline-block;
}

#ccr-header img {
    width: auto;
    /* vertical-align: middle; */
}

#ccr-header h1 {
    display: inline;
    padding-left: 0.5em;
    vertical-align: middle;
    font-family: "nunito", sans-serif;
    color: var(--header-col);
}

#ccr-header h1:hover {
    text-decoration: none;
}

#main,
#sync-body {
    display: grid;
    /* justify-content: stretch; */
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: 100%;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    grid-row: 2;
}

#airtable-result,
#local-result {
    width: 49%;
}

#detailPane {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: lightgrey;
    border: 1px inset grey;
    border-radius: 5px;
}

#sync-grid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 47.5% 47.5%;
}

.sync-grid-full {
    grid-column: 1 / -1;
    border-bottom: 1px solid grey;
    padding: 0.3em 0;
}

.cont {
    border-bottom: 1px solid grey;
    padding: 0 10px;
}

.cont:last-of-type {
    border-bottom: none;
}

#unitGrid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 50px auto auto auto;
}

#stdsGrid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: auto auto;
}

#standardsGrid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: auto auto auto auto auto;
}

#lessonsGrid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 50px auto auto auto;
}

#lessonKnowledgeGrid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: auto auto auto auto auto;
}

#lessonStepsHeader {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 50px auto auto auto auto auto auto auto auto;
}

#lessonStepsGrid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 50px auto auto auto auto auto auto auto auto;
}

#overlayPlanGrid {
    display: grid;
    width: 70vw;
    grid-gap: 5px;
    grid-template-columns: 50px auto auto auto;
}

.stepHeader {
    margin: 0.5em 0;
    grid-column: 1 / span 9;
    font-weight: bold;
}

.doublePlan {
    grid-column: span 2;
}

.stepBtw {
    grid-column: 1 / span 9;
}

.Btw {
    grid-column: 1 / span 4;
}

.Subcomps {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

.Subcomps input {
    width: 100%;
    border: 1px inset gainsboro;
}

.subcompIdents {
    display: flex;
    width: 100%;
    padding: 0.3em;
}

.subcompIdent {
    padding: 0.25em;
    background-color: gainsboro;
    border-radius: 5px;
    margin: 0 0.1em;
}

#ccr-header a:link,
#ccr-header a:visited,
#ccr-header a:hover,
#ccr-header a:active {
    font-size: 0.9em;
    color: var(--header-col);
}

#ccr-header a:link,
#ccr-header a:visited {
    text-decoration: none;
}

#ccr-header a:hover,
#ccr-header a:active {
    text-decoration: none;
}

.header-placement a:link,
.header-placement a:visited,
.header-placement a:hover,
.header-placement a:active {
    color: white !important;
}

a.disabled:link,
a.disabled:visited,
a.disabled:hover,
a.disabled:active,
.disabled {
    color: grey !important;
}

a.navToken:link,
a.navToken:visited,
.navToken {
    color: black;
    background-color: gainsboro;
    border: 1px solid gainsboro;
    padding: 0.2em;
}

a.navToken:hover,
a.navToken:active,
a.navCurrent:link,
a.navCurrent:visited,
a.navCurrent:hover,
a.navCurrent:active,
.navCurrent {
    background-color: var(--placement-bg) !important;
    color: white !important;
    text-decoration: none !important;
}

.navGroup:after {
    content: "|";
}

.navGroup:last-of-type:after {
    content: none;
}

.dashHz {
    margin: 1em 0;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.dashHz#conts {
    margin-bottom: 0;
}

#placements,
.placement-children {
    position: relative;
}

#placements::before,
.placement-children::before {
    content: "";
    position: absolute;
    width: 2px;
    background: #e0e0e0;
    left: -1.25em;
    top: 0;
    bottom: 0;
}

.dashVert {
    margin: 1em 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dashVertInline {
    padding: 1em 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}

.dashInline {
    padding: 1em 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}

.dashVert>span,
.dashVertInline>span {
    display: flex;
    margin: 0.2em 0;
}

.topic {
    margin: 2px 5px 2px 2px;
}

.topic-cont>details {
    width: 100%;
}

.topic-cont {
    display: flex !important;
    justify-content: space-between;
    width: 100%;
    /* height: fit-content; */
    /* justify-content: flex-start; */
    /* align-items: flex-start; */
    padding: 0.3em;
    border: 3px solid #2269BF;
    background-color: white;
    /*formerly #737373*/
    color: black;
    /* border-radius: 3px; */
    /* grid-template-rows: [title] 1.5em [details] 1fr; */
}

#ccr-header-topic {
    margin: 0 0.5em;
    padding: 0;
    /*1em 0;*/
}

.topic-inline,
.task-inline,
.cc-inline,
.compfam-inline {
    border-radius: 0 !important;
    margin: 0 !important;
    /* border-width: 0px 0px 2px 0px !important; */
    display: grid;
    grid-template-columns: [content] 1fr [trash] 1em;
    /* height: 1.3em; 
overflow: hidden;*/
    background-color: white;
    width: 100%;
    font-size: 1.1em;
    /* padding-right: 0.5em; */
    padding: 0.1em;
}

.task-inline .text,
.topic-inline .name,
.cc-inline .cc-name,
.cc-inline .cc-contents,
.compfam-inline .compfam-name,
.compfam-inline a,
.compfam-inline .compfam-grabbable-cont,
.compfam-inline .compfam-heading {
    white-space: nowrap;
    /*overflow: hidden;*/
    grid-row: 1;
    grid-column: content;
    text-overflow: ellipsis;
    align-items: center;
    /* grid-column-start: content; */
    /*display: grid;*/
    /* font-size: 12px; */
    /*0.85em;*/
    /*padding: 2px;*/
    display: flex !important;
}

.grabbable-content-wrapper {
    display: flex;
}

.inline-task-options label {
    margin: 0em 1em 0em 0em;
}

#topic-page {
    /* width: 90%; */
    display: flex;
    flex-direction: column;
    height: 100%;
    /*    grid-template-rows: [heading] 2em [content] 1fr;*/
    /*width: 90%;*/
}

#topic-page tab-container {
    grid-row: content;
}

#topic-page .aa-dropdown-menu {
    width: 100%;
    background-color: #fff;
    border: 1px solid #999;
    border-top: none;
    overflow: auto;
    max-height: 30em;
}

#notes-tab {
    background-color: lightgray;
}

#research-tab {
    background-color: lightgray;
}

#research-container {
    padding-bottom: 80vh;
    background-color: lightgray;
    margin-top: 0.8em;
}

.compfam-with-tips {
    margin-top: 1.1em;
}

.tip-list {
    display: none;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tip {
    border-bottom: 3px dotted white;
    margin: 0;
    padding: 1em 0;
    display: flex;
    align-items: center;
}

.tip-icons {
    display: flex;
    flex-direction: column;
    padding: 0.3em;
    border-radius: 5px;
    background-color: darkgrey;
}

.tip-icons img {
    height: 16px;
    width: 16px;
    margin: 3px 0;
    cursor: pointer;
}

.tip-text {
    padding: 0 0.5em;
}

.compfam-text {
    font-weight: bold;
    /*border-top: 3px dotted grey;
display: block;*/
}

.heart {
    display: none;
}

.liked-tip .red-heart {
    display: inline;
}

.liked-elsewhere-tip .red-outline-heart {
    display: inline;
}

.basic-tip .outline-heart {
    display: inline;
}

.hidden-notice {
    display: none;
}

.hidden-tip .hidden-notice {
    display: flex;
}

.hidden-tip .tip-icons,
.hidden-tip .tip-text {
    display: none;
}

.restore-tip,
.ban-tip {
    cursor: pointer;
}

.restore-tip {
    font-style: italic;
}

.ban-tip {
    text-decoration: underline;
}

.restore-tip:hover,
.ban-tip:hover {
    color: black;
}

#topic-page tab-selector {
    color: black;
    /* filter: brightness(0.5); */
    background: var(--page-background);
}

tab- {
    display: grid;
    height: 100%;
    background-color: inherit;
    color: inherit;
    border-color: red;
    border-style: hidden;
    border-width: 0px;
}

#topic-page tab- {
    color: black;
    /* filter: brightness(0.5); 
background: var(--page-background);*/
    height: 100%;
}

.topic-tab-container {
    background: var(--page-background);
    padding: 2em;
    height: 100%;
}

#resource-notes-panel {
    border-left: 1px solid grey;
    flex-grow: 1;
    margin-left: 1em;
    padding-left: 1em;
}

#topic-page>section {
    padding-bottom: 1em;
}

#topic-page shared-input {
    background-color: white;
}

#topic-tags section {
    /*display: flex;
flex-direction: column;*/
    border-right: 1px solid white;
    padding: 0.2em;
}

#topic-associations-container {
    flex-grow: 1;
}

.inlineDiscipline {
    padding: 0.1em;
    display: inline;
}

.resource {
    padding: 1em;
    background-color: whitesmoke;
    border-radius: 5px;
    margin: 0.1em 0;
    min-width: 20em;
    border: 1px solid white;
}

.resource-cont {
    display: flex;
    justify-content: space-between;
}

.resource-inline {
    text-overflow: ellipsis;
}

.resource .icon {
    margin-right: 0.5em;
}

.selected-resource {
    border: 1px solid grey;
}

.addSticky {
    padding: 1.5em 1.5em;
}

.addSticky,
.addUnit,
.addLesson {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bubble {
    border: 1px solid blue;
    background-color: lightblue;
    border-radius: 10px;
    margin: 0.25em;
    padding: 0.25em;
}

.boxHeading {
    font-weight: 900;
    flex-grow: 1;
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
    /*white-space: nowrap;*/
}

.boxHeading a- {
    padding-top: calc(0.3em + 1px);
    padding-bottom: calc(0.3em + 1px);
}

.boxmeta-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow: hidden;
    grid-column: content;
}

.fourxone .boxmeta-right {
    flex-grow: 1;
    display: flex;
    padding-right: 100px;
    flex-direction: row;
    align-items: stretch;
    align-content: stretch;
    justify-content: stretch;
    justify-items: stretch;
    width: 50%;
    min-width: 50%;
}

.fourxone .boxPlacementNotes {
    /*height: 2.8em;*/
    max-width: 100%;
}

grabbable-.placement.fourxone {
    width: 100%;
    /* border-width: 0px; */
}

.boxmeta-left {
    flex-grow: 0.11;
    /* min-width: fit-content; */
    margin-right: 1em;
    width: 100%;
    /* height: 47px; */
}

.boxmeta-right {
    display: none;
}

.budget-text {
    display: flex;
    grid-gap: 1em;
    align-items: center;
    font-size: 0.875em;
    padding: 0.25em 0;
    margin: 0.25em 0;
}

.budget-heading {
    font-weight: bold;
    opacity: 0.8;
}

.time-bullet {
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: black;
    display: inline-flex;
}

.no-child-budget>span:first-child~*:not(menu-button) {
    display: none;
}

.time-used {
    padding-right: 0.325em;
}

.time-bullet.is-equal {
    background: var(--active-green);
}

.time-bullet.is-over {
    background: red;
}

.no-budget-text .budget-text {
    display: none;
}

.boxPlacementNotes {
    width: 100%;
    height: 100%;
    border: inset;
    border-width: 1px;
}

.no-text-notes .boxPlacementNotes {
    display: none;
}

.no-exportables .placement:not(.is-activity)~#pexportables-container {
    display: none;
}

.is-activity .exportables-toggle {
    display: none;
}

.is-activity .header-buttons:last-child,
.is-lesson .header-buttons:last-child {
    visibility: hidden;
}

.fourxone .boxmeta-right {
    flex-grow: 1;
    width: 100%;
    padding-right: 100px;
}

.boxHeading a {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-style: inherit;
    font-weight: 800;
}

.boxHeading a:hover {
    text-decoration: underline;
}

.boxConts {
    /* display: flex; */
    justify-content: stretch;
    /* height: 100%; */
    flex-wrap: wrap;
    margin-top: 5px;
    grid-template-rows: [tabsrow] 2.1em [tabcontent] 1fr;
}

.boxConts tab- {
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    padding: 0.75em;
    grid-gap: 0.25em;
    /* backdrop-filter: blur(26px); */
}

.link-button {
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.85;
}

.link-button:hover {
    opacity: 1;
}

.fourxone .boxConts {
    flex-wrap: nowrap;
    grid-column: content;
}

.header-placement .boxConts {
    margin-bottom: 1.5em;
}


/*
.placement-topper {
position: absolute;
display: flex;
visibility: hidden;
justify-content: center;
align-items: center;
right: 0px;
font-size: 1.2em;
font-weight: bold;
z-index: 7;
background: inherit;
grid-column-start: trash;
}
*/

.chat-bubble {
    cursor: pointer;
}

#workspace-settings-button {
    font-size: 14px;
}

.hover-icons,
.trash-x {
    position: absolute;
    display: flex;
    /*visibility: hidden;*/
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    z-index: 10;
    background: inherit;
    grid-column-start: trash;
}


/*.drag-icon {
position: absolute;
margin-right: 2px;
padding-left: 7px;
text-align: center;
right: 0px;
z-index: 10;
top: 15px;
font-size: 1.2em;
opacity: 0.5;
display: inline;
}*/

.hover-icons {
    position: absolute;
    right: 5px;
    top: 5px;
    /* display: flex; */
    display: grid;
    /* visibility: hidden; */
    grid-template-columns: [edit] minmax(0, 1fr) [other] auto [comment] auto [trash] 1.5em;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    z-index: 10;
    background: inherit;
    z-index: 1;
}

.task-inline .hover-icons,
.compfam-inline .hover-icons,
.topic-inline .hover-icons {
    padding-top: 0em;
    padding-bottom: 0em;
    top: 0px;
}

.hover-icons>.hover-icon-selelect {
    grid-column: other;
}

.hover-icons>.chat-bubble {
    grid-column: comment;
}

.hover-icons>.edit-pencil {
    grid-column: edit;
}

.hover-icons>.hover-x {
    margin: 0 0.1em;
    padding: 0 0.5em;
    grid-column: trash;
}

.hover-icons>.trash-x {
    margin: 0 0.1em;
    padding: 0 0.5em;
    grid-column: trash;
}

.hover-icons>.trash-can {
    padding: 0 0.5em;
    grid-column: trash;
}

.hover-icons>.export-to-gdoc {
    padding: 0 0.5em;
    grid-column: other;
}

.hover-icons>.push-pin,
.hover-icons>.eye {
    padding: 0.5em;
}

.icon-indicator {
    position: absolute;
    height: 17px;
    width: 17px;
    font-size: 0.75em;
    top: -9px;
    right: -8px;
    border-radius: 50%;
    border: 2px solid;
    display: none;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.icon-indicator.with-unresolved {
    background-color: black;
    display: flex;
}

.icon-indicator.with-resolved {
    background-color: black;
    display: flex;
}

.commented-text {
    background: #FF000033;
    border-style: dotted;
    cursor: pointer;
    border-width: 1px;
}

.placement-cont .icon-indicator,
.course .icon-indicator {
    border-color: lightgrey;
    background: none;
}

.placement-task .icon-indicator,
.resource .icon-indicator {
    border-color: var(--placement-bg);
    background: none;
}

.icon-indicator.with-unresolved {
    border-color: #af65c2;
    color: white;
    background-color: #af65c2;
}

.icon-indicator.with-resolved {
    border-color: gray;
    color: white;
    background-color: gray;
}

.is-active .icon-indicator {
    background: #3aae86;
    border-color: #3aae86;
}

.chat-bubble {
    border-style: none !important;
    background-color: inherit !important;
}

.chat-bubble:hover {
    border-style: none !important;
    background-color: inherit !important;
}

.edit-pencil,
.chat-bubble,
.trash-can,
.export-to-gdoc,
.three-dots-circle {
    /*border: 1px outset;
border-radius: 3px;*/
    /*width: 1.9em;*/
    padding: 0 !important;
    text-align: center;
    position: relative;
    display: flex;
}

.placement-cont .edit-pencil,
.placement-cont .chat-bubble,
.placement-cont .trash-can,
.course .edit-pencil,
.course .chat-bubble,
.course .trash-can {
    border-color: var(--placement-bg);
}

.placement-task .edit-pencil,
.placement-task .chat-bubble,
.placement-task .trash-can {
    border-color: white;
}

.ptagInline,
.ptag-inline {
    border: 1px solid grey;
    padding: 0.2em;
    padding-right: 18px;
    border-radius: 5px;
    margin: 0.1em;
}

.trash-can {
    font-weight: bold;
}

.trashed .trash-can {
    transform: rotate(-180deg);
}

grabbable-:hover>.trash-x {
    visibility: visible;
}

.trash-x {
    top: 0;
    right: 0;
    padding: 0 0.1em;
    visibility: hidden;
}


/*.placement-cont .edit-pencil:hover, .placement-cont .chat-bubble:hover, .placement-cont .trash-can:hover, 
.course .edit-pencil:hover, .course .chat-bubble:hover, .course {
border: 1px outset white;
}*/

.placement-task,

/*.edit-pencil:hover,.chat-bubble:hover*/

.placement-task,
.placement-task
/*.trash-can:hover*/

{
    border: 1px outset lightgrey;
}

.trashed {
    opacity: 0.5;
    display: none;
    transform: scale(0, 0);
}

.showTrashed>.trashed {
    display: revert;
    transform: scale(1, 1);
}

.showTrashed .topic-search-result.trashed {
    display: inline-flex !important;
}

.trashed .trash-can {
    border: 1px inset white;
}

.hover-contained-icon {
    line-height: 1em;
    grid-row: 1;
}

grabbable-:hover>*>.hover-icons>.hover-contained-icon {
    display: unset;
}

grabbable-:hover>.hover-icons,
grabbable-:hover>.trash-x {
    visibility: visible;
    /*display: unset;*/
}

grabbable-:hover>.hover-icons>.hover-contained-icon {
    display: unset;
}

grabbable- .hover-contained-icon {
    display: none;
}

grabbable-:hover>.hover-contained-icon {
    display: unset;
}

grabbable- .hover-contained-icon.has-unresolved {
    display: unset;
}

grabbable- .hover-contained-icon.has-resolved {
    display: unset;
}

#html-viewer {
    display: inline-flex;
    flex-direction: column;
    width: 75%;
    padding: 1em;
    border: 1px solid lightgrey;
}

#edx-choice-fields {
    display: flex;
    flex-direction: column;
    width: 75%;
}

#edx-choice-fields label {
    border-bottom: 1px solid grey;
    padding: 1em;
    margin: 0;
}

#edx-choice-fields label:nth-of-type(2n) {
    background-color: whitesmoke;
}

#edx-choice-fields label:last-of-type {
    border: none;
}

.edx-preview-box {
    display: inline-flex;
    flex-direction: column;
    border: 1px inset lightgrey;
    max-height: 10em;
    overflow-y: auto;
    padding: 0.3em;
}

.edx-preview-box span {
    margin: 0.3em 0;
}

.inline-view.inline-editable {
    /*min-height: 100%;
height: 1.5em;*/
    min-height: 1.5em;
    height: 100%;
    min-width: 100%;
    /* background-color: #0001; */
    border-width: 1px;
    border-color: #0003;
    border-style: dashed;
    display: inline-block;
}

.comment-details {
    display: flex;
    margin-bottom: 5px;
    width: 100%;
    flex-grow: 1;
    grid-gap: 0.625em;
}

.commenter-initial {
    font-size: 1.125em;
    font-weight: bold;
    border-radius: 50%;
    height: 2em;
    width: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.comment-details>span:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.resolved-indicator {
    margin-left: auto;
}

#commenter,
.commenter-inline {
    /* min-width: 50vw; */
    width: 100%;
    /* max-width: 22em; */
    display: flex;
    margin-left: auto;
    flex-direction: column;
    /* margin-right: auto; */
    /* position: sticky; */
}

.commenter-inline {
    max-width: 70vw;
    border: 1px solid grey;
}

.authorable-to-comment {
    padding: 0.3em;
    border: 1px solid grey;
    border-radius: 5px;
    background-color: whitesmoke;
    margin-bottom: 0.3em;
}

#topic-comments .authorable-to-comment {
    display: none;
}

.threads,
.comment-boxes,
.comment-boxes * {
    display: flex;
    margin: 0.3em 0;
}

.comment-boxes form {
    flex-direction: column;
}

.comment input[type='submit'] {
    text-align: center;
    align-self: flex-start;
    padding: 0.5em;
    font-weight: bold;
    color: #8f8f8f;
}

.top-comment-box,
.thread-comment-box {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.top-comment-box,
.thread-comment-box {
    justify-content: space-between;
}

.active-thread,
.thread-comment-box {
    border-left: 1px solid grey;
    padding-left: 0.3em;
    margin-left: 0.3em;
}

.new-comment-box {
    resize: none;
    flex-grow: 1;
    margin: 1em 0;
}

.comment,
.top-comment-box {
    display: flex;
    flex-direction: column;
    padding: 0.3em;
    /* border-top: 1px solid lightgrey; */
    border-width: 2px;
    border-color: #e0e0e0;
    border-style: solid;
    /* justify-content: stretch; */
    /* align-content: stretch; */
    /* justify-items: stretch; */
    /* align-items: stretch; */
    border-radius: 5px;
    margin-top: 0.5em;
}

.comment .comment .resolved-indicator {
    display: none;
}

.new-comment-box {
    border: 1px solid lightgrey;
}

.thread {
    padding-left: 0.625em;
    border-left: 2px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

.thread:empty {
	display: none;
}

.comment {
    position: relative;
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    border-style: solid;
    background-color: white;
}

.inbox-hint {
    margin: 0.7em 0 0.3em 0.2em;
    font-style: italic;
    opacity: 0.9;
}

.inbox-hint:hover {
    text-decoration: underline;
}

.resolved-comment:hover {
    border-color: green;
}

.resolved-comment {
    background-color: #d2f5d2;
    font-style: italic;
    font-weight: lighter;
    /* opacity: .5; */
    filter: contrast(0.5) brightness(1.35);
}

.commenter-name {
    font-weight: bold;
}

.comment-time {
    font-size: 0.7em;
    color: #0009;
}

.thread-count,
.user-count {
    font-style: italic;
    /*color: grey; */
    text-align: end;
    font-size: 0.9em;
    opacity: 0.7;
}

.thread-count:hover {
    opacity: 0.9;
    text-decoration: underline;
}

.active-comment-thread.resolved-comment {
    border-color: green;
}

.comment-tag-user-input {
    background-color: #E6E1FF;
    border: 1px solid #a795ff !important;
}

.subscriber {
    background-color: #E6E1FF;
    border: 1px solid #a795ff;
    border-radius: 10px;
    padding: 0.2em;
    align-items: center;
}

.user-to-tag .trash-x {
    visibility: visible;
    position: static !important;
    margin-left: 0.2em;
}

.at-icon {
    border: 1px solid #a795ff;
    border-radius: 50%;
    padding: 0.1em;
    color: #a795ff;
    background-color: #E6E1FF;
    cursor: pointer;
}

.at-icon:hover {
    border-style: outset;
}

.at-icon.button-pressed {
    border-style: inset;
}

.placement {
    position: relative;
    /*width: 24.5em;
border-width: 1px;
border-style: solid;
border-color: #0006;
border-bottom-width: 0px;
filter: drop-shadow(0px 0px 3px #3335); */
    flex-basis: 1;
    border-radius: 0px;
    margin: 9px 0;
    /* margin-bottom: 0px; */
}

.placement-cont {
    /*  display: grid !important;*/
    grid-template-columns: [content] 1fr [meta] 0.3em;
    grid-template-rows: [placementself] auto [children] auto;
    position: relative;
    /*width: 24.5em;*/
    width: 100%;
    display: flex;
    grid-gap: 0.25em;
    flex-direction: column;
    background-color: var(--placement-bg);
    /* color: var(--placement-font); */
    padding: 1em;
    padding-bottom: 0px;
    grid-row: content;
    height: 100%;
    /* border-right: none; */
    /* border-left: none; */
    /* border-style: solid; */
    /* border-bottom: none; */
    /* border-width: 1px; */
    /* border-color: #aaa; */
    /* border-color: white; */
}

.is-activity .time-rollup {
    display: none;
}

.placement-cont .focus-bound,
.exportable:not(.pagebreak) .focus-bound {
    grid-gap: 0.125em;
    margin-top: -2em;
    display: flex;
    flex-direction: column;
}

.exportable:not(.pagebreak) .focus-bound {
    grid-gap: 0.6875em;
}

.sticky-header {
    position: sticky;
}

.header-placement {
    width: 100%;
    z-index: 10;
    border: none;
    /*padding: 0.7em 0;*/
    margin: 0em;
    /*overflow: hidden;*/
    background: #0000;
}

.header-buttons-row {
    display: flex;
    position: absolute;
    z-index: 2;
    bottom: -2.25em;
    right: 0.5em;
    overflow: hidden;
    grid-gap: 0.75em;
}

.header-buttons {
    display: flex;
    border: solid 2px #e0e0e0;
    border-radius: 18px;
    overflow: hidden;
    background-color: white;
}

.header-buttons button {
    border: none;
    border-right: 1px solid #e0e0e0;
    background: none;
    padding: 0.75em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.header-buttons button:last-child,
.header-buttons button.text-toggle {
    border-right: none;
}

.header-placement .placement-cont {
    width: 100%;
    /*overflow: hidden;*/
    align-items: left;
    justify-content: stretch;
    justify-items: stretch;
    padding: 1em 1.5em;
    grid-gap: 0.5em;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #fff9;
    backdrop-filter: blur(4px);
}

.header-placement tab-container {
    /*display: none;*/
}

#placement-nav-display {
    padding-bottom: 5em;
    flex-grow: 1;
    width: 100%;
}

.placement .placement-nav-arrows {
    display: none;
}

.header-placement .placement-nav-arrows {
    position: relative;
    /* left: 5px; */
    display: flex;
    justify-self: stretch;
    align-self: stretch;
    /* align-items: center; */
    font-size: 1.2em;
    font-weight: bold;
    width: 100%;
    grid-column: arrow;
    z-index: 10;
    grid-row-start: 1;
    flex-grow: 1;
    /* background: radial-gradient(black, transparent); */
}

.placement-up-arrow {
    border: 1px outset var(--placement-bg);
    border-radius: 3px;
    width: 100%;
    padding: 0.75em 0.35em !important;
    text-align: center;
}

.placement-up-arrow:hover {
    border-color: white;
}

#activity-heading .header-placement {
    width: 30em;
    margin: 0 auto;
}

.header-placement .boxHeading {
    font-weight: bold;
    font-size: 1.25em;
    /* line-height: 1em; */
    /*height: 10px;*/
    display: flex;
    width: 100%;
    color: #1f1f1f;
    overflow: hidden;
    text-overflow: ellipsis;
}

#placement-appearances {
    flex-grow: 1;
}

#task-appearances {
    flex-grow: 0.3;
    min-width: 15em;
}

#appearances {
    display: flex;
}

.tinyplacements {
    display: flex;
    flex-wrap: wrap;
}

.dropzone {
    background: none !important;
    color: black;
    padding: 0.4em 0.3em;
    border: 1px inset grey;
    border-radius: 3px;
    display: flex;
    /*min-height: 5em;*/
    flex-direction: column;
    width: 100%;
}

.dropzone.bank {
    width: 100%;
}

.compfam-dc,
.compfam-containment-hint {
    background-color: #bbbbbb;
    /*formerly #cca6a6;*/
}

.cc-dc,
.cc-containment-hint {
    background-color: #82bcff;
}

.task-dc,
.task-containment-hint {
    z-index: 20;
    background-color: #c6c6e4;
}

.topic-dc,
.topic-containment-hint {
    background-color: #636460;
}

.boxConts .dropzone {
    /*border: 1px inset var(--placement-bg);*/
    flex-grow: 1;
    grid-gap: 0.25em;
    /* background-color: #ececec; */
    /* width: 50%; */
    border: none;
    padding: 7px;
    align-items: flex-end;
}

.placement>span {
    padding: 0.3em;
}

.std {
    font-size: 0.9em;
    padding: 0.3em;
    cursor: pointer;
    display: inline;
    border-bottom: 1px solid grey;
}

.stdIdent {
    font-size: 0.9em;
    padding: 0.3em;
    margin: 0 0.3em;
    border-bottom: 1px solid grey;
    border-radius: 2px;
    cursor: grab;
}

.stdIdent:hover,
.std:hover {
    background-color: lightgrey;
}

.used {
    background-color: gainsboro;
}

.stdDesc {
    max-width: 75%;
    /*	line-height: 0;*/
}

.lessonStarget {
    display: inline-flex;
    flex-direction: column;
    border: 1px solid grey;
    border-radius: 5px;
}

.stargetCondensed {
    cursor: pointer;
    white-space: nowrap;
}

.target-info-table-cell {
    display: table-cell;
    border-style: solid;
    border-width: 1px;
    border-color: #0004;
    background-color: white;
    height: 1.5em;
    /*God I hate CSS.*/
}

.branch {
    list-style: none;
    padding: 0;
    margin: 0;
}

.branchLabel {
    font-weight: bold;
}

.courseCompList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: auto auto;
}

.courseCompList li {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: grey;
}

.courseCompList label {
    margin: 0;
}

.courseCompList label * {
    margin: 0;
}

input:checked+label {
    color: black;
}

.stdList {
    list-style: none;
    margin: 0;
    padding: 0;
}

#target-description-shared-input {
    background-color: white;
    resize: vertical;
}

.stargetList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stargetList li {
    margin: 0.25em;
    padding: 0.25em;
}

.gridBubble {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5em;
    background-color: white;
    border: 1px solid gainsboro;
    border-radius: 3px;
}

.gridBubbleHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5em;
    background-color: var(--placement-bg);
    color: white;
    border: 1px solid var(--placement-bg);
    border-radius: 3px;
    font-weight: bold;
}

.darkHint:hover {
    background-color: #0000007a;
    box-shadow: 0px -3px 4px -1px #00000054, 0px 3px 4px -1px #00000054;
    transition: .2s ease;
    font-weight: 300;
    cursor: pointer;
}

.closed .collapsible-body {
    display: none !important;
}

.workspace-horiz-list .lexical-button {
    width: 0.1em;
    padding: 0.6em 1em 0.8em 1em;
    margin: 0.3em 0.3em 1.5em !important;
}

.workspace-horiz-list a:link,
.workspace-horiz-list a:visited,
.workspace-horiz-list a:hover,
.workspace-horiz-list a:active {
    color: black;
    text-decoration: none;
}

.collapsible-anchor:before {
    content: ' \0025BE';
    padding: 0 0.25em;
}

.closed .collapsible-anchor:before {
    content: ' \0025B8';
}

.rec-list {
    padding: 0.3em 0;
    display: flex;
    flex-direction: column;
}

.rec-list>span {
    padding: 0.2em 0;
}

.diff-ins {
    background-color: lightgreen;
    font-weight: bold;
}

.diff-del {
    background-color: white;
    /*old pink*/
    text-decoration: line-through;
    font-style: italic;
}

.dragOk {
    background-color: lightblue !important;
    border: 1px solid var(--placement-bg);
}

.dragOk * {
    visibility: hidden;
}

.pending {
    opacity: 0.5;
}

.active {
    display: block !important;
    transform: scale(1, 1) !important;
    opacity: 1 !important;
}

.posDrop {
    height: 15px;
    background-color: gainsboro;
}

.posDropVert {
    width: 15px;
    background-color: gainsboro;
    border-radius: 2px;
}

.nopacity {
    opacity: 0;
}

.invisible {
    visibility: hidden;
}

.placementHeading {
    font-size: 0.9em;
    font-weight: bold;
}

.placementDesc {
    font-style: italic;
}

.o-description {
    width: 100%;
    resize: vertical;
    min-height: 10em;
}

.o-task {
    width: 100%;
    resize: vertical;
}

@keyframes msg {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

#standard-info-container {
    width: 100%;
    margin: auto auto 15px auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.standard-description {
    font-size: 0.85em !important;
    width: fit-content;
    background-color: inherit;
}

.cc_label_container {
    display: inline-flex;
    background: #0B5394FF;
    justify-self: stretch;
    margin: 1px 0px 1px 0px;
    transition: background-color 0.5s ease;
}

.cc_label {
    color: white;
    text-align: center;
    margin: auto;
    /*background-color: inherit;*/
}

.stargetset_container {
    border-width: 0px 1px 2px 1px;
    padding: 5px;
    overflow-y: auto;
    background-color: white;
    border-color: gray;
    border-style: solid;
}

.starget_scale:hover {
    box-shadow: 0px 0px 22px -13px black inset;
}

.scale_label_container {
    display: inline-flex;
    background: #0B5394FF;
    justify-self: stretch;
    margin-left: 1px;
}

.scale_level {
    color: white;
    text-align: center;
    margin: auto;
}

.selected-elem {
    border-color: #16ccff !important;
    z-index: 50;
    filter: drop-shadow(0px 0px 4px #16ccff) drop-shadow(0px 0px 2px #16ccff) drop-shadow(0px 0px 5px #0008) !important;
}

.selected-cell {
    border-color: #daab16 !important;
    border-width: 2px 2px 2px 2px !important;
    cursor: default;
    box-shadow: 0px 0px 19px -8px #daab16 inset !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

.selected-cell:hover {
    box-shadow: none;
}


/*.extension-starget {
box-shadow: 0px 0px 25px 2px #0000001f inset, 0px 0px 10px 2px #0055ff1f inset,
0px 0px 11px 0px #0055ff4f inset, 0px 0px 3px 0px #0055ffff !important;
}*/

.lexical-button {
    margin: auto !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: min-content;
    text-align: center;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 1.5em !important;
    line-height: 0.9em;
    border-color: #00000061;
    border-width: 1px;
    border-style: solid;
    border-width: 0px !important;
    border-radius: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lexical-button-inline {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-color: #00000061;
    border-width: 1px;
    background-color: #0000 !important;
    border-style: solid;
    border-width: 0px !important;
    border-radius: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/** on elements with no background applied, 
the semi-transparent application of a background
will darken the button area. On elements
with a background applied, by using filters to darken
and repair contrast*/

.lexical-button:hover,
.lexical-button-inline:hover,
.trash-x:hover,
.hover-x:hover,
.hover-contained-icon:hover {
    /*-webkit-filter: url('customFilters.svg#hoverDarken');*/
    filter: brightness(0.8) contrast(1.5);
    background-color: #00000033 !important;
    cursor: pointer;
}

.lexical-button:active,
.lexical-button-inline:active,
.trash-x:active,
.hover-x:active,
.hover-contained-icon:active {
    /*-webkit-filter: url('customFilters.svg#clickDarken');*/
    filter: brightness(0.7) contrast(1.8);
    background-color: #00000055;
    cursor: pointer;
}

.add-new-starget {
    /*margin: auto !important;
display: block !important;
width: min-content;
text-align: center;
text-shadow: 0px 1px 2px white, 1px 1px 2px white, 1px 1px 2px white,
1px 1px 2px white, 1px 1px 2px white, 1px 1px 1px white, 0px 1px 1px white,
-1px 0px 3px #0000008f;
padding-left: 10px !important;
padding-right: 10px !important;
font-size: 1.5em !important;
line-height: 0.9em;
box-shadow: -1px -1px 21px 2px #0000001f inset, 1px 1px 10px 2px white inset,
-1px -1px 2px 0px #00000042, 2px 2px 3px 0px #ffffff !important;*/
    background-color: #fff !important;
}


/*.add-new-starget:hover {
margin: auto !important;
width: min-content;
text-align: center;
transform: translate(0px, 0.5px) !important;*/


/*box-shadow: 4px -3px 7px -4px #ffd141 inset, -1px -1px 14px -5px #0000002b inset, 1px 1px 7px 1px white inset, 1px 1px 7px 0px #00000065 !important;/
}*/

.engraved {
    background-color: white;
    border-radius: 5px;
    border-color: gray;
    border-width: 0px !important;
    border-style: solid;
    margin: 2px 2px 5px 2px;
    padding: 5px;
    font-size: 0.9em;
    cursor: pointer;
    box-shadow: -2px -2px 4px 1px #0000002A inset, 3px 3px 3px 0px white inset, -1px -1px 2px 0px #00000042, 2px 2px 3px 0px #ffffff !important;
    transition: translate(0px, 0px) !important;
}

.engraved:hover {
    border-color: #0B5394FF;
}

.context-hint {
    position: relative;
    z-index: 0;
    grid-row: 1;
    border-radius: 3px 0px 0px 0px;
    margin-left: -2px;
    margin-right: 2px;
    margin-bottom: -1px;
    margin-top: -0px;
    grid-column: ehint;
}

.gap-warning-hint {
    background-color: #cb000073;
}

.gap-warning-tt {
    color: #600808 !important;
    text-align: center;
    color: #cb000073;
    background-color: #ffbbbbc7;
    box-shadow: 0px 0px 12px 0px #9c2a2a;
    pointer-events: none !important;
}

.extension-hint {
    background-color: #4583fe;
}

.extension-tt {
    color: #0B5394FF;
    background-color: #9bb1fcd5;
    pointer-events: none !important;
}

#starget-grid {
    display: grid;
    grid-template-columns: [concept] 5em/*[prevStd] 0.8fr*/
    [level-Fluency] 1fr [level-Induction] 1fr [level-Recognition] 1fr [level-Execution] 1fr/*[nextStd] 0.8fr*/
    ;
    row-gap: 0px;
    flex-basis: 60em;
    flex-grow: 1;
    margin-right: 15px;
    padding-left: 5px;
    max-height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.is-prepopulated {
    filter: drop-shadow(0px 0px 2px #00f) !important;
}

.result-container {
    overflow: auto;
}

.inner-pin-search-container {
    display: grid;
    grid-template-rows: [append] max(3em) [search] 3em [results] minmax(40vh, 1fr) [buttons] 2em;
    padding: 20px 10px 10px 10px;
    width: 70vw;
    max-height: 90vh;
    row-gap: 0.3em;
}

.pin-search-buttons {
    grid-row: buttons;
    display: flex;
    justify-content: space-between;
}

.pin-search-append-dom {
    grid-row: append;
    display: flex-inline;
}

.pin-search-new {
    display: inline !important;
    cursor: pointer;
}

.pin-search-new-button-row {
    display: flex;
    justify-content: center;
}

.pin-searchfields-container {
    grid-row: search;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    /*  margin: 0px 5px 0px 5px;*/
}

.pin-search-field {
    flex-grow: 1;
    margin-right: 10px;
}

.displayed-results button {
    width: 100%;
}

.fadeable {
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.no-link-hint {
    text-decoration: none;
    color: inherit;
    background-color: inherit;
}

.flashsubliminal {
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.flashfast {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.overlay-transition {
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.overlay-transition-slow {
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.flashopacity {
    -webkit-transition: backdrop-filter 0.42s ease, opacity 0.42s ease, filter 0.42s ease, left 0s ease, top 0s ease;
    -moz-transition: backdrop-filter 0.42s ease, opacity 0.42s ease, filter 0.42s ease, left 0s ease, top 0s ease;
    -o-transition: backdrop-filter 0.42s ease, opacity 0.42s ease, filter 0.42s ease, left 0s ease, top 0s ease;
    -ms-transition: backdrop-filter 0.42s ease, opacity 0.42s ease, filter 0.42s ease, left 0s ease, top 0s ease;
    transition: backdrop-filter 0.42s ease, opacity 0.42s ease, filter 0.42s ease, left 0s ease, top 0s ease;
}

.flashmed {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.reorderTransition {
    -webkit-transition: transform 1s ease, top 1s ease, left 1s ease !important;
    -moz-transition: transform 1s ease, top 1s ease, left 1s ease !important;
    -o-transition: transform 1s ease, top 1s ease, left 1s ease !important;
    -ms-transition: transform 1s ease, top 1s ease, left 1s ease !important;
    transition: transform 1s ease, top 1s ease, left 1s ease !important;
}

.flashslow {
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
}

.background-flash {
    margin: -70px 2px 2px 2px;
    opacity: 0.4;
    background-color: #ffe89d !important;
    border-color: #daab16 !important;
    color: #3e69b0 !important;
}

.slide-in {
    margin: -70px 5px 5px 5px !important;
    opacity: 0 !important;
}

.invisible {
    filter: opacity(0) !important;
}

.opaque {
    filter: opacity(1) !important;
}

.tucked-away {
    visibility: hidden;
    backdrop-filter: blur(0px);
}

.super-big {
    transform: translate(0px, -3000px) scale(3, 1.1) !important;
    filter: opacity(0.5);
}

.half-height {
    transform: scale(0.7, 0.1);
    filter: opacity(0.3);
}

.no-height {
    transform: scale(1.0, 0.0);
    max-height: 0em !important;
    background-color: white;
    /*transition: transform 0.5s ease, max-height 0.5s ease;*/
}

@keyframes squisher {
    from {
        max-height: 100em;
        transform: scale(1, 1);
    }
    to {
        max-height: 0em;
        transform: scale(1, 0);
    }
}

@keyframes stretcher {
    from {
        max-height: 0em;
        transform: scale(1, 0);
    }
    to {
        max-height: 100em;
        transform: scale(1, 1);
    }
}

@keyframes glower {
    0% {
        filter: drop-shadow(0px 0px 0px orange) drop-shadow(0px 0px 0px orange);
    }
    25% {
        filter: drop-shadow(0px 0px 5px orange) drop-shadow(0px 0px 0px orange);
    }
    50% {
        filter: drop-shadow(0px 0px 5px orange) drop-shadow(0px 0px 5px orange);
    }
    75% {
        filter: drop-shadow(0px 0px 5px orange) drop-shadow(0px 0px 0px orange);
    }
    100% {
        filter: drop-shadow(0px 0px 0px orange) drop-shadow(0px 0px 0px orange);
    }
}

@keyframes nudge {
    0% {
        transform: translate(0px, 0px);
    }
    5% {
        transform: translate(-6px, 0px);
    }
    15% {
        transform: translate(6px, 0px);
    }
    30% {
        transform: translate(-5px, 0px);
    }
    45% {
        transform: translate(5px, 0px);
    }
    60% {
        transform: translate(-4px, 0px);
    }
    75% {
        transform: translate(3px, 0px);
    }
    90% {
        transform: translate(-2px, 0px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes nudgeInfo {
    0% {
        filter: opacity(0) drop-shadow(0px 0px 0px #800);
    }
    5% {
        filter: opacity(0.2) drop-shadow(0px 0px 25px #800);
    }
    15% {
        filter: opacity(0.7) drop-shadow(0px 0px 5px #800);
    }
    30% {
        filter: opacity(0.9) drop-shadow(0px 0px 23px #800);
    }
    45% {
        filter: opacity(1) drop-shadow(0px 0px 5px #800);
    }
    50% {
        filter: opacity(1) drop-shadow(0px 0px 10px #800);
        ;
    }
    60% {
        filter: opacity(0.8) drop-shadow(0px 0px 20px #800);
    }
    100% {
        filter: opacity(0) drop-shadow(0px 0px 0px #800);
        ;
    }
}

.nudgeInfo {
    position: fixed;
    display: none;
    color: white;
    z-index: 999;
}

.nudgeInfo.showing {
    display: block !important;
    background-color: #600;
    animation: nudgeInfo 2s 1;
}

#details {
    flex-basis: 15em;
    margin: 5px 5px 0px 5px;
    flex-grow: 1;
    display: flex !important;
    display: none;
    background-color: white;
    flex-wrap: wrap;
    border-radius: 10px;
    flex-grow: 50;
    min-width: 60vw;
    justify-content: space-evenly;
}

.button-area {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    display: flex;
}

#tb-questions-container {
    flex-direction: column;
}

#tb-my-description {
    background-color: var(--ptask-col);
    padding: 0.8em;
    border-width: 1px;
    border-radius: 5px;
    border-color: #a795ff;
    margin: 2px 0;
    min-height: 3em;
    height: fit-content;
    border-style: solid;
    display: grid;
    /*grid-column-start: 1;
grid-column-end: 3;*/
    grid-template-columns: [standard] 15px [title] 1fr [approach] 5em;
}

.skim-mode .textual-task-info {
    display: none;
}

.overlay-container {
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    /* z-index: 10; */
    bottom: 0;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    background-color: rgb(0 0 0 / 24%);
    /* grid-template-columns: [a] minmax(0, 0.2fr) [b] minmax(10em, 1fr) [c] minmax(0, 0.2fr); */
    /* overflow-y: auto;*/
    z-index: 9999;
    filter: opacity(0);
    padding: 2em;
}

.details-container {
    /*margin: 5px 5px 0px 5px;*/
    flex-grow: 0;
    display: flex !important;
    display: none;
    position: relative;
    margin: auto;
    /* width: 80vw; */
    max-width: 80vw;
    max-height: 90vh;
    background-color: var(--page-background);
    /* min-height: 80vh; */
    padding: 10px;
    flex-direction: column;
    border-radius: 10px;
}

.details-container>*:first-child {
    overflow-y: auto;
    /* border-style: solid; */
}

.expandable-details {
    width: 100%;
    /* height: 100px; */
    /* background-color: red; */
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 3;
}

.expandable {
    grid-column: b;
    width: min-content;
    min-width: fit-content;
    flex-grow: 0;
}

.expanded {
    transform: translate(0, 0) scale(1, 1) !important;
    filter: opacity(1) opacity(1) drop-shadow(0px 0px 48px #0005) !important;
    visibility: visible !important;
    justify-items: stretch;
    justify-content: stretch;
    align-content: stretch;
    align-items: stretch;
    height: fit-content;
    /* max-height: 87vh; */
}

#tb-back-button {
    display: inline-block;
    justify-self: baseline;
    line-height: 0;
    border-radius: 157px 0px 0px 152px;
    border-style: groove;
}

#task-browser-meta {
    /*grid-column-start: 1;
grid-column-end: 3;*/
    grid-row: 1;
    display: flex;
    justify-content: space-between;
}

#task-browser-meta .chat-bubble {
    display: inline-block !important;
    line-height: 0em;
    height: 1.2em;
    padding: 11px !important;
    margin: -0.6em 0em 0em 0em !important;
}

#tb-meta {
    grid-column: info;
    grid-row: 3;
}

.standard-toggle {
    height: 15px;
    width: 15px;
    margin-left: -5px;
    margin-top: -8px;
    opacity: 0.2;
    grid-column: standard;
    filter: saturate(0) brightness(0);
    cursor: pointer;
}

.isStandard .standard-toggle {
    opacity: 1;
    filter: brightness(1) saturate(1) drop-shadow(0px 0px 1px green) drop-shadow(0px 0px 1px green) drop-shadow(0px 0px 1px green);
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.3em;
    max-width: 100%;
}

h3 {
    font-size: 1.1em;
}

h1.big {
    font-weight: bold;
    font-size: 1.1em;
}

.task-graph-explorer {
    max-width: 50em;
    grid-column: topology;
    grid-row-start: 3;
    grid-row-end: 5;
    margin-top: 15px;
}

.hover-icon-select label {
    display: inline-block;
    font-size: 0.7em;
    margin: -5px 0em 0em 0em;
}

.textual-task-info {
    min-width: 100%;
    grid-column-start: 1;
    grid-column-end: 4;
    display: grid;
    font-weight: normal;
    grid-template-columns: [given] 1fr [asked] 1fr [can] 1fr;
    margin-top: 16px;
    font-size: 0.8em;
}

.desc-column {
    grid-template-rows: 1em minmax(0, 1fr);
    justify-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    align-content: stretch;
    display: grid;
}

.desc-given {
    grid-row: 1;
    grid-column: given;
}

.desc-asked {
    grid-row: 1;
    grid-column: asked;
}

.desc-can {
    grid-row: 1;
    grid-column: can;
}

.tasks_disabled .needs-ws-tasks,
.gac_disabled .needs-ws-gac {
    display: none !important;
}

.needs-not-ws-gac {
    display: none !important;
}

.gac_disabled .needs-not-ws-gac {
    display: block !important;
}

.gac-desc {
    text-align: center;
}

.gac-desc .inline-view {
    min-height: 2em;
}

.inline-editable {
    min-height: 1em;
    min-width: 2em;
}

.desc-given .gac-desc {
    padding-right: 2px;
    border-right-style: solid;
    border-right-width: 1px;
}

.desc-asked .gac-desc {
    padding-right: 2px;
    padding-left: 2px;
}

.desc-can .gac-desc {
    border-left-style: solid;
    border-left-width: 1px;
}

.textual-desc {
    display: grid;
    grid-template-columns: [given] 1fr [asked] 1fr [can] 1fr;
}

.hover-icon-select {
    display: inline-block;
    align-self: center;
    flex-grow: 0;
    padding-left: 4px;
    border-color: #0005;
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    grid-column: other;
}

.hover-icon-select select {
    align-self: center;
    /*min-width: max-content;*/
    margin: 0em;
}

.bdheading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.bdheading * {
    display: inline-block;
}

.ordered-subtasks {
    grid-template-columns: [arrow] 10px [taskinfo] 1fr;
    margin-left: 10px;
    display: grid;
}

.ordered-supertasks {
    grid-template-columns: [arrow] 10px [taskinfo] 1fr;
    display: grid;
    z-index: 20;
}

#subtask-edit-link-container {
    display: flex;
    justify-content: space-between;
}

#subtask-edit-link {
    display: inline-block;
    text-decoration: none;
    color: #000000a3;
    margin: 0em !important;
}

.recursive-subtask-expander {
    border-style: solid;
    border-width: 0.5px;
    border-color: #00000020;
    min-height: 50px;
    padding-top: 5px;
    padding: 5px;
    position: relative;
    z-index: 5;
}

.supertask-edit-link-container {
    display: flex;
    justify-content: space-between;
}

.supertask-edit-link {
    display: inline-block;
    text-decoration: none;
    color: #000000a3;
    margin: 0em !important;
}

.recursive-supertask-expander {
    border-style: solid;
    border-width: 0.5px;
    border-color: #00000020;
    min-height: 50px;
    padding-top: 5px;
    padding: 5px;
    position: relative;
    z-index: 5;
}

.subtaskbase {
    margin-left: -5px;
    min-height: 3em;
}

tab-selector[disabled="true"] {
    display: none;
}

tab-[disabled="true"] {
    display: none;
}

#task-browser-content tab-selector {
    background-color: #0005;
}

#task-place-and-browse-module {
    /* display: contents; */
    /*grid-template-rows: [placements] min-content [taskbrowser] 1fr;
flex-direction: column;
justify-content: stretch;
height: 100%;
width: 100%;*/
    /* height: 100px; */
    /* width: 100px; */
    height: min-content;
}

.viability-info-container {
    height: 100%;
    display: none;
    border-radius: inherit;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    /* transition-duration: 300ms;*/
    /* display: grid; */
    /* display: grid; */
}

.coverage-color,
.assessment-color {
    height: 50%;
}

.viability-info-container .coverage-color {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.viability-info-container .assessment-color {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.viability-task {
    /* height: 16px; */
    /* width: 16px; */
    /* border-style: solid; */
    /* border-style: solid; */
    /* border-width: 1px; */
    /* border-color: black; */
    display: grid;
    padding-right: 14px;
    position: relative;
    grid-template-columns: [handlespace] 1.5em [title] 1fr [endspace] 0em [extra] 4em !important;
    z-index: 5;
    border-radius: 9px;
    width: 100%;
    color: #1f1f1f;
    /* font-size: 0.9em; */
    /* grid-column-gap: 4px; */
}

.viability-text {
    border-style: solid;
    border-width: 2px;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 4px;
    background-color: inherit !important;
}

.viability-pretext {
    background-color: inherit !important;
}

.viability-pretext:after {
    content: "This content is ";
}

.viability-reason {
    background-color: inherit !important;
}

.assessment-text {
    border-style: solid;
    border-width: 2px;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 4px;
    background-color: inherit !important;
}

.assessment-pretext {
    background-color: inherit !important;
}

.assessment-pretext:after {
    content: "This content is ";
}

.assessment-reason {
    background-color: inherit !important;
}


/*for subtasks which have been covered in a previous 
activity
*/

.viable {
    background-color: #093A74;
    /*formerly #8CBA80*/
}

.viable.viability-text {
    border-color: #093A74;
    /*formerly #8CBA80*/
    box-shadow: 0px 0px 5px #0005;
}

.viable.viability-text:after {
    content: "leveraged";
}

.viable.viability-reason:after {
    content: " here. It has been introduced in a prior activity, and may be used toward the parent content.";
}

.viable.assessment-text {
    border-color: #093A74;
    /*formerly #8CBA80*/
    box-shadow: 0px 0px 5px #0005;
}

.viable.assessment-text:after {
    content: "recalled";
}

.viable.assessment-reason:after {
    content: " here. It has been directly practiced/assessed in a prior placement, and is now being leveraged.";
}


/*
for subtasks which have yet to be covered in 
any activity
*/

.unviable {
    background-color: white;
    /*old pink*/
}

.unviable.viability-pretext:after {
    content: "This content is " !important;
}

.unviable.viability-text {
    border-color: white;
    /*old pink*/
    box-shadow: 0px 0px 5px #0005;
}

.unviable.viability-text:after {
    content: "not yet covered";
}

.unviable.viability-reason:after {
    content: " in any prior or descendant activity. It may be unsafe to compose toward the parent content.";
}

.unviable.assessment-text {
    border-color: white;
    /*old pink*/
    box-shadow: 0px 0px 5px #0005;
}

.unviable.assessment-text:after {
    content: "assumed";
}

.unviable.assessment-reason:after {
    content: " here. This content has not been directly assessed in any prior or descendant placements."+ " It may be unsafe to compose toward the parent content.";
}


/*
for subtasks which are for the first time 
being covered 
in an activity under this placement
*/

.introduced {
    background-color: #2269BF;
    /* formerly #6D9DC5*/
}

.introduced.viability-text {
    border-color: #2269BF;
    /* formerly #6D9DC5*/
    box-shadow: 0px 0px 5px #0005;
}

.introduced.assessment-text {
    border-color: #2269BF;
    /* formerly #6D9DC5*/
    box-shadow: 0px 0px 5px #0005;
}

.introduced.viability-text:after {
    content: "introduced";
}

.introduced.viability-reason:after {
    content: " here. It is covered for the first time in a descendant activity of this placement.";
}

.introduced.terminal.viability-reason:after {
    content: " here. It is covered for the first time in this activity.";
}

.introduced.assessment-text:after {
    content: "attempted";
}

.introduced.assessment-reason:after {
    content: " here. It is assessed for the very first time in a descendant activity of this placement.";
}

.introduced.terminal.assessment-reason:after {
    content: " here. It is assessed for the very first time in this activity.";
}

.introduced.viable {
    background-color: #2269BF;
    /*formerly #00FF00*/
}

.introduced.viable.assessment-text {
    border-color: #2269BF;
    /*formerly #00FF00*/
    box-shadow: 0px 0px 5px #0005;
}

.introduced.viable.assessment-text:after {
    content: "verified";
}

.introduced.viable.assessment-reason:after {
    content: " here. It has been assessed in a prior ativity, and is assessed again in a descendant placement.";
}

.introduced.terminal.viable.assessment-reason:after {
    content: " here. It has been assessed in a prior activity, and is assessed again in this activity.";
}

.status-ribbon {
    grid-column: status;
    grid-row-start: 1;
    grid-row-end: 3;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    margin-top: -6px;
    margin-bottom: -6px;
    margin-left: -3px;
    overflow: hidden;
    border-radius: 5px 0px 0px 5px;
}


/*for tasks which have been declared 
in the current placement, but not yet explicitly 
covered in an activity*/

.pending-here {
    background-color: #a5abb1;
    /*old #FCDE9C yellow*/
    border-bottom: 1px black solid;
}

.pending-here.viability-text {
    border-color: white;
    /*old #FCDE9C yellow*/
    box-shadow: 0px 0px 5px #0005;
}

.pending-here.viability-text:after {
    content: "intendending introduction";
}

.pending-here.viability-reason:after {
    content: ". It is assigned to this placement, or one of its descendants, but has not yet been assigned to a descendant activity.";
}


/*for tasks which have been declared 
in a previous placement, but not yet explicitly 
covered in an activity*/

.pending-previous {
    background-color: #e2e6e7;
    border-bottom: 1px black solid;
}

.pending-previous.viability-text {
    border-color: #e2e6e7;
    box-shadow: 0px 0px 5px #0005;
}

.pending-previous.viability-text:after {
    content: "pending prior introduction";
}

.pending-previous.viability-reason:after {
    content: " here. It is intended in a previous placement, but has not been assigned to an activity within that placement!";
}

.placement-goal {
    margin: 2px 5px 2px 0px;
    grid-template-rows: [content] 1fr [else] 0em;
    grid-template-columns: [handle] 1.2em [content] minmax(0, 1fr);
    /* height: 200px; */
}

.placement-task,
.header-task,
.goal-grabbable {
    /* height: 3.4em; */
    /* height: auto; */
    width: 100%;
    border-radius: 5px;
    background-color: var(--ptask-col);
    /* border-color: #093A74; */
    border-style: none;
    /* border-width: 3px; */
    padding: 12px 14px 10px 16px;
    border-radius: 8px;
    /* padding: 0.3em; */
    /*display: grid;*/
    background: #f5f5f5;
    z-index: 1;
    grid-column-gap: 4px;
    padding-left: 15px;
    grid-template-columns: [type] 0.5em [title] minmax(10px, 1fr);
    position: relative;
    /* height: 100%; */
    /* grid-template-rows: [tasktext] 1.5em [subtaskviability] 1em; */
}

drop-container.placement-subtask-info {
    flex-wrap: wrap;
    grid-row: 2;
    grid-column: title;
}

#cc-info-associated-tasks {
    flex-direction: column;
}

section #topics {
    padding: 0.3em;
    overflow: auto;
    flex-shrink: 0.7;
    flex-grow: 1;
    background-color: #636460;
    color: white;
    text-align: center;
    flex-basis: 10em;
    height: 100%;
}

.taskDesc-approach-selector,
.depth-selector {
    margin: 0em;
    max-width: 6em;
}

.approach-selector {
    max-width: 5em;
}

.depth-icon {
    height: 2em;
    width: 2.5em;
    grid-column: depth;
    float: left;
}

.depth-icon img {
    width: 2.5em;
    height: 2.5em;
}


/*.depth-icon*/

.intended {
    opacity: 1 !important;
}


/*.depth-icon*/

.incidental {
    opacity: 0.3;
}


/*.depth-icon*/

.intended.incidental {
    filter: drop-shadow(0px 0px 2px #0F0) drop-shadow(0px 0px 2px #0F0);
}

#task-browser-iframe {
    height: 100%;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: #DDD;
    padding: 10px;
    grid-row: taskbrowser;
    grid-row: 1;
}

#detail-poppin .poppin-invisible-spacer {
    min-width: 15em;
    width: 40vw;
}

#detail-poppin .tabrow {
    grid-row-end: 2;
}

#detail-poppin tab-container {
    background-color: unset;
    height: 100%;
    margin-top: 4px;
}

.poppin {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 500;
    max-width: min-content;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    pointer-events: none;
    justify-content: flex-end;
}

.poppin-invisible-spacer {
    width: 100%;
    height: 100%;
    display: block;
    resize: both;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: none !important;
    border-width: 0px !important;
    border-style: none !important;
    /* visibility: hidden; */
    pointer-events: none;
    flex-shrink: 0.01;
    flex-grow: 0.01;
}

.autoexpanded {
    height: 50%;
}

.poppin-content {
    display: block;
    width: 100%;
    height: 50%;
    /* flex-basis: 30px; */
    backdrop-filter: blur(8px);
    background-color: #fffb;
    position: relative;
    z-index: 0;
    pointer-events: all;
    min-height: 20px;
    flex-shrink: 1;
    flex-grow: 1;
    filter: drop-shadow(0px 0px 15px #0008);
}

.poppin-content>tab-container>.tabcontentrow {
    /*overflow: hidden;*/
    height: 100%;
}

.poppin-content tab-container tab- {
    display: block;
}

.title-bar {
    background: #d2cee7;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #a29dbd;
    /* margin-bottom: 0em; */
    bottom: 0em;
    position: absolute;
    width: 100%;
    max-width: 100%;
    height: 1.5em;
    display: grid;
    grid-template-columns: [title] 1fr [minimizer] 3em;
    pointer-events: all;
    min-width: 10em;
}

.titlebar-text {
    grid-column: title;
    width: 100%;
    grid-row: 1;
    min-width: 100%;
    text-align: center;
    margin-top: -1em;
}

.poppin-content.minimized {
    width: 10em;
    height: 0px;
    overflow: hidden;
    min-height: 0px;
}

.title-bar.minimized {
    cursor: pointer;
    pointer-events: all;
    min-height: 1.5em;
    background: #e6e1ff95;
    width: 10em;
    filter: drop-shadow(0px 0px 10px #000A);
}

.minimizer {
    cursor: pointer;
    grid-column: minimizer;
    grid-row: 1;
    font-size: 4em;
    line-height: 0.2;
}

.minimized .minimizer {
    display: none;
}

#cc-info-container {
    overflow: auto;
}

#task-browser-content {
    display: grid;
    border-style: solid;
    border-width: 1px;
    border-color: #DDD;
    /*background-color: var(--placement-bg);*/
    padding: 15px;
    grid-row: taskbrowser;
    grid-template-rows: 1em auto 1fr;
    grid-column-gap: 20px;
    flex-shrink: 1;
    flex-grow: 0;
    /*overflow: auto;*/
    height: 100%;
    min-height: 0;
    width: 100%;
}

#task-ontology {
    /*display: grid;*/
    grid-template-columns: [topology] 1fr [info] 1fr;
    grid-gap: 10px;
    margin-top: -10px;
}

#task-connections {
    /*display: grid;*/
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    margin-top: -10px;
}

#task-browser-content h4 {
    margin-bottom: 0.1em;
}

#task-browser-content h2,
#task-browser-content h4 {
    color: #000000a3;
}

.task-row {
    grid-column: taskinfo;
}

.task-row-container {
    grid-template-columns: [arrow] 2px [taskinfo] 1fr;
    display: grid;
    border-radius: 2px;
    border-style: solid;
    border-width: 0.5px;
    border-color: #00000020;
    margin: 1px;
    padding: 5px;
    /* background-color: #c33131; */
}

.task-cc-grabbable {
    grid-template-columns: [arrow] 16px [taskinfo] 1fr [icon] 2em;
    background-color: var(--ptask-col);
}

.task-cc-grabbable .depth-icon {
    grid-column: icon;
}

#task-placement-list {
    flex-wrap: wrap;
    padding: 5px 4px 0px 12px;
}

#ccs-placement-list-inline {
    flex-wrap: wrap;
    padding: 5px 2em;
}

#ccs-placement-list-inline .cc-grabbable {
    max-width: 30em;
}

#compfams-placement-list-inline {
    flex-wrap: wrap;
    padding: 5px 2em;
}

#topics-placement-list {
    flex-wrap: wrap;
    margin-left: 8px;
    /* padding: 5px 2em; */
}

#tasks {
    height: 100%;
    /* width: 25%; */
    flex-basis: 25.9%;
    flex-shrink: 2;
    flex-grow: 1;
}

.subtasks {
    grid-column: 1/-1;
    grid-row: 2;
}

.ordered-supertasks * .supertasks {
    grid-column: 1/-1;
    grid-row: 1;
}

.task-row.collapsed {
    display: grid !important;
    grid-column: 1/-1;
}

#task-placement-heirarchy {
    display: grid;
    grid-template-columns: [arrow] 10px [taskinfo] 1fr;
}

.tree-collapsed>.expansion-arrow:after {
    content: "\25B7 ";
}

.placement-grabbable.hasExpanded {
    /*z-index: 50;*/
}

.tree-expanded>.expansion-arrow:after {
    content: "\25BD  ";
}

.ordered-supertasks * .expansion-arrow {
    grid-row: 2;
}

.ordered-supertasks .tree-expanded>.expansion-arrow:after {
    content: "\25B3  ";
}

.task-grabbable.isStandard>.placement-task-outer>.placement-task .standard-bullet::after {
    content: "\25C6";
}

.task-grabbable>.placement-task-outer>.placement-task .standard-bullet::after {
    content: "\25C7";
}

.isStandard {
    /*background-color: #d9ffed;*/
    font-weight: bold;
}

.ordered-supertasks * .task-name {
    grid-column: taskinfo;
    grid-row: 2;
}

.task-desc-link {
    font-size: 0.985em;
    margin-left: 2px;
}

.task-desc-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.task-search-result .approach {
    position: absolute;
    top: 2px;
    right: 2px;
}

.approach .inline-approach {
    font-size: 1em !important;
}

span.inline-approach {
    opacity: 0.5;
    font-size: 0.8em;
}

.nochildren .expansion-arrow {
    display: none;
}

.expansion-arrow {
    justify-self: start;
    grid-column: arrow;
    grid-row: 1;
    position: relative;
    z-index: 5;
    cursor: pointer;
    /* border-style: solid; */
    /* border-color: #0003; */
    font-size: 0.6em;
    border-width: 0px 1px 0px 0px;
    padding-right: 3px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.placement-duration {
    border-color: #0003;
    width: 4em;
    border-width: 1px;
    margin-right: -0.325em !important;
}

.task-left-gutter {
    display: grid;
}


/*
tab-selector[data-title='Standards+'] {
background-color: #c6c6e4;
color: #000;
}

tab-selector[data-title='Topics'] {
background-color: #636460;
color: white;
}
tab-selector[data-title='Concepts'] {
background-color: #82bcff;
color: black;
}
tab-selector[data-title='Competencies'] {
background-color: #8c8b8b; /*formerly #cca6a6;* /
color: black;
}
*/

#cc-tabs {
    /*margin-top: 0.4em; */
    background: inherit;
    background-color: #bbbbbb;
    color: black;
}

#cc-tabs tab-selector {
    color: black !important;
}

#incidental-ccs {
    display: grid;
}

#incidental-ccs>grabbable->.hover-icons {
    display: none;
}

#cc-relations {
    display: grid;
    grid-template-columns: [relevanttasks] 1fr [placementinfo] 1fr;
}

#placement-ccs {
    /*  display: grid;*/
    /*  min-height: 15em;*/
    /*  background: #00000015;*/
    align-content: baseline;
}

.cc-contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
/*
    background-color: #ffffff;
    border-style: solid;
    border-width: 3px;
    border-color: #83b3eb
    padding: 0.3em;
*/
    border-radius: 5px;
    /*height: 3.4em;*/
    width: 100%;
}

.cc-inline .cc-contents {
    padding: 0;
}

.cc-grabbable .depth-icon {
    margin: 5px;
}

.cc-grabbable.with-depth-icons>.cc-contents {
    grid-column: content;
}

.cc-grabbable.wih-depth-icons>.depths {
    grid-column: depths;
}

.cc-name {
    /*font-weight: bold;*/
    margin: 0px 0px 0px 0px;
}

.cc-inline .cc-name {
    font-weight: normal;
}

.core-concept-search-result {
    background-color: #dff3ff;
    display: block;
    border-style: solid;
    border-width: 1px;
    border-color: #b4dcff;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
}

.compfam-search-result {
    border-style: solid;
    border-width: 1px;
    border-color: #0003;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
}

.compfam-heading {
    grid-column: name;
}

.compfam-name {
    display: inline;
}

.compfam-grabbable-cont.isComp>.compfam-grabbable-self>summary>.compfam-identifier {
    display: none;
    /* font-weight: 800; */
    grid-column: 4;
}

.compfam-inline.isSubcomp {
    width: calc(100% - 0.6875em);
}

.compfam-inline.isSubcomp~.compfam-inline.isComp {
    margin-top: 4px !important;
}

.compfam-inline.isSubcomp::before {
    content: "";
    height: calc(100% + .25em);
    width: 2px;
    background: #e0e0e0;
    position: absolute;
    left: -11px;
    top: 0;
}

.compfam-inline.isSubcomp:not(.trashed):last-of-type::before {
    height: 100%;
}

.compfam-inline.isSubcomp .compfam-heading {
    margin-left: 1.5em;
}

.compfam-inline:not(.isSubcomp) .compfam-identifier {
    display: none;
}

.compfam-inline .circle {
    display: flex;
    justify-content: center;
    align-items: center;
}

.compfam-inline .circle>span {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    border: 2px solid;
}

.compfam-inline.isSubcomp .circle>span {
    height: 8px;
    width: 8px;
    background: grey;
}

.compfam-inline.skills .circle>span {
    border-color: var(--skills);
    background-color: var(--skills);
}

.compfam-inline.skills .compfam-identifier, .skills .subcomp-ontology {
    color: var(--skills);
}

.compfam-inline.character .circle>span {
    border-color: var(--character);
    background-color: var(--character);
}

.compfam-inline.character .compfam-identifier, .character .subcomp-ontology {
    color: var(--character);
}

.compfam-inline.meta-learning .circle>span {
    border-color: var(--meta-learning);
    background-color: var(--meta-learning);
}

.compfam-inline.meta-learning .compfam-identifier, .meta-learning .subcomp-ontology {
    color: var(--meta-learning);
}

.compfam-inline:not(.isSubcomp) .circle>span {
    background: none;
}

.subcomp-ontology {
    font-size: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
}

.compfam-description {
    font-size: 0.9em;
    opacity: 0.7;
    padding-right: 35px;
}

.core-concept-search-result.description {
    font-family: serif;
    font-size: 0.85em;
    opacity: 0.8;
    margin-bottom: 10px;
    margin-top: 10px;
    border-style: groove;
    border-color: #f0f8ff70;
    border-width: 0px 0px 2px 0px;
}

grabbable-.cc-grabbable {
    /*display: block;*/
    margin: 2px 5px 2px 2px;
}

grabbable-.cc-grabbable.with-depth-icons {
    display: grid;
    grid-template-columns: [depths] 3em [content] 1fr;
}

.cc-grabbable.with-depth-icons>.depths {
    display: block;
    margin-top: auto;
    margin-bottom: auto;
}

.ordered-supertasks .task-name-and-desc-tooltip {
    grid-column: taskinfo;
    grid-row: 2;
}

.task-name-and-desc-tooltip {
    grid-column: taskinfo;
    grid-row: 1;
}

.task-name-link {
    position: relative;
    /* font-size: 2em !important; */
    /* font-weight: 600; */
    /* background: red; */
}

.task-name-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.task-name {
    /*display: inline;*/
    text-overflow: ellipsis;
    grid-column: title;
    overflow: hidden;
    white-space: nowrap;
    /*font-weight: bold;
opacity: 0.8;*/
    grid-row: 1;
    font-weight: 600;
}

.inline-view {
    display: inline;
    text-overflow: ellipsis;
    /* overflow: hidden; */
}

.status-info {
    grid-column-start: 1;
    grid-column-end: 5;
    padding-top: 1em;
    border-style: solid;
    border-color: #0004;
    border-width: 1px;
}

.tt-viability {
    padding: 5px;
    max-width: 40em;
    border-radius: 5px;
    filter: drop-shadow(0px 0px 2px #0003);
    background-color: var(--page-background);
}

.tt-viability .task-description-overlay {
    display: grid;
    padding: 5px;
    border-radius: 5px;
    grid-template-columns: [given] 1fr [asked] 1fr [can] 1fr;
    filter: none;
    align-items: baseline;
    background-color: none;
}

#group-info-inner-container {
    min-width: max-content;
}

.group-edit-link {
    text-align: right;
    width: 100%;
    padding: 3px;
    display: block;
}

.group-members-info {
    background-color: white;
    min-height: 10em;
    border: 1px solid grey;
    border-radius: 5px;
}

.task-description-overlay {
    /*display: grid;
padding: 5px;
border-radius: 5px;
grid-template-columns: [given] 1fr [asked] 1fr [can] 1fr;*/
    display: grid;
    padding: 5px;
    max-width: 40em;
    border-radius: 5px;
    filter: drop-shadow(0px 0px 2px #0003);
    background-color: var(--page-background);
    grid-template-columns: [given] 1fr [asked] 1fr [can] 1fr;
}


/*.topic-grabbable {
padding: 10px;
border-style: solid;
border-width: 0.5px;
width: 100% !important;
max-width: 100% !important;
/*border-color: #AAA;
background-color: #DDD;*/


/*display: block;
margin: 2px 0px 0px 0px;
}*/

#relevant-tasks {
    border-style: solid;
    border-width: 0.5px;
    border-color: #00000020;
    background-color: #00000008;
    min-height: 50px;
    padding-top: 5px;
    padding: 5px;
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: [taskinfo] 1fr;
}

#adjacent-tasks {
    border-style: solid;
    border-width: 0.5px;
    border-color: #00000020;
    background-color: #00000008;
    min-height: 50px;
    padding-top: 5px;
    padding: 5px;
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: [taskinfo] 1fr;
}

.margined-container {
    border-style: solid;
    border-width: 0.5px;
    border-color: #00000020;
    min-height: 50px;
    padding-top: 5px;
    padding: 5px;
    position: relative;
    z-index: 5;
}

#tb-topics-container {
    flex-grow: 1;
    min-height: 50px;
    display: grid;
    grid-template-columns: [topicinfo] 1fr;
    padding: 5px;
}

#topics-page-info {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.collapsed {
    display: none !important;
}

.pane-collapsing {
    transform: scale(0.1, 1);
    flex-basis: 7% !important;
    min-width: 3em !important;
    padding: 0px !important;
    flex-grow: 0 !important;
    transform-origin: left;
}

.pane-collapsed {
    width: min-content !important;
    min-width: min-content !important;
}

.pane-collapsed tab-container {
    display: none;
}

.collapsed-view {
    display: none;
    width: min-content;
    padding: 1.25em;
    padding-top: 0;
}

.pane-collapsed .collapsed-view {
    display: flex;
    flex-direction: column;
}

.collapsed-view>button {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: none;
    background: none;
    border-top: 1px solid #e0e0e0;
}

#leftpane-toggle {
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    position: absolute;
    right: 0px;
    /* width: 100%; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1.75em;
    height: 60px;
}

#leftpane-toggle::after {
    content: url(/librsc/img/x-mark-black.svg);
    height: 15px;
    width: 15px;
}

.pane-collapsed #leftpane-toggle {
    justify-content: center;
    min-height: 80px;
    position: relative;
}

.pane-collapsed #leftpane-toggle::after {
    content: url(/librsc/img/arrow-right-black.svg);
    height: 16px;
    width: 26px;
}

#targ-desc-det {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-grow: 1;
    min-height: 17em;
    max-width: 38em;
    margin-right: 5px;
}

.starget-description {
    width: 100%;
    padding: 5px;
    grid-row: 1;
    grid-column: body;
}

#starget-description-edit {
    flex-grow: 4;
    display: grid;
    grid-template-rows: 2em 1fr;
    min-height: 10em;
    max-width: 38em;
}

.standard {
    display: grid;
    grid-template-columns: [c1] 1fr [c2] 0.1em;
    border-radius: 5px;
    border-color: #00000040;
    border-width: 1px;
    border-style: solid;
    margin: 2px 2px 5px 2px;
    padding: 5px;
    font-size: 0.9em;
    cursor: pointer;
    box-shadow: -1px -1px 21px 2px #0000001f inset, 1px 1px 10px 2px white inset, 0px 0px 7px 0px #00000042;
    overflow: hidden;
    border-width: 1px !important;
    background-color: inherit;
}

.subcompetency:hover .subcomp-children-edit {
    visibility: visible;
}

.subcomp-children-edit {
    visibility: hidden;
    grid-column: edit;
}

#starget-description-edit {
    grid-row: 2;
    width: 100%;
    min-height: 15em;
}

#starget-description-textarea {
    margin: 0px;
    width: 100%;
    height: 100%;
    resize: vertical;
}

.starget-pane-heading {
    grid-row: 1;
    margin: 0px;
}

#starget-details {
    flex-grow: 1;
    display: grid;
    min-height: 10em;
    grid-template-rows: 2em 1fr;
}

#placement-notes {
    min-height: 4em;
}

#related-questions {
    flex-grow: 1;
    min-height: 15em;
    min-width: 15em;
    grid-template-rows: 1em 1fr;
    max-width: 38em;
}

#my-courses-container {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    max-width: 80em;
    justify-content: space-between;
}

.workspace {
    padding: 0 1em 1.5em 1em;
    margin: 0.3em;
}

.course {
    display: flex;
    flex-direction: column;
    min-height: 5em;
    width: 15em;
    border: 1px solid darkblue;
    background-color: var(--placement-bg);
    color: var(--placement-text);
    border-radius: 5px;
    padding: 0.5em;
    margin: 0.25em;
}

.course>span {
    padding: 0.3em;
}

.course h3 {
    text-align: center;
    margin-top: 0.3em;
    margin-bottom: 0.4em;
}

.sc-name {
    grid-column: 1;
    vertical-align: center;
    margin-top: auto;
    margin-bottom: auto;
}

.sc-info-row {
    grid-template-columns: 1fr 3em 3em;
    border-width: 0.5px 1px 0.5px 1px;
    border-style: solid;
    border-color: #00000010;
    display: grid;
    background-color: #FFF8;
    padding-left: 10px;
}

.course-description {
    margin: auto;
    display: block;
    width: fit-content;
}

.interactive-container {
    margin: 5px;
    background: lightgray;
    border-radius: 5px;
    border-color: gray;
    border-style: solid;
    border-width: 1px;
    flex-basis: 20em;
    flex-grow: 1;
    padding: 10px 10px 10px 10px;
}

.cc_name {
    border-width: 0.5px 1px 0.5px 1px;
    border-style: solid;
    border-color: #00000011;
}

.competency_group {
    display: grid;
}

.awareness-targets {
    grid-column: 2;
    width: 100%;
    height: 100%;
    border-width: 0px 1px 0px 1px;
    border-style: solid;
    border-color: #00000011;
    display: flex;
}

.shade {
    background-color: #CCF;
}

.behavior-targets {
    grid-column: 3;
    width: 100%;
    height: 100%;
    border-width: 0px 1px 0px 0px;
    border-style: solid;
    border-color: #00000011;
    display: flex;
}

.val {
    margin: auto;
}

.subcomps_overview_container {
    max-width: 70em;
    width: 100%;
    margin: auto;
}

.vertical-text {
    grid-row: -1/1;
    text-align: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 2em;
}

.remoteHighlight {
    border-width: 1px;
    border-color: #F004;
    background-color: #F004;
}

.qwrapper-container {
    max-width: 70em;
    width: 90%;
    min-width: 35em;
    margin: auto;
}

#qwrapper-prompt {
    width: 100%;
    max-width: 100%;
    min-height: 5em;
    background-color: #c9daf8;
    margin: auto auto auto auto;
    resize: vertical;
}

.add-new-qChoice {
    margin-top: 5px !important;
}

.subQ-meta {
    display: flex;
    justify-content: stretch;
    flex-wrap: nowrap;
    grid-row: 2;
    grid-column: 1;
    z-index: 5;
}

.subQ-meta * {
    display: block;
    justify-content: stretch;
    flex-wrap: nowrap;
    grid-row: 2;
    grid-column: 1;
}

.q-meta label {
    margin: 0em;
}

.subQ-container:hover {
    background-color: white;
}

.subQ-container {
    margin: 0px 0px 3px 0px;
    cursor: grab;
    transition: all 0.25s ease;
    padding: 10px;
    border-radius: 0px;
    display: grid;
    grid-template-rows: 2em auto auto auto;
    border-width: 0px 0px 2px 0px;
    border-style: ridge;
    border-color: #0004;
    max-height: 100em;
}

.subQ-container.glowing {
    animation-duration: 1.75s;
    animation-name: glower;
    animation-iteration-count: 2;
}

.subQ-container.squishing {
    animation-duration: 0.25s;
    animation-name: squisher;
    animation-iteration-count: 1;
}

.subQ-container.stretching {
    animation-duration: 0.5s;
    animation-name: stretcher;
    animation-iteration-count: 1;
}

.subQ-container h3 {
    margin-top: 5px;
    margin-bottom: 5px;
    grid-row: 1;
    grid-column: 1;
    z-index: 1;
    display: inline-block;
    width: fit-content;
}

.subQ-goods {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: stretch;
    grid-column: 1;
    grid-row: 3;
}

.subQ-goods * {
    z-index: 1;
}

.subQ-textarea-hint {
    margin: 5px;
    flex-basis: 20em;
    flex-grow: 1;
}

.subQ-textarea {
    resize: vertical;
    width: 100%;
    background-color: #c9daf8;
    margin: 5px;
    flex-basis: 20em;
    flex-grow: 1;
}

.subQ-assesment_criteria {
    width: 100%;
}

.subQ-analysis.collapsed {
    height: 0px !important;
    overflow: hidden;
    display: inherit !important;
    transition: height 0.5s ease-in-out;
}

.subQ-analysis {
    grid-column: 1;
    grid-row: 4;
    margin-top: 5px;
    z-index: 1;
    transition: height 0.5s ease-in-out;
    /*transition: transform 0.5s ease, max-height 0.5s ease;*/
}

.q-inline {
    border-bottom: 1px solid lightgrey;
    background-color: white;
}

.q-title span {
    padding: calc(0.3em + 1px);
    padding-left: 1px;
}

.q-title shared-input {
    padding-left: 0 !important;
    min-width: 7em;
}

grabbable-:not(.edit-mode) shared-input,
grabbable-:not(.edit-mode) input[type=number] {
    border: none;
    margin: 1px;
    resize: none;
}

grabbable-.edit-mode .jodit-container {
    outline: 1px solid #0005;
}

.q-title span.for-view-mode:empty::before {
    content: "Question";
    opacity: 0.7;
}

.exportable-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 0.5em;
}

.q-description-container {
    color: #5a5a5a;
}

.textblock-name {
    margin-top: 0px;
}

.textblock-description {
    font-size: 1.1em;
    margin-top: 0px;
    opacity: 0.6;
    margin-bottom: 2px;
}

.textblock-description {
    margin-top: 0px;
}

.showTrashed>grabbable-.trashed {
    display: grid;
}

.showTrashed>grabbable-.trashed .trashed {
    display: grid !important;
}


/*grabbable-.textblock {
display: block !important;
}*/

shared-input[type='textarea'].textblock-contents {
    min-width: 100%;
    max-width: 100%;
    min-height: 3em;
    height: fit-content;
}

.resource-inline {
    border-bottom: 1px solid lightgrey;
    padding: 0.1em 0;
}

.column-labels-multiple-choice {
    display: grid;
    grid-template-columns: [obstacle] 8em [correct] 3em [choice] 1fr [reasoning] 1fr [feedback] 1fr;
    grid-gap: 10px;
    text-align: center;
    /*margin-bottom: -1em;*/
}

.column-label {
    grid-row: 1;
}

.faux-back:hover {
    box-shadow: 0px 0px 16px -5px #0000008f, 0px 2px 6px 0px #00000042;
}

.unplaced_only .hidden_if_placed {
    display: none;
}

.faux-back {
    /*background-color: #DBE0E7eee;*/
    grid-row-start: 1;
    grid-row-end: 5;
    grid-row: 3 / span -1;
    grid-row-start: 3 / span -1;
    grid-column: 1;
    margin: -10px -10px -10px -10px;
    position: relative;
    border-radius: 10px;
    z-index: 0;
    transition: 0.2s all ease;
}

.dropspot-small.dragOver {
    transition: 0.15s all ease;
    height: 8em !important;
    background: radial-gradient(closest-side, #00000047, #00000017, #f69d3c00);
    background-repeat: no-repeat;
    background-size: 125% 94%;
    background-position: 63% 0em;
}

.dropspot-big.dragOver {
    transition: 0.15s all ease;
    z-index: -1;
    /*height: 4.9em !important;*/
    /* background-color: red !important;*/
}

.dropRow.dragOver {
    transition: 0.15s all ease;
    height: 8em !important;
}

shared-input[type='textarea'] {
    display: flex;
    overflow: hidden;
    resize: both;
    border-color: #0004;
    border-width: 1px;
    border-style: solid;
    min-height: 1em;
    height: auto;
}

shared-input[type='text'] {
    border: 1px solid #0005;
    display: inline-flex;
    padding: 0.3em;
}

.shared-pseudo-form {
    min-width: 50vw;
    max-width: 70vw;
}

.void {
    filter: opacity(0.3);
    /*background-color: #00000014;radial-gradient(closest-side, #00000047, #00000017, #f69d3c00);*/
    /*height: 20px !important;*/
    /*margin-bottom: -20px;
transition: */
}

.dropRow {
    width: 105%;
    /*height: 5px;*/
    /*background-color: red;*/
    display: grid;
    grid-template-columns: 1fr;
    /* 4em;*/
    z-index: -1;
    cursor: default;
}

.dropspot-small {
    grid-row: 1;
    grid-column: 1;
    height: 5em;
    /* background-color: black !important; */
    /*background-color: green;*/
    transition: 0.15s all ease;
    z-index: -2;
    margin-top: -2em;
    margin-bottom: -2.8em;
    width: 100%;
    cursor: default;
}

.dropspot-big {
    width: 150%;
    grid-row: 1;
    grid-column: 2;
    height: 5em;
    margin-top: -2em;
    margin-bottom: -2.8em;
    z-index: -1;
    /*background-color: blue;*/
}

.forefront {
    z-index: 10;
    /*background-color: green !important;*/
}

.debug {
    background-color: green;
}

.correct-tick-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1em;
}

.correct-tick-wrapper span {
    height: 18px;
    width: 18px;
    border-radius: 6px;
    border: solid 1.8px var(--active-green);
    display: flex;
    justify-content: center;
    align-items: center;
}

.correct-tick-wrapper input:checked~span {
    background: var(--active-green);
}

.correct-text {
    color: #2ba180;
    font-size: 0.875em;
    font-weight: 800;
    margin-left: 0.5em;
}

.choice-row {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    width: 100%;
}

.q-inline:not(.edit-mode) .choice-row {
    box-shadow: none !important;
}

.q-inline:not(.edit-mode) .choice-row .drag-icon, 
.q-inline:not(.edit-mode) .choice-row .archive {
    visibility: hidden;
}

.q-type-selector {
    display: inline-block;
    margin-left: 1em;
    border: none;
    background-color: white;
    cursor: pointer;
    color: #5a5a5a;
    font-size: 0.875em;
    font-weight: 800;
}

.choice-row:hover {
    box-shadow: 0px 0px 16px -5px #0000008f, 0px 2px 6px 0px #00000042;
    background-color: white;
}

.choice-row-cont {
    display: flex;
    justify-content: stretch;
    align-items: center;
    /* height: min-content; */
    grid-template-columns: [correct] minmax(2em, 0.08fr) [choice] 1fr;
    grid-auto-flow: column;
    width: 100%;
    padding: 1em;
}

.choice-row div select {
    margin: auto 0px 0px auto;
    width: 100%;
    align-self: center;
}

.exportable .question-content-container {
    padding-right: 3em;
}

.choice-row shared-input {
    width: 100%;
    height: 100%;
    min-height: 1em;
    resize: vertical;
    background-color: #a4c2f4;
}

.choice-row shared-input.noresize {
    height: 100%;
    width: 100%;
    resize: none !important;
    background-color: #c9daf8;
    height: 100%;
    width: 100%;
    resize: none !important;
    background-color: #c9daf8;
}

.choice-row .archive {
    background: none;
    border: none;
    margin-left: 1.625em;
    cursor: pointer;
}

.obstacle {
    grid-row: 2;
    grid-column: 1;
}

input.correct-tick {
    transform: translateY(-0.1em);
}

.correct-note {
    /* font-size: smaller; */
    margin-left: -10px;
    color: gray;
    grid-column: correct;
}

.answer-textarea {
    min-height: 1em;
    height: unset;
    display: flex;
    width: 100%;
    background: none;
}

.reasoning-textarea {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column: 4;
}

.feedback-textarea {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column: 5;
}

.subQ-type {
    margin-left: 5px;
    margin-right: 10px;
}

.subQ-standard {
    margin-left: 5px;
    margin-right: 10px;
}

.subQ-target {
    margin-left: 5px;
    margin-right: 10px;
}

.info-card {
    border-radius: 5px;
    border-color: darkgray;
    border-width: 1px;
    border-style: solid;
    padding: 10px;
    margin: 5px;
    /*box-shadow: 0px 0px 13px -5px #00000042, 0px 2px 6px 0px #00000042;*/
    flex-basis: 20em;
    flex-grow: 1;
}

textarea {
    border-width: 0px;
}

.draggable-card {
    box-shadow: 0px 0px 16px -5px #0000008f, 0px 2px 6px 0px #00000042;
    border-width: 1px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgb(103, 103, 103) 350%);
    background-size: 200% 300%;
    background-position-x: 50%;
    cursor: grab;
    margin: 10px;
}

.scale_description_container {
    display: inline-flex;
    background: dimgray;
    justify-self: stretch;
    margin-left: 1px;
}

.scale_description {
    color: white;
    text-align: center;
    margin: auto;
    font-size: 0.8em;
}

.hidden {
    display: none !important;
}

.starget:hover {
    background-color: lightgray;
    /* border-color: #ffc81d; */
    /* border-width: 1px; */
    /* box-shadow: 4px -3px 7px -4px #ffd141 inset, -1px -1px 21px -5px #0000002b inset, 1px 1px 10px 2px white inset, 0px 0px 35px -4px black; */
    -webkit-transition: all 0.05s ease;
    -moz-transition: all 0.05s ease;
    -o-transition: all 0.05s ease;
    -ms-transition: all 0.05s ease;
    transition: all 0.05s ease;
    /* transform: translate(0px, -1px); */
    z-index: 9999;
}

.starget {
    display: grid;
    /* background-color: white; */
    grid-template-columns: [ehint] 0.4em [body] 1fr;
    /* border-radius: 5px; */
    border-color: #00000057;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    margin: 0px;
    font-size: 0.9em;
    cursor: pointer;
}

#standards-context {
    box-sizing: content-box;
    display: grid;
    grid-template-rows: 4em minmax(0, calc(100vh - 8em));
    max-width: 100%;
    margin: auto;
    height: 100%;
    max-height: 100%;
}

.standardset-content {
    background-color: inherit;
}

.standardset_container {
    border-width: 0px 0px 2px 2px;
    padding: 5px;
    overflow-y: auto;
    background-color: white;
    /* margin: 10px 0px 10px 0px; */
    /* border-radius: 5px; */
    border-style: solid;
    border-color: gray;
    background-color: #f1f0f0;
    box-shadow: 0px -30px 24px -10px white inset, 0px 41px 32px 16px #0000000a inset;
}


/*.standard_description {
}*/


/*.justifiedTextBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0em;
}
.justifiedTextBox > * {
flex: 1 1 auto;
}
.hide {
visibility: collapse;
}
.w {
flex-grow: 10;
flex-shrink: 0;
display: flex;
justify-content: left;
background-color: white;
}
.s {
flex-shrink: 20;
min-width: 0em;
max-width: 0.21em;
flex-grow: 300;
border-color: #00000000;
background-color: #00f0;
}

.c {
flex-grow: 1;
background-color: #0000;
max-width: 1.3em;
min-width: 0.1em;
text-align: center;
}
.end {
flex-grow: 99999;
background-color: #ff000000;
}*/

.aa-suggestion {
    border-width: 0px 0px 1px 0px;
    border-style: dotted;
    border-color: gray;
}

.justBox {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0em 0.3em 0.1em 0.1em;
    background-color: inherit;
    margin-right: -0.1em;
}

.hide {
    visibility: collapse;
}

.w {
    flex-grow: 0.3;
    flex-shrink: 0;
    justify-content: flex-start;
    margin-left: 0em !important;
    margin-right: 0em !important;
    /*border-style: solid;
border-width: 1px;*/
    background-color: inherit;
    /* white;*/
    ;
    display: inline-flex;
}

.greyback {
    background-color: #f7f7f7 !important;
}

.s {
    flex-shrink: 20;
    min-width: 0.1em;
    max-width: 0.41em;
    flex-grow: 300;
    flex-basis: 0.2em;
    /*border-width: 0px 0px  0px 0.3em;
border-style: solid;
border-color: #00000000; */
    background-color: inherit;
    /* white;*/
    ;
    display: inline-flex;
}

.c {
    flex-grow: 1;
    max-width: 1.3em;
    min-width: 0.1em;
    text-align: right;
    display: inline-flex;
    background-color: inherit;
}

.d {
    max-width: 0em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: inherit;
}

.b {
    flex-grow: 0.3;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    /*border-style: solid;
border-width: 1px;*/
    background-color: inherit;
    /* white;*/
    margin-right: 0em;
    margin-left: -0em;
    display: inline-flex;
    background-color: inherit;
}

.e {
    flex-grow: 0.3;
    flex-shrink: 10;
    /*display: inline-flex;*/
    flex-wrap: wrap;
    justify-content: flex-start;
    /*border-style: solid;
border-width: 1px;*/
    background-color: inherit;
    /* white;*/
    margin-left: -0em;
    margin-right: 0.0em !important;
    display: inline-flex;
    background-color: inherit;
}

.lexical-button-inline.tb {
    margin-left: -5px !important;
    font-size: 1.3em;
    margin-right: -10px !important;
    padding-bottom: calc(5px - 0.3em) !important;
}

.end {
    flex-grow: 99999;
    background-color: inherit;
    /*background-color: #ff000000;*/
}

#parent-task-info {
    background-color: var(--ptask-col);
    padding: 0.8em;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: #a795ff;
    display: grid;
    grid-template-columns: [given] 1fr [asked] 1fr [can] 1fr;
}

.shootval {
    cursor: pointer;
}

.shootval:hover {
    filter: brightness(1.5);
}

#placement-task-search-container {
    min-width: 50vw;
    height: fit-content;
}

input.pin-checkbox {
    float: left;
}

.task-search-result {
    background-color: #D9D9D9;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: #BBB;
    padding: 5px;
    margin: 2px;
    position: relative;
    margin-bottom: 10px;
}

.topic-search-result {
    /*width: 100% !important
max-width: 100% !important;*/
    padding: 1.5em 1.5em;
    border: 1px solid #0008;
    background-color: #737373;
    color: white;
    border-radius: 3px;
    display: inline-flex;
}

.task-placement-nav-node {
    width: 100%;
    /* padding: 2px; */
    border-color: #0005;
    border-radius: 5px;
    border-width: 0px 0px 0px 1px;
    border-style: solid;
    height: fit-content;
    overflow: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

#task-placement-container {
    grid-template-columns: [content] 1fr [addbutton] 5em;
    grid-template-rows: [ab] 2em [crow] 1fr;
    display: grid;
    padding: 0 0.3em 0 0;
}

#task-placement-edit-button {
    grid-column: -1/1;
    grid-row: ab;
    /*color: white;*/
    margin-top: 5px;
}

.fancybreak {
    width: 100%;
    display: flex;
    align-items: center;
}

grabbable-.placement .pagebreak {
    background: var(--placement-bg);
}

grabbable-.placement {
    grid-template-rows: [content] auto;
}

.pagebreak {
    height: fit-content;
}

.pagebreak-cont {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    justify-items: center;
    align-content: center;
}

.pagebreak-title-label {
    font-weight: 300;
    font-size: 0.8em;
}

.pagebreak-title {
    margin: auto;
    align-self: center;
    justify-self: center;
    /* width: 100%; */
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
}

.exportable:not(.edit-mode) .for-edit-mode,
.exportable.edit-mode .for-view-mode:not(button),
.header-placement:not(.edit-mode) .for-edit-mode,
.placement:not(.edit-mode)>.placement-cont>.placement-self .for-edit-mode,
.header-placement.edit-mode .for-view-mode:not(button),
.placement.edit-mode>.placement-cont>.placement-self .for-view-mode:not(button) {
    display: none !important;
}

.exportable.edit-mode .drag-icon {
    visibility: hidden;
}

.choice-row .draw-icon {
    margin-right: -15px;
}

.exportable.edit-mode .choice-row .drag-icon {
    visibility: unset;
    /*transform: translateX(-1.5em);*/
}

grabbable-.edit-mode button.for-view-mode {
    visibility: hidden;
}

.pagebreak-title span {
    display: inline-block;
    padding: calc(0.3em + 1px);
}

.pagebreak .fancybreak {
    padding-left: 38%;
    padding-right: 38%;
}

.pagebreak .trash-x {
    margin-right: 1%;
}

.breakline {
    flex-grow: 1;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #999;
}

.breaktext {
    color: #5a5a5a;
    margin: 0 0.5em;
}

.create-new-task {
    cursor: pointer;
    text-decoration: underline;
    color: blue;
}

.topicname-wrapper {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin: 20px;
}

.gac-wrapper {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin: 20px;
}

.given-asked-can {
    display: inline-block;
    min-width: max-content;
    line-height: 0px;
    font-weight: bold;
    opacity: 0.6;
}

.new-topic-input {
    flex-grow: 1;
    border: 1px solid #0008;
    background-color: #737373;
    color: white;
}

.blank {
    min-width: 1em;
    border-style: solid;
    border-color: #000;
    border-width: 0px 0px 1px 0px;
    cursor: text;
    width: max-content;
    max-width: 25%;
    font-style: italic;
    flex-grow: 1;
}

#add-new-compfam-placement {
    color: white;
    margin-top: 5px;
}

#add-new-task-placement {
    position: relative;
    right: 0px;
    /*width: 50px;*/
    grid-column: addbutton;
    grid-row: ab;
    padding-right: 10px;
    height: 25px;
}

#submit-new-task {
    margin-left: 1em;
}

#add-new-task-placement .lexical-button {
    margin: 0px !important;
    width: 100%;
    height: 100%;
    background-color: var(--placement-bg);
    color: white;
    position: relative;
    border-radius: 0px 0px 15px 15px;
    padding-bottom: 9px !important;
}

.deep-cue-search-result {
    display: inline-block;
    background-color: #ffeedd;
    border-style: solid;
    border-width: 0.5px;
    padding: 5px;
    border-color: #ffdcb9;
    border-radius: 5px;
    font-size: 0.8em;
    border-color: #f9b572;
    border-radius: 5px;
    font-size: 0.8em;
    margin: 3px;
}

.cc-description {
    font-size: 1em;
    opacity: 0.8;
    margin: 1em 0;
}

.detail-cc-grabbable .cc-cont-outer {
	display: flex;
	flex-direction: column;
}

.detail-cc-grabbable .generic-topper {
	align-self: flex-end;
	margin-bottom: -2em;
}

.dc-grabbable {
    display: inline-block;
    /* height: fit-content; */
    background-color: #ffeedd;
    border-style: solid;
    border-width: 0.5px;
    padding: 5px;
    border-color: #ffdcb9;
    border-radius: 5px;
    font-size: 0.8em;
    border-color: #f9b572;
    border-radius: 5px;
    font-size: 0.8em;
    margin: 3px;
}

.dc-seperator {
    font-family: serif;
    font-size: 0.85em;
    opacity: 0.8;
    margin-bottom: 10px;
    margin-top: 10px;
    border-style: groove;
    border-color: #f0f8ff70;
    border-width: 0px 0px 2px 0px;
    font-weight: bold;
}

.hinted {
    filter: drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 4px #906cff) drop-shadow(0px 0px 4px white) drop-shadow(0px 0px 5px #0008);
    /*transform: scale(1.05);*/
    /*transition: all 0.3s ease;*/
    z-index: 50;
}

drop-container.tb-deep-cue-container {
    display: flex;
    flex-wrap: wrap;
}

.can-accept {
    box-shadow: 0px 0px 5px #ff00ea, 0px 0px 5px #ff00ea inset;
    z-index: 12;
}

.will-accept {
    box-shadow: 0px 0px 5px #00ff00, 0px 0px 8px #00ff00 inset;
    z-index: 12;
}

.injected-drop-listener {
    position: absolute;
    z-index: -20;
    width: calc(100% + 1.35em);
    height: 100%;
    left: 0px;
    margin-left: inherit;
    margin-right: calc;
    top: 0px;
    /*background-color: #55000055;*/
}

.injected-drop-listener.can-accept {
    z-index: 9;
}

.injected-drop-listener.will-accept {
    z-index: 9;
}

#task-placements {
    column-gap: 5px;
    background-color: #bbbbbb;
    overflow: auto;
    grid-row: placements;
    /* max-width: 33vw; */
    /* height: 30vh; */
    /* border-style: solid; */
    /* border-width: 1px; */
    border-color: #DDD;
    flex-grow: 1;
    height: 100%;
    flex-shrink: 1;
}

.task-name-and-desc-tooltip {
    font-size: 1.1em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-desc {
    color: #777;
}

.task-desc b {
    color: black !important;
    font-weight: bold !important;
}

#task-placement-editor {
    display: flex;
    height: 100%;
    width: 100%;
}

#task-placement-list {
    grid-column: -1 /1;
    grid-row: crow;
    display: flex;
    flex-direction: column;
    border-color: #ddd;
    /*background-color: #00000015;*/
    z-index: 2;
    border-radius: 5px 5px 0px 5px;
    height: min-content;
}

.placement-compfam-container {
    background-color: #3c567b;
    padding: 0.5em;
}

.tb-deep #prev_stdcc_label_container {
    display: inline-flex;
    background: #0B5394FF;
    justify-self: stretch;
    margin-left: 1px;
    color: white;
}

#prev_std {
    display: inline-flex;
    margin: auto;
    text-align: center;
}

#next_stdcc_label_container {
    display: inline-flex;
    background: #0B5394FF;
    justify-self: stretch;
    margin-left: 1px;
    color: white;
}

#next_std {
    display: inline-flex;
    margin: auto;
    text-align: center;
}

.cc_detail_container {
    flex-basis: 20em;
    flex-grow: 1;
    max-width: 40em;
    min-width: 20em;
    background-color: inherit;
    background-color: inherit;
    /*only required for LaFleX hyphenation*/
}

#cc_details {
    display: inline-flex;
    flex-wrap: wrap;
    background-color: inherit;
    /*only required for LaFleX hyphenation*/
    /*max-width: 100%;
align-self: stretch;
justify-self: stretch;
flex-grow: 1;*/
}

.cc_description {
    background-color: inherit;
    /*only required for LaFleX hyphenation*/
}

.cc_detail {
    background-color: inherit;
    /*only required for LaFleX hyphenation*/
}

#obstacles-table {
    width: 100%;
    border-spacing: 0px;
}

th.obstacles-table-heading {
    background-color: #0B5394FF;
    color: white;
    /* margin-left: 4px; */
    border-color: lightgrey;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-radius: 10px 10px 0px 0px;
    width: 50%;
}

.obstacles-table-cell {
    background-color: #fff;
    box-shadow: -5px -7px 15px -12px black inset;
    width: 50%;
    padding: 4px 5px 7px 5px;
}

.target-info-table-cell-input {
    width: 100%;
}

.awaiting-ref-input:hover {
    box-shadow: 0px 0px 2px 1px #ffc81d inset;
    transition: all 0.07s ease;
    cursor: pointer;
}

.awaiting-ref-input {
    box-shadow: -1px -5px 20px 0px #7d4283cf inset, 0px 41px 32px 16px white inset;
    transition: all 0.7s ease;
    cursor: pointer;
}

.stargetset-content {
    width: 100%;
    resize: none;
    font: inherit;
    font-size: inherit;
    border-width: 0px;
    padding: 0px;
}

.obstacleInput {
    margin: 0px 0px 2px 0px !important;
    border-style: ridge;
    background: none;
    padding: 0px !important;
    border-radius: 0px !important;
    width: 100%;
}

.scale_progression_bound {
    background-color: #0B5394FF;
    border-radius: 0px 10px 10px 0px;
    margin-right: -10px;
}

.tooltipShell {
    transform: scale(0, 0);
    visibility: hidden;
    display: none;
}

.is-extension {
    background-color: #abbfff !important;
}


/**
Fancy formatable tooltips
**/

.tooltip {
    position: relative;
}

.tooltip .tt-bottom {
    min-width: 200px;
    top: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 10px 20px;
    color: #444444;
    background-color: #DBE0E7;
    font-weight: normal;
    font-size: 13px;
    border-radius: 8px;
    position: absolute;
    z-index: 99999999;
    box-sizing: border-box;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s;
}

.tooltip:hover .tt-bottom {
    visibility: visible;
    opacity: 1;
}

.tooltip .tt-bottom i {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -12px;
    width: 24px;
    height: 12px;
    overflow: hidden;
}

.tooltip .tt-bottom i::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    transform: translate(-50%, 50%) rotate(45deg);
    background-color: #DBE0E7;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.tt-back {
    background-color: #DBE0E7;
}

.tooltip .tt-right {
    min-width: 200px;
    top: 50%;
    left: 100%;
    margin-left: 20px;
    transform: translate(0, -50%);
    padding: 10px 20px;
    color: #444444;
    background-color: #DBE0E7;
    font-weight: normal;
    font-size: 13px;
    border-radius: 8px;
    position: absolute;
    z-index: 99999999;
    box-sizing: border-box;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.8s;
}

.tooltip:hover .tt-right {
    visibility: visible;
    opacity: 1;
}

.tooltip .tt-right i {
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -12px;
    width: 12px;
    height: 24px;
    overflow: hidden;
}

.tooltip .tt-right i::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 0;
    top: 50%;
    transform: translate(50%, -50%) rotate(-45deg);
    background-color: #DBE0E7;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.tooltip .tt-small-top {
    min-width: 20px;
    top: 20px;
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 5px 5px;
    color: #444444;
    background-color: #abbfff;
    font-weight: normal;
    font-size: 12px;
    border-radius: 8px;
    position: absolute;
    z-index: 99999;
    box-sizing: border-box;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    display: block;
    opacity: 0;
}

.tooltip:hover .tt-small-top {
    display: block;
    opacity: 1;
}

.tooltip .tt-small-top i {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -12px;
    width: 24px;
    height: 12px;
    overflow: hidden;
}

.tooltip .tt-small-top i::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #DBE0E7;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.whiteback {
    background-color: white;
}

.algolia-autocomplete {
    width: 100%;
}

.algolia-autocomplete .aa-input,
.algolia-autocomplete .aa-hint {
    width: 100%;
}

.algolia-autocomplete .aa-hint {
    color: #999;
}

.algolia-autocomplete .aa-dropdown-menu {
    width: 100%;
    background-color: #fff;
    border: 1px solid #999;
    border-top: none;
}

.school-search-wrapper .aa-input,
.school-search-wrapper .aa-hint,
.school-search-wrapper .aa-dropdown-menu {
    width: auto;
}

.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
    cursor: pointer;
    padding: 5px 4px;
}

.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
    background-color: #B2D7FF;
}

.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
    font-weight: bold;
    font-style: normal;
}

.toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 3.5em;
    height: 1em;
    display: inline-block;
    position: relative;
    top: 5px;
    border-radius: 25px;
    overflow: hidden;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: #0B5394;
    transition: background-color ease 0.3s;
}

.toggle:before {
    content: "hidden \2672 shown";
    display: block;
    position: absolute;
    z-index: 2;
    width: 14px;
    height: 14px;
    background: #fff;
    left: 3%;
    top: 2px;
    right: 0em;
    border-radius: 50%;
    font: 14px/14px Helvetica;
    /* text-transform: uppercase; */
    /* font-weight: bold; */
    text-indent: -2.42em;
    line-height: 1.0em;
    word-spacing: 0.25em;
    color: #0086ff;
    text-shadow: -1px -1px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.2s;
}

.requiredCC {
    background-color: #dfaf16;
    text-shadow: -0.5px -0.9px #0004;
    transition: background-color 0.5s ease;
}

.toggle:checked {
    background-color: #c7c5c5;
}

.toggle:checked:before {
    left: 70%;
}

drop-container {
    position: relative;
    /* top: 0; */
    z-index: 0;
    display: flex;
    position: sticky;
}

drop-container[type=v-ordered] {
    flex-direction: column;
}

drop-spot {
    display: block;
    position: relative;
    z-index: -1;
}

drop-spot.active {
    z-index: 10;
}

drop-container.not-loaded {
    opacity: 0;
}

drop-container.loading:after {
    content: url(/librsc/img/loading.gif);
    filter: invert();
    opacity: 1 !important;
    transition: 0.3s;
    width: 10px;
    height: 10px;
}

grabbable- {
    position: relative;
    z-index: 1;
    overflow: visible;
    background-color: white;
}

grabbable- {
    grid-template-columns: [content] auto [handle] 0px;
    display: grid;
}

grabbable-[handlepos="self"].goal-grabbable {
    grid-template-columns: [content] 1fr [handle] 0px;
}

grabbable-[handlepos="right"],
grabbable-[handlepos="right-top"],
grabbable-[handlepos="right-bottom"] {
    display: grid;
    grid-template-columns: [content] minmax(0, 1fr) [handle] 1em;
}

grabbable-[handlepos="left"],
grabbable-[handlepos="left-top"],
grabbable-[handlepos="left-mid-top"],
grabbable-[handlepos="left-bottom"] {
    /* display: grid; */
    grid-template-columns: [handle] 1em [content] minmax(0, 1fr);
}

grabbable-[handlepos="bottom"],
grabbable-[handlepos="bottom-left"],
grabbable-[handlepos="bottom-right"] {
    display: grid;
    grid-template-rows: [content] minmax(0, 1fr) [handle] 1em;
}

grabbable-[handlepos="top"],
grabbable-[handlepos="top-left"],
grabbable-[handlepos="top-right"] {
    display: grid;
    grid-template-rows: [handle] 1em [content] minmax(0, 1fr);
}

drop-container[type="abstract"] grabbable- {
    grid-template-columns: [handle] 0em [content] minmax(0, 1fr);
}

.drag-icon {
    justify-self: center;
    align-self: center;
    position: relative;
    z-index: 50;
}

.drag-icon::after {
    content: url(/librsc/img/drag-handle.svg);
    height: 1em;
    width: 0.5em;
}

.hovered>.grabbable-content-wrapper {
    cursor: default !important;
}

.grabbable-content-wrapper {
    cursor: default !important;
    filter: drop-shadow("0px 0px 5px red");
}


/*manual hover class to control hover appearance via javascript 
so recursive grabbables don't cause parent container hover effects 
to be enabled*/

grabbable-.hovered:not([draggable="false"]),
.fake-hovered {
    box-shadow: 0px 0px 16px -5px #0000004f, 0px 2px 6px 0px #00000022;
    cursor: grab;
    z-index: 2;
}

.choice-row-container {
    padding: 0.25em 0;
    display: flex;
    flex-direction: column;
    grid-gap: 0.5em;
}

.choice-row.hovered {
    box-shadow: 0px 0px 16px -5px #0000008f, 0px 2px 6px 0px #00000042;
    background-color: white;
}

.hover-bg {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    transition: box-shadow 0.25s ease;
}

.hover-bg:hover {
    box-shadow: 0px 0px 16px -5px #0000008f, 0px 2px 6px 0px #00000042;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    transition: box-shadow 0.25s ease;
}

.choice-selector-container {
    /*width: 15em;*/
    grid-column: description;
    /*choices;*/
}

.tip {
    color: #000A;
}

.tip b {
    color: #000F;
}

.filterbox {
    padding: 7px;
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    text-align: center;
}

.filterbox label {
    margin: 0px;
    display: block;
}

.choice-selector {
    grid-column: description;
    /*choices;*/
}

.item-info {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-template-columns: [description] 1fr [choices] 15em;
    grid-row: 1;
    display: grid;
}

.nodepths {
    display: none !important;
}

.paremeter-container {
    margin-left: -1em;
    padding-top: 10px;
    font-weight: bold;
}

.experience-list-item {
    grid-column: taskinfo;
    margin: 2px;
    z-index: unset;
    width: unset;
}

.nest-cont {
    border-radius: 2px;
    border-style: solid;
    border-width: 0.5px;
    border-color: #00000020;
    background: var(--placement-bg);
    width: 100%;
}

.experience-list-item-cont {
    grid-template-columns: [time] auto [taskinfo] 1fr;
    display: grid;
    padding: 5px;
    z-index: unset;
    width: unset;
}

.experience-drop-container {
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    margin-left: 1em;
}

.tree-collapsed .exp-list-container {
    display: none;
}

select- button {
    background: #FFFF;
    text-align: left;
    border-width: 0px;
    padding-top: 0.3em;
    display: block;
    width: 100%;
}

select- button:hover {
    filter: invert(0.8);
}

select- button:focus {
    filter: invert(0.8);
}

select- button.selected {
    filter: invert(0.6);
}

option- {
    margin: 0px;
}

tool-tip {
    display: none;
}

#task-placement-psearcher {
    grid-template-columns: [pinned] 40% [search] 60%;
}

#instrument-raw-content {
    display: grid;
    grid-template-columns: [type] 13em [name] 1fr [submit] 5em;
    grid-template-rows: 25% 75%;
    grid-column-gap: 12px;
    width: 70vw;
    height: 3em;
    min-width: 30em;
    max-width: 65em;
}

#instrument-raw-content>label {
    grid-row: 1;
    grid-column: type;
    align-self: self-end;
    margin: 2px;
}

#instrument-raw-content>select {
    grid-row: 2;
    grid-column: type;
}

#create-or-edit-instrument-content-button {
    grid-row-start: -1;
    grid-row-end: 1;
    grid-column: submit;
}

#instrument-name {
    grid-row-start: -1;
    grid-row-end: 1;
    grid-column: name;
}

.instrument-formatting-container {
    grid-template-columns: [main-content] 1fr [editbutton] 5em;
    display: grid;
    min-height: 2em;
    border-width: 1px;
    border-style: solid;
    border-color: #0005;
    margin: 2px;
}

#current-signals {
    min-height: 15em;
    border-width: 1px;
    border-style: solid;
    border-color: #0005;
    flex-grow: 1;
}

#add-new-signal {
    align-self: center;
}

.instrument-content {
    display: flex;
    flex-direction: column;
    align-content: center;
}

.instrument-preview {
    display: grid;
    grid-template-rows: [name] 1.5em [signals] minmax(1em, 1fr);
    grid-column: main-content;
}

.edit-col {
    grid-column: editbutton;
}

.intrument-name {
    grid-row: name;
}

.signals-list {
    grid-row: signals;
}

.editable-signal-container {
    width: 100%;
    display: grid;
    grid-template-columns: [name] 1fr [comp] max-content [subcomp] max-content [reliability] 10em [submit] 5em;
    grid-template-rows: 25% 75%;
    grid-column-gap: 5px;
}

.editable-signal-container label {
    grid-row: 1;
    align-self: center;
}

.signal-name {
    grid-row-start: -1;
    grid-row-end: 1;
    grid-column: name;
}

label[for="subcomp-select"],
.subcomp-signal-selector {
    grid-column: subcomp;
}

label[for="comp-select"],
.comp-signal-selector {
    grid-column: comp;
    max-width: 10em;
}

label[for="signal-weight"],
.subcomp-signal-weight-container {
    grid-column: reliability;
}

.subcomp-signal-seclector,
.subcomp-signal-weight-container,
.comp-signal-selector {
    grid-row: 2;
}

#confirm-signal-changes {
    grid-column: submit;
    grid-row-start: -1;
    grid-row-end: 1;
}

pin-searcher {
    width: 80vw;
    min-width: 60em;
    display: grid;
    grid-template-columns: [pinned] 30% [search] 70%;
    grid-template-rows: [headings] 2em [top] 2em [main] 70vh [conclude] 2em;
    grid-gap: 10px;
    padding: 20px;
    flex-grow: 1;
    min-height: 80vw;
    flex-basis: 50px;
    /* max-height: 70vh; */
    align-content: stretch;
    justify-items: stretch;
    /* overflow: hidden; */
    align-items: stretch;
    justify-content: stretch;
    flex-shrink: 10 !important;
}

pin-searchfield {
    height: 1.7em;
    flex-grow: 1;
}

pin-searcher[searchonly="true"] pinnable-result {
    grid-template-columns: [selector] 0em [resultcontent] minmax(0, 1fr);
}

pin-searcher[searchonly="true"] .is-pinned {
    display: none;
}

pinnable-result.unchecked[slot="selectedresults"] {
    opacity: 0.5;
}

#learning-experiences h1 {
    margin: 1em;
}

.exp-list-container {
    margin: 1em 1em 1em 1em;
    /*display: grid;*/
    grid-column-start: 1;
    grid-column-end: 3;
}

.boxContsCont {
    display: flex;
    grid-column-end: 3;
    grid-column-start: 1;
    margin-top: 1em;
}

.boxContsCont .dropzone {
    width: 100%;
    flex-grow: 1;
}

.labeleddc {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.overhead {
    text-align: center;
}

.activity-exp-tt {
    margin: 15px;
    /*max-width: 40em;*/
    /*width: 80%;*/
}

.experience-name-and-desc {
    grid-column-end: 5;
    grid-column-start: 1;
    font-size: 1.05em;
}

.experience-name {
    display: inline;
    font-weight: bold;
}

.experience-name * {
    font-weight: bold;
}

.time-info {
    margin-right: 5px;
}

.experience-list-item.tree-collapsed .time-info-preview {
    display: inline;
}

.experience-list-item.tree-collapsed .experience-duration {
    display: none;
}

.experience-list-item.tree-expanded .time-info-preview {
    display: none;
}

.experience-list-item.tree-expanded .experience-duration {
    display: inline;
}

.experience-name .inline-view {
    min-width: unset;
    border-color: #FFF4;
}

.experience-description .inline-view {
    min-width: unset;
    border-color: #FFF4;
}

.experience-description {
    display: inline;
}

.bp-pc {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 1;
}

.tipDisplayer {
    display: block;
    position: absolute;
    z-index: 999999;
    height: fit-content;
    width: fit-content;
    backdrop-filter: blur(5px);
    background-color: #fffb;
    max-width: 100%;
    max-height: 100%;
    min-width: min-content;
    min-height: min-content;
    border-radius: 5px;
    filter: drop-shadow(0px 0px 10px #0005) !important;
    opacity: 1;
    transition: opacity 0.3s ease;
    overflow-y: auto;
}

.tipDisplayer.hiddentip {
    opacity: 0;
}

.tipDisplayer tool-tip {
    display: block;
    /*margin: 10px;  */
    /*width: 30%;*/
    width: fit-content;
    min-width: 30em;
    padding: 10px;
    /*filter: drop-shadow(0px 0px 5px #0008);*/
}

tool-tip.quarterwidth {
    width: 25vw;
}

tool-tip.thirty {
    width: 30em;
}

tool-tip.forty {
    width: 40em;
}

tool-tip.bigtip {
    width: unset;
}

tool-tip.fit {
    min-width: unset;
}

li {
    margin-top: 0.5em;
}

.good-bad {
    grid-template-columns: [good] 1fr [bad] 1fr;
    display: grid;
}

.good-bad .good {
    background: lightskyblue;
    grid-column: good;
    padding-right: 2em;
}

.good-bad .bad {
    background: #EDD897;
    grid-column: bad;
    padding-right: 2em;
}

.pro-con {
    grid-template-columns: [pro] 1fr [con] 1fr;
    display: grid;
}

.pro-con .pro {
    grid-column: pro;
    background: #66cc66;
    padding-right: 2em;
}

.pro-con .con {
    grid-column: con;
    background: palevioletred;
    padding-right: 2em;
}

.filter-container {
    margin: 15px;
    background: #fff5;
    min-width: 50vw;
}

.filterlist {
    display: flex;
    flex-wrap: wrap;
}

.compfilterlist {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.compfilterlist .filterbox {
    border-bottom-width: 1px;
}

.search-notifier {
    color: gray;
}

.subfilter-container {
    overflow-y: auto;
    max-height: 10em;
    background-color: #0001;
}

.filterbox-v {
    text-align: left;
    font-size: 0.8em;
}

.subcomp-filter {
    display: inline !important;
    text-align: left;
}

tab-container {
    display: grid;
    grid-template-rows: [tabsrow] 1.9em [tabcontent] 1fr;
    background-color: inherit;
    min-height: 0;
    /* margin-right: -1em; */
    /* grid-row-start: 3; */
    grid-column: placement;
}

.intended-tab-container {
    padding: 0.3em;
    height: 100%;
}

.incidental-tab-container {
    padding: 0.3em;
    height: 100%;
}

#content-tabs {
    height: 100%;
    padding: 5px 0px 5px 5px;
}

tab-selector {
    grid-row: tabsrow;
    background-color: var(--placement-bg);
    color: inherit;
    /* filter: contrast(0.6); */
    padding: 0.5em;
    height: 100%;
    bottom: 0em;
    position: relative;
    cursor: default;
    border-radius: 5px 5px 0px 0px;
    flex-grow: 1;
    line-height: 0.9em;
    text-align: center;
    transition: 200ms;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    /* border-color: #0003; */
}

#topics tab-selector {
    background-color: inherit;
    filter: brightness(0.6);
}

.organize-topics-tab-container {
    background-color: #bbbbbb;
    padding: 5px 0.3em 0 0;
}

#content-tabs tab-selector {
    background-color: var(--placement-bg) !important;
}

#placeables .tabcontentrow tab-selector {
    background: inherit;
}

#right-tabpane {
    /*background: inherit;*/
    display: none;
    width: 25em;
    margin-top: 4px;
}

tab-selector:hover {
    filter: contrast(0.6) brightness(1.3);
}

tab-selector.selected {
    /*height: 105% !important;*/
    bottom: 0.2em;
    filter: drop-shadow(0px -4px 8px white) drop-shadow(0px 0px 2px white) contrast(1) !important;
    /* height: calc(100% + 0.2em) !important; */
    /*box-shadow: 0px 2px 0px #FFFB inset, 0px 4px 2px #0005 inset;*/
    z-index: 1;
}

#lefthand-tabs>.tabrow {
    justify-content: flex-start;
    width: fit-content;
    padding-top: 1em;
    position: relative;
    z-index: 1;
    /* padding-bottom: 0.2em; */
}

.tabrow {
    display: flex;
    justify-content: stretch;
    background: inherit;
    /*filter: drop-shadow(5px 4px 4px #0009);*/
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column: 1;
    /* grid-row: 1; */
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.tabcontentrow {
    grid-row: tabcontent;
    position: relative;
    flex-grow: 1;
    overflow-y: auto;
    flex-shrink: 1;
    flex-basis: 3em;
    /* max-height: 5%; */
    /*z-index: 2;*/
    padding-top: 0.3em;
    /* margin-top: -0.3em; */
    grid-column: 1;
    /*overflow: auto;*/
    background-color: inherit;
}

.connections-overlay-inner>.trash-toggle-outer {
    position: absolute;
    top: 0px !important;
    right: 0px !important;
}

.trash-toggle-outer {
    position: relative;
    margin-right: 0px;
    /* margin-left: auto; */
    /* margin-top: -3em; */
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 50;
}

#left-pane {
    /* background: #8c8b8b; */
    /* padding: 0px 0px 10px 0px; */
    /* color: white; */
    overflow-x: hidden;
    /* flex-basis: 30%; */
    width: 100%;
    min-width: 26em;
    justify-self: stretch;
    align-self: stretch;
    height: 100%;
    align-content: stretch;
    min-height: 100%;
    justify-content: stretch;
    /* max-width: 30em; */
    /* width: 454px; */
    /* overflow-x: hidden; */
    /* padding-right: 1em; */
    /* border-style: solid; */
    border-width: 0px 2px 0px 0px;
    border-color: #0006;
    overflow-y: hidden;
    position: relative;
    z-index: 2;
    /*z-index: 10;*/
    /*flex-grow: 1;*/
    display: flex;
    flex-direction: column;
    /*justify-content : space-between;*/
    /* padding-bottom: 6em; */
}

div#workspace-settings-button {
    /* bottom: 5px; */
    /* position: revert; */
    background: inherit;
    font-size: 1.1em !important;
    padding: 5px;
    margin-left: auto !important;
    width: 100%;
}

.expandable collection-browser {
    height: 95%;
}

collection-browser label {
    display: inline;
}

#collection-browser-container {
    min-width: 30em;
    min-height: 30em;
    width: 80vw;
    height: 90vh;
    max-width: 110em;
}

#workspace-settings {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em 3em;
    position: relative;
    overflow-y: auto;
}

#workspace-settings .main>span:first-of-type {
    display: flex;
    justify-content: space-around;
}

#workspace-settings .edit-sharing,
#workspace-settings .edit-features,
#workspace-settings.sharing .main,
#workspace-settings.features .main {
    display: none;
}

#workspace-settings.sharing .edit-sharing,
#workspace-settings.features .edit-features {
    display: flex;
    flex-direction: column;
    width: 60vw;
}

#workspace-settings.sharing .edit-sharing {
    /* overflow-y: scroll; */
}

#workspace-settings .back {
    cursor: pointer;
    margin: 1em 0;
    display: none;
}

#workspace-settings .back:hover {
    text-decoration: underline;
}

#workspace-settings .big-button {
    background-color: black;
    color: white;
    padding: 1.5em 2em;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
}

#workspace-settings drop-container {
    flex-direction: column;
    margin: 1em 0;
    background-color: white;
}

#workspace-settings form[name="features"] {
    background-color: white;
}

form[name="features"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    grid-gap: 1em;
}

form[name="features"]>span {
    opacity: 0.8;
    font-weight: bold;
    margin: 1em 0;
}

form[name="features"] fieldset {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    grid-gap: 1em;
    border: none;
    margin: 0;
    align-items: baseline;
}

form[name="features"] fieldset:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

form[name="features"] + .dashed-button {
	align-self: flex-start;
	width: unset;
	padding: 1em 4em;
}

.for-gac {
	margin-left: 1em;
}

.for-gac.disabled {
	opacity: 0.5;
}

.invite-input-cont {
    position: relative;
    margin: 2em 0;
}

.invite-button-cont {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 1em;
}

.invite-button-cont span {
    color: white;
    background-color: black;
    padding: 0.5em;
    border-radius: 5px;
    cursor: pointer;
}

.clique-search-input {
    padding: 1em !important;
}

.clique-cont {
    padding: 1em;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.clique-cont .icon {
    font-size: 2em;
}

.clique-cont.invited .icon {
    opacity: 0.7;
}

.clique-cont>span:first-of-type {
    display: flex;
    align-items: center;
}

.clique-cont .text,
.clique-result {
    display: flex;
    flex-direction: column;
    margin: 0 1em;
}

.clique-cont:not(.invited) .remind {
    display: none;
}

.clique-cont .remind {
    display: inline;
    text-decoration: underline;
    cursor: pointer;
}

.permission-select {
    border: none;
    border-bottom: 1px solid;
    cursor: pointer;
}

.circle-x {
    font-weight: bold;
    margin: 0 1em;
    height: 1em;
    width: 1em;
    display: inline-flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
}

.clique-result,
.clique-result>* {
    padding: 0.25em 0;
}

.clique-cont .email,
.clique-result .email {
    opacity: 0.7;
    font-style: italic;
}

.clique-cont.is-group .email {
    text-decoration: underline;
    cursor: pointer;
}

.clique-cont.is-group .email:hover {
    opacity: 1;
}

.pfield-description {
    display: block;
    font-style: italic;
    opacity: 0.7;
}

.placement-name a- {
    color: inherit;
    text-decoration: none;
}

.placement-name:hover {
    overflow: visible;
}

.placement-name a-:hover {
    text-decoration: underline;
    background: #dfdfdf;
}

.placement-grabbable {
    margin-left: -1.2em;
}

grabbable-.fake-hovered:not([handlepos="self"]) {
    box-shadow: unset;
}

.placement-grabbable.fake-hovered {
    box-shadow: unset;
}

.placement-grabbable-cont {
    display: grid;
    grid-template-columns: [arrow] 1em [name] 1fr [sharedspace] 42px [time] 58px [status] 1em;
    align-items: center;
    width: 100%;
}

.placement-grabbable-cont.tree-expanded {
    margin-bottom: 5px;
}

.tree-collapsed .child-placements {
    display: none;
}

.current-placement {
    background: #fff3;
}

.child-placements {
    grid-row: 2;
    margin-left: 10px;
    grid-column-start: 1;
    grid-column-end: 6;
    position: relative;
    z-index: 11;
    max-width: 100%;
    /* overflow-x: hidden; */
    text-overflow: ellipsis;
}

.static-tree-nav-container .child-placements {
    z-index: unset;
}

.placement-time-info {
    grid-column: time;
}

.placement-status-icon {
    grid-column: status;
    filter: drop-shadow(0px 0px 1px black);
    padding-right: 1px;
}

.placement-name {
    grid-column-start: name;
    grid-column-end: -1;
    /*time; timebars temporarily removed*/
    z-index: 6;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    grid-row: 1;
}

.hidden-root>.placement-status-icon {
    display: none;
}

.hidden-root>.expander-icon {
    display: none;
}

.hidden-root>.placement-name {
    display: none;
}

.hidden-root>.placement-info {
    display: none;
}

.hidden-root>.child-placements {
    margin-left: 0px;
}

.hidden-root {
    margin: 0px !important;
    padding: 0px !important;
    font: 1em !important;
}

.expander-icon {
    grid-column: arrow;
}

.placement-info {
    display: grid;
    margin: 1px;
    width: 100%;
    justify-items: end;
    height: 1.7em;
    grid-column-start: sharedspace;
    grid-column-end: 8;
    grid-row: 1;
    align-items: center;
}

.nochildren .placement-info .budget-allocated {
    background: var(--budget-child-placements);
}

.budget-allocated {
    background: #00000088;
    height: 100%;
    position: relative;
    z-index: 0;
    grid-column: 1;
    grid-row: 1;
    transition: 300ms;
}

.budget-children {
    background: var(--budget-child-placements);
    height: 100%;
    position: relative;
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
    transition: 300ms;
}

.budget-descendants {
    background: #ddad16;
    height: 10%;
    position: relative;
    z-index: 4;
    grid-column: 1;
    grid-row: 1;
    transition: 300ms;
}

.budget-children-exceeded {
    background: #800;
    height: 100%;
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    transition: 300ms;
}

.budget-descendants-exceeded {
    background: red;
    height: 10%;
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    transition: 300ms;
    margin-left: auto;
    margin-right: 0;
}

.static-placement-nav {
    width: fit-content;
    padding: 2px;
    border-color: #0005;
    border-radius: 5px;
    border-width: 0px 0px 0px 1px;
    border-style: solid;
    height: fit-content;
    overflow: hidden;
    display: block;
}

.you-are-here::before {
    /* background: #ffffffaa; */
    content: "\2022";
    position: absolute;
    color: #0005;
    left: 0px;
    cursor: pointer;
    line-height: 0.9em;
    font-size: 2em;
    margin-left: 0px;
}

.static-placement-nav .placement-name {
    margin: 4px;
    overflow: visible;
}

.static-placement-nav a:hover {
    background-color: inherit;
}

.cc-placement-nav,
.topic-placement-nav,
.compfam-placement-nav,
.task-placement-nav,
.static-placement-nav {
    width: 100%;
    padding: 2px;
    /* border-color: #0005; */
    /* border-radius: 5px; */
    /* border-width: 0px 0px 0px 1px; */
    /* border-style: solid; */
    height: fit-content;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.depthtally-container {
    text-align: center;
    width: auto;
    height: 2em;
    display: flex;
}

.depths {
    display: flex;
}

.info-row {
    background: white;
    border-radius: 6px;
    /* flex-wrap: nowrap; */
    padding: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: visible;
    max-width: 100%;
    margin-bottom: 2px;
    grid-template-columns: [title] auto [endspace] 1fr [extra] 4em;
}

.cc-placement-nav .placement-name,
.compfam-placement-nav .placement-name,
.task-placement-nav .placement-name,
.topic-placement-nav .placement-name {
    margin: 4px;
    /* overflow: visible; */
}

.cc-placement-nav a:hover {
    background-color: inherit;
}

.qstally>img {
    height: 2em;
}

.is-related {
    /* border-style: solid; */
    /* border-color: blue; */
    border-radius: 8px;
    width: fit-content;
    border-width: 1px;
    padding: 2px;
}

.isComp {
    /* background-color: #ffb17e; */
    /* background-color: white; */
}

.isSubcomp {
    /* background-color: #fde9ce; */
    /* background-color: white; */
    margin-left: 8px;
    margin-top: 0px;
}

.isScobjective {
    background-color: white;
}

.compfam-container {
    /*display: grid;*/
    grid-template-columns: [hierarchy] 1fr [objectives] 1fr;
    height: 100%;
    overflow: auto;
}

.placement-compfam-container {
    background-color: #bbbbbb;
}

#compfam-placement-container {
    height: 100%;
}

#compfam-placements {
    display: flex;
    flex-direction: column;
    min-height: 15em;
    /*background: #00000015;*/
    height: 90%;
}

.scobjective-editor {
    grid-column: objectives;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #0004;
    height: 100%;
}

.compfam-grabbable {
    /* margin: 2px 5px 2px 2px; */
}

.compfam-grabbable-cont.isComp>.compfam-grabbable-self>summary {
    grid-template-columns: [bullet] 1.4em [name] 1fr [endspace] 1.4em;
    grid-gap: 1px;
    border-radius: 5px;
    /* border-style: solid; */
    /* background: var(--character-background); */
}

.compfam-grabbable-cont.isSubcomp>.compfam-grabbable-self {
    border-radius: 16px;
    margin-left: 10px;
    /* background: inherit; */
    margin-top: 4px;
    /* border-style: solid; */
}

.compfam-grabbable-cont>.compfam-grabbable-self>summary {
    padding: 5px;
    grid-gap: 4px;
    width: 100%;
    display: grid;
    grid-template-rows: [self] minmax(1em, 1fr) [children] auto;
    align-items: baseline;
    border-color: inherit;
}

.compfam-grabbable-cont>.children {
    grid-row: children;
}

.character .compfam-grabbable-cont {
    /* border-color: #BF7C00; */
    /* grid-template-columns: [all] 1fr [endspace] 1em; */
    /* display: grid; */
    grid-row: 1;
    grid-column: 1;
    /* border-radius: 14px; */
    /* margin-left: 5px; */
}

.compfam-inline.character {
    border-bottom: 2px solid #BF7C00;
}

.skills .compfam-grabbable-cont {
    border-left-color: #0B6F73;
}

.compfam-inline.skills {
    border-bottom: 2px solid #0B6F73;
}

.meta-learning .compfam-grabbable-cont {
    border-left-color: #3C4950;
}

.compfam-inline.meta-learning {
    border-bottom: 2px solid #3C4950;
}

pinnable-result {
    display: grid;
    grid-template-columns: [selector] 2em [resultcontent] minmax(0, 1fr);
}

.showTrashed pinnable-result.trashed {
    display: grid !important;
}

.compfam-name {
    text-overflow: ellipsis;
    overflow: hidden;
    grid-column: name;
    grid-row: 1;
}

.objective-gac {
    display: grid;
    grid-template-columns: [given] 1fr [asked] 1fr [can] 1fr;
}

.statVal {
    font-weight: bold;
}

.tree-item {
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
}

.competency {
    border-radius: 4px;
    border-color: #0003;
    border-style: solid;
    border-width: 1px;
}

.competency-cont.tree-item {
    display: grid;
    grid-template-rows: [name] 1em [children] 1fr;
    grid-template-columns: [arrow] 15px [name] 1fr;
    padding: 2px;
}

.competency-name {
    grid-column: name;
    grid-column-start: 2;
    grid-column-end: 3;
}

.subcompetency-name {
    display: inline;
    /*white-space: nowrap;  
overflow: hidden;
text-overflow: ellipsis;*/
}

.subcompetency {
    border-radius: 4px;
    border-color: #0003;
    border-style: solid;
    border-width: 1px;
}

.subcompetency-cont.tree-item {
    display: grid;
    grid-template-rows: [name] auto [children] 1fr;
    grid-template-columns: [arrow] 15px [name] 1fr [edit] 25px;
    padding: 2px;
}

.subcomp-dc {
    display: grid;
}

.subcompetency-name {
    grid-column: name;
}

.compfam-grabbable .children {
    grid-row: children;
    grid-column-start: 1;
    grid-column-end: 4;
    /* margin-left: 15px; */
    background: white;
    padding-top: 4px;
}

.tree-collapsed .children {
    display: none;
}

.editable-scobjective-gac {
    background: white;
    display: block;
    border-radius: 5px;
    padding: 5px;
    /* padding-bottom: 5px; */
    margin: 5px;
    border-style: solid;
    border-color: #0005;
    border-width: 1px;
}

#q-connections-grid {
    display: grid;
    grid-template-rows: [assigned] 10em [chooseable] 1fr;
    grid-template-columns: [tasks] 1fr [compfams] 1fr [topics] 1fr;
}

#labelfor-tasks-by-q-dc {
    grid-row: assigned;
    grid-column: tasks;
}

#labelfor-compfams-by-q-dc {
    grid-row: assigned;
    grid-column: compfams;
}

#hidden-question-container #question-edit-container {
    display: none;
}

#question-edit-container {
    width: 100%;
    /*padding: 1em 3em 1em 1em;*/
}

#q-description-container {
    display: grid;
    grid-template-columns: [description] 1fr [type] 8em;
    padding: 1em;
}

#question-content-container {
    height: 100%;
}

#question-edit-container {
    width: 100%;
    /* padding: 1em 3em 1em 1em; */
    overflow: hidden;
    height: 100%;
}

#question-content-container>tab-container>.tabcontentrow {
    height: 75%;
}

#question-content-container>tab-container {
    display: grid;
}

#question-content-container tab-selector.selected {
    filter: drop-shadow(0px -1px 2px black) !important;
}

#question-content-container tab-selector {
    background-color: #0005;
}

select#q-type-selector {
    margin: 0em;
}

.q-text {
    grid-column: description;
    grid-row: 1;
}

.q-description-toggle,
.answerbit-description-toggle {
    height: 16px;
    padding: 1em;
    font-size: smaller;
    text-decoration: underline;
    opacity: 0.7;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.q-description-toggle:hover,
.answerbit-description-toggle:hover {
    opacity: 1;
}

.q-description-toggle span span,
.answerbit-description-toggle span span {
    display: none;
    cursor: pointer;
}

.q-description-toggle.simple .rich,
.answerbit-description-toggle.simple .rich {
    display: inline;
}

.q-description-toggle.rich .simple,
.answerbit-description-toggle.rich .simple {
    display: inline;
}

.q-html,
.answerbit-html {
    padding: 2em 1em 1em 1em;
    border: 1px solid lightgrey;
    cursor: pointer;
    position: relative;
}

.q-html::before,
.answerbit-html::before {
    content: "< />";
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.3em;
    padding-left: 1em;
    opacity: 0.7;
}

.overlay-jodit {
    width: 55vw;
}

.q-type-selection-container {
    display: inline-block;
    font-size: 0.8em;
}

.answerbit-description-container {
    grid-column: choice;
}

.stat-item {
    font-size: 12px;
}

#options-menu-subcontainer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
}

#options-menu-container {
    position: absolute;
    z-index: 999999;
}

option- button {
    width: 100%;
}

a- {
    cursor: pointer;
    text-decoration: none;
}

a-:hover {
    text-decoration: underline;
}

.shared-jodit-container {
    /* margin-top: -1em; */
    box-sizing: border-box;
}

.stay-on-top {
    z-index: 50;
}

shared-jodit.focused .jodit-toolbar__box {
    /* display: block; */
    display: block;
    margin-left: -1.1em;
    margin-top: -3em;
    position: sticky;
    top: 0;
    align-self: self-end;
    grid-row-start: 1;
    /* grid-row-end: 1; */
    border-style: solid;
    border-width: 1px;
    border-color: #0006;
    border-radius: 10px;
    background: #ffffffba;
    z-index: 700;
    backdrop-filter: blur(5px);
    /* filter: drop-shadow(0px 0px 4px #000a); */
    box-shadow: 0px 0px 4px #0008;
    width: fit-content;
    height: fit-content;
}

shared-jodit:focus-within .jodit-toolbar__box {
    /* display: block; */
    display: block;
    margin-left: -60em;
    margin-top: -263px;
    margin-bottom: -263px;
    /* min-width: 36em; */
    /* margin-top: -100%; */
    /* z-index: 1000; */
    /* margin-bottom: -100%; */
    position: sticky;
    top: 0em;
    left: 0px;
    bottom: 1em;
    align-self: self-end;
    grid-row-start: 1;
    height: fit-content;
    /* grid-row-end: 1; */
    border-style: solid;
    border-width: 1px;
    border-color: #0006;
    border-radius: 0px 10px 10px 0px;
    background: #ffffffba;
    z-index: 700;
    backdrop-filter: blur(5px);
    /* filter: drop-shadow(0px 0px 4px #000a); */
    box-shadow: 0px 0px 4px #0008;
    width: 2.3em;
    max-height: calc(100vh - 8em);
}

.jodit-container.jodit.jodit_theme_default {
    display: grid;
    grid-template-rows: 0.01px 1fr;
}

#main-tabpane>.tabrow>tab-selector.selected {
    text-decoration: underline;
    /* font-size: 1.1em; */
    /* height: unset !important; */
    bottom: unset;
}

#main-tabpane tab-selector .tabtitle:hover {
    text-decoration: underline;
}

shared-jodit:focus-within .jodit-ui-group.jodit-ui-group_size_middle {
    display: flex;
    /*flex: 0 0 auto;*/
    flex-shrink: 5;
    /* justify-items: flex-start; */
    justify-content: center;
    align-content: center;
    align-items: baseline;
    flex-direction: column;
    /* flex-wrap: wrap; */
    /* flex-direction: row; */
}

.jodit-popup__content .jodit-toolbar-editor-collection {
    display: block;
    /* position: relative; */
}

span.paste-hint {
    font-style: normal;
    /* font-weight: bold; */
    display: inline-;
}

#lefthand-tabs tab-selector {
    /* height: 2.5em !important; */
    bottom: unset;
    /* border-top: 0px; */
    border-style: none;
    font-family: nunito;
    /* border-radius: 0px; */
    /* background-color: #f1eded; */
    color: unset;
    /* padding-top: 0px !important; */
    /* padding-bottom: 0px; */
    padding: 0px 10px 0px 10px;
    /* padding: 0.25em; */
    flex-grow: 1;
    /* width: 10em; */
    font-size: 1.5em;
    line-height: 1.5em;
    text-align: left;
    font-weight: bold;
    color: #1f1f1f;
    opacity: 0.25;
}

#lefthand-tabs tab-selector.selected {
    border-bottom: 0px;
    /* background: #3c4950; */
    color: var(--active-green);
    opacity: 1;
}

tab-container#lefthand-tabs {
    grid-template-rows: [tabsrow] 3.8em [tabcontent] 1fr !important;
    flex-grow: 1;
    align-content: stretch;
    width: 100%;
}

#pexportables-container {
    padding: 1em 0;
    width: 100%;
    /* margin-right: 25%; */
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
}

#notes-header,
#outline-header {
    font-size: 1.5em;
    font-weight: 800;
    display: flex;
    align-items: center;
    width: 100%;
    grid-gap: 0.75em;
    padding: 1em 0.5em;
    /* position: fixed; */
    /* position: fixed; */
    /* left: 0px; */
}

#outline-header {
    padding-bottom: 0;
}

.is-activity~#placements,
.is-activity~#pexportables-container #outline-header {
    display: none;
}

#notes-header span::after {
    content: "Notes and Materials:"
}

.is-activity~#pexportables-container #notes-header span::after {
    content: "Activity Content:"
}

#thisplacement-inline-goals {
    padding: 0 2em;
}

#left-pane .tabrow {
    height: 100%;
}

#main-tabpane .tabcontentrow {
    height: fit-content;
}

#main-tabpane>.tabrow {
    display: flex;
    max-width: 60vw;
    margin-left: auto;
    padding-left: 2em;
    font-size: 1.2em;
    position: sticky;
    z-index: 20;
    background: white;
    top: 0px;
    height: 2em;
    width: 100%;
    /* background: unset; */
    /* border: unset; */
}

#main-tabpane>.tabrow>tab-selector {
    flex-grow: 0;
    padding-right: 3em;
    /* text-decoration: underline; */
    border: unset;
    background: unset;
}

grabbable-:not(.flip-scale-50),
grabbable-:not(.flip-scale-100),
grabbable-:not(.flip-scale-200),
grabbable-:not(.flip-300),
grabbable-:not(.flip-animating-50),
grabbable-:not(.flip-animating-100),
grabbable-:not(.flip-animating-200),
grabbable-:not(.flip-200),
grabbable-:not(.flip-shift-50),
grabbable-:not(.flip-shift-100),
grabbable-:not(.flip-shift-200),
grabbable-:not(.flip-100),
grabbable-:not(.flip-animating),
grabbable-:not(.flip-scrolling),
grabbable-:not(.flip-fast),
grabbable-:not(.flip-layout) {
    transition: box-shadow, filter 0.3s;
}

.flip-shift-600 {
    transition: transform 600ms linear 0ms;
}

.flip-shift-300 {
    transition: transform 300ms linear 0ms;
}

.flip-scale-300 {
    transition: transform 300ms linear 0ms;
}

.flip-scale-200 {
    transition: transform 200ms linear 0ms;
}

.flip-debugging {
    transition: 3600ms all !important;
}

.flip-animating,
.flip-600 {
    transition: 600ms all !important;
}

.flip-scrolling,
.flip-300 {
    transition: 300ms all !important;
}

.flip-fast,
.flip-50 {
    transition: 50ms all !important;
}

.flip-200 {
    transition: 200ms all !important;
}

.flip-layout,
.flip-100 {
    transition: 100ms all !important;
}

.jodit-container:focus-within {
    box-shadow: 0px 0px 0px 2px black;
}

.choice-row-cont>* {
    grid-row-start: 1;
}

.jodit-toolbar-editor-collection.jodit-toolbar-editor-collection_mode_horizontal {
    /* min-width: 36em; */
}

#comment-carousel {
    overflow-y: hidden;
    padding-top: 0vh;
    padding-bottom: 0vh;
    display: block;
    /* height:100%; */
    padding-left: 8px;
    padding-right: 8px;
    grid-column: comments;
    grid-row-start: wheader;
    grid-row-end: 6;
    /* overflow-y: hidden; */
    flex-direction: column;
    /* overflow-y: revert; */
    flex-grow: 1;
    /* flex-basis: 16em; */
    flex-shrink: 4;
    /* background: #fff8; */
    right: 0px;
    align-self: stretch;
    max-width: 10em;
    /* left: 0px; */
    /* justify-self: left; */
    min-width: 12em;
    max-width: 30em;
    width: 100%;
    /* width: 100%; */
    /* scroll-behavior: smooth; */
    /* position: fixed; */
    /* width: 15px; */
    overflow-y: initial;
    /* flex-shrink: 50; */
    flex-grow: 1;
    z-index: 95;
    /* justify-self: stretch; */
}

span#current-placement-info {
    grid-row: 2;
    grid-column: placement;
    position: relative;
    z-index: 50;
}

#comment-carousel .authorable-to-comment {
    display: none;
}

#comment-carousel #commenter-wrapper {
    /*padding-top: 80vh;*/
    /*padding-bottom: 80vh;*/
    margin-top: 0px;
    /* position: absolute; */
    /* left: 0; */
    /* margin-left: 0px; */
    /* right: 0px; */
    /* margin-left: -8px; */
    /* overflow-y: hidden; */
    /* width: 100%; */
    /* min-width: 16em; */
    /* max-width: 32em; */
    /* align-self: stretch; */
    /* justify-self: stretch; */
    /* width: 28%; */
}

.comment:focus-within {
    /* filter: drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 3px black); */
    border-color: #0008;
    z-index: 2;
}

span.comment-delete {
    position: absolute;
    right: 10px;
}

.comment:not(:focus-within,
:focus) {
    cursor: pointer;
    /* border-radius: unset; */
    /* padding: 10px; */
    /* border-style: solid; */
}

.comment .comment:focus-within {
    /* filter: drop-shadow(0px 0px 2px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px black); */
    background: white;
}

.comment .comment {
    margin-top: unset;
    border-radius: unset;
    border: none;
    padding: 0.5em 0;
    background-color: unset;
}

.current-placement>.placement-grabbable-cont>.placement-name {
    text-decoration: underline;
    font-weight: 600;
}

.boxConts>.tabrow>tab-selector {
    border-style: solid !important;
    border-width: 1px;
    border-radius: 30px;
    /* width: fit-content; */
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    /*grid-template-columns: [title] 1fr [content] 1em;*/
    grid-gap: 0.5em;
    flex-grow: 0;
    /* font-size: 1.1em; */
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    bottom: unset;
    height: unset;
    cursor: pointer;
}

.boxConts>.tabrow {
    z-index: 1;
    /* margin-top: 10px; */
    height: fit-content;
    justify-content: flex-start;
    grid-gap: 0.5em;
    position: relative;
    font-size: 0.9375em;
    /* justify-items: center; */
    /* align-content: center; */
    /* align-items: center; */
}

.boxConts>.tabrow>tab-selector.standard-tab {
    border-color: var(--standards-background);
}

.boxConts>.tabrow>tab-selector.standard-tab.selected {
    background: var(--standards-background);
    height: 100%;
}

.boxConts>.tabrow>tab-selector.standard-tab.selected>.content-info {
    color: var(--standards-background);
}

.boxConts>.tabrow>.standard-tab>.content-info {
    background: var(--standards-background);
}

.boxConts>.tabrow>tab-selector.topic-tab {
    border-color: var(--topics-background);
}

.boxConts>.tabrow>tab-selector.topic-tab.selected {
    background: var(--topics-background);
}

.boxConts>.tabrow>tab-selector.topic-tab.selected>.content-info {
    color: var(--topics-background);
}

.boxConts>.tabrow>.topic-tab>.content-info {
    background: var(--topics-background);
}

.boxConts>.tabrow>tab-selector.cc-tab {
    border-color: var(--ccs-background);
}

.boxConts>.tabrow>tab-selector.cc-tab.selected {
    background: var(--ccs-background);
}

.boxConts>.tabrow>tab-selector.cc-tab.selected>.content-info {
    color: var(--ccs-background);
}

.boxConts>.tabrow>.cc-tab>.content-info {
    background: var(--ccs-background);
}

.boxConts>.tabrow>tab-selector.compfam-tab {
    border-color: var(--compfams-background);
}

.boxConts>.tabrow>tab-selector.compfam-tab.selected {
    background: var(--compfams-background);
}

.boxConts>.tabrow>tab-selector.compfam-tab.selected>.content-info {
    color: var(--compfams-background);
}

.boxConts>.tabrow>.compfam-tab>.content-info {
    background: var(--compfams-background);
}

.boxConts>.tabrow>tab-selector.selected {
    color: white;
}

.boxConts>.tabrow .content-info {
    color: white;
    border-radius: 4em;
    font-size: 1em;
    text-align: center;
    width: 1.25em;
    height: 1.25em;
    display: flex;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    vertical-align: center;
    text-align: center;
}

.boxConts>.tabrow .tabtitle {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
}

.boxConts>.tabrow>tab-selector.empty {
    background-color: white;
    border-color: #b8b8b8;
    border-style: dashed !important;
    border-width: 1px !important;
}

.boxConts>.tabrow>tab-selector.empty .content-info {
    background-color: #0000;
    color: #0000;
    border-color: #b8b8b8;
    border-style: dashed;
    border-width: 1px;
    /* text-decoration: none !important; */
}

.boxConts>.tabrow>.selected>.content-info {
    background: white !important;
}

.boxConts>.tabcontentrow {
    overflow: unset;
    /* margin-left: -1.3em; */
    /* margin-right: -1.2em; */
    /* padding-bottom: 15px; */
}

#lefthand-tabs>.tabcontentrow {
    overflow-x: clip;
    /* margin-top: 12px; */
    border-width: 1px 0px 0px 0px !important;
    scrollbar-width: thin;
    border-style: solid;
    scrollbar-gutter: both-edges;
    overflow: hidden;
    /* scroll-padding: 2em; */
    z-index: 2;
    border-color: #1f1f1f60;
    border-top-width: 0px;
    /* padding-top: 0px; */
    /* overflow: overlay; */
    /* border-top-style: solid !important; */
}

#lefthand-tabs>.tabcontentrow>tab->* {
    padding-right: 18px;
}

.fourxone>.placement-cont>.placement-self>tab-container {
    margin-left: -0.5em;
    position: relative;
    z-index: 1;
}

.fourxone>.placement-cont>.placement-self>tab-container>.tabcontentrow {
    /*margin-left: -1.6em;
margin-right: -1.33em;*/
    margin-left: -1.4em;
    /* border-style: solid; */
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-right: -1.1em;
    padding: 0px;
    font-size: 0.9375em;
    /*border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #0006;*/
}

.fourxone>.placement-cont>.placement-self {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1em;
    padding-bottom: 0;
    margin-left: -1.35em;
    padding-left: 1.75em;
}

.fourxone>.placement-cont {
    padding: 0;
}

.compfam-heading {
    grid-template-columns: [bullet] 1em [identifier] auto [name] 1fr [endspace] 1.4em;
    grid-gap: 10px;
    font-size: 14px;
    font-weight: 600;
}

span.compfam-name {
    grid-column: name;
    grid-row-start: 1;
}

#left-placeables-wrapper summary::marker {
    display: none;
}

menu-button>details>summary {
    list-style: none !important;
    list-style-type: none !important;
}

menu-button>details>summary::-webkit-details-marker {
    display: none;
}

summary[is="smooth-summary"]::-webkit-details-marker {
    display: none;
}

summary[is="smooth-summary"] {
    list-style: none !important;
    list-style-type: none !important;
}

.cliques-container>details>summary[is="smooth-summary"] {
    list-style: none !important;
    display: grid;
    grid-template-columns: [endspace] 1em [title] 1fr;
}

#left-placeables-wrapper>details>summary {
    width: 100%;
    height: 120px;
    /* margin: 0em 0em 0em 0.5em; */
    /* padding-top: 20px; */
    padding-left: 1.25em;
    /* font-family: SFProDisplay; */
    font-size: 1.8em;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #e0e0e0;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.31;
    letter-spacing: normal;
    color: #3c4950;
    /* font-size: 1.5em; */
    display: grid;
    /* grid-template-rows: [title] 1fr [status] 1fr; */
    grid-template-columns: [icon] auto [title] 1fr [status] auto [endspace] 1em;
    align-items: center;
    grid-column-gap: 1em;
}

#left-placeables-wrapper>details>summary>img {
    height: 46px;
    width: 46px;
}

#left-placeables-wrapper details>summary:hover>.summary-title {
    text-decoration: underline;
    transition: all 150ms;
}

#left-placeables-wrapper details>summary {
    cursor: pointer;
    /* padding-left: 8px; */
}

details[open]>summary[is="smooth-summary"]+* {
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    transform-origin: 0px 0px;
    /*transform: scale(1,1);
transition: all 0.3s ease;
animation: sweepout 0.3s ease-in-out;*/
    height: auto;
}

details.collapsing *:not(summary,
summary *) {
    max-height: 0px !important;
    overflow: hidden;
}

details>summary[is="smooth-summary"]+* {
    transform-origin: 0px 0px;
    /*transform: scale(1, 0);
animation: sweepin 0.3s ease-in-out; 
transition: all 0.3s ease;*/
    height: 0px;
}

@keyframes sweepout {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

@keyframes sweepin {
    0% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}

#left-placeables-wrapper details:first-of-type {
    /* border-top-width: 0px; */
    /* border-style: hidden; */
}

summary#standards-left-drawer {
    border-width: 0px;
    border-style: hidden;
    /* padding-right: 2em; */
    /* margin-right: -2em; */
}

#standards-left-drawer div:first-of-type {
    display: flex;
    flex-direction: column;
    width: 100%;
}

details[open]>summary>.summary-title {
    border-width: 0px 0px 0px 0px!important;
    text-decoration: underline;
    text-overflow: ellipsis;
    /* overflow-x: hidden; */
    /* font-weight: bold; */
    /* transform: scale(1.5); */
    transform-origin: top;
    /* transition: scale; */
}

.time-used.exceeded {
    --closecut: 44;
    /*yellowish hue*/
    --exceeded: 0;
    /*red hue*/
    color: hsl(calc((var(--amt)*var(--exceeded)) + ((1 - var(--amt))*var(--closecut))), 100%, 50%);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.time-used.closecut {
    --closecut: 44;
    /*yellowish hue*/
    --exceeded: 0;
    /*red hue*/
    color: hsl(var(--closecut), 100%, calc(var(--amt) * 50%));
    text-decoration: underline;
    text-decoration-style: dotted;
}


/*
:is(.placement:focus-within, .placement:focus) > .placement-cont > .boxmeta-container > .boxmeta-left > .boxHeading > :is(a-, .placement-title) {
display: none;
}

.placement:not(:is(:focus-within, :focus)) > .placement-cont > .placement-self > .boxmeta-container > .boxmeta-left > .boxHeading > .placement-title-edit {
display: none;
}
*/

.placement-title-edit>shared-input {
    padding: 0em;
}

tab-container#main-tabpane {
    height: fit-content;
}

.summary-title {
    grid-column: title;
    grid-row: 1;
    align-self: center;
    /* max-height: 1em; */
    font-weight: bold;
    cursor: pointer;
    /* text-decoration: underline; */
}

.progress-description {
    grid-column: status;
    grid-row: title;
    font-size: 12px;
    color: gray;
    text-decoration: none !important;
}

.summary-progress-bars {
    width: 100%;
}

.total-container {
    grid-template-rows: [taught] 4px [assessed] 4px;
    height: 18px;
    width: 100%;
    /* background-color: hsl(40deg 74% 67%); */
    background: lightgray;
    border-radius: 40px;
    overflow-x: clip;
}

.taught-container {
    height: 9px;
    background: linear-gradient(0deg, #299f49, #addf83);
    /* background: #fada51; */
    /* background-color: #8ccf53; */
    border-radius: 20px;
    margin-left: -5px;
    margin-right: -5px;
    filter: drop-shadow(2px 0px 3px #000A);
}

.assesed-container {
    height: 4px;
    background-color: darkgray;
}

span.breadcrumb-seperator {
    color: darkgray;
    font-size: 1.7em;
    max-height: 1.04em;
    height: 1.04em;
    line-height: 0.7em;
    /* min-width: max-content; */
}

.breadcrumb-placement.current {
    color: #1f1f1f;
}

.header-placement.trashed {
    display: unset !important;
}

.header-placement.trashed .placement-cont {
    opacity: 0.5;
}

.header-placement .placement-title-edit {
    display: flex;
    /* height: 28px; */
    margin-left: 0.2em;
    /* max-height: fit-content; */
    /* width: 100%; */
}

.placement-header .placement-title shared-input {
    line-height: 1em;
}

.fourxone placement-title-edit a- {
    display: block;
}

.fourxone .placement-title-edit a- {
    line-height: 1em;
    margin-top: -10px;
}

.placement-title-edit {
    display: flex;
    align-items: baseline;
}

span.placement-title:hover {
    cursor: text !important;
}

.boxConts>.tabrow>tab-selector:hover .content-info {
    text-decoration: wavy !important;
    text-decoration-color: red;
}

span.content-info-text {
    font-size: 0.9em;
    visibility: hidden;
    /* line-height: 3px; */
}

.header-placement .placement-title {
    margin-left: 0.2em;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    /* word-break: break-word; */
    white-space: nowrap;
}

span.placement-type {
    font-weight: bold;
    min-width: fit-content;
}

.assessed-container {
    height: 9px;
    background: linear-gradient(0deg, #4e9fa9, #83dae5);
    /* border-width: 2px 0px 0px 0px; */
    /* border-style: solid; */
    /* background-color: #e4a13a; */
    border-color: #e4a13a;
    border-radius: 20px;
    margin-left: -5px;
    margin-right: -5px;
    filter: drop-shadow(2px 1px 3px #000a);
}

.boxHeading a- {
    font-weight: bold;
}

.placement:not(.children-expanded) .placement-children {
    display: none;
}

.placement:not(.children-expanded) .placement-children.expanding {
    display: unset;
    height: 1px;
}

.placement-children {
    /*margin-right: -1.45em;
margin-left: -2.55em;
margin-top: -0.3em;
padding-left: 2.5em;
background: white;
padding-right: 0.3em;
border-left-color: white;
border-right-color: white;
border-style: solid;
border-bottom-color: white;
margin-bottom: 0px;
margin-top: -2px; */
    padding-top: 0.6em;
    /* padding-bottom: 0px; */
    border-top-width: 0px;
    grid-row: children;
    display: flex;
    flex-direction: column;
    height: fit-content;
}

.child-placements-dc:not(.no-children)~.dashed-button {
    display: none;
}

#conts.no-children~span,
.child-placements-dc.no-children~span {
    display: none !important;
}

.placement-children>span,
#placements>span:last-child {
    display: flex;
    align-items: center;
    height: 14px;
    justify-content: center;
    /*margin-left: -1.75em;*/
    filter: opacity(0);
}

#placement-exportables+span {
    filter: opacity(0);
}

#placement-exportables+span:hover {
    filter: opacity(1);
}

#placements>.dashed-button,
.placement-children>.dashed-button {
    /*margin-left: -1.75em;*/
}

#conts>.placement:not(.trashed):last-of-type,
.child-placements-dc>.placement:not(.trashed):last-of-type,
#placement-exportables>.exportable:not(.trashed):last-of-type {
    margin-bottom: 0px;
}

grabbable-.placement.fourxone.fake-hovered {
    box-shadow: unset;
}

.breadcrumb-placement {
    /*min-width: fit-content;*/
    color: #a8b3b3;
    flex-grow: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: clip;
}

menu-button button,
menu-button label {
    display: block;
    min-width: max-content !important;
    width: 100% !important;
    border-radius: 0px;
    border-width: 1px 15px 0px 15px;
    border-style: solid;
    border-color: #0000;
    border-top-color: #0005;
    border-bottom-color: #000;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    background-color: #f1f1f1;
    /* margin-left: 10px; */
    /* padding-right: 10px; */
}

menu-button button {
    cursor: pointer;
}

menu-button button:hover {
    filter: brightness(0.95);
}

grabbable-:focus-within {
    z-index: 51;
}

.generic-topper .chat-bubble {
    /* padding-top: 0px !important; */
    max-height: 2em;
    align-self: center;
}

.generic-topper>.three-dots {
    align-self: center;
}

.placement-self {
    grid-row: placementself;
    position: relative;
}

.placement-self button.show-children {
    cursor: pointer;
    position: absolute;
    right: 6px;
    border-style: none;
    background: none;
    /* position: relative; */
    z-index: 2;
}

#standards-left,
#compfams-left,
#ccs-left,
#topics-left {
    display: flex;
    flex-direction: column;
    /* min-height: 100%; */
}

.dashed-button,
.not-a-button.dashed-button {
    border: 2px dashed #00000022;
    border-radius: 8px;
    padding: 0.5em;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    cursor: pointer;
    width: 95%;
    background: none;
}

#left-pane .dashed-button {
    /* margin: 1em 0.5em 1em 2em; */
    margin: 5px 4px 0px 12px;
    height: 3em;
}

#standards-left .dashed-button,
#topics-left .dashed-button {
    /* margin: 1em 3em 1em 5em; */
    /* background: none; */
}

.dashed-button:hover {
    border-color: #00000070;
    text-decoration: underline;
}

.placement-goal-list {
    grid-column: -1 /1;
    grid-row: crow;
    display: flex;
    flex-direction: column;
    border-color: #ddd;
    /*background-color: #00000015;*/
    z-index: 2;
    border-radius: 5px 5px 0px 5px;
    height: min-content;
}

grabbable-.goal-grabbable {
    width: 100%;
    background: none;
    margin-bottom: 10px;
    padding: 0px;
}

.placement-task>.generic-topper,
.task-row-container>.generic-topper {
    position: absolute;
}

.placement-task>.generic-topper,
.compfam-grabbable-cont .generic-topper,
.task-row-container>.generic-topper {
    /* position: absolute; */
    grid-row: 1;
    grid-column: -1;
    right: -13px;
}

.compfam-grabbable-cont .generic-topper {
    top: 12px;
}

.double-expander>.placement-subtask-info {
    flex-wrap: nowrap;
    flex-direction: column;
    border-style: solid !important;
    border-width: 0px 0px 0px 1px !important;
    border-color: #e0e0e0;
    padding-left: 5px;
    /* width: 50%; */
}

.expandable-details.noheight {
    height: 0px;
}

.expandable-details .viability-task-grabbable {
    padding: 6px 2px;
    background: #ffff;
    border-style: solid;
    border-color: #0005;
    border-width: 1px;
}

.viability-task-grabbable {
    background-color: #f5f5f5;
    border-style: solid;
    border-width: 1px;
    border-radius: 6px;
    margin-bottom: 2px;
    border-color: #0000;
    height: 2em;
}

.expandable-details .viability-task .task-name {
    display: inline-block;
    padding-left: 4px;
    /* padding-bottom: 7px; */
    line-height: 1em;
}

.connections-area {
    transform-origin: 50% 0% !important;
    background: white;
    width: 100%;
    border-radius: 8px;
    position: relative;
}

.expandable-details.collapsed .connections-area {
    height: 0px;
    width: 100%;
}

.isDimension>.compfam-heading {
    font-size: 2em;
}

.competency-result.isComp>.compfam-heading {
    font-size: 1.5em;
}

.pinnable-result.isComp>.compfam-heading {
    font-size: 1.5em;
}

details[open]>summary:not([noarrow="true"])::after {
    /* transform: scaleY(-1); */
    transform: rotate(90deg) !important;
    transition: 0.25s;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transform-origin: 0.5em 1em;
    height: 10px;
    color: lightgray;
    justify-self: center;
    align-self: center;
    /* grid-row-start: 1; */
    /* grid-row-end: 1; */
    grid-row: 1;
    grid-column: endspace;
    display: inline-block;
    width: 1em;
}

collection-browser details>summary:not([noarrow="true"])::after {
    content: ">";
    /* font-weight: bold; */
    /* height: 5px !important; */
}

collection-browser details[open]>summary:not([noarrow="true"])::after {
    /* content: "v"; */
    font-weight: bold;
}
    
details>summary:not([noarrow="true"])::after {
    content: url(/librsc/img/chevron-right.svg);
    transition: 0.25s;
    width: 100%;
    transform-origin: 0.5em 1em;
    height: 10px;
    width: 1em;
    grid-column: endspace;
    grid-row: 1;
    /* position: absolute; */
    margin-left: auto;
}



details:hover>summary::after {
    text-decoration: none;
}

grabbable- details>summary * {
    font-size: 1em;
}

details {
    font-size: 1em !important;
}

details.double-expander>summary {
    font-size: unset !important;
    /* font-style: unset !important; */
    font-weight: unset !important;
    grid-template-rows: [title] auto [other] 0em !important;
    min-height: 2em;
    display: grid;
    transform-origin: 5px 5px;
    height: fit-content;
    border-radius: 8px;
    padding: 5px 14px 4px 41px;
    background-color: #f5f5f5;
    margin-bottom: 2px;
    color: #757575;
    grid-column-gap: 0.6em;
    /* text-decoration: none !important; */
}

grabbable- details.double-expander {
    /* background: red; */
    grid-column: 1/5;
    margin: 2px 0px 0px 0px;
    /* padding: 5px 36px 4px 41px; */
    border-radius: 6px;
    border-color: #f5f5f5;
    /* background-color: #f5f5f5; */
}

grabbable- details>summary {
    grid-template-columns: [title] auto [endspace] 1fr [extra] auto;
    /* max-height: 1em; */
    display: grid;
}

.subtask-coverage-rollup {
    grid-column: extra;
    display: inline-block;
}

grabbable->.drag-icon {
    grid-column: handle;
    align-self: center;
    justify-self: center;
    z-index: 2;
}

grabbable->.drag-icon[handlepos="self"] {
    display: none;
}

grabbable->.drag-icon[forcehide="true"] {
    display: none;
}

grabbable->.drag-icon[handlepos="left-mid-top"],
.drag-icon[handlepos="right-mid-top"] {
    align-self: self-start;
    margin-top: 250%;
    grid-row: content;
}

grabbable->.drag-icon[handlepos="left-top"],
.drag-icon[handlepos="right-top"] {
    align-self: self-start;
    margin-top: 0.4em;
    grid-row: content;
}

grabbable->.drag-icon[handlepos="left-top"],
.drag-icon[handlepos="right-top"],
grabbable->.drag-icon[handlepos="left"],
.drag-icon[handlepos="right"],
grabbable->.drag-icon[handlepos="left-bottom"],
.drag-icon[handlepos="right-bottom"] {
    padding-right: 5px;
    padding-left: 5px;
    grid-row-start: 1;
    grid-row-end: 4;
}

grabbable->.drag-icon[handlepos="top-left"],
.drag-icon[handlepos="top-right"],
grabbable->.drag-icon[handlepos="top"],
.drag-icon[handlepos="bottom"],
grabbable->.drag-icon[handlepos="bottom-left"],
.drag-icon[handlepos="bottom-right"] {
    padding-top: 5px;
    padding-top: 5px;
    grid-row: handle;
    grid-column-start: 1;
    /* grid-column-end: 4; */
}

grabbable->.drag-icon[handlepos="left-bottom"],
.drag-icon[handlepos="right-bottom"] {
    align-self: self-end;
    margin-bottom: 0.4em;
}

grabbable->.grabbable-content-wrapper[handlepos="self"] {
    user-select: inherit;
}

.placement-task-outer {
    /* margin-left: -1em; */
}

.placement-task>.drag-icon {
    position: absolute;
    top: 0px;
}

.placement-task-grabbable>.drag-icon,
.detail-task-grabbable>.drag-icon {
    position: absolute;
    top: 18px;
    left: 12px;
    font-size: 0.8em;
    margin-top: 0px !important;
    padding: 0px !important;
}

.double-expander>summary>.summary-title {
    font-weight: initial !important;
}

.showTrashed summary.trashed {
    display: grid !important;
    opacity: 0.4;
    filter: brightness(0.6);
    transform: scale(1);
}

.task-name.summary-title {
    font-weight: 600;
    grid-row: unset;
    grid-column: unset;
    padding-left: 4px;
    font-size: 14px;
    display: block;
    text-overflow: ellipsis;
}

grabbable- .placement-goal>details {
    grid-column: title;
}

.as_sentence .textual-desc,
.as_sentence .gac-desc {
    display: inline;
}

.is_gac .as_sentence.textual-task-info .gac-title h3 {
    font-size: 1em;
    display: none;
}

.sentence_like {
    display: none;
}

.is_gac .as_sentence.textual-task-info .gac-title .sentence_like {
    font-size: 1em;
    font-weight: 600;
    display: inline;
}

.is_gac .as_sentence.textual-task-info {
    display: block;
}

.is_gac .as_sentence.textual-task-info .gac-desc {
    display: inline;
    border-style: none;
}

.is_gac .as_sentence.textual-task-info :not(.desc-given) .gac-title {
    display: inline;
    /* width: fit-content; */
    margin-left: -0.4em;
}

.is_gac .as_sentence.textual-task-info .breakline {
    display: none;
}

.is_gac .as_sentence.textual-task-info .gac-title {
    display: inline;
}

.is_gac .as_sentence.textual-task-info :not(.desc-given) .gac-title {
    margin-left: -0.4em;
}

.is_gac .as_sentence.textual-task-info .desc-column {
    display: contents;
}

:not(.is_gac) .textual-task-info .desc-can .gac-title {
    display: none;
}

:not(.is_gac) .textual-task-info .desc-can .gac-desc {
    display: inline;
    text-align: left;
    border-style: none;
    grid-row: 2;
}

:not(.is_gac) .textual-task-info {
    display: block;
}

*:not(.is_gac) .desc-given {
    display: none;
}

*:not(.is_gac) .desc-asked {
    display: none;
}

summary.more-details {
    width: auto;
    text-align: center;
    margin-top: 5px;
    display: block;
}

.more-details>.summary-title {
    text-align: center;
}

details[open]>summary.more-details>.summary-title::after {
    content: "Less Detail";
}

details>summary.more-details>.summary-title::after {
    content: "More Details";
}

.task-placement-nav-container {
    width: 100%;
}

.static-tree-nav-container {
    display: grid;
    text-overflow: ellipsis;
    /* font-size: 0.7em; */
    width: 100%;
    overflow: visible;
    /* overflow-x: hidden; */
    /* max-width: 93%; */
    /* width: 82%; */
}

.filtered-nav-node {
    max-width: 100%;
}

details s {}

summary.more-details~* {
    /* margin-left: -20px; */
    margin-right: -9px;
}

.taught-hint,
.assessed-hint,
.intended-hint,
.bad-hint {
    display: none;
    width: 1.5em;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 600;
    color: white;
}

.taught-hint>[slot="button-appearance"],
.assessed-hint>[slot="button-appearance"],
.intended-hint>[slot="button-appearance"],
.bad-hint>[slot="button-appearance"] {
    opacity: 0.5;
}

.hint-text a- {
    text-decoration: underline;
    font-style: italic;
}

.subtask-rollup>.coverage-rollup>menu-button .hint-text>.prior-text::after {
    content: "All prerequisites of this";
}

.coverage-rollup>menu-button .hint-text>.prior-text::after {
    content: "This is";
}

.detail-task-grabbable:not(.isStandard) .viability-task>.coverage-rollup>menu-button>.hint-text>.parType::after,
.detail-task-grabbable:not(.isStandard) .subtask-rollup>.coverage-rollup>menu-button>.hint-text>.parType::after,
.subtask-rollup>.coverage-rollup>menu-button .hint-text>.thisType::after,
:not(.isStandard) .thisType::after {
    content: "Learning Objective";
}

.detail-task-grabbable.isStandard .viability-task>.coverage-rollup>menu-button>.hint-text>.parType::after,
.detail-task-grabbable.isStandard .subtask-rollup>.coverage-rollup>menu-button>.hint-text>.thisType::after,
.detail-task-grabbable.isStandard .task-summary>.coverage-rollup>menu-button>.hint-text>.thisType::after,
.isStandard .thisType::after  {
    content: "Standard";
}

.viability-task>.coverage-rollup>menu-button>.hint-text>.thisType::after {
    content: "Learning Outcome";
}

.viability-task>.coverage-rollup>menu-button>.hint-text>.tense::after,
.subtask-rollup>.coverage-rollup>menu-button>.hint-text>.tense::after,
.detail-task-grabbable .task-summary>.coverage-rollup>menu-button>.hint-text>.tense::after {
    content: "is";
}

.detail-task-grabbable:not(.isStandard)>.placement-task-outer>.placement-task .task-placement-nav menu-button>.hint-text>.thisType::after {
    content: "Learning Objective";
}

.detail-task-grabbable.isStandard>.placement-task-outer>.placement-task .task-placement-nav menu-button>.hint-text>.thisType::after {
    content: "Standard";
}

.task-placement-nav menu-button.intended-hint>.hint-text>.hintType::after {
    content: "intended for but not yet covered in ";
}

menu-button.taught-hint>.hint-text>.hintType::after {
    content: "present here (tagged to the outline) ";
}

.task-placement-nav :not(.activity-node) .intended-here.show-taught>.coverage-rollup>.taught-hint>.hint-text>.hintType::after {
    content: "present here (tagged to the outline) as intended ";
}

menu-button.assessed-hint>.hint-text>.hintType::after {
    content: "assessed here ";
}

.task-placement-nav :not(.activity-node) .intended-here.show-assessed>.coverage-rollup>.assesed-hint>.hint-text>.hintType::after {
    content: "assessed here as intended ";
}

.task-placement-nav menu-button>.hint-text>.tense::after {
    content: "is";
}

.task-placement-nav .activity-node menu-button>.hint-text>.when::before,
.detail-task-grabbable.activity-task-grabbable .task-summary>.coverage-rollup>menu-button>.hint-text>.when::before {
    content: "in this ";
}

.task-placement-nav menu-button>.hint-text>.when::before,
.detail-task-grabbable .task-summary>.coverage-rollup>menu-button>.hint-text>.when::before {
    content: "in an Activity of this ";
}

.task-placement-nav menu-button>.hint-text>.when::after,
.subtask-rollup menu-button>.hint-text>.when::after,
.detail-task-grabbable .task-summary>.coverage-rollup>menu-button>.hint-text>.when::after {
    content: var(--ptype);
}

.subtask-rollup menu-button>.hint-text>.when::before {
    content: "prior to this ";
}

.viability-task menu-button>.hint-text>.when::before {
    content: "";
}

.viability-task menu-button>.hint-text>.thisType::after {
    content: "Content objective"
}


/*.task-placement-nav menu-button.intended-hint > .hint-text > .additional-info::after {
content: "but it has yet to be assigned to any Activities within this " + var(--ptype);
}*/

.task-summary>.coverage-rollup>.taught-hint>[slot="button-appearance"],
.task-summary>.coverage-rollup>.assessed-hint>[slot="button-appearance"],
.task-summary>.coverage-rollup>.intended-hint>[slot="button-appearance"],
.task-summary>.coverage-rollup>.bad-hint>[slot="button-appearance"] {
    opacity: 1;
}

[slot="button-appearance"] {
    padding: 2px 6px;
    border-radius: 6px;
}

.assessed-hint>[slot="button-appearance"] {
    background-color: #6fc2cc;
}

.taught-hint>[slot="button-appearance"] {
    background-color: #8acc4f;
}

.bad-hint>[slot="button-appearance"] {
    background-color: #b50000;
    opacity: 1;
}

.ta-summary.taught-here>.coverage-rollup>.taught-hint>[slot="button-appearance"] {
    opacity: 1;
}

.ta-summary.assessed-here>.coverage-rollup>.assessed-hint>[slot="button-appearance"] {
    opacity: 1;
}

.ta-summary.intended-here>.coverage-rollup>.intended-hint>[slot="button-appearance"] {
    opacity: 1;
}

.subtask-rollup>.coverage-rollup .bad-hint>[slot="button-appearance"],
.subtask-rollup>.coverage-rollup .assessed-hint>[slot="button-appearance"],
.subtask-rollup>.coverage-rollup .taught-hint>[slot="button-appearance"],
.subtask-rollup>.coverage-rollup .intended-hint>[slot="button-appearance"] {
    opacity: 1;
}

.subtask-summary>.coverage-rollup .bad-hint>[slot="button-appearance"],
.subtask-summary>.coverage-rollup .assessed-hint>[slot="button-appearance"],
.subtask-summary>.coverage-rollup .taught-hint>[slot="button-appearance"],
.subtask-summary>.coverage-rollup .intended-hint>[slot="button-appearance"] {
    opacity: 1;
}

.ta-summary.show-warn>.coverage-rollup>.bad-hint {
    display: inline;
    padding-left: 0.3em;
    /* align-self: center; */
}

.ta-summary.show-taught>.coverage-rollup>.taught-hint {
    display: inline;
    /* align-self: center; */
}

.ta-summary.show-intended>.coverage-rollup>.intended-hint {
    display: inline;
    /* align-self: center; */
}

.ta-summary.show-assessed>.coverage-rollup>.assessed-hint {
    display: inline;
}

.ta-summary.show-intended.show-taught>.coverage-rollup>.intended-hint {
    display: none;
}

.coverage-rollup {
    grid-row: 1;
    grid-column: extra;
    /* line-height: 45px; */
    display: grid;
    grid-template-columns: [t] 1fr [a] 1fr;
    align-content: center;
    align-items: center;
}

.static-tree-nav-container details> :is(summary,
summary:hover)>.summary-title {
    text-decoration: none !important;
}

.intended-hint {
    /* background-color: #edb322; */
    text-align: center;
    /* line-height: 1em; */
    /* padding-bottom: 0.6em !important; */
    /* padding-top: 0em !important; */
    padding: 2px 6px;
    height: 100%;
    /* vertical-align: top; */
}

.intended-here>.coverage-rollup>.taught-hint>[slot="button-appearance"] {
    opacity: 1;
    /* clip-path: polygon(115% 0, -15% 0, 50% 107%); */
    /* line-height: 1em; */
    /* padding-bottom: 0.3em; */
    /* line-height: 1; */
    /* padding-bottom: 3px; */
    /* border-radius: 16px; */
}

.you-are-here>summary>.summary-title * {
    font-weight: 600 !important;
}

.ta-summary {
    grid-template-columns: [title] auto [endspace] 1fr [extra] 4em;
}

.viability-task>.task-name {
    font-size: 0.9em;
}

.fourxone>.placement-cont>.injected-drop-listener.can-accept {
    width: calc(100% + 1.35em);
    margin-left: -1.35em;
}

.fourxone>.placement-cont>.injected-drop-listener.will-accept {
    width: calc(100% + 1.35em);
    margin-left: -1.35em;
}

.placement-cont.child-can-accept>.placement-children {
    position: relative;
    z-index: 10;
}

.placement-cont.child-will-accept>.placement-children {
    position: relative;
    z-index: 10;
}

#header-parent {
    /* width: 100%; */
}

.selected>.tabselection-hint {
    position: absolute;
    width: 50%;
    height: 4px;
    /* background: red; */
    border-color: var(--active-green);
    bottom: 0;
    border-radius: 6px;
    border-width: 2px;
    border-style: solid;
    transition: 0.3s filter;
}

.only-responsive {
    display: none;
}

#lefthand-tabs tab-selector:hover {
    color: #1f1f1f;
    opacity: 0.7;
    /* filter: brightness(0.6) contrast(9.5); */
}

@media only screen and (max-width: 1240px) {
    #left-pane:not(.pane-collapsed) {
        box-shadow: 0px 0px 16px #0009;
    }
}

.tiny #commenter-wrapper {
    /*position: fixed!important;
top: 0;
/* left: 0; */
    /*right: 0;
bottom: 0;
z-index: 100;
width: 42em;
margin: 0 !important;
padding: 15em 6% 0 30%;
overflow-y: auto;*/
    /* background: #0003; */
    /* backdrop-filter: blur(3px); */
    /*max-width: unset !important;*/
}

.hidecomments {
    display: flex;
    border: none;
    background: none;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    z-index: 101;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0.5;
}

.comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.25em;
    font-weight: bold;
    padding: 0 0.25em;
}

.tiny .top-space-div {
    display: none;
}

@media only screen and (max-width: 500px) {
    #left-pane:not(.pane-collapsed) {
        position: absolute;
        width: 100%;
        height: 100%;
        min-width: unset;
        max-width: unset;
        z-index: 2;
    }
}

span.fake-editable {
    display: block;
    /* background: #0005; */
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}

#lefthand-tabs tab-selector.selected {
    color: var(--active-green);
    opacity: 1;
}

span.ptypename {
    font-weight: inherit;
}

#left-placeables-wrapper {
    flex-grow: 1;
    width: 100%;
    align-self: stretch;
    height: 100%;
    overflow-x: clip;
}

.top-space-div {
    position: absolute;
    /* width: 100%; */
    z-index: -1;
}

.hidecomments {
    /* display: none; */
}

.standard-bullet {
    align-self: center;
    padding-left: 8px;
}

summary.task-summary {
    margin-left: -0.2em;
}

.compfam-grabbable .drag-icon {
    grid-row: 1 !important;
    grid-column: 1;
    align-self: center;
    position: absolute;
    left: 0px;
    top: 0px;
}

grabbable-.compfam-grabbable {
    grid-template-rows: [content] 1fr;
    grid-template-columns: [content] 1fr;
    /* margin-bottom: 5px; */
    border-radius: 12px;
}

grabbable-.compfam-grabbable.isComp {
    margin-bottom: 6px;
    border-radius: 12px;
}

.placement.children-loading .placement-self .show-children img {
    display: none;
}

.placement.children-loading .placement-self .show-children::after {
    content: url(/librsc/img/loading.gif);
    visibility: visible;
    margin-left: -3em;
    filter: invert(1);
}

.subcompetency-result .compfam-description {
    border-top-width: 1px !important;
    font-size: 0.8em;
    /* color: #000 !important; */
    line-height: 1.1em;
    padding: 1em;
    padding-top: 0.5em;
    border-color: #0003;
    /* border-style: solid; */
}

.subcompetency-result summary.compfam-heading {
    grid-template-columns: [identifier] auto [name] 1fr [endspace] 1.4em;
    grid-gap: 10px;
    cursor: pointer;
    display: grid;
}

.subcompetency-result summary.compfam-heading:hover {
    /* background: red; */
    filter: contrast(0.7) brightness(0.5);
    background: #0002;
}

.competency-result.isComp.skills {
    color: var(--skills);
    background: white;
    border-color: white;
}

.competency-result.isComp.character {
    color: var(--character);
    background: white;
}

.competency-result.isComp.meta-learning {
    color: var(--meta-learning);
    background: white;
    /* filter: saturate(0.4) brightness(1.4); */
}

.competency-result.isComp .subcompetency-result {
    /* background: #fff5; */
}

.subcompetency-result summary::after {
    color: #0008 !important;
}

.competency-result {
    border-radius: 10px;
    border-style: none;
}

.subcompetency-result {
    border-radius: 4px
}

.subcompetency-result {
    border-width: 1px;
    border-color: #0002;
    border-style: solid;
}

:not(.competency-result) .subcompetency-result.meta-learning {
    background: var(--meta-learning-background);
    filter: saturate(0.7) brightness(1.1);
}

#ccr-content>* {
    /* width: 99%; */
}

#ccr-content.scrollable-page {
    padding: 0em 2em;
    overflow: auto;
}

.jodit-toolbar-editor-collection_mode_vertical span.jodit-toolbar-button {
    max-height: 1.5em;
    min-height: 0px;
    height: 36px;
    /* flex-basis: 1px; */
    /* flex-shrink: 3; */
}

.jodit-toolbar-editor-collection {
    width: unset !important;
    /* z-index: 6; */
}

.jodit-toolbar-editor-collection.jodit-toolbar-editor-collection_mode_horizontal.jodit-toolbar-editor-collection_size_small {
    /* margin-left: -0.5em; */
    border-radius: 0px;
}

.fixed-pos-hack {
    max-height: 100%;
    filter: url();
}

.jodit-toolbar-editor-collection .jodit-toolbar-button {
    margin: 0px !important;
    /* align-self: center; */
    /* justify-self: center; */
    /* align-items: center; */
    justify-content: flex-start;
    flex-direction: row-reverse;
}

button.jodit-toolbar-button__button {
    padding: 0px;
    flex-shrink: 2;
    flex-basis: 0px;
    width: fit-content;
}

button.jodit-toolbar-button__button {
    min-width: fit-content !important;
    /* flex-direction: row-reverse !important; */
}

.jodit-toolbar-collection .jodit-toolbar-button {
    flex-direction: row-reverse !important;
}

.jodit-toolbar__box.spacediv {
    position: relative !important;
    height: 0px !important;
    width: 0px !important;
}

shared-input[type="textarea"]:hover {
    overflow: auto;
}

span.summary-addstuff {
    visibility: hidden;
    max-height: 1em;
}

details[open]>summary>span.summary-addstuff {
    visibility: visible;
}

.resource>details>summary {
    grid-template-columns: [icon] 24px [title] 1fr [extra] 1em;
}

.cards-animating {
    overflow-y: visible !important;
    overflow-x: visible !important;
}

.nicebars:not(.cards-animating) {
    overflow-y: overlay !important;
}

.nicebars:not(.cards-animating):hover,
.nicebars:not(.cards-animating):target,
.nicebars:not(.cards-animating):active,
.nicebars:not(.cards-animating):focus {
    /* overflow: overlay !important; */
}

.nicebars::-webkit-scrollbar {
    width: 5px !important;
}

.nicebars:hover::-webkit-scrollbar,
.nicebars:focus::-webkit-scrollbar,
.nicebars:focus-within::-webkit-scrollbar {
    width: 10px !important;
}

.nicebars:hover::-webkit-scrollbar-thumb,
.nicebars:focus::-webkit-scrollbar-thumb,
.nicebars:focus-within::-webkit-scrollbar-thumb {
    background: #0005;
    border-radius: 20px;
    width: 10px;
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: #fff;
}

.nicebars::-webkit-scrollbar-thumb {
    background: #0004;
    border-radius: 5px;
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: white;
}

.summary-title:hover {
    text-decoration: underline;
}

.cliques-container>details>summary {
    font-size: 1.2em;
}

.cliques-container>details[open]>summary>.summary-title {
    text-decoration: unset;
}

grabbable-.course.context:hover {
    text-decoration: underline;
    cursor: pointer;
}

summary#standards-left-drawer {
    grid-template-rows: [title] 1fr [status] 1fr;
}

#organizer>* {
    background: white;
}

.cc-inline>.cc-contents {
    /* max-height: 1em;*/
}

grabbable-.exportable .cc-inline,
grabbable-.exportable .task-inline,
grabbable-.exportable .compfam-inline,
grabbable-.exportable .topic-inline,
.connections-area .cc-inline,
.connections-area .task-inline,
.connections-area .compfam-inline,
.connections-area .topic-inline {
    max-height: 2em;
    max-width: 15em;
    border-radius: 20px !important;
    border-style: solid;
    border-width: 2px;
    /*line-height: 0em;*/
    height: 1.5em;
}

.connections-area .generic-topper {
    /* top: 0px; */
    /* font-size: 0.5em; */
    /* height: 12px; */
    /* width: 12px; */
}

.connections-area .generic-topper>.chat-bubble {
    display: none;
}

.connections-area .generic-topper>.three-dots>img {
    height: 12px;
}

.boxConts .dashed-button {
    height: 2em;
}

.nav-node>summary {
    grid-template-columns: [endspace] 0.8em [title] minmax(1em, 1fr) [extra] 4em;
}

.nav-node>summary[noarrow="true"] {
    grid-template-columns: [endspace] 0em [title] auto [extra] 4em;
}

.topic-placement-nav:not(.is-related)>summary {
    background: none;
}

menu-button *[slot="button-appearance"] {
    cursor: pointer;
}

menu-button.is-displaying {
    z-index: 568;
}

menu-button {
    cursor: pointer;
    display: inline-flex;
}

menu-button .hint-text {
    background: #ffffff;
    font-size: 0.875em;
    border-radius: 15px;
    color: #000d;
    cursor: default;
    opacity: 0;
    /* pointer-events: none; */
    max-width: 22em;
    /* padding: 9px; */
    padding: 20px 19px;
    /* filter: drop-shadow(0px 0px 4px #0005); */
    display: inline-block;
    text-align: left;
    overflow-wrap: anywhere;
    white-space: normal;
    transition: 0.4s;
}

.connections-overlay-inner {
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    flex-direction: row;
    /* width: 77vw; */
}

.connections-overlay-inner>div {
    margin: 5px -5px 5px;
    padding: 5px 10px 0px 22px;
    flex-grow: 1;
    flex-shrink: 1;
    width: fit-content;
    border-style: solid;
    flex-basis: 20em;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    border-width: 0px 1px 0px 0px;
    /* flex-basis: 25%; */
}

.connections-overlay-inner drop-container {
    min-width: 20em;
    width: 100%;
    max-width: 35em;
}

.show-me-how {
    color: #009;
    text-decoration: underline;
    cursor: pointer !important;
}

.show-me-how:hover {
    color: #00F;
}

.blinking-hint {
    animation: blinking 0.4s linear infinite;
}

@keyframes blinking {
    from,
    49.9% {
        filter: brightness(1.2);
    }
    50%,
    to {
        filter: brightness(0.8);
    }
}

.topic-popover-buttton {
    border-color: var(--topics-background);
    color: var(--topics-background);
    border-radius: 12px;
    border-style: solid;
    padding: 0px 5px;
    display: inline;
}

pinnable-result.task-search-result:focus-within {
    z-index: 1000;
}

.via-popover-content {
    background: white;
    padding: 16px;
    border-radius: 16px;
    left: 0px;
    /* top: 16px; */
    min-width: 20em;
    max-width: 100%;
    position: fixed;
    z-index: 500;
}

.via-class-category {
    grid-template-columns: [categorytext] auto [viaresults] 1fr;
    display: grid;
    width: calc(100% + 2em);
    grid-column: 1/-1;
    margin-right: -2em;
    margin-left: -2em;
    /* height: 100%; */
}

.viaresults {
    grid-column: viaresults;
    grid-row: 1;
    display: flex;
    /* justify-content: stretch; */
    /* align-content: stretch; */
    align-items: stretch;
    z-index: 0;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    /* justify-items: stretch; */
    /* align-content: stretch; */
    /* overflow-x: auto; */
    /* overflow-y: hidden; */
    /* height: 100%; */
}

.categorytext {
    grid-column: categorytext;
    grid-row: 1;
    display: block;
    white-space: nowrap;
}

.cc-popover-buttton {
    border-color: var(--ccs-background);
    color: var(--topics-background);
    border-radius: 12px;
    border-style: solid;
    padding: 0px 5px;
    display: inline;
    /* height: 51px; */
    min-height: fit-content;
}

.goal-popover {
    /* height: 100px; */
    /* display: inline-flex; */
    display: block;
}

menu-button.goal-popover:focus-within {
    z-index: 5000;
    position: relative;
}

.viaresults:focus-within {
    z-index: 50;
}

pinnable-result[slot="selectedresults"] .via-class-category {
    display: none;
}

.showTrashed .trashed {
    transform: unset;
}

.showTrashed .trashed {
    display: unset;
}

shared-input.boxPlacementNotes {
    resize: vertical;
    padding-left: 0px;
    padding-right: 1.5em;
}

shared-input:not(:focus-within) + .char-count, 
input:not(:focus-within) + .char-count, 
textarea:not(:focus-within) + .char-count {
	opacity: 0;
}

.char-count {
    font-size: 0.875em;
    opacity: 0.5;
    font-weight: normal !important;
    transition: opacity 0.4s;
}

.char-count.low {
	opacity: 1;
}

.boxPlacementNotes + .char-count {
    align-self: flex-end;
    margin-top: -1.375em;
    padding-right: 0.75em;
}

.boxHeading shared-input, shared-input.exportable-title {
	padding-right: 1.75em;
}

.boxHeading .char-count, .exportable-title + .char-count {
    font-size: 14px;
    align-self: flex-end;
    margin-left: -1.5em;
}

.wizard label .char-count {
    align-self: flex-end;
    margin-top: -2.5em;
    padding-right: 0.5em;
}

button.connections-button {
    position: absolute;
    top: 0px;
    right: 0px;
}

.connections-cont {
    /* position: relative; */
    margin-top: 1.4em;
}

.placement-task.placement-goal {
    padding-left: 2px;
    /*    display: flex !important;
flex-direction: row-reverse;
justify-content: space-between;*/
}

span.connections-header {
    margin-bottom: 6px;
    /* margin-top: 1em; */
    /* padding-top: 0em; */
    font-size: 0.9em;
    display: block;
    font-weight: 600;
}

.resource-cont>details>summary {
    display: grid;
    grid-template-columns: [icon] 1.5em [title] 1fr;
}

.shared-pseudo-form.overlayBody[data-overlay="taskEditor"],
.shared-pseudo-form.overlayBody[data-overlay="taskNew"] {
    align-content: center;
    align-items: center;
}

.shared-pseudo-form.overlayBody[data-overlay="taskNew"]>.name,
.shared-pseudo-form.overlayBody[data-overlay="taskEditor"]>.name {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.shared-pseudo-form.overlayBody[data-overlay="taskEditor"]>.name>shared-input,
.shared-pseudo-form.overlayBody[data-overlay="taskNew"]>.name>shared-input {
    flex-grow: 10;
    flex-shrink: 1;
}

.shared-pseudo-form.overlayBody[data-overlay="taskNew"]>.name>label,
.shared-pseudo-form.overlayBody[data-overlay="taskEditor"]>.name>label {
    flex-shrink: 1;
    flex-grow: 1;
}

.shared-pseudo-form.overlayBody[data-overlay="taskNew"]>.descriptives,
.shared-pseudo-form.overlayBody[data-overlay="taskEditor"]>.descriptives {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: stretch;
}


.descriptives>label {
    width: 100%;
}

pin-searcher.supertask-expander-psearcher {
    grid-template-rows: [headings] 2em [top] 2em [main] minmax(10em, 50vh) [conclude] 2em;
}

.is_gac .desc-given,
.is_gac .desc-asked {
    display: block;
}

.has-hover:not(:hover) img.for-hover,
.has-active:not(.is-active) img.for-active,
.has-hover:hover img:not(.for-hover),
.has-active.is-active img:not(.for-active),
.edit-mode .has-hover:hover img.for-hover.for-view-mode,
#placement-center:not(.no-exportables) .exportables-toggle img:not(.for-active),
#placement-center:not(.no-text-notes) .text-toggle img:not(.for-active),
#placement-center:not(.no-budget-text) .time-toggle img:not(.for-active),
.placement.children-expanded>.placement-cont>.placement-self .show-children img:not(.for-active)
/*details[open] .has-active img:not(.for-active)*/

{
    display: none;
}

.has-hover.has-active.is-active:hover img.for-active,
.edit-mode .has-hover.has-active img.for-edit-mode,
.edit-mode .has-hover.has-active:hover img.for-edit-mode,
#placement-center:not(.no-exportables) .exportables-toggle img.for-active,
#placement-center:not(.no-text-notes) .text-toggle img.for-active,
#placement-center:not(.no-budget-text) .time-toggle img.for-active,
.placement.children-expanded>.placement-cont>.placement-self .show-children img.for-active
/*details[open] .has-active img.for-active*/

{
    display: unset;
}

.intended-hint>[slot="button-appearance"] {
    background-color: #edb322;
    /* height: 1.5em; */
    /* line-height: 1.3em; */
}

.hint-text {
    font-weight: 100;
}

button#wizard-placement-paste {
    flex-grow: 1;
}

form.wizard fieldset>button span:hover {
    opacity: 1 !important;
}

form.wizard fieldset>button:hover {
    border-color: #aaa;
    opacity: 1;
}

form.wizard fieldset>button:hover span {
    opacity: 1 !important;
}

span.granularity-name {
    display: inline-block;
    text-align: left;
    font-weight: bold;
}

span {}

img.paste-icon {
    filter: brightness(1.3) contrast(1.1) saturate(0.6);
    /* margin-left: -5px; */
    /* margin-right: -10px; */
}

.sticky-header .header-buttons-row {
    bottom: unset;
}

.sticky-header.header-placement tab-container.boxConts {
    margin-bottom: -2px;
    /*margin-top: -2px;*/
}

.sticky-header .placement-cont {
    padding-bottom: 0px;
}

.sticky-header .boxConts tab- {
    margin-bottom: 0px;
    background: #0a0a0a11;
    /* max-height: 30vh; */
    /* overflow: overlay; */
}

.boxConts drop-container {
    background-color: #ececec;
}

.sticky-header .boxConts .tabcontentrow {
    margin-left: -1.5em;
    margin-right: -1.5em;
    margin-bottom: 2.1px;
    overflow: hidden;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.sticky-header .boxConts drop-container {
    overflow: auto;
    max-height: 20vh;
}

.small>#placements-here span.header-buttons-row,
.tiny>#placements-here span.header-buttons-row {
    bottom: -1.9em;
    transform: scale(0.75);
    margin-right: -2.2em;
}

.header-placement tab-selector {
    font-size: 1.1em;
    border-radius: 9px !important;
    /* border-width: 2px !important; */
}

#ccr-header #header-title {
    display: grid;
    grid-template-columns: [image] minmax(3em, 3.5em) [title] minmax(10em, 22em);
    opacity: 0;
    justify-content: space-between;
    transition: 1s ease all;
    align-content: space-between;
    justify-items: flex-start;
    /* font-size: 0.8em; */
}

#ccr-header .workspace-header-name img {
    margin-right: 0.9em;
    height: 30px;
    vertical-align: sub;
}

div#top-header-placement-tile {
    font-size: 1.2em;
    color: #777;
    margin-top: -5px;
}

#ccr-header #workspace-information {
    font-size: 0.7em;
}

#ccr-header .workspace-header-name {
    display: inline-block;
}

#ccr-header #header-title img {
    height: 100%;
    /* vertical-align: bottom; */
    margin-right: auto;
    max-height: 3em;
    align-self: center;
    border-width: 2px !important;
}

.minimal-goal {
    border: 1px solid;
    border-radius: 12px;
    padding: 0.125em 1em;
    font-size: 0.875em;
    margin: 0.0625em;
    overflow-x: hidden;
    white-space: nowrap;
}

.minimal-goal-cont {
    display: flex;
    align-items: center;
}

.minimal-goal-cont img {
    margin-left: 0.5em;
}

.minimal-task {
    color: var(--minimal-std-color);
    border-color: var(--minimal-std-color);
}

.minimal-topic {
    color: var(--minimal-topic-color);
    border-color: var(--minimal-topic-color);
}

.minimal-coreconcept {
    color: var(--minimal-cc-color);
    border-color: var(--minimal-cc-color);
}

.minimal-compfam {
    color: var(--minimal-compfam-color);
    border-color: var(--minimal-compfam-color);
}

.minimal-goal-cont {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.minimal-goal .text {
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.minimal-goal img {
    margin-left: 1em;
}

.character .compfam-grabbable-cont.isSubcomp>.compfam-grabbable-self {
    background-color: var(--character-background);
}

.isComp.character>.compfam-grabbable-self>summary {
    background: var(--character) !important;
}

.isComp>div>details>.compfam-heading {
    font-size: 16px;
}

.oval {
    width: 13px;
    height: 13px;
    margin: 4px 0px 5px 0;
    border: solid 2px #1f1f1f;
    grid-column: bullet;
    justify-self: center;
    border-radius: 20px;
    border-color: inherit;
}

.isSubcomp.compfam-grabbable-cont>.compfam-grabbable-self>summary>.oval {
    background: black;
    height: 10px;
    width: 10px;
}

.isSubcomp.compfam-grabbable-cont>.compfam-grabbable-self>summary>.compfam-name {
    font-weight: 600;
    opacity: 0.9;
}

.compfam-grababble-self>.moreinfo {
    padding-left: 5px;
}

.compfam-description {
    padding-left: 24px;
}

.resource-cont .name.summary-title.inline-preview-text {
    font-weight: 200;
}

.isSubcomp seg-select {
    margin: auto;
    margin-top: 10px;
    margin-bottom: 13px;
    width: 90%;
    max-width: 30em;
}

seg-select {
    grid-template-rows: [info] 1em [bar] 2em;
    height: fit-content;
}

#compfams-left {
    min-height: 90vh;
}

.title-spot,
.hint-spot {
    grid-row: info;
}

seg-select .hint-spot {
    grid-column: segend;
    justify-self: end;
    display: block;
    min-width: max-content;
    font-weight: 600;
    font-size: 13px;
    opacity: 0.3;
}

.compfam-grabbable .generic-topper.notip {
    position: absolute;
    margin-top: 5px;
}

.subcompetency-result.skills {
    background: var(--skills-background);
    filter: brightness(1.1) saturate(0.5);
}

.skills .isSubcomp details {
    background: var(--skills-background);
}

pinnable-result.subcompetency-result.compfam-grabbable-cont.isSubcomp.character {
    background: var(--character-background);
    filter: brightness(1.02) saturate(0.6);
}

.meta-learning summary.compfam-heading {
    /* background: var(--meta-learning-background); */
}

.meta-learning .isSubcomp details {
    background: var(--meta-learning-background);
}

.isComp summary.compfam-heading {
    border-radius: 12px;
}

.skills .isComp>details>summary.compfam-heading {
    font-size: 1.2em;
    color: var(--skills);
}

.character .isComp>details>summary.compfam-heading {
    font-size: 1.2em;
    color: var(--character);
}

.meta-learning .isComp>details>summary.compfam-heading {
    font-size: 1.2em;
    color: var(--meta-learning);
}

pinnable-result input {}

pinnable-result.dimension-result.isDimension>.compfam-heading {
    position: sticky;
    top: 0px;
    text-align: right;
    font-size: 2.5em;
    height: 0.8em;
    margin-right: 3%;
}

.tiny>#comment-carousel {
    background: #fff4;
    backdrop-filter: blur(4px);
    box-shadow: 0px 0px 16px #0004;
    /* filter: drop-shadow(2px 4px 6px black); */
    /* border-style: dashed; */
    /* margin-right: -16px; */
    /* border-width: 8px; */
}

:focus-visible {}

section#commenter-wrapper {}

.tiny #commenter {
    margin-top: -8px;
}

.description-spot {
    grid-row: desc;
    grid-column-start: 1;
    grid-column-end: 10;
    font-size: 13px;
    opacity: 0.8;
}

#compfam-placement-container .compfam-grabbable .compfam-description {
    display: none;
}

.tabcontentrow {}

.title-spot {
    font-weight: 600;
}

.tt-viability .task-name {
    margin: 40px;
    font-size: 1.3em;
}

.fancybreak h3 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.faux-link {
    cursor: pointer;
}

.faux-link:hover {
    text-decoration: underline;
}

.goal-grabbable .faux-link {
    /* text-align: center; */
}

.inline-focus-view-button {
    color: #0007;
    text-align: center !important;
    margin-top: 10px;
    width: 100%;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.2em;
}

.isComp .inline-focus-view-button {
	display: none;
}

.isComp .isSubcomp .inline-focus-view-button {
	display: unset;
}

#left-placeables-wrapper.activating {
    position: absolute;
    z-index: -1;
}

#left-placeables-wrapper.inactive-cardface {
    display: none;
}

#base-detail-container:not(.active-cardface) {
    display: none;
    z-index: -1;
}

#base-detail-container.activating:not(.active-cardface) {
    position: absolute;
    width: 100%;
    background: #f006;
    z-index: -1;
    height: 100%;
}

#base-detail-container.active-cardface {
    position: relative;
    z-index: 1;
}

button.not-a-button {
    background: unset;
    border: unset;
    text-align: unset;
    /* background: var(--active-green); */
    cursor: pointer;
    font-weight: unset;
    font-size: inherit;
    font-family: unset;
}

.goal-mode-text-name {
    display: inline;
    flex-grow: 1;
    font-size: 1.2em;
    font-weight: 800;
    margin-right: 0.2em;
}

span.goal-mode-text {
    flex-grow: 1;
    margin-left: 3%;
}

.viewmode-heading {
    display: flex;
    align-items: center;
    padding-right: 1em;
    z-index: 500;
    background: #fff6;
    backdrop-filter: blur(4px);
    position: sticky;
    /* box-shadow: 0px 0px 10px #0006; */
    top: 0px;
    /* left: 13px; */
    min-height: 48px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #00000019;
}

.viewmode-heading>img.goal-mode-icon {
    /* margin-right: 3%; */
    margin-left: 1em;
}

.what-is-this [slot='button-appearance'],
span.what-is-this {
    background: gray;
    /* border: antiquewhite; */
    border-radius: 28;
    border-radius: 30px;
    width: 18px;
    color: white;
    font-weight: 600;
    padding: 4px 4px 4px 4px;
    height: 18px;
    line-height: 0.8em;
}

.goal-mode-text menu-button.what-is-this .hint-text {
    /* right: -400px; */
    position: relative;
    left: 116px;
}

menu-button.is-displaying .hint-text {
    opacity: 1;
    transition: 0.4s;
}

button.exit-detail-view.not-a-button:hover {
    filter: drop-shadow(0px 0px 2px #0aa8);
}

.exit-detail-view>img,
.greenify {
    filter: saturate(28) hue-rotate(328deg) brightness(84.35%);
}

menu-button:not(.is-displaying) *[slot="button-appearance"]>.greenify {
    display: none;
}

div#nothing-selected {
    padding: 2em;
    color: #000a;
    font-size: 1.2em;
    max-width: 27em;
    margin-left: auto;
    margin-right: auto;
}

.flipping-away {
    position: absolute;
    animation: flipAway;
    animation-duration: 0.5s;
    z-index: 5000;
    background-color: white;
    backface-visibility: hidden;
    border-radius: 10px;
}

.flipping-toward {
    position: absolute;
    animation: flipToward;
    animation-duration: 0.5s;
    z-index: 5000;
    background-color: white;
    backface-visibility: hidden;
    border-radius: 10px;
}

#outer-base-detail-container {
    display: contents;
    justify-self: stretch;
}

.grow-shadow {
    animation: growShadow;
    animation-duration: 0.5s;
    z-index: 5000;
    background: none;
}

@keyFrames growShadow {
    0% {
        filter: drop-shadow(0px 0px 0px #0002);
    }
    50% {
        filter: drop-shadow(-10px 0px 50px #0005);
    }
    100% {
        filter: drop-shadow(0px 0px 0px #0002);
    }
}

@keyframes flipAway {
    0% {
        transform: perspective(2300px) rotateY(359deg);
        filter: opacity(1);
        transform-origin: -10% 20vh;
    }
    100% {
        transform: perspective(2300px) rotateY(181deg);
        filter: opacity(1);
        transform-origin: 110% 20vh;
    }
}

@keyframes flipToward {
    0% {
        transform: perspective(2300px) rotateY(179deg);
        transform-origin: -10% 20vh;
        filter: opacity(1);
    }
    100% {
        transform: perspective(2300px) rotateY(0deg);
        transform-origin: 110% 20vh;
        filter: opacity(1);
    }
}

tab-#placeables {
    align-content: stretch;
}

button.exit-detail-view.not-a-button.detail-curriculum-toggle {
    justify-self: end;
}

div#base-detail-container {
    /* padding-right: inherit; */
}

.choice-row .drag-icon {
    margin-right: -16px;
}

.helptext {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 22em;
    grid-gap: 0.325em;
    background: white;
    font-size: 14px;
    color: #000d;
    cursor: default;
    padding: 20px 19px;
    text-align: left;
    overflow-wrap: anywhere;
    white-space: normal;
    transition: 0.4s;
    font-weight: normal;
}

tool-tip[helpid],
menu-button .helptext {
    background: white;
    border-radius: 15px;
}

.help-title {
    font-weight: bolder;
}

.has-help {
    opacity: 0.9;
    border-bottom: 1px dotted;
    cursor: help;
}

.approach-viewer seg-select::part(circle-container) {
    visibility: hidden;
}

.approach-viewer seg-select::part(end-circle) {
    visibility: hidden;
}

.boundaryCircle {
    border-radius: 20px;
    height: 10px;
    width: 10px;
}

.left-circle-container {
    grid-column: leftend;
}

.right-bar {
    grid-row: bar;
    grid-column: segend;
    z-index: 0 !important;
    width: 0px;
    pointer-events: none;
}

.filledBoundaryCircle {
    border-radius: 20px;
    height: 8px;
    width: 8px;
}

.bar-container {
    height: 4px;
    margin-left: 8px;
    opacity: 1;
    background: #5555;
}

.seg-bar {
    grid-row: bar;
    height: 16px;
    z-index: 2;
    grid-template-columns: [leftend] 2px [bar] 1fr;
    display: grid;
    border-style: none;
    align-items: center;
    transition: 0.2s;
    padding: 4px 0px;
}

.bar-inner {
    background: #07ad86;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.circle-inner {
    background: #07ad86;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

.circle-container {
    width: 12px;
    height: 12px;
    border-radius: 20px;
    margin-top: 0px;
    margin-left: -1px;
    grid-row: 1;
    z-index: 5;
    background: #5555;
    transition: 0.2s;
}

.circle-container.transitioning {
    background: #07ad86 !important;
}

.seg-bar {
    cursor: pointer;
}

.seg-bar:hover>.bar-container
/*,.seg-bar:hover > .circle-container*/

{
    background: #b4e3d8;
    transition: 0.2s;
}

.scrollthrough {
    z-index: 10;
}

slide- [data-for="title"],
slide- [data-for="description"] {
    display: none;
    height: 0px;
    overflow: hidden;
}

.approach-viewer seg-select .circle-container {
    visibility: hidden;
}

slide-.approach {
    /* min-height: 8em; */
    /* flex-basis: 113%; */
    flex-direction: column;
    /* justify-content: stretch; */
    display: flex;
    min-width: 90%;
    flex-grow: 1;
    scroll-snap-align: center;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    font-size: 1em;
    border-color: #0003;
    margin: 10px;
    justify-self: center;
    padding: 5px;
    filter: drop-shadow(0px 0px 11px #0002);
    background: var(--page-background);
}

slide-.approach.add-new {
    max-width: 5em !important;
    width: 5em !important;
    flex-grow: 0 !important;
    flex-shrink: 10 !important;
    min-width: 15%;
    /* margin-bottom: 15%; */
    /* margin-top: 15%; */
    height: 4em !important;
    /* justify-self: center; */
    text-align: center;
    line-height: 2.5em;
    font-size: 1.6em;
    max-height: 3em;
    min-height: 0.3em;
    align-self: center;
    scroll-snap-align: center;
    scroll-margin-right: 10em;
    margin-right: 50%;
    cursor: pointer;
}

slide-.approach.add-new:hover {
    filter: brightness(1.2);
}

slide-show .prev-arrow.not-a-button {
    grid-row: 1;
    content: '\23F4';
    height: 100%;
    margin-left: 0%;
    line-height: 0em;
    padding-right: 0px;
    /* width: 268%; */
    padding-left: 0px;
    align-self: center;
    grid-column: prev;
    background: #ffffff17;
    backdrop-filter: blur(2px);
    color: black;
    border-radius: 1909px;
    /* text-align: center; */
    z-index: 3;
    box-shadow: 3px 0px 4px #0003;
    /* filter: drop-shadow(2px 0px 6px black); */
}

slide-show .prev-arrow.not-a-button::after {
    content: '\23F4';
    font-size: 2em;
    margin-left: -0.4em;
    color: #0009;
}

slide-show .next-arrow.not-a-button {
    grid-row: 1;
    content: '\23F4';
    height: 100% !important;
    /* width: 100%; */
    height: 32%;
    /* display: none; */
    margin-left: -48%;
    border-radius: 200px;
    line-height: 0em;
    text-align: end;
    /* margin-right: -0.5em; */
    padding-left: 0px;
    padding-right: 0px;
    /* width: 35%; */
    text-align: end;
    align-self: center;
    grid-column: next;
    background: #ffffff17;
    backdrop-filter: blur(5px);
    color: black;
    /* text-align: center; */
    z-index: 3;
    box-shadow: -3px 0px 4px #0003;
    /* filter: drop-shadow(2px 0px 6px black); */
}

slide-show .next-arrow.not-a-button::after {
    content: '\23F5';
    font-size: 2em;
    margin-left: -1em;
    color: #0009;
}

#base-detail-container .viewmode-heading {
    /* padding-right: 1em; */
}

slide-show .next-arrow[disabled] {
    color: #999;
    opacity: 0.1;
    cursor: default;
}

slide-show .prev-arrow[disabled] {
    color: #999;
    opacity: 0.1;
    cursor: default;
}

grabbable-.hovered {
    transition: 0.3s;
}

.approach-viewer .title-spot {
    font-weight: 400;
    font-size: 1.1em;
    line-height: 0.7em;
    width: 100%;
    text-align: end;
    justify-self: end;
    grid-column-start: -4;
    grid-column-end: -1;
    padding-right: 10px;
    /* margin-left: 13px; */
}

.approach-viewer .hint-spot {
    grid-column: 1;
    justify-self: start;
}

.inline-focus-view-button>img {
    max-height: 1.3em;
    height: 1.3em;
    margin-bottom: -0.3em;
    margin-right: 6px;
    /* line-height: 0.1em; */
}

.approach>.dashed-button {
    /* margin: 0px; */
    margin-top: 0px !important;
    margin-left: 0px !important;
    bottom: 0px;
    flex-shrink: 100;
    justify-self: flex-end;
    flex-grow: 1;
}

.approach>drop-container {
    flex-grow: 10;
    /* height: 100%; */
    flex-shrink: 1;
    justify-self: start;
}

#left-placeables-wrapper .viewmode-heading {
    margin-right: -1.2em;
}

.detail-task-grabbable {
    background: white !important;
}

.inline-ontology {
    /* padding: 0px 30px 0px 16px; */
}

.approach-viewer {
    width: 97%;
    margin-left: auto;
    margin-right: auto;
}

.history-node.active-node>.this-node {
    font-weight: bold;
}

.this-node {
    display: flex;
    grid-gap: 10px;
}

.history-node {
    display: flex;
    flex-direction: column-reverse;
}

.history-node.root-history-node {
    padding: 5px;
    margin-left: 10px;
}

.history-node:not(.root-node) {
    border-style: solid;
    border-color: #0005;
    border-width: 0px 0px 1px 0px;
}

.history-node>.this-node:hover {
    background: #eee;
}

.history-node>.this-node {
    cursor: pointer;
}

div#focused-detail-container {
    padding: 10px;
}

button.this-node.not-a-button {
    background: white;
}

#history-buttons>menu-button>div[slot="button-appearance"] {
    margin: 0px;
    border-width: 1px;
    /* height: 1em; */
    width: 1em;
    border-style: solid;
    padding: 0px;
}

button#focus-view-back:not([disabled]) {
    margin-right: -6px;
    height: 2.2em;
    border-color: #0008;
    border-width: 1px;
    cursor: pointer;
    border-radius: 27px 0px 0px 27px;
}

#history-buttons menu-button {
    width: 1.4em;
}

#history-buttons button[slot="button-appearance"] {
    border: 1px;
    border-style: solid;
    border-radius: 0px;
    /* height: 160%; */
    padding-top: 6px !important;
    margin-top: -21px;
    border-color: #0005;
    align-self: center;
}

button#focus-view-back[disabled] {
    cursor: default;
    border-color: #0004;
    margin-right: -6px;
    height: 2.2em;
    /* border-color: #0008; */
    border-width: 1px;
    border-radius: 27px 0px 0px 27px;
}

div#history-buttons {
    /* flex-grow: 25; */
    /* width: 100%; */
    margin-left: -25%;
}

slide-show.undetailed-subtask.approach-viewer.singular>.prev-arrow,
slide-show.undetailed-subtask.approach-viewer.singular>.next-arrow,
slide-show.undetailed-subtask.approach-viewer.singular>seg-select {
    display: none;
}

slide-show.undetailed-subtask.approach-viewer.singular>slide- {
    margin-right: 0px;
    padding: 0px;
    filter: unset;
    border: unset;
    height: min-content;
    /* max-height: 1em !important; */
}

slide-show.undetailed-subtask.approach-viewer {
    margin-right: 0px;
    justify-content: stretch;
    align-content: flex-start;
    margin-left: 0px;
    width: 100%;
    grid-template-columns: auto;
}

slide-.approach.undetailed-subtask-approach-slide {
    height: min-content;
    /* max-height: 1em !important; */
    /* display: contents; */
}

slide-show.undetailed-subtask.approach-viewer:not(:hover)>.prev-arrow,
slide-show.undetailed-subtask.approach-viewer:not(:hover)>.next-arrow,
slide-show.undetailed-subtask.approach-viewer:not(:hover)>seg-select {
    display: none;
}

slide-show.undetailed-subtask.approach-viewer {
    grid-template-rows: [content] auto [selectbar] 0px;
}

grabbable-.task-row.task-grabbable {
    height: fit-content;
}

.task-row-container.tree-collapsed .subtasks.approach-container {
    display: none;
}

seg-select {}

.undetailed-subtask.approach-viewer seg-select {
    position: absolute;
    z-index: 10;
    background: white;
    bottom: -2.5em;
    width: 94%;
    filter: drop-shadow(0px -1px 3px #0003);
}

grabbable-.task-row.task-grabbable:hover {
    z-index: 20;
}

.detail-task-outer>.three-dots {
    position: absolute;
}

.detail-task-outer>.task-name {
    display: block;
}

.task-search-result:not(.is_gac) .textual-desc {
    grid-template-columns: unset;
}

.task-search-result:not(.is_gac) .gac-title.fancybreak {
    /* visibility: hidden; */
    display: none;
}

.task-search-result:not(.is_gac) .desc-column {
    grid-template-rows: unset;
}

.modify-task:not(.is_gac) .gac-wrapper>.given-asked-can,
.modify-task:not(.is_gac) .gac-wrapper>.blank {
    display: none;
}

.topic.goal-grabbable .generic-topper {
    position: absolute;
    right: 0px;
}

#checklist-searcher-container {
    display: none;
}

#my-courses {
    background: white;
    padding: 0 10%;
}

#new-user-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff5d6;
    border-radius: 24px;
    padding: 1.875em;
    margin-top: 1em;
    grid-gap: 0.75em;
}

#return-user-banner {
    display: flex;
    font-size: 24px;
    line-height: 1.17;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.875em 0;
    align-items: center;
    grid-gap: 1em;
}

#return-user-banner .name {
    font-weight: bold;
}

#new-user-banner>span:first-of-type {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.17;
}

#new-user-banner>span:nth-of-type(2) {
    color: #696969;
    line-height: 1.38;
}

#new-user-banner button {
    background: #2ba180;
    border: 2px solid #2ba180;
    border-radius: 21px;
    padding: 12px 20px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

#my-courses-controls {
    display: flex;
    align-items: baseline;
    margin-top: 2.875em;
}

#my-courses-controls button {
    margin-left: auto;
    background: none;
    border: 1.3px solid #c7c7c7;
    border-radius: 22px;
    padding: 12px 20px;
    font-size: 14px;
    font-family: nunito;
    color: #1f1f1f;
    font-weight: bold;
    cursor: pointer;
}

#my-courses-list {
    display: flex;
    /* grid-gap: 1.5em; */
    padding-bottom: 6em;
    flex-wrap: wrap;
    /* justify-content: center; */
    margin-bottom: 1em;
}

.my-course {
    display: flex;
    flex-direction: column;
    /* grid-row: 1; */
    /* border: 2px solid #e0e0e0; */
    /* padding: 1.75em; */
    /* border-radius: 24px; */
    /* width: 19.5em; */
    height: 100%;
    justify-content: space-between;
    grid-gap: 1.5em;
}

.my-course>span {
    display: flex;
}

.my-course button {
    border: none;
    background: none;
    cursor: pointer;
}

.my-course a:link,
.my-course a:visited,
.my-course a:hover,
.my-course a:active {
    color: inherit;
    text-decoration: none;
}

.my-course a:hover {
    text-decoration: underline;
}

.my-course>span:first-of-type {
    justify-content: space-between;
}

.my-course>span:first-of-type>span:first-of-type {
	display: flex;
	align-items: center;
	grid-gap: 1em;
}

.my-course .granularity-name {
	font-size: 1.25em;
}

.my-course>span:nth-of-type(2) {
    flex-direction: column;
    flex-grow: 5;
    flex-shrink: 1;
    height: 100%;
}

.my-course>span:nth-of-type(2)>span:first-of-type {
    font-size: 28px;
    font-weight: 800;
    color: #131f1e;
}

.my-course>span:nth-of-type(3) {
    font-size: 14px;
    font-weight: bold;
    grid-gap: 11px;
    align-items: center;
    flex-grow: 1;
    justify-self: end;
    flex-shrink: 10;
    /* position: absolute; */
    /* bottom: 0px; */
    /* height: 0em; */
    margin-top: auto;
    /* margin-bottom: 0px; */
    border-top: 1px solid #e0e0e0;
    padding-top: 1.5em;
}

.workspace_setup menu-button::part(menu-container),
.edit-features menu-button::part(menu-container) {
    left: -100px;
    right: 0px;
}

drop-container#ccs-placement-list {
    display: flex;
    flex-direction: column;
    min-height: 3em;
    margin-left: 0.5em;
}

details.noarrow fieldset {
    display: none;
}

div#workspace-export-info-container {
    min-width: 50vw;
    min-height: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.prog-bar-container {
    width: 70vw;
    background: #bbb;
    border-radius: 15px;
    height: 5em;
    box-shadow: inset 0px 5px 25px -5px #0009;
    /* bottom: 0px; */
    justify-self: center;
}

.ws-export-textual {
    flex-grow: 0.3;
}

.prog-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(317deg, #299f49, #83c1df);
    border-radius: inherit;
}

.system-tag {
    display: inline-block;
    width: fit-content;
    padding: 0px 8px;
    margin: 0px 2px;
    border-radius: 16px;
    border-style: solid;
    border-width: 1px;
    border-color: #0006;
}

.system-tag.selected {
    background: #ffe2ae;
    border-width: 2px;
}

.system-tag.autoselected {
    background: #ffe2ae55;
    border-width: 2px;
    /* width: fit-content; */
}

#collection-browser-container.loading {
    background: white;
}

#collection-browser-container.loading * {
    display: none;
    align-content: normal;
    align-content: normal;
}

div#collection-browser-container::after {
    content: "Loading cache. Please wait...";
    margin-left: 5%;
    font-size: 2em;
}

drop-container.clique-ws-dc {
    display: flex;
    grid-gap: 1.5em;
    padding-bottom: 6em;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 2em;
}

grabbable-.workspace-grabbable {
    display: flex;
    /* flex-direction: column; */
    border: 2px solid #e0e0e0;
    padding: 1.75em;
    border-radius: 24px;
    min-width: 19.5em;
    flex-basis: 19.5em;
    max-width: 25em;
    align-content: stretch;
    flex-grow: 1;
    /* grid-gap: 1.5em; */
}

#my-courses-list > details {
    display: block;
    width: 100%;
}
#my-courses-list h3.summary-title {
    display: inline-block;
}

span.ws-comps-list {
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    /* grid-gap: 0px 10px; */
    width: 100%;
    margin-left: 5px;
}

.none-container h3 {
    font-weight: 500;
    /*text-align: center;
     text-decoration: underline; 
    border-style: dashed;
    border-width: 1px;*/
}

.full span.system-tag {
    padding-left: 0.8em !important;
    padding-right: 0.8em !important;
}

span.comp-indicator {
    flex-basis: 40%;
}

.locked{
    box-shadow: 0px 0px 3px -1px #F00F, 0px 0px 6px -1px #F00F inset;
    filter: opacity(0.5)/*contrast(0.3) drop-shadow(0px 0px 2px #F007)*/;
}

mjx-container {
    margin: 0em !important;
}

[data-overlay=mover] {
	min-width: 35em;
	padding: 0;
	position: relative;
	height: 90vh;
}

[data-overlay=moving] {
	align-items: center;
	width: 35em;
}

.waiting-text {
	opacity: 0;
	transition: opacity 0.7s;
}

.waiting-text.shown {
	opacity: 1;
}

[data-overlay=mover] drop-container {
	padding: 1em 1.5em 0 1.5em;
	position: static;
	display: flex;
	flex-direction: column;
}

[data-overlay=mover] drop-container[childclass=Exportable] {
	padding: 1em 2em 0 2em;
}

[data-overlay=mover] input[type=radio] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

[data-overlay=mover] label {
	height: 4px;
	margin: 0.125em auto;
	cursor: pointer;
	background: none;
	border-radius: 8px;
	align-self: center;
	width: calc(100% - 24px);
	background: repeating-linear-gradient(to right, #e0e0e0 0 10px, transparent 10px 15px);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	flex-shrink: 0;
}

[data-overlay=mover] .mover-body {
	display: flex;
	flex-direction: column;
	padding-bottom: 1em;
	overflow-y: auto;
}

[data-overlay=mover] label:hover, 
[data-overlay=mover] input[type=radio]:checked + label, 
[data-overlay=mover] input[type=radio]:focus + label {
	opacity: 1;
	background: var(--active-green);	
}

[data-overlay=mover] label:hover::after, 
[data-overlay=mover] input[type=radio]:checked + label::after, 
[data-overlay=mover] input[type=radio]:focus + label::after {
	content: "Move Here";
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--active-green);
	color: white;
	font-weight: bold;
	padding: 0 0.5em;
	position: absolute;
	border-radius: 16px;
	padding: 0.125em 0.75em;
}

[data-overlay=mover] .buttonSubmit {
	margin-top: 1em;
	align-self: center;
}

.mover-placement-details > .mover-body > label {
	width: calc(100% - 72px);
}

.mover-placement-details > .mover-body > drop-container[childclass=Exportable] + input + label {
	width: calc(100% - 88px);
}

.mover-header {
	display: flex;
	border-bottom: 1px solid #e0e0e0;
	grid-gap: 3px;
	padding: 1em;
	align-items: center;
}

.mover-go-back {
	width: 1.5em;
	height: 2em;
	font-size: unset;
	border: unset;
	background: unset;
}

.mover-go-back img {
	transform: rotate(180deg);
	cursor: pointer;
}

.mover-header > span:last-child {
	display: flex;
	flex-direction: column;
}

.mover-current-level {
	font-weight: bold;
	font-size: 1.5em;
}

grabbable-.is-moving {
	opacity: 0.5;
}

.mover-placement:not(.is-potential-sibling) > .mover-placement-cont > label,
.mover-placement:not(.is-potential-parent) > .mover-placement-cont > .mover-placement-details > .mover-body > label,
.mover-placement:not(.is-potential-parent) > .mover-placement-cont > .mover-placement-details > .mover-body > input[type=submit],
grabbable-.is-moving label, grabbable-.is-moving input, grabbable-.is-moving + grabbable- label,
grabbable-.is-moving + grabbable- input {
	visibility: hidden;	
}

.mover-placement.is-active {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	z-index: 2;
	display: flex;
}

.mover-placement:not(.is-active) > .mover-placement-cont .mover-placement-details {
	display: none;
}

.mover-placement.is-active > .mover-placement-cont > *:not(.mover-placement-details) {
	display: none;
}

.mover-placement.is-active > .mover-placement-cont,
.mover-placement.is-active > .mover-placement-cont > .mover-placement-details {
	display: flex;
	flex-direction: column;
	max-height: 100%;
	width: 100%;
	overflow-y: hidden;
}

.mover-placement-name {
	font-weight: bold;
	border: 2px solid #e0e0e0;
	padding: 1.5em;
	border-radius: 16px;
	display: flex;
	width: 100%;
	background: unset;
	font-size: unset;
	font-family: unset;
}

.mover-placement-name:disabled {
	color: unset;
}

.mover-placement:not(.is-potential-sibling) > .mover-placement-cont > .mover-placement-name {
	cursor: pointer;
}

.mover-placement:not(.is-potential-sibling) > .mover-placement-cont > .mover-placement-name::after {
	content: url(/librsc/img/chevron-right.svg);
	display: flex;
	height: 16px;
	margin-left: auto;
}

.mover-exportable-cont {
	display: flex;
	flex-direction: column;
}

.mover-exportable-class {
	font-weight: bold;
}
.mover-exportable details {
	display: flex;
	flex-direction: column;
	padding: 0.75em 1em;
}

.mover-exportable summary {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	grid-gap: 0.5em;
	cursor: pointer;
}

.mover-exportable-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mover-exportable summary::after {
	transform-origin: center !important;
	height: 1em !important;
	width: 1em !important;
}