@font-face {
  font-family: microFont;
  src: url('/fonts/microFont.otf');
}

/* roboto-slab-300 - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src:
       url('/fonts/roboto-slab-v24-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-slab-v24-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-slab-regular - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src:
       url('/fonts/roboto-slab-v24-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-slab-v24-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-slab-500 - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 500;
  src:
       url('/fonts/roboto-slab-v24-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-slab-v24-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-slab-600 - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 600;
  src:
       url('/fonts/roboto-slab-v24-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-slab-v24-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* klee-one-regular - latin */
@font-face {
  font-family: 'Klee One';
  font-style: normal;
  font-weight: 400;
  src:
       url('/fonts/klee-one-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/klee-one-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* klee-one-600 - latin */
@font-face {
  font-family: 'Klee One';
  font-style: normal;
  font-weight: 600;
  src:
       url('/fonts/klee-one-v7-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/klee-one-v7-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/*@import url(https://fonts.googleapis.com/css?family=Nunito);*/

/* custom variables -- change values as you wish */
:root {
  --color-purple: #6b085b;
  --color-pink: #f1d2e9;
  --color-dark-pink:#ed10b4;
  --color-teal:#1dafba;
  --color-teal-trans:#1dafba54;
  --color-light-teal: #c1f3f41f;
  --color-green:#77b648;
  --color-pale-green: #dde8c6;
  --color-light-tan: #ebcfb9;
  --color-orange: #d46100;
  --color-slate:#737373;
}
a.navbar-brand{
    color:var(--color-purple) !important;
}
#app>nav.navbar{
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
}
 .border-primary {
     border-color: var(--color-teal-trans) !important;
 }
.bg-primary {
  --bs-bg-opacity: 1;
  background-color: var(--color-teal) !important;
}
.btn-primary {
  color: #fff;
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  border-radius: 100px;
}
.btn-primary:hover {
  color: #fff;
  background-color: var(--color-green);
  border-color: var(--color-teal);
}
.nav-pills .nav-link.active{
  background-color: var(--color-dark-pink) ;
  box-shadow:2px 2px var(--color-pink);
}
h1, h2 {
  color: var(--color-teal);
}

/* custom variables applied to different elements */
h3 {
color: var(--color-green);
}
h4 {
  color:var(--color-teal)
}
h5 {
  color: var(--color-purple);
}
div.card {
  background-color: var(--color-light-teal);
  border: 1px solid var(--color-pale-green);
    box-shadow:2px 2px 2px var(--color-teal-trans);
    margin-bottom: 5px;
}
.fa-gear:not(.nav-item .fa-gear) {
  color: var(--color-purple);
}
.fa-school:not(.nav-item .fa-school) {
  color: var(--color-orange);
}
.fa-money-check:not(.nav-item .fa-money-check), .fa-money-check-dollar:not(.nav-item .fa-money-check-dollar){
  color: var(--color-green);
}
.fa-basket-shopping:not(.nav-item .fa-basket-shopping){
  color: var(--color-teal);
}
.fa-bank:not(.nav-item .fa-bank){
  color:var(--color-purple)
}
.fa-briefcase:not(.nav-item .fa-briefcase){
color:var(--color-slate);
}
.fa-user:not(.nav-item .fa-user){
  color:var(--color-purple);
}

body.login:has(a.login-with-google-btn)  {
  background-image: url(/homeshape.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height:100vh;
}
body.login:has(a.login-with-google-btn)  {
  background-color: #1dafba78 !important;
  color:yellow;

}
body.login:has(a.login-with-google-btn) div.card  {
  background-color:#1dafba78 !important;
}
/*start custom css*/
.main-wrapper {
  /*height: 100vh;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

}
@media (min-width: 769px) {
    .main-wrapper{
        background-image: url(/upper-right-back.svg);
        background-position: top right;
        background-size:40%;
        background-repeat: no-repeat;
    }
}

aside {
  width: 250px;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}
aside.shrink {
  width: auto;
}

main {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  /* added to allow scroll to bottom */
  margin-bottom:20px;

}
main header {
  height: 50px;
}
main header .navbar {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
main section {
  min-height: 800px;
}
.nav-link-text{
  text-align:center;
}

.btn-outline-dark {
  border-color:var(--bs-blue);
  color:var(--bs-blue);
}
.btn-outline-dark:hover{
  background-color:var(--bs-blue);
}

.menu-icon {
  position: relative;
  max-width: 36px;
  max-height: 36px;
  width: 36px;
  height: auto;
  display: inline-block;
}

.menu-icon path {
  stroke: #333;
  stroke-width: 5;
  stroke-linecap: round;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.menu-button:hover path,
.menu-button:focus path,
.menu-button:active path {
  stroke: seagreen;
}

.menu-icon.is-active path:nth-child(1) {
  opacity: 0;
}

.menu-icon.is-active path:nth-child(4) {
  opacity: 0;
}

.menu-icon.is-active path:nth-child(2) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.menu-icon.is-active path:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.btnmessage.show-hint:after {content:"close sidebar";
color:#333;
font-weight:normal;
font-size:1rem;
vertical-align: 37%;
}

.btnmessage:not(.show-hint):after {content:"open sidebar";
color:#333;
font-weight:normal;
font-size:1rem;
vertical-align: 37%;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: none ;
    box-shadow: none;
}
.menu-icon{
padding-right:3px;
color: var(--bs-blue)!important;
}
/*end custom css*/

/* adding styling to Google login -- rcg */
.login-with-google-btn {
  transition: background-color 0.3s, box-shadow 0.3s;
  padding: 12px 16px 12px 42px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  color: #757575;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background-color: white;
  background-repeat: no-repeat;
  background-position: 12px 11px;
  margin: 5px;
  text-decoration: none;
  white-space: nowrap;
}

.login-with-google-btn {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
}

.login-with-apple-btn {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS4yLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxOCAxOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTggMTg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGQ9Ik0xMi4yLDQuM2MtMS42LDAtMi4zLDAuOC0zLjQsMC44Yy0xLjEsMC0yLTAuOC0zLjQtMC44Yy0xLjMsMC0yLjgsMC44LTMuNywyLjJjLTEuMywyLTEuMSw1LjcsMSw4LjljMC43LDEuMSwxLjcsMi40LDMsMi40DQoJaDBjMS4xLDAsMS41LTAuNywzLTAuN2gwYzEuNSwwLDEuOCwwLjcsMywwLjdoMGMxLjMsMCwyLjMtMS40LDMuMS0yLjZjMC41LTAuOCwwLjctMS4yLDEuMS0yLjFjLTMtMS4xLTMuNS01LjQtMC41LTcNCglDMTQuNyw1LDEzLjQsNC4zLDEyLjIsNC4zTDEyLjIsNC4zeiIvPg0KPHBhdGggZD0iTTExLjksMC4yYy0wLjksMC4xLTIuMSwwLjctMi43LDEuNUM4LjYsMi4zLDguMSwzLjQsOC4zLDQuNGgwLjFjMSwwLDItMC42LDIuNi0xLjRDMTEuNiwyLjMsMTIuMSwxLjIsMTEuOSwwLjJ6Ii8+DQo8L3N2Zz4NCg==);
  background-size: 20px;
}

.login-with-google-btn:hover {
  cursor: pointer;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.login-with-google-btn:active {
  background-color: #eeeeee;
}

.login-with-google-btn:focus {
  outline: none;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25),
    0 0 0 3px #c8dafc;
}

.login-with-google-btn:disabled {
  filter: grayscale(100%);
  background-color: #ebebeb;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}
/* END adding styling to Google login -- rcg */




.card-bg-color-0{

  background-color:  #0dcaf0;
}

.card-bg-color-1{

  background-color:  #0dcaf1;
}

.card-bg-color-2{

  background-color:  #0dcaf2;
}

.card-bg-color-3{

  background-color:  #0dcaf3;
}

.card-bg-color-4{

  background-color:  #0dcaf4;
}

.card-bg-color-5{

  background-color:  #0dcaf5;
}


.card-bg-color-6{

  background-color:  #0dcaf6;
}

ul > li > span.bigify-badge {
  font-size: 1.1em!important;
}

div > ul.list-group.list-group-horizontal > a {

  text-decoration: none;

}

.accounts-group {


  text-decoration: none;
}
/* limiting length of inputs on run payroll */
table#table-preview input, body.show_all_products  table input, body.credit_transaction_form  table input  {
 width: 100px}
  body.credit_transaction_form  table input[name="reason"]{width: 100%}


body.show_van h3 {
  font-weight: 200;
}


/* trying to make students list display better with long links */
div.table-like div.col.tr  {
   word-wrap: break-word;
  }
 div.table-like div.col.tr+div.col  {
   overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }

.divider {
  font-size:25px;
  color:#999;
    align-self: center;
}

.bigify {

  font-size: 1.33rem!important;
}