:root {
  --ha-blue: #0d6efd;
  --ha-indigo: #6610f2;
  --ha-purple: #6f42c1;
  --ha-pink: #d63384;
  --ha-red: #dc3545;
  --ha-orange: #fd7e14;
  --ha-yellow: #ffc107;
  --ha-green: #198754;
  --ha-teal: #20c997;
  --ha-cyan: #0dcaf0;
  --ha-white: #fff;
  --ha-black: #000;
  --ha-gray: #6c757d;
  --ha-gray-100: #f8f9fa;
  --ha-gray-200: #e9ecef;
  --ha-gray-300: #dee2e6;
  --ha-gray-400: #ced4da;
  --ha-gray-500: #adb5bd;
  --ha-gray-600: #6c757d;
  --ha-gray-700: #495057;
  --ha-gray-800: #343a40;
  --ha-gray-900: #212529;
  --ha-gray-dark: #343a40;
  --ha-primary: #0d6efd;
  --ha-secondary: #6c757d;
  --ha-success: #198754;
  --ha-info: #0dcaf0;
  --ha-warning: #ffc107;
  --ha-danger: #dc3545;
  --ha-light: #f8f9fa;
  --ha-dark: #212529;
  --ha-icon: #343a40;
  --ha-ballpoint: hsl(239, 49%, 33%);
  --ha-primaryColor: hsl(199, 98%, 48%);
  --ha-primaryColorTransparent: hsl(199, 98%, 48%, 0.4);
  --ha-primaryLightColor: hsl(195, 100%, 70%);
  --ha-primaryDarkColor: hsl(202, 100%, 38%);
  --ha-secondaryColor: hsl(199, 18%, 40%);
  --ha-secondaryColorTransparent: hsl(199, 18%, 40%, 0.4);
  --ha-secondaryLightColor: hsl(199, 19%, 58%);
  --ha-secondaryDarkColor: hsl(198, 31%, 23%);
  --ha-primaryTextColor: hsl(0, 0%, 0%);
  --ha-secondaryTextColor: hsl(0, 0%, 100%);
  --ha-playButtonBackgroundColor: hsl(198, 31%, 23%);
  --ha-playButtonTextColor: hsl(0, 0%, 100%);
  --ha-brandLogo: url(/media/d-brfin_logo.png);
  --ha-bg-image-default: url(/media/background-white-12.jpg);
  --ha-bg-image-cityDay: url(/media/images/bg_city_day_841454584@2560w-90.jpg);
  --ha-bg-image-CityNight: url(/media/images/bg_city_night_841454584@2560w-90.jpg);
  --ha-bg-image-floor: url(/media/images/floor_850868040@1920w-90.jpg);
  --ha-bg-image-phone: url(/media/images/bg_telephone_1037848024@1920w-90.jpg);
  --ha-bg-image-office: url(/media/images/bg_office_1074962500@2560w-90.jpg);
  --ha-bg-image-i-03-01: url(/media/modules/i-03-01.png);
  --ha-bg-image-m-02-01-02: url(/media/modules/m-02-01-02-01_de.png);
  --ha-bg-image-m-02-01-03: url(/media/modules/m-02-01-03_de.png);
  --ha-bg-image-m-02-02-01: url(/media/modules/m-02-02-01_de.png);
  --ha-bg-image-m-04-01-01: url(/media/modules/m-04-01-01_de.png);
  --ha-bg-image-m-04-01-02: url(/media/modules/m-04-01-02_de.png);
  --ha-bg-image-m-04-01-04: url(/media/modules/m-04-01-04_de.png);
  --ha-bg-image-m-06-02-01: url(/media/modules/m-06-02-01_de.png);
  --ha-bg-image-o-02-01: url(/media/modules/o-02-01.png);
  --ha-bg-image-m-size-width: 960px;
  --ha-bg-image-m-size-height: 540px;
  --ha-image-BruteForceAttack: url(/media/images/bruteforceattack.png);
  --ha-image-CleanDeskPolicy: url(/media/images/cleandeskpolicy.png);
  --ha-image-DistributedNetwork: url(/media/images/distributednetwork_locked.png);
  --ha-image-Flipchart: url(/media/images/flipchart.png);
  --ha-image-Kryptonizer: url(/media/images/kryptonizer.jpg);
  --ha-image-Malware: url(/media/images/malware.png);
  --ha-image-Microphone: url(/media/images/microphone.png);
  --ha-image-Note: url(/media/images/note.png);
  --ha-image-PassphraseCar: url(/media/images/passphrase_car.png);
  --ha-image-Pinpad: url(/media/images/pinpad.png);
  --ha-image-TalkingHead: url(/media/images/talking_head.png);
  --ha-image-Honeypot: url(/media/the-honeypot.png);
  --ha-image-CityNightHacker: url(/media/images/city_night_hacker@640w-90.jpg);
  --ha-check-button-size-width: 140px;
  --ha-check-button-size-height: 40px;
  --ha-input-field-bg-image-m-02-01-02-01: url(/media/modules/m-02-01-02-01-01_de.png);
  --ha-input-field-bg-image-m-02-01-02-02: url(/media/modules/m-02-01-02-01-02_de.png);
  --ha-input-field-bg-image-m-02-01-02-03: url(/media/modules/m-02-01-02-01-03_de.png);
  --ha-input-field-size-width: 250px;
  --ha-input-filed-size-height: 40px;
}

html {
  height: 100%;
  font-size: 100%;
  /* 16px */
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--ha-primaryTextColor);
  background-color: var(--ha-light);
  /* font-family: 'Roboto Mono', sans-serif; */
  font-family: 'Roboto', sans-serif;
  font-size: 100%;
  font-size: 1rem;
  font-size: 16px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: right center;
  background-image: var(--ha-bg-image-default);
}

