@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&family=Open+Sans:wght@400;600;700&display=swap");

/**************************************/
/**************** Root ****************/
/**************************************/
:root {
  --documentation: #f8fafc;
  --navbar: #0c4a6e;
  --primary: #0c4a6e;
  --primary-hover: #082f49;
}

/**************************************/
/*************** Navbar ***************/
/**************************************/
.public-navbar {
  background: linear-gradient(135deg, #0c4a6e 0%, #082f49 100%) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.public-navbar .navbar-brand img {
  height: 40px;
}

body {
  padding-top: 56px;
}

/**************************************/
/*************** Sidebar **************/
/**************************************/
.sidebar {
  border: none;
  background: linear-gradient(180deg, #0c4a6e 0%, #082f49 100%);
  padding-left: 1rem !important;
}

.sidebar,
.sidebar * {
  color: #e0f2fe;
}

.sidebar h2 {
  margin-bottom: 1rem;
}
.sidebar ul {
  margin-bottom: 2rem;
}

.sidebar ul li ul li a {
  color: #e0f2fe;
}

.sidebar ul li ul li a:hover {
  color: #fff;
}

.sidebar ul li {
  margin-bottom: 0.75rem;
}

.sidebar ul li ul li {
  margin-bottom: 0.5rem;
}

/*************** Content **************/
html,
body {
  font-family: "Lato", "Open Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background-color: #f0f9ff;
}

a {
  color: #0c4a6e;
}

a:hover {
  color: #082f49;
}

.documentation {
  background-color: #f0f9ff;
  margin-top: 0 !important;
  padding-top: 4rem !important;
}

.documentation p {
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: 0.7rem;
}

[v-cloak]::before {
  background-color: #f0f9ff !important;
}