@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,100;1,700&display=swap');
:root {
 --color_font:#F2F2F2;
 --color_font_second:#a0a0a0;
 --color_orange:#FFBF08;
 --color_dark_grey:#333333;
 --width_menu_side_left:400px;  
}
* {
 margin:0;
 padding:0;
}
html, body {
 width: 100%;
 height: 100%;
}
body {
 font-family: 'Montserrat', sans-serif;
 font-weight:700;
 font-size:1em;
 background: #424242;
 color: var(--color_font);
 background-image: url("../img/bg.jpg");
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: center;
}
a {
 color: var(--color_font);
 font-family: 'Montserrat', sans-serif;
 font-weight:700;
 text-decoration: none;
}
.thin {
 font-size:80%;
}
.font_second_color{
 color: var(--color_font_second);
}



/* Login zentriert */
.centervh {
 display: -webkit-flex;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-align-items: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 width: 100%;
 height: 100%;
}
.centervh_inner {
 text-align: center;
 margin: 0 auto;
 width: 600px;
 min-width:200px;
 max-width:80vw;
}









/* font size on different screens sizes */
@media only screen and (min-width:0px)  {
 body {font-size:70%;}
 i.font_small{font-size:60%;}
}
@media only screen and (max-width:650px)  {
 div.disp_row1{display:none;}
 div.disp_lap_row1{display:none;}
 div.disp_row_menu{display:block;}
}
@media only screen and (max-width:840px)  {
 div.disp_row2{display:none;}
 div.disp_row_menu{display:block;}
 div.show_image{display:block;}
 div.show_text{display:none;}
}
@media only screen and (max-width:1100px)  {
 div.disp_row3{display:none;}
 div.disp_row_menu{display:block;}
 div.runs_row_menu{min-width:110px;width:110px;}
}
@media only screen and (max-width:1599px)  {
 body{font-size:80%;}
 i.font_small{font-size:70%;}
 div.runs_rounds{min-width:200px;}
 div.runs_symbols{min-width:120px;}
 div.menu_side_button{display:none;}
 div.menu_side_button_cancel{display:none;top:46px;height:calc(100% - 66px);width:calc(67% - 1px);}
 div.menu_main_settings{display:block;}
 div.select select{padding: 9px 5px;}
}
@media only screen and (min-width:1600px)  {
 body {font-size:90%;}
 i.font_small{font-size:80%;}
 div.button_font{font-size:80%;}
 div.runs_rounds{min-width:200px;}
 div.runs_symbols{min-width:120px;}
 div.menu_side_button{display:none;}
 div.menu_side_button_cancel{display:none;top:46px;height:calc(100% - 66px);width:calc(67% - 1px);}
 div.menu_main_settings{display:block;}
 div.main{display:flex;}
 div.menu_side_left{max-width: var(--width_menu_side_left);}
/* div.ajax_menu div:nth-child(4), div.ajax_menu div:nth-child(5){display:none;} */
 a.close_container, a.close{width:35px;height:35px;}
}
@media only screen and (min-width:1200px)  {
 i.font_small{font-size:90%;}
}
img {
 height: auto;
}
.font_small {
 font-size:90%;
}








.menu_side_left {
 width:100%;
 display:none;
}
.menu_side_right {
 float:left;
 padding-bottom:40px;
 overflow-x: hidden;
 z-index:0;
 flex-grow:1;
 padding-left: 10px;
 padding-right: 10px;
 width:100%;
 height:100%;
}
.menu_side_button {
 position:absolute;
 top:70px;
 left:10px;
}
.menu_side_button_cancel {
 width: 367px;
 display: none;
 background: #222222;
 padding: 10px;
 position: fixed;
 height: calc(100% - 80px);
 top:45px;
 border-right: 1px solid #cccccc;
 overflow-y: auto;
 overflow-x: hidden;
 z-index:10;
}
.menu_side_max {
 max-width:unset !important;
 width:100%;
 animation: width100 0.5s;
}
@keyframes width100 {
 from { width: var(--width_menu_side_left); }
 to { width:100%; }
}





