:root {
  --color-frost-blue: #46D2BE;
  --color-frost-blue-darker: #32C3AF;
  --color-frost-blue-lighter: #5BDFD3;
  --color-indigo: #8F00FF;
  --color-indigo-darker: #6D00FF;
  --color-indigo-lighter: #B100FF;
  --color-orpiment: #FFCD00;
  --color-orpiment-darker: #FFBE00;
  --color-orpiment-lighter: #FFDC00;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #EAEAEA;
  position: relative;
  font-size: 100%;
}

a {
  color: var(--color-frost-blue);
  text-decoration: none;
  font-weight: bold;
}

.btn-default {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-frost-blue);
  --bs-btn-border-color: var(--color-frost-blue-darker);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-frost-blue-lighter);
  --bs-btn-hover-border-color: var(--color-frost-blue);
  --bs-btn-focus-shadow-rgb: 130,138,145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-frost-blue);
}

.btn-default-light {
  font-weight: bold;
  --bs-btn-color: var(--color-frost-blue);
  --bs-btn-hover-color: var(--color-frost-blue-lighter);
  --bs-btn-active-color: var(--color-frost-blue-lighter);
  --bs-btn-active-bg: none;
  --bs-btn-active-border-color: transparent;
}

.color-frost {
  color: var(--color-frost-blue);
}

.color-indigo {
  color: var(--color-indigo);
}

.vr {
  opacity: 0.1;
}

.dots {
  opacity: 0.1;
  margin-bottom: 40px;
  font-size: 30%;
}

.dots .fa-circle {
  margin-left: 20px;
  margin-right: 20px;
}

.main-panel {
  width: 100vw;
  height: 100vh;
  text-align: center;
  background-color: #EAEAEA;
  position: absolute;
}

