html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-size: 16px;
    color: #323135;
}

body {
    display: flex;
    flex-direction: column;
    background: #f2f2f3;
}

.disable-select {
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Common components */
.fade-out {
    opacity: 0;
    transition: opacity .8s ease-out;
}

.dropdown {
    position: relative;
}

.dropdown > .dropdown-toggle {
    cursor: pointer;
    user-select: none;
}

.dropdown > .dropdown-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: -99999px; /* To prevent the scroll bar from being displayed when the menu is at the right end. */
    margin: 0;
    padding: 8px 0;
    z-index: 10;
    box-sizing: border-box;
    list-style: none;
    width: 180px;
    font-size: 13px;
    color: #323135;
    border-radius: 2px;
    background: #fff;
    border: 1px solid #cbcace;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.05);
}

.dropdown > .dropdown-menu.show {
    visibility: visible;
    opacity: 1;
    transition: opacity .1s ease-in-out;
}

.dropdown > .dropdown-menu > * {
    box-sizing: border-box;
    line-height: 16px;
    cursor: pointer;
}

.dropdown > .dropdown-menu.no-link > * {
    padding: 8px;
}

.dropdown > .dropdown-menu > *.disabled {
    color: #cbcace;
    cursor: default;
}

.dropdown > .dropdown-menu > *:not(.disabled):hover {
    background: rgba(100, 99, 105, .1);
}

.dropdown > .dropdown-menu > *:not(.disabled):active {
    background: rgba(100, 99, 105, .2);
}

.dropdown > .dropdown-menu > li > a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 8px;
    color: inherit;
    text-decoration: none;
}

/*
.editable-text {
    border: 1px solid transparent;
}

.editable-text:hover {
    border: 1px solid #cbcace;
}
*/

/* //Common components */

.ace_editor {
    font-family: Menlo, Monaco, "Ubuntu Mono", Consolas, source-code-pro, "Hiragino Sans", Meiryo, "Courier New", Arial, "Helvetica Neue", Helvetica monospace;
}

.playground-global-logo input {
    padding: 2px;
    width: 20em;
    font-size: 13px;
    vertical-align: middle;
}

.playground-version-label {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 13px;
}

#current_version {
    margin-right: 4px;
}

#copy_tmp {
}

#success_to_copy_version_url {
    position: absolute;
    top: 64px;
    right: 16px;
    display: inline-block;
    border: 1px solid #0088cc;
    background: #e5f6ff;
    color: #08415e;
    border-radius: 2px;
    font-size: 13px;
    line-height: 13px;
    padding: 8px;
    visibility: hidden;
    opacity: 0;
    transition: all .5s;
}

#success_to_copy_version_url.show {
    visibility: visible;
    opacity: 1;
}

.go-to-latest-btn,
.fork-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.playground-preview {
    min-width: 240px;
    min-height: 120px;
    background: #f2f2f3;
}

.playground-preview-iframe-wrapper {
    width: 100%;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

.playground-preview.hidden {
    display: none;
}

.playground-preview iframe {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

/* index */

.playground-start .container {
}

.playground-list .container {
}

.playground-start h2,
.playground-list h2 {
    margin: 0 0 16px;
    font-size: 13px;
}

ul.recent-playgrounds {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.recent-playgrounds > li {
    margin-bottom: 8px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.05);
}

ul.recent-playgrounds > li:hover {
    background: #fafafa;
}

ul.recent-playgrounds > li.no-playground {
    background: #cbcace;
    padding: 64px 32px;
    font-size: 13px;
    text-align: center;
    color: #323135;
}

ul.recent-playgrounds > li.no-playground > a {
    color: #323135;
}

ul.recent-playgrounds > li.recent-playground {
    position: relative;
}

ul.recent-playgrounds > li.recent-playground > .menu {
    position: absolute;
    top: 24px;
    right: 16px;
    display: inline-block;
    width: 24px;
    height: 24px;
    color: #cbcace;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
}

ul.recent-playgrounds > li.recent-playground > .menu:hover {
    background: #f2f2f3;
    border-radius: 2px;
}

ul.recent-playgrounds > li.recent-playground > a {
    display: inline-block;
    box-sizing: border-box;
    width: calc(100% - 54px);
    padding: 16px;
    text-decoration: none;
}

ul.recent-playgrounds > li h3 {
    margin: 0 0 3px;
    font-size: 13px;
    color: #323135;
}

ul.recent-playgrounds > li p {
    margin: 0;
    font-size: 11px;
    color: #646369;
}

.resize-mask {
    display: none;
    opacity: 1;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    /*background: rgba(0, 0, 0, 0.3);*/
}

.resize-mask.show {
    display: block;
}

/* Ace custom style */
.read-only .ace_text-layer {
    opacity: .8;
}

.read-only .ace_scroller {
    background: #f2f2f3;
}

.read-only .ace_gutter-cell {
    opacity: .5;
}

.read-only .ace-chrome .ace_cursor {
    opacity: 0;
}

.ace-chrome .ace_invisible {
    color: #ebebeb;
}

.ace_cjk.ace_invisible_space {
    background: #f7d4d7;
    color: #eaaeb3;
}

.ace_gutter-cell.ace_info,
.ace_gutter-cell.ace_warning {
    background-image: none;
}

.ace_gutter-cell.ace_error {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='10' height='10' rx='2' fill='%23D92635'/%3E%3Crect x='11.0052' y='6.05545' width='7' height='1.5' transform='rotate(135 11.0052 6.05545)' fill='white'/%3E%3Crect x='9.94458' y='11.0052' width='7' height='1.5' transform='rotate(-135 9.94458 11.0052)' fill='white'/%3E%3C/svg%3E%0A");
    background-position: 2px 1px;
}

.ace_marker-layer .diff-added {
    position: absolute;
    background: hsl(120, 60%, 80%);
    opacity: .5;
}

.ace_marker-layer .diff-removed {
    position: absolute;
    background: hsl(355, 70%, 80%);
    opacity: .4;
}

textarea.ace_text-input:focus {
    border-color: none;
    box-shadow: none;
}

/*
.ace_tooltip {
    visibility: hidden;
}
*/
/* //Ace custom style */