.ace-overlay{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    position: relative;
    min-height: 30px;

    background:#fff;
    border:1px dotted #ccc;
    padding:1em;
    
}
.ace-overlay pre{
    color:#666;
    overflow: hidden;
}
.ace-overlay .code-container {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
    overflow: hidden;
}
.ace-overlay .code-container .line {
    width: 100%;
    overflow: hidden;
}
.ace-overlay .code-container .counter {
    text-align: right;
    margin-right: 10px;
    width: 30px;
    color: rgb(187, 187, 187);
}
.ace-overlay .code-container .code {
}
.ace-overlay .input-container textarea{
    display: none;
}
.ace-overlay  a.edit{
    
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    text-align: right;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
}
.ace-overlay  a.edit:before{
    content: "Click to edit";
    position: absolute;
    right: 0px;
    top: 0px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-size: 100%;
    background-image: linear-gradient(rgb(79, 178, 211), rgb(48, 155, 191));
    padding: 0.5em 1em;
    border: 1px solid rgb(43, 138, 171);
}
.ace-overlay a.edit:hover{
    opacity:1;
    
    
}

.ace-overlay .overlay-container{
    position: fixed;
    z-index: 1000;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
}
.ace-overlay .overlay-container.open{
    display: block;
}
.ace-overlay .backdrop{
    display: block;
    position: absolute;
    z-index: -10;
    width:100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
.ace-overlay .overlay{
    position: relative;
    width: 100%;
    height: 100%;
    background: rgb(204, 204, 204);

}
.ace-overlay .overlay,
.ace-overlay .overlay * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ace-overlay .overlay .header{
    background-color: rgb(255, 255, 255);
    right: 0px;
    position: absolute;
    z-index: 10;
    color: rgb(255, 255, 255);
    background-size: 100%;
    background-image: linear-gradient(rgb(51, 51, 51), rgb(34, 34, 34));
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    overflow: hidden;
    border: 1px solid rgb(0, 0, 0);
}
.ace-overlay .overlay .header .title{
    display: none;
}
.ace-overlay .overlay .header .buttons{
    float:right;
}
.ace-overlay .overlay .header .buttons a{
    display: inline-block;
    font-weight: bold;
    padding: 0.5em 1em;
}
.ace-overlay .overlay .header .buttons a.cancel{
    display: none;
}
.ace-overlay .overlay .editor-container{
    width:100%;
    height: 100%;
}
.ace-overlay .overlay .django-ace-widget{
    width:100% !important;
    height:100% !important;
}