body {
  /* text-align: justify; */
  /* overflow-wrap: break-word; */
  /* word-wrap: break-word; */
  /* -webkit-hyphens: auto; */
  /* -ms-hyphens: auto; */
  /* -moz-hyphens: auto; */
  /* hyphens: auto; */
}

body::before {
  content: '';
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
  z-index: 100;
}

body.city {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: var(--ha-bg-image-cityDay);
}

body.city_night {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: var(--ha-bg-image-CityNight);
}

body.office {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: var(--ha-bg-image-office);
}

audio {
  border-radius: 0px;
  width: 250px;
  height: 48px;
  margin-top: 5px;
  margin-bottom: 5px;
}

audio::-webkit-media-controls-mute-button {
  display: none !important;
}

audio::-webkit-media-controls-volume-slider {
  display: none !important;
}

audio::-webkit-media-controls-volume-control-container.closed {
  display: none !important;
}

audio::-webkit-media-controls-volume-control-container {
  display: none !important;
}

.no-select {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.force-select {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

.brand {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: bold;
  font-size: 1.3rem;
}

div.brandLogo {
  background: var(--ha-brandLogo) no-repeat;
  background-size: contain;
}

.ha-bg-primary {
  background-color: var(--ha-primaryColor);
}

.ha-bg-primary-transparent {
  background-color: var(--ha-primaryColorTransparent);
}

.ha-bg-primary-dark {
  background-color: var(--ha-primaryDarkColor);
}

.ha-bg-primary-light {
  background-color: var(--ha-primaryLightColor);
}

.ha-bg-secondary {
  background-color: var(--ha-secondaryColor);
}

.ha-bg-secondary-transparent {
  background-color: var(--ha-secondaryColorTransparent);
}

.ha-bg-secondary-dark {
  background-color: var(--ha-secondaryDarkColor);
}

.ha-bg-secondary-light {
  background-color: var(--ha-secondaryLightColor);
}

.ha-bg-light {
  background-color: var(--ha-light);
}

.ha-bg-warning {
  background-color: var(--ha-warning);
}

.ha-text-primary {
  color: var(--ha-primaryTextColor);
}

.ha-text-secondary {
  color: var(--ha-secondaryTextColor);
}

.ha-text-secondaryDark {
  color: var(--ha-secondaryDarkColor);
}

.ha-text-light {
  color: var(--ha-light);
}

.ha-nav-link {
  display: block;
}

li.nav-item {
  margin-left: 0.875rem;
  font-size: 16px;
  font-size: 1rem;
  color: var(--ha-primaryTextColor);
  /* color: var(--ha-primaryDarkColor) !important; */
}

a.ha-nav-link,
button.ha-nav-link,
li.nav-item>form {
  font-size: 14px !important;
  font-size: 0.875rem !important;
  text-align: center;
  color: var(--ha-primaryTextColor);
  margin: 0 auto 0;
}

a.ha-nav-link>i,
button.ha-nav-link>i {
  color: var(--ha-primaryDarkColor);
  font-size: 22.4px;
  font-size: 1.4rem;
}

a.ha-nav-link:link,
button.ha-nav-link:link,
a.ha-nav-link:visited,
button.ha-nav-link:visited,
a.ha-nav-link:hover,
button.ha-nav-link:hover,
a.ha-nav-link:active,
button.ha-nav-link:active {
  text-decoration: none;
}

a.ha-nav-link:hover,
button.ha-nav-link:hover {
  color: var(--ha-primaryDarkColor);
}

button.ha-nav-link {
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
}

a.external:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.8rem;
  content: " \f35d";
}

.notice-item {
  border: none;
  outline: none;
  background-color: var(--ha-info);
  color: var(--ha-dark);
  padding: 0.5rem;
  font-size: 0.8rem;
  -webkit-box-shadow: 20px 30px 12px -26px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 20px 30px 12px -26px rgba(0, 0, 0, 0.9);
  box-shadow: 20px 30px 12px -26px rgba(0, 0, 0, 0.9);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  border: solid 3px #41403E;
}

h1 {
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.8rem;
}

h2 {
  font-size: 28.8px;
  font-size: 1.8rem;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.8rem;
}

h3 {
  font-size: 25.6px;
  font-size: 1.6rem;
  line-height: 1.3;
}

h4 {
  font-size: 22.4px;
  font-size: 1.4rem;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.8rem;
}

h5 {
  font-size: 19.2px;
  font-size: 1.2rem;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.8rem;
}

h6 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.8rem;
}

p {
  font-size: 19.2px;
  font-size: 1.2rem;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: .5rem;
}

p.lead {
  font-size: 19.2px;
  font-size: 1.2rem;
  line-height: 1.3;
}

p.lead::before {
  color: var(--ha-icon);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f10d";
  padding-right: 0.625rem;
}

p.task {
  font-family: 'Patrick Hand';
  color: var(--ha-secondaryDarkColor);
}

p.task::before {
  color: var(--ha-icon);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0ae";
  padding-right: 0.625rem;
}

div#aboutUsModal {
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px;
  font-size: 1rem;
}

div#aboutUsModal h6 {
  font-weight: 900 !important;
}

div#aboutUsModal .list-group-item {
  border: none !important;
  padding: 0 1rem !important;
}

.game-timer {
  font-family: 'Roboto Mono', sans-serif;
}

.messages {
  font-size: 19.2px;
  /* font-size: 16px; */
  font-size: 1.2rem;
  /* font-size: 1rem; */
  line-height: 1.3;
  /* line-height: 1.2; */
}

