.ft_table_container{
  background-color: rgba(0,0,0,0.6);
  border-radius: 5px;
  padding: 3px;
  margin: 10px;
}
.ft_table{
  font-size: 11px;
  border-collapse: collapse;
  width: 100%;
}

.ft_table th{
  background: -ms-linear-gradient(#888, #666);
  background-image: linear-gradient(top, #888 0%, #666 100%);
  background-image: -webkit-linear-gradient(top, #888 0%, #666 100%);
  background-image: -moz-linear-gradient(top, #888 0%, #666 100%);
  color: white;
  padding: 5px 3px;
  margin: 0;
}

.ft_table .ft_filter_enum{
	padding: 3px;
	border-radius: 3px;
	background: white;
	margin: 2px 5px;
    max-height: 100px;
    overflow-y: scroll;    
}
.ft_table .ft_filter_string{
	padding: 3px;
	margin: 2px 5px;
}

.ft_table .ft_filter_string input{
	background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAV1BMVEX///8BAgMcHR4GBgfi4+TKysy0s7QMCw4iIiMPEBG7vL1sbW5pa2xlZmj9/f/y8vPHyMlxcnJISUpDQ0U9PT02NzgxMTQoKCrOzs7ExMempqecnp95eXvIntkmAAAAbUlEQVQY022PWQ6AIAxEnSICCu6K2/3PKRHQYOjPpK9NO1PkqtQE0uXb1wKzmSH2OFeSO+GSOg8abI/2GDygMaxO1ivTARj135DxBg83rvQL4fh8LGYBIOroZLBYm5OBVUmCKkdElxK1tmlu197PkgNf3gGIPQAAAABJRU5ErkJggg==) no-repeat white center left!important;
	padding-left: 16px;
	width: 100%;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;      }

.ft_table th + th{
  border-left: 1px solid #c5c5c5;
}

.ft_table tbody tr{
	background: #fff;
}
.ft_table tbody tr.row-even{
	background: #f3f6fa;
}

.ft_table tbody td{
	padding: 3px;
}

.ft_table thead a{
	color: white;
}

.ft_table thead img{
	vertical-align: middle;
}

.ft_table thead a + select{
	margin-left: 20px;
}
.ft_table thead a{
	margin-left: 10px;
}



.ft_popup{
  position:absolute;
  background: white;
  width: 200px;
  z-index:3001;
  top: 100px;
  left: 100px;
  padding: 20px;
  border: 2px solid black;
  border-radius: 10px;
}

.ft_table tfoot a{
  margin: 3px;
  padding: 5px 5px 5px 22px;
  display: inline-block;
  color: white;
  font-size: 11px;
  background-repeat: no-repeat;
  background-position-x: 4px;
  background-position-y: 50%;
  text-decoration: none;
  border-radius: 5px;
}

.ft_table tfoot a:hover{
  background-color: #888;
}
/* Kartesisches Koordinatensystem für Abbildungen mit Nullpunkt links unten */
/* http://stackoverflow.com/a/38811507 */

svg.cartesian {
  transform: scaleY(-1);
}

svg.graph text.centered
{
	text-anchor: middle;
	dominant-baseline: middle;
}


svg.graph g.red path.block
{
	fill: #F00;
}
svg.graph g.red text
{
	fill: #FFF;
}

svg.graph g.yellow path.block
{
	fill: #FF0;
}
svg.graph g.yellow text
{
	fill: #000;
}

svg.graph g.green path.block
{
	fill: #0C0;
}
svg.graph g.green text
{
	fill: #000;
}

svg.graph g.gray path.block
{
	fill: #CCC;
}
svg.graph g.gray text
{
	fill: #000;
}

svg.areadiagram{
    overflow: visible;
}

svg.areadiagram path.block0{
	stroke: #000;
}

svg.graph g.block0 path.block,
svg.activitydiagram path.block0,
svg.areadiagram path.block0,
svg.vbardiagram path.block0
{
	fill: #FFF;
}

svg.graph g.block1 path.block,
svg.activitydiagram path.block1,
svg.areadiagram path.block1,
svg.vbardiagram path.block1
{
	fill: #C60900;
}

svg.graph g.block2 path.block,
svg.activitydiagram path.block2,
svg.areadiagram path.block2,
svg.vbardiagram path.block2
{
	fill: #C67700;
}

svg.graph g.block3 path.block,
svg.activitydiagram path.block3,
svg.areadiagram path.block3,
svg.vbardiagram path.block3
{
	fill: #9FC600;
}

svg.graph g.block4 path.block,
svg.activitydiagram path.block4,
svg.areadiagram path.block4,
svg.vbardiagram path.block4
{
	fill: #27C600;
}

svg.graph g.block5 path.block,
svg.activitydiagram path.block5,
svg.areadiagram path.block5,
svg.vbardiagram path.block5
{
	fill: #00C64F;
}

svg.graph g.block6 path.block,
svg.activitydiagram path.block6,
svg.areadiagram path.block6,
svg.vbardiagram path.block6
{
	fill: #00C6C6;
}

svg.graph g.block7 path.block,
svg.activitydiagram path.block7,
svg.areadiagram path.block7,
svg.vbardiagram path.block7
{
	fill: #004FC6;
}

svg.graph g.block8 path.block,
svg.activitydiagram path.block8,
svg.areadiagram path.block8,
svg.vbardiagram path.block8
{
	fill: #2700C6;
}

svg.graph g.block9 path.block,
svg.activitydiagram path.block9,
svg.areadiagram path.block9,
svg.vbardiagram path.block9
{
	fill: #9F00C6;
}

svg.graph g.block10 path.block,
svg.activitydiagram path.block10,
svg.areadiagram path.block10,
svg.vbardiagram path.block10
{
	fill: #C60077;
}

svg.graph .block
{
	stroke: #000000;
	stroke-width: 1;

}

svg.graph text.label
{
	font-weight: bold;
	text-anchor: middle;
	dominant-baseline: middle;
}

svg.graph text.labellarge
{
	font-weight: bold;
	text-anchor: middle;
	dominant-baseline: central;
    font-size: 1.2em;
}

.graph-mini svg.graph text.labellarge
{
    font-size: 0.9em;
}

svg.graph text.value
{
	text-anchor: middle;
	dominant-baseline: middle;
}


svg.vbardiagram text {
	dominant-baseline: central;
}

svg.vbardiagram text.labelleft{
	text-anchor: end;
}

svg.vbardiagram text.textbefore{
	text-anchor: end; /* right aligned */
	fill: #000;
}

svg.vbardiagram text.labelinner.labelwithingraph{
	text-anchor: middle;
	fill: #000;
}

svg.vbardiagram g path{
	fill:none;
	stroke: #000;
}

svg.vbardiagram path.block{
	stroke: none;
}


svg.areadiagram path.grid{
	stroke: #333;
	stroke-opacity: 0.5;
}


svg.areadiagram text.ylabel
{
	text-anchor: end;
	dominant-baseline: central;
}
/* Allgemeine Formatierung */

html {
    height: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    font-family: verdana, sans-serif;
    color: #361c05;
}

body {
    height: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
}

#container {
    min-height: calc(100% - 70px);
    padding: 15px;
    margin-left: 150px;
    padding-top: 40px;
    /*	border-collapse: separate;*/
}


#container>div {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 30px;
}

/* Höhe des Footers ergibt sich aus dem Subtrahenden bei min-height von #container minus 60px (für oben) */
#footer{
    text-align: center;
    min-height: 30px;
    border-spacing: 0 !important;
    font-weight: bold;
    font-size: 0.9em;
}

#footer a{
    text-decoration: none;
}


