/**!
 * Samraworld ELC 2022
 * @file sw_common.css
 * @desc  General css setting for site wide usage.
 * @version v3 2022-01-14 - added this header info.
 * @version v6 2026-08-23 - Brand-token layer: :root --brand / --brand-dark as the
 *                          single source of truth for the rebrand (Eigo Wakaru).
 *                          Legacy --sw-brand-color kept as an alias. Indirection
 *                          only — values preserve the current students greens.
 * @version v6 2026-08-24 - Expanded to the full Eigo Hanasou brand theme: added
 *                          --brand-darker (var(--brand-darker)), --brand-accent (#eb7c7c),
 *                          --brand-accent-hover (#eb7d7d) tokens and swept their
 *                          literals. Whole-site reskin is now a :root edit.
 * @version v6 2026-08-25 - LIVE Eigo Hanasou palette: flipped the brand tokens from
 *                          green to teal/coral (--brand teal, --brand-accent coral),
 *                          added --brand-navy / --brand-orange / --brand-soft-bg /
 *                          --brand-line for the new roles (navy text+footer, orange
 *                          spark, soft bg). Header→white + footer→navy live in
 *                          sw_navbar.css / sw_footer.css. Logo swapped to the navy
 *                          Eigo Hanasou wordmark (Header A: white bar, navy text).
 * @author Charles A. Samra <charles@samraworld.net>
 * @see {@link teachers.samraworld.net }
 */
/************************************************************************************************************************************/

/* Brand typography (Eigo Hanasou): Baloo 2 (rounded display) + Nunito (Latin body),
   with M PLUS Rounded 1c as the Japanese companion (matched roundness, covers JP +
   furigana). Limited weights to keep the JP payload reasonable; swap so text paints
   immediately. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

:root {
  /* ========================================================================
     EIGO HANASOU BRAND THEME — single source of truth.
     The brand palette lives ONLY here; the rest of the CSS references these
     tokens, never a literal. Reskinning the whole site = editing these values.
     Current values preserve the existing (Samraworld students) palette, so this
     layer is purely structural — nothing changes visually until the values do.
     ======================================================================== */
  --brand:              #11b8b5;  /* PRIMARY   — links, accents, active nav, buttons   */
  --brand-dark:         #0e9b98;  /* dark teal — button/hover depth                    */
  --brand-darker:       #0a7c7a;  /* darkest   — gradient ends, deep fills             */
  --brand-accent:       #ff4f5e;  /* ACCENT    — coral: badges, highlights, marks      */
  --brand-accent-hover: #e63c4b;  /* accent hover — coral hover state                  */
  --brand-on:           #ffffff;  /* on-brand  — text/icon colour over a brand fill    */

  /* New roles the green theme lacked (Eigo Hanasou palette): */
  --brand-navy:         #0b2a66;  /* NAVY      — headings, body text, footer, contrast */
  --brand-navy-2:       #12377f;  /* navy-2    — footer gradient / hover navy           */
  --brand-orange:       #ff9800;  /* orange    — tiny attention accents (the spark)     */
  --brand-soft-bg:      #f5f8fa;  /* soft      — secondary backgrounds, cards           */
  --brand-line:         #e6ecf3;  /* hairline  — borders on white (header underline)    */
  --brand-muted:        #51607d;  /* muted     — navy-tinted secondary text on light     */

  /* Typography (bilingual EN/JP): Latin font first, JP font second — the browser
     picks per-glyph, and the two are matched in roundness so mixed strings cohere. */
  --font-display: 'Baloo 2', 'Zen Maru Gothic', ui-rounded, system-ui, sans-serif;
  --font-body:    'Nunito', 'Zen Maru Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* legacy alias — keeps existing var(--sw-brand-color) references working */
  --sw-brand-color: var(--brand-dark);
}

