/* iphone landscape */
@media only screen and (max-device-width: 480px) and (orientation : portrait) {

    .toolbar-mini .btn {
        margin: 0px 2px;
        padding: 0px 7px;
        border: none;
        height: 33px;
    }
  
}
/* iphone portrait */
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
   
    .toolbar-mini .btn {
        margin: 0px 3px;
        padding: 0px 12px;
        border: none;
        height: 33px;
    }
    
}
/* ipad */
@media only screen and (min-device-width : 480px) and (max-device-width : 1024px) {
   
    .toolbar-mini .btn {
        padding: 0px 12px;
        border: none;
        height: 38px;
    }

}

* {
    -webkit-user-select: auto;
    user-select: auto;
}

body {
    margin: 0;
    padding: 0;
    background: #202d2d;
    /*margin-top: 5px;*/
    /*overflow: hidden;*/
    /*
    font-family: 'Operator Mono', 'Source Sans Pro', Menlo, Monaco, Consolas, Courier New, monospace;
    */
    overflow-x: hidden;
    overflow-y: auto;
}

.CodeMirror.cm-s-lesser-dark {
    font-family: 'Operator Mono', 'Source Sans Pro', Menlo, 
                  Monaco, Consolas, Courier New, monospace;
}

button {
    margin: 0;
}

.result_wraper {
    margin-bottom: 64px;
}

.header-text {
    padding: 0 5px;
    color: whitesmoke;
    text-shadow: 1px 1px 1px #222;
}

.header-text.waiting {
    color: #ff602a;
}

.header-text.yellow {
    color: #FFEB3B;
}
header.toolbar {
    position: fixed;
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
}

#main {
    /*height: 100%;*/
    width: 100%;
    /* position: absolute; */
    /* top: 44px; */
    /* bottom: 0; */
    /* margin-top: 42px; */
    /* overflow: hidden; */
}

#main .ppane {
    overflow: hidden;
    border: none;
}

#main .pane-meta {
    width: 100px;
    flex: none;
    background: rgba(77, 77, 77, 0.8);
    /*background: rgba(41, 120, 177, 0.5);*/
    color: #dedede;
}

#result {
    /* max-height: 1000px; */
    /*-webkit-user-drag: text;*/
    /* -webkit-user-select: text; */
    margin: 0px 0px 0px 29px;
    padding: 0 10px 0 10px;
    color: #cccccc;
    background: #333333;
    border-left: #91a327 1px solid;
}

#result tt {
    position: fixed;
    background: #333;
}

#result pre {
    /*-webkit-user-select: initial;*/
    background: #222222;
}

#result section {
    position: relative;
    /* top: 0; */
    height: 1600px;
    /* overflow-y: visible; */

}

#result samp {
    position: absolute;
    z-index: 100;
    padding: 0 1em;
    background: #111;
    white-space: pre;
}

#result .inpre {
    position: absolute;
    top: 0;
    padding-top: 1em;
    height: 1600px;
    overflow-y: visible;
}

#result .inpre pre {
    /*overflow: auto;*/
    padding: 0 1em;
}

#composite.joinY .bar {
    max-height: 50px;
}

#composite_wrap {
    margin: 0px 0 0px 29px;
    overflow: scroll;
}

.result big {
    font-size: 2em;
    color: #f3f3f3;
}

.result code {
    padding: 2px 0px;
    background: #191919;
    color: #fcfcfc;
}

.result table {
    color: #111111;
}

.result table td {
    border-bottom: 1px solid;
}

.result .evalerror {
    color: #ff391e;
}

.toolbar.toolbar-shiftleft {
    /*padding-left: 30px;*/
    /*border: none;*/
    /*border-left: 30px solid #444444;*/
}

.toolbar.bar {
    padding: 5px 10px;
    background: rgba(77, 77, 77, 0.8);
    /*background: rgba(41, 120, 177, 0.5);*/
    color: #dedede;
}

.meta-section {
    padding: 5px 10px;
    background: rgba(77, 77, 77, 0.8);
    color: #dedede;

}

.toolbar.bar .btn.btn-mini {
    padding: 2px 2px;
}

.toolbar.bar .btn-default {
    filter: contrast(2) invert(85%);
    border-left-color: #999;
    border-right-color: #999;
}

.toolbar.bar .deps-text-edit .btn{
    height: 3.1em;
}

