/* --------------------------------------------------
OER Template Base Styles

Version 2.2
Last Update: 2023-12-01

!!! DO NOT EDIT THIS FILE !!!
Put any custom code at style.css
-------------------------------------------------- */

html {
    position: relative;
    min-height: 100%;
}

body {
    max-width: 1280px;
    margin: 40px auto;
}

.container {}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

a:hover {
    text-decoration: none;
}

body>.container {
    box-shadow: 15px 15px 10px -10px grey;
}

.controlsPointer {
    cursor: pointer;
}


/* title */

/*
#oer_title {
    min-width: 600px;
}
*/

#oer_title {
    background: rgb(243, 183, 67);
    background: -moz-linear-gradient(90deg, rgba(243, 183, 67, 1) 0%, rgba(216, 97, 20, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(243, 183, 67, 1) 0%, rgba(216, 97, 20, 1) 100%);
    background: linear-gradient(90deg, rgba(243, 183, 67, 1) 0%, rgba(216, 97, 20, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#f3b743", endColorstr="#d86114", GradientType=1);
    padding: 6px 30px;
    vertical-align: middle;
}

#oer_title h1 {
    width: 75%;
    float: left;
    color: white;
    text-align: left;
}


/* instruction buttons */

#oer_instruction {
    width: 25%;
    float: right;
    font-size: 28px;
    color: white;
    text-align: right;
}

#oer_instruction a, #instruction a:link {
    color: white;
}

#oer_instruction a:hover {
    color: #f3b743;
}


/* canvas */

#oer_canvas {
    min-width: 630px;
    min-height: 720px;
    text-align: center;
    background-color: #ccc;
    background-size: 80px 80px;
    /* background-image: linear-gradient(to right, #ddd 1px, transparent 1px), linear-gradient(to bottom, #ddd 1px, transparent 1px); */
}

.angled-135 {
    background-color: #c16;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}


/* sidebar */

#oer_sidebar {
    min-width: 285px;
    background: rgb(167, 195, 14);
    background: -moz-linear-gradient(125deg, rgba(167, 195, 14, 1) 0%, rgba(118, 159, 8, 1) 100%);
    background: -webkit-linear-gradient(125deg, rgba(167, 195, 14, 1) 0%, rgba(118, 159, 8, 1) 100%);
    background: linear-gradient(125deg, rgba(167, 195, 14, 1) 0%, rgba(118, 159, 8, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#a7c30e", endColorstr="#769f08", GradientType=1);
}

#oer_help {
	margin:15px 0;
}

#oer_controls {
    margin-top: 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

#oer_controls .group {
    padding: 4px 10px;
    margin: 0 0 20px 0;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    background: #667b16;
    color: #fff;
}

#oer_controls .group a span {
    float: right;
}

#oer_controls label, #oer_controls p, #oer_controls div {
	color:#fff;
}

#p1, #p2, #p3 {
	margin-left:15px;
}

#oer_sidebar a,
#oer_sidebar a:link,
#oer_sidebar a:visited {
    color: #fff;
}

#oer_sidebar a:hover {
    color: #48541b;
}

#oer_controls input[type=number] {
    width: 60px;
    text-align: right;
}

#oer_results {
    background: #657b1669;
    text-align: center;
    margin: 40px 0 0 0;
    border-radius: 10px;
}

#oer_results p {
    padding: 4px 0;
    color: #fff;
}


/* instruction modal */

#oer_instruction_modal .modal-header {
    border-bottom: 0;
    padding: 0 1rem;
    color: white;
}

#oer_instruction_modal .btn-close {
    font-weight: normal;
}

#oer_instruction_modal .modal-content {
    background: #407da2;
    opacity: 0.95;
}

#oer_instruction_modal .modal-body {
    color: white;
}





/* 3 button: Theory, Application and Investigation */

#oer_help h2 {
    background: #fff;
    padding: 6px 20px;
	font-size: 22px;
    font-weight: 400;
	color: #657b16;
    border:0;
	border-top:2px solid #fff;
	border-bottom:2px solid #fff;
    border-radius:20px;
	cursor:pointer;
}

#oer_help i {
	width:32px;
}

