:root {
  --il-pink: #d22d90;
  --il-yellow: #f9a41a;
  --il-darkorange: rgba(245, 106, 56, 0.83);
  --il-l-blue: #3ec4e5;
  --il-d-blue: #0d1b36;
}

.primary {
  color: #d22d90;
}

.primary-bg {
  background-color: #d22d90;
}

.tertiary-bg-overlay {
  background-color: rgb(1, 1, 1, .90);
}

.secondary {
  color: #f9a41a;
}

.secondary-bg {
  background-color: #f9a41a;
}

.secondary-bg-overlay {
  background-color: rgb(255, 255, 255, .92);
}

.tertiary {
  color: #3ec4e5;
}

.tertiary-bg {
  background-color: #3ec4e5;
}

.light {
  color: #f1f0f0;
}

.light-bg {
  background-color: #f1f0f0;
}

.quartiary {
  color: #0d1b36;
}

.quartiary-bg {
  background-color: #0d1b36;
}

.navbar-brand {
  color: #d22d90;
}

.navbar-brand:hover {
  color: #f1f0f0;
}

.navbar-nav .nav-link:hover, .nav-link:hover {
  color: #f9a41a;
}

.navbar-nav .nav-link, .nav-link {
  color: #d22d90;
}

.underline-nav-link {
  display: inline-block;
  min-width: 80px;
}

.underline-nav-link::after { /* props of the line itself */
  content: '';
  display: block;
  width: 0px;
  height: 1px;
  background: #f9a41a;
  transition: width .3s;
}

.underline-nav-link:hover::after {
  width: 100%;
}

.navbar-nav .nav-link.active, .nav-link.active {
  color: #f1f0f0;
}

.nav-pills .nav-link.active {
  background-color: #3ec4e5;
}

.nav-pills .nav-link.active:hover {
  background-color: #f9a41a; /*1c6f80*/
}

.nav-link:focus {
  color: #3ec4e5;
}

.sidebar-collapse-caret {
  color: #3ec4e5;
}

.navbar-nav .nav-link.active::after { /* props of the line itself */
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #f9a41a;
}

.navbar-nav .nav-link.active:hover {
  color: #f9a41a;
}

.navbar-collapse {
  background-color: #0d1b36;
}

.hero-image .container-fluid .navbar {
  border-bottom: 1px solid #f9a41a;
}

.auth-btn-primary {
  border-color: var(--il-pink);
  background-color: var(--il-pink);
  color: white;
}

.auth-btn-primary:hover {
  -webkit-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  -moz-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  transition: none;
}

.addButton {
  background-color: var(--il-pink);
  color: white;
}

.addButton:hover {
  -webkit-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  -moz-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  transition: none;
}

.add-button-list-view {
  background-color: var(--il-pink);
  color: white;
}

.add-button-list-view:hover {
  -webkit-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  -moz-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  transition: none;
}

.btn-primary {
  border-color: #0d1b36;
  background-color: #3ec4e5;
  color: #0d1b36;
}

.btn-primary:hover {
  border-color: #0d1b36;
  background-color: #0d1b36;
  color: #f1f0f0;
}

.btn-outline-primary {
  border-color: #3ec4e5;
  color: #f1f0f0;
}

.btn-outline-primary:hover {
  background-color: #3ec4e5;
  color: #f1f0f0;
}

.btn-warning {
  background-color: #f9a41a;
  color: #0d1b36;
}

.btn-warning:hover {
  background-color: #f1f0f0;
  color: #0d1b36;
}

.btn-outline-warning {
  border-color: #f9a41a;
  color: #f1f0f0;
}

.btn-outline-warning:hover {
  background-color: #f9a41a;
  color: #0d1b36
}

.box-shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
}

.input-primary input::placeholder {
  color: #d22d90;
}

.auth-menu {
  border-bottom: 1px solid var(--il-pink);
}

/*active*/
.auth-menu-item.auth-menu-active {
  color: white;
  background-color: var(--il-pink);
  border: 1px dashed var(--il-pink);
}

.auth-menu-item.auth-menu-active span {
  color: white;
}

.auth-menu-item.auth-menu-active:hover {
  border: 1px solid var(--il-pink);
  -webkit-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  -moz-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  transition: none;
}

/*inactive */
.auth-menu-item {
  color: var(--il-pink);
  background-color: white;
  border: 1px solid white;
}

.auth-menu-item:hover {
  border: 1px solid var(--il-pink);
  border-bottom: 1px dashed white;
}

[data-menu-list] .auth-menu-item:hover {
  border: 1px solid var(--il-pink);
}

.auth-menu-item span {
  border: 0;
  color: var(--il-pink);
}

svg {
  background-color: var(--il-pink);
}

[data-view-grid] svg {
  fill: white;
}

[data-view-list] svg {
  fill: white;
}

.view-category-card {
  background-image: linear-gradient(var(--il-yellow), white);
  border-radius: 5px;
}

.todo-link {
  background-color: var(--il-pink);
  color: white;
}

.todo-link:hover {
  -webkit-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  -moz-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
}

.forum-plus-button {
  color: white;
  background-color: var(--il-pink);
  border: 1px dashed var(--il-pink);
}

.forum-plus-button:hover {
  border: 1px solid var(--il-pink);
  background-color: var(--il-pink);
  -webkit-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
}

.binder-header svg {
  fill: white;
  background-color: var(--il-pink);
}

.binder-header svg:hover {
  background-color: var(--il-pink);

  -webkit-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  -moz-box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  box-shadow: -2px -4px 25px 0 rgba(210, 45, 144, 0.5);
  transition: none;
  cursor: pointer;
}

/*.list-view-active {*/
/*  color: var(--il-d-blue);*/
/*}*/

.list-binder-card {
  background-color: var(--il-yellow);
}

.list-binder-card:hover {
  background-color: #f89c07;
}

.binder-name {
  color: white;
}

.user-icons > .span-class:nth-child(4n+1) {
  color: var(--il-d-blue);
}

.user-icons > .span-class:nth-child(4n+2) {
  color: var(--il-pink);
}

.user-icons > .span-class:nth-child(4n+3) {
  color: white;
}

.user-icons > .span-class:nth-child(4n+4) {
  color: var(--il-l-blue);
}

.user-icons > .span-class {
  background-color: var(--il-yellow);
}