/* 通常テーマ */

:root {
    --color-background: #ffffff;
    --color-background-alpha: #8585851e;
    --color-main-text: #3a3a3a;
    --img-background-body: url("/Automate/img/white.png");
    /* premium　と　無料版 */
    --color-non-premium: rgb(0, 175, 122);
    --color-non-premium-background: rgb(0, 170, 119);
    --color-premium: rgb(223, 165, 29);
    --color-premium-background: rgb(212, 141, 28);
    /* Top Navigator */
    --color-top-nav-background: rgb(255, 255, 255);
    --color-top-nav-selectlist-background: rgb(255, 255, 255);
    /* N Tag */
    --color-a-text: rgb(71, 89, 255);
    --color-a-link-text: rgb(71, 89, 255);
    --color-a-visited-text: rgb(1, 179, 75);
    /* カテゴリー別配色 */
    --color-category-flow-background: rgb(255, 223, 190);
    --color-category-flow-background-left: rgb(255, 189, 48);
    --color-category-function-background: rgb(200, 229, 255);
    --color-category-function-background-left: rgb(0, 174, 255);
    --color-category-variable-background: rgb(204, 255, 211);
    --color-category-variable-background-left: rgb(9, 255, 0);
    --color-category-interface-background: rgb(255, 216, 249);
    --color-category-interface-background-left: rgb(221, 118, 255);
    --color-category-community-background: rgb(255, 231, 208);
    --color-category-community-background-left: rgb(255, 151, 81);
    --color-category-update-background: rgb(228, 230, 255);
    --color-category-update-background-left: rgb(172, 109, 224);
    --color-category-bug-background: rgb(255, 225, 221);
    --color-category-bug-background-left: rgb(255, 110, 158);
    --color-category-blog-background: rgb(221, 255, 233);
    --color-category-blog-background-left: rgb(139, 255, 123);
    --color-category-word-background: rgb(254, 255, 208);
    --color-category-word-background-left: rgb(251, 255, 0);
    --color-category-help-background: rgb(231, 241, 255);
    --color-category-help-background-left: rgb(152, 189, 250);
    --color-category-uncategorized-background: rgb(228, 228, 228);
    --color-category-uncategorized-background-left: rgb(117, 117, 117);
    /* Automate　ホームの"カテゴリにじゃんぷする","サイト内を検索する" */
    --color-button-grey-background: rgba(182, 182, 182, 0.253);
    --color-button-green-background: rgb(216, 255, 216);
    /* Colors / カラー */
    --color-red-text: rgb(192, 0, 0);
    --color-orange-text: rgb(236, 153, 0);
    --color-yellow-text: rgb(180, 180, 0);
    --color-lightgreen-text: rgb(0, 170, 0);
    --color-green-text: rgb(0, 93, 0);
    --color-royalblue-text: rgb(45, 73, 160);
    --color-violet-text: rgb(207, 48, 207);
    --color-grey-text: rgb(124, 124, 124);
    /* それぞれのタイプ用　カラー */
    --color-null-text: #b62929;
    --color-number-text: #ff0000;
    --color-text-text: #ddb609;
    --color-array-text: #57a805;
    --color-dictionary-text: #337aff;
}


/* ダークテーマ */

[data-mode='dark'] {
    --color-background: #262626;
    --color-background-alpha: #0000003d;
    --color-main-text: #dbdbdb;
    --img-background-body: url("/Automate/img/dark.png");
    /* premium　と　無料版 */
    --color-non-premium: rgb(198, 255, 238);
    --color-non-premium-background: rgb(198, 255, 238);
    --color-premium: rgb(250, 241, 114);
    --color-premium-background: rgb(250, 241, 114);
    /* Top Navigator */
    --color-top-nav-background: rgb(42, 42, 44);
    --color-top-nav-selectlist-background: rgb(42, 42, 44);
    /* N Tag */
    --color-a-text: rgb(147, 158, 255);
    --color-a-link-text: rgb(147, 158, 255);
    --color-a-visited-text: #3f0;
    /* カテゴリー別配色 */
    --color-category-flow-background: rgb(58, 42, 9);
    --color-category-flow-background-left: rgb(255, 176, 6);
    --color-category-function-background: rgb(10, 40, 68);
    --color-category-function-background-left: rgb(0, 174, 255);
    --color-category-variable-background: rgb(4, 65, 12);
    --color-category-variable-background-left: rgb(9, 255, 0);
    --color-category-interface-background: rgb(63, 8, 55);
    --color-category-interface-background-left: rgb(221, 118, 255);
    --color-category-community-background: rgb(66, 40, 16);
    --color-category-community-background-left: rgb(255, 151, 81);
    --color-category-update-background: rgb(19, 21, 51);
    --color-category-update-background-left: rgb(172, 109, 224);
    --color-category-bug-background: rgb(73, 20, 13);
    --color-category-bug-background-left: rgb(255, 110, 158);
    --color-category-blog-background: rgb(21, 47, 23);
    --color-category-blog-background-left: rgb(139, 255, 123);
    --color-category-word-background: rgb(65, 66, 8);
    --color-category-word-background-left: rgb(251, 255, 0);
    --color-category-help-background: rgb(66, 66, 66);
    --color-category-help-background-left: rgb(255, 255, 255);
    --color-category-uncategorized-background: rgb(37, 37, 37);
    --color-category-uncategorized-background-left: rgb(156, 156, 156);
    /* Automate　ホームの"カテゴリにじゃんぷする","サイト内を検索する" */
    --color-button-grey-background: rgb(61, 61, 61);
    --color-button-green-background: rgb(0, 61, 0);
    /* Colors / カラー */
    --color-red-text: red;
    --color-orange-text: orange;
    --color-yellow-text: yellow;
    --color-lightgreen-text: rgb(173, 238, 167);
    --color-green-text: rgb(0, 209, 0);
    --color-royalblue-text: royalblue;
    --color-violet-text: violet;
    --color-grey-text: grey;
    /* それぞれのタイプ用　カラー */
    --color-null-text: #cc3333;
    --color-number-text: #ff0000;
    --color-text-text: #ffcc33;
    --color-array-text: #99ff33;
    --color-dictionary-text: #33ffff;
}


/* <body> topNavigator */

.top-nav-background {
    background-color: var(--color-top-nav-background);
}

.top-nav-selectlist-background {
    background-color: var(--color-top-nav-selectlist-background);
}

.top-nav-right-icon {
    color: var(--color-main-text);
}


/* Main Colors */

.main-background-color {
    background-color: var(--color-background);
}

.main-background-alpha-color {
    background-color: var(--color-background-alpha);
}

.main-text-color {
    color: var(--color-main-text);
}


/* Powerfull Colors */

.t-red {
    color: var(--color-red-text);
}

.t-orange {
    color: var(--color-orange-text);
}

.t-yellow {
    color: var(--color-yellow-text);
}

.t-lightgreen {
    color: var(--color-lightgreen-text);
}

.t-green {
    color: var(--color-green-text);
}

.t-royalblue {
    color: var(--color-royalblue-text);
}

.t-violet {
    color: var(--color-violet-text);
}

.t-grey {
    color: var(--color-grey-text);
}


/* typeOf ColorSetting*/

.to-null {
    color: var(--color-null-text);
    font-weight: bold;
}

.to-number {
    color: var(--color-number-text);
}

.to-text {
    color: var(--color-text-text);
}

.to-array {
    color: var(--color-array-text);
}

.to-dictionary {
    color: var(--color-dictionary-text);
}

.to-bold {
    font-weight: bold;
}


/* <body class="#"> */

.main_body {
    background-color: var(--color-background);
    color: var(--color-main-text);
    line-height: 2;
    font-size: 1.2em;
}

.main_body_doc {
    background-color: var(--color-background);
    color: var(--color-main-text);
    line-height: 2;
    font-size: 1.2em;
}

.marginPage {
    margin: 16px 16px;
}


/* 記事の作成日 */

.create_day {
    color: var(--color-main-text);
    text-align: right;
}


/* <div> 初めての人向け　スタイル記述 */

div.for-begginer {
    border-left: rgb(0, 162, 255) 12px solid;
    padding: 6px;
    color: var(--color-main-text);
    font-size: x-large;
    font-weight: bold;
}


/* <div> カテゴリーのレイアウト */