#container>div>div {
    display: table-row;
}

/* Content-Bereich */

#contentweg {
    display: block;
    position: absolute;
    top: 140px;
    bottom: 22px;
    right: 14px;
    left: 160px;
    z-index: 7;
    overflow: auto;
    overflow-x: hidden;
    border: 1px outset #753c05;
    padding: 0px;
}

#content {
    display: table-cell;
}

#content>div>div {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
}

#head {
    top: 0;
    position: fixed;
    min-height: 40px;
    width: 100%;
    background: white;
    box-shadow: 0px 10px 5px grey;
}

#headleft {
    display: inline-block;
    float: left;
}

#usermenu {
    display: inline-block;
    float: right;
}

#menu {
    float: left;
    margin-left: 10px;
    min-width: 140px;
}

#usermenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 140px;
}

#sidebar {
    display: table-cell;
    vertical-align: top;
    width: 210px;
}

fieldset {
    border: none;
    flex-basis: 100%;
    padding: 0;
    margin-top: 15px;
    margin-bottom: 15px;
}

fieldset> :not(h1):not(.withoutpadding) {
    margin-left: 20px;
    margin-right: 20px;
}

fieldset> :first-child:not(h1):not(.withoutpadding) {
    margin-top: 20px;
}

fieldset>h1 {
    margin-bottom: 20px;
}

