:root {
    --sp-theme-attention-color: darkorange;
    --sp-theme-purple-color: #714ee5;
    --sp-theme-cyan-color: #4bc6fc;
    --sp-theme-palecyan-color: #ccffff;
}

.logo-color-cyan {
    color: var(--sp-theme-cyan-color);
}

.logo-color-purple {
    color: var(--sp-theme-purple-color);
}

.warning {
    color: var(--sp-theme-attention-color);
    margin: 0 0 0.5em 0;
}

/* TODO:点滅機能を実装し、1画面では1か所しか点滅しないようにUIを作成して次に何をすればよいかわかりやすくする */
.suggest {
    color: var(--sp-theme-purple-color);
    margin: 0 0 0.5em 0;
}

.explanation {
    font-size:smaller;
}

.dropdownSelect {
    margin: 1em 0;
}

.dropdownSelect > span {
    white-space: nowrap;
    margin-right: 3em;
    line-height: 2.5em;
    display: inline-block;
}

select.qp.column-select {
    display: inline;
    width: 5em;
    height: 2em;
}

table.qp.csv-layout {
    display: block;
    width: 100%;
    overflow: scroll;
}

table.qp.plan-layout {
    display: block;
    width: 100%;
    overflow: scroll;
}

/* main.css の効果削除*/
#main table.qp tbody tr:nth-child(2n + 1) {
    background-color: rgba(255, 255, 255, 0);
}

/* main.css の効果削除*/
#main table.qp th {
    font-size: 1em;
    text-align: center;
    white-space: nowrap;
    padding: 0.5em;
}

table.qp.plan-layout thead tr {
    background-color: rgb(242, 242, 242);
}

table.qp.plan-layout .title {
    background-color: rgb(242, 242, 242);
    text-align: left;
    white-space: nowrap;
    position: sticky;
    left: 0;
}

table.qp.plan-layout .proc-num {
    color: deeppink;
}

table.qp td {
    padding: 0.2em 0.5em;
}

table.qp td.num_value {
    text-align: right;
}

/* ------------- ツールチップ関連 はじまり ------------- */

.tooltip-content {
    position: relative;
    left: -3px;
    top: -3px;
    background-color: #eee;
    border: 1px black solid;
    padding: 3px;
    font-size: 12px;
    color: #000;
}

.tooltip-shadow {
    position: absolute;
    background-color: #333;
}

/* ------------- ツールチップ関連 おわり ------------- */

/* main.css の効果削除*/
#main select.qp.item-select {
    padding-right: 1em;
    min-height: 13em;
    background-color: rgb(255,255,255);
}

/* ------------- 横向き矢印 開始 ------------- */
.arrow {
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}

.arrow::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    left: 0px;
    box-sizing: border-box;
    width: 10px;
    height: 3px;
    border: 3px solid transparent;
    border-left: 10px solid #eee;
}

.annotation {
    width: 80%;
    border: 1px solid var(--sp-theme-cyan-color);
    border-image: linear-gradient(to right, var(--sp-theme-cyan-color) 0%, var(--sp-theme-purple-color) 100%);
    border-image-slice: 1;
    padding: 0.5em 1em 0.5em 1em;
    border-top-left-radius: 1em;
    border-bottom-right-radius: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

.annotation ul {
    text-align: left;
    margin-bottom: 0;
}

.annotation ul ul {
    font-size: smaller;
    list-style-type: circle
}


.annotation img {
    max-width: 100%;
}

.annotation a {
    cursor: pointer;
}
/* ------------- 横向き矢印 終了 ------------- */

/* ------------- 処理のステップ表示 開始 ------------- */
/* 現状、スクロール後にステップが次に移ってしまう（１をクリックしたのにスクロール後ステップ表示が2に移動してしまう ため封印 */
#step li {
    margin: 1em;
}

#step .arrow::after {
    width: 16px;
    height: 8px;
    border: 8px solid transparent;
    border-left: 16px solid #fff;
}
/* ------------- 処理のステップ表示 終了 ------------- */

/* input type="number"のスピンボタンを非表示に */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}