/*=============================================
PERFIL
=============================================*/

.perfil{
	position: relative;
	width: 100%;
	margin: auto;
	background: white;
	padding-bottom: 50px;
}

.perfil h1{
	text-align: center;
	font-weight: bold;
	margin-top: 50px;
	margin-bottom: 50px;
	color: #666;
}

.perfil .row{
	margin-left: 0px;
	margin-right: 0px;
}

.perfil .card{
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 20px;
}

.perfil .card-header{
	background: #47BAC1;
	color: white;
	font-weight: bold;
	padding: 15px;
}

.perfil .card-body{
	padding: 20px;
}

.perfil .card-footer{
	background: #f5f5f5;
	padding: 15px;
}

.perfil .avatar{
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 20px auto;
	display: block;
	border: 5px solid #f5f5f5;
}

.perfil .datos-personales{
	margin-bottom: 20px;
}

.perfil .datos-personales h3{
	font-weight: bold;
	margin-top: 10px;
	font-size: 20px;
	margin-bottom: 10px;
	text-align: center;
}

.perfil .datos-personales p{
	line-height: 1.5;
	margin-bottom: 10px;
	color: #777;
}

.perfil .datos-personales .btn{
	width: 100%;
	border-radius: 5px;
	margin-top: 10px;
}

.perfil .datos-personales .btn-editar{
	background: #47BAC1;
	color: white;
	font-weight: bold;
	border: none;
	padding: 10px 0;
	border-radius: 5px;
	margin-top: 10px;
	cursor: pointer;
	transition: 0.3s;
}

.perfil .datos-personales .btn-editar:hover{
	background: #2F4F4F;
}

.perfil .datos-personales .btn-cambiar-clave{
	background: #FFCC29;
	color: white;
	font-weight: bold;
	border: none;
	padding: 10px 0;
	border-radius: 5px;
	margin-top: 10px;
	cursor: pointer;
	transition: 0.3s;
}

.perfil .datos-personales .btn-cambiar-clave:hover{
	background: #e6b800;
}

.perfil .datos-personales .btn-cerrar-sesion{
	background: #FC4850;
	color: white;
	font-weight: bold;
	border: none;
	padding: 10px 0;
	border-radius: 5px;
	margin-top: 10px;
	cursor: pointer;
	transition: 0.3s;
}

.perfil .datos-personales .btn-cerrar-sesion:hover{
	background: #e64146;
}

.perfil .reservas{
	margin-bottom: 20px;
}

.perfil .reservas h3{
	font-weight: bold;
	margin-top: 10px;
	font-size: 20px;
	margin-bottom: 10px;
}

.perfil .reservas .table{
	width: 100%;
	margin-bottom: 20px;
}

.perfil .reservas .table th{
	background: #47BAC1;
	color: white;
	font-weight: bold;
	padding: 15px;
}

.perfil .reservas .table td{
	padding: 15px;
}

.perfil .reservas .table tr:nth-child(even){
	background: #f5f5f5;
}

.perfil .reservas .table tr:hover{
	background: #f0f0f0;
}

.perfil .reservas .table .btn{
	width: 100%;
	border-radius: 5px;
	margin-top: 10px;
}

.perfil .reservas .table .btn-ver{
	background: #47BAC1;
	color: white;
	font-weight: bold;
	border: none;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}

.perfil .reservas .table .btn-ver:hover{
	background: #2F4F4F;
}

.perfil .reservas .table .btn-cancelar{
	background: #FC4850;
	color: white;
	font-weight: bold;
	border: none;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}

.perfil .reservas .table .btn-cancelar:hover{
	background: #e64146;
}

.perfil .reservas .table .btn-pagar{
	background: #47D03E;
	color: white;
	font-weight: bold;
	border: none;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}

.perfil .reservas .table .btn-pagar:hover{
	background: #3cb134;
}

.perfil .reservas .table .estado{
	font-weight: bold;
}

.perfil .reservas .table .estado-pendiente{
	color: #FFCC29;
}

.perfil .reservas .table .estado-confirmada{
	color: #47D03E;
}

.perfil .reservas .table .estado-cancelada{
	color: #FC4850;
}

.perfil .reservas .table .estado-finalizada{
	color: #47BAC1;
}

.perfil .reservas .table .fecha{
	color: #777;
}

.perfil .reservas .table .habitacion{
	color: #777;
}

.perfil .reservas .table .precio{
	color: #777;
	font-weight: bold;
}

