/* 
	Samraworld Englist Learning Center 2020 CSS 
 
	The default characteristics of all pages

	background-color: #6b06ad;   THIS IS THE STANDARD ACCENT COLOR - FOOTER, NAV AND HIGHLIGHTS
	background-color: #5134F1;  THIS IS THE STANDARD BLUE COLOR FOR TEACHERS - BUTTONS AND TOP HEADER 
	background-color: #18823e;  THIS IS THE STANDARD GREEN COLOR FOR STUDENTS - BUTTONS AND TOP HEADER 
	background-color: #888886; THIS IS THE STANDARD COLOR FOR ADMINS 
*/

body {
	font-size: 85%;
 	background-color: #888886;
 	font-family:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/*  MAIN COLOR */
.std_color_1 {
	background-color: #888886;	
}

/*  ACCENT COLOR */
.std_color_2 {
	background-color: #6b06ad;	
}

img {
    float: left;
    margin: 0 0 0 0;
}

p {
    display:block;
/*    display:inline-block; */
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
    margin-inline-start: 5px;
    margin-inline-end: 0px;
}

::placeholder {
	color: #d4c4c4;
	font-style: italic;
}

.medium-editor-placeholder::after {
  color: #d4c4c4 !important;
  margin-left: 5px !important;
}

.line {
	width: 100%; 
	height: 4px; 
	background: #7a7a7a;  
	overflow: hidden;
	margin-top: 2px;
	margin-bottom: 2px;
}

.greyline {
	width: 100%; 
	height: 2px; 
	background: #ffeaea;
	overflow: hidden;
	margin-top: 2px;
	margin-bottom: 2px;
}

.EmbeddedReportContainer {
	float: left;
	width: 75%;
	margin-top: 5px;
	margin-left: 1%;
	background-color: snow;
}

.InfoContainer {
	float: left;
	width: 75%;
	margin-top: 5px;
	margin-left: 1%;
	background-color: snow;
	min-height: calc(78vh - 70px);
}

.Info {
	color: #888886;
	padding-left: 30px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.InfoHeader {
	margin-left: 10px;	
}

.InfoBody {
	margin-left: 10px;		
}

.bot1 {
	color: white !important;
	background-color: #bce8f8;	
}
.bot2 {
	color: white !important;
	background-color: #f6ff91;	
}
.bot3 {
	color: white !important;
	background-color: #ff5757;	
}

.push {
	clear: both;
}

.input_text {
	float: left;
    margin-top: 10px;	
   	width: 80%;
}

.input_text_wrap_textarea {
	float: left;
    margin-top: 10px;
   	width: 70%;
  background-color: white;
}

.input_text_half {
	float: left;
    margin-top: 10px;	
   	width: 40%;
}

.input_number {
	float: left;
    margin-top: 10px;	
}
        
.input_dropdown {
	float: left;
    margin-top: 10px;	
    margin-bottom: 1px;
   	width: 30%;
}

.input_radio {
	float: left;
    margin-top: 10px;	
    margin-bottom: 1px;
   	width: 10%;
}

.box_checkbox_lg {
	float: left;
	margin-right: 5px;
	margin-top: 5px;
	display: inline-block;
	background-color: white;
	padding: 5px;
/*	border: solid #ffbcbc;*/
	border: solid #ccc;
    border-radius: 4px;
	width: 60%;
}

.box_checkbox_sm {
	float: left;
	margin-right: 5px;
	margin-top: 5px;
	display: inline-block;
	background-color: white;
	padding: 5px;
/*	border: solid #ffbcbc;*/
	border: solid #ccc;
    border-radius: 4px;
	width: 20%;
}

/* used by header for logout and profile links */
/* and left side panel for some links */
a {color: black; text-decoration: none;}
a:hover { color: #a5082d }

a.tablesort {
	color: white;
	text-decoration: none;
}
a.tablesort:hover { color: #6b06ad !important }

a.hyperlink:link    { color: black; text-decoration: none;}    /* unvisited links */
a.hyperlink:visited { color: black; text-decoration: none; }   /* visited links   */
a.hyperlink:hover   { color: #6b06ad; } /* user hovers     */
a.hyperlink:active  { color: black; text-decoration: none; }   /* active links    */

a.cool {color: black; text-decoration: none;}
a.cool:hover { color: #a5082d; text-decoration: none; font-weight: bold }

/* BUTTONS	 				*/
/* SW 2019 used by all pages 	*/
input.submit {
	color: white;
	background-color: #6b06ad;  /* THIS IS THE STANDARD COLOR FOR TEACHERS  */
	font-weight: bold;
	padding: 5px;
	margin: 5px; 
	border-radius: 5px;
	width: 80px;
} 

/* BUTTONS	 				*/
/* SW 2019 used by all pages 	*/
input.submit:hover {
  background-color: #eb7d7d;
}

input.submit_long {
	color: white;
	background-color: #6b06ad;  /* THIS IS THE STANDARD COLOR FOR ADMINS  */
	font-weight: bold;
	padding: 5px;
	margin: 5px; 
	border-radius: 5px;
	width: 250px;
} 

/* BUTTONS	 				*/
/* SW 2019 used by all pages 	*/
input.submit_long:hover {
  background-color: #eb7d7d;
}

button.submit {
	color: white;
	background-color: #6b06ad;
	font-weight: bold;
	padding: 5px;
	margin: 5px; 
	border-radius: 5px;
	width: 250px;

} 

/* BUTTONS	 				*/
/* SW 2019 used by all pages 	*/
button.submit:hover {
  background-color: #eb7d7d;
}

#greyout {
	color: gray;
}

/* use for the error panel stuff */

/* used in the second column for its content */
table.errorpanel {
	border-color: #600;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-spacing: 0;
	width: 70%;
}

th.errorpanel {
	background-color: #8f0000;
	color: Snow;
	font-weight: bold;
	vertical-align: top;
	border: thin Blue;
}

td.errorpanel {
	margin: 10px;
	padding-left: 4px;
	padding-right: 4px;
	background-color: #ffdecc;
	font-size: small;
	vertical-align: top;
}

.buffer {
	clear: both;
	margin-top: 25px;
}

.cleardiv {
	clear:both;
}

/* DECISION WIZARD PANELS */
#WizardQuestionPanel {
	float: left;
	width: 75%;
        /*height: 500px;*/
	font-size: medium;
	margin-top: 5px;
	padding-left: 1%;
	padding-right: 1%;
	background-color: #ffffff;
	border: double #FF7F50;
}

#WizardProgressPanel {
	float: left;
	width: 16%;
        height: 500px;
        overflow-y: 
        scroll;
	font-size: small;
	margin-top: 5px;
       	margin-left: 5px;
	padding-left: 1%;
	padding-right: 1%;
	background-color: #ffffff;
	border: double #FF7F50;
}

#WizardHelpPanel {
	float: left;
	width: 95%;
	font-size: medium;
	margin-top: 5px;
        padding-left: 1%;
	padding-right: 1%;
	background-color: #E5E8E8;
	border: double #FF7F50;
}

#WizardPROMPTSpanel {
	float: left;
	width: 100%;
	margin-top: 5px;
	margin-left: 5px;
}

#rightMETApanel {
	float: left;
	width: 30%;
}

