@font-face {
  font-family: Inter;
  src: url(../fonts/static/Inter-Regular.ttf);
}
@font-face {
  font-family: Inter-SemiBold;
  src: url(../fonts/static/Inter-SemiBold.ttf);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--black-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

:root {
  --black-primary: #1f1f20;
  --black-secondary: #0e0f11;
  --black-tertiary: #1e2025;
  --gray-primary: #dedfd6;
  --gray-secondary: #6d6d6e;
  --gray-tertiary: #a7a7a8;
  --primary-green: #11b881;
  --secondary-green: #0f9568;
  --other: rgb(57, 53, 53);
  --red: rgb(187, 43, 43);
  --dark-red: #740d00;
  --yellow: rgb(174, 139, 43);
  --green: rgb(37, 84, 15);
}

/* Navbar */
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus,
.navbar-toggler {
  outline: none;
  box-shadow: none;
  border: none;
  color: var(--gray-primary) !important;
  transition: 0.2s;
}

.navbar-toggle-btn-mobile {
  border: none;
  background-color: transparent;
  color: var(--gray-primary);
  transition: 0.2s;
}

.navbar-darker {
  background-color: var(--black-primary);
  /* border-bottom: solid 1.5px rgb(17, 15, 15); */
  box-shadow: 0 4px 4px -2px rgb(0, 0, 0);
}

.navbar-darker a {
  color: var(--gray-primary) !important;
  text-decoration: none !important;
  border: solid 2px transparent;

}

.navbar-darker a:hover {
  cursor: pointer;
  color: var(--primary-green) !important;
}

.navbar-brand {
  font-family: 'Inter-SemiBold', sans-serif;
}

.navbar-brand:hover {
  cursor: pointer;
}

.navbar-active a {
  color: var(--primary-green) !important;
}

/* Footer */
.footer {
    background-color: var(--black-secondary) !important;
    color: var(--gray-primary);
    margin-top: auto;
  }
  
  .heart-icon {
    color: var(--red)
  }

/* Punishment Container */
.next-btn, .previous-btn {
  border: none;
  outline: none;
  background-color: var(--black-secondary);
  color: var(--gray-primary);
  transition: 0.2s;
}

.next-btn {
  border-radius: 0px 5px 5px 0px;
}

.previous-btn {
  border-radius: 5px 0px 0px 5px;
}

.next-btn:hover, .previous-btn:hover {
  color: var(--gray-tertiary);
}

.page-count {
  border: none;
  outline: none;
  background-color: var(--black-secondary);
  color: var(--gray-primary);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

input[type=number] {
-moz-appearance: textfield;
}

/* Punishments Row */
.flex-nowrap {
  overflow-x: auto;
}

.light-row {
  background-color: var(--dark-gray);
}

.permanent-line {
  border-left: 7px solid var(--red);
  height: 8vh;
  padding: 1vh;
}

.active-line {
  border-left: 7px solid var(--yellow);
  height: 8vh;
  padding: 1vh;
}

.expired-line {
  border-left: 7px solid var(--green);
  height: 8vh;
  padding: 1vh;
}

.permanent {
  font-family: 'Inter-SemiBold', sans-serif;
  background-color:var(--red);
  color: var(--gray-primary);
  padding: 0.8vh;
  border-radius: 5px;
}

.active {
  font-family: 'Inter-SemiBold', sans-serif;
  background-color: var(--yellow);
  color: var(--gray-primary);
  padding: 0.8vh;
  border-radius: 5px;
}

.expired {
  font-family: 'Inter-SemiBold', sans-serif;
  background-color: var(--green);
  color: var(--gray-primary);
  padding: 0.8vh;
  border-radius: 5px;
}

.punishment-row {
  background-color: #1d1d1e;
  color: var(--gray-primary);
  border-radius: 5px;
}

.category-text {
  font-family: 'Inter-SemiBold', sans-serif;
  color: var(--gray-primary);
  /* border-bottom: solid 5px var(--gray-primary); */
}

/* Navigation Modal */
.dark-modal-header {
  background-color: var(--black-primary);
}