.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
*{
	box-sizing: border-box;	
	padding:0px;
	margin:0px;
}

.revert_all{
	all:revert;
}

.no_line{
	text-decoration:none;
}

html {
  scroll-behavior: smooth;
  font-family: 'IBM Plex Sans', sans-serif;
}
:root {
    --imageX:34.5;
    --imageY:30;
	
	
	--ccBlue2: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);


	--primary_blue: tan;
	--text_over_primary_blue: pink;
	--secondary_blue: green;
	--dark_primary:purple;
	--darker_blue:#438fd7;
	--text_shadow_in_primary_blue: rgb(0 0 0) 0px 0px 1pt;
	--blue_surrounded_by_white: yellow;
	--blue_over_white: linear-gradient(180deg, rgb(229 240 251) 5% , rgb(216 232 248) 95% , #a2c9ef 90%);
	--text_over_secondary_blue: #314a64;
	--border_around_primary_blue: 10px solid violet;
	--border_around_secondary_blue: 10px solid aqua;
	
	
	--primary_blue: #5e7894;
	--text_over_primary_blue: white;
	--secondary_blue: #d6e9fc;
	--dark_primary:#3d4e5f;
	--darker_blue:#438fd7;
	--text_shadow_in_primary_blue: rgb(0 0 0) 0px 0px 1pt;
	--blue_surrounded_by_white: #a2c9ef;
	--blue_over_white: linear-gradient(180deg, rgb(229 240 251) 5% , rgb(216 232 248) 95% , #a2c9ef 90%);
	--text_over_secondary_blue: #314a64;
	--border_around_primary_blue: thin solid white;
	--border_around_secondary_blue: thin solid #67829e;
	--brighter_blue: #76bef5;
	
	--primary_blue: #22659E;
	--primary_blue: #306693;
	--text_over_primary_blue: white;
	--secondary_blue: #d6e9fc;
	--dark_primary:#3d4e5f;
	--darker_blue:#438fd7;
	--text_shadow_in_primary_blue: rgb(0 0 0) 0px 0px 1pt;
	--blue_surrounded_by_white: #a2c9ef;
	--blue_over_white: linear-gradient(180deg, rgb(229 240 251) 5% , rgb(216 232 248) 95% , #a2c9ef 90%);
	--text_over_secondary_blue: #314a64;
	--border_around_primary_blue: thin solid white;
	--border_around_secondary_blue: thin solid #67829e;
	--brighter_blue: #76bef5;
	--primary_gray: #B8B8B8;
	--lighter_gray: #ECECEC;
	
	
	--accent_1: #ebebeb;
	--accent_2: #ECECEC;
	--accent_3: #e9e9e9;
	--accent_4: #F6F6F6;
	--accent_5: #D9D9D9;
	--accent_6: #6F6D6D;



	
	--text_over_accent_5: #736e6e;
	--text_inside_striped_table: #3d3d3d;
	

	
	
	--sans_1: 'Roboto', sans-serif;
	--sans_2: 'Tahoma', sans-serif;


	--kindergarten_color: #5fc26a;
	--first_grade_color: #68CCC7;
	--second_grade_color: #96C1FA;
	--third_grade_color: #AEE36D;
	--fourth_grade_color: #FFD182;
	--fifth_grade_color: #FF7373;
	--sixth_grade_color: #C089F5;
	--seventh_grade_color: #FFD573;
	--eighth_grade_color: #E6CF6A;
	
	--flash_card_color: #FCDC68;
	--one_atta_time_color: #fc8d83;
	--create_new_sheet_color: #00c631;
	--distance_learning_color: #A7CC8F;
	--share_color: #D9A0FA;
	--customize_color: #D9A0FA;
	
	--correct_color:#a7db5e;
	--wrong_color:#db5e5e;
	
	--checkedOnly:yellow;
	--needs_review:#5cc3ff;
	
	--correct_color:#5DDA3E;
	--wrong_color:#EF0808;
	
	--checkedOnly:#F6C102;
	--needs_review:#5cc3ff;
	
	
	--box_shadow: 2px 2px 4px rgba(0,0,0,0.25);
}

[mobile_only]{
	display:none;
}


[grid_row]{
	display:contents;
}

grid_row{
	display:contents;
}

gridRow[mobile_only]{
	display:none;
}
.sheet_list_style{
	border:thin solid black;
	border-radius:16px;
	display:inline-flex;
	margin-top:50px;
	overflow:hidden;
}
.sheet_list_style div{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:2px 10px;
}
.sheet_list_style img{
	height: 20px;
	aspect-ratio:1;
	transition: transform 0.1s;
}


.icon_holder{
    display: flex;
    align-items: center;
    justify-content: center;
}

icon.account_icon{
	background: url(/code_site/icons/account_icons.svg?1);
	width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
}


.radio_label_1 label input{
	display:none;
}

.radio_label_1 label text{
	border:thin solid var(--accent_5);
	border-radius:5px;
	background:white;
	padding:2px 10px;
	cursor:pointer;
	display:flex;
}
.radio_label_1 label input:checked + text{
	border:thin solid var(--accent_5);
	border-radius:5px;
	background:#d2d6da;
	color:black;
}






menu_item_holder icon{
	background: url(/code_site/icons/mobile_icons.svg);
	width:30px;
	height:30px;
}


audio_holder{
    display: flex;
    margin: auto;
    flex-direction: column;
    /* width: 100px; */
    justify-content: center;
    align-items: center;
    width: fit-content;
}


.audio_play_button_holder{
	display: flex;
    width: 70%;
    justify-content: center;
    width: 50px;
    height: 50px;	
	border-radius:100%;
	cursor:pointer;
	transition: transform 0.25s;
	box-shadow: var(--box_shadow);
}
.audio_play_button_holder:hover{
	transform:scale(1.2);
	transform-origin: 50% 50%;
}

.audio_play_button_holder img{
	left: 10%;
    position: relative;
	width:70%;
}
.audio_play_button_holder:hover img{
}

.audio_sound_options_holder{
	display:flex; 
	column-gap:10px;
	opacity:0;
	transition: opacity 0.5s;
	pointer-events:none;
}

audio_holder:hover .audio_sound_options_holder{
	pointer-events:initial;
	opacity:1;
}


.sheet_list_style div:hover{
	background:black;
}
.sheet_list_style div:hover img{
	transform: scale( 1.1);
	filter: brightness(0) invert(1);
}
.sheet_list_style div[selected]{
	background:gray;
}
.sheet_list_style div[selected] img{
	filter: brightness(0) invert(1);
}



star{
	background: url(/code_site/icons/svg_site_images/icon_favorite.svg);
    width: 22px;
    height: 21px;
    display: inline-block;
    background-repeat: no-repeat;
    cursor: pointer;
	user-select: none;	
}


.activity_selector_item{
	color:white;
	padding-right:10px;
	display:flex;
	align-items:center;
	padding:2px 10px;
	padding-left:5px;
}
.activity_selector_item:hover{
	transform:scale(1.05);
}

.activity_selector_item img{
	width:20px;
	aspect-ratio:1;
}

.activity_selector_item span{
	margin-left:10px;
	text-decoration:none;
	white-space:nowrap;
}



.sheet_overall_holder[image_size="1"] .worksheet_box_holder{
    grid-template-columns: repeat(auto-fill, minmax(min(270px,100%),1fr));	
}
.sheet_overall_holder[image_size="1"] worksheet_item{
    width:clamp(270px , 100% , 310px);
}
.sheet_overall_holder[image_size="2"] .worksheet_box_holder{
    grid-template-columns: repeat(auto-fill, minmax(min(320px,100%),1fr));	
}
.sheet_overall_holder[image_size="2"] worksheet_item{
    width:clamp(320px , 100% , 360px);
}
.sheet_overall_holder[image_size="3"] .worksheet_box_holder{
    grid-template-columns: repeat(auto-fill, minmax(min(370px,100%),1fr));	
}
.sheet_overall_holder[image_size="3"] worksheet_item{
   width:clamp(370px , 100% , 410px);
}
.sheet_overall_holder[image_size="4"] .worksheet_box_holder{
    grid-template-columns: repeat(auto-fill, minmax(min(420px,100%),1fr));	
}
.sheet_overall_holder[image_size="4"] worksheet_item{
   width:clamp(420px , 100% , 460px);
}
.sheet_overall_holder[image_size="5"] .worksheet_box_holder{
    grid-template-columns: repeat(auto-fill, minmax(min(470px,100%),1fr));	
}
.sheet_overall_holder[image_size="5"] worksheet_item{
   width:clamp(470px , 100% , 510px);
}
.sheet_overall_holder[image_size="6"] .worksheet_box_holder{
    grid-template-columns: repeat(auto-fill, minmax(min(520px,100%),1fr));	
}
.sheet_overall_holder[image_size="6"] worksheet_item{
   width:clamp(520px , 100% , 560px);
}
.sheet_overall_holder[image_size="7"] .worksheet_box_holder{
    grid-template-columns: repeat(auto-fill, minmax(min(570px,100%),1fr));	
}
.sheet_overall_holder[image_size="7"] worksheet_item{
   width:clamp(570px , 100% , 610px);
}




[name="image_size"]{
  cursor:pointer;
 }


.sheet_overall_holder{
	width:100%; 
	margin:auto; 
	display: flex; 
	flex-direction: column; 
	align-items: center;
}




star[active="0"]{
	background: url(/code_site/icons/svg_site_images/icon_favorite_empty.svg);
    background-repeat: no-repeat;
}


star:hover{
	transform:scale(1.1);
}

worksheet_item [modal_id="magnified"]{
	background:rgb(227 224 225 / 75%); 
	width: 34px; 
	height:34px;  
	display:flex; 
	justify-content:center; 
	align-items:center; 
	border-radius:100px; 
	pointer-events:initial; 
	cursor:pointer; 
	z-index:100; 
	box-shadow: var(--box_shadow);
}
worksheet_item [modal_id="magnified"]:hover{
	transform:scale(1.2); 
	transition: transform 0.1s;
}
worksheet_item [modal_id="magnified"] img{
	width:22px;
	transition: width 0.1s;
}

[modal_id="magnified"] modal_holder {
    width: auto;
}


.page_title{
	padding:10px; 
	font-family:'roboto'; 
	display:flex; 
	justify-content:center; 
	text-align:center;
	text-transform: capitalize;
}
.page_title:empty{
	display:none;
}


create_holder[assignment_type] [show_on]{
	display: none;
}

create_holder[assignment_type="ws"] [show_on~="-ws"]{
	display: revert;
}

create_holder[assignment_type="dl"] [show_on~="-dl"]{
	display: revert;
}

create_holder[assignment_type="car"] [show_on~="-car"]{
	display: revert;
}

create_holder[assignment_type="cat"] [show_on~="-cat"]{
	display: revert;
}

create_holder[assignment_type="caf"] [show_on~="-caf"]{
	display: revert;
}

create_holder[assignment_type="car_dl"] [show_on~="-car_dl"]{
	display: revert;
}

create_holder[assignment_type="cat_dl"] [show_on~="-cat_dl"]{
	display: revert;
}


.holder_type_1{
    margin: auto;
    padding: 0px;
    position: relative;
    width: 100%;	
	display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    box-shadow: 0px 8px 8px rgb(0 0 0 / 35%);
    border-radius: 6px;
	padding:15pt;
}


.holder_type_2{
    border: var(--border_around_secondary_blue);
    box-shadow: 0px 2px 3px rgb(0 0 0 / 50%);
    border-radius: 5px;	
	overflow: hidden;
    display: grid;
    grid-template-columns: max-content auto;
    width: auto;
    margin: auto auto;
    background-color: var(--accent_4);	
}


.holder_type_3{
    margin: auto;
    padding: 0px;
    position: relative;
    width: 100%;	
	display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    box-shadow: 0px 8px 8px rgb(0 0 0 / 35%);
    border-radius: 6px;
		overflow:hidden;
	
}



.holder_type_4{
    margin: auto;
    padding: 0px;
    position: relative;
    width: fit-content;	
	display: flex;
    flex-direction: column;
    	
    background-color: var(--accent_4);
    border: 1px solid #B0B0B0;
    box-shadow: 0px 8px 8px rgb(0 0 0 / 35%);
    border-radius: 6px;
	overflow:hidden;
}




.holder_type_5{
    margin: 10pt auto;
    padding: 10pt;
    position: relative;
    width: fit-content;	
	display: flex;
    flex-direction: column;
    	
    background-color: var(--accent_4);
    border: 1px solid #B0B0B0;
    box-shadow: 0px 8px 8px rgb(0 0 0 / 35%);
    border-radius: 6px;
	overflow:hidden;
}





.holder_type_6{
    margin: 10pt auto;
    padding: 0pt;
    position: relative;
    width: fit-content;
	min-width:400px;
	display: flex;
    flex-direction: column;
    	
    background-color: var(--accent_4);
    border: 1px solid #B0B0B0;
    box-shadow: 0px 8px 8px rgb(0 0 0 / 35%);
    border-radius: 6px;
	overflow:hidden;
	justify-content:center;
	align-items:center;
}

.holder_type_6 > heading{
    padding: 10pt;
	background:white;
	border-bottom: thin solid var(--accent_6);
	width:100%;
	font-weight:bold;
}


.holder_type_6 > content{
    padding: 10pt;
	row-gap:10pt;
	display:flex;
	flex-direction:column;
}












.holder_type_7{
    margin: 10pt auto;
    padding: 0pt;
    position: relative;
    width: fit-content;
	min-width:400px;
	display: flex;
    flex-direction: column;
    	
    background-color: white;
    border: 1px solid #B0B0B0;
    box-shadow: 0px 8px 8px rgb(0 0 0 / 35%);
    border-radius: 6px;
	overflow:hidden;
	justify-content:center;
	align-items:center;
}

.holder_type_7 > heading{
    padding: 10pt;
	background:white;
	border-bottom: thin solid #B8B8B8;
	width:100%;
	font-weight:bold;
	font-size:11pt;
}


.holder_type_7 > content{
    padding: 10pt;
	row-gap:10pt;
	display:flex;
	flex-direction:column;
}







.holder_type_8{
    margin: 20pt auto;
    padding: 0px;
    position: relative;
    width: 50%;
	display: flex;
    flex-direction: column;
    	
    background-color: #c8e1fb;
    border: 1px solid #B0B0B0;
    box-shadow: 0px 8px 8px rgb(0 0 0 / 35%);
    border-radius: 6px;
	overflow:hidden;
}












.holder_type_9{
    margin: 10pt auto;
    padding: 0pt;
    position: relative;
	display: flex;
    flex-direction: column;
    	
    background-color: white;
    border: 1px solid #B0B0B0;
    box-shadow: 0px 8px 8px rgb(0 0 0 / 35%);
    border-radius: 6px;
	overflow:hidden;
	align-items:center;
	width:100%;
}

.holder_type_9 > heading{
    padding: 10pt;
	background:white;
	border-bottom: thin solid #B8B8B8;
	width:100%;
	font-weight:bold;
	font-size:11pt;
}


.holder_type_9 > content{
    padding: 10pt;
	row-gap:10pt;
	display:flex;
	flex-direction:column;
	width:100%;
}


















.selectable_classes{
	display:flex;
	gap:5pt;
	flex-wrap:wrap;
}




.fieldset_type_1 fieldset , .customize_holder.fieldset_type_1 fieldset , fieldset.type_1{
    padding: revert;
    border-radius: revert;
    margin: revert;
    background: revert;
    box-shadow: revert;

    padding: 5px 10px 8px 10px;
    border-radius: 5px;
    margin: 5px;
    background: rgb(255 255 255 / 25%);
    border: var(--border_around_secondary_blue);
    box-shadow: 1px 1px 1px rgb(0 0 0 / 25%);
}
.fieldset_type_1 fieldset legend , .customize_holder.fieldset_type_1 fieldset legend , fieldset.type_1 legend{
	font-size:0.85rem;
	padding:0px 5px;
	margin-left:0px;
	text-transform: capitalize; 
    font-family: var(--sans_1);
    font-weight: bold;
    letter-spacing: .1ch;	
}
.fieldset_type_1 fieldset :is( input[type="text"] , select)  , .customize_holder.fieldset_type_1 fieldset :is( input[type="text"] , select)  , fieldset.type_1 :is( input[type="text"] , select){
	background:white;
}



.customize_holder fieldset.type_12{
    padding: revert;
    border-radius: revert;
    margin: revert;
    background: revert;
    box-shadow: revert;

    padding: 5px 10px 8px 10px;
    border-radius: 5px;
    margin: 5px;
    background: rgb(255 255 255 / 25%);
    border: none;
    box-shadow: none;
}
.customize_holder fieldset.type_12 legend{
	font-size:8pt;
	padding:0px 5px;
	margin-left:0px;
	text-transform: capitalize; 
    font-family: var(--sans_1);
    font-weight: bold;
    letter-spacing: .1ch;	
}
.customize_holder fieldset.type_12 :is( input[type="text"] , select){
	background:white;
}



.fieldset_type_3 fieldset {
    padding: revert;
    border-radius: revert;
    margin: revert;
    background: revert;
    box-shadow: revert;

    padding: 5px 10px 8px 10px;
    margin: 5px;
    border: none;
	display:flex;
	align-items:center;
	justify-content:start;
    box-shadow: none;
}
.fieldset_type_3 fieldset legend{
	font-size:0.85rem;
	padding:0px 5px;
	margin-left:0px;
	text-transform: capitalize; 
    font-family: var(--sans_1);
    font-weight: bold;
    letter-spacing: .1ch;
	color: var(--accent_6);
}
.fieldset_type_3 fieldset :is( input[type="text"] , select) {
	background:white;
}






.fieldset_type_4 fieldset {
    padding: revert;
    border-radius: revert;
    margin: revert;
    background: revert;
    box-shadow: revert;

    padding: 5px 10px 8px 10px;
    margin: 5px;
    border: none;
	display:flex;
	align-items:center;
	justify-content:start;
    box-shadow: none;
}
.fieldset_type_4 fieldset legend{
	font-size:0.85rem;
	padding:0px 0px;
	margin-left:0px;
	text-transform: capitalize; 
    font-family: var(--sans_1);
    font-weight: bold;
	color: black;
}

.fieldset_type_4 fieldset :is( input[type="text"] , select) {
	background:white;
}









.fieldset_type_5 fieldset {
    padding: revert;
    border-radius: revert;
    margin: revert;
    background: revert;
    box-shadow: revert;

    border: none;
    display:flex;
    align-items:center;
    justify-content:start;
    /* background:orange; */
    color: var(--accent_6);
    box-shadow: none;
    padding: revert;
}
.fieldset_type_5 fieldset legend{
	font-size: 9pt;
	padding:0px 0px;
	margin-left:0px;
	text-transform: capitalize;
	font-family: var(--sans_1);
	font-weight: bold;
	color: var(--accent_6);
}
.fieldset_type_5 fieldset content{
	padding:5px;
	padding-left: 20px;
	font-size: 11pt;
	width:100%;
}

.fieldset_type_5 fieldset :is( input[type="text"] , select) {
	background:white;
}





.fieldset_type_6 fieldset {
    padding: revert;
    border-radius: revert;
    margin: revert;
    background: revert;
    box-shadow: revert;

    border: none;
    display:flex;
    align-items:center;
    justify-content:start;
    /* background:orange; */
    color: var(--accent_6);
}
.fieldset_type_6 fieldset legend{
	font-size: 9pt;
	padding:0px 0px;
	margin-left:0px;
	text-transform: capitalize;
	font-family: var(--sans_1);
	font-weight: bold;
	color: black;
}
.fieldset_type_6 fieldset content{
	padding:5px;
	padding-left: 0px;
	font-size: 11pt;
	width:100%;
}


.fieldset_type_6 fieldset :is( input[type="text"] , select) {
	background:white;
}









.fieldset_type_7 fieldset {
    padding: revert;
    border-radius: revert;
    margin: revert;
    background: revert;
    box-shadow: revert;

    border: none;
    display:flex;
    align-items:center;
    justify-content:start;
    /* background:orange; */
    color: var(--accent_6);
    box-shadow: none;
}
.fieldset_type_7 fieldset legend{
	font-size: 9pt;
	padding:0px 0px;
	margin-left:0px;
	text-transform: capitalize;
	font-family: var(--sans_1);
	font-weight: bold;
	color: black;
	margin-bottom:5pt;
}
.fieldset_type_7 fieldset content{
	padding:5px;
	padding-left: 0px;
	font-size: 11pt;
	width:100%;
	padding-left:10pt;
	display:block;
}














.fieldset_type_8 fieldset{
    padding: revert;
    border-radius: revert;
    margin: revert;
    background: revert;
    box-shadow: revert;

	border:none;
	padding-left:10px;
	padding: 10px 5px;
	padding-top: 0px;
	font-size: 10pt;
	margin-bottom:10pt;
    box-shadow: none;
}

.fieldset_type_8 fieldset legend{
	font-weight: bold;
	font-size: 10pt;
	color: rgba(111, 109, 109, 1);
	margin-bottom: 10px;
	text-transform: capitalize;
	margin-bottom:4pt;
}


.fieldset_type_8 fieldset content{
	font-size: 11pt;
	width:100%;
	padding-left:15pt;
	display:block;
}





.fieldset_type_9 fieldset{
    padding: revert;
    border-radius: revert;
    margin: revert;
    background: revert;
    box-shadow: revert;

    border: none;
    display: flex;
    align-items: center;
    justify-content: start;
    color: var(--accent_6);
    border-top: thin solid #b0b0b0;
    box-shadow: none;
}

.fieldset_type_9 fieldset legend{
    font-size: 9pt;
    padding: 0px 0px;
    text-transform: capitalize;
    font-family: var(--sans_1);
    font-weight: bold;
    color: black;
    margin-bottom: 5pt;
    margin-right: 10pt;
    padding-right: 10pt;
}


.fieldset_type_9 fieldset content{
	font-size: 11pt;
	width:100%;
	padding-left:15pt;
	display:block;
}





.fieldset_type_10 fieldset{
    padding: revert;
    border-radius: revert;
    margin: revert;
    background: revert;
    box-shadow: revert;

    border: none;
    display: flex;
    align-items: center;
    justify-content: start;
    color: var(--accent_6);
    box-shadow: none;
}

.fieldset_type_10 fieldset legend{
    font-size: 11pt;
    padding: 0px 0px;
    text-transform: capitalize;
    font-family: var(--sans_1);
    font-weight: 500;
    color: black;
    padding: 10pt 10pt;
}


.fieldset_type_10 fieldset content{
	font-size: 11pt;
	width:100%;
	display:block;
}





.fieldset_type_11 fieldset{
    padding: revert;
    border-radius: revert;
    margin: revert;
    background: revert;
    box-shadow: revert;

    border: none;
    display: flex;
    align-items: center;
    justify-content: start;
    color: revert;
    box-shadow: none;
    padding: 0px;
    padding-bottom: 10pt;	
}

.fieldset_type_11 fieldset legend{
font-size: 11pt;
    padding: 0px 0px;
    text-transform: capitalize;
    font-family: var(--sans_1);
    font-weight: 800;
    color: black;
    padding: 10pt 10pt;
    padding: 0px;
    font-size: 8pt;
}

.fieldset_type_11 fieldset content{
	font-size: 11pt;
	width:100%;
	display:block;
	padding-left:20px;
}




fieldset content.flex_c3{
	display:flex;
	flex-direction:column;
	row-gap:3pt;
}








input[toggle][value="1"] ~ :is([active_item] , [inactive_item]){
	display:none;
}

input[toggle][value="1"]:checked ~ [active_item]{
	display:revert;
}

input[toggle][value="1"]:not(:checked) ~ [inactive_item]{
	display:revert;
}







.hide{
	display:none;
}
.branch2 a{
	color: var(--text_over_primary_blue);
	text-decoration:none;
}

details > summary::marker{
display:none;
}
details > summary {
	list-style: none;
	cursor:pointer;
	transition: background-color 0.25s ease;
	user-select:none;
}




details.sub_menu_type_1 summary{
	background-color: transparent;
	padding: 5px 10px;
}

 details summary arrow{
   margin-left: 20px;
 }

details.sub_menu_type_1  summary:hover , details.sub_menu_type_1[open]  summary{
	background-color: var(--accent_4);
}

details.sub_menu_type_1 div{
    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%;
    left: 0%;
    box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 25%);
	min-width: 100%;
}

details.sub_menu_type_1 li{
    padding: 5px 0px;
}

details.sub_menu_type_1 li a{
    color:black;
	text-decoration:none;
}

.footer{
	text-align:center;
	border-bottom:none;
}
.footer .branch2{
	display: flex;
    margin: auto;
    width: fit-content;
}
.branch2 item{
	padding:2px 10px;
}


[data-sheet_selected="all"]{
	display:none;	
}



#news_holder img{
	max-width:100%;
}

