/* -------------------- common styles -------------------- */

/* Reset */

.mi-clubarea * {
   margin: 0;
   padding: 0;
   font-size: 1em;
   line-height: inherit;
   font-weight: normal;
   box-sizing: border-box;
}


/* -------------------- loading -------------------- */

.mi-loading {
   display: none;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
}
.mi-loading-overlay {
   display: none;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: #fff;
   opacity: 0.85;
}

.mi-rs.loading .mi-loading {
   display: block;
   position: fixed;
   z-index: 99999;
}
.mi-rs.loading .mi-loading-overlay {
   display: block;
   position: fixed;
   z-index: 99998;
}

.mi-loading-icon div {
   display: inline-block;
   width: 55px;
   height: 55px;
   border-radius: 50%;
   border: 5px solid;
   border-color: var(--corporative-color) transparent var(--corporative-color) transparent;
   -webkit-animation: mi-loading-icon 1s linear infinite;
   animation: mi-loading-icon 1s linear infinite;
}

@-webkit-keyframes mi-loading-icon {
   0% { -webkit-transform: rotate(0); }
   100% { -webkit-transform: rotate(360deg); }
}
@keyframes mi-loading-icon {
   0% { transform: rotate(0); }
   100% { transform: rotate(360deg); }
}

.mi-loading span { 
   font-size: 1.2em;
   display: block;
   margin-top:20px;
}


