:root {
  --color-background: #444b53;
  --color-background-light: #777;
  --color-white: #f5f5f5;
  --color-white-faded: #f5f5f580;
  --color-black: #0c0c0c;
  --color-primary: #1e99ec;
  --color-primary-faded: #1e99ec80;
  --color-shadow: #00000040;
  --color-red: #ff3a3a;
  --color-red-faded: #ff3a3a80;
  --color-orange: #ffbb00;
  --color-yellow: #eeff00;
  --color-green: #00ff37;
}

html {
  font-size: 14px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--color-background);
  display: flex;
}

input:read-only,
textarea:read-only {
  background-color: var(--color-white-faded);
}

input:disabled,
textarea:disabled {
  color: var(--color-black);
}

a.disabled {
  pointer-events: none;
}

/* Color coded case status */

.ini {
  background-color: var(--color-red) !important;
  color: var(--color-white);
}

.resol {
  background-color: var(--color-orange) !important;
  color: var(--color-white);
}

.monit {
  background-color: var(--color-yellow) !important;
}

.res {
  background-color: var(--color-green) !important;
}

.closed {
  background-color: var(--color-primary) !important;
  color: var(--color-white);
}


/* Sidebar container */

.sidebar-container {
  padding: 1rem;
  background: var(--color-primary);
  z-index: 50;
}

.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar img {
  width: 36px;
  height: 36px;
}

.sidebar ul {
  list-style-type: none;
  padding: 1rem 0;
}

.sidebar ul li {
  padding: 2rem 0;
}

.sidebar a {
  font-size: 20px;
  color: var(--color-white);
  transition: all 300ms ease;
}

.sidebar .logout-btn {
  position: absolute;
  bottom: 2rem;
}

.sidebar a:hover{
  color: var(--color-background);
}

.sidebar .logout-btn:hover {
  color: var(--color-red);
}

.sidebar a.active {
  color: var(--color-background);
}

.sidebar .logout-btn.active {
  color: var(--color-red);
}

/* Main container */

.container {
  flex: 1;
  background-color: var(--color-background);
  background-image: url("../assets/background.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 1rem;
  font-family: sans-serif;
  color: var(--color-white);
  line-height: 1.6;
  user-select: none;
}

h1 {
  font-size: 2rem;
}

.hidden {
  display: none;
}

.disabled {
  cursor: not-allowed !important;
}

.title {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

/* Buttons */

.btn {
  color: var(--color-white);
  text-align: center;
  border: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease-out;
  text-decoration: none;
}

.btn > * {
  pointer-events: none;
}

.del-btn,
.back-btn {
  background-color: var(--color-red);
}

.del-btn:hover,
.back-btn:hover {
  background-color: var(--color-red-faded);
}

.submit-btn {
  background-color: var(--color-primary);
}

.submit-btn:hover {
  background-color: var(--color-primary-faded);
}

.add-btn,
.admin-btn,
.lock-btn,
.unlock-btn {
  background-color: var(--color-background);
  font-weight: 600;
}

.add-btn:hover,
.admin-btn:hover,
.lock-btn:hover,
.unlock-btn:hover {
  background-color: var(--color-background-light);
}

.login-btn,
.toggle-btn {
  color: var(--color-black);
  background-color: var(--color-white);
}

.login-btn:hover,
.toggle-btn:hover {
  background-color: var(--color-white-faded);
}

.toggle-btn {
  margin-left: 1rem;
  height: 2rem;
}

.admin-btn {
  margin-bottom: 2rem;
  font-weight: 600;
}

/* Box */

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  height: min-content;
  margin: auto;
  padding: 2rem 3rem;
  border-radius: 2rem;
  background-color: var(--color-primary);
  box-shadow: 0 2rem 3rem var(--color-shadow);
  transition: all 300ms ease;
}

.box-wide {
  width: 25%;
}

.box:hover {
  box-shadow: none;
}

.box .title {
  margin-bottom: 1.5rem;
}

.box form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.box label {
  font-weight: 600;
}

.box input,
.box select {
  width: 100%;
  height: 2rem;
  border-radius: 0.5rem;
  border: none;
  margin-bottom: 1rem;
  padding: 0.5rem;
  text-transform: uppercase;
}

.box .pass {
  text-transform: none;
}

.box .password-span {
  display: flex;
  width: 100%;
}

.box .a-container,
.box .forgot-pass {
  display: flex;
  margin-top: 1rem;
}

.box .forgot-pass a {
  color: var(--color-white);
  font-weight: 600;
}

.box .message {
  font-size: 12px;
  text-align: center;
}

.box .message p {
  margin-top: 2rem;
}

.box .bg-txt {
  font-size: 40px;
  font-weight: 600;
}

.box .md-txt {
  font-size: 20px;
}

.box .sm-txt {
  font-size: 15px;
  margin-top: 2rem;
}

/* Lists */

.list-container {
  margin: 0 auto;
  width: 80%;
}

.list-container .t-header {
  display: flex;
  margin-bottom: 1rem;
  align-items: center;
  background-color: var(--color-primary);
  border: thin solid var(--color-background-light);
  border-radius: 1rem;
  color: var(--color-white);
  font-weight: 600;
  padding: 0 1rem;
}

.list-container .t-header span {
  padding: 0.75rem 0;
}

.list-container .t-body {
  display: flex;
  flex-direction: column;
  -ms-overflow-style: none;
  scrollbar-width: none;
  height: 52rem;
  overflow: auto;
  background:
    /* Shadow Cover TOP */
    linear-gradient(
      #000f25 30%,
      rgba(0, 0, 0, 0)
    ) center top,
    /* Shadow Cover BOTTOM */
    linear-gradient(
      rgba(0, 0, 0, 0), 
      #000f25 70%
    ) center bottom,
    /* Shadow TOP */
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 1),
      rgba(0, 0, 0, 0)
    ) center top,
    /* Shadow BOTTOM */
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(0, 0, 0, 1),
      rgba(0, 0, 0, 0)
    ) center bottom;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

