body[modal] {
    overflow: hidden;
}

top_holder [tree]{
	display:none;
}

[tree="topic"] top_holder [tree="topic"]{ display:contents;}
[tree="grade"] top_holder [tree="grade"]{ display:contents;}
[tree="favorites"] top_holder [tree="favorites"]{ display:contents;}
[tree="custom"] top_holder [tree="custom"]{ display:contents;}


[modal_id="main_modal"] [page="select_standard"][show="1"] {
	display:block;
}

[modal_id="main_modal"] [page="select_topic"][show="1"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px,200px) );
}


[modal_id="main_modal"] top_holder{
    display: flex;
    justify-content: space-around;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
	height:31px;
}


svg{
	max-width: 100%;
	height:auto;
}



preview_item handle{
	display:none;
}

preview_item:hover handle{
	display:flex;
	position:absolute;
	left:0px;
	top:0px;
	cursor:grab;
	border:thin solid gray;
	width:30px;
	display:flex;
	aspect-ratio:1/1;
	z-index:2;
	align-items:center;
	justify-content:center;
}

preview_item content{
	display: flex;
    align-items: center;
    justify-content: center;
	padding:3px 10px;
}

#switch_view_grid:checked ~ .cartf_holder .view_selector_holder label[for="switch_view_grid"] , 
#switch_view_list:checked ~ .cartf_holder .view_selector_holder label[for="switch_view_list"] 
{
	box-shadow: inset 0px 2px 4px 1px;
}




top_holder [go_to_page][on_page]{
	border-bottom:3px solid #5a5a5a;
}

top_holder [go_to_page]{
	border-bottom:3px solid rgba(0,0,0,0);
}
#problem_selector_by_text {
    padding: 5px;
}
.quick_jump_add_to_problem {
    background: #61b057;
    margin-left: 10px;
    border-radius: 100%;
    font-size: 12pt;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: .1;
    height: 16px;
    width: 16px;
    color: white;
	transition: transform 0.2s;
}
.quick_jump_add_to_problem:hover {
	transform:scale(1.26);
}

.quick_jump_text{
    margin-left: 20px;
	cursor:pointer;
}
.quick_jump_text:hover{
	text-decoration:underline;
}


.cart_holder standarddisplay{
	margin-left:20px;
}

[modal_id="main_modal"] content_holder{
	height: calc(100% - 31px);
	position:relative;
}

#select_problem_quick_jump summary {
    position: absolute;
    height: 30px;
    top: 0;
    left: 0;
	border:thin solid black;
	padding:10px;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	background:white;
	z-index:100;
	box-shadow:var(--box_shadow);
}

#select_problem_quick_jump[open] summary {
    position: sticky;
}

#select_problem_quick_jump{
	flex:0;
}

#select_problem_quick_jump .quick_jump_item{
	display: flex;
    align-items: center;
    border-bottom: thin solid #B8B8B8;
	padding: 4px 0px;
    font-size: 10pt;
}


#select_problem_quick_jump .Heading{
	font-size:10pt;
	border:none;
}

#select_problem_quick_jump[open] {
    flex: 25;
    position: relative;
    height: 100%;
    overflow: auto;
	border-right:2px solid black;
}

.hide{
	display:none;
}
#problem_selector_by_text{
}


#problem_selector_by_display{
    height: 100%;
    flex: 75;
	max-width: calc(224px *4); 
	margin: 0 auto;
	padding: 0px 10px;
}


#modify_problems_holder{
	display: flex;
    flex-direction: column;
	width:80%;
	align-items:center;
	row-gap:20px;
	padding:20px;
	margin:auto;
}


#modify_problems_holder holder{
	padding:15px;
	border-radius:5px;
	border:thin solid #D9D9D9;
}


#modify_problems_holder .holder[w="1"]{
	width:calc(204px + 37px + 20px);
}

#modify_problems_holder .holder[w="2"]{
	width:calc((204px * 2) + 37px + 20px);
}

#modify_problems_holder .holder[w="3"]{
	width:calc((204px * 3) + 37px + 20px);
}

