body{
	letter-spacing: 0.04em;
}

#cabecera{
  background-color:#cb30ad;
  height:80px;
  padding:20px 40px;
  overflow:hidden;
}

.reporte{
  margin-right:20px;
  float:right;
  border-radius: 20px;
  color: black;
  background-color: transparent;
  box-shadow: 6px 6px 0px #cb30ad;
  border: 1px solid black;
  height: 60px;
}
.generando{
  margin-right:20px;
  float:right;
  border-radius: 20px;
  color: gray;
  background-color: transparent;
  box-shadow: 6px 6px 0px #651856;
  border: 1px solid black;
  height: 60px;
}

option, select, input{
  font-family: 'DM Sans';
}

.form-section fieldset {
    border-radius:25px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.dot {
  z-index: -1;
  height: 600px;
  width: 600px;
  background-color: #EBEBEB;
  border-radius: 50%;
  display: inline-block;
box-shadow:0px 0px 100px 50px rgba(245,66,206,.5), /*rgba(245,66,206,.5),*/

   0px 0px 20px 0px rgba(245,66,206,.5),
   0px 0px 5px 0px rgba(245,66,206,.5);
}
legend {
    background-color: #000;
    color: #fff;
    padding: 3px 6px;
}
.circle {
 /* width: 250px;
  height: 250px;*/
  line-height: 200px;
  border-radius: 50%;
  font-size: 50px;
  text-align: center;
  background: white;
  opacity: 1;

 
}
.boton {
  background-color: #cb30ad;  
  margin:20px;
  width:100px !important;
  border-radius:15px;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  margin-top: 55px;
}

/* CALENDARIO */

#caja_calendario{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

#caja_flechas{
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#caja_flechas button{
  background: transparent;
  border: none;
}

#caja_flechas i{
  color: #cb30ad;
  font-size: 2.5em;
}

#caja_flechas i:hover{
  color: #ddd;
}

/* RESERVA_EDITAR */

#cajitaRE h3,h4{
  margin-top: 50px;
  margin-bottom: 40px;
}

.cajaHuesped, .caja_facuracion{
  margin:50px;
}

#caja_facuracion, #caja_reserva{
  margin: 50px!important;
  display: flex;
  flex-wrap: wrap;
}

#caja_reserva{
  gap: 10px;
}

.caja_reserva{
  display: flex;
  flex-wrap: wrap;
}

/* .caja_reserva label{
  margin: 0 !important;
} */

.desayuno{
  /* display:inline-grid;
  justify-content:left; */
  display: inline

}
.desayuno input{
  accent-color:#cb30ad;
  width: 50%!important;
  height: 30px;
  font-size: 40px;
  margin-top: 5px;
  display: block;
}

.activo{
  background-color: #cb30ad50;
}

.desayuno label{
  width: 20%!important;
}

.tamaño{
  width: 49% !important;
}

#cajitaRE h3{
  text-decoration: 5px underline #cb30ad;
  font-size: 1.7em !important;
}

.subrayado{
  text-decoration: 5px underline #cb30ad;
}

#tit_precio_total{
  margin-left: 43%;
  margin-bottom: 1%;
}


#boton_RE{
  margin-left: 44%;
  width:160px;
  margin-top: 35px !important;
  margin-bottom: 50px ! important;
}

#tit_precio_total{
  font-size: 20px!important;
}
#boton_RE:hover, .boton2:hover, .boton:hover{
  background-color: #DDDDDD;
  color: #cb30ad;
}

#boton_RE, .boton2, .boton{
  letter-spacing: 1px;
}

#cajitaRE_titulo {
  font-size: 2.5em !important;
  margin-top: 20px;
}

#firma{
  margin-top: 15px !important;
}

 #cajitaRE_titulo, .huesped{
  margin-left: 41%;
  flex-shrink: initial!important;
}

 #cajitaRE label{
  margin-top: 20px;
} 

.cajaHuesped{
  margin-top: 30px!important;
}

#cajonHuesped{
  margin-left: 0%;
  display: flex;
  flex-wrap: wrap;
  /* width: 50%; */
  margin-top: 20px;
}

.huesped{
  text-decoration: 5px underline #dbb6d4;
  margin-bottom: 20px!important;
}

