:root {
  --primary: #334b7b;
  --secondary: #f57f00;
  --text: #000000;
  --secondary-light: #febe80;
  --primary-light: #5a76ae;
  --background-grey: #f2f2f2;
  --searchbar-grey: #aba8a5;
  --sidebar-grey: #d3d1d0;
  --success: #27ae60;
  --warning: #e2b93b;
  --error: #eb5757;
  --white: #ffffff;
  --font: 'Roboto', Verdana, sans-serif;
}



body {
  font-size: .875rem;
  font-family: var(--font);
  background-color: var(--background-grey);
}

.feather {
  width: 7%;
  height: 7%;
  vertical-align: text-bottom;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  /* rtl:raw:
  right: 0;
  */
  bottom: 0;
  /* rtl:remove */
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 3% 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  background-color: var(--sidebar-grey);
}
.bg-light {
  background-color: var(--sidebar-grey) !important;
}


@media (max-width: 768px) {
    aside{
      position: sticky;
      bottom: 0px;

    }
}


@media (max-width: 767.98px) {
  .sidebar {
    top: 5rem;
  }
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 3%;
  color: #727272;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
  background-color: var(--primary);
}

.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}


.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: var(--white);
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.form-label {
  font-weight: bold;
  color: var(--text);
}

/*
 * Form Input Classes
 */

.form-control {
  color: var(--searchbar-grey);
  border-color: var(--searchbar-grey);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
}

.form-control:focus {
  color: var(--text);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.form-control:disabled  {
  background-color: var(--searchbar-grey);
  color: var(--white);
  cursor: not-allowed;
}

.form-control:invalid {
  border-color: var(--error);
  box-shadow: none;
}

.form-control-pwd {
  cursor: pointer;
}

.form-control-err-msg {
  color: var(--error);
  font-size: 0.75rem;
  margin-top: 0.5em;
  display: none;
}

.form-control-success-msg {
  color: var(--success);
  font-size: 0.75rem;
  margin-top: 0.5em;
  display: none;
}

.form-control::placeholder{
  color: var(--background-grey);
}

.navbar-nav, .navbar-dark {
  background-color: var(--primary) !important;
}
 /* CSS based on Style Guide */

/* Headings*/

h1 {
  font-size: 355%;
  line-height: 61.2px;
}

h2 {
  font-size: 305%;
  line-height: 52.8px;
}

h3 {
  font-size: 255%;
  line-height: 44px;
}

h4 {
  font-size: 205%;
  line-height: 35.2px;
}

h5 {
  font-size: 155%;
  line-height: 26.4px;
}

/* Pagination */

.pagination a {
  color: var(--searchbar-grey);
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid var(--sidebar-grey);
  border-radius: 4px;
  margin: 0px 4px;
  font-size: 87.5%;
}

.pagination a.active {
  background-color: var(--primary);
  color: var(--background-grey);
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: var(--primary-light);
  border-radius: 4px;
  color:var(--background-grey);
}

/*Tabs*/
.tabs a.tab {
	 position: relative;
	 display: table-cell;
	 padding: 1em 1.6em;
	 color: #000;
	 cursor: pointer;
}
 .tabs a.tab:after {
	 position: absolute;
	 content: '';
	 height: 3px;
	 bottom: 0px;
	 left: 0px;
	 right: 0px;
	 border-radius: 3px 3px 0px 0px;
	 background: var(--secondary);
	 transform: scale(0, 1);
}
 .tabs a.tab.active {
	 color: #000;
}
 .tabs a.tab.active:after {
	 opacity: 1;
	 transform: scale(1, 1);
}

p, .medium-text {
  font-size: 120%;
  line-height: 25.2px;
}

.large-text {
  font-size: 140%;
  line-height: 28px;
}
/* Selectors */

.form-check .form-check-label {
  color: var(--text);
  font-family: var(--font);
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  line-height: 22px;
  padding-left: 16px;
  padding-top: 4px
}

  /* checkboxes */

.form-check .form-check-input[type="checkbox"]{
  width: 24px;
  height: 24px;
  border: 2px solid var(--sidebar-grey);
  box-sizing: border-box;
  border-radius: 4px;
}

.form-check .form-check-input[type="checkbox"]:checked{
  width: 24px;
  height: 24px;
  background-color: var(--primary);
  border: 2px solid var(--sidebar-grey);
  box-sizing: border-box;
  border-radius: 4px;
}

  /* radio buttons */
.form-check .form-check-input[type="radio"]{
  width: 24px;
  height: 24px;
  border: 2px solid var(--sidebar-grey);
}

.form-check .form-check-input[type="radio"]:checked{
  width: 24px;
  height: 24px;
  background-color: var(--primary);
  border: 2px solid var(--primary);
  box-sizing: border-box;
  border-radius: 24px;
}

/*  !* toggles *!*/

.form-check.form-switch .form-check-input[type="checkbox"]{
  width: 44px;
  height: 24px;
  background-color: var(--background-grey);
  border-radius: 20px;
  border: 1px solid var(--background-grey);
}

.form-check.form-switch .form-check-input[type="checkbox"]:checked{
  width: 44px;
  height: 24px;
  background-color: var(--primary);
  border-radius: 20px;
  border: 1px solid var(--background-grey);
}

/*Buttons */
.btn-primary {
  background-color: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

@media screen and (min-width: 480px){
  .btn-primary {
  background-color: var(--primary);
  color: var(--white);
  max-height:100%;
  max-width:100%;
  max-font-size:10;
  }
}
.btn-primary:hover{
  background-color: var(--primary-light);
  border-color: var(--primary-light);
}

.btn-primary:checked{
  background-color: var(--secondary-light);
  border-color: var(--secondary-light);
}
.btn-secondary {
  background-color: var(--secondary);
  color: var(--white);
  border-color: var(--secondary);
}
.btn-secondary:hover{
  background-color: var(--secondary-light);
  border-color: var(--secondary-light);
}
.btn-secondary:checked{
  background-color: var(--secondary-light);
  border-color: var(--secondary-light);
}

/* tooltips and progress bar */
.tooltip-inner {
    background-color: var(--primary-light);
    box-shadow: 0px 0px 4px black;
    opacity: 1 !important;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: var(--primary-light) !important;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: var(--primary-light) !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--primary-light) !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--primary-light) !important;
}

