* {
    box-sizing: border-box; 
}

:root {
    --lb_left:-160px;
    --lb_width:160px;
    --rb_left:160px;
    --rb_width:160px;
}

body {
    margin: 0;
    padding: 0;
}

img { pointer-events: none; }

main {
    opacity: 1;
    transition: all 250ms;
}

div.images {
    position: relative;
    width: 640px;
    height: 640px;
}

div.images img {
    position: absolute;
    left: 0;
    top: 0;
}

div.sbox {
    position: absolute;
    top: 83px;
    height: 436px;
    background-color: rgba(255, 0, 0, 0.0);
}

div.sbox::before {
    content: "";
    position: absolute;
    left: var(--lb_left);
    width: var(--lb_width);
    height: 436px;
    background-color: rgba(0, 0, 0, 1.0);
}

div.sbox::after {
    content: "";
    position: absolute;
    left: var(--rb_left);
    width: var(--rb_width);
    height: 436px;
    background-color: rgba(0, 0, 0, 1.0);
}

div.sbox div {
    position: absolute;
    width: 6px;
    height: 436px;

    user-select: none;

    background-image: url("../img/Blue_Line.png");
}

div.sbox div.left {
    left: 0px;
}

div.sbox div.left::after {
    content: "";
    position: absolute;
    left: 0px;
    width: 28px;
    height: 436px;
    background-image: url("../img/Left_Border_with_numbers.png");
    pointer-events: none;
}

div.sbox div.right {
    right: 0px;
}

div.sbox div.center {
    left: calc(50% - 3px);
}

.hide {
    opacity: 0;
}

.cursor {
    position: relative;
    top: 83px;
    left: 83px;
    width: 57px;
    height: 100px;

    text-align: center;
    color: rgb(113, 175, 255);

    background-color: rgba(0,255,0,0.0);
    background-image: url(../img/MKR.png);
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;

    pointer-events: none;
}

.cursor.active {
    background-image: url(../img/MKR_active.png);
}

.cursor #txtBottom {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.symbol_1, .symbol_2, .symbol_3 {
    position: absolute;
}

.symbol_1 {
    left: 205px;
    top: 203px;
    width: 27px;
    height: 46px;
    background-image: url(../img/TRK_A_passive.png);
}

.symbol_1.active {
    background-image: url(../img/TRK_A_active.png);
}

.symbol_2 {
    left: 301px;
    top: 305px;
    width: 35px;
    height: 35px;
    background-image: url(../img/TRK_B_passive.png);
}

.symbol_2.active {
    background-image: url(../img/TRK_B_active.png);
}

.symbol_3 {
    left: 403px;
    top: 399px;
    width: 26px;
    height: 34px;
    background-image: url(../img/TRK_C_passive.png);
}

.symbol_3.active {
    background-image: url(../img/TRK_C_active.png);
}

.txt_grad {
    position: absolute;
    left: 147px;
    top: 145px;
    width: 100px;
    height: 37px;
    font-family: MHDD, 'Courier New', Courier, monospace;
    color: white;
    background-color: rgba(255, 0, 0, 0.0);
}