.api-side-bar {
            width: 200px;
            background-color: var(--surface-bg);
            padding: 20px;
            position: fixed;
            height: 100%;
            overflow: auto;
top: 3em;
				margin-right: 10px;
        }
        .api-side-bar a {
            display: block;
            color: var(--text);
            text-decoration: none;
            margin-bottom: 10px;
        }
        .api-side-bar a:hover {
            text-decoration: underline;
        }
        .api-side-bar h3, .nav-bar h4 {
            color: var(--primary);
        }
        .api-container {
            margin-left: 240px;
            padding: 20px;
            max-width: 800px;
margin-top: calc(3em - 20px );

        }
       .api-label {
            display: block;
            margin-top: 10px;
        }
        .input, .button {
            max-width: 100%  !important;
            width: 100% !important;
            padding: 10px !important;
            margin-top: 5px !important;
            margin-bottom: 20px !important;
        }
        .response-container {
            background-color: var(--surface-bg);
            padding: 20px;
            border-radius: 5px;
            overflow-x: auto;
        }
        .api-pre {
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .explanation {
            background-color: var(--surface-bg);
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .explanation p {
            margin: 5px 0;
        }
        .required {
            color: red;
        }
        .url-display {
            background-color: var(--surface-bg);
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            color: var(--primary);
        }

        .json-key    { color: #9cdcfe; }
        .json-string { color: #ce9178; }
        .json-number { color: #b5cea8; }
        .json-boolean { color: #569cd6; }
        .json-null   { color: #c586c0; }
        .json-container {
            background: var(--surface-bg);
            color: var(--text);
            padding: 1em;
            border-radius: 6px;
            white-space: pre;
        }

	@media (max-width: 768px) {
	.api-container {margin-left: 0px !important;
	}
	.api-side-bar{display:none;}
}

.api-dropdown-title{
margin-left: -0.5em;
  margin-bottom: 0.5em;
  cursor: pointer;
}

.api-blob[data-hidden],.json-container[data-hidden]{
display: none;
}

iframe.api-blob {
    border: none;
    width: 100%;
    height: 1000px;
}
img.api-blob {
    width: 100%;
}