/*!
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy
 * of the License at:
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING, SOFTWARE
 * DISTRIBUTED UNDER THE LICENSE IS DISTRIBUTED ON AN "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED.
 * SEE THE LICENSE FOR THE SPECIFIC LANGUAGE GOVERNING PERMISSIONS AND
 * LIMITATIONS UNDER THE LICENSE.
 */
/* Koder för alla ikoner
https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
Bilder på alla ikoner
https://codepen.io/LukyVj/pen/MYaKpY
https://material.io/resources/icons/?style=baseline

Aktuella klasser;


*/

 @font-face{font-family:"Material Icons";font-style:normal;font-weight:400;src:local("Material Icons"),local("MaterialIcons-Regular"),url("specimen/MaterialIcons-Regular.woff2") format("woff2"),url("specimen/MaterialIcons-Regular.woff") format("woff"),url("specimen/MaterialIcons-Regular.ttf") format("truetype")}


html{
 font-size: 9pt;
}

body{
 font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size: 1.2rem;
 line-height: 1.4;
 -webkit-print-color-adjust: exact;
 color: #222;
}

h1{
 font-size: 2rem;
 font-weight: 700;
}

.admontionbox {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   position: relative;
   margin: 1.5em 0.5em 1.5em 0.5em;
   padding: 0 1.2rem;
   border-left: 0.4rem solid;
   border-radius: 0.2rem;
   /* font-size: 1rem; */
   overflow: auto;
}

.admontionbox > .title {
  margin: 0 -1.2rem 1rem -1.2rem;
  padding: 0.8rem 1.2rem 0.8rem 1rem;
  border-bottom: 0.1rem solid rgba(68, 138, 255, 0.1);
  background-color: rgba(68, 138, 255, 0.1);
  font-weight: 700;
  color: #000;
}

.admontionbox > .title.show {
  margin-bottom: 0rem;
}

.admontionbox .hide {
  margin-top: 1rem;
}

.title::before{
font-family: 'Material Icons';
font-size: 1.28rem;
/* font-style: normal; */
/* font-variant: normal; */
font-weight: 100;
line-height: 1;
text-transform: none;
white-space: nowrap;
speak: none;
word-wrap: normal;
/* direction: ltr; */
/* margin: 0px 10px 0px 0px; */
margin-right: 5px;
}

.success{
 border-left-color: #00c853;
}

.success > .title{
 background-color: rgba(0, 200, 83, 0.1);
 border-bottom: 0.1rem solid rgba(68, 138, 255, 0.1);
}

.success > .title::before{
 color: #00c853;
 content: "\E876";
}

.table{
 border-left-color: #527599;
}

.table > .title{
 background-color: rgba(82, 117, 153, 0.2);
 border-bottom: 0.1rem solid rgba(82, 117, 153, 0.3);
}

.table > .title::before{
 color: #527599;
 content: "\E8F0";
}

.image{
 border-left-color: #AB454A;
}

.image > .title{
 background-color: rgba(200, 107, 112, 0.3);
 border-bottom: 0.1rem solid rgba(200, 107, 112, 0.5);
}

.image > .title::before{
 color: #AB454A;
 content: "\E3F4";
}

.tutorial{
 border-left-color: #AB454A;
}

.tutorial > .title{
 background-color: rgba(200, 107, 112, 0.2);
 border-bottom: 0.1rem solid rgba(200, 107, 112, 0.4);
}

.tutorial > .title::before{
 color: #AB454A;
 content: "\E31E";
}

.help{
 border-left-color: #BDB76B;
}

.help > .title{
 background-color: rgb(240,230,140, 0.2);
 border-bottom: 0.1rem solid rgba(68, 138, 255, 0.1);
}

.help > .title::before{
 color: #BDB76B;
 content: "\E887";
}

.note{
 border-left-color: #448aff;
}

.note > .title{
 border-bottom-color: 0.1rem solid rgba(0, 200, 83, 0.1);
 background-color: rgba(68, 138, 255, 0.1);
}

.note > .title::before{
 content: "\E3C9";
 color: #448aff;
}

.code{
 border-left-color: #00b0ff;
}

.code > .title{
 /* border-bottom-color: 0.1rem solid rgba(0, 200, 83, 0.1); */
 background-color: rgba(68, 138, 255, 0.1);
}

.code > .title::before{
 color: #00b0ff;
 content: "\E8D2";
}

.info{
 border-left-color: #00b8d4;
}

.info > .title{
 /* border-bottom-color: 0.1rem solid rgba(0, 200, 83, 0.1); */
 background-color: rgba(0, 184, 212, 0.1);
}

.info > .title::before{
 color: #00b8d4;
 content: "\E88E";
}

.tip{
 border-left-color: #00bfa5;
}

.tip > .title{
 /* border-bottom-color: 0.1rem solid rgba(0, 200, 83, 0.1); */
 background-color: rgba(0, 191, 165, 0.1);
}

.tip > .title::before{
 color: #00bfa5;
 content: "\E80E";
}

.question{
 border-left-color: #64dd17;
}

.question > .title{
 /* border-bottom-color: 0.1rem solid rgba(0, 200, 83, 0.1); */
 background-color: rgba(100, 221, 23, 0.1);
}

.question > .title::before{
 color: #64dd17;
 content: "\E887";
}

.assignment{
 border-left-color: #ff9100;
}

.assignment > .title{
 /* border-bottom-color: 0.1rem solid rgba(0, 200, 83, 0.1); */
 background-color: rgba(255, 145, 0, 0.1);
}
.assignment > .title::before{
 color: #ff9100;
 content: "\E002";
}

