html,
body {
  font-family: "Cantora One", serif;
  font-size: 16px;
}
.debug {
  display: none;
  width: 400px;
  background-color: #ffe88e;
  border: 2px solid #ffdc9d;
  padding: 20px;
  margin: 30px 10px;
}
.debug label {
  width: 100px;
  display: inline-block;
}
.debug ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.debug ul li {
  margin-bottom: 10px;
}
#loading {
  background: white;
  position: absolute;
  z-index: 999999999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#loading .spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -15px;
}
.compact_label.label,
.compact_label label {
  width: auto;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
.content {
  width: 1000px;
  margin: 0 auto;
}
.slider_container {
  display: none;
  position: absolute;
  z-index: 99999;
  left: 50%;
  top: 300px;
  width: 300px;
  margin-left: -150px;
  padding: 15px 20px;
  background: #21b9cf;
  border: 3px solid #00a1b7;
  font-weight: bold;
  color: white;
}
.slider_container .close_bt {
  display: inline-block;
  background: url("../img/icon_close.png") no-repeat;
  width: 24px;
  height: 24px;
  text-indent: -9999px;
  position: absolute;
  top: 5px;
  right: 5px;
}
.slider_container .labels {
  font-size: 12px;
}
.slider_container .labels .right {
  float: right;
}
.slider_container #speed {
  text-align: center;
}
.slider_container #speed span {
  display: inline-block;
  width: 15px;
  text-align: right;
}
.icon_close {
  display: inline-block;
  background: url("../img/icon_close.png") no-repeat;
  width: 24px;
  height: 24px;
}
#slider {
  margin: 5px 0;
}
#audio {
  display: none;
}
.message {
  font-size: 26px;
  color: #4aacd0;
  padding: 5px;
  text-align: center;
  width: 1000px;
  margin: -16px auto 0px;
}
.calendar {
  position: relative;
  background: url("../img/calendar_bg.png") no-repeat;
  width: 1001px;
  height: 736px;
  margin-top: 8px;
  /* Less space, handle this separatly */
}
.calendar .row_highlight {
  width: 951px;
  margin-left: 27px;
  position: absolute;
  box-sizing: border-box;
  /* 		background: rgba(0,255,0,0.39); */
}
.calendar .selected .row_highlight {
  border: 4px solid #ffa300;
  border-color: rgba(0, 0, 0, 0);
  background: rgba(255, 163, 0, 0.39);
}
.calendar .selected.row_1 .row_highlight {
  top: 29px;
  height: 148px;
  /*
			border: 4px solid rgb(255, 163, 0);
			border-color: rgba(0, 0, 0, 0); // Opacity 0 for browsers that can handle opacity
			background: rgba(255, 163, 0, 0.39);
*/
}
.calendar .selected.row_2 .row_highlight {
  top: 165px;
  height: 201px;
  /*
			border: 4px solid rgb(0, 255, 153);
			border-color: rgba(0, 0, 0, 0); // Opacity 0 for browsers that can handle opacity
			background: rgba(0, 255, 153, 0.39);			
*/
}
.calendar .selected.row_3 .row_highlight {
  top: 308px;
  height: 154px;
  /*
			border: 4px solid rgb(255, 0, 0);
			border-color: rgba(0, 0, 0, 0); // Opacity 0 for browsers that can handle opacity
			background: rgba(255, 0, 0, 0.39);
*/
}
.calendar .selected.row_4 .row_highlight {
  top: 421px;
  height: 197px;
  /*
			border: 4px solid rgb(245, 255, 0);
			border-color: rgba(0, 0, 0, 0); // Opacity 0 for browsers that can handle opacity
			background: rgba(245, 255, 0, 0.39);			
*/
}
.calendar .selected.row_5 .row_highlight {
  top: 563px;
  height: 145px;
  -webkit-border-bottom-right-radius: 27px;
  -moz-border-radius-bottomright: 27px;
  border-bottom-right-radius: 27px;
  /*
			border: 4px solid rgb(235, 0, 255);
			border-color: rgba(0, 0, 0, 0); // Opacity 0 for browsers that can handle opacity
			background: rgba(235, 0, 255, 0.39);			
*/
}
.calendar ul,
.calendar li {
  list-style: none;
}
.calendar .box {
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  /*  border: 8px solid transparent;*/

  /*
		width: 110px;
		height: 110px;
*/

  font-size: 22px;
  font-weight: bold;
  color: #82d6f0;
  background-repeat: no-repeat;
  /*&.opened {
  	 border: 0;
  }*/
}
.calendar .box span {
  position: absolute;
  top: 0px;
  left: 8px;
  z-index: 999;
}
.calendar .box.selected {
  border: 8px solid #0052ff;
  margin-top: -8px;
  margin-left: -8px;
  z-index: 1;
}
.calendar .box.box_9 span {
  left: 62px;
}
.calendar .box.box_11 span {
  left: 80px;
}
.calendar .box_1 {
  left: 41px;
  top: 42px;
}
.calendar .box_2 {
  left: 183px;
  top: 83px;
}
.calendar .box_3 {
  left: 322px;
  top: 154px;
}
.calendar .box_4 {
  left: 424px;
  top: 124px;
}
.calendar .box_5 {
  left: 572px;
  top: 64px;
}
.calendar .box_6 {
  left: 750px;
  top: 124px;
}
.calendar .box_7 {
  left: 866px;
  top: 153px;
}
.calendar .box_8 {
  left: 52px;
  top: 175px;
}
.calendar .box_9 {
  left: 188px;
  top: 273px;
}
.calendar .box_10 {
  left: 377px;
  top: 252px;
}
.calendar .box_11 {
  left: 568px;
  top: 279px;
}
.calendar .box_12 {
  left: 746px;
  top: 278px;
}
.calendar .box_13 {
  left: 864px;
  top: 319px;
}
.calendar .box_14 {
  left: 22px;
  top: 326px;
}
.calendar .box_15 {
  left: 42px;
  top: 461px;
}
.calendar .box_16 {
  left: 198px;
  top: 402px;
}
.calendar .box_17 {
  left: 338px;
  top: 349px;
}
.calendar .box_18 {
  left: 490px;
  top: 396px;
}
.calendar .box_19 {
  left: 690px;
  top: 426px;
}
.calendar .box_20 {
  left: 49px;
  top: 585px;
}
.calendar .box_21 {
  left: 227px;
  top: 550px;
}
.calendar .box_22 {
  left: 370px;
  top: 534px;
}
.calendar .box_23 {
  left: 545px;
  top: 550px;
}
.calendar .box_24 {
  left: 849px;
  top: 499px;
}

