html, body {
    font-size: var(--main-font-size);
    font-family: 'メイリオ', Meiryo, arial, sans-serif;
    overflow: hidden;
}


/* 全体 */
@import "~material-design-icons/iconfont/material-icons.css";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

:root {
    /* 全体サイズ */
    --min-view-width: 1024px;
    --menu-width: 200px;
    /* フォントサイズ */
    --main-font-size: 12px;
    --larger-font-size: 1.2rem;
    /* 背景色 */
    --logo-bg-color: #292829;
    --menu-bg-color: #393839;
    --header-bg-color: #DEDEDE;
    --sub-menu-bg-color: #FFFFFF;
    --column-header-bg-color: #F7F7F7;
    --column-bg-color: #FFFFFF;
    --main-bg-color: #E7E7E7;
    --alert-bg-color: #FFDAD9;
    /* 文字色 */
    --main-font-color: #424542;
    --sub-font-color: #7B7D7B;
    --menu-font-color: #FFFFFF;
    --warning-font-color: #ff4542;
    /* 枠線の色 */
    --main-border-color: #C6C7C6;
    --menu-border-color: #000000;
    --menu-shadow-border-color: #525152;
    --alert-border-color: #FF6A68;
    /* アクセントカラー */
    --accent-color: #FF5100;
    /* 余白 */
    --main-padding: 0.6rem;
    --menu-padding: 1.2rem;
    --contents-margin: 1.2rem;
    /* ボタンの色 */
    --exec-button-bg-color: #296194;
    --exec-button-border-color: #214D73;
    --disable-button-bg-color: #C6C7C6;
    --disable-button-border-color: #C6C7C6;
    --invalid-input-color: #FF6A68;
    /* 表示枠の大きさ (for TOP) */
    //--dashboard-proper-size: max(calc((100vw - var(--menu-width)) / 4), calc((var(--min-view-width) - var(--menu-width)) / 4));
    --dashboard-proper-size: calc((100vw - var(--menu-width)) / 4);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-size: var(--main-font-size);
    font-family: 'メイリオ', Meiryo, arial, sans-serif;
    overflow: hidden;
}

ul {
    list-style: none;
}

li.disabled {
    pointer-events: none;
}

li.tab-disabled {
    cursor: not-allowed !important;
}

li.tab-disabled > span {
    pointer-events: none;
}

li.mat-disabled {
    pointer-events: none;
    color: silver;
}

h1 {
    font-weight: normal;
}

/* flexbox */
#flex-container {
    display: flex;
    height: 100vh;
    min-width: var(--min-view-width);
}

nav {
    width: var(--menu-width);
    color: var(--sub-font-color);
    background-color: var(--menu-bg-color);
    font-size: var(--larger-font-size);
    overflow-y: auto;
}

div#main {
    flex: 1;
    background-color: var(--main-bg-color);
    overflow-y: auto;
    padding-bottom: 10em;
}

    div#main.top {
        //background-color: var(--menu-bg-color);
        background-color: var(--logo-bg-color);
        //background-color: var(--main-bg-color);
    }

#menu-flex-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#logo {
    height: 64px;
    line-height: 64px;
    color: var(--menu-font-color);
    background-color: var(--logo-bg-color);
    text-align: center;
}

#menu {
    flex: 1;
}

#menu-footer {
    position: absolute;
    bottom: 0;
    width: var(--menu-width);
}

/** ローディング */
#loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    stroke: var(--menu-bg-color);
}

/* ロゴ */
#logo > span {
    display: block;
    //transform: scale(1.5, 1);
    font-size: 2rem;
    font-family: Century, serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    #logo > span:first-letter {
        font-size: 2.5rem;
        color: var(--accent-color);
    }

/* メニュー */
#menu {
    padding-top: 1rem;
}

/*a {
    text-decoration: none;
    color: var(--sub-font-color);
}*/

.menu-items .shown {
    color: var(--menu-font-color);
    background-color: #424542;
    border-left: 3px solid var(--accent-color);
}

.menu-items > ul > li {
    margin-bottom: 0.5rem;
    padding: var(--menu-padding) 0;
}

    .menu-items > ul > li:hover {
        color: var(--menu-font-color);
        background-color: #424542;
        cursor: pointer;
    }

    .menu-items > ul > li > span {
        padding-left: var(--main-padding);
    }

    .menu-items > ul > li.shown > span {
        padding-left: calc(var(--main-padding) - 3px);
    }

    .menu-items > ul > li > span:hover {
        cursor: pointer;
    }

    .menu-items > ul > li > span.account {
        color: var(--menu-font-color);
    }

    .menu-items > ul > li > ul.sub > li {
        padding: 0.3rem 0 0.3rem 4rem;
        font-size: var(--main-font-size);
    }

        .menu-items > ul > li > ul.sub > li.shown {
            padding-left: calc(4rem - 3px);
        }

        .menu-items > ul > li > ul.sub > li > span:hover {
            cursor: pointer;
        }

#menu-footer > hr {
    margin: 0.4rem;
    border: none;
    border-top: 1px solid var(--menu-border-color);
    border-bottom: 1px solid var(--menu-shadow-border-color);
}

#menu-footer > div.account {
    padding: var(--main-padding);
    color: var(--menu-font-color);
}

/* マテリアルアイコンの大きさ調整 */
.material-icons {
    width: 2.3rem;
    text-align: center;
    vertical-align: middle;
    font-size: 1.8rem;
}

.material-icons.content-copy {
    width: 2.3rem;
    padding: 0;
    text-align: center;
    font-size: 1.4rem;
}

.m-icons-sm{
    font-size: 1.2rem !important;
}

th.current-sort, th.sort-to {
    cursor: pointer;
}

th.current-sort > i {
    color: var(--main-font-color);
}

th.sort-to > i {
    color: transparent !important;
}

th.sort-to:hover > i {
    color: var(--main-border-color) !important;
}

.m-icons-sm:hover {
    font-size: 1.2rem !important;
}

/* コンテンツ部 */
main {
    margin: var(--contents-margin);
}

/* 文章コンテンツ */
article.sentence {
    margin-bottom: 1.5rem;
    width: 100%;
    background-color: var(--column-bg-color);
    border: 1px solid var(--main-border-color);
}

    article.sentence > h1 {
        padding: var(--main-padding);
        background-color: var(--column-header-bg-color);
        font-size: var(--larger-font-size);
        color: var(--main-font-color);
        border-bottom: 1px solid var(--main-border-color);
    }

    article.sentence > p {
        padding: var(--main-padding);
        background-color: var(--column-bg-color);
        white-space: pre-wrap;
    }

span.warning {
    color: var(--warning-font-color);
}

span.table-name {
    color: var(--menu-font-color);
    font-size: var(--main-font-size);
}

span.h1 {
    font-size: 14.4px;
}

span.page-of {
    font-size: var(--main-font-size);
    line-height: 24px;
    margin-right: var(--menu-padding);
}

input[type="button"]:focus, input[type="submit"]:focus {
    outline: 2px #000000 solid;
    border-radius: 2px;
}

/*　ボタン */
input[type="button"], input[type="submit"] {
    padding: 0.4rem 1.5rem;
    cursor: pointer;
    background-color: var(--column-header-bg-color);
    border: 1px solid var(--main-border-color);
    color: var(--main-font-color);
}

    input[type="button"] + input[type="button"],
    input[type="submit"] + input[type="button"] {
        margin-left: var(--main-padding);
    }

    input[type="button"].exec, input[type="submit"] {
        background-color: var(--exec-button-bg-color);
        border: 1px solid var(--exec-button-border-color);
        color: var(--menu-font-color);
        font-weight: bold;
    }

        input[type="button"].exec[disabled], input[type="submit"][disabled] {
            background-color: var(--disable-button-bg-color);
            border: 1px solid var(--disable-button-border-color);
            color: var(--menu-font-color);
            font-weight: bold;
        }

/* ボタンアイコン */
i.button {
    cursor: pointer;
    user-select: none;
}

i.button:hover {
    background-color: #e7e7e7;
    border-radius: 1rem;
    box-shadow: 0 2px 0 #dedede;
    transform: translate(0, -2px);
}

i.button:active {
    background-color: #dedede;
    border-radius: 1rem;
    box-shadow: none;
    transform: translate(0, 0);
}

textarea {
    background-color: var(--column-header-bg-color);
}

    textarea[disabled] {
        background-color: #ffffff;
    }

textarea.medium {
    resize: none;
    width: 288px;
    height: 64px;
}

textarea.medium-wide {
    resize: none;
    width: 324px;
    height: 64px;
}

textarea.large {
    resize: none;
    width: 450px;
    height: 270px;
}

textarea.tall {
    resize: none;
    width: 288px;
    height: 194px;
}

/* 入力ボックス */
input[type="text"], input[type="tel"], input[type="password"], input[type="number"] {
    padding: var(--main-padding);
    width: 24rem;
    background-color: var(--column-header-bg-color);
    border: 1px solid var(--main-border-color);
}

    input[type="text"][disabled],, input[type="number"][disabled] {
        background-color: #ffffff;
    }

    input[type="text"][readonly], input[type="tel"][readonly], input[type="password"][readonly],, input[type="number"][readonly] {
        padding-left: 0;
        border: none;
        background-color: var(--column-bg-color);
        outline: none;
    }

input[type="date"] {
    width: 12rem;
}

input[type="datetime-local"] {
    width: 16rem;
}

input[type="date"], input[type="datetime-local"] {
    padding: var(--main-padding);
    background-color: var(--column-header-bg-color);
    border: 1px solid var(--main-border-color);
}

    input[type="date"][readonly], input[type="datetime-local"][readonly] {
        padding-left: 0;
        border: none;
        background-color: var(--column-bg-color);
        outline: none;
    }

input[type="checkbox"] {
    margin-right: var(--main-padding);
    vertical-align: middle;
}

input.short-number {
    width: 6rem;
}

input.telephone-number {
    width: 12rem;
}

input.telephone-number-datalist {
    width: 14rem;
}

input.ipv4 {
    width: 12rem;
}

input.cidr {
    width: 14rem;
}

input.icc-id {
    width: 14rem;
}

/* ラベル */
label {
    user-select: none;
    white-space: nowrap;
}
label.inheritLabel {
    color: var(--sub-font-color);
}

span.required::before {
    content: "* ";
    color: var(--warning-font-color);
    font-size: 0.6rem;
    vertical-align: super;
}

/* セレクトボックス */
select {
    padding: var(--main-padding);
    background-color: var(--column-header-bg-color);
    border: 1px solid var(--main-border-color);
}

    select:disabled {
        padding-left: 0;
        background-color: var(--column-bg-color);
        border: none;
        color: var(--main-font-color);
        appearance: none;
    }

/* ファイルを開く(非表示) */
input[type="file"] {
    display: none;
}

.display-input-default {
    display: inline-block !important;
}
/* エラーメッセージ */
.warning-message {
    padding-left: var(--main-padding);
    color: var(--warning-font-color);
    word-break: break-all;
    word-wrap: normal;
    white-space: normal;
    max-width: 25em;
}

#alert {
    margin: calc(var(--main-padding) * 2);
    padding: var(--main-padding);
    background-color: var(--alert-bg-color);
    border: solid 1px var(--alert-border-color);
    color: var(--warning-font-color);
    font-weight: bold;
    overflow-wrap: break-word;
    white-space: pre-line;
}

#alert-into-dialog {
    margin: var(--main-padding);
    padding: var(--main-padding);
    background-color: var(--alert-bg-color);
    border: solid 1px var(--alert-border-color);
    color: var(--warning-font-color);
    font-weight: bold;
    overflow-wrap: break-word;
    white-space: pre-line;
}

/* 検索条件 */
.search-condition {
    border: 1px solid var(--main-border-color);
    border-bottom: none;
    color: var(--main-font-color);
}

    .search-condition > h1 {
        padding: var(--main-padding);
        background-color: var(--column-header-bg-color);
        border-bottom: 1px solid var(--main-border-color);
        color: var(--main-font-color);
        font-size: var(--larger-font-size);
    }

    .search-condition  .content {
        padding: var(--main-padding);
        background-color: var(--column-bg-color);
    }

    .search-condition  .buttons {
        padding: var(--main-padding);
        background-color: var(--column-bg-color);
        text-align: right;
    }

.period-section {
    display: flex;
}

.line-h-33 {
    line-height: 33px;
}


/*　テーブル */
table, caption, tbody, tr, th, td {
    padding: var(--main-padding);
    border: 1px solid var(--main-border-color);
}

table {
    width: 100%;
    border-collapse: collapse;
}

caption {
    text-align: left;
    color: var(--main-font-color);
    font-size: var(--larger-font-size);
    background-color: var(--column-header-bg-color);
    border-bottom: none;
    caption-side: top;
}

.mat-paginator {
    background-color: var(--column-header-bg-color);
}

.caption-buttons {
    float: right;
    display: flex;
}

.current-condition {
    font-size: var(--main-font-size)
}

th {
    text-align: left;
    color: var(--sub-font-color);
    background-color: var(--column-header-bg-color);
}

tr {
    color: var(--main-font-color);
    background-color: var(--column-bg-color);
}

td {
    border-left: none;
    border-right: none;
    word-break: break-all;
}

td.operation {
    text-align: right;
}

td.empty {
    height: 33px;
}

/* 入力用テーブル構造 */
table.input, table.input > tr, table.input > tr > td {
    border: none;
}

table.input > tr > td {
    padding: var(--main-padding);
}

table.input > tr > td:first-child {
    padding-right: 1.5rem;
    text-align: right;
    font-weight: bold;
}

table.input > tr > td:first-child.groupname {
    text-align: left;
    font-size: var(--main-font-size);
}

table.input > tr > td:first-child.groupname-right > span {
    text-align: right;
    margin-right: 50px;
    font-size: var(--main-font-size);
}

table.input > tr > td.search-label {
    padding-right: 1.5rem;
    text-align: right;
    font-weight: bold;
    width 
}


table.input > tr > td:last-child {
    padding-right: 0;
}

.search-condition table.input > tr > td:first-child {
    width: 15%;
}

.search-condition table.input > tr > td:first-child.group-title {
    text-align: right;
    vertical-align: top;
    font-size: var(--main-font-size);
    width: 5% !important;
}

.search-condition table.input > tr > td.search-label {
    width: 10%;
}

.modal table.input > tr > td:first-child {
    width: 30%;
}

/* mat-tableカスタマイズ */
.mat-header-cell, .mat-cell {
    padding: var(--main-padding) !important;
}

.mat-header-row, .mat-row {
    padding: 0 !important;
    height: calc(1rem + var(--main-padding) * 2) !important;
}

.mat-paginator-outer-container {
    width: auto !important;
    margin: calc(0px - var(--main-padding) / 2) 0 !important;
}

.mat-paginator-container {
    min-height: 0 !important;
}

.mat-paginator-range-actions {
    height: auto !important;
}

.mat-icon-button {
    height: 28px !important;
    border: none !important;
    background: none !important;
}

.mat-button-wrapper {
    height: 28px !important;
    display: inline-block !important;
    vertical-align: top !important;
}

    .mat-button-wrapper > svg {
        line-height: 1.5rem !important;
        display: inline-block !important;
        vertical-align: baseline !important;
    }

/* モーダルダイアログ */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.modal {
    margin: auto;
    width: 900px;
    background-color: var(--column-bg-color);
    border: 1px solid var(--main-border-color);
    z-index: 1001;
    color: var(--main-font-color);
    box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.2);
}

.w-auto {
    width: auto;
}

    .modal > div {
        padding: var(--main-padding);
    }

        .modal > div.header {
            padding: var(--main-padding);
            height: 3rem;
            background-color: var(--column-header-bg-color);
            border-bottom: 1px solid var(--main-border-color);
            font-size: var(--larger-font-size);
            font-weight: bold;
        }

            .modal > div.header span.button {
                width: calc(1rem + var(--main-padding));
                color: var(--sub-font-color);
            }

        .modal > div.content {
            overflow-y: auto;
            max-height: calc(100vh - 8rem);
        }

            .modal > div.content > div.message {
                padding: var(--main-padding) 0;
            }

            .modal > div.content > form > div.footer {
                padding-top: var(--main-padding);
                text-align: right;
            }

.question {
    background: #333;
    color: #fff;
    margin-left: 0.5em;
    border-radius: 1em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    cursor: help;
}

/* ヘッダ */
header {
    display: flex;
    align-items: center;
    padding: var(--main-padding);
    height: 64px;
    background-color: var(--header-bg-color);
    color: var(--main-font-color);
    border-top: 1px solid var(--main-border-color);
    border-bottom: 1px solid var(--main-border-color);
}

    header > .title {
        flex: 1;
        font-size: 1.6rem;
        font-weight: bold;
    }

    header > .header-selector {
        line-height: 2rem;
        text-align: right;
        font-size: 1.2rem;
    }

/* ヘッダ下部のサブメニュー */
div#sub-menu {
    padding: 0 var(--contents-margin);
    color: var(--sub-font-color);
    background-color: var(--sub-menu-bg-color);
    font-size: var(--larger-font-size);
    border-bottom: 1px solid var(--main-border-color);
}

    div#sub-menu > ul {
        line-height: calc(1.2rem + 12px);
    }

        div#sub-menu > ul > li {
            display: inline;
            margin-right: 1rem;
            padding-bottom: 0.2rem;
        }

            div#sub-menu > ul > li:hover {
                cursor: pointer;
            }

            div#sub-menu > ul > li.shown:hover {
                cursor: default;
            }

            div#sub-menu > ul > li.shown {
                color: var(--main-font-color);
                border-bottom: 3px solid var(--accent-color);
            }

/*
.auth-type-specific {
  border-left: 2px solid #0cf;
  padding-left:  3px;
}

.auth-type-group {
  border-left: 2px solid #0c0;
  padding-left:  3px;
}

.auth-type-any {
  border-left: 2px solid #f9c;
  padding-left:  3px;
}

.auth-type-none {
  border-left: 2px solid #ccc;
  padding-left:  3px;
}
*/

table.table2,
table.table2 thead,
table.table2 tbody,
table.table2 tr,
table.table2 th,
table.table2 td {
    background: white;
    border: none !important;
    width: auto;
    padding: 2px;
}


    table.table2 input[type="text"] {
        width: 12rem;
    }

textarea.ng-invalid.ng-touched,
input.ng-invalid.ng-touched,
select.ng-invalid.ng-touched {
    outline: 1px solid red;
}

.mat-icon-button {
    line-height: unset !important;
}

.progress-bar-height {
    margin: 0;
    padding: 0;
    height: 4px;
}

button {
    cursor: pointer;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

tr.invalid-row {
    background-color: #aaa;
}


/*
###############
# ポップアップメニュー
###############
*/

div.popup-menu {
    position: absolute;
    background-color: var(--column-bg-color);
    border: 1px solid var(--main-border-color);
    border-radius: 3px;
    box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.2);
    z-index: 950;
    overflow: hidden;
    color: var(--main-font-color);
}
    div.popup-menu > ul {
        padding: 0.2rem 0.2rem;
        margin: 0;
    }

    div.popup-menu > ul > li {
        padding: 0 1rem;
    }

        div.popup-menu > ul > li > span {
            cursor: pointer;
        }

        div.popup-menu > ul > li:hover {
            background-color: var(--column-header-bg-color);
        }


/*
###############
# サインイン画面
###############
*/

#sign-in-flex-container {
    justify-content: center;
    align-items: flex-start;
    display: flex;
    height: 100vh;
    min-width: var(--min-view-width);
}

#signin {
    margin-top: 4rem;
    width: 640px;
    border: 1px solid var(--main-border-color);
    color: var(--main-font-color);
}

    #signin > h1 {
        padding: var(--main-padding);
        background-color: var(--column-header-bg-color);
        border-bottom: 1px solid var(--main-border-color);
        color: var(--main-font-color);
        font-size: 2rem;
        font-family: Century, serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
    }

        #signin > h1:first-letter {
            font-size: 2.5rem;
            color: var(--accent-color);
        }

    #signin > form > .content {
        padding: var(--main-padding);
        background-color: var(--column-bg-color);
    }

    #signin > form > .buttons {
        padding: var(--main-padding);
        background-color: var(--column-bg-color);
        text-align: center;
    }


.validation-message {
    color: red;
}


/*
###############
# トップ画面
###############
*/

div#main.top {
    background-color: var(--logo-bg-color);
}

.dashboard {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.dashboard-child {
    width: var(--dashboard-proper-size);
}

    .dashboard-child.large {
        width: calc(var(--dashboard-proper-size) * 3);
    }

.appeal {
    display: flex;
    flex-direction: column;
    margin: 1rem;
    height: var(--dashboard-proper-size);
    border-radius: 1.5rem;
    color: white;
    font-size: calc(var(--dashboard-proper-size) / 12);
    font-weight: bold;
    text-align: center;
    overflow: hidden;
}

    .appeal > .number {
        flex-basis: 66%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(var(--dashboard-proper-size) / 4.5);
        position: relative;
    }

        .appeal > .number::before {
            position: absolute;
            top: calc(50% - var(--dashboard-proper-size) / 3);
            left: calc(50% - var(--dashboard-proper-size) / 3);
            font-family: 'Material Icons';
            color: white;
            font-size: calc(var(--dashboard-proper-size) / 1.5);
            opacity: 0.2;
        }

    .appeal > .unit {
        flex-basis: 34%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.25);
    }

#online-users {
    background-color: #008EA8;
}

#online-users > .number::before {
    content: 'wifi_tethering';
}

#total-users {
    background-color: #FBA522;
}

#total-users > .number::before {
    content: 'people';
}

#total-numbers {
    background-color: #8AC244;
}

#total-numbers > .number::before {
    content: 'laptop';
}

#os {
    margin: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--dashboard-proper-size) / 2);
    background-color: #555555;
    border-radius: 1.5rem;
    color: white;
    font-size: calc(var(--dashboard-proper-size) / 8);
}

.notice {
    margin: 1rem;
    background-color: var(--column-bg-color);
    border: 1px solid var(--main-border-color);
    color: var(--main-font-color);
}

    .notice > h1 {
        padding: var(--main-padding);
        background-color: var(--column-header-bg-color);
        font-size: var(--larger-font-size);
        border-bottom: 1px solid var(--main-border-color);
    }

    .notice > p {
        padding: var(--main-padding);
    }

.os-value {
    padding: 0 2rem;
    text-align: center;
    font-size: 1.4rem;
}

    .os-value > img {
        width: calc(var(--dashboard-proper-size) / 4);
    }

/*自分組織*/

.org-of-mine > form > .content {
    padding: var(--main-padding);
    background-color: var(--column-bg-color);
    border: 1px solid var(--main-border-color);
    border-bottom: none;
}

.org-of-mine > form > .footer {
    padding: var(--main-padding);
    background-color: var(--column-bg-color);
    border: 1px solid var(--main-border-color);
    border-top: none;
    text-align: right;
}

.org-of-mine > form > .content > table > tr > td:first-child {
    width: 30%;
}

.about-ad-sync {
    margin: 2rem auto 1rem;
    width: 85%;
}