.progress{
  border-radius:4px;
}

.progress-bar {
  float:left;
  background-color: var(--primary);
  font-family: var(--font);
}

/* Table */
.table-primary {
  --bs-table-bg: var(--primary);
  color: var(--white);
}

tr[data-href] {
  cursor: pointer;
}

.border-hover:hover {
  border: 1px solid var(--secondary);
}

/* file upload */
.custom-file-button input[type=file] {
  margin-left: -2px !important;
}
.custom-file-button input[type=file]::-webkit-file-upload-button {
  display: none;
}
.custom-file-button input[type=file]::file-selector-button {
  display: none;
}
.custom-file-button:hover label {
  background-color: var(--primary);
  cursor: pointer;
}

.input-group-text {
  background-color: var(--primary);
  color: var(--white);
}

.input-group-text:hover {
  background-color: var(--primary);
  color: var(--white);
}

.input-group-text .feather {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.input-group-text:active {
  background-color: var(--primary-light);
  box-shadow: inset 0px 0px 2px 2px black;
}

/* Select (Dropdown in form) */
.form-select {
  color: var(--searchbar-grey);
  border-color: var(--searchbar-grey);
}

.form-select:focus {
  color: var(--text);
  border-color: var(--primary);
}

/* Dropdown outside of forms e.g. as link dropdowns */
.dropdown-toggle {
  color: var(--searchbar-grey);
  background-color: var(--white);
  border-color: var(--searchbar-grey);
}

.dropdown-toggle:focus,
.dropdown-toggle:hover {
  color: var(--text);
  background-color: var(--white);
  border-color: var(--primary);
}

.dropdown-item {
  color: var(--searchbar-grey);
  background-color: var(--white);
}

.dropdown-item:hover {
  background-color: var(--primary);
  color: var(--white);
}

/* Breadcrumps*/

ul.breadcrumbs {
  padding: 10px 16px;
  list-style: none;
  background-color : var(--primary);
}

/* Add color to current selected */
ul.breadcrumb li {
  display: inline;
  font-size: 75%;
  color : var(--secondary);
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: var(--sidebar-grey);
  content: ">\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
  color: var(--sidebar-grey);
  text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
  color: var(--secondary);
  text-decoration: underline;
}

/* Accordion */

.accordion {
  background-color: var(--background-grey);
  color: var(--text);
  cursor: pointer;
  padding: 18px;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
.accordion.settings {
  margin-left: 3%;
  margin-top: 1%;
  margin-right: 3%;
  border-radius: 15px;
}

.accordion-button:not(.collapsed) {
  color: var(--primary) !important;
  background-color: var(--secondary) !important;
}

/* Modals */
.modal {
  position: absolute;
  /*width: 388px;
  height: 385px;*/
}

/* Banner */

.banner-container {
  width: 582px;
  height: 232px;
  /* Color - Primary */
  background: var(--primary);
  border-radius: 8px;
  background-position:right;
  background-repeat: no-repeat;
  position: relative;
}

.banner-logo-container {
  width: 25%;
  height: 60%;
  background-image: url("../../../media/avatar.png");
  background-size: contain;
  background-position: right;
  float: right;
  margin: 10% 6% 10% 10%;
  background-repeat: no-repeat;
}

.banner-inner-container {
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;

  position: absolute;
  margin-left: 32px;
  margin-bottom: 32px;
  margin-right: 35%;
}

.banner-h1{
  position: static;
  height: auto;
  font-family: var(--font);
  font-style: normal;
  font-weight: bold;
  font-size: 200%;
  line-height: 35px;

  /* Color - White */
  color: var(--white);

  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: flex-start;
  flex-grow: 0;
  margin-top: 4%;
}

.banner-h2{
  position: static;
  height: auto;

  /* Text - Normal */
  font-family: var(--font);
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  line-height: 22px;

  /* Color - White */
  color: var(--white);

  /* Inside auto layout */
  flex: none;
  order: 1;
  align-self: center;
  flex-grow: 0;
  margin-top: 4%;
}

.banner-btn{
  position: static;
  width: 50%;

  background: var(--secondary);
  border-radius: 8px;

  flex: none;
  order: 2;
  align-self: flex-start;
  flex-grow: 0;
  margin-top: 4%;
  font-family: var(--font);
  font-style: normal;
  font-weight: bold;
  font-size: 100%;
  text-align: center;
  line-height:50px;
  color: var(--white);
}

.banner-btn:hover, .banner-btn:active{
  background-color: var(--secondary-light);
  color: var(--white);
  font-family:var(--font);
}

/* Badge */
td .badge {
  font-size: 1em;
}

.card{
  max-height: 100%;
  max-width: 100%;
  border-radius: 4px;
  background-color: #f2f2f2;
  box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.16);
  display: flex;
}

.card-body{
  font-size: 100%;
  background-color: #f2f2f2;
}

.greyout {
  filter: grayscale(100%);
}

button .feather {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 480px){

  .card{
    max-height: 100%;
    max-width: 100%;
    border-radius: 4px;
    background-color: #f2f2f2;
    box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.16);
    display: flex
  }

  .card-body{
    /*adding the standard semicolon after the font size here causes the font to become super small because...?*/
    font-size: 100%;
    background-color: #f2f2f2;
  }

  .card-title{
    font-size: 150%;
  }

}

 /* Dropdown Button */
