/*Keep it clean, no Sass or css here; only imports. All the scss files need to be imported here*/
.wrap {
  min-height: calc(100vh - 50px); }

section {
  padding: 60px 0;
  /*&>.container{
        border:1px solid #ccc;
        padding:15px;
        border-radius:1rem;
    }*/ }

.btn {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff; }

/*@font-face {
    font-family: 'Proxima Nova ExCn Rg';
    src: url('/fonts/ProximaNovaExCn-Regular.woff2') format('woff2'), 
         url('/fonts/ProximaNovaExCn-Regular.woff') format('woff'), 
         url('/fonts/ProximaNovaExCn-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}*/
@font-face {
  font-family: 'Eagle-book';
  src: url("/fonts/Eagle-Book.woff2") format("woff2"), url("/fonts/Eagle-Book.woff") format("woff"), url("/fonts/Eagle-Book.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Eagle-light';
  src: url("/fonts/Eagle-Light.woff2") format("woff2"), url("/fonts/Eagle-Light.woff") format("woff"), url("/fonts/Eagle-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

body {
  color: #ffffff;
  font-size: 14px;
  font-family: 'Eagle-book', Arial, sans-serif;
  font-weight: 400;
  font-style: normal; }

h1 {
  color: #ffafe9;
  font-size: 2.4rem;
  text-transform: uppercase;
  font-weight: bold; }

h1, h2, h3, h4 {
  font-weight: 400;
  font-style: normal; }

header {
  min-height: 140px; }
  header .navbar .logo {
    position: absolute;
    top: 0;
    left: 0; }
  header .navbar .nav a {
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold; }
  header .navbar .nav a.login {
    background: transparent;
    border: 0;
    font-size: 14px;
    min-width: inherit; }

@media (max-width: 767px) {
  header .navbar .logo {
    width: 170px; }
  header .navbar-toggler {
    padding: 0; }
    header .navbar-toggler i {
      color: #be67a6;
      font-size: 2.5rem; } }

/* Only for admin functionality*/
.ta-editor {
  min-height: 300px;
  height: auto;
  overflow: auto;
  font-family: inherit;
  font-size: 100%; }

.admin-content-edit {
  color: #000 !important;
  opacity: 9.95;
  position: fixed;
  z-index: 9999;
  top: 5px;
  left: -320px;
  background: #fff; }
  .admin-content-edit:hover {
    opacity: 1 !important; }
  .admin-content-edit .switched-options {
    position: relative;
    width: 320px;
    text-align: left;
    padding: 20px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); }
    .admin-content-edit .switched-options a {
      color: #000; }
  .admin-content-edit .config-title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    color: #000;
    border-bottom: 1px dotted #CCCCCC;
    border-top: 1px dotted #CCCCCC;
    margin-bottom: 5px; }
  .admin-content-edit ul {
    margin-bottom: 25px; }
    .admin-content-edit ul .active a {
      color: #005885;
      font-weight: 700; }
    .admin-content-edit ul .p {
      font-weight: 400;
      font-size: 12px;
      color: #CCC;
      margin-top: 10px; }
    .admin-content-edit ul li a {
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      color: #808080; }
      .admin-content-edit ul li a:hover {
        color: #008ed6; }
  .admin-content-edit ul.styles {
    margin-top: 15px; }
    .admin-content-edit ul.styles li {
      display: inline-block;
      margin-right: 5px; }
      .admin-content-edit ul.styles li .blue {
        width: 35px;
        height: 35px;
        background: #008ed6; }
      .admin-content-edit ul.styles li .blue-munsell {
        width: 35px;
        height: 35px;
        background: #0196a7; }
      .admin-content-edit ul.styles li .green {
        width: 35px;
        height: 35px;
        background: #00ab66; }
      .admin-content-edit ul.styles li .orange {
        width: 35px;
        height: 35px;
        background: #ea8825; }
      .admin-content-edit ul.styles li .purple {
        width: 35px;
        height: 35px;
        background: #8600c8; }
      .admin-content-edit ul.styles li .red {
        width: 35px;
        height: 35px;
        background: #f25454; }
      .admin-content-edit ul.styles li .slate {
        width: 35px;
        height: 35px;
        background: #6b798f; }
      .admin-content-edit ul.styles li .yellow {
        width: 35px;
        height: 35px;
        background: #e5c41a; }
  .admin-content-edit .switch-button {
    opacity: 1 !important;
    background: #FFF;
    padding: 10px;
    font-size: 24px;
    color: #272727;
    position: absolute;
    overflow: hidden;
    right: -44px;
    top: -10px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px; }
    .admin-content-edit .switch-button:hover {
      color: #008ed6;
      cursor: pointer; }

#toggle-admin-content {
  text-decoration: none;
  border: 1px solid blue; }

.btn {
  background: #be67a6;
  border-radius: 22px;
  border: 0;
  min-width: 180px;
  display: inline-block;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  text-transform: uppercase; }

@keyframes loading {
  0% {
    opacity: .2; }
  20% {
    opacity: 1; }
  100% {
    opacity: .2; } }

.loading span {
  animation-name: loading;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both; }

.loading span:nth-child(2) {
  animation-delay: .2s; }

.loading span:nth-child(3) {
  animation-delay: .4s; }

.btn.remainder {
  background: #cd6bb3;
  border: 0;
  border-radius: 0;
  width: 100%;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold; }
  .btn.remainder:hover, .btn.remainder:focus {
    color: #fff; }

.modal-content {
  color: #000; }

.text-danger span {
  background: #fff;
  padding: 2px 4px;
  margin-top: 2px; }

#monitor {
  margin: auto;
  position: relative;
  width: 142px;
  height: 142px;
  margin-bottom: 20px; }

#monitor .screen {
  margin: auto;
  width: 140px;
  height: 140px;
  background-size: cover;
  background-color: #ffcb00;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: width 300ms ease-in-out, height 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out, height 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out, height 300ms ease-in-out;
  transition: width 300ms ease-in-out, height 300ms ease-in-out; }

#monitor .scan {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #b4282d;
  position: absolute;
  z-index: 9999;
  -moz-animation: scan 3s infinite;
  -webkit-animation: scan 3s infinite;
  animation: scan 3s infinite;
  -webkit-animation-direction: alternate-reverse;
  -webkit-box-shadow: 0px 0px 31px 0px #de2a42;
  -moz-box-shadow: 0px 0px 31px 0px #de2a42;
  box-shadow: 0px 0px 31px 0px #de2a42; }

.email-remainder {
  margin-top: 390px; }

@-webkit-keyframes scan {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(140px);
    transform: translateY(240px); } }

.form-control {
  border: 0;
  border-radius: 0;
  text-align: center;
  font-family: "proxima-nova",sans-serif;
  font-size: 18px;
  line-height: 20px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 22px;
  color: #fff; }

.form-control::-webkit-input-placeholder {
  /* Edge */
  color: #fff; }

.form-control:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #fff; }

.form-control::placeholder {
  color: #fff; }

.custom-checkbox .custom-control-label::before {
  border-radius: 0; }

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: #fff;
  background-color: #fff; }

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='333333' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); }

.fileExterror {
  display: none; }

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1; }

.inputfile + label {
  max-width: 80%;
  font-size: 1.25rem;
  /* 20px */
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  padding: 0.625rem 1.25rem;
  /* 10px 20px */ }

.no-js .inputfile + label {
  display: none; }

.inputfile:focus + label, .inputfile.has-focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px; }

.inputfile + label * {
  /* pointer-events: none; */
  /* in case of FastClick lib use */ }

.inputfile + label svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  margin-top: -0.25em;
  /* 4px */
  margin-right: 0.25em;
  /* 4px */ }

/* style 1 */
.inputfile-1 + label {
  color: #f1e5e6;
  background-color: #d3394c; }

.inputfile-1:focus + label, .inputfile-1.has-focus + label, .inputfile-1 + label:hover {
  background-color: #722040; }

/* style 2 */
.inputfile-2 + label {
  color: #d3394c;
  border: 2px solid currentColor; }

.inputfile-2:focus + label, .inputfile-2.has-focus + label, .inputfile-2 + label:hover {
  color: #722040; }

/* style 3 */
.inputfile-3 + label {
  color: #d3394c; }

.inputfile-3:focus + label, .inputfile-3.has-focus + label, .inputfile-3 + label:hover {
  color: #722040; }

/* style 4 */
.inputfile-4 + label {
  color: #d3394c; }

.inputfile-4:focus + label, .inputfile-4.has-focus + label {
  color: #722040; }

.inputfile-4 + label:hover {
  color: #722040; }

.inputfile-4 + label figure {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #d3394c;
  display: block;
  padding: 20px;
  margin: 0 auto 10px; }

.inputfile-4:focus + label figure, .inputfile-4.has-focus + label figure {
  background-color: #722040; }

.inputfile-4 + label:hover figure {
  background-color: #722040; }

.inputfile-4 + label svg {
  width: 100%;
  height: 100%;
  fill: #f1e5e6; }

/* style 5 */
.inputfile-5 + label {
  color: #d3394c; }

.inputfile-5:focus + label, .inputfile-5.has-focus + label {
  color: #722040; }

.inputfile-5 + label:hover {
  color: #722040; }

.inputfile-5 + label figure {
  width: 100px;
  height: 135px;
  background-color: #d3394c;
  display: block;
  position: relative;
  padding: 30px;
  margin: 0 auto 10px; }

.inputfile-5:focus + label figure, .inputfile-5.has-focus + label figure {
  background-color: #722040; }

.inputfile-5 + label:hover figure {
  background-color: #722040; }

.inputfile-5 + label figure::before, .inputfile-5 + label figure::after {
  width: 0;
  height: 0;
  content: '';
  position: absolute;
  top: 0;
  right: 0; }

.inputfile-5 + label figure::before {
  border-top: 20px solid #dfc8ca;
  border-left: 20px solid transparent; }

.inputfile-5 + label figure::after {
  border-bottom: 20px solid #722040;
  border-right: 20px solid transparent; }

.inputfile-5:focus + label figure::after, .inputfile-5.has-focus + label figure::after {
  border-bottom-color: #d3394c; }

.inputfile-5 + label:hover figure::after {
  border-bottom-color: #d3394c; }

.inputfile-5 + label svg {
  width: 100%;
  height: 100%;
  fill: #f1e5e6; }

/* style 6 */
.inputfile-6 + label {
  color: #d3394c;
  border: 1px solid #d3394c;
  background-color: #f1e5e6;
  padding: 0; }

.inputfile-6:focus + label, .inputfile-6.has-focus + label {
  border-color: #722040; }

.inputfile-6 + label:hover {
  border-color: #722040; }

.inputfile-6 + label span, .inputfile-6 + label strong {
  padding: 0.625rem 1.25rem;
  /* 10px 20px */ }

.inputfile-6 + label span {
  width: 200px;
  min-height: 2em;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top; }

.inputfile-6 + label strong {
  height: 100%;
  color: #f1e5e6;
  background-color: #d3394c;
  display: inline-block; }

.inputfile-6:focus + label strong, .inputfile-6.has-focus + label strong, .inputfile-6 + label:hover strong {
  background-color: #722040; }

@media screen and (max-width: 50em) {
  .inputfile-6 + label strong {
    display: block; } }

section.status {
  /*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/ }
  @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    section.status {
      /* Force table to not be like tables anymore */
      /* Hide table headers (but not display: none;, for accessibility) */
      /*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
      /*&.profile-receipt {
            td:nth-of-type(1):before {
                content: "";
            }

            td:nth-of-type(2):before {
                content: "Lank";
            }

            td:nth-of-type(3):before {
                content: "Status";
            }

            td:nth-of-type(4):before {
                content: "Datum";
            }

            td:nth-of-type(5):before {
                content: "Ladda upp pa nytt";
            }

            td:nth-of-type(6):before {
                content: "";
            }
        }

        &.profile-rewards {
            td:nth-of-type(1):before {
                content: "";
            }

            td:nth-of-type(2):before {
                content: "Premie";
            }

            td:nth-of-type(3):before {
                content: "Status";
            }

            td:nth-of-type(4):before {
                content: "Reserverad";
            }

            td:nth-of-type(5):before {
                content: "Levererad";
            }

            td:nth-of-type(6):before {
                content: "Ladda upp pa nytt";
            }
        }*/ }
      section.status table, section.status thead, section.status tbody, section.status th, section.status td, section.status tr {
        display: block; }
      section.status thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px; }
      section.status tr {
        margin-bottom: 2rem;
        background: white;
        padding: 1rem; }
      section.status td {
        /* Behave  like a "row" */
        border: none;
        position: relative;
        padding-left: 50%;
        min-height: 50px; }
      section.status td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        left: 1rem;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap; } }

.wrap {
  min-height: calc(100vh - 50px); }

body {
  background: url(https://res.cloudinary.com/lojaali/image/upload/q_auto/v1618843656/FINKEVOL21/background-banner.jpg) 0 0 no-repeat;
  background-size: 100%; }

body.view-index {
  background: inherit;
  background-size: 100%; }

section {
  padding: 60px 0; }

section.banner {
  background: url(https://res.cloudinary.com/lojaali/image/upload/q_auto/v1618843656/FINKEVOL21/background-banner.jpg) 0 0 no-repeat;
  background-size: 100%; }
  section.banner .login-url {
    font-size: 16px;
    font-weight: bold;
    color: #fff; }

.register {
  background: url(https://res.cloudinary.com/lojaali/image/upload/q_auto/v1618844074/FINKEVOL21/background-form.jpg) 0 0 no-repeat;
  background-size: 100%; }

.how-to-steps {
  background: #fff;
  color: #333333; }
  .how-to-steps h1 {
    color: #be67a6;
    text-transform: uppercase; }

footer {
  padding: 30px 0;
  background: #fff; }
  footer a {
    color: #be67a6;
    font-weight: bold; }
    footer a:hover {
      color: #be67a6; }

.street, .rewards {
  min-height: 500px; }

.modal .modal-content {
  border: 0; }
  .modal .modal-content .modal-header {
    background: #732d64;
    color: #fff; }
    .modal .modal-content .modal-header .close {
      color: #fff;
      opacity: 1; }
  .modal .modal-content .modal-body .form-control {
    background: #fff;
    border: 1px solid #333;
    color: #333333; }
  .modal .modal-content .modal-body .form-control::-webkit-input-placeholder {
    /* Edge */
    color: #333333; }
  .modal .modal-content .modal-body .form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #333333; }
  .modal .modal-content .modal-body .form-control::placeholder {
    color: #333333; }
  .modal .modal-content .modal-body .text-danger span {
    background: inherit; }

@media (max-width: 767px) {
  body {
    background: url(https://res.cloudinary.com/lojaali/image/upload/q_auto/v1618848979/FINKEVOL21/background-banner-mobile.jpg) 0 0 no-repeat;
    background-size: 100%; }
  section.banner {
    background: url(https://res.cloudinary.com/lojaali/image/upload/q_auto/v1618848979/FINKEVOL21/background-banner-mobile.jpg) 0 0 no-repeat;
    background-size: 100%; }
  .register {
    background: url(https://res.cloudinary.com/lojaali/image/upload/q_auto/v1618848979/FINKEVOL21/background-form-mobile.jpg) 0 0 no-repeat;
    background-size: 100%; } }