.toolbar.bar .deps-text-edit .btn.act-save{
    background: #ea86c0;
}
.toolbar.bar .deps-text-edit .btn.act-save .icon{
    color: #000;
}

.toolbar.bar.deps {
    display: flex;
    flex-wrap: wrap;
} 

.toolbar.bar.deps input, .toolbar.bar.deps textarea {
    color: #222222;
    line-height: 1.4em;
    font-family: 'Operator Mono', 'Source Sans Pro', Menlo, 
                  Monaco, Consolas, Courier New, monospace;

} 

.toolbar.bar.deps .deps-textarea {
    flex: 1;
    /* caret-color: auto; */
    /* -webkit-backface-visibility: hidden; */
    filter: invert(85%);
}

.toolbar.bar input {
    color: #222222;
}

.toolbar.bar.meta {
    /*background: rgba(77, 77, 77, 0.8);*/
    /*background: rgba(57, 68, 76, 0.9);*/
}

.toolbar-mini > * {
    opacity: 1;
}

#composite .toolbar {
    margin: 2px 0;
    border-left: #20E9E9 1px solid;

}

#composite > hr {
    margin: 2px 0px 2px 0px;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgb(135, 157, 44);
    /*border-bottom: 1px solid rgba(205, 220, 57, 0.51);*/
}

.form-control.form-control-mini {
    padding: 0 5px;
    box-shadow: none;
    min-height: 0;
}

.hide {
    display: none !important;
}

.floped.fliped {
    perspective: 700px;
    transform-style: preserve-3d;
}

.floped.fliped .CodeMirror {
    transform: translate3d(60px, 0px, 400px) rotateY(-50deg);
    transform-origin: right;
}

.CodeMirror {
    margin: 0;
    padding: 0;
    height: auto;
    /*min-height:100%;*/
}

.CodeMirror-scroll {
    height: auto;
}

.CodeMirror-code {

}

.toolbar {
    border: none;
    box-shadow: none;
    background: rgba(41, 120, 177, 0.5);
    /*position: absolute;*/
    z-index: 1000;
    top: 0px;
    /* height: 44px; */
    left: 0;
    right: 0;
   
    position: relative;
}

.select-text {
    -webkit-user-select: text;
}
.select-text * {
    -webkit-user-select: text;
}

.drag {
    -webkit-app-region: drag ;
}

.toolbar-mini {

    margin: 0;
    padding: 2px 0;
    line-height: 1em;
}

.toolbar.act-edit .btn .icon {
    /*background: #FFC72E;*/
    color: #ff602a;
}
@media only screen and (min-device-width: 1024px){
.toolbar-mini .btn {
    margin: 0px 1px;
    padding: 0px 5px;
    border: none;
    height: 18px;
}
}
.toolbar-mini .btn .icon {
    color: #444;
    height: 18px;
    margin: 0;
    width: 16px;
    font-size: 17px;
    line-height: 1em;
}

.toolbar .btn .icon.icon-text {
    width: auto;
}

.toolbar .btn.btn-warning.active {
    background: #151515;
}

.toolbar .btn.btn-warning.active .icon {
    color: #FF5E00;
}

.toolbar-mini .btn.btn-warning.active .icon {
    color: #FF5E00;
    font-size: 18px;
}

.toolbar .btn.btn-isotop {
    background: transparent;
}

.toolbar .btn.btn-isotop .icon {
    color: #111;
    font-size: 18px;

}

.toolbar .btn.btn-isotop.active {
    /*color: #FF5E00;*/
    /*background: #3F51B5;*/
}

.toolbar .btn.btn-isotop.active .icon {
    color: #FFF;
}

.toolbar .btn.btn-primary.active {
    background: #151515;
}

.toolbar .btn.btn-primary.active .icon {
    color: rgb(0, 127, 255);
    font-size: 18px;

}

.toolbar .btn.btn-default.active {
    background: #323232;
}

.toolbar-mini .btn.btn-default.active .icon {
    color: rgb(249, 249, 249);
    font-size: 18px;

}

.toolbar .btsn.active {
    background-color: rgb(0, 127, 255);
}

.toolbar .delim-right {
    margin-right: 0.5em;
}

.info {
    font-family: monospace;
    white-space: nowrap;
    position: absolute;
    bottom: 0;
    background: #eee;
    padding: 2px;
    line-height: 10px;
    left: 0;
    right: 0;
}

.info label {
    font-weight: bold;
}