.home-panel-container {
  min-height: 100vh;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

.home-panel-banner {
  width: 100vw;
  max-width: 100%;
  margin-bottom: 20px;
}

.home-panel-content {
  margin-bottom: 50px;
}

.home-panel-welcome {
  margin-bottom: 0.5em;
}

.home-panel-logo {
  width: 20%;
  margin-bottom: 1.5em;
}

.intro-text {
  margin-bottom: 1.5em;
  padding: 0em 5em;
  font-size: 120%;
}

.intro-text-direction {
  margin-bottom: 1.2em;
  font-size: 110%;
  color: var(--bs-secondary);
  font-style: italic;
}

.home-block-scenario {
  background-color: #d6dcdd;
  padding: 2em 1em;
  border-radius: 0.5em;
  border: 1px solid #c4cbcc;
  transition: background-color 0.1s linear, border-color 0.1s linear;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  cursor: pointer;
}

.home-block-scenario:hover {
  background-color: #dbe2e4;
  border-color: #d4dcdd;
}

.home-block-scenario-number {
  width: 2em;
  height: 2em;
  margin: auto;
  border: 1px solid rgba(var(--bs-secondary-rgb),var(--bs-text-opacity));
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-scenario-title {
  margin-bottom: 0.8em;
  font-weight: bold;
  color: var(--color-indigo);
}

.intro-scenario-text {
  margin-bottom: 1em;
}

.fishing-panel-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.fishing-panel-menu {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.fishing-panel-content {
  flex-grow: 1;
  text-align: left;
}

.fishing-mail-client {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}

.fishing-mail-client-titlebar-left {
  width: 4em;
}

.fishing-mail-client-titlebar {
  width: 100%;
  background-color: var(--color-indigo);
  font-weight: bold;
  font-size: 120%;
  text-align: center;
  color: #fff;
  padding: 0.3em;
  border-radius: 0.5em 0.5em 0 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.fishing-mail-client-title-logo {
  height: 1em;
}

.fishing-mail-client-titlebar-right {
  display: flex;
  align-items: center;
  margin-right: 0.5em;
}

.fishing-mail-client-titlebar-right-item {
  border-radius: 0.7em;
  height: 1.4em;
  width: 1.4em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fishing-mail-client-titlebar-right-item .fa-square {
  padding-left: 1px;
}

.fishing-mail-client-titlebar-right-item .fa-xmark {
  padding-left: 1px;
}

.fishing-mail-client-titlebar-right-item:hover {
  background-color: var(--color-frost-blue-lighter);
}

.fishing-mail-client-menu {
  display: flex;
  flex-flow: row nowrap;
  background-color: #d0d0d0;
}

.fishing-mail-client-menu-item {
  padding: 0.3em;
  cursor: pointer;
}

.fishing-mail-client-menu-item:hover {
  background-color: #c0c0c0;
}

.fishing-mail-client-mainarea {
  flex-grow: 1;
  display: flex;
  flex-flow: row nowrap;
}

.fishing-panel-content {
  display: flex;
  flex-flow: row nowrap;
}

.fishing-mail-left-panel {
  width: 350px;
  background-color: #485457;
  color: #fff;
  padding: 0.8em;
  font-size: 120%;
  border-right: 1px solid #637074;
}

.fishing-mail-folder {
  margin-left: 2em;
  margin-top: 0.2em;
  cursor: pointer;
}

.fishing-mail-folder:hover {
  font-weight: bold;
}

.fishing-mail-right-panel {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
}

.fishing-mails-list-container {
  height: 40%;
  display: flex;
  flex-flow: column nowrap;
  border-bottom: 1px solid #86989c;
}

.fishing-mails-list-header {
  width: 100%;
  background-color: #30383a;
  color: #fff;
  padding: 0.3em 0.8em;
  font-size: 150%;
  font-weight: bold;
}

.fishing-mails-list {
  width: 100%;
}

.fishing-mails-list thead {
  background-color: #768b91;
  color: #fff;
  padding: 0.2em;
}

.fishing-mails-list-item {
  cursor: pointer;
  padding: 0.1em;
}

.fishing-mails-list-item:hover {
  background-color: #d5dadb;
}

.fishing-mails-list-item-selected {
  background-color: #7faeb8;
}

.fishing-mails-list-item-selected:hover {
  background-color: #95cad6;
}

.fishing-mail-content-container {
  flex-grow: 1.5;
  display: flex;
  flex-flow: column nowrap;
}

.fishing-mail-content-header {
  width: 100%;
  background-color: #444f52;
  color: #fff;
  padding: 0.3em 0.8em;
  font-size: 110%;
  display: flex;
}

.fishing-mail-content-header-left {
  flex-grow: 1;
  font-weight: bold;
}

.fishing-mail-content-header-from-inner,
.fishing-mail-content-header-to-inner,
.fishing-mail-content-header-subject-inner {
  font-weight: normal;
}

.fishing-mail-content-body {
  padding: 0.5em;
  flex-grow: 1;
  overflow-y: auto;
}

.fishing-icon-replied {
  color: #192c9a;
}

.fishing-icon-forwarded {
  color: #85199a;
}

.fishing-link {
  color: #0732be;
  font-weight: bold;
  cursor: pointer;
  text-decoration: underline;
  padding: 3em 0em;
}

.fishing-link-visited {
  color: #8d07be;
}

.fishing-mail-signature {
  height: 5em;
}

.fishing-mail-quoted {
  border-left: 3px solid silver;
  padding: 0.2em 1em;
}

.fishing-mail-content-attachments {
  background-color: #444f52;
  padding: 0.5em;
  display: flex;
  flex-flow: row wrap;
}

.fishing-mail-content-attachments-item {
  color: #fff;
  background-color: var(--color-indigo);
  border-radius: 2em;
  padding: 0.2em 1em;
  font-size: 125%;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.15s linear;
}

.fishing-mail-content-attachments-item:hover {
  color: #fff;
  background-color: var(--color-indigo-lighter);
}

.fishing-panel-overlay-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  padding: 50px;
  display: flex;
  background-color: rgba(255, 255, 255, 0.6274509804);
}

.fishing-panel-overlay-content {
  flex-grow: 1;
  border: 1px solid #d0d0d0;
  background-color: #e0e0e0;
  border-radius: 30px;
  padding: 30px;
  overflow: auto;
  display: flex;
  flex-flow: column nowrap;
}

.fishing-panel-overlay-content-inner {
  flex-grow: 1;
  overflow-y: auto;
  padding-top: 20px;
}

.fishing-help-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  padding: 50px;
  display: flex;
  background-color: rgba(255, 255, 255, 0.6274509804);
}

.fishing-help-close {
  position: absolute;
  right: 60px;
  top: 60px;
}

.fishing-help-content {
  flex-grow: 1;
  border: 1px solid #d0d0d0;
  background-color: #e0e0e0;
  border-radius: 30px;
  padding: 30px;
  overflow: auto;
  display: flex;
  flex-flow: column nowrap;
}

.fishing-help-content-inner {
  flex-grow: 1;
  overflow-y: auto;
  padding-top: 20px;
}

.fishing-help-title {
  color: var(--color-indigo);
  text-align: center;
  margin-bottom: 1.5em;
  font-weight: bold;
}

.fishing-help {
  font-size: 150%;
}

.fishing-help ul {
  text-align: left;
}

.fishing-direction {
  margin-bottom: 1.2em;
  font-size: 120%;
  color: var(--bs-secondary);
  font-style: italic;
}

.fishing-overlay-loupe {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: var(--color-frost-blue);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150%;
  cursor: pointer;
  transition: background-color 0.15s linear;
}

.fishing-overlay-loupe:hover {
  background-color: var(--color-frost-blue-lighter);
}

.fishing-loupe-cursor {
  position: fixed;
  pointer-events: none;
  font-size: 200%;
  color: var(--color-frost-blue);
  z-index: 9999;
}

.no-cursor {
  cursor: none !important;
}

.fishing-loupe-cursor {
  pointer-events: none;
}

.fishing-message-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.6274509804);
}

.fishing-message-content {
  box-shadow: 0px 0px 0px 10px #A0A0A0;
  background-color: #eaeaea;
  border-radius: 30px;
  padding: 35px 60px;
  max-width: 600px;
  position: relative;
  font-size: 120%;
  text-align: left;
}

.fishing-message-container.fishing-message-suspicious .fishing-message-content {
  box-shadow: 0px 0px 0px 10px var(--bs-success);
}

.fishing-message-container.fishing-message-suspicious-hint .fishing-message-content {
  box-shadow: 0px 0px 0px 10px var(--bs-warning);
}

.fishing-message-title {
  font-weight: bold;
  margin-bottom: 0.5em;
  text-align: left;
}

.fishing-message-close {
  position: absolute;
  right: 10px;
  top: 10px;
}

.fishing-message-numbers {
  margin-top: 1em;
  font-weight: bold;
}

.fishing-message-success-description,
.fishing-panel-success-description-goto-home {
  margin-top: 1em;
  font-weight: bold;
  color: var(--bs-success);
}

.fishing-panel-success-description-goto-crypto {
  margin-top: 1em;
  font-weight: bold;
}

.crypto-panel-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.crypto-panel-content {
  margin-bottom: 50px;
  flex-grow: 1;
  max-width: 1000px;
}

.crypto-cypher {
  margin-bottom: 40px;
  font-size: 300%;
  font-family: monospace;
  letter-spacing: 0.2em;
}

.crypto-input {
  margin-bottom: 30px;
  font-size: 200%;
  font-family: monospace;
  letter-spacing: 0.1em;
  background: none;
  border: none;
  border-bottom: 1px solid gray;
  text-align: center;
}

.crypto-input:focus {
  outline: none;
}

.crypto-result-invalid {
  color: var(--bs-danger);
  font-size: 130%;
  margin-top: 20px;
}

.crypto-help-buttons {
  display: flex;
  flex-flow: column nowrap;
  gap: 1em;
  justify-content: center;
}

.crypto-panel-cryptex-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.6274509804);
}

