/* ===============================================================
------------------ <<<[[[ MainStyle.css ]]]>>> -------------------
Before changes here take a look at the style guide here: https://github.com/CongenialData/fordonsjournal-webb/wiki/Stilguide

/* ============================================================ */
/* ======================== <[ Global ]> ====================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

/* ------------------------------------------------------------ */
/* -------------- <[ Global colour variables ]> --------------- */
:root {
  --colour-dark-hue: #112442;
  --colour-blue-dark-hue: #a6b3c4;
  --colour-blue-light-hue: #e9f3f6;
  --colour-light-hue: #ffffff;
  --colour-orange-hue: #ff8000;
  --colour-red-hue: #ea2a15;
}

/* ------------------------------------------------------------ */
/* ------------------- <[ Global classes ]> ------------------- */
.no-margin {
  margin: 0 !important;
}
.no-margin-bottom {
  margin-bottom: 0 !important;
}
.no-margin-top {
  margin-top: 0 !important;
}
.full-width {
  width: calc(100% - 2rem);
}
.full-width-with-icon {
  width: calc(100% - 42px);
}
.full-width-no-margin {
  width: 100%;
}
.half-width {
  width: calc(50% - 2rem);
}
.auto-width {
  width: auto;
}
.hidden {
  display: none !important;
}
.not-shown {
  opacity: 0;
}
.center {
  text-align: center !important;
  margin: 0 auto;
}
span.emphasis {
  font-weight: 500;
}
.sorted {
  font-weight: 500;
}
.left {
  float: left;
}
.right {
  float: right;
  text-align: end;
}
.inline {
  display: inline;
}
.hover {
  cursor: pointer;
}
.color-dark-hue {
  color: var(--colour-dark-hue);
}
.color-blue-dark-hue {
  color: var(--colour-blue-dark-hue);
}
.color-blue-light-hue {
  color: var(--colour-blue-light-hue);
}
.color-light-hue {
  color: var(--colour-light-hue);
}
.color-orange-hue {
  color: var(--colour-orange-hue);
}
.color-red-hue {
  color: var(--colour-red-hue);
}
.column-1-3 {
  grid-column: 1/3;
}
.row-span-2 {
  grid-row: span 2;
}
.error {
  color: var(--colour-red-hue);
}

@media screen and (max-width: 457px) {
  .half-width {
    width: calc(100% - 2rem);
  }
  .column-1-3 {
    grid-column: 1/2;
  }
}

/* ------------------------------------------------------------ */
/* ------------------ <[ Global components ]> ----------------- */
body {
  background-color: var(--colour-light-hue);
  width: 100%;
}
main {
  width: 90%;
  max-width: 1024px;
  margin: 1rem auto;
}
.card {
  border-radius: 15px;
  background-color: var(--colour-blue-light-hue);
  margin-left: 1rem;
  margin-right: 1rem;
}
.background-card-500 {
  margin: 2rem auto;
  width: 95%;
  max-width: 500px;
  padding: 1rem;
}
.background-card-600 {
  margin: 2rem auto;
  width: 95%;
  max-width: 600px;
  padding: 1rem;
}

.background-card-980 {
  margin: 2rem auto;
  width: 95%;
  max-width: 980px;
  padding: 1rem 2rem 2rem;
}
.overlay {
  cursor: pointer;
  height: 100%;
  width: 100%;
  z-index: 1000;
  background-color: var(--colour-light-hue);
  position: fixed;
  top: 0;
  opacity: 0.9;
  backdrop-filter: blur(3px);
}
.modal {
  cursor: pointer;
  z-index: 2000;
  border-radius: 15px;
  border: 1px solid var(--colour-blue-dark-hue);
  background-color: var(--colour-light-hue);
  position: fixed;
  top: 40px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 95%;
  max-width: 500px;
  padding: 2rem;
}
.activity-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 2rem;
  padding-top: 1rem;
}
.activity-form > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
#changed-by-admin-info {
  margin: 0 auto;
  max-width: fit-content;
  font-size: 0.9rem;
  margin-top: 1rem;
}
.orange-title {
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background-color: var(--colour-dark-hue);
  border: 1px solid var(--colour-light-hue);
  color: var(--colour-orange-hue);
  margin: 2rem auto;
  width: max-content;
  max-width: 500px;
}

.update-card {
  position: fixed;
  top: 0;
  left: 50%;
  width: 95%;
  max-width: 500px;
  margin-left: -250px;
  background: var(--colour-orange-hue);
  padding: 10px 20px 10px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  color: var(--colour-dark-hue);
  z-index: 999;
}

@media screen and (max-width: 760px) {
  .activity-form > div {
    grid-template-columns: 1fr;
  }
  .activity-form > div {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
}
@media screen and (max-width: 510px) {
  .background-card-500 {
    margin: 2rem auto;
    padding: 1rem;
  }
  .background-card-980 {
    margin: 0 auto 1rem;
    padding: 1rem;
  }
  .activity-form {
    margin-top: 1rem;
  }
}
/* ============================================================ */
/* ===================== <[ Structure ]> ====================== */
/* header#driver-update, header#dashboard, header#driver-activity-header, header#admin-destination, header#admin-header{
  margin: 0 auto;
  width: 95%;
  max-width: 500px;
  display: grid;
  height: 150px;
} */
header #customer-top-logo,
header #top-logo-link {
  grid-area: top-logo;
  justify-self: center;
}
header #back-button {
  grid-area: back;
}
header hr {
  grid-area: hr;
}
header #user-info {
  grid-area: user-info;
  justify-self: center;
}
header {
  margin: 10px auto 0;
  width: 95%;
  display: grid;
}
header #link-div {
  grid-area: link-div;
  justify-self: end;
}
header#logo-userInfo {
  grid-template-columns: 1fr;
  grid-template-rows: 80px 2px max-content;
  grid-row-gap: 5px;
  align-items: center;
  grid-template-areas:
    'top-logo'
    'hr'
    'user-info';
}
header#back-logo-userInfo {
  grid-template-columns: 130px auto 130px;
  grid-template-rows: max-content 2px max-content;
  grid-row-gap: 5px;
  align-items: center;
  grid-template-areas:
    'back top-logo .'
    'hr hr hr'
    'user-info user-info user-info';
}
header#back-logo-settings-userInfo {
  grid-template-columns: 190px auto 190px;
  grid-template-rows: max-content 2px max-content;
  grid-row-gap: 5px;
  align-items: center;
  grid-template-areas:
    'back top-logo link-div'
    'hr hr hr'
    'user-info user-info user-info';
}

header img {
  max-width: 100%;
  height: 80px;
}

footer {
  margin: 2rem auto;
  border-top: 1px solid var(--colour-orange-hue);
  padding: 1rem 1rem;
  width: 95%;
  max-width: 1024px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 0.5rem;
}
@media screen and (max-width: 670px) {
  footer {
    font-size: 0.8rem;
    grid-template-columns: 1fr;
  }
  footer .right {
    text-align: left;
  }
  header#back-logo-userInfo img {
    display: none;
  }
  header#back-logo-userInfo {
    padding-bottom: 10px;
    grid-template-columns: 1fr;
    grid-template-areas:
      'back'
      'hr'
      'user-info';
  }
  header#back-logo-settings-userInfo {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content max-content 2px max-content;
    grid-row-gap: 5px;
    align-items: center;
    grid-template-areas:
      'back link-div'
      'top-logo top-logo'
      'hr hr'
      'user-info user-info';
  }
  header #user-info {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------ */
/* ------------------------ <[ Login ]> ----------------------- */

h4.no-margin {
  text-align: center;
}

#index.header {
  width: 80%;
  grid-template-areas:
    'top-logo'
    'hr'
    'h1';
}
.auth-logo {
  max-height: 200px;
  height: auto;
  width: 100%;
}
#login-method {
  /* Obs: email only, as of now */
  justify-self: center;
  text-align: center;
}
.login-tab {
  background-color: var(--color-white-hue);
  padding: 20px 30px 5px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border: 2px solid var(--color-grey-hue);
  border-bottom: none;
  text-align: center;
  cursor: pointer;
}
.login-tab.active {
  color: var(--color-blue-hue);
}
.login-tab.inactive {
  color: var(--color-grey-shade);
  border-bottom: 1px solid var(--color-grey-hue);
  background-color: var(--color-grey-tint);
}
.auth-card {
  justify-items: center;
  background-color: var(--colour-blue-light-hue);
  padding: 20px;
  width: 60%;
  margin: 0 auto;
  max-width: 500px;
  border-radius: 15px;
  /*border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;*/
  border: 2px solid var(--color-grey-hue);
  border-top: none;
}
.auth {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}
#auth-page-title {
  padding: 1rem;
  text-align: center;
  color: #a6b3c4;
  font-size: x-large;
}
#email-auth-desc {
  text-align: center;
}
#login-form-email {
  display: grid;
  /*justify-items: center;*/
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}
#login-form-email .error {
  grid-column: 1/2;
}
#login-form-email {
  grid-column: 1/2;
  justify-self: center;
  width: 100%;
}
#button-area {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  column-gap: 2rem;
}
#reset-button-div {
  width: 100%;
}
#submit-button-div {
  width: 100%;
}
#submit-button-email {
  width: 100%;
  height: 100%;
}
#password-reset-button {
  width: 100%;
  background-color: transparent;
  color: var(--colour-dark-hue);
  border: 0px;
}
#password-reset-button:hover {
  color: var(--colour-blue-dark-hue);
  border-color: var(--colour-blue-dark-hue);
}
@media screen and (max-width: 800px) {
  .auth-card {
    /* CHECK: Can this be made more responsive? */
    width: 90%;
  }
  #login-form-email {
    grid-template-columns: 1fr;
  }
  #login-form-email .error {
    grid-column: 1/2;
  }
  #login-form-email {
    grid-column: 1/2;
  }
}

