/*******************************
  Custom CSS modifications to Semantic-UI 
  Load this file after semantic.min.css or semantic.min.css
*******************************/
/*

We don't know of a way of automatically getting the customised colours from semantic

The customised colours are built into the semantic css by the build, but there do not
seem to be any CSS variables created, nor any means we know to get a value from css rules

So here we define the colours again as CSS variables for use in our custom CSS

This list obtained from semantic/src/themes/default/globals/site.variables
note that green and blue are overridden in the 'site' definition (semantic/src/site...)
- we reflect those changes here

*/



:root {
/*---  Colors  ---*/
  --red              : #DB2828;
  --orange           : #F2711C;
  --yellow           : #FBBD08;
  --olive            : #B5CC18;
   --green: #1EB53A;  /* Servissim Green */
  --teal             : #00B5AD;
   --blue: #3044B5;   /* Servissim Blue */
  --violet           : #6435C9;
  --purple           : #A333C8;
  --pink             : #E03997;
  --brown            : #A5673F;
  --grey             : #767676;
  --black            : #1B1C1D;

/*---  Light Colors  ---*/
  --lightRed         : #FF695E;
  --lightOrange      : #FF851B;
  --lightYellow      : #FFE21F;
  --lightOlive       : #D9E778;
  --lightGreen       : #2ECC40;
  --lightTeal        : #6DFFFF;
  --lightBlue        : #54C8FF;
  --lightViolet      : #A291FB;
  --lightPurple      : #DC73FF;
  --lightPink        : #FF8EDF;
  --lightBrown       : #D67C1C;
  --lightGrey        : #DCDDDE;
  --lightBlack       : #545454;

/*---   Neutrals  ---*/
  --fullBlack        : #000000;
  --offWhite         : #F9FAFB;
  --darkWhite        : #F3F4F5;
  --midWhite         : #DCDDDE;
  --white            : #FFFFFF;

/*--- Colored Backgrounds ---*/
  --redBackground    : #FFE8E6;
  --orangeBackground : #FFEDDE;
  --yellowBackground : #FFF8DB;
  --oliveBackground  : #FBFDEF;
  --greenBackground  : #E5F9E7;
  --tealBackground   : #E1F7F7;
  --blueBackground   : #DFF0FF;
  --violetBackground : #EAE7FF;
  --purpleBackground : #F6E7FF;
  --pinkBackground   : #FFE3FB;
  --brownBackground  : #F1E2D3;

/* -- semi-transparent colours (Our own defs) -- */
   --greenSemiTrans  : #1EB53A90;  /* Servissim Green */
   --blueSemiTrans   : #3044B580;   /* Servissim Blue */
}
/*   

End of variables definition

*/

/*

Putting a margin with '.fixedmenupush' caused scroll bar to appear. Pushing down content by this
margin seems to increase the body height by that amount - but that gives us blank space at the
bottom of the page and a vertical scroll bar no matter what size the viewport (!)
It might be caused by the body now being taller than the html element? even though developer tools 
shows them to be the same height (!).
Found that if we set the html element height to 'auto' the extra space and the scrollbar disappear.
*/
html {
   height:auto;
}

/*veryhuge is our own definition between huge and massive - where huge is 2em and massive is 4em
we are using 2.9em because 3em cause problems with the menu dropdown hiding when 
the mouse moved down over the dropdown
*/
span.ui.veryhuge.text {
   font-size: 2.90em;
}

.ui.vertical.menu .item>i.icon {
	float: left;
	margin: 0 0.5em 0 0;
}

.ui.inverted.menu .subheader {
	background: rgba(62,62,62,0.4);
	padding: 0.5em 1.18em;
	font-size: .85em;
}

.topmenu.segment {
	min-height: 70px; /* 65px is the top menu height */
	padding: 1em 0em;
}

.ui.charcoal.label, .ui.charcoal.labels .label {
    background-color: #3e3e3e !important;
    border-color: #3e3e3e !important;
    color: #fff !important
}

.ui.menu a i.fa {
font-size: 1.5em !important;
color: #646464;
}
.ui.bottom.fixed.menu {
	min-height: 50px;
}

.searchbox.container, .inverted.searchbox.segment {
	background-color: #2d2d2d;
}

.ui.search .results {
overflow-y: auto;
max-height: 300px;
}

.ads.grid {
	padding: 3em 0 2em 0;
}

