@font-face {
  font-family: 'HOST-Kiosk';
  src: url('./../fonts/HOST-Kiosk.eot?chrsr1');
  src: url('./../fonts/HOST-Kiosk.eot?chrsr1#iefix') format('embedded-opentype'),
  url('./../fonts/HOST-Kiosk.ttf?chrsr1') format('truetype'),
  url('./../fonts/HOST-Kiosk.woff?chrsr1') format('woff'),
  url('./../fonts/HOST-Kiosk.svg?chrsr1#HOST-Kiosk') format('svg');
}

/* _______ Default Icons ___________ */

/* __________ Person _________ */
.Icon_Person::before{
  font-family: 'HOST-Kiosk';
  content: "\e915";
  font-size: 30px;
}

.Icon_PersonBold::before{
  font-family: 'HOST-Kiosk';
  content: "\e915";
  font-size: 35px;
  color: var(--TextColor);
  font-weight: 600;
  vertical-align: middle;
}

/* Person with background */


.LogOutIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e910";
  font-size: 20px;
  color: var(--MainButtonTextColor);
  margin-left: 10px;
  vertical-align: sub;
}

/* _________ Main Page _____________ */
.Icon_CheckIn .path1:before {
  font-family: 'HOST-Kiosk';
  content: "\e905";
  color: var(--TextColor);
  font-size: 150px;
}

.Icon_CheckIn .path2:before {
  font-family: 'HOST-Kiosk';
  content: "\e907";
  margin-left: -1em;
  font-size: 150px;
  color: var(--PrimaryColor);
}

.Icon_CheckIn .path3:before {
  font-family: 'HOST-Kiosk';
  content: "\e908";
  margin-left: -1em;
  font-size: 150px;
  color: var(--SecBackground);
}

.Icon_NewBooking .path1:before {
  font-family: 'HOST-Kiosk';
  content: "\e91a";
  color: var(--TextColor);
  font-size: 150px;
}
.Icon_NewBooking .path2:before {
  font-family: 'HOST-Kiosk';
  content: "\e91b";
  margin-left: -1em;
  font-size: 150px;
  color: var(--SecundaryColor);
}
.Icon_NewBooking .path3:before {
  font-family: 'HOST-Kiosk';
  content: "\e91c";
  margin-left: -1em;
  font-size: 150px;
  color: #fff;
}

/* _________ Auth Page _____________ */
.MarkBook::before{
  font-family: 'HOST-Kiosk';
  content: "\e919";
  font-size: 30px;
  position: absolute;
  margin-top: 10px;
  margin-left: 15px;
  transition-duration: 250ms;
}

.QRIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e918";
  font-size: 150px;
  color: var(--MainButtonColor);
}

/* _______ Guest Information _______ */
.editicon::after{
  font-family: 'HOST-Kiosk';
  content: "\e90d";
  color: var(--SecButtonTextColor);
  font-size: 25px;
  margin-left: 10px;
  vertical-align: sub;
}

.CrownMainGuest::before{
  font-family: 'HOST-Kiosk';
  content: "\e926";
  vertical-align: middle;
  font-size: 25px;
  margin: 0px 7px;
}

/* ___ */
.PersonRounded .path1::before{
  font-family: 'HOST-Kiosk';
  content: "\e921";
  color:  var(--PrimaryColor);
  font-size: 40px;
}

.PersonRounded .path2::before{
  font-family: 'HOST-Kiosk';
  content: "\e922";
  color: var(--SecButtonTextColor);
  font-size: 40px;
  margin-left: -1em;
}

.PersonRounded .path3::before{
  font-family: 'HOST-Kiosk';
  content: "\e928";
  color: var(--SecButtonTextColor);
  font-size: 40px;
  margin-left: -1em;
}
/* ___ */

/* _______ Reservation Status _______ */




.falseLanguageSelector::after{
  font-family: 'HOST-Kiosk';
  content: "\e929";
  font-size: 25px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 5%;
}

