/* containing anything else, perhaps this is general padding and margin and border size and internal positioning of elements */


/* use border-box sizing  
 *	all elements measure their width (and height) from border to border, including padding
 *	see https://css-tricks.com/box-sizing/
 */
html {
	box-sizing: border-box;
}

*, :after, :before {
	box-sizing: inherit;
	text-decoration: inherit;
}
/*************/


/* Override some default behaviour of browsers and ebase
 *  margins, padding, outline
 */
body {
	margin: 0px;
	border-width:95px;
}

* {
	outline: none;
}

form > div > [class*=-Content]{
	position: relative;
}

td, tr {
	padding: 0;
}

input[type=image]{
	border: none;
}

[class*=-SURROUND]{
	width: 0;
	flex: 0 0 0;
}

h1,h2,h3,h4,h5,h6 {
	padding: 0;
	margin: 0;
}

/******************/


a{
	cursor: pointer;
}

/* Put some spacing around icons */
.fa{
	margin: 0.5em;
}

.fa-middle{
	vertical-align: middle;
}

.fa-question-circle{
	cursor: pointer;
}

.clickable.fa:hover, .clickable:hover .fa:not(.fa-question-circle), .fa-question-circle:hover{
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
	color: #3399ff;
}

/* Lots of style here for a nicer hover effect - needs some work
	background-color: rgba(255, 255, 255, 0.1);
	opacity: 1;
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	position: relative;
}

.fa.clickable::before{
	line-height:1.5em;
	vertical-align: middle;
	font-size: 1em;
}

.fa.fa-envelope.clickable::before{
	line-height:2em;
	font-size: 0.75em;
}


.fa.clickable::after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}

/* Effect 1 * /
.fa.clickable {
	background: rgba(255,255,255,0.1);
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.fa.clickable::after {
	top: -7px;
	left: -7px;
	padding: 7px;
	box-shadow: 0 0 0 4px #fff;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-webkit-transform: scale(.8);
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	-moz-transform: scale(.8);
	-ms-transform: scale(.8);
	transition: transform 0.2s, opacity 0.2s;
	transform: scale(.8);
	opacity: 0;
}

/* Effect 1a * /
.fa.clickable:hover {
	background: rgba(255,255,255,1);
	color: #3399ff;
}

.fa.clickable:hover::after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
*/

.button .fa{
	margin: 0;
}


.align-left{
	text-align: left;
}

.align-right{
	text-align: right;
}

.align-center{
	text-align: center;
}

img.inline{
	height: 1em;
  vertical-align: middle;
  margin: 0 0.3em;
}

img.block{
	max-width: 100%;
	max-height: 20em;
}

.underline-on-hover:not(.active):hover{
	text-decoration: underline;
}

.hoverable:not(.active):hover .underline-on-hover{
	text-decoration: underline;
}



/* style a banner (hero image) to contain the page title
 *	the height is set to give a 16:9 ratio image at smaller screen widths but with a maximum of 15em
 *	the background image for this panel is defined by the theme style sheet (eg. zeus.css)
 *	 but that could be overridden for individual pages on a form.
 */
.title-banner {
	height: 56.25vw;
	max-height: 15em;
	position: relative;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

/* turn the title banner into a splash screen by assuming the full height of the viewport */
.title-banner.splash{
	height: 100vh;
	max-height: none;
	overflow:	auto;
}

.title-banner.splash-small{
	min-height: 20em;
	max-height: 25em;
}

/* on mobile devices the header becomes opaque and any title banner moves beneath it,
 *  consequently the splash height should be the height of the view port less the height of the header */
@media (max-height: 640px){ /* MOBILE */
	.title-banner.splash{
		height: calc(100vh - 100px);
	}
}

/* centre-align text and centre a span inside its parent */
.center,
.title-banner > span {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);
}

.title-banner > span {
	width: 80%;
}

/* on a splash title, align the text to the left */
.title-banner[class*=splash] > span{
	text-align: left;
}
/* and display inline with a semi-transparent highlight on each element */
.title-banner[class*=splash] > span > *{
	display: inline-block;
	margin: 0;
	padding: 0 1rem;
	background: rgba(0, 0, 0, 0.5);
	color: #FFFFFF;
}
/*********************/


.circle{
	border-radius: 50%;
}

.border-indicator-left{
	border-left-style: solid;
	border-left-width: 0.5em;
}

.border-indicator-bottom{
	border-bottom-style: solid;
	border-bottom-width: 0.5em;
}

.border-indicator-top{
	border-top-style: solid;
	border-top-width: 0.5em;
}



/* style a 'card' similar to Google's material design 'cards'
 *  the card will flex when placed in a flex container (see layout.css)
 *  for style rules which add shadow and scaling see material.css
 */
.card {
	padding: 0;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	background-color: #FFFFFF;
	color: #282828;
}

