/**!
 * Samraworld ELC 2022
 * @file sw_common.css
 * @desc  General css setting for site wide usage.
 * @version v3 2022-01-14 - added this header info.
 * @author Charles A. Samra <charles@samraworld.net>
 * @see {@link teachers.samraworld.net }
 */
/************************************************************************************************************************************/

:root {
  --sw-brand-color: #0e6630;
}

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

/*  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: #0e6630 !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: #0e6630;
	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: #eb7d7d;
	font-style: italic;
}

.line {
	width: 100%; 
	height: 4px; 
	background: #eb7c7c;   /* 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: #eb7c7c;}

a.tablesort {
	color: white;
	text-decoration: none;
}
a.tablesort:hover { color: #eb7c7c }

A.hyperlink:link    { color: black; text-decoration: none;}    /* unvisited links */
A.hyperlink:visited { color: black; text-decoration: none; }   /* visited links   */
A.hyperlink:hover   { color: #eb7c7c; } /* 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: #0e6630;  /* 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: #eb7d7d;
}

button.submit {
	color: white;
	background-color: #0e6630;
	font-weight: bold;
	padding: 5px;
	margin: 5px; 
	border-radius: 5px;
	width: 100px;	
} 

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

button.wide100 {
	width: 100px;	
}

/* make a anchor tag with href simulate a button */
a.button {
	color: white;
	background-color: #0e6630;
	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: #eb7d7d;
  color: white;
  text-decoration: none;
}

#greyout {
	color: gray;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #0e6630 !important;
}

.btn-outline-success {
    color: #e3ede5 !important;
    background-color: #0e6630 !important;
}

.btn-outline-warning {
    color: #e3ede5 !important;
    background-color: #eb7c7c !important;
}

.btn-secondary {
    color: #e3ede5 !important;
    background-color: #0e6630 !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 #0e6630;
    background: #ddd;
    border-radius: 5px;
    padding: 15px;
}

fieldset legend {
    background: #0e6630;
    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 #eb7d7d;
  -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: #0e6630;
  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;
    }
}

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