/* your custom css */


body {
    font-family: "Mplus 1p";
    font-weight: 400;
    background-color: #f0fff8;;
}


[data-theme="dark"] body {
  background-color: #000f08;;
}


.postHeader h1 {
    margin-left: 0.5em;
}
h2 {
    font-family: "Mplus 1p";
    font-weight: 400;
    
}
.mainContainer ul {
    font-size: 1em;
    list-style-type: disc;
}
.cardContent ul {
    /*display: list-item;*/
    list-style-type: disc;
    margin: 16px 16px 16px 64px;
}

.cardContent li {
   margin: 8px 8px 0px 0px;
}

i {
    color: #00c9bf;
    font-size: 100%;
}


.card {
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: 0.3s;
    padding: 8px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 8px;
    min-height: 240px;
    max-height: 240px;
    position: relative;
    overflow: hidden;
    background-color:#fbfbff;
}



.cardHeader {
    background: linear-gradient(#00c9f7, #00c9bf);
    color: white;
    margin: -8px -8px 0px -8px;
    padding: 4px;
    border-radius: 8px 8px 0px 0px;
    font-size: 1em;
}

.expired .cardHeader  {
    background: linear-gradient(#aaa, #999);
    color: white;
}

.infoCards .card:hover {
    box-shadow: 0px 0px 8px 8px rgba(0,0,0,0.2);
}

.cardContent {
    min-height: 144px;
    max-height: 144px;
    overflow-y: scroll;
    text-align: left;
    font-size: 0.8em;
    padding: 0px;
    margin: 0px;
    background-color: #fbfbff;

}

.cardContent table{
    border: transparent;
    text-align: center;
    width: 96%;
    margin: 2px auto;
}
.cardContent table tr{
    background-color: transparent;
}
.cardContent table tr th{
    text-align: right;
    width: 20%;
    word-wrap: normal;
    padding: 1px;
    font-size: 0.9em;
    border: 0px;
}
.cardContent table tr td{
    padding: 1px;
    background: transparent;
    border: transparent;
    font-size: 0.9em;
    text-align: left;
    
}

.cardFooter {    
    background: #f6f6f6;
    border-top: 1px solid #e6e6e6;
    margin: 0px;
    position: absolute;
    height: 40px;
    bottom: 0px;
    width: 100%;
    padding: 0px;
    margin-left: 0em;
    padding-left: 0em;
    margin-right: 0em;
    padding-right: 0em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
}
.cardTags {
    flex: 5;
    color: #969696;
    display: inline-flex;
    text-align:left;
    font-size: 0.7em;
    text-indent: 0em;
    line-height: 1.5em;
    padding-left:0em;
    margin-left: 1em;
    margin-right: 6em;
    white-space: pre-line;
}

.largeCardTags {
   
    margin-left: 2em;
    margin-right: 2em;
    white-space: pre-line;
}


.cardButton {
    position: absolute;
    flex: 1;
    margin: 0px 10px 0px 0px;
    right: 0px;
    white-space: nowrap;
}

.infoCards{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 10px;

}

.cardContainer {
    max-width: 33%;
    min-width: 300px;
    flex: 1;

}



.cardHeader {
    font-size: 0.9em;
} 

.cardContainer h1, .cardContainer h2, .cardContainer h3, .cardContainer h4, .cardContainer h5 {
    font-size: 1em;
    margin: 4px;
    text-align: left;

}

.largeInfoCardContainer {
    flex: 3;
    flex-wrap: wrap;
    visibility: collapse;
    display: inline-block;
    font-size: 150%;
    overflow-y: visible;
    margin-right: 0.4em;
    max-width: 768px;
}

.largeInfoCardContainer .card {
    overflow-y: visible;
}
.largeInfoCardContainer .cardContent {

    overflow-y: hidden;
    text-align: left;
    margin: 0px;
    margin-bottom: 0em;
    background-color: #fbfbff;

}

.largeInfoCardContainer img {
    text-align: center;
    margin: 0px auto;
}
.largeInfoCardContainer h1, .largeInfoCardContainer h2, .largeInfoCardContainer h3, .largeInfoCardContainer h4, .largeInfoCardContainer h5 {
    font-size: 1.2em;
    margin-top: 12px;
    margin-bottom: 12px;
    text-align: left;
    color: white;
    padding: 14px 14px 14px 28px;
    background: linear-gradient(to left, #00c9f7, #00c9bf);
}

.largeInfoCardContainer h3 {
    font-size: 0.9em;
    margin: 0px 0px 4px 0px;
    padding: 14px 14px 14px 28px;
}

.largeInfoCardContainer h4, .largeInfoCardContainer h5 {
    font-size: 0.8em;
    margin: 0px 0px 4px 0px;
    padding: 7px 7px 7px 28px;    
}


.largeInfoCardContainer .card {
    min-height: none;
    max-height: none;
}

.largeInfoCardContainer .cardContent {
    min-height: none;
    max-height: none;
    background-color: #fbfbff;

}

.largeInfoCardContainer p {
    margin: 20px;
}

.eventContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    margin-top: 0em;
}




.eventListContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

}

.eventListContainer.infoCards {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.wrapper .position ul li {
    line-height: 100%;
    text-indent: 1em;
}

.position {
    text-align: left;
}

td p {
  padding-top: 4px!important;
  padding-bottom:4px!important;
}

.lightBackground {
    /*background-color: #eff8ef;*/
}

.homeSplashFade {
    padding-bottom: 0em;
}

.homeContainer {
    background:linear-gradient(#00C9EB, #00CDB4);
    transition: 10s;
}
[data-theme="dark"] .homeContainer {
    background:linear-gradient(#00393B, #003D34);
    transition: 10s;
}

.homeContainer:hover {
    filter: hue-rotate(30deg);
    transition: 20s;
}
.mainContainer {
    margin-top: 3em;
    padding: 0em; 
    background: #fbfbff;
    border: 1px solid #efefef;;
    border-radius: 8px;
}

.productShowcaseSection {
    padding: 1em;

}
article {
    padding: 2em;
    padding-top: 0em;
    margin: 0.25em;
    background-color: #fbfbff;
    border-radius: 8px;
}

[data-theme="dark"] article {
    background-color: var(--ifm-color-emphasis-0);
}

header {
    padding: 1em;
}

.mainContainer:not(.blogContainer) .wrapper .post,
.blogContainer .posts,
.blogContainer .lonePost {
    padding-top: 0em;
}

.postHeader h1 {
    border-bottom: dotted 1px #00C9EB;
    padding-bottom: 0.4em;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    margin-left: 2em;
    margin-right: 2em;
}
.docs-prevnext .button {
    margin: 1em;
    margin-top: 0em;
}

.blockContent {
    background-color:#fbfbff;
    padding: 1em;
    padding-top: 0em;
    margin-top: 1em;
    border-radius: 8px;
}

[data-theme='dark'] .blockContent {
  background-color:#022;
  padding: 1em;
  padding-top: 0em;
  margin-top: 1em;
  border-radius: 8px;
}

.darkBackground a {
    color: #00C9EB;
}

[data-theme='dark'] a {
    color: #00C9EB;
}

[data-theme='dark'] a:hover {
  color: #ffdd00;
}

[data-theme='dark'] a:visited {
  color: gray;
}


.darkBackground {
  background-color: grey;
}

[data-theme='dark'] .darkBackground {
  background-color: grey;
}
iframe {
    border-radius: 8px;
}

.companySection {
    background-color: #fbfbff;
    text-align: left;
}

.navPusher {
    padding-top: 3em;
}

.docsNavContainer {
    /*background-color: #fbfbff;*/
}

.docsNavContainer nav.toc .navBreadcrumb {

    height: 36px;

  }

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

table {
    margin-left: auto;
    margin-right: auto;    
}

.mainContainer .wrapper .post,
.blogContainer .posts,
.blogContainer .lonePost {
    padding-top: 0em;
    padding-left: 1em;
    padding-right: 1em;

}

.buttonCard a table {
    color: black;
    text-decoration: none;
    text-emphasis-color: black;
}

.buttonCard:hover div {
    z-index:auto;
}

.buttonCard:hover {
    z-index: 1000;
    filter:  hue-rotate(60deg);
    transition: 0.66s;
}

.mainContainer .wrapper table td a,
table a,
td a,
.mainContainer article a,
.cardContent a { 
    text-decoration: none;
    color: #1a0dab;
    font-weight: 500;
}


.mainContainer .wrapper table td a:hover,
table td a:hover,
.mainContainer article a:hover,
.cardContent a:hover {
    text-decoration: underline;
    color: #1a0dab
}
.mainContainer .wrapper table td a:visited,
table td a:visited,
.mainContainer article a:hover,
.cardContent a:visited {
    color: #609
}

.mainContainer .wrapper .postHeader h1, 
.mainContainer .wrapper .post h2,
.mainContainer .wrapper .post h3 {
    font-weight: 400;
}

nav.toc .toggleNav .navGroup h3 {
    background-color: transparent;
}

.nav-footer {
    background-color: #808080;
}

.facebookContainer {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 492px) {
    .largeInfoCardContainer {
        margin-left: 0.4em;
    }

    .facebookContainer {
        width: 100%;
    }
}
@media only screen and (max-width: 739px) {
    p {
        font-size: 0.875em;
    }
    .cardContainer {
        max-width: 100%;
        min-width: 300px;
    }
    .cardHeader{
        font-size: 0.7em
    }
    .facebookContainer {
        width: 95%;
    }
   
}
@media only screen and (min-width: 740px) and (max-width: 1023px) {
    .cardContainer {
        max-width: 50%;
        min-width: 300px;
    }
    .cardHeader {
        font-size: 0.8em
    }
    .facebookContainer {
        width: 90%;
    }

         
}

@media only screen and (max-width: 1023px) {
    .facebookContainer {
        width: 85%;
    }

}

@media only screen and (min-width: 1400px) {
    .facebookContainer {
        width: 85%;
    }

}

@media only screen and (min-width: 1500px) {
    .facebookContainer {
        width: 85%;
    }

}



.gridBlock {
  padding: 0
}

.gridBlock>* {
  box-sizing: border-box
}

.gridBlock .fourByGridBlock img,.gridBlock .threeByGridBlock img,.gridBlock .twoByGridBlock img {
  max-width: 100%
}

.gridBlock .gridClear {
  clear: both
}

@media only screen and (max-width: 735px) {
  .gridBlock .fourByGridBlock {
      flex:1 0 26%
  }
}

@media only screen and (min-width: 736px) {
  .gridBlock {
      display:flex;
      flex-direction: row;
      flex-wrap: wrap
  }

  .gridBlock>* {
      margin: 0 12px
  }

  .gridBlock>:first-child {
      margin-left: 0
  }

  .gridBlock>:last-child {
      margin-right: 0
  }

  .gridBlock .twoByGridBlock {
      flex: 1 0 40%
  }

  .gridBlock .threeByGridBlock {
      flex: 1 0 26%
  }

  .gridBlock .fourByGridBlock {
      flex: 1 0 20%
  }

  h2+.gridBlock {
      padding-top: 20px
  }
}

@media only screen and (min-width: 1400px) {
  .gridBlock {
      display:flex;
      flex-direction: row;
      flex-wrap: wrap
  }
}

.productShowcaseSection {
  padding: 0 10px;
  text-align: center;
  background-color: var(--ifm-color-emphasis-0);
}

.productShowcaseSection.paddingTop {
  padding-top: 20px
}

.productShowcaseSection.paddingBottom {
  padding-bottom: 20px
}

.productShowcaseSection h2 {
  color: #00c9eb;
  font-size: 30px;
  line-height: 1em;
  margin-top: 10px;
  padding: 0px 0;
  text-align: center
}

.productShowcaseSection h3 {
  color: #00c9eb;
  font-size: 20px;
  line-height: 1em;
  margin-top: 00px;
  padding: 20px 0px;
  text-align: center
}

.productShowcaseSection p {
  margin: 0 auto;
  max-width: 560px;
  padding: .8em 0;
  color: #000
}

[data-theme="dark"] .productShowcaseSection p {
  color: #fff
}

.productShowcaseSection .logos {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 20px
}

.productShowcaseSection .logos img {
  max-height: 110px;
  padding: 20px;
  width: 110px
}

@media only screen and (max-width: 735px) {
  .productShowcaseSection .logos img {
      max-height:64px;
      padding: 20px;
      width: 64px
  }
}

.showcaseSection {
  margin: 0 auto;
  max-width: 900px
}

.showcaseSection,.showcaseSection .prose h1 {
  text-align: center
}

.showcaseSection .prose {
  margin: 0 auto;
  max-width: 560px;
  text-align: center
}

.showcaseSection .logos {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center
}

.showcaseSection .logos img {
  max-height: 128px;
  padding: 20px;
  width: 128px
}

@media only screen and (max-width: 735px) {
  .showcaseSection .logos img {
      max-height:64px;
      padding: 20px;
      width: 64px
  }
}

#inquiry {
  background-color: var(--ifm-color-emphasis-100);
}

.nav-footer {
  background: #20232a;
  border: none;
  color: #202020;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  line-height: 24px;
  padding-bottom: 2em;
  padding-top: 2em;
  position: relative
}


.button {
  background-color: #00C9EB!important;
  border: 1px solid #00c9eb;
  border-radius: 3px;
  color: #00c9eb;
  display: inline-block;
  font-size: 18px!important;
  font-weight: 400;
  line-height: 1.2em;
  padding: 10px;
  text-decoration: none!important;
  text-transform: uppercase;
  transition: background .3s,color .3s;
  margin: 10px;
}

.button:hover {
  background: #00c9eb;
  color: #fff
}

[data-theme='dark'] .button {
  color: #00090b!important;
}

h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link {
  opacity: .5;
  transition: none
}



.promoSection {
  display: flex;
  flex-flow: column wrap;
  font-size: 125%;
  line-height: 1.6em;
  position: relative;
  z-index: 99
}

.promoSection .promoRow {
  padding: 10px 0
}

.promoSection .promoRow .pluginWrapper {
  display: block
}

.promoSection .promoRow .pluginWrapper.ghStarWrapper,.promoSection .promoRow .pluginWrapper.ghWatchWrapper {
  height: 28px
}

.promoSection .promoRow .pluginRowBlock {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -2px
}

.promoSection .promoRow .pluginRowBlock .pluginWrapper {
  padding: 0 2px
}

.promoSection .promoRow .pluginRowBlock iframe {
  margin-left: 2px;
  margin-top: 5px
}