/* clickable and hoverable objects have the 'pointer' (hand) cursor */
.clickable:not(.disabled){
	cursor: pointer;
}

path.check{
	fill:none;
	fill-rule:evenodd;
	stroke:#3399ff;
	stroke-width:60;
	stroke-linecap:butt;
	stroke-linejoin:miter;
	stroke-miterlimit:4;
	stroke-dasharray:920;
	stroke-dashoffset: 920;
	stroke-opacity:1;
}

path.check-circle{
	fill:none;
	fill-opacity:1;
	stroke:#282828;
	stroke-width:40;
	stroke-miterlimit:4;
	stroke-dasharray:1570;
	stroke-opacity:1;
}

.checked path.check{
	stroke-dashoffset: 0;
	/*animation: check 0.15s ease-in 0.1s forwards;*/
}

.checked path.check-circle{
	stroke-dashoffset: 150;
	/*animation: check-gap 0.2s linear forwards;*/
}

/*
@keyframes check {
  to {
    animation: check 0.15s ease-in 0.1s forwards;
  }
}

@keyframes check-gap {
  to {
    stroke-dashoffset: 150;
    /*transform: rotate(12deg);* /
  }
}*/

/* style buttons, all ebase buttons in this presentation template have this class by default,
		shadow and scaling is again applied by material.css */
/*
.button {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border: none;
  font-size: 0.7rem;
  text-transform: uppercase;
  cursor:pointer;
  display:inline-block;
  vertical-align:baseline;
  text-decoration:none;
  padding:1em 2em;
  margin: 0.2em 0.3em;
  line-height:1.1em;
  text-align:center;
  text-decoration:none;
  font-weight:500;
}

.button.inactive{
	background: none !important;
	color: #282828 !important;
	cursor: initial;
}

.button.subtle{
	background: none;
  box-shadow: none;
  font-weight: bold;
  padding: 1em;
  margin: 0;
  border: none;
  text-transform: uppercase;
  font-size: 0.9em;
}
*/
.toggle-button-container{
	padding: 0;
}

.toggle-button-container > .button{
	margin: 0 !important;
	padding: 1em;
	border: 1px solid #DDDDDD;
	border-width: 1px 1px 1px 0;
	box-shadow: none;
	background: #ffffff;
	color: #282828;
	transition: background-color 0.2s;
}

.toggle-button-container.flex-v > .button{
	border-width: 0 1px 1px 1px;
}

.toggle-button-container > .button:hover{
	transform: none !important;
	box-shadow: none !important;
}

.toggle-button-container > .button:first-of-type{
	border-left-width: 1px;
	border-radius: 0.3em 0 0 0.3em;
}

.toggle-button-container > .button:last-of-type{
	border-radius: 0 0.3em 0.3em 0;
}

.toggle-button-container.flex-v > .button:first-of-type{
	border-top-width: 1px;
	border-radius: 0.3em 0.3em 0 0;
}

.toggle-button-container.flex-v > .button:last-of-type{
	border-radius: 0 0 0.3em 0.3em;
}


tr > td:last-of-type > *{
	margin-right: 0;
}

tr > td:first-of-type > *{
	margin-left: 0;
}

.h-menu > ul{
	display: -webkit-flex !important;
	display: flex !important;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
}

.v-menu > ul{
	display: -webkit-flex !important;
	display: flex !important;
	-webkit-flex-flow: column wrap;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-items: stretch;
	padding: 0em 1.5em 0.3em 0.3em !important;
}

.h-menu > ul > li{
	padding-left: 1em;
	padding-right: 1em;
}

.v-menu > ul > li{
	padding: 0.3em;
}

.h-menu > ul > li:not(.active):hover,
.v-menu > ul > li:not(.active):hover{
	text-decoration: underline;
}

.h-menu > ul > li.active,
.v-menu > ul > li.active{
	font-weight: bolder;
	cursor: initial;
}



/* style different types of field element
 *  add padding and a border and a transition for when the field gets the focus
 */
input,
textarea,
select {
  -webkit-transition:border .1s;
  -moz-transition:border .1s;
  -o-transition:border .1s;
  transition:border .1s;
  border: 1px solid #CCCCCC;
  margin:0;
  padding:0.4em 0.5em;
}

/*div[class*=-Field] > div[class*=-Editor],*/
td > div[class*=-Editor]{
	width: 100%;
}

input[type=text],
input[type=password],
input[type=number],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime-local],
input[type=email],
input[type=search],
input[type=tel],
input[type=url],
textarea,
select,
.selectivity-input{
	width: 100%;
}

input[type=text],
input[type=password],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime-local],
input[type=email],
input[type=tel],
input[type=url],
select,
.selectivity-input{
	max-width: 30em;
}

input[type=number]{
	max-width: 10em;
}

