/* General */

:root {
    --button-height: 46px;
    --button-radius: 23px; /* button-height / 2 */
    --general-small-font-size: 0.8rem;
    --title-font-size: 1.0rem;
    --form-font-size: 0.8rem;
    --button-side-padding: 20px;
    --text-color: #3A332C;
    --background-color: #F1EDE7; /*#D9D3CB;*/
    --func-background-color: #4A6FA5;/*#221188;*/
    --func-foreground-color: white;
    --input-background-color: #F1EDE7; /*#D9D3CB;*/ /*#eeeeff;*/
    --input-border-color: #4A6FA5; /*#444444;*/
    --config-color: #4A6FA5; /*#444444;*/
    --card-index-font-size: 2.0rem;
    --card-view-accordion-background-color: #4A6FA5; /*#ddefff;*/
    --card-view-accordion-contents-font-size: 0.8rem;
    --status-font-color: red;
    --list-border-color: #4A6FA5; /*#aaaaaa;*/
    --card-view-longletter-font-size: 0.8rem;
    --h1-font-size: 2.5rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.0rem;
}

html {
    /*    min-height: 100%; */
    height: 100%;
    font-size: 18px;
}

body {
    background-color: var(--background-color);
    font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
    max-width: 600px;
    height:100%;
    margin: 0 auto;
/*    padding-top: 72px; */
    -webkit-font-smoothing: antialiased;
    color: var(--text-color);
    line-height: 1.5em;
}

footer {
    margin-top: auto;
    margin-bottom: 15px;
    text-align: bottom;
    font-size: 0.6rem;
}

div#app {
    height: 100%;
}

h1, h2, h3 {
    margin: 15px;
}
h1 {
    font-size: var(--h1-font-size);
    line-height: 1.2;
}

h2 {
    font-size: var(--h2-font-size);
    line-height: 1.2;
}

h3 {
    font-size: var(--h3-font-size)
    line-height: 1.2;
}

h3.status {
    color: var(--status-font-color);
}

a {
    text-decoration: none;
    color: #09f;
}

a:hover {
    text-decoration: underline;
}

header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

img.icon {
    width: 16px;
    height: auto;
}

div.ver-center {
    display: flex;
    align-items: center;
}

/* general forms */

button {
    height: var(--button-height);
    margin: 10px;
    padding: 0 var(--button-side-padding);
    font-size: var(--form-font-size);
    text-align: center;
}

button.posi {
    border: none;
    border-radius: var(--button-radius);
    background-color: var(--func-background-color);
    color: var(--func-foreground-color);
}

button.nega {
    border-radius: var(--button-radius);
    border: solid 1px var(--func-background-color);
    color: var(--func-background-color);
    background-color: var(--input-background-color);
}

button.support-explain {
    color: var(--func-background-color);
}


input {
    min-height: var(--button-height);
    text-align: center;
    font-size: var(--form-font-size);
    color: var(--text-color);
}

input[type="radio"] {
    display: none;
}

.selector, select {
    min-height: var(--button-height);
    margin: 10px;
    padding: 0 20px;
    font-size: var(--form-font-size);
    color: var(--text-color);
    border: solid 1px var(--func-background-color);
    border-radius: 6px;
    background-color: var(--input-background-color);
}

input[type="radio"]:checked + label {
    background-color: var(--func-background-color);
    color: white;
}

div.radiobox {
    display: inline;
}

label {
    display: inline flex;
    align-items: center;
    margin: auto 20px;
    font-size: var(--form-font-size);
}

button.header-go-to-index-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.5rem;
    color: var(--config-color);
}

/* checkbox switch */

label.switch {
    margin: 20px 10px;
}

/* === ボタンを表示するエリア ============================== */
.switchArea {
  line-height    : var(--button-height);      /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  font-size      : 27px;                /* 文字サイズ         */

  position       : relative;            /* 親要素が基点       */
  margin         : auto 15px;                /* 中央寄せ           */
  width          : 46px;               /* ボタンの横幅       */
/*  background     : var(--input-background-color);      /* デフォルト背景色   */
  padding        : 0;
}

 /* === チェックボックス ==================================== */