.ui.modal .title.icon i.right.aligned {
	text-align: right;
}
.spaced .buttons, .spaced .button {
  margin-bottom: 0.5em;
}

.footer.logo {
   background-color:white;
}

.slider-nav img {
	width: 98%;
}
.disclaimer {
	font-size: .8em !important;
}

.prefooter.grid {
	background-color: #3e3e3e;
	padding: 2em 0 2em 0;
}

.ui.dropdown.selection {
	min-width: 100px;
}

/* add our own 'rounded' class to put rounded corners on segments */
.ui.segment.rounded {
   border-radius: 20px;
}

/* allow menu dropdowns to overlay the cookie nag */
.ui.nag.cookie {
   z-index:0;
}

#map {
	height: 300px;
	width: 100%;
	background-color: grey;
}

/*
general use class to hide any element from the page - 
   - not using 'hidden' as the class name because this collides
   with fomantic ui
*/
/* 
Programatically add or remove the class to hide/show an element,
also used to stop the placeholder flash on slick-slider load 
*/
.gen-hide{
	display: none;
}
.gen-hide-force{
	display: none !important;
}

/* add our own input bolded right-align (for use in input fields with right-hand labels) KH 2018-06-28 */
.ui.input .rightvalueinput {
	text-align:right;
	font-weight:bold;
/*	padding-left:5px!important;
	padding-right:5px!important;*/
}
/* Slick slider loading fix */
/*stops flicker and puts a loader into the slider*/
.photo-gallery {
	background: url(../../Scripts/slick/ajax-loader.gif) no-repeat center center;
}
/*slick arrows override*/
.slick-prev, .slick-next {
   z-index: 1;
   width: 30px;
}
.slick-prev:before, .slick-next:before {
    font-size: 30px;
    color: black;
}
/*some of our images have transparent canvas border
so here we stop adjacent slides from showing through
*/
.slick-slide img {
  background: white;
  /*override the display:block (from slick.css) which caused the image to position left*/
  display: inline;
}
/*These classes position our arrows because when we replace
the slick arrows we cannot use the slick built-in classes for slick-next and slick-prev
because they also impose the slick arrows position*/
.myslick-arrow {
    opacity: .7;
    z-index: 1;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
}
.myslick-prev {
   left: 5px;
}
.myslick-next {
   right: 0px;
}
.property-photo-medium .slick-slide {
    /*width: 95vw;*/
		}



/*
Change heading colours according to property category
*/
.header.residential {
   color:  #3044B5 !important;
}

.header.commercial {
   color: firebrick !important;
}

.header.buildingplot {
   color: #115f00 !important;
}
/*
Give property cards a coloured background
*/
.card.residential {
    background-color: hsl(240, 100%, 94%) !important;
}
.card.commercial {
    background-color: hsl(0, 100%, 94%) !important;
}
.card.buildingplot {
    background-color: hsl(128, 100%, 94%) !important;
}
.card.residential:hover {
    background-color: hsl(240, 100%, 98%) !important;
}
.card.commercial:hover {
    background-color: hsl(0, 100%, 98%) !important;
}
.card.buildingplot:hover {
    background-color: hsl(128, 100%, 98%) !important;
}


/*Show maintenance-only items in different colour*/

.maintenance-item {
   background-color: orangered!important;
}

/*Move the floating label in the cards to float within the image*/
.floating.small.tag.label {
/*left:70%;*/
top:-.5em;
}

/*space the image from the tag in the cards in the featured properties section*/

.featuredprops .cards .image img {
   margin-top:3px;
}
/*Move the floating label in the cards to float within the image*/
.favouriteprops .floating.small.tag.label {
/*left:70%;*/
top:-4%;
left:55%;
}
.cards .header.residential {
    font-size: 1.3em;
    color:  #3044B5 !important;
}

.cards .header.commercial {
    font-size: 1.3em;
    color: firebrick !important;
}

.cards .header.buildingplot {
    font-size: 1.3em;
    color: #115f00 !important;
}

/*Make the icon (heart) red when the enclosing 'favourite' button is active*/ 

.ui.basic.active.button.favbutton > i {
   color:#db2828 !important;
}

/* make the menu portion of a selection dropdown as wide as the content (ie prevent wrapping)*/ 
.ui.selection.dropdown .menu {
   width:max-content;
}

/*Semantic does not set global decoration for links but we want all links to be visible and 
to respond to hover*/

