:root {
	--gridbg: #c8e1fb;
}

addCopyDelete{
	display: flex;
    justify-content: space-between;
    align-items: center;
}

addCopyDeleteButton{
	padding:2px 10px;
	display:inline-block;
	text-align:center;
	cursor:pointer;	
	border-radius:5px;
	border:thin solid black;
	color:white;
	font-weight:bold;
	text-shadow: 1px 1px 0px #000;	
	font-family:arial;
	box-shadow:1px 1px 2px rgba(0,0,0,0.25);
	justify-content:center;
	    margin: 2px;
}
addCopyDeleteButton:hover{
	filter: brightness(90%);
}

.addProblem{
	background:#68D14D;
}
.removeProblem{
	background-color:#F54C4C; 
}
.copyProblem{
	background:#F5C84C;	
}

answer_holder[value="la"] ans_holder{
	width:100%;
}

answer_holder[value="fib"] ans_holder{
	width:22ch;
}

[role="textarea"]{
	cursor:text;
}

problemholder[problem_style="instructions"] .Problem{
	font-weight:bold;
}


label[ansStyle="tf"]{
	
}
answer_holder[value="tf"] input + sublabel{
	border:thin solid rgba(0,0,0,0);
	border-radius:5px;
	text-shadow:1px 1px 1px rgba(0,0,0,0);
	padding:1px 5px;
	cursor:pointer;
}
answer_holder[value="tf"] input + sublabel:hover{
	border:thin solid rgba(0,0,0,0.2);
	border-radius:5px;
	text-shadow:1px 1px 1px rgba(0,0,0,0);
	padding:1px 5px;
	cursor:pointer;
}
answer_holder[value="tf"] input:checked + sublabel{
	padding:1px 5px;
	border:thin solid black;
	border-radius:8px;
    background: #DBEDDA;
    border: 1px solid green;
}


answer_holder[value="mc"] ans_holder [type="radio"]{
	display:none;
}

answer_holder[value="mc"] ans_holder [type="radio"][value="1"]:checked ~ [role="textarea"]{
    background: #DBEDDA;
    border: 1px solid green;
}

answer_holder[value="mc"] ans_holder [type="radio"][value="0"]:checked ~ [role="textarea"]{
	background: #F5E4E4;
	border: 1px solid red;
}


answer_holder[value="mc"] ans_holder [js_action="convert_mc_answer"]{
	display:none;
    position: absolute;
    right: 0px;
    width: fit-content;
    border-top: none;
    z-index: 100;
    border-radius: 0px 0px 5px 5px;
	margin-right:5px;
	height:fit-content;
	cursor:pointer;
	border:thin solid black;
	background: var(--gridbg);
	padding:4px 10px;
}

convert_box.correct{
    border: thin solid green;
	background: #DBEDDA;
}

convert_box.wrong{
	background: #F5E4E4;
	border: 1px solid red;
}

[js_action="convert_mc_answer"] convert_box{
	width:20px;
	height:20px;
	display:inline-block;
}


highlight_word{
	display:inline-block;
	background:#DBEDDA;
	box-shadow: inset 0 -3px 4px 2px rgb(89 153 73);
	border-radius: 5px;
    padding: 0px 10px;	
}


answer_holder[value="mc"] ans_holder [role="textarea"]:focus + [js_action="convert_mc_answer"]{
	display:flex;
}


.modify_text_button {
    height: 20px;
    padding: 1px 5px;
    margin: 1px 2px;
    display: inline-flex;
    border: thin solid white;
    border-radius: 5px;
    font-size: larger;
    justify-content: center;
    align-content: center;
    cursor: pointer;
    position: relative;
    align-items: center;
    font-size: 12pt;
    box-shadow: 1px 0px 0px 1px rgb(0 0 0 / 25%);
    overflow: hidden;
}
.modify_text_button:hover{
    border: thin solid white;
    box-shadow: inset 1px -2px 5px 1px rgb(115 154 194), inset 2px 4px 2px 1px rgb(255 255 255);
}



.modify_text_button[active]{
	top:1px;
	background: rgba(0,0,0,0.25);
}

.pop_out{
	display:none;
}
.problem_prob{
	display:flex;
}
.problem_prob textarea{
	display:none;
}

.image_holder:hover  .large_image , .image_holder:hover  .image_options {
	display:flex;
}
.image_holder .large_image{
	z-index:100;
	position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
	display:none;
}


