/* primary */
footer,
header,
a.navigation.opened {
  background-color: #37474F;
  color: #FFFFFF;
}

/* secondary */
#csvform,
#last_update,
a.navigation:hover,
body,
td._musicname,
th {
  background-color: #607D8B;
  color: #FFF;
}

a.navigation,
a.navigation:active,
a.navigation:focus {
  border-bottom: 3px solid #607D8B;
}

/* normal */
.select_difficult,
.select_mode,
.select_play_style {
  background-color: #80949E;
  color: #fff;
}

/* light-primary */
.tab,
a.navigation,
a.navigation:active,
a.navigation:focus {
  background-color: #DFE8EC;
  color: #212121;
}

/* table-normal */
.paging,
table tbody tr td {
  color: #212121;
  background-color: #faffFf;
}

/* accent */
#notify_update a,
button.checked,
form input[type="button"]#csvbutton {
  color: #fff;
  background-color: #404F9F;
  border: 1px solid #BDBDBD;
}

.select_difficult,
.select_mode,
.select_play_style {
  border-width: 0 1px 1px 0;
  border-color: #777;
}

/* ===== */

h1,
h2,
p {
  margin: 0;
}

ul {
  padding-left: 2em;
}

li {
  line-height: 1.5em;
  margin-bottom: .25em;
}

form:after {
  clear: both;
  content: "";
  display: block;
}

#formlabel {
  margin-bottom: .25em;
  font-weight: bold;
}

#csvform p a {
  color: white;
  border-bottom: 1px solid #fff;
  text-decoration: none;
  padding-bottom: .2em;
  padding-right: 1em;
  background: url('./images/newwindow.png');
  background-size: .75em;
  background-position: 100% 50%;
  background-repeat: no-repeat;
}

#ghostcsvform {
  margin: 1em;
}

form textarea#csv {
  display: block;
  width: 70%;
  height: 4vh;
  max-width: 20em;
  border: 1px #BDBDBD solid;
  float: left;
  font-size: .2em;
  border-radius: 2px;
  margin-right: .5em;
}

form input[type="button"]#csvbutton {
  display: block;
  float: left;
  margin: 0;
  padding: 0 2em;
  height: 5vh;
  text-align: center;
  white-space: nowrap;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-size: 90%;
}

h1 {
  font-size: 1.3em;
  margin: 0 .5em;
}

h1 a {
  color: #fff;
}

h2 {
  font-size: 1em;
  padding: .25em .25em .25em .5em;
  border-left: solid 5px #9e9e9e;
  border-bottom: solid 1px #9e9e9e;
}

h3 {
  font-size: .95em;
  display: inline;
  border-bottom: solid 1px #9e9e9e;
}

header {
  width: 100%;
  margin: 0;
  padding: .5em 0;
}

#notify_update {
  position: fixed;
  bottom: .5em;
  right: .5em;
}

#notify_update a {
  display: block;
  padding: .5em 1em;
  text-decoration: underline;
  z-index: 2;
}

#last_update {
  width: calc(100%-1em);
  padding-right: 1em;
  margin: 0;
  text-align: right;
}

#csvform {
  padding: .5em .5em 1em 1em;
  margin: 0;
}

#header_title {
  display: inline;
}

#error_message {
  clear: both;
  color: #fff;
  margin-left: .5em;
  line-height: 2em;
}

a.navigation,
a.navigation:active,
a.navigation:focus {
  width: 20%;
  line-height: 2.5em;
  text-align: center;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  transition: all .2s ease;
}

a.navigation:hover {
  transition: all .2s ease;
}

footer {
  clear: both;
  width: 100%;
  line-height: 2em;
  margin: 0;
  text-align: center;
}

#bodycontents {
  padding: 0;
  clear: both;
}

#tabcontents {
  clear: both;
}

.tab {
  padding: .5em;
  border: 1px solid #BDBDBD;
  display: none;
}

.showtab {
  display: block;
}

