@font-face {
  font-family: myFirstFont;
  src: url(/code_site/fonts/cursive.ttf);
}

@font-face {
  font-family: myFirstFont;
  src: url(/code_site/fonts/cursive.ttf);
}

.cursive{
	font-family: myFirstFont;
}

.page_title{
	display:none;	
}












next_problembutton{
	font-size:1.2rem;
	
}
















	label.sentence_selector{
		display:inline-block;
	}
	label.sentence_selector text{
		padding:initial;
	}



	summary.hover_border{
		padding:1px 10px 1px 0px;
		border:thin solid rgba(0,0,0,0);
		list-style:none;
		display:inline-flex;
	}
	summary.hover_border:hover{
		background: rgba(255,255,255,0.2);
	}
	drop_under{
		border:thin solid white;
		display: flex;
		flex-direction:column;
		background: var(--primary_blue);
		border-bottom: thin solid white;
		box-shadow: var(--box_shadow);
		color: white;
		white-space:nowrap;
	}
	drop_under > *{
		width:100%;
	}
	drop_under > *:hover{
		width:100%;
	}
	
	.pad_children > *{
		padding: 5px;
	}
	.highlight_children > *:hover{
		background: rgba(255,255,255,0.2);
	}
	.white_font a{
		color:white;
		text-decoration:none;
		
	}
	.highlight_hover:hover{
		background: rgba(255,255,255,0.2);
	}



	
.translucent_until_hover{
	cursor:pointer;
}
.translucent_until_hover div{
    opacity: 0.25;
    display: flex;
    font-weight: bold;
    line-height: 1em;
    padding: 3px;
	filter: blur(1px);
}
.translucent_until_hover:hover div{
	opacity:1;	
	filter: none;
}
.translucent_until_hover input[type="radio"]:checked + div{
	opacity:1;
	color:red;
	filter: none;
}




.container{
	display:flex;
	flex-direction:column;
}
.flex_row{
	display:flex;
	flex-direction:row;
	margin-top: 2ch;
	margin-bottom:3ch;
	column-gap:1ch;
}
.flex_column{
	display:flex;
	flex-direction:column;
	row-gap:1ch;
	margin:20px 0px;
}

.flex_cc{
	justify-content:center;
	align-items:center;
}
.space_evenly{
	justify-content:space-evenly;
}
.padbot{
	padding-bottom:5vh;
}
.innercontent{
	padding:0px;
	margin-left:0px;
}
topstuffholder{
	display:none;
}
.Content .innercontent{
	margin:0px;
}
problemHolder{
	flex:99;
	display:flex;
	width:100%;
	justify-content: space-evenly;
	font-size:5vmin;
    flex-direction: column;
    align-items: center;	
	position:relative;
	padding: 0px 5vw;
}

problemholder{
	font-size: clamp(1rem, 5vmin, 3.5rem);
	font-family:'roboto';
}



problemHolder input{
	width:100%;
}
problemholder gridItem{
    justify-self: center;
}

svg foreignObject .answerInput{
font-size: 1rem;
}

.fracTop{
	border-bottom:.25rem solid black;
	padding-bottom:1px;
}

.fracBot{
	border-top:.25rem solid black;
	padding-top:1px;
}


.sortable_item{
	box-sizing:border-box; 
	margin:3px; 
	background:white; 
	border:thin solid black; 
	font-size:13pt; 
	border-radius:5px; 
	cursor:pointer;
    position: relative;
	top:0px;
}
.sortable_item:hover{
    position: relative;
    top: -2px;
    box-shadow: 0px 2px 2px 1px rgb(0 0 0 / 25%);
}

.openSaysMe{
    position: relative;
    top: -4px;
    box-shadow: 0px 4px 4px 2px rgb(0 0 0 / 25%);
}
.division_left{
	border-left:.25rem solid black;
}

.division_top{
	border-top:.25rem solid black;
}

.complete_text{
    position: absolute;
    text-align: center;
    justify-content: center;
    align-items: center;
    transform: rotate(347deg);
	display:none;
    display: flex;
	transition: 1s linear;
	z-index:100;
	font-size:2.5em;
	-webkit-text-stroke-color: white;
    -webkit-text-stroke-width: 1px;
	font-weight:bold;
	font-family:arial;
	text-shadow:2px 2px 3px rgba(0,0,0,0.5);

	visibility: hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.5s linear;	
	user-select:none;
	pointer-events: none;
}

