/**
 * This file is part of the Robots package.
 *
 * (c) Ondřej Záruba <info@zaruba-ondrej.cz>
 *
 * For the full copyright and license information, please view the license.md
 * file that was distributed with this source code.
 */

.robots-container {
    background: #ffffff;
    padding: 15px;
    box-sizing: border-box;
}

.robots-map, .robots-control-box {
    display: inline-block;
    width: 45%;
    vertical-align: top;
}

.robots-map {
    border-collapse: collapse;
    border-spacing: 0;
    display: inline-block;
}

.robots-map td {
    border: 1px solid #e1e1e1;
    width: 40px;
    height: 40px;
}

.robots-wall, .robots-start, .robots-robot1, .robots-robot1-error, .robots-robot2, .robots-robot2-error {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.robots-wall {
    background-image: url("./images/wall.png");
}

.robots-start {
    background-image: url("./images/start.png");
}

.robots-robot1 {
    background-image: url("./images/robot1.png");
}

.robots-robot1-error {
    background-image: url("./images/robot1-error.png");
}

.robots-robot2 {
    background-image: url("./images/robot2.png");
}

.robots-robot2-error {
    background-image: url("./images/robot2-error.png");
}

.robots-icon-label {
    -webkit-box-shadow: 0 -5px 25px 0 rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 -5px 25px 0 rgba(0, 0, 0, 0.75);
    box-shadow: 0 -5px 25px 0 rgba(0, 0, 0, 0.75);
    display: block;
    padding: 10px;
}

.robots-control-box input {
    position: absolute;
    width: 255px;
    height: 30px;
    border: 0;
    background: url(./images/input.png) no-repeat center center;
    top: 65px;
    left: 20px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.robots-robot1-control-box {
    width: 295px;
    height: 120px;
    position: relative;
    background-image: url(./images/robot1-control.png);
}

.robots-robot2-control-box {
    width: 295px;
    height: 120px;
    position: relative;
    background-image: url(./images/robot2-control.png);
}

.robots-execute-button {
    width: 170px;
    height: 40px;
    background-image: url(./images/execute.png);
    display: block;
    margin: 10px;
}

.robots-again-button {
    width: 170px;
    height: 40px;
    background-image: url(./images/reset.png);
    display: block;
    margin: 10px;
}

.robots-info-box {
    color: green;
    text-align: center;
    margin: 25px 0;
}