.image_options{
    z-index: 100;
    position: absolute;
    right: 0;
    background: pink;
    font-family: arial;
    font-weight: bold;
    width: 20px;
    height: 20px;
    justify-content: center;
    border-radius: 3px 2px 0px 0px;
    box-shadow: inset 0px 1px 0px 0px #f5978e;
    background: linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
    background-color: #f24537;
    border-radius: 6px;
    border: 1px solid #d02718;
    display: none;
    cursor: pointer;
    top: -20px;
    color: #ffffff;
    height: fit-content;
    font-family: Arial;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0px 1px 0px #810e05;
}

.image_holder img::selection { 
	background: transparent; 
}
img.small_image { 
	cursor:pointer;
	max-width: 75px; 
	max-height:75px; 
	cursor:arrow;
	
}


.options_holder{
	position:relative;
}
.options_holder label{
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:5px;
	width:25px;
	height:25px;
	align-self: center;
	align-items:center;
}




[pop_out_display]{
	display:none;
}
[pop_out_display]:checked + .pop_out{
	display:flex;
	flex-direction:column;
	position:absolute;
	left:100%;
	top:0px;
	background: #c8e1fb;
    border: 1px solid black;
	z-index:100;
}

[problem_style] + div{
	width:100%;
	
}
[problem_style]:checked + div{
	background:blue;
}



[role="textarea"] .image_uploaded{
  -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 */	
}

.custom-file-upload img{
	border:thin solid black;
}

.custom-file-upload input{
	display:none;
}


.sortable-placeholder{
	border:thin solid white;
	background:white;
	height:90px;
	margin:20px 0px;
	display:block;
	border:2px dash black;
}

problemHolder{
	display: grid;
    grid-template-columns: min-content min-content auto;
    user-select: none;
	background:#c8e1fb;
	border: thin solid black;
    box-shadow: 0px 3px 4px rgba(0,0,0,0.25) , inset -1px -1px 2px 0 rgba(0,0,0,0.2);
	border-radius:10px;
	margin: 2px 0px 5px;
	padding:2px 0px 5px;

    display: grid;
    grid-template-columns: min-content min-content auto;
    user-select: none;
    background: #c8e1fb;
    border: 1px solid black;
    box-shadow: 0px 3px 4px rgba(0,0,0,0.25), inset -1px -1px 2px 0 rgba(0,0,0,0.2);
    border-radius: 20px;
    margin: 0px;
    padding: 2px 0px 5px;
	margin-bottom:13px;
}

}
.ui-sortable-helper{
	box-shadow:5px 5px 10px rgba(0,0,0,0.5);
}
.problem_type {
    width: 100%;
    display: flex;
    justify-content: space-around;
    position: relative;
}
problemnumber{
	display:flex;
	align-self:center;
	padding:10px;
}
problemHolder problem{
	display:flex;
	flex-direction:column;
    border-left: thin solid black;
    margin: 5px;
	padding-left:10px;
}
problemHolder input , problemHolder textarea, [role="textarea"]{
	padding:1px;
}


.problem_prob{
	width:100%;
}
.problem_ans{
	width:100%;
	display:flex;
}

select{
	border-radius:10px;
}


input, textarea , [role="textarea"]{
	font-family: times;
    font-size: 1.00em;
	padding-left:5px;
	border: thin solid #8b969e;
	border-radius: 4px;
}