/* ------------------------------------------------------------ */
/* ------------------- <[ Start work shift ]> ----------------- */
#start-work-shift {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1rem;
}
@media screen and (max-width: 575px) {
  #start-work-shift {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------ */
/* -------------------- <[ Update Milage ]> ------------------- */
#driver-update #info {
  margin: 0 auto;
  display: grid;
  grid-template-columns: max-content max-content;
  grid-column-gap: 2rem;
}
@media screen and (max-width: 575px) {
  #driver-update #info {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 2rem;
  }
}

/* ------------------------------------------------------------ */
/* ------------------ <[ Driver Dashboard ]> ------------------ */
#dashboard #info {
  margin: 0 auto;
}
#select-vehicle-input.dashboard {
  margin: 0;
}
#select-activity {
  text-align: center;
}
#select-activity-input {
  margin: 1rem 0 2rem;
}
#quick-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#last-logged-activities {
  margin-top: 1rem;
  margin-bottom: 2rem;
  min-height: 262px;
}
#activities {
  margin: 0 auto;
  max-width: fit-content;
  display: grid;
  grid-gap: 0.5rem;
}
#activities > div {
  display: grid;
  grid-template-columns: 170px fit-content(200px) 145px fit-content(200px) 35px 35px;
  grid-gap: 0.5rem;
  align-items: center;
  font-size: 1.2rem;
}
.activity-row div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#stop-break-button {
  z-index: 1500;
  position: fixed;
  top: 20%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
.overlay.stop-break {
  cursor: auto;
}

#driver-inbox-link > #unread-message-badge {
  top: -27px;
  display: inline-block;
  width: 49px;
  height: 36px;
}

#change-number-of-activities-div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  padding: 20px;
}
#change-number-of-activities-div span {
  justify-self: end;
}
#change-number-of-activities-div form {
  justify-self: start;
}

@media screen and (max-width: 457px) {
  #select-activity {
    padding-top: 1rem;
  }
  #activities {
    grid-gap: 1, 5rem;
  }
  #dashboard #info {
    display: grid;
    grid-template-columns: 1fr;
  }
  #activities > div {
    font-size: 1rem;
    grid-template-columns: 158px fit-content(200px);
    grid-gap: 0rem;
  }
  #quick-buttons {
    display: grid;
    grid-template-columns: 1fr;
  }
}
/* ------------------------------------------------------------ */
/* --------------------- <[ Activities ]> --------------------- */
.activity-form > div.inputs input,
.activity-form > div.buttons button,
.activity-form > div.inputs select {
  width: calc(100% - 45px);
}
div.inputs span input,
div.inputs span select {
  float: right;
}
div.buttons {
  justify-items: end;
}

#sick-form #from-date {
  grid-area: from-date;
}
#sick-form #to-date {
  grid-area: to-date;
}
#sick-form #from-date-input {
  grid-area: from-date-input;
}
#sick-form #to-date-input {
  grid-area: to-date-input;
}
#sick-form #comment-input {
  grid-area: comment-input;
}
#sick-form .inputs {
  grid-template-areas:
    'from-date to-date'
    'from-date-input to-date-input'
    'comment-input comment-input';
}

#break-form #from-date {
  grid-area: from-date;
}
#break-form #to-date {
  grid-area: to-date;
}
#break-form #from-date-input {
  grid-area: from-date-input;
}
#break-form #to-date-input {
  grid-area: to-date-input;
}
#break-form .inputs {
  grid-template-areas:
    'from-date to-date'
    'from-date-input to-date-input';
}

#work-shift-form #from-date {
  grid-area: from-date;
}
#work-shift-form #to-date {
  grid-area: to-date;
}
#work-shift-form #from-date-input {
  grid-area: from-date-input;
}
#work-shift-form #to-date-input {
  grid-area: to-date-input;
}
#work-shift-form #comment-input {
  grid-area: comment-input;
}
#work-shift-form .inputs {
  grid-template-areas:
    'from-date to-date'
    'from-date-input to-date-input'
    'comment-input comment-input';
}

@media screen and (max-width: 457px) {
  .activity-form > div.buttons button {
    width: 100%;
  }
  #sick-form .inputs {
    grid-template-areas:
      'from-date'
      'from-date-input'
      'to-date'
      'to-date-input'
      'comment-input';
  }
  #work-shift-form .inputs {
    grid-template-areas:
      'from-date'
      'from-date-input'
      'to-date'
      'to-date-input'
      'comment-input';
  }
  #break-form .inputs {
    grid-template-areas:
      'from-date'
      'from-date-input'
      'to-date'
      'to-date-input';
  }
}
/* ------------------------------------------------------------ */
/* -------------------- <[ Privacy policy ]> ------------------ */
main#privacy-policy {
  margin: 0 auto;
  max-width: 800px;
}

/* ------------------------------------------------------------ */
/* ------------------- <[ Admin dashboard ]> ------------------ */
main#admin-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
  /* max-width: 70%; */
  justify-items: center;
}
#messages-button {
  font-size: 2rem;
}
#unread-message-badge {
  background-color: var(--colour-orange-hue);
  width: 58px;
  height: 48px;
  border-radius: 24px;
  text-align: center;
  position: relative;
  top: -180px;
  left: 110px;
}
/* main#admin-dashboard.wider-dashboard {
  grid-template-columns: 1fr 1fr 1fr;
} */

@media screen and (max-width: 450px) {
  main#admin-dashboard {
    display: grid;
    grid-template-columns: 1fr;
    max-width: max-content;
  }
}

/* ------------------------------------------------------------ */
/* -------------------- <[ Admin settings ]> ------------------ */
#table-of-contents {
  display: grid;
  justify-items: center;
}
#gas-stations-list,
#on-leave-reasons-list,
#vehicle-reminders,
#tachograph-reminders {
  margin-bottom: 1.5rem;
}
.option-row {
  display: grid;
  grid-template-columns: auto 35px 35px;
  padding: 0.3rem 2rem;
}
.option-row h5 {
  padding: 6px;
}
#add-gas-station,
#add-on-leave-reason,
#add-vehicle-inspection-reminder,
#add-tachograph-inspection-reminder {
  display: block;
  padding: 0.3rem 2rem;
  font-size: 1rem;
  cursor: pointer;
}
#add-gas-station:hover,
#add-on-leave-reason:hover,
#add-vehicle-inspection-reminder:hover,
#add-tachograph-inspection-reminder:hover {
  text-decoration: underline;
}
#on-leave-reasons hr {
  margin: 10px 0;
}
label[for='other-reason'] {
  font-size: 1.4rem;
  margin: 10px 10px 10px 0;
}
#vehicle-reminders,
#tachograph-reminders {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 0.5rem;
}
.reminder-row {
  display: grid;
  grid-template-columns: 165px auto 60px 25px;
  align-items: center;
}
#inspection-reminders hr {
}
#inspection-reminders h4 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0px;
}
#report-time {
  display: inline;
}
#report-time span {
  margin-left: 20px;
}

/* ------------------------------------------------------------ */
/* ---------------------- <[ User list ]> --------------------- */
#users-info #number-of-users {
  grid-area: number-of-users;
}
#users-info #add-user {
  grid-area: add-user;
  align-self: center;
}

#users-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: '. number-of-users add-user';
  justify-items: center;
}
#number-of-users {
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background-color: var(--colour-dark-hue);
  border: 1px solid var(--colour-light-hue);
  color: var(--colour-orange-hue);
  margin: 2rem auto;
  width: max-content;
  max-width: 500px;
}
#user-list-container {
  overflow-x: scroll;
}
#user-list {
  margin: 0 auto;
  padding: 0 0 1rem;
  width: max-content;
}
.user-row {
  list-style-type: none;
  display: grid;
  padding: 0.2rem 0;
  grid-template-columns: 100px 120px 130px 215px 110px 90px 35px 35px 35px 35px;
  grid-gap: 0.8rem;
  height: 68px;
  align-items: center;
}
.user-row:nth-of-type(even) {
  background-color: var(--colour-blue-light-hue);
}
.user-row span {
  padding: 0.5rem;
}
.user-row select {
  margin-left: 0;
  margin-right: 0;
}
.isActive {
  padding: 0;
}
.inactive-user,
.inactive-vehicle {
  opacity: 0.5;
}
.header-row {
  font-weight: 500;
  font-size: 1.2rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--colour-dark-hue);
  position: sticky;
  top: 0px;
  background-color: var(--colour-light-hue);
}

#select-user-role-input,
#select-driver-role-input,
#select-accountant-redirect {
  margin: 0;
}
#is-active {
  display: grid;
  grid-template-columns: 50px auto 50px max-content 50px;
  align-items: center;
  font-size: 1.2rem;
  color: var(--colour-dark-hue);
}
#active-users-switch {
  font-size: 1rem;
  align-self: center;
  display: grid;
  grid-template-columns: max-content max-content max-content;
  column-gap: 0.5rem;
  align-items: center;
  margin: 0 auto;
  width: max-content;
  padding: 10px;
}

