.CodeMirror {
  animation: fadeIn 0.5s cubic-bezier(0.3, 0, 0.3, 1) 0s 1 forwards;
  border-radius: 4px;
  height: auto;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0; }

.CodeMirror,
.docs-content pre {
  font-family: "Roboto Mono", sans-serif; }

.docs-content pre {
  border: 0;
  font-size: 14px;
  line-height: 24px;
  margin: 0;
  opacity: 0;
  padding: 4px;
  position: relative; }

.docs-content pre code {
  white-space: pre; }

.docs-content .CodeMirror pre {
  font-size: 14px;
  line-height: 24px;
  margin: 0;
  padding: 0;
  opacity: 1; }

.code-container {
  position: relative;
  margin: 20px 0; }

.btn-copy {
  -webkit-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
  background: rgba(255, 255, 255, 0.3);
  height: 36px;
  line-height: 36px;
  padding: 0;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 36px;
  z-index: 1; }
  .btn-copy:hover, .btn-copy:focus {
    background: rgba(255, 255, 255, 0.5); }

.CodeMirror.cm-s-dracula ::-webkit-scrollbar {
  width: 12px; }

.CodeMirror.cm-s-dracula ::-webkit-scrollbar:horizontal {
  height: 12px; }

.CodeMirror.cm-s-dracula ::-webkit-scrollbar-thumb {
  transition: all 0.3s ease-in-out;
  border-radius: 12px; }

.CodeMirror.cm-s-dracula ::-webkit-scrollbar-track {
  background-color: #222426; }

.CodeMirror.cm-s-dracula ::-webkit-scrollbar-track:vertical {
  border-left: 1px solid #303236; }

.CodeMirror.cm-s-dracula ::-webkit-scrollbar-track:horizontal {
  border-top: 1px solid #303236; }

.CodeMirror.cm-s-dracula ::-webkit-scrollbar {
  background-color: #222426; }

.CodeMirror.cm-s-dracula ::-webkit-scrollbar-thumb {
  background-color: #666;
  border: 1px solid #222426; }

.CodeMirror.cm-s-dracula ::-webkit-scrollbar-thumb:hover {
  background-color: #888; }

.CodeMirror.cm-s-dracula ::-webkit-scrollbar-corner {
  background-color: #222426; }