.wrapper {
  max-width: 35em;
  width: 100%;
  padding-bottom: .5em;
  margin: .5em 0;
  border-bottom: 1px solid #BDBDBD;
}

#radarwrapper,
.wrapper {
  border: 1px solid #bdbdbd;
  background-color: #fff;
  padding-right: .5em;
  margin-left: .5em;
}

#radar {
  overflow: hidden;
}

#radarwrapper {
  max-width: 50em;
  margin-bottom: 1em;
}

#radartargetdp,
#radartargetsp {
  padding: 1em;
  margin-right: 1em;
}

.select_mode_area {
  margin: 0 0 -0.01em;
  padding: .25em .5em;
  border: 1px dashed #BDBDBD;
}

#detail_area {
  margin: 0;
  padding: .5em;
  border: 1px dashed #BDBDBD;
  /* display: none; */
}

.select_difficult,
.select_mode,
.select_play_style {
  display: inline;
  cursor: pointer;
  user-select: none;
  text-align: center;
  outline: 0;
}

.select_mode {
  border-radius: 3px;
  padding: .5em 0;
  margin: .2em .05em;
  width: 6em;
  line-height: 1.3em;
  font-size: .8em;
}

.select_difficult {
  border-radius: 3px;
  padding: .4em 0;
  margin: .2em .05em;
  width: 3.5em;
  line-height: 1.2em;
  font-size: .8em;
}

.select_play_style {
  padding: .3em;
  border-radius: 5px;
  width: 3em;
  font-size: 1.1em;
}

.pad {
  padding: .5em 0;
}

.paging {
  margin-right: .1em;
  padding: .5em .9em;
  border: 1px #bdbdbd solid;
  border-radius: 3px;
}

.paging.empty {
  margin: 0;
  border: none;
  padding: .5em .3em;
  background-color: transparent;
}

p.margin {
  margin: 1em;
}

#music_count {
  font-size: .8em;
  text-align: right;
  margin-bottom: -0.5em;
}

#table_area {
  padding: 0;
}

table {
  line-height: 1.2em;
  border-collapse: collapse;
}

table.data_table tbody tr td,
table.data_table thead tr th {
  min-width: 2em;
}

table.data_table tbody tr td._musicname {
  min-width: 20em;
}

td._musicname a {
  color: #fff;
  border-color: #bdbdbd;
  text-decoration: none;
}

td._clearimage,
td._scoreimage {
  padding-left: .15em;
  min-width: 4em;
  max-width: 4em;
  text-align: center;
}

img.clear_image,
img.score_image {
  min-width: 4.3em;
  max-width: 4.3em;
}

table thead tr th {
  padding: .3em 1.3em .3em .3em;
  border: 1px solid #BDBDBD;
  text-align: left;
  vertical-align: top;
}

table thead tr th {
  background-size: .7em;
  background-image: url("images/sort/bg.png");
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
}

table thead tr th.asc {
  background-image: url("images/sort/asc.png");
}

table thead tr th.desc {
  background-image: url("images/sort/desc.png");
}

td._bpi,
td._difficult,
td._djpoint,
td._kaiden,
td._misscount,
td._notes,
td._playcount,
td._score,
td._top {
  text-align: right;
}

table tbody tr td {
  padding: .3em;
  border: 1px solid #9e9e9e;
}

#bpitable {
  display: table;
}

#bpitable_mobile {
  display: none;
}
@media screen and (max-width: 560px) {
  a.navigation {
    font-size: .75em;
  }

  #bpitable {
    display: none;
  }

  #bpitable_mobile {
    display: table;
  }

  #bpitable_mobile tbody tr {
    margin-bottom: 1em;
  }

  #bpitable_mobile thead tr th:first-child,
  td._updated {
    max-width: 1em;
  }

  tr.empty {
    border: 0;
    line-height: .35em;
  }

  #radarwrapper {
    margin-left: -27.5vw;
    width: 150vw;
  }

  .wrapper {
    max-width: 50em;
    width: 85vw;
    margin-bottom: 1em;
    text-align: left;
  }

  #bodycontents {
    padding: 0;
  }
}