tab_display_holder :is(.gridTable, .gridTable2){
	border:none;
	box-shadow:none;
}


.ad_display_Holder{
	margin: 0px auto;
}

.ad_display_Holder fieldset{
	background:initial;
	padding:2px 1px 1px 1px;
	margin:2px;
	width:fit-content;
	box-shadow: -1px 1px white;
	border:thin solid black;
}
.ad_display_Holder fieldset legend{
	margin-left:10px;
	font-size:.6em;
}

.submitButtonHolder{
	justify-content: center;
	display: flex;
}

.headerContent .ad_display_Holder fieldset{
	box-shadow: initial;
	border:var(--border_around_primary_blue);
}

.headerContent .ad_display_Holder{
	margin: initial;
}


.menu[user_logged_in="0"] details[logged_in="0"]{
	display:none;
}
.menu[user_logged_in="1"] teacher_info{
	display:initial;
}


fieldset.blue_fieldset{
	background: var(--secondary_blue); 
	border: var(--border_around_secondary_blue);
}
:is(fieldset.blue_fieldset , fieldset.middle_notice , fieldset.middle_legend) > legend{
	background: white; 
	border: thin solid black;
	padding:2px 10px;
	border-radius:5px;
	color:black;
}

fieldset.middle_legend > legend{
	margin-left:auto;
	margin-right:auto;
	padding:4px 30px;
}