.container {
 position: absolute;
 background: #424242;
 height: 100%;
 top:0px;
 right: 51px;
 width: calc(100% - 51px);
 padding: 0px;
 padding-bottom: 25px;
 box-sizing: border-box;
 z-index: 1;
 overflow-y: scroll;
 -ms-overflow-style: none;
 scrollbar-width: none;
}
.container::-webkit-scrollbar {
 display: none;
}
.inner {
 padding:10px;
 margin: 0 auto;
}
.close_container {
 position:absolute;
 width:30px;
 height:30px;
 opacity:0.5;
 border-width:1px;
 border-style:solid;
 border-radius:50%;
 top:10px;
 right:10px;
 text-align:center;
 font-size:200%;
 cursor:pointer;
}
#overlay {
 position: fixed;
 display: none;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0,0,0,0.8);
 z-index: 2;
 cursor: pointer;
}
.blur {
 filter: blur(5px);
}







/* select, input */
.input {
 transform: skew(25deg);
 padding: 5px 12px;
 font-size: 100%;
 width: 100%;
 line-height: 20px;
 vertical-align: middle;
 outline: none;
 background-color: transparent;
 width: 100%;
 box-sizing: border-box;
 border: hidden;
 color: var(--color_font);
 min-width:150px;
}
.input:focus{
 outline: none;
}
.listbg_input {
 padding: 0.5em 2em !important;
 border:1px solid #e1e4e8;
 border-radius:5px;
}
.select {
 width:100%;
 font-size:100%;
 line-height: 20px;
 color: #24292e;
 vertical-align: middle;
 background-color: transparent;
}
.select select {
 transform: skew(25deg);
 display: inline-block;
 background-color: transparent;
 width: 100%;
 cursor: pointer;
 padding: 7.5px 5px;
 outline: 0;
 border: 0px;
 color: var(--color_font);
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 font-size: 100%;
 min-width:150px;
}
.select_flat {
 padding: 0px 12px;
 outline: none;
 border:0px;
}
select option {
 background: #222222;
}
.input_row {
 float: left;
 padding-right: 5px;
}
.img_delete {
 width:23px;
}












/* buttons */
button {
 background-color: Transparent;
 background-repeat:no-repeat;
 border: none;
 cursor:pointer;
 overflow: hidden;
 outline:none;
 text-transform: uppercase;
 font-weight:bold;
 color: var(--color_font);
 font-style: italic;
 display: inline-block;
 position: relative;
 padding:5px;
}
button::after {
 content: '';
 position: absolute;
 width: 100%;
 transform: scaleX(0);
 height: 2px;
 bottom: 0;
 left: 0;
 background-color: var(--color_orange);
 transform-origin: bottom right;
 transition: transform 0.25s ease-out;
}
button:hover::after {
 transform: scaleX(1);
 transform-origin: bottom left;
}
.button {
 box-shadow:inset 0px 1px 0px 0px #fff6af;
 background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
 background-color:#ffec64;
 border-radius:6px;
 border:1px solid #ffaa22;
 display:inline-block;
 cursor:pointer;
 background-color:#ededed;
 border:1px solid #dcdcdc;
 color:#333333;
 padding:14px 24px;
 text-decoration:none;
 text-shadow:0px 1px 0px #ffee66;
 text-transform: uppercase;
 transform: skew(-25deg);
}
.button_active {
 position:relative;
 top:1px;
}
.button:hover {
 background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
 background-color:#ffab23;
}
.button:active {
 position:relative;
 top:1px;
}
.button_team {
 padding:10px;
 width:115px;
 text-align:center;
}
.button_state_end {
 background: #f1f1f1;
 border-radius:20px;
 border:1px solid #dcdcdc;
 display:inline-block;
 color:#777777;
 padding:8px 8px;
 text-decoration:none;
 font-size:50%;
 text-transform: uppercase;
}
.button_state_running {
 background: #77d42a;
 border-radius:20px;
 border:1px solid #268a16;
 display:inline-block;
 color:#306108;
 padding:8px 8px;
 text-decoration:none;
 font-size:50%;
 text-transform: uppercase;
}
.button_state_pending {
 background: #FF7F24;
 border-radius:20px;
 border:1px solid #7a3f15;
 display:inline-block;
 color:#306108;
 padding:8px 8px;
 text-decoration:none;
 font-size:50%;
 text-transform: uppercase;
}
.button_state_red {
 background: #FF4040;
 border-radius:20px;
 border:1px solid #dcdcdc;
 display:inline-block;
 padding:4px 20px;
 text-decoration:none;
 text-transform: uppercase;
}
.button_state_orange {
 background: #FF7F24;
 border-radius:20px;
 border:1px solid #dcdcdc;
 display:inline-block;
 padding:4px 20px;
 text-decoration:none;
 text-transform: uppercase;
}
.div_state_red {
 background: #FF4040;
}
.div_state_orange {
 background: #FF7F24;
}
.div_state_green {
 background: #04B404;
 color: #ffffff;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #77a809;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
#menu_racing_response {
 display:none;
}
.buttonbar {
 display: flex;
}
.button_left {
 min-width: 100px;
 text-transform: uppercase;
 border-right:0px !important;
 border-radius: 3px 0 0 3px !important;
 align-items: center;
}
.button_center {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 border-left:0px !important;
 border-right:0px !important;
 border-radius:0px !important;
}
.button_right {
 min-width: 100px;
 text-transform: uppercase;
 border-left:0px !important;
 border-radius: 0 3px 3px 0 !important;
 align-items: center;
}
.start_button {
 width: 50%;
 padding: 20px;
 font-size: 1vw;
 font-size:calc(12px + 1vw);
}
.start_table {
 display:flex;
 flex-direction:row;
}
.start_row_left {
 min-width: 140px;
 padding-right:10px;
 text-align:left;
}
.start_row_right {
 text-align:justify;
}









