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

:root           {
    --lg-bg: linear-gradient( 10deg, rgb( 70 70 70 ) 20%, rgba( 150 150 200 ) 90% );
    --rl-bg: repeating-linear-gradient( 120deg, transparent 0 4px,rgb( 0 0 0 / 25% ) 3px 16px ),
             linear-gradient( 20deg, rgb( 0 0 0 / .6 ) 0, transparent 50% );
    --lg-tbl: linear-gradient( 25deg, rgb( 255 255 255 / .4 ), rgb( 255 255 255 / .1 ) 70% );
    --lg-tbl2: linear-gradient( 25deg, rgb( 255 255 255 / .15 ) 10%, rgb( 0 0 0 / .15 ) 80% );
    --lg-odd: linear-gradient( 180deg, rgb( 255 255 255 / .05 ), rgb( 255 255 255 / .09 ) );
    --lg-even: linear-gradient( 180deg, rgb( 0 0 0 / .03 ), rgb( 0 0 0 / .12 ) );
    --lg-lys: linear-gradient( 0deg, rgba( 255, 255, 255, 0.2 ) 0%, rgb( 255, 255, 255, .06 ) 70% );
    --lg-drk: linear-gradient( 15deg, rgba( 0, 0, 0, .65 ) 0%, rgb( 0, 0, 0, .15 ) 70% );
    --fr-sort: rgb( 0, 0, 0 );
    --fr-dark: rgb( 20, 20, 50 );
    --fr-darka: rgba( 20, 20, 50, .7 );
    --fr-mork: rgb( 0 0 0 / .8 );
    --fr-bg: rgb( 0 0 0 / .4 );
    --fr-skygge: rgb( 0 0 0 / .2 );
    --fr-tx: rgb( 255 255 255 / .85 );
    --fr-gul: rgb( 250, 200, 80 );
    --fr-gra: rgb( 96, 96, 96 );
    --fr-gron: rgba(135, 226, 243, 0.8);
    --lg-st: linear-gradient( 180deg, rgba( 0, 0, 0, .5 ) 10%, transparent 10% 94%,rgba( 0, 0, 0, .5 ) 6% );
    --lg-main: linear-gradient( to top,
      rgba( 255, 255, 255, .04 ) 91%,
			rgba( 0, 0, 0, .05 ) 91%,
      rgba( 0, 0, 0, .25 ) 100%
		);
}

@view-transition {
  navigation: auto;
  types: slide;
}

::view-transition-group( root )	{
  animation-duration: 1.4s;
}

::view-transition-old( root )	{
  animation-name: move-out;
}

::view-transition-new( root ) {
  animation-name: move-in;
}

@keyframes move-out {
  from {
    transform: translateX(0%);
		opacity: 1;
  }
  to {
    transform: translateX(-100%);
		opacity: 0;
  }
}
@keyframes move-in {
  from {
    transform: translateX(100%);
		opacity: 0;
  }

  to {
    transform: translateX(0%);
		opacity: 1;
  }
}
/*
html {
  background-color: var( --fr-dark );
  background-image: url( '/assets/images/kupla.jpg' );
  background-repeat: no-repeat;
  background-position-x: 85%;
  background-position-y: 50%;
  background-size: cover;
  min-height: 99dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
}*/

body {
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: .9rem;
  font-weight: 400;
  padding: 5px;
  color: var( --fr-tx );
  display: grid;
  grid-template-columns: minmax( 360px, 560px );
  grid-template-rows: 60px auto 40px;
  grid-template-areas: "he" "ma" "fo";
  justify-content: center;
  align-self: center;
}

header {
  grid-area: he;
  text-align: center;
  padding: .1rem .4rem .8rem .4rem;
  font-size: 2.8rem;
  font-weight: 200;
  margin-left: -.5rem;
  margin-top: -20px;
  padding: 15px;
  backdrop-filter: blur( 3px );
  text-shadow: -3px -6px 0 rgba( 100, 220, 240, .6 ), -6px 2px 0 rgb( 250 200 100 / .5 ), 2px 7px 0 rgb( 250 180 50 / .8 );
  color: var( --fr-tx );
}

main {
  grid-area: ma;
  display: grid;
  gap: 30px;
  place-content: center;
}

#log {
  margin: calc( 50dvh - 210px ) 0 calc( 50dvh - 200px ) 0;
}

#reg, #log {
  background: var( --lg-lys );
  border-radius: 8px;
  outline: solid 2px var( --fr-gron );
  outline-offset: 15px;
  backdrop-filter: blur( .5rem );
  padding: 0px 30px 10px 10px;
  h4 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.4rem;
    color: var( --fr-gul );
  }
}

.regi, .login {
  display: grid;
  grid-template-columns: 100px 150px;
  gap: 8px 16px;
  span {
    display: block;
    text-align: right;
  }
  input[type='submit'] {
    border: 1px solid var( --fr-gron );
    padding: 3px;
    background-color: var( --fr-gron );
    color: var( --fr-darka );
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
    &:hover {
      background-color: var( --fr-gul );
    }
  }
}

main .maaned, main .maaneder, main .menu {
  display: grid;
  grid-template-columns: repeat( 4, minmax( 70px, 125px ) );
  grid-template-rows: 18px;
  gap: 8px 4%;
}