/* change the font and border colour when the field has focus */
input:not([type=submit], [type=button]):focus,
textarea:focus,
select:focus {
  border-color: inherit;
  color: inherit;
  outline:0;
}

/* search inputs are only bordered on the bottom */
input[type=search] {
	border-width: 0 /*0 1px 0*/;
}

/* placeholder text is greyed out */
::-webkit-input-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder,
input.empty {
  color: #999999;	
}

/* style the positioning of radio button inputs */
span > input[type=radio] {
	margin-right:1em;
	margin-left:0.3em;
	margin-bottom:0.5em;
}

td span > input[type=radio] {
	margin-bottom:0.4em;
}

td > input[type=radio] {
	margin-left:0.3em;
	margin-bottom:0.2em;
}

/* allow text areas to be resized vertically and horizontally */
textarea {
  overflow:auto;
  resize:both;
  vertical-align:top;
  display:block;
}
/*******************/

/* classes for field containers to change the internal structure for fields */
/* force labels above inputs */
.fields-labels-above [class*="-Editor"] {
	display: block;
}

/* labels text is pushed to the placeholder text by javascript, here we hide the label elements */
.fields-labels-in-editor [class*="-Label"] {
	display: none !important;
}


/* useful class to fade an inactive element
 *  NB. this a visual effect only, other steps must be taken to actually render an element inactive
 */
.inactive, .disabled{
	opacity: 0.6;
}

.inactive div.img,
.inactive img{
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
}

.disabled{
	cursor: initial;
}

.padded{
	padding: 1em;
}

.hidden{
	display: none;
}

/* style error message generated by the server */
.errorMessage {
	font-size: 16px;
  background-image: url('$ws/Presentation/images/error.png');
  background-repeat: no-repeat;
	background-position: 10px center;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  padding: 0.4em 0.8em 0.4em 35px;
/*  margin-top: 0 !important; */
  font-weight: 600;
}

/* style warning message generated by the server */
.warningMessage {
  /*background-image: url('$ws/Presentation/images/warning.png');
  background-repeat: no-repeat;
	background-position: 10px center;*/
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  padding: 0.4em 0.8em 0.4em 35px;
/*  margin-top: 0 !important; */
  font-weight: 600;
}

.infoMessage {
  color: #31708f;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  padding: 0.4em 0.8em 0.4em 35px;
/*  margin-top: 0 !important; */
  font-weight: 600;
  margin-bottom: 4px;
}


/* resizable wrapper for maximising videos (eg) */
.resizable-wrapper{
	position: relative;
}

.resize-button{
	cursor: pointer;
}

.bottom-right{
	position: absolute;
	bottom: 0;
	right: 0;
}


/* leading dots */
ul.leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none}
ul.leaders li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "}
ul.leaders li > span:first-child {
    padding-right: 0.33em;
    background: white}
ul.leaders li > span + span {
    float: right;
    padding-left: 0.33em;
    background: white}



.section-header{
	padding: 0 !important;
	align-items: center;
}

.section-header > *{
	margin: 0;
}

.section-header > .fa{
	margin-right: 0.5em;
}

#intercom-container iframe.intercom-launcher-frame {
	bottom: 45px !important;
}

/* Knowledgebase doc style */
.docplaceholder .fa{
	margin: 0;
}

.docplaceholder{
	font-size: 13px;
}

.docplaceholder p, .docplaceholder ul{
	margin-top:6px;
	margin-bottom:6px;
}

.docplaceholder h3 {
	font-size: 18px;
	margin-top:10px;
	margin-bottom:0;
}

.docplaceholder h4 {
	font-size: 16px;
	margin-top:2px;
	margin-bottom:1px;
}

/* Helper classes that can append or prepend a unit to a display only field when applied to the field input */
.unit-tb:after {
	content: "TB";
}

.unit-gb:after {
	content: "GB";
}

.unit-mb:after {
	content: "MB";
}

.unit-kb:after {
	content: "KB";
}

.unit-dollar:before {
	content: "$";
}

.copyable div[class*=-Editor] {
	width: auto;
}

.copyable .fa-copy {
	margin: 0;
	cursor: pointer;
}


/* Slants */
/******************/
.angled, .angled-reverse{
	position: relative;
}

.angled:before{
  background: inherit;
  top: 0;
  content: '';
  display: block;
  height: 50%;
  left: -45%;
  position: absolute;
  right: 0;
  transform: skewY(-1.5deg);
  transform-origin: 0%;
  z-index: -1;
}

.angled:after{
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-2.5deg);
  transform-origin: 100%;
  z-index: -1;
}

.angled-reverse:after{
  background: #191919;
  bottom: 0;
  content: '';
  display: block;
  height: 27%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-1.5deg);
  transform-origin: 100%;
  z-index: 1;
}