/*
Al cuerpo de la
pagina se aplica el tamaño de fuente
 */
 html{
	overflow: scroll;
 }
 body {
  font-size: 12px;
  background-size: cover;
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255, 255, 255, 0.7)), url("https://images-ext-2.discordapp.net/external/I4WDr_mFwmEPpd1gYZpWqmZ8Fod844njMPCXgLycCfk/https/www.incimages.com/uploaded_files/image/1920x1080/getty_913017342_415366.jpg?width=1191&height=670");
  background-size: 1850px 850px;
  font-family: 'Varela Round', sans-serif;
  font-size: 13px;

}
/**
 * se aplica el ancho, margen centrado
 * borde de un pixel con redondeado, y rellenado
 * a la izquierda y derecha
 */
#Contenedor{
	width: 400px;
	margin: 50px auto;
	height: 400px;
	border-radius:8px;
	padding: 0px 9px 0px 9px;
}

/**
 * Aplicando al icono de usuario el color de fondo,
 * rellenado de 20px y un redondeado de 120px en forma
 * de un circulo
 */
.Icon span{
      background: #A8A6A6;
      padding: 20px;
      border-radius: 120px;
}
/**
 * Se aplica al contenedor madre un margen de tamaño 10px hacia la cabecera y pie,
 * color de fuente blanco,un tamaño de fuente 50px y texto centrado.
 */
.Icon{
     margin-top: 10px;
     margin-bottom:10px; 
     color: #FFF;
     font-size: 50px;
     text-align: center;
}
/**
 * Se aplica al contenedor donde muestra en el pie
 * la opción de olvidaste tu contraseña?
 */
.opcioncontra{
	text-align: center;
	margin-top: 20px;
	font-size: 14px;
}

/**
 * En las siguientes lineas
 * se define el diseño adaptable, para que
 * se muestre en los dispositivos móviles
 */

/******************************************/
/***    DISEÑO PARA MOVILES 320        ****/
/******************************************/
@media only screen and (max-width:320px){
	#Contenedor{
		width: 100%;
		height: auto;
		margin: 0px;
	}
}

/******************************************/
/***    DISEÑO PARA MOVILES 240        ****/
/******************************************/
@media only screen and (max-width:240px){
	
}

.buttonAddPass {
	position: relative;
	top: 100px;
    left: 1217px;
}

.buttonAddUser {
	text-align: center;
}



  	/* Modal styles */
	.modal .modal-dialog {
		max-width: 450px;
	}
	.modal .modal-header, .modal .modal-body, .modal .modal-footer {
		padding: 20px 30px;
	}
	.modal .modal-content {
		border-radius: 3px;
	}
	.modal .modal-footer {
		background: #ecf0f1;
		border-radius: 0 0 3px 3px;
	}
    .modal .modal-title {
        display: inline-block;
    }
	.modal .form-control {
		border-radius: 2px;
		box-shadow: none;
		border-color: #dddddd;
	}
	.modal textarea.form-control {
		resize: vertical;
	}
	.modal .btn {
		border-radius: 2px;
		min-width: 100px;
	}	
	.modal form label {
		font-weight: normal;
	}	


	/* Table styles */
	.table-responsive {
        margin: 30px 0;
    }
	.table-wrapper {
		min-width: 1000px;
        background: #fff;
        padding: 20px 25px;
		border-radius: 3px;
        box-shadow: 0 1px 1px rgba(0,0,0,.05);
    }
	.table-title {        
		padding-bottom: 15px;
		background: #435d7d;
		color: #fff;
		padding: 16px 30px;
		margin: -20px -25px 10px;
		border-radius: 3px 3px 0 0;
    }
    .table-title h2 {
		margin: 5px 0 0;
		font-size: 24px;
	}
	.table-title .btn-group {
		float: right;
	}
	.table-title .btn {
		color: #fff;
		float: right;
		font-size: 13px;
		border: none;
		min-width: 50px;
		border-radius: 2px;
		border: none;
		outline: none !important;
		margin-left: 10px;
	}
	.table-title .btn i {
		float: left;
		font-size: 21px;
		margin-right: 5px;
	}
	.table-title .btn span {
		float: left;
		margin-top: 2px;
	}
    table.table tr th, table.table tr td {
        border-color: #e9e9e9;
		padding: 12px 15px;
		vertical-align: middle;
    }
	table.table tr th:first-child {
		width: 250px;
	}
	table.table tr th:last-child {
		width: 130px;
	}
    table.table-striped tbody tr:nth-of-type(odd) {
    	background-color: #fcfcfc;
	}
	table.table-striped.table-hover tbody tr:hover {
		background: #f5f5f5;
	}
    table.table th i {
        font-size: 13px;
        margin: 0 5px;
        cursor: pointer;
    }	
    table.table td:last-child i {
		opacity: 0.9;
		font-size: 22px;
        margin: 0 5px;
    }
	table.table td a {
		font-weight: bold;
		color: #566787;
		display: inline-block;
		text-decoration: none;
		outline: none !important;
	}
	table.table td a:hover {
		color: #2196F3;
	}
	table.table td a.edit {
        color: #FFC107;
    }
    table.table td a.delete {
        color: #F44336;
    }
    table.table td i {
        font-size: 19px;
    }
	table.table .avatar {
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 10px;
	}

	a {
		cursor:pointer;
	}

	.passCaja{
		color:transparent;
		cursor:default;
	}

	.ojo{
		cursor:pointer;
		color:  #7e9ac7 ; 
	}

	#opcionesContraseña{
		height: 45px;
	}

	.nav_menu{
		margin-top: 30px;
	}

	.nav_menu_tabs{
		display: inline-block;
	}

	.nav_menu_botones{
		float: right;
	}

	/*mostrar y ocultar tablas compartido y privado*/
	.archivosOcultos{
		display:none !important;
	}

	.modal-compartir{
		/*text-align: center;*/
	}

	.multiselect-container{
		overflow:scroll;
		max-height: 200px;
	}

	.isDisabled {
		color: currentColor;
		cursor: not-allowed;
		opacity: 0.5;
		text-decoration: none;
		pointer-events: none; 
	}

	#archivosCompartidosList{
		overflow:scroll;
		max-height: 200px;
	}

	#archivosCompartidosConmigoList{
		overflow:scroll;
		max-height: 200px;
	}


	.qrCode{
		display: block;
		margin: auto;
		margin-top: 50px;
	}

	.badgebox
	{
		opacity: 0;
	}

	.badgebox + .badge
	{
		/* Move the check mark away when unchecked */
		text-indent: -999999px;
		/* Makes the badge's width stay the same checked and unchecked */
		width: 27px;
	}

	.badgebox:focus + .badge
	{
		/* Set something to make the badge looks focused */
		/* This really depends on the application, in my case it was: */
		
		/* Adding a light border */
		box-shadow: inset 0px 0px 5px;
		/* Taking the difference out of the padding */
	}

	.badgebox:checked + .badge
	{
		/* Move the check mark back when checked */
		text-indent: 0;
	}