/*$image-path: "KastnerSwWeb/Client/wwwroot/img/";*/
/*$breakpoints: (
    'placeholder': (max-width: 1920px),
);*/
:root {
  --light-gray-color: #f2f3f7;
  --gray-color: #e2e2e2;
  --light-green-color: #f0fbe8;
  --primary-text-color: #3c3c3c;
  --secondary-text-color: #ffffff;
  --tertiary-text-color: #000000;
  --quaternary-text-color: #939baf;
  --light-gray-text-color: #d7dae1;
  --dark-gray-text-color: #90949f;
  --primary-border-color: #e2e4e9;
  --secondary-border-color: #5a5a5a;
  --tertiary-border-color: #dddfe4;
  --primary-background-color: #ffffff;
  --secondary-background-color: #F2F3F7;
  --tertiary-background-color: #f9fafb;
  --quaternary-background-color: #2d364c;
  --castellum-primary-background-color: #3b1e54;
}

.primary-text-color {
  color: var(--primary-text-color) !important;
}

.secondary-text-color {
  color: var(--secondary-text-color) !important;
}

.light-gray-text-color {
  color: var(--light-gray-text-color) !important;
}

.dark-gray-text-color {
  color: var(--dark-gray-text-color) !important;
}

.warning-color {
  color: var(--warning-color) !important;
}

/**
 * Text styles
 */
.fs-13 {
  font-size: 13px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.fs-28 {
  font-size: 28px !important;
}

.fs-40 {
  font-size: 40px !important;
}

.b,
.bold {
  font-weight: 700 !important;
}

.normal {
  font-weight: normal !important;
}

.italic {
  font-style: italic !important;
}

.normal-style {
  font-style: normal !important;
}

.fs-underline {
  color: var(--form-studio-color) !important;
  text-decoration: underline;
}

.fs-underline.hoverable:hover {
  cursor: pointer;
}

.stereo-underline {
  color: var(--stereo-color) !important;
  text-decoration: underline;
}

.stereo-underline.hoverable:hover {
  cursor: pointer;
}

.enter-underline {
  color: var(--enter-color) !important;
  text-decoration: underline;
}

.enter-underline.hoverable:hover {
  cursor: pointer;
}

.basic-title,
.basic-subtitle,
.basic-description,
.disclaimer,
.login-disclaimer,
.smaller-description,
.light-description {
  font-family: var(--primary-font) !important;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
}

.basic-title {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: normal;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
}

.basic-subtitle {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: normal;
  text-align: center;
}


.basic-description,
.disclaimer,
.login-disclaimer {
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0.15px;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
}

.smaller-description {
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.15px;
  text-align: center;
}

.light-description {
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  text-align: left;
  color: var(--primary-text-color);
  opacity: 0.5;
  padding-left: 33px;
  width: 100px;
}

.icon-text,
.icon-multiple-line-text {
  font-family: var(--primary-font);
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: left center;
  padding-left: 30px;
  text-align: start;
  height: 30px;
  line-height: 30px;
}

.icon-text-right {
  font-family: var(--primary-font);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: right center;
  padding-right: 25px;
  text-align: start;
  height: 20px;
  line-height: 20px;
}

.icon-multiple-line-text {
  margin-bottom: 5px;
  line-height: inherit;
  height: auto;
  background-position: left top;
}

.disclaimer {
  background-repeat: no-repeat;
  background-position: left center;
  margin-left: 169px;
  padding-left: 45px;
  text-align: start;
  background-size: 25px;
}

@media (max-width: 1200px) {
  .disclaimer {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    justify-content: center;
    display: flex;
  }
}

@media (max-width: 600) {
  .disclaimer {
    margin-left: 15px;
    margin-right: 15px;
  }
}

.login-disclaimer {
  text-align: left;
  color: var(--quaternary-text-color);
  margin-bottom: 80px;
}

html,
body {
  /*text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;    */
}

html {
  font-family: "Poppins", sans-serif;
  width: 100%;
  height: auto;
  font-size: 16px;
}

body {
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  font-weight: lighter;
  line-height: 1.5;
  text-align: left;
  background-color: var(--castellum-primary-background-color);
}

app {
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 1;
  width: 100vw;
  height: 100vh;
}

/**
 * Make all elements from the DOM inherit from the parent box-sizing
 * Since `*` has a specificity of 0, it does not override the `html` value
 * making all elements inheriting from the root box-sizing value
 * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  outline: none;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5rem;
  font-weight: lighter;
  line-height: 1.2;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.h5,
h5 {
  font-size: 20px;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}

button,
input {
  overflow: visible;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

img {
  vertical-align: middle;
  border-style: none;
}

/**
 * Basic styles for links
 */
a {
  cursor: pointer;
  text-decoration: none;
  background-color: transparent;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

input {
  font-family: "Poppins", sans-serif;
}

#app,
.app-container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: hidden;
  min-height: 100vh;
}

.page {
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
}

.page p {
  align-self: center;
  margin-top: 50px;
  font-size: 24px;
  color: #ffffff;
}

.logo-holder {
  display: flex;
  justify-content: center;
  flex-direction: row;
  width: 100%;
}

img.logo {
  width: 300px;
  height: auto;
  justify-self: center;
}

.homepage .wrapper.content {
  background-color: var(--secondary-background-color);
}

.homepage .wrapper.content .page-width {
  margin-top: -125px;
  position: relative;
}

.homepage .software-info-holder {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 1180px) {
  .homepage .software-info-holder {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 840px) {
  .homepage .software-info-holder {
    flex-direction: column;
  }
}

.homepage .software-info-holder .software-info-box {
  background-color: var(--primary-background-color);
  border-radius: 4px;
  box-shadow: 0 10px 25px 0 rgba(45, 54, 76, 0.15);
  display: flex;
  flex-direction: column;
}

.homepage .software-info-holder .software-info-box.clickable:hover {
  cursor: pointer;
}

.homepage .software-info-holder .software-info-box.clickable:hover p {
  text-decoration: underline;
}

@media (max-width: 840px) {
  .homepage .software-info-holder .software-info-box {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: auto;
    max-width: 588px;
  }
}

.homepage .software-info-holder .software-info-box .top-row {
  width: 100%;
  height: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: solid 3px;
}

.homepage .software-info-holder .software-info-box.fs .top-row {
  border-bottom-color: var(--form-studio-color);
}

.homepage .software-info-holder .software-info-box.stereo .top-row {
  border-bottom-color: var(--stereo-color);
}

.homepage .software-info-holder .software-info-box.enter .top-row {
  border-bottom-color: var(--enter-color);
}

.homepage .software-info-holder .software-info-box .content {
  font-family: var(--primary-font);
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.87;
  letter-spacing: 0.15px;
  text-align: left;
  color: var(--primary-text-color);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.homepage .software-info-holder .software-info-box .content .left-icon-24 {
  background-position: top 3px left;
}

.homepage .software-info-holder .software-info-box .content a {
  font-family: var(--primary-font);
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.87;
  letter-spacing: 0.15px;
  text-align: left;
  color: var(--form-studio-color);
  text-decoration: underline;
}

.homepage .software-info-holder .software-info-box .content.disclaimer-block {
  padding-top: 40px;
  padding-bottom: 40px;
}
/*# sourceMappingURL=main.css.map */