body { background: #898989; color: #DDDDDD; font-family: Sans-serif; padding: 0; margin: 0; }
input { background: #343434; color: #DDDDDD; border: 1px solid #333; padding: 5px; border-radius: 5px; }
table { margin: 0; padding: 0; border-collapse: collapse; border-spacing: 0; }
tr, td { margin: 0; padding: 0; }
a:link { color: #AAAAFF; text-decoration: none; }
a:visited { color: #AAAAFF; }
a:hover { color: #FFFFFF; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #555; }
::-webkit-scrollbar-thumb { background: #CCCCCC }
    ::-webkit-scrollbar-thumb:hover { background: #fff; }

#main-menu { position: fixed; top: 0; left: 0; right: 0; height: 39px; line-height: 39px; padding-left: 20px; overflow: hidden; background: #565656; border-bottom: #000 1px solid; }
    #main-menu input { margin-right: 10px; }
#sub-menu { position: fixed; top: 40px; left: 0; right: 0; height: 39px; line-height: 39px; padding-left: 20px; overflow: hidden; background: #676767; border-bottom: #000 1px solid; box-shadow: inset 0px 5px 5px rgba(0,0,0,0.2); }
    #sub-menu input { margin-right: 10px; }
#main-content-wrapper { position: fixed; left: 0; top: 80px; right: 0; bottom: 0; box-shadow: inset 0px 5px 5px rgba(0,0,0,0.2); }
#main-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: auto; }

#randomizer-empty-div { margin-top: 20px; margin-left: 20px; }

#randomizer-edit-vis-set-button { width: 145px; }

#randomizer-sets-div { position: absolute; left: 0; top: 0; right: 0; height: 39px; display: flex; flex-direction: row; align-items: center; padding-left: 15px; line-height: 39px; border-bottom: #000 1px solid; overflow: auto; }
    #randomizer-sets-div div { margin-left: 10px; }
	#randomizer-sets-div input { margin-left: 10px; }

#randomizer-div { position: absolute; left: 0; top: 40px; right: 0; display: grid; grid-template-columns: 150px min-content; grid-gap: 0; padding-top: 10px; }
    #randomizer-div div { padding: 5px; }

#editor-template-grid-div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 250px 565px 250px; overflow: unset; }

#editor-template-items-div { grid-column: 1; display: flex; flex-direction: column; overflow: hidden; }
#editor-template-items-header-div { width: 100%; text-align: center; padding-bottom: 10px; }
    #editor-template-items-header-div input { width: 200px; margin-top: 10px; margin-bottom: 10px; }
#editor-template-items-main-div { width: 100%; text-align: center; overflow: auto; }
    #editor-template-items-main-div div { width: 100%; height: 10px; }
    #editor-template-items-main-div input { width: 200px; box-shadow: 1px 1px 2px rgba(0,0,0,0.25); }

#editor-template-contents-div { grid-column: 2; display: flex; flex-direction: column; overflow: hidden; }
#editor-template-contents-title { width: 100%; text-align: center; margin-top: 10px; margin-bottom: 10px; }
    #editor-template-contents-title a { cursor: pointer; font-weight: bold; }
#editor-template-contents-main { width: 100%; overflow-y: auto; padding-bottom: 20px; }
#editor-template-contents-delete-template-button { display: block; width: 90%; margin: 0 auto; vertical-align: middle; }

#editor-template-components-div { grid-column: 3; display: flex; flex-direction: column; overflow: hidden; }
#editor-template-components-main-div { width: 100%; padding-top: 20px; text-align: center; overflow: auto; }

#editor-list-grid-div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 250px min-content; overflow: unset; }

#editor-list-items-div { grid-column: 1; display: flex; flex-direction: column; overflow: hidden; }
#editor-list-items-header-div { width: 100%; text-align: center; padding-bottom: 10px; }
    #editor-list-items-header-div input { width: 200px; margin-top: 10px; margin-bottom: 10px; }
#editor-list-items-main-div { width: 100%; text-align: center; overflow: auto; }
    #editor-list-items-main-div div { width: 100%; height: 10px; }
    #editor-list-items-main-div input { width: 200px; box-shadow: 1px 1px 2px rgba(0,0,0,0.25); }

#editor-list-contents-div { grid-column: 2; display: flex; flex-direction: column; overflow: hidden; }
    #editor-list-contents-div input[type=button] { display: block; width: 90%; margin: 0 auto; vertical-align: middle; }
#editor-list-contents-title { width: 100%; text-align: center; margin-top: 10px; margin-bottom: 10px; }
    #editor-list-contents-title a { cursor: pointer; font-weight: bold; }
#editor-list-contents-textarea { background-color: #DDDDDD; min-width: 750px; min-height: 500px; margin-top: 20px; margin-left: 20px; margin-bottom: 20px; white-space: pre; }

#editor-import-top-div { position: relative; width: 800px; }
#editor-import-open-file-label { display: inline-block; box-sizing: border-box; margin-top: 20px; background-color: #343434; color: #DDDDDD; padding: 5px; border: solid 1px #333; border-radius: 5px; white-space: pre; align-items: flex-start; text-align: center; font: 400 13.3333px Arial; float: right; }
#editor-import-open-file-input { display: none; }
#editor-import-btm-div { position: relative; width: 800px; }
#editor-import-span { padding-left: 20px; color: #FFFFFF; }
#editor-import-button, #editor-save-button { margin-left: 20px; }
#editor-import-delete-data-button { float: right; }

#editor-export-top-div { position: relative; width: 800px; }
#editor-export-copy-span { padding-left: 20px; color: #FFFFFF; }
#editor-export-download-button { float: right; }

#editor-feedback-span { padding-left: 5px; color: #00FF00; }

#message-title { position: absolute; top: 10px; left: 10px; right: 10px; height: 30px; text-align: center; font-weight: bold; }
#message-text { position: absolute; top: 50px; left: 10px; right: 10px; bottom: 50px; text-align: center; vertical-align: middle; }
#message-button { position: absolute; left: 10%; bottom: 10px; width: 80%; }

.randomizer-randomize-button-div { grid-column: 1; border-bottom: solid 1px #000; line-height: 30px; }
    .randomizer-randomize-button-div input { margin-left: 20px; }
    .randomizer-randomize-button-div:nth-child(even) { background-color: #787878; }
.randomizer-template-name-div { grid-column: 2; text-align: right; font-weight: bold; line-height: 30px; white-space: nowrap; border-bottom: solid 1px #000; }
    .randomizer-template-name-div:nth-child(odd) { background-color: #787878; }
.randomizer-template-result-div { grid-column: 3; line-height: 30px; border-bottom: solid 1px #000; color: #FFF; }
    .randomizer-template-result-div:nth-child(even) { background-color: #787878; }

.randomizer-set-selected { border: solid 1px #FFFFFF; }
.randomizer-vis-set-button { padding-left: 25px; padding-right: 25px; }
.randomizer-vis-set-button-group { height: 39px; margin: 0; padding: 0; line-height: 38px; white-space: nowrap; }
    .randomizer-vis-set-button-group input { border-radius: 0; margin: 0; }
        .randomizer-vis-set-button-group input:first-child { border-radius: 5px 0 0 5px; border-right: 0; width: 20px; color: #AAA; }
        .randomizer-vis-set-button-group input:last-child { border-radius: 0 5px 5px 0; border-left: 0; width: 20px; color: #AAA; }
        .randomizer-vis-set-button-group input:nth-child(2) { border-radius: 0; border-left: solid 1px #888; border-right: solid 1px #888; }

.randomizer-row-hidden { color: #BBB; }

.switch { position: relative; display: inline-block; width: 40px; height: 20px; margin-left: 30px; background-color: #343434; border-radius: 20px; transition: all 0.3s; }
    .switch::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background-color: #999; top: 1px; left: 1px; transition: all 0.3s; }

.toggle:checked + .switch::after { left: 20px; background-color: #DDD; }
.toggle:checked + .switch { background-color: #565656; }
.toggle { display: none; }

.template-contents-drop-div { width: 100%; height: 15px; }

.template-contents-component-div { display: inline-grid; grid-template-columns: min-content min-content min-content; grid-gap: 5px 5px; background-color: #DDDDDD; color: #343434; margin: 0; margin-left: 15px; padding: 5px; border: solid 2px #565656; border-radius: 5px; box-shadow: 3px 3px 5px rgba(0,0,0,0.25); }
    .template-contents-component-div input { width: 100%; height: 100%; }
.template-contents-component-edit { grid-column: 1; width: 40px; height: 30px; vertical-align: middle; margin: 0; padding: 0; }
.template-contents-component-text { grid-column: 2; display: block; width: 425px; height: 30px; margin: 0; padding: 0; font-weight: bold; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-contents-component-text-group { cursor: pointer; }
    .template-contents-component-text-group:after { content: "\2795"; float: right; }
.template-contents-component-text-group-open:after { content: "\2796"; }
.template-contents-component-delete { grid-column: 3; width: 40px; height: 30px; vertical-align: middle; margin: 0; padding: 0; }
.template-contents-component-logic { grid-column: 1; width: 40px; height: 30px; vertical-align: middle; margin: 0; padding: 0; }
.template-contents-component-probability { grid-column: 2; display: block; width: 425px; height: 30px; margin: 0; padding: 0; line-height: 30px; }
    .template-contents-component-probability input { width: 100%; height: 30px; margin: 0; padding: 0; }
.template-contents-component-percent { grid-column: 3; text-align: center; margin: 0; padding: 0; line-height: 30px; font-size: 80%; }

.template-contents-group-contents { grid-column: 1 / 4; display: block; background-color: #AAAAAA; border-radius: 5px; margin: 0px; padding: 0px; border: solid 2px #565656; text-align: center; }
.template-contents-group-contents-hidden { display: none; }

.template-contents-group-component-div { display: inline-grid; grid-template-columns: min-content min-content min-content; grid-gap: 5px 5px; background-color: #CCCCCC; color: #343434; margin: 0 5px 0 5px; padding: 5px; border: solid 2px #565656; border-radius: 5px; }
    .template-contents-group-component-div .template-contents-component-text { width: 390px; text-align: left; }
    .template-contents-group-component-div .template-contents-component-probability { width: 390px; }

.template-components-group-name { position: relative; margin-bottom: 20px; cursor: pointer; }
    .template-components-group-name:after { content: "\2795"; position: absolute; right: 10px; }
.template-components-group-name-open:after { content: "\2796"; }
.template-components-group { margin-bottom: 10px; }
    .template-components-group input { width: 200px; margin-bottom: 5px; }

.template-contents-component-div-or, .template-contents-component-div-or-0 { background-color: #EEDDDD;border: solid 2px #FF0000; }
.template-contents-component-div-or-1 { background-color: #DDEEDD; border: solid 2px #00FF00; }
.template-contents-component-div-or-2 { background-color: #DDDDEE; border: solid 2px #0000FF; }
.template-contents-component-div-or-3 { background-color: #EEEEDD; border: solid 2px #FFFF00; }
.template-contents-component-div-or-4 { background-color: #EEDDEE; border: solid 2px #FF00FF; }
.template-contents-component-div-or-5 { background-color: #DDEEEE; border: solid 2px #00FFFF; }

.editor-import-export-content { margin-left: 20px; }
.editor-import-export-content textarea { width: 800px; height: 500px; }
.editor-import-export-content input { margin-top: 20px; }

.fade-out { animation: fadeOut ease 2s; -webkit-animation: fadeOut ease 1s; -moz-animation: fadeOut ease 1s; -o-animation: fadeOut ease 1s; -ms-animation: fadeOut ease 1s; -webkit-animation-fill-mode: forwards; }

.dialogue-background { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba( 0, 0, 0, 0.5 ); }
.dialogue-offset { position: relative; margin-left: 50%; margin-top: 50vh; }
.dialogue-box { position: relative; width: 500px; height: 170px; margin-left: -252px; margin-top: -87px; background-color: #676767; border-radius: 10px; border: solid 4px #CCCCCC; box-shadow: 5px 5px 10px rgba(0,0,0,0.25); }
.dialog-title { width: 100%; text-align: center; font-weight: bold; margin-top: 20px; }
.dialogue-text { width: 460px; margin-top: 20px; margin-left: 20px; }
    .dialogue-text input { width: 100%; box-sizing: border-box; }
.dialogue-button-cancel { position: absolute; left: 20px; bottom: 20px; width: 25%; height: 40px; }
.dialogue-button-accept { position: absolute; right: 20px; bottom: 20px; width: 25%; height: 40px; }
.dialogue-numberfield { width: 60px !important; background-color: #CCCCCC; color: #232323; margin-right: 10px; margin-left: 10px; }

input[type=range] { -webkit-appearance: none; background-color: transparent; border: none; }
    input[type=range]::-webkit-slider-runnable-track { width: 300px; height: 5px; background: #ababab; border: none; }
    input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: solid 2px #222; height: 16px; width: 16px; border-radius: 50%; background: #444; margin-top: -4px; }
	input[type=range]::-webkit-slider-thumb:hover { background: #FFF }

@keyframes fadeOut {
    0% { opacity: 1; }

    50% { opacity: 1; }

    100% { opacity: 0; }
}

@-moz-keyframes fadeOut {
    0% { opacity: 1; }

    75% { opacity: 1; }

    100% { opacity: 0; }
}

@-webkit-keyframes fadeOut {
    0% { opacity: 1; }

    75% { opacity: 1; }

    100% { opacity: 0; }
}

@-o-keyframes fadeOut {
    0% { opacity: 1; }

    75% { opacity: 1; }

    100% { opacity: 0; }
}

@-ms-keyframes fadeOut {
    0% { opacity: 1; }

    75% { opacity: 1; }

    100% { opacity: 0; }
}