h1.withoutpadding {
    margin-bottom: 0;
}

fieldset> :last-child:not(.withoutpadding) {
    margin-bottom: 20px;
}

fieldset.twocolumn {
    float: left;
    flex-basis: 45%;
    width: 100%;
    max-width: 400px;
}


/* Netbook support */

@media only screen and (min-width: 960px) and (max-width: 1200px) {
    #container {
        margin-left: 0;
    }
}

/* Mobile browser support */

/* See http://stephen.io/mediaqueries/ */

@media only screen and (max-width: 960px) {
    #headleft {
        display: none;
    }
    #container {
        margin: 20px 0 0;
        padding-left: 5px;
        padding-right: 5px;
    }
    #container>div {
        display: block;
    }
    #container>div>div {
        display: block;
    }
    #container>div>div>div {
        display: block;
        margin-top: 30px;
    }
    fieldset, fieldset.twocolumn {
        flex-basis: 100%;
        max-width: initial;
        width: initial;
        float: none;
    }
    #content>div {
        display: block;
    }
    #sidebar {
        display: block;
        width: auto;
        margin-top: 30px;
    }
    table.dailyoverview td {
        display: block;
    }
    table.dailyoverview td:nth-of-type(1) {
        padding-top: 10px;
        font-weight: bold;
    }
}

#usermenu {
    margin-top: 10px;
    text-align: left;
}

#usermenu a {
    text-decoration: none;
    font-weight: bold;
    color: #efe5ca;
}

#usermenu li {
    color: #efe5ca;
}

/* Footer-Bereich */

#foot, #foot a {
    width: 100%;
    min-width: 100%;
    height: 15px;
    padding: 3px;
    text-align: center;
    font-size: 0.9rem;
    color: #efe5ca;
    font-weight: bold;
}

.half-visible {
    color: gray;
}

td, th {
    vertical-align: top;
}

fieldset.narrowform form label {
    display: inline-block;
    min-width: 180px;
    margin-right: -180px;
}

fieldset.narrowform form input {
    margin-left: 180px;
}/* Palette: http://paletton.com/palette.php?uid=61L1h0kkUiKgYnTjdl7mHgloHdG*/

body {
    background: #996633 url(/images/linen.jpg) repeat fixed 0% top;
    font-family: arial;
}

#overlay {
    background: linear-gradient(#624180, #624180);
    opacity: 0.35;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -10;
}

#head {
    background: #624180;
    color: #FFFFFF;
    font-size: 1.2em;
    line-height: 40px;
    z-index: 100;
}

#head>div {
    margin: 0 25px;
    text-align: center;
}

#head a {
    color: #FFF;
    text-decoration: none;
}

#content fieldset, #sidebar fieldset, fieldset.login {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: #555 10px 10px 5px;
    position: relative;
    border-radius: 10px;
}

#content fieldset, fieldset.login {
    border: 3px solid #624180;
}

#sidebar fieldset {
    border: 3px solid #624180;
}

#content fieldset>div.solutioncorrect1 {
    box-sizing: content-box;
    border: 30px solid rgba(0, 255, 0, 0.2);
    padding: calc(2.5em - 30px);
}