ul {
   list-style-position: inside;
}

fieldset.middle_notice{
    background: rgb(255 85 85);
    border: 3px solid #ffeb00;
    width: fit-content;
    font-size: 1.1em;
    color:white;
    text-align: center;
	margin:20px;
	
	background: rgb(255 229 229);
    border: 3px solid #c22626;
    width: fit-content;
    font-size: 1.1em;
    color: red;
    text-align: center;
    margin: 20px;	
}
fieldset.middle_notice legend{
	margin-left:auto;
	margin-right:auto;
	padding:4px 30px;
}

ul.links_inside_fieldset{
	list-style-type: none;
}

ul.links_inside_fieldset li{
	margin:2px 0px;
	mar
}

ul.links_inside_fieldset a{
	color: #314a64;
    text-decoration: unset;
    font-family: var(--sans_1);
    font-weight: bold;
    font-size: 0.8rem;	
}

ul.links_inside_fieldset a:hover{
    text-decoration: underline;
}

body[modal] {
    overflow: hidden;
}

generic_modal{
    background: rgba(255,255,255,0);
    display: none;	
}
generic_modal[show]{
	width:100vw;
	height:100vh;
	position:fixed;
	left:0px;
	top:0px;
	background: rgba(255,255,255,0.85);
	background: #0009;
	z-index: 10000;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background 1.5s;
	backdrop-filter: blur(10px);
}
modal_holder{
	margin: auto;
	width: fit-content;
	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;
	max-width: calc(100% - 20px);
}
modal_sub_holder{
    overflow: initial;
    overflow-y: auto;
	background:white;
	height: 100%;
}
generic_modal close_button{
	position: absolute;
	top: -23px;
	right: -23px;
	z-index: 10000000;
	display: flex;
	border-radius: 20px;
	width: 25px;
	height: 25px;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color:white;
	cursor:pointer;
	/* margin-right: -30px; */
	/* margin-top: -32px; */
	/* font-size: 3vmax; */
	background: #ff2727;
	transition: transform 0.1s;
}
generic_modal close_button:hover {
	transform: scale(1.2);
}





label[toggle]{
	display:inline-flex;
	align-items:center;
	column-gap:5pt;
	padding:2pt 4pt;
}






.toggle_type_0 input:checked ~ toggle toggle_ball {
	right:1px;
}

.toggle_type_0 toggle {
    display: inline-flex;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    align-items: center;
    width: 30px;
    height: 18px;
    background: #D9D9D9;
    align-items: center;
}

.toggle_type_0 input ~ toggle toggle_ball {
    position: absolute;
    right: calc(100% - 13px);
    width: 13px;
    height: 13px;
    background: #22659E;
    content: " ";
    border-radius: 10px;
    display: block;
    transition: right .1s linear;
}







.toggle_type_1 input:checked ~ toggle toggle_ball {
	right:1px;
}
.toggle_type_1 input:checked ~ toggle{
    background-color: #00aad7;
    background-color: #4ebe62;
}
.toggle_type_1 toggle {
    display: inline-flex;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    align-items: center;
    width: 30px;
    height: 18px;
    background-color: red;
    align-items: center;
	transition: background-color .1s linear;
}

.toggle_type_1 input ~ toggle toggle_ball {
    position: absolute;
    right: calc(100% - 14px);
    width: 13px;
    height: 13px;
    background: white;
    content: " ";
    border-radius: 10px;
    display: block;
    transition: right .1s linear;
}











