html { height: 100% }
body { 
	background-color: #000;
	height: 100%; 
	margin: 0px; 
	padding: 0px 0px; 
	font-family:sans-serif;
}

#cur_table {
  background-color: black;
}
#best_table {
  background-color: black;
}
#map_contents {
  background-color: black;
}

@media (min-width: 768px) and (max-width: 1199.99px) {
    /* 横幅が768px -1199px以下の場合に適用するスタイル */
    #cur_table{
        /*background-color: yellow;*/
        width: 100%;
        overflow-x:hidden;
        overflow-y:scroll;
        /* スクロールバー非表示：IE, Edge 対応 */
        -ms-overflow-style: none;
        /* スクロールバー非表示：Firefox 対応 */
        scrollbar-width: none;
    }
    #best_table{
        width: 100%;
        overflow-x:hidden;
        overflow-y:scroll;
        /* スクロールバー非表示：IE, Edge 対応 */
        -ms-overflow-style: none;
        /* スクロールバー非表示：Firefox 対応 */
        scrollbar-width: none;
    }
    
    /* スクロールバー非表示：Chrome, Safari 対応 */
    #cur_table::-webkit-scrollbar {
        display:none;
    }
    /* スクロールバー非表示：Chrome, Safari 対応 */
    #best_table::-webkit-scrollbar {
        display:none;
    }    
    
    
    #map_canvas{
        width: 100%;
        height: 50%;
    }

    td {
        font-size: 24px;
    }

    td.CurTitle {
        font-size: 24px;
    }

    th.CurTitlePos {
        font-size: 20px;
    }

    th.CurTitleNo {
        font-size: 20px;
    }

    th.CurTitleName {
        font-size: 20px;
    }

    th.Cur {
        font-size: 20px;
    }

    th.CurName {
        font-size: 20px;
    }

    td.BestTitle {
        font-size: 24px;
    }

    th.Best {
        font-size: 20px;
    }

    th.BestName {
        font-size: 20px;
    }

    table {
        width: 100%;
    }    
    
}

@media (min-width: 1200px) {
    /* 横幅が1200px以上の場合に適用するスタイル */
    
    .flexbox {
        width: 100%;
        margin: 0 auto;
        display: -webkit-flex;
        display: flex;
    }
    
    .lap_contents,
    .map_contents {
        -webkit-flex: 1;
        flex: 1;
        background: none;
    }
    
    #cur_table{
        /*background-color: red;*/
        width: 100%;
        height: 100vh;
        overflow-x:hidden;
        overflow-y:scroll;
        /* スクロールバー非表示：IE, Edge 対応 */
        -ms-overflow-style: none;
        /* スクロールバー非表示：Firefox 対応 */
        scrollbar-width: none;
    }
    #best_table{
        width: 100%;
        height: 50vh;
        overflow-x:hidden;
        overflow-y:scroll;
        /* スクロールバー非表示：IE, Edge 対応 */
        -ms-overflow-style: none;
        /* Firefox 対応 */
        scrollbar-width: none;
    }
    
    /* スクロールバー非表示：Chrome, Safari 対応 */
    #cur_table::-webkit-scrollbar {
        display:none;
    }
    /* スクロールバー非表示：Chrome, Safari 対応 */
    #best_table::-webkit-scrollbar {
        display:none;
    }
    
    
    #map_canvas{
        width: 100%;
        height: 100%;
    }
    
    td {
        font-size: 24px;
    }

    td.CurTitle {
        font-size: 24px;
    }

    th.CurTitlePos {
        font-size: 20px;
    }

    th.CurTitleNo {
        font-size: 20px;
    }

    th.CurTitleName {
        font-size: 20px;
    }
    
    th.Cur {
        font-size: 20px;
    }

    th.CurName {
        font-size: 20px;
    }

    td.BestTitle {
        font-size: 24px;
    }

    th.Best {
        font-size: 20px;
    }

    th.BestName {
        font-size: 20px;
    }

    table {
        width: 100%;
    }    
}