#content fieldset>div.questioncontent {
    box-sizing: content-box;
    border: 30px solid rgba(0, 255, 0, 0.0);
    padding: calc(2.5em - 30px);
}

#content fieldset>div.solutioncorrect0 {
    box-sizing: content-box;
    border: 30px solid rgba(255, 0, 0, 0.2);
    padding: calc(2.5em - 30px);
}

#content fieldset>div.block {
    padding: 30px;
}

fieldset h1, fieldset div.footer{
    background: #624180;
    color: #FFFFFF;
    font-size: 1.2rem;
    font-variant: small-caps;
    padding: 3px 6px 2px 30px;
    margin-left: 0;
    margin-top: 0;
}

fieldset div.footer
{
    margin-right: 0;
    margin-bottom: 0 !important;
    margin-top: 30px;
    font-size: 1.0rem;
}

fieldset div.footer a
{
    color: #FFF;
    text-decoration: none;
}

div.question, div.large {
    text-align: center;
    font-family: arial;
    font-size: 2.5em;
}

div.question {
    margin-bottom: 40px;
}

div.input {
    text-align: center;
}

div.input input {
    text-align: center;
    font-size: 2.5em;
    padding: 5px;
}

div.input.correct1 input {
    background-color: #77FF77;
}

div.input.correct0 input {
    background-color: #FF7777;
    text-decoration: line-through;
}

tr.correct {
    background-color: #99FF99;
}

tr.incorrect {
    background-color: #FF9999;
}

div.phase {
    float: right;
    border: 2px solid #333;
    padding: 5px;
    border-radius: 5px;
    width: 1em;
    height: 1em;
    text-align: center;
}

div.lang {
    float: left;
}

div.lang img {
    width: 80px;
}

#listtable td {
    font-size: 11px;
}

span.audio {
    background: url(/images/speaker-icon.png) no-repeat;
    height: 32px;
    width: 32px;
    display: inline-block;
}

button.icon, fieldset.login input[type=submit] {
    padding-right: 48px;
    padding-left: 15px;
    height: 52px;
    min-width: 48px;
    border-radius: 24px;
    box-shadow: none;
    border: none;
    font-size: 1em;
    color: #FFF;
}

button.icon-go, fieldset.login input[type=submit] {
    background: #C75C5C 100% 50% url(/images/go-icon.png) no-repeat;
}

button.icon-bolt {
    background: #4E5C72 0% 50% url(/images/bolt-icon.png) no-repeat;
    padding-right: 15px;
    padding-left: 48px;
}

button.icon-sign {
    background: #77B3D4 0% 50% url(/images/sign-icon.png) no-repeat;
    padding-right: 15px;
    padding-left: 48px;
}

input.spinner {
    background-image: url(/images/spinner.png);
}

label {
    display: block;
    margin-top: 10px;
}

span.hinttext {
    background: #76C2AF 100% 50% url(/images/question-icon.png) no-repeat;
    padding-right: 30px;
    height: 52px;
    min-width: 48px;
    border-radius: 24px;
    box-shadow: none;
    border: none;
    font-size: 1em;
    color: #FFF;
    display: inline-flex;
    align-items: center;
    padding-left: 10px;
    margin: 5px;
    text-align: center;
}

span.hinttext.correct {
    background: #76C27F 0% 50% url(/images/check-icon.png) no-repeat;
    padding-left: 40px;
    padding-right: 10px;
}

span.hinttext.incorrect {
    background: #C75C5C 0% 50% url(/images/incorrect-icon.png) no-repeat;
    padding-left: 40px;
    padding-right: 10px;
}

span.hinttext.neutral {
    background: #76C2AF;
}

div.level {
    height: 52px;
    width: 52px;
    float: right;
    display: inline-flex;
    align-items: center;
    position: relative;
    top: -15px;
    left: +15px;
}

div.level div {
    margin: 0px auto;
    font-weight: bolder;
    font-family: arial;
    font-size: 20px;
}

div.level0 {
    background: 50% 50% url(/images/wheel0.png) no-repeat;
}

