:root {
  --color-background: #444b53;
  --color-background-light: #777;
  --color-white: #f5f5f5;
  --color-white-faded: #f5f5f580;
  --color-black: #0c0c0c;
  --color-pop: #fced00;
  --color-primary: #1e99ec;
  --color-primary-faded: #1e99ec80;
  --color-shadow: #00000040;
  --color-red: #ff3a3a;
  --color-red-faded: #ff3a3a80;
}

html {
  font-size: 14px;
}

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

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

/* 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);
  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;
}

/* login & signup & forgot pass & error & logout-btn & about */

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

.user-box:hover,
.error-box:hover,
.about-box:hover {
  box-shadow: none;
}

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

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

.user-box label {
  font-weight: 600;
}

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

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

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

.user-box .toggle-btn {
  margin-top: 0;
  margin-left: 1rem;
}

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

.user-box button {
  height: 2rem;
  margin-top: 1rem;
  width: 20%;
  background-color: var(--color-white);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 300ms ease;
}

.user-box button:hover {
  background-color: var(--color-white-faded);
}

.user-box .a-container,
.error-box .a-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  margin-top: 1rem;
  width: 4rem;
}

.user-box .forgot-pass {
  width: 100%;
  margin-top: 1rem;
}

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

.user-box .message {
  margin-top: 2rem;
  font-size: 12px;
  text-align: center;
}

.user-box .back-button,
.error-box .back-button {
  width: 100%;
  text-decoration: none;
  text-align: center;
  padding: 0.25rem;
  color: var(--color-white);
  background-color: var(--color-red);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 300ms ease;
}

.user-box .back-button:hover,
.error-box .back-button:hover {
  background-color: var(--color-red-faded);
}

.about-box h2 {
  font-size: 40px;
}

.about-box h3 {
  font-size: 25px;
}

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

/* focalCal */

.btn-container {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 2rem;
}

.img-container {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 2rem;
}

.btn {
  display: flex;
  align-items: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 0 2rem;
  height: 3rem;
  border-radius: 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

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

.img {
  background-color: var(--color-background-light);
  width: 512px;
  height: auto;
}

.selected-idx {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-pop);
}

.selected-idx .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50%;
  font-size: 2rem;
}

.selected-idx .res-value {
  display: flex;
  align-items: center;
  height: 50%;
  font-size: 6rem;
}

canvas {
  display: block;
  border: thin solid var(--color-primary);
  width: inherit;
  height: auto;
}

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

.res-container > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.widths {
  display: flex;
  width: 100%;
}

.widths .res-value {
  width: 33.33%;
  text-align: center;
  color: var(--color-pop);
  font-size: 6rem;
}

.res-container .text {
  color: var(--color-pop);
  font-size: 2rem;
}

/* Companies & Users */

.companies-container,
.users-container,
.registry-container {
  margin: 0 auto;
  width: 60%;
}

.companies-container a,
.users-container a {
  text-decoration: none;
  color: var(--color-white);
}

.companies-container .t-header,
.users-container .t-header,
.registry-container .t-header {
  display: flex;
  height: 3rem;
  margin: 0 0 1rem 0;
  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;
}

.companies-container .t-body,
.users-container .t-body,
.registry-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(
      #444b53 30%,
      rgba(0, 0, 0, 0)
    ) center top,
    /* Shadow Cover BOTTOM */
    linear-gradient(
      rgba(0, 0, 0, 0), 
      #444b53 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;
}

.companies-container .t-body :last-child,
.users-container .t-body :last-child,
.registry-container .t-body :last-child {
  margin: 0;
}

.company,
.user,
.entry {
  display: flex;
  align-items: center;
  background-color: var(--color-primary);
  border: thin solid var(--color-background-light);
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.company span,
.user span,
.entry span {
  padding: 0.5rem 0;
  text-transform: uppercase;
  font-weight: 500;
}

.h-small,
.h-med,
.h-long,
.b-small,
.b-med,
.b-long {
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.companies-container .h-small,
.companies-container .b-small,
.users-container .h-small,
.users-container .b-small {
  width: 10%;
}

.companies-container .h-med,
.companies-container .b-med,
.users-container .h-med,
.users-container .b-med {
  width: 20%;
}

.companies-container .h-long,
.companies-container .b-long {
  width: 70%;
}

.users-container .h-long,
.users-container .b-long {
  width: 50%;
}

.companies-container .b-buttons {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.company-add-btn,
.signup-btn,
.machine-add-btn {
  background-color: var(--color-background);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  transition: all 0.3s ease-out;
  text-decoration: none;
  color: var(--color-white);
}

.company-delete-btn,
.company-delete-button,
.company-detail-btn,
.user-delete-btn,
.user-delete-button,
.machine-delete-btn,
.entry-delete-btn,
.entry-delete-button {
  color: var(--color-white);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  transition: all 0.3s ease-out;
  border: none;
  cursor: pointer;
}

.company-delete-btn,
.company-delete-button,
.user-delete-btn,
.user-delete-button,
.machine-delete-btn,
.entry-delete-btn,
.entry-delete-button {
  background-color: var(--color-red);
}

.company-detail-btn {
  background-color: var(--color-background);
}

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

.company-add-btn:hover,
.signup-btn:hover,
.machine-add-btn:hover {
  background-color: var(--color-background-light);
}

.company-delete-btn:hover,
.company-delete-button:hover,
.user-delete-btn:hover,
.user-delete-button:hover,
.machine-delete-btn:hover,
.entry-delete-btn:hover,
.entry-delete-button:hover {
  background-color: var(--color-red-faded);
}

.company-detail-btn:hover {
  background-color: var(--color-background-light);
}

.add-company,
.add-machine {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-company .form-container,
.add-machine .form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30rem;
  padding: 2rem 5rem;
  border-radius: 2rem;
  background-color: var(--color-primary);
  box-shadow: 0 2rem 3rem var(--color-shadow);
  transition: all 300ms ease;
}

.add-company .form-container:hover,
.add-machine .form-container:hover {
  box-shadow: none;
}

.add-company .form-container form,
.add-machine .form-container form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
}

.add-company .form-container label,
.add-machine .form-container label {
  font-weight: 600;
  margin-bottom: 1rem;
}

.add-company .form-container input,
.add-machine .form-container input {
  width: 100%;
  height: 2rem;
  border-radius: 0.5rem;
  border: none;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  text-transform: uppercase;
}

.add-company .form-container button,
.add-machine .form-container button {
  height: 2rem;
  margin-top: 1rem;
  width: 20%;
  background-color: var(--color-white);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 300ms ease;
}

.add-company .form-container button:hover,
.add-machine .form-container button:hover {
  background-color: var(--color-white-faded);
}

.add-company .form-container .a-container,
.add-machine .form-container .a-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  margin-top: 1rem;
  width: 4rem;
}

.add-company .form-container .a-container .back-button,
.add-machine .form-container .a-container .back-button {
  width: 100%;
  text-decoration: none;
  text-align: center;
  padding: 0.25rem;
  color: var(--color-white);
  background-color: var(--color-red);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 300ms ease;
}

.add-company .form-container .a-container .back-button:hover,
.add-machine .form-container .a-container .back-button:hover {
  background-color: var(--color-red-faded);
}

/* Registry */

.registry-container .h-long,
.registry-container .b-long {
  width: 16%;
  text-align: center;
}

.registry-container .h-small,
.registry-container .b-small {
  width: 6%;
  text-align: center;
}

.registry-container .h-reg,
.registry-container .b-reg {
  width: 16.66%;
  text-align: center;
}

/* 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: 35vw;
  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-background);
}

.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;
}

/* modal detail */

#modal-detail .detail-machines {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 2rem;
}