label check_button{
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.check_button_type_1 label check_button{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #B2B0B0;
    border-radius: 6px;
    padding: 1px 10px;
	cursor:pointer;
}

.check_button_type_1 label input:checked + check_button {
	background: #000000;
    border-radius: 6px;
    color: white;
    border: 1px solid white;
}



.sub_description{
	width: 80%;
    padding: 10px;
    margin: 20px auto;
    text-align: center;
    font-weight: bold;
    font-family: var(--sans_1);
    letter-spacing: 0.5px;
	font-size: 0.8rem;
    color: #3a4b5d;
}



.logged_in_button{
    padding: 2px 10px;
    color: white;
    font-family: var(--sans_1);
    display: flex;
    align-items: center;
    text-decoration: none;
    height: auto;
    margin: auto;
}

.logged_in_button:hover{
    background: rgba(255,255,255,0.9);
	color:black;
    box-shadow: initial;	
	transition: background .25s , color .25s;
}



.manual_select select_option{
	cursor:pointer;
}
.manual_select select_option:hover{
    box-shadow: inset 0px 3px 6px 3px rgb(255 255 255), inset 0px -3px 3px 3px rgb(0 0 0 / 10%);
    filter: hue-rotate(284deg);
    background: aliceblue;	
}

details.dropunder[open]{
	z-index:10000;
}
details.dropunder{
	position:relative;
}

.student_logout{
	box-shadow:inset 0px 1px 0px 0px #f5978e;
	background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
	background-color:#f24537;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
    font-family: var(--sans_1);
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
	margin-top:10px;
}
.student_logout:hover {
	background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
	background-color:#c62d1f;
}
.student_logout:active {
	position:relative;
	top:1px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.pointer{
	cursor:pointer;
}

.text_shadow{
    text-decoration: none;
    text-shadow: 1px 1px 0px #000;
}

.relative{
	position:relative;
}

drop_under{
	position:absolute;
	left:0px;
	top:100%;
	width:fit-content;
	min-width:100%;
}
details{
	z-index:100;
}
details[open]{
	z-index:101;
}
.point{
	cursor:pointer;
}



.overlay_modal{
	width:100vw;
	height:100vh;
	position:fixed;
	left:0px;
	top:0px;
	background: rgba(255,255,255,0.0);
	z-index: 10000;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background 1s;
	pointer-events:none;
	opacity: 0;
}
.overlay_modal[show]{
	background: rgba(255,255,255,0.75);
	pointer-events:initial;
	opacity: 1;
}



.search_type_holder [name="search_type"]{
	padding: 0px 5px;
    height: 100%;
}

.small_blue_button {
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	background-color:#007dc1;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
    font-family: var(--sans_1);
	font-size:13px;
	padding:2px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
.small_blue_button:hover {
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	background-color:#0061a7;
}
.small_blue_button:active {
	position:relative;
	top:1px;
}

.all_unset{
	 all: unset;
}

.table_header > * {
    font-family: var(--sans_1);
    font-weight: bold;
    color:white;
    text-shadow: 1px 1px 0px #000;
    background: var(--ccBlue2);
    border: thin solid black;
    box-sizing: borderbox;
    padding: 10px 10px;
    letter-spacing: .5px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}



.flex_h{
	display:flex;
	flex-direction:row;
}


createType{
	display:none;
	flex-direction:column;
}

[name="createType"][value="worksheet"]:checked ~ [worksheet_options]{
	display:flex;
}
[name="createType"][value="distance"]:checked ~ [distanceLearning_options]{
	display:flex;
}



tabPanel{
	display: flex;
    justify-content: center;
    margin: auto;
    flex-direction: column;	
	align-items:center;
}
tabHolder{
	display: flex;
	justify-content: center;
	margin-top: 30px;
	
}
tabpanel [id="worksheet_options"]:checked ~ tabholder label[for="worksheet_options"] ,
tabpanel [id="distanceLearning_options"]:checked ~ tabholder label[for="distanceLearning_options"]{
    color: var(--text_over_secondary_blue);
    bottom: -1px;
    filter: revert;
    border-bottom: none;
    padding: 2px 10px;
}


tabHolder label{
    filter: brightness(0.9);
	border: thin solid black;
    padding: 1px 10px;
    border-radius: 1px;
    display: flex;
    background: #c8e1fb;
    color:white;
    font-family: var(--sans_1);
    text-shadow: -1px 1px 1px black;
    font-weight: bold;
	cursor:pointer;
	position:relative;
	border-bottom:none;
    border-radius: 4px 4px 0px 0px;	
}
tabHolder label:hover{
	color:yellow;
}


createtype{
	justify-content: center;
}

tabpanel [id="distanceLearning_options"]:checked ~ tab_display_holder createType[distanceLearning_options] ,
tabpanel [id="worksheet_options"]:checked ~ tab_display_holder createType[worksheet_options] {
	display:flex;
}



error_code{
	display:none;
}
[name="error_code"][value="1"] ~ error_code[value="1"] ,
[name="error_code"][value="2"] ~ error_code[value="2"] ,
[name="error_code"][value="3"] ~ error_code[value="3"]{
	display:block;
}

#saveButton:disabled{
	pointer-events:none;
}

.sheet_updater {
    background: -webkit-linear-gradient(top, #bee8c9, #61cc73);
}








#user_info_saver [name="save_type"]{
	display:none;
}

#user_info_saver [show_after_save]{
	display:none;
}

#user_info_saver[update] [show_after_save]{
	display:revert;
}

.show_on_new , .show_on_update{
	display:none;
}
#user_info_saver [name="save_type"][value="new"]:checked ~ .show_on_new{
	display:revert;
}
#user_info_saver [name="save_type"][value="update"]:checked ~ .show_on_update{
	display:revert;
}


#user_info_saver .save_button_holder{
	display: flex;
    align-items: center;
    justify-content: end;
    margin: 10pt 20pt;
}





#user_info_saver holder{
	padding:10pt;
}


[modal_id="save"] modal_holder{
	width: 50%;
    height: 80%;
    max-width: 600px;
}

#user_info_saver [top_holder]{
	padding:5pt;
	border-bottom:thin solid black;
}

#user_info_saver [top_holder] .new_update_holder{
	display: flex;
    margin: auto;
    border-radius: 6pt;
	border:2px solid #22659E;
    overflow: hidden;
	width: fit-content;
}

#user_info_saver #save_new:checked ~ [top_holder] .new_update_holder .save_new{
	background:#22659E;
	color:white;
}


#user_info_saver #save_update:checked ~ [top_holder] .new_update_holder .save_update{
	color:white;
	background:#22659E;
}


#user_info_saver .save_new{
	color:#22659E;
	background: white;
    padding: 5pt 10pt;
	cursor:pointer;
}
#user_info_saver .save_new:hover{
	background:white;
}
#user_info_saver .save_update{
	color:#22659E;
	background: white;
    padding: 5pt 10pt;
	cursor:pointer;
}
#user_info_saver .save_update:hover{
	background:white;
}




#user_info_saver .save_text{
margin:10pt 0pt;
font-weight: 500;
}


tab_holder{
    width: 100%;
    padding: 0px 10%;
    display: block;
	
}

details[open_advanced]{
	user-select:none;
	
}

.justify_end{
	justify-content: end;
}

[float_helper] img{
	width:22px;
	height:22px;
}

tab_display_holder{
    border: thin solid #8899ab;
    display: flex;
    border-radius: 5px;
    background: var(--ccBlue4);
	padding:5px 10px;
	justify-content:center;
	align-content:center;
    width: 105%;	
}


.optionsHolder tabs_holder label{
	padding:1px 10px;
	cursor:pointer;
	pointer-events: initial;
	position:relative;
    border: thin solid #8899ab;
	border-bottom:none;
}



tabs_holder{
	display:flex;
}

tabs_holder label[for="worksheet_options"]{ 
    background: var(--ccBlue3);
	color:white;
}
tabs_holder label[for="distanceLearning_options"]{ 
    background: #ff9235;
	color:white;
}


.no_a_decoration a{
	text-decoration:none;
	color:initial;
}

sortholder{
	display:contents;	
}

sortholder:hover :is(gridlabel , griditem) {
    box-shadow: inset 0px 3px 6px white, inset 0px -3px 6px white, 2px 2px 4px rgba(0,0,0,0.25);
	position:relative;
	top:-2px;
	backdrop-filter: hue-rotate(298deg);
}

.logged_in:empty{
	display:none;
}

student_info gridItem{
	display:flex;
	justify-content:center;
	align-items:center;
}




.logged_in{
	display:flex;
	background: var(--primary_blue);
	border-bottom: var(--border_around_primary_blue);
	padding:2px 5px;
	box-shadow: var(--box_shadow);
	box-shadow: 0px 2px 4px rgb(0 0 0 / 50%);	
	color:white;
	align-items:center;
	padding:2px;
}

.logged_in a{
	color:var(--text_over_primary_blue);
	text-decoration:none;
}

.search_header {
	height:100%;
	align-items: center;
}

.search_header input[name="search"]{
    border-radius: 0px;
    height: 30px;
	border:none;
}


.search_icon{
	cursor:pointer;
	position: absolute; right: 0px; height:100%; padding:5px; border-left: thin solid #79799d; min-width:50px; display: flex; justify-content: center;
	transition: background .25s;
}
.search_icon:hover{
	background:#cddcec;
	transition: background .25s;
}

.search_type_holder{
	background: var(--secondary_blue);
	border-radius:6px 0px 0px 6px;
    height: 30px;
	display:flex;
	align-items:center;
}
.search_type_holder :is( select , select:hover , select:focus , select:active , select:focus-visible ){
	background:none;
	border:none;
	outline: none;
}

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




[bg="distance_learning"]{
	background-color: var(--distance_learning);
}
[bg="flash"]{
	background-color: var(--flash_card);
}
[bg="share"]{
	background-color: var(--share);
}
[bg="customize"]{
	background-color: var(--customize);
}
[bg="new"]{
	background-color: var(--create_new_sheet_color);
}
[bg="oat"]{
	background-color: var(--one_atta_time);
}

[gradecolor="k"]{
	background:#5FC26A;
}
[gradecolor="1"]{
	background:#68CCC7;
}
[gradecolor="2"]{
	background:#96C1FA;
}
[gradecolor="3"]{
	background:#AEE36D;
}
[gradecolor="4"]{
	background:#FFD182;
}
[gradecolor="5"]{
	background:#FF7373;
}
[gradecolor="6"]{
	background:#C089F5;
}
[gradecolor="7"]{
	background:#FFD573;
}
[gradecolor="8"]{
	background:#E6CF6A;
}