/* message window */
.alert{
 width: calc(70% - 30px - 50px);
 margin: 20px auto;
 padding: 30px;
 padding-right: 50px;
 position: fixed;
 left: 40%;
 top: 5%;
 border-radius: 5px;
 box-shadow: 0 0 15px 5px #ccc;
 z-index: 30;
 margin-left: -25%;
}
.alert_box {
 padding: 30px;
 border-radius: 5px;
 box-shadow: 0 0 5px 2px #111;
 width: 100%;
}
.box_background{
 background-image: url(../img/box_bg.jpg) !important;
 background-size: cover;
 border-top-right-radius:5px;
}
.alert_container {
 display: flex;
 padding: 10px;
 min-width: 275px;
 flex-grow:1;
}
.box_container {
 display:flex;
 flex-wrap:wrap;
 padding-bottom: 20px;
 margin: -10px;
}
.close {
 position:absolute;
 width:30px;
 height:30px;
 opacity:0.5;
 border-width:1px;
 border-style:solid;
 border-radius:50%;
 right:10px;
 top:10px;
 text-align:center;
 font-size:200%;
 cursor:pointer;
}
.close_menu {
 position:relative;
 right:-330px;
 display: block;
}
.simple-alert {
 background:#333333;
 border-left:5px solid #ebebeb;
}
.success-alert {
 background:#51C682;
 border-left:5px solid #257345;
}
.danger-alert {
 background:#EA342E;
 border-left:5px solid #8B110D;
}
.warning-alert {
 background:#E89C20;
 border-left:5px solid #8E5B0A;
}
.box_max_width {
 min-width:250px;
 max-width:100%;
}
