/*
a:visited {
   color:orange;
}
*/

/*
underline and deeper colour for links when hovered
- unless class 'nohover' is present - for example we put 'nohover' as 
class for anchors witjhin cards
*/
a:not(.nohover):hover {
   text-decoration: underline;
   color: darkblue;
}
/*
except when there is an inverted footer when we need to use a light colour
*/
.inverted.footer a:not(.nohover):hover {
   text-decoration: underline;
   color: white;
}


/*
Hide iframes on load to avoid the page scrolling to the iframe - remove this class after load
*/

iframe.iframehideload {
   display:none;
}

/* 
Position a close 'x' button at the top right of the enclosing element
- the enclosing element needs 'position:relative'
*/
.videocontainer {
   position:relative;
}
.videocontainer .closebutton {
   position: absolute;
   top:8px;
   right:8px;
}
/* put rounded corners and shadow on the videojs player */
.video-js {
   border-radius: 20px;
   box-shadow: 4px 4px 8px var(--blue);
   overflow: hidden;
}
/* Safari (webkit 6+) has to have border-radius on both the div AND the <video> tag. Sheesh. */
.video-js video {
   border-radius: 20px;
   box-shadow: 4px 4px 8px var(--blue);
   overflow: hidden;
}

.video-js .vjs-control-bar {
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
}

/*
=============================================
  Menu Bar Logos for different screen widths
=============================================
*/

/*This is common to all the logo-images irrespective of screen sizes*/

/*--logo-animate-time is the total time for all images to rotate*/
:root {
   --logo-animate-time: 16s ;
   /* Ms Edge doesn't work properly with calc() on variables, so we have removed the calc to divide the --logo-animate-time by 2 */
   --logo-animate-delay: 8s ;
}

.logofader img { position:absolute; left:0; right:0; top:0; opacity:0;  animation-name: logofade; animation-duration: var(--logo-animate-time) ; animation-iteration-count: infinite;}

@keyframes logofade {
   
/*
0-10-50-60-100 works fine, but to 
alter the profile of the fade to keep the 'S' from fading slightly
during the transition, found that 0-8-52-62-100 works better
*/
0% { opacity: 0; }
8% { opacity: 1; }
52% { opacity: 1; }
62% { opacity: 0; }
100% { opacity: 0;}
}
/*
Logo image changes size for smaller screens
*/
@media only screen and (min-width: 574px) {
/* normal wide-screen: */

.logofader { position:relative; height:50px; width:400px;  }

.logofader img:nth-child(1) { width: 400px; position:absolute; animation-delay: 0s; }

.logofader img:nth-child(2) { width: 400px; position:absolute; animation-delay: var(--logo-animate-delay) ; }

.logo-narrow { display: none; } 
   
}
@media only screen and (min-width: 474px) and (max-width: 573.99px){
/* change size of logos in top bar for small width screens */

.logofader { position:relative; height:50px; width:300px;  }

.logofader img:nth-child(1) { width: 300px; position:absolute; animation-delay: 0s; }

.logofader img:nth-child(2) { width: 300px; position:absolute; animation-delay: var(--logo-animate-delay); }

.logo-narrow { display: none; } 
   
}
@media only screen and (min-width: 374px) and (max-width: 473.99px){
/* change size of logos in top bar for small width screens */

.logofader { position:relative; height:50px; width:200px;  }

.logofader img:nth-child(1) { width: 200px; position:absolute; animation-delay: 0s; }

.logofader img:nth-child(2) { width: 200px; position:absolute; animation-delay: var(--logo-animate-delay); }

.logo-narrow { display: none; } 
   
}
@media only screen and (max-width: 373.99px){
/*
and finally for really narrow screens, just the Servissim narrow logo
*/
.narrowhide { display: none !important; }
.logofader { display: none;  }
.logo-narrow { display: block; position:relative; } 

}


/*
=============================================
          Device Screen Breakpoints
=============================================
*/

/*
Semantic UI breakpoints compiled into Default Theme:-

@mobileBreakpoint            : 320px;
@tabletBreakpoint            : 768px;
@computerBreakpoint          : 992px;
@largeMonitorBreakpoint      : 1200px;
@widescreenMonitorBreakpoint : 1920px;

*/

/* Mobile Tablet Computer */

@media only screen and (max-width: 991px) {
   .mobile-tablet-computer-hide {
         display: none !important;
   }
}