.messages.clicks,
.messages.notice,
.messages.timer {
  font-size: 16px !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

.toast-body {
  /* font-family: 'Architects Daughter', cursive; */
  /* font-family: 'Chilanka', cursive; */
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  font-size: 1rem;
  margin: 0;
}

.messages #finished-message-message,
.messages #finished-message-message-modal,
.messages #remaining-trials-message,
.messages.clicks,
.messages.notice,
.messages.timer {
  font-family: 'Patrick Hand', cursive;
  color: var(--ha-secondaryDarkColor);
  /* font-weight: 900; */
}

.messages #finished-message-message::before,
.messages #finished-message-message-modal::before {
  color: var(--ha-info);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f005";
  padding-right: 10px;
}

.messages #remaining-trials-message::before,
.messages #remaining-trials-message-modal::before {
  color: var(--ha-warning);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f071";
  padding-right: 10px;
}

/*
.bs button.btn.ha-btn-primary {
  color: var(--ha-secondaryTextColor);
  background-color: var(--ha-primaryColor);
  border-color: var(--ha-primaryColor);
}
*/

/*
.bs button.btn.ha-btn-primary:hover {
  color: var(--ha-secondaryTextColor);
  background-color: var(--ha-primaryDarkColor);
  border-color: var(--ha-primaryDarkColor);
}
*/

.ha-btn-primary,
.ha-btn-secondary,
.ha-btn-feedback,
.ha-border-sketchy,
.bs div.assistance-modal>div.modal-content {
  padding: 0.2rem 0.4rem;
  display: inline-block;
  border: 3px solid #333333;
  border-radius: 2% 6% 5% 4%/1% 1% 2% 4%;
  position: relative;
}

.sketchy::before {
  width: 100%;
  height: 100%;
}

.bs div.assistance-modal>div.modal-content {
  max-width: 500px;
  box-shadow: 0 .3rem 0.7rem rgba(0, 0, 0, 0.8) !important;
  font-family: 'Patrick Hand', cursive;
  font-size: 19.2px;
  font-size: 1.2rem;
  color: var(--ha-secondaryDarkColor);
  max-height: 100%;
  overflow: hidden;
  padding: 0 !important;
  display: inline-block;
  border: 3px solid #333333;
  border-radius: 2% 6% 5% 4%/1% 1% 2% 4%;
  position: relative;
  user-select: none;
}

.bs div.assistance-modal div.modal-header {
  background-color: var(--ha-gray-300);
  padding: 0.3rem 1rem;
}

.bs div.assistance-modal div.modal-footer {
  padding: 0.3rem 1rem;
}

.bs div.assistance-modal div.modal-header button span {
  display: none;
}

.bs div.assistance-modal div.modal-header>button {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.5;
}

.bs div.assistance-modal div.modal-header>button:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}

.bs div.assistance-modal div.modal-header>button:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  opacity: 1;
}

.bs div.assistance-modal div.modal-header>button:disabled,
.bs div.assistance-modal div.modal-header>button.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.25;
}

.bs div.assistance-modal div.modal-footer>button {
  /* font-family: 'Architects Daughter', cursive; */
  /* font-family: 'Chilanka', cursive; */
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  font-size: 1rem;
  color: var(--ha-dark);
  background-color: var(--ha-secondaryLightColor);
  -webkit-box-box-shadow: 0 .2rem .5rem rgba(0, 0, 0, 0.8) !important;
  -moz-box-box-shadow: 0 .2rem .5rem rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.8) !important;
  padding: 0.3rem 0.4rem;
  display: inline-block;
  border: 3px solid #333333;
  border-radius: 2% 6% 5% 4%/1% 1% 2% 4%;
  position: relative;
}

.bs div.assistance-modal div.modal-footer button:hover {
  color: var(--ha-light);
  -webkit-box-box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.8) !important;
  -moz-box-box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, 0.8) !important;
  transform: scale(1.05);
}

.sketchy::before,
.bs div.assistance-modal>div.modal-content {
  content: "";
  border: 2px solid #353535;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
  border-radius: 1% 1% 2% 4%/2% 6% 5% 4%;
}

.bs div.modal.fade.show>div>div>p {
  font-family: 'Patrick Hand', cursive !important;
  font-size: 19.2px !important;
  font-size: 1.2rem !important;
  line-height: 1.2 !important;
  color: var(--ha-secondaryDarkColor) !important;
}

.bs div.modal.fade.show>div>div>p>p.lesson {
  font-weight: 900;
}

.bs div.modal.fade.show>div>div>p>p.lesson::before {
  color: var(--ha-icon);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f19d";
  padding-right: 10px;
}

.bs div.modal.fade.show>div>div>img {
  border-radius: 10%;
  -webkit-box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
}

.bs div.modal-content {
  background-color: var(--ha-light) !important;
  padding: 15px !important;
}

.bs div.modal-header {
  padding: 0;
}

.bs div.modal-content .strong {
  font-weight: bold !important;
}

.ha-btn-link,
.ha-btn-primary,
.ha-btn-secondary {
  font-family: 'Patrick Hand', cursive;
  font-size: 19.2px !important;
  font-size: 1.2rem !important;
}

.ha-btn-link {
  font-size: 22.4px !important;
  font-size: 1.4rem !important;
  padding: 0 .75rem;
}

.ha-btn-primary,
.ha-btn-secondary {
  font-size: 19.2px !important;
  font-size: 1.2rem !important;
  color: var(--ha-dark);
  background-color: var(--ha-secondaryLightColor);
  -webkit-box-box-shadow: 0 .2rem .5rem rgba(0, 0, 0, 0.8) !important;
  -moz-box-box-shadow: 0 .2rem .5rem rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.8) !important;
}

.ha-btn-primary:hover,
.ha-btn-secondary:hover {
  color: var(--ha-light);
  -webkit-box-box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.8) !important;
  -moz-box-box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, 0.8) !important;
  transform: scale(1.05);
}