/* main */
.clear {
 clear: both;
}
.main {
 padding: 0px;
 width: calc(100% - 51px);
 overflow:hidden;
}
.main_inner {
 padding: 10px;
}
.main_inner2 {

}
.main_blur {
 filter: blur(5px);
 -webkit-filter: blur(5px);
 -moz-filter: blur(5px);
 -o-filter: blur(5px);
 -ms-filter: blur(5px);
 color: transparent;
 text-shadow: 0 0 5px rgba(0,0,0,0.5);
 width: calc(100% - 6px);
}
.table_row {
 float: left;
}
.table_row_inner {
 padding: 5px;
}
.event {
 display:block;
}
.event_image{
 margin: -30px -30px 10px;
}
.event_menu_main {
 text-align:center;
 width:100%;
}
.events_inner {
 padding: 10px;
}
.event_name {
}
.runs_trenner {
 border-top: 1px solid #cccccc;
}
.runs_round {
 float: left;
 padding: 0px;
 margin: 0;
 margin-left: -30px;
 margin-right: -30px;
 display: flex;
 justify-content: center;
 align-items: center;
 transform: rotate(-90deg);
 overflow: hidden;
 white-space: nowrap;
 z-index:-1;
 width:100px;
 }
.runs_content {
 float:left;
 width:100%;
 border-left: 1px solid #cccccc;
 flex-direction: column;
}
.runs_row {
 float:left;
 width:20%;
 min-width:160px;
}
.runs_symbols {
 float:left;
 width:9%;
 min-width:160px;
}
.laps_row {
 display:flex;
}
.laps_row_width {
 min-width:50px;
}
.disp_row_menu {
 display:none;
}
.runs_row_menu {
 float:right;
 width:5%;
 min-width:80px;
}
.runs_row_inner {
 padding: 5px;
}
.runs_data {
 float:left;
 padding-top:5px;
 padding-bottom:5px;
 margin:0px;
 width:100%;
}
.runs_data_add {
 border-radius: 10px;
 display: flex;
}
.runs_data_inner {
 padding:0px;
 margin:0px;
 width:100%;
 display:flex;
 align-items:center;
}
.runs_name {
 width:28%;
 min-width:110px;
 flex-grow:1;
}
.runs_menu {
 justify-content: center;
}
.runs_pos {
 width:6%;
 min-width: 65px;
}
.runs_pos_np {
 padding-left:0px;
}
.runs_points {
 min-width:auto;
 flex-grow:1;
}
.runs_rounds {
 float:left;
 width:20%;
 min-width:200px;
}
.runs_distance {
 float:left;
 width:20%;
 min-width:150px;
}
.runs_row_break {
 width:100%;
}
.img_icon {
 width: 23px;
 filter: invert(100%);
}
.img_icon_margin {
 margin-bottom:-5px;
}
.img_icon:hover {
 filter: invert(70%);
}
.img_padding {
 padding-top:4px;
}
.show_image {
 display:none;
}
.row_title {
 float:left;
 width:100%;
 padding-bottom:15px;
}
.row_title_inner {
 padding-right:20px;
 padding-left:10px;
}
.row_content {
 float:left;
 width:100%;
}
.row_gym_width {
 min-width:200px !important;
}
.row_time_additional {
 display: flex;
 flex-wrap: wrap;
 justify-content: right;
 align-items: center;
 width: 110px;
}
.row_time {
 width: 110px;
 justify-content: right;
}
.row_finished {
 background-image: url('../img/icons/gym_start.png');
 background-repeat: repeat-y;
 background-size: 24px;
}
.menu_menu_menu {
 border-bottom:1px solid #cccccc;
}
.profileimg {
 width:30px;
 height:30px;
 border: 1px solid #cccccc;
 border-radius: 15px;
 transition: transform .2s;
 background: #ffffff;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
}
.profileimg:hover {
 transform: scale(3);
 z-index:100;
}
.vertical {
 display: -webkit-flex;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-align-items: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
}
.row_float_left {
 float:left;
}
.row_float_right {
 float:right;
}
.row_flex_center{
 display: flex;
 align-items: center;
}
.row_width_20 {
 width:20%;
 min-width:140px;
}
.row_width_25 {
 width:25%;
 min-width:310px;
}
.loading {
 position:fixed;
 left:50%;
 margin-left:-32px;
}
.notcounted {
 text-decoration:line-through;
}
.legend {
 border-top:1px solid #cccccc;
 background:#222222;
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 padding: 3px;
 z-index:20;
 display:flex;
 align-items:center;
}
.bg_colored {
 background:#565656;
}
.current_race {
 text-decoration: underline;
}
.race_title {
 font-size:150%;
 color: var(--color_orange);
 text-shadow: 1px 1px 1px #8F6B06;
 padding-top: 20px;
}
.footer_right{
 position:fixed;
 bottom:10px;
 right:63px;
 background:#424242;
 border-radius:5px;
 border:1px solid #efefef;
}
.footer_left{
 position:fixed;
 bottom:10px;
 left:10px;
 background:#424242;
 border-radius:5px;
 border:1px solid #efefef;
}
.footer {
 position:fixed;
 z-index:100;
}
.min_width_1{
 width:0px;
}
.arrow {
 position: relative;
 bottom: -1rem;
 left: 50%;
 margin-left:-15px;
 width: 30px;
 height: 30px;
 background-image: url('../img/buttons/arrow_up.png');
 background-size: contain;
 filter: invert(100%);
}
.bounce:hover {
 animation: bounce 2s infinite;
 animation-iteration-count: 1;
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-10px);}
 60% {transform: translateY(-5px);}
}