@media (max-width: 767.99px) {
    /* 横幅が767px以下の場合に適用するスタイル */
    #cur_table{
        overflow:auto;
    }
    #best_table{
        overflow:auto;
    }
    
    /* スクロールバー非表示：Chrome, Safari 対応 */
    #best_table::-webkit-scrollbar {
        display:none;
    }
    
    #map_canvas{
        width: 100%;
    }
    
    td {
        height:26px;
        font-size: 1rem;
    }

    td.CurTitle {
        font-size: 1rem;
    }

    th.CurTitlePos {
        position: sticky;
        left: 0;
        font-size: 0.8rem;
    }

    th.CurTitleNo {
        position: sticky;
        left: 58px;
        font-size: 0.8rem;
    }

    th.CurTitleName {
        font-size: 0.8rem;
    }
    
    th.Cur {
        font-size: 0.8rem;
    }

    th.CurName {
        font-size: 0.8rem;
    }

    td.BestTitle {
        font-size: 1rem;
    }

    th.Best {
        font-size: 0.8rem;
    }

    th.BestName {
        font-size: 0.8rem;
    }

    td.CurBodyOddPos {
        position: sticky;
        left: 0;
    }
    
    td.CurBodyEvenPos {
        position: sticky;
        left: 0;
    }
    
    td.CurBodyOddNo {
        position: sticky;
        left: 58px;
    }
    
    td.CurBodyEvenNo {
        position: sticky;
        left: 58px;
    }
    
    td.CurBodyRotateNo {
        position: sticky;
        left: 58px;
    }

    table {
        margin: auto;
        width: 700px;
    }
}

@keyframes frameNewRecord {
  from {
    color: #ffffff;
  }
  to {
    color: #00ff00;
  }
}

td {
    margin-top: 6px;
    margin-bottom: 6px;
    text-align: center;

    border-top:0px;
    border-left:0px;
    border-right:3px solid #000000;
    border-bottom:0px;

}

table {
    border-spacing:0px;
}

#LT_CurHeader{
    /* 縦スクロール時に固定する */
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    left: 0;
    z-index: 1;
}

tr.CurEven {
    background-color: #353535;
    color: #ffffff;
}


tr.CurOdd {
    background-color: #141414;
    color: #ffffff;
}

tr.RotateCurEven {
    animation:rotate_anime 0.5s;
    background-color: #353535;
    color: #ffffff;
}

tr.RotateCurOdd {
    animation:rotate_anime 0.5s;
    background-color: #141414;
    color: #ffffff;
}

tr.BestEven {
    background-color: #353535;
    color: #ffffff;
}

tr.BestOdd {
    background-color: #141414;
    color: #ffffff;
}


tr.RecordEven {
    animation: frameNewRecord 0.2s ease-in 0s infinite alternate both;
    background-color: #353535;
}

tr.RecordOdd {
    animation: frameNewRecord 0.2s ease-in 0s infinite alternate both;
    background-color: #141414;
}


@keyframes rotate_anime {
    0% {
        transform:rotateX(0deg);/* アニメーションの進みが0%の時の状態 */
    }
    100% {
        transform:rotateX(180deg);/* アニメーションの進みが100%の時の状態 */
    }
}

table.Cur {
    border: 1px solid #ff0000;
}


table.Best {
    border: 1px solid #808080;
}

td.CurTitle {
    background-image: url(./img/titlebg_cur.png);
    background-repeat: no-repeat repeat;
    background-position: center center;
    background-size: contain;  
    color: #ff0000;

}

th.Cur {
    background-color: #ff0000;
    color: #ffffff;
    border-right:3px solid #000000;

}

th.CurTitlePos {
    background-color: #ff0000;
    color: #ffffff;
    border-right:3px solid #000000;
}

th.CurTitleNo {
    background-color: #ff0000;
    color: #ffffff;
    border-right:3px solid #000000;
}

th.CurTitleName {
    background-color: #ff0000;
    color: #ffffff;
    border-right:3px solid #000000;
}

th.CurName {
    background-color: #ff0000;
    color: #ffffff;
    border-right:3px solid #000000;

}