@media screen and (max-width: 670px) {
  #users-info {
    grid-template-columns: 1fr;
    grid-template-areas:
      'number-of-users'
      'add-user';
  }
}

/* -------------------- <[ Vehicle list ]> -------------------- */
main#vehicles {
  max-width: max-content;
}
#vehicles-info #number-of-vehicles {
  grid-area: number-of-vehicles;
}
#vehicles-info #add-vehicle {
  grid-area: add-vehicle;
}

#vehicles-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: '. number-of-vehicles add-vehicle';
  justify-items: center;
}
#vehicle-list {
  margin: 0 auto;
  padding: 0 0 1rem;
  overflow-x: scroll;
}
#vehicle-list-div {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  overflow-x: scroll;
}

.vehicle-row {
  list-style-type: none;
  display: grid;
  padding: 0.2rem 0;
  grid-template-columns: 100px 100px 100px 100px 105px 110px 130px 40px 40px 35px 35px 35px;
  grid-gap: 0.8rem;
  height: 68px;
  align-items: center;
}
.vehicle-row.flespi-column {
  grid-template-columns: 100px 100px 100px 100px 105px 100px 100px 40px 40px 100px 35px 35px 35px 35px;
}

.vehicle-row:nth-of-type(even) {
  background-color: var(--colour-blue-light-hue);
}
.vehicle-row span {
  padding: 0.5rem;
}
.vehicle-row span#inspectedDate,
.vehicle-row span#inspectedTachographDate {
  font-size: 0.9rem;
}
.vehicle-row select {
  margin-left: 0;
  margin-right: 0;
}
.vehicle-row #checkbox,
.vehicle-row #meter-reading {
  justify-self: center;
}
.vehicle-header-row {
  font-weight: 500;
  font-size: 1.2rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--colour-dark-hue);
  position: sticky;
  top: 0px;
  background-color: var(--colour-light-hue);
}
#inspection-header {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}
#inspection-header span:first-of-type {
  grid-column: span 2;
}
#inspection-header,
#inspection-header span {
  padding: 0;
}
@media screen and (max-width: 670px) {
  #vehicles-info {
    grid-template-columns: 1fr;
    grid-template-areas:
      'number-of-vehicles'
      'add-vehicle';
  }
}

/* ---------------------------------- <[ Add vehicle ]> ---------------------------------- */
#comment,
input#meter-reading {
  width: 50px;
  margin-top: 15px;
}

/* ------------------------------------------------------------ */
/* ---------------- <[ Admin activity list ]> ----------------- */
#activities-top {
  display: grid;
  grid-template-columns: 235px auto 235px;
  align-items: center;
  grid-template-areas: 'add-activity activity-headline view-quantity';
}
#activities-top > a {
  grid-area: add-activity;
}
#activities-top > h3 {
  grid-area: activity-headline;
}
#activities-top > span {
  grid-area: view-quantity;
}
#filter {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  grid-gap: 1rem;
  width: 100%;
  padding: 10px;
}
#activity-list {
  list-style: none;
  padding: 0;
}
.admin-activity-row {
  display: grid;
  grid-template-columns: 150px 1fr 35px 1fr 0.75fr 35px 35px 35px 35px;
  grid-gap: 0.5rem;
  width: 100%;
  align-items: center;
}
.admin-activity-header-row {
  font-weight: 500;
  font-size: 1.2rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--colour-dark-hue);
}

@media screen and (max-width: 670px) {
  #activities-top {
    grid-template-columns: 1fr;
  }
  #filter {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }
  .admin-activity-row #date {
    grid-column: 1/3;
  }
  .admin-activity-row #user {
    grid-column: 3/5;
  }
  .admin-activity-row #edit {
    grid-column: 2/3;
    justify-self: center;
  }
  .admin-activity-row #delete {
    grid-column: 3/4;
    justify-self: center;
  }
  .admin-activity-row {
    grid-template-columns: 25px 1fr 1fr 25px;
    grid-gap: 0.5rem;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--colour-blue-dark-hue);
  }
}

/* ------------------------------------------------------------ */
/* ---------------------- <[ Reports ]> ----------------------- */
main#reports {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: max-content;
}
#reports > a {
  padding: 1.5rem 0;
  line-height: 26px;
  text-align: center;
  font-size: 2rem;
  grid-template-rows: 100px 50px;
}

@media screen and (max-width: 500px) {
  main#reports {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------ */
/* ------------------- <[ Driver reports ]> ------------------- */
form#date-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#quick-menu {
  padding: 10px 10px 0;
  width: max-content;
  margin: 0 auto;
}
.driver-report-card {
  border-bottom: 3px solid var(--colour-dark-hue);
  display: grid;
}
.driver-report-list {
  margin: 0 auto;
  padding: 0 0 1rem;
}
.driver-report-row {
  list-style-type: none;
  display: grid;
  padding: 0.1rem 0;
  grid-template-columns: 110px 140px 90px 90px 80px 80px 80px 80px 130px 25px 55px 35px 45px;
  grid-gap: 0.1rem;
  align-items: center;
}
.driver-report-row input {
  justify-self: center;
}
.driver-report-row input[type='number'] {
  width: 50px;
  padding: 0 7px;
  margin: 0px;
}
.driver-report-row input[type='number']:disabled {
  background: var(--colour-blue-dark-hue);
}
.driver-report-row.even,
.date-span.even {
  background-color: var(--colour-light-hue);
}
.driver-report-row.odd,
.date-span.odd {
  background-color: var(--colour-blue-light-hue);
}
.driver-report-row span {
  padding: 0.2rem 0.5rem;
}
.driver-report-header-row {
  font-weight: 500;
  font-size: 1.2rem;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid var(--colour-dark-hue);
  position: sticky;
  top: 0px;
  background-color: var(--colour-light-hue);
  z-index: 10;
  justify-items: center;
}
#date-header {
  background-color: var(--colour-light-hue);
  width: 100%;
}
.week-total-number {
  background-color: var(--colour-blue-dark-hue);
}
#date-header,
.date-span,
.week-total-number {
  position: sticky;
  left: 0px;
}
#more-time-header {
  justify-self: left;
  grid-column: 10/14;
}
.saturday {
  background-color: #ffe6cc !important;
}
.sunday {
  background-color: #ffcc99 !important;
}
.day-cell {
  cursor: pointer;
}
.multiple-work-shifts {
  font-size: 0.8rem;
  vertical-align: text-top;
}
.zero-time {
  color: var(--colour-blue-dark-hue);
}
.no-activities {
  color: var(--colour-orange-hue);
  text-align: center;
  padding-bottom: 2rem;
}
#summation {
  margin: 0 auto;
  padding: 0 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2rem;
}
.summation-card {
  background-color: var(--colour-blue-light-hue);
  padding: 1rem;
  border-radius: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.summation-card > h5 {
  text-align: right;
}
.summation-quantity {
  font-weight: 500;
  color: var(--colour-orange-hue);
}
.week-total-row {
  font-weight: 500;
  background-color: var(--colour-blue-dark-hue) !important;
  color: var(--colour-light-hue);
}
.week-total-number {
  grid-column: 1/2;
  text-align: right;
}
.week-total-text {
  grid-column: 2/9;
  text-align: right;
}
.week-total-more-time {
  grid-column: 10 / 14;
}
#pdf {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  align-items: center;
}
#send-mail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
.activityList {
  list-style: none;
  padding-left: 125px;
}
.activityList li {
  display: grid;
  grid-template-columns: auto max-content auto;
  grid-column-gap: 0.5rem;
  align-items: center;
}
.sick-day,
.auto-day {
  font-size: 1rem !important;
}

@media screen and (max-width: 670px) {
  form#date-range {
    grid-template-columns: 1fr;
  }
  #quick-menu {
    width: 100%;
  }
  #summation {
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
  }
}
@media screen and (max-width: 450px) {
  #summation {
    grid-template-columns: 1fr;
  }
  .summation-card h4 {
    grid-column: 1/3;
  }
}
@media screen and (max-width: 1187px) {
  .orange-title {
    margin: 1rem;
    position: sticky;
    left: 2rem;
  }
  .driver-report-card {
    overflow-x: scroll;
  }
  #summation {
    margin: 0;
    position: sticky;
    left: 1rem;
    max-width: 80vw;
  }
}

/* ------------------- <[ Vehicle reports ]> ------------------- */
form#vehicle-info-form #from-date {
  grid-area: from-date;
}
form#vehicle-info-form #to-date {
  grid-area: to-date;
}
form#vehicle-info-form #from-date-input {
  grid-area: from-date-input;
}
form#vehicle-info-form #to-date-input {
  grid-area: to-date-input;
}
form#vehicle-info-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 0.5rem;
  grid-template-areas:
    'from-date to-date'
    'from-date-input to-date-input';
}
.vehicle-report-list {
  margin: 0 auto;
  padding: 0 0 1rem;
  width: max-content;
}
.vehicle-report-row {
  list-style-type: none;
  display: grid;
  padding: 0.1rem 0;
  grid-template-columns: 110px 55px 78px 500px 35px 35px 35px 35px;
  grid-gap: 0.3rem;
  align-items: center;
  z-index: 10;
}
/* .date-span{
  position: sticky;
  left: 0px;
  height: 100%;
} */
.vehicle-report-row.even,
.date-span.even {
  background-color: var(--colour-light-hue);
}
.vehicle-report-row.odd,
.date-span.odd {
  background-color: var(--colour-blue-light-hue);
}
.vehicle-report-row span {
  padding: 0.2rem 0.5rem;
}
.vehicle-report-header-row {
  font-weight: 500;
  font-size: 1.2rem;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid var(--colour-dark-hue);
  position: sticky;
  top: 0px;
  background-color: var(--colour-light-hue);
}
.activity-title {
  font-weight: 500;
}
.ongoing {
  color: var(--colour-orange-hue);
}
#vehicle-summation {
  margin: 0 auto;
  padding: 0 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
}