.generic_button{
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.5);
    cursor: pointer;
    color: rgba(0,0,0,0.55);
    font-family: var(--sans_1);
    font-weight: bold;
    padding: 1px 9px;
    text-decoration: none;
    margin-right: 5px;
    box-shadow: inset 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(0 0 0 / 50%);
    position: relative;
    display: inline-flex;
    text-align: center;
    align-items: center;
}
.generic_button:hover {
    filter: contrast(150%);
    top: -1px;
    padding-bottom: 1px;
    box-shadow: inset 0px 1px 2px rgb(255 255 255 / 50%), 2px 2px 4px rgb(0 0 0 / 50%);
}
.generic_button:active {
    filter: contrast(150%);
    top: 1px;
    padding-bottom: 1px;
    box-shadow: inset 0px 1px 2px rgb(255 255 255 / 50%), inset 0px 1px 3px 1px rgb(0 0 0 / 50%);
}
















.button_2{
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.5);
    cursor: pointer;
    color: rgba(0,0,0,0.55);
    font-family: var(--sans_1);
    font-weight: bold;
    padding: 6px 36px;
    text-decoration: none;
    margin-right: 5px;
    box-shadow: inset 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(0 0 0 / 50%);
    position: relative;
    display: inline-flex;
    text-align: center;
    align-items: center;
}
.button_2:hover {
    filter: contrast(150%);
    top: -1px;
    box-shadow: inset 0px 1px 2px rgb(255 255 255 / 50%), 2px 2px 4px rgb(0 0 0 / 50%);
}
.button_2:active {
    filter: contrast(150%);
    top: 1px;
    box-shadow: inset 0px 1px 2px rgb(255 255 255 / 50%), inset 0px 1px 3px 1px rgb(0 0 0 / 50%);
}






[hide]{
	display:none;
}

.customize_holder{
	justify-content: center;	
	display:flex;
	flex-direction:row;
}
.sheet_options_holder{
	display:flex;
	width:fit-content;
	margin:auto;
	border:thin solid pink;
}

.blue_button{
    color:white;
    padding: 5px 20px;
    border: thin solid black;
    font-size: 1rem;
    color:white;
    text-shadow: 1px 1px 0px black;
    font-family: var(--sans_1);
    font-weight: bold;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    cursor: pointer;
    background: var(--ccBlue2);
    margin: auto;
	text-decoration:none;
}

.blue_button:hover{
	position:relative;
	box-shadow:4px 4px 7px rgba(0,0,0,0.3);
	color:yellow;
}
.blue_button:active{
	position:relative;
	box-shadow:4px 4px 7px rgba(0,0,0,0.3) inset;
	top:.2rem;
	color:white;
}



.generic_holder{
	box-shadow: 0px 2px 3px rgb(0 0 0 / 50%);
	margin: auto;
	padding: 0px;
	position: relative;
	border: thin solid #4e6275;
	background: #c8e1fb;
	display:block;
	width:fit-content;
}



.loginHolder input {
    margin: 5px 0px;
    height: 2rem;
}

a.hoverLine {
    text-decoration: none;
	color:initial;
}
a.hoverLine:hover {
    text-decoration: underline;
}

.align_mc{
	align-items:center;
	justify-content:center;
}
a{
	color:blue;
	text-decoration:underline;
}
a.no_decoration{
	color: unset;
    text-decoration: unset;	
}

.allspan{
	grid-column:1/-1;
}

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

.flex_vc{
	display:flex;
	flex-direction:column;
    align-items: center;
    width: fit-content;	
}

.flex{
	display:flex;
}


.w100{
	width:100%;
}

.MR{
	vertical-align:middle;
	text-align:right;
}
.BC{
	vertical-align:bottom;
	text-align:center;
}

.botborder{
	border-bottom:thin solid black;
}

.left_border{
	border-left:thin solid black;
}

.right_border{
	border-right:thin solid black;
}

.top_border{
	border-top:thin solid black;
}



hover_preview{
	display:none;
	position:absolute;
	left:100%;
	top:-50%;
	
}
label_holder:hover  hover_preview{
	display:initial;
    width: fit-content;	
    background: var(--gridbg);
    z-index: 100;
    padding: 2px 5px;
    border: thin solid pink;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgb(0 0 0 / 60%);	
}

.customize_holder hover_preview fieldset{
	background:#b9d0e8;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 25%);
}



.container{
  display: grid;
  grid-template-areas:
    'header header'
    'menu content'
    'footer footer';
    grid-template-columns: min-content minmax(auto,100%);
	min-height: 100vh;
	grid-template-columns: min-content auto;
}


.container[hide_menu]{
	display: flex;
	flex-direction:column;
}


.header{
	background: var(--primary_blue);
	border-bottom: var(--border_around_primary_blue);
	align-content:center;
	color: var(--text_over_primary_blue);
	grid-area: header;
	display:flex;
}
.footer{
	background:var(--primary_blue);
	border-top: var(--border_around_primary_blue);
	align-content:center;
	color: var(--text_over_primary_blue);
	grid-area: footer;
}


.tag_holder{
	width:100%; 
	display:flex; 
	flex-direction:column; 
	align-items:center; 
	font-family:'roboto';"
}

.tag_holder .tag_list{
	align-items: center; 
	margin: auto 20px; 
	justify-content:center; 
	grid-gap: 10px; 
	display:grid; 
	grid-template-columns: repeat(4, minmax(150px,200px) );
}


.headerContent{
	display: flex;
    align-items: center;
    justify-content: space-between;
	flex-wrap:wrap;
}
.header .title{ 
	height: 100%;
    display: inline-block;
    padding: 10px;
    font-family: var(--sans_2);
    text-shadow: var(--text_shadow_in_primary_blue);
    text-align: left;
    font-weight: 400;
	color:var(--text_over_primary_blue);
	white-space: nowrap;	
	font-family: 'Anek Kannada', sans-serif;
	font-size: 19pt;
	flex:1;
	height:auto;
	display:flex;
	align-items:center;
}

.menu {
	grid-area:menu;
	background:var(--primary_blue);
    display: flex;
    flex-direction: column;
    vertical-align: top;
    padding-bottom: 50vh;
    width: min-content;
    border-right: var(--border_around_primary_blue);
	white-space:nowrap;
	color:var(--text_over_primary_blue);
    font-family: var(--sans_1);
    font-weight: 400;

	background:var(--primary_blue);
    display: flex;
    flex-direction: column;
    vertical-align: top;
    padding-bottom: 50vh;
    width: min-content;
    border-right: var(--border_around_primary_blue);
	white-space:nowrap;
	color:var(--text_over_primary_blue);
    font-weight: 400;
	font-family: 'IBM Plex Sans', sans-serif;
	user-select: none;
	font-family: var(--sans_1);
	min-width: 263px;
	height:100%:
}
.menu[hide_menu]{
	left:-100%;
	position:fixed;
}


.menu details .subject{
/*	font-weight:600;*/
	display:flex;
	font-size:12pt;
	padding:6.5px 0px;
	padding:8px 0px;
	cursor:pointer;
}

.menu details{
	margin-bottom:0px;
}

.menu details[open]{
	margin-bottom:30px;
}

.menu .subject text{
	flex:99;
	display: flex;
	align-items: center;
	margin-left: 5px;
	text-transform: capitalize;
}

.menu .subject arrow{
	margin-right: 15px;
	flex:1;
	font-family: 'IBM Plex Sans', sans-serif;
	display: flex;
	align-items: center;
}

details summary arrow{
	transform:rotate(0deg);
	transition: transform .25s;
}

details[open] > summary arrow{
	transform:rotate(90deg);
}

.menu details:first-of-type .subject {
	margin-top:5px;
}

.menu menu_items{
	display:flex;
	flex-direction:column;
}

.menu menu_items a{
	display:flex;
	align-items:center;
	color:white;
    white-space: nowrap;
    text-shadow: var(--text_shadow_in_primary_blue);
    display: flex;
    align-items: center;
	color:var(--text_over_primary_blue);
    text-decoration: none;
	font-size: 14px;
    padding: clamp(2px , 4px , 5px) 10px;
}

.menu menu_items a:hover{
	color: #e3e3e3;
	background: rgba(0,0,0,0.5);
}

.menu menu_items .menuIcon{
	background:url(/code_site/icons/menu_icons.svg?1);
	width: 24px;
	height: 24px;
	display:inline-block;
	margin-right:10px;
	/* transform: scale(.75); */
}


.menu .subject .subject_icon{
	background:url(/code_site/icons/menu_subject_icons.svg);
	width:35px;
	height:30px;
	display:inline-block;
	margin-left:5px;
	margin-right:5px;
	display: none;
}

tag_holder a{
	text-decoration:none;
	color:black;
}
tag_holder a:hover{
	text-decoration:underline;
	color:black;
}

tag_holder tag_item{
	padding:5px 10px;
	border-radius:5px;
	background: var(--accent_1);
	display: flex;
    align-items: center;
	justify-content:center;
	height:50px;
	text-align: center;
}

@media screen and (max-width: 1024px) {
	.menuIcon {
		display: none;
	}
}






.content{
	grid-area:content;
    background-color:white;
    box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px 5px inset;
	box-shadow: rgb(0 0 0 / 50%) 2px 0 4px 0px inset;
    min-height: 85vh;
	overflow:auto; 
}

.innercontent{
	padding:2vh 2vw;
}


.Heading:first-of-type{
	margin-top:0px;
}

.Heading, .Heading2, .Heading3 {
    letter-spacing: 1px;
    font-size: 14pt;
    font-weight: bolder;
    max height: 50px;
    position: relative;
    width: 100%;
    margin-top: 50px;
    padding: 5px 0px 5px 0px;
    font-family: var(--sans_2);
	text-transform: capitalize;
	border-bottom:thin solid var(--secondary_blue);
	
    -moz-border-radius: 0px 0px 6px 6px;
    /* -webkit-border-radius: 0px 0px 6px 6px; */
    text-align: center;
    white-space: nowrap;
    font-weight: bolder;
    vertical-align: middle;
    font-family: var(--sans_2);
    /* font-size: .8em; */
    display: flex;
    align-items: center;	
	margin-bottom:10px;
	
}

