/* branding colours */
/* semantic parameters (only use these in CSS) */
/* pre login pages */
/* end of parameters */
/* general elements */
body {
  background: #f7f2f0;
  color: #141414;
}

h1 {
  margin-bottom: 16px;
}

a {
  color: #f26da5;
  text-decoration: none;
}

.table tr td {
  vertical-align: middle;
}

/* end of general elements */
/* forms */
.form-control {
  border-color: #141414;
}

.input-group {
  margin-bottom: 1em;
}
.input-group .input-group-text {
  border-color: #141414;
  background-color: #f7f2f0;
  color: #141414;
}
.input-group .form-floating {
  flex: 1;
}
.input-group .form-control {
  flex: 1;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* end of forms */
/* buttons */
.btn-primary {
  background: #f75857;
  border: #f75857;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background: #f26da5;
  border: #f26da5;
}
.btn-primary:active:focus, .btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgb(250.3396226415, 202.6603773585, 222.7358490566);
}

.btn-secondary {
  background: #6dc6f2;
  border: #6dc6f2;
}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
  background: #b3dcf0;
  border: #b3dcf0;
}
.btn-secondary:active:focus, .btn-secondary:focus {
  box-shadow: 0 0 0 0.25rem white;
}

/* end of buttons */
/* pre-login page structure */
body.pre-login-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
body.pre-login-page header {
  background: none;
  margin-bottom: 16px;
}
body.pre-login-page header img {
  max-width: 250px;
}
body.pre-login-page main {
  width: 450px;
  max-width: 90%;
}
body.pre-login-page main h1 {
  text-align: center;
}

/* end of pre-login page structure */
/* main page structure */
.wrapper {
  display: flex;
  min-height: 100vh;
}
.wrapper .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100vw;
}
.wrapper .content header {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 5px solid #f7f2f0;
  box-shadow: 5px 5px 10px 0 #f7f2f0;
}
.wrapper .content main {
  padding: 16px 32px;
  flex: 1;
}
.wrapper .content footer {
  text-align: center;
  padding: 8px;
}

/* end of main page structure */
/* main menu */
.menu {
  flex: 1;
  overflow: auto;
  padding: 16px;
  /* Chrome, Edge, Safari */
  /* Firefox */
}
.menu::-webkit-scrollbar {
  width: 10px;
}
.menu::-webkit-scrollbar-track {
  background: #141414;
  border-radius: 5px;
}
.menu::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}
.menu::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.menu {
  scrollbar-width: thin;
  scrollbar-color: #7a7a7a #141414;
}
.menu .nav-group:not(:last-child) {
  margin-bottom: 8px;
}
.menu .nav-group .nav-group-title {
  color: #aca6a6;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px;
}
.menu .nav-group .nav-item .nav-link {
  color: #f7f2f0;
  padding: 0;
  display: flex;
  align-items: center;
}
.menu .nav-group .nav-item .nav-link i {
  margin-right: 8px;
  color: #f75857;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 20px;
}
.menu .nav-group .nav-item .nav-link .nav-item-text {
  flex: 1;
}

/* end of main menu */
/* desktop menu */
.desktop-menu {
  background: #141414;
  width: 300px;
  max-width: 25%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
}
.desktop-menu .desktop-menu-logo {
  padding: 16px;
}
.desktop-menu .desktop-menu-logo a {
  display: block;
  max-width: 200px;
  margin: auto;
}
.desktop-menu .desktop-menu-logo .desktop-menu-logo-sm {
  display: none;
}

/* end of desktop menu */
/* offcanvas menu */
#mobile-offcanvas {
  background: #141414;
  width: 300px;
}
#mobile-offcanvas .offcanvas-header img {
  max-width: 200px;
  margin: auto;
}
#mobile-offcanvas .offcanvas-header .close {
  font-size: 20px;
  color: #f7f2f0;
}

