/* version 1.0 */
  
 
 .DBVersion {
   border-width: 0;
   font-size: 10px;
   text-align: center;
 }

 body {

   /* Hide scrollbars */
   overflow: hidden;
   margin: 0;
   padding: 0;
 }

 .DBChangedDate {
   border-width: 0;
   font-size: 10px;
   text-align: center;
 }

 .BookingRequest {
   font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
   display: flex;
   flex-direction: column;
   align-content: center;
   min-width: 250px;
   max-width: 290px;
 }

 .PostErrorTextClass {
   color: red;
 }

 .UserInputContainer {
   display: flex;
   padding: 0;
   margin: 10px;
   flex-direction: column;
   justify-content: center;
   width: 80%;
   padding-left: 10%;
   padding-right: 10%;
 }

 .InuptUserDataClass {

   text-align: left;
   border-radius: 10px;
   border-color: lightgrey;
   padding: 5px;
   padding-left: 50px;
   width: 100%;
 }

 .LegalUserDataClass {

   text-align: center;
   width: 100%;
   display: inline-block;
   font-size: smaller;
   margin-bottom: 10px;
 }

 .LabelUserDataClass {
   margin-bottom: 2px;
   margin-top: 5px;
   font-size: medium;
 }

 .LabelUserDataValue {
   border-style: solid;
   margin: 2px;
   border-color: lightgray;
   border-width: 1px;
   padding: 3px;
   min-width: 240px;
   max-width: 250px;
   font-size: medium;
 }

 .LabelUserDataValueLegal {
   text-align: center;
   height: 25px;
   width: 25px;
   border-style: solid;
   margin: 15px;
   align-self: center;
 }

 .BookingOption {

   min-height: 150px;
   border-radius: 5px;
   border-color: orange;
   border-style: solid;
   border-width: 2px;
   width: 100%-20px;
   margin: 5px;
   margin-bottom: 10px;
 }

 .BookingOption2 {
   min-height: 150px;
   border-radius: 5px;
   border-color: orange;
   border-style: solid;
   border-width: 2px;
   width: 100%-20px;
   margin: 5px;
   margin-bottom: 10px;
 }

 .BookingOptionOffer {

   min-height: 150px;
   border-radius: 5px;
   border-color: green;
   border-style: solid;
   border-width: 2px;
   width: 100%-20px;
   margin: 5px;
   margin-bottom: 10px;
 }


 .BookingOption:focus {
   border-width: 10px;
 }

 .BookingOption2:focus {
   border-width: 10px;
 }

 .BookingOptionApartmentType {
   font-size: 14px;
   font-weight: bold; 
   margin-top: 2px;
   margin-bottom: 5px;
 }

 .BookingOptionHeader {
   background-color: aliceblue;
   border-radius: 2px;
   padding: 10px;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
   border-color: grey;
 }

 .BookingOptionSelected {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   transition: 0.3s;
   min-height: 150px;
   width: 260px;
   border-radius: 10px;
   padding: 20px;
   border-radius: 30px;
   border-width: 5px;
   background-color: skyblue;
 }

 .ButtonNavigationBox {
   display: flex;
   width: 100%;
   flex-direction: row;
   justify-content: center;

 }

 /* Rounded border */
 hr.rounded {
   border-top: 4px solid #bbb;
   border-radius: 3px;
 }

 .BookingOptionBottom {
   text-align: right;
   padding-right: 0px;
   margin-left: 0px;
   width: 100%;
 }

 .FindOptionButton {
   width: 120px;
 }

 button,
 .BookingOptionSelectButton,
 .ButtonNavigation,
 .ButtonNavigationSendRequest {
   background-color: orange;
   border-radius: 1px;
   color: white;
   border-color: orange;
   /* box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);*/
   text-align: center;
   height: 35px;
   min-width: 70px;
   margin-left: 5px;
   margin-right: 5px;
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 20px;
   padding: 5px;
 }

 .ButtonNavigationSendRequest {
   min-width: 100px;
   height: 35px;
   margin: 5px;
 }

 .ButtonNavigation:disabled,
 button:disabled,
 .BookingOptionSelectButton:disabled {
   background-color: white;
   color: grey;
   border-color: grey;
 }

 .BookingRequestText {
   padding: 10px;
 }

 .BookingRequestTextContent {
   background-color: white;
   color: grey;
   border-color: grey;
   min-height: 20px;
   /*box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);*/
   padding: 5px;
   text-align: center;
 }

 .BookingOptionSelectButton:hover,
 .ButtonNavigation:hover,
 button:hover:enabled {
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
 }

 .BookingOption:hover {
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }

 .card {
   /* Add shadows to create the "card" effect */
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   transition: 0.3s;
 }

 .SendingInProgress {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   transition: 0.3s;
   padding: 10px;
   margin: 10px;
   border-radius: 10px;
   min-height: 50px;
   display: flex;
   align-items: center;
   flex-direction: column;
 }

 /* On mouse-over, add a deeper shadow */
 .card:hover {
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }

 /* Add some padding inside the card container */
 .container {
   padding: 2px 16px;
 }

 .VarianceDate {
   border-radius: 5px;
   border-color: lightgray;
 }

 .BookingOptionTotalPrice {
   background-color: white;
   font-size: 20px;
   text-align: right;
   margin: 15px;
 }

 .BookingRequestContainer {
   margin: 0px;
   display: flex;
   align-items: center;
   flex-direction: column;
   width: 100%;
   padding: 5px;
   min-width: 300px;
   height: auto;  
   background-color: white;
 }

 .BookingRequestArea {
   font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   border-radius: 10px;
   border-width: 3px;
   display: inline-flex;
   align-items: center;
   flex-direction: column;
   overflow: auto;
   padding: 10px;
 }

 .VersionInfoSection {
   display: none;
 }

 .bookingOptionDetails {
   padding: 10px;
   border: 5px solid #f7f7f7;
   border-radius: 10px;
   display: inline;
 }

 .PriceLineThrough {
   text-decoration: line-through;
   font: larger;
 }

 .PeriodBookingOption {
   border-width: 1px;
   border-radius: 3px;
   /*height: 15px;*/
   font-size: 12px;
   border-color: lightgray;
 }

 .PeriodBookingOptionLineThrough {
   border-width: 1px;
   border-radius: 3px;
   height: 15px;
   font-size: 12px;
   color: grey;
   padding: 10px;
   text-decoration: line-through;
 }

 ul.ApartmentProperties {
   color: grey;
   list-style-type: circle;
   padding-left: 25px;
   margin-block-start: 10px;
   margin-block-end: 10px;
 }

 li.ApartmentPropertyItem
 {
  padding-right:5px;
 }

 .AreaBookingOption {
   /*height: 15px;*/
   font-size: 12px;
 }

 .PriceSectionClass {
   text-align: left;
 }

 .AvailableOptionsResult,
 .DialogSearchForBookings,
 .NoAvailableSpotsFound {
   margin: 5px;
   text-align: center;
   /*vertical-align: center;*/
   min-height: 20px;
   /*font-size: larger;*/
   flex-direction: column;
   justify-content: center;
   font:smaller;
   
   width: 100%;
 }

 .LegalBorder
 {
  text-align: center;
 }

 .AvailableOptions,
 .AvailableOption {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
   text-align: left;
   font-size: smaller;
   border-radius: 10px;
   border-color: lightgrey;
   width: 100%;
   flex-direction: column;
 }

 .BookingOptionShowOnMap {
   font-size: 10px;
   margin-left: 5px;
 }

 .BookingOptionButtonBox {
   text-align: center;
 }

 .QueryWindowModal {
   font-size: 20px;
 }

 .BookingRequestCompletedOK {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   transition: 0.5s;
   width: 100%-20px;
   border-radius: 7px;
   border-width: 1px;
   padding: 0px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }

 .OKIcon {
   display: block;
   width: 60px;
   height: 60px;
   padding: 10px;
 }

 .SendingIcon {
   display: block;
   width: 100px;
   height: 100px;
   padding: 10px;
 }

 .SeasonHeaderClass {
   text-align: center;
   margin: 5px;
   display: block;
 }

 .SeasonYearCaptionClass {
   font-size: larger;
 }

 .InputGroupCheckInOut
 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
 }
 .InputGroupContainer {
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin-bottom: 5px;
   margin-top: 1px;
   margin-left:5px;
   margin-right:5px;
 }

 .InputGroupLabel {
   display: flex;
   margin-bottom: 1px;
   font:small;
 }

 .InputGroupValue {
   margin-bottom: 1px;
   border-style: solid;
   border-color: lightgray;
   border-width: 1px;
   /*font-size: medium;*/
   padding: 2px;
 }

 .InputGroupValueReadOnly {
   margin-bottom: 1px;
   border-style: solid;
   border-color: lightgray;
   border-width: 1px;
   font-size: medium;
   padding: 2px;
   text-align: center;
 }

 .BookingOptionPriceSection {
   text-align: left;
   margin: 5px;
 }

 .BookingOptionBody {

   background-color: white;
   display: flex;
   flex-direction: column;
   padding-left: 5px;
 }

 .LoaderContainer {
   border-color: white;
   /* padding-left: 25px;*/

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   min-width: 250px;
   min-height: 400px;
 }

 .Loader {
   border: 4px solid while;
   /* Light grey */
   border-top: 5px solid orange;
   /* Blue */
   border-radius: 100%;
   width: 50px;
   height: 50px;
   animation: spin 2s linear infinite;
 }

 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }