/* 日本語フォント + アイコン用フォント指定 */
body {
    font-family: "Arial", "NotoSansCJKjp", "FontAwesome", "NotoEmoji";
}

/* リストのスタイルをリセット */
ol, ul {
    list-style: none;
}

/* SVGちらつき防止 */
svg {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* テーブル行の折り返しを禁止 */
table.aui > thead > tr > th,
table.aui > tbody > tr > td {
    white-space: nowrap;
    vertical-align: middle;
}

/* AUI ヘッダが折り返してしまうのを防ぐための措置 */
#header .aui-header .aui-header-secondary {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

/* クリック可能 */
.clickable {
    cursor: pointer;
}

tr.clickable:hover {
    background: #e6e6e6;
}

/* カーソルポインタ */
.cursor-pointer {
    cursor: pointer;
}

/* カーソル移動ポインタ */
.cursor-move {
    cursor: move;
}

/* 選択不可 */
.unselectable {
    user-select: none; /* CSS3 */
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Safari、Chromeなど */
    -ms-user-select: none; /* IE10かららしい */
}

/* サブテキスト */
p.sub-text {
    color: #808080;
    font-size: 12px;
}

/* プロパティ */
.property {
    display: table;
    border-collapse: collapse;
    width: 100%;
}

    .property caption {
        margin-top: 8px;
    }

    .property .tr {
        display: table-row;
    }

    .property th,
    .property td,
    .property .th,
    .property .td {
        display: table-cell;
        border: 1px solid #ccc;
        font-size: 13px;
        padding: 2px;
        height: 22px;
        vertical-align: middle;
        white-space: nowrap;
    }

    .property th,
    .property .th {
        background: #f5f5f5;
        font-weight: bold;
        text-align: left;
    }

    .property td {
        background: #fff;
    }

        .property td input[type=text],
        .property .td input[type=text],
        .property td input[type=number],
        .property .td input[type=number] {
            border: none;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #FCFBCC;
        }

    .property select {
        height: 22px;
        max-width: 270px;
    }

    .property td.disabled,
    .property tr.disabled > td {
        pointer-events: none;
        cursor: not-allowed;
        filter: alpha(opacity=50);
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: .50;
    }

        .property td.disabled input,
        .property tr.disabled > td input {
            pointer-events: none;
            cursor: not-allowed;
            filter: alpha(opacity=50);
            -webkit-box-shadow: none;
            box-shadow: none;
            opacity: .50;
        }

    .property td.danger,
    .property tr.danger > td {
        color: red;
    }

        .property td.danger input,
        .property tr.danger > td input {
            color: red;
        }

/* pre-text */
.pre-text {
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ナビゲーションヘッダのタイトル名のフォントサイズを大きく */
#logo .aui-header-logo-text {
    font-size: 20px;
    padding: 6px 0 6px 0;
}

/* エラーページ */
#error-page {
    position: fixed;
    top: 41px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

/* aui.min.cssでz-index:2と更新されてしまうのを防ぐ */
#aui-flag-container {
    z-index: 4000;
}