@media screen and (max-width: 670px) {
  form#vehicle-info-form {
    grid-template-columns: 1fr;
    grid-template-areas:
      'from-date'
      'from-date-input'
      'to-date'
      'to-date-input';
  }
  form#date-range {
    grid-template-columns: 1fr;
  }
  #vehicle-summation {
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
  }
}
@media screen and (max-width: 450px) {
  #vehicle-summation {
    grid-template-columns: 1fr;
  }
  .summation-card h4 {
    grid-column: 1/3;
  }
}

/* ------------------- <[ Add activity ]> ------------------- */
#add-activity-chose-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 0.5rem;
  padding-top: 1rem;
  justify-items: center;
}

/* ----------------------------------------------------------------------- */
/* ---------------------------- <[ Messages ]> --------------------------- */
#messages-nav {
  width: 100%;
}
#messages-nav > ul {
  margin: 10px auto;
  max-width: 640px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  justify-items: center;
}
#messages-nav > ul > li {
  display: inline-block;
  font-size: 1.8rem;
  vertical-align: middle;
}
.tab-link {
  padding: 0 20px;
  color: var(--colour-blue-dark-hue);
  transition: all 0.3s;
}
.tab-link.active {
  border-bottom: solid 1px var(--colour-orange-hue);
  color: var(--colour-dark-hue);
}
.tab-link:hover {
  padding: 0 20px;
  color: var(--colour-dark-hue);
  cursor: pointer;
}
.messages-container {
  display: grid;
  grid-template-columns: minmax(200px, 30%) auto;
  padding: 0;
}
#mail-list {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-rows: repeat(auto-fit, minmax(96px, max-content)); */
  border-top: solid 1px var(--colour-blue-dark-hue);
  border-top-left-radius: 15px;
  border-bottom: solid 1px var(--colour-blue-dark-hue);
  border-bottom-left-radius: 15px;
}
.mail-card {
  border-bottom: solid 1px var(--colour-blue-dark-hue);
  align-items: center;
  padding: 10px 20px;
  height: max-content;
  transition: all 0.3s;
  display: grid;
  grid-template-columns: 20px auto;
  grid-template-areas:
    'readIndicator sender'
    'readIndicator title'
    'readIndicator date';
}
.mail-card:first-of-type {
  border-top-left-radius: 15px;
}
.mail-card:last-of-type {
  border-bottom-left-radius: 15px;
  border-bottom: none;
}
.mail-card.active {
  background-color: var(--colour-light-hue);
  border-right: none;
}
.mail-card:hover {
  cursor: pointer;
  background-color: var(--colour-light-hue);
  border-right: solid 1px var(--colour-blue-dark-hue);
}
.read-indicator {
  grid-area: readIndicator;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  margin-right: 7px;
  border: solid 1px var(--colour-light-hue);
}
.unread {
  background-color: var(--colour-orange-hue);
}
.read {
  background-color: var(--colour-blue-light-hue);
}
.mail-card > .sender {
  grid-area: sender;
  font-weight: 700;
}
.mail-card > .title {
  grid-area: title;
}
.mail-card > .date {
  grid-area: date;
  font-style: italic;
}
#opened-mail {
  background-color: var(--colour-light-hue);
  padding: 10px 20px;
  border-top: 1px solid var(--colour-blue-dark-hue);
  border-bottom: 1px solid var(--colour-blue-dark-hue);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: max-content 62px max-content;
  grid-row-gap: 1rem;
  grid-template-areas:
    'message-sender message-sender'
    'message-title message-answer'
    'file-list file-list'
    'message-text message-text';
}
#message-sender {
  font-size: 1.5rem;
  font-weight: 700;
  border-bottom: 2px solid var(--colour-orange-hue);
  grid-area: message-sender;
}
#message-date {
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 300;
}
#message-title {
  font-size: 1.5rem;
  align-self: baseline;
  padding: 0 10px;
  border-bottom: 1px solid var(--colour-blue-dark-hue);
  grid-area: message-title;
}
#file-list {
  grid-area: file-list;
  border-bottom: 1px solid var(--colour-blue-light-hue);
}
#message-text {
  grid-area: message-text;
  padding: 10px;
  margin-bottom: 30px;
}

#pagination {
  padding: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
}

@media screen and (max-width: 575px) {
  .messages-container {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------- */
/* ------------------------- <[ Send messages ]> ------------------------ */
.messages-send-container {
  background-color: var(--colour-light-hue);
  border: 1px solid var(--colour-blue-dark-hue);
}
#send-message-form {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-areas:
    'recipient recipient'
    'title send-button'
    'title upload-status'
    'file-upload file-upload'
    'send-message send-message';
  grid-row-gap: 1rem;
}
#recipient-container {
  grid-area: recipient;
  display: grid;
  grid-template-columns: max-content max-content auto;
  grid-template-areas: 'recipient-title recipient-add recipient-input';
  align-items: center;
  border-bottom: 2px solid var(--colour-blue-dark-hue);
}
#upload-status {
  grid-area: upload-status;
}
#recipient-container.driver {
  grid-template-columns: max-content auto;
}
#recipient-container > h5 {
  grid-area: recipient-title;
}
#recipient-container > input {
  grid-area: recipient-input;
}
#add-recipients {
  grid-area: recipient-add;
  cursor: pointer;
  width: 38px;
  height: 38px;
  background-color: var(--colour-blue-dark-hue);
  align-self: center;
  border-radius: 19px;
  color: var(--colour-light-hue);
  margin: 5px;
  text-align: center;
  font-size: 40px;
  line-height: 41px;
  transition: all 0.3s;
  z-index: 1400;
}
#add-recipients:hover {
  background-color: var(--colour-blue-light-hue);
  color: var(--colour-blue-dark-hue);
}
#title-container {
  grid-area: title;
  display: grid;
  grid-template-columns: max-content auto;
  align-items: center;
  border-bottom: 2px solid var(--colour-blue-dark-hue);
}
#send-message-form > .button {
  grid-area: send-button;
}
#file-upload {
  grid-area: file-upload;
  border-bottom: 1px solid var(--colour-blue-dark-hue);
  display: grid;
  grid-template-columns: max-content auto;
  font-size: 1.4rem;
  grid-column-gap: 0.5rem;
  align-items: center;
}
#uploaded-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
#send-message-form > #message-input {
  grid-area: send-message;
  width: 100%;
  border: none;
  white-space: pre-wrap;
}
#send-message-form input {
  border: none;
}
#recipient-container > h4 {
  z-index: 14;
}
#recipients-modal {
  background-color: var(--colour-light-hue);
  z-index: 1200;
  width: max-content;
  position: relative;
  padding: 25px;
  border-radius: 15px;
  border: 1px solid var(--colour-blue-light-hue);
}
#recipients-modal > ul {
  list-style: none;
  padding: 0;
}
.recipients-list-item {
  cursor: pointer;
  margin: 10px;
  border-bottom: 1px solid var(--colour-blue-dark-hue);
  color: var(--colour-blue-dark-hue);
  transition: all 0.3s;
}
.recipients-list-item:hover {
  border-bottom: 1px solid var(--colour-orange-hue);
  color: var(--colour-dark-hue);
}

@media screen and (max-width: 450px) {
  #send-message-form {
    grid-template-columns: 1fr;
    grid-template-areas:
      'recipient'
      'title'
      'send-button'
      'file-upload'
      'send-message';
  }
  #recipient-container {
    grid-template-columns: max-content auto;
    grid-template-areas:
      'recipient-title recipient-add'
      'recipient-input recipient-input';
  }
  #file-upload {
    grid-template-columns: 1fr;
  }
}

/* ------------------- <[ Maps dashboard ]> ------------------- */
#map-container {
  position: sticky;
  top: 0;
}
.map-container {
  border-radius: 10px;
}
#dashboard-map {
  height: 45vh;
}
#maps-vehicle-list {
  margin: 0 auto;
  padding: 0 0 1rem;
}
#maps-vehicle-list-div {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
#map-dashboard #maps-vehicle-list-div {
  padding: 10px 10px 10px 0;
  display: grid;
  grid-template-columns: 2fr 1fr;
}
#map-dashboard #maps-vehicle-list {
  list-style: none;
  width: 100%;
}
#map-dashboard #maps-vehicle-list li {
  padding: 5px 20px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 50px max-content max-content max-content;
  align-items: center;
  grid-column-gap: 1rem;
}
#map-dashboard #maps-vehicle-list li:hover {
  background-color: var(--colour-blue-light-hue);
}
#legend {
  list-style: none;
}
#legend li {
  display: grid;
  grid-template-columns: 50px auto;
  align-items: center;
}
.latest-update {
  font-size: 0.8rem;
}