/*
	The default characteristics of all pages

	background-color: #eb7c7c;  THIS IS THE STANDARD REDDISH COLOR - FOOTER, NAV AND HIGHLIGHTS
	background-color: #5134F1;  THIS IS THE STANDARD BLUE COLOR FOR TEACHERS - BUTTONS AND TOP HEADER 
	background-color: #0e6630;  THIS IS THE STANDARD GREEN COLOR FOR STUDENTS - BUTTONS AND TOP HEADER 			

Color palette coordination:

#75816b **
#828d79
#909A88 **
#9ea697
#acb3a6 **
#BAC0B5
#c7ccc3 <== used in quiz
#d5d9d2
#e3e5e1 <== used in quiz
#f1f2f0

black tint
#174621
#185d2a
#157532
#0c8e3b	
#4aa15a
#71b47a
#95c79a
#b9dabb
#dcecdc

gray tint

#247642
#1e7c40
#0e6630  <== new base color for heading and buttons
#12883d
#0c8e3b	 <== old base color
#069439
#009a38

*/
html {
    height: 100%;
    /* Brand base size: 1rem = 17px (106.25% of the default 16px), so rem-based
       sizing — including small captions/meta — scales up for comfortable
       bilingual EN/JP reading. Uses % (not px) so it still respects user zoom. */
    font-size: 106.25%;
}

/*  Bootstrap will overwrite these unless they are !important.  Leaving them here anyway as defaults in case a page is not using bootstrap.*/
body {
	font-size: 85%;
 	background-color: var(--brand-dark) !important;
 	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";
}

.swcontainer {
	margin-top: 5px;
	min-height: calc(100vh - 180px);
	background-color: snow;
}

/* left panel navigation */
.navpanel_bs {
	background-color: #e3e5e1;
	margin: 5px;
	min-width: 200px;
	padding-bottom: 3px;
}

/* right panel navigation */
.sidepanel {
	float: left;
	vertical-align: top;
	width: 100%;
	margin: 5px;
}

/* Blanket "no copy" on every <p> used to live here. It's now toggled
   site-wide via the $PREVENT_COPY flag in students/config/Config.php
   (injected by the LookAndFeel*.shtml files). The .no_copy class below
   stays available for per-element opt-in regardless of that flag. */

