:root {
    --bs1: 2px 2px 1px rgba(0,0,0,0.25);
    --bs2: 2px 2px 4px rgba(0,0,0,0.25);
}


problem_number_holder problemNumber{
border-radius:3px; 
display:flex; 
flex-direction:column; 
justify-content: center; 
align-items: center; 
width:30px; 
height:30px; 
border:thin solid gray;	
font-size:10pt;
font-weight:bold;
}


problem_number_holder{
   display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

big_problem_holder:empty{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:20px;
}

big_problem_holder:empty:after{
	content: attr(empty_text);
	color:var(--accent_6);
}

.student_breakdown_holder{
	display:flex;
	flex-direction:column;
	width:100%;
	border: 2px solid var(--accent_5);
	background: #FFFFFF;
	border: 1px solid #B8B8B8;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 6px;
}

.student_breakdown_holder grouper{
	display: flex;
	gap: 10px;
	margin-right: 20px;
}

details{
	position:relative;	
}

row_holder{
	display:contents;
}

#login_holder{
	background: #FFFFFF;
	box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.35);
	border-radius: 6px;
	display:flex;
	flex-direction:column;
	padding: 21pt 26pt 50pt 26pt;
	width: fit-content;
	margin: auto;
	row-gap:15px;
	width:300pt;
}

#login_holder input{
	width: fit-content;
	margin: auto;
	width:100%;
	font-size:12pt;
	border:thin solid rgba(222, 221, 221, 1);
}



#my_account_holder{
	display:flex; 
	flex-direction:column;
	row-gap:10pt;
	width:50%;
	margin:auto;
}
#my_account_holder img{
	width:40px;
}



.my_information{
	display:flex;
	flex-direction:column;
	background: #FFFFFF;
	border: 1px solid #B0B0B0;
	box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.35);
	border-radius: 6px;
}


#breakdown_assignment .filter label_holder{
    position: absolute;
    white-space: nowrap;
    position: absolute;
    z-index: 100;
    background: white;
    /* padding: 10px; */
    right: 0;
    background: #d73a3a4d;
    border: 1px solid #D9D9D9;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}


#breakdown_assignment .filter filter_items{
    position: absolute;
    background: white;
    /* border: thin solid var(--primary_gray); */
    padding: 15px;
    list-style: none;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    top: 100%;
    right: 0%;
    box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 25%);
    min-width: 100%;
    gap: 10px;
}


#breakdown_assignment .filter summary{
    padding: 8px 12px;
	border: thin solid var(--accent_6);
}



#breakdown_assignment .filter filter_items input{
	display:none;
}



#breakdown_assignment .filter filter_items toggle_button{
	width:100%;
}

filter_items label{
	justify-content:center;
}


details > summary {
  list-style: none;
}
details > summary::marker {
  display: none;
}
details{
	z-index:100;
}

details ~ .sub_menu{
	display:none;
}

details[open] ~ .sub_menu{
	display:block;
}

details summary::-webkit-details-marker {
  display:none;
}
details > summary {
  list-style: none;
}

big_problem_holder problem_holder{
	display:block;
}

problemNumber:hover{
	background:pink;
	cursor:pointer;
	top:-2px;
}



