:root {
  --primary-color-1: #008de6;
  /* --primary-color-2: #219092; buttons - sign in/up, student enquiry */
  --primary-color-3: #052e46;
  --primary-color-4: #f8f8f8;
  --primary-color-5: #1B1C1D;
  /* footer color */
  --main-color-1: rgba(9,66,106,1);
  --main-light-blue: rgba(0, 123, 187, 1);
  --main-dark-green: #219092;
  --main-orange: #f5ab35;
  --main-dark-orange: #f79826;
  --main-light-gray: #f7f8f9;
  --main-black: rgba(0,0,0, 0.87);
  --border-gray: rgba(34, 36, 38, 0.15);
  --gradient-1-bg: #738bdc;
  --gradient-1: linear-gradient(315deg, #738bdc 0%, #48c3eb 74%);
  --gradient-2-bg: #fde7f9;
  --gradient-2: linear-gradient(135deg, #fde7f9 0%, #aacaef 130%);
  --gradient-3-bg: #007ea7;
  --gradient-3: linear-gradient(315deg, #007ea7 0%, #80ced7 90%);
  --semantic-green: rgb(33, 186, 69);
  --semantic-red: rgb(219, 40, 40); }

@media print {
  .non-print {
    display: none !important; }
  .print-margin {
    margin: 0 !important;
    padding: 0 !important; } }

/* backgrounds */
.th-pri-bgc-3 {
  background-color: var(--primary-color-3) !important; }

/* public footer */
.ui-bg-1 {
  background-color: #fcfcfc; }

.bg-white {
  background-color: white; }

.field_with_errors {
  width: 100%; }

.bg-dark {
  background-color: var(--main-black); }

.bg-main-color-1 {
  background-color: var(--main-color-1); }

.bg-light-gray {
  background-color: var(--main-light-gray); }

.bg-olive {
  background-color: #FBFDEF !important; }

.bg-red {
  background-color: #DB2828; }

.bg-gradient-1 {
  width: 100%;
  background-color: var(--gradient-1-bg);
  background-image: var(--gradient-1); }

.bg-gradient-2 {
  width: 100%;
  background-color: var(--gradient-2-bg);
  background-image: var(--gradient-2); }

h1, h2, h3, h4, h5, h6, .anchor-color {
  color: var(--main-color-1); }

.just-updated {
  background-color: lightyellow !important; }

/* texts */
.text-white {
  color: white !important; }

.text-dark {
  color: rgba(0, 0, 0, 0.87) !important; }

.text.green {
  color: #21BA45; }

.text.red {
  color: #DB2828 !important; }

.text-gray {
  color: gray; }

.text.orange {
  color: #f2711c !important; }

.text.teal {
  color: #00B5AD; }

.color-salmon {
  color: salmon !important; }

a, .custom_link {
  color: var(--main-light-blue); }

a:hover, .custom_link:hover {
  color: var(--main-orange); }

.ui.green.toggle.checkbox input:checked ~ label:before {
  background-color: var(--semantic-green) !important; }

/* Formerly stylesheets/common.css */
/* processing request */
.ui.active.dimmer .ui.loader:before, .ui.loader:before {
  border-color: rgba(0, 0, 0, 0.1) !important; }

.ui.active.dimmer .ui.loader:after, .ui.loader:after {
  border-color: #f8ac21 transparent transparent !important; }

.processing-request .ui.active.inverted.dimmer .ui.text.loader {
  color: white;
  font-weight: 700; }

.processing-request .ui.active.inverted.dimmer {
  height: 20vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 40vh !important; }

.ui.modal .scrolling.content {
  height: 100%;
  max-height: calc(90vh);
  overflow: auto; }

#viewportLoader {
  width: 100%; }

#viewportLoader > div {
  width: 100% !important;
  max-width: 600px !important;
  padding: 1em !important; }

.contentLoader {
  position: relative !important;
  width: 100% !important;
  height: 50vh !important;
  top: 50% !important;
  right: 50% !important; }

.slide-in {
  transform: translateX(1000px);
  animation: slide-in 0.8s ease forwards; }

@keyframes slide-in {
  to {
    transform: translateX(0); } }

@-webkit-keyframes slide-in {
  to {
    transform: translateX(0); } }

.slide-out {
  transform: translateX(0);
  animation: slide-out 0.8s ease forwards; }

@keyframes slide-out {
  to {
    transform: translateX(1000px); } }

@-webkit-keyframes slide-out {
  to {
    transform: translateX(1000px); } }

/* MOBILE */
.mobile-only, .ui.mobile-only {
  display: none; }

@media only screen and (max-width: 768px) {
  .mobile-only {
    display: block !important; }
  .desktop-only {
    display: none !important; } }

.overwrite.close.icon {
  color: black !important;
  right: 0.5em !important;
  top: 0.5em !important; }

.student-active-section, .breadcrumb-active-section {
  box-shadow: 0px 3px rgba(0, 0, 0, 0.3); }

/* ANIMATION */
.come-in {
  transform: translateY(-1500px);
  animation: come-in 0.8s ease forwards; }

.come-in:nth-child(odd) {
  animation-duration: 0.6s;
  /* So they look staggered */ }

@keyframes come-in {
  to {
    transform: translateY(0); } }