/*scrollbar*/
.scrollbar {
 float:left;
 height:130px;
 width:100%;
 overflow-y:scroll;
 overflow-x:hidden;
 position:absolute;
}
.scrollbar::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: var(--color_font);
}
.scrollbar::-webkit-scrollbar {
 width: 10px;
 background-color: var(--color_font);
}
.scrollbar::-webkit-scrollbar-thumb {
 background-color: #0ae;
 background-image: -webkit-gradient(linear, 0 0, 0 100%,
                   color-stop(.5, rgba(255, 255, 255, .2)),
		   color-stop(.5, transparent), to(transparent));
}
.fade_in{
 background: var(--color_dark_grey);
 animation: fadein 0.5s;
}
.fade_out{
 background: var(--color_dark_grey);
 animation: fadeout 0.5s;
 animation-fill-mode:forwards;
}
@keyframes fadein {
 from { opacity:0;height:0px; }
 to { opacity:1;height:130px; }
}
@keyframes fadeout {
 from { opacity:1;height:130px; }
 to { opacity:0;height:0px;display:none; }
}
.move_title_in {
 position:relative;
 animation: title_movein 0.5s;
 animation-fill-mode:forwards;
}
.move_title_out {
 position:relative;
 animation: title_moveout 0.5s;
 animation-fill-mode:forwards;
}
@keyframes title_movein {
 from { top:0px; }
 to { top:-100px; }
}
@keyframes title_moveout {
 from { top:-100px; }
 to { top:0px; }
}
.bg_fade_in {
 animation: bg_fadein 0.5s;
 animation-fill-mode:forwards;
}
.bg_fade_out {
 animation: bg_fadeout 0.5s;
 animation-fill-mode:forwards;
}
@keyframes bg_fadein {
 from { opacity:0.3; }
 to { opacity:1; }
}
@keyframes bg_fadeout {
 from { opacity:1; }
 to { opacity:0.3; }
}