header_item{
    border-bottom: 3px solid #67829e;
    font-size: 1.2em;
    font-weight: bold;
    font-family: arial;
    display: flex;
    width: 100%;
    box-shadow: -1px 2px 2px 1px rgb(0 0 0 / 25%);
    background: linear-gradient( 
90deg
 , #dbecfe, white 20%);
 margin-top:20px;
 margin-bottom:10px;
    padding: 5px 0px 5px 10px;
}
.display_percent:after{
	content:'%';
}
grid_holder.center_items grid_item{
	display:flex;
    place-items: center;
    place-content: center;
	padding:2px 5px;
}
.score_100{
	color: #a7db5e;
    font-weight: bold;
    text-shadow: 1px 1px black;
    font-family: arial;
}



[form_id="filter_student_scores_by_class"] [name="filter_classes"]{
	display:none;
}
[form_id="filter_student_scores_by_class"] .filter_display{
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:0.7rem;
}
[form_id="filter_student_scores_by_class"] input:checked + .filter_display{
	background:pink;
}



details .sub_menu{
	position:absolute;
	top:100%;
	left:0px;
	cursor:initial;
}

problem_holder{
	display:none;
}

generic_modal problem_holder{
	display:block;
}

[js_action="update_answer_status"] answer_status:hover{
	border:thin solid white;
	cursor:pointer;
}
sort_helper{
	display:none;
}
grid_row{
	display:contents;
}
grid_holder > grid_item{
	border:thin solid #eaeaea;
	padding:2px 5px;
}


grid_row[header] > grid_label{
	position:relative;
	text-transform: capitalize;
	user-select: none;	
}
grid_row{
	display:contents;
}
grid_contents grid_row grid_item {
    padding: 12px 6px;
}
grid_contents grid_row:nth-child(even) grid_item{
	background:var(--accent_3);
}
grid_contents grid_row:nth-child(odd) grid_item{
	background: white;
}
 grid_label[sortable]{
	cursor:pointer; 
 }
 grid_label[sortable]:hover sort_holder sort_item{
	color:white; 
	-webkit-text-stroke: 1px black
 }

[name^="active"]:checked ~ span[active] {
    display: initial;
    background: var(--correct);
}
[name^="active"] ~ span {
    display: none;
    border: thin solid black;
    border-radius: 10px;
    padding: 1px 10px;
    cursor: pointer;
    user-select: none;
}
[name^="active"]:not(:checked) ~ span[inactive] {
    display: initial;
    background: gray;
}
[name^="active"] ~ span {
    display: none;
    border: thin solid black;
    border-radius: 10px;
    padding: 1px 10px;
    cursor: pointer;
    user-select: none;
}
guesses{
	display:flex;
	flex-direction:column;
}
flex_row{
	display:flex;
	flex-direction:row;
}

flex_column{
	display:flex;
	flex-direction:column;
}
.topMenuHolder{
	display: flex;
	flex-direction:column;
	max-width:200px;
	align-items:normal;
    border: thin solid black;
    background: var(--ccBlue);
}
.topMenuHolder .myAccountButton{
    padding: 10px 10px;
    font-family: arial;
    color: white;
    text-shadow: 1px 1px black;
    font-weight: bold;
    position: relative;
    display: block;
	align-items:normal;
	background:rgba(0,0,0,0);
	text-transform: capitalize;
}
.topMenuHolder .myAccountButton:hover{
	filter:brightness(0.9);
}
fieldset.top_label{
	all: initial;
}
fieldset.top_label legend{
	all: initial;
	font-size:.9em;
	margin-left:0px;
	font-weight:normal;
	color:#565959;
}


.generic_card{
    border: thin solid black;
    background: #dbecfe;
    box-shadow: 2px 2px 4px rgb(0 0 0 / 50%), inset 2px 2px 2px rgb(255 255 255 / 20%);
}

.noborder griditem{
	border:none;
}

.no_margin{
	margin:0px;
}

gridItemBold{
	font-weight:bold;
	font-family:arial;
	display:flex;
	padding:10px;
	place-items:center;
}

.basic_button{
	border-bottom:thin solid black;
	border-top:thin solid white;
	border-radius:5px;
	padding:1px 10px;
	cursor:pointer;
	background:rgba(255,255,255,0.1);
}

.basic_button:hover{
	background:rgba(255,255,255,0.3);
}

answer_status{
	display:inline-flex;
	min-width:20px;
	min-height:20px;
    border: thin solid black;
}
answer_status[value="1"]{
	background:var(--correct_color);
}
answer_status[value="2"]{
	background:var(--wrong_color);
}
answer_status[value="3"]{
	background:yellow;
}

.myAccountButton{
	border:thin solid gray;
	padding:5px 10px;
	font-family:arial;
	text-decoration:none;
	color:initial;
	text-transform:capitalize;
}



back_button{
	padding:2px 10px;
	padding-right:20px;
	border:thin solid white;
	border-top:none;
	border-left:none;
	border-radius: 0px 0px 10px 0px;
	box-shadow:2px 2px 1px rgba(0,0,0,0.25);
}
back_button:hover{
	background: var(--ccBlueHover);
}


breakdown2{
	border:thin solid gray;
	width:-webkit-fill-available;
	display:flex;
	width:100%;
	height:10px;
}
breakdown2 > *{
	border-right: thin solid rgb(0 0 0);
}

[answer_status="0"]{
	background:white;
}
[answer_status="1"]{
	background:var(--correct_color);
}
[answer_status="2"]{
	background:var(--wrong_color);
}
[answer_status="3"]{
	background:var(--checkedOnly);
}
[answer_status="4"]{
	background:var(--needs_review);
}
[answer_status="5"]{
	background:var(--correct_color);
}
[answer_status="6"]{
	background:var(--correct_color);
}
[answer_status="7"]{
	background:var(--wrong_color);
}


.display_content{
	display:contents;
}



.grid_mc > *{
	display:flex;
	justify-content:center;
	align-items:center;
}

.gridTable3 gridItem{
	max-height:10rem;
}

.assignment_grid{
	grid-template-columns:repeat(7,auto); 
	width:fit-content;
	display:grid;
}
.assignment_grid gridrow gridItem{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:1px 5px;
}

gridItem[hide_item]{
	transition: opacity 1s , transform 1s, max-height 1s , visibility 1s , padding-top 1s , padding-bottom 1s;
	opacity:0;
	transform: scaleY(0);
	overflow:hidden;
	max-height:0rem;
	visibility:hidden;
	padding-top:0px;
	padding-bottom:0px;
}

gridItem icon{
    border-radius: 100%;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(0,0,0,0.2);
    display: flex;
    place-items: center;
    justify-content: center;
    align-items: stretch;
	cursor:pointer;
}
gridItem icon:hover{
    background: rgba(0,0,0,0.6);
	color:white;
	transition: background .5s;
}


largePreview{
	display:none;
	background:white;
}
largePreview svg{
	width:100%;
	height:100%;
}
magnifyingHolder{
    position: relative;
    padding: 0px 15px;
    border: thin solid #000000;
    border-radius: 5px;
    margin: 2px;
    background: white;
	cursor:pointer;
}
magnifyingHolder:hover{
	background: var(--ccBlue);
    color: white;
    border: thin solid white;
}
magnifyingHolder:hover largePreview{
	color:black;
	background:white;
	display: block;
	position: absolute;
	left: 0%;
	top: 100%;
	border-spacing: unset;
	padding: 10px;
	border: thin solid black;
	margin-left: -50%;
	margin-top: 10px;
	box-shadow: var(--bs2);
	max-width: 4in;
	width:fit-content;
	z-index:100;
}



.pad5 > *{
	padding:5px;
}


sort_button{
	border:thin solid white;
	border-radius:5px;
	padding:5px 10px;
	font-size:8pt;
	margin-left:10px;
	cursor:pointer;
	top:-2px;
	position:relative;
	box-shadow:2px 2px 2px rgba(0,0,0,0.5);
}
sort_button:after{
	content: '◄►';
	font-size:8pt;
	transform: rotate(90deg);
	display:inline-block;
}
sort_button:hover{
	background:rgba(0,0,0,0.3);
}
sort_button:active{
	box-shadow:none;
	top:0px;
}
sort_button[sorted="true"]:after{
	content: '▲';
	font-size:8pt;
	transform: rotate(0deg);
	display:inline-block;
}
sort_button[sorted="false"]:after{
	content: '▼';
	font-size:8pt;
	transform: rotate(0deg);
	display:inline-block;
}



[toggleRow="edit"] [toggle_type="edit"]{
	display:flex;
}
[toggleRow="normal"] [toggle_type="edit"]{
	display:none;
}
[toggleRow="edit"] [toggle_type="normal"]{
	display:none;
}

grid_row[header] grid_label sort_holder{
	position:absolute;
	right:0px;
	font-size:.55em;
	display:inline-flex;
	flex-direction:column;
}
sort_item{
}
grid_label[sortable]{
padding-right: 20px;
}

sort_holder[sorted="az"] sort_item[type="ls"]{
	display:none;
}

sort_holder[sorted="za"] sort_item[type="sl"]{
	display:none;
}
grid_contents{
	display:contents;
}





.w_fc{
	width:fit-content;
}