/* Import a font from google fonts, just add your font name instead of Your+Font+Name and uncomment the line
 *  Then you'll need to use the font by setting a font-family property
 *  either in bootstrapVariables or in your own css rule declaration
 */
//@import 'https://fonts.googleapis.com/css?family=Your+Font+Name';

/*

/* bring in the bootstrap functions and our settings for the bootstrap variables 
@import "../Bootstrap Source/scss/functions";
@import "_bootstrapVariables";


/* import bootstraps default variables 
@import "../Bootstrap Source/scss/variables";

/* import the rest of bootstrap  
@import "../Bootstrap Source/scss/mixins";
@import "../Bootstrap Source/scss/bootstrap";

 
/* some useful extra styling and utilities by Verj.io 
@import "verjioUtilities";   
*/

/* CSS for a sticky footer
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 300px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #ff9130;
}
 */
 
/* code display
pre {
	overflow: auto;
	background-color: #eee;
	padding: 0.5rem 0.8rem;
	/* font-size: 13px;
	tab-size: 3;
}
 */

/*
/* sticky footer
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}
*/

/* famous genograms */
.fg:hover {
  background-color: #f0f0f0; /* Change background color on hover */
  cursor: pointer; /* Change cursor to pointer */
}


/* demonstration pages */
.demoMenuHeading {
  font-size: 1.1rem;
  padding-top: 5px;
} 
.demoMenuItems {
  font-size: 0.9rem;
  padding-top: 3px;
}
.demoDescription {
  font-size: 0.9rem;
  padding-top: 3px;	
  padding-bottom: 15px;	
}
.demoMenuLinks {color:black;}

/* home page */
.homeDescription {
  font-size: 0.9rem;	
}
.homeHeadlineDescription {
  font-size: 0.95rem;	
}
.homeButtonDescription {
  font-size: 0.95rem;	
}
.homeFeatures {
	padding-top: 5px;
	color:#ff9130;
}

/* developer pages */
.developerMenuHeading {
  font-size: 1.1rem;
  padding-top: 5px;
}
.developerMenuItems {
  font-size: 0.9rem;
  padding-top: 3px;
}
.developerMenuLinks {color:black;}

.developerDescription {
  font-size: 0.9rem;
  padding-top: 3px;	
  padding-bottom: 15px;	
}
.developerAttributes {
	color: #880000;
}

/* help pages */
.helpDescription {
  font-size: 0.9rem;
  padding-top: 3px;	
  padding-bottom: 15px;	
}
.helpDescriptionTitle {
  font-size: 1rem;	
}

/* code samples */
.copy-code-button {
  position: absolute;
  top: 0.6em;
  right: 0.6em;
  padding: 0.5em 1em;
  font-size: 12.5px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
pre {
	position: relative;
	font-size: 0.8rem;
}

/* symbols layout */
.symbolsWrapper {
	  padding: 0.0rem;
	  /* margin-bottom: 0.5rem; */
	  margin: 0 auto 0.5rem auto;
}
.symbol {
	  padding: 1rem 1rem 0 1rem;	
	  text-align:center;
	  margin: 0 auto 0 auto;
}
.symbolsText {
	  font-size: 0.85rem;
	  text-align:center;
	  padding: 0.3rem 0 0 0;
}

/* account management */
.accountText {
  font-size: 0.95rem;
}

/* pricing tier headers */
.tierHeaders{
  //background-color:#1CAE78;
  background-color:#ff9130;
  color: #fff;
}
.pricingToggle {
	  color: white;
    background-color:red;
}

/* apiKey */
.apiKey {
  background-color:#f4f0ec;
  padding: 10px 0px 10px 10px;
  color: #1CAE78;
  font-weight: bold;
  margin: 18px 0 12px 0;
}

/* apiKey production*/
.apiKeyProd {
  background-color:#f4f0ec;
  padding: 10px 0px 10px 10px;
  color: #1CAE78;
  font-weight: bold;
  margin: 0px 0 12px 0;
}

// header menu links colour to white
a.nav-link {
	color:white!important;
	font-size: 0.95rem!important;
	}
a.nav-link:hover {
	color:#ddd!important;
	font-size: 0.95rem!important;
}
	
// header menu drop down menu items font size
.dropdown-item {
	font-size: 0.95rem!important;	
}

/* set the max height for carousels (really this is for "hero" carousels at the top of the page by probably makes sense in other places)
 *  by default carousels will grow and shrink with the width of the page, maintaining some sort of aspect ratio,
 *  here we set a maximum height a carousel should be and provide an option to keep a fixed height regardless of width
 */
$carousel-height: 40em;
.carousel-inner{
	max-height: $carousel-height;
}
.carousel-inner.fixed-height{
	height: $carousel-height;
}

/* indent blockquotes from both sides and add a left hand border */
blockquote{
	margin: 0 1rem 1rem;
  border-left: solid 0.2em #ccc;
  padding: 0 1rem;
}

/* change the styling of close buttons for modals, this works better on coloured modal headers */
.close, .close:hover{
	color: inherit;
	opacity: 1;
}


.navbar-gradient {
   background: linear-gradient(to right, #b8b8b8, #a0a0a0);
}
.footer-gradient {
   background: linear-gradient(135deg, #ff9130 0%, #e06d00 100%);
}