:root {
  --primary-color: #448844;
  --primary-text: #fff;
  --secondary-color: rgb(45, 112, 189);
  --secondary-text: #fff;
  --text-color: #444;
  --primary-color-100: #def3de;
  --line-color: #ddd;
  --light-color: #f0f0f0;
  --light-text: #555;
  --sidebar-width: 250px;
  --background-color: rgb(245,245,245);
}

html {
  /*
  background-position: top left;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: linear-gradient(to top right, var(--background-color), white);
  */
  background: var(--background-color);
}

body, html { height: 100%; min-height: 100%;  }

body {
  font-family: Helvetica, Arial, sans-serif;
  /* font-family: AdunaWeb, Arial, Helvatica, sans-serif; */
  /* "Segoe UI", Arial, Helvetica, sans-serif; */
  font-weight: 400;
  font-size: 16px;
  color: var(--text-color);
}

#navdrawer {
  position: fixed !important;
  left: 0;
  top: 0;
  height: 100%;
  width: 250px;
  z-index: 3;
  display: none;
  overflow: auto;
}

footer {
  font-size: smaller;
}

.a-background-image {
  background-position: center;
  background-size: cover;
}

.a-text-opacity {
  opacity: 75%;
}

.a-primary-gradient {
  background-color: #16ca88;
  color: white;
  background-image: linear-gradient(150deg, #20d662 20%,#107e2b 100%);
}

.a-text-primary-gradient {
  background-color: #16ca88;
  color: transparent!important;
  background-image: linear-gradient(150deg, #20d662 20%,#107e2b 100%);
  -webkit-background-clip: text;
}

h1 { font-weight: 700; font-size: 3em;  }
h2 { font-weight: 700; font-size: 2.5em;  }
h3 { font-weight: 700; font-size: 2em;  }
h4 { font-weight: 700; font-size: 1.5em;  }

.w3-jumbo { font-size: 128px !important; font-weight: 900; line-height: 100%; }


.a-divider {
  width: 100%;
  background: gray;
  height: 4px;
  margin: 32px 0px 32px 0px;
}

.a-divider-small {
  width: 200px;
}


.a-header {
  vertical-align: middle;
  font-size: smaller;
  font-weight: 500;
  border-bottom: 1px solid #eee;
  color: var(--text-color) !important; 
  _background-color: var(--text-color) !important;
  _background-color: #fafafa !important;
}

.w3-padding-0 { padding: 0px; }
.w3-margin-0 { margin: 0px; }

.a-avatar {
  display: inline-block;
}

.a-avatar * {
  vertical-align: middle;
  display: inline-block;
}

.w3-light {
  background: var(--light-color);
  color: var(--light-text)
}

.w3-text-light {
  color: var(--light-color)
}

.w3-text-default {
  color: var(--text-color)
}

.a-timeline {}

.a-strong {
  font-weight: bold;
}

.a-active {
  font-weight: bold;
}

.a-page-header {}

.a-page-header h1 {}

.a-ul {
  list-style-position: inside;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.a-ul-list li {
  padding: 0;
  margin: 0;
} 


.a-dl {}

.a-dl dd {
  padding: 0;
  margin: 0 0 8px 8px;
}

.a-dl dt {
  font-weight: bold;
  font-size: smaller;
  text-transform: uppercase;
}

.a-ul li {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table td {
  border-top: 1px solid #ddd;
}

.w3-primary {
  background: var(--primary-color);
  color: var(--primary-text);
}

.w3-secondary {
  background: var(--secondary-color);
  color: var(--secondary-text);
}

.w3-text-primary {
  color: var(--primary-color);
}

.w3-text-standard {
  color: var(--primary-color);
}

.w3-button {
  border-radius: 8px;
}

.menu-vertical ul {
  padding: 0px 0px 0px 16px;
  margin: 0px;
}

.menu-vertical li {
  list-style-type: none;
}

.menu-vertical a {
  text-decoration: none;
  color: var(--text-color);
}

.menu-vertical .groupheader {
  font-weight: bold;
}

.menu-vertical .dropdown {
  margin-top: 16px;
}

ul.a-breadcrumbs {
  padding: 0;
  margin: 0;
  font-size: smaller;
}

.a-breadcrumbs li {
  display: inline;
}

.a-breadcrumbs li a {
  display: inline;
}

.a-breadcrumbs li a::after {
  content: "\276F";
  font-size: smaller;
  padding: 0px 8px 0px 8px;
}

th {
  text-align: left;
}

/* General styles */

.table-of-contents {
  border: 1px solid #eee;
  background: #fefefe;  
  padding: 16px;
  max-width: 500px;
}

.table-of-contents.toc {
}

.table-of-contents .toctitle {
  display: none;
  font-weight: bold;
}

.table-of-contents ol {
}

.table-of-contents .level-1::before { content: "-" }
.table-of-contents .level-1 { margin-left: 20px; }
.table-of-contents .level-2::before { content: "-" }
.table-of-contents .level-2 { margin-left: 40px; }

.table-of-contents>ol {
}

.table-of-contents ol ol {
}

.table-of-contents li {
}

.table-of-contents ol ol li {
}

.toclink {
}

/* Mini TOC */

.table-of-contents.minitoc {
  margin: -1em 0;
}

/* Blog adjustments */

.list-item {
  clear: right;
  display: inline-block;
  width: 100%;
}

/* Anchorlinks */

.headeranchor-link {
  color: inherit;
  display: inline-block;
  outline: none;
  position: relative;
}

.headeranchor-link:before, .headeranchor-link-left:before {
  content: attr(data-icon);
  /* "\2693" Dingsbat anchor */
  display: inline-block;
  margin-left: -1em;
  padding-right: .3em;
  text-align: right;
  text-decoration: none;
  width: 1em;
  position: relative;
  left: -9999px;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease-in-out 0s
}

.headeranchor-link:hover:before, .headeranchor-link.headeranchor-visible--always:before {
  left: 0;
  height: auto;
  opacity: 1;
  visibility: visible;
}

.headeranchor-link--right:hover:before, .headeranchor-link--right.headeranchor-visible--always:before {
  left: calc(100% + 1.1em);
}

.headeranchor-link.no-anchor:hover:before {
  left: -9999px;
  height: 0;
  opacity: 0;
  visibility: hidden;
}

/* Toc links */

.toclink code, .headeranchor-link code {
  background: none;
  color: inherit;
  font-size: inherit;
  vertical-align: inherit;
}

.toclink:hover code, .headeranchor-link:hover code {
  color: inherit;
}

/* The actual timeline (the vertical ruler) */

* {
  box-sizing: border-box;
}

.a-timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */

.a-timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: var(--line-color);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
}

/* Container around content */

.a-timeline .container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */

.a-timeline .container::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  right: -15px;
  background-color: white;
  border: 4px solid var(--line-color);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */

.a-timeline .left {
  left: 0;
}

/* Place the container to the right */

.a-timeline .right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */

.a-timeline .left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid var(--line-color);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--line-color);
}

/* Add arrows to the right container (pointing left) */

.a-timeline .right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid var(--line-color);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--line-color) transparent transparent;
}

