﻿/**
    CSS GENERALES
*/
/*precio de corosselling*/
cross .lead{
  color: #000;
}
@media screen and (min-width:800px){
    /*.rates-resume{ position:fixed !important; right:5.5%; width:30%;}*/
}
/*saltos de linea*/
.badge-info{
  white-space: normal;
}
/*mensaje de alerta*/
.alert-res{
  color: red;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: bold;
}
/*seccion reservar / otas / lista espera*/
.btn-reservar-tar {
  margin-bottom: 1rem;
  font-size: 0.8rem;
  white-space: normal !important;
  float: right;
}
.rate-box-content {
  background: rgba(0,0,0,0.05);
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
}
.rate-box-content .rate-box-list {
  padding: 0;
  list-style: none;
  text-align: right;
  line-height: 1.5;
  color: #000;
  font-style: italic;
}
/* TABS DE PAGOS */
.title-tabs{
  padding: 2rem;
  border-color: #e6e6e6;
  border-width:1px 1px 0 1px;
  border-style: solid;
  margin-bottom: -1px;
  background-color: #fff;
  width: 50%;
  text-align: center;
  position: relative;
}
.payment-block .nav-tabs.nav-justified>li>a{
  padding: 10px 2px;
  height: 100%;
}
.payment-block .nav-tabs.nav-justified>li>a img{
  max-width: 100%;
}
/*Clase 1 tab*/
.one-tab {
  justify-content: initial !important;
}
payment .panel-body > .payment-block > .one-tab{
  background: none !important;
}
/*panel de pago oxxo Sumary*/
.opps{
  color: #000;
}
/*Block metodos de pago Global*/
.payment-block .nav-tabs.nav-justified>.active>a,
.payment-block .nav-tabs.nav-justified>.active>a:focus,
.payment-block .nav-tabs.nav-justified>.active>a:hover{
  border-bottom-color: #f3f3f3 !important;
  background-color: #f3f3f3 !important;
  box-shadow: none !important;
}
.payment-block .well{
  background-color: #f3f3f3 !important;
  border-color: #ddd;
}
.payment-block .payment-block .nav-tabs.nav-justified{
  background-color: #ddd !important;
}
.payment-block .payment-block .nav-tabs.nav-justified>li>a{
  border-right: 1px solid #f3f3f3 !important;
}
.payment-block .payment-block .panel-body{
  background-color: #ffffff !important;
}
.payment-block .payment-block .panel{
  border-color: #ddd !important;
}
.payment-block .payment-block .nav-tabs>.active>a,
.payment-block .payment-block .nav-tabs>.active>a:focus,
.payment-block .payment-block .nav-tabs>.active>a:hover{
  background-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}
/*queries*/
@media only screen and (min-width: 960px) {
  .nopadding div[class*="col"]{
    padding-left: 0;
  }
}
@media only screen and (max-width: 992px){
  .btn-success{
    font-size: 11px;
  }
}
@media only screen and (max-width: 959px){
  .prices-imp {
    text-align: right;
  }
  .rate-box-content{
    float: right;
  }
}
@media only screen and (max-width: 767px) {
  .payment-block .nav-tabs.nav-justified>li>a{
    overflow: auto;
  }
}
@media only screen and (max-width: 480px) {
  .prices-imp {
    text-align: center;
  }
  .btn-reservar-tar {
    width: 100%;
  }
  .rate-box-content{
    width: 100%;
  }
  .rate-box-content .rate-box-list {
    text-align: center;
  }
}

/* estilos para el calendario */
.inner-addon
{
  position: relative;
}
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

.hint {
  position: relative;
  
  display: inline-block;
  /*border-bottom: 1px dotted black;*/ /* If you want dots under the hoverable text */
}

.hint .hinttext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.hint .hinttext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.hint:hover .hinttext {
  visibility: visible;
  opacity: 1;
}

.room-detail-img {
	max-height: 30vh;
	object-fit: cover;
}

/* Gallery Styles */
        /* The grid: Four equal columns that floats next to each other */
        .column-gallery {
            float: left;
            width: 25%;
            padding: 10px;
        }
        /* Style the images inside the grid */
        
        .column-gallery img {
            opacity: 0.8;
            cursor: pointer;
			max-height: 22vh;
			object-fit: cover;
        }
        
        .column-gallery img:hover {
            opacity: 1;
        }
        /* Clear floats after the columns */
        
        .row-gallery:after {
            content: "";
            display: table;
            clear: both;
        }
        /* The expanding image container-gallery */
        
        .container-gallery {
            position: relative;
            display: block;
        }
        /* Expanding image text */
        
        #imgtext {
            position: absolute;
            bottom: 15px;
            left: 15px;
            color: white;
            font-size: 20px;
        }
        /* Closable button inside the expanded image */
        
        .closebtn-gallery {
            position: absolute;
            top: 10px;
            right: 15px;
            color: white;
            font-size: 35px;
            cursor: pointer;
        }
        /* End Gallery Styles */