/* end of offcanvas menu */
/* header bar */
header {
  background: #f7f2f0;
}
header .nav {
  justify-content: space-between;
}
header .nav .nav-link {
  color: #141414;
}
header .nav .nav-item:first-child {
  margin-right: auto;
}
header .nav .nav-item:last-child {
  margin-left: auto;
}
header .nav .dropdown-menu {
  border-radius: 0;
  transform: unset !important; /* bootstrap default has the dropdown sitting below the line*/
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
}
@media (max-width: 991px) {
  header {
    background: #141414;
  }
  header .nav .nav-item {
    font-size: 20px;
  }
  header .nav .nav-item:not(.nav-logo) a:after {
    display: none;
  }
  header .nav .nav-item.nav-logo .nav-link img {
    max-height: 50px;
  }
  header .nav .nav-link {
    color: #f7f2f0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* end of header bar */
/* cards */
.card {
  border: 2px solid #141414;
  border-radius: 10px;
  box-shadow: 5px 5px 0 #141414;
  margin-bottom: 2em;
}
.card .card-header {
  background: none;
  border: none;
}
.card .card-header h2 {
  font-size: 20px;
  margin: 0;
  border-bottom: 2px solid #141414;
  padding-bottom: 8px;
}

/* end of cards */
/* user page */
.no-profile-picture {
  border-radius: 50%;
  background: #f7f2f0;
  color: #141414;
  width: 40px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.no-profile-picture-lg {
  width: 200px;
  font-size: 80px;
}

.user-details-card .user-details-card-picture {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* user page */
.no-profile-picture {
  border-radius: 50%;
  background: #f7f2f0;
  color: #141414;
  width: 40px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.no-profile-picture-lg {
  width: 200px;
  font-size: 80px;
}

.user-details-card .user-details-card-picture {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -8px;
}
.user-cards .card-details {
  margin: 8px;
}

.card-details {
  width: 350px;
  height: 200px;
  padding: 20px;
  background: linear-gradient(135deg, rgb(20.358490566, 159.7358490566, 228.641509434), #6dc6f2);
  border-radius: 15px;
  color: #f7f2f0;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  font-family: "Courier New", Courier, monospace;
}
.card-details .card-logo {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.card-details .chip {
  position: absolute;
  top: 40px;
  left: 20px;
  width: 50px;
  height: 35px;
  background-color: gold;
  border-radius: 5px;
}
.card-details .card-number {
  position: absolute;
  top: 90px;
  left: 20px;
  font-size: 20px;
  letter-spacing: 3px;
}
.card-details .card-holder {
  position: absolute;
  bottom: 30px;
  left: 20px;
  text-transform: uppercase;
  font-size: 14px;
}
.card-details .expiry-date {
  position: absolute;
  bottom: 30px;
  right: 20px;
  font-size: 14px;
  text-align: right;
}

/* end of user page */
/* swaps */
.message-thread {
  display: flex;
  flex-direction: column;
}
.message-thread .message {
  padding: 8px;
  margin: 8px 0;
  border-radius: 8px;
  width: 400px;
  max-width: 60%;
}
.message-thread .message .message-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8em;
  margin-bottom: 8px;
}
.message-thread .message.sent {
  align-self: flex-end;
  background-color: rgb(181.1656050955, 248.3343949045, 181.678343949);
}
.message-thread .message.received {
  align-self: flex-start;
  background-color: rgb(251.6363636364, 184.7840909091, 184.3636363636);
}
.message-thread .message.system-message {
  background-color: rgb(208.9156976744, 205.5843023256, 205.5843023256);
  align-self: center;
  font-style: italic;
}

/* end of swaps */
/*** Old css commented out for reference ***/
/*html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.text-id-output {
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.referralLogo {
  margin: 50px;
  max-width: 240px;
}

.homeIconImg {
  width: 150px;
  margin: 50px;
  height: auto !important;
  border-radius: 10px;
  box-shadow: 0px 0px 20px -10px;
  border: 1px solid gray;
}

.admin-home-tiles ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  margin: -5px;
}

.admin-home-tiles ul li {
  display: flex;
  border: 1px solid;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  padding: 15px;
  margin: 5px;
  border-color: lightblue;
  flex-basis: 140px;
}

.admin-home-tiles ul li a {
  display: block;
  text-decoration: none;
  text-align: center;
}

.admin-home-tiles ul li a i {
  display: block;
  text-decoration: none
}

a {
  color: #f658a7;
}

table.micro {
  font-size: 10px;
}
*/
.scroll-500 {
  max-height: 500px;
  overflow-y: auto;
}