.exercise {
  border-left-color: #6a1b9a; /* Lila för "träning/övning" */
}

.exercise > .title {
  background-color: rgba(106, 27, 154, 0.1);
  border-bottom: 0.1rem solid rgba(106, 27, 154, 0.2);
}

.exercise > .title::before {
  color: #6a1b9a;
  content: "\E8D6"; /* Ikon: school/övning */
}


.warning{
 border-left-color: #ff9100;
}

.warning > .title{
 /* border-bottom-color: 0.1rem solid rgba(0, 200, 83, 0.1); */
 background-color: rgba(255, 145, 0, 0.1);
}

.warning > .title::before{
 color: #ff9100;
 content: "\E002";
}

.failure{
 border-left-color: #ff5252;
}

.failure > .title{
 /* border-bottom-color: 0.1rem solid rgba(0, 200, 83, 0.1); */
 background-color: rgba(255, 82, 82, 0.1);
}

.failure > .title::before{
 color: #ff5252;
 content: "\E14C";
}

.danger{
 border-left-color: #ff1744;
}

.danger > .title{
 /* border-bottom-color: 0.1rem solid rgba(0, 200, 83, 0.1); */
 background-color: rgba(255, 23, 68, 0.1);
}

.danger > .title::before{
 color: #ff1744;
 content: "\E3E7";
}

.bug{
 border-left-color: #f50057;
}

.bug > .title{
 /* border-bottom-color: 0.1rem solid rgba(0, 200, 83, 0.1); */
 background-color: rgba(245, 0, 87, 0.1);
}

.bug > .title::before{
 color: #f50057;
 content: "\E868";
}

.example{
 border-left-color: #651fff;
}

.example > .title{
 /* border-bottom-color: 0.1rem solid rgba(0, 200, 83, 0.1); */
 background-color: rgba(101, 31, 255, 0.1);
}

.example > .title::before{
 color: #651fff;
 content: "\E242";
}

.quote{
 border-left-color: #9e9e9e;
}

.quote > .title{
 background-color: rgba(158, 158, 158, 0.1);
}

.quote > .title::before{
 color: #9e9e9e;
 content: "\E244";
}

.data{
 border-left-color: rgb(166, 152, 136);
}

.data > .title{
 background-color: rgba(166, 152, 136, 0.2);
}

.data > .title::before{
 color: rgb(166, 152, 136);
 content: "\E8F1";
}


/* === NY: exercise (övningar) === */
.exercise{
  border-left-color: #3949ab; /* indigo */
}
.exercise > .title{
  background-color: rgba(57, 73, 171, 0.10);
  border-bottom: 0.1rem solid rgba(57, 73, 171, 0.20);
}
.exercise > .title::before{
  color: #3949ab;
  content: "\E86A"; /* assignment_turned_in */
}

/* === assignment: skilj från warning === */
.assignment{
  border-left-color: #7e57c2; /* lila */
}
.assignment > .title{
  background-color: rgba(126, 87, 194, 0.10);
  border-bottom: 0.1rem solid rgba(126, 87, 194, 0.20);
}
.assignment > .title::before{
  color: #7e57c2;
  content: "\E85D"; /* assignment */
}

/* === warning: behåll orange och varningstriangel === */
.warning{
  border-left-color: #ff9100;
}
.warning > .title{
  background-color: rgba(255, 145, 0, 0.10);
  border-bottom: 0.1rem solid rgba(255, 145, 0, 0.20);
}
.warning > .title::before{
  color: #ff9100;
  content: "\E002"; /* warning */
}

/* === tutorial: mer "lärande"-känsla === */
.tutorial{
  border-left-color: #1565c0; /* blå */
}
.tutorial > .title{
  background-color: rgba(21, 101, 192, 0.10);
  border-bottom: 0.1rem solid rgba(21, 101, 192, 0.20);
}
.tutorial > .title::before{
  color: #1565c0;
  content: "\E80C"; /* school */
}

/* === help: mjukare, mer "stöd" === */
.help{
  border-left-color: #8bc34a; /* ljusgrön */
}
.help > .title{
  background-color: rgba(139, 195, 74, 0.12);
  border-bottom: 0.1rem solid rgba(139, 195, 74, 0.22);
}
.help > .title::before{
  color: #8bc34a;
  content: "\E887"; /* help */
}

/* === question: särskilj från success/help via lila === */
.question{
  border-left-color: #7b1fa2; /* djup lila */
}
.question > .title{
  background-color: rgba(123, 31, 162, 0.10);
  border-bottom: 0.1rem solid rgba(123, 31, 162, 0.20);
}
.question > .title::before{
  color: #7b1fa2;
  content: "\E887"; /* help/question mark */
}

/* === bug: tydligare från failure/danger === */
.bug{
  border-left-color: #6d4c41; /* brun */
}
.bug > .title{
  background-color: rgba(109, 76, 65, 0.10);
  border-bottom: 0.1rem solid rgba(109, 76, 65, 0.20);
}
.bug > .title::before{
  color: #6d4c41;
  content: "\E868"; /* bug_report */
}

/* === data: mer teknisk/modern känsla === */
.data{
  border-left-color: #009688; /* teal */
}
.data > .title{
  background-color: rgba(0, 150, 136, 0.10);
  border-bottom: 0.1rem solid rgba(0, 150, 136, 0.20);
}
.data > .title::before{
  color: #009688;
  content: "\E8F1"; /* insert_chart/analytics */
}