/* Fix the circle for containers on the right side */

.a-timeline .right::after {
  left: -16px;
}

/* The actual content */

.a-timeline .content {
  padding: 0px 10px 10px 10px;
  border: 4px solid var(--line-color);
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */

@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .a-timeline::after {
    left: 31px;
  }
  /* Full-width containers */
  .a-timeline .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  /* Make sure that all arrows are pointing leftwards */
  .a-timeline .container::before {
    left: 60px;
    border: medium solid var(--line-color);
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--line-color) transparent transparent;
  }
  /* Make sure all circles are at the same spot */
  .a-timeline .left::after, .a-timeline .right::after {
    left: 15px;
  }
  /* Make all right containers behave like the left ones */
  .a-timeline .right {
    left: 0%;
  }
}

.a-w100 { width: 100%; }


.w3-sidebar-placeholder {
  width: var(--sidebar-width);
}

.w3-sidebar {
  width: var(--sidebar-width);
  /* background: rgba(0,0,0,0.1); */
  background: transparent;

}

.a-round {
  border-radius: 8px;
}

.a-shadow {
  box-shadow:0 4px 10px 0 rgba(0,0,0,0.1),0 4px 20px 0 rgba(0,0,0,0.05)
}

.a-shadow-1 {
  box-shadow:0 1px 0px 0 rgba(0,0,0,0.1), 0 1px 3px 0 rgba(0,0,0,0.05)
}

.a-button-nav {
  padding: 16px;
}

.a-button-nav .w3-bar-item {
  padding-left: 16px;
}


.a-button-nav .w3-button:hover {
  background: rgba(0,0,0,0.1) !important;
}