.worksheet_box_holder{
	width:100%;
	display: flex;
	flex-wrap:wrap;
	position: relative;
	justify-content: flex-start;
	grid-gap: clamp(0px, 22px, 250px);
	justify-content: space-between;
	display:grid;
	grid-template-columns: repeat(auto-fit, 280px);

    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: flex-start;
    grid-gap: clamp(10px, 15px, 20px);
    row-gap: clamp(18px , 20px , 40px);
    justify-content: start;
    display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(270px,100%),1fr));	
}




.worksheet_box_holder worksheet_item[old]{
	display:flex;
	width: 100%;
	grid-column:1/-1;
	flex-direction:row;
}

.worksheet_box_holder worksheet_item[old] .sheet_thumbnail{
	height:80px;
	width: auto;
}

.worksheet_box_holder worksheet_item[old] .large_thumbnail{
	position:absolute;
	display:none;
    top: -65px;
    left: calc( 100% + 10px);
    z-index: 100;
	width:442px;
	box-shadow: 7px 7px 7px 7px rgb(0 0 0 / 25%);
}

.worksheet_box_holder worksheet_item[old] .worksheet_image_holder{
	border-radius:1px;
    overflow: initial;
	height: 80px;
	
    border: none;
    box-shadow: initial;
}


.worksheet_box_holder worksheet_item[old] .descriptor_holder {
    max-width: initial;
    width: auto;
    margin: 0px 10px;
}

.worksheet_box_holder worksheet_item[old] .worksheet_image_holder img{
	transition: transform 0.1s , box-shadow 0.1s;
	border:thin solid gray;
}

.worksheet_box_holder worksheet_item[old] .worksheet_image_holder:hover img.sheet_thumbnail{
	transform: scale(1.05);
	box-shadow: 0px 2px 3px 0px rgb(0 0 0 / 75%);
}

.worksheet_box_holder worksheet_item[old] .worksheet_image_holder:hover .large_thumbnail{
	display:block;
}

.worksheet_box_holder:has(worksheet_item[old]) {
	display:flex;
	flex-direction:column;
	row-gap:2px;
}



.worksheet_box_holder worksheet_item[old] .bubbles{
	display:flex; 
	align-items:center; 
	color:white; 
	border-radius:400px; 
	padding: 1px 10px 1px 10px;
	font-size: 10.5pt;
	transition: transform 0.1s , box-shadow 0.2s;
}
.worksheet_box_holder worksheet_item[old] .bubbles:hover{
	transform: scale(1.1);
	box-shadow: 0px 2px 3px 0px rgb(0 0 0 / 75%);
}




.worksheet_box_holder worksheet_item[old] .bubbles img{
	height:14px;
}


.worksheet_box_holder worksheet_item[old] dropdown_summary{
	border:thin solid black;
	color:black;
	background:white;
	padding:2px 10px;
	border-radius:10pt;
}


.worksheet_box_holder worksheet_item[old] dropdown_holder:hover dropdown_summary{
	border-radius:10pt 10pt 0px 0pt;
	
}


.worksheet_box_holder worksheet_item[old] dropdown_items{
	border:thin solid black;
	color:black;
	background:white;
	position:absolute;
	top:calc( 100% );
	display:none;
	flex-direction:column;
	min-width:100%;
	right:0px;
}

.worksheet_box_holder worksheet_item[old] dropdown_holder:hover dropdown_items{
	display:flex;
	z-index:100;
}

.worksheet_box_holder worksheet_item[old] dropdown_holder:hover dropdown_items a{
	padding:2px 10px;
    border: thin solid transparent;
	color:black;
	white-space:nowrap;
}

.worksheet_box_holder worksheet_item[old] dropdown_holder:hover dropdown_items a:hover{
    border: thin solid black;
    box-shadow: 2px 2px 2px rgb(0 0 0 / 30%), 1px 1px 1px rgb(0 0 0 / 30%) inset;
    background: rgba(0,0,0,0.1);
}



.worksheet_box_holder worksheet_item[old] dropdown_holder{
	position:relative;
}









.worksheet_box_holder worksheet_item{
	display:flex;
	flex-direction:column;
	margin:0px 0px;
	/* background:orange; */
	background: var(--accent_1);
	padding:10px;
	border-radius:10px;
}


.search_logged_in_holder{
	display:flex;
	flex: 99;
}

.worksheet_box_holder worksheet_item .bottom_content_holder{
	border-radius:10px;
	padding:2px;
	margin-top:5px;
}




.worksheet_box_holder worksheet_item .descriptor_holder{
	justify-content:center;
	align-items:center;
	width:100%;
	font-family:arial;
    font-family: var(--sans_1);
    font-weight: 500;
	font-size: 11pt;
	position:static;
}

.worksheet_box_holder worksheet_item .sheet_thumbnail {
    background: #fff;
    transition: height 0.25s;
	width:100%;
	height:100%;
    /* box-shadow: 1px 1px 2px rgba(0,0,0,0.25); */
}



.worksheet_box_holder .worksheet_image_holder{
	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%);
}
	

.worksheet_box_holder worksheet_item:hover popup_options{
    right: 0 ;
}

.worksheet_box_holder worksheet_item:hover popup_options[left]{
    left: 0 ;
	right:initial;
}


[modal_id="magnified"] #image img{
	height:100%;
}



.worksheet_box_holder{
	--transparent_color: rgba(0,0,0,0.25);
	--transparent_color: rgba(255,255,255,1);
	--base_color: rgba(255,255,255,1);
}

.worksheet_box_holder .shader{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    /* background: linear-gradient(338deg, rgb(0 55 101 / 5%) , rgb(193 193 193 / 5%) 50%); */
    /* box-shadow: inset 0px 0px 5px 5px rgb(255 255 255); */
    pointer-events: none;
}

.worksheet_box_holder  .standard_favorite_holder{
	display:flex;
}

favorite_holder{
    padding: 4px 4px 0px 0px;
    border-radius: 10px 0px 10px 10px;
}
favorite_holder[active="1"]{
    right: 0%;
}
favorite_holder img{
	cursor:pointer;
	display:none;
	width:20px;
}
favorite_holder[active="1"] img{
	cursor:pointer;
	filter:initial;
}

favorite_holder[active="1"] img[active_attr="1"]{
	display:initial;
}

favorite_holder[active="0"] img[active_attr="0"]{
	display:initial;
}


favorite_holder img:hover{
	cursor:pointer;
	transform:scale(1.2);
}
.box_holder:hover popup_options{
	bottom:0px;
}

popup_options [float_helper]{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    border-radius: 100%;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 50%), -1px -1px 2px 0px rgb(0 0 0 / 50%);
    /* filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5)); */
	width: 34px;
	height: 34px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	position:relative;
	z-index:100;
}
popup_options [float_helper]:hover{
}

popup_options > a {
    pointer-events: initial;
	position:relative;
}

.slide_helper{
	width:100%;
}

.text_holder {
    position: absolute;
    right: 50%;
    overflow: hidden;
    height: 100%;
    top: 0px;
    display: flex;
	overflow:hidden;
	width:215px;
	pointer-events:none;
}

popup_options > a:hover .text_holder .text {
	transition: right .3s;
	right:0%;
}

popup_options[left] > a:hover .text_holder .text {
	transition: left .3s;
	left:0%;
	right:initial;
}



popup_options > a:hover .text_holder {
	pointer-events:none;
}
.text {
    white-space: nowrap;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: yellow;
    color: white;
    height: 100%;
    /* width: 100%; */
    padding-right: 30px;
    right: -100%;
    position: absolute;
    border-radius: 20px 0px 0px 20px;
    padding-left: 20px;
	transition: right .4s;
	pointer-events:initial;
	font-family:'roboto';
}



popup_options[left] .text_holder {
    position: absolute;
    right: initial;
    left: 50%;
    overflow: hidden;
    height: 100%;
    top: 0px;
    display: flex;
	overflow:hidden;
	width:215px;
	pointer-events:none;
}


popup_options[left] .text {
	transition: left .4s;
    right: initial;
    left: -100%;
}

.worksheet_box_holder a{
	text-decoration:none;
}


.worksheet_box_holder popup_options{
    top: 0%;
    position: absolute;
    transition: bottom 0.16s;
    display: flex;
    flex-direction: column;
    grid-row-gap: 10px;
	right: -100%;
    height: 100%;
    padding-top: 20px;
    padding-right: 10px;
	transition: right 0.25s;
	pointer-events:none;
}

.worksheet_box_holder popup_options[left]{
    left: -50px;
    transition: left 0.15s;
    padding-right: 0px;
    padding-left: 10px;
}

.pop_up_helper_text{
	display:flex;
	grid-area:helper_text;
	justify-content:center; 
	width:100%;
	font-family: var(--sans_1);
	bottom:-150%;
	position:relative;
	transition: bottom .25s;
}

gridLabel.blue{
	background: #307fd7;
    color: #ffffff;
}

popup_options > [float_helper]{
	pointer-events:initial;
}
popup_options img{
	width:22px;
}



worksheet_item .select_premade_dropdown{
	opacity:0;
}
worksheet_item:hover .select_premade_dropdown{
	opacity:1;
}
.select_premade_dropdown{
	position: absolute;
    bottom: 0px;
    background: rgb(0 0 0 / 75%);
    color: white;
}
.select_premade_dropdown dropdown_items{
	display:none;
}

.select_premade_dropdown:hover dropdown_items{
    background: rgb(0 0 0 / 75%);
    color: white;
    position: absolute;
    bottom: 100%;
    border: thin solid gray;
    width: 100%;
	display:flex;
	flex-direction:column;
	z-index:1000;
}
.select_premade_dropdown dropdown_items a div{
	color:white;
	border:thin solid transparent;
	padding:0px 3px;
}
.select_premade_dropdown dropdown_items a:hover div{
	border:thin solid transparent;
	background: rgba(0,0,0,0.9);
	color:white;
}
.select_premade_dropdown .summary{
    padding-left: 10px;
    padding-right: 10px;
	cursor:pointer;
}