.perfil .form-group{
	margin-bottom: 20px;
}

.perfil .form-group label{
	font-weight: bold;
	margin-bottom: 5px;
}

.perfil .form-group input,
.perfil .form-group select,
.perfil .form-group textarea{
	border-radius: 5px;
	border: 1px solid #ddd;
	padding: 10px;
	width: 100%;
}

.perfil .form-group input:focus,
.perfil .form-group select:focus,
.perfil .form-group textarea:focus{
	outline: none;
	border-color: #47BAC1;
}

.perfil .form-group .input-group-text{
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-left: none;
}

.perfil .form-group .input-group-text i{
	color: #777;
}

.perfil .form-group .input-group{
	margin-bottom: 20px;
}

.perfil .form-group .input-group input{
	border-right: none;
}

.perfil .form-group .input-group input:focus{
	border-color: #ddd;
	border-right: none;
}

.perfil .form-group .input-group input:focus + .input-group-append .input-group-text{
	border-color: #47BAC1;
}

.perfil .form-group .input-group .input-group-append{
	margin-left: 0;
}

.perfil .form-group .input-group .input-group-append .input-group-text{
	border-radius: 0 5px 5px 0;
}

.perfil .form-group .input-group .input-group-prepend{
	margin-right: 0;
}

.perfil .form-group .input-group .input-group-prepend .input-group-text{
	border-radius: 5px 0 0 5px;
}

.perfil .form-group .input-group .input-group-prepend .input-group-text i{
	color: #777;
}

.perfil .form-group .input-group .input-group-prepend .input-group-text + input{
	border-left: none;
}

.perfil .form-group .input-group .input-group-prepend .input-group-text + input:focus{
	border-color: #ddd;
	border-left: none;
}

.perfil .form-group .input-group .input-group-prepend .input-group-text + input:focus + .input-group-append .input-group-text{
	border-color: #47BAC1;
}

.perfil .nav-tabs{
	margin-bottom: 20px;
}

.perfil .nav-tabs .nav-item .nav-link{
	color: #777;
	font-weight: bold;
}

.perfil .nav-tabs .nav-item .nav-link.active{
	color: #47BAC1;
	border-color: #47BAC1;
}

.perfil .tab-content{
	padding: 20px;
	border: 1px solid #ddd;
	border-top: none;
	border-radius: 0 0 5px 5px;
}

.perfil .tab-content .tab-pane{
	padding: 20px;
}

.perfil .tab-content .tab-pane h3{
	font-weight: bold;
	margin-top: 10px;
	font-size: 20px;
	margin-bottom: 10px;
}

.perfil .tab-content .tab-pane p{
	line-height: 1.5;
	margin-bottom: 10px;
	color: #777;
}

.perfil .tab-content .tab-pane .btn{
	width: 100%;
	border-radius: 5px;
	margin-top: 10px;
}

.perfil .tab-content .tab-pane .btn-guardar{
	background: #47BAC1;
	color: white;
	font-weight: bold;
	border: none;
	padding: 10px 0;
	border-radius: 5px;
	margin-top: 10px;
	cursor: pointer;
	transition: 0.3s;
}

.perfil .tab-content .tab-pane .btn-guardar:hover{
	background: #2F4F4F;
}

.perfil .tab-content .tab-pane .btn-cancelar{
	background: #FC4850;
	color: white;
	font-weight: bold;
	border: none;
	padding: 10px 0;
	border-radius: 5px;
	margin-top: 10px;
	cursor: pointer;
	transition: 0.3s;
}

.perfil .tab-content .tab-pane .btn-cancelar:hover{
	background: #e64146;
}

/*=============================================
TABLET HORIZONTAL (LG revisamos en 1024px)
=============================================*/

@media (max-width:1199px) and (min-width:992px){

	.perfil .avatar{
		width: 120px;
		height: 120px;
	}

}

/*=============================================
TABLET VERTICAL (MD revisamos en 768px)
=============================================*/

@media (max-width:991px) and (min-width:768px){

	.perfil .avatar{
		width: 100px;
		height: 100px;
	}

}

/*=============================================
MÓVIL HORIZONTAL (SM revisamos en 576px)
=============================================*/

@media (max-width:767px) and (min-width:576px){

	.perfil .avatar{
		width: 80px;
		height: 80px;
	}

}

/*=============================================
MÓVIL VERTICAL (revisamos en 320px)
=============================================*/

@media (max-width:575px){

	.perfil .avatar{
		width: 60px;
		height: 60px;
	}

}