body,
		html {
			margin: 0;
			padding: 0;
			background: #60a3bc !important;
		}
		.user_card {
			height: 460px;
			width: 350px;
			margin-top: auto;
			margin-bottom: auto;
			background: bisque;
			position: relative;
			display: flex;
			justify-content: center;
			flex-direction: column;
			padding: 10px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			border-radius: 5px;

		}
		.brand_logo_container {
			position: absolute;
			height: 170px;
			width: 170px;
			top: -15px;
			border-radius: 50%;
			background: #60a3bc;
			padding: 10px;
			text-align: center;
		}
		.brand_logo {
			height: 150px;
			width: 150px;
			border-radius: 50%;
			border: 2px solid white;
		}
		.form_container {
			margin-top: 150px;
		}
		.login_btn {
			width: 100%;
			background: #c0392b !important;
			color: white !important;
		}
		.login_btn:focus {
			box-shadow: none !important;
			outline: 0px !important;
		}
		.login_container {
			padding: 0 2rem;
		}
		.input-group-text {
			background: #c0392b !important;
			color: white !important;
			border: 0 !important;
			border-radius: 0.25rem 0 0 0.25rem !important;
		}
		.input_user,
		.input_pass:focus {
			box-shadow: none !important;
			outline: 0px !important;
		}
		.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
			background-color: #c0392b !important;
		}
 .highlight-white {
  box-shadow: inset 0 0 3px 3px yellow;
}
.highlight-black {
  box-shadow: inset 0 0 3px 3px blue;
}

.inputado {
  font-weight: bolder;
  background: pink;	
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}
 .big-checkbox {width: 40px; height: 40px;}
img { height: 5em; }
table {
margin: auto; 
border: outset maroon 6px; 
background: white; 
cursor: crosshair; 
}
td {
line-height: 0; 
width: 80px; height: 80px;
background: brown; 
text-align: center; 
vertical-align: middle; 
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
th {
line-height: 0; 
width: 60px; height: 10px; 
background: white; 
text-align: center; 
vertical-align: middle; 
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
tr:nth-child(odd) td:nth-child(odd), 
tr:nth-child(even) td:nth-child(even) {
background: bisque; 
}
.blancas, .negras {
display: inline-block; 
font: 800 50px/1 "ms mincho", "dejavu sans", "dejavu sans condensed", "dejavu sans mono", quivira, "arial unicode ms", code2000, "droid sans fallback", eversonmono, freeserif, "gnu unifont", "segoe ui symbol", "y.ozfont", "unicode bmp fallback sil", serif; 
width: 90%; height: 90%; 
background: white; 
color: black; 
border: 2px outset black; 
border-radius: 100%; 
overflow: hidden; 
cursor: -ms-grab; 
cursor: -moz-grab; 
cursor: -webkit-grab; 
cursor: grab; 
}

.negras {
background: black; 
color: white; 
border: 2px outset white; 
}

.mano {
cursor: -ms-grabbing; 
cursor: -moz-grabbing; 
cursor: -webkit-grabbing; 
cursor: grabbing; 
}

 .primero {
    width: 15%;
    float: left;
}
.segundo {
    width: 82%;
    float: left;
}