direct_link{
    display: inline-flex;
    align-items: center;
	justify-content:center;
}


.standard_link_holder{
	display:flex; 
	flex-wrap:wrap; 
	column-gap:10px;
}

.standard_link_holder a{
	transform:scale(1);
	transition: transform 0.1s;
}

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

/*
.menu menu_items a:hover .menuIcon {
    transform: scale(1.4);
    transition: transform 0.2s;
}
*/
[bg_color="oat"]{
	background: #FF444E;
}
[bg_color="flash"]{
	background: #FDB90B;
}
[bg_color="dl"]{
	background: #285EFE;
}
[bg_color="new"]{
	background: var(--create_new_sheet_color);
}
[bg_color="customize"] {
    background: #9b4def;
}


popup_options [float_helper][bg_color]{
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.6);
}




popup_options > [float_helper]:hover ~ .pop_up_helper_text{
	bottom:0;
}


popup_options [float_item]{
	display:none;
	width:100%;
	padding:4px 0px;
	justify-content:center;
}




popup_options .pop_up_helper_text .shader{
	width:100%;
	height:100%;
	position:absolute;
}






.big_box_holder{
	display: flex;
    width: fit-content;
    flex-direction: column;
    background: var(--secondary_blue);
	border-radius: 0px 0px 20px 20px;
	padding-bottom:20px;
}





gridrow{
	display:contents;
}





modifiedBadge {
    background:var(--primary_blue);
    border-radius: 50%;
    font-family: var(--sans_1);
    color:white;
    font-weight: bold;
    font-size: 0.8em;
    text-shadow: 1px 1px 1px black, -1px 1px 1px black;
    padding: 0px 4px;
    border: 1px solid black;
    cursor: default;
	top: 3px;
    right: 3px;
    height: 20px;
    width: 20px;
    display: flex;
    place-items: center;
	position:absolute;
}
modifiedbadge:hover:after {
    content: "Includes Modified Sheet. Modified By: " attr(modifiedAttr);
}
modifiedbadge:hover:after {
    left: initial;
    right: 0px;
}
favoriteStar:hover:after, modifiedbadge:hover:after {
    display: flex;
    bottom: 0;
    height: 100%;
    align-items: center;
    position: absolute;
    right: 100%;
    background:var(--primary_blue);
    border: thin solid black;
    padding: 1px 10px;
    border-radius: 1px;
    margin-right: 5px;
    width: fit-content;
    white-space: nowrap;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    z-index: 100;
    color:white;
    font-family: var(--sans_1);
    text-shadow: none;
    font-weight: initial;
    letter-spacing: 0.5px;
}



standardDisplay , .filter_display{
    border: 1px solid rgba(0,0,0,0.85);
    padding: 0px 15px;
    border-radius: 1px;
    color: rgba(0,0,0,0.8);
    font-family: var(--sans_1);
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 1px;
    text-outline: 1px black;
    position: relative;
	height: fit-content;
}
standarddisplay:empty {
    display: none;
}


.hover_scale_105{
	transition: transform .1s;
	transform:scale(1);
	cursor:pointer;
}

.hover_scale_105:hover{
	transform:scale(1.05);
}

.hover_scale_110{
	transition: transform .1s;
	transform:scale(1);
	cursor:pointer;
}

.hover_scale_110:hover{
	transform:scale(1.1);
}


standardDisplay{
	transition: transform 0.1s , box-shadow 0.1s;
}
a:hover standardDisplay{
	transform: scale(1.05);
	box-shadow: 0px 2px 3px 0px rgb(0 0 0 / 75%);
}




[name=filterByGrade]:checked + .filter_display{
	opacity:0.4;
}
.filter_display{
	cursor:pointer;
	width: 100%;
}


.anchorLinkHolder{
    display: inline-block;
    float: right;
    line-height: 20px;
    overflow: hidden;
}

.anchorLink {
    float: right;
    font-size: 8pt;
    text-decoration: none;
    opacity: 0;
}



.generic_button input[type="radio"]{
	display:none;
}

#downloadSheetHolder {
	 overflow: hidden;
    display: grid;
    grid-template-columns: max-content auto;
	width: auto;
	margin:auto auto;
	background-color: var(--accent_4);

   overflow: hidden;
    display: grid;
    grid-template-columns: max-content auto;
    width: auto;
    margin: auto auto;
    background-color: var(--accent_4);
	max-width: calc( 8.75in + 340px);
}



#downloadSheetHolder gridlabel{
	background: var(--accent_2);
	text-shadow:none;
	color:rgba(115, 110, 110, 1);
	border:none;
	min-height:45px;
	border-radius:0px;
}
#downloadSheetHolder gridTable2{
	background:#B8B8B8;
}


.customize_holder fieldset{
	background:rgba(255,255,255,0.25);
}
.customize_holder fieldset content{
	display:flex;
	flex-direction:column;
}




.sheetIframe {
    border: thin solid black;
    min-height: 8in;
}

gridLabel , grid_label {
    padding: 10px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent_5);
    color: var(--text_over_accent_5);
    font-family: var(--sans_1);
    font-size: 1rem;
	text-align:center;
	position:relative;
	text-transform: capitalize;		
}

gridLabel .new_window{
position: absolute;
    top: 0;
    right: 0;
    background: rgba(255, 255, 255, 1);
    font-size: 9pt;
    padding: 2px 0px 2px 5px;
    text-decoration: none;
    color: black;
    border: thin solid #rgba(219, 219, 219, 1);
    border-radius: 4px;
    height: 80%;
    display: flex;
    align-items: center;
    top: 10%;
    right: 14px;
    padding: 0px 24px;
    font-family: 'IBM Plex Sans';
    font-weight: 400;
}



label_display {
    width: 100%;
    border: thin solid rgb(99 112 125);
    display: flex;
    justify-content: center;
    position: relative;
    cursor: pointer;
    box-shadow: 2px 2px 2px rgb(255 255 255 / 50%) inset, 1px 1px 2px rgb(0 0 0 / 25%);
    margin: 0px 2px;
    border-radius: 4px;
    padding: 1px 5px;
    color: white !important;
	background: var(--ccBlue2);
    font-family: var(--sans_1);
	font-size:.9rem;
}
input[type="radio"]:checked ~ label_display{
	top: 1px;
    filter: grayscale(0.7);
    box-shadow: 2px 2px 2px rgb(0 0 0 / 50%) inset;
}




.primary_button {
    -moz-box-shadow: inset 0px 1px 0px 0px #fff6af;
    -webkit-box-shadow: inset 0px 1px 0px 0px #fff6af;
	box-shadow: inset 0px 1px 0px 0px #fff6af, 0px 3px 4px rgb(0 0 0 / 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
    background: -moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background: -webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background: -o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background: -ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
    background-color: #ffec64;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #ffaa22;
    display: inline-block;
    cursor: pointer;
    color: #333333;
    font-family: var(--sans_1);
    font-size: 1rem;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffee66;
    margin: 20px auto;
	text-transform: capitalize;		
}
.primary_button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
	background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
	background-color:#ffab23;
    border: 1px solid #7a500d;
}
.primary_button:active {
	position:relative;
	top:1px;
	box-shadow: inset 0px 1px 0px 0px #fff6af;
}



.green_button {
	box-shadow:inset 0px 1px 0px 0px #caefab;
	background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
	background-color:#77d42a;
	border-radius:6px;
	border:1px solid #268a16;
	display:inline-block;
	cursor:pointer;
	color:#306108;
    font-family: var(--sans_1);
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #aade7c;
	width: fit-content;
    margin: auto;	
}
.green_button:hover {
	background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
	background-color:#5cb811;
}
.green_button:active {
	position:relative;
	top:1px;
}



.red_button {
	box-shadow:inset 0px 1px 0px 0px #cf866c;
	background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
	background-color:#d0451b;
	border-radius:3px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
    font-family: var(--sans_1);
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #854629;
    width: fit-content;
    margin: auto;	
}
.red_button:hover {
	background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
	background-color:#bc3315;
}
.red_button:active {
	position:relative;
	top:1px;
}

        



.gridTable, .gridTable2 {
    display: grid;
    grid-template-columns: auto auto;
    border: var(--border_around_secondary_blue);
    background: var(--secondary_blue);
    box-shadow: 0px 2px 3px rgb(0 0 0 / 50%);
    border-radius: 5px;
    margin: 10px 5px 20px;
    margin: auto;
    width: fit-content;
}




fieldset.type_1 {
    border: none;
}
fieldset.type_1 legend{
	font-size:0.85rem;
	padding:0px 5px;
	margin-left:0px;
	text-transform: capitalize; 
    font-family: var(--sans_1);
    font-weight: bold;
    letter-spacing: .1ch;	
}
fieldset.type_1 :is(input[type="text"] , select){
	background:white;
	width:100%;
}









label.type_0{
	cursor:pointer;
}


label.type_0 toggle{
    display: inline-flex;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    align-items: center;
	
	margin-right:10px;
	width:30px;
	height:18px;
	background:#D9D9D9;
	align-items:center;
}

label.type_0 input:checked ~ toggle toggle_ball{
    right: 0px;
}
label.type_0 input ~ toggle toggle_ball{
    position: absolute;
    right: calc(100% - 13px);
    width: 13px;
	height:13px;
    background: #22659E;
    content: " ";
    border-radius: 10px;
    display: block;
    transition: right .1s linear;
}



input[toggle]{
	display:revert;
	display:none;
}





.button_type_10{
    display: inline-flex;
    border: thin solid var(--accent_6);
    background: white;
    padding: 1pt 10pt;
    border-radius: 3pt;
	text-decoration:none;
}



.button_type_11{
    display: flex;
    border: thin solid var(--accent_6);
    background: white;
    padding: 1pt 10pt;
    border-radius: 3pt;
	text-decoration:none;
	align-items:center;
	color:black;
}





.button_arrow:after{
	margin-left: 15pt;
	content:'>';
	font-family: 'IBM Plex Sans', sans-serif;
	display: flex;
	align-items: center;
	transform:rotate(0deg);
	transition: transform .25s;
}
details[open] .button_arrow:after{
	transform:rotate(90deg);
}







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



