/*---------------------------------------------------------------------------*/
/* Extra CSS style-sheet in addition to Bootstrap. */
/*---------------------------------------------------------------------------*/

/* Main content can fill entire screen-width. Padding set in 'base.html' */
.container { max-width: 100%; padding: 0; }

/* Ensure context-menus (right-click) are shown over modal-menus. */
.context-menu { z-index: 1060; }

/* Headings. */
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.1rem; }

/* Extra-small button. */
.btn-xs {
   --bs-btn-padding-y: 0.1rem;
   --bs-btn-padding-x: 0.3rem;
   --bs-btn-font-size: 0.75rem;
   --bs-btn-border-radius: 0.2rem;
}

/* Main nav-bar color for admin user. */
nav.navbar-admin {
   background-color: #ffdee0 !important;
   border-color: pink !important;
}

/* Tooltip when mouse-hover doesn't work and user clicks on info-icon. */
div.tooltip {
   border-radius: 10px;
   padding-inline: 10px;
   padding-block: 5px;
   background-color: black;
   color: white;
   border: 2px solid white;
   opacity: 100%;
   position: absolute;
   white-space: pre-wrap; /* Respect newlines. */
}

/* Table with striped rows. Make <TD> transparent so we can use custom color. */
.table-striped tbody tr td.custom-color {
   background-color: transparent !important;
   box-shadow: none !important;
}

/* Max-width. */
.mw-70 { max-width: 70%; }
.mw-80 { max-width: 80%; }
.mw-90 { max-width: 90%; }
.mw-100 { max-width: 100%; }

/* Images and plots shown in a Bootstrap carousel. */
img.carousel-svg { max-width: 80%; max-height: 100vh; }
img.carousel-image { max-width: 80%; max-height: 100vh; }

/* Carousel prev/next arrows. Move further to the sides. */
.carousel-control-prev, .carousel-control-prev:hover,
.carousel-control-next, .carousel-control-next:hover {
  margin-left: -5%; margin-right: -5%;
}

/* Plot info/caption box. */
.plot-info, .plot-info-oneline {
   margin-top: .5rem;
   padding: .25rem;
   border: 1px solid #dee2e6;
   border-radius: .25rem;
   background-color: #F1F1FF;
}

/* Plot info/caption box with a single line. */
.plot-info-oneline {
   padding: .75rem;
   font-weight: bold;
   text-align: center;
}

/* Plot legend used in some Observable Plots. */
.plot-data-swatches { max-width: 700px; }

/* Plot defaults. */
.plot, .plot-data, .plot-sim {
   display: block; height: auto; width: auto; max-width: 100%;
}

/* Plot for simulation results, and data for stocks, bonds, etc. */
.plot-data, .plot-sim { max-height: 90vh; }

/* Plot for probability distributions e.g. when editing a simulation.
 * Also used when stacking multiple dists on top of each other. */
.plot-dist { height: auto; width: 100%; }

/* Plot for several columns of prob.dists.
 * The number of columns is indicated in the class-name. */
.plot-dist-col-1 { display: block; height: auto; width: auto; max-width: 100%; }
.plot-dist-col-2 { display: block; height: auto; width: auto; max-width: 100%; }
.plot-dist-col-3 { display: block; height: auto; width: auto; max-width: 100%; }

/* Custom checkbox icons. */
i.custom-checkbox-star { color: #ffc107; }
i.custom-checkbox-hide { color: #6f42c1; }
i.custom-checkbox-up-down.bi-arrow-up-square-fill { color: #70CD70; }
i.custom-checkbox-up-down.bi-arrow-down-square-fill { color: #D98181; }

/* Embedded YouTube video. */
iframe.youtube-embed {
   width: 680px;
   max-width: 100%;
   max-height: 90vh;
   aspect-ratio: 16/9;
}

/* Space between list-items. */
ul.space li, ol.space li { margin-bottom: 0.5rem; margin-top: 0.5rem; }

/* Indent for list-items. */
ul.indent-small, ol.indent-small { padding-left: 0.75em; margin: 0; }
ul.indent-normal, ol.indent-normal { padding-left: 1em; margin: 0; }

/* Colors for input-fields that use 'readonly' instead of 'disabled'. */
input[readonly] { background-color: var(--bs-gray-200); }
textarea[readonly] { background-color: var(--bs-gray-200); }

/* Checkbox 'readonly' hack to disable the field.
 * Note: color and accent-color does not seem to work. It's always white. */
input[type="checkbox"][readonly] {
   background-color: var(--bs-gray-200);
   border-color: var(--bs-gray-400);
   pointer-events: none;
}

/* Input-field checkbox increase border-width. */
input[type="checkbox"] { border-width: 2px; }

/* Input-field textarea cannot be resized. */
textarea.no-resize { resize: none }

/* Input-field textarea preserve white-space and use horizontal scrolling. */
textarea.white-space-pre { white-space: pre; }

/* Color for MathJax links to numbered equations.
   Same as Bootstrap class 'text-body' which is used for main text. */
mjx-math > a { color: var(--bs-body-color-rgb); }

/* Tab-button when selected / active. */
.nav-link.active { font-weight: bold; }

/* Error-message. */
.error-msg { color: #dc3545; }

/* Tab-button when tab-pane contains input-fields with 'is-invalid' set.
   Adapted from Bootstrap 5.2 */
button.nav-link.is-invalid, button.nav-link.is-invalid.active {
   color: #dc3545;
   padding-right: calc(1.5em + 0.75rem);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/*---------------------------------------------------------------------------*/

/* Until screen-size LG. */
@media (max-width: 992px) {
   /* Hide all borders until screen-size LG. */
   .border-until-lg-0 { border: none !important; }
}

/*---------------------------------------------------------------------------*/