* {vertical-align: baseline;font-weight: inherit;font-family: inherit;font-style: inherit;font-size: 100%;border: 0 none;outline: 0;padding: 0;margin: 0; box-sizing: border-box;}
:root{
    --color1: #EB5E28;
    --color2: #075684;
    --color3: #2B2D42;
    --color4: #FFFCF2;
    --color5: #252422;
    --color-main: var(--color1);
    --color-main-dark:var(--color2);
    --color-bg: var(--color5);
    --color-bg-inner: var(--color4);
    --color-secondary:var(--color2);
    --color-accent: var(--color3);
    --color-text: var(--color5);
    --color-text-heading: var(--color2);
    --color-text-inv: #FFFFFFCC;
    --color-text-faint: #FFFCF2;
    --font-heading: 'Scope One';
    --font-normal: 'Nunito';
    --font-accent: 'Slabo 27px';
}
[data-theme="yellow"] {
    --color1: #f9d342;
    --color2: #DA4167;
    --color3: #EB5E28;
    --color4: #fffcf2;
    --color5: #292826;
    --color6: #7D98A1;
    --color-text-inv: var(--color5);
}
[data-theme="turq"] {
    --color1: #01959F;
    --color2: #EC4E20;
    --color3: #EB5E28;
    --color4: #FFFFFF;
    --color5: #f0f0f0;
    --color6: #3c3c3c;
    --color-text: var(--color6);
}
[data-theme="blue"] {
    --color1: #002C61;
    --color2: #7C1034;
    --color3: #EB5E28;
    --color4: #F0EFF4;
    --color5: #CFE5FF;
    --color6: #7D98A1;
    --color-text: #1c1c1c;
    --color-text-inv: var(--color5);
}
[data-theme="wine"] {
    --color1: #7C1034;
    --color2: #002C61;
    --color3: #EB5E28;
    --color4: #F0EFF4;
    --color5: #1c1c1c;
    --color6: #7D98A1;
    --color-text-inv: var(--color4);
}
[data-theme="purple"] {
    --color1: #3C0060;
    --color2: #3E92CC;
    --color3: #FFC700;
    --color4: #F2F6F7;
    --color5: #3c3c3c;
    --color6: #7D98A1;
    --color-text-inv: var(--color3);
}
[data-theme="turq2"] {
  --color1: #017F8B;
  --color2: #9F014F;
  --color3: #FFFC;
  --color4: #EDF2F4;
  --color5: #3c3c3c;
  --color6: #7D98A1;
  --color-text-inv: var(--color3);
}
[data-theme="purple2"] {
    --color1: #340169;
    --color2: #E75A7C;
    --color3: #2B2D42;
    --color4: #FFF;
    --color5: #E3E2E4;
    --color-text: #1c1c1c;
}
[data-theme="red"] {
    --color1: #BB0A21;
    --color2: #4B88A2;
    --color3: #252627;
    --color4: #FFF9FB;
    --color5: #252627;
    --color6: #D3D4D9;
}
body{
    font-family: var(--font-normal), sans-serif;
    font-size: 16px;
    margin: 0;
    line-height: 1.4;
    color: var(--color-text);
    background-color: var(--color-bg);
    /*background-image: url('/images/darktexture.jpg');
    background-size: 50%;*/
}
a{text-decoration: none; color: var(--color-main-dark);}
#menu a{color: var(--color-text-inv);}
#menu a: hover;{color: var(--color-main-dark);}
h1,h2,h3{font-family: var(--font-heading), sans-serif;
    margin-bottom: 6px;
    color: var(--color-main-dark);
}
small{font-size: 12px;}
strong{font-weight: bold;}
h1{font-size: 1.3em; line-height: 1;} 
h2{font-size: 1.1em; line-height: 1;} 
h3{font-size: 1em; line-height: 1;} 
#container{max-width: 1100px; border: 5px solid var(--color-main);
    padding: 10px;
    background-color: var(--color-bg-inner);
    /*background-image: url('/images/parchment.jpg');*/
    /*border-top: none;
    border-bottom: none;*/
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:60px auto;
    grid-template-areas:
        "topheader"
        "header"
        "intro"
        "profiler"
        "alternativ"
        "resultat"
        "texter"
        "footer";
}
#logotype {
    font-family: 'Sacramento';
    color: var(--color-main);
    font-size: 50px;
    height: 150px;
    text-align: center;
}
#logotype img{max-width: 80%;}
#logo1{color: var(--color-main-dark);}
#topheader {grid-area: topheader; display: flex; justify-content: space-between;}
#topheader #quill img{max-height: 60px; display: none;}
#header {grid-area: header;}

