.monaco-editor pre {
  background-color: unset !important;
}

.qwebr-editor-toolbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.qwebr-editor-toolbar-left-buttons, .qwebr-editor-toolbar-right-buttons {
  display: flex;
}

.qwebr-non-interactive-loading-container.qwebr-cell-needs-evaluation, .qwebr-non-interactive-loading-container.qwebr-cell-evaluated {
  justify-content: center;
  display: flex;
  background-color: rgba(250, 250, 250, 0.65);
  border: 1px solid rgba(233, 236, 239, 0.65);
  border-radius: 0.5rem;
  margin-top: 15px;
  margin-bottom: 15px;
}

.qwebr-r-project-logo {
  color: #2767B0; /* R Project's blue color */
}

.qwebr-icon-status-spinner {
  color: #7894c4;
}

.qwebr-icon-run-code {
  color: #0d9c29
}

body.quarto-light .qwebr-output-code-stdout {
  color: #111;
}

body.quarto-dark .qwebr-output-code-stdout {
  color: #EEE;
}

.qwebr-output-code-stderr {
  color: #db4133;
}

body.quarto-light .qwebr-editor {
  border: 1px solid #EEEEEE;
}

body.quarto-light .qwebr-editor-toolbar {
  background-color: #EEEEEE;
  padding: 0.2rem 0.5rem;
}

body.quarto-dark .qwebr-editor {
  border: 1px solid #111;
}

body.quarto-dark .qwebr-editor-toolbar {
  background-color: #111;
  padding: 0.2rem 0.5rem;
}

.qwebr-button {
  display: inline-block;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  padding: 0.375rem 0.75rem;
  font-size: .9rem;
  border-radius: 0.25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

body.quarto-light .qwebr-button {
  background-color: #EEEEEE;
  color: #000;
  border-color: #dee2e6;
  border: 1px solid rgba(0,0,0,0);
}

body.quarto-dark .qwebr-button {
  background-color: #111;
  color: #EEE;
  border-color: #dee2e6;
  border: 1px solid rgba(0,0,0,0);
}

body.quarto-light .qwebr-button:hover {
  color: #000;
  background-color: #d9dce0;
  border-color: #c8ccd0;
}

body.quarto-dark .qwebr-button:hover {
  color: #d9dce0;
  background-color: #323232;
  border-color: #d9dce0;
}

.qwebr-button:disabled,.qwebr-button.disabled,fieldset:disabled .qwebr-button {
  pointer-events: none;
  opacity: .65
}

.qwebr-button-reset {
  color: #696969; /*#4682b4;*/
}

.qwebr-button-copy {
  color: #696969;
}

/* Style the code highlight lines */
body.quarto-light .qwebr-editor-highlight-line {
  background-color: lightblue;
}

body.quarto-dark .qwebr-editor-highlight-line {
  background-color: darkblue;
}

/* Style the modal pop-up */

/* The Modal (background) */
.qwebr-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content */
.qwebr-modal-content {
  background-color: #fefefe;
  margin: 5% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

.qwebr-modal-content-code {
  max-height: 50vh;
  min-height: 5vh;
  overflow: scroll;
  border: 1px solid #888;
}

/* The Close Button */
.qwebr-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.qwebr-modal-close:hover,
.qwebr-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.qwebr-download-btn {
  margin-top: 10px;
  text-decoration: none !important;
}

/* Styling to download image that is created */

.qwebr-canvas-image {
  position: relative;
  display: inline-block;
  margin: 10px;
}

.qwebr-canvas-image-download-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
  display: none;
}

figure:hover .qwebr-canvas-image-download-btn {
  display: block;
}

/* Custom styling for RevealJS Presentations*/

/* Reset the style of the interactive area */
.reveal div.qwebr-interactive-area {
  display: block;
  box-shadow: none;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
}

/* Provide space to entries */
.reveal div.qwebr-output-code-area pre div {
  margin: 1px 2px 1px 10px;
}

/* Collapse the inside code tags to avoid extra space between line outputs */
.reveal pre div code.qwebr-output-code-stdout, .reveal pre div code.qwebr-output-code-stderr {
  padding: 0;
  display: contents;
}

body.reveal.quarto-light pre div code.qwebr-output-code-stdout {
  color: #111;
}

body.reveal.quarto-dark pre div code.qwebr-output-code-stdout {
  color: #EEEEEE;
}

.reveal pre div code.qwebr-output-code-stderr {
  color: #db4133;
}


/* Create a border around console and output (does not effect graphs) */
body.reveal.quarto-light div.qwebr-console-area {
  border: 1px solid #EEEEEE;
  box-shadow: 2px 2px 10px #EEEEEE;
}

body.reveal.quarto-dark div.qwebr-console-area {
  border: 1px solid #111;
  box-shadow: 2px 2px 10px #111;
}


/* Cap output height and allow text to scroll */
/* TODO: Is there a better way to fit contents/max it parallel to the monaco editor size? */
.reveal div.qwebr-output-code-area pre {
  max-height: 400px;
  overflow: scroll;
}

iframe.qwebr-output-code-browse {
  width: 100%;

  /*
    TODO: How to make the height automatic according to the widget size,
    or respect the quarto code block options?
  */
  min-height: 500px;
}