/* @preserve Copyright (c) 2024, UX Experts LLC, All Rights Reserved */
/* @preserve Seriously, All Rights Reserved. Proprietary and confidential. You may not use, copy, print, modify, appropriate, distribute, inspect, trace, decompile, analyze, scan, disclose, or reverse engineer this code, and doing so is expressly prohibited by the Terms of Use. */

/* modern colors: https://anthonyhobday.com/sideprojects/saferules/ */
/* dark theme: https://medium.com/@haxzie/dark-and-light-theme-switcher-using-css-variables-and-pure-javascript-zocada-dd0059d72fa2 */

/* use variables for fonts, colors, sizes */
:root {
  --fontFamily: "Roboto", "Segoe UI", "Open Sans", "Tahoma", "Verdana", "-apple-system", "HelveticaNeue", "Helvetica", "Arial";
  --colorLink: #007cf8; /* consider #2196f3 #3d71ed #2C73D2 */
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--fontFamily);
  user-select: none; /* Prevent text selection */
}

body,
html {
  height: 100%;
  line-height: 1.3;
  font-size: 16px;
  overscroll-behavior-x: none;
}

dialog::backdrop {
  background-color: rgba(128, 128, 128, 0.6);
}

a {
  color: var(--colorLink);
  text-decoration: none;
}

.mmBackground {
  background-position: center;
  background-size: cover;
  background-image: url("https://media.tenor.com/8W9x5d7XzgMAAAAC/miner-dancing.gif");
  min-height: 100%;
}

@keyframes animate-top {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

.selected-plan {
  border: 1px solid black;
  padding: 0 !important;
  scale: 108%;
  z-index: 2;
  position: relative;
}

.unselected-plan {
  filter: opacity(0.95);
}

.footer-column {
  flex: 1;
  margin-right: 20px;
}

.SCsource-code-container {
  max-width: 1200px;
  margin: 16px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.SCtoolbar {
  display: flex;
  justify-content: right;
}

.SCpre {
  margin: 0;
  padding: 8px;
  font-size: 14px;
  border-radius: 6px;
  overflow-x: auto;
}

/* .SCjavascript {
  font-family: "Courier New", monospace;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  padding: 0;
} */

.mmAnimate {
  animation-name: animate-top;
  animation-duration: 0.4s;
}

.mmFlipperY {
  background-color: transparent;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.mmFlipperY-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.mmFlipperY:hover .mmFlipperY-inner {
  transform: rotateY(180deg);
}

.mmFlipperY-front,
.mmFlipperY-back {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  backface-visibility: hidden;
}

.mmFlipperY-back {
  transform: rotateY(180deg);
}

.mmFlipperX {
  background-color: transparent;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.mmFlipperX-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.mmFlipperX:hover .mmFlipperX-inner {
  transform: rotateX(180deg);
}

.mmFlipperX-front,
.mmFlipperX-back {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  backface-visibility: hidden;
}

.mmFlipperX-back {
  transform: rotateX(180deg);
}

input[type="text"]:focus {
  outline: 1px solid gray;
}

.container {
  display: flex;
  /* height: 100vh; */
}

.left-panel {
  flex-grow: 4;
  /* overflow: auto; */
}

.right-panel {
  flex-grow: 1;
  /* overflow: auto; */
}
.resizable-divider {
  width: 3px;
  background-color: #ccc;
  cursor: ew-resize;
}

.input-attention input::placeholder {
  color: #999;
  background-color: yellow;
}

.input-attention input:focus::placeholder {
  background-color: transparent;
}