.trueLanguageSelector::after{
  font-family: 'HOST-Kiosk';
  content: "\e913";
  font-size: 25px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 5%;
}

.trueLanguageSelector::before{
  font-family: 'HOST-Kiosk';
  content: "\e90f";
  font-size: 30px;
  vertical-align: middle;
  margin-right: 5%;
}

.falseLanguageSelector::before{
  font-family: 'HOST-Kiosk';
  content: "\e90f";
  font-size: 30px;
  vertical-align: middle;
  margin-right: 5%;
}





.addinfo::after{
  font-family: 'HOST-Kiosk';
  content: "\e924";
  font-size: 20px;
  margin-left: 10px
}

.ReturnButtonIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e917";
  font-size: 30px;
  color: var(--MainButtonTextColor);
  vertical-align: middle;
}

.NextButtonIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e912";
  font-size: 30px;
  color: var(--MainButtonTextColor);
  vertical-align: middle;
}



.RoomInfoInDate::before{
  font-family: 'HOST-Kiosk';
  content: "\e90a";
  font-size: 30px;
  color: var(--TextColor);
  vertical-align: middle;
}

.RoomInfoOutDate::before{
  font-family: 'HOST-Kiosk';
  content: "\e90b";
  font-size: 30px;
  color: var(--TextColor);
  vertical-align: middle;
}

.RoomInfoAdults::before{
  font-family: 'HOST-Kiosk';
  content: "\e914";
  font-size: 30px;
  color: var(--TextColor);
  vertical-align: middle;
}

.RoomButtonIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e912";
  font-size: 40px;
  font-weight: bold;
}

.falseCancelButtonIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e917";
  font-size: 30px;
  color: white;
}

.trueCancelButtonIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e925";
  font-size: 20px;
  color: #FF5552;
}



.GuestIcon::after{
    font-family: 'HOST-Kiosk';
    content: "\e915";
    color: black;
    font-size: 30px;
    margin-left: 50px;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 75px;
}

.PaymentIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e8fe";
  color: var(--MainButtonColor);
  font-size: 30px;
  vertical-align: sub;
  margin-left: 10px;
}

.DeletePinIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e927";
  color: #F6B64F;
  font-size: 30px;
  vertical-align: sub;
  margin-left: 10px;
}

.CheckOutIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e910";
  color: var(--MainButtonColor);
  font-size: 30px;
  vertical-align: sub;
  margin-left: 10px;
}

.StepperNext::after{
  font-family: 'HOST-Kiosk';
  content: "\e916";
  color: white;
  font-size: 22px;
  vertical-align: middle;
  margin-left: 10px;
}

.StepperPrevious::before{
  font-family: 'HOST-Kiosk';
  content: "\e911";
  color: white;
  font-size: 22px;
  vertical-align: middle;
  margin-right: 10px;
}



.Consent::after{
  font-family: 'HOST-Kiosk';
  content: "\e923";
  font-size: 20px;
  color: var(--SecButtonTextColor);
  vertical-align: sub;
  margin-left: 3px;
}

.ConsentAll::after{
  font-family: 'HOST-Kiosk';
  content: "\e923";
  font-size: 20px;
  color: var(--SecButtonTextColor);
  vertical-align: sub;
  margin-left: 3px;
}

.GuestsQttIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e914";
  font-size: 35px;
  margin-right:10px;
  vertical-align: sub;
}

.LeftMenuControl::after{
  font-family: 'HOST-Kiosk';
  content: "\e911";
  font-size: 30px;
  margin-right:10px;
  color: var(--TextColor);
  vertical-align: sub;
}

.RightMenuControl::after{
  font-family: 'HOST-Kiosk';
  content: "\e916";
  font-size: 30px;
  color: var(--TextColor);
  vertical-align: sub;
}

.Iconrest::after{
  font-family: 'HOST-Kiosk';
  content: "\e90c";
  font-size: 30px;
  color: var(--TextColor);
}