#intro {grid-area: intro;}
#profiler {grid-area: profiler; margin: 20px 0;}

#alternativ {grid-area: alternativ;}
#resultat {grid-area: resultat;}
#texter {grid-area: texter;}
#footer{grid-area: footer;}
#header{background-color: var(--color-main); 
    color: var(--color-text-inv); 
    margin: 0 -20px;
    margin-bottom: 20px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    font-size: 1.3em;
    font-family: var(--font-normal);
    overflow: hidden;
}

/*Tooltip:*/
.tooltip {
    margin-left: 5px;
    vertical-align: middle;
    position: relative;
    display: inline-block;
    height: 16px;
    width: 16px;
    border-radius: 8px;
    font-weight: bold;
    color: #FFF;
    line-height: 16px;
    font-size: 12px;
    background-color: var(--color-main);
    font-family: var(--font-accent);
    margin-top: -10px;
    /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
.bg {
  margin-left: 5px;
  vertical-align: middle;
    position: relative;
    display: inline-block;
    height:30px; width:30px;
    border-radius: 0px;
    background-color: #FFF;
    /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: #444;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    text-transform: none;
    font-weight: normal;
    font-size: 14px;
    font-family: var(--font-normal);
    position: absolute;
    z-index: 50;
    top: 20px;
    right: -25px;
    line-height: 1.4;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext,.tooltip:focus .tooltiptext,.tooltip:active .tooltiptext {
    visibility: visible;
}


hr {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
    margin: 20px 0;
    font-size: 12px;
    font-family: var(--font-heading);
}
hr:after {
    content: "§ PRINT SHEET §";
    display: inline-block;
    position: relative;
    top: -0.7em;
    padding: 0 1em;
    background: var(--color-bg-inner);
    color: var(--color-main-dark);
    transform: scale(1,3);
    word-spacing: 0;
    letter-spacing: 0;
}
#mainoptions{display: none;justify-content: start; align-items: start;gap: 10px;flex-wrap: wrap;}
#mainoptions h3{flex-basis: 100%;}
#mainoptions div{flex-basis: 48%;}
.font-picker{flex-grow: 1;height: 36px; width: 140px;}
.font-picker.fp-select{color: #000}
#mainoptions input,#mainoptions select,#mainoptions textarea{width: 140px;
    height: 36px;
    border-radius: 0.25em;
    outline: 0;
    padding: 8px;
    border: 1px solid #ced4da;
}
#mainoptions .fullwidth{flex-basis: 100%;}
#mainoptions textarea{width: 310px;padding: 2px; height: 100px; display: none;}
#mainoptions input[type="radio"],#mainoptions input[type="checkbox"]{width: 24px; height: 24px; margin-right: 10px;}
#mainoptions label{display: inline-block;min-width: 120px;font-size: 13px; font-weight: normal;}
#resultat{    font-size: 36px;
    word-spacing: 0.2em;
    font-family: 'Petit Formal Script';}
#sheets{padding-left: 10px;
    padding-top: 7px;  
    border-radius: 10px;
    
}