.ha-btn-play,
.ha-btn-play #playIcon {
  font-size: 19.2px !important;
  font-size: 1.2rem !important;
}

.ha-btn-play {
  /* height: 2.4rem !important; */
  width: 2.7rem !important;
}

.button-cert {
  background-color: var(--bs-teal) !important;
}

.button-feedback {
  background-color: var(--bs-info) !important;
}

.ha-border-sketchy {
  padding: 0 !important;
}

.ha-text {
  font-family: 'Roboto', sans-serif !important;
}

.ha-text-assistant {
  font-family: 'Patrick Hand', cursive;
  color: var(--ha-secondaryDarkColor);
}

.ha-text-pencil {
  /* font-family: 'Architects Daughter', cursive; */
  font-family: 'Chilanka', cursive;
  color: var(--ha-ballpoint);
}

.ha-text-welcome {
  font-family: 'Patrick Hand', cursive;
  color: var(--ha-secondaryDarkColor);
}

.ha-text-welcome p {
  font-size: 22.4px;
  font-size: 1.4rem;
  line-height: 1.2;
}

.ha-hyphens-none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
}

.ha-centered {
  /* review */
  align-items: center;
  justify-content: center;
}

.ha-shadow {
  box-shadow: 0 .3rem 0.7rem rgba(0, 0, 0, 0.8) !important;
}

.ha-visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
}

.quote img.small {
  width: 8rem;
}

.ha-toast {
  width: 250px !important;
}

.ha-progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: var(--ha-secondaryLightColor);
  border-radius: 0.25rem;
  border: 2px solid var(--ha-gray-dark);
  -webkit-box-shadow: 20px 30px 12px -26px rgb(0 0 0 / 90%);
  -moz-box-shadow: 20px 30px 12px -26px rgba(0, 0, 0, 0.9);
  box-shadow: 20px 30px 12px -26px rgb(0 0 0 / 90%);
}

.ha-progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: var(--ha-primaryColor);
  transition: width 0.6s ease;
}

.ha-w-20 {
  width: 20% !important;
}

.ha-normal {
  font-size: 16px !important;
  font-size: 1rem !important;
}

.ha-small {
  font-size: 14px !important;
  font-size: 0.875rem !important;
}

.ha-tiny {
  font-size: 12px !important;
  font-size: 0.75rem !important;
}

.ha-mini {
  font-size: 10px !important;
  font-size: 0.625rem !important;
}

.ha-normal-rfs {
  font-size: 100% !important;
}

.ha-small-rfs {
  font-size: 87% !important;
}

.ha-tiny-rfs {
  font-size: 75% !important;
}

.ha-mini-rfs {
  font-size: 62% !important;
}

.bi-info::before {
  display: inline-block;
  color: var(--bs-info);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f129";
  padding-right: 0.3rem;
}

.bi-info-circle::before {
  display: inline-block;
  color: var(--bs-info);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f05a";
  padding-right: 0.3rem;
}

/* Disorganized Paper Stack */
/* <div class="paper"></div> */
.paper-disorganized {
  background: #fff;
  padding: 16px;
  position: relative;
}

.paper-disorganized,
.paper-disorganized::before,
.paper-disorganized::after {
  /* Styles to distinguish sheets from one another */
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  border: 1px solid #bbb;
}

.paper-disorganized::before,
.paper-disorganized::after {
  content: "";
  position: absolute;
  height: 95%;
  width: 99%;
  background-color: #eee;
}

.paper-disorganized::before {
  right: 15px;
  top: 0;
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  -ms-transform: rotate(-1deg);
  transform: rotate(-1deg);
  z-index: -1;
}

.paper-disorganized::after {
  top: 5px;
  right: -5px;
  -moz-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  transform: rotate(1deg);
  z-index: -2;
}

.paper-disorganized.note {
  width: 800px;
  height: 460px;
}

/*
 * newspaper
 */
.news_paper {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
}

.news_paper .news_title>* {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  max-width: 90%;
  margin: auto;
  padding: 0;
}

.news_paper .news_title {
  border-top: 5px solid var(--ha-black);
  border-bottom: 5px solid var(--ha-black);
}

.news_paper .news_title h1 {
  text-align: center;
}

.news_paper .news_subtitle {
  display: flex;
  max-width: 100%;
}

.news_paper .news_subtitle p {
  font-size: 0.6rem;
  font-weight: bold;
  line-height: 1.4;
  padding: 10px 0 3px 0;
  margin: 0;
}

.news_paper .news_subtitle p.left {
  margin-right: auto;
}

.news_paper .news_subtitle p.right {
  margin-left: auto;
}

.news_paper .news_subject_wrapper {
  color: white;
  background-color: black;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

.news_paper ul.news_subjects {
  display: block;
  margin: 0;
  padding: 0;
}

.news_paper .news_subjects li {
  display: inline;
  list-style-type: none;
}

.news_paper .news_article {
  display: column;
}

.news_paper .news_article h4 {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 10px 0 5px 0;
}

.news_paper .news_article p {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.4;
  hyphens: auto;
  text-align: justify
}

.console {
  font-family: 'Roboto Mono', sans-serif;
  color: var(--ha-teal);
  font-size: 0.875rem;
  line-height: 1.2;
  overflow: hidden;
}

.screen {
  position: relative;
  top: 220px;
  left: 515px;
  height: 11rem;
  width: 17rem;
  padding-left: 0.2rem;
  z-index: 100;
  overflow: hidden;
}

/**************************************
* Knowledge base
*/
.lesson-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
}

/*
* not in use???
* .lesson-modal .modal {
*   /* position: static !important; *#/
*   display: block !important;
* }
*/

