html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background:#dedede;
}
main {
    width:100%;
    margin-top:100px
}
header.sticky {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 999;
}
pre {
    border: 1px solid #dedede;
    background: #dede;
}
    pre.result {
        border: 1px solid #dedede;
        background: #dede;
        min-height: 300px;
        white-space: normal;
    }
    textarea.result {
        border: 1px solid #dedede;
        background: #dede;
        min-height: 300px;
        white-space: normal;
    }
.info-header {
    font-style: italic;
    padding: 0px;
    margin: 0px;
    background: #cece;
    padding: 10px;
    margin-top: 40px;
}
h1 {
    position: relative;
    color: #fff;
    background-color: #718BA6;
    margin: 0px 0px 20px 0px;
    padding: 10px 0px;
    text-indent: 10px;
    font-size: 28px;
}
h2 {
    font-size: 26px;
    margin-top:20px;
}
h3 {
    font-size: 26px;
    margin-top: 20px;
}
.api-example {
    max-width: 1200px;
    background: #FFF;
}
textarea {
    width:100%;
    min-height:200px;
}

.chevron {
    position: relative;
    display: block;
    height: 25px; /*Height should be double border thickness*/
    width: 25px;
    float: right;
    margin: 10px 0px;
}

    .chevron::before,
    .chevron::after {
        position: absolute;
        display: block;
        content: "";
        border: 10px solid transparent; /*Adjust chevron size*/
    }
    /*Change the four instances of 'top' below to rotate chevron*/
    /*Use (top/right/bottom/left) where you want the back of the chevron to be*/
    .chevron::before {
        top: 0;
        border-top-color: #198754; /*Chevron Color*/
    }

    .chevron::after {
        top: -2px; /*Adjust thickness*/
        border-top-color: #fff; /*Match chevron background colour*/
    }

.viewJson div.json {
    display: none;
}

.resultWrapper {
    margin: 40px 0px;
    border: 1px solid #808080;
    padding: 10px;


}
    .resultWrapper .viewJson {
        padding: 10px;
        border: 1px solid #808080;
        cursor:pointer;
    }
    .resultWrapper div {
        font-size: 18px;
        margin:10px 10px;
    }

    .resultWrapper div span {
        color: #565f4e;
        margin-right: 5px;
        text-transform: uppercase;
        font-size: 18px;

    }

nav .navbar-nav li {
    padding: 0px 20px;
    border-right: 1px solid #dedede;
}

nav .navbar-nav li {
    padding: 0px 20px;
    border-right: 1px solid #dedede;
}
    nav .navbar-nav li a,
    nav .navbar-nav li a:hover {
        --bs-text-opacity: 1;
        color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity));
    }


nav .nav-link {
    padding: .5rem 0rem;
}

.home-page-nav .navbar-nav li:first-child {
    display:none;
}
.home-page-nav .navbar-nav li {
    padding: 0px;
}

.home-page-nav .navbar-nav li a {
    padding: .5rem 0rem;
    text-decoration: underline;
    color: blue;
}

@media(max-width:1200px) {


}