body.SiteBackground{background-image:url('https://resx.octorate.com/content/17446/1552567565521.jpg')}@import url('https://api.fontshare.com/v2/css?f[]=zodiak@700,800,401,301,400,101,801,701,300,100&f[]=satoshi@300,400&display=swap');

:root{
 --dark-blue:#243440;
 --light-background: #f0f7f9;
 --text-dark:#182732;
 --text-dark-sec: #070b0e;
 --field-height: 42px;
 --color: #243440 !important;
}
.ui-button-text{
 background-color: var(--light-background) !important;
 color: var(--dark-blue);
}
.BounceColor .ui-button-text:before, .BounceColor:before{
  background-color:#d1dde5 !important;
}
.ui-notificationbar{
 background-color: var(--dark-blue);
}
body.SiteBackground{
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  padding: 100px 0;
  background-image:unset !important;
  background-color:#FFF !important;
  font-family: 'Satoshi', sans-serif !important;
  font-weight:300;
}
header{
   position:unset !important;
   width:400px;
}
#SiteMain{
  flex:1 1;
  display:flex;
  flex-wrap:wrap;
  gap:32px;
}
#SiteMain>form{
  background-color: var(--dark-blue);
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:unset;
}
#SiteMain>form .Fright{
  order:3;
}
#SiteMain>form .Fleft{
  order:1;
}
#SiteMain>form .SiteButtons{
  order:2;
}
#SiteMain>form button{
  background-color:var(--light-background);
  color:var(--text-dark);
  border-radius:0px !important;
}
#SiteMain>form .ui-button-text{
  background-color:var(--light-background) !important;
  border-radius:0px !important;
  color:var(--text-dark) !important;
}
#SiteMain>form .ui-widget .ui-icon.fa, #SiteMain>form .ui-icon.fa{
  color:var(--text-dark) !important;
}
#SiteMain>form .ui-selectonemenu .ui-selectonemenu-label,#SiteMain>form .ui-selectonemenu{
  border-radius:0px !important;
  border:none !important;
}
#SiteMain>form .ui-selectonemenu .ui-selectonemenu-trigger{
  height:95% !important;
  top:1px !important;
  border-radius:0px !important;
  box-shadow:unset !important;
}
#SiteMain .SiteHeader{
 width:100% !important;
 position:unset !important;
}
header{
   position:unset !important;
   width:400px;
   padding:0 !important;
   margin:0 !important;
}
footer{
  width:100%;
  display:none !important;
}
.LayoutDynamic .SiteContent{
  margin:0 !important;
  flex:1 1;
  position:relative;
}
#SiteMain .SiteHeader .BackTransparent{
  background:unset;
  border-radius: 0px !important;
}
#SiteMain .SiteHeader .HotelHeader{
  border-radius:0px;
  background:unset;
  color:var(--dark-blue);
  padding:0px !important;
  padding-bottom:20px !important;
  box-shadow:unset !important;
  border-bottom: 1px solid rgba(8, 34, 32, .3) !important;
  margin-bottom:20px !important;
}
#SiteMain .HotelName{
  color:var(--text-dark) !important;
}
#SiteMain .HotelHeader>div>div .fa, #SiteMain .HotelHeader>div>div a{
  color:var(--text-dark-sec) !important;
  margin-top: 0.7em;
}
.LayoutDynamic .SearchBar>div{
  display:flex;
  align-items:center;
  margin:0 !important;
}
.LayoutDynamic .SearchCal, .ui-fluid{
  flex:1 1;
}
.LayoutDynamic .SearchBar>div>div{
  padding-top:15px;
}
.LayoutDynamic .SearchBar{
  padding:0px !important;
}
.LayoutDynamic .SearchLabel .fa{
  background-color: var(--dark-blue);
  color: var(--light-background);
  height: 36px;
  border-radius: 0;
  line-height: 40px;
  margin-right:0px;
  min-height:var(--field-height);
}
.LayoutDynamic .SiteHeader .ui-inputfield{
  background-color: #fff !important;
  border: 1px solid rgba(8, 34, 32, .5);
  border-left-width: 0;
  font-style: italic;
  font-weight: 400;
  font-size:16px;
  min-height:var(--field-height);
  text-align:left;
  font-family: 'Zodiak', serif;
}
.ui-fluid .ui-selectonemenu{
 border: 1px solid rgba(8, 34, 32, .5);
 border-left-width: 0;
}
#SiteHeader .ui-selectonemenu-label{
  border:none !important;
}
.ui-fluid .ui-selectonemenu{
  max-height:var(--field-height);
  overflow:hidden;
  border-color:rgba(8, 34, 32, .5) !important;
  border-left-width: 0 !important;
  border-right-width: 0 !important;
}
.LayoutDynamic .SearchBar .ui-selectonemenu-trigger{
	min-height:var(--field-height) !important;
    border-radius:0px !important;
    background-color:var(--dark-blue) !important;
    display: flex;
    align-items: center;
    box-shadow:unset !important;
}
.LayoutDynamic .SearchBar .ui-selectonemenu-trigger>span{
  position:unset !important;
  margin:0 !important;
}
.LayoutDynamic .SearchBar>div:last-child>div:first-child{
  display:none !important;
}
.SearchBar .ui-button-text.ui-c{
  background-color: var(--dark-blue) !important;
  color:var(--light-background) !important;
  border-radius:0px !important;
  border-bottom-left-radius:0px !important;
  border-bottom-right-radius:0px !important;
  padding:10px 0 10px 40px !important;
  font-size:16px;
}