#modal-detail .machines-header {
  display: flex;
  height: 2.5rem;
  background-color: var(--color-primary);
  border-radius: 0.75rem;
  font-weight: 600;
  color: var(--color-white);
  align-items: center;
  margin-bottom: 0.5rem;
}

#modal-detail .machines-body .machine {
  display: flex;
  padding: 0.25rem 0;
  border-radius: 0.75rem;
  border: solid thin var(--color-primary);
  margin-bottom: 0.5rem;
}

#modal-detail .m-long {
  width: 60%;
  text-align: center;
  text-transform: uppercase;
}

#modal-detail .m-small {
  width: 20%;
  text-align: center;
}

/* modal save */

#modal-save select {
  width: 60%;
  border-radius: 0.5rem;
  border: thin solid var(--color-primary);
  margin-bottom: 1rem;
  padding: 0.5rem;
  text-transform: uppercase;
}

#modal-save #save > * {
  pointer-events: none;
}

/* media queries */

@media (width <= 1000px) {
  body {
    flex-direction: column;
  }

  .sidebar {
    flex-direction: row;
  }

  .sidebar img {
    display: none;
  }

  .sidebar ul {
    display: flex;
    width: 80%;
    justify-content: space-around;
    padding: 0;
  }

  .sidebar ul li {
    padding: 0;
  }
  
  .logout-btn {
    bottom: auto !important;
    right: 2rem;
  }

  .title h1 {
    font-size: 1.8rem;
  }

  .btn {
    font-size: 0.8rem;
    padding: 0 1rem;
  }

  .img-container {
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
  }

  .img-container .img {
    margin-bottom: 1rem;
  }

  .img-container .selected-idx .text {
    font-size: 1.5rem;
  }

  .img-container .selected-idx .res-value {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
  }

  .res-container {
    display: none;
  }

  .modal .modal-content {
    width: 95vw;
  }

  #modal-save select {
    width: 90%;
  }

  .registry-container,
  .users-container,
  .companies-container {
    width: 100%;
  }

  .registry-container .t-body,
  .users-container .t-body,
  .companies-container .t-body {
    height: 60vh;
  }

  .registry-container .t-header #h-machine-serial,
  .registry-container .t-body .entry .b-machine-serial,
  .registry-container .t-header #h-user,
  .registry-container .t-body .entry .b-user {
    display: none;
  }

  .registry-container .t-body .b-company {
    font-size: 10px;
  }
  .registry-container .t-body .b-date {
    font-size: 8px;
  }
  .registry-container .t-body .b-machine-name {
    font-size: 9px;
  }

  .registry-container .h-long,
  .registry-container .b-long {
    width: 22.5%;
  }

  .registry-container .h-small,
  .registry-container .b-small {
    width: 10%;
  }

  .users-container .t-header #h-mail,
  .users-container .t-body .user .b-mail {
    display: none;
  }

  .users-container .h-med,
  .users-container .b-med {
    width: 30%;
  }

  .user-box,
  .error-box,
  .about-box {
    width: 100%;
    padding: 2rem;
  }

  .companies-container .h-small,
  .companies-container .b-small {
    width: 20%;
  }

  .companies-container .h-med,
  .companies-container .b-med {
    width: 25%;
  }

  .companies-container .h-long,
  .companies-container .b-long {
    width: 55%;
  }

  .add-company .form-container {
    padding: 2rem;
    width: 100%;
  }

  #modal-detail .detail-machines {
    padding: 0;
  }

  .add-machine .form-container {
    padding: 2rem;
    width: 100%;
  }
}

@media (width <= 512px) {
  .img-container .img {
    width: 100%;
  }
}