.iconbar{
	float: left;
	margin-top: 5px;
	margin-bottom: 2px;	
}

/* =====================================NAV============================================== */
/* needed for drop down navbar */
#navbar, #navbar ul {
	/* all lists */
	border-collapse: collapse;
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	border: #48D1CC;
	background-color: Lime;
}

#navbar a {
	display: block;
	width: 8em;
	padding: 5px;
	background-color: #ffffff;
/*	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;*/
	border-bottom: Fuchsia;
	text-decoration: none;
	border: thin solid #FF7F50;
}

#navbar li {
	/* all list items */
	float: left;
	width: 8em; /* width needed or else Opera goes nuts */
	font-size: small;
	border: Aqua;
}

#navbar li ul {
	/* second-level lists */
	position: absolute;
	width: 8em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	background-color: Purple;
}

#navbar li:hover ul, #navbar li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

/* =====================================FIELDSET============================================== */
/* new stuff may 2020 */

fieldset {
    font-family: sans-serif;
    border: 2px solid #888886;
    background: #ddd;
    border-radius: 5px;
    padding: 15px;
}

fieldset legend {
    background: #6b06ad;
    color: #fff;
    padding: 5px 10px ;
    /* font-size: 15px; */
    border-radius: 5px;
    box-shadow: 0 0 0 5px #ddd;
    /* margin-left: 20px; */
}

/***********************************************************/
/* Tool Tips CSS 

Example:	
<div class="tooltip">Hover over me
  <span class="tooltiptext">Translate the english to japanese</span>
</div>
	
*/

.tooltip {
  position: relative;
  display: inline-block;
/*  border-bottom: 1px dotted black; */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #888886;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/***********************************************************/
/* HELP PAGE CSS */
#Helppanel {
	float: left;
	width: 100%;
	font-size: small;
	margin-top: 5px;
	padding-left: 10%;
	padding-right: 10%;
	background-color: snow;
	border: double #eb7d7d;
	display: none;
}

#Helpindex {
	float: left;
	border-style: groove;
	margin-left: 1%;
	padding: 2em;
}

#Helpcontent{
	float: left;
	width: 100%;
}

img.help {
    float: left;
    margin: 0 20px 20px 0;
}

p.help {
    text-align: justify;
    text-indent: 2em;
}

h1.help{
	font-size: large;
	text-align: left;
	margin-left: 190px;
}

h2.help{
	font-size: medium;
	text-align: left;
	margin-left: 100px;
}

h3.help{
	font-size: small;
	text-align: left;
	text-indent: inherit;
}

.highlight {
	color:#4d2ebb;
}

/* ===========================================CHARTS================================================== */
/* input style one for general input */

.chartpanel {
	float: left;
	width: 100%;
	margin-right: 5px;
	border-color: red;
	margin-top: 35px;
	margin-bottom: 10px;
}

.chartview-big{
	min-width: 710px; height: 410px; z-index: -1; margin: 0 auto;
	display: inline-block;
}
.chartview-small{
	min-width: 710px; height: 410px; z-index: -1; margin: 0 auto;
	display: inline-block;
}

div#decisionbuttons *{display:inline}

.line_break{
    width:100px;
    height: 5px;
    float: left;
    color: black;
    background-color: rgba(255,255,255,.5);

}

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}