.dropbtn {
  background-color: var(--primary);
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: var(--primary-light);
}

.dropdownsu {
  float: right;
  position: relative;
  display: inline-block;
}

/* Dropdown Content */
.dropdownsu-content {
  display: none;
  position: absolute;
  background-color: var(--background-grey);
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right: 0;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdownsu-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdownsu-content a:hover {background-color: var(--sidebar-grey)}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.notishow {display:block;}

/* let the dropdown menu appear, starting from the left side of the button, instead of the right side in the mobile view */
@media screen and (max-width: 768px){
  .dropdownsu-content {
    left: 0;
  }
}

.notify_color_secondary {
  background-color: var(--secondary);
}

/* The notify popup - hidden by default */
.notify-popup {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 0;
}

/* Add styles to the notify container */
.notify-container {
  border-radius: 10px;
  max-width: 300px;
  padding: 10px 10px 10px 10px;
  background-color: var(--white);
}

/* Set a style for the cancel button */
.notify-container .cancel {
  background-color: var(--error);
  position:absolute; top:0; right:0;
  color: white;
  padding: 1px 1px;
  border: none;
  cursor: pointer;
  width: 10%;
  margin-bottom:0px;
  opacity: 0.8;
}


/* Add some hover effects to button */
.notify-container .btn:hover, .open-button:hover {
  opacity: 1;
}

.linebreak {
  display:inline;
}
.linebreak:after {
    content:"\a";
    white-space: pre;
}

@media screen and (max-width: 1035px) {
  .linebreak:after {
    white-space: normal;
  }
}