@charset "utf-8";

html, body {
    height: 100%;
}

body {
	font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

body.workspace {
	overflow: hidden;
}

h1 {
    margin-top: 1rem;
    font-size: 2rem;
}

h5 {
	font-size: 1.1rem;
}

.pre {
    white-space: break-spaces;
}

.btn-xs {
    padding: .125rem .5rem;
    font-size: .5rem;
    line-height: 1.5;
    border-radius: .2rem;
}

.navbar {
	padding-top: .2rem;
	padding-bottom: .2rem;
}

.error-message {
    color: #a00;
    font-size: 0.9rem;
}

.login-panel {
    margin-top: 1em;
}

.complete {
    background-color: #d4edda;
}

.divtable {
	margin-bottom: 1rem;
}

.divtable .row {
}

.divtable .heading,
.divtable .data {
	padding: 0.75rem;
	height: 100%!important;
	border-top: 1px solid #dee2e6;
	border-left: 1px solid #dee2e6;
}

.divtable .row > div:last-child .heading,
.divtable .row > div:last-child .data {
	border-right: 1px solid #dee2e6;
}

.divtable .row:last-child .heading,
.divtable .row:last-child .data {
	border-bottom: 1px solid #dee2e6;
}

.divtable .heading {
	background-color: #eee;
	font-weight: bold;
}

/* ISLE IDE */
.ide-window {
    letter-spacing: -1em; /* ボックス間ギャップ対策 */
    white-space: nowrap; /* ボックス間ギャップ対策 */
    padding: 0;
    position: relative;
}

.ide-column {
    letter-spacing: normal; /* ボックス間ギャップ対策 */
    white-space: normal; /* ボックス間ギャップ対策 */
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}

.ide-column .status-bar + * {

}

.resize-handle {
    display: inline-block;
    cursor: col-resize;
    width: 3px;
    background-color: #ccc;
    height: 100%;
    z-index: 9999;
}

.ide-panel {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding-top: 30px;
}

.ide-panel-body {
    height: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

.ide-panel-body.scroll {
    overflow: auto;
    padding-bottom: 28px;
}

.CodeMirror {
    font-family: Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
    font-size: 14px;
    height: 100%;
    border: solid 1px #ddd;
}

#page {
    background-color: #fff;
    color: #000;
    padding: 2px;
    height: 100%;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
}

.status-bar {
    background-color: #eee;
    border: solid 1px #ddd;
    padding: 2px;
    position: absolute;
    width: 100%;
    z-index: 100;
    top: 0;
    left: 0;
}

.status-bar > span {
    display: inline-block;
    padding: 0 0.5rem;
}

.tool-area {
    padding: 5px;
    min-height: 40px;
}

.tool-button {
    display: inline-block;
    cursor: pointer;
}

.toggle-button {
    margin-bottom: 5px;
}

.table th {
    background-color: #eee;
}

.editor-buffer {
    display: none;
}

/* ISLE Explorer */
#isle-explorer #packageName .btn {
    vertical-align: top;
}

/* ISLE Component Editor */
#isle-component-editor {
    display: none;
}

ul.tabs {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.tabs li {
    display: inline-block;
}

ul.tabs li.active {
    background-color: #eee;
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-left: solid 1px #ccc;
}

ul.tabs li a {
    display: inline-block;
    padding: 0 4px;
    font-size: 0.8rem;
    color: #333;
    text-decoration: none;
}

/* ISLE Editor */
#isle-editor {
    min-width: 0;
    display: none;
}

#isle-editor > * {
    max-width: 100%;
}

#isle-console {
    display: none;
}

#isle-browser {
    display: none;
}

/* ISLE Viewer */
#isle-viewer {
    display: none;
}

#isle-viewer .ide-panel-body {
	overflow: hidden;
}

#isle-viewer video,
#isle-viewer iframe {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
}

/* ISLE DBAdmin */
#isle-dbadmin {
    display: none;
}

#isle-dbadmin .ide-panel-body {
    padding: 5px;;
}

#dbadmin-editor {
    margin-bottom: 5px;
}

#dbadmin-editor-buffer {
    display: none;
}

#dbadmin-control-panel {
    border-bottom: solid 1px #ddd;
}

#dbadmin-control-panel .toggle-target {
    display: none;
}

/* ISLE Console */
#console {
    font-family: Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
    background-color: #222;
    color: #fff;
    padding: 5px;
    height: 100%;
    overflow: auto;
    white-space: break-spaces;
}

#console .input-area {
    display: flex;
    flex-wrap:nowrap;
    margin: 5px 0;
}

#console .input-area button {
    margin-left: 5px;
}

/* Quiz */
#quiz-cover,
#quiz-body {
    padding: 20px;
}

#quiz-cover h4 {
    margin-top: 1em;
}

.quiz-title {
    margin-bottom: 0.5rem;
}

#quiz-body .question {
    border: solid 1px #ccc;
    padding: 1rem 1rem 0 1rem;
    margin-bottom: 20px;
}

#quiz-body .question .instruction {
    margin-bottom: 1rem;
}

#quiz-body .question ul.options {
    list-style-type: none;
    padding-left: 1rem;
    margin: 0;
}

#quiz-body .question input[type=radio],
#quiz-body .question input[type=checkbox] {
    margin-right: 0.5em;
}

#quiz-body .question code {
    color: #222;
    font-family: Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
    font-size: 1rem;
}

#quiz-result {
    border: solid 1px #ccc;
    padding: 20px;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.pass {
    background-color: #d4edda;
}

.fail {
    background-color: #e8948c;
}

.untried {
    background-color: #f4d184;
}

/* Protip */
.protip-container {
    z-index: 200;
}

/* zTree */
.ztree * {
    font-size: 1rem;
    font-family: inherit;
}
.ztree li a {
    height: 1.4rem;
}

.ztree li span.button.switch {
    height: 1.4rem;
}
.ztree li a.curSelectedNode {
    height: 1.2rem;
}
/* zTree Icons */
.ztree li span.button.database_ico_open{margin-right:2px; background:url(../images/icon/database.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}
.ztree li span.button.database_ico_close{margin-right:2px; background:url(../images/icon/database.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}
.ztree li span.button.server_ico_open{margin-right:2px; background:url(../images/icon/server.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}
.ztree li span.button.server_ico_close{margin-right:2px; background:url(../images/icon/server.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}
.ztree li span.button.client_ico_open{margin-right:2px; background:url(../images/icon/smartphone.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}
.ztree li span.button.client_ico_close{margin-right:2px; background:url(../images/icon/smartphone.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}
.ztree li span.button.table_ico_docu{margin-right:2px; background:url(../images/icon/table.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}
.ztree li span.button.program_ico_docu{margin-right:2px; background:url(../images/icon/gear.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}
.ztree li span.button.webpage_ico_docu{margin-right:2px; background:url(../images/icon/webpage.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}
.ztree li span.button.page_ico_docu{margin-right:2px; background:url(../images/icon/document.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}
.ztree li span.button.video_ico_docu{margin-right:2px; background:url(../images/icon/video.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}
.ztree li span.button.pdf_ico_docu{margin-right:2px; background:url(../images/icon/pdf.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}
.ztree li span.button.quiz_ico_docu{margin-right:2px; background:url(../images/icon/quiz.png) no-repeat scroll 0 0 transparent; background-size:contain; vertical-align:top; *vertical-align:middle}