BODY {
    background-image: url(../../../../images/Puzzles/MazePuzzles/MazeGenerator/MazeBackground.png);
    scrollbar-3dlight-color: gray;
    scrollbar-arrow-color: darkgray;
    scrollbar-darkshadow-color: black;
    scrollbar-face-color: black;
    scrollbar-highlight-color: black;
    scrollbar-shadow-color: darkgray;
    scrollbar-track-color: #676767;
}

.inputBox {
    background-color: #636363;
    color: white;
    font-family: Consolas;
    font-size: 20px;
    height: 36px;
    padding: 0px 8px;
    text-align: right;
    text-transform: uppercase;
    width: 150px;
}

.inputBox_Error {
    background-color: indianred;
    color: white;
    font-family: Consolas;
    font-size: 20px;
    height: 36px;
    padding: 0px 8px;
    text-align: right;
    text-transform: uppercase;
    width: 120px;
}

.selectBox {
    background-color: #8C8C8C;
    border-radius: 5px;
    color: white;
    font-family: Consolas;
    font-size: 22px;
    height: 26px;
    padding: 0px 4px;
    width: 50px;
}

.selectBox_Error {
    background-color: indianred;
    border-radius: 5px;
    color: white;
    font-family: Consolas;
    font-size: 22px;
    height: 26px;
    padding: 0px 4px;
    width: 50px;
}

.colorSelector {
    background: #262626;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    text-align: center;
    vertical-align: top;
    width: 130px;
    height: 30px;
}

.colorSelector_Error {
    background-color: indianred;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    text-align: center;
    vertical-align: top;
    width: 130px;
    height: 30px;
}

.resultText {
    color: white;
    font-size: 30px;
    padding: 0px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
}

.labelText {
    color: white;
    font-size: 15px;
    padding-bottom: 10px;
    padding-right: 20px;
    white-space: nowrap;
    width: 150px;
}

.labelText_Small {
    color: white;
    font-size: 11px;
    padding-bottom: 10px;
    padding-right: 20px;
    white-space: nowrap;
}

.inputFields {
    padding-bottom: 10px;
    padding-right: 20px;
}

.subtextSeperator {
    border-top: 3px solid #161616;
    margin: 2px;
    padding: 0px;
}

.subtext {
    color: yellow;
    font-family: Consolas;
    font-size: 15px;
}


/* The next css elements are for the sample maze */

/*
    [1px solid Black]   = lineWidth
    [height: 6px;]      = boxSize

    [White]             = backgroundColor
    [Black]             = lineColor
    [Black]             = textColor
    [LightGreen]        = solutionColor
*/

/* The css-classes c1, c2, c3 and c4 are for the maze and c9 is for the letters */
.c1 {
    background-color: White;
    font-size: 1px;
    height: 6px;
    width: 6px;
}

.c2 {
    background-color: White;
    border-right: 1px solid Black;
    font-size: 1px;
    height: 6px;
    width: 6px;
}

.c3 {
    background-color: White;
    border-bottom: 1px solid Black;
    font-size: 1px;
    height: 6px;
    width: 6px;
}

.c4 {
    background-color: White;
    border-bottom: 1px solid Black;
    border-right: 1px solid Black;
    font-size: 1px;
    height: 6px;
    width: 6px;
}

.c9 {
    background-color: Black;
    border-bottom: 1px solid Black;
    border-right: 1px solid Black;
    font-size: 1px;
    height: 6px;
    width: 6px;
}

/* The css-classes c-1, c-2, c-3 and c-4 are for the solution */
.c-1 {
    background-color: LightGreen;
    font-size: 1px;
    height: 6px;
    width: 6px;
}

.c-2 {
    background-color: LightGreen;
    border-right: 1px solid Black;
    font-size: 1px;
    height: 6px;
    width: 6px;
}

.c-3 {
    background-color: LightGreen;
    border-bottom: 1px solid Black;
    font-size: 1px;
    height: 6px;
    width: 6px;
}

.c-4 {
    background-color: LightGreen;
    border-bottom: 1px solid Black;
    border-right: 1px solid Black;
    font-size: 1px;
    height: 6px;
    width: 6px;
}


/* Style to set the dimensions of the container with the result of the maze and the solution */
.image-container {
    width: 480px;
    height: 480px;
    overflow: auto;
    border: 5px solid black;
}