:root {
  --csci-font-roboto: "Roboto", sans-serif;
  --csci-bg-opacity: 1;
  --csci-body-font-family: var(--csci-font-roboto);
  --csci-body-font-size: 14px;
  --csci-body-font-weight: 400;
  --csci-body-line-height: 1.6;
  --csci-body-color: #4f4f4f;
  --csci-body-bg: #f2f7ff;
  --csci-top-height: 60px; /* height of navbar */
  --csci-side-width: 240px; /* width of sidebar */
  --csci-foot-heigth: 60px; /* height of footer */
}

html {
  position: relative;
  min-height: 100%;
}

body {
  /*margin-bottom: 60px;*/
  margin: 0;
}

main {
  width: 100%;
  min-height: calc(100vh - (var(--csci-top-height)*5)) !important;
  transition: all 0.8s;
}

.validation-summary-errors ul {
  padding-inline-start: 10px;
}

.mobile-navbar {
  font-size: 1.25rem;
}

  .mobile-navbar a {
    color: #bf165e;
  }

/*
 * Font
 */
.fs-8 {
  font-size: 0.8rem !important;
}

.fs-10 {
  font-size: 0.6rem !important;
}

/*
 * Background
 */
.bg-noedit {
  background-color: var(--bs-gray-400);
}

/* 
 * With arrow tabs 
 */

.with-arrow .nav-link.active {
  position: relative;
}

  .with-arrow .nav-link.active::after {
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #2b90d9;
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
  }

/* 
 * lined tabs 
 */

.lined .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
}

  .lined .nav-link:hover {
    border: none;
    border-bottom: 3px solid transparent;
  }

  .lined .nav-link.active {
    background: none;
    color: #555;
    border-color: #2b90d9;
  }