.no_copy {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
/*
&&&&&&&&&  FOR RIGHT SIDEPANELS %%%%%%%%%%%%%	
*/
div.sidepanel_bs {
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: #f1f2f0;
	min-width: 200px;
	padding-bottom: 3px;
}

div.sp_header {
	background-color: var(--brand-dark);
	color: white;
}

p.sp_header_inline {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;	
	padding: 5px;
}

div.sp_body {
	color: black;
}

div.sp_body_overset {
	margin: 5px; 
	background-color:snow;
}

p.sp_inline_raw {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin-left: 5px;
    margin-right: 5px;	
}

p.sp_inline {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;	
    margin: 5px;
/*    font-size: 1rem;*/
    font-size: medium;
}
/*
&&&&&&&&&  END %%%%%%%%%%%%%	
*/

div[class*='col-'] {
	padding-left: 5px;
	padding-right: 5px; 
}

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

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

p.small {
	font-size: small;	
}

::placeholder {
	color: var(--brand-accent-hover);
	font-style: italic;
}

.line {
	width: 100%; 
	height: 4px; 
	background: var(--brand-accent);   /* THIS IS THE STANDARD REDDISH COLOR   */
	overflow: hidden;
	margin-top: 2px;
	margin-bottom: 2px;
}

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

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

.InfoHeader {
	margin-left: 10px;	
}

.InfoBody {
	margin-left: 10px;		
}

.push {
	clear: both;
}

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

.cleardiv {
	clear:both;
}

/* used by header for logout and profile links */
/* and left side panel for some links */
a {color: black; text-decoration: none;}
a:hover { color: var(--brand-accent);}

a.tablesort {
	color: white;
	text-decoration: none;
}
a.tablesort:hover { color: var(--brand-accent) }

A.hyperlink:link    { color: black; text-decoration: none;}    /* unvisited links */
A.hyperlink:visited { color: black; text-decoration: none; }   /* visited links   */
A.hyperlink:hover   { color: var(--brand-accent); } /* user hovers     */
A.hyperlink:active  { color: black; text-decoration: none; }   /* active links    */

/* BUTTONS	 				*/
/* SW 2019 used by all pages 	*/
input.submit {
	color: white;
	background-color: var(--brand-dark);  /* THIS IS THE STANDARD GREEN COLOR FOR STUDENTS  */
	font-weight: bold;
	padding: 5px;
	margin: 5px; 
	border-radius: 5px;
	width: 80px;
} 

/* BUTTONS	 				*/
/* SW 2019 used by all pages 	*/
input.submit:hover {
  background-color: var(--brand-accent-hover);
}

button.submit {
	color: white;
	background-color: var(--brand-dark);
	font-weight: bold;
	padding: 5px;
	margin: 5px; 
	border-radius: 5px;
	width: 100px;	
} 

/* BUTTONS	 				*/
/* SW 2019 used by all pages 	*/
button.submit:hover {
  background-color: var(--brand-accent-hover);
}

button.wide100 {
	width: 100px;	
}

/* make a anchor tag with href simulate a button */
a.button {
	color: white;
	background-color: var(--brand-dark);
	font-weight: bold;
	margin: 5px; 
	border-radius: 5px;
	width: 300px;	
    cursor: pointer;
    text-align: center;
    padding: 10px 10px;
    border: black;
        display: inline-block;
}

a.button:hover {
  background-color: var(--brand-accent-hover);
  color: white;
  text-decoration: none;
}

#greyout {
	color: gray;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: var(--brand-dark) !important;
}

.btn-outline-success {
    color: #e3ede5 !important;
    background-color: var(--brand-dark) !important;
}

.btn-outline-warning {
    color: #e3ede5 !important;
    background-color: var(--brand-accent) !important;
}

.btn-secondary {
    color: #e3ede5 !important;
    background-color: var(--brand-dark) !important;
}

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

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

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

fieldset {
    font-family: sans-serif;
    border: 2px solid var(--brand-dark);
    background: #ddd;
    border-radius: 5px;
    padding: 15px;
}

fieldset legend {
    background: var(--brand-dark);
    color: #fff;
    padding: 5px 10px ;
    font-size: 15px;
    border-radius: 5px;
    box-shadow: 0 0 0 5px #ddd;
    margin-left: 20px;
}

.fieldset
{
	background-color: #fff4f4
	max-width:1000px;
	padding:6px;	
    -webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-left: 15px;
	margin-right: 15px;
}

.myfieldset2 {
 border: 2px solid var(--brand-accent-hover);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  /*-webkit-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);
  box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);*/
}

fieldset.roles
{
	background-color:#8aafee;
	max-width:550px;
	padding:6px;	
    -webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

legend {
    background: #1F497D;
    color: #fff;
    padding: 5px 10px ;
    font-size: 17px;
    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: var(--brand-dark);
  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 var(--brand-accent-hover);
	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;
    }
}

@media screen and (max-width: 550px) {

.sidepanel {
	float: left;
	vertical-align: top;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0;
}

.swcontainer {
	min-height: 0;
}
p.sp_inline {
    font-size: 0.8rem;
}
}
/* ============================================================================
   BRAND TYPOGRAPHY — site-wide (Eigo Hanasou). Latin-first / JP-second per-glyph
   fallthrough; base size comes from the 17px root above. `html body` (0,0,2)
   outranks Bootstrap 4's `body` rule so the brand faces win without !important.
   ============================================================================ */
html body {
    font-family: var(--font-body);
    line-height: 1.65;
}
html body :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-display);
    line-height: 1.2;
}