.switchArea input[type="checkbox"] {
  display        : none;            /* チェックボックス非表示 */
}

 /* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 20px;                /* ボタンの高さ       */
  border         : 1px solid var(--func-background-color);   /* 未選択タブの枠線 */
  border-radius  : 10px;    /* 角丸               */
  margin         : auto;
}

 /* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked +label {
  border-color   : var(--func-background-color);    /* 選択タブの枠線     */
}

 /* === 表示する文字（標準） ================================ */
.switchArea label span:after{
/*  content        : "OFF";               /* 表示する文字       */
  padding        : 0 0 0 36px;          /* 表示する位置       */
  color          : #999999;             /* 文字色             */
}

 /* === 表示する文字（ONのとき） ============================ */
.switchArea  input[type="checkbox"]:checked + label span:after{
/*  content        : "ON";                /* 表示する文字       */
  padding        : 0 36px 0 0;          /* 表示する位置       */
  color          : #78bd78;             /* 文字色             */
}

 /* === 丸部分のSTYLE（標準） =============================== */
.switchArea #swImg {
  position       : absolute;            /* 親要素からの相対位置*/
  width          : 16px;                /* 丸の横幅           */
  height         : 16px;                /* 丸の高さ           */
  background     : #999999;             /* カーソルタブの背景 */
  top            : 2px;                 /* 親要素からの位置   */
  left           : 2px;                 /* 親要素からの位置   */
  border-radius  : 8px;                /* 角丸               */
  transition     : .2s;                 /* 滑らか変化         */
}

 /* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ #swImg {
  transform      : translateX(26px);    /* 丸も右へ移動       */
  background     : var(--func-background-color);             /* カーソルタブの背景 */
}

/* index */

div.index {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

div.index-title {
    width: 100%;
    display: flex;
    margin-bottom: 30px;
    flex-direction: column;
    align-items: center;
}

div.index-title h1 {
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: 2rem;
}

div.index-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-contents: space-between;
}

button.index-button-posi {
    min-width: 60%;
    border: none;
    border-radius: 23px;
    background-color: var(--func-background-color);
    color: var(--func-foreground-color);
}

button.index-button-nega {
    min-width: 60%;
    border-radius: 23px;
    border: solid 1px var(--func-background-color);
    color: var(--func-background-color);
    background-color: var(--input-background-color);
}


/* dict-choose */

div.dict-choose {
    width: 100%;
    display: flex;
    flex-direction: column;
}

div.dict-choose-go-to-buttons {
    width: 100%;
    margin-top: auto;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-contents: space-between;
}

/* card-view */