div.level1 {
    background: 50% 50% url(/images/wheel1.png) no-repeat;
}

div.level2 {
    background: 50% 50% url(/images/wheel2.png) no-repeat;
}

div.level3 {
    background: 50% 50% url(/images/wheel3.png) no-repeat;
}

div.level4 {
    background: 50% 50% url(/images/wheel4.png) no-repeat;
}

div.level5 {
    background: 50% 50% url(/images/wheel5.png) no-repeat;
}

div.level6 {
    background: 50% 50% url(/images/wheel6.png) no-repeat;
}

div.level7 {
    background: 50% 50% url(/images/wheel7.png) no-repeat;
}

div.level8 {
    background: 50% 50% url(/images/wheel8.png) no-repeat;
}

div.level9 {
    background: 50% 50% url(/images/wheel9.png) no-repeat;
}

div.level10 {
    background: 50% 50% url(/images/wheel10.png) no-repeat;
}

/* Login form */

div.login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: calc(100% - 40px);
    font-size: 1.2em;
}

div.login input {
    margin-top: 5px;
    margin-bottom: 5px;
}

img.speedindicator{
    display:none; position:absolute; top:9px; z-index:1000;
}
  

/* Mobile browser support */

/* See http://stephen.io/mediaqueries/ */

@media only screen and (max-device-width: 960px), only screen and (min-resolution: 1.5dppx) {
    div.input input {
        width: 95%;
        font-size: 1.8em;
    }
    div.question, div.large {
        font-size: 1.8em;
    }
    #content fieldset>div.solutioncorrect1, #content fieldset>div.questioncontent, #content fieldset>div.solutioncorrect0 {
        border-width: 10px;
    }
    div.lang img {
        width: 50px;
    }
    button {
        max-width: 130px;
    }
}a.icon{
    text-decoration: none;
}

.icon{
    background-repeat: no-repeat;
    padding-left: 18px;
}

.icon-chart-curve
{
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJYSURBVDjLY/j//z8DJRhMmJQd+x89/W4IRQbY1x5L8590dzmy5PuIqC4gfvA+PPIyEMfhNqD06H+L9gfG9p33/jr23OMEiX30DTj8yT/oFxCf+hAYfBeIfwPxIyBWwjSg5Mh/tYZHzDr1D34aND7Y9tXOsf2Lg/O/z85uNjCFn908lT56eH985xXwzXvygwYUA4yLD/9Xcm+QlS572JWesP7XVyOL79/MLKci22Rc/6DXvPH+X8um+79t2u7/tOu4/w9ugFHxof8wha+1LP89NHT9iaxZIf/BCpWie7/Vi+/N/25kqvrN2Oz/suiO6QgDig6ADfgtJrX0p6TMb1u/Xd+5Eh9M4k16yCyQdH+HYOK9H6JJd+tgBv7U0j3wXVvvA9wAg8J9/6sNAvT/8gr++8Mn1MYQ8aCFIfzBf6bwB3+Zwx/8Ywu7H44e+j8VVX4hDMjf+/8/I6v/fya2OyghHHCn3GuRw3TvJTZnPJdYnXVbbA436Le49Aa4Afp5u///ZGAJ+c3AIg5T4DXT0stjpuULj1nmD9xmW6x1nWu2z2W+6RenBcbxIHmga6XgBujl7vw/R1TDAabZscNommOn0UeHLsNFDj2GPDBxh37DDrtJ+u8x0oFu9vb/liU6khal2jPNS3UfAem3FmU6Gej+tqjX5rBo0rln1qI9GdWArG3/jTI0/Q0z1N3UAyxdgTQ4NQpreMjCFAqpOoHZRvnqUhpROhmmxRo8cAO0M7f8187Y/F8rYxMQb/yvlbYBiNf/1wTh1HX/NUA4ZS0Ur/mvkbwajOEGUIIBf5BxjDvwFIUAAAAASUVORK5CYII=')
}

