:root {
  /* * * * * * * * * * * * *
  *                       *
  *        COLORS         *
  *                       *
  * * * * * * * * * * * * *
  
  These colors need to be HEX colors atm. You can find a good tool for colors here: https://www.color-hex.com/ */
  --landing-page-search-btn-color: #66c1bf;
  --landing-page-gradient-left: #755965;
  --landing-page-gradient-right: #755965;

  --link-color: #388988;
  --link-hover-color: var(--gray-1000);

  --landing-page-search-btn-color: #66c1bf;
  --btn-color: #66c1bf;
  --btn-text-color: #f8f8ff;

  --main-icon-color: #ff6f61;

  --main-bg-color: #ffffff;
  --second-bg-color: #ad81ba; /* Currently unused */
  --accent-bg-color: #f8f8f8;

  /* Admonitions 
     These colors have to be rgb for the background to work properly.
     Again, you can use to aformentioned website for this.  */

  --note-icon-color: var(--dark-blue);
  --caution-icon-color: #f9e688; /* def: #ffe81a */
  --warning-icon-color: #f9e688; /* def: #ffb74d */
  --danger-icon-color: #bf1100; /* def: #ef5350 */
  --notice-icon-color: #755965; /* def: #3aa3e3 */
  --important-icon-color: #755965; /* def: #2ab27b */
  --tip-icon-color: #34617e; /* def: #3aa3e3 */

  /* VOYADO VARS */
  --white: #fff;
  --gray-75: #f8f8f7;
  --gray-100: #f0f0ef;
  --gray-150: #e2e2e2;
  --gray-200: #d8d8d5;
  --gray-500: #909088;
  --gray-800: #4a4a49;
  --gray-900: #31312e;
  --gray-1000: #21211f;

  --coral-50: #ffeeec;
  --aqua-100: #d0eceb;
  --aqua-700: #2d6e6d;
  --sand-100: #e9eade;
  --cherry: #9b1c45;
  --blue: #29abe2;
  --light-blue: #f1f9fd;
  --dark-blue: #0e244b;

  --border-radius-small: 4px;
  --border-radius-medium: 6px;
  --border-radius-large: 8px;
  
  --spacing-left-menu: 0px;
}

/* * * * * * * * * * * * *
 *                       *
 *         FONTS         *
 *                       *
 * * * * * * * * * * * * *

   Changeing fonts with CSS is a little tricky, but it is doeable.
   
   1. Hop over to https://fonts.google.com and find any fonts you like.

   2. Use the "Select this style" for any fonts you want

   3. Click the top right icon to open the "Selected families dialog"

   4. Copy the statement in the "@import" tab and paste it at the very top of the file.

   5. Now add the "font-family" names below: */

/* Profile font -------------------------------- */