#oer_help h2.active {
	background: #93b40b;
    color: #fff;
    border-bottom: 2px solid #ccc;
    border-top: 2px solid #444;
}


#oer_theory, #oer_application, #oer_investigation {
	z-index:100;
	background:#657b16;
	display:block;
	position:relative;
	width:100%;
	padding:15px 30px;
	height:auto;
	min-height:100px;
	opacity:0.95;
	border-top:10px solid #fff;
	visibility: visible;
	transition: 2s opacity;
}

#oer_theory p, #oer_theory div, #oer_application p, #oer_application div, #oer_investigation p, #oer_investigation div {
	text-align:left;
	color:#fff;
}

#oer_theory.hide, #oer_application.hide, #oer_investigation.hide {
	visibility: hidden;
	opacity: 0;
	transition: visibility 2s, opacity 2s linear;
}

#oer_theory {
	margin-top:-100px;  /* change this with the actual total height */
}

#oer_application {
	margin-top:-100px; /* change this with the actual total height */
}

#oer_investigation {
	margin-top:-100px; /* change this with the actual total height */
	margin-bottom:15px; /* apply this only at the last one */
}

#oer_theory:after, #oer_application:after, #oer_investigation:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  text-decoration: inherit;
  position: absolute;
  font-size: 75px;
  color: #ffffff1a;
  bottom: -10px;
  right: 10px;
  margin: 0;
  z-index: 1;
}

#oer_theory:after {
  content: "\f501";
}
#oer_application:after {
  content: "\f4fe";
}
#oer_investigation:after {
  content: "\f0c3";
}

#oer_theory .navigation, #oer_application .navigation, #oer_investigation .navigation {
	text-align: left;
}

#oer_theory .navigation a, #oer_application .navigation a, #oer_investigation .navigation a {
	color:#fff;
	font-size: 18px;
	cursor:pointer;
    background: white;
    border-radius: 10px;
    color: #647b16;
    padding: 2px 10px;
}

.navigation .hide {
	display:none;
}


/* Locks */
.fa-lock, .fa-unlock {
	cursor:pointer;
}

.fa-lock {
	color:#d96214;
}


/* On/off Switch */

.checkbox.checbox-switch {
    padding-left: 0;
}
.checkbox.checbox-switch label, .checkbox-inline.checbox-switch {
    display: inline-block;
    position: relative;
    padding-left: 0;
}
.checkbox.checbox-switch label input, .checkbox-inline.checbox-switch input {
    display: none;
}
.checkbox.checbox-switch label span, .checkbox-inline.checbox-switch span {
    width: 35px;
    border-radius: 20px;
    height: 18px;
    border: 1px solid #dbdbdb;
    background-color: #d96214;
    border-color: #d96214;
    box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}
.checkbox.checbox-switch label span:before, .checkbox-inline.checbox-switch span:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgb(255,255,255);
    content: " ";
    top: 0;
    position: relative;
    left: 0px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    top:-2px;
}
.checkbox.checbox-switch label > input:checked + span:before, .checkbox-inline.checbox-switch > input:checked + span:before {
    left: 16px;
	top:-2px;
}
.checkbox.checbox-switch.switch-primary label > input:checked + span, .checkbox-inline.checbox-switch.switch-primary > input:checked + span {
    background-color: #657b16;
    border-color: #657b16;
    /*box-shadow: rgb(0, 105, 217) 0px 0px 0px 8px inset;*/
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-primary label > input:checked:disabled + span, .checkbox-inline.checbox-switch.switch-primary > input:checked:disabled + span {
    background-color: #d96214;
    border-color: #d96214;
   /* box-shadow: rgb(109, 163, 221) 0px 0px 0px 8px inset;*/
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}

.checkbox.checbox-switch label {
	cursor:pointer;
}



/* Harbuger Menu */

#hmenu {
	float:right;
	margin-left:30px;
	display:none;
}

.bar,
.bar:after,
.bar:before {
	width: 30px;
	height: 4px;
}

.bar {
	position: relative;
	transform: translateY(-22px);
	background: rgba(255, 255, 255, 1);
	transition: all 0ms 100ms;
}

.bar.animate {
  background: rgba(255, 255, 255, 0); 
}

