/* Disable drag selection */
*, *::after, *::before {
    -webkit-user-drag: none;
    -webkit-app-region: no-drag;
    cursor: default;
}

html *
{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.headingtext {
    color: #f2f2f2;
    font-size: 40px;
    padding: 10px 12px;
    position: absolute;
    top: 10%;
    width: 100%;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.instructiontext {
    color: #f2f2f2;
    font-size: 20px;
    padding: 10px 0px;
    position: absolute;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.instructiontext-centered {
    color: #f2f2f2;
    font-size: 25px;
    padding: 10px 0px;
    position: absolute;
    /*width: 100%;*/
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hinttext {
    color: #f2f2f2;
    font-size: 16px;
    padding-left: 0px;
    padding-right: 10%;
    width: 90%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.footertext {
    color: #f2f2f2;
    font-size: 14px;
    padding: 10px 12px;
    position: absolute;
    bottom: 8px;
    right: 50px;
    width: 100%;
    text-align: right;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
    height: 100%;
    margin: 0;
    /*background: #425AA8;*/
    /*background: #ff0000;*/
    /*background: -moz-linear-gradient(top, #ff0000 0%, #9933ff 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #ff0000), color-stop(100%, #9933ff));
    background: -webkit-linear-gradient(top, #ff0000 0%, #9933ff 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #9933ff 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #9933ff 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #9933ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#9933ff', GradientType=0 );*/
    background-repeat: no-repeat;
    background-attachment: fixed;
    background:royalblue;
}

/*svg {
    border: 1px solid black;
    border-radius: 35px;
    background: #ffffff;
}*/

canvas {
    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.5);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}

#display {
    box-shadow: none;
}

.adderCanvas {
    border: 0px solid black;
    border-radius: 35px;
    background: #ffff00;
}

.programCounterCanvas {
    border: 0px solid black;
    border-radius: 35px;
    background: #9F9BEA;
}

.controlUnitCanvas {
    border: 0px solid black;
    border-radius: 35px;
    background: #9F9BEA;
}

.binaryCounterCanvas {
    border: 0px solid black;
    border-radius: 35px;
    background: #9F9BEA;
}

.inverterCanvas {
    border: 0px solid black;
    border-radius: 35px;
    background: #ffff00;
}

.variableCanvas {
    border: 0px solid black;
    border-radius: 30px;
    background: #ff4400;
}

.automaticProgrammerCanvas {
    border: 0px solid black;
    border-radius: 30px;
    background: #ff4400;
}

.latchCanvas {
    border: 0px solid black;
    border-radius: 35px;
    background: #4BAF00;
}

.dataRamCanvas {
    border: 0px solid black;
    border-radius: 35px;
    background: #4BAF00;
}

.programRamCanvas {
    border: 0px solid black;
    border-radius: 35px;
    background: #4BAF00;
}

.selectorCanvas {
    border: 0px solid black;
    border-radius: 35px;
    background: #9F9BEA;
}

.decimalDisplayCanvas {
    border: 0px solid black;
    border-radius: 35px;
    background: #555555;
}

.dotMatrixDisplayCanvas{
    border: 0px solid black;
    border-radius: 35px;
    background: #555555;
}

.perceptronCanvas {
    border: 0px solid black;
    border-radius: 5px;
}

.b4GraphCanvas {
    border: 0px solid black;
    border-radius: 35px;
    background: #116644;
    box-shadow: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
}

.OnetoFourAdapterCanvas {
    border: 0px solid black;
    border-radius: 17px;
    background: whitesmoke;
}

.FourtoOneAdapterCanvas {
    border: 0px solid black;
    border-radius: 17px;
    background: whitesmoke;
}

.GateCanvas {
    border: 0px solid black;
    border-radius: 17px;
    background: whitesmoke;
}

.ANDGateCanvas {
    border: 0px solid black;
    border-radius: 17px;
    background: whitesmoke;
}

.ORGateCanvas {
    border: 0px solid black;
    border-radius: 17px;
    background: whitesmoke;
}

.NORGateCanvas {
    border: 0px solid black;
    border-radius: 17px;
    background: whitesmoke;
}

.XORGateCanvas {
    border: 0px solid black;
    border-radius: 17px;
    background: whitesmoke;
}

.NOTGateCanvas {
    border: 0px solid black;
    border-radius: 17px;
    background: whitesmoke;
}

.inputSwitchCanvas {
    border: 0px solid black;
    border-radius: 17px;
    background: whitesmoke;
}

.BKCCanvas {
    border: 0px solid black;
    border-radius: 5px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.switch input {
    display: none;
}

.VirtualModule {
    border: 1px solid white;
    border-radius: 17px;
    background-color: rgba(245,245,245, 0.5);
}

/* variables*/

.slider {
    -webkit-appearance: none;
    height: 10px;
    border-radius: 10px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

@supports (-moz-appearance: none) {
    .slider {
        width: 130px;
    }
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}

input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    height: 20px;
    width: 20px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #3071a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #2a6495;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
    background: #3071a9;
}
input[type=range]::-ms-fill-upper {
    background: #3071a9;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
    background: #367ebd;
}
/* end slider for variables */

.variableText
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* inverter slider bar */
.slider.round {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 10px;
}

/* slider button of the inverter*/
.slider.round:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 0px;
    bottom: -5px;
    background-color: orange;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

/* colour of the inverter slider bar when active */
input:checked + .slider.round {
    background-color: pink;
}

/* travel distance of inverter slider button */
input:checked + .slider.round:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

.button {
    padding: 10px 5px;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #fff;
    background-color: #777777;
    border: none;
    border-radius: 5px;
    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.5);
}

.buttonContainer{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button:hover {
    background-color: #555555
}

.button:active {
    background-color: #444444;
    box-shadow: 1px -1px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(1px);
}

.clueButton {
    padding: 5px 5px;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #fff;
    background-color: #777777;
    border: none;
    border-radius: 5px;
}

.clueButton:hover {
    background-color: orange;
    color:black;
}

.clueButton:active {
    box-shadow: 1px -1px 10px rgba(0, 0, 0, 1);
    transform: translateY(1px);
}

.resetButton {
    padding: 10px 5px;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #fff;
    background-color: #777777;
    border: none;
    border-radius: 5px;
    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.5);
}

.resetButton:hover {
    background-color: darkorange;
    color: #000000;
}

.resetButton:active {
    background-color: darkorange;
    box-shadow: 1px -1px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(1px);
}

.modeButton {
    padding: 10px 5px;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #fff;
    background-color: #777777;
    border: none;
    border-radius: 5px;
    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.5);
}

.modeButton:hover {
    background-color: #ff0000
}

.modeButton:active {
    background-color: #ff0000;
    box-shadow: 1px -1px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(1px);
}

.wiresButton {
    padding: 10px 5px;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #fff;
    background-color: #777777;
    border: none;
    border-radius: 5px;
    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.5);
}

.wiresButton:hover {
    background-color: #ff0000
}

.wiresButton:active {
    background-color: #ff0000;
    box-shadow: 1px -1px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(1px);
}

.navigationButton {
    padding: 10px 15px;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #fff;
    background-color: yellow;
    border: none;
    border-radius: 5px;
    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.5);
}