@font-face {
  font-family: "profile-font";
  src: url("../fonts/VoyadoDisplay-Medium.woff2") format("woff2"),
    url("../fonts/VoyadoDisplay-Medium.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

/* Voyado text font ---------------------------- */

@font-face {
  font-family: "standard-font";
  src: url("../fonts/VoyadoText-Regular.woff2") format("woff2"),
    url("../fonts/VoyadoText-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "standard-font";
  src: url("../fonts/VoyadoText-Medium.woff2") format("woff2"),
    url("../fonts/VoyadoText-Medium.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

:root {
  /* Font names */
  --main-font: "standard-font", sans-serif;
  --title-font: "profile-font", sans-serif;
  --portal-header-font: "profile-font", sans-serif;
}

body {
  font-family: var(--main-font);
  font-size: 15px;
  line-height: 1.3;
  color: var(--gray-1000);
}


h1 {
  font-family: var(--title-font);
  font-size: 26px;
  font-weight: bold;
  margin: 1.7em 0 1em;
  text-transform: none;
}

h2 {
  font-family: var(--title-font);
  font-size: 22px;
  font-weight: bold;
  margin: 1.7em 0 1em;
  text-transform: none;
}

h3 {
  font-family: var(--main-font);
  font-size: 18px;
  font-weight: bold;
}

h4,
h5,
h6 {
  font-family: var(--main-font);
  font-size: 16px;
  font-weight: bold;
}



.portal-header h1 {
  font-family: var(--portal-header-font);
}

/* Main background color for various elements */
body,
.toolbar,
.portal-publications a,
#search-container {
  background-color: var(--main-bg-color);
}

/* Color for icons and landing page topic cards */
.publication-icon,
.toc-count {
  background-color: var(--main-icon-color) !important;
}

/* * * * * * * * * * * * * * * *
 *        PORTAL PAGE          *
 * * * * * * * * * * * * * * * */

/* Landing page search bar */

/* Hide Landing Page image */
.portal-header::after {
  background: none;
}

/* Instead of image color landing page header with linear gradient */
.portal-header {
  height: 400px;
  background: linear-gradient(
    45deg,
    var(--landing-page-gradient-left) 35%,
    var(--landing-page-gradient-right) 100%
  );
}

.portal-header h1 {
  margin-top: 50px;
}

/* Search bar animation and some rounding */
.portal-header #search {
  border-radius: 4px 4px 4px 4px;
  box-shadow: none;
  transition: box-shadow 0.2s ease-in-out;
  -moz-transition: box-shadow 0.2s ease-in-out;
  -webkit-transition: box-shadow 0.2s ease-in-out;
}

.portal-header #search:hover {
  box-shadow: 0 0 3px 1px #f8f8ff;
}

/* Landing page search button color and animation */
.portal-header .portal-search button.btn {
  background-color: var(--landing-page-search-btn-color);
  opacity: 0.75;

  transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -webkit-transition: opacity 0.3s ease-in-out;

  margin-left: 5px;
  border-radius: 4px 4px 4px 4px;
}

.portal-header .portal-search button.btn:hover {
  opacity: 1;
}

.portal-contents {
  padding: 30px 30px 0 30px;
  border-radius: 10px 10px 10px 10px;
}

/* Color link hover featured content */
.publication-contents a:hover {
  color: var(--link-hover-color);
}

/* Color for "Show more" text on Landing page */
.publication-contents a.more-toc:hover {
  color: var(--link-hover-color);
}

/*  */
.portal-single-publication a {
  border-radius: 8px 8px 8px 8px;
}

/* Landing page topic card content */
.cat-panel-1:before {
  content: "\f02d";
}

/* Push featured content down */
.featured-content-label {
  margin-top: 400px;
}

div.languages {
  position: fixed;
  bottom: 30px;
  left: 85%;
}

div.languages button {
  opacity: 0.5;

  background-color: var(--main-bg-color);
  border-radius: 6px 6px 6px 6px;

  transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -webkit-transition: opacity 0.2s ease-in-out;
}

div.languages button:hover {
  opacity: 0.9;
}

/* * * * * * * * * * * * * * * *
 *          GENERAL            *
 * * * * * * * * * * * * * * * */

/* TODO: Add comments */
.site-sidebar {
  background-color: #dad6d6;
}
a:hover {
  color: var(--link-hover-color);
}

article a {
  color: var(--link-color);
  text-decoration: underline;
}

#bottom-pager a {
  background-color: var(--main-bg-color);
  color: var(--link-color);

  letter-spacing: 1px;

  font-weight: bold;

  border-radius: 10px 10px 10px 10px;
}

#bottom-pager a:hover {
  background-color: var(--btn-color);
  color: var(--btn-text-color);
}

.toolbar {
  opacity: 1;
  transition: none;
  box-shadow: none;
}

/* Hover animation in toolvar */
.toolbar a {
  display: inline-flex;
  transition: transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out;
  -webkit-transition: transform 0.3s ease-in-out;
}

.toolbar a:hover {
  transform: scale(1.1);
}

/* Remove ugly hover effect and add correct color (links) */
a:focus {
  outline: none;
  text-decoration: none;
  color: var(--link-hover-color);
}

.procedure > li::before {
  background-color: var(--btn-color) !important;
}

div.table {
  margin-top: 5px;
}

/* Admonitions */

.warning,
.note,
.important,
.caution,
.notice,
.tip {
  /* background-color: var(--sand-100); */
  background-color: var(--sand-100);
  border-radius: var(--border-radius-medium);
  border: 1px solid var(--gray-200) !important;
  padding-left: 24px;
}

.warning::before,
.note::before,
.important::before,
.caution::before,
.notice::before,
.tip::before {
  font-size: 2.5em;
  transform: scale(0.7);
  top: 35%;
  left: 10px;
}

.note::before {
  color: var(--note-icon-color);
}

.caution::before {
  color: var(--note-icon-color);
  /* color: var(--caution-icon-color); */
}

.warning::before {
  color: var(--note-icon-color);
  /* color: var(--warning-icon-color); */
}

.warning.danger::before {
  color: var(--note-icon-color);
  /* color: var(--danger-icon-color); */
}

.important::before {
  color: var(--note-icon-color);
  /* color: var(--important-icon-color); */
}

.notice::before {
  color: var(--note-icon-color);
  /* color: var(--notice-icon-color); */
}

.tip::before {
  /* color: var(--tip-icon-color); */
}

/* Turn off the Note/Warning/Caution title*/
.warning h3, .note h3, .important h3, .caution h3, .notice h3, .tip h3 {
    display: none;
}

/* When Note/Warning/Caution title is turned off, text padding needs to be tweaked*/
.warning, .note, .important, .caution, .notice, .tip {
    padding: 26px 18px 2px 54px;
}