.icon-star
{
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIwSURBVDjLlZLNS5RRFMafe9/3vjPOjI1jaKKEVH40tGgRBWEibfoPQoKkVdtoEQQF4T/QqkVtWrSTFrVsF1FgJbWpIAh1k2PNh+PrfL4f95zTQk0HHKkDD/cc7vP8uHCuEhF0q/KnmXNgGR248PZFN4/GISXMC8L89DBPV0Dp4/SsazJjrtfb9/vdxfn/BgjzY5M8Aq8nBya+V3h93vtnQHFxat4kszntJAAAxus1YvnZQV5V/jyTEZarwnwFLGeFZdT0ZFOJdD84qoCDOpQ7grZfRNj020JSEOKvwvxGiF+q0tL0N5PuO+Mk0nC0B0BDsYCCImyzAIktBBloMwKJLSgKYcMAcdhC2KpVlIig+H5qxcv0n0xmj4Gbq+BwC2wtJLbgHUlMEFJwUpMIGpto16u+kJzSACAk+WCzvNbe+AVljkOYIcQQou3TbvdOJo+g4aNdqzaF+PT43HJVA8DQpcVIiPPtaqlEUQzlDELsTpgYwgTAQIjQqlUCtpQfn1spdmxh+PJSQyw9CrbKgM7tvcISQAxlBhC3GuCYXk3cWP25m3M7dk88qbWBRDVApaATOSjPBdXXwYEP5QyCgvjE/kwHgInHtHYBnYA2owhrPiiuw0sOw3EZFEagIB7qChDiYaUcNIoFtP1KxCTPhWiDw7WbXk9vKpnOgsI4exjg6Mbq96YQPxm79uPOvqvbXx4O3KrF6w8osv2df17kr5YXJq7vnw/S0v3k7Ie7xtud/wAaRnP+Cw8iKQAAAABJRU5ErkJggg==');
}

.icon-award-star-bronze1
{
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJvSURBVDjLhZNNSFRRFIC/N++9eWMzhkl/ZJqFMQMRFvTvImkXSdKiVRAURBRRW1eZA9EqaNOiFlZEtQxKyrJwUS0K+qEQzaTE/AtLHR3HmffuvafFNINDWGdz7z2c7+Nyzr2WiFAIffaMBDW1+B0diAgYgxiDiCDG4DU1QfcLos+fWAXGYUGIUsXiAliUFER+sBAhVCIIVB7QGtEat1oTbcwVz2LMfwR+gPg+oY0bEa3x6sHdUoVdniMUj0M2i/j+PwVJa2QUu7YWp34D7mqNWdNApD6Ks24dpvcL4gfJRQXevbutjI4lGRzCS9iYukPo5dvxVqWQvn6k/2uyoudd60LGEhG43VBGyI4j2ADZ7vDJ8DZ9Img4hw4cvO/3UZ1vH3p7lrWRLwGVneD4y6G84NaOYSoTVYIFIiAGvXI3OWctJv0TW03jZb5gZSfzl9YBpMcIzUwdzQsuVR9EyR3TeCqm6w5jZiZQMz8xsxOYzDTi50AMVngJNgrnUweRbwMPiLpHrOJDOl9Vh6HD7GyO52qa0VPj6MwUJpNC5mYQS/DUJLH3zzRp1cqN8YulTUyODBBzt4X6Ou870z2I8ZHsHJLLYNQ8jusQ6+2exJf9BfivKdAymKZiaVdodhBRAagAjIbgzxp20lwb6Vp0jADYkQO6IpHfuoqInSJUVoE2HrpyRQ1tic2LC9p3lSHWPh2rJfL1MeVP2weWvHp8s3ziNZ49i1q6HrR1YHGBNnt1dG2Z++gC4TdvrqNkK1eHj7ljQ/ujHx6NyPw8BFIiKPmNpKar7P7xb/zyT9P+o7OYvzzYSUt8U+TzxytodixEfgN3CFlQMNAcMgAAAABJRU5ErkJggg==');
}