.lesson .rotate-3 {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  margin: 1rem;
}

.lesson,
.lesson .modal-title,
.lesson .notice-item {
  font-family: 'Patrick Hand', cursive;
  color: var(--ha-secondaryDarkColor);
}

.lesson h5 {
  font-size: 22.4px;
  font-size: 1.4rem;
}

.lesson h6 {
  font-size: 19.2px;
  font-size: 1.2rem;
  margin-top: 0.8rem;
}

.lesson p,
.manual p {
  font-family: 'Patrick Hand', cursive;
  font-size: 19.2px;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--ha-secondaryDarkColor);
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.lesson p.title {
  font-weight: 900;
  margin-top: 0;
}

.lesson ul {
  padding-bottom: 0.3rem;
  margin-top: 0;
  margin-bottom: 0;
}

.lesson p.title::before,
.lesson span.title::before,
.manual span.title::before {
  color: var(--ha-icon);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f19d";
  padding-right: 0.25rem;
}

.ha-check-bullet li,
.ha-danger-bullet li {
  font-family: 'Patrick Hand', cursive;
  display: block;
  font-size: 19.2px;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ha-secondaryDarkColor);
  padding-bottom: 0.625rem;
}

.ha-check-bullet li::before {
  color: var(--ha-success);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  float: left;
  margin-left: -25px;
  content: "\f00c";
}

.ha-danger-bullet li::before {
  color: var(--ha-danger);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  float: left;
  margin-left: -25px;
  content: "\f071";
}

.lesson .bg-image,
.news_article .bg-image {
  max-width: 15rem;
}

.lesson .bg-image.cleardesk {
  background: var(--ha-image-CleanDeskPolicy) no-repeat;
  background-size: 13rem;
  background-position: center center;
  width: 16rem;
  height: 10rem;
}

.lesson .bg-image.bruteforce {
  background: var(--ha-image-BruteForceAttack) no-repeat;
  background-size: 10rem;
  background-position: center center;
  width: 11rem;
  height: 4rem;
}

.lesson .bg-image.distributed_network {
  background: var(--ha-image-DistributedNetwork) no-repeat;
  background-size: 6rem;
  background-position: center center;
  width: 8rem;
  height: 7rem;
}

.lesson .bg-image.flipchart {
  background: var(--ha-image-Flipchart) no-repeat;
  background-size: 4rem;
  background-position: center center;
  width: 6rem;
  height: 10rem;
}

.news_article .bg-image.honeypot {
  background: var(--ha-image-Honeypot) no-repeat;
  background-size: 10rem;
  background-position: center center;
  width: 11rem;
  height: 8rem;
}

.lesson .bg-image.kryptonizer {
  background: var(--ha-image-Kryptonizer) no-repeat;
  background-size: 12rem;
  background-position: center center;
  width: 13rem;
  height: 9rem;
}

.lesson .bg-image.malware {
  background: var(--ha-image-Malware) no-repeat;
  background-size: 7rem;
  background-position: center center;
  width: 8rem;
  height: 7rem;
}

.lesson .bg-image.microphone {
  background: var(--ha-image-Microphone) no-repeat;
  background-size: 3rem;
  background-position: center center;
  width: 6rem;
  height: 6rem;
}

.lesson .bg-image.note {
  background: var(--ha-image-Note) no-repeat;
  background-size: 5rem;
  background-position: center center;
  width: 5.8rem;
  height: 5.5rem;
}

.lesson .bg-image.passphrase_car,
.card .bg-image.passphrase_car {
  background: var(--ha-image-PassphraseCar) no-repeat;
  background-position: center center;
}

.lesson .bg-image.passphrase_car {
  background-size: 4rem;
  width: 5rem;
  height: 4rem;
}

.card .bg-image.passphrase_car {
  background-size: 8rem;
  width: 9rem;
  height: 7rem;
}

.lesson .bg-image.pinpad {
  background: var(--ha-image-Pinpad) no-repeat;
  background-size: 7rem;
  background-position: center center;
  width: 8rem;
  height: 8rem;
}

.lesson .bg-image.talking_head {
  background: var(--ha-image-TalkingHead) no-repeat;
  background-size: 8rem;
  background-position: center center;
  width: 9rem;
  height: 5rem;
}

/**************************************
* Modules
*/
.module__wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.i-00,
.i-01,
.i-02,
.i-03,
.m-01-01-00,
.m-01-01-01,
.m-02-01-00,
.m-02-01-01,
.m-02-01-02,
.m-02-01-03,
.m-02-02-01,
.m-02-02-02,
.m-02-02-03,
.m-02-03-01,
.m-03-01-00,
.m-03-01-01,
.m-03-01-02,
.m-03-01-03,
.m-04-01-00,
.m-04-01-01,
.m-04-01-02,
.m-04-01-03,
.m-04-01-04,
.m-04-01-05,
.m-04-01-06,
.m-04-02-01,
.m-04-02-02,
.m-04-02-03,
.m-04-02-04,
.m-05-01-00,
.m-05-01-01,
.m-05-01-02,
.m-05-01-03,
.m-05-01-04,
.m-06-01-00,
.m-06-01-01,
.m-06-01-02,
.m-06-02-01,
.m-06-02-02,
.m-06-02-03,
.m-06-02-04,
.m-06-02-05,
.m-06-03-01,
.m-06-03-02,
.o-00,
.o-01,
.o-02,
.o-02-01 {
  width: var(--ha-bg-image-m-size-width);
  height: var(--ha-bg-image-m-size-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.i-01,
.m-03-01-01,
.m-05-01-01 {
  width: calc(var(--ha-bg-image-m-size-width) - 15%);
}

.m-01-01-99,
.m-02-01-99,
.m-02-02-99,
.m-02-03-99,
.m-03-01-99,
.m-04-01-99,
.m-04-02-99,
.m-05-01-99,
.m-06-03-99 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
}

.m-01-01-99 .modal,
.m-02-01-99 .modal,
.m-02-02-99 .modal,
.m-02-03-99 .modal,
.m-03-01-99 .modal,
.m-04-01-99 .modal,
.m-04-02-99 .modal,
.m-05-01-99 .modal,
.m-06-03-99 .modal {
  display: block !important;
}

.i-03,
.o-02 {
  background: var(--ha-bg-image-i-03-01) no-repeat;
  background-size: var(--ha-bg-image-m-size-width) var(--ha-bg-image-m-size-height);
}

.i-03 #typewriter,
.o-02 #typewriter {
  /* width: var(--ha-bg-image-m-size-width); */
  height: var(--ha-bg-image-m-size-height);
  color: var(--ha-secondaryTextColor);
  position: relative;
  top: -160px;
}

