@font-face {
	font-family: LEMONMILK;
	src: url('lemon_milk/LEMONMILK-Light.otf')
	format("opentype");
  }
  
  body { 
        font-family: 'LEMONMILK','Poppins',Arial, sans-serif;
        font-size:.7em  !important;
    } 

input[type=text]#skill_input {
    font-family: LEMONMILK;
    src: url('lemon_milk/LEMONMILK-Light.otf')
    format("opentype");
    width:300px;
    -webkit-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}

input[type=text]#skill_input:focus {
    width: 400px;
}
/*  #########################  Hintergrund für distanzen  */
.bg1k {background-color: rgb(255, 0, 255); color:#000; opacity:0.7;}  
  .bg2k {background-color: rgb(225, 0, 255);opacity:0.8;color:#000; }  
  .bg3k {background-color: rgb(210, 0, 255);opacity:0.8;color:#000; }  
  .bg4k {background-color: rgb(195, 0, 255);opacity:0.8;color:#000; }  
  .bg5k {background-color: rgb(180, 0, 255);opacity:0.8;color:#000; }
  .bg6k {background-color: rgb(165, 0, 255);opacity:0.8;color:#000; }  
  .bg7k {background-color: rgb(150, 0, 255);opacity:0.9;color:#fff; }  
  .bg8k {background-color: rgb(135, 0, 255);opacity:0.9;color:#fff;}  
  .bg9k {background-color: rgb(120, 0, 255);opacity:0.9;color:#fff;}  
  .bg10k {background-color: rgb(105, 0, 255);opacity:0.9;color:#fff;}  
  .bg12k {background-color: rgb(90, 0, 255);opacity:0.9;color:#fff;}
  .bg13k {background-color: rgb(75, 0, 255);opacity:1;color:#fff;}  
  .bg14k {background-color: rgb(60, 0, 255);opacity:1;color:#fff;}  
  .bg15k {background-color: rgb(45, 0, 255);opacity:1;color:#fff;}  
  .bg16k {background-color: rgb(30, 0, 255);opacity:1;color:#fff;}  
  .bg17k {background-color: rgb(15, 0, 255);opacity:1;color:#fff;}  
  
  .bg18k {background-color: rgb(0, 0, 255);color:#fff;}  
  .bg19k {background-color: rgb(0, 25, 255);color:#fff;}  
  .bg20k {background-color: rgb(0, 40, 255);color:#fff;}  
  .bg21k {background-color: rgb(0, 55, 255);color:#fff;}  
  .bg22k {background-color: rgb(0, 70, 255);color:#fff;}  
  .bg23k {background-color: rgb(0, 85, 255);color:#fff;}  
  .bg24k {background-color: rgb(0, 100, 255);color:#fff;}  
  .bg25k {background-color: rgb(0, 115, 255);color:#000;}  
  .bg26k {background-color: rgb(0, 130, 255);color:#000;}  
  .bg27k {background-color: rgb(0, 145, 255);color:#000;}  
  .bg28k {background-color: rgb(0, 160, 255);color:#000;}  
  .bg29k {background-color: rgb(0, 175, 255);color:#000;}  
  .bg30k {background-color: rgb(0, 190, 255);color:#000;}  
  .bg31k {background-color: rgb(0, 205, 255);color:#000;}  
  .bg32k {background-color: rgb(0, 220, 255);color:#000;}  
  .bg33k {background-color: rgb(0, 235, 255);color:#000;}  
  .bg34k {background-color: rgb(0, 240, 255);color:#000;}
  
  .bg35k {background-color: rgb(0, 255, 255);color:#000;} 
  .bg36k {background-color: rgb(0, 255, 225);color:#000;} 
  .bg37k {background-color: rgb(0, 255, 210);color:#000;} 
  .bg38k {background-color: rgb(0, 255, 195);color:#000;} 
  .bg39k {background-color: rgb(0, 255, 180);color:#000;} 
  .bg40k {background-color: rgb(0, 255, 165);color:#000;} 
  .bg41k {background-color: rgb(0, 255, 150);color:#000;} 
  .bg42k {background-color: rgb(0, 255, 135);color:#000;} 
  .bg43k {background-color: rgb(0, 255, 120);color:#000;} 
  .bg44k {background-color: rgb(0, 255, 105);color:#000;} 
  .bg45k {background-color: rgb(0, 255, 90);color:#000;} 
  .bg46k {background-color: rgb(0, 255, 75);color:#000;} 
  .bg47k {background-color: rgb(0, 255, 60);color:#000;} 
  .bg48k {background-color: rgb(0, 255, 45);color:#000;}
  .bg49k {background-color: rgb(0, 255, 30);color:#000;}
  .bg50k {background-color: rgb(0, 255, 15);color:#000;}

  .bg51k {background-color: rgb(17, 255, 0);color:#000;}
  .bg52k {background-color: rgb(34, 255, 0);color:#000;} 
  .bg53k {background-color: rgb(51, 255, 0);color:#000;} 
  .bg54k {background-color: rgb(68, 255, 0);color:#000;} 
  .bg55k {background-color: rgb(85, 255, 0);color:#000;} 
  .bg56k {background-color: rgb(102, 255, 0);color:#000;} 
  .bg57k {background-color: rgb(119, 255, 0);color:#000;} 
  .bg58k {background-color: rgb(136, 255, 0);color:#000;} 
  .bg59k {background-color: rgb(153, 255, 0);color:#000;} 
  .bg60k {background-color: rgb(170, 255, 0);color:#000;} 
  .bg61k {background-color: rgb(187, 255, 0);color:#000;} 
  .bg62k {background-color: rgb(204, 255, 0);color:#000;} 
  .bg63k {background-color: rgb(221, 255, 0);color:#000;} 
  .bg64k {background-color: rgb(238, 255, 0);color:#000;} 
  .bg65k {background-color: rgb(255, 255, 0);color:#000;} 

/* #################   own colors ###################### */
  .bg-my-grey {background-color: rgb(145, 145, 144);}
  .bg-my-lightgrey {background-color: rgb(212, 212, 212);} 
  .bg-my-darkgrey {background-color: rgb(66, 66, 66);} 

  /* #################   own font colors ###################### */
.fc_light_grey {color:#a7a7a7;}


/* #################   own hints ###################### */

 .hint {
    background-color: #4b8b20;
    color:#ffffff;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 10px 40px;
    margin: 10px;
    border:2px solid #cccccc;
    border-radius: 022em;
  }
  .hint1 {
    background-color: #4b8b20;
    color:#ffffff;
    letter-spacing: 2px;
    padding:3px;
    margin: 20px;
    border:2px solid #cccccc;
    border-radius: 022em;
  }
  .hint2 {
    background-color: #d67403;
    color:#161312;
    letter-spacing: 2px;
    padding:3px;
    margin: 2px;
    border:2px solid #cccccc;
    border-radius: 22em;
  }
/* #################   own odyssey_logo ###################### */
  .odyssey_logo {
    padding:5px 10px;
    width:66px;
    height:34px;
    display:block;
    border:1px solid #000000;
    border-radius: .5em;
    background-color:#13afd6; 
    background-image: url('images/Odyssey_60.png');
    background-repeat: no-repeat;
    background-size: 64px 34px;
  }

/* #################   hotspot table ###################### */

 #myTable table tr td { padding:0px;}
 .table tr td { padding:0px;}