.featured-content-label {
  display: none;
}

.portal-contents featured-content {
  display: none;
}

.portal-contents .inner {
  display: none;
}

/* LEFT-NAV */

.site-sidebar-header {
  text-align: left;
  padding: 8px 20px;
}

.site-sidebar-header a {
  pointer-events: none;
}

.theme1 .site-sidebar .logo {
  padding: 0;
  width: 180px;
  max-width: 180px;
  margin: 20px 0;
}

.site-sidebar {
  width: 280px;
}

.site-sidebar-search {
  padding: 0 16px;
}

.site-sidebar-search input {
  height: 40px;
  padding: 0 8px;
}

input[type="text"] {
  color: var(--gray-1000);
  font-size: 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-small);
  padding: 0 14px;
}

.toc > li > .topic-link > .glyphicon {
  margin-top: 4px;
  right: 8px;
}

.nav-site-sidebar {
  padding: 0 0 0 16px;
  width: 280px;
}

.nav-site-sidebar li a {
  color: var(--gray-1000);
  font-size: 15px;
  margin-bottom: var(--spacing-left-menu);
  border-radius: var(--border-radius-medium);
  transition: none;
  line-height: 1.2;
  padding: 4px 12px; /* Affects spacing of menu items, first = vertical */
}

.site-sidebar ul > li > ul > li {
  padding: 0 0 0 26px;
}

.nav-site-sidebar li a:focus,
.nav-site-sidebar li a:hover {
  color: var(--gray-1000);
  background: var(--gray-100);
}

.nav-site-sidebar ul .active > a {
  font-weight: normal;
}

.nav-site-sidebar .active > a {
  color: var(--white);
  background-color: var(--cherry);
}

/* Padding of the menu items depending on level*/
.nav-site-sidebar ul ul a{
	padding-left:15px
}
.nav-site-sidebar ul ul ul a{
	padding-left:15px
}

/* Wrap of text on menu items*/
.nav-site-sidebar .topic-link{
    position: relative;
    padding-right: 30px;
}

/* Scrollbar styles (webkit only) */
.site-sidebar::-webkit-scrollbar {
  width: 7px;
  background-color: var(--white);
}

.site-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--gray-100);
  border: 2px solid var(--gray-100);
  border-radius: 5px;
}

/* FOOTER */
.theme2 .site-footer{
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    width: 500px;
    float: left;
}


/* FORMS */

input:focus {
  outline: none !important;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 2px var(--white), 0px 0px 0px 4px var(--gray-800) !important;
  -webkit-box-shadow: 0px 0px 0px 2px var(--white),
    0px 0px 0px 4px var(--gray-800) !important;
  border: 1px solid var(--gray-200) !important;
}

input[type="text"]::placeholder {
  color: var(--gray-500);
}

/* MAIN CONTENT */
@media (min-width: 768px) {
  .site-content {
    width: calc(100vw - 280px);
    margin-left: 280px;
  }
}

.theme1.page-toc main article {
    padding-left: 9%;
}
  
.toolbar {
  padding: 24px;
}

.toolbar a {
  transition: none;
}

.toolbar a:hover {
  transform: none;
}

.theme1 .section-nav.nav li.active > a {
  color: #388988;
}

.theme1 .section-nav.nav > li.active > a:before {
  background: #388988;
}

.section-nav.nav > li:first-child a {
  padding: 8px 16px;
  font-style: normal;
}

.section-nav.nav {
  font-size: 1.2em;
  font-style: normal;
}

.section-nav.nav > li a:focus,
.section-nav.nav > li a:hover {
  opacity: 1;
}

/* LIST OF TOPICS IN A SECTION */

.section-toc .topic-link, .relationship-toc .topic-link{
    font-size: 1em;
}

.section-toc li{
    padding-top: 10px;
}


/* SPECIAL FORMATTING FOR TOPIC HEADINGS IN THE TOC */

.topic-link.section.topichead {
  font-weight: bold;
  color: var(--black);
  /* background-color: var(--white); */
  padding: 10px 15px 2px 2px; /* top, right, bottom, left */
}

/* TABLES */

table {
	width: 100%;
}
table td, table th {
    border: 1px solid black;
}
.rules-rows td, .rules-rows th {
    border-width: 1px;
    border-color: #ccc;
    padding: 1px;
}

th {
  background: #f0f0ef !important;
  border: none !important;
}

td,
th {
  vertical-align: top !important;
  padding: 16px 24px !important;
}

ul.itemizedlist > li p {
  margin-bottom: 8px;
}

ul.version-menu.sm.sm-simple {
  position: absolute;
  left: 300px; 
  top: 25px;           
}

/* SEARCH RESULT */