.navigationButton:hover {
    background-color: #ff0000
}

.navigationButton:active {
    background-color: #ff0000;
    box-shadow: 1px -1px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(1px);
}

.switch-field {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0px;
    overflow: hidden;
}

.switch-title {
    margin-bottom: 6px;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
    float: left;
}

.switch-field label {
    display: inline-block;
    width: 60px;
    background-color: #e4e4e4;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    text-shadow: none;
    padding: 6px 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label {
    background-color: #A5DC86;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
}

.tooltip {
    display: inline-block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    vertical-align: center;
    width: 1.8ex;
    height: 1.8ex;
    font-size: 1.4ex;
    line-height: 1.8ex;
    border-radius: 1.2ex;
    margin-right: 4px;
    padding: 1px 1px;
    color: darkgrey;
    border: 1px solid darkgrey;
    text-decoration: none;
    position:absolute;
    top:-5px;
    right:-5px;
    z-index:20000;
    box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.5);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tooltiptext {
    visibility: hidden;
    width: 120px;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 10px 10px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Position the tooltip */
    position: absolute;
    z-index: 3000;
    top: 0px;
    left: 105%;
    background-color: rgba(51,51,51,0.7);;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    transition-delay: 0.5s !important;
}

.tooltip:hover{
    color:black;
    background-color: white;
    cursor: pointer;
}

/*tr {
    text-align: center;
    border-bottom: 1px solid #ddd;
    height: 16px;
    font-size : 13px;
    background-color: #FFFFFF;
    font-family:helvetica;
}
tr:hover {background-color: #f5f5f5;}

th {
    background-color: #4CAF50;
    color: white;
    font-family:helvetica;
}*/

table.binaryTable {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    margin-bottom: 80px;
}

table.binaryTable td, table.binaryTable th {
    padding: 3px 2px;
}

table.binaryTable tbody td {
    font-size: 13px;
    color: #f2f2f2;
}

table.binaryTable thead {
}

table.binaryTable thead th {
    font-size: 16px;
    font-weight: bold;
    color: #f2f2f2;
    text-align: left;
}

table.binaryTable tfoot {
    font-size: 15px;
    font-weight: bold;
    color: #f2f2f2;
    border-top: 2px solid #f2f2f2;
}

table.binaryTable tfoot td {
    font-size: 14px;
}

/* order table */

table.orderTable {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 100%;
    text-align: right;
    border-collapse: collapse;
}

table.orderTable td, table.orderTable th {
    padding: 3px 2px;
}

table.orderTable tbody td {
    font-size: 13px;
    color: #f2f2f2;
}

table.orderTable thead {
}

table.orderTable thead th {
    font-size: 16px;
    font-weight: bold;
    color: #f2f2f2;
    text-align: right;
}

table.orderTable tfoot {
    font-size: 18px;
    font-weight: bold;
    color: #f2f2f2;
    border-top: 2px solid #f2f2f2;
}

table.orderTable tfoot td {
    font-size: 14px;
}

table.instructionsTable {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 50%;
    text-align: center;
    border-collapse: collapse;
    border-color: black;
    margin: 0 auto; /* center table horizontally */
}

table.instructionsTable td, table.instructionsTable th {
    padding: 3px 2px;
    border-style: solid;
    border-width: 1px;
}

table.instructionsTable tbody td {
    font-size: 14px;
    color: black;
    border-style: solid;
    border-width: 1px;
}

table.instructionsTable thead {
}

table.instructionsTable thead th {
    font-size: 16px;
    font-weight: bold;
    color: black;
}

table.instructionsTable tfoot {
    font-size: 18px;
    font-weight: bold;
    color: #f2f2f2;
    border-top: 2px solid #f2f2f2;
}

table.instructionsTable tfoot td {
    font-size: 14px;
}

/* accordion */

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 12px;
    width: 98%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-right: 1%;
    margin-left: 1%;
    border-radius: 0; /* Reset border radius */
}

