/*!******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./js-develop/learn/style.css ***!
  \******************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap);
/*!**********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./js-develop/learn/style.css (1) ***!
  \**********************************************************************************/
body {
  --headerHeight: 4rem !important;
  min-height: calc(100vh - var(--headerHeight));
  margin-top: var(--headerHeight);
  font-size: 16px;
  background-color: #E8F6FF;
  display: flex;
  flex-direction: column;
}


/* would be better to import this stuff from ltiserver and compile it together, but not necessary if not changing much */

body {
  font-family: Rubik,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
}

:root {
  --dropShadowColour: #3292a6;
}

.nav-bg {
  background-color: #ced6dd !important;
}

#main-nav {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  height: 4rem;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

#bottomButtons {
  /* box-shadow: 2px 2px 5px var(--dropShadowColour); */
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.navbar .nav-item {
  font-size: 1.4rem;
  padding-right: 1.4rem
}

.bg-primary {
  background-color: #1b89d1 !important;
}

.bg-primary-lightest {
  background-color: #E8F6FF;
}

.text-gray-dark {
  color: #5D5D5D;
}

.text-gray {
  color: #7C7C7C;
}

h2.text-info {
  color: #146397 !important;
}

.text-primary-dark {
  color: #146397 !important
}

.btn-purple {
  font-weight: bold;
  padding: 0.25rem 1rem;
  border-width: 3px;
  text-transform: uppercase;
}

.btn-purple {
  color: #fff;
  background-color: #880A62;
  border-color: #880A62;
}

.btn-purple:hover {
  background-color: #640748;
  border-color: #640748;
  color: #fff;
}

.btn-primary {
  color: #fff;
  background: #1b89d1;
  border-color: #1b89d1;
}

a {
  color: #146397;
}