.aui-lozenge {
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #333;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 99%;
    margin: 0;
    padding: 2px 5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.aui-lozenge-success {
    background-color: #14892c;
    border-color: #14892c;
    color: #fff;
}

.aui-lozenge-error {
    background-color: #d04437;
    border-color: #d04437;
    color: #fff;
}

.aui-lozenge-current {
    background-color: #f6c342;
    border-color: #f6c342;
    color: #594300;
}


/* Leaflet marker color */
.leaflet-marker-color-Red,
.leaflet-marker-color-red {
    background: #CD4020;
    color: white;
}

.leaflet-marker-color-Darkred,
.leaflet-marker-color-darkred {
    background: #983131;
    color: white;
}

.leaflet-marker-color-Orange,
.leaflet-marker-color-orange {
    background: #EB9400;
    color: white;
}

.leaflet-marker-color-Green,
.leaflet-marker-color-green {
    background: #75AF00;
    color: white;
}

.leaflet-marker-color-Darkgreen,
.leaflet-marker-color-darkgreen {
    background: #738300;
    color: white;
}

.leaflet-marker-color-Blue,
.leaflet-marker-color-blue {
    background: #43A8E1;
    color: white;
}

.leaflet-marker-color-Purple,
.leaflet-marker-color-purple {
    background: #C94FBB;
    color: white;
}

.leaflet-marker-color-Darkpurple,
.leaflet-marker-color-darkpurple {
    background: #59376E;
    color: white;
}

.leaflet-marker-color-Cadetblue,
.leaflet-marker-color-cadetblue {
    background: #456879;
    color: white;
}

/* ラベルアイコン */
.leaflet-label-icon {
    text-align: center;
    vertical-align: middle;
}

.leaflet-label-icon-text {
    box-sizing: border-box;
    font-size: 16px;
    font-weight: bold;
    background: #fff;
    border: 2px solid #ccc;
    padding: 4px;
}

/* AUIボタン拡張 */
/* エラーボタン */
.aui-button.aui-button-primary.aui-button-danger {
    background: #d04437;
}

    .aui-button.aui-button-primary.aui-button-danger:hover,
    .aui-button.aui-button-primary.aui-button-danger:focus {
        background: #df4437;
    }

    .aui-button.aui-button-primary.aui-button-danger[disabled],
    .aui-button.aui-button-primary.aui-button-danger[disabled]:hover,
    .aui-button.aui-button-primary.aui-button-danger[disabled]:focus,
    .aui-button.aui-button-primary.aui-button-danger[disabled]:active,
    .aui-button.aui-button-primary.aui-button-danger[aria-disabled="true"],
    .aui-button.aui-button-primary.aui-button-danger[aria-disabled="true"]:hover,
    .aui-button.aui-button-primary.aui-button-danger[aria-disabled="true"]:focus,
    .aui-button.aui-button-primary.aui-button-danger[aria-disabled="true"]:active {
        background: #d0b1ae;
        border-color: transparent;
        box-shadow: none;
        color: #fff;
    }

/* 成功ボタン */
.aui-button.aui-button-primary.aui-button-success {
    background: #14892c;
}

    .aui-button.aui-button-primary.aui-button-success:hover,
    .aui-button.aui-button-primary.aui-button-success:focus {
        background: #14892c;
    }

    .aui-button.aui-button-primary.aui-button-success[disabled],
    .aui-button.aui-button-primary.aui-button-success[disabled]:hover,
    .aui-button.aui-button-primary.aui-button-success[disabled]:focus,
    .aui-button.aui-button-primary.aui-button-success[disabled]:active,
    .aui-button.aui-button-primary.aui-button-success[aria-disabled="true"],
    .aui-button.aui-button-primary.aui-button-success[aria-disabled="true"]:hover,
    .aui-button.aui-button-primary.aui-button-success[aria-disabled="true"]:focus,
    .aui-button.aui-button-primary.aui-button-success[aria-disabled="true"]:active {
        background: #acdcb6;
        border-color: transparent;
        box-shadow: none;
        color: #fff;
    }


/* AUIサイドバーでFontAwesomeアイコンが使えるようにする */
.aui-sidebar[aria-expanded="false"] .aui-nav-item .fa {
    color: #707070;
    margin-left: 18px;
    width: 20px;
    height: 24px;
    font-size: 18px;
    text-align: center;
}

.aui-sidebar[aria-expanded="true"] .aui-nav-item .fa {
    color: #707070;
    padding-top: 4px;
    padding-left: 3px;
    margin-right: 12px;
    width: 20px;
    height: 19px;
    float: left;
    font-size: 16px;
    text-align: center;
}

/* ヘッダの通知リンクボタン */
#notification-button {
    padding: 0;
    margin: 0;
}

/* 通知ヘッダ */
#notification-header {
    z-index: 100;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 43px;
    font-size: 14px;
    background: #d04437;
    color: #fff;
    padding: 0;
    margin: 0;
}

@keyframes HeaderTopToBottom {
    from {
        transform: translateY(-50px);
    }

    to {
        transform: translateY(0);
    }
}

#notification-header.show {
    display: block;
    animation: HeaderTopToBottom 1s linear 0s;
}

#notification-header .content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 43px;
    line-height: 43px;
    color: white;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    #notification-header .content .icon {
        display: inline-block;
        padding: 0 8px;
    }

    #notification-header .content .message-label {
        font-size: 20px;
        vertical-align: middle;
        margin-right: 8px;
    }

    #notification-header .content .message-value {
        color: white;
    }

    #notification-header .content:hover .message-value {
        text-decoration: underline;
    }

#notification-header .btn-close {
    z-index: 200;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 43px;
    line-height: 43px;
    font-size: 36px;
    text-align: center;
    cursor: pointer;
    color: white;
}

.notification-content {
    margin-top: 20px;
    border: 1px solid #a0a0a0;
    border-radius: 2px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

    .notification-content h2 {
        color: #172b4d;
        font-weight: bold;
        border-bottom: 1px solid #a0a0a0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .notification-content pre {
        color: #000;
        margin-top: 8px;
        font-size: 16px;
    }

    .notification-content .footer {
        color: #707070;
    }

/* 認証エラーメッセージ */
#auth-error-message {
    position: fixed;
    top: 90px;
    left: 10px;
    z-index: 1000;
    display: none;
}