.calendar .picto {
  position: relative;
  background-repeat: no-repeat;
  border: 4px solid #ffffff;
  background-color: black;
  background-size: contain;
}
.calendar .picto.opened {
  boarder: 0px;
}
.calendar .box_1 .picto {
  background-image: url("../img/picto/bjallra.png");
  width: 98px;
  height: 97px;
}
.calendar .box_2 .picto {
  background-image: url("../img/picto/klocka.png");
  width: 96px;
  height: 96px;
}
.calendar .box_3 .picto {
  background-image: url("../img/picto/aka-skridskor.png");
  width: 89px;
  height: 89px;
}
.calendar .box_4 .picto {
  background-image: url("../img/picto/aka-skidor.svg");
  width: 96px;
  height: 96px;
}
.calendar .box_5 .picto {
  background-image: url("../img/picto/tavla.png");
  width: 127px;
  height: 127px;
}
.calendar .box_6 .picto {
  background-image: url("../img/picto/ren.png");
  width: 106px;
  height: 107px;
}
.calendar .box_7 .picto {
  background-image: url("../img/picto/hjarta.png");
  width: 98px;
  height: 98px;
}
.calendar .box_8 .picto {
  background-image: url("../img/picto/tomte.png");
  width: 102px;
  height: 102px;
}
.calendar .box_9 .picto {
  background-image: url("../img/picto/radio.png");
  width: 89px;
  height: 89px;
}
.calendar .box_10 .picto {
  background-image: url("../img/picto/eljusstake.png");
  width: 87px;
  height: 88px;
}
.calendar .box_11 .picto {
  background-image: url("../img/picto/kamin.png");
  width: 105px;
  height: 105px;
}
.calendar .box_12 .picto {
  background-image: url("../img/picto/aka-kalke.png");
  width: 106px;
  height: 105px;
}
.calendar .box_13 .picto {
  background-image: url("../img/picto/julkula.svg");
  width: 100px;
  height: 100px;
}
.calendar .box_14 .picto {
  background-image: url("../img/picto/stjarngosse.png");
  width: 122px;
  height: 121px;
}
.calendar .box_15 .picto {
  background-image: url("../img/picto/lussekatt.png");
  width: 110px;
  height: 111px;
}
.calendar .box_16 .picto {
  background-image: url("../img/picto/skinka.png");
  width: 130px;
  height: 129px;
}
.calendar .box_17 .picto {
  background-image: url("../img/picto/krukvaxt.png");
  width: 127px;
  height: 126px;
}
.calendar .box_18 .picto {
  background-image: url("../img/picto/paket.png");
  width: 127px;
  height: 127px;
}
.calendar .box_19 .picto {
  background-image: url("../img/picto/get.png");
  width: 137px;
  height: 138px;
}
.calendar .box_20 .picto {
  background-image: url("../img/picto/godis.png");
  width: 102px;
  height: 102px;
}
.calendar .box_21 .picto {
  background-image: url("../img/picto/grot.svg");
  width: 129px;
  height: 128px;
}
.calendar .box_22 .picto {
  background-image: url("../img/picto/bestick.png");
  width: 122px;
  height: 121px;
}
.calendar .box_23 .picto {
  background-image: url("../img/picto/sack.png");
  width: 130px;
  height: 130px;
}
.calendar .box_24 .picto {
  background-image: url("../img/picto/ljus.png");
  width: 114px;
  height: 114px;
}