section.shortcuts a.box, section.welcome div.content{
 box-shadow:unset !important; 
 border-bottom: 1px solid rgba(8, 34, 32, .3);
}
section.welcome div.content{
 margin-bottom:120px !important;
}
section.welcome div.content svg, section.shortcuts a.box svg.icon, section.shortcuts a.box svg.btn, section.guest svg.backgraound{
 fill:rgba(8, 34, 32, .3) !important;
}
section.welcome div.content h1, section.welcome div.content h3{
 color: var(--dark-blue) !important;
}
section.relative div.content h1{
 margin-bottom:30px !important;
}
section.relative div.content{
 padding:0px !important;
 box-shadow:unset !important;
}

.BoxSection, .BoxSectionSimple{
 padding:0px !important;
 box-shadow:unset !important;
}
.RoomSection{
 background-color:var(--dark-blue) !important;
 border-radius:0px !important;
 color: #FFF;
}
.RoomSection .Leaden, .RoomSection sup, .RoomSection a, .RoomSection .Red{
  color: var(--light-background) !important;
}
section.checkout div.content, header span.count.big, header span.count.small{
 box-shadow:unset !important;
}
.ui-link, a{
 color:var(--dark-blue) !important;
}
.ui-corner-all{
  border-radius:0px !important;
}
.ui-selectonemenu-panel tr.ui-state-highlight td,
.ui-selectonemenu-panel .ui-state-highlight, .ui-selectcheckboxmenu-panel .ui-state-highlight{
  background-color: var(--dark-blue);
  color:#FFF;
}
.customInput input, .customInput label, .customInput.ui-inputfield{
 border: none !important;
 min-height: 4rem !important;
 border-bottom: 1px solid rgba(8, 34, 32, .3) !important;
 padding: 1.25rem 0 !important;
 width:100% !important;
 color: #333 !important;
}
section.checkout div.content{
  padding-top:0px !important;
  padding-bottom:0px !important;
}
.ui-menu.ui-menu-dynamic{
 z-index:10011 !important;
}
.RoomPhoto, .ui-selectonemenu .ui-selectonemenu-label, span.ui-button-text{
 border-radius:0px !important;
}
#loginform .group label{
  font-weight:300 !important;
  color: #333 !important;
}
#loginform .ui-button-text{
  padding: 20px 40px 20px 80px !important;
  background-color: var(--dark-blue) !important;
  color: #FFF !important;
}
#loginform .ui-widget .ui-icon.fa, .ui-icon.fa{
  font-size:18px;
}
.button, .CustomAccordionPanel .ui-accordion-content, section.checkout div.content p{
  font-family: 'Satoshi', sans-serif !important;
  font-weight:300 !important;
}
h1, h2, h3, h4, h5, h6{
  font-family: 'Zodiak', serif !important;
  font-weight:600 !important;
  margin-bottom:15px !important;
}
section.relative div.content h1{
 text-align:left !important;
}
header span.count.big, header span.count.small{
 background:unset !important;
}
#FormConfirm .CardSmallTopic{
 position: relative;
}
#FormConfirm .validLabel{
 position:unset !important;
}
#FormConfirm .CardSmallTopic svg{
  position:absolute;
  top: 40px;
  right: 30px;
  width: 60px;
}
.ui-fluid .ui-selectonemenu .ui-selectonemenu-trigger{
 height:103% !important;
}
.HotelResults{
    position: absolute;
    width: 100%;
    top: 0rem;
}
section.room div.calendar{
 margin-top:36rem !important;
}
.customDayCalendar .datetheme2 p, section.room div.calendar ul li .datetheme2 p{
  font-size:10px !important;
  white-space: break-spaces;
} 
section.room div.calendar ul li .datetheme2 .NormalText big, section.room div.calendar ul li .datetheme2 .NormalText sup{
  font-size:15px !important;
}
.Fright .ui-button-text{
 background-color: var(--dark-blue) !important;
}
.legendtheme2{
  display:flex !important;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  gap:20px;
}
@media(max-width:1200px){
  :root{
  --field-height: 38px;
  }
  body.SiteBackground{
   display:unset;
   padding:unset;
  }
  #SiteMain{
   display:unset;
  }
  header{
    width:100%;
    margin: 8rem auto 10rem !important;
  }
  section.guest div.group, section.guest div.group.null, section.guest div.null{
    flex: 1 1;
  }
  .headerButton, header a.button{
    width:100%;
  }
  .LayoutDynamic .SiteHeader .ui-inputfield{
    font-size:unset;
    border: 1px solid rgba(8, 34, 32, .5) !important;
  }
  section.checkout div.content{
   padding:0px !important;
  }
  .BoxSection, .BoxSectionSimple{
   padding:15px !important;
  }
  header span.count.big{
   z-index:9999;
  }
  #FormConfirm, #panelCalendar{
   margin-top:unset;
  }
  #FormConfirm .CardSmallTopic svg{
   top: 40px;
   right: 30px;
   width: 60px;
  }
  .customDayCalendar .datetheme2 p, section.room div.calendar ul li .datetheme2 p{
    font-size:14px !important;
  }
  section.room div.calendar ul li .datetheme2 .NormalText big, section.room div.calendar ul li .datetheme2 .NormalText sup{
    font-size:16px !important;
  }
  .pictureDialog.ui-dialog{
   z-index:100234 !important;
  }
  #ui-datepicker-div{
    z-index:100230 !important;
  }
  .HotelResults{
   position:unset;
   width:100%;
  }
  section.room div.calendar{
   margin-top:0rem !important;
  }
}
@media(max-width:430px){
  #FormConfirm .CardSmallTopic svg{
   top: 77px;
   right: 30px;
   width: 30px;
  }
  .legendtheme2{
    align-items:unset;
    gap:10px;
  }
}