/* HABITACION NUEVA */

#botonHN{
  background-color: #cb30ad;
}

/* #botonHE{
 margin-top: 20px;
} */



/* APARTADO IMAGENES */

.boton2 {
  background-color: #cb30ad;  
  margin:20px;
  width:100px !important;
  border-radius:15px;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  margin-bottom: 50px;
  position: relative;
  bottom: 140px;
  right: 65px;
}

#imgh3 {
  text-align: center
}

.cajaImg form{
  width: 90%;
  margin-left: 10px;
}

.cajaImg form input[type=file]{
  background-color: #f3abe5;
  margin-left: 35px;
  padding: 0px !important;
  width: 50%;
}

#cajaImagenes{
  width: 60%;
}

.cajaImg_tipos{
  display: flex;
  margin: 0 10px;
}

.cajaImg_tipos label{
  margin: 0 40px;
}

#cajaImagenes > label{
  margin: 15px;
  font-size: 20px;
}

/* FILTERIZR */

#lista-filter {
  gap: 5%;
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  list-style: none;
  margin: auto;
  margin-bottom: 2%;
}

#lista-filter > li {
  cursor: pointer;
  margin-right: .5rem !important;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
}

#lista-filter > li::after {
  border-top: 5px solid #cb30ad;
  margin-top: 10%;
  display: block;
  position: relative;
  width: 100%;
  content: "";
}

.filtr-item{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.filtr-item img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.caja-foto-eliminar{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33%;
}

.caja-foto-eliminar .boton-rojo{
  margin: 30px;
}

/* FIN IMAGENES */

.boton_claro {
  background-color: #fff;   
  margin:20px;
  border-radius:15px;
  border: none;
  color: #cb30ad;
  border:1px solid #cb30ad;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  height:50px;
  width:100px;
}

.campo{
	background-color: #eaeaea;
	color: black;
	position: relative;
	border-radius: 25px;
	padding:10px;
	border:none;
	width:80%;
}

input[type=text]:focus {
  border: 3px solid #555;
}
#sig-canvas {
  border: 2px dotted #FFFFFF;  /*#CCCCCC  */
  border-radius: 15px;
  cursor: crosshair;
}

.ui-datepicker-header{
	background:#cb30ad !important;
	border:1px solid #cd30ad !important;
}

body {
  margin:0;
  padding: 0;
/*  background:  #A4A1A1;*/
/* background-image: url('image/background.jpg'); #EBEBEB */
 /* overflow: hidden; */
 background-size: cover;
 background-color: white;
 background-blend-mode: darken;
}

input[type=text] {
  transition: width 0.4s ease-in-out;
}

.container {
/*background-blend-mode: lighten;
background-color: rgba(255,255,255);*/
  -webkit-transform-style : preserve-3d;
  -moz-transform-style    : preserve-3d;
  -o-transform-style      : preserve-3d;
  -ms-transform-style     : preserve-3d;
  transform-style         : preserve-3d;
  z-index: 1;
}

h1 {
  position: relative;
  text-align: center;
  color: #faf9f5;
  font-size: 100px;
  font-family: "Cormorant Garamond", serif;
}

button {
  margin: 20px;   
  width: 130px;
  height: 80px;
}

.button_big {
  margin: 20px;
  width: 430px;
  height: 180px;
}

.custom-btn {
  color: #fff;
  border-radius: 5px; 
  padding: 10px 25px;
  font-family: "DM Sans";
  font-weight: 500;
  font-size: 54;  /* 54 */
  background: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}


/* 16 */
.btn-16 {
  border: none;
  color: #fff;
  background-color:#6263D5;
}
.btn-16:after {
  position: absolute;
  content: "";
  width: 0;
 /* height: 100%;
  top: 0;
  left: 0;*/
  direction: rtl;
  z-index: -1;
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}
.btn-16:hover {
  color:#6263D5 ;
  background-color:#fff;
}
.btn-16:hover:after {
  left: auto;
  right: 0;
 /* width: 100%;*/
}
.btn-16:active {
  top: 2px;
}


/* 16 */


.site {
    height: 100%;
}

.page-content {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: #1abc9c;
}