.crypto-panel-cryptex-word {
  padding: 20px 40px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-bottom: 40px;
}

.crypto-panel-cryptex-word .crypto-cypher {
  margin-bottom: 0;
}

.crypto-panel-cryptex-content {
  position: relative;
  width: 600px;
  height: 600px;
}

.crypto-cryptex1, .crypto-cryptex2, .crypto-cryptex3 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  transition: transform 0.2s linear;
}

.crypto-panel-cryptex-buttons {
  margin-top: 30px;
}

.crypto-panel-cryptex-buttons button {
  font-size: 300%;
  background-color: #fff;
  border-radius: 45px;
  width: 90px;
  height: 90px;
  margin: 0px 20px;
  box-shadow: 1px 1px 10px 1px #CCC;
}

.crypto-panel-cryptex-buttons button:hover {
  background-color: #fff;
}

.crypto-panel-overlay-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  padding: 50px;
  display: flex;
}

.crypto-panel-overlay-back {
  position: absolute;
  left: 60px;
  top: 60px;
}

.crypto-panel-overlay-close {
  position: absolute;
  right: 60px;
  top: 60px;
}

.crypto-panel-overlay-back button,
.crypto-panel-overlay-close button {
  font-size: 140%;
}

.crypto-panel-overlay-content {
  flex-grow: 1;
  border: 1px solid #d0d0d0;
  background-color: #e0e0e0;
  border-radius: 30px;
  padding: 30px;
  overflow: auto;
}

.crypto-help-title {
  text-align: center;
  margin-bottom: 0.8em;
}

.crypto-help {
  font-size: 150%;
  margin-bottom: 2em;
}

.crypto-help .fa-arrow-right {
  top: 0.08em;
  position: relative;
}

.crypto-help-image {
  height: 8em;
}

.crypto-panel-success-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.6274509804);
}

.crypto-panel-success-content {
  box-shadow: 0px 0px 0px 10px var(--bs-success);
  background-color: #eaeaea;
  border-radius: 30px;
  padding: 30px;
  max-width: 600px;
  position: relative;
  font-size: 120%;
}

.crypto-panel-success-title {
  color: var(--bs-success);
  font-weight: bold;
  margin-bottom: 1em;
}

.crypto-panel-success-description {
  margin-bottom: 20px;
}

.crypto-panel-success-name {
  font-weight: bold;
  font-family: monospace;
}

.crypto-panel-success-description-goto-fishing {
  font-weight: bold;
}

.crypto-panel-success-description-goto-home {
  color: var(--bs-success);
  font-weight: bold;
}

.crypto-hint {
  font-size: 200%;
}/*# sourceMappingURL=main.css.map */