@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

root {
  display: block;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: Arial, sans-serif;
  font-size: 11pt;
  color: #484848;
}

h1, h2 {
  margin: 20px 0px 10px 0px;
}

h3 {
  margin: 10px 0 0 0;
}

.left {
  float: left;
}

.clearfix {
  clear: both;
}

.divTable {
  display: table;
}

.divRow {
  display: table-row;
}

.divCell {
  display: table-cell;
}

.floatWrapper:before,
.floatWrapper:after {
  content: " ";
  display: table;
}

.floatWrapper:after {
  clear: both;
}

div.searchFormWrapper {
  padding: 0px;
}

div.searchFormWrapper.vertical {
  width: 240px;
}

/**
    form#searchYachtForm .half {
    width: $search-result-page-width / 4;
    }
**/
button {
  background-color: #2866b1;
  border: none;
  color: white;
  padding: 9px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 3px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
}

button:hover {
  background-color: #79ccf2;
}

/**
button:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
**/

button.small {
  padding: 2px 10px;
  font-size: 14px;
  margin: 1px;
  height: 24px;
}

/*
    border-color: #44A0D9;
    border-width: 3px;
    background-color: transparent;
    padding: 5px;
*/
div.field {
  text-align: left;
  display: block;
  width: 300px;
  float: left;
}

div.field input {
  border-color: #f1f1f1;
}

div.field input.obligatory {
  border-color: #205079;
}

div.searchFormWrapper div.formTitle {
  font-size: 24px;
  color: #2866b1;
  font-weight: 700;
  border-bottom: 1px solid #f1f1f1;
}

/*div.searchFormWrapper*/
div.vertical div.field {
  width: 240px;
}
div.vertical div.field span.label {
  display: inline-block;
  width: 110px;
  border-bottom: 1px dashed #f1f1f1;
  margin-right: 5px;
  font-weight: bold;
}
div.vertical div.field select {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 11pt;
  width: 120px;
}
div.vertical button.searchBtn::before {
  clear: both;
}
div.vertical button.searchBtn {
  margin-top: 30px;
  margin-bottom: 10px;
  width: 50%;
  margin: 60px;
}

/*div.searchFormWrapper*/
div.horizontal div.field {
  float: left;
  width: 195px;
  background: #ebebeb url(/css/img/select.png) no-repeat 95% center;
  overflow: hidden;
  margin: 0;
  margin-bottom: 10px;
  margin-right: 10px;
}
div.horizontal div.field span.label {
  display: inline-block;
  margin-left: 10px;
  font-weight: bold;
}
div.horizontal div.field select {
  border: 0;
  border-radius: 0;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  width: 189px;
  text-overflow: ellipsis;
  height: 40px;
  color: #2866b1;
  background: transparent;
  padding: 9px;
}
div.horizontal div.field select option {
  font-weight: normal;
}
div.horizontal button.searchBtn {
  position: relative;
  top: -1px;
  left: 0px;
  width: 195px;
  float: left;
}

