@import url(https://fonts.googleapis.com/css2?family=Public+Sans&display=swap);

/*   === ### ===  Navbar Color  === ### ===  */
.bg-black,
.bg-lightblue,
.bg-blue,
.bg-brown,
.bg-gold,
.bg-green,
.bg-indigo,
.bg-maroon,
.bg-navy,
.bg-olive,
.bg-orange,
.bg-pink,
.bg-purple,
.bg-red,
.bg-teal,
.bg-violet {
  color: #fff;
}
.bg-red,
a.bg-red:focus,
a.bg-red:hover {
  background-color: #c03;
}
.bg-blue,
a.bg-blue:focus,
a.bg-blue:hover {
  background-color: rgba(2, 5, 161, 0.91);
}
.bg-lightblue,
a.bg-lightblue:focus,
a.bg-lightblue:hover {
  background-color: #00a5ff;
}
.bg-green,
a.bg-green:focus,
a.bg-green:hover {
  background-color: #008000;
}
.bg-violet,
a.bg-violet:focus,
a.bg-violet:hover {
  background-color: #4e2b6f;
}
.bg-orange,
a.bg-orange:focus,
a.bg-orange:hover {
  background-color: #d3702e;
}
.bg-brown,
a.bg-brown:focus,
a.bg-brown:hover {
  background-color: #8b4513;
}
.bg-black,
a.bg-black:focus,
a.bg-black:hover {
  background-color: #111;
}
.bg-maroon,
a.bg-maroon:focus,
a.bg-maroon:hover {
  background-color: #800000;
}
.bg-purple,
a.bg-purple:focus,
a.bg-purple:hover {
  background-color: #800080;
}
.bg-olive,
a.bg-olive:focus,
a.bg-olive:hover {
  background-color: #808000;
}
.bg-pink,
a.bg-pink:focus,
a.bg-pink:hover {
  background-color: #ff69b4;
}
.bg-indigo,
a.bg-indigo:focus,
a.bg-indigo:hover {
  background-color: #4b0082;
}
.bg-teal,
a.bg-teal:focus,
a.bg-teal:hover {
  background-color: #008080;
}
.bg-gold,
a.bg-gold:focus,
a.bg-gold:hover {
  background-color: #daa520;
}
.bg-navy,
a.bg-navy:focus,
a.bg-navy:hover {
  background-color: #001f3f;
}

/*   === ### ===  Text Size and Color  === ### ===  */
.btn,
.dropdown-menu,
.form-control,
.input-group-addon,
.popover,
.popover-title,
body {
  font-size: 14px;
}
body {
  font-family: "Public Sans", sans-serif;
  line-height: 1.42857143;
  color: #333;
  background-color: #f0f1eb;
}
.fa-6x {
  font-size: 6em;
}
.fa-2x {
  font-size: 1.5em;
}
.fa-3x {
  font-size: 1.8em;
}
.fa-1x {
  font-size: 12px;
}
.text-white {
  color: #fff;
}
.text-black {
  color: #333;
}
.text-gold {
  color: #f5c231;
}
.text-silver {
  color: #b2b3b5;
}
.text-bronze {
  color: #985f0d;
}
.text-orange {
  color: #ff924c;
}
.text-green {
  color: #939336;
}
.text-blue {
  color: rgba(2, 5, 161, 0.91);
}
.text-gray {
  color: #414042;
}
.text-lightgray {
  color: #999;
}
.text-factor {
  color: #090;
  font-size: 18px;
}
.text-category {
  color: #dd0e0e;
  font-size: 16px;
}
a {
  color: #333;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #f06424;
  text-decoration: underline;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.a-disabled {
  pointer-events: none;
  cursor: default;
}
.btn-add {
  display: inline-block;
  padding: 4px 7px;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

/*   === ### ===  Notification Bell  === ### ===  */
.notification-badge {
  display: inline-block;
  min-width: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background-color: #c9302c;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  right: 1px;
  padding: 5px;
}
.notification-badge:empty {
  display: none;
}

/*   === ### ===  Landing Screen  === ### ===  */
.logout-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  margin-top: -24px;
}
@media (min-width: 767px) {
  .logout-container {
    padding-right: 30px;
  }
}
@media (max-width: 767px) {
  .logout-container {
    padding-right: 0px;
    padding-left: 0px;
  }
}

/*   === ### ===  Logo  === ### ===  */
.navbar-logo {
  margin-left: -13px;
  margin-top: -6px;
  margin-bottom: -6px;
}

/*   === ### ===  Navbar Text Color  === ### ===  */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-brand:hover {
  color: #fff;
}
.navbar-dark .navbar-nav .nav-link {
  color: #fff;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: hsla(0, 0%, 100%, 0.7);
}
.navbar-dark .navbar-nav .nav-link.disabled {
  color: hsla(0, 0%, 100%, 0.25);
}
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link {
  color: #fff;
}
.navbar-dark .navbar-toggler {
  color: hsla(0, 0%, 100%, 0.5);
  border-color: hsla(0, 0%, 100%, 0.1);
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-dark .navbar-text {
  color: hsla(0, 0%, 100%, 0.5);
}
.navbar-dark .navbar-text a,
.navbar-dark .navbar-text a:focus,
.navbar-dark .navbar-text a:hover {
  color: #fff;
}

/*   === ### ===  Nav Pills   === ### ===  */
.nav-pills .nav-link {
  border-radius: 2rem;
  color: #000;
  background-color: #e9e9e9;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #ec971f;
}

/*   === ### ===  Panel Box   === ### ===  */
.panel-box {
  overflow: auto;
  height: 24em;
  padding: 10px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.panel-box-transparent {
  overflow: auto;
  height: 14em;
  padding: 6px 12px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 0px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

/*   === ### ===  Override User Agent Stylesheet  === ### ===  */
.table {
  font-size: inherit;
}

/*   === ### ===  Word Space === ### ===  */
span.category-space {
  padding-left: 2em;
}
span.activity-space {
  padding-left: 4em;
}

/* hr color */
hr.blue {
  border: 2px solid #00a5ff;
}
hr.red {
  border: 0.1px solid #dc3545;
}

/* Chips */
.chip {
  display: inline-block;
  padding: 0 25px;
  margin-top: 10px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  border-radius: 25px;
  background-color: #f3f3f3;
}

/* Sidebar Menu */
.mn-vnavigation {
  margin: 0;
  padding: 0;
  background: #fff;
  border-top: 1px solid #f0f1eb;
  border-bottom: 1px solid #f0f1eb;
}
ul {
  list-style: none;
}
.mn-vnavigation li a {
  border-top: 1px solid #f0f1eb;
  border-bottom: 1px solid #f0f1eb;
  display: block;
  padding: 14px 18px 13px 15px;
  color: #1295d8;
  text-decoration: none;
  white-space: nowrap;
}
.mn-vnavigation li a:hover {
  background-color: #00a5ff;
  color: #fff;
}
.mn-vnavigation li.active a {
  background-color: #00a5ff;
  color: #fff;
}

/* Popup youtube video */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}