/* -------------------- genericas -------------------- */
.mi-rs * {
   outline: none;
}
.mi-be *,
.mi-rs * {
   box-sizing: border-box;
}
body .mi-be,
body .mi-rs,
body .mi-modal {
   font-size: 14px;
   font-family: inherit;
   color: #3D3D3D;
}
.mi-be h2,
.mi-rs h2 ,
.mi-be h3,
.mi-rs h3,
.mi-be h4,
.mi-rs h4 {
   margin: 0;
}
.mi-be ul,
.mi-rs ul,
.mi-modal ul {
   list-style:none;
   margin: 0;
   padding: 0;
}
.mi-be p,
.mi-rs p,
.mi-modal p {
   margin: 0;
}
.mi-be input[type=text],
.mi-rs input[type=text],
.mi-be textarea,
.mi-rs textarea {
   font-family: inherit !important;
   font-size: inherit !important;
}
.mi-be .mi-dropdown .mi-dropdown-placeholder,
.mi-be .DateRangePicker .DateInput div {color: #717171;}
.mi-be input[type=text]::placeholder {color: #717171;}
.mi-rs input[type=text]::placeholder {color: #717171;}
.mi-be input[type=text]::-webkit-input-placeholder {color: #717171;}
.mi-rs input[type=text]::-webkit-input-placeholder {color: #717171;}
.mi-be input[type=text]:-moz-placeholder {color: #717171;}
.mi-rs input[type=text]:-moz-placeholder {color: #717171;}
.mi-be input[type=text]:-ms-input-placeholder {color: #717171;}
.mi-rs input[type=text]:-ms-input-placeholder {color: #717171;}
.mi-be textarea::placeholder {color: #717171;font-size:1em !important;}
.mi-rs textarea::placeholder {color: #717171;font-size:1em !important;}
.mi-be textarea::-webkit-input-placeholder {color: #717171;font-size:1em !important;}
.mi-rs textarea::-webkit-input-placeholder {color: #717171;font-size:1em !important;}
.mi-be textarea:-moz-placeholder {color: #717171;font-size:1em !important;}
.mi-rs textarea:-moz-placeholder {color: #717171;font-size:1em !important;}
.mi-be textarea:-ms-input-placeholder {color: #717171;font-size:1em !important;}
.mi-rs textarea:-ms-input-placeholder {color: #717171;font-size:1em !important;}

.mi-be input[type=radio],
.mi-rs input[type=radio],
.mi-be input[type=checkbox],
.mi-rs input[type=checkbox] {
   margin-right: 5px;
   position: relative;
   top: 2px;
   cursor: pointer;
}

.mi-be-button,
.mi-rs button,
.mi-modal button {
   background-color: transparent;
   border: none;
   text-decoration: none;
   padding: 0;
   cursor: pointer;
   font-family: inherit;
   font-size: inherit;
}

/** for radio & checkbox input **/
.mi-radio-container,
.mi-checkbox-container {
   cursor: pointer;
}
   .mi-radio-container span:first-child,
   .mi-checkbox-container span:first-child{
	   padding-right: 7px;
	   position: relative;
   }
   .mi-radio-container input[type="radio"],
   .mi-checkbox-container input[type="checkbox"] {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
   }
   /* .mi-radio-container .mi-radio-ico,
   .mi-checkbox-container .mi-checkbox-ico {
   } */
   .mi-radio-container input[type="radio"] + .mi-radio-ico:before,
   .mi-checkbox-container input[type="checkbox"] + .mi-checkbox-ico:before {
	 content: '';     
	 display: inline-block;
	 position: relative;
	 box-sizing:border-box; 
	 vertical-align: text-bottom;        
	 width: 15px;
	 height: 15px;
	 transition: all 250ms ease; 
	 border-width: 1px;
	 border-style: solid;
	 border-color: #b4b4b4;
	   
	 border-radius: 100%;
	 background: #f4f4f4;     
   }
   .mi-radio-container input[type="radio"]:checked + .mi-radio-ico:before {
	 border-width: 6px; 
   }    
   .mi-checkbox-container input[type="checkbox"] + .mi-checkbox-ico:before  {
	 background: #f4f4f4;
	 border-radius: 15%;
	 color:#fff;
   }
   .mi-checkbox-container input[type="checkbox"]:checked + .mi-checkbox-ico:before {
	 content: '\E90E'; 
	 font-family: 'mi-icofont' !important;
	 font-size: 11px;
	 line-height: 13px;    
   }

/* -------------------- Dropdown -------------------- */
.mi-be .mi-dropdown {
   position: relative;
   display: inline-block;
}
.mi-be .mi-dropdown-button {
   cursor: pointer;
   text-align: left;
   background-color: #fff;
}
.mi-be .mi-dropdown .mi-dropdown-button > * {
   margin-right: 10px;
}
.mi-be .mi-dropdown .mi-dropdown-button > *:last-child {
   margin-right: 0;
}
.mi-be .mi-dropdown .mi-dropdown-button .mi-ico-dropdown {
   vertical-align: middle;
}
.mi-be .mi-dropdown .mi-dropdown-button label {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: inline-block;
   line-height: normal;
   vertical-align: middle;
   cursor: pointer;
}
.mi-be .mi-dropdown .mi-dropdown-button .mi-ico-arrow-down-dark {
   color: #757575;
   vertical-align: middle;
}
.mi-be .mi-dropdown .mi-dropdown-button .mi-ico-arrow-down-dark:before {
   text-transform: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-transform: rotateZ(0deg);
   -ms-transform: rotateZ(0deg);
   transform: rotateZ(0deg);
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all .3s ease;
}
.mi-be .mi-dropdown.is-open .mi-dropdown-button .mi-ico-arrow-down-dark:before {
   -webkit-transform: rotateZ(180deg);
   -ms-transform: rotateZ(180deg);
   transform: rotateZ(180deg);
}
.mi-be .mi-dropdown .mi-dropdown-layout {
   display: none;
   position: absolute;
   z-index: 5;
   line-height: inherit;
   background: #fff;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07);
   padding: 20px 10px;
}
.mi-be .mi-dropdown.is-open .mi-dropdown-layout {
   display: inline-block;
}
.mi-be .mi-dropdown.is-open.open-left .mi-dropdown-layout {
   left: 0;
}
.mi-be .mi-dropdown.is-open.open-right .mi-dropdown-layout {
   right: 0;
}
.mi-be .mi-dropdown.is-open.open-down .mi-dropdown-layout,
.mi-be-datepicker-select .DateRangePicker_picker.DateRangePicker_picker__openDown {
   top: 100%;
   margin-top: 14px;
}
.mi-be .mi-dropdown.is-open.open-up .mi-dropdown-layout,
.mi-be-datepicker-select .DateRangePicker_picker.DateRangePicker_picker__openUp {
   bottom: 100%;
   margin-bottom: 14px;
}
.mi-be .mi-dropdown .mi-dropdown-layout:before,
.mi-be-datepicker-select .DateRangePicker_picker:before,
.mi-be .mi-dropdown .mi-dropdown-layout:after,
.mi-be-datepicker-select .DateRangePicker_picker:after {
   content: "";
   position: absolute;
   z-index: 6;
}
.mi-be .mi-dropdown.open-down .mi-dropdown-layout:before,
.mi-be-datepicker-select .DateRangePicker_picker.DateRangePicker_picker__openDown:before {
   top: -11px;
   bottom: auto;
   border: 10px solid transparent;
   border-top: 0;
   border-bottom-color: rgba(0, 0, 0, 0.1);
}
.mi-be .mi-dropdown.open-down .mi-dropdown-layout:after,
.mi-be-datepicker-select .DateRangePicker_picker.DateRangePicker_picker__openDown:after {
   top: -10px;
   bottom: auto;
   border: 10px solid transparent;
   border-top: 0;
   border-bottom-color: #fff;
}
.mi-be .mi-dropdown.open-up .mi-dropdown-layout:before,
.mi-be-datepicker-select .DateRangePicker_picker.DateRangePicker_picker__openUp:before {
   top: auto;
   bottom: -11px;
   border: 10px solid transparent;
   border-bottom: 0;
   border-top-color: rgba(0, 0, 0, 0.1);
}
.mi-be .mi-dropdown.open-up .mi-dropdown-layout:after,
.mi-be-datepicker-select .DateRangePicker_picker.DateRangePicker_picker__openUp:after {
   top: auto;
   bottom: -10px;
   border: 10px solid transparent;
   border-bottom: 0;
   border-top-color: #fff;
}
.mi-be .mi-dropdown.open-left .mi-dropdown-layout:before,
.mi-be-datepicker-select .DateRangePicker_picker.DateRangePicker_picker__directionLeft:before,
.mi-be .mi-dropdown.open-left .mi-dropdown-layout:after,
.mi-be-datepicker-select .DateRangePicker_picker.DateRangePicker_picker__directionLeft:after {
   left: 22px;
}
.mi-be .mi-dropdown.open-right .mi-dropdown-layout:before,
.mi-be-datepicker-select .DateRangePicker_picker.DateRangePicker_picker__directionRight:before,
.mi-be .mi-dropdown.open-right .mi-dropdown-layout:after,
.mi-be-datepicker-select .DateRangePicker_picker.DateRangePicker_picker__directionRight:after {
   right: 22px;
}
/* -------------------- jSelect -------------------- */
.mi-dropdown-select {
   display: inline-block;
   position: relative;
}	
   .mi-dropdown-select .mi-dropdown-select-field {
	   width: 200px;
	   text-align: left;
	   border: 1px solid #DEDEDE;
		 vertical-align: text-bottom;
	   border-radius: 3px;
	   cursor: pointer;
      display: flex;
      justify-content: space-between;
	   position: relative;
	   line-height: 40px;
	   background-color: #fff;
   }
   .mi-dropdown-select .mi-dropdown-select-field:focus {
      border-color: #3d78c5;
      border-color: var(--corporative-text-color);
   }
   .mi-dropdown-select.is-open .mi-dropdown-select-field:before,
   .mi-dropdown-select.is-open .mi-dropdown-select-field:after {
	   content: "";
	   display: inline-block;
	   position: absolute;
	   bottom: auto;
	   border: 10px solid transparent;
	   border-top: 0;
	   left: 22px;
	   z-index: 6;
   }
   .mi-dropdown-select.is-open .mi-dropdown-select-field:after {
	   bottom: -15px;
	   border-bottom-color: #fff;
   }
   .mi-dropdown-select.is-open .mi-dropdown-select-field:before {
	   bottom: -14px;
	   border-bottom-color: #DEDEDE;
   }
   .mi-dropdown-select.is-open.show-left .mi-dropdown-select-field:before,
   .mi-dropdown-select.is-open.show-left .mi-dropdown-select-field:after {
	   left: auto;
	   right: 22px;
   }
   .mi-dropdown-select.show-left .mi-dropdown-select-layout {
	   left: auto;
	   right: 0;
   }
	   .mi-dropdown-select-field .mi-dropdown-btn,
	   .mi-dropdown-select-field .mi-dropdown-btn-placeholder {
		   color: #717171;
		   display: inline;
		   padding: 0 10px;
		   max-width: 100%;
		   overflow: hidden;
		   text-overflow: ellipsis;
		   white-space: nowrap;
		   cursor: pointer;
	   }
	   .mi-dropdown-select-field .mi-dropdown-btn {
         color: #585C61;
         margin: 0;
	   }
	   .mi-dropdown-select .mi-dropdown-select-field .mi-ico-dropdown {
		   cursor: pointer;
		   color: #757575;
		   display: table-cell;
		   position: relative;
		   text-align: center;
		   vertical-align: middle;
		   width: 25px;
		   padding-right: 8px;
		   line-height: inherit;
	   }
	   .mi-dropdown-select .mi-dropdown-select-field .mi-ico-dropdown:before {
		   content: "\e901";
		   font-family: 'mi-icofont' !important;
		   /* speak: none; */
		   font-variant: normal;
		   font-size: inherit;
		   line-height: inherit;
		   text-decoration: none;
		   font-style: normal;
		   font-weight: normal;
		   text-transform: none;
		   -webkit-font-smoothing: antialiased;
		   -moz-osx-font-smoothing: grayscale;
		   display: block;
		   -webkit-transform: rotateZ(0deg);
		   -ms-transform: rotateZ(0deg);
		   transform: rotateZ(0deg);
		   -webkit-transition: all .3s ease;
		   -moz-transition: all .3s ease;
		   -o-transition: all .3s ease;
		   transition: all .3s ease;
	   }
	   .mi-dropdown-select.is-open .mi-dropdown-select-field .mi-ico-dropdown:before {
		   content: "\e901";
		   -webkit-transform: rotateZ(180deg);
		   -ms-transform: rotateZ(180deg);
		   transform: rotateZ(180deg);
	   }

   .mi-dropdown-select .mi-dropdown-select-layout {
	   z-index: 5;
	   width: 300px;
	   border-radius: 3px;
	   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07);
	   max-height: 205px;
	   position: absolute;
	   top: 100%;
	   left: 0;
	   text-align: left;
	   margin-top: 13px;
	   padding: 10px 0;
	   background-color: #fff;
	   overflow-y: auto;
	   padding: 10px 0;
   }
   .mi-dropdown-select.show-left .mi-dropdown-select-layout {
	   left: auto;
	   right: 0;
   }
	   .mi-dropdown-select .mi-dropdown-select-layout .mi-dropdown-select-list button {
			   box-sizing: border-box;
			   background-color: #fff;
			   color: #585C61;
			   cursor: pointer;
            width: 100%;
            text-align: left;
			   padding: 8px 10px;
      }
	   .mi-dropdown-select .mi-dropdown-select-layout .mi-dropdown-select-list button.is-selected {
			   color: #3e4650 ;
			   font-weight: bold;
			   background-color: transparent;
	   }
	   .mi-dropdown-select .mi-dropdown-select-layout .mi-dropdown-select-list button.is-focused {
			   color: #3e4650 ;
			   font-weight: bold;
			   background-color: transparent;
	   }		
	   .mi-dropdown-select .mi-dropdown-select-layout .mi-dropdown-select-list button.is-disabled {
			   color: #999;
			   cursor: default;
      }
      .mi-dropdown-select .mi-dropdown-select-layout .mi-dropdown-select-list button.is-focused:focus,
      .mi-dropdown-select .mi-dropdown-select-layout .mi-dropdown-select-list button.is-selected:focus,
      .mi-dropdown-select .mi-dropdown-select-layout .mi-dropdown-select-list button:focus {
         background-color: #f2f2f3;
      }

/* -------------------- tabs -------------------- */
.react-tabs [role=tablist] {
   border-bottom: 1px solid #e0e0e0;
   color:#838c94;
   margin: 10px 0 20px 0;
}
.react-tabs [role=tab] {
   display: inline-block;
   border: 1px solid transparent;
   border-bottom: none;
   bottom: -1px;
   position: relative;
   list-style: none;
   padding: 0 0 10px;
   cursor: pointer;
   margin: 0 20px 0 0;
}
.react-tabs [role=tab]:focus {
   box-shadow: 0;
   border-color: none;
}
.react-tabs [role=tab][aria-selected=true] {
   border-width: 0 0 1px 0;
   border-style: solid;
}

/* -------------------- tooltip -------------------- */
.mi-tooltip {
   position: absolute;
   z-index: 1070;
   display: block;
   font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
   font-style: normal;
   font-weight: 400;
   letter-spacing: normal;
   line-break: auto;
   line-height: 1.42857143;
   text-align: left;
   text-align: start;
   text-decoration: none;
   text-shadow: none;
   text-transform: none;
   white-space: normal;
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
   font-size: 12px;
   opacity: 0;
   filter: alpha(opacity=0)
}
.mi-tooltip.in,
.mi-tooltip.show {
   opacity: 1;
   filter: alpha(opacity=100)
}
.mi-tooltip.top,
.bs-tooltip-top {
   margin-top: -3px;
   padding: 5px 0
}
.mi-tooltip.right {
   margin-left: 3px;
   padding: 0 5px
}
.mi-tooltip.bottom {
   margin-top: 3px;
   padding: 5px 0
}
.mi-tooltip.left {
   margin-left: -3px;
   padding: 0 5px
}
.mi-tooltip .tooltip-inner {
   max-width: 200px;
   padding: 8px 12px;
   color: #fff;
   text-align: center;
   background-color: #373f49;
   border-radius: 4px
}
.mi-tooltip .tooltip-arrow,
.mi-tooltip .arrow {
   position: absolute;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid
}
.mi-tooltip.top .tooltip-arrow,
.mi-tooltip.bs-tooltip-top .arrow {
   bottom: 0;
   left: 50%;
   margin-left: -5px;
   border-width: 5px 5px 0;
   border-top-color: #373f49;
}
.mi-tooltip.top-left .tooltip-arrow {
   right: 5px
}
.mi-tooltip.top-left .tooltip-arrow,
.mi-tooltip.top-right .tooltip-arrow {
   bottom: 0;
   margin-bottom: -5px;
   border-width: 5px 5px 0;
   border-top-color: #373f49;
}
.mi-tooltip.top-right .tooltip-arrow {
   left: 5px
}
.mi-tooltip.right .tooltip-arrow {
   top: 50%;
   left: 0;
   margin-top: -5px;
   border-width: 5px 5px 5px 0;
   border-right-color: #373f49;
}
.mi-tooltip.left .tooltip-arrow {
   top: 50%;
   right: 0;
   margin-top: -5px;
   border-width: 5px 0 5px 5px;
   border-left-color: #373f49;
}
.mi-tooltip.bottom .tooltip-arrow {
   top: 0;
   left: 50%;
   margin-left: -5px;
   border-width: 0 5px 5px;
   border-bottom-color: #373f49;
}
.mi-tooltip.bottom-left .tooltip-arrow {
   top: 0;
   right: 5px;
   margin-top: -5px;
   border-width: 0 5px 5px;
   border-bottom-color: #373f49;
}
.mi-tooltip.bottom-right .tooltip-arrow {
   top: 0;
   left: 5px;
   margin-top: -5px;
   border-width: 0 5px 5px;
   border-bottom-color: #373f49;
}

[aria-describedby*='mi-tooltip'] {
   cursor: default;
}



/* -------------------- tooltip new -------------------- */

[aria-describedby*='mi-tooltip'] {
   cursor: default;
}

.mi-bstooltip {
   position: absolute;
   z-index: 9;
	display: block;
	line-break: auto;
	line-height: 1.4;
	font-size: 13px;
	opacity: 0;
}
.mi-bstooltip-inner {
   max-width: 200px;
   padding: 8px 12px;
   color: #fff;
   text-align: center;
   background-color: #373f49;
   border-radius: 4px;
   transform: translateY(5px);
}
.mi-bstooltip p {
   color: #fff;
}
.mi-bstooltip .arrow {
   position: absolute;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid
}

/* Show */

.mi-bstooltip.show {
   opacity: 1;
   transition: opacity .1s;
}
.mi-bstooltip.fade {
	transition: none;
}
.mi-bstooltip.show .mi-bstooltip-inner {
   transition: transform .25s;
   transform: translateY(0);
}

/* Top */

.bs-tooltip-top {
   padding: 4px 0
}
.bs-tooltip-top .arrow {
   bottom: 0;
   border-width: 5px 5px 0;
   border-top-color: #373f49;
}


/* Modal server validation */

   .mi-modal-server-validation .mi-modal-content { /* mi-modal old */
	   text-align: center;
	   font-size: 1.5em;
	   padding-top: 50px;
   }
   .mi-modal-server-validation .mi-modal-close-btn { /* mi-modal old */ 
	   border-radius: 3px;
	   font-size: 1.2em;
	   padding: 10px 30px;
   }

   .mi-alerterror__modal {
	   text-align: center;
   }
   .mi-alerterror__retry-btn {
	   font-size: 1.2em;
	   padding: 10px 30px;
   }

/* Action buttons */
/*
  - Color
  - Background-color
  - Border
  - Border-radius
*/
[class^="mi-"] .mi-s-button,
[class^="mi-"] .mi-s-color-button,
.mi-be .mi-be-book-btn,
.mi-rs .mi-rs-cart-btn,
.mi-rs .mi-rs-add-btn,
.mi-rs .mi-na-option-date-btn,
.mi-rs .mi-na-option-hotel-btn,
.mi-rs .mi-cf-form-data-btn,
button.mi-modal-close-btn,
.mi-rs .mi-rs-rate-select-room-btn,
.mi-be-mobile .mi-be-modal .mi-be-multiroom-footer .mi-be-multiroom-footer-confirm,
.mi-be-mobile .mi-be-modal .mi-be-modal-footer .mi-be-date-picker-confirm {
   background-color: #3978C5;
   color: #fff;
}

/*
  - Color
  - Background-color
  - Border
Action buttons hovers */
[class^="mi-"] .mi-s-button:hover,
[class^="mi-"] .mi-s-color-button:hover,
.mi-be .mi-be-book-btn:hover,
.mi-rs .mi-rs-cart-btn:hover,
.mi-rs .mi-rs-add-btn:hover,
.mi-rs .mi-na-option-date-btn:hover,
.mi-rs .mi-na-option-hotel-btn:hover,
.mi-rs .mi-cf-form-data-btn:hover,
button.mi-modal-close-btn:hover,
.mi-rs .mi-rs-rate-select-room-btn:hover,
.mi-be-mobile .mi-be-modal .mi-be-multiroom-footer .mi-be-multiroom-footer-confirm:hover,
.mi-be-mobile .mi-be-modal .mi-be-modal-footer .mi-be-date-picker-confirm:hover {
   background-color: #29558A;
}

/* LINKS */

/* General links (same color than web links) */
.mi-s-corp-color,
.mi-s-wrapper-corp-color a,
.mi-s-color-link,
.mi-s-color-link-wrapper a,
.mi-rs .mi-rs-room-occupation-btn,
.mi-rs .mi-rs-room-detail-btn,
.mi-rs-rate-see-more-btn,
.mi-rs-suggestion-btn,
.react-tabs [role=tab][aria-selected=true],
.react-tabs [role=tab]:hover,
.mi-rs-modal-occupation-btn:hover .mi-rs-occupation-text-legend span:first-child, 
.mi-rs-modal-occupation-btn.selected .mi-rs-occupation-text-legend span:first-child, 
.mi-rs-modal-occupation-btn.people:hover, 
.mi-rs-modal-occupation-btn.people.selected,
.mi-rs-back-to-room-selection,
.mi-na-view-all-results,
.mi-rs-cart-item-edit-btn,
.mi-be-datepicker-info-panel .mi-be-datepicker-clear-dates button,
.mi-be .mi-be-multiroom-select .mi-be-multiroom-dropdown ul li .mi-be-multiroom-title .mi-be-multiroom-remove,
.mi-be .mi-be-multiroom-select .mi-be-multiroom-dropdown .mi-be-multiroom-footer  .mi-be-multiroom-footer-add,
.mi-na-option-hotel > h4,
.mi-rs .mi-cancelation-payment-link,
.mi-rs .mi-privacy-policy-link,
.mi-rs .mi-cf-form-data-link-back,
.mi-rs .mi-cf-error-link-back,
.mi-cf-form-data form .mi-cf-form-data-additionals div[class*="mi-cf-form-data-additionals-"] a,
.mi-rs .mi-rc-btn,
.mi-rc-reservation-address .mi-rc-reservation-address-mail-link,
.mi-rc-reservation-address .mi-rc-reservation-address-web-link,
.mi-rs .mi-rc-reservation-code .mi-rc-reservation-code-expired-link,
.mi-be-modal .mi-be-modal-header button.mi-be-modal-clear-date {
   color: #3978C5;
}

.mi-s-corp-color:hover,
.mi-s-wrapper-corp-color a:hover,
.mi-s-color-link:hover,
.mi-s-color-link-wrapper a:hover,
.mi-rs .mi-rs-room-occupation-btn:hover,
.mi-rs .mi-rs-room-detail-btn:hover,
.mi-rs-rate-see-more-btn:hover,
.mi-rs-suggestion-btn:hover,
.mi-rs-back-to-room-selection:hover,
.mi-na-view-all-results:hover,
.mi-rs-cart-item-edit-btn:hover,
.mi-be-datepicker-info-panel .mi-be-datepicker-clear-dates button:hover,
.mi-be .mi-be-multiroom-select .mi-be-multiroom-dropdown ul li .mi-be-multiroom-title .mi-be-multiroom-remove:hover,
.mi-be .mi-be-multiroom-select .mi-be-multiroom-dropdown .mi-be-multiroom-footer  .mi-be-multiroom-footer-add:hover, 
.mi-na-option-hotel > h4:hover,
.mi-rs .mi-cancelation-payment-link:hover,
.mi-rs .mi-privacy-policy-link:hover,
.mi-rs .mi-cf-form-data-link-back:hover,
.mi-rs .mi-cf-error-link-back:hover,
.mi-cf-form-data form .mi-cf-form-data-additionals div[class*="mi-cf-form-data-additionals-"] a:hover,
.mi-rs .mi-rc-btn:hover,
.mi-rc-reservation-address .mi-rc-reservation-address-mail-link:hover,
.mi-rc-reservation-address .mi-rc-reservation-address-web-link:hover,
.mi-rs .mi-rc-reservation-code .mi-rc-reservation-code-expired-link:hover,
.mi-be-modal .mi-be-modal-header button.mi-be-modal-clear-date:hover {
	 color: #29558A;
}

/* Selected & hovered occupation (room selection), selected tab, +/- multiroom buttons, radio & checkbox */
.mi-rs-modal-occupation-btn:hover,
.mi-rs-modal-occupation-btn.selected,
.react-tabs [role=tab][aria-selected=true],
.mi-be .mi-be-multiroom-select .mi-be-multiroom-dropdown ul li .mi-be-multiroom-option-adult span.react-numeric-input b,
.mi-be .mi-be-multiroom-select .mi-be-multiroom-dropdown ul li .mi-be-multiroom-option-children span.react-numeric-input b,
.mi-radio-container input[type="radio"]:checked + .mi-radio-ico:before,
.mi-checkbox-container input[type="checkbox"]:checked + .mi-checkbox-ico:before,
.mi-be.mi-be-mobile .mi-be-modal .mi-be-multiroom-footer .mi-be-multiroom-footer-add,
.mi-be.mi-be-mobile .mi-be-modal .mi-be-multiroom-footer .mi-be-multiroom-footer-confirm {
	 border-color: #3978C5 !important; /* color links */
}

/* +/- multiroom buttons, checkbox */
.mi-be .mi-be-multiroom-select .mi-be-multiroom-dropdown ul li .mi-be-multiroom-option-adult span.react-numeric-input b i,
.mi-be .mi-be-multiroom-select .mi-be-multiroom-dropdown ul li .mi-be-multiroom-option-children span.react-numeric-input b i,
.mi-checkbox-container input[type="checkbox"]:checked + .mi-checkbox-ico:before{
	 background-color: #3978C5 !important; /* color links */
}

/* Loading booking proccess Color */
.mi-rs.loading .mi-loading .mi-loading-scope .mi-loading-icon div {
   border-color: #3978C5 transparent #3978C5 transparent;
}


 /* TODO unify modal close button */

 .mi-modal .node_modules-mirai-assets-dist-css-bootstrap__close,
 .mi-modal .node_modules-mirai-assets-dist-css-bootstrap__close:hover,
 .mi-modal .node_modules-mirai-assets-dist-css-bootstrap__close:active {
 
    background: none;
    box-shadow: none;
 }
.node_modules-mirai-assets-dist-css-bootstrap__close .mi-ico-close-light {

   display: block;
}

.node_modules-mirai-assets-dist-css-bootstrap__modal_header h2 {
   font-size: 1.6em;
   margin-right: 40px;
}


/* TODO "fix specificity" : fix specificity classes because of 'client form' and/or 'manage reservation' */


/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ TRACKING IFRAME */
/* ==================================================================================== */



.mi-tracking-iframe-container {

   height: 0px;
   overflow: hidden;
}

.mi-tracking-iframe-container iframe {

   border: none;
   opacity: 0;
}

/* Hide login link */

@media (max-width: 768px) {

   [data-mirai-engine="mirai_cf"]:empty::before,
   [data-mirai-engine='mirai_rs']:empty::before {
   
      content: "";
   }
   
   [data-mirai-engine="mirai_cf"]:empty::before,
   [data-mirai-engine='mirai_rs']:empty::before,
   .mi-tracking-iframe-container:first-child {
   
      background-image: linear-gradient(to bottom, var(--bg-color) 10%, rgba(246, 246, 246, 0));
      position: absolute;
      z-index: 4;
      top: 0;
      right: 0;
      left: 0;
      height: 90vh;
   }
}




/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ VARIABLES */
/* ==================================================================================== */



:root {

   /* Background colors */
   --bg-color: #f6f6f6;
   --bg-color__secundary: #fff;
   --bg-color__label: #238ec0; /* room selection promo label */
   --bg-color__club: #ffca72; /* room selection club label */
   --bg-color__club--light: #fffaf4; /* room selection club background */
   --bg-color__club--text: #3c2601; /* room selection club background */

   /* Colors  */
   --corporative-color: #3978C5;
   --corporative-text-color: #3978C5;
   --text-color__over-corporative-color: #fff;
   
   --text-color: #4a4a4a;
   --text-color__secundary: #808080;
   --color-price: #73b07b;
   --color-success: #93c299;
   --color-alert: #cf503f;
   --color-payment: #228fc0;
   --color-cancel: #492d29;
   --color-adult: #13549f;
   --color-children: #4a9e27;
   --color-baby: #359eb6;
   --color-leyend: #2dbb45;
   --color-star: #FFD94F;
   --color-info: 45;  /*  Alerts Hue color  */

   /* Datepicker colors */
   --day-1: #CAEDB3;
   --day-2: #65AC3F;

   /* Sizes */
   --space: calc(3px + 3vw);

   /* Box-shadow */
   --box-shadow: 0 0 0 1px rgba(197, 197, 197, 0.46), 0 0 4px rgba(58, 58, 58, 0.1);

   /* border */
   --border-color: #dedede;
   --border-radius: 4px;

}

@media (min-width: 400px) {
   :root {
	   --space: 16px;
   }
}



/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ COMPONENT: ºHeader */
/* ==================================================================================== */



.mim-header {

   display: flex;
   background-color: var(--bg-color__secundary);
   padding: 0 calc(var(--space) / 2);
   box-shadow: var(--box-shadow);
   position: relative;
   z-index: 2;
   height: 60px;
}

.mim-header--club {
   padding-right: 4em;
}

.mim-header__logo-wrapper {

   flex: 1;
   height: inherit;
   padding: calc(var(--space) / 2);
}

.mim-header__logo-wrapper>a {

   display: inline-flex;
   align-items: center;
   height: 100%;
   max-width: 50vw;
}

.mim-header__logo-wrapper img {

   max-width: 100%;
   max-height: 100%;
}


/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------- Header Animation */


.mim-header {

	animation: hello-header .3s;
}

.mim-header > * {

	animation: hello-header .7s;
}

@keyframes hello-header {

	0%   { opacity: 0; transform: translateY(-5px); }
	100% { opacity: 1; transform: translateY(0px);  }
}



/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ COMPONENT: ºGo-back */
/* ==================================================================================== */



.mim-go-back {

   display: flex;
   align-items: center;
   flex-wrap: wrap;
   padding: calc(var(--space) / 2);
   font-size: calc(6px + 2.6vw);
   min-height: 60px;
}

@media (min-width: 400px) {
   .mim-go-back {

      font-size: 16px;
   }
}

.mim-go-back > .mim-go-back__close, /* fix specificity */
.mim-go-back > * {

   padding: calc(var(--space) / 2);
}

.mim-go-back__message {

   flex: 1;
   min-width: 40%;
   line-height: 1.25;
   margin-top: -.15em;
   margin-bottom: -.15em;
}

.mim-go-back__steps {

   color: var(--text-color__secundary);
   width: 100%;
   align-self: flex-end;
   line-height: 1.25;
   margin-top: -.15em;
   margin-bottom: -.15em;
}

.mim-go-back__close [class*=mi-ico] {

   font-size: 1.6em;
   display: block;
   color: var(--corporative-text-color);
}

.mim-go-back__message > * + * {

   padding-top: calc(var(--space) / 3);
}

.mim-go-back__close:first-child {

   margin-left: -0.1em; /* esthetic exception */
   margin-right: -0.1em; /* esthetic exception */
}

.mim-go-back__title,
.mim-go-back__hotel-name {

   font-size: inherit;
   font-weight: inherit;
   margin: 0;
   color: var(--text-color__secundary);
}


/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------ Go back animation */


.mim-go-back .mim-go-back__close {
   animation: hello-go-back .4s;
}

.mim-go-back > *:not(.mim-go-back__close) {
   animation: hello-go-back 1.2s;
}

@keyframes hello-go-back {

   0%   { opacity: 0; transform: translateX(5px);}
   100% { opacity: 1; transform: translateX(0px);}
}



/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MODAL MOBILE */
/* ==================================================================================== */


/* ------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------- Content-modal variations */

/* ------------------------------ Scroll */

.mim-modal > .mi-be-content-modal {

   overflow: auto;
   background-color: var(--bg-color);
}

/* ------------------------------ Flex */

.mim-modal--full-body > .mi-be-content-modal {

   display: flex;
   flex-direction: column;
}


/* ------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------- Modal Header */


.mim-modal-header {

   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   position: sticky;
   top: 0;
   z-index: 9;
   background-color: var(--bg-color__secundary);
   border-bottom: 1px solid var(--border-color);
   padding: calc(var(--space) / 2);
   min-height: 60px;
   box-sizing: border-box;
}

.mim-modal .mim-modal-header > * {  /* fix specificity */

   padding: calc(var(--space) / 2);
}

/* ------------------------------ Title */

.mim-modal .mim-modal-header__title { /* fix specificity */

   flex: 1;
   min-width: 40%;
   font-size: 1.1em;
   line-height: 1.25;
   margin-top: -.15em;
   margin-bottom: -.15em;
   text-align: center;
   color: var(--text-color__secundary);
}

.mim-modal .mim-modal-header__title:last-child { /* fix specificity */

   margin-right: 30px;
}

/* ------------------------------ Close */

.mim-modal .mim-modal-header__close {

   background: none;
   border: none;
}

.mim-modal .mim-modal-header__close [class*=mi-ico] { /* fix specificity */

   display: block;
   font-size: 20px;
   color: var(--text-color__secundary);
}


/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------- Modal body */


.mim-modal-body {

   flex: 1;
}

.mim-modal-body__container {

   padding: calc(var(--space) * 2) var(--space);
   width: 100%;
   box-sizing: border-box;
}

/* ------------------------------------------------------------------------------------ */
/* -------------------------------------------------------------- Modal body containers */


.mim-modal .mim-modal-body__container > * + *:not(:empty) { /* fix specificity */

   margin-top: calc(var(--space) * 2);
}

/* ------------------------------ Text container */

.mim-modal-body__text {

   padding: 0 calc(var(--space) / 2);
}

.mim-modal-body__text > * + * {

   padding-top: calc(var(--space) / 2);
}

/* ------------------------------ List container */

.mim-modal .mim-modal-body__list, /* fix specificity */
.mim-modal-body__list {

   background-color: var(--bg-color__secundary);
   box-shadow: var(--box-shadow);
   border-radius: var(--border-radius);
   overflow: hidden;
   margin: 1px;
   padding: calc(var(--space) / 4) var(--space);
}

.mim-modal-body__list > * + * {

   border-top: 1px solid #ddd;
}

/* List item */

.mim-modal-body__list-item {

   padding: var(--space) 0;
}

.mim-modal-body__list-item > * + * {

   padding-top: calc(var(--space) / 2);
}

/* List inside list */

.mim-modal-body__list-item li::before {

   content: "";
   display: inline-block;
   height: 3px;
   width: 3px;
   background-color: #555;
   border-radius: 50%;
   margin-right: 7px;
   vertical-align: middle;
}


/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------- Modal body fonts */


/* ------------------------------ Body and list titles */

.mim-modal-body__title,
.mim-modal-body__list-title {

   font-size: 1.1em;
   font-weight: bold;
   line-height: 1.25;
   margin-top: -.15em;
   margin-bottom: -.15em;
}

.mim-modal-body__list-title--payment {

   color: var(--color-payment);
}

.mim-modal-body__list-title--cancellation {

   color: var(--color-cancel);
}


/* ------------------------------ Body mini label */


.mim-modal .mim-modal-body__label { /* fix specificity */

   display: flex;
   align-items: baseline;
   font-size: .74em;
   letter-spacing: .04em;
   text-transform: uppercase;
   line-height: 1;
   margin: 0 calc(var(--space) / 2) calc(var(--space) / 2);
   color: var(--text-color__secundary);
}

.mim-modal-body__label [class*="mi-ico"] {

   font-size: 1.6em;
   padding: 0 calc(var(--space) / 3) 0 0;
}


/* ------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------- Modal footer */

.mim-modal-footer {

   padding: calc(var(--space) * 2) var(--space);
   background-color: var(--bg-color__secundary);
   border-top: 1px solid var(--border-color);
   position: sticky;
   bottom: 0;
}

@media ( orientation: landscape ) {

   .mim-modal-footer {

	   padding: var(--space);
   }
}


/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ Modal content animation */


.mim--slide-in-up .mim-extra-detail__body > *,
.mim--slide-in-up .mim-modal-body__container > * {
   --timing: .7;
   animation: hello-modal-content calc(var(--timing) * 1s ) cubic-bezier(0.71, 0.11, 0.49, 1.1);
}
.mim-extra-detail__body > *:nth-child(2),
.mim-modal-body__container > *:nth-child(2) {
   animation-duration: calc(var(--timing) * 1.1s );
}
.mim-extra-detail__body > *:nth-child(3),
.mim-modal-body__container > *:nth-child(3) {
   animation-duration: calc(var(--timing) * 1.15s );
}
.mim-extra-detail__body > *:nth-child(4),
.mim-modal-body__container > *:nth-child(4) {
   animation-duration: calc(var(--timing) * 1.2s );
}
.mim-modal-body__container > *:nth-child(5) {
   animation-duration: calc(var(--timing) * 1.25s );
}

@keyframes hello-modal-content {
   0%   { transform: translateY(30px); opacity: 0.2; }
   25%  { transform: translateY(30px); }
   100% { transform: translateY(0px); opacity: 1; }
}



/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ COMPONENT: ºBreadcrumbs */
/* ==================================================================================== */



.mi-breadcrumbs {
   color: #8D9194;
   line-height: 31px;
   float: left;
   padding-left: 1px;
}



/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ COMPONENT: ºForms */
/* ==================================================================================== */



.mi-form {
    
   --form-space: 25px;
   --form-input-space: 16px;
   line-height: 1.4;
   text-align: left;
   color: var(--text-color);
}

@media (max-width: 768px) {

   .mi-form {
    
      --form-space: 25px;
      --form-input-space: 20px;
   }
}

.mi-form > * + * {
   
   margin-top: 20px;
   margin-top: var(--form-space);
   margin-bottom: 0;
   display: block;
}

.mi-form > * + p,
.mi-form > p + * {

   margin-top: calc(var(--form-space) - .2em);
}

.mi-form :focus {

   outline: 1px auto var(--corporative-color);
}

.mi-form [type='password'] {

   letter-spacing: 0.4ch;
}


/* ------------------------------ Basic elements */


.mi-form small {
   
   color: #808080;
   color: var(--text-color__secundary);
}

.mi-form hr {
   
   border: none;
   border-top: 1px solid var(--border-color);
   margin-bottom: 0;
}

.mi-form hr:first-child {

   margin-top: 0;
}

.mi-form option[disabled] {
   
   display: none;
}

.mi-form p {

   line-height: inherit;
}

.mi-form label {

   font-size: inherit;
}



/* ------------------------------ Fieldset */


.mi-form-fieldset {
   
   border: none;
}

.mi-form-fieldset > *:not(:last-child) {
   
   margin-top: 10px;
   margin-bottom: calc( var(--form-space) / 2 );
}


/* ------------------------------ Inputs titles */


.mi-form-fieldset__title,
.mi-form-item__title {
   
   font-size: .85em;
   line-height: 1.2;
   text-shadow: 0 0;
   
   display: block;
   margin-bottom: 0.3em;
   padding-left: var(--border-radius);
}


/* ------------------------------ Inputs */


.mi-form .mi-form-item__input,
.mi-form .mi-form-item__date,
.mi-form .mi-input-text input {

   font-size: inherit;
   font-family: inherit;
   color: inherit;
   line-height: inherit;

   background-color: #fff;
   border: 1px solid #dedede;
   border: 1px solid var(--border-color);
   border-radius: 3px;
   border-radius: var(--border-radius);
   padding: 12px;
   padding: var(--form-input-space);

   display: block;
   box-sizing: border-box;
   width: 100%;
   height: auto;
   margin: 0;
}

.mi-form .mi-form-item__date--empty {
   color: #aaa;
}

/* Select */
.mi-form .mi-form-item__select {

   font-size: inherit;
   font-family: inherit;
   color: inherit;
   line-height: inherit;

   background-color: #fff;
   border: 1px solid #dedede;
   border: 1px solid var(--border-color);
   border-radius: 3px;
   border-radius: var(--border-radius);
   padding: 12px;
   padding: var(--form-input-space);
   padding-left: calc(var(--form-input-space) - 3px);

   display: block;
   box-sizing: border-box;
   width: 100%;
   height: auto;
   margin: 0;

   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAjUlEQVQoz7WRPQrCQBSEv1n2p/VAIkFEcqpcwyJFihwjxwphy9hMUNCgTQYePGa+Kd4uHK4QwgnoYoxxj3HWmWUCVmBMKX2U7I1mJiSdgdnGkHMOG+x9cDabBUkXYHHQl1KC4d7eYuYlSc1b6eHZ4ObrcZKuQDW4AtXeviTdXKqS7n89taRWUnvMR/7SE06WHuKVZ02sAAAAAElFTkSuQmCC');
   background-repeat: no-repeat;
   background-position: calc(100% - 16px) 50%;
   background-size: 9px;

   cursor: pointer;
}

.mi-form .mi-form-item__select--empty {
   color: #aaa;
}
.mi-form .mi-form-item__select--empty option {
   color: #000;
}


/* ~~~~~~~~~~~~~~~~~~ PASSWORD VISIBILITY */



.mi-form-item__password-wrapper {
   position: relative;
}

.mi-form-item__password-visibility {

   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;

   padding: var(--form-input-space);
   background: none;
   border: none;
   color: var(--corporative-text-color);
   font-size: .85em;
   text-transform: uppercase;
   cursor: pointer;
}

.mi-form-item__password-wrapper .mi-form-item__input {
   padding-right: 110px;
}




/* ------------------------------ Submit */


.mi-form .mi-form__submit {

   font-size: inherit;
   line-height: inherit;

   border: none;
   border-radius: 3px;
   border-radius: var(--border-radius);
   cursor: pointer;

   display: block;
   width: 100%;
   padding: 15px;
   padding: calc( var(--form-input-space) + 1px );
}

.mi-form__submit:focus {

   outline: 2px auto var(--corporative-color);
}

.mi-form__submit--loading span {

   position: relative;
   padding-left: 25px;
}

.mi-form__submit--loading span::before {

   position: absolute;
   top: 50%;
   left: 0;
   content: '';
   width: 15px;
   height: 15px;
   border-width: 1px;
   border-style: solid;
   border-top-color: transparent;
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;
   animation: .3s fullrotation infinite linear;
}

@keyframes fullrotation {
   0%   { transform: translateY(-50%) rotate(0);}
   100% { transform: translateY(-50%) rotate(180deg); }
}

.mi-form .mi-form__submit:disabled {

   pointer-events: none;
   background: #c2c2c2;
   border-color: #c2c2c2;
   color: #fff;	
}


.mi-form-row {
	display: flex;
}
.mi-form-row > *+* {
	margin-left: var(--form-space);
}


/* ------------------------------ Links */


.mi-form__link-wrapper {

   margin: 15px;
   margin: calc( var(--form-input-space) / -2 - .2em ) 0;
}

.mi-modal .mi-form__link,
.mi-form__link {

   font-size: inherit;
   line-height: inherit;
   font-family: inherit;

   background: none;
   border: none;
   color: #13549f;
   color: var(--corporative-text-color);

   padding: 15px;
   padding: calc(var(--form-input-space) / 2) 0;
   margin: calc(var(--form-space) - var(--form-input-space) / 2 ) auto 0;
   display: block;
}

.mi-modal .mi-form__link:only-child,
.mi-form__link:only-child {

   margin: 0 auto;
}

.mi-modal .mi-form__link:last-child,
.mi-form__link:last-child {

   margin-bottom: calc( var(--form-input-space) / -2 );
}

.mi-modal .mi-form__link:hover,
.mi-form__link:hover {

   text-decoration: underline;
}


/* ------------------------------ Checkbox */


.mi-form-checkbox__title {

   font-size: 0.85em;
}

.mi-form-checkbox__title small {

   margin-left: .3em;
}

.mi-form-checkbox__title a {

   text-decoration: none;
}

.mi-form-checkbox__title a:hover {

   text-decoration: underline;
}

.mi-form-checkbox__input {

   line-height: 1;
}

/* Checkbox mirai styles fixes */

.mi-form .mi-radio-container, 
.mi-form .mi-checkbox-container {

   display: inline-flex;
   align-items: baseline;
   padding: calc(var(--form-input-space) / 2 ) 0;
   margin: calc(var(--form-input-space) / -2 ) 0;
}

.mi-form .mi-radio-ico,
.mi-form .mi-checkbox-ico {

   font-style: normal;
   text-align: center;
   pointer-events: none;
}

.mi-form input[type="checkbox"] + .mi-checkbox-ico:before {

   font-size: 18px;
   width: 18px;
   height: 18px;
   background-color: #fff;
}

.mi-form input[type="checkbox"]:checked + .mi-checkbox-ico:before {
   
   font-size: 12px;
   line-height: 17px;
}

.mi-form input[type="checkbox"]:focus + .mi-checkbox-ico:before {

   outline: 1px auto var(--corporative-color);
}


/* ------------------------------ Validation */


.mi-form__error,
.mi-form .invalid-msg,
.mi-form .required-msg {

   color: #cf503f;
   color: var(--color-alert);
}

.mi-form__error span {

   display: block;
   max-height: 0px;
   opacity: 0;
   animation: hello-error .6s forwards;
}

@keyframes hello-error {
   
   0%   { max-height: 0px;}
   30%  { opacity: 0;}
   100% { max-height: 350px; opacity: 1;}
}

.mi-form-checkbox--error input[type="checkbox"] + .mi-checkbox-ico:before, 
.mi-form-item--error .mi-form-item__input,
.mi-form-item--error .mi-form-item__select,
.mi-form-item--error .mi-form-item__date,
.mi-form-item--error .mi-input-text input {

   border-color: #cf503f;
   border-color: var(--color-alert);
}

.mi-form-checkbox__error,
.mi-form-item__error,
.mi-form .invalid-msg,
.mi-form .required-msg  {

   color: #cf503f;
   color: var(--color-alert);
   font-size: 13px;
   line-height: 16px;
   
   display: block;
   margin-top: 1px;
   margin-bottom: -17px;
}

.mi-form-item__error {

   padding: 0 var(--border-radius);
}

.mi-form-checkbox__error {

   padding-left: 25px;
}


/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ELEMENT: ºswitch */
/* ==================================================================================== */


.mi-switch > span {
	display: block;
	box-sizing: border-box;
	padding: 3px;
	border: 1px solid #ccc;
	border-radius: 22px;
	width: 53px;
}

.mi-switch [class*="mi-ico"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	height: 25px;
	width: 25px;
	margin-right: 20px;
	border-radius: 50%;
	background-color: #ccc;
	color: #fff;
	transition: .1s ease-out;
}

.mi-switch--active [class*="mi-ico"] {
	margin-right: 0;
	margin-left: 20px;
	background-color: #69d877;
}


/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ COMPONENT: ºInstallations */
/* ==================================================================================== */

.mi-room-installations {
   --installation-size: 45px;
   --installation-space: 15px;
}

.mi-room-installations__content {

   display: flex;
   flex-wrap: wrap;
   margin: -8px;
   margin: calc(var(--installation-space) / -2);
}

.mi-room-installations__item {

   text-align: center;
   padding: 8px;
   padding: calc(var(--installation-space) / 2);
}

.mi-room-installations__item span[class] {
   
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 45px;
   height: var(--installation-size);
   width: 45px;
   width: var(--installation-size);
   font-size: 25px;
   font-size: calc(var(--installation-size) / 1.9);
   border: 1px solid #dedede;
   border-color: var(--border-color);
   border-radius: 50%;
}

.mi-room-installations__caption {
   
   display: inline-block;
   color: #808080;
   color: var(--text-color__secundary);
   line-height: 1.4;
   padding-top: .5em;
   max-width: 120px;
   font-size: 14px;
}


/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ANIMATIONS: ºanimation */
/* ==================================================================================== */

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}
.fadeIn {
   -webkit-animation-name: fadeIn;
   animation-name: fadeIn;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
.fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}


/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PILLS & LABELs: ªpills ºlabels */
/* ==================================================================================== */


.mi-o-pills > div {
   display: flex;
   flex-wrap: wrap;
   margin: calc(var(--space) / -4);
}
.mi-o-pills__pill {
   background-color: #daf6ff;
   font-size: 0.85em;
   border: 1px solid #9ae6ff;
   color: #54a3bd;
   padding: 4px 7px 3px;
   margin: calc(var(--space) / 4);
}
.mi-o-pills__pill--club {
   background-color: #fcf3df;
   border-color: #f6ca69;
   color: #b46e05;
}



.mi-o-label-club {
	line-height: 1.3;
	font-weight: bold;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: calc(var(--space)/2);

}
.mi-o-label-club [class*=mi-ico-] {
   height: 2em;
   width: 2em;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   padding-top: 2px;
   box-sizing: border-box;
   vertical-align: sub;
}
.mi-o-label-club__members {
   width: 100%;
}
.mi-o-label-club__members [class*=mi-ico-] {
   background-color: var(--bg-color__club);
   border-radius: 50%;
   margin-right: calc(var(--space) / 2);
}
.mi-o-label-club__flag {
   background-color: var(--bg-color__club);
   overflow: hidden;
   font-weight: bold;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 100%;
   clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
   padding-right: 20px;
   display: flex;
   align-items: center;
}
.mi-o-label-club__text {
   color: var(--bg-color__club--text);
   padding-left: calc(var(--space) / 2);
}


/* input.childinput::placeholder {
   color: red;
} */