.m-02-01-02 {
  background: var(--ha-bg-image-m-02-01-02) no-repeat;
  background-size: var(--ha-bg-image-m-size-width) var(--ha-bg-image-m-size-height);
}

.m-02-01-03 {
  background: var(--ha-bg-image-m-02-01-03) no-repeat;
  background-size: var(--ha-bg-image-m-size-width) var(--ha-bg-image-m-size-height);
}

.m-02-02-01 {
  background: var(--ha-bg-image-m-02-02-01) no-repeat;
  background-size: var(--ha-bg-image-m-size-width) var(--ha-bg-image-m-size-height);
}

.m-02-02-02 {
  background: var(--ha-bg-image-floor) no-repeat;
  background-size: var(--ha-bg-image-m-size-width) var(--ha-bg-image-m-size-height);
}

.m-04-01-01 {
  background: var(--ha-bg-image-m-04-01-01) no-repeat;
  background-size: var(--ha-bg-image-m-size-width) var(--ha-bg-image-m-size-height);
}

.m-04-01-02,
.m-04-01-05,
.m-04-01-06,
.m-04-02-04 {
  background: var(--ha-bg-image-m-04-01-02) no-repeat;
  background-size: var(--ha-bg-image-m-size-width) var(--ha-bg-image-m-size-height);
}

.m-06-01-01 {
  background: var(--ha-bg-image-phone) no-repeat;
  background-size: var(--ha-bg-image-m-size-width) var(--ha-bg-image-m-size-height);
}

.m-04-01-04 {
  background: var(--ha-bg-image-m-04-01-04) no-repeat;
  background-size: var(--ha-bg-image-m-size-width) var(--ha-bg-image-m-size-height);
}

.m-06-02-01 {
  background: var(--ha-bg-image-m-06-02-01) no-repeat;
  background-size: var(--ha-bg-image-m-size-width) var(--ha-bg-image-m-size-height);
}

.o-02-01 {
  background: var(--ha-bg-image-o-02-01) no-repeat;
  background-size: var(--ha-bg-image-m-size-width) var(--ha-bg-image-m-size-height);
}

.m-02-01-02 div.window {
  width: 28rem;
  height: 15rem;
  margin-left: 2rem;
  padding: 0;
}

.m-02-01-02 div.login {
  margin-top: 1rem;
}

.m-02-01-02 div.login p {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.2;
  padding-left: 0.5rem;
  margin: 0;
}

.m-02-01-02 div.login h6 {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
  padding-left: 1.5rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  margin: 0;
}

.m-02-01-02 div.inputs-container,
.m-02-01-02 #root div.inputs-container {
  width: var(--ha-input-field-size-width);
  height: var(--ha-input-filed-size-height);
  padding-left: 3rem;
  padding-top: 0.4rem;
}

.m-02-01-02 div.user {
  background: var(--ha-input-field-bg-image-m-02-01-02-01) no-repeat;
  background-size: var(--ha-input-field-size-width) var(--ha-input-filed-size-height);
}

.m-02-01-02 div.inputs-container,
.m-02-01-02 #root div.inputs-container {
  background: var(--ha-input-field-bg-image-m-02-01-02-02) no-repeat;
  background-size: var(--ha-input-field-size-width) var(--ha-input-filed-size-height);
}

.m-02-01-02 input[type="text"] {
  background-color: transparent;
  border: 0px;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: black;
}

.m-02-01-02 div.inputs-container input[type="text"] {
  color: var(--ha-gray-dark);
}

.m-02-01-02 button#check-solution-btn.button-link {
  width: var(--ha-check-button-size-width);
  height: var(--ha-check-button-size-height);
  border: none;
  outline: none;
  background: var(--ha-input-field-bg-image-m-02-01-02-03) no-repeat;
  background-size: var(--ha-check-button-size-width) var(--ha-check-button-size-height);
  cursor: pointer;
  padding: 0.5rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  color: var(--ha-secondaryTextColor);
}

.m-02-02-02 div#dialog,
.m-06-01-01 div#dialog {
  width: 100%;
  height: 100%;
}

/* https://bootsnipp.com/snippets/y8e4W */
.m-02-02-02 div#dialog .text,
.m-06-01-01 div#dialog .text {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.m-02-02-02 div#dialog .text>p,
.m-06-01-01 div#dialog .text>p {
  min-width: 100%;
  margin-top: 0;
  margin-bottom: auto;
  font-size: 19.2px;
  font-size: 1.2rem;
  line-height: 1.3;
}

.m-02-02-02 div#dialog .text-l,
.m-06-01-01 div#dialog .text-l {
  float: left;
  padding-right: 10px;
}

.m-02-02-02 div#dialog .text-r,
.m-06-01-01 div#dialog .text-r {
  float: right;
  padding-left: 10px;
}