.searchresultitem a {
  text-decoration: none;
}

.searchresultsnippet {
  color: var(--gray-1000);
}

.search-result-breadcrumbs {
  color: var(--gray-500);
}

.searchresultitem.selected-searchresultitem {
  background-color: transparent;
  border-radius: 0;
}

li.searchresultitem {
  border: none;
  padding: 0;
}

h3.searchresulttitle {
  text-decoration: underline;
  font-size: 22px;
}

/* PAGINATION */

#bottom-pager a {
  letter-spacing: 0;
  padding: 0 16px;
  border-radius: 4px;
  height: 40px;
  line-height: 40px;
  /* Added to reduce the bottom margin */
  margin: 0px;
}

#bottom-pager a:hover {
  background-color: var(--aqua-700);
}

#bottom-pager {
  display: none;
}

/* CODE 
  Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/

.hljs {
  background: #23241f !important;
  color: #f8f8f2 !important;
}

.hljs-tag,
.hljs-subst {
  color: #f8f8f2 !important;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2 !important;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff !important;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e !important;
}

.hljs-strong {
  font-weight: bold !important;
}

.hljs-emphasis {
  font-style: italic !important;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672 !important;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef !important;
}

.hljs-params,
.hljs-title.class_,
.hljs-class .hljs-title {
  color: #f8f8f2 !important;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74 !important;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e !important;
}

.external-top-nav-link {
  font-size: 16px !important;
}

/* CODE CUSTOM STYLES */

.hljs {
  padding: 24px !important;
  border-radius: var(--border-radius-medium) !important;
}

.paligocode-wrapper button.btn-primary {
  border-radius: var(--border-radius-small) !important;
  background: #fff;
  font-size: 16px;
  border: none;
  color: var(--gray-1000);
  top: 10px !important;
  right: 10px !important;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
}

code {
  background-color: var(--light-blue);
  color: var(--note-icon-color);
  border-radius: var(--border-radius-medium);
  padding: 15px 18px 15px 18px;
  display: block;
  border: 1px solid #c7dbe8 !important;
}

/* Thumbnails */
.mediaobject.img-thumbnail img {
  width: auto;
  height: auto;
  max-width: 500px;
  max-height: 400px;
  display: table;
}

/* This is the element (picked with ALT+ENTER) used for inline FIELDS, PROPERTIES, API PATHS etc*/
.property {
  background-color: var(--gray-75);
  color: var(--note-icon-color);
  border-radius: 2px;
  padding: 1px 5px 1px 5px;
  font-size: 0.95em;
  border: 1px solid #c7dbe8 !important;
  display:inline-block;
}

/* Styling of programlisting - This is done by putting a para and a programlisting in an informal table
    and then adding a role of "codebox" to the informal table elemment */
.codebox {
  .informaltable {
    width: 100%;
  }
  .informaltable td p {
    margin-bottom: 0px;
    background-color: var( --gray-200);
    border-radius: 4px 0px 0px 0px;
    color: black;
    padding: 7px 7px 5px 8px; /* top, right, bottom, left */
  }
  .paligocode-wrapper .btn {
    top: -34px !important;
    right: -2px !important;
    background-color: inherit;
    border-color: var( --gray-200);
  }
  pre {
    border-radius: 0px 0px 4px 4px !important;
  }
}

/* Formatting for deprectaed sections marked with role = "deprecated" */
.deprecated {
  padding: 2px 14px;
  background-color: var(--gray-75);
  border: 1px solid var(--cherry);
}

/* START special formatting for shopify accelerated onboarding page*/
/* The UUID here is the one for that specific topic / article */
#UUID-9ae14f66-c507-f895-ffa0-4cd323b7fb66 {
  .warning,
  .note,
  .important,
  .caution,
  .notice {
    background-color: var(--coral-50);
  }

  .tip {
    background-color: #E9EADE;
    border-radius: 10px;
    border: 1px solid var(--gray-200) !important;
    padding-left: 24px;
  }
  .tip::before {
    transform: scale(0);
    vertical-align: 0em;
  }
  .inlinemediaobject {
    vertical-align: 0.1em;
  }
  a.link {
    color: #2D6E6D;
    font-weight: bold;
  }
  .guibutton a.link{
    background-color: #2D6E6D;
    color: #fff;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 4px;
  }
  .guibutton a.link:hover {
    background-color: #378382;
  }
  h2 {
    padding-top: 18px;
    padding-bottom: -14px;
  }
  h2.title {
    font-size: 30px;
    @media (min-width: 540px ) {
        font-size: 35px;
	  } 
  }
  h3 {
    font-size: 20px;
    padding-top: 18px;
    padding-bottom: -14px;
  }
}
/* END special formatting for shopify accelerated onboarding page*/