div.searchResultsWrapper {
  margin: 0 auto;
  max-width: 830px;
  width: 100%;
}
div.searchResultsWrapper div.searchResultsTitle {
  font-size: 14pt;
  padding: 5px 10px;
  border-bottom: 1px solid #f1f1f1;
  background-color: #2866b1;
  color: white;
}
div.searchResultsWrapper .vertical .leftCol {
  float: left;
  width: 250px;
}
div.searchResultsWrapper .vertical .rightCol {
  float: left;
  width: 575px;
  margin-top: 40px;
  margin-left: 2px;
}
div.searchResultsWrapper .horizontal .leftCol span.label {
  /*                width: ($search-result-page-width/6) - 40px;*/
}
div.searchResultsWrapper .horizontal .leftCol select {
  /*                width: $search-form-vertical-width/2;
                  margin-right: 10px;     */
}
div.searchResultsWrapper div.searchResultsPaging div.sortFields {
  text-align: right;
  padding: 5px 10px;
  border-bottom: 1px solid #f1f1f1;
  background-color: #fbfbfb;
}
div.searchResultsWrapper div.searchResultsPaging div.pagingFields {
  text-align: right;
  padding: 5px 10px;
  border-bottom: 1px solid #f1f1f1;
  background-color: #fbfbfb;
}
div.searchResultsWrapper div.searchResultItem {
  position: relative;
  font-size: 10pt;
  padding: 5px;
  border-bottom: 1px solid #f1f1f1;
}
div.searchResultsWrapper div.searchResultItem div.searchResultItemProp span.label {
  display: inline-block;
  width: 105px;
  font-weight: bold;
}
div.searchResultsWrapper div.searchResultItem div.searchResultItemProp.half {
  width: 100px;
}
div.searchResultsWrapper div.searchResultItem div.searchResultItemProp {
  width: 200px;
}
@media(min-width: 600px) {
	div.searchResultsWrapper div.searchResultItem div.searchResultItemProp.half {
	  width: 290px;
	}
	div.searchResultsWrapper div.searchResultItem div.searchResultItemProp {
	  width: 620px;
	}
}
div.searchResultsWrapper div.searchResultItem div.searchResultItemProp.yachtModel {
  font-size: 12pt;
  font-weight: bold;
  float: left;
  margin-bottom: 5px;
}
div.searchResultsWrapper div.searchResultItem div.searchResultItemProp.homeBase {
  margin-top: 18px;
}
div.searchResultsWrapper div.searchResultItem div.searchResultItemProp.picture {
  width: 140px;
  height: 93.333px;
  margin: 3px;
  float: left;
}
div.searchResultsWrapper div.searchResultItem div.priceCalculation {
  position: absolute;
  right: 5px;
  top: 25px;
  min-width: 155px;
  text-align: right;
}
div.searchResultsWrapper div.searchResultItem div.priceCalculation div.finalPrice {
  font-size: 12pt;
  color: #2866b1;
}
div.searchResultsWrapper div.searchResultItem div.priceCalculation div.priceListPrice {
  text-decoration: line-through;
}
div.searchResultsWrapper div.searchResultItem:hover {
  background-color: #ededed;
}

span.cut-out {
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 4px 5px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 4px 5px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 4px 5px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(0, 0, 0, 0.6);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

div.yachtDetails {
  position: relative;
  padding: 0 10px;
  max-width: 830px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 30px;
}

div.yachtDetails > div.companyName {
  padding-left: 10px;
  font-size: 1.2rem;
  margin-bottom: 25px;
  color: #2866b1;
}

div.yachtDetails h1 {
  background-color: #2866b1;
  color: white;
  padding: 5px 10px;
}
div.yachtDetails h2 {
  background-color: #f1f1f1;
  color: black;
  margin: 0;
  padding: 5px 10px;
  margin-bottom: 10px;
  margin-top: 20px;
}
div.yachtDetails h3 {
  border-bottom: 1px solid #f1f1f1;
  padding: 5px 0;
}
div.yachtDetails h3 > i {
  margin-right: 10px;
}
div.yachtDetails div.equipmentAndServicesList ul {
  margin: 5px;
}
div.yachtDetails div.equipmentAndServicesList ul li {
  margin-right: 35px;
  margin-top: 5px;
  list-style: circle;
}
div.yachtDetails table.table td {
  padding: 0px 10px;
}
div.yachtDetails .gallery {
  float: left;
  width: 50%;
  max-height: 400px;
  min-width: 300px;
}

div.yachtDetailsSpecification {
  float: left;
  width: 50%;
  min-width: 350px;
}
div.yachtDetailsSpecification .divCell {
  padding: 3px 10px;
}
div.yachtDetailsSpecification span.label {
  display: inline-block;
  width: 150px;
  font-weight: bold;
}

.sendMailFromWrapper {
  padding: 0 10px;
  padding-bottom: 10px;
  border: 1px solid #f1f1f1;
}
.sendMailFromWrapper #sendMailFrom h3 {
  color: #2866b1;
  border-color: #2866b1 !important;
}
.sendMailFromWrapper #sendMailFrom span.label {
  display: inline-block;
  width: 207.5px;
  font-weight: bold;
  color: #2866b1;
}
.sendMailFromWrapper #sendMailFrom div.floatWrapper {
  width: 100%;
  max-width: 605px;
  margin: 0 auto;
}
.sendMailFromWrapper #sendMailFrom textarea {
  max-width: 540px;
  width: 95%;
}