/* RealBoardサイドバー */
#rb-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    bottom: 0;
    z-index: 3000;
    color: #707070;
    background-color: #f5f5f5;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
}

@keyframes SidebarLeftToRight {
    from {
        transform: translateX(-280px);
    }

    to {
        transform: translateX(0);
    }
}

#rb-sidebar.show {
    display: block;
    animation: SidebarLeftToRight 0.1s linear 0s;
}

#rb-sidebar .sidebar-item {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: flex-end;
}

    #rb-sidebar .sidebar-item > *:first-child {
        margin-right: auto;
        flex-basis: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

#rb-sidebar .sidebar-header {
    height: 60px;
}


#rb-sidebar h3.title {
    font-size: 20px;
    color: #707070;
}

#rb-sidebar a.btn-close-sidebar {
    font-size: 32px;
    color: #707070;
    text-decoration: none;
}

#rb-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#rb-sidebar a {
    text-decoration: none;
    color: #707070;
}

#rb-sidebar .sidebar-main {
    overflow-y: auto;
    position: absolute;
    top: 60px;
    bottom: 42px;
    left: 0;
    right: 0;
    overflow-y: auto;
}

#rb-sidebar .nav-item {
    height: 36px;
    font-size: 14px;
}

    #rb-sidebar .nav-item:hover {
        background-color: #ddd;
    }

    #rb-sidebar .nav-item .icon {
        width: 20px;
        text-align: center;
    }

    #rb-sidebar .nav-item .name {
        color: #3572b0;
        font-weight: bold;
        margin-left: 12px;
    }

#rb-sidebar .sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 42px;
    border-top: 1px solid #ccc;
}

.icon-square:before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url(../images/iconmonstr-square-1-32.png);
    background-size: contain;
    vertical-align: middle;
}

.icon-square.icon-2x:before {
    width: 24px;
    height: 24px;
}

.icon-triangle:before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url(../images/iconmonstr-triangle-1-32.png);
    background-size: contain;
    vertical-align: middle;
}

.icon-triangle.icon-2x:before {
    width: 24px;
    height: 24px;
}

.icon-circle:before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url(../images/iconmonstr-circle-1-32.png);
    background-size: contain;
    vertical-align: middle;
}

.icon-circle.icon-2x:before {
    width: 24px;
    height: 24px;
}

/* ダッシュボードタイルのコンテナ */
.dashboard-tile-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

    .dashboard-tile-container.with-fixed-header {
        top: 32px;
    }

/* ダッシュボードタイルのヘッダ */
.dashboard-tile-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    line-height: 32px;
    padding: 0 8px;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
    z-index: 1;
}

    .dashboard-tile-header > div {
        margin-right: 8px;
    }

        .dashboard-tile-header > div:first-child {
            margin-right: auto;
        }

    .dashboard-tile-header > .dashboard-tile-header-title {
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

        .dashboard-tile-header > .dashboard-tile-header-title.with-icon {
            padding-left: 32px;
        }

.dashboard-tile-left-top-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    line-height: 32px;
    z-index: 10;
    cursor: pointer;
    color: #ccc;
    margin: auto;
    text-align: center;
}

    .dashboard-tile-left-top-icon:hover {
        color: #808080;
    }

    .dashboard-tile-left-top-icon.pinned {
        color: #000000;
    }

/* ダッシュボード・タイルにオーバーレイするカバー */
.dashboard-tile-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0.5;
}

/* リストのツリー表示 */
.tree ul { /*親フォルダ*/
    padding-left: 5px;
    list-style: none;
}

    .tree ul li { /*ファイル名部分*/
        position: relative;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 15px;
        box-sizing: border-box;
    }

        .tree ul li:before { /*横線*/
            position: absolute;
            top: 15px;
            left: 0;
            width: 10px;
            height: 1px;
            margin: auto;
            content: '';
            background-color: #666;
        }

        .tree ul li:after { /*縦線*/
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 1px;
            height: 100%;
            content: '';
            background-color: #666;
        }

        .tree ul li:last-child:after { /*これ以下は別フォルダになる事を明示する為、少しだけ離す*/
            height: 15px;
        }

        .tree ul li > a {
            display: block;
            width: 100%;
            height: 100%;
            padding-left: 8px;
            cursor: pointer;
            text-decoration: none;
        }

            .tree ul li > a:hover {
                background: rgba(172, 220, 182, 0.5);
            }

            .tree ul li > a:active {
                font-weight: bold;
                background: #205081;
                color: #fff;
            }

        .tree ul li.selected > a {
            font-weight: bold;
            background: #205081;
            color: #fff;
        }