body[modal] {
    overflow: hidden;
}
[name="subject_type"]{display:none;}

.label_holder{
	display:flex;
	column-gap: 10px;
	background: linear-gradient(#f3f5fc,#f0f2fa);
	justify-content:center;
	border: thin solid #ebedf5;
	/* padding: 10px 20px; */
	align-items: center;
	border-radius: 30px;
	margin-bottom: 30px;
}
.label_holder label{
	cursor:pointer;
	justify-content: center;
	white-space: nowrap;
	margin-bottom: initial;
	display: flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 30px;
	border: thin solid rgba(0,0,0,0);
	color: #0c5bdc;
}


[value="same_subject"]:checked ~ .label_holder [for="same_subject"] ,
[value="different_subject"]:checked ~ .label_holder [for="different_subject"] 
{
	border: thin solid #5aa0f6;
	background:linear-gradient(#f5f7fc,#e3ecf9);
	color: #0c5bdc;
}

.form-group input , .form-group select{background: white;margin: initial;border: thin solid #dadee9;font-size: 1.05em;border-radius: 10px;}
.form-group fieldset{/* background: white; */margin: initial;border: none;margin-bottom: 10px;}

[value="different_subject"]:checked ~ .form-group .day_holders{
	background: #ffffff;
	padding: 10px;
	border-radius: 20px;
	corner-shape: squircle;
	border: thin solid #e1e5f1;
	box-shadow: 0px 0px 10px 0px rgb(218 222 233);
}



[value="same_subject"]:checked ~ .form-group .day_holders input , 
.form-group select{
	box-shadow: 0px 0px 10px 0px rgb(218 222 233);
}

.form-group .day_holders legend{
    margin-left: 5px;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    font-size: 10pt;
    color: #55575d;
}




.day-card { 
	border: 1px solid #ddd; 
	padding: 15px; 
	margin-bottom: 20px; 
	border-radius: 8px; 
}
.visually-hidden {
	display: none !important;
	visibility: hidden;
}
.form-container {
	margin: 20px auto;
    font-family: sans-serif;
    display: flex;
    justify-content: center; 
}
.form-group { 
	margin-bottom: 15px; 
}
label { display: block; margin-bottom: 5px; font-weight: bold; }
input, select { width: 100%; padding: 8px; box-sizing: border-box; }
button { 
	background: #007bff; 
	color: white; 
	padding: 15px 15px; 
	border: none; 
	cursor: pointer; 
	width: 100%; 
	border-radius:15px;
	corner-shape:squircle;
	margin-top:25px;
	box-shadow: 0px 0px 10px 0px rgb(218 222 233);
}



.create_paragraphs_holder{
	border: thin solid #e1e5f1;
	border-radius: 50px;
	corner-shape: squircle;
	padding: 20px;
	width: fit-content;
}

.form-group label{
	font-size: 13pt;
	color: #232939;
}




.cartf_holder[problem_count="0"]{
	display:none;
}





.passages{
	display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.passages p{
	 margin: 0px 0px 1em;
}
.paragraph_topic{
	font-weight:bold;
	
}
paragraph_topic_display{
	font-weight:bold;
}

.day-card{
	background: rgba(255,255,255,0.7); 
	backdrop-filter: blur(10px); 
	border-radius: 15px; 
	border: 1px solid rgba(255,255,255,0.3); 
	padding: 20px; 
	margin-bottom: 20px; 
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);	
	cursor:pointer;
}
.day-card:hover {
    scale: 1.01;
    border: thin solid black;
    transition: 0.2s;
}

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[page="review_paragraphs"] {
	max-width:6in;
    margin: 0 auto;
    padding: 32px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

content_holder[page="review_paragraphs"] p {
    font-size: 17px;
    line-height: 1.8;
    color: #2c3e50;
    margin-bottom: 24px;
    text-align: justify;
    text-justify: inter-word;
	text-indent: 5ch;
}


content_holder[page="review_paragraphs"] p:last-of-type {
    margin-bottom: 0;
    padding-bottom: 20px;
}

content_holder[page]{
	display:none;
}


[name="page_selector"][value="paragraphs"]:checked ~ content_holder[page="review_paragraphs"] , [name="page_selector"][value="questions"]:checked ~ content_holder[page="review_questions"]{
    display: flex;
    flex-direction: column;
    max-width: 6in;
    flex-wrap: nowrap;
    justify-content: flex-start;
	height: fit-content;
}

.question {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
    transition: border-color 0.2s ease;
}

.question:hover {
    border-color: #4a90e2;
}

.question-text {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.5;
}

.question-text strong {
    color: #4a90e2;
    margin-right: 4px;
    font-weight: 700;
}

.question-text em {
    color: #888;
    font-size: 13px;
    font-weight: 400;
}

.correct-answer {
    background: #f0f9f4;
    border-left: 2px solid #28a745;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 10px 0 8px 0;
    color: #1e7e34;
    font-size: 14px;
}

.correct-answer strong {
    color: #155724;
    font-weight: 600;
}

.wrong-answers {
    font-weight: 600;
    color: #666;
    margin: 10px 0 6px 0;
    font-size: 13px;
}

.wrong-answers + ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wrong-answers + ul li {
    background: #fff;
    border: 1px solid #f5c6cb;
    padding: 6px 12px;
    margin-bottom: 5px;
    border-radius: 4px;
    color: #721c24;
    font-size: 13px;
    transition: background 0.15s ease;
}

.wrong-answers + ul li:hover {
    background: #fff5f5;
    border-color: #f1aeb5;
}


[modal_id="main_modal"] top_holder div[js_action][active][selected] {
	background: #c2c2c2;
    font-weight: bold;
}

#label_holder [for]{
	cursor:pointer;
	transition:0.1s;
}
#label_holder [for]:hover{
	cursor:pointer;
	scale:1.05;
}

#selector_paragraphs:checked ~ #label_holder [for="selector_paragraphs"] ,
#selector_questions:checked ~ #label_holder [for="selector_questions"]{
	text-decoration: underline;
}

	
	



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



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

top_holder [go_to_page]{
	border-bottom:3px solid rgba(0,0,0,0);
}

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



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




[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{
    /* 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;
}

problem_item details{
	box-shadow: var(--box_shadow);
	border-radius:5px;
}
problem_item details[open] summary{
	background:#007bff;
	color:white;
}
problem_item details[open]{
	outline: thin solid #007bff;
}
problem_item summary{
	padding: 5px 10px;
	background: white;
	transition: transform 0.1s, background 0.1s;
}
problem_item summary:hover{
	transform: scale(1.01);
	background: #f9f9f9;
}

problem_item fieldset content{
	display:flex;
	flex-direction:column;
	row-gap: 10px;
}
problem_item fieldset{
	margin:0px 0px;
}
problem_item fieldset content .line{
	display:flex;
	justify-content:center;
	column-gap: 10px;
	border-bottom: thin solid #D9D9D9;
	padding:5px 0px;
}
problem_item fieldset content .line input ,  problem_item fieldset content .line select{
	border:thin solid #e0e0e0;
	border-radius:3px;
	text-align:center;
	width:100px;
}


[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: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; 
}

input[name="assignment_type"]{
	display:none;
}

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"]:checked + assignment_item selected_checkmark{
	display:flex;
}
input[name="assignment_type"]:not(:checked):hover + assignment_item selected_checkmark{
	display:flex;
	opacity:0.25;
}


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

#select_assignment_cas_ws:checked ~ fieldset [for="select_assignment_cas_ws"] selected_checkmark{
	display:flex;
}
#select_assignment_cas_dl:checked ~ fieldset [for="select_assignment_cas_dl"] selected_checkmark{
	display:flex;
}	


#select_assignment_cas_ws:not(:checked) ~ fieldset [for="select_assignment_cas_ws"] assignment_selector:hover selected_checkmark{
	display:flex;
	opacity:0.25;
}

#select_assignment_cas_dl:not(:checked) ~ fieldset [for="select_assignment_cas_dl"] assignment_selector:hover 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;
	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;
}



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