.Problem::-webkit-input-placeholder {   color: #D1BA5C;}
.Problem:-moz-placeholder { /* Firefox 18- */   color: #D1BA5C;  }
.Problem::-moz-placeholder {  /* Firefox 19+ */   color: #D1BA5C;  }
.Problem:-ms-input-placeholder {     color:#D1BA5C;  }



[name="answerBankDistractors"]{
	background-color:#FCF5D8;
}



textarea[name*="correct"] {
	background: #DBEDDA;
	border:1px solid green;
}
textarea[name*="wrong"] {
	background: #F5E4E4;
	border:1px solid red;
}


textarea[name*="correct"]::-webkit-input-placeholder {	color: #77B574;}
textarea[name*="correct"]:-moz-placeholder {	color: #77B574;}
textarea[name*="correct"]::-moz-placeholder {	color: #77B574;}
textarea[name*="correct"]:-ms-input-placeholder {	color: #77B574;}

textarea[name*="wrong"]::-webkit-input-placeholder {	color: #C9A5A5;}
textarea[name*="wrong"]:-moz-placeholder {	color: #C9A5A5;}
textarea[name*="wrong"]::-moz-placeholder {	color: #C9A5A5;}
textarea[name*="wrong"]:-ms-input-placeholder {	color: #C9A5A5;}

.optFIB{
	width:180px;
	height:20px;
}

.optMC{
	display:none;
	width:180px;
	height:20px;
}

.holder{
	width:100%;
	border:thin solid black;
	border-radius:20px;
	background:linear-gradient(#EDF3F7,#D3DFE8);
    box-shadow:0 0 2px #000;
	text-align:left;
	padding-top:5px;
	padding-bottom:5px;
}

.holder.ui-sortable-helper{
    box-shadow:10px 10px 10px rgba(0,0,0,0.25);
}

/*
.holder:first-of-type input[value*="instructions"] , .holder:first-of-type input[value*="instructions"]+span{
	display:none;
}
*/

.holder input[value*="instructions"] , .holder: input[value*="instructions"]+span{
	display:none;
}

textarea.Problem, [role="textarea"]{
	background-color:#FCF5D8;
	padding-bottom:0px;
}

.optInstructions{
	height:20px;
	padding-bottom:0px;
	display:none;
	font-weight:bold;
}




.Problem_display{
	font-family: times;
    font-size: 1.00em;
	padding-left:5px;
	padding:1px;
	background-color:#FCF5D8;
	padding-bottom:0px;
	width: 100%;
    margin-top: 5px;
    overflow: hidden;
    overflow-wrap: break-word;
    resize: horizontal;
    min-height: 21px;
	border-radius: 4px;
    border: thin solid #8b969e;
	position:relative;
	white-space: pre-wrap;
	display:inline-block;
}
.Problem_display:empty:after{
	content: 'hi';
	opacity:0.5;
}




.optTF{
	display:none;
}
.optTF + label{
	border:thin solid rgba(0,0,0,0);
	border-radius:5px;
	text-shadow:1px 1px 1px rgba(0,0,0,0);
	padding:1px 5px;
}

.optTF:checked + label{
	background:linear-gradient(#DBEDDA,#DBEDDA);
	padding:1px 5px;
	border:thin solid black;
	border-radius:8px;
}



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

.correct_answer{
	background: #DBEDDA;
    border: 1px solid green;
}

.wrong_answer{
    background: #F5E4E4;
    border: 1px solid red;
}
ans_holder{
	width:30%;
}

answer_holder[value="fib"]{
	flex-flow:wrap;
}

[placeholder]:empty::before {
    content: attr(placeholder);
    color: #555; 
}

[placeholder]:empty:focus::before {
}
.correct_answer[placeholder]:empty::before{
	color: #77B574;	
}
.wrong_answer[placeholder]:empty::before{
	color: #C9A5A5;	
}

ans_holder textarea{
	display:none;
}
answer_holder{
width:100%;	
}
.add_button_2{
    border: thin solid #277213;
    min-width: 25px;
    border-radius: 5px;
    font-family: arial;
    font-weight: bold;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(
45deg
, #68d14d, #bfffaf);
    color: white;
    text-shadow: 1px 1px black;
	margin-left:5px;
	cursor:pointer;
}


problemHolder input[type=radio][value*="instructions"]:checked ~ problem textarea.Problem{
	font-weight:bold;
}


summary text{
	padding:1px 10px;
}
summary arrow{
	padding: 1px 10px;
}

details drop_under{
	background: var(--gridbg);
    border: 2px solid white;
    position: absolute;
    top: 100%;
    width: 500px;
    box-shadow: var(--box_shadow);
	display:block;
}

description{
	font-style: italic;
    margin-left: 20px;
    display: block;
}
details label{
	width:fit-content;
}
details sublabel{
	width:100%;
	padding:1px 10px;
}

[left_side]{
flex:50;
}
[right_side]{
	margin:5px;
	border-left:2px solid white;
	flex:50;
}


.problem_prob .Problem{
	background:white;
}

problemholder[type=sa] text:before{ content: attr(sa); }
problemholder[type=mc] text:before{ content: attr(mc); }
problemholder[type=la] text:before{ content: attr(la); }
problemholder[type=fib] text:before{ content: attr(fib); }
problemholder[type=tf] text:before{ content: attr(tf); }
problemholder[type=yn] text:before{ content: attr(tf); }


problemholder[type=sa] answer_holder[value="sa"]{display:flex;}
problemholder[type=mc] answer_holder[value="mc"]{display:flex;}
problemholder[type=la] answer_holder[value="la"]{display:flex;}
problemholder[type=fib] answer_holder[value="fib"]{display:flex;}
problemholder[type=tf] answer_holder[value="tf"]{display:flex;}
problemholder[type=yn] answer_holder[value="yn"]{display:flex;}
answer_holder{ display:none; }
[type_description] description{ display:none; } 

drop_under[description="sa"] description[value="sa"]{ display:block;}
drop_under[description="mc"] description[value="mc"]{ display:block;}
drop_under[description="la"] description[value="la"]{ display:block;}
drop_under[description="fib"] description[value="fib"]{ display:block;}
drop_under[description=tf] description[value=tf]{ display:block;}
drop_under[description=yn] description[value=yn]{ display:block;}

drop_under[description="bonus"] description[value="bonus"]{ display:block;}
drop_under[description="example"] description[value="example"]{ display:block;}
drop_under[description="instructions"] description[value="instructions"]{ display:block;}
drop_under[description="normal"] description[value="normal"]{ display:block;}


problem_style_display *{
	display:none;
}
problemholder[problem_style=bonus] problem_style_display bonus{
	display:initial;
}

problemholder[problem_style=example] .Problem{
    background: linear-gradient(
45deg
, #efffd5, #e7fac2);
	border:2px solid green;
	color:#0c390c;
}

problemholder[problem_style=instructions] .Problem{
    background: linear-gradient( 
45deg
 , #d5ecff, #e8f6ff);
    border: 3px double #3474aa;
    color: #0f2e5e;
}

problemholder[problem_style=instructions] .problem_ans,
problemholder[problem_style=instructions] .format_text_holder,
problemholder[problem_style=instructions] .problem_type_holder
{
	display:none;
}


.format_text_holder{
	display:flex;
	align-items:start;
	justify-content: flex-end;
	flex: 20;
}


.style_type_holder{
	display: flex; 
	align-items: center; 
	border: thin solid white; 
	border-radius: 5px;
    box-shadow: 1px 0px 0px 1px rgb(0 0 0 / 25%);
}


.problem_style_holder{
	position:relative; 
	border-right: 2px solid white;
}
.style_type_holder .problem_style_holder:hover{
    box-shadow: inset 1px -2px 5px 1px rgb(115 154 194), inset 2px 4px 2px 1px rgb(255 255 255);
    border-radius: 3px;
}


problemholder[problem_style=bonus] .Problem , problemholder[problem_style=extra] .Problem{
	border:2px solid gold;
	box-shadow: 0px 0px 6px 1px rgb(255 215 0 / 47%);
    background: linear-gradient(
45deg
, #fff7d7, #fffdf4);	
}


.problem_type label sublabel , [truefalseselector] + sublabel , [truefalseselector] + sublabel{
    width: fit-content;
	border: thin solid rgb(99 112 125);
    display: flex;
    justify-content: center;
	position:relative;
	cursor:pointer;
    box-shadow: 2px 2px 2px rgba(255,255,255,0.5) inset, 1px 1px 2px rgba(0,0,0,0.25);
	margin:0px 2px;
	border-radius:4px;
    align-items: center;
	text-align:center;
}

.problem_type sublabel:hover , [truefalseselector]:checked + sublabel{
	top:-1px;
    box-shadow: 2px 2px 2px rgba(255,255,255,0.5) inset, 2px 2px 4px rgba(0,0,0,0.25);
}
[truefalseselector] + sublabel{
	padding:1px 5px;
}
.problem_type input[type=radio]:checked + sublabel{
	top: 1px;
	background: #a7b5c6;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.5) inset;
}

[truefalseselector]:checked + sublabel{
	top: 1px;
	background: #ade2a0;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.5) inset;
}

.prob input[type=text]{
	border:thin solid black;
	margin-bottom:2px;
	border-radius:5px;
}
.prob textarea{
	border-radius:5px;
}
.my_class{
    box-shadow:0 0 2px #000;
}














.handle{
	cursor: -webkit-grab; cursor: grab;
}


entireHolder{
	background-color: #2196F3;
	width:100%;
	margin:auto;
	display:block;
	border-radius:5px;
	padding:0px;
	position:relative;
	border:thin solid black;
    border: thin solid #4e6275;
    background: #c8e1fb;	
}


gridHolder , .ui-state-highlight{
	display:flex;
	flex-direction:column;
	width:100%;
	padding:0px;
}




.ui-sortable-placeholder{
	max-height:32px;
}


headerHolder {
	z-index:100;
	border-bottom: 2px solid black;
    box-shadow: 0px 3px 4px rgba(0,0,0,0.25);
}


#sortable{
	counter-reset: section;
}
problemholder[problem_style=""] problemNumber::before,
problemholder[problem_style="normal"] problemNumber::before {
  counter-increment: section;
  content: counter(section);
}


selector , dropUnder{
	white-space:nowrap;
	width:100%;
	border-radius:10px 10px 10px 10px;
	display:inline-block;
	list-style:none;
	cursor:pointer;
	border:thin solid black;
	background:linear-gradient(top,#ffffff,#EDE6D3);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#EDE6D3));
	/* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #ffffff, #EDE6D3);
	/* Firefox 3.6+ */ background: -moz-linear-gradient(top, #ffffff, #EDE6D3);
	/* IE 10 */ background: -ms-linear-gradient(top, #ffffff, #EDE6D3);
	/* Opera 11.10+ */ background: -o-linear-gradient(top, #ffffff, #EDE6D3);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	position:relative;
	box-sizing:border-box;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
	flex-direction:column;
}
selector:hover{
	box-shadow:
	2px 2px 4px rgba(0,0,0,0.25), 
	-1px 0px 2px rgba(0,0,0,0.5) inset, 
	1px 0px 2px rgba(0,0,0,0.5) inset, 
	2px 0px 3px 3px rgba(0,0,0,0.2) inset
}


dropUnder{
	z-index:1000;
	position:absolute;
	left:0px;
	top:100%;
	border-radius:0px 0px 10px 10px;
	padding:0px 0px 5px 0px;
	max-height:50vh;
	overflow-y:auto;
    min-width: 100%;
	transform: scale(1,0);	
	width: auto;
}
selector.activated{
	border-radius:10px 10px 0px 0px;
	box-shadow: none;
	
}



selector.activated dropUnder{
	transform: scale(1,1);
	transform-origin: 00% 00%;
	transition: transform .05s ease;
}

dropUnder item{
	padding:2px 2px;
	border:thin solid rgba(0,0,0,0);
	position:relative;
	overflow:hidden;
	display:block;
}
dropUnder item:hover{
	border:thin solid white;
	background: rgba(0,0,0,0.2);
}
item[none_available]{
	color:red;
}
table{
	border-collapse: collapse;
}

selectorText{
    display: flex;
    align-items: center;
    justify-content: space-between;
	padding: 1px 4px;
	margin-left:10px;
	overflow:hidden;
}

selectorText:after{
	font-size:0.5em;
	content:' ▼';
	margin-left:10px;
	display:inline-block;
}


.customholder{
	width:auto;
	background:white;
	cursor:auto;
}
customizeoptions_show_hide{
	position: absolute;
    right: 0;
    display: inline-flex;
    place-items: center;
    border: thin solid white;
    background: rgba(0,0,0,0.25);
    border-radius: 5px;
    padding: 1px 20px;
    cursor: default;
}
customizeoptions_show_hide:after{
	content:'\279C';
	transform: rotate(00deg);
	transition:transform .5s ease;
}
customizeoptions_show_hide[show]:after{
	transform: rotate(90deg);
	transition:transform .5s ease;
	content:'\279C';
}

customizeoptions{
	white-space:normal;
	display:none;
}

customizeoptions_show_hide[show] ~ customizeoptions{
	display: initial;
}

preview td.var1{
	display:none;
}
example{
    position: relative;
    padding: 0px 15px;
    border: thin solid #000000;
    border-radius: 5px;
    margin: 2px;
    background: white;
    cursor: pointer;
	margin:auto;
}
smallPreview{
	cursor:pointer;
	display:flex;
}
largePreview{
	display:none;
	background:white;
	border:thin solid black;
}


largePreview text{
	font-weight:bold;
	font-size:.8em;
	margin:5px 0px;
	display:block;
	width:100%;
	text-decoration:underline;
}

largePreview text[type="answer"]{
	margin-top:15px;
}


example:hover largePreview , largePreview[display]{
	display:block;
	position:absolute;
    bottom: calc(100% + 5px);
    right: 0%;
	padding:5px;
	max-height: 50vh;
    overflow: hidden;
    max-width: 50vw;	
	z-index:100;
}

example .WhiteFont{
	color:red;
}

example .AnsAnswer {
    text-align: left;
    font-size: 14pt;
    border-bottom-width: thin;
    border-bottom-style: none;
    border-bottom-color: #000;
    width: auto;
    vertical-align: bottom;
    font-weight: bold;
}


largePreview[w="1"]{
	width:calc(1*1.65in);
}
largePreview[w="2"]{
	width:calc(2*1.65in);
}
largePreview[w="3"]{
	width:calc(3*1.65in);
}
largePreview[w="4"]{
	width:calc(4*1.65in);
}

subjectbox heading{
	font-weight:bold;
	margin:5px;
	cursor:initial;
}

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

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

gridRow[nop]{
	display:none;
}