@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('../font/HorizonIcons/horizon-icons.css');

@font-face {
  font-family: Gordita;
  font-weight: normal;
  src: url('../font/Gordita_Regular.otf');
}

@font-face {
  font-family: Gordita;
  font-weight: bold;
  src: url('../font/Gordita_Bold.otf');
}

:root {
  --corner-radius: 15px;
  --radius-capsule: 150px;
  --default-spacing: 10px;
  --default-spacing-small: 5px;
  --home-tile-size: 190px;
  --heading-size: 1.3rem;
  --card-height: 460px;
  --royal: #00a1f9;
  --royal-opacity-20: #00a1f933;
  --royal-opacity-75: #00a1f9BF;
  /* This is the Upstream theme colour - blue */
  --color-theme-brand: var(--royal);
  --color-theme-brand-background: var(--royal-opacity-75);
  --color-theme-brand-background-20: var(--royal-opacity-20);
  --complementary-one: #FFE579;
  --complementary-two: #F9BF30;
  --complementary-three: #DE821F;
  --fireOrange: #FE985B;
  --fireRed: #E83D52;
}

.light-mode {
  --viewBackground: #FDFFFF;
  --itemBackground: #EFF9F9;
  --itemBackgroundAccent: #DFECED;
  --font-colour-primary: #02335B;
  --font-colour-primary-opacity-20: #02335B33;
  --font-colour-secondary: #708c99;
  --font-colour-secondary-opacity-20: #708c9933;
  --font-colour-secondary-opacity-75: #708c99BF;
  --percentage-background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8));
  --hover-brightness: 90%;
  --green: #4ACE73FF;
  --green-opacity-20: #4ACE7333;
  --green-opacity-75: #4ACE73BF;
  --red: #E83D52FF;
  --red-opacity-20: #E83D5233;
  --red-opacity-75: #E83D52BF;
  --orange: #EAA12DFF;
  --orange-opacity-20: #EAA12D33;
  --orange-opacity-75: #EAA12DBF;
  --colour-theme-success: var(--green);
  --colour-theme-success-background: var(--green-opacity-20);
  --colour-theme-warning: var(--orange);
  --colour-theme-warning-background: var(--orange-opacity-20);
  --colour-theme-error: var(--red);
  --colour-theme-error-background: var(--red-opacity-20);
  --colour-theme-secondary: var(--font-colour-secondary);
  --colour-theme-secondary-background: var(--font-colour-secondary-opacity-20);
}

.dark-mode {
  --viewBackground: #102231;
  --itemBackground: #1A2C3B !important;
  --itemBackgroundAccent: #354654;
  --font-colour-primary: #d4f5ff;
  --font-colour-primary-opacity-20: #d4f5ff33;
  --font-colour-secondary: #99bbbf;
  --font-colour-secondary-opacity-20: #99bbbf33;
  --font-colour-secondary-opacity-75: #99bbbfBF;
  --hover-brightness: 125%;
  --green: #98fb98FF;
  --green-opacity-20: #98fb9833;
  --green-opacity-75: #98fb98BF;
  --red: #FA8072FF;
  --red-opacity-20: #FA807233;
  --red-opacity-75: #FA8072BF;
  --orange: #FBE098FF;
  --orange-opacity-20: #FBE09833;
  --orange-opacity-75: #FBE098BF;
  --percentage-background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75));
  --colour-theme-success: var(--green);
  --colour-theme-success-background: var(--green-opacity-20);
  --colour-theme-warning: var(--orange);
  --colour-theme-warning-background: var(--orange-opacity-20);
  --colour-theme-error: var(--red);
  --colour-theme-error-background: var(--red-opacity-20);
  --colour-theme-secondary: var(--font-colour-secondary);
  --colour-theme-secondary-background: var(--font-colour-secondary-opacity-20);
}



html, body {
  font-family: Gordita, Arial, sans-serif;
  background-color: transparent;
}

h1:focus {
  outline: none;
}

h3.title {
  font-size: 1.7rem;
  margin-bottom: 1.3rem;
}

h1, h2, h3, h4 {
  color: var(--font-colour-primary);
}