td.CurBodyOdd {
    background-color: #141414;
}

td.CurBodyEven {
    background-color: #353535;
}

td.CurBodyOddPos {
    background-color: #141414;
}

td.CurBodyEvenPos {
    background-color: #353535;
}

td.CurBodyOddPos {
    background-color: #141414;
}

td.CurBodyEvenPos {
    background-color: #353535;
}

td.CurBodyOddNo {
    background-color: #141414;
    color: #FFFFFF;
}

td.CurBodyEvenNo {
    background-color: #353535;
    color: #FFFFFF;
}

td.CurBodyRotateNo {
    color: #242424;
}


td.CurBodyOddName {
    /*color: #ff0000;*/
    color: #ffffff;
    text-align: left;	/*2018.09.05 Add Sakata*/
    padding-left:15px;	/*2018.09.05 Add Sakata*/
    border-right:3px solid #000000;
}

td.CurBodyEvenName {
    /*color: #ff0000;*/
    color: #ffffff;
    text-align: left;	/*2018.09.05 Add Sakata*/
    padding-left:15px;	/*2018.09.05 Add Sakata*/
    border-right:3px solid #000000;
}

td.CurBodyOddPitIn {
    color: #00ccff;
}

td.CurBodyEvenPitIn {
    color: #00ccff;
}

td.CurBodyOddPitOut {
    color: #242424;
}

td.CurBodyEvenPitOut {
    color: #242424;
}

td.CurNowLapTimeOdd {
    color: #ffffff;
    background-color: #141414;
}

td.CurAllBestLapTimeOdd {
    color: #FF0000;
    background-color: #141414;
}

td.CurBestLapTimeOdd {
    color: #FFFF00;
    background-color: #141414;
}

td.CurLastLapTimeOdd {
    color: #808080;
    background-color: #141414;
}

td.CurNowLapTimeEven {
    color: #ffffff;
    background-color: #353535;
}

td.CurAllBestLapTimeEven {
    color: #FF0000;
    background-color: #353535;
}

td.CurBestLapTimeEven {
    color: #FFFF00;
    background-color: #353535;
}

td.CurLastLapTimeEven {
    color: #808080;
    background-color: #353535;
}

td.BestTitle {
    background-image: url(./img/titlebg_best.png);
    background-repeat: no-repeat repeat;
    background-position: center center;
    background-size: contain;  
    color: #000000;

}

th.Best {
    background-color: #808080;
    color: #ffffff;
    border-right:3px solid #000000;

}

th.BestName {
    background-color: #808080;
    color: #ffffff;
    border-right:3px dotted #000000;

}

td.BestBodyOdd {
}

td.BestBodyEven {
}

td.BestBodyOddRank {
}

td.BestBodyEvenRank {
}

td.BestBodyOddName {
    /*color: #ff0000;*/
    color: #ffffff;
    text-align: left;	/*2018.09.05 Add Sakata*/
    padding-left:15px;	/*2018.09.05 Add Sakata*/
    border-right:3px dotted #000000;
}

td.BestBodyEvenName {
    /*color: #ff0000;*/
    color: #ffffff;
    text-align: left;	/*2018.09.05 Add Sakata*/
    padding-left:15px;	/*2018.09.05 Add Sakata*/
    border-right:3px dotted #000000;
}

td.BestBodyOddNameRecord {
    /*color: #ff0000;*/
    color: #ffffff;
    border-right:3px dotted #000000;
    text-align: left;	/*2018.09.05 Add Sakata*/
    padding-left:15px;	/*2018.09.05 Add Sakata*/
    animation: frameNewRecord 0.2s ease-in 0s infinite alternate both;
}

td.BestBodyEvenNameRecord {
    /*color: #ff0000;*/
    color: #ffffff;
    border-right:3px dotted #000000;
    text-align: left;	/*2018.09.05 Add Sakata*/
    padding-left:15px;	/*2018.09.05 Add Sakata*/
    animation: frameNewRecord 0.2s ease-in 0s infinite alternate both;
}