.m-02-02-02 div#dialog .avatar,
.m-06-01-01 div#dialog .avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  float: left;
  padding-right: 20px;
  border-radius: 50%;
}

.m-02-02-02 div#dialog img.circle,
.m-06-01-01 div#dialog img.circle {
  border-radius: 50%;
  width: 36px;
}

.m-02-02-02 div#dialog .talk,
.m-06-01-01 div#dialog .talk {
  margin-top: 5px;
  width: calc(100% - 3rem);
  border-radius: 5px;
  padding: 5px;
  display: flex;
}

.m-02-02-02 div#dialog .msg-rta,
.m-06-01-01 div#dialog .msg-rta {
  float: right;
}

.m-02-02-02 div#dialog .msg-rta {
  background: var(--ha-teal);
}

.m-06-01-01 div#dialog .msg-rta {
  background: var(--ha-secondaryLightColor);
}

.m-02-02-02 div#dialog .msg,
.m-06-01-01 div#dialog .msg {
  float: left;
}

.m-02-02-02 div#dialog .msg {
  background: var(--ha-cyan);
}

.m-06-01-01 div#dialog .msg {
  background: var(--ha-primaryLightColor);
}

.m-02-02-02 div#dialog .frame>div:last-of-type,
.m-06-01-01 div#dialog .frame>div:last-of-type {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
}

.m-02-02-02 div#dialog>div>div>div:nth-child(2)>span,
.m-06-01-01 div#dialog>div>div>div:nth-child(2)>span {
  background: whitesmoke;
  padding: 10px;
  font-size: 21px;
  border-radius: 50%;
}

.m-02-02-02 div#dialog>div>div>div.msg-rta.talk,
.m-06-01-01 div#dialog>div>div>div.msg-rta.talk {
  margin: auto;
  margin-left: 1%;
}

.m-02-02-02 div#dialog ul,
.m-06-01-01 div#dialog ul {
  /* width: var(--ha-bg-image-m-size-width); */
  min-width: 100%;
  /* var(--ha-bg-image-m-size-height); */
  /* width: 65em; */
  list-style-type: none;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  /* position:absolute; */
  /* bottom: 47px; */
  /* display: flex; */
  /* flex-direction: column; */
  /* top: 0; */
  /* overflow-y: auto; */
}

.m-02-02-02 div#dialog .msg:before,
.m-06-01-01 div#dialog .msg:before {
  width: 0;
  height: 0;
  content: "";
  top: -5px;
  left: -14px;
  position: relative;
  border-style: solid;
  border-width: 0 13px 13px 0;
}

.m-02-02-02 div#dialog .msg:before {
  border-color: transparent var(--ha-cyan) transparent transparent;
}

.m-06-01-01 div#dialog .msg:before {
  border-color: transparent var(--ha-primaryLightColor) transparent transparent;
}

.m-02-02-02 div#dialog .msg-rta:after,
.m-06-01-01 div#dialog .msg-rta:after {
  width: 0;
  height: 0;
  content: "";
  top: -5px;
  left: 14px;
  position: relative;
  border-style: solid;
  border-width: 13px 13px 0 0;
}

.m-02-02-02 div#dialog .msg-rta:after {
  border-color: var(--ha-teal) transparent transparent transparent;
}

.m-02-02-03,
.m-05-01-04 {
  font-size: 19.2px;
  font-size: 1.2rem;
  line-height: 1.3;
}

.m-06-01-01 div#dialog .msg-rta:after {
  border-color: var(--ha-secondaryLightColor) transparent transparent transparent;
}

.m-02-02-03 div#root,
.m-05-01-04 div#root {
  margin-top: 5px;
}

.m-02-02-03 #root div.multiple-choice-row,
.m-05-01-04 #root div.multiple-choice-row {
  height: 3rem;
  margin: 0 0 0.3rem 0;
  padding: 0;
  width: 100%;
}

.m-02-02-03 #root div.multiple-choice-element,
.m-05-01-04 #root div.multiple-choice-element {
  width: 100%;
}

.m-02-02-03 #root div.multiple-choice-element:nth-child(1),
.m-05-01-04 #root div.multiple-choice-element:nth-child(1) {
  flex: 1 0 auto;
  align-self: auto;
  width: 100%;
}

.m-02-02-03 #root div.multiple-choice-element div:nth-child(2),
.m-05-01-04 #root div.multiple-choice-element div:nth-child(2) {
  flex: 0 1 auto;
  align-self: auto;
}

.m-02-02-03 #root div.multiple-choice-element-label,
.m-05-01-04 #root div.multiple-choice-element-label {
  padding-right: 1rem;
  width: 100%;
}

.m-03-01-03 #root div.memory-row {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
}

.m-03-01-03 #root div.react-card-flip {
  /* padding-left: 5px !important; */
  /* padding-right: 5px !important; */
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important;
}

.m-03-01-03 #root div.memory-card {
  /* width: calc(10vw) !important; */
  /* height: calc(15vw) !important; */
  width: calc(1.50 * 6vw) !important;
  height: calc(2.09 * 6vw) !important;
}

.m-03-01-03 #root div.memory-card.frontside {
  background-color: var(--ha-black) !important;
}

.m-04-01-01 div.bg_window_pass {
  background: url(/media/modules/m-04-01-01-05_de.png) no-repeat;
}

.m-04-01-01 div.bg_window_pass {
  background: url(/media/modules/m-04-01-01-05_de.png) no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
}

.m-04-01-01 div.code {
  position: relative;
  top: -0.8rem;
}

.m-04-01-01 div.code h6 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.2;
  padding-left: 2rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  margin: 0;
}

.m-04-01-01 input[type="text"] {
  background-color: transparent;
  border: 0px;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: black;
}

