/* Hide div after 4 seconds */
.hidedivafter4secs{
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 4s;
  position: absolute;
  background: rgba(125,0,0,.9);
  color:#fff;
  border:2px solid #f00;
  font-size:1.2vw;
  line-height:3vw;
  border-radius:10px;
  top:25%;
  left:50%;
  transform:translate(-50%,-50%);
  padding:5px 10px;
  width:40vw;
  z-index:9999;
  text-align:center;
}
@keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.header{color:#880;text-align:center;font-weight:bold;margin:5px;}

.main{
  background:#004;
  font-family:arial;
  width:98vw;
  margin:0 auto;
  border:1px solid #fff;
  border-radius:1vw;
  min-height:98vh;
  position:relative;
}

.exit_div{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translate(-50%,-50%);
  background:none;
  min-height:1vh;
  color:#ff0;
  text-align:center;
  margin:0 auto;
  width:16vw;
}
.a_exit{
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
  color:#ff0;
  background:#000;
  font-size:1.3vw;
  border:2px solid #888;
  border-radius:5px;
}
.a_exit:hover{
  color:#000;
  background:#ff0;
}


.func_div1,
.func_div2,
.func_div3,
.func_div4,
.func_div5
{
  width:90vw;
  margin:5px auto;
  padding:5px;
  border:1px solid #fff;
  border-radius:1vw;
}
nav {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  background:#624;
}
nav .inp1{font-size:1.3vw;}

.header{font-size:1.6vw;}
.func_div1{min-height:82vh;background:#500;}
.func_div2{min-height:82vh;background:#880;}
.func_div3{min-height:82vh;background:#008;}
.func_div4{min-height:82vh;background:#800;}
.func_div5{min-height:82vh;background:#080;}

@media only screen and (max-width: 768px)
{
  nav {flex-direction: column;}
  nav .inp1{font-size:2.0vw;}
  .header{font-size:2.9vw;}
  .func_div1{min-height:62vh;}
  .func_div2{min-height:62vh;}
  .func_div3{min-height:62vh;}
  .func_div4{min-height:62vh;}
  .func_div5{min-height:62vh;}

}



nav .inp1{
  flex: 1;
  text-align: center;
  margin: 5px;
  padding: 3px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #fff;
  background:#400;
  border-radius:10px;
}
nav .inp1:hover{
  background:#bbd;
  color:#000;
}

.checkbox {
  display: none;
}

.checkbox + label {
  display: inline-block;
  position: relative;

  height: 1.85vw;
  background:#004;

  border-radius: 1.2vw;
  border:2px solid #888;
  padding: 1px;
  cursor: pointer;
  transition: all 500ms ease;
  /*box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2) inset;*/
}

.checkbox + label { width: 6.5vw; }
@media only screen and (max-width: 768px){.checkbox + label { width: 6.8vw; }}

.checkbox + label:before {
  content: "N";
  width: 1.20vw;
  height: 1.20vw;
  position: absolute;
  left: 1px;
  border-radius: 100%;
  text-align: center;
  line-height: 1.20vw;
  font-family: arial;
  font-size: 0.8vw;
  font-weight: bold;
  background: #bbb;
  color: #888;
/*  letter-spacing: 1px;*/
  text-transform: uppercase;
  transition: left 500ms ease, color 500ms ease, transform 150ms ease;
}
.checkbox + label:active:before {
  transform: scale(0.95);
}


.checkbox + label:before {top: 2px; }
@media only screen and (max-width: 768px){.checkbox + label:before { top: 0; }}

.checkbox:checked + label {
  background-position-x: -9.0vw;
}
.checkbox:checked + label:before {
  content: "Y";
  color: #000;
  left: 4.8vw;
  background:#ff0;
}


::placeholder {
  color: #ff0;
  opacity: 0.3; /* Firefox */
}



.rf_div1{
  width:88vw;
  margin:1vw auto;
  background:#5dc9ef;
  background-image:linear-gradient(#1d89af,#5dc9ef);
  border:1px solid #888;
  border-radius:1vw;
  padding:1vw;
  font_size:1.4vw;
  min-height:60vh;
}
.tr_submit{
  width:18vw;border:1px solid #000;background:#004;color:#fff;border:2px solid #888;border-radius:2vw;font-size:1.6vw;margin:6px 1px 2px 1px;
}
.tr_submit:hover{
  background:#fff;
  color:#008;
}
.rdiv{height:100%;width:100%;padding:1px 0 5px 0;color:#aa0;font-size:1.1vw;display:flex;}
.rdivleft  {width:20%;background:#003;text-align:left;padding-left:3px;}
.rdivmiddle{width:60%;background:#003;text-align:center;}
.rdivright {width:20%;background:#003;text-align:right;padding-right:3px;}

.rf_tbl{width:84vw;margin:1px auto;background:#000;color:#fff;border-collapse:collapse;font-size:1.3vw;}
.rf_td1{width:3vw; border:1px solid #888;text-align:right;padding-right:0.6vw;}    /* Tournament ID      3   3 */
.rf_td2{width:15vw;border:1px solid #888;padding-left:3px;}                        /* Tournament Name   15  18 */
.rf_td3{width:4vw; border:1px solid #888;opacity:0.4;text-align:center;}           /* Tournament Count   4  22 */
.rf_td4{width:13vw;border:1px solid #888;text-align:left;padding-left:3px;}        /* Tournament Date   13  35 */
.rf_td5{width:7vw; border:1px solid #888;text-align:right;padding-right:3px;}      /* Tournament Time    7  42 */
.rf_td6{width:7vw; border:1px solid #888;padding-left:3px;}                        /* Tournament Select  7  49 */
.rf_td7{width:34vw;border:1px solid #888;color:#0bb;padding-left:4px;}             /* Tournament Info   34  83 */
.rf_inp7{width:99%;background:#000;color:#fff;border:none;height:100%;outline:none;font-size:1.0vw;}



.login_pu{
  border-style:border-box;
  position:absolute;
  top:20vw;
  left:50%;
  transform:translate(-50%);
  background:#fff;
  color:#000;
  text-align:center;
  margin:0 auto;
  padding:0;
  width:48vw;
  border:1px solid #888;
  min-height:40vh;
  font-size:1.8vw;
  overflow:scroll;
  border:10px solid #008;
  border-radius:20px;
  overflow:auto;
  z-index:99;

  /*box-shadow:10px 10px 5px lightblue;*/
  /*animation: fadeIn 1s;*/
}

@keyframes fadeIn{
  0% {opacity:0;}
  100%: {opacity:1;}
}


/* MODAL PLAYER LOGIN FORM */
/* ----------------------- */
.login_disabled_div{
  margin:3vw auto;
  width:80%;
  text-align:center;
  font-size:1.3vw;
  border:1px solid #ddd;
  border-radius:1vw;
}
.player_login_table{
  margin:1vw auto;
  width:38vw;
  box-sizing:border-box;
  border:1px solid #000;
}
.player_login_label{
  text-align:right;
  padding:5px;
  width:5vw;
}
.player_login_data{
  text-align:left;
  padding:5px;
  width:33vw;
}
.player_login_buttons{
  text-align:center;
  padding:5px;
  font-size:1.1vw;
}
.player_login_submit{
  text-align:center;
  border:1px solid #000;
  height:2vw;
  font-size:1.2vw;
  padding:3px 5px;
  border-radius:1vw;
  width:16vw;
}
.player_login_submit:hover{
  background:#aaa;
}
.player_login_input{
  width:32vw;
  height:2.0vw;
  font-size:1.6vw;
  padding:2px 5px;
  cursor:default;
}
/* ----------------------- */