#new-content {
  background: #f1c40f;
  z-index: 1;
}

.page-content p {
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-size: 75px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  margin: 0;
}

#new-content p {
  color: #010101;
}

.page-content p strong {
  font-weight: 700;
}

/* Calendar Start */
  ::-webkit-inner-spin-button { 
  display:none;
}
::-webkit-calendar-picker-indicator { background-color:white}
input[type=date]{
  font-size:25px;
}
::-webkit-datetime-edit-text { color:#555555}
::-webkit-datetime-edit-month-field { color:#555555 }
::-webkit-datetime-edit-day-field { color: #555555; }
::-webkit-datetime-edit-year-field { color:#555555; }
::-webkit-calendar-picker-indicator{ 
  background-image: url("../image/Calendar-icon.png"); /*http://icons.iconarchive.com/icons/dakirby309/simply-styled/256/Calendar-icon.png */
      background-position:center;
       background-size:20px 20px;
       background-repeat:no-repeat;
      color:rgba(204,204,204,0);
}
/* Circle text shape */
*, *:before, *:after {
	box-sizing: border-box;
}


.arrow {
  
  width: 100px;
  height: 100px;
  margin: 20px;
  display: inline-block;
  position: relative;

  &::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-color: #000;
    border-width: 2px 2px 0 0;
    position: absolute;
    transform-origin: 50% 50%;
  }

  &.left::before { 
    transform: rotate(-135deg);
    margin: -15px 0 0 -10px;
  }
  &.up::before { 
    transform: rotate(-45deg); 
    margin: -10px 0 0 -15px;
  }
  &.down::before { 
    transform: rotate(135deg); 
    margin: -20px 0 0 -15px;
  }
  &.right::before { 
    transform: rotate(45deg); 
    margin: -15px 0 0 -20px;
  }
  
  &::after {
    content: '';
    display: block;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-color: #000;
    position: absolute;
    transform-origin: 50% 50%;
  }
  
  &.left::after { 
    width: 40px;
    height: 0;
    border-width: 2px 0 0 0;
    transform: translate(-14px, -1px);
  }
  
  &.up::after { 
    width: 0;
    height: 40px;
    border-width: 0 2px 0 0;
    transform: translate(-1px, -14px);
  }
  
  &.down::after { 
    width: 0;
    height: 40px;
    border-width: 0 2px 0 0;
    transform: translate(-1px, -26px);
  }
  
  &.right::after { 
    width: 40px;
    height: 0;
    border-width: 2px 0 0 0;
    transform: translate(-26px, -1px);
  }
  
  &.circle {
    background: rgba(233,233,180,0.75);
    border-radius: 50px;
  }
  
  &.debug {
    outline: 1px solid darkblue;

    &::before {
      outline: 1px solid red;
    }
  }
}


.azulElectrico{
	background-color: #00FFFF
}
.rosaChicle{
	background-color: #FF00FF
}
.amarilloNeón{
	background-color: #FFFF00
}
.verdeLima{
	background-color: #00FF00
}
.naranjaVibrante{
	background-color: #FFA500
}
.moradoIntenso{
	background-color: #800080
}
.rojoFuego{
	background-color: #FF0000
}
.verdeEsmeralda{
	background-color: #008000
}
.azulCobalto{
	background-color: #0047AB
}
.amarilloBrillante{
	background-color: #FFD700
}

  /* Gradient Azul a Morado */
  .gradiente-azul-morado {
    background: linear-gradient(to right, #4B00c2, #8A2BE2);
  }

  /* Gradient Verde a Amarillo */
  .gradiente-verde-amarillo {
    background: linear-gradient(to right, #008000, #FFFF00);
  }

  /* Gradient Rosa a Naranja */
  .gradiente-rosa-naranja {
    background: linear-gradient(to right, #FF1493, #FF8C00);
  }

  /* Gradient Azul Claro a Turquesa */
  .gradiente-azul-claro-turquesa {
    background: linear-gradient(to right, #ADD8E6, #40E0D0);
  }

  /* Gradient Violeta a Rosa */
  .gradiente-violeta-rosa {
    background: linear-gradient(to right, #EE82EE, #FF69B4);
  }