/* =========================
   GENERAL
   ========================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;

  font-family: Arial, Helvetica, sans-serif;

  background: #f5f7fa;
  color: #1f2937;
}

/* =========================
   MAIN APPLICATION
   ========================= */

.app {
  display: flex;

  width: 100%;
  height: 100vh;
}

/* =========================
   LEFT PANEL
   ========================= */

.sidebar {
  width: 240px;
  min-width: 240px;

  background: #111827;
  color: white;

  display: flex;
  flex-direction: column;

  padding: 30px 20px;
}


.site-name img {
    display: block;

    width: 90%;
    height: auto;
    padding-left: 10px;
}

.site-name {
  font-size: 30px;
  font-weight: 700;

  margin-bottom: 40px;
  padding-left: 10px;
}

/* =========================
   MENU
   ========================= */

.menu {
  display: flex;
  flex-direction: column;

  gap: 10px;
  margin-top: 10px;
}

.menu-button {
  width: 100%;

  padding: 13px 15px;

  border: none;
  border-radius: 6px;

  background: transparent;
  color: #d1d5db;

  text-align: left;

  font-size: 15px;

  cursor: pointer;
}

.menu-button:hover {
  background: #1f2937;
  color: white;
}

.menu-button.active {
  background: #2563eb;
  color: white;
}

/* =========================
   BOTTOM MENU
   ========================= */

.sidebar-bottom {
  margin-top: auto;

  display: flex;
  flex-direction: column;

  gap: 10px;
}

/* =========================
   RIGHT PANEL
   ========================= */

.content {
  flex: 1;
  min-width: 0;

  height: 100%;

  background: #f5f7fa;

  display: flex;
  flex-direction: column;
}

.content-body {
  flex: 1;
  min-width: 0;
  min-height: 0;

  padding: 0px;

  overflow: auto;
}

/* =========================
   STOCK CHART
   ========================= */

#optionCalculatorFrame,
#stockChartFrame,
#portfolioManagerFrame {
  width: 100%;
  height: 100%;

  min-height: 0px;

  border: none;

  background: white;

}

/* =========================
   HOME
   ========================= */

.home-page {
  max-width: 800px;

  margin: 60px auto;

  text-align: center;
}

.home-page p {
  color: #6b7280;

  font-size: 17px;
}

/* =========================
   CONTACT
   ========================= */

.contact-page {
  max-width: 600px;

  margin: 60px auto;

  background: white;

  padding: 30px;

  border-radius: 8px;

  border: 1px solid #e5e7eb;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 700px) {
  .sidebar {
    width: 180px;
    min-width: 180px;

    padding: 20px 12px;
  }

  .site-name {
    font-size: 24px;
  }
}