.IconHotelRooms::after{
  font-family: 'HOST-Kiosk';
  content: "\e903";
  font-size: 30px;
  color: var(--TextColor);
}

.restaurantsHeaderIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e90c";
  font-size: 100px;
  color: var(--TextColor);
}

.MenuSubtitleTeste::before{
  font-family: 'HOST-Kiosk';
  content: "\e903";
  font-size: 30px;
  color: var(--TextColor);
  vertical-align: middle;
  margin-right: 15%;
}

.CloseFaqIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e929";
  display: block;
  font-size: 30px;
  color: var(--TextColor);
}

.OpenFaqIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e913";
  display: block;
  font-size: 30px;
  color: var(--TextColor);
}

.NewBookingSearchIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e91d";
  display: block;
  font-size: 30px;
  color: var(--MainButtonTextColor);
}

.ArrowDownIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e90a";
  display: block;
  font-size: 30px;
  color: var(--TextColor);
}

.ArrowUpIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e90b";
  display: block;
  font-size: 30px;
  color: var(--TextColor);
}

.roomsHeaderIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e903";
  font-size: 100px;
  color: var(--TextColor);
}

.balconyIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e901";
  font-size: 30px;
  color: var(--TextColor);
}

.wifiIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e920";
  font-size: 30px;
  color: var(--TextColor);
}

.bathtubIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e902";
  font-size: 30px;
  color: var(--TextColor);
}


.Iconrestaurants::after{
  font-family: 'HOST-Kiosk';
  content: "\e90c";
  font-size: 40px;
  color: var(--TextColor);
  display: flex;
  justify-content: center;
  align-items: center;
}

.Iconfaqs::after{
  font-family: 'HOST-Kiosk';
  content: "\e91d";
  font-size: 40px;
  color: var(--TextColor);
  display: flex;
  justify-content: center;
  align-items: center;
}

.Iconmeetingsand-events::after{
  font-family: 'HOST-Kiosk';
  content: "\e900";
  font-size: 40px;
  color: var(--TextColor);
  display: flex;
  justify-content: center;
  align-items: center;
}

.Iconactivities::after{
  font-family: 'HOST-Kiosk';
  content: "\e90f";
  font-size: 40px;
  color: var(--TextColor);
  display: flex;
  justify-content: center;
  align-items: center;
}

.Iconrooms::after{
  font-family: 'HOST-Kiosk';
  content: "\e903";
  font-size: 40px;
  color: var(--TextColor);
  display: flex;
  justify-content: center;
  align-items: center;
}

.Iconwellnesses::after{
  font-family: 'HOST-Kiosk';
  content: "\e91e";
  font-size: 40px;
  color: var(--TextColor);
  display: flex;
  justify-content: center;
  align-items: center;
}

.Iconabout-uses::after{
  font-family: 'HOST-Kiosk';
  content: "\e901";
  font-size: 40px;
  color: var(--TextColor);
  display: flex;
  justify-content: center;
  align-items: center;
}

.true-CollapseIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e911";
  font-size: 40px;
  color: var(--TextColor);
  margin-left: -5px;
}

.false-CollapseIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e916";
  font-size: 40px;
  color: var(--TextColor);
}

.NewBookingResumeCalendar::before{
  font-family: 'HOST-Kiosk';
  content: "\e909";
  font-size: 30px;
  margin-right: 10px;
  color: var(--TextColor);
  font-weight: 600;
  vertical-align: middle;
}

.OffersGuestsIcon::before{
  font-family: 'HOST-Kiosk';
  content: "\e915";
  font-size: 30px;
  color: var(--PrimaryColor);
  vertical-align: sub;
  margin-right: 4px;
}

.OffersSizeIcon::before{
  font-family: 'HOST-Kiosk';
  content: "\e900";
  font-size: 30px;
  color: var(--PrimaryColor);
  vertical-align: sub;
  margin-right: 4px;
}