@media screen and (max-width: 650px) {
  #map-dashboard #maps-vehicle-list-div {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 460px) {
  #map-dashboard #maps-vehicle-list li {
    grid-template-columns: 50px max-content;
  }
  .latest-update {
    grid-column: span 2;
  }
}

/* ------------------------- <[ Maps vehicle ]> ------------------------- */
#vehicle-map {
  height: 45vh;
}
#change-date {
  justify-content: center;
  display: grid;
  grid-template-columns: max-content max-content max-content;
  align-items: center;
  justify-items: center;
}
#map-dashboard #content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 10px 20px;
}
#route-list,
#vehicle-info-list {
  list-style: none;
}

@media screen and (max-width: 720px) {
  #map-dashboard #content {
    grid-template-columns: 1fr;
  }
}

/* ------------------------- <[ Maps routes ]> ------------------------- */
#datepickers {
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content 1fr;
  margin: 0 auto;
  width: 100%;
  grid-template-areas:
    '. from-date-headline to-date-headline get-trips hide-areas'
    '. from-date-input to-date-input get-trips hide-areas';
}
#from-date-headline {
  grid-area: from-date-headline;
}
#to-date-headline {
  grid-area: to-date-headline;
}
#get-trips {
  grid-area: get-trips;
}
#map-trips #from-date-input {
  grid-area: from-date-input;
}
#map-trips #to-date-input {
  grid-area: to-date-input;
}
#hide-areas {
  grid-area: hide-areas;
  justify-self: end;
  align-self: end;
}
#hide-areas:hover {
  cursor: pointer;
  color: var(--colour-blue-dark-hue);
  text-decoration: underline;
}
#routes-content {
  display: grid;
  grid-template-columns: 320px auto;
  grid-template-rows: 40px 40px 50vh 220px;
  grid-template-areas:
    'chose-type vehicle-map'
    'trips-count vehicle-map'
    'trips-list vehicle-map'
    'trips-list trip-info'
    'trips-list-end export-trip';
  grid-column-gap: 0.5rem;
}
#flespi-error {
  color: var(--colour-red-hue);
}
#chose-type {
  grid-area: chose-type;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#chose-type span {
  text-align: center;
  padding: 7px;
  border: solid 1px var(--colour-dark-hue);
}
#chose-type span:first-of-type {
  border-top-left-radius: 10px;
}
#chose-type span:last-of-type {
  border-top-right-radius: 10px;
}
#chose-type span.active {
  background-color: var(--colour-dark-hue);
  color: var(--colour-light-hue);
}
#chose-type span:hover {
  cursor: pointer;
  background-color: var(--colour-blue-dark-hue);
}
#trips-count {
  grid-area: trips-count;
  background-color: var(--colour-blue-light-hue);
  padding: 10px 20px;
  font-weight: 400;
}
#trips-list {
  grid-area: trips-list;
  display: grid;
  grid-template-columns: 1fr;
  overflow: scroll;
  position: relative;
  height: max-content;
  max-height: 100%;
}
#trips-list-end {
  grid-area: trips-list-end;
  height: 40px;
  background-color: var(--colour-blue-light-hue);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
#vehicle-trips-map {
  grid-area: vehicle-map;
  height: 100%;
}
.active-trip {
  text-align: center;
  color: var(--colour-orange-hue);
  font-weight: 400;
}
#trip-info {
  grid-area: trip-info;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 10px;
}
.trip-card {
  border-bottom: solid 1px var(--colour-blue-dark-hue);
  padding: 5px 5px 5px 10px;
  display: grid;
  grid-template-columns: 3fr 3fr 1fr;
  cursor: pointer;
  height: max-content;
}
.trip-card:first-of-type {
  padding-top: 0;
}
.trip-card:hover {
  background-color: var(--colour-blue-light-hue);
}
.trip-card.active {
  background-color: var(--colour-orange-hue);
  color: var(--colour-light-hue);
}
.trip-card .date-range {
  font-weight: 400;
  grid-column: 1/3;
}
.category-icon {
  justify-self: center;
  align-self: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  text-align: center;
  border: solid 1px;
  background-color: var(--colour-light-hue);
  text-align: center;
}
.info-div.category-icon {
  margin-left: 10px;
  padding: 0 7px;
}
.category-icon.business {
  border-color: var(--colour-dark-hue);
  color: var(--colour-dark-hue);
}
.category-icon.private {
  border-color: var(--colour-orange-hue);
  color: var(--colour-orange-hue);
}
/* .trip-card.active .category-icon {
  border-color: var(--colour-light-hue);
  color: var(--colour-light-hue);
} */

#trip-info-div {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: repeat(4, min-content);
}
.info-title {
  font-weight: 400;
  justify-self: end;
  padding-right: 10px;
}
#options-div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto) 100px;
}
.category-button {
  border: 1px solid var(--colour-dark-hue);
  background-color: var(--colour-light-hue);
  padding: 5px 15px;
  font-size: 1.2rem;
  width: 100%;
  max-height: 40px;
  text-align: center;
  cursor: pointer;
}
#business-trip-button.selected {
  background-color: var(--colour-dark-hue);
  color: var(--colour-light-hue);
}
#private-trip-button.selected {
  background-color: var(--colour-orange-hue);
  color: var(--colour-light-hue);
}
#business-trip-button {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
#private-trip-button {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
#business-trip-button:hover {
  color: var(--colour-dark-hue);
  background-color: var(--colour-blue-dark-hue);
}
#private-trip-button:hover {
  color: var(--colour-orange-hue);
  background-color: var(--colour-blue-dark-hue);
}

#comments {
  padding: 10px;
  border-radius: 7px;
}

#export-trip {
  grid-area: export-trip;
  background-color: var(--colour-blue-light-hue);
  padding: 15px;
  border-radius: 10px;
}
#export-toggle {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
}
#export-toggle img {
  height: 30px;
}
#export-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.2rem;
}
#include-categories,
#include-types {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-gap: 0.3rem;
  align-items: center;
}

@media screen and (max-width: 630px) {
  #routes-content {
    grid-template-columns: 1fr;
    grid-template-rows: 40px 50vh 40px 50vh max-content max-content;
    grid-template-areas:
      'trips-count'
      'trips-list'
      'trips-list-end'
      'vehicle-map'
      'trip-info'
      'export-trip';
    grid-row-gap: 0.5rem;
  }
}

/* ------------------------- <[ Tachograph ]> ------------------------- */
#tachograph-files > #settings {
  width: max-content;
  margin: 0 auto;
}
#tachograph-content {
  padding: 20px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 1rem;
}

.tachograph-files-list {
  padding: 20px 0 0 20px;
  max-width: max-content;
  margin: 0 auto;
}

/* ------------------------- <[ Area settings ]> ------------------------- */
#areas-content {
  display: grid;
  grid-template-columns: 320px auto;
  grid-template-rows: 60px 40px 36px 40px 25vh max-content;
  grid-template-areas:
    'add-new area-map'
    'areas-list-header area-map'
    'area-all area-map'
    'area-count area-map'
    'areas-list area-map'
    'areas-list area-info'
    'areas-list-end area-info';
  grid-column-gap: 0.5rem;
}
#add-new {
  grid-area: add-new;
}
#area-map {
  grid-area: area-map;
}
#areas-list-header {
  grid-area: areas-list-header;
  background-color: var(--colour-dark-hue);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: var(--colour-light-hue);
  text-align: center;
  font-size: 1.5rem;
  padding: 5px;
}
#areas-all {
  grid-area: areas-all;
}
#areas-list {
  grid-area: areas-list;
}
#areas-list-end {
  grid-area: areas-list-end;
  height: 40px;
  background-color: var(--colour-blue-light-hue);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
#area-info {
  grid-area: area-info;
}
#area-info > #options-div {
  grid-template-rows: max-content;
}
#area-info > #options-div h6 {
  margin-top: 20px;
}
#area-info > #options-div input,
#area-info > #options-div textarea {
  margin: 0;
  border: 1px solid var(--colour-dark-hue);
}
.editing-icon {
  height: 40px;
  opacity: 0.8;
  transition: all 0.3s;
}
.editing-icon:hover {
  cursor: pointer;
  opacity: 1;
}
#editing-info {
  display: grid;
  grid-template-columns: 1fr;
}
#area-count {
  grid-area: area-count;
  background-color: var(--colour-blue-light-hue);
  padding: 10px 20px;
  font-weight: 400;
}
.area-card {
  border-bottom: solid 1px var(--colour-blue-dark-hue);
  padding: 5px 5px 5px 10px;
  display: grid;
  grid-template-columns: 3fr 1fr;
  cursor: pointer;
  height: max-content;
}
.area-card:first-of-type {
  padding-top: 0;
}
.area-card:hover {
  background-color: var(--colour-blue-light-hue);
}
.area-card.active {
  background-color: var(--colour-orange-hue);
  color: var(--colour-light-hue);
}
.area-card .date-range {
  font-weight: 400;
  grid-column: 1/3;
}
.area-card .category-icon {
  justify-self: center;
  align-self: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  text-align: center;
  border: solid 1px;
  background-color: var(--colour-light-hue);
  text-align: center;
}
.area-card .category-icon.business {
  border-color: var(--colour-dark-hue);
  color: var(--colour-dark-hue);
}
.area-card .category-icon.private {
  border-color: var(--colour-orange-hue);
  color: var(--colour-orange-hue);
}
#editing {
  z-index: 999;
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
}
.editing {
  cursor: crosshair !important;
}
#area-info #delete-button {
  margin: 40px 0 0 0;
}