.active, .accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.accordion.active:after {
    content: "\2212";
}

.accordion:focus {
    outline: 3px solid #1a73e8;
    outline-offset: -2px;
    border-radius: 4px;
}

.ramContentsTable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    margin-right: 1%;
    margin-left: 1%;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    border-radius: 0; /* Reset border radius */
}
.panel:focus {
    outline: 3px solid #1a73e8;
    outline-offset: -2px;
    border-radius: 4px;
}

/* Class to apply border radius to the bottom corners */
.border-radius-bottom {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.dot {
    height: 14px;
    width: 14px;
    background-color: blue;
    border-radius: 50%;
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}

.greendot {
    height: 14px;
    width: 14px;
    background-color: green;
    border-radius: 50%;
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}

.orangedot {
    height: 14px;
    width: 14px;
    background-color: orange;
    border-radius: 50%;
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}

.fuchsiadot {
    height: 14px;
    width: 14px;
    background-color: fuchsia;
    border-radius: 50%;
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}

.whitedot {
    height: 14px;
    width: 14px;
    background-color: white;
    border-radius: 50%;
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

@keyframes stretch {
    from {border-top-color: royalblue;}
    to {border-top-color: lightskyblue}
}

@keyframes stretch {
    from {border-top-color:  linear-gradient(#FFFF00, #FF0000)}
    to { border-top-color: linear-gradient(#FFFF00, #FF0000)}
}

.wirelabel
{
    position:absolute;
    color: white;

    padding: 10px;
    align-content: center;
    background-color: rgba(51,51,51,0.7);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    border-radius: 10%;
    z-index: 1000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lineElement {
    /*border: 0px solid;*/
    position: absolute;
    /*height: 0px;*/
    /*border-radius: 5%;*/
    color: grey;
    box-shadow: 1px 1px;
    background-size: 200% 200%;
}

.arrow-up {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1px 5px 10px 5px;
    border-color: transparent transparent red transparent;
    position:absolute;
}

.blueWire {
    position: absolute;
    background: linear-gradient(45deg, lightyellow, gold);
    background-size: 600% 600%;
    animation: blueWireAnimation 1s linear infinite;
}

.wireTerminalOutput {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


@keyframes wireAnimation {
    0%{background-position:0% 100%}
    50%{background-position:100% 0%}
    100%{background-position:0% 100%}
}

@keyframes wireAnimationSVG {
    from {
        stroke-dashoffset: 20;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes wireAnimationSVG40 {
    from {
        stroke-dashoffset: 40;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes redeye {
    to {
        stroke: red;
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0,0,255, 0.8);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(0,0,255, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(0,0,255, 0);
    }
}
@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(0,0,255, 0.8);
        box-shadow: 0 0 0 0 rgba(0,0,255,0.8);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(0,0,255, 0);
        box-shadow: 0 0 0 11px rgba(0,0,255, 0);

    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(0,0,255, 0);
        box-shadow: 0 0 0 0 rgba(0,0,255, 0);
    }
}

@-webkit-keyframes inversePulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0,128,0,0.8);
    }
    70% {
        -webkit-box-shadow: 0 0 0 11px rgba(0,128,0,0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(0,128,0,0);
    }
}
@keyframes inversePulse {
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(0,128,0,0.8);
        box-shadow: 0 0 0 0 rgba(0,128,0,0.8);

    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(0,128,0,0);
        box-shadow: 0 0 0 11px rgba(0,128,0, 0);

    }
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(0,128,0,0);
        box-shadow: 0 0 0 0 rgba(0,128,0,0);
    }
}


.wire{
    /*animation: wireAnimationSVG 1s linear infinite;*/
    /*animation: redeye 2s infinite alternate;*/
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
    color: white;
}

#instructionsButton {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

    .hinttext {
        visibility: hidden;
    }

    .ramContentsTable {
        visibility: hidden;
    }

    #instructionsButton {
        left: 10px;
    }
}

.arrow {
    width: 8px;
    height: 80px;
    margin: 40px 10px;
    border-radius: 3px;
    background-color: white;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), red 75%);
    -webkit-animation: 1s soft-blink infinite alternate;
    animation: 1s soft-blink infinite alternate;
    position: absolute;
    opacity: 0;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    alignment: left;
}

@-webkit-keyframes soft-blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0.8;
    }
}