main .maaned, main .maaneder {
  text-align: center;
  text-align: right;
  padding-right: 8%;
}

main .maaned {
  margin: -11px 0;
}

.menu {
  margin-top: 15px;
}

.main {
  background: var( --lg-drk );
  margin: 25px 0;
  border-radius: 10px;
  outline: solid 2px var( --fr-gron );
  outline-offset: 15px;
  backdrop-filter: blur( 6px );
}

#tilfoj-modal .tilfoj {
  display: grid;
  grid-template-columns: 100px 120px;
  gap: 10px;
}

.modal, .modal2 {
  width: 280px;
  padding: 25px;
  background-color: var( --fr-darka );
  border-radius: 8px;
  color: var( --fr-tx );
  button {
    all: unset;
    float: left;
    background: var(( var(--lg-drk)));
    color: var( --fr-tx );
    font-weight: 600;
    font-size: 1.2rem;
    cursor: pointer;
    &:hover {
      color: var( --fr-gron );
      rotate: 90deg;
    }
  }
  h4 {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.4rem;
    background: var( --lg-lys );
    font-weight: 200;
    height: 30px;
  }
}

.modal2 {
  width: 490px;
}

input[type='submit'] {
  border: solid 1px var( --fr-gul );
  background-color: var( --fr-gron );
  color: var( --fr-mork );
  border: solid 1px var( --fr-gron );
  border-radius: 4px;
  &:hover {
    background-color: var( --fr-gul );
    border: solid 1px var( --fr-gul );
  }
}

.lst {
  border-top: solid 2px var( --fr-gron );
  padding-top: 4px;
  padding-bottom: 20px;
}

.rivi {
  display: grid;
  grid-template-columns: 90px 130px;
  gap: 10px;
}

.list, .list2 {
  display: grid;
  grid-template-columns: 140px 70px;
  gap: 10px;
}

.list2 {
  grid-template-columns: 120px 70px 120px 70px;
}

.shop, .pris, .ialt {
  text-align: right;
}

.lst {
  border-top: solid 2px var( --fr-gron );
  padding: 4px 0;
}

.ots {
  text-transform: uppercase;
  color: var( --fr-gron );
  margin: 6px 0 -6px 0;
}

#gram > .bes {
  text-transform: capitalize;
}

.bes {
  text-transform: uppercase;
  color: var( --fr-gron );
  margin-top: -10px;
}

.sum {
  margin: 8px 0 16px 0;
}

.aktiv {
  color: var( --fr-gron );
}

.aar {
  display: grid;
  grid-template-columns: repeat( 3, 1fr );
  justify-items: center;
  margin-top: -25px;
}

.aar > h4 {
  grid-column: 1 / 4;
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: 100;
  background: var( --lg-lys );
  display: block;
  min-width: 100%;
  text-align: center;
  padding: 5px;
}

.neg {
  color: var( --fr-gul );
}

.diagram {
  margin-top: -20px;
}

#gram {
  display: grid;
  grid-template-columns: repeat( 6, minmax( .5fr, 1fr ) );
  button {
    all: unset;
    color: var( --fr-tx );
    text-align: center;
    cursor: pointer;
    &:hover {
      color: var( --fr-gul );
    }
  }
}

#gram > h4 {
  grid-column: 1 / 7;
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: 100;
  background: var( --lg-lys );
  display: block;
  min-width: 100%;
  text-align: center;
  padding: 5px;
}

#gram div {
  height: 70px;
  width: 80%;
  padding: 4px;
  margin: -15px 5px 10px 7px;/*
  margin-top: -15px;
  margin-bottom: 10px;*/
}

main > .menu > button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.menu-btn {
  min-width: 32px;
  min-height: 32px;
}

#reg {
  margin-top: calc( 50dvh - 220px );
  margin-bottom: calc( 40dvh - 150px );
}

#redi {
  margin: 0 auto;
  background: var( --lg-lys );
  margin-top: calc( 50dvh - 200px );
  margin-bottom: calc( 40dvh - 100px );
  max-width: 300px;
  display: grid;
  grid-template-columns: 130px 130px;
  gap: 10px;
  backdrop-filter: blur( .5rem );
  border-radius: 8px;
  outline: solid 2px var( --fr-gron );
  outline-offset: 15px;
  padding: 15px;
  input, select {
    max-width: 120px;
    min-width: 120px;
  }
  h4 {
    grid-area: 1 / 1 / 2 / 3;
    padding: 0;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 100;
    color: var( --fr-tx );
  }
}

#bes {
  text-align: left;
}

.fven, .fhoj {
  display: grid;
  row-gap: 10px;
  align-content: start;
  grid-template-rows: 20px;
}

footer {
  grid-area: fo;
  display: grid;
  align-content: end;
  min-width: 100%;
  text-align: center;
  padding: .5rem;
  font-weight: 300;
  backdrop-filter: blur( .22rem );
}

@media ( pointer: none ), ( pointer: coarse ) {
    @media ( orientation: portrait ) {
        body {
            grid-template-columns: minmax( 300px, 360px );
        }
    }
}