/* menu */
.menu {
 position: fixed;
 right: 0px;
 top:0px;
 width: 50px;
 height: 100%;
 background: #222222;
 z-index: 10;
 border-bottom: 1px solid #cccccc;
 display: flex;
 border-left: 1px solid #efefef;
}
.menu_home {
 float: left;
 padding-left:5px;
 text-align:center;
 display:flex;
 flex-direction: column;
}
.menu_menu {
 padding: 5px;
 padding-right: 10px;
 right:0%;
 position:fixed;
}
.menu_button {
 padding:5px;
 display: flex;
 justify-content: center;
}
.menu_text {
 display:none;
 text-align:center;
}
.menu_inner {
 padding: 5px;
 display: flex;
 flex-direction: column;
}
.menu_center {
 padding-top: 2px;
 align-items: center;
 justify-content: center;
 width: calc(100% - 90px);
 display: flex;
}
.menu_img {
 height: 30px;
 filter: invert(100%);
}
.menu_img:hover {
 filter: invert(90%);
}
.menu_img:hover {
 animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
 transform: translate3d(0, 0, 0);
 perspective: 1000px;
}
@keyframes shake {
 10%, 90% {transform: translate3d(-1px, 0, 0);}
 20%, 80% {transform: translate3d(2px, 0, 0);}
 30%, 50%, 70% {transform: translate3d(-2px, 0, 0);}
 40%, 60% {transform: translate3d(2px, 0, 0);}
}
.menu_div {
 position: fixed;
 bottom:0px;
 background:#222222;
 z-index: 10;
 justify-content:end;
 max-height: calc(100% - 150px);
 overflow-y: scroll;
}
.menu_div_back {
 display:none;
 position:fixed;
 width:100%;
 height:100%;
 top:0px;
 left:0px;
 background:#cccccc;
 opacity:0.5;
 z-index: 5;
}
.menu_main {
 padding-bottom:50px;
}
.waiting {
}
.waiting_inner {
 padding:10px;
}
.waiting_banner {
 background: #DBA901;
 color: #ffffff;
}
.running_banner {
 background: #04B404;
 color: #ffffff;
}
.menu_racing_container {
 position: relative;
 text-align: center;
 z-index:10;
}
.menu_racing_centered {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size:80%;
 padding-bottom:2px;
}
.menu_racing_centered_info {
 position: absolute;
 padding-bottom:2px;
}
.list {
 padding-left:20px;
}
.list li {
 padding:2px;
}
.menu_full {
 box-shadow:inset 0px -3px 7px 0px #29bbff;
 background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
 background-color:#2dabf9;
 border-radius:3px;
 border:1px solid #0b0e07;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 text-decoration:none;
 text-shadow:0px 1px 0px #263666;
 display: flex;
 justify-content: center;
}
.menu_full:hover {
 background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
 background-color:#0688fa;
}
.menu_full2 {
 box-shadow:inset 0px 1px 0px 0px #fce2c1;
 background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
 background-color:#ffc477;
 text-shadow:0px 1px 0px #cc9f52;
}
.menu_full2:hover {
 background:linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);
 background-color:#fb9e25;
}
.menu_full3 {
 box-shadow:inset 0px 1px 3px 0px #91b8b3;
 background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
 background-color:#768d87;
 text-shadow:0px -1px 0px #2b665e;
}
.menu_full3:hover {
 background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
 background-color:#6c7c7c;
}
.menu_full:active {
 position:relative;
 top:1px;
}











