body, html {
            background-color: #ebebeb;
            font-family: "Graphik",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
        }
        .open-menu {
            display: none;
        }
        .top-nav {
            position: relative;
            z-index: 1;
            background-color: #0e151d;
            top: 0;c
            height: 75px;
            width: 100%;
            display: flex;
            align-items: center;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: 0.5s;
        }
        .g-s-mtitle {
            color: rgb(50, 50, 50);
            font-size: 2rem;
        }
        .action-button {
            width: auto;
            display: flex;
            margin-top: 50px;
            justify-content: center; 
        }
        .edit {
            padding: 12px;
            border-radius: 3px;
            color: #fff;
            font-size: 1rem;
            cursor: pointer;
            margin: 0 10px;
            border: none;
            background-color: #00b47a;
        }
        .support {
            padding: 12px;
            cursor: pointer;
            margin: 0 10px;
            border-radius: 3px;
            color: #fff;
            font-size: 1rem;
            border: none;
            background-color: #0e151d;
        }
        .smallerbg {
            height: 40%;
            width: 100%;
            display: none;
            background: url('../../images/bgcomponents/Moon.png') 120% 120% no-repeat, url('../../images/bgcomponents/stars.png') center top no-repeat;
            background-size: 300px, cover;
            /*display: flex;*/
            justify-content: center;
            align-items: center;
        }
        .versions-control {
            padding: 10px 5%;
            width: 90%;
            background-color: #ebebeb;
            border-bottom: 1px solid #bbb;
        }
        .versions-control select {
            width: auto;
            height: 30px;
            color: #585858;
            padding: 0 20px;
            border-radius: 5px;
            border: 1px solid #bbb;
        }
        .smallerbg a {
            font-size: 40px;
            color: white;
            font-weight: bold;
        }
        .api-intro {
            height: auto;
            width: 60%;
            padding: 20%;
            padding-top: 5%;
            padding-bottom: 5%;
            color: #2c3e50;
            font-size: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .api-panel-right .api-intro {
            height: auto;
            width: 90%;
            padding: 5%;
            color: #2c3e50;
            font-size: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .api-intro .intro-title {
            font-size: 35px;
            padding-bottom: 20px;
            font-weight: normal;
        }
        .api-panel-right .mini-api-intro {
            height: auto;
            width: 100%;
            color: #2c3e50;
            font-size: 20px;
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }
        o {
            color: #ff0000;
        }
        g {
            color: #00b47a;
        }
        /*a.table-val {
            color: #585858;
            padding: 2.5px;
            background-color: #ebebeb;
            border: 1px solid #585858;
            border-radius: 5px;
        }*/
        td c {
          padding: 2.5px;  
        }
        .mini-api-intro .intro-title {
            font-size: 30px;
            padding-bottom: 20px;
            font-weight: normal;
        }
        .mini-api-intro a {
            font-size: 18px;
            padding-bottom: 20px;
        }
        .api-intro a {
            font-size: 18px;
            padding-bottom: 20px;
        }
        .api-intro hr, hr {
            border: none;
            height: 2px;
            width: 100%;
            background-color: #bbb;
        }
        .api-desc {
            width: 60%;
            font-size: 18px;
            color: #585858;
        }
        .api-panel-right .api-desc {
            width: 90%;
            padding-bottom: 100px;
            text-align: left;
            color: rgb(50, 50, 50);
        }
        .api-intro a {
            color: rgb(50, 50, 50);
        }
        .api-desc b {
            color: #2c3e50;
        }
        .api-desc a {
            font-size: 15px;
            color: rgb(50, 50, 50);
            font-family: "Graphik",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
        }
        .api-desc r {
            color: #fff;
            padding: 5px 10px;
            border-radius: 2px;
            background-color: #00b47a;
            font-weight: bold;
        }
        .end-point {
            height: auto;
            margin-top: 2.5%;
            margin-bottom: 2.5%;
            width: 96%;
            padding: 2%;
            border-radius: 6px;
            overflow-x: auto;
            border: 1px solid #2c3e50;
            background-color: #26496c;
            /* border-radius: 5px; */
            /* box-shadow: 0 3px 8px 0 rgb(0 0 0 / 3%); */
            /* color: #2c3e50; */
            text-align: left;
            text-decoration: none;
            word-break: break-word;
        }
        .login-box {
            width: 40%;
            padding: 25px 5%;
            height: auto;
            display: flex;
            border-radius: 5px;
            margin: 30px 0;
            border: 1px solid rgba(66, 66, 66, 0.3);
            box-shadow: rgb(0 0 0 / 6%) 0px 2px 6px 0px;
            flex-direction: column;
            justify-content: space-between;
        }
        .login-box input {
            height: 40px;
            outline: none;
            width: auto;
            margin: 10px 0;
            padding: 0 5%;
            border: 1px solid #0e151d;
            border-radius: 5px;
            color: rgb(50, 50, 50);
            -webkit-box-shadow: 0px 0px 5px 0px rgba(44,62,80,0.56);
            -moz-box-shadow: 0px 0px 5px 0px rgba(44,62,80,0.56);
            box-shadow: 0px 0px 5px 0px rgba(44,62,80,0.56);
        }
        .login-box a {
            color: rgb(50, 50, 50);
            line-height: 25px;
            font-family: Roboto-Regular, sans-serif;
            font-size: 16px;
        }
        .log-btn-group {
            width: auto;
            display: flex;
            justify-content: flex-end;
            margin-top: 10px;
        }
        a.dev-login {
            background-color: #fff;
            color: rgb(50, 50, 50);
            border: none;
            font-size: 13px;
            padding: 10px;
            outline: none;
            text-decoration: none;
            cursor: pointer;
        }
        a.dev-signup {
            cursor: pointer;
            background-color: #0e151d;
            color: #fff;
            font-size: 13px;
            padding: 10px;
            border-radius: 3px;
            text-decoration: none;
            border: none;
            outline: none;
        }
        .end-point b {
            font-size: 15px;
            line-height: 25px;
            font-family: "Graphik",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
            font-weight: normal;
            color: #fff;
        }
        .code-cont {
            height: auto;
            margin-top: 2.5%;
            margin-bottom: 2.5%;
            width: 100%;
            /* padding: 2%; */
            border: 1px solid #0e151d;
            background-color: #2c3e50;
            border-radius: 10px;
            overflow:hidden;
            box-shadow: 0 3px 8px 0 rgb(0 0 0 / 3%);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .code-cont .code-title {
            padding: 10px 15px;
            color: white;
            font-size: 13px;
            background-color: #0e151d;
        }
        .api-panel {
            width: 100%;
            height: auto;
            display: flex;
        }
        .api-panel .api-panel-left {
            background-color: #ebebeb;
            width: 18%;
            height: 650px;
            padding: 1% 1%;
            position: sticky;
            top: 0;
            display: flex;
            overflow-y: scroll;
            flex-direction: column;
            align-items: flex-start;
        }
        .api-panel .api-panel-left b {
            color: #222222;
            font-size: 15px;
            font-weight: bold;
            padding: 10px 0;
        }
        .api-panel-left-tabs {
            padding: 7.5px 10%;
            margin: 2.5px 0;
            width: 80%;
            color: #585858;
            text-decoration: none;
            cursor: pointer;
            border-radius: 5px;
        }
        .api-panel-left-tabs:hover {
            background-color: #d7d7d7;
        }
        .api-panel-left-tabs.active {
            background-color: #00b47a52;
            color: #00b47a;
            font-weight: bold;
        }
        .api-panel .api-panel-right {
            width: 80%;
            height: auto;
            background-color: white;
        }
        .desc {
            height: auto;
            width: 90%;
            padding: 5%;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .desc:nth-child(even) {
            flex-direction: row;
        }
        .desc:nth-child(odd) {
            flex-direction: row-reverse;
        }
        .desc-left {
            display: flex;
            flex-direction: column;
            width: 40%;
            line-height: 30px;
            word-spacing: 10px;
            justify-content: flex-start;
            font-size: 15px;
            color: #2c3e50;
        }
        .desc-left a {
            font-size: 20px;
            color: #2c3e50;
            font-weight: bold;
        }
        .desc-right {
            height: auto;
            width: 40%;
            display: flex;
            justify-content: flex-end;
        }
        .create-acct {
            height: 50px;
            width: 150px;
            border: 2px solid #2c3e50;
            background: transparent;
            color: #2c3e50;
            margin-top: 50px;
            border-radius: 5px;
            font-size: 15px;
            cursor: pointer;
            font-weight: normal;
        }
        .create-acct:hover {
            opacity: 0.7;
        }
        .top-nav-middle {
            width: 60%;
        }
        .example-cont {
            display: flex;
            flex-direction: column;
            width: 60%;
            justify-content: flex-start;
        }
        .example-cont r {
          color: white;
          padding: 5px;
          width: 40px;
          background-color: #00b47a;
          border-radius: 2.5px;
          font-weight: lighter;
          font-size: 12px;
        }
        
        .example-cont label {
          color: white;
          padding: 5px;
          width: 40px;
          background-color: #2c3e50;
          border-radius: 2.5px;
          font-weight:lighter;
          font-size: 12px;
        }
        
        .example-cont o {
          color: #ff0000;
        }
        .example-cont a {
            color: #2c3e50;
            font-size: 15px;
            font-weight: bold;
            line-height: 40px;
        }
        .example-cont strong {
            color: #2c3e50;
            font-size: 25px;
            line-height: 80px;
            padding-top: 100px;
        }
        .example-code {
            height: auto;
            /* margin-top: 2.5%; */
            /* margin-bottom: 2.5%; */
            width: 96%;
            padding: 2%;
            overflow-x: auto;
            /* border: 1px solid #0e151d; */
            background-color: #0e151d;
            box-shadow: 0 3px 8px 0 rgb(0 0 0 / 3%);
            color: #2c3e50;
            text-align: left;
            word-break: break-word;
        }
        .example-cont c, td {
            font-size: 15px;
            font-weight: normal;
        }
        .example-code b {
            font-size: 13px;
            line-height: 25px;
            font-family: var(--md-code-font,SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace);
            font-weight: normal;
            color: #fff;
        }
        .example-code::-webkit-scrollbar {
            height: 5px;
            width: 5px;
            background-color: #0e151d;
        }
        .example-code::-webkit-scrollbar-thumb {
            background-color: #2c3e50;
        }
        .example-code pre {
            counter-reset: line;
            line-height: 1.5;
            color: rgb(214, 222, 235);
            font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
        }
        .example-code pre span:before {
          counter-increment: line;
          content: counter(line);
          display: inline-block;
          padding: 0 .5em;
          font-family: monospace;
          margin-right: .5em;
          color: #888;
        }
        
        .example-code pre .comments {
          color: #888;
        }
        .example-code pre .variable {
          color: darkturquoise;
        }
        .example-code pre span .column {
          color: #a376a3;
        }
        .example-code pre span .link {
            color: #c8e35a;
        }
        .example-code pre span .echo {
            color: pink;
        }
        .example-code pre span .function {
            color: #4e95bf;
        }
        .example-code pre span .false {
            color: rgb(255, 88, 116);
        }
        table {
            border-collapse: separate;
            width: 100%;
            margin-bottom: 1rem;
            border-spacing: 0;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #e9e9e9;
            color: #212529;
            font-size: 15px;
            margin-top: 5%;
        }
        thead tr {
            background-color: white;
            /*border-bottom: .25rem solid #dee2e6;
            border-top: .125rem solid #dee2e6;*/
            height: 50px;
        }
        thead th, th {
            text-align: left;
            padding: 10px;
        }
        tbody tr {
            /*border-top: .125rem solid #dee2e6;*/
            height: 50px;
            text-align: left;
            cursor: pointer;
        }
        tbody td {
            text-align: left;
            font-size: 13px;
        word-break: break-word;
            padding: 10px;
        }
        tbody tr:nth-child(odd) {
            background-color: rgb(239 249 249);
        }
        tbody tr:hover {
            background-color: rgb(247 249 249);
        }
        
        /*.example-code {
            border: 1px solid #ccc;
        }*/
        .tip { 
            padding: 1.5%;
            width: 97%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            background-color: #e9f7ff;
            border: 1px solid #d0f1fd;
            border-radius: 6px;
            margin: 25px 0;
        }
        .tip a {
            color: #011b33;
            text-rendering: optimizelegibility;
            font-size: 15px;
            font-weight: bold;
            line-height: 20px;
        }
        .tip c {
            color: #011b33;
            text-rendering: optimizelegibility;
            font-size: 15px;
            padding: 10px 0;
            font-weight: normal;
            line-height: 20px;
            text-align: left
        }
        .version-notice { 
            padding: 1.5%;
            width: 57%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            background-color: #e9f7ff;
            border: 1px solid #d0f1fd;
            border-radius: 6px;
            margin: 25px 0;
        }
        .version-notice a {
            color: #011b33;
            text-rendering: optimizelegibility;
            font-size: 13px;
            font-weight: bold;
            line-height: 20px;
        }
        .version-notice c {
            color: #011b33;
            text-rendering: optimizelegibility;
            font-size: 13px;
            font-weight: normal;
            line-height: 20px;
            text-align: left
        }
        .version-notice v {
            color: #00adff;
            text-decoration: underline;
        }
        .dropbtn {
          border: none;
        }
        
        /* The container <div> - needed to position the dropdown content */
        .dropdown1 {
          position: relative;
          display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #fff;
            min-width: 160px;
            border-radius: 0.5rem;
            box-shadow: 0px 5px 23px -12px rgb(88 88 88);
            z-index: 1;
        }
        .dropdown-content1 {
            display: none;
            position: absolute;
            background-color: #fff;
            min-width: 160px;
            border-radius: 0.5rem;
            box-shadow: 0px 5px 23px -12px rgb(88 88 88);
            z-index: 1;
            background-clip: padding-box;
            overflow: hidden;
        }
        /* Links inside the dropdown */
        .dropdown-content a {
          color: black;
          padding: 12px 16px;
          margin: 5px 5px;
          text-decoration: none;
          display: block;
          border-radius: 5px;
          transition: 0.25s;
        }
        
        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #e9f1f5;
        }
        
        /* Show the dropdown menu on hover */
        .dropdown1:hover .dropdown-content {display: block;}
        .dropdown1:hover .dropdown-content1 {display: flex;}
        
        /* Change the background color of the dropdown button when the dropdown content is shown */
        .dropdown1:hover .dropbtn {background-color: #2c3e507d;border-radius:5px;}
        
        @media only screen and (max-width: 600px) {
            table {
                width: 100%;
            }
            .top-nav {
                position: sticky;
                z-index: 1;
                background-color: #0e151d;
                top: 0;
                height: 8%;
                width: 100%;
                display: flex;
                align-items: center;
                display: flex;
                align-items: center;
                justify-content: space-between;
                transition: 0.5s;
            }
            .api-intro .intro-title {
                font-size: 22px;
                padding-bottom: 10px;
                font-weight: normal;
            }
            .mini-api-intro .intro-title {
                font-size: 20px;
                padding-bottom: 5px;
                font-weight: normal;
            }
            .api-desc a, .api-desc {
                font-size: 13px;
            }
            .top-nav-right .login {
                padding: 7px 20px;
            }
            .end-point b {
                font-size: 13px;
                line-height: 20px;
                font-family: "Graphik",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
                font-weight: normal;
                color: #fff;
            }
            .smallerbg {
                height: 30%;
                width: 100%;
                background: url(../../images/bgcomponents/Moon.png) 120% 120% no-repeat, url(../../images/bgcomponents/stars.png) center top no-repeat;
                background-size: 150px, cover;
                display: none;
                justify-content: center;
                align-items: center;
            }
            .smallerbg a {
                font-size: 25px;
                color: white;
                font-weight: bold;
            }   
            .api-panel .api-panel-left {
                background-color: #ebebeb;
                width: 90%;
                padding: 1% 5%;
                position: fixed;
                top: 15%;
                height: 85%;
                z-index: 99;
                display: none;
                overflow-y: scroll;
                flex-direction: column;
                align-items: flex-start;
            }
            .login-box {
                width: 90%;
                padding: 25px 5%;
                height: 150px;
                display: flex;
                border-radius: 5px;
                margin: 30px 0;
                border: 1px solid rgba(66, 66, 66, 0.3);
                box-shadow: rgb(0 0 0 / 6%) 0px 2px 6px 0px;
                flex-direction: column;
                justify-content: space-between;
            }
            .edit, .support {
                padding: 10px;
                border-radius: 3px;
                color: #fff;
                font-size: 0.9rem;
                cursor: pointer;
                margin: 0 10px;
                border: none;
            }
            .api-panel .api-panel-left.show-bar {
                display: flex;
            }
            .api-panel .api-panel-right {
                width: 96%;
                padding: 2%;
                height: auto;
                background-color: white;
            }
            .intro {
                height: auto;
                width: 80%;
                padding: 10%;
                padding-top: 5%;
                padding-bottom: 5%;
                color: #2c3e50;
                font-size: 13px;
                display: flex;
                align-items: center;
            }
            .example-cont strong {
                color: #2c3e50;
                font-size: 20px;
                line-height: 40px;
                padding-top: 100px;
            }
            .example-code {
                height: auto;
                width: 90%;
                padding: 5%;
                border-radius: 5px;
                color: white;
                text-align: left;
                word-break: break-word;
            }
            .example-code b {
                font-size: 13px;
                color: rgb(214, 222, 235);
                font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
            }
            .example-code pre {
                counter-reset: line;
                line-height: 1.5;
                font-size: 12px;
                color: rgb(214, 222, 235);
                font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
            }
            .example-cont a {
                color: #2c3e50;
                font-size: 15px;
                font-weight: bold;
                line-height: 30px;
            }
            .example-cont {
                display: flex;
                flex-direction: column;
                width: 90%;
                overflow-x: auto;
                justify-content: flex-start;
            }
            .top-nav-mobile-open {
                height: 95%;
                padding: 5% 0;
                width: 60%;
                z-index: 99;
                overflow-y: auto;
                display: flex;
                position: fixed;
                left: -100%;
                background-color: white;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                transition: 0.5s ease-in;
            }
            .top-nav-mobile-open::-webkit-scrollbar {
                display: none;
            }
            .top-nav-mobile-open a {
                font-size: 15px;
                color: #0e151d;
                font-weight: normal;
            }
            
            .top-nav-mobile-open d {
                font-size: 17px;
                color: #0e151d;
                font-weight: normal;
                text-align: right;
                padding: 15px 5%;
                text-decoration: none;
                color: #2c3e50;
                display: block;
                border: none;
                background: none;
                width: 90%;
                font-weight: normal;
                cursor: pointer;
                outline: none;
            }
            .sidenav a, .dropdown-btn {
                padding: 15px 5%;
                text-decoration: none;
                font-size: 13px;
                color: #2c3e50;
                display: block;
                border: none;
                background: none;
                width: 90%;
                font-weight: normal;
                text-align: left;
                cursor: pointer;
                outline: none;
            }
            
            /* On mouse-over */
            .dropdown-container a:hover {
              background-color: #f1f1f1;
            }
            
            .dropdown-container {
                display: block;
                background-color: #fbfbfb;
                padding-left: 5%;
                width: 95%;
            }
            
            /* Optional: Style the caret down icon */
            .fa-caret-down {
              float: right;
              padding-right: 8px;
            } 
            .tip { 
                padding: 2.5%;
                width: 95%;
                display: flex;
                margin: 15px 0;
                flex-direction: column;
                justify-content: flex-start;
                background-color: #e9f7ff;
                border: 1px solid #d0f1fd;
                border-radius: 6px;
            }
            .tip a {
                color: #011b33;
                text-rendering: optimizelegibility;
                font-size: 12px;
                font-weight: bold;
                line-height: 20px;
            }
            .tip c {
                color: #011b33;
                text-rendering: optimizelegibility;
                font-size: 12px;
                font-weight: normal;
                line-height: 20px;
                text-align: left;
            }
            .version-notice { 
                padding: 2.5%;
                width: 85%;
                display: flex;
                margin: 15px 0;
                flex-direction: column;
                justify-content: flex-start;
                background-color: #e9f7ff;
                border: 1px solid #d0f1fd;
                border-radius: 6px;
            }
            .version-notice a {
                color: #011b33;
                text-rendering: optimizelegibility;
                font-size: 12px;
                font-weight: bold;
                line-height: 20px;
            }
            .version-notice c {
                color: #011b33;
                text-rendering: optimizelegibility;
                font-size: 12px;
                font-weight: normal;
                line-height: 20px;
                text-align: left;
            }
            .version-notice v {
                color: #00adff;
                text-decoration: underline;
            }
            .versions-control {
                padding: 1% 5%;
                display: flex;
                width: 90%;
                height: 5%;
                background-color: #ebebeb;
                border-bottom: 1px solid #bbb;
                justify-content: space-between;
                align-items: center;
            }
            .api-intro a {
                font-size: 13px;
                padding-bottom: 20px;
            }
            .open-menu {
                color: #0e151d;
                display: block;
            }
        }