.OffersBedIcon::before{
  font-family: 'HOST-Kiosk';
  content: "\e903";
  font-size: 30px;
  color: var(--PrimaryColor);
  vertical-align: sub;
  margin-right: 4px;
}

.RoomGuestsIcon::before{
  font-family: 'HOST-Kiosk';
  content: "\e915";
  font-size: 40px;
  color: var(--PrimaryColor);
  vertical-align: sub;
  margin-right: 4px;
}

.RoomSizeIcon::before{
  font-family: 'HOST-Kiosk';
  content: "\e900";
  font-size: 40px;
  color: var(--PrimaryColor);
  vertical-align: sub;
  margin-right: 4px;
}

.RoomBedIcon::before{
  font-family: 'HOST-Kiosk';
  content: "\e903";
  font-size: 40px;
  color: var(--PrimaryColor);
  vertical-align: sub;
  margin-right: 4px;
}

.AmenityIconShower::after{
  font-family: 'HOST-Kiosk';
  content: "\e91e";
  font-size: 30px;
  color: var(--ThirdColor);
}

.AmenityIconTV::after{
  font-family: 'HOST-Kiosk';
  content: "\e91f";
  font-size: 30px;
  color: var(--ThirdColor);
}

.AmenityIconWIFI::after{
  font-family: 'HOST-Kiosk';
  content: "\e920";
  font-size: 30px;
  color: var(--ThirdColor);
}

.RoomIncludedIconBreakfast::before{
  font-family: 'HOST-Kiosk';
  content: "\e904";
  font-size: 30px;
  color: var(--PrimaryColor);
  vertical-align: middle;
}


.ConfirmButtonIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e923";
  font-size: 20px;
  color: white;
  margin-left: 10px;
  vertical-align: baseline;
}

.OfferPercsNET::before{
  font-family: 'HOST-Kiosk';
  content: "\e920";
  font-size: 40px;
  color: var(--ThirdColor);
}

.OfferPercsShower::before{
  font-family: 'HOST-Kiosk';
  content: "\e91e";
  font-size: 40px;
  color: var(--ThirdColor);
}

.OfferPercsVIEW::before{
  font-family: 'HOST-Kiosk';
  content: "\e901";
  font-size: 40px;
  color: var(--ThirdColor);
}

.OfferPercsTV::before{
  font-family: 'HOST-Kiosk';
  content: "\e91f";
  font-size: 40px;
  color: var(--ThirdColor);
}

.PaymentCompleteIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e923";
  font-size: 50px;
  color: #7ED8CD;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 60px;
  border: 3px solid #7ED8CD;
}

.PaymentFailedIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e925";
  font-size: 50px;
  color: #FF5552;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 22px;
  padding-bottom: 22px;
  border-radius: 60px;
  border: 3px solid #FF5552;
}

.LeftMainImageController::after{
  font-family: 'HOST-Kiosk';
  content: "\e911";
  font-size: 30px;
  color: var(--TextColor);
}

.RightMainImageController::after{
  font-family: 'HOST-Kiosk';
  content: "\e916";
  font-size: 30px;
  color: var(--TextColor);
}

.CloseButtonIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e925";
  font-size: 20px;
  font-weight: bold;
  color: var(--SecButtonTextColor);
}

.ContinueButtonIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e913";
  font-size: 30px;
  color: white;
}

.EditButtonIcon::after{
  font-family: 'HOST-Kiosk';
  content: "\e929";
  font-size: 30px;
  color: white;
}

.Iconnatural::after{
  font-family: 'HOST-Kiosk';
  content: "\e90c";
  font-size: 30px;
  color: var(--TextColor);
  vertical-align: middle;
}

.Iconvegan::after{
  font-family: 'HOST-Kiosk';
  content: "\e904";
  font-size: 30px;
  color: var(--TextColor);
  vertical-align: middle;
}

.Icontradicional::after{
  font-family: 'HOST-Kiosk';
  content: "\e926";
  font-size: 30px;
  color: var(--TextColor);
  vertical-align: middle;
}