div.card-view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.card-view-card-area {
    width: 100%;
    flex: 1;
    margin-bottom: auto;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.card-view-card {
    width: 70%;
    display: flex;
    flex-direction: column;
    margin: 20px;
    border-radius: 6px;
    border: none /*solid var(--text-color);*/;
    box-shadow: 0 0 4px;
}

div.card-view-card h3 {
    margin-bottom: 30px;
}

h3.short-letter {
    font-size: var(--card-index-font-size);
}

h3.long-letter {
    font-size: var(--card-view-longleter-font-size);
}

div.card-view-card label {
    padding: 0;
    margin-top: 3px;
    margin-bottom: 1px;
    font-size: var(--form-font-size);
}  

div.card-view-accordion {
    width: 70%;
}

div.card-view-buttons {
    display: flex;
    flex-direction: column;
}

div.card-view-evaluate-buttons {
    margin-top: auto;
/*    padding: 50px; */
    display: flex;
    justify-content: space-between;
}

div.card-view-evaluate-buttons .left {
    border-radius: var(--button-radius) 0 0 var(--button-radius);
    margin-right: 0;
}

div.card-view-evaluate-buttons .right {
    border-radius: 0 var(--button-radius) var(--button-radius) 0;
    margin-left: 0;
}

div.card-view-evaluate-buttons .center {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
}

div.card-view-finish-button {
    display: flex;
    justify-content: center;
}

summary.accordion-title {
 /*   height: var(--button-height); */
    background-color: var(--card-view-accordion-background-color);
    color: var(--func-foreground-color);
    display: flex;
    align-items: center;
    padding: 0 10px;
    transition: 0.2s;
}

summary::-webkit-details-marker {
    display: none;
}

div.accordion-contents {
    border: solid 1px var(--card-view-accordion-background-color);
    font-size: var(--card-view-accordion-contents-font-size);
}

/* edit-dict-choose */

div.edit-dict-choose {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.edit-dict-title {
    width: 100%;
}

ul.edit-dict-list {
    width: 100%;
    height: 60%;
    overflow-y: scroll;

}

ul.edit-dict-list li {
    display: flex;
    justify-content: space-between;
    margin: 5px;
    border-bottom: solid 1px var(--list-border-color);
}

ul.edit-dict-list button {
    margin: 5px;
}

button.edit-dict-move {
    flex: 1;
    text-align: left;
}

div.edit-dict-go-to-buttons {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding: 30px;
}

input[type="file"] {
    display: none;
}

div.upload-csv {
    display: flex;
    flex-direction: column;
}

.form-button {
    display: inline-block;
    height: var(--button-height);
    text-align: center;
    align-content: center;
    padding: 0px var(--button-side-padding);
    background-color: var(--input-background-color);
    border: solid 1px var(--input-border-color);
    color: var(--input-border-color);
    border-radius: 23px;
    margin: 5px auto;
}


/* edit-dict */

div.edit-dict {
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

div.edit-dict-dict-table {
    width: 100%;
    max-height: 50vh;
    overflow: scroll;
    margin-bottom: 30px;
}

div.edit-dict-dict-table table {
    width: 100%;
/*    table-layout: fixed; */
}

div.edit-dict-dict-table tr {
}

div.edit-dict-dict-table th {
    padding: 0 10px;
    font-size: var(--general-small-font-size);
    width: 1%;
    white-space: nowrap;
}

div.edit-dict-dict-table th.index {
    width: auto;
}

div.edit-dict-dict-table td {
    padding: 0 10px;
    width: 1%;
}

div.edit-dict-dict-table td.index {
    text-align: left;
    width: auto;
    white-space: normal;
    word-break: break-word;
}

div.edit-dict-dict-table td.status {
    text-align: center;
}

button.edit-dict-word-button {
    height: auto;
    margin: 3px;
    padding: 0;
    color: var(--func-background-color);
    text-align: left;
}

button.big-font {
    font-size: var(--h2-font-size);
}

div.edit-dict-new-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.edit-dict-input {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

label.edit-dict-input-label {
    display: flex;
    justify-content: space-between;
    height: auto;
    width: 95%;
    margin: 10px 0px;
}

label.edit-dict-input-label div.label {
    max-width: 25%;
    word-wrap: break-word;
}

input.edit-dict-input-word {
    width: 75%;
    min-height: var(--button-height);
    background-color: var(--input-background-color);
    font-size: 18px;
    transform: scale(0.8);
    transform-origin: left;
    text-align: left;
    border: none;
    border-bottom: solid 1px var(--list-border-color);
}

div.edit-card-buttons {
    margin: 30px;
    display: flex;
    justify-content: center;
}

/* study log */

div.study-log {
}

div.study-log-chart {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: stretch;
}

div.study-log-chart-chart {
    max-width: 70%;
}

button.study-log-chart-move {
    flex: 1;
    line-height: normal;
    height: 100px;
    margin: auto;
    padding: 0;
    align-self: stretch;
}

div.study-log-dicts-status-area {
    display: flex;
    flex-direction: column;
}

table.study-log-dicts-status {
    margin: 5 auto;
}

table.study-log-dicts-status th {
}

table.study-log-dicts-status td {
    text-align: center;
}


/* backup setting */
div.backup {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.backup-explanation {
    width: 90%;
    font-size: var(--general-small-font-size);
    margin: 30px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    border: none /*solid var(--text-color);*/;
    box-shadow: 0 0 4px;
    overflow-y: scroll;
}

div.backup-buttons {
    margin: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.backup-code {
    width: 100%;
}

div.backup-code-form {
    width: 100%;
    margin: 20px 0;
    padding: 0 20px;
    display: flex;
    justify-content: space-evenly;
}

input.backup-code-input {
    width: 50%;
    border-bottom: solid 1px var(--list-border-color);
    font-size: 18px;
}