.m-04-01-01 .pass input[type="text"] {
  color: var(--ha-gray-dark);
  background: url(/media/modules/m-04-01-01-02_de.png) no-repeat;
  background-size: 253px 40px;
  height: 2.6rem;
  width: 16rem;
  padding-left: 3rem;
}

.m-04-01-01 button#ok-btn.button-link {
  width: var(--ha-check-button-size-width);
  height: var(--ha-check-button-size-height);
  border: none;
  outline: none;
  background: url(/media/modules/m-04-01-01-04_de.png) no-repeat;
  background-size: var(--ha-check-button-size-width) var(--ha-check-button-size-height);
  cursor: pointer;
  padding: 0.5rem;
  font-family: inherit;
  font-size: inherit;
}

.m-04-01-02 .ha_header,
.m-04-01-04 .ha_header,
.m-04-01-05 .ha_header,
.m-04-01-06 .ha_header,
.m-04-02-04 .ha_header {
  color: var(--ha-white);
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 1.8rem;
}

.m-04-01-02 .ha_info-01,
.m-04-01-04 .ha_info-01,
.m-04-01-05 .ha_info-01,
.m-04-01-06 .ha_info-01,
.m-04-02-04 .ha_info-01 {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}

.m-04-01-02 .ha_info-05,
.m-04-01-04 .ha_info-05,
.m-04-01-05 .ha_info-05,
.m-04-01-06 .ha_info-05,
.m-04-02-04 .ha_info-05 {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
}

.m-04-01-02 .ha_header,
.m-04-01-05 .ha_header,
.m-04-01-06 .ha_header,
.m-04-02-04 .ha_header {
  position: relative;
  top: -3rem;
}

.m-04-01-02 .ha_info-01,
.m-04-01-05 .ha_info-01,
.m-04-01-06 .ha_info-01,
.m-04-02-04 .ha_info-01 {
  position: relative;
  top: -0.8rem;
}

.m-04-01-02 .ha_info-02,
.m-04-01-05 .ha_info-02,
.m-04-01-06 .ha_info-02,
.m-04-02-04 .ha_info-02 {
  position: relative;
  font-size: 0.8rem;
  top: -1rem;
}

.m-04-01-02 .ha_info-03,
.m-04-01-05 .ha_info-03,
.m-04-01-06 .ha_info-03,
.m-04-02-04 .ha_info-03 {
  position: relative;
  bottom: 3rem;
}

.m-04-01-02 .ha_info-04,
.m-04-01-05 .ha_info-04,
.m-04-01-06 .ha_info-04,
.m-04-02-04 .ha_info-04 {
  position: relative;
  font-size: 0.5rem;
  bottom: 2rem;
}

.m-04-01-02 #root {
  /* width: 80% !important; */
}

.m-04-01-02 #root div.password-check-feedback-container,
.m-04-01-05 #root div.password-check-feedback-container,
.m-04-01-06 #root div.password-check-feedback-container,
.m-04-02-04 #root div.password-check-feedback-container {
  padding-top: 0.2rem;
  height: 5rem;
}

.m-04-01-02 #root div.password-check-container,
.m-04-01-05 #root div.password-check-container,
.m-04-01-06 #root div.password-check-container,
.m-04-02-04 #root div.password-check-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 70%;
}

.m-04-01-02 #root div.progress-bar,
.m-04-01-05 #root div.progress-bar,
.m-04-01-06 #root div.progress-bar,
.m-04-02-04 #root div.progress-bar {
  border: 1px solid black;
}

.m-04-01-02 .ha_info-05,
.m-04-01-05 .ha_info-05,
.m-04-01-06 .ha_info-05,
.m-04-02-04 .ha_info-05 {
  position: relative;
  top: 2rem;
}

.m-04-01-04 .ha_info-01 {
  position: relative;
  top: -1.8rem;
  font-weight: bold;
  font-size: 1.2rem;
}

.m-04-01-04 #root {
  padding: 1rem !important;
  /* background-color: var(--ha-gray-400) !important; */
}

.m-04-01-04 #root div.kryptonizer-col-value {
  background-color: var(--ha-gray-400) !important;
}

.m-04-01-04 #root input.kryptonizer-input {
  margin-top: 0.5rem;
}

.m-04-01-04 #root div.kryptonizer-output {
  background-color: var(--ha-info) !important;
  height: 3rem !important;
  font-size: 1.2rem;
}

@media (min-width: 576px) {
  .bs div.modal-dialog {
    max-width: 75% !important;
  }
}

.m-06-02-01 #root {
  width: 27rem !important;
  height: 13rem !important;
}

.m-06-02-01 #root .HORIZONTAL>.codereel-container {
  width: 3rem !important;
  height: 4rem !important;
}

.m-06-02-01 #root div.codereel-button:hover {
  background-color: var(--ha-secondaryDarkColor);
}

.m-06-02-01 #root div.codereel {
  padding: 10px 0;
  background-color: var(--ha-secondaryColor);
}

.m-06-02-01 #root div.codereel-item {
  font-size: 1.2rem !important;
}

.m-06-02-01 #root div.codereel-item.center-item {
  font-size: 1.5rem !important;
}

.m-06-02-01 button#check-solution-btn.btn,
.m-06-02-01 button#cancel-game-btn.btn {
  width: 7rem;
}

.m-06-02-01 .ha_url {
  margin-top: 3.1rem;
  margin-left: 10rem;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  color: var(--ha-primaryTextColor);
}

.m-06-02-01 .ha_top {
  margin-left: 3.5rem;
  margin-right: 3.5rem;
  font-weight: bold;
  font-size: 1.2rem;
}

.m-06-02-01 .ha_content {
  margin-left: 3.5rem;
  margin-right: 3.5rem;
  font-size: 1rem;
}