/* Large-screen widescreen */

@media only screen and (min-width: 992px) {
   .largescreen-widescreen-hide {
      display: none !important;
   }

}

/* Mobile Tablet Computer Large-Monitor */

@media only screen and (max-width:1199px) {
   .ui.big.search{ 
      font-size:1.2em; 
   }
   .largescreen-only {
         display: none !important;
   }
   .tablet-hide-menu {
         display: none !important;
   }
}

/* 

Specific CSS for each screen size -
   Widescreen
   Large-Monitor
   Computer
   Tablet + Mobile

   (we have combined Tablet and Mobile, however these may be split at a later date)

*/

/* Widescreen */

@media only screen and (min-width: 1200px) {
		.computer-hide-menu {
			display: none !important;
		}
      .largescreen-hide {
         display: none !important;
      }
      .mediawid {
         width:1127px;
      }
}

/* Large Monitor */

@media only screen and (max-width: 1199px) and (min-width: 992px) {
   	.mediawid {
         width:933px;
      }
}

/* Computer */

@media only screen and (max-width: 991px) and (min-width: 768px) {
   .mediawid {
      width:723px;
   }
}

/* Mobile & Tablet */

@media only screen and (max-width: 767px) {
   .mobile-hide {
         display: none !important;
   }
   .mediawid {
      width:auto
   }
}

/* Computer Large-Monitor Widescreen */

@media only screen and (min-width: 768px) {
   .mobile-only {
         display: none !important;
   }
}

/*

printer friendly CSS - hide elements when printing

*/

@media only print {
   	.printer-hide {
         display: none !important;
      }
/*
printer-active causes an element to be regarded as 'active' during printing even if
it is not active on the page when the print button is pressed. we use it to ensure
that 'description' is shown on the fulldetails printout even if another tab is selected
*/
      .printer-active {
         display:block !important;
      }
/*
This sets all elements to print with their original colors. Webkit (and other browsers)
often don't print background colours unless you set them to do so in the print options
dialog box - however we don't want the browser to ignore background colours
if someone prints one of our pages -
especially the windowdisplay page (the price 'label' did not print the coloured background
because of this).
NOTE: this is a non-standard feature, webkit implements it however other browsers
may need their own settings, which can be added here.
*/ 
* {
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}

/*
The following keeps the footer at the bottom using flexbox
- used to keep the footer at the bottom of the page for printing
*/


html, body {
   margin:0;
   padding:0
}

.sticky-wrap {
   display:flex;
   flex-direction:column;
   min-height:100vh
}

.sticky-footer {
   margin-top:auto ;
   page-break-after: always;
}

/*When printing we don't need a margin for the top menu because
it isn't printed
(fixedmenupush puts the page content below the fixed menu)
However we do need some margin so that the window display is pushed down to fit the
window display frame
*/
.fixedmenupush {
   padding-top: 0;  
}

.windowdisplaytopmargin {
   margin-top:48px;
}
} /*end of media only print*/

/*
When we use a 'container grid' the element sizes according to the screen and fits nicely,
we want to use this in the windowdisplay print but 'container' contains a width used only for 'screen'.
Here we create a 'print' equivalent so that we can get the same effect for our window display 
(The window display icons will now sit in a container which sizes according to the width of the print page).

The screen media uses breakpoints on different widths - we copy that here (but we are not using
the semantic ui variables, so if the semantic ui theme is amended those changes will not be reflected here).

** In fact we have to massage the breakpoint values anyway, so this is fairly specific to the 
** requirements of the window display print page

*/
@media only print and (max-width: 767px) {
.printer-container {
    width: calc(650px + 2rem)!important; /* This one will be used for A4 paper */
}
}
@media only print and (max-width: 991px) and (min-width: 768px) {
.printer-container {
    width: calc(723px + 2rem)!important;
}
}
@media only print and (max-width: 1199px) and (min-width: 992px) {
.printer-container {
    width: calc(933px + 2rem)!important;
}
}
@media only print and (min-width: 1200px)
 {
.printer-container {
    width: calc(1127px + 2rem)!important;
}
}