p {
  color: var(--font-colour-secondary);
}

h5 {
  color: var(--font-colour-primary);
  font-size: 1.2rem;
  font-weight: bold;
}

h6 {
  color: var(--font-colour-primary);
  font-size: 1rem;
}

p {
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 0.8rem;
  color: var(--font-colour-secondary);
}

small {
  font-size: small;
  color: var(--font-colour-secondary);
}

.newsSummary {
  font-size: small;
  color: var( --font-colour-secondary);
}

.newslink {
  color: var(--font-colour-primary);
  /* thin underline */
  border-bottom: 1px solid var(--font-colour-primary);
  font-size: medium;
}

.newsDate {
  font-size: x-small;
  color: var( --font-colour-secondary);
}

a, .btn-link {
  color: var(--font-colour-secondary);
}

.colour-action {
  color: var(--color-theme-brand);
}

/*
  Used for Buy, Bid and Put.
*/
.colour-buy {
  color: var(--green);
}

/*
  Used for Sell, Ask, Call and Auction.
*/
.colour-sell {
  color: var(--orange);
}

.notCopied {
  opacity: 0.2;
}

.copied {
  opacity: 1;
  color: var(--font-colour-primary);
  transform: scale(1.1);
}

.btn-primary {
  color: var(--itemBackground);
  background-color: var(--color-theme-brand);
  border-color: var(--itemBackground);
  border-radius: 100px;
}

.btn-secondary {
  color: var(--font-colour-secondary);
  background-color: var(--itemBackgroundAccent);
  border-color: var(--itemBackgroundAccent);
  border-radius: 100px;
}

.btn-cancel {
  color: var(--viewBackground);
  background-color: var(--color-theme-brand);
  border-color: var(--color-theme-brand);
  border-radius: 100px;
}

/* Without !important the btn:hover style removes the theme colours.  */
.buySellButton {
  color: var(--font-colour-secondary) !important;
  background-color: var(--viewBackground) !important;
  border-color: var(--viewBackground) !important;
  border-radius: 5px;
  border-width: 1px;
  width: 100px;
  padding: 10px;
  font-size: small;
}

  .buySellButton:hover {
    filter: brightness(var(--hover-brightness));
    cursor: pointer;
  }

.actionButton {
  color: var(--viewBackground) !important;
  background-color: var(--color-theme-brand) !important;
  border-color: var(--viewBackground) !important;
  border-radius: 150px;
  border-width: 1px;
  font-size: medium;
  font-weight: bold;
  padding: 10px;
  width: auto;
}

  .actionButton:hover {
    filter: brightness(var(--hover-brightness));
    cursor: pointer;
  }

.action-button {
  background-color: var(--color-theme-brand) !important;
  border-radius: 500px;
  margin: var(--default-spacing);
  text-align: center;
}

  .action-button:hover {
    filter: brightness(var(--hover-brightness));
    cursor: pointer;
  }