#modify_problems_holder .holder[w="4"]{
	width:calc((204px * 4) + 37px + 20px);
}


#modify_problems_holder refresh_holder{
    align-self: center;
    margin: 10px;
    margin-right: 20px;
}
#modify_problems_holder refresh_button {
    border: thin solid gray;
    /* width: 25px; */
    /* height: 25px; */
    display: flex;
    border-radius: 100%;
    padding: 5px;
	cursor:pointer;
    box-shadow: var(--box_shadow);
	transform:scale(1);
	transition: transform 0.25s;
}
#modify_problems_holder refresh_button:hover{
	transform:scale(1.1);
	transition: transform 0.25s;
}



refresh_button img{
	transform: rotate(0deg);
	width:25px;
}


refresh_button.remove_class_after_animation img{
    transition: transform .5s ease-in-out;
	transform:rotate(-360deg);
}




img.remove_class_after_animation{
    transition: transform .5s ease-in-out;
	transform:rotate(-360deg);
}



#modify_problems_holder problem_display{
	display:flex;
	flex-direction:column;
	font-size:10pt;
}
#modify_problems_holder problem_display ans{
	color:red;
}


preview_item displayed{
	z-index:10;
	background:white;
	border:thin solid black;
	height:100%;
}

preview_item:has(content:empty){
	display:none;
}


preview_item refresh_problems_holder{
	display:flex; 
	position:absolute; 
	bottom:calc(100% - 50px); 
	left:0px; 
	width:100%;
	border:thin solid black;
	border-radius: 10px 10px 0px 0px;
	overflow:hidden;
	background:white;
	padding:5px;
	transition: bottom .5s;
	opacity:0;
	z-index:0;
}

preview_item:hover refresh_problems_holder{
	bottom:100%; 
	opacity:1;
}

preview_item refresh_problems_holder refresh_button{
	width: 100%;
    display: flex;
	flex-direction:column;
    align-items: center;
    justify-content: center;
}

preview_item refresh_problems_holder refresh_button day{
	font-size:9pt;
}

preview_item refresh_problems_holder refresh_button img{
	height:20px;
	width:20px;
}







.cartf_holder[assignment_type="cat"] main_problems_holder refresh_problems_holder refresh_button[problem_day="1"] day,
.cartf_holder[assignment_type="cat"] main_problems_holder refresh_problems_holder refresh_button[problem_day="2"] ,
.cartf_holder[assignment_type="cat"] main_problems_holder refresh_problems_holder refresh_button[problem_day="3"] ,
.cartf_holder[assignment_type="cat"] main_problems_holder refresh_problems_holder refresh_button[problem_day="4"] ,
.cartf_holder[assignment_type="cat"] main_problems_holder refresh_problems_holder refresh_button[problem_day="5"] 
{
	display:none;
}



.cartf_holder[assignment_type="caf"] main_problems_holder refresh_problems_holder refresh_button[problem_day="1"] day,
.cartf_holder[assignment_type="caf"] main_problems_holder refresh_problems_holder refresh_button[problem_day="2"] ,
.cartf_holder[assignment_type="caf"] main_problems_holder refresh_problems_holder refresh_button[problem_day="3"] ,
.cartf_holder[assignment_type="caf"] main_problems_holder refresh_problems_holder refresh_button[problem_day="4"] ,
.cartf_holder[assignment_type="caf"] main_problems_holder refresh_problems_holder refresh_button[problem_day="5"] 
{
	display:none;
}


.cartf_holder[assignment_type="cat_dl"] main_problems_holder refresh_problems_holder refresh_button[problem_day="1"] day,
.cartf_holder[assignment_type="cat_dl"] main_problems_holder refresh_problems_holder refresh_button[problem_day="2"] ,
.cartf_holder[assignment_type="cat_dl"] main_problems_holder refresh_problems_holder refresh_button[problem_day="3"] ,
.cartf_holder[assignment_type="cat_dl"] main_problems_holder refresh_problems_holder refresh_button[problem_day="4"] ,
.cartf_holder[assignment_type="cat_dl"] main_problems_holder refresh_problems_holder refresh_button[problem_day="5"] 
{
	display:none;
}



