@charset "utf-8";
/* Reset CSS */
html,body,h1,h2,h3,h4,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-size:100%;vertical-align:baseline;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
article,header,footer,aside,figure,figcaption,nav,section{display:block;}
body{line-height:1;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
ol,ul{list-style:none;list-style-type:none;}

/* Common Set */
.tx_c { text-align: center !important; }
.tx_l { text-align: left !important; }
.tx_r { text-align: right !important; }
table { border-collapse: collapse; }

/* dashboard.jra.net */
:root {
  --main-bg-color: #484644;
  --main-tx-color: lightgray;
  --box-bg-color: #2b2b30;
  --area-under-color: #706f6e;
  --box2-bg-color: #363640;

  --hoge-001-color: #56e4d0;
  --hoge-002-color: #f55965;
  --hoge-003-color: #e7bf13;
  --hoge-004-color: #374347;
  --hoge-005-color: #fe9666;
  --hoge-006-color: #b577df;
  --hoge-007-color: #29b9ef;
  --hoge-008-color: #3599b8;
  --hoge-009-color: #92beff;
  --hoge-010-color: #dfbfbf;
  --hoge-line1-color: #706f6e;
  --hoge-line2-color: #606064;
}

html { width: 100%; height: 100%; background-color: var(--main-bg-color); }
body { width: 100%; height: 100%; background-color: var(--main-bg-color); color: var(--main-tx-color); }

header {
  width: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  font-size: 0;
  background-color: var(--box-bg-color);
  ul { display: block; }
  li {
    display: inline-block;
    background-color: var(--main-bg-color);
    min-width: 5em;
    margin: 1px;
    padding: 0 0.5em;
    text-align: center;
    line-height: 1.5;
    font-size: 16px;
    &:hover { color: black; background-color: lightcyan; }
  }
  a { color: var(--main-tx-color); }
}
section { height: calc(100% - 52px); padding: 26px 0; }
footer {
  width: 100%;
  position: fixed;
  z-index: 998;
  bottom: 0;
  text-align: center;
  background-color: var(--box-bg-color);
  line-height: 1.5;
  font-size: 16px;
}

.errormessage {
  display: none;
  border: 3px solid #d44;
  border-radius: 10px;
  background-color: #dbb;
  color: black;
  font-size: 16px;
  font-weight: bold;
  position: absolute; top: 3em; left: 50%; transform: translate(-50%, 0);
  z-index: 9999;
  padding: 0.5em 1em;
}

.successmessage {
  display: none;
  border: 3px solid #494;
  border-radius: 10px;
  background-color: #ddb;
  color: black;
  font-size: 16px;
  font-weight: bold;
  position: absolute; top: 3em; left: 50%; transform: translate(-50%, 0);
  z-index: 9998;
  padding: 0.5em 1em;
}

#login {
  width: 20em;
  height: 7em;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background-color: var(--box-bg-color);
  table {
    margin: 1.2em auto;
    tr { height: 1.5em; }
  }
  input.loginform {
    width: 10em;
    background-color: var(--main-bg-color);
    border-width: 0 0 1px 0;
    border-color: var(--area-under-color);
    margin-left: 0.5em;
    color: var(--main-tx-color);
    &:focus { outline: 0; }
  }
}

#top {
  .summary {
    display: inline-block;
    background-color: var(--box-bg-color);
    margin: 20px;
    padding: 8px;
    min-width: 300px;
    min-height: 200px;
    h3 {
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid var(--area-under-color);
      margin-bottom: 5px;
    }
    table { font-size: 16px; width: 100%; line-height: 20px; }
    th { text-align: left; }
    td { text-align: right; }
  }
}

#changepass {
  .passform {
    width: 20em;
    height: 8em;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background-color: var(--box-bg-color);
  }
  table {
    margin: 1.2em auto;
    tr { height: 1.5em; }
  }
  input.loginform {
    width: 10em;
    background-color: var(--main-bg-color);
    border-width: 0 0 1px 0;
    border-color: var(--area-under-color);
    margin-left: 0.5em;
    color: var(--main-tx-color);
    &:focus { outline: 0; }
  }
}

/* 個別コンテンツページ */
#contentsTitle {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid var(--main-tx-color);
  line-height: 2em;
  margin-bottom: 10px;
  padding-left: 1em;
}
#contentsMenu {
  flex-basis: 320px;
  .summary {
    display: inline-block;
    background-color: var(--box-bg-color);
    margin: 10px;
    padding: 8px;
    min-width: 300px;
    min-height: 150px;
    table { font-size: 16px; width: 100%; line-height: 20px; }
    th { text-align: left; }
    td { text-align: right; }
  }
  .command {
    display: inline-block;
    background-color: var(--box-bg-color);
    margin: 10px;
    padding: 8px;
    min-width: 300px;
    min-height: 80px;
    button {
      width: 100%;
      margin: 5px 0px;
      color: var(--main-tx-color);
      background-color: var(--main-bg-color);
      border: 0;
      border-radius: 5px;
      box-shadow: 1px 1px 1px black;
    }
  }
}
#loto6, #stock, #trusts { display: flex; }

#loto6 {
  #contentsMenu {
    .predictTable { table-layout: fixed; }
  }
  #loto6contents {
    flex-basis: auto;
    .result {
      display: inline-block;
      background-color: var(--box-bg-color);
      margin: 10px;
      padding: 8px;
      min-width: 300px;
      min-height: 100px;
      table { font-size: 16px; width: 100%; line-height: 20px; }
      th { text-align: left; }
      td { text-align: right; }
    }
  }
  #loto6Detailed {
    display: none;
    background-color: var(--main-bg-color);
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
  }
  #loto6DetailedData {
    display: none;
    min-width: 20em;
    min-height: 7em;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background-color: var(--box-bg-color);
    padding: 1em;
    opacity: 1;
    table { margin: auto; }
    td, th { border: 1px solid var(--main-tx-color); padding: 0.3em; }
  }
}

#stock {
  #stockContents{
    flex-basis: auto;
    .brand, .brandOld {
      display: inline-block;
      margin: 10px;
      padding: 8px;
      width: 300px;
      min-height: 100px;
      vertical-align: top;
      table { font-size: 16px; width: 100%; line-height: 20px; margin-top: 0.5em; }
      th { text-align: left; }
      td { text-align: right; }
    }
    .brand { background-color: var(--box-bg-color); }
    .brandOld { background-color: var(--box2-bg-color); }
    .purchase {
      margin: 10px;
      padding: 8px;
      min-height: 100px;
      max-height: 15em;
      overflow: scroll;
      table {
        font-size: 16px;
        line-height: 20px;
        margin-top: 0.5em;
        border: 1px solid var(--main-tx-color);
      }
      th { border: 1px solid var(--main-tx-color); text-align: center; }
      td { border: 1px solid var(--main-tx-color); text-align: right; padding: 0.1em 0.5em; }
      background-color: var(--box-bg-color);
    }
  }
}