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

Version 2.2
Last Update: 2018-07-29

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

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

body {
    max-width: 1200px;
    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 15px;
    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;
    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;
}

#oer_instruction_modal .close {
    font-weight: normal;
    font-size: 3rem;
    color: white;
}

#oer_instruction_modal .modal-content {
    background: #465708;
    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: #43a3f3;
}

.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: 50px 50px;
    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;
}

#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: #293766;
    padding: 2px 10px;
}