/* ======================================================================= */
/* ========================== <[ Typography ]> ========================== */
html {
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: var(--colour-dark-hue);
}
p {
  margin-bottom: 1rem;
}
h1,
h2,
h3,
h4,
h5 {
  margin: 3rem 0 1.38rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  line-height: 1.3;
}
h1 {
  margin-top: 0;
  font-size: 3.052rem;
}
h2 {
  font-size: 2.441rem;
}
h3 {
  font-size: 1.953rem;
}
h4 {
  font-size: 1.563rem;
}
h5 {
  font-size: 1.25rem;
}
h6 {
  font-size: 1.15rem;
}
.normal-text {
  font-size: 1rem !important;
}
small,
.text_small {
  font-size: 0.8rem !important;
}
.text_very_small {
  font-size: 0.7rem;
}
.normal-font-weight {
  font-weight: 300 !important;
}
.orange-text {
  color: var(--colour-orange-hue);
}

a {
  text-decoration: none;
  color: var(--colour-blue-dark-hue);
  transition: all 0.3s;
  cursor: pointer;
}
a.dark {
  color: var(--colour-dark-hue);
}
a.disabled {
  color: var(--colour-blue-dark-hue);
  text-decoration: line-through;
}
a:hover {
  color: var(--colour-dark-hue);
  text-decoration: underline;
  text-decoration-color: var(--colour-orange-hue);
}
a.disabled:hover {
  cursor: not-allowed;
  color: var(--colour-blue-dark-hue);
  text-decoration: line-through;
  text-decoration-color: none;
}
@media screen and (max-width: 457px) {
  h1 {
    font-size: 10vw;
  }
  h2 {
    font-size: 8vw;
  }
  h3 {
    font-size: 1.4rem;
  }
  h4 {
    font-size: 1.25rem;
  }
  h5 {
    font-size: 1.05rem;
  }
}

/* ============================================================ */
/* ======================= <[ Forms ]> ======================== */
/* ------------------------------------------------------------ */
/* ----------------------- <[ Inputs ]> ----------------------- */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='time'],
input[type='number'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
select {
  margin: 0.5rem 1rem;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  padding: 0.6rem 0.8rem;
  color: var(--colour-dark-hue);
  border-radius: 10px;
  border: 1px solid var(--colour-blue-dark-hue);
  background-color: var(--colour-light-hue);
}
::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--colour-blue-dark-hue);
  opacity: 1; /* Firefox */
}
::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--colour-blue-dark-hue);
}
input:disabled {
  background-color: var(--colour-blue-light-hue);
}
@media screen and (max-width: 457px) {
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  input[type='number'],
  input[type='date'],
  input[type='datetime'],
  input[type='datetime-local'],
  select {
    padding: 0.3rem 0.8rem;
  }
}

/* ------------------ <[ Dropdown/Selects ]> ------------------ */
/* Select info: Use "selected disabled hidden" on options that are to act as placeholders and set the select to "required". */
select:invalid {
  color: var(--colour-blue-dark-hue);
}

/* --- Multi select checkboxes */
.dropdown-check-list {
  display: inline-block;
  margin-bottom: 1rem;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  padding: 0.6rem 0.8rem;
  color: var(--colour-dark-hue);
  border-radius: 10px;
  border: 1px solid var(--colour-blue-dark-hue);
  background-color: var(--colour-light-hue);
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: '';
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 10px;
  top: -8px;
  position: relative;
  display: none;
  margin: 0;
  border-top: none;
  border-left: 1px solid var(--colour-blue-dark-hue);
  border-right: 1px solid var(--colour-blue-dark-hue);
  border-bottom: 1px solid var(--colour-blue-dark-hue);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: var(--colour-light-hue);
}

.dropdown-check-list ul.items li {
  list-style: none;
  padding: 5px;
  text-align: left;
}
ul.items li label {
  padding-left: 10px;
  cursor: pointer;
}
li.chose-all {
  border-bottom: 1px solid var(--colour-blue-dark-hue);
  margin-bottom: 5px;
}

.dropdown-check-list.visible .items {
  display: block;
}
/* ------------------------------------------------------------ */
/* ----------------------- <[ Buttons ]> ---------------------- */
.button,
button {
  display: inline-block;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  text-align: center;
  margin: 0.5rem 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background-color: var(--colour-dark-hue);
  border: 1px solid var(--colour-light-hue);
  color: var(--colour-light-hue);
  transition: all 0.3s;
}
.button:active,
button:active {
  background-color: var(--colour-orange-hue);
}
.button.primary,
button.primary {
  background-color: var(--colour-orange-hue);
  color: var(--colour-light-hue);
}
.button.secondary,
button.secondary {
  background-color: var(--colour-light-hue);
  border: 1px solid var(--colour-blue-dark-hue);
  color: var(--colour-dark-hue);
}
.button.warning,
button.warning {
  background-color: var(--colour-red-hue);
  border: 1px solid var(--colour-dark-hue);
  color: var(--colour-light-hue);
}
.button:hover,
button:hover {
  text-decoration: none;
  cursor: pointer;
  background-color: var(--colour-blue-dark-hue);
  color: var(--colour-dark-hue);
  border: 1px solid var(--colour-dark-hue);
}
button.full-width,
.button.full-width {
  text-align: center;
}
.button.icon-large {
  padding: 2rem 0;
  margin: 0.5rem;
  width: 250px;
  height: 200px;
  display: grid;
  align-items: center;
  grid-template-rows: 100px 34px;
  justify-items: center;
}
button:disabled {
  cursor: not-allowed;
}

/* ------------------------------------------------------------ */
/* ----------------------- <[ Switch ]> ------------------------ */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: var(--colour-dark-hue);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--colour-dark-hue);
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
.switch-text {
  text-align: center;
}
/* ============================================================ */
/* ======================= <[ Images ]> ======================= */