[modal_id="main_modal"][assignment_type="cat_dl"] [problem_day="2"],
[modal_id="main_modal"][assignment_type="cat_dl"] [problem_day="3"],
[modal_id="main_modal"][assignment_type="cat_dl"] [problem_day="4"],
[modal_id="main_modal"][assignment_type="cat_dl"] [problem_day="5"],
[modal_id="main_modal"][assignment_type="cat_dl"] [car_text]
{
	display:none;
}




[modal_id="main_modal"][assignment_type="cat"] [problem_day="2"],
[modal_id="main_modal"][assignment_type="cat"] [problem_day="3"],
[modal_id="main_modal"][assignment_type="cat"] [problem_day="4"],
[modal_id="main_modal"][assignment_type="cat"] [problem_day="5"],
[modal_id="main_modal"][assignment_type="cat"] [car_text]
{
	display:none;
}




[modal_id="main_modal"][assignment_type="caf"] [problem_day="2"],
[modal_id="main_modal"][assignment_type="caf"] [problem_day="3"],
[modal_id="main_modal"][assignment_type="caf"] [problem_day="4"],
[modal_id="main_modal"][assignment_type="caf"] [problem_day="5"],
[modal_id="main_modal"][assignment_type="caf"] [car_text]
{
	display:none;
}













preview_item problem_options_holder{
	display:flex; 
	flex-direction:column;
	position:absolute; 
	left:0%; 
	border:thin solid black;
	border-radius: 10px 0px 0px 10px;
	overflow:hidden;
	background:white;
	padding:5px;
	transition: left .5s;
	opacity:0;
	z-index:0;
	width:50px;
}
preview_item.ui-sortable-helper problem_options_holder{
	transition: left 0s;
}
preview_item.ui-sortable-helper :is(problem_options_holder , refresh_problems_holder){
display:none;
}

preview_item:hover problem_options_holder , preview_item.ui-sortable-helper problem_options_holder{
	left:calc(0% - 50px); 
	opacity:1;
}



preview_item.ui-sortable-placeholder{
	background:pink;
	border:thin solid red;
	grid-column: span 1;
	width:100px;
}





[modal_id="main_modal"] top_holder div[js_action][active]{
 	background: var(--accent_1);
	color:black;
	cursor:pointer;
}

[modal_id="main_modal"] top_holder div[js_action]{
	width:100%;
    background: #f9f9f9;
 	color: var(--accent_1);
	display:flex;
	justify-content:center;
	align-items:center;
	border-right: thin solid #bfbfbf;
	padding:5px;
}

preview_holder .heading{
	grid-column: span 4;
}


.hover_enlarge_105{
	transition:transform 0.1s;
}
.hover_enlarge_105:hover{
	transform: scale(1.1);
}



preview_holder{
	display: none;
    /* grid-auto-columns: auto; */
    grid-template-columns: repeat(4, minmax(100px, 1fr));
	grid-gap:15px;
    height: fit-content;
	padding:15px 10px;	
}

[name="switch_view"][value="grid"]:checked ~ .cartf_holder preview_holder{
	display: grid;
}
[name="switch_view"][value="list"]:checked ~ .cartf_holder problems_holder{
	display: flex;
}

problems_holder problem_crumb_holder{
	flex:99;
}

problems_holder bread_crumbs{
	width:100%;
}

problem_item:hover{
	z-index:100;
}
problem_item fieldset{
	font-size:10pt;
	background:white;
	box-shadow: var(--box_shadow);
	padding:3px 10px;
	padding-bottom:10px;
}

problem_item fieldset :is(problem , answer){
	margin-left:20px;
}

problem_item fieldset :is(problem_text , answer_text){
	font-weight:bold;
}

problem_item fieldset answer{
	color:red;
	font-weight:bold;
}

problem_item content{
	display:flex;
	flex-direction:column;
}


