[placeholder]:empty:focus::before{}

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

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

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









select[name="wstype"]{
	width:300px;
	appearance: base-select;
	padding: 1px 5px;
	text-transform: capitalize;
}
select[name="wstype"] selectedcontent{
	display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}



::picker(select) {
	appearance: base-select;
	max-width: 300px;
	padding: 0;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

select[name="wstype"] option::before , select[name="wstype"] option::checkmark {
	display: none;
}

select[name="wstype"] option {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  &:checked {
    border-color: black;
  }
  text-transform: capitalize;
}

select[name="wstype"] button {
  appearance: none;
  background: none;
  border: 1px solid white;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
}


select[name="wstype"] img{
	height:25px;
}










modal_holder{
	background: linear-gradient(138deg, white, #f0f8ff); 
	background-attachment:fixed;
}


.problem_display{
	max-width: 7in;
	display: inline-block;
	margin-top: 5px;
	min-height: 21px;
	overflow: hidden;
	overflow-wrap: break-word;
	padding-bottom: 0px;
	position: relative;
	resize: horizontal;
	white-space: pre-wrap;
	flex:80; 
	width:100%; 
	padding:3px;
}

[name="problem_type"]{
	/* display:none; */
}




[page="problem_type"] [update_value="sa"]:hover ~ helper_holder [item="sa"]{
	display:flex;
}
[page="problem_type"] [update_value="fib"]:hover ~ helper_holder [item="fib"]{
	display:flex;
}
[page="problem_type"] [update_value="mc"]:hover ~ helper_holder [item="mc"]{
	display:flex;
}
[page="problem_type"] [update_value="tf"]:hover ~ helper_holder [item="tf"]{
	display:flex;
}
[page="problem_type"] [update_value="la"]:hover ~ helper_holder [item="la"]{
	display:flex;
}













[name="problem_type"][value="sa"]:checked ~ [page="problem"] answer_holder[value="sa"]{
	display:flex;
}
[name="problem_type"][value="fib"]:checked ~ [page="problem"] answer_holder[value="fib"]{
	display:flex;
}
[name="problem_type"][value="mc"]:checked ~ [page="problem"] answer_holder[value="mc"]{
	display:flex;
	flex-wrap: wrap;
    justify-content: space-between;
}
[name="problem_type"][value="tf"]:checked ~ [page="problem"] answer_holder[value="tf"]{
	display:flex;
	gap: 40px;
}
[name="problem_type"][value="la"]:checked ~ [page="problem"] answer_holder[value="la"]{
	display:flex;
}


answer_holder[value="mc"] ans_holder{
	width:23%;
}




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


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

[modal_id="main_modal"] content_holder[page="problem"]{
	flex-wrap:nowrap;
	padding: 40px;
	height: auto;
}

.problem_holder{
	display:flex; 
	flex-direction:column; 
	justify-content:center; 
	align-items:center; 
	width:100%; 
	max-width:7in;
	gap: 15px;
}
.problem_holder fieldset{
	width:100%;
	padding:2px 10px;
	border-radius:5px;
	border:none;
	/* border-top:thin solid black; */
}

.problem_holder fieldset legend{
	font-weight:bold; 
	padding-left:5px;
	width:100%;
}

[modal_id="main_modal"][type="ins"] .answer_fieldset , [modal_id="main_modal"][type="ins"] .problem_fieldset legend{
	display:none;
}


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

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


answer_holder{
	display:none;
}
.problem_fieldset textarea , .answer_fieldset textarea{
	/* display:none; */
}

ans_holder {
    width: 30%;
}

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

.problem_holder input[type="radio"] , .problem_holder input[type="checkbox"] , .problem_holder textarea {
    display: none;
}

span.highlight_word { 
background:#ffec8b; 
padding:0 .1em; 
border-radius:.15em; 
color:green;
font-weight:bold;
text-decoration:underline;
}

preview_item displayed answer{
	width: 100%;
    display: flex;
    justify-content: left;
    font-weight: bold;
    color: green;
    gap: 50px;
}

preview_item[type="ins"]{
	counter-increment: none;
	box-shadow:none;
	font-weight:bold;
}
preview_item[type="ins"] displayed{
	border:none;
}
preview_item[type="ins"]:hover displayed{
	border:thin solid black;
}
preview_item[type="ins"] answer{
	display:none;
}

preview_item[type="ins"] problem_number::before {
	content: "";
}



preview_item[type="mc"] displayed answer{
    justify-content: space-between;
}

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

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




answer_holder[value="tf"] input + sublabel {
    border: 1px solid #3f6276;
    border-radius: 8px;
    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="tf"] sublabel:hover {
    padding: 1px 5px;
    border: thin solid black;
    border-radius: 8px;
    background: #9bcae5;
    border: 1px solid #3f6276;
}






answer_holder[value="mc"] input + sublabel {
    border: 1px solid #3f6276;
    border-radius: 8px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
    padding: 1px 5px;
    cursor: pointer;
}

answer_holder[value="mc"] input:checked + sublabel {
    padding: 1px 5px;
    border: thin solid black;
    border-radius: 8px;
    background: #DBEDDA;
    border: 1px solid green;
}

answer_holder[value="mc"] sublabel:hover {
    padding: 1px 5px;
    border: thin solid black;
    border-radius: 8px;
    background: #9bcae5;
    border: 1px solid #3f6276;
}




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 [role="textarea"]:focus + [js_action="convert_mc_answer"] {
    display: flex;
}

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

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

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

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



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

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