/* dot, blinking */
.dot_green {
 background-color: #1c87c9;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 border: none;
 cursor: pointer;
 display: inline-block;
 padding: 5px 5px;
 text-align: center;
 text-decoration: none;
}
@keyframes glowing_green {
 0% { background-color: #2ba805; box-shadow: 0 0 2px #2ba805; }
 50% { background-color: #49e819; box-shadow: 0 0 5px #49e819; }
 100% { background-color: #2ba805; box-shadow: 0 0 2px #2ba805; }
}
.dot_green {
 animation: glowing_green 1300ms infinite;
}
.dot_red {
 background-color: #1c87c9;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 border: none;
 cursor: pointer;
 display: inline-block;
 padding: 5px 5px;
 text-align: center;
 text-decoration: none;
}
@keyframes glowing_red {
 0% { background-color: #FB0303; box-shadow: 0 0 2px #FB0303; }
 50% { background-color: #F00E0E; box-shadow: 0 0 5px #F00E0E; }
 100% { background-color: #FB0303; box-shadow: 0 0 2px #FB0303; }
}
.dot_red {
 animation: glowing_red 1300ms infinite;
}
.dot_1 {
 background-color: #01FF70;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 border: none;
 cursor: pointer;
 display: inline-block;
 padding: 10px 15px 10px 15px;
 text-align: center;
 text-decoration: none;
 color:#000000;
}
.dot_2 {
 background-color: #FF851B;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 border: none;
 cursor: pointer;
 display: inline-block;
 padding: 6px;
 text-align: center;
 text-decoration: none;
}
.dot_3 {
 background-color: #FFDC00;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 border: none;
 cursor: pointer;
 display: inline-block;
 padding: 2px;
 text-align: center;
 text-decoration: none;
 color:#000000;
}
.dot_non {
 background-color: #DDDDDD;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 border: none;
 cursor: pointer;
 display: inline-block;
 padding: 2px;
 text-align: center;
 text-decoration: none;
 color:#000000;
}










/* teammode */
.team {
 display: -webkit-flex;
 display: -ms-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}
.team_box {
 float: left;
 padding-right:10px;
 padding-bottom:10px;
 width:150px;
 display: flex;
 flex-direction: column;
}
.team_insert {
 display: -webkit-flex; 
 display: -ms-flexbox; 
 display: flex;
 flex-wrap: wrap;
 padding:5px;
 min-height:100px;
 height:auto !important;
 border:1px dashed #eeeeee;
}
.team_default {
 float: left;
 width: 100%;
 padding-top: 10px;
 min-height:100px;
 height:auto !important;
 border:1px dashed #eeeeee;
}
[contenteditable] {
  outline: 0px solid transparent;
}












/*hover box*/
a.info {
 position:relative;
 text-decoration:none;
 text-align:center;
}
a.info span {display: none}
a.info:hover span {
 display:block;
 position:absolute;
 width:150px;
 top:-100%;
 left:-200px;
 background:#F8F8F8;
 border: 5px solid #DFDFDF;
 color: #717171;
 letter-spacing: 1px;
 padding:10px;
 z-index:20;
 font-size:80%;
}
a.info_main:hover span {
 left:0px;
 top:20px;
}
.info_sign {
font-size: x-large;
font-weight: 100;
}








/*blinker*/
@-webkit-keyframes blinker {
  from { background-color: #DBA901; }
  to { background-color: inherit; }
}
@-moz-keyframes blinker {
  from { background-color: #DBA901; }
  to { background-color: inherit; }
}
@-o-keyframes blinker {
  from { background-color: #DBA901; }
  to { background-color: inherit; }
}
@keyframes blinker {
  from { background-color: #DBA901; }
  to { background-color: inherit; }
}
.blinker {
  -webkit-animation: blinker 0.3s infinite;
  -moz-animation:    blinker 0.3s infinite;
  -o-animation:      blinker 0.3s infinite;
  animation:         blinker 0.3s infinite;
  animation-iteration-count: 4;
}











/*list*/
.listbg {
 background-color: rgba(0,0,0,0.5);
 transform: skew(-25deg);
 padding: 2em 2em;
}
.listbg_light {
 background-color: rgba(0,0,0,0.2);
 transform: skew(-25deg);
 padding: 2em 2em;
}
.listbg_layer {
 background-color: rgba(0,0,0,0.5);
 padding: 2em 2em;
}
.pos_place_bg1 {
 background-color: #D4AC0D !important;
}
.pos_place_bg2 {
 background-color: #D68910 !important;
}
.pos_place_bg3 {
 background-color: #CA6F1E !important;
}
.listcontent {
 position:absolute;
 top:50%;
 transform:translate(0, -50%);
 z-index:1;
}
.listcontent_left {
 left:30px;
}
.listcontent_right {
 right: 10px;
 display: flex;
 align-items: center;
}
.listcontent_wi {
}
.listrow {
 float:left;
 position:relative;
 margin-right:5px;
 white-space:nowrap;
}
.listrow1 {
 float:left;
 position:relative;
 width:95px;
 margin-right:5px;
}
.listrow2 {
 float:left;
 position:relative;
 width:calc(100% - 225px - 95px - 10px);
}
.listrow3 {
 float:right;
 position:relative;
 width:225px;
}
.wi_double {
 white-space: nowrap;
 width: 75%;
 overflow: hidden;
}
.listrow_border_left {
 border-bottom-left-radius: 20px;
 border-top-left-radius: 10px;
}
.listrow_border_right {
 border-bottom-right-radius: 10px;
 border-top-right-radius: 20px;
}










/*flex*/
.flex_column {
 display:flex;
 flex-direction:column;
}
.flex_row {
 display:flex;
 flex-direction:row;
}