.loading{
    background: url('data:image/svg+xml,%3Csvg width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-fidget-spinner"%3E%3Cg transform="rotate(6 50 50)"%3E%3Cg transform="translate(50 50)"%3E%3Cg transform="scale(0.9)"%3E%3Cg transform="translate(-50 -58)"%3E%3Cpath d="M27.1,79.4c-1.1,0.6-2.4,1-3.7,1c-2.6,0-5.1-1.4-6.4-3.7c-2-3.5-0.8-8,2.7-10.1c1.1-0.6,2.4-1,3.7-1c2.6,0,5.1,1.4,6.4,3.7 C31.8,72.9,30.6,77.4,27.1,79.4z" fill="%23fc636b"%3E%3C/path%3E%3Cpath d="M72.9,79.4c1.1,0.6,2.4,1,3.7,1c2.6,0,5.1-1.4,6.4-3.7c2-3.5,0.8-8-2.7-10.1c-1.1-0.6-2.4-1-3.7-1c-2.6,0-5.1,1.4-6.4,3.7 C68.2,72.9,69.4,77.4,72.9,79.4z" fill="%236a67ce"%3E%3C/path%3E%3Ccircle cx="50" cy="27" r="7.4" fill="%23ffb900"%3E%3C/circle%3E%3Cpath d="M86.5,57.5c-3.1-1.9-6.4-2.8-9.8-2.8c-0.5,0-0.9,0-1.4,0c-0.4,0-0.8,0-1.1,0c-2.1,0-4.2-0.4-6.2-1.2 c-0.8-3.6-2.8-6.9-5.4-9.3c0.4-2.5,1.3-4.8,2.7-6.9c2-2.9,3.2-6.5,3.2-10.4c0-10.2-8.2-18.4-18.4-18.4c-0.3,0-0.6,0-0.9,0 C39.7,9,32,16.8,31.6,26.2c-0.2,4.1,1,7.9,3.2,11c1.4,2.1,2.3,4.5,2.7,6.9c-2.6,2.5-4.6,5.7-5.4,9.3c-1.9,0.7-4,1.1-6.1,1.1 c-0.4,0-0.8,0-1.2,0c-0.5,0-0.9-0.1-1.4-0.1c-3.1,0-6.3,0.8-9.2,2.5c-9.1,5.2-12,17-6.3,25.9c3.5,5.4,9.5,8.4,15.6,8.4 c2.9,0,5.8-0.7,8.5-2.1c3.6-1.9,6.3-4.9,8-8.3c1.1-2.3,2.7-4.2,4.6-5.8c1.7,0.5,3.5,0.8,5.4,0.8c1.9,0,3.7-0.3,5.4-0.8 c1.9,1.6,3.5,3.5,4.6,5.7c1.5,3.2,4,6,7.4,8c2.9,1.7,6.1,2.5,9.2,2.5c6.6,0,13.1-3.6,16.4-10C97.3,73.1,94.4,62.5,86.5,57.5z M29.6,83.7c-1.9,1.1-4,1.6-6.1,1.6c-4.2,0-8.4-2.2-10.6-6.1c-3.4-5.9-1.4-13.4,4.5-16.8c1.9-1.1,4-1.6,6.1-1.6 c4.2,0,8.4,2.2,10.6,6.1C37.5,72.8,35.4,80.3,29.6,83.7z M50,39.3c-6.8,0-12.3-5.5-12.3-12.3S43.2,14.7,50,14.7 c6.8,0,12.3,5.5,12.3,12.3S56.8,39.3,50,39.3z M87.2,79.2c-2.3,3.9-6.4,6.1-10.6,6.1c-2.1,0-4.2-0.5-6.1-1.6 c-5.9-3.4-7.9-10.9-4.5-16.8c2.3-3.9,6.4-6.1,10.6-6.1c2.1,0,4.2,0.5,6.1,1.6C88.6,65.8,90.6,73.3,87.2,79.2z" fill="%233be8b0"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3CanimateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E') center no-repeat;
}

div.bookgrid{
    display: grid;
    grid-template-areas: "image flag" "image bookname" "image isbn"; 
    margin-bottom: 15px;
    grid-template-columns: 80px auto;
}

/*# sourceMappingURL=main.css.map*/