/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./scss/style.scss ***!
  \************************************************************************************************************************************************************************************************************/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  overflow: hidden; }

html {
  width: 100vw;
  height: 100vh; }

.btn {
  border-radius: 0;
  border: 2px solid #eee;
  background-color: #eee;
  color: black;
  font-size: 0.7rem;
  padding: 0.5rem 0.8rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: all 200ms ease; }
  .btn:hover {
    border-color: #d5d5d5;
    background-color: #d5d5d5; }
  .btn.btn-primary {
    border-color: #104978;
    background-color: #104978;
    color: white; }
    .btn.btn-primary:hover {
      border-color: #9c9c9c;
      background-color: #9c9c9c; }
  .btn.btn-secondary {
    border-color: #D8D8D8;
    background-color: #D8D8D8;
    color: #104978;
    padding: 0.4rem 0.6rem; }
    .btn.btn-secondary:hover {
      border-color: #eaeaea;
      background-color: #eaeaea; }

.hide {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important; }

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 50;
  transform: translate(-50%, -50%);
  background-color: white;
  box-shadow: 0 4px 45px rgba(0, 0, 0, 0.17);
  padding: 3rem;
  min-width: 60%;
  text-align: center;
  max-height: 80vh;
  overflow: auto; }
  .popup p {
    font-size: .8rem; }

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.screen-start {
  padding: 3rem 4rem; }
  .screen-start .top-title {
    font-size: .7rem; }
  .screen-start .headline {
    margin-bottom: 2rem; }

.loading-screen {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  background-color: #104978; }
  .loading-screen svg {
    margin-top: 1.5rem; }

.screen-editor .controls {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  text-align: right;
  padding: 1rem; }
  .screen-editor .controls.active {
    box-shadow: 0 4px 45px rgba(0, 0, 0, 0.17);
    background-color: white; }
  .screen-editor .controls .control-group {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end; }
    .screen-editor .controls .control-group.hidden {
      opacity: 0;
      pointer-events: none; }

.screen-editor .btn-add-large {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  margin: 0; }

.screen-editor .canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; }

.models {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.7rem; }
  .models .model {
    transition: all 500ms ease; }
    .models .model .title {
      margin-bottom: 0.5rem; }
    .models .model:hover {
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); }
  .models img {
    width: 100%;
    height: auto; }