.action-button-disabled {
  color: var(--font-colour-primary--disabled);
  background-color: var(--itemBackground--disabled);
  border-color: var(--border-color--disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.action-button-noborder {
  background-color: var(--color-theme-brand);
  border-radius: 0px;
  margin: 0px;
  text-align: center;
  border-style: none;
}

.filterButton {
  color: var(--font-colour-primary) !important;
  background-color: var(--itemBackground) !important;
  border-color: var(--font-colour-primary) !important;
  border-radius: 10%;
  border-width: 1px;
  width: auto;
  padding: 10px;
}

  .filterButton:hover {
    filter: brightness(var(--hover-brightness));
    cursor: pointer;
  }

.button-icon {
  font-size: large;
  padding: 1rem;
}

.chip {
  display: inline-block;
  padding: 0 25px;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  border-radius: 25px;
  float: right;
}

  .chip:hover {
    filter: brightness(var(--hover-brightness));
    cursor: pointer;
  }

.statusChip {
  display: inline-flex;
  border-radius: 20px;
  cursor: pointer;
}

.searchbar {
  padding: 10px;
  border-color: var(--font-colour-primary);
}

  .searchbar input {
    background-color: var(--itemBackground);
    color: var(--font-colour-secondary-opacity-75);
  }

::placeholder {
  color: var(--font-colour-secondary-opacity-75);
}

input.form-control.rounded::placeholder {
  color: var(--font-colour-secondary-opacity-75);
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}


.bluebox {
  background-color: var(--itemBackgroundAccent);
  border-radius: 10px;
  color: var(--font-colour-primary);
}

  .bluebox h3 {
    padding-top: 10px;
    padding-left: 20px;
  }

.lightbluebox {
  background-color: var(--itemBackgroundAccent);
  border-radius: 10px;
  color: var(--font-colour-primary);
  border-width: 1px;
  border-color: lightgrey;
  border-style: solid;
}

.left {
  text-align: left !important;
}

.centre {
  text-align: center !important;
}

.right {
  text-align: right !important;
}

.bold {
  font-weight: bold;
}

.width75 {
  width: 75%;
}

.width80 {
  width: 80%;
}

.scale-70 {
  transform: scale(0.7);
  transform-origin: center center;
}

.orderimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
  height: 150px;
  border-radius: 100%;
}

.orderimgNft {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
  height: 150px;
  border-radius: var(--corner-radius);
}

.orderimgSmall {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 15%;
}

.orderimgWhite {
  display: block;
  margin-left: auto;
  margin-right: auto;
  fill: white;
  stroke: white;
  color: white;
}

.iconimg {
  font-size: 24px;
  color: var(--font-colour-primary);
  opacity: 0.7;
}

  .iconimg:hover {
    filter: brightness(var(--hover-brightness));
    cursor: pointer;
  }

.iconimgAction {
  font-size: 24px;
  color: var(--color-theme-brand);
}

  .iconimgAction:hover {
    filter: brightness(var(--hover-brightness));
    cursor: pointer;
  }

.sub-image {
  border-radius: var(--home-tile-size);
  height: 125px;
  width: 125px;
  margin: auto;
  border: 1px solid var(--itemBackgroundAccent);
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

  .blazor-error-boundary::after {
    content: "An error has occurred."
  }

.spinner {
  border: 16px solid var(--font-colour-primary);
  border-top: 16px solid var(--font-colour-secondary);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  top: 40%;
  left: 55%;
  animation: spin 700ms linear infinite;
  position: absolute;
}

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

.loading-logo {
  height: 100px;
  width: auto;
}

.loadingBackground {
  background-color: var(--itemBackground);
  background-image: url(../images/waveBottom.svg);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
}

.app p, .text-primary {
  color: var(--font-colour-primary);
}

.card {
  width: 300px;
  height: 100%;
  border: 0;
  background-color: var(--itemBackgroundAccent);
  border-radius: var(--corner-radius);
  overflow: hidden;
}

  .card:hover {
    filter: brightness(var(--hover-brightness));
    cursor: pointer;
  }

.card-img {
  height: var(--home-tile-size);
  display: flex;
  flex-direction: column;
}

  .card-img:before, .card-img::after {
    content: " ";
    background-image: inherit;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: inherit;
    width: inherit;
  }

  .card-img::before {
    background-size: cover !important;
    opacity: 0.6;
    filter: blur(8px);
  }

  .card-img::after {
    background-size: contain !important;
    background-origin: content-box;
  }

.card-img {
  background-color: var(--viewBackground);
  background-position: -1px -1px;
  background-size: 1px;
}

  .card-img:after {
    position: absolute;
  }

.card-img-wrapper {
  overflow: hidden;
}

a:not(.subtitle a) {
  text-decoration: none;
}

.card-title {
  font-weight: bold;
  color: var(--font-colour-primary);
}

.card-title, card-sub {
  font-size: 16px !important;
  font-weight: bold !important;
}

.card-title {
  margin-bottom: .75rem;
}

.card-sub {
  color: var(--font-colour-secondary);
}

.cardtop-social a {
  color: var(--azure);
  height: 32px;
  width: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  background-color: rgba(0, 101, 243, 0.05);
  border-radius: 50%;
  margin-right: 10px;
}

.cardtop-contact {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: slategray;
  line-height: 1.6;
  cursor: pointer;
}

.cardtop-contact-wrapper {
  margin-top: 20px;
}

.cardtop-contact + .card-contact {
  margin-top: 16px;
}

.contact-me {
  border: 0;
  outline: none;
  background: linear-gradient(to right, rgba(83, 200, 239, 0.8) 0%, rgba(81, 106, 204, 0.8) 96%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  color: #fff;
  padding: 12px 16px;
  width: 100%;
  border-radius: 5px;
  margin-top: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-family: "Jost", sans-serif;
  transition: 0.3s;
}

.backButton {
  font-size: 2rem;
  position: absolute;
  z-index: 2;
  margin-top: 0rem;
}

.rounded-bg {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--itemBackgroundAccent);
  background-color: var(--itemBackground);
  padding: 1rem;
}

.dark-mode input[type="date"] {
  color-scheme: dark;
}

.light-mode input[type="date"] {
  color-scheme: light;
}


.error-message-container {
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.error-message {
  border-radius: var(--corner-radius);
  overflow: hidden;
  border: 2px solid var(--red);
  background-color: var(--red-opacity-20);
  color: var(--red);
  text-align: center;
  padding: 10px;
}

.row-border {
  border: 2px solid var(--font-colour-primary);
  width: 75%;
}

.walletloaded {
  margin-top: 20px;
}

.walletloadedchange {
  align-content: end;
  justify-content: end;
  text-decoration: underline;
  color: var(--color-theme-brand);
}

.custom-select {
  background-color: var(--itemBackground);
  color: var(--font-colour-primary);
}

.custom-select-disabled {
  background-color: var(--itemBackgroundAccent);
  color: var(--font-colour-secondary);
  border-color: var(--font-colour-secondary);
}

/* blazored-toast and then blazored-toast-component always override this class so we need
   to make these important.
*/
.blazored-toast.action-toast {
  background-color: var(--itemBackground) !important;
  color: var(--font-colour-primary) !important;
  border: 1px solid var(--itemBackgroundAccent) !important;
  border-top: 6px solid var(--color-theme-brand) !important;
}

/* Short Sales Training Page Styles */
.bodyback {
  background-color: var(--viewBackground);
  color: var(--font-colour-primary);
  min-height: 100vh;
  padding: 2rem;
}

.formback {
  background-color: var(--itemBackground);
  color: var(--font-colour-primary);
  padding: 2rem;
  border-radius: var(--corner-radius);
  border: 1px solid var(--itemBackgroundAccent);
}

.shortsales-disclosures {
  background-color: var(--itemBackgroundAccent);
  color: var(--font-colour-primary);
  padding: 2rem;
  border-radius: var(--corner-radius);
  border: 1px solid var(--itemBackground);
  margin-top: 2rem;
}

.shortsales-disclosures h1 {
  color: var(--font-colour-primary);
  margin-bottom: 1.5rem;
}

.shortsales-disclosures ul {
  color: var(--font-colour-primary);
  list-style: none;
  padding-left: 0;
}

.shortsales-disclosures li {
  color: var(--font-colour-primary);
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.shortsales-disclosures input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.shortsales-disclosures label {
  color: var(--font-colour-primary);
  margin-bottom: 0;
  line-height: 1.4;
}

.shortsales-disclosures p {
  color: var(--font-colour-secondary);
  margin-bottom: 1rem;
}

/* Question and Answer Styling */
.bodyback .container h1 {
  color: var(--font-colour-primary);
  margin-bottom: 2rem;
}

.bodyback .container > div > div p {
  color: var(--font-colour-primary);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.bodyback .container label {
  color: var(--font-colour-primary);
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.bodyback .container input[type="radio"] {
  margin-right: 0.5rem;
  margin-top: 0;
}

.bodyback .container label span:first-of-type {
  color: var(--font-colour-primary);
}

.bodyback .container label span[style*="color:green"] {
  color: var(--green) !important;
  font-weight: bold;
}

.bodyback .container label span[style*="color:red"] {
  color: var(--red) !important;
  font-weight: bold;
}

.bodyback hr {
  border-color: var(--itemBackgroundAccent);
  margin: 2rem 0;
}