html, body {
    height: 100%;
    overflow: hidden;
}

#squiffy-editor {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

a.squiffy-link
{
    text-decoration: underline;
    color: Blue;
    cursor: pointer;
}

a.squiffy-link.disabled
{
    text-decoration: inherit;
    color: inherit !important;
    cursor: inherit;
}

#editor { 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#debugger {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
    /* font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; */
}

#squiffy-editor {
    /* width: 100%; */
    height: 100%;
    position: fixed;
}

#output, #tab-help, #tab-tools {
    position: relative;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    /* background: #fff; */
    width:325px; 
    height:540px !important;
}

.ui-layout-north {
   z-index: 50 !important;
   overflow: visible !important;
   -webkit-user-select: none;
}

.ui-layout-center {
  padding: 0px !important;
}

#info {
    margin-left: 20px;
    font-size: 90%;
}

ul.dropdown-menu a {
    cursor: pointer;
}

.toolbar {
  margin-top: 10px;
}

.tab-pane h3:first-of-type {
  margin-top: 0;
}

.tab-pane h3:not(:first-of-type) {
  margin-top: 30px;
}

.ace-squiffy .ace_gutter {
    background: #ebebeb;
    color: #333;
    overflow: hidden;
}

.ace-squiffy .ace_print-margin {
    width: 1px;
    background: #e8e8e8;
}

.ace-squiffy {
    background-color: #FFFFFF;
    color: black;
}

.ace-squiffy .ace_identifier {
    color: black;
}

.ace-squiffy .ace_keyword {
    color: #0000FF;
}

.ace-squiffy .ace_numeric {
    color: black;
}

.ace-squiffy .ace_storage {
    color: #11B7BE;
}

.ace-squiffy .ace_keyword.ace_operator,
.ace-squiffy .ace_lparen,
.ace-squiffy .ace_rparen,
.ace-squiffy .ace_punctuation {
    color: #808080;
}

.ace-squiffy .ace_set.ace_statement {
    color: #0000FF;
    text-decoration: underline;
}

.ace-squiffy .ace_cursor {
    color: black;
}

.ace-squiffy .ace_invisible {
    color: rgb(191, 191, 191);
}

.ace-squiffy .ace_constant.ace_buildin {
    color: rgb(88, 72, 246);
}

.ace-squiffy .ace_constant.ace_language {
    color: #979797;
}

.ace-squiffy .ace_constant.ace_library {
    color: rgb(6, 150, 14);
    font-size: 30px;
}

.ace-squiffy .ace_invalid {
    background-color: rgb(153, 0, 0);
    color: white;
}

.ace-squiffy .ace_support.ace_function {
    color: #FF00FF;
}

.ace-squiffy .ace_support.ace_constant {
    color: rgb(6, 150, 14);
}

.ace-squiffy .ace_class {
    color: #008080;
}

.ace-squiffy .ace_support.ace_other {
    color: #6D79DE;
}

.ace-squiffy .ace_variable.ace_parameter {
    font-style: italic;
    color: #FD971F;
}

.ace-squiffy .ace_comment {
    color: #008000;

}

.ace-squiffy .ace_constant.ace_numeric {
    color: black;
}

.ace-squiffy .ace_variable {
    color: rgb(49, 132, 149);
}

.ace-squiffy .ace_xml-pe {
    color: rgb(104, 104, 91);
}

.ace-squiffy .ace_support.ace_storedprocedure {
    color: #800000;
}

.ace-squiffy .ace_heading {
    color: rgb(6, 150, 14);
}

.ace-squiffy .ace_heading {
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.1);
    /* display: block; */


}

.ace-squiffy .ace_section {
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.1);
    display: block;


}
.ace-squiffy .ace_list {
    color: rgb(185, 6, 144);
}

.ace-squiffy .ace_marker-layer .ace_selection {
    background: rgb(181, 213, 255);
}

.ace-squiffy .ace_marker-layer .ace_step {
    background: rgb(252, 255, 0);
}

.ace-squiffy .ace_marker-layer .ace_stack {
    background: rgb(164, 229, 101);
}

.ace-squiffy .ace_marker-layer .ace_bracket {
    margin: -1px 0 0 -1px;
    border: 1px solid rgb(192, 192, 192);
}

.ace-squiffy .ace_marker-layer .ace_active-line {
    background: rgba(0, 0, 0, 0.07);
}

.ace-squiffy .ace_gutter-active-line {
    background-color: #dcdcdc;
}

.ace-squiffy .ace_marker-layer .ace_selected-word {
    background: rgb(250, 250, 255);
    border: 1px solid rgb(200, 200, 250);
}

.ace-squiffy .ace_meta.ace_tag {
    color: #0000FF;
}

.ace-squiffy .ace_string.ace_regex {
    color: #FF0000;
}

.ace-squiffy .ace_string {
    color: #FF0000;
}

.ace-squiffy .ace_entity.ace_other.ace_attribute-name {
    color: #994409;
}

.ace-squiffy .ace_indent-guide {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
}

/** Custom CSS **/ 
.postit {
    line-height: 1;
    text-align:center;     
    width: 275px;    
    margin: 25px;    
    min-height:250px;
    max-height:250px;
    padding-top:35px;
    position:relative;   
    border:1px solid #E8E8E8;  
    border-top:60px solid #fdfd86;
    font-family:'Reenie Beanie';    
    font-size:22px;      
    border-bottom-right-radius: 60px 5px;
    display:inline-block;    
     background: #ffff88; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */
  background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }
   
  .postit:after {     
     content: "";
    position:absolute;
    z-index:-1;
    right:-0px; bottom:20px;
    width:200px;
    height: 25px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
  -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
   -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
        -o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
       -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
           transform: matrix(-1, -0.1, 0, 1, 0, 0);
  }

  .modal-window {
    position: fixed;
    background-color: rgba(200, 200, 200, 0.75);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  
  .modal-window:target {
    opacity: 1;
    pointer-events: auto;
  }
  
  .modal-window>div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 2rem;
    background: #fff;
    color: #444;
  }
  
  .modal-window header {
    font-weight: bold;
  }
  
  .modal-close {
    color: #aaa;
    line-height: 50px;
    font-size: 80%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 70px;
    text-decoration: none;
  }
  
  .modal-close:hover {
    color: #000;
  }
  
  .modal-window h1 {
    font-size: 150%;
    margin: 0 0 15px;
  }
  
          .title {
        	font-family: "Verdana";
        	text-align: center;
        	color: #FFF;
        	display: flex;
        	flex-direction: column;
        	align-items: center;
        	justify-content: center;
        	/* height: 100vh; */
        	letter-spacing: 1px;
        }
        
        .title h1 {
        	background-image: url(https://media1.tenor.com/images/827a825ba13924b265fc9721a536c711/tenor.gif?itemid=9784186);
        	background-size: cover;
        	color: transparent;
        	-moz-background-clip: text;
        	-webkit-background-clip: text;
        	text-transform: uppercase;
        	font-size: 40px;
        	/* line-height: .75; */ 
        	margin: 10px 0;
        }

        input.partitioned {
            padding-left: 15px;
            letter-spacing: 20px;
            border: 0;
            text-align: center;
            /*
            background-image: linear-gradient(to left, black 70%,rgba(255,255,255, 0.9));
            background-position: bottom;
            background-size: 50px 1px;
            background-repeat: repeat-x;
            background-position-x: 35px; 
            
            min-width: 220px; */
            font-size: 14px;
            color: black;
          }
          
          .partitioneddivInner{
            left: 0;
            position: sticky;
          }
          
          .partitioneddivOuter{
            width: 100%; 
            overflow: hidden;
          }