/* jQ FORM VALIDATION */
.jQ_validate_span_error {
  right: 0;
  color: red;
  background: #fff;
  border: 1px solid #ccc;
  -webkit-box-shadow: 0 2px 3px #999;
  box-shadow: 0 2px 3px #999;
  padding: 2px 4px;
  width: calc(100% - 0.375rem);
}

.contactInputCheckBox > .jQ_validate_span_error {
	width: unset;
}

.jQ_validate_style {
  background-color: #FFD1D1;
}

.fotorama--fullscreen .fotorama__stage, .fotorama--fullscreen .fotorama__nav {
  background: none repeat scroll 0 0 #f1f1f1 !important;
}

/* Create the animation blocks */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Spinning, gradient circle; CSS only! */
.circle {
  border-radius: 50%;
  position: absolute;
  background-color: #fff;
  background-image: url("/images/circle.png");
  background-repeat: no-repeat;
  background-position: 6px 6px;
}

.w60 {
  width: 59px;
  height: 59px;
}

@media(max-width: 640px) {

	div.searchResultsWrapper div.searchResultItem {
		padding: 5px;
	}
	div.horizontal div.field {
		width: 47%;
	}
	div.horizontal button.searchBtn {
		width: 100%;
	}

	div.searchResultsWrapper div.searchResultItem div.priceCalculation {
		position: relative;
		float: right;
		top: 4px;
	}
	div.searchResultsWrapper div.searchResultItem div.searchResultItemProp {
		width: 360px;
	}
	div.searchResultsWrapper div.searchResultItem div.searchResultItemProp.half {
		width: 180px;
	}
	div.searchResultsWrapper div.searchResultItem div.searchResultItemProp.homeBase {
		width: 180px;
	}
	button.small,
	#sortByProperty, #sortByType {
		height: 32px;
	}
	button.small {
		border-radius: 32px;
	}
}

@media(max-width: 360px) {
	div.horizontal div.field, div.horizontal button.searchBtn, div.horizontal div.field select {
		width: 100%;
	}
	div.horizontal button.searchBtn {
		width: 100%;
	}
}


.sendMailFromWrapper {
    background-color: #eaeaea;
}

.sendMailFromWrapper #sendMailFrom div.floatWrapper {
    width: 100% !important;
    max-width: initial;
}

.sendMailFromWrapper #sendMailFrom div.floatWrapper div.field span.label {
    width: 100% !important;
    font-weight: normal;
}

.sendMailFromWrapper #sendMailFrom div.floatWrapper div.field {
    min-width: calc(50% - 20px) !important;
    width: initial;
    padding: 0.5rem;
}

.sendMailFromWrapper #sendMailFrom div.floatWrapper div.field-max {
    min-width: calc(100% - 20px) !important;
    width: initial;
}
.sendMailFromWrapper #sendMailFrom div.floatWrapper .requiredFieldsText {
    padding: 0.5rem;
}
.sendMailFromWrapper #sendMailFrom div.floatWrapper div.field input[type=text], 
.sendMailFromWrapper #sendMailFrom div.floatWrapper div.field textarea {
    display: block;
    min-width: calc(100% - 1rem) !important;
    padding: 0 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 0.25rem;
}
.sendMailFromWrapper #sendMailFrom div.floatWrapper div.field input[type=text] {
    height: 2.25rem !important;
}
.sendMailFromWrapper #sendMailFrom div.floatWrapper div.field textarea {
    height: 5.25rem;
}
.sendMailFromWrapper #sendMailFrom div.floatWrapper div.field input[type=checkbox] {
    float: left;
}

div.horizontal button.searchBtn {
    margin-left: initial;
}
.sendMailFromWrapper #sendMailFrom button {
    width: 100% !important;
    padding: 0.5rem !important;
}
#bookingFormBtn{
    width: 100% !important;
    padding: 0.5rem !important;
    margin-top: 10px !important;
}

@media(max-width: 640px) {
    .sendMailFromWrapper #sendMailFrom div.floatWrapper div.field,
    .sendMailFromWrapper #sendMailFrom div.floatWrapper div.field-max {
        min-width: 100% !important;
    }
   
    h1 {  font-size: 30px; }
    h2 {  font-size: 25px; }
    h3 {  font-size: 20px; }
    h4 {  font-size: 18px; }
    h5 {  font-size: 15px; }
}

#sendMailBtn > i {
	margin-right: 8px;
}

.label.obligatoryLabel::before {
  content: '* ';
}