problemHolder[answer_status="1"] .complete_text.answered_correct ,
problemHolder[answer_status="2"] .complete_text.answered_incorrect, 
problemHolder[answer_status="5"] .complete_text.answered_unknown, 
problemHolder[answer_status="6"] .complete_text.answered_unknown, 
problemHolder[answer_status="7"] .complete_text.answered_unknown, 
problemHolder[answer_status="-1"] .complete_text.answered_unknown{
    transform: rotate(0deg);
	visibility: visible;
	opacity: 1;
}



.complete_text.answered_correct{
	color:#8afb8a;
}
.complete_text.answered_incorrect{
	color:#ff8686;
}

problemHolder[fresh_answer="1"][answer_status="1"] .complete_text.answered_correct ,
problemHolder[fresh_answer="1"][answer_status="2"] .complete_text.answered_incorrect,
problemHolder[fresh_answer="1"][answer_status="5"] .complete_text.answered_unknown{
   transform: rotate(0deg);
	visibility: visible;
	opacity: 1;
}



answer_status4{
	display:none;
	color:var(--needs_review);
	-webkit-text-stroke-color: black;
	-webkit-text-stroke-width: 1px;
	font-weight: bold;
	font-family: arial;
}
[answer_status="4"] answer_status4{
	display:initial;
}



[hoverParent]{
	cursor:pointer;
}
[hoverParent]:hover [hoverItem]{
	opacity:1.0;
}
[hoverItem] , [click_item] {
	opacity:0.0;
	cursor:pointer;
	color:pink;
}
[click_item="active"]{
	opacity:1;
}
[svgoverlay]{
	fill:white;
	opacity:0.5;
	display:none;
}
[svgoverlay="active"]{
	display:initial;
}



.problemSelectHolder{
	display:flex;
	flex-direction:column;
	width:fit-content;
	flex:1;
    border: 2px solid black;
    border-radius: 5px;	
	max-width:100vw;
}
.problemSelectHolder gridRow.sheetSelector gridItem{
	padding:0vh 1vw;
	border:.5px solid black;
	display:flex;
	justify-content:center;
	display:flex;
	align-items:center;
	box-shadow: 2px 2px 4px rgba(255,255,255,0.5) inset;
	background:white;
}
.problemSelectHolder gridRow gridItem[status="2"]{
	background:#f98b8b;
}
.problemSelectHolder gridRow gridItem[status="1"]{
	background:#9cdc9c;
}


.checkAnswerHolder{
	display:flex;
	flex-direction:column;
}


checkbutton {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px 30px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    background: radial-gradient(ellipse at left bottom, #2b5e99 0%, #3272b9 70%);
    border: 1px solid #2d5487;
    border-bottom: 3px solid #053675;
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    letter-spacing: 0.5px;
}


/* Top gloss band */
checkbutton::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%;
    border-radius: 10px 10px 0 0;
    pointer-events: none;
}