problem_item fieldset[w="1"]{
	width: calc( 1.625in * 1 );
}
problem_item fieldset[w="2"]{
	width: calc( 1.625in * 2 );
}
problem_item fieldset[w="3"]{
	width: calc( 1.625in * 3 );
}
problem_item fieldset[w="4"]{
	width: calc( 1.625in * 4 );
}

problem_item refresh_button{
	border: thin solid gray;
	padding: 5px;
	border-radius:6px;
	margin:0px 2px;
	cursor:pointer;
}

problem_item refresh_problems_holder{
 /*   column-gap: 5px;*/
}


preview_item[w="2"]{
	grid-column: span 2;
}

preview_item[w="4"]{
	grid-column: span 4;
}

preview_item {
 	grid-column: span 4;
	background: white;
    display: flex;
    margin-bottom: 5px;
    box-shadow: 2px 2px 4px rgb(0 0 0 / 25%);
    border-radius: 6px;
	transition:transform 0.1s;
	cursor:pointer;
	z-index:1;
	flex-direction:column;
	position:relative;
}
preview_item:hover{
	transform:scale(1.02);
}


preview_item[w="1"]{
	grid-column: span 1;
}
[modal_id="main_modal"] [page="select_problem"] .worksheet_box_holder{
	display:grid;
	grid-template-columns: repeat(4 , 1fr);
}

[modal_id="main_modal"] [page_number="2"][show="1"]{
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(150px,200px) )
}
[modal_id="main_modal"] [page="select_standard"][page_number="2"][show="1"] {
    display: block;
}



.cartf_holder{
	border:thin solid var(--primary_gray);
	display:grid; 
	grid-template-columns:50% 50%;
	background: var(--lighter_gray);
}



[default_problem_text]:empty::after{
	content: attr(default_problem_text);
}







.view_selector_holder{
	display:flex; 
	position:absolute; 
	left:0px; 
	top:0px; 
	height:100%; 
	column-gap:1px;
}

.view_selector_holder label{
	border: thin solid transparent;
    padding: 5px;
    /* width: 30px; */
    /* height: 100%; */
    display: flex;
    align-items: center;
    justify-content: center;
	cursor:pointer;
}

.view_selector_holder label:hover{
	border: thin solid gray;
}



.view_selector_holder label img{
    height: 100%;
}



problem_item {
	display:flex;
	gap:5px;
	padding: 10px 0px;
	padding-right: 10px;
	align-items:center;
}

problem_item > *{
	box-sizing:borderbox;
	padding:3px 10px;
	display:flex;
	place-items:center;
}


problem_item problem_number{
	border: thin solid transparent;
	cursor:grab;
	border-radius:6px;
}

problem_item problem_number:hover{
	border: thin solid rgba(0,0,0,0.5);
}


problem_item:nth-child(even) {
    background: var(--accent_2);
}

preview_holder{
	counter-reset: preview_counter;
}
problems_holder{
	display:none;
	flex-direction:column;
	counter-reset: problem_counter;
}


.cartf_holder[ display_style="list"] problems_holder{
	display:flex; 
}







problem_item refresh_button > img{
	width: 20px;
}
problem_item refresh_button{
	position:relative;
	display: flex;
    align-items: center;
    justify-content: center;	
}

problem_item refresh_button fieldset{
	position:absolute;
	right:0px;
	top:100%;
	display:none;
}

problem_item refresh_button:hover fieldset{
	display:initial;
}



[cartf_type="cat"] #modify_problems_holder .holder:not([holder_id="Monday"]){
	display:none;
}

[cartf_type="car"] #modify_problems_holder .holder [cat_text]{
	display:none;
}

[cartf_type="car_dl"] #modify_problems_holder .holder [cat_text]{
	display:none;
}

[cartf_type="cat"] #modify_problems_holder .holder [car_text]{
	display:none;
}

[cartf_type="caf"] #modify_problems_holder .holder [car_text]{
	display:none;
}

[cartf_type="cat_dl"] #modify_problems_holder .holder [car_text]{
	display:none;
}






