@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');

html, body {height: 100%;}

body{font-family: Microsoft JhengHei UI, Montserrat, sans-serif;}
body.dark-mode{
	color: black;
	background-color: white;
}

a{text-decoration: none;}
a.sign-in{margin: 0 auto;}
a:hover{text-decoration: none;}
.bg-black{background-color: black;}
.bg-light{background-color: white !important;}

.login-navbar{
	line-height: 1.1;
	font-size: 19px;
	font-weight: 700;
	display: inline-block;
	letter-spacing: .5px;
	font-family: Microsoft JhengHei UI, Montserrat, sans-serif;
}

.login-navbar-dark{
	line-height: 1.1;
	font-size: 19px;
	font-weight: 700;
	display: inline-block;
	letter-spacing: .5px;
	font-family: Microsoft JhengHei UI, Montserrat, sans-serif;
}

.navbar-brand p{
	font-size: 16px;
	line-height: 1.2;
	margin: 0 0 0 10px;
	display: inline-block;
}

.login{
	display: table;
	position: relative;
	margin: 10em auto 2em;
}

.big-logo{
	font-size: 16px;
	line-height: 1em;
	font-weight: 700;
	display: inline-block;
	font-family: Microsoft JhengHei UI, Montserrat, sans-serif;
}

.expert{margin: 0;}

.input-logo{
	width: 40%;
	height: auto;
	display: block;
	margin: 0 auto;
	position: relative;
}

.row {
	width: auto;
	display: table;
	margin: 0 auto;
	position: relative;
}

input{
	color: black;
	outline: none;
}

.input-login{
	border: 0;
	width: 100%;
	margin: 0 0 30px;
	padding: 10px 20px;
	border-radius: 12px; 
	border: 1px solid gray;
	background-color: white;
	font-family: Microsoft JhengHei UI, Montserrat, sans-serif;
}

::placeholder {
  color: gray;
  font-size: 15px;
  font-weight: 600;
}

.sign-in{
	border: 0;
	width: 80%;
	color: white;
	display: block;
	margin: 0 auto;
	font-weight: 600;
	text-align: center;
	padding: 13px 20px;
	border-radius: 12px;
	background-color: #A40001;
}

.choose{
	cursor: pointer;
	display: block;
	color: #69717b;
	font-weight: 600;
	text-align: center;
	margin: 20px auto;
}

/* Pagina Usuarios */
h2.users{
	display: block !important;
	font-size: 30px !important;
	text-align: center !important;
	padding: 25px 0 0px !important;
	font-family: Montserrat, sans-serif;
}


/* Pagina Editar Usuario */
.usr-info{
	display: flex;
	padding: 4em 0 0;
  align-items: center;
  justify-content: center;
}

.usr-info p{
	font-size: 24px;
	margin: 5px 20px;
	font-weight: 800;
	text-align: center;
	font-family: Montserrat, sans-serif;
}

.mod{margin: 0 auto;}
.table-dark{border: none !important;}
.table-dark th{width: 15em;}
.table-dark td{width: 18em;}

.table-dark{
	margin-top: 25px;
	border-radius: 10px;
	background-color: black !important;
	font-family: Montserrat, sans-serif;
	box-shadow: 0px 4px 23px -4px rgba(0,0,0,0.75);
}

.table-dark td, .table-dark th, .table-dark thead th {border-left: 1px solid #32383e;}
select.form-control:not([size]):not([multiple]) {height: calc(2rem + 2px) !important;}

.admin{
	display: flex;
  padding: 1em 5em;
  align-items: center;
  justify-content: center;
}

.admin button{
	width: 40%;
	color: white;
	border: none;
	margin: 0 auto;
	font-weight: 600;
	text-align: center;
	padding: 13px 20px;
	border-radius: 10px;
  transition: ease .25s;
	outline: none !important;
	background-color: #A40001;
}

.admin button:hover {
  transition: ease .25s;
  background-color: black;
}

.create{width: 16em !important;}


/* Pagina Nuevo Usuario */
h2.h2-newu{
	padding: 25px 0 30px !important;
	text-align: center !important;
	display: block !important;
}

.new-new{
	float: right;
	display: flex;
}

.verify-user{
	width: 20em;
	padding: 5px 10px;
	margin: 0 0 10px;
	border: 1px solid black;
	border-radius: .325rem;
}

.bbdd{
	color: white;
	border: none;
	display: block;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	padding: 10px 20px;
	border-radius: 10px;
  transition: ease .25s;
	outline: none !important;
	background-color: #A40001;
}

.usr-info button:hover {
  transition: ease .25s;
  background-color: black;
}

.new-user{
	padding: 25px;
	background-color: black !important;
}

.new-user .ico-new{
	width: 33px;
	height: auto;
	color: white !important;
}

.new-img{
	top: 1.9em !important;
	right: 0.2em !important;
	padding: 5px !important;
	font-size: 30px !important;
	border-radius: 30px !important;
	background-color: grey !important;
}

td input{
	color: white;
	width: 100%;
	border: none;
	background-color: black;
}

/* Página Perfiles */
h2{
	margin: 0 !important;
	display: block !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	padding: 15px 0 0 !important;
	text-align: center !important;
	font-family: Montserrat, sans-serif;
}


/* Página Nuevos Perfiles */
h2.new-profile{
	color: black !important;
	margin: 20px 0 !important;
}

.write-name{
	margin: 0 auto;
	display: table;
	position: relative;
}

.write-name input{
	width: 30em;
	margin-left: 10px;
	border-radius: 8px;
	border: 1px solid black;
}

.th-center{text-align: center;}

/* Página Perfil */
.col-form-label{font-size: 13px !important;	}

.profile-options{
	display: flex;
  padding: 1em 8em;
  align-items: center;
  justify-content: center;
}

.profile-options button{
	width: 30%;
	color: white;
	border: none;
	margin: 0 auto;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	padding: 13px 20px;
	border-radius: 10px;
  transition: ease .25s;
	outline: none !important;
	background-color: #A40001;
}

.profile-options button:hover {
  transition: ease .25s;
  background-color: black;
}

@media (max-width: 768px) {
	.write-name input{width: 22em;}
}

@media (max-width: 600px) {
	.verify-user {width: 12em;}

	.input-login{
		display: block;
		margin: 20px auto;
		width: 90% !important;
	}

	.navbar-brand{
		margin: 0 auto;
    display: table;
	}
}

@media (max-width: 500px) {
	.write-name label{text-align: center; display: block;}
	.write-name input{width: 18em;}

	.profile-options{
		display: flex;
	  padding: 1em 0em;
	  align-items: center;
	  justify-content: center;
	}
}