.list-container .t-body :last-child {
  margin: 0;
}

.list-container .item {
  display: flex;
  align-items: center;
  background-color: var(--color-primary);
  border: thin solid var(--color-background-light);
  border-radius: 1rem;
  margin-bottom: 1rem;
  padding: 0.3rem 1rem;
}

.list-container .item span {
  text-transform: uppercase;
  font-weight: 500;
}

.list-container .item span a {
  color: white;
  font-weight: 600;
  text-decoration: underline;
}

.list-container .sm,
.list-container .md,
.list-container .lg {
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Registry */

.registry .sm {
  display: flex;
  justify-content: space-between;
  width: 5%;
}

.registry .md {
  width: 12.5%;
}

.registry .lg {
  flex-shrink: 0;
  flex-grow: 1;
}

/* Users & Admin List */

.users .sm,
.admin-list .sm {
  width: 5%;
}

.users .md,
.admin-list .md {
  width: 15%;
}

.users .lg,
.admin-list .lg {
  flex-shrink: 0;
  flex-grow: 1;
}

/* Entries */

.entry {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 70%;
  margin: 0 auto;
}

.entry label,
.entry a {
  font-weight: 600;
  margin-right: 0.5rem;
}

.entry input,
.entry select {
  padding: 0.5rem;
  border: thin solid var(--color-primary);
  border-radius: 0.5rem;
  text-transform: uppercase;
  text-align: center;
}

.top,
.bot,
.middle {
  display: flex;
  flex-direction: row;
}

.top {
  margin-bottom: 1rem;
}

.middle {
  padding-top: 1.5rem;
  border-top: thin solid var(--color-white-faded);
}

.bot {
  height: 30%;
}

.top .left,
.top .center,
.top .right {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33.3%;
}

.top .input-container {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem;;
}

.top .input-container label {
  text-align: right;
  width: 25%;
}

.top .input-container input,
.top .input-container select {
  flex-shrink: 0;
  flex-grow: 1;
}

.top .right .input-container {
  justify-content: flex-end;
}

.middle .left {
  display: flex;
  flex-shrink: 0;
  flex-grow: 1;
}

.middle .right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10%;
}

.middle .input-container {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem;
}

.middle .input-container #subject {
  text-align: left;
}

.middle .left .input-container label {
  text-align: right;
  width: 8.5%;
}

.middle .left .input-container input {
  flex-shrink: 0;
  flex-grow: 1;
}

.middle .right .input-container button,
.middle .right .input-container a {
  width: 100%;
}

.bot .input-container {
  display: flex;
  flex-direction: row;
  padding: 1rem;
  height: 100%;
  width: 100%;
}

.bot .input-container label {
  text-align: right;
  width: 7.75%;
}

.bot .input-container textarea {
  padding: 1rem;
  border: thin solid var(--color-primary);
  border-radius: 0.5rem;
  font-size: 1rem;
  height: 100%;
  resize: none;
  flex-shrink: 0;
  flex-grow: 1;
}

.bot .a-container {
  display: flex;
  width: 100%;
  height: fit-content;
  justify-content: flex-end;
  padding: 1rem;
}

.bot .a-container a {
  font-size: 18px;
  width: 5%;
  margin: 0;
}

/* modals */

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  padding-top: 20vh;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  position: relative;
  background-color: var(--color-white);
  margin: auto;
  padding: 0;
  width: fit-content;
  border-radius: 1.5rem;
}

.modal-header {
  display: flex;
  padding: 0.5rem 1rem;
  justify-content: space-between;
  background-color: var(--color-primary);
  border-radius: 1.5rem 1.5rem 0 0;
  text-transform: uppercase;
}

.modal .close {
  border: none;
  outline: none;
  padding: 0;
  background-color: inherit;
  color: var(--color-white);
  font-weight: 600;
  cursor: pointer;
}

.modal .close:hover {
  color: var(--color-red);
}

.modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  color: var(--color-black);
}

.modal-body p {
  white-space: pre-line;
}

.modal-body a {
  margin-top: 1rem;
}