@charset "utf-8";
/* CSS Document */
a.list-group-item.choised {
    background-color:goldenrod !important;
}

.navbar-right {
	margin-top: 7px !important;
}

.manzana {	
	border-radius:10%;
	background: grey;
}
.ciudad {
	width: 100%;
	height: 100%;
	border: 0px;
}
html {
	height: 100%;
	overflow: hidden;
}
body {
	height: 100%;
}
#script {
    border: 1px solid black;
}
.etiquetas{
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	background-color:darkgray;
}
.cols{
	height: 22px !important;
}
.filas{
	width: 22px !important;
}
.esquina{
	text-align: center;
}
#robot{
	position: absolute;
	margin:auto auto auto auto;
}
.flor.active{
	background-image: url("../img/flor.png");
}
.piedra.active{
	background-image: url("../img/piedra.png");
}
.goma.active{
	background-image: url("../img/goma.png");
}
.pared.active{
	background-image: url("../img/pared.png");
}
.pared_signo.active{
	background-image: url("../img/pared_signo.png");
}
.lapiz.active{
	background-image: url("../img/lapiz.png");
}
.signo.active{
	background-image: url("../img/signo.png");
}
.signo{
	background-image: url("../img/signo.png");
	background-repeat: no-repeat;
	background-size:40%;
	background-position: center;
}
.flor{
	background-image: url("../img/flor.png");
	background-repeat: no-repeat;
	background-size:40%;
	background-position: center;
}
.piedra{
	background-image: url("../img/piedra.png");
	background-repeat: no-repeat;
	background-size:40%;
	background-position: center;
}
.bombas{
	background-image: url("../img/bomba.png");
	background-repeat: no-repeat;
	background-size:55%;
	background-position: center;
}
.bomba{
	/*margin-top: 2%;*/
	height: 50%;
	width: 50%;
	position: absolute;
	z-index: 100;
}
.goma{
	background-image: url("../img/goma.png");
	background-repeat: no-repeat;
	background-size:80%;
	background-position: center;
}
.lapiz{
	background-image: url("../img/lapiz.png");
	background-repeat: no-repeat;
	background-size:80%;
	background-position: center;
}
.abrir_mapa{
	background-image: url("../img/abrir.png");
	background-repeat: no-repeat;
	background-size:80%;
	background-position: center;
}
.reset{
	background-image: url("../img/reset.png");
	background-repeat: no-repeat;
	background-size:80%;
	background-position: center;
}
.pared{
	background-image: url("../img/pared.png");
	background-repeat: no-repeat;
	background-size:22%;
	background-position: center;
}
.pared_signo{
	background-image: url("../img/pared_signo.png");
	background-repeat: no-repeat;
	background-size:35%;
	background-position: center;
}
.calle_vertical{
	position: relative;
	transform: rotate(90deg);
}
.calle_horizontal{
	position: relative;
}
.calle_vertical.pared{
	background-image: url("../img/pared.png");
	background-repeat: no-repeat;
	background-size: 30% 85%;
	background-position: center;	
}
.calle_vertical.pared_signo{
	background-image: url("../img/pared_signo.png");
	background-repeat: no-repeat;
	background-size: 30% 85%;
	background-position: center;
}

.calle_horizontal.pared{
	background-image: url("../img/pared.png");
	background-repeat: no-repeat;
	background-size: 20% 100%;
	background-position: center;
}
.calle_horizontal.pared_signo{
	background-image: url("../img/pared_signo.png");
	background-repeat: no-repeat;
	background-size: 20% 100%;
	background-position: center;
}

.poner_pared td.calle_vertical:hover{
	cursor: url("../img/pared_horizontal.gif"), auto;
}

.poner_pared_signo td.calle_vertical:hover{
	cursor: url("../img/pared_signo_horizontal.gif"), auto;
}