.cartf_holder .heading{
    background: var(--accent_2);
    color: #736E6E;
    display: flex;
    justify-content: center;
    padding: 5px 0px;
    font-size: 14px;
}

preview_holder preview_item {
	counter-increment: preview_counter;
}

preview_holder problem_number::before {
	content: counter(preview_counter);
}

problems_holder problem_item {
	counter-increment: problem_counter;
}

problems_holder problem_number::before {
	content: counter(problem_counter);
}



preview_item problem_crumb_holder{
	margin:2px 5px;
	display:flex;
	align-items:center;
}

preview_item problem_number{
	margin-right:5px;
}
preview_item problem_crumb_holder bread_crumbs{
	display:flex;
	align-items:center;
}

preview_item problem_name{
	font-size:10pt;	
}

[js_action="open_main_modal"]{
	width: 100%;
    display: flex;
    font-family: 'IBM Plex Sans';
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
	border:thin solid #B0B0B0;
	box-shadow: 0px 2px 4px 0px #252C6126;
	box-shadow: 0px 2px 4px 0px #8890C233;
}

button.delete_button{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	background: #EF0808;
	box-shadow: 0px 2px 4px rgba(136, 144, 194, 0.2), 0px 2px 4px rgba(37, 44, 97, 0.15);
	border-radius: 4px;
	border:none;
	cursor:pointer;
	height:30px;
	aspect-ratio:1/1;
}

button.copy_button{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	background: #F7C102;
	box-shadow: 0px 2px 4px rgba(136, 144, 194, 0.2), 0px 2px 4px rgba(37, 44, 97, 0.15);
	border-radius: 4px;
	border:none;
	cursor:pointer;
	height:30px;
	aspect-ratio:1/1;
}

button.add_problem{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	background: #68D14D;
    width: fit-content;
    padding: 10px;
    border-radius: 6px;
    margin: 10px auto;
    color: white;
    font-family: 'Roboto';
    border: thin solid green;	
	cursor:pointer;
}

button:is(:hover , :focus){
	top:-1px;
	position:relative;
}

content_holder item{
	padding: 5px 10px;
    border-radius: 5px;
 	background: var(--accent_1);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    text-align: center;
	min-width:100px;
    margin: 10px 20px;
	cursor:pointer;	
	transform:scale(1);
	transition: transform 0.25s;
}
content_holder item:hover{
	transform:scale(1.1);
	transition: transform 0.25s;
}



create_holder{
	margin-top:200px;
}
create_holder instructions{
	color:#736E6E;
    font-weight: 500;
    font-size: 11pt;
	padding:10px 0px;
	display:flex;
}


assignment_type_holder{
	display: flex; 
	flex-wrap:wrap; 
	column-gap:12px;
}

assignment_type_holder assignment_item{
	display:flex;
	flex-direction:column;
}

assignment_type_holder assignment_selector{
	width:101px; 
	height:74px; 
	position:relative; 
	border:thin solid #22659E; 
	border-radius:3px;
	cursor:pointer;
	color:white;
	display:flex;
	text-align:center;
	justify-content:center;
	align-items:center;
	color:black;
	padding: 5px;
}

input[name="assignment_type"]:checked + assignment_item assignment_selector {
	background:#68b2ff; 
}


assignment_type_holder selected_checkmark{
	display:flex; 
	justify-content:center; 
	align-items:center; 
	position:absolute; 
	top:-8px; 
	width:30px; 
	height:30px; 
	right:-8px; 
	background: #22659E; 
	border-radius:100%;
	display:none;
}

input[name="assignment_type"]{
	display:none;
}
input[name="assignment_type"]:checked + assignment_item selected_checkmark{
	display:flex;
}
input[name="assignment_type"]:not(:checked):hover + assignment_item selected_checkmark{
	display:flex;
	opacity:0.25;
}







[modal_id="main_modal"]  modal_holder {
    margin: auto;
    border: 15px solid var(--blue_surrounded_by_white);
    background: var(--gridbg);
    box-shadow: var(--box_shadow);
    border-radius: 5px;
    max-height: 80vh;
    overflow: initial;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: calc(100% - 20px);
}