/* ------------------------------------------------------------ */
/* ----------------------- <[ Icons ]> ------------------------ */
.icon::before {
  content: '';
  display: inline-block;
  margin: 0 5px;
}
.icon-large {
  font-size: 2.441rem;
}
.icon-large::before {
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 auto;
}
.icon-medium {
  font-size: 2rem;
}
.icon-medium::before {
  width: 50px;
  height: 50px;
  vertical-align: sub;
}
.icon-small {
  font-size: 1.563rem;
}
.icon-small::before {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}
.icon-center-text::before {
  vertical-align: middle;
}
@media screen and (max-width: 457px) {
  .icon-medium,
  .icon-small {
    font-size: 1.2rem;
  }
  .icon-medium::before,
  .icon-small::before {
    width: 25px;
    height: 25px;
  }
}
.icon-water-blue-dark::before {
  background: url('/Assets/Icons/water-100-blue-dark.png');
  background-size: cover;
}
.icon-water-dark::before {
  background: url('/Assets/Icons/water-100-dark.png');
  background-size: cover;
}
.icon-clock-blue-dark::before {
  background: url('/Assets/Icons/clock-100-blue-dark.png');
  background-size: cover;
}
.icon-clock-dark::before {
  background: url('/Assets/Icons/clock-100-dark.png');
  background-size: cover;
}
.icon-clock-light::before {
  background: url('/Assets/Icons/clock-100-light.png');
  background-size: cover;
}
.icon-time-blue-dark::before {
  background: url('/Assets/Icons/time-100-blue-dark.png');
  background-size: cover;
}
.icon-time-dark::before {
  background: url('/Assets/Icons/time-100-dark.png');
  background-size: cover;
}
.icon-time-light::before {
  background: url('/Assets/Icons/time-100-light.png');
  background-size: cover;
}
.icon-tire-blue-dark::before {
  background: url('/Assets/Icons/tire-100-blue-dark.png');
  background-size: cover;
}
.icon-tire-dark::before {
  background: url('/Assets/Icons/tire-100-dark.png');
  background-size: cover;
}
.icon-user-blue-dark::before {
  background: url('/Assets/Icons/user-100-blue-dark.png');
  background-size: cover;
}
.icon-user-dark::before {
  background: url('/Assets/Icons/user-100-dark.png');
  background-size: cover;
}
.icon-user-light::before {
  background: url('/Assets/Icons/user-100-light.png');
  background-size: cover;
}
.icon-people-blue-dark::before {
  background: url('/Assets/Icons/people-100-blue-dark.png');
  background-size: cover;
}
.icon-people-dark::before {
  background: url('/Assets/Icons/people-100-dark.png');
  background-size: cover;
}
.icon-people-light::before {
  background: url('/Assets/Icons/people-100-light.png');
  background-size: cover;
}
.icon-paper-money-blue-dark::before {
  background: url('/Assets/Icons/paper-money-100-blue-dark.png');
  background-size: cover;
}
.icon-paper-money-dark::before {
  background: url('/Assets/Icons/paper-money-100-dark.png');
  background-size: cover;
}
.icon-semi-truck-blue-dark::before {
  background: url('/Assets/Icons/semi-truck-100-blue-dark.png');
  background-size: cover;
}
.icon-semi-truck-dark::before {
  background: url('/Assets/Icons/semi-truck-100-dark.png');
  background-size: cover;
}
.icon-semi-truck-light::before {
  background: url('/Assets/Icons/semi-truck-100-light.png');
  background-size: cover;
}
.icon-odometer-blue-dark::before {
  background: url('/Assets/Icons/odometer-100-blue-dark.png');
  background-size: cover;
}
.icon-odometer-dark::before {
  background: url('/Assets/Icons/odometer-100-dark.png');
  background-size: cover;
}
.icon-accounting-blue-dark::before {
  background: url('/Assets/Icons/accounting-100-blue-dark.png');
  background-size: cover;
}
.icon-accounting-dark::before {
  background: url('/Assets/Icons/accounting-100-dark.png');
  background-size: cover;
}
.icon-accounting-light::before {
  background: url('/Assets/Icons/accounting-100-light.png');
  background-size: cover;
}
.icon-cafe-blue-dark::before {
  background: url('/Assets/Icons/cafe-100-blue-dark.png');
  background-size: cover;
}
.icon-cafe-dark::before {
  background: url('/Assets/Icons/cafe-100-dark.png');
  background-size: cover;
}
.icon-cafe-light::before {
  background: url('/Assets/Icons/cafe-100-light.png');
  background-size: cover;
}
.icon-hospital-blue-dark::before {
  background: url('/Assets/Icons/hospital-100-blue-dark.png');
  background-size: cover;
}
.icon-hospital-dark::before {
  background: url('/Assets/Icons/hospital-100-dark.png');
  background-size: cover;
}
.icon-gas-pump-blue-dark::before {
  background: url('/Assets/Icons/gas-pump-100-blue-dark.png');
  background-size: cover;
}
.icon-gas-pump-dark::before {
  background: url('/Assets/Icons/gas-pump-100-dark.png');
  background-size: cover;
}
.icon-gas-pump-light::before {
  background: url('/Assets/Icons/gas-pump-50-light.png');
  background-size: cover;
}
.icon-maintenance-blue-dark::before {
  background: url('/Assets/Icons/maintenance-100-blue-dark.png');
  background-size: cover;
}
.icon-maintenance-dark::before {
  background: url('/Assets/Icons/maintenance-100-dark.png');
  background-size: cover;
}
.icon-sleeping-in-bed-blue-dark::before {
  background: url('/Assets/Icons/sleeping-in-bed-100-blue-dark.png');
  background-size: cover;
}
.icon-sleeping-in-bed-dark::before {
  background: url('/Assets/Icons/sleeping-in-bed-100-dark.png');
  background-size: cover;
}
.icon-calendar-blue-dark::before {
  background: url('/Assets/Icons/calendar-100-blue-dark.png');
  background-size: cover;
}
.icon-calendar-dark::before {
  background: url('/Assets/Icons/calendar-100-dark.png');
  background-size: cover;
}
.icon-hide-blue-dark::before {
  background: url('/Assets/Icons/hide-100-blue-dark.png');
  background-size: cover;
}
.icon-hide-dark::before {
  background: url('/Assets/Icons/hide-100-dark.png');
  background-size: cover;
}
.icon-shop-blue-dark::before {
  background: url('/Assets/Icons/shop-100-blue-dark.png');
  background-size: cover;
}
.icon-shop-dark::before {
  background: url('/Assets/Icons/shop-100-dark.png');
  background-size: cover;
}
.icon-drop-blue-dark::before {
  background: url('/Assets/Icons/drop-100-blue-dark.png');
  background-size: cover;
}
.icon-drop-dark::before {
  background: url('/Assets/Icons/drop-100-dark.png');
  background-size: cover;
}
.icon-pdf-blue-dark::before {
  background: url('/Assets/Icons/pdf-100-blue-dark.png');
  background-size: cover;
}
.icon-pdf-dark::before {
  background: url('/Assets/Icons/pdf-100-dark.png');
  background-size: cover;
}
.icon-pdf-orange::before {
  background: url('/Assets/Icons/pdf-100-orange.png');
  background-size: cover;
}
.icon-marker-blue-dark::before {
  background: url('/Assets/Icons/marker-100-blue-dark.png');
  background-size: cover;
}
.icon-marker-dark::before {
  background: url('/Assets/Icons/marker-100-dark.png');
  background-size: cover;
}
.icon-delete-blue-dark::before {
  background: url('/Assets/Icons/delete-50-blue-dark.png');
  background-size: cover;
}
.icon-delete-dark::before {
  background: url('/Assets/Icons/delete-50-dark.png');
  background-size: cover;
  transition: all 0.3s;
}
.icon-delete-dark.hover:hover::before {
  background: url('/Assets/Icons/delete-50-orange.png');
  background-size: cover;
}
.icon-edit-blue-dark::before {
  background: url('/Assets/Icons/edit-50-blue-dark.png');
  background-size: cover;
  transition: all 0.3s;
}
.icon-edit-dark::before {
  background: url('/Assets/Icons/edit-50-dark.png');
  background-size: cover;
  transition: all 0.3s;
}
.icon-edit-dark.hover:hover::before {
  background: url('/Assets/Icons/edit-50-blue-dark.png');
  background-size: cover;
}
.icon-edit-blue-dark.hover:hover::before {
  background: url('/Assets/Icons/edit-50-dark.png');
  background-size: cover;
}
.icon-gas-station-blue-dark::before {
  background: url('/Assets/Icons/gas-station-100-blue-dark.png');
  background-size: cover;
}
.icon-gas-station-dark::before {
  background: url('/Assets/Icons/gas-station-100-dark.png');
  background-size: cover;
}
.icon-left-arrow-blue-dark::before {
  background: url('/Assets/Icons/left-arrow-50-blue-dark.png');
  background-size: cover;
}
.icon-left-arrow-dark::before {
  background: url('/Assets/Icons/left-arrow-50-dark.png');
  background-size: cover;
}
.icon-car-service-blue-dark::before {
  background: url('/Assets/Icons/car-service-100-blue-dark.png');
  background-size: cover;
}
.icon-car-service-dark::before {
  background: url('/Assets/Icons/car-service-100-dark.png');
  background-size: cover;
}
.icon-engine-oil-blue-dark::before {
  background: url('/Assets/Icons/engine-oil-50-blue-dark.png');
  background-size: cover;
}
.icon-engine-oil-dark::before {
  background: url('/Assets/Icons/engine-oil-50-dark.png');
  background-size: cover;
}
.icon-engine-oil-light::before {
  background: url('/Assets/Icons/engine-oil-50-light.png');
  background-size: cover;
}
.icon-automatic-car-wash-blue-dark::before {
  background: url('/Assets/Icons/automatic-car-wash-50-blue-dark.png');
  background-size: cover;
}
.icon-automatic-car-wash-dark::before {
  background: url('/Assets/Icons/automatic-car-wash-50-dark.png');
  background-size: cover;
}
.icon-automatic-car-wash-light::before {
  background: url('/Assets/Icons/automatic-car-wash-50-light.png');
  background-size: cover;
}
.icon-error-red::before {
  background: url('/Assets/Icons/error-50-red.png');
  background-size: cover;
}
.icon-error::before {
  background: url('/Assets/Icons/error-50-red.png');
  background-size: cover;
}
.icon-question-mark-blue-dark::before {
  background: url('/Assets/Icons/question-mark-100-blue-dark.png');
  background-size: cover;
}
.icon-question-mark-dark::before {
  background: url('/Assets/Icons/question-mark-100-dark.png');
  background-size: cover;
}
.icon-email-send-blue-dark::before {
  background: url('/Assets/Icons/email-send-100-blue-dark.png');
  background-size: cover;
}
.icon-email-send-dark::before {
  background: url('/Assets/Icons/email-send-100-dark.png');
  background-size: cover;
}
.icon-email-send-light::before {
  background: url('/Assets/Icons/email-send-100-light.png');
  background-size: cover;
}
.icon-email-send-orange::before {
  background: url('/Assets/Icons/email-send-100-orange.png');
  background-size: cover;
}
.icon-settings-dark::before {
  background: url('/Assets/Icons/settings-100-dark.png');
  background-size: cover;
}
.icon-settings-blue-dark::before {
  background: url('/Assets/Icons/settings-100-blue-dark.png');
  background-size: cover;
}
.icon-add-gas-station-blue-dark::before {
  background: url('/Assets/Icons/add-gas-station-100-blue-dark.png');
  background-size: cover;
}
.icon-add-leave-house-blue-dark::before {
  background: url('/Assets/Icons/add-leave-house-100-blue-dark.png');
  background-size: cover;
}
.icon-save-orange::before {
  background: url('/Assets/Icons/save-100-orange.png');
  background-size: cover;
  transition: all 0.3s;
}
.icon-save-orange.hover:hover::before {
  background: url('/Assets/Icons/save-100-blue-dark.png');
  background-size: cover;
}
.icon-passenger-dark::before {
  background: url('/Assets/Icons/passenger-100-dark.png');
  background-size: cover;
}
.icon-passenger-blue-dark::before {
  background: url('/Assets/Icons/passenger-100-blue-dark.png');
  background-size: cover;
}
.icon-add-semi-truck-blue-dark::before {
  background: url('/Assets/Icons/add-semi-truck-100-blue-dark.png');
  background-size: cover;
}
.icon-add-user-blue-dark::before {
  background: url('/Assets/Icons/add-user-50-blue-dark.png');
  background-size: cover;
}
.icon-licence-plate-dark::before {
  background: url('/Assets/Icons/licence-plate-100-dark.png');
  background-size: cover;
}
.icon-licence-plate-blue-dark::before {
  background: url('/Assets/Icons/licence-plate-100-blue-dark.png');
  background-size: cover;
}
.icon-percentage-dark::before {
  background: url('/Assets/Icons/percentage-100-dark.png');
  background-size: cover;
}
.icon-percentage-blue-dark::before {
  background: url('/Assets/Icons/percentage-100-blue-dark.png');
  background-size: cover;
}
.icon-changed-dark::before {
  background: url('/Assets/Icons/changed-50-dark.png');
  background-size: cover;
}
.icon-changed-blue-dark::before {
  background: url('/Assets/Icons/changed-50-blue-dark.png');
  background-size: cover;
}
.icon-phone-blue-dark::before {
  background: url('/Assets/Icons/phone-50-blue-dark.png');
  background-size: cover;
}
.icon-email-blue-dark::before {
  background: url('/Assets/Icons/email-50-blue-dark.png');
  background-size: cover;
}
.icon-role-blue-dark::before {
  background: url('/Assets/Icons/role-50-blue-dark.png');
  background-size: cover;
}
.icon-driver-blue-dark::before {
  background: url('/Assets/Icons/driver-50-blue-dark.png');
  background-size: cover;
}
.icon-available-updates-dark::before {
  background: url('/Assets/Icons/available-updates-100-dark.png');
  background-size: cover;
}
.icon-sign-out-blue-dark::before {
  background: url('/Assets/Icons/sign-out-50-blue-dark.png');
  background-size: cover;
}
.icon-sign-out-light::before {
  background: url('/Assets/Icons/sign-out-50-light.png');
  background-size: cover;
}
.icon-sign-out-auto-blue-dark::before {
  background: url('/Assets/Icons/sign-out-auto-50-blue-dark.png');
  background-size: cover;
}
.icon-add-clock-dark::before {
  background: url('/Assets/Icons/add-clock-100-dark.png');
  background-size: cover;
}
.icon-add-clock-blue-dark::before {
  background: url('/Assets/Icons/add-clock-100-blue-dark.png');
  background-size: cover;
  transition: all 0.3s;
}
.icon-add-clock-blue-dark.hover:hover::before {
  background: url('/Assets/Icons/add-clock-100-dark.png');
  background-size: cover;
}
.icon-waypoint-map-dark::before {
  background: url('/Assets/Icons/waypoint-map-100-dark.png');
  background-size: cover;
}
.icon-waypoint-map-blue-dark::before {
  background: url('/Assets/Icons/waypoint-map-100-blue-dark.png');
  background-size: cover;
}
.icon-waypoint-map-light::before {
  background: url('/Assets/Icons/waypoint-map-100-light.png');
  background-size: cover;
}
.icon-tachograph-digital-light::before {
  background: url('/Assets/Icons/tachograph-digital-100-light.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.icon-flespi-blue-dark::before {
  background: url('/Assets/Icons/flespi-100-blue-dark.png');
  background-size: cover;
}
.icon-chevron-left-blue-dark::before {
  background: url('/Assets/Icons/chevron-left-50-blue-dark.png');
  background-size: cover;
  transition: all 0.3s;
}
.icon-chevron-left-blue-dark.hover:hover::before {
  background: url('/Assets/Icons/chevron-left-50-dark.png');
  background-size: cover;
}
.icon-chevron-right-blue-dark::before {
  background: url('/Assets/Icons/chevron-right-50-blue-dark.png');
  background-size: cover;
  transition: all 0.3s;
}
.icon-chevron-right-blue-dark.hover:hover::before {
  background: url('/Assets/Icons/chevron-right-50-dark.png');
  background-size: cover;
}
.icon-chevron-right-blue-light::before {
  background: url('/Assets/Icons/chevron-right-50-blue-light.png');
  background-size: cover;
}
.icon-comment-blue-dark::before {
  background: url('/Assets/Icons/comments-100-blue-dark.png');
  background-size: cover;
}
.icon-comment-dark::before {
  background: url('/Assets/Icons/comments-100-dark.png');
  background-size: cover;
}
.icon-leave-house-dark::before {
  background: url('/Assets/Icons/leave-house-100-dark.png');
  background-size: cover;
}
.icon-leave-house-blue-dark::before {
  background: url('/Assets/Icons/leave-house-100-blue-dark.png');
  background-size: cover;
}
.icon-leave-house-blue-light::before {
  background: url('/Assets/Icons/leave-house-100-blue-light.png');
  background-size: cover;
}
.icon-holiday-dark::before {
  background: url('/Assets/Icons/holiday-100-dark.png');
  background-size: cover;
}
.icon-holiday-blue-dark::before {
  background: url('/Assets/Icons/holiday-100-blue-dark.png');
  background-size: cover;
}
.icon-holiday-blue-light::before {
  background: url('/Assets/Icons/holiday-100-blue-light.png');
  background-size: cover;
}
.icon-group-message-dark::before {
  background: url('/Assets/Icons/group-message-100-dark.png');
  background-size: cover;
}
.icon-group-message-blue-dark::before {
  background: url('/Assets/Icons/group-message-100-blue-dark.png');
  background-size: cover;
}
.icon-group-message-blue-light::before {
  background: url('/Assets/Icons/group-message-100-blue-light.png');
  background-size: cover;
}
.icon-group-message-light::before {
  background: url('/Assets/Icons/group-message-100-light.png');
  background-size: cover;
}
.icon-active-dark::before {
  background: url('/Assets/Icons/icons8-active-state-30-dark.png');
  background-size: cover;
}
.icon-active-blue-dark::before {
  background: url('/Assets/Icons/icons8-active-state-30-blue-dark.png');
  background-size: cover;
}
.icon-inactive-blue-dark::before {
  background: url('/Assets/Icons/icons8-inactive-state-30-blue-dark.png');
  background-size: cover;
}
.icon-inactive-red::before {
  background: url('/Assets/Icons/icons8-inactive-state-30-red.png');
  background-size: cover;
}
.icon-add-alarm-blue-dark::before {
  background: url('/Assets/Icons/add-alarm-100-blue-dark.png');
  background-size: cover;
}
.icon-tachograph-digital-blue-dark::before {
  background: url('/Assets/Icons/tachograph-digital-100-blue-dark.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.icon-tachograph-digital-blue-light::before {
  background: url('/Assets/Icons/tachograph-digital-100-blue-light.png');
  background-size: cover;
}
.icon-map-editing-orange::before {
  background: url('/Assets/Icons/map-editing-100-orange.png');
  background-size: cover;
}
/* ============================================================ */
/* ======================= <[ Table ]> ======================== */

/* ============================================================ */
/* ======================= <[ Other ]> ======================== */
/* ------------------------------------------------------------ */
/* ----------------------- <[ Lists ]> ------------------------ */
ul {
  margin: 0 0 10px;
}

/* ------------------------------------------------------------ */
/* ------------------------ <[ HR ]> -------------------------- */
hr {
  margin: 10px;
}
hr.primary {
  border: 0;
  border-top: 1px solid var(--colour-orange-hue);
}
hr.secondary {
  border: 0;
  border-top: 1px solid var(--colour-dark-hue);
}

/* ------------------------------------------------------------ */
/* -------------------- <[ Preloader ]> ----------------------- */
.preloader {
  width: 100px;
  height: 100px;
  display: inline-block;
  z-index: 99;
}
.preloader.small {
  width: 18px;
  height: 18px;
  left: 0;
  position: relative;
  vertical-align: middle;
}
.preloader.medium {
  width: 50px;
  height: 50px;
  position: relative;
  top: 48%;
  left: 48%;
  z-index: 999;
}
.preloader div {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 7px solid transparent;
  border-radius: 50%;
  animation: preloaderMedium 1.2s linear infinite;
}
.preloader div:nth-child(2) {
  border: 7px solid transparent;
}
.preloader.small div {
  border: 4px solid transparent;
  animation: preloaderSmall 1.2s linear infinite;
}
.preloader.small div:nth-child(2) {
  border: 4px solid transparent;
}

.preloader.orange div {
  border-top-color: var(--colour-orange-hue);
}
.preloader.orange div:nth-child(2) {
  border-bottom-color: var(--colour-orange-hue);
}
.preloader.dark div {
  border-top-color: var(--colour-dark-hue);
}
.preloader.dark div:nth-child(2) {
  border-bottom-color: var(--colour-dark-hue);
}
.preloader.light div {
  border-top-color: var(--colour-light-hue);
}
.preloader.light div:nth-child(2) {
  border-bottom-color: var(--colour-light-hue);
}

@keyframes preloaderMedium {
  0% {
    transform: rotate(0deg);
    border-width: 7px;
  }
  50% {
    transform: rotate(180deg);
    border-width: 1px;
  }
  100% {
    transform: rotate(360deg);
    border-width: 7px;
  }
}
@keyframes preloaderSmall {
  0% {
    transform: rotate(0deg);
    border-width: 4px;
  }
  50% {
    transform: rotate(180deg);
    border-width: 2px;
  }
  100% {
    transform: rotate(360deg);
    border-width: 4px;
  }
}