.poner_pared{
	cursor: url("../img/pared.gif"), auto;
}
.poner_pared_signo{
	cursor: url("../img/pared_signo.gif"), auto;
}
.poner_flor{
	cursor: url("../img/flor.gif"), auto;
}
.poner_signo{
	cursor: url("../img/signo.gif"), auto;
}
.poner_piedra{
	cursor: url("../img/piedra.gif"), auto;
}
.poner_goma{
	cursor: url("../img/goma.gif"), auto;
}
.poner_lapiz{
	cursor: url("../img/lapiz.gif"), auto;
}
.navbar-default{
	 background-color:darkslategrey !important;
}
.navbar-default .navbar-toggle, .navbar-default .navbar-toggle {
    background-color: darkslategrey !important;
	border-color: darkslategrey !important;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color:darkgreen !important;
	cursor: pointer;
}
.navbar {
    margin-bottom: 0px !important;
	width: 100%;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
	margin-top: 50px;
    z-index: 5;
    top: 0;
    right: 0;
    background-color:darkslategrey;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

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

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.sidecode {
	height: 93%;
	top: 50px !important;
	width: 0px;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	background-color: antiquewhite;
	transition: 0.5s;
}


@media only screen
and (min-device-width : 501px)
and (max-device-width : 1024px) {
	.sidecode.open{
		width: 50% !important;
	}
}


@media only screen
and (min-device-width : 1025px)  {
	.sidecode.open{
		width: 25% !important;
	}
}


@media only screen
and (max-device-width : 500px)  {
	.sidecode.open{
		width: 75% !important;
	}
}

.transp{
	opacity: 0.7!important;
}

.sidecode .navbar-default{
	 background-color:bisque !important;
}
.sidecode .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
textarea{
	height: 80%;
	width: 100%;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.cm-comenzar-fin {
  color:indigo;	
}
.cm-si-sino-finsi {
  color:darkcyan;
}
.cm-repetir{
  color:darkcyan;
}
.cm-condiciones {
  color:blue;
  font-style: italic;
}
.cm-instrucciones {
  color: darkgreen;
}
.cm-instrucciones_tomar {
  color: darkgreen;
  font-style: italic;
}
.cm-instrucciones_proceso {
  color:magenta;
}
.cm-variables {
  color:blue;
}
.horizontal-line {
    background-color: red;
    line-height: 5px;
    width: 100%;
    height: 5px;   
    position: absolute;
	top:50%;
}
.horizontal-line:after {
	content: '';
	display: block;  
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid red;
}

.horizontal-line-izquierda {
    background-color: red;
    line-height: 5px;
    width: 100%;
    height: 5px;   
    position: absolute;
	top:50%;
}
.horizontal-line-izquierda:after {
	content: '';
	display: block;  
	position: absolute;
	right: 100%;
	top: 50%;
	margin-top: -10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid red;
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;
}

.vertical-line {
    background-color: red;
    position: absolute;
	width: 5px;   
    height: 100%;
	left: 50%;
	top:0px;
	transform: rotate(90deg);
}
.vertical-line:after {
	content: '';
	display: block;  
	position: absolute;
	left: -8px;
	top: 100%;
	margin-bottom: 10px;
	width: 0;
	height: 0;
	border-top: 10px solid red;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;
}

.vertical-line-arriba {
    background-color: red;
    position: absolute;
	width: 5px;   
    height: 100%;
	left: 50%;
	top:0px;
	transform: rotate(90deg);
}
.vertical-line-arriba:before {
	content: '';
	display: block;  
	position: absolute;
	left: -8px;
	margin-top: -250%;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid red;
	border-left: 10px solid transparent;
}



.horizontal-line-b {
	background-color: darkblue;
	line-height: 5px;
	width: 100%;
	height: 5px;
	position: absolute;
	top:50%;
}
.horizontal-line-b:after {
	content: '';
	display: block;
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid darkblue;
}

.horizontal-line-izquierda-b {
	background-color: darkblue;
	line-height: 5px;
	width: 100%;
	height: 5px;
	position: absolute;
	top:50%;
}
.horizontal-line-izquierda-b:after {
	content: '';
	display: block;
	position: absolute;
	right: 100%;
	top: 50%;
	margin-top: -10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid darkblue;
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;
}

.vertical-line-b {
	background-color: darkblue;
	position: absolute;
	width: 5px;
	height: 100%;
	left: 50%;
	top:0px;
	transform: rotate(90deg);
}
.vertical-line-b:after {
	content: '';
	display: block;
	position: absolute;
	left: -8px;
	top: 100%;
	margin-bottom: 10px;
	width: 0;
	height: 0;
	border-top: 10px solid darkblue;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;
}

.vertical-line-arriba-b {
	background-color: darkblue;
	position: absolute;
	width: 5px;
	height: 100%;
	left: 50%;
	top:0px;
	transform: rotate(90deg);
}
.vertical-line-arriba-b:before {
	content: '';
	display: block;
	position: absolute;
	left: -8px;
	margin-top: -250%;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid darkblue;
	border-left: 10px solid transparent;
}

.list-group {
    overflow: hidden;
}
.list-group-item:first-child, .list-group-item:last-child {
	overflow: hidden;
}

.list-group-submenu {
	position: absolute;
	top: 3px;
	right: 3px;
	white-space: nowrap;
	list-style: none;
	padding-left: 0px;
}
.list-group-submenu .list-group-submenu-item {
	float: right;
	white-space: nowrap;
	display: block;
	padding: 0;
	margin-bottom: -1px;
}

.no-border {
    border: none;
}


/* 
    Text fields 
*/
div.input-group-option:last-child span.input-group-addon-remove{
    /*display: none;*/
}

div.input-group-option:last-child input.form-control{
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}

div.input-group-option{
    margin-bottom: 3px;
}

.list-group-item:hover{
	cursor:pointer;
	background-color:azure;
}

#pedir_nombre {
}

.btn span.glyphicon {    			
	opacity: 0;				
}
.btn.active span.glyphicon {				
	opacity: 1;				
}
label.btn span {
	font-size: 1.5em ;
}

label input[type="radio"] ~ i.fa.fa-circle-o{
	color: #c8c8c8;    display: inline;
}
label input[type="radio"] ~ i.fa.fa-dot-circle-o{
	display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o{
	display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o{
	color: #7AA3CC;    display: inline;
}
label:hover input[type="radio"] ~ i.fa {
	color: #7AA3CC;
}

label input[type="checkbox"] ~ i.fa.fa-square-o{
	color: #c8c8c8;    display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o{
	display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-square-o{
	display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o{
	color: #7AA3CC;    display: inline;
}
label:hover input[type="checkbox"] ~ i.fa {
	color: #7AA3CC;
}

div[data-toggle="buttons"] label.active{
	color: #7AA3CC;
}

div[data-toggle="buttons"] label {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 2em;
	text-align: left;
	white-space: nowrap;
	vertical-align: top;
	cursor: pointer;
	background-color: none;
	border: 0px solid
	#c8c8c8;
	border-radius: 3px;
	color: #c8c8c8;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

div[data-toggle="buttons"] label:hover {
	color: #7AA3CC;
}

div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
	-webkit-box-shadow: none;
	box-shadow: none;
}