@keyframes soft-blink {

    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0.8;
    }
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

.arrow:after { /* draws the tips of the arrow*/
    content: '';
    position: absolute;
    bottom: 0;
    left: -12px;
    border-bottom: 6px solid red;
    border-right: 6px solid red;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.sidenav {
    height: 100%;
    position: fixed;
    z-index: 1;
    top: -6px;
    right: 0;
    background-color: rgba(51, 51, 51, 0.2);
    overflow-x: hidden;
    transition: 1.5s;
    padding: 0px 0px;
    margin-top: 40px;
    margin-bottom: 40px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sidenav a {
    padding: 8px 8px 8px 0px;
    text-decoration: none;
    font-size: 14px;
    color: #818181;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: -8px;
    right: 10px;
    font-size: 40px;
    //margin-left: 50px;
}

.sidenav .exp-nav-left {
    position: absolute;
    margin-top: -10px;
    font-size: 26px;
    margin-left: 4%;
}
.sidenav .exp-nav-right {
    position: absolute;
    margin-top: -10px;
    font-size: 26px;
    margin-left: 92%;
}

/* Apply border radius to the infobox */
.infobox {
    border-radius: 10px; /* Set border-radius for the infobox */
    overflow: hidden;    /* Prevent child elements from overflowing */
}


.info-column {
    width: 98%;
    background-color: darkgrey;
    margin-left: 1%;
    display:table;
    border-radius: 5px 5px 0 0;
}

/* Separate rules for info-left and info-right to allow proper float */
.info-left {
    width: 10%;
    color: royalblue;
    text-align: center;
    font-size: 26px;
    float: left;
    display: table-cell;
    height: inherit;
}

.info-right {
    width: 10%;
    color: royalblue;
    text-align: center;
    font-size: 26px;
    float: right;
    display: table-cell;
    height: inherit;
}

.info-left:hover, .info-right:hover {
    color: #f1f1f1;
}

.info-middle {
    width: 80%;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 24px;
    background-color: darkgrey;
    text-align: center;
    float: left;
    display: table-cell;
}

/* Navigation button styles for info box navigation */
.info-nav-button {
    font-size: 36px;
    background: none;
    color: royalblue;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    margin: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.info-nav-button:hover {
    color: white;
    transform: scale(1.1);
}

.info-nav-button:focus {
    outline: 3px solid #1a73e8;
    outline-offset: -2px;
    border-radius: 4px;
}


.equationFormButton {
    width: 150px;
    padding: 9px;
    margin: 5px 0 12px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
    font-size: 14px;
}

/* Create two equal columns that float next to each other */
.column {
    float: left;
    width: 40%;
    padding: 20px;;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.orangeRow
{
    background-color: orange;
}
.yellowRow
{
    background-color: yellow;
}
.greenRow
{
    background-color: lime;
}
.greyRow
{
    background-color: lightgrey;
}

div.moduleLabel {
    transform: rotate(90deg);
    width: 120px;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 2px 10px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;

    position: absolute;
    z-index: 100;
    top: 90px;
    right: -82px;
    background-color: rgba(51,51,51,0.7);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.moduleLabelShort {
    transform: rotate(90deg);
    width: 90px;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 2px 10px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;

    position: absolute;
    z-index: 100;
    top: 80px;
    right: -67px;
    background-color: rgba(51,51,51,0.7);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.moduleLabelLogicModules {
    transform: rotate(90deg);
    width: 60px;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 2px 10px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;

    position: absolute;
    z-index: 100;
    top: 40px;
    right: -53px;
    background-color: rgba(51,51,51,0.7);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.inner-div {
    margin: 0 auto;
    width: 200px;
    color: #f2f2f2;
    font-size: 14px;
    padding: 10px 0px;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.label {
    transform-origin: left top 0;
    float: left;
    color: #f2f2f2;
    font-size: 14px;
    padding: 10px 0px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1000;
}

.advertisebtn {
    position: fixed;
    bottom: 30px;
    left:0px;
    background-color: DodgerBlue;
    border: none;
    color: white;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 16px;
    z-index: 2000;
    margin-bottom: 10px;
}

.advertisebtn:hover{
    background-color: #3145FF;
}

.adminButton {
    padding: 10px 10px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #444;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');

    border: 1px solid #aaa;
    border-radius: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: fixed;
    right: 0px;
}

.adminButton:hover {
    background-color: darkorange;
    color: #000000;
}

.adminButton:active {
    background-color: darkorange;
    box-shadow: 1px -1px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(1px);
}

.adminSelect {
    display: block;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    width: 50%;
    max-width: 100%; /* useful when width is set to anything other than 100% */
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
    */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.adminSelect::-ms-expand {
    display: none;
}
/* Hover style */
.adminSelect:hover {
    border-color: #888;
}
/* Focus style */
.adminSelect:focus {
    border-color: #aaa;
    /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222;
    outline: none;
}

/* Set options to normal weight */
.adminSelect option {
    font-weight:normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .adminSelect, :root:lang(ar) .adminSelect, :root:lang(iw) .adminSelect {
    background-position: left .7em top 50%, 0 0;
    padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.adminSelect:disabled, .adminSelect[aria-disabled=true] {
    color: graytext;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.adminSelect:disabled:hover, .adminSelect[aria-disabled=true] {
    border-color: #aaa;
}

.heading-container {
    height: 10vh;
    color: white;
    font-size: 5vh;
    display: flex; /* Use flexbox */
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
}

.heading-course-text {
    margin-top: 2vh; /* Adjust the top margin if necessary */
}

.course-container {
    width: 640px;
    margin:auto;
}

.course-container-structure {
    display:block;
    color:white;
}

/*.course-container-item {*/
/*    display:grid;*/
/*    grid-template-areas:*/
/*        'image title'*/
/*        'image desc'*/
/*        'image blank'*/
/*        'image amount';*/
/*    grid-gap: 10px;*/
/*
/*    flex-wrap: wrap;*/
/*}*/



/*.course-container__image {*/
/*    display:flex;*/
/*    grid-area: image;*/
/*    */
/*    border-radius: 1px;*/
/*    grid-template-columns: minmax(auto,32rem) 50%;*/
/*    */
/*    */
/*}*/



.course-container-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: rgba(51, 51, 51, 0.4);
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor:pointer;
    transition: .5s ease;
}
.course-container-item:hover{
    background-color: #757575;
    transform: scale(1.05); /* 1.5 times the original size */
}

.course-container__image {
    flex: 40%;
    position:relative;
    align-items: stretch;
    max-width: 320px;
}

.course-container__text {
    flex: 60%;
    padding: 20px;
    max-width: 400px;
}

.course-container__title {
    cursor:pointer;
    font-weight: bold;
    height: 30px;
}

.course-container__description {
    cursor:pointer;
}

.course-container__lesson-amount {
    cursor:pointer;
}

.course-container__bands {
    cursor:pointer;
}

.course-index-item:focus {
    outline: 3px solid #005fcc;
    outline-offset: 4px;
    border-radius: 10px;
}

@media (max-width: 800px) {
    .course-container{
        width: 80vw;
    }
    .course-container__image {
        max-width: 80vw;
    }
    .course-container__text {
        width: 80vw;
    }
    /*.course-container__description {*/
    /*    height: 74px;*/
    /*    overflow: hidden;*/
    /*    text-overflow: ellipsis;*/
    /*}*/
}

@media (max-width: 600px){
    .course-container-item{
        flex-direction: column;
    }
    .course-container__image {
        padding-right: 20px;
    }
}

.logo {
    float: right;
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    width: 250px;
    border-radius: 0px;
    box-shadow: none;
    background-color: transparent;
}

.signature {
    float: left;
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    width: 250px;
    border-radius: 0px;
    box-shadow: none;
    background-color: transparent;
}

.exportButton {
    margin-top:-5px;
    margin-left: 10px;
    padding: 5px 5px;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #fff;
    background-color: #777777;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s ease, background-color 0.2s ease; /* Add transition for smooth grow */
}

.exportButton:hover {
    background-color: green;
    transform: scale(1.1); /* Slightly grow the button */
}

.exportButton:active {
    transform: translateY(1px); /* Maintain current active effect */
    transition: background-color 0.6s ease; /* Keep transition for background-color */
}

.alert-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.alert-modal-content {
    background-color: #fff;
    margin: 12% auto;
    padding: 24px 32px;
    border: none;
    width: 360px;
    border-radius: 12px;
    text-align: center;
    font-size: 1.1em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    animation: bounceWiggle 1s ease-out;
    position: relative;
}

.alert-modal-content.info {
    border-left: 7px solid #00acc1;
    border-right: 7px solid #00acc1;
}

.alert-modal-content.success {
    border-left: 7px solid #43a047;
    border-right: 7px solid #43a047;
}

.alert-modal-content.warning {
    border-left: 7px solid #fbc02d;
    border-right: 7px solid #fbc02d;
}

.alert-modal-content.error {
    border-left: 7px solid #e53935;
    border-right: 7px solid #e53935;
}

.alert-modal-content button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1em;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.alert-modal-content button:hover {
    background-color: #ddd;
}


@keyframes bounceWiggle {
    0% {
        transform: scale(0.97) rotate(0deg);
        opacity: 0;
    }
    40% {
        transform: scale(1.05) rotate(-2deg);
        opacity: 1;
    }
    70% {
        transform: scale(0.98) rotate(2deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes fadeInModal {
    from {
        transform: scale(0.97);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

#instructionsButton:focus,
#mySidenav .closebtn:focus {
    outline: 3px solid #1a73e8;
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    top: -40px; /* move offscreen initially */
    left: 40px;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    z-index: 1000;
    border: 2px solid #fff;
    border-radius: 5px;
    font-family: monospace;
    text-decoration: none;
    transition: top 0.2s ease;
}

/* Show only on keyboard focus */
.skip-link:focus {
    top: 50px; /* bring into view */
}