div.category-layout {
    width: 100%;
    border-left: 8px solid;
    padding: 10px;
    margin: 10px;
    font-size: x-large;
    font-weight: 900;
}


/* <div> 要素リスト用 */

div.document-list-box {
    background-color: rgba(55, 0, 184, 0.061);
    padding: 10px;
    border: rgb(0, 81, 255) solid 1px;
}

div.document-list-box>ol {
    font-size: large;
    border-left: darkgray solid 8px;
}


/* 行関係 */

.linebreak {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.lineHeight-1 {
    line-height: 1;
}

.lineHeight-2 {
    line-height: 2;
}


/* リンク */

a {
    color: var(--color-a-text);
    font-weight: 800;
}

a:link {
    color: var(--color-a-link-text);
    font-weight: 800;
}

a:visited {
    color: var(--color-a-visited-text);
    font-weight: 800;
}

.Underline {
    text-decoration: underline;
}


/*  基本的な構成はここまで */

.sr {
    border: #edff96;
    border-style: dashed;
    border-width: 2px;
    background: black;
    color: aquamarine;
}

.sr2 {
    background: darkslateblue;
    color: #ffebd6;
    border: #6dc0ff;
    border-style: dashed;
    border-width: 2px;
    text-align: center;
    font-family: Courier;
    font-size: x-large;
}

.sr3 {
    background: darkslateblue;
    color: #ffebd6;
    border: #6dc0ff;
    border-style: dashed;
    border-width: 2px;
    padding: 5px 5px;
    text-align: center;
    font-family: Courier;
    font-size: normal;
}


/* ソースコード表示用　*/

.srcode {
    background: black;
    border: white;
    border-style: solid;
    border-width: 1px;
    margin: 5px;
    /* margin-inside: 5px; */
}

.hightlight {
    color: rgb(255, 31, 98);
    font-size: x-large;
    font-family: 'Courier New', Courier;
}


/* コメントアウト専用　*/

.comment {
    color: #3f0;
}

.warn {
    width: 100%;
    font-size: small;
    text-align: center;
    border: gold;
    border-width: 2px;
    border-style: solid;
    margin: 5px;
}

.normalbox {
    width: 100%;
    border: aquamarine;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    padding: 5px 5px 5px 5px;
}

.back_next {
    font-size: larger;
    line-height: 2;
    background-color: rgba(94, 58, 255, 0.288);
}

.string {
    font-size: larger;
    color: rgb(175, 134, 0);
    font-weight: bold;
}

.num {
    font-size: larger;
    color: rgb(206, 58, 58);
    font-weight: bold;
}

.codeb {
    padding: 4px;
    color: var(--color-royalblue-text);
    background-color: var(--color-background-alpha);
    border: #585858 1px solid;
    border-radius: 6px;
    font-size: large;
}


/* タグ全体に反映させるCSS */

h1 {
    color: var(--color-main-text);
    font-size: 1.8em;
    padding: 1em 0.2em;
    padding-top: 0.2em;
    border-bottom: 6px rgb(111, 97, 173) dotted;
    text-align: center;
    /*border-radius: 0.1em;*/
    font-weight: bold;
}

h2 {
    font-size: 1.6em;
    padding-left: 0.8em;
    padding: 16px;
    border-left: solid 6px rgb(148, 162, 223);
    /* background-color: rgba(39, 105, 91, 0.185); */
    border-bottom: solid 2px rgb(44, 73, 201);
    font-weight: bold;
}

h3 {
    font-size: 1.3em;
    padding: 12px;
    border-left: solid 6px rgb(148, 162, 223);
    font-weight: bold;
}

h4 {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.3em;
    color: rgb(148, 162, 223);
    font-weight: bold;
}

h5 {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.2em;
    color: rgb(148, 162, 223);
    font-weight: bold;
}

hr {
    border-top: dotted 4px;
    border-bottom: none;
    border-left: none;
    border-right: none;
    color: rgba(136, 158, 255);
    margin: 32px 40%;
}


/* body タグ全体に適応させる */

body {
    background-image: var(--img-background-body);
    font-size: small;
    /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif */
    /* font-family: 'Open Sans', monospace; */
}


/* Google custum Search */

.searchbox {
    width: 70%;
    text-align: right;
}

.horizontal-list-screenshot {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.screenshot-item {
    /* 見た目調整 */
    height: 400px;
    background: rgba(255, 0, 0, 0.4);
}

.screenshot-list-item {
    /* 横スクロール用 */
    display: inline-block;
}

.prem_table_true {
    background-color: rgba(255, 0, 0, 0.418);
}

.prem_table_false {
    background-color: rgba(0, 110, 255, 0.418);
}

.dispblock {
    border: rgba(213, 252, 252, 0.336) 1px solid;
    padding: 6px;
}

.itemblock {
    border: rgba(0, 255, 157, 0.596) 2px solid;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

.rightborder {
    border-right: rgb(255, 219, 99) 4px solid;
    padding: 0px 20px;
}

.center {
    text-align: center;
}


/* WIDTH */

.screenshot {
    width: 400px;
}

.micon {
    width: 200px;
}

.sicon {
    width: 100px;
}

.icon {
    width: 24px;
}

.xicon {
    width: 64px;
}

.textflowblock {
    width: 90px;
}


/* 多分使うことはない、移行必須 */

.rightside {
    display: inline-block;
    text-align: center;
}

.sidecenter {
    vertical-align: baseline;
}

.sidemiddle {
    vertical-align: baseline;
}

.heigthWindow {
    overflow-y: scroll;
    height: 400px;
}

.dmargin {
    margin-bottom: 30px;
}


/* テーブルはみ出し防止 */

table {
    table-layout: fixed;
    width: 100%;
}


/* iblock （ブロックアイコン文字のデザイン） */

iblock {
    font-size: xx-small;
    color: #6dc0ff;
}


/* グローバルな配色 */

.color-non-premium {
    color: var(--color-non-premium);
}

.color-non-premium-background {
    background: var(--color-non-premium-background);
}

.color-premium {
    color: var(--color-premium);
}

.color-premium-background {
    color: var(--color-premium-background);
}


/* 蛍光ペンマーク用 */

.mark-blue {
    background-color: rgba(0, 195, 255, 0.2);
    /* background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #0077ff4f 40%) repeat scroll 0 0; */
    padding: 4px;
}

.mark-red {
    /* background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ff004c4f 40%) repeat scroll 0 0; */
    background-color: rgba(255, 0, 0, 0.2);
    /* border-bottom: rgba(255, 0, 0, 0.3) 16px solid; */
    padding: 4px;
}

.mark-green {
    /* background: rgba(163, 118, 118, 0) linear-gradient(transparent 60%, #33ff004f 40%) repeat scroll 0 0; */
    background-color: rgba(0, 255, 0, 0.2);
    padding: 4px;
}

.mark-orange {
    background-color: rgba(255, 127, 0, 0.2);
    padding: 4px;
}


/* フォントサイズ */

.font-size-xx-small {
    font-size: xx-small;
}

.font-size-x-small {
    font-size: x-small;
}

.font-size-smaller {
    font-size: smaller;
}

.font-size-small {
    font-size: small;
}

.font-size-medium {
    font-size: medium;
}

.font-size-larger {
    font-size: larger;
}

.font-size-large {
    font-size: large;
}

.font-size-x-large {
    font-size: x-large;
}

.font-size-xx-large {
    font-size: xx-large;
}


/* マージン */

.margin-4px {
    margin: 4px;
}

.margin-8px {
    margin: 8px;
}

.margin-12px {
    margin: 12px;
}

.margin-16px {
    margin: 16px;
}

.margin-24px {
    margin: 24px;
}

.margin-32px {
    margin: 32px;
}


/* パッディング */

.padding-4px {
    padding: 4px;
}

.padding-8px {
    padding: 8px;
}

.padding-12px {
    padding: 12px;
}

.padding-16px {
    padding: 16px;
}

.padding-24px {
    padding: 24px;
}

.padding-32px {
    padding: 32px;
}


/* Util */


/* スクロールバー非表示 */


/* thanks: https://www.yoheim.net/blog.php?q=20190801 */

.hideScrollBar {
    height: 150px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    /* IE, Edge 対応 */
    scrollbar-width: none;
    /* Firefox 対応 */
}

.hideScrollBar::-webkit-scrollbar {
    /* Chrome, Safari 対応 */
    display: none;
}