[modal_id="main_modal"] content_holder {
    width: 100%;
    justify-content: center;
    align-items: center;
	display:none;
	flex-flow: wrap;
	margin: auto;
}
[modal_id="main_modal"] content_holder[show="1"] {
    display: flex;
}

[modal_id="main_modal"] content_holder[show="1"].step_2_holder{
    display: grid;
    grid-template-columns: repeat( auto-fit , minmax(200px , 1fr) );
    width: 100%;
}







[modal_id="main_modal"] modal_sub_holder{
    overflow: initial;
    overflow-y: auto;
    height: 100%;
    display: flex;
    /* width: 100%; */
    background: tan;
    background: white;
    flex-direction: column;
}

[page_id="select_problem"] .worksheet_box_holder {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: flex-start;
    /* grid-gap: clamp(10px, 54px, 61px); */
    justify-content: start;
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
    grid-gap: 10px;
	grid-auto-flow: dense;
}
.cart_holder{
    display: flex;
    flex-direction: column;
    margin: 0px 0px;
	height:100%; 
	align-items: center;
    /* background: orange; */
 	background: var(--accent_1);
    padding: 10px;
    border-radius: 10px;
	transition: background 1s , outline 1s;
	outline: 1px solid transparent;
}

.cart_holder.highlight{
	outline: 1px solid #786500;
    background: gold;
	transition: background 1s , outline 1s;
}





.customize_badge{
	width: 20px;
    height: 20px;
    border-radius: 100%;
    padding: 1px;
    display: inline-flex;
}


.cart_holder image_wrapper {
    height: 100%;
    /* background: orange; */
    display: flex;
    align-items: center;
}
.cart_holder image_wrapper2 {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: thin solid rgb(0 0 0 / 50%);
    box-shadow: 2px 2px 2px rgb(0 0 0 / 25%);
    display: flex;
    background: white;
    width: fit-content;
    display: flex;
    justify-content: center;
    padding: 5px;
    justify-content: center;
	cursor:pointer;
	outline:1px solid transparent;
	transition: transform 0.25s , outline 0.25s;
	transform: scale(1);
	padding-right:20px;	
}

.cart_holder image_wrapper2:hover{
	outline:1px solid #7f7f7f;
	transform: scale(1.05);
	transition: transform 0.25s , outline 0.25s;
}

.cart_holder image_wrapper2:hover:after{
	opacity:1;
	transition: opacity 0.5s  ease-in-out 0.5s;
}


.cart_holder image_wrapper2:after{
	content: attr(click_to_add);
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	background: rgba(0,0,0,0.5);
	color:white;
	display:flex;
	opacity:0;
	text-align:center;
	justify-content: center;
    transition: opacity 0.1s ease-in-out 0s;
    font-size: 0.8em;	
}



.cart_holder image_wrapper2:hover ~ quick_add{
	position:absolute;
	top:-15px;
	right:-15px;
    background: #61b057;
    border-radius: 100%;
    font-size: 12pt;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: .1;
    height: 30px;
    color: white;
	content:'+';
	margin-right: 5px;
    margin-top: 5px;
	box-shadow:var(--box_shadow);
	aspect-ratio:1;
}






[modal_id="main_modal"][customize] top_holder div[js_action][go_to_page="customize_problem"]{
	display:none;
}

[modal_id="main_modal"][customize="1"] top_holder div[js_action][go_to_page="customize_problem"]{
	display:flex;
}



descriptor_wrapper {
    padding-bottom: 5px;
    font-family: 'IBM Plex Sans';
    font-size: 11pt;
	text-align:center;
}



image_wrapper2:hover quick_add_problem{
    right: 0;
}

quick_add_problem {
    position: absolute;
    background: #a2c9ef;
    right: -100%;
    bottom: 0;
    margin: 0px 2px 3px 0;
    /* padding: 5px; */
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    border-radius: 100%;
    font-size: 14pt;
	transition: right .12s;
}