.boxDerecha
{
  margin-left: auto;
 display: inline-block;        
}

.boxIzquierda
{
  vertical-align: top;
   display: inline-block;
}
.boton
{
      width: auto;
      background: #22313f;
      border: 12;
      padding: 12px;
      color: white;
      margin: 16px 0;
      font-size: 16px;
}
.btn-cerrar
{
      width: auto;
      background: #2980b9;
      border: none;
      padding: 12px;
      color: white;
      margin: 16px 0;
      font-size: 16px;
}
.login-container {
	height: 100vh;
	width: 100%;

}
.login-form{
	max-width: 100%;
	width:370px ;
	padding: 30px;
	margin: auto;
	background-color:#E9EBEC;
	box-shadow: 7px 13px 25px #000;
}
.form-control{
	font-size: 15px;
	min-height: 48px;
	font-weight: 500;
}
.form-control:focus{
	border-color: #018CF3;
	box-shadow: 0 0 0 0.2rem rgba(1, 140, 243, .25);
}
.forgot-link label{
	margin-bottom: 0;
}
.login-form a{
	text-decoration: none;
	color: #666;
	

}
.login-form a:hover{

}
.btn-custom{
	background: #018CF3;
	border-color: #018CF3 ;
	color: #fff ;
	font-weight: 600;
	font-size: 15px;
	min-height: 48px;
}

.btn-custom:focus,
.btn-custom:hover,
.btn-custom:active,
.btn-custom:active:focus{
	background:#0175CB;
	
	color: #fff;
}
.btn-custom:focus{
	box-shadow: 0 0 0 0.2rem rgba(1, 140, 243, .25);
}

#cont { width:99%; font-size: 10px;  justify-content: center;  font-size:15px;display: flex;}

#contInd {text-align: center; background-color: #fff; padding: 5px; margin: 8px; box-shadow: -3px 5px 20px 0px rgba(189, 183, 189, 1); width:50%; height:50%;}
/* Cuando la pantalla sea más chica que 480px aplica estos estilos */
@media (max-width: 600px) {	
	#container { width:99%; font-size: 10px;  justify-content: center; display: inline-block;}

}

@media (max-width: 600px) {	

	#container {text-align: center;
		background-color: #fff;
		padding: 5px;
		margin: 8px;
		box-shadow: -3px 5px 20px 0px rgba(189, 183, 189, 1);
		width: 99%;
		height: 50%;
	font-size: small;
	display: inline-block;}

	.form-row {
		display: -webkit-box;
		display: -ms-flexbox;
		display: grid;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-right: -5px;
		margin-left: -5px;
		justify-items: center;
		
                  align-items: center;
                  justify-content: center;
                  vertical-align: middle;
	}

	#middleSum {
		width: 99%;
		text-align: center;
		background-color: #fff;
		padding: 5px;
		margin: 6px;
		align-content: center;
	}
	.sumClas {
		width: 99%;
		text-align: center;
		background-color: #fff;
		padding: 5px;
		margin: 6px;
	}
}
/* Pero si mi pantalla es mayor a 480 px aplica estos estilos siempre y cuando el tamaño sea menor a 768 px */
@media (max-width: 768px) {	
	
}
.abs-center 
            {
                  display: grid;
                  align-items: center;
                  justify-content: center;
                  vertical-align: middle;
                  
            }
            #container { width:99%; font-size: 10px;  justify-content: center; display: flex;}
            #left, #middle, #right {display: inline-block; display: inline;  vertical-align: middle; justify-content: center; font-size: 12px; box-shadow: -3px 5px 20px 0px rgba(189, 183, 189, 1);}
            #left {width: 32%; text-align: center; background-color: #fff; padding: 5px; margin: 6px;}
            #middle {width: 32%; text-align: center; background-color: #fff; padding: 5px; margin: 6px;}
            #right {width: 32%; text-align: center; background-color: #fff; padding: 5px; margin: 6px;}
            #rightSum {width: 10%; text-align: center; background-color: #fff; padding: 5px; margin: 6px;}
            #middleSum {width: 10%; text-align: center; background-color: #fff; padding: 5px; margin: 6px; align-content:center;}

            #container2 { width:99%; font-size: 10px;  justify-content: center; display: flex;}
            #leftt, #middlee, #rightt {display: inline-block; display: inline;  vertical-align: middle; justify-content: center; font-size: 9px;}
            #leftt {width: 20%; text-align: center; background-color: #fff; padding: 5px; margin: 5px;}
            #middlee {width: 20%; text-align: center; background-color: #fff; padding: 5px; margin: 5px;}
            #rightt {width: 20%; text-align: center; background-color: #fff; padding: 5px; margin: 5px;}