.letter{
    line-height: 60px !important;
    color: #000;
   -webkit-text-stroke: 0 #FFF;
}
.singles .letter:first-child{background-image: unset;-webkit-text-fill-color: unset;-webkit-text-stroke: 0;}
.capital{text-transform: uppercase;}
.letter{background-image: url("/images/line_c.png"); background-repeat: repeat;
    background-image: url('/images/linesbg.png'); background-repeat: repeat ; background-position-y:2px;
}
.letter.solid{color: #000}
.letter.practice{color: #ccc}
.letter > span{margin-bottom: 10px}
.letter .style1{background-image: url("/images/line_b.png"); -webkit-text-fill-color: transparent; -webkit-background-clip: text;}
.letter .style2{background-image: url("/images/line_c.png"); -webkit-text-fill-color: transparent; -webkit-background-clip: text;}
.letter .style3{background-image:unset;-webkit-text-fill-color: unset;color: #000}
.letter .style4{background-image:unset;-webkit-text-fill-color: unset;color: #ddd}
.letter .style5{background-image:unset;-webkit-text-fill-color: unset;color: #bbb}


/*FROM OLD SITE*/
#menu{list-style: none; display: flex; justify-content: space-between;}
#menu li{text-transform: uppercase; font-size: 14px;}
#footer{background-color: var(--color-main);
    color: var(--color-text-inv);
  margin: -20px;
  margin-top: 20px;
  padding: 20px;
  font-size: 12px;
}
#footer h3{font-size: 16px; color: #FFF;}
#ingress{margin-top: 1em;}
#mform{display: flex;
flex-direction: column;
row-gap: 30px;}
#visafler{font-weight: bold; color: var(--color-main-dark);}
#visafler::after{
    content: '';
    width: 14px;
    height: 14px;
    margin-left: 5px;
    background-image: url('/images/arrow.svg');
    background-size: contain;
    margin-bottom: -2px;
    position: static;
    display: inline-block;
    transform: rotate(90deg);
}
.rotated::after {
    transform: rotate(-90deg) !important;
}
#expressen{display: flex; justify-content: space-between; align-items: flex-start;}
#expressen img:last-child{margin-top: -10px}
#fleralternativ{display: flex;
flex-direction: column;
row-gap: 30px; display: none;}
.checklist{list-style: none; margin-left: 1.5em;margin-right: 3em;}   
.checklist li{margin-bottom: 6px;}
.checklist li::before {content: '\2714\0020'; color: var(--color-main-dark);
    display: inline-block; width: 1.5em;
    margin-left: -1.5em;
}

label{font-weight: bold;}
/*CHECKBOX*/
input[type="checkbox"] {-webkit-appearance: none; appearance: none;background-color: #fff;margin: 0;
  font: inherit;
  color: #FFF;
  width: 1.5em;
  height: 1.5em;
  border: 0.1em solid var(--color-main);
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}
input[type="checkbox"]::before {
  content: "";
  width: 1em;
  height: 1em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--color-main-dark);
}
input[type="checkbox"]:checked::before {
  transform: scale(1);
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
#kryssrutor{display: flex; flex-direction: column;}
#kryssrutor > div {flex-basis: 30%;}
#kryssrutor > div > div {display: flex;margin: 6px 0;}
#kryssrutor label{font-weight: normal; margin-left: 15px; line-height: 1.5em;}
.besok_btn{width: 120px;
    height: 40px;
    background-color: var(--color-main-dark);
    color: #FFF;
    border-radius: 20px;
    display: block;
    line-height: 40px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    margin: auto;
}
@media (min-width:769px){
    
    #kryssrutor{flex-direction: row; flex-wrap: nowrap;column-gap: 20px;}
}
@media (min-width:769px){

    #container{margin: 20px auto;
        display: grid;
        padding: 20px;
        margin: 0 auto;
        grid-template-columns: 0.62fr 0.38fr;
        grid-template-rows: 80px auto;
        grid-template-areas: 
        "topheader topheader"
        "header header"
        "intro alternativ"
        "profiler alternativ"
        "resultat resultat"
        "texter texter"
        "footer footer";
    }
    #topheader{background: #f7f7f7;
        margin: -20px;
        padding: 20px;
    }
    #topheader a{color: inherit;}
    #topheader #quill img{max-height: 60px; display: unset;}
    #header{margin: 0 -20px; margin-bottom: 20px}
    #intro{padding-right: 20px;}
    #alternativ {padding-left: 20px;border-left: 1px dashed var(--color-main);}

    h1{font-size: 2rem;}
    h2{font-size: 1.5rem;  line-height: 32px;}

    
}
@media print{
    h1, #intro, hr, #footer, #topheader, #header, #alternativ, #profiler{display: none;}
    body{margin: 0; background-color: #FFFFFF;}
    #container{padding: 0; border: 0;
        grid-template-areas:
        "resultat"
    }

}