label input{
	margin-right:5px;
}


#breakdown_assignment{
	color:var(--text_inside_striped_table);
	display:grid;
	border-radius:6px;
	/* overflow:hidden; */
	border:thin solid var(--accent_5);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	font-size: 11pt;
}



input[default="0"] ~ toggle:after {
	right: 0px;
	box-shadow: 2px 1px 4px 1px rgb(0 0 0 / 50%), inset 0px -3px 0px 0px rgb(0 0 0 / 35%), inset 0px 1px 2px 1px rgb(0 0 0 / 35%);
}
input[default="0"]:checked ~ toggle:after{
	right:calc(100% - 25px);
	box-shadow: 2px 1px 4px 1px rgb(0 0 0 / 50%), inset 0px -3px 0px 0px rgb(0 0 0 / 35%), inset 0px 1px 2px 1px rgb(0 0 0 / 35%);
}
input[default="0"] ~ toggle{
	background: #76bef5;
}
input[default="0"]:checked ~ toggle{
	background: white;
}
/*
label:hover{
	border:thin solid rgba(0,0,0,0.1);
}
*/
label_holder{
	display:flex;
	align-items:center;
	position:relative;
}

input[type=text], select, textarea, input {
    border-radius: 2px;
    border-radius: 4px;
    border: thin solid #8b969e;
    padding: 2px 5px;
}


mobilesheetselector{
	display:none;
}
.flex_mc{
	display:flex;
	align-items:center;
	justify-content: center;
}




button.open{
	padding:4px 8px;
	background: #22659E;
	border: 1px solid #C8C4C4;
	border-radius: 3px;
	color:white;
	font-size:10pt;
}

.primary{
	background: #0C84F2;
	border-radius: 3px;	
	color:white;
	padding:5pt;
	border:none;
	cursor:pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-weight: 700;
	font-size: 11pt;
}


.button_type_1{
	width: 100%;
	display: flex;
	font-family: 'IBM Plex Sans';
	justify-content: center;
	overflow: hidden;
	cursor: pointer;
	/* border: thin solid #B0B0B0; */
	border-radius: 3px;

	background: #0C84F2;
	border-radius: 3px;	
	color:white;
	padding:5pt;
	border:none;
	cursor:pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-weight: 700;
	font-size: 11pt;
}



.button_type_2{
    width: 100%;
    display: flex;
    font-family: 'IBM Plex Sans';
    justify-content: start;
    overflow: hidden;
    cursor: pointer;
    /* border: thin solid #B0B0B0; */
    border-radius: 3px;
    /* border: thin solid gray; */
    margin-bottom: 10px;
    /* width: fit-content; */
    padding: 2px 10px;
    background: white;

	background: #DDDDDD;
	border-radius: 3px;
	color:black;
	padding:5pt;
	border:none;
	padding-left: 10pt;
	padding-right: 10pt;
	cursor:pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-weight: 700;
	font-size: 11pt;
}

.button_type_2 arrow{
margin-left:auto;
}



.button_type_3{
	border: thin solid var(--accent_5);
    aspect-ratio: /1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1pt 8pt;
    border-radius: 3pt;
    cursor: pointer;
}


.button_type_4{
	border: 1.5px solid #22659E;
    aspect-ratio: /1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1pt 20pt 1pt 8pt;
    border-radius: 3pt;
    cursor: pointer;
	text-decoration:none;
	color:#22659E;
	font-weight:500;
}

.button_type_5{
	border: 1.5px solid rgba(239, 8, 8, 1);
    aspect-ratio: /1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1pt 8pt;
    border-radius: 3pt;
    cursor: pointer;
	text-decoration:none;
	color:rgba(239, 8, 8, 1);
	font-weight:500;
}


.button_type_6{
display: flex;
    justify-content: center;
    align-items: center;
    padding: 7pt 38pt;
    border-radius: 3pt;
    cursor: pointer;
    text-decoration: none;
    color: black;
    font-weight: 600;
    background: #F6C102;
    font-size: 11pt;
    border: none;
}




.button_type_7 {
    display: flex;
    align-items: center;
    padding: 2pt 10pt;
    border-radius: 3pt;
    cursor: pointer;
    text-decoration: none;
    color: black;
    font-weight: 600;
    font-size: 10pt;
    border: none;
    width: fit-content;
    border: thin solid #8ca1b5;
}


.aspect_button{
    aspect-ratio: 6/1;
}




.hide_content{
	display:none;
}






.mySavedSheets{
	background: #ffffff;
	border-radius:15px;
	margin:auto;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	margin-bottom:20px;
	/* width:fit-content; */
	display:grid;
	grid-template-columns:repeat(6,auto);
	text-align:center;
	overflow:hidden;
	border:thin solid black;
	margin-top:5vh;
}
.mySavedSheets .headerRow gridItem{
	background: var(--accent_5);
	border-bottom:thin solid black;
	color: var(--accent_6);
	/* text-shadow:1px 1px 1px black; */
	text-align:center;
	padding:1vh 1vw;
	font-weight:bold;
	font-size: 10pt;
}
.mySavedSheets .headerRow gridItem.headerIdentifier{
	grid-column:1 / -1;
	color:black;
	text-shadow:initial;
}

.mySavedSheets gridItem{
	padding: 10px 12px;
}
.mySavedSheets gridRow:nth-child(even) > *{
	background:rgba(0,0,0,0.1);
}
.mySavedSheets gridItem{
	align-items: center;
	display: flex;
	justify-content: center;
}
.mySavedSheets standarddisplay{
	pointer-events:none;
}
.sheetRow > griditem.spellingWordsList {
    display: grid;
    grid-template-columns: repeat( auto-fit minmax(100px, 1fr) );
    padding: 1vh 1vw;
    grid-template-columns: repeat(4, minmax(96px, 1fr));
}

.col5{
	grid-template-columns: min-content 1fr 1fr 1fr auto;
}
.col6{
	grid-template-columns:min-content repeat(5,auto);
}
.col7{
	grid-template-columns:min-content repeat(4,auto) min-content auto;
}
.sheetRow > gridItem.comment{
    display: flex;
    grid-column: 1 / -1;
    justify-content: start;
    border-right: none;
    border-left: none;
    font-style:italic;
    font-size: 8pt;
    padding-top: 1px;
}
gridItem.comment:empty{
    /* display: none; */
    padding: 0px;
}

.do_not_show{
	display:none;
}



.sub_description_holder{
    font-size: 10pt;
    color: #5a5a5a;
    margin-bottom: 30px;
    font-family: 'Roboto';
    text-align: justify;
}
.sub_description_holder:empty{
	display:none;
}


.sheetRow > griditem{
	/* border-bottom:thin solid gray; */
	padding: 10px 10px;
	font-size: 11pt;
}


.favorites_search_menu{
	display:flex;
	margin:auto;
	/* width:fit-content; */
	gap: 10px;
	flex-wrap: wrap;
	margin: 10px auto;
	justify-content: space-between;
}
.favorites_search_menu a {
    display: flex;
    justify-content: center;
    align-items: center;
    border: thin solid var(--accent_6);
    background: #fffdfd;
    padding: 3px 14px;
    position: relative;
    /* height: 38px; */
    flex-direction: column;
    text-align: center;
    color:#22659E;
    background: #CCE0F1;
    border: 1.5px solid #22659E;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
    font-size: 11pt;
}






label_holder toggle_button{
	display:flex;
	justify-content:center;
	align-items:center;
	background: #FFFFFF;
	border: 1px solid #B2B0B0;
	border-radius: 6px;
	padding:1px 10px;
}

label_holder input:checked + toggle_button{
	background: #000000;
	border-radius: 4px;
	color:white;
	border: 1px solid white;
}


.menu .close_menu_button{
	display:none;
}


.search_type_holder details{
	position:relative;
}


.search_type_holder details .subject_icon {
    background: url(/code_site/icons/search_icons.svg);
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: 10px;
    /* transform: scale(.75); */
}

.search_type_holder details content label{
    display: flex;
    align-items: center;
    font-size: 12pt;
}

.search_type_holder details summary .subject_icon {
    margin: 5pt 5pt;
}

.search_type_holder details label {
cursor:pointer;
}



.search_type_holder input[type="radio"]{
	display:none;	 
}


.mobile_menu{
	display:none;
}


.search_type_holder details [selected_item]{
	display:none;	 
}

[name="search_type"][value="math"]:checked ~ details [selected_item="math"]{
	display:revert;
}

[name="search_type"][value="spelling"]:checked ~ details [selected_item="spelling"]{
	display:revert;
}

[name="search_type"][value="cas"]:checked ~ details [selected_item="cas"]{
	display:revert;
}

[name="search_type"][value="car"]:checked ~ details [selected_item="car"]{
	display:revert;
}

[name="search_type"][value="cat"]:checked ~ details [selected_item="cat"]{
	display:revert;
}

[name="search_type"][value="iap"]:checked ~ details [selected_item="iap"]{
	display:revert;
}











.search_type_holder details content{
background: white;
    color: black;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    width: max-content;
    row-gap: 5pt;
    padding: 10pt;
    margin-top: 4pt;
    box-shadow: var(--box_shadow);
    border-radius: 6pt;
}


grid_holder{
	display:grid;
}
grid_holder a{
	text-decoration:none;
	color:unset;
}



details[opens_modal][open] content{
	position:fixed;
	top:0px;
	left:0px;
	z-index:1000;
}
details[opens_modal][open] generic_modal{
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0px;
    top: 0px;
    background: rgba(255,255,255,0.85);
    background: #0009;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 1.5s;
    backdrop-filter: blur(10px);
}

details[opens_modal][open] generic_modal modal_sub_holder{
	overflow:auto;
	padding: 1% 2%;
	max-width:500px;
}

student_goals{
	display:flex;
	flex-direction:column;
	gap:10px;
}
student_goal{
	display:flex;
	flex-direction:column;
	gap:5px;
}

student_goal heading{
	font-weight:bold;
}
student_goal text{
	font-weight:normal;
	margin-left:20px;
}
.standard_link_holder{
	display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    align-items: center;
}
.standard_link_holder summary{
	display:flex;
}