/* Variables (Color) */
:root {
  --bg-color: #E6ADA8;
  --bg-secondary_color: #F2D5D3;
  --text-color: #B890C6;
  --text-title-color: #E6A8E0;
  --button-color: #D4A8E6;
}

/* Sticky footer */
html, body {
  background-color: var(--bg-color);
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 0px;
  padding-bottom: 147px;
}
.footer {
  margin-top: -122px;
}

.footer button {
  color: #000;
  background-color: var(--bg-secondary_color);
  border-color: #000;
}

.footer button:hover {
  color: #fff;
  background-color: var(--text-color);
  border-color: #000;
  outline: none;
}

.footer .social-icon {
  font-size: 2rem;
}

.footer .object-fit{
  width: 1.2*70px !important;
  height: 1.2*60px !important;
  overflow: hidden;
  margin: -25px;
}

.footer .object-fit img {
  width: 10rem;
  height: auto;
  margin-bottom: -15px;
}

/* shadows */
nav {
  z-index: 1;
  padding-bottom: 20px;
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.2);
}

footer {
  box-shadow: 2px 0 4px 1px rgba(0, 0, 0, 0.2);
}

/* Services */
.carousel {
  z-index: 0;
  margin: 0;
  padding: 0;
}
.carousel-img {
  filter: brightness(50%);
  max-width: 100%;
  max-height: 400px;
  height: auto;
  object-fit: cover;
}

/* Navbar */

.navbar-color {
  background-color: var(--bg-color) !important;
  color: var(--text-color);
}

.navbar button {
  color: #000;
  background-color: var(--bg-secondary_color);
  border-color: #000;
}

.navbar button:hover {
  color: #fff;
  background-color: var(--text-color);
  border-color: #000;
  outline: none;
}

.crop-container {
  width: 70px;
  height: 50px;
  overflow: hidden;
}
.crop-container img {
  width: 6rem;
  margin: -15px;
}


/* Banner */
.banner {
  border: 0px solid var(--bg-color) !important;
  background-color: var(--bg-secondary_color);
}

.banner .button-cta {
  color: #000 !important;
  background-color: var(--button-color) !important;
  border-color: var(--button-color);
}

.banner .button-cta:hover {
  color: #fff !important;
  background-color: var(--text-color) !important;
}

.banner .button-info {
  background-color: none;
  outline: var(--button-color);
}

.banner .button-info:hover {
  background-color: var(--bg-color) !important;
}

/* About */
.about {
  margin-top: 20px;
  margin-bottom: 50px;
}
.imagen-perfil {
  max-width: 100%;
  height: auto;
  max-height: 16rem;
  border-radius: 50%;
}

.about-item {
  margin-top: 20px;
}

/* Reviews */
.reviews {
  background-color: var(--bg-secondary_color);
  padding-bottom: 50px;
  padding-top: 1px;
}

.reviews h3 {
  margin-bottom: 1rem;
}

/* Signin */
.signin {
  margin-bottom: 50px;
}

.signin .card {
  box-shadow: 0 17px 12px 0 rgba(0,0,0,0.3);
  background-color: var(--bg-secondary_color);
}

.signin .button-iniciar {
  color: #000 !important;
  background-color: var(--button-color) !important;
  border-color: var(--button-color);
}

.signin .button-iniciar:hover {
  color: #fff !important;
  background-color: var(--text-color) !important;
}

/* Signup */
.pass-control{
  margin-top: 0.5rem;
  padding-left: 1rem;
}

.pass-control p{
  font-size: 0.8rem;
  margin-bottom: 2px;
}

/* Agendar */

.user-panel {
  margin-bottom: 50px;
}

.user-panel form .form-group {
  margin-bottom: 1rem;
}

form button {
  margin-bottom: 1rem;
  color: #000 !important;
  background-color: var(--button-color) !important;
  border-color: var(--button-color);
}

form button:hover {
  color: #fff !important;
  background-color: var(--text-color) !important;
}

/* Services */

.services {
  margin-bottom: 100px;
}

.services .card img {
  max-height: 50%;
  object-fit: cover;
}

.services .card {
  margin-top: 2rem;
  box-shadow: 0 8px 17px 0 rgba(0,0,0,0.5);
  min-height: 45rem;
}

/* GENERAL */
.shadowed {
  box-shadow: 0 8px 17px 0 rgba(0,0,0,0.5);
}

.contact-card {
  background-color: var(--bg-secondary_color);
  margin-bottom: 2rem;
}

/* Agenda */

.panel-form {
  text-align: left;
}

.panel-agenda {
  background-color: var(--bg-secondary_color);
  border: 3px solid var(--button-color);
  padding-left: 0;
  padding-right: 0;
}

.panel-agenda .row {
  margin: 0;
}

@media (min-width: 768px) {
  .right-panel {
    border-left: 3px solid var(--button-color);
    padding-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 767.98px) {
  .right-panel {
    border-top: 3px solid var(--button-color);
    padding-right: 0;
    padding-left: 0;
  }
}

.left-panel {
  padding: 0;
}

.left-panel .nav-link {
  color: #555;
}

.left-panel .nav-link:hover {
  font-weight: bold;
}

.left-panel .nav-item .active{
  background-color: var(--button-color);
  color: #fff;
  font-weight: bold;
}

.panel-agenda .panel-form .form-group {
  margin-top: 1rem;
}

.panel-agenda .panel-form .btn {
  margin-top: 1rem;
}

.panel-agenda .info-solicitudes p {
  margin-top: -10px;
}

.panel-agenda .solicitud {
  padding-left: 1rem;
}

.panel-agenda .revisar .btn-aceptar {
  background-color: #38be86 !important;
}

.panel-agenda .revisar .btn-aceptar:hover {
  background-color: #257551 !important;
  color: #fff !important;
}

.panel-agenda .revisar .btn-rechazar {
  background-color: #e66767 !important;
}

.panel-agenda .revisar .btn-rechazar:hover {
  background-color: #9e2525 !important;
  color: #fff !important;
}

.panel-agenda .agenda {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.panel-agenda .agenda .btn_day {
  border-color: var(--button-color);
  border-width: 2px;
  margin: 0.5rem;
}

.panel-agenda .agenda .btn_day:hover {
  background-color: var(--button-color);
  color:#fff ;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;  
  width: 100%;
  height: 100%;
}

.popup .overlay {
  position: absolute;
  left: 0; 
  right: 0; 
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  transition:all ease-in-out 2s;
}

.popup .popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 600px;
  background: #fff;
  padding: 25px;
  border-radius: 0.375rem;
  box-shadow: 0px 2px 2px 5px rgba(0, 0, 0, 0.05);
  transition: all 300ms ease-in-out;
}

.popup .btn-cancel {
  background-color: #fff !important;
  border: 2px solid var(--button-color) !important;
}

.popup .btn-cancel:hover {
  background-color: var(--button-color) !important;
  color: #fff !important;
  border: 2px solid var(--button-color) !important;
}

.panel-agenda #confirm-popup table td {
  vertical-align: top;
}
.panel-agenda #confirm-popup table td .label-popup{
  text-align: end;
}

.panel-agenda #confirm-popup table td .content-popup{
  margin-left: 10px;
}