.bar:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 10px;
	background: rgba(255, 255, 255, 1);
	transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar:after {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	background: rgba(255, 255, 255, 1);
	transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:after {
	top: 0;
	transform: rotate(45deg);
	transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}

.bar.animate:before {
	bottom: 0;
	transform: rotate(-45deg);
	transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}



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

	body {
		margin:0 auto;
	}
	
	body > .container {
		box-shadow:none;
		max-width:100%;
	}

	#oer_canvas {
		min-width:100%;
	}

	#canvas {
		width:100%;
		margin-top:15px !important;
	}

	#hmenu {
		display:block;
	}

	#hmenu a, #hmenu a:link, #hmenu a:visited, #hmenu a:hover {
		color:#fff;
	}

	#oer_sidebar {
		display:block;
		width: 285px;
		height: auto;
		position: absolute;
		z-index: 999;
		top: auto;
		right: 0;
		overflow-x: hidden;
		overflow-y: scroll;
		transition: 0.5s;
	}

	#oer_sidebar.hide > #oer_controls, #oer_sidebar.hide > #oer_help {
		display:none;
	}

	#oer_sidebar.hide {
		width:0;
		height:auto;
		min-width:0;
		padding:0;
		margin:0;
		transition: 0.5s;
	}

}




/* Theme: Blue sea 
Add class "theme-blue-sea" at body:
<body class="theme-blue-sea"> 
-------------------------------------------------- */

.theme-blue-sea #oer_title {
    background: rgb(67, 163, 243);
    background: -moz-linear-gradient(90deg, rgba(67, 163, 243, 1) 0%, rgba(34, 36, 93, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(67, 163, 243, 1) 0%, rgba(34, 36, 93, 1) 100%);
    background: linear-gradient(90deg, rgba(67, 163, 243, 1) 0%, rgba(34, 36, 93, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#43a3f3", endColorstr="#22245d", GradientType=1);
}

.theme-blue-sea #oer_instruction a:hover {
    color: #43a3f3;
}

.theme-blue-sea #oer_sidebar {
    background: rgb(14, 149, 195);
    background: -moz-linear-gradient(125deg, rgba(14, 149, 195) 0%, rgba(8, 114, 199, 1) 100%);
    background: -webkit-linear-gradient(125deg, rgba(14, 149, 195) 0%, rgba(8, 114, 199, 1) 100%);
    background: linear-gradient(125deg, rgb(14, 149, 195) 0%, rgb(8, 114, 199) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#0e95c3", endColorstr="#0872c7", GradientType=1);
}

.theme-blue-sea #oer_sidebar a:hover {
    color: #23265d;
}

.theme-blue-sea #oer_controls .group a:hover span {
    color: #94b2cc;
}

.theme-blue-sea #oer_controls .group {
    background: #283767;
}

.theme-blue-sea #oer_controls .fa-minus,
.theme-blue-sea #oer_controls .fa-plus {
    color: #28376780;
}

.theme-blue-sea #oer_canvas {
    background-color: #eee;
    background-size: 10px 10px;
    background-image: linear-gradient(to right, #ddd 1px, transparent 1px), linear-gradient(to bottom, #ddd 1px, transparent 1px);
}

.theme-blue-sea #oer_instruction_modal .modal-content {
    background: #1c3457;
}

.theme-blue-sea #oer_results {
    background: #29376669;
}

/* Locks */
.theme-blue-sea .fa-lock {
	color:#b91c1e;
}

/* On/off Switch */
.theme-blue-sea .checkbox.checbox-switch.switch-primary label > input:checked + span,
.theme-blue-sea .checkbox-inline.checbox-switch.switch-primary > input:checked + span {
	background-color:#293766;
	border-color:#293766;
}

.theme-blue-sea .checkbox.checbox-switch label span,
.theme-blue-sea .checkbox-inline.checbox-switch span {
	background-color:#b91c1d;
	border-color:#b91c1d;
}

/* 3 button: Theory, Application and Investigation */
.theme-blue-sea #oer_help h2 {
	color:#293766;
}

.theme-blue-sea #oer_help h2.active {
	background:#2e93c7;
	color:#fff;
}

.theme-blue-sea #oer_theory, .theme-blue-sea #oer_application, .theme-blue-sea #oer_investigation {
	background:#0d7fc6;
}