@media not print {
.printer-only {
   display: none !important;
}
/*
Puts the page content below the fixed menu - add this class to the main content div
This rule is amended by javascript in the document ready function top set the height of the
actual top menu, which may include the 'testing site' banner
*/
.fixedmenupush {
   /* 
   webkit v6 (Chrome is v5 but Safari is v6) covers the fixed menu (with the page body?) if we push the
   element down with top margin.
   This is associated somehow with our use of the fomantic ui sidebar/pusher. In the maintenance pages where there is no sidebar this problem did not occur. 
   Either way we have a solution:
   We discovered that using padding-top works as required on both webkit v5 and v6 with the sidebar
   */
   /* margin-top: 51px;   */
   padding-top: 51px;
}
/*
borderedpage is added to the window display page element when shown on screen (but not on 
the printed media to emphasise the contents which will be printed
*/
.borderedpage {
    border-style: solid;
    border-width: 10px;
}
}


/*Google MAP CSS - will probably be replaced by Semantic UI classes
eventually*/


/*- This css hides the white "Google" clickable link -*/

#map-canvas a img {
display:none;
}

#map-canvas {
    overflow: hidden;
    padding-bottom: 50%;
    padding-top: 30px;
    position: relative;
}
/* infoBox (camelcase) is the default class applied to the info box by infobox.js */
.infoBox {
   border: 1px solid black;
   background: #C0C0FF;
   padding: 5px;
   border-radius: 8px;
}
/* add rounding to the info boxes (overrides 'ui segment' border-radius) */
.infoBox .ib {
   border-radius: 8px ;
}

/* These classes (InfoHeading and InfoBody) are our own, they have no association with infobox.js. Note the capitalisation! */
.InfoHeading {
   font-weight:bold !important;
   font-family: Tahoma, Verdana, Arial !important;
   text-align:center;
}

.InfoBody {
   padding:3px;
}


/*General classes for Andorra-Property specific needs*/


/*New maint pages CSS (now common to public and maint)*/

/*This puts the 'Testing Site' header at the top of maint pages when not the main site*/
BODY:not([data-productionsite]) #testingbanner-text:before { content: "TESTING SITE"; }
#testingbanner-text
{
	margin:0px;
	text-align:center;
	color:Magenta;
	background-color:Black;
	font-size:80px;
	transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
}
#testingbanner-text.small {
    font-size: inherit
}
#fixedtopmenubanner {
   /* margin: 0px;*/
    text-align: center;
    color: #3044b5;
    background-color: white;
    font-size: 40px;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    border-style: solid;
    border-color: black;
    border-width: 0px;
}
#fixedtopmenubanner > div {
   margin-left:auto;
   margin-right:auto;
   margin-top:0;
   margin-bottom:0;
}
#fixedtopmenubanner:empty {
   display:none;
}

/*

The 'forsale' and 'rental' classes are used to colour elements
which we want to highlight as rental or sale
- add 'propertyhighlight' to the element to be highighted
- programatically add data-listingtype='forsale' or 'rental' to a top level element to 
  select the highlight colour and turn on the highlight for elements contained within the top level element

*/


[data-listingtype="rental"] .listinghighlight {
	background-color: var(--yellow);
}

[data-listingtype="forsale"] .listinghighlight {
	background-color: var(--green);
}

[data-salesold="sold"] .salesoldhighlight {
	background-color: var(--redBackground);
}

[data-salesold="sale"] .salesoldhighlight {
	background-color: var(--greenBackground);
}

[data-showhide="hide"] .showhidehighlight {
	background-color: var(--redBackground);
}

[data-showhide="show"] .showhidehighlight {
	background-color: var(--greenBackground);
}

[data-formchanged="1"] {
   background-color: var(--violetBackground)!important;
}

/*Description ckeditor tweaks*/
.cke {
    border-style: solid!important;
    border-color: mediumblue!important;
    border-width: 1px!important;
}
.ckedit.description:focus {
   outline-style:solid;
   outline-color:blue;
   outline-width:thick;
   outline-offset: 1px;
}
.ckedit.description.descblank {
   border-color:grey;
   border-style:solid;
   border-width:thin;
}
.ckedit.description {
   margin-top:10px;
   margin-bottom:10px;
   margin-left:10px;
   margin-right:10px;
   border-color:lightgrey;
   border-style:solid;
   border-width:thin;
}
.ckedit.description:not(.descblank) p:first-child {
	background-color:paleturquoise;
}

.xlatesrc.hidden {
   display:none!important;
}
.ui.form:not([data-autoxlate="1"]) .ui.item .xlate.extra {
display:none;
}