/* Bottom shine/reflection */
checkbutton [shine] {
display: flex;
    position: absolute;
    bottom: -2px;
    height: 5px;
    width: 100%;
    left: 0px;
    background: radial-gradient(ellipse at center center, #d2f0fd 0%, #65aee9 20%, transparent 50%);
    pointer-events: none;
}

checkbutton:hover {
    background: radial-gradient(ellipse at left bottom, #336da8 0%, #3b80c8 70%);
    border-color: #345f94;
    border-bottom-color: #0a3f82;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

checkbutton:active {
    background: radial-gradient(ellipse at left bottom, #224f80 0%, #2a62a5 70%);
    border-color: #243f6a;
    border-bottom: 1px solid #243f6a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset, 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    padding-top: 10px;
    padding-bottom: 8px;
}



checkbutton[status="1"] , submitbutton[status="1"]{
    pointer-events: none;
	cursor:not-allowed;
    background: radial-gradient(ellipse at left bottom, #418b4e 0%, #52cb6a 70%);
    border-color: #2a7035;
    border-bottom-color: #1a5424;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

checkbutton[status="1"] [shine] , submitbutton[status="1"]  [shine]{
    background: radial-gradient(ellipse at center center, #b8f5c4 0%, #5ecc72 20%, transparent 50%);
}

checkbutton[status="2"] , submitbutton[status="2"]{
    pointer-events: none;
    background: radial-gradient(ellipse at left bottom, #a03030 0%, #c44040 70%);
    border-color: #8a2a2a;
    border-bottom-color: #6b1a1a;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

checkbutton[status="2"] [shine] , submitbutton[status="2"] [shine]{
    background: radial-gradient(ellipse at center center, #fdc4c4 0%, #e06565 20%, transparent 50%);
}








submitbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px 30px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    background: radial-gradient(ellipse at left bottom, #e8a010 0%, #ffcc44 70%);
    border: 1px solid #dd9a10;
    border-bottom: 3px solid #b87e00;
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    letter-spacing: 0.5px;
    font-family: var(--sans_1);
    text-transform: capitalize;
    text-decoration: none;
    margin: 20px auto;
}

submitbutton [shine] {
    display: flex;
    position: absolute;
    bottom: -2px;
    height: 5px;
    width: 100%;
    left: 0px;
    background: radial-gradient(ellipse at center center, #fff6af 0%, #ffcc55 20%, transparent 50%);
    pointer-events: none;
}

submitbutton:hover {
    background: radial-gradient(ellipse at left bottom, #f0ab18 0%, #ffd455 70%);
    border-color: #e5a515;
    border-bottom-color: #c48800;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

submitbutton:active {
    background: radial-gradient(ellipse at left bottom, #d08e00 0%, #e8b520 70%);
    border-color: #aa7500;
    border-bottom: 1px solid #aa7500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset, 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    padding-top: 10px;
    padding-bottom: 8px;
}












nextbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px 30px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    background: radial-gradient(ellipse at left bottom, #3a3f48 0%, #5a6270 70%);
    border: 1px solid #35393f;
    border-bottom: 3px solid #252830;
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    letter-spacing: 0.5px;
    font-family: var(--sans_1);
    text-decoration: none;
    margin: 20px auto;
}

nextbutton [shine] {
    display: flex;
    position: absolute;
    bottom: -2px;
    height: 5px;
    width: 100%;
    left: 0px;
    background: radial-gradient(ellipse at center center, #c8cdd5 0%, #787f8a 20%, transparent 50%);
    pointer-events: none;
}

nextbutton:hover {
    background: radial-gradient(ellipse at left bottom, #444a55 0%, #656e7e 70%);
    border-color: #3e434a;
    border-bottom-color: #2e3138;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

nextbutton:active {
    background: radial-gradient(ellipse at left bottom, #2c3038 0%, #484f5c 70%);
    border-color: #222528;
    border-bottom: 1px solid #222528;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset, 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    padding-top: 10px;
    padding-bottom: 8px;
}



chances_left_0 , chances_left_1{
	display:none;
}
[data-guesses-left="0"] chances_left_0{
	display:block;
}
[data-guesses-left="1"] chances_left_1{
	display:block;
}







.problemSelectHolder gridRow gridItem[selected]{
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3) inset;
	border:2px solid black;
	position:relative;
	left:0px;
	border-radius:0px 5px 5px 0px;
	width:115%;
}

.problemSelectHolder a{
	text-decoration:none;
	color:black;
}
.problemSelectHolder a:hover gridItem{
	box-shadow: 2px 2px 2px rgba(0,0,0,0.3) inset, 1px 1px 1px rgba(0,0,0,0.3) inset;
}
.problemSelectHolder .headerRow{
	font-weight:bold;
}
.problemSelectHolder .headerRow gridItem{
	padding:1vh 5px;
	border-bottom:2px solid black;
}
.layout{
	display:flex;
}


.problemHolder table{
	margin:auto;
}


table.nomargin , table.noMargin{
	margin:0;
}


.checkAnswerHolder form{
	display:flex;
}

di{
	height:10vmin;
	padding:0 .5ch;
	display:contents;
}
di > *{
	display:flex;
}
di[type="sup"]{
	vertical-align: super;
	font-size:.5em;
}
di[type="sub"]{
	vertical-align: sub;
	font-size:.5em;
}
frac{
	display:inline-flex;
	flex-direction:column;
}
frac num{
	border-bottom:thin solid black;
}

[fracHolder]{
	margin:auto;
}


submitbutton[checking]{
	opacity:0.5;
}



problemholder > form{
	display:flex;
	flex-direction:column;
	align-items:center;
	width:100%;
	justify-content:center;
}
problemholder gridItem{
	width:100%;
	justify-content:center;
	display: flex;	
}

.checkAnswerHolder{
	padding:3vh 0vw;	
	margin-bottom:20px;
	align-items: center;
}

.menu {
	display:none;
}
.w100{
	width:100%;
}
.svgW100{
	width:100%;
}
svg.vmin{
    height: 10vmin;
}

generic_modal label input{
	display: unset;
}


.word{
	font-size:4vmin;
}
.cartf_instructions{
	font-size:1rem;
}
svg text{
	font-size:1rem;
}
svg.normal_text text{
	font-size: 10px;
}
.flexHES{
	display:flex;
    justify-content: space-around;
	flex-direction:row;
}
problemSelectHolder{
	display:flex;
	overflow:auto;
	padding-bottom:20px;
    overflow-y: hidden;
	width:100%;
}

::-webkit-scrollbar {
}

problemSelectHolder a{
	text-decoration:none;
	color:black;
}
problemSelectHolder gridItem{
	display:flex;
	padding:1ch 2ch;
	background: var(--primary_blue);
	color:white;
	text-shadow:1px 1px black;
	font-weight:bold;
	font-family: Tahoma;
	position:relative;
    justify-content: center;
    border: thin solid white;	
	cursor:pointer;
	transition: transform .15s , box-shadow .15s , background-color .15s;
}
problemSelectHolder  gridItem:hover{
	transform:scale(1.25);
	box-shadow:6px 6px 2px rgba(0,0,0,0.25);
	transition: transform 0s;
	z-index:100;
	background-color: #364a5f;
	transition: transform .15s , box-shadow .15s , background-color .15s;
}


/*
userName{
    border-bottom-left-radius: 10px;
    display: flex;
    padding: 5px 5px 5px 10px;
    background-color: #67829E;
    color: white;
    text-shadow: 1px 1px black;
    font-weight: bold;
    font-family: Tahoma;
    position: relative;
    justify-content: center;
    border: thin solid white;
    cursor: pointer;
    align-self: flex-start;
    border-top: none;
}
*/



userName{
	display: inline-flex;
	flex-direction:column;
    color: white;
    text-shadow: 1px 1px black;
    font-weight: bold;
    font-family: Tahoma;
    cursor: pointer;
    align-self: start;
    position: relative;
    left: 0px;
    bottom: 100%;
	z-index:100;
}
userName name_display{
	padding:0px 20px;
	align-items:center;
}

userName arrow:after{
	font-size:.8em;
	display:inline-flex;
	margin: 3px;
	content:'►';
	transition:transform .1s ease;
	transform: rotate(0deg);
}
userName:hover arrow:after{
	transform: rotate(90deg);
}
menuhover{
	flex-direction:column;
	position:absolute;
	top:100%;
    box-shadow: -2px 2px 2px rgba(0,0,0,0.25);
    background-color: #67829E;
    color: white;
	width:100%;
	padding:0px -10px;
	display:none;
	border:thin solid white;
	border-top:none;
	border-bottom-right-radius: 10px;
}
userName:hover menuhover{
	display:flex;
}
menuhover item{
	display:flex;
	width:100%;
	padding:10px;
}
userName:hover menuhover item:hover{
    color: yellow;
    background: rgb(61, 78, 95);
}



gridItem[activeProblem]:before{
	content: '▼';
	position:absolute;
	top:0%;
	display:flex;
	color:yellow;
	height:1ch;
	line-height: 1ch;
	transform: scaleX(3)  scaleY(1);
}
gridItem[answer_status]::after{
	content: " ";
	font-weight: bold;
	display:block;
	position:absolute;
	width:100%;
	height:10%;
	bottom:0px;
	left:0px;
	font-size:1em;
	transform:scale(2);
	bottom:-100%;
	opacity:0;
}
gridItem[answer_status][justanswered]:after{
	border: thin solid black;
	width: 100%;
    box-sizing: border-box;
    min-height: 20%;
	transform:scale(1);
	bottom:0;
	opacity:1;
	transition: transform .5s ease , bottom .5s ease , opacity .5s ease ;
}
gridItem[answer_status][justanswered="1"]:after{
	background-color: #8afb8a;
}
gridItem[answer_status][justanswered="2"]:after{
	background-color: #ff8686;
}
gridItem[answer_status][justanswered="3"]:after{
	background-color: #ffed15;
}
gridItem[answer_status][justanswered="4"]:after{
	background-color: var(--needs_review);
}
gridItem[answer_status][justanswered="5"]:after{
	background-color: #8afb8a;
}
gridItem[answer_status][justanswered="6"]:after{
	background-color: var(--correct);
}
gridItem[answer_status][justanswered="7"]:after{
	background-color: var(--incorrect);
}

gridItem[answer_status="1"] , gridItem[answer_status="2"] , gridItem[answer_status="-1"]{
	background:#b3c0ce;
}
gridItem[answer_status="1"]::after , 
gridItem[answer_status="2"]::after , 
gridItem[answer_status="3"]::after , 
gridItem[answer_status="-1"]::after ,
gridItem[answer_status="4"]::after,
gridItem[answer_status="5"]::after,
gridItem[answer_status="6"]::after,
gridItem[answer_status="7"]::after
{
	border: thin solid black;
	width: 100%;
    box-sizing: border-box;
    min-height: 20%;
	transform:scale(1);
	bottom:0;
	opacity:1;
}
gridItem[answer_status="1"]::after{
	background-color: #8afb8a;
}
gridItem[answer_status="2"]::after{
	background-color: #ff8686;
}
gridItem[answer_status="3"]::after{
	background-color: #ffed15;
}
gridItem[answer_status="4"]::after{
	background-color: var(--needs_review);
}
gridItem[answer_status="5"]::after{
	background-color: #8afb8a;
}
gridItem[answer_status="6"]::after{
	background-color: var(--correct_answer);
}
gridItem[answer_status="7"]::after{
	background-color: var(--wrong_answer);
}
gridItem[answer_status="-1"]::after{
	background-color: #a7a7a7;
}



problemHolder[answer_status="2"] input , problemHolder[answer_status="2"] select , problemHolder[answer_status="2"] form ,
problemHolder[answer_status="1"] input , problemHolder[answer_status="1"] select , problemHolder[answer_status="1"] form ,
problemHolder[answer_status="-1"] input , problemHolder[answer_status="-1"] select , problemHolder[answer_status="-1"] form ,
problemHolder[answer_status="5"] input , problemHolder[answer_status="5"] select , problemHolder[answer_status="5"] form ,
problemHolder[answer_status="6"] input , problemHolder[answer_status="6"] select , problemHolder[answer_status="6"] form ,
problemHolder[answer_status="7"] input , problemHolder[answer_status="7"] select , problemHolder[answer_status="7"] form ,
problemHolder[disabled] input , problemHolder[disabled] select 
{
	pointer-events: none;
}

problemHolder[answer_status="2"] prob ,
problemHolder[answer_status="1"] prob , 
problemHolder[answer_status="-1"] prob ,
problemHolder[answer_status="5"] prob ,
problemHolder[answer_status="6"] prob ,
problemHolder[answer_status="7"] prob ,
problemHolder[disabled] prob 
{
	opacity:0.25;
}




problemHolder[answer_status][fresh_answer] form{
	pointer-events: initial;
	opacity:1;
}



problemHolder[disabled]{
	pointer-events: none;	
}


.num{
}
.word{
}
.padCH{
	padding:1ch;
}

table{
	border-collapse:collapse;
}

.scorePanel{
	background: var(--ccBlue2);
	border-top:2px solid black;
	border-bottom:2px solid black;
	color:white;
	display: flex;
    justify-content: space-between;	
}
scoreHolder{
	 user-select: none;
    display:flex;	
}
scoreHolder scoreItem{
	margin-right:20px;
	position:relative;
}
scoreHolder scoreItem span{
    font-family: Tahoma;
    font-weight: bolder;
    font-size: 1.5em;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
    text-shadow: -2px 2px 3px rgba(0, 0, 0, 0.5);
}

scoreHolder scoreItem span.correct{
	color:#a7db5e;	
}
scoreHolder scoreItem span.incorrect{
	color:#db5e5e;	
}
scoreHolder scoreItem span.average{
	color:black;	
}
scoreHolder scoreItem span.average:after{
	content:'%';	
}
scoreHolder scoreItem .add1{
	position:absolute;
	right:0px;
	top:-0rem;
	user-select: none;
	transform:scale(0);	
}
scoreHolder scoreItem .add1[active]{
	transform:scale(1);	
	position:absolute;
	right:0px;
	top:-2rem;
	opacity:0;
	transition:top 1s ease , opacity 1s ease .5s;
	display:static;	
}



optionsClicker{
	color:white;
    -webkit-text-stroke-width: 2.5px;
    -webkit-text-stroke-color: white;
	border-radius:100%;
	width:1.5ch;
	height:1.5ch;
	display:flex;
	align-items: center;
    justify-content: center;
	padding:1ch;
    font-family: Tahoma;
    font-weight: bolder;
    font-size: 1.5em;
	cursor:pointer;
	border:2px solid white;
	transition: background .25s ease-in-out;
}
optionsClicker[active]{
	background:rgba(0,0,0,0.5);
	border:2px solid rgba(255,255,255,0.5);
	transition: background .25s ease-in-out;
}
optionholder{
	position:relative;
 user-select: none;	
}
optionholder a {
	color:white;
	text-decoration:none;
	white-space:nowrap;
}
optionholder options{
	display:none;
	position:absolute;
	flex-direction:column;
	background: var(--ccBlue2);
	right:0px;
	border:2px solid black;
	z-index:100;
}
optionsClicker[active] ~ options{
	display:flex;
}
optionsClicker text{
	display:none;
}
optionholder options flexItem{
	display:flex;
	padding:0.5ch 1ch;
}
optionholder options flexItem:hover{
	background: rgba(0,0,0,0.5);
}
optionholder form{
	margin-top:10px;
}
optionholder button{
	background:none;
	color:white;
	cursor:pointer;
}

preSubmit , postSubmit{
	display:flex;
	flex-direction:column;
}
postSubmit[hidden]{
	display:none;
}
problemHolder[answer_status="0"] postsubmit{
	display:none;
}



orderItemsHolder{
	display:flex;
	flex-direction:column;
}
orderItemsHolder label{
	border-radius:5px;
	text-align:left;
	padding:.1em;
	cursor:move;
	background:white;
	margin:.1em;
	list-style-image: url('/empty.png');
	list-position:inside;
}
orderItemsHolder label.ui-sortable-placeholder{
	border:thin solid black;
	border-radius:5px;
	text-align:left;
	padding:.1em;
	cursor:move;
	background:white;
	margin:.1em;
	list-style-image: url('/empty.png');
	list-position:inside;
}
orderItemsHolder item:hover{
	border:thin solid gray;
}
orderItemsHolder item.ui-sortable-helper{
	box-shadow:.1em .1em .2em rgba(0,0,0,0.3);
	background:pink;
}
label input + text[opacityUntilClick]{
	opacity:.1;
}
label input:checked + text[opacityUntilClick]{
	opacity:1;
}

input_exponent item{
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: textfield;
    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
	background: linear-gradient(#FCEDE1, #FCD79A);
    font-size: 1em;
    border-radius: 7px;
    overflow: hidden;
    -webkit-box-shadow: inset 0px 0px 0px 1px black;
    -moz-box-shadow: inset 0px 0px 0px 1px black;
    box-shadow: inset 0px 0px 0px 1px black;
    margin: 0px;
    border: none;
    text-align: center;
	min-height:1rem;
	min-width:50px;
	}
	
	
	
	answer_bank{
		margin: auto;
		grid-template-columns: repeat(5, auto);
		justify-content: center;
		align-content: center;
		width: fit-content;
		padding:10px;
		border-radius:5px;
		border:thin solid black;
		box-shadow:4px 4px 4px rgba(0,0,0,0.25);
		margin-bottom:10px;
		background:var(--accent_1);
		display:grid;
	}
	answer_bank grid_item{
		padding:4px 20px;	
	}
	
	#answer_bank:checked ~ answer_bank{
	}
	label[for="answer_bank"] *{
		display:none;
	}
	label[for="answer_bank"]{
		cursor:pointer;
	}
	
	#answer_bank:checked ~ label hide{
		display:initial;
	}
	#answer_bank:not(:checked) ~ label show{
		display:initial;
	}






	svg .answerInput + numberPad {
		// display: flex;
		// top: 100%;
		// visibility:hidden;
	}
	svg_holder > numberPad {
		display: flex;
		position:absolute;
		left:-4000px;
		top:-4000px;
		opacity:1.5;
		transform: translate(0,0);
	}
	svg numpadholder{
		position: relative;
		/* max-width: 80%; */
		height: fit-content;
		display: flex;	
		max-width:unset;		
	}
	
	svg foreignObject{
		font-family: 'IBM Plex Sans', sans-serif;
	}
	
	svg foreignObject.text_input_holder{
		overflow: visible;
		position: absolute;
		width: 0px;
		height: 0px;
		transform: translate(0 , 0);
		font-size: 1em;
		opacity:1.2;
	}

	
	svg foreignObject.text_input_holder .svg_input_text_holder{
		vertical-align: top;
		text-align: left;
		transform: translate(-50%,-100%) translate(0px, 0px);
		height: fit-content;
		width: fit-content;
	}	
	.svg_input_text_holder input:focus + numberpad{
		left:-100000;
		top:-100000;
		top:100%;
	}
	


.split_screen_holder{
	display:flex; 
}

.split_screen_holder label{
	cursor:pointer;
	padding:0px 10px;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
}

.split_screen_holder label:hover{
	background:rgba(0,0,0,0.5);
}