html { font-size: 14px; font-family: 'Nunito', sans-serif; min-width: 400px; letter-spacing: 0.5px; }
body { padding: 0; margin: 0; background: slategray; width: 100%; }


/* .active { background: yellow; } */
input[type="text"] { outline: none; font-size: 16px; margin-top: 1rem; -webkit-appearance: none; width: calc(100% - 4.5rem); margin-left: 0.5rem; }

#all { max-width: 764px; margin: 2rem auto; background: #f9fbfc; padding: 2rem 1rem; border-radius: 1rem;  }
#success { display: block; margin-top: 2rem; display: none; }


#title { padding: 0 1.5rem; border-bottom: 0px white solid;  }
#quiz { padding: 0 1.5rem 1rem 1.5rem; text-align: left; }
#curr_quest { font-size: 1.65rem; font-weight: bold; margin-bottom: 0; text-align: left; margin-top: 1rem; margin-bottom: 1rem; }
#multi { color: gray; margin-top: 1rem; display: none; margin-bottom: 1rem; }

#curr_opt { list-style: none; padding: 0; margin-bottom: 2rem; text-align: left; margin-left: -0.5rem; margin-right: -0.5rem;  }
#curr_opt li { transition: all 0.5s ease-out; color: gray;  margin: 0; background: white; padding: 0.95rem; margin: 0 0.5rem 0.85rem 0.5rem; border-radius: 15px; border: 0px solid #e5e7ea; cursor: pointer; font-weight: 400; }
#curr_opt span { display: inline-block; vertical-align: top; margin-left: 1rem; }
#descr { display: block !important; }

#curr_opt li::before { 
	content: '';
   display: inline-block;
   margin-top: ;
   width: 14px;
   height: 14px;
   border: 3px solid #e5e7ea;
   -moz-border-radius: 1rem;
   -webkit-border-radius: 1rem;
   border-radius: 1rem;
   background-color: ; vertical-align: top; }

#curr_opt li.active { color: black; border-color: ; background: white;  -webkit-box-shadow: 0px 3px 16px -5px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 3px 16px -5px rgba(0,0,0,0.25);
box-shadow: 0px 3px 16px -5px rgba(0,0,0,0.25);
 } /* blueviolet,mediumpurple */

#curr_opt li.active::before { content: ''; 
    display: inline-block;
   margin-top: ;
   width: 14px;
   height: 14px;
   border: 3px solid #ee7d00;
   -moz-border-radius: 1rem;
   -webkit-border-radius: 1rem;
   border-radius: 1rem;
   background-color: ; vertical-align: top; }

.btn { padding: 0.35rem 1.15rem;
    border-radius: 2rem;
    display: inline-block; 
    cursor: pointer; 
    font-weight: ;
    transition: all 0.5s ease-out;
     }
.inactive { opacity: 0.5; }

#next.blink { transition-duration: 1s; background: red; }

#back { background: ; color: gray; border: 0 solid #e5e7ea; margin-left: -1rem; margin-right: 2rem;  }

#next,#send { background: #ee7d00;  /* #7b6eff */
    color: white;
    border: 3px solid #ee7d00; 
    margin-left:0.5rem;
    cursor: pointer; 
    width: 120px;}

#next i,#send i { font-style: normal; display: inline-block; padding-top: 0.4rem; }

#next b, #send b { padding: 0.4rem 0.6rem;
    background: #d47100;
    border-radius: 3rem;
    float: right; 
    margin-right: -0.75rem; }
    
.hide_quest { transition: all 0.5s ease-out; opacity: 0; }
.show_quest { transition: all 0.5s ease-out; opacity: 1; }
	 
/* input */
.new_text { border: 2px solid lightgray; border-radius: 15px; padding: 0.95rem 1.55rem; font-size: 1rem; color: black; letter-spacing: 0.5px; width: calc(100% - 3rem); }
#curr_opt .img { margin: 0.5rem 0.5rem; display: inline-block; width: calc((100% - 4rem)/4); padding: 0 0 1rem 0; }
#curr_opt .img::before { display: none !important; } 
#curr_opt .img img { width: 100%; height: 100%; opacity: 0.8; padding-bottom: 0.5rem;  border-top-left-radius: 15px;  border-top-right-radius: 15px; }
#curr_opt .active img { opacity: 1; }


@media screen and (max-width: 520px) {
	#curr_opt .img { width: calc((100% - 2rem)/2); }
	#all { margin: 0 auto; padding: 1rem 0; border-radius: 0; }
	body { margin: 0; background: #f9fbfc; }
	#curr_quest { }
	
}