html, body {
    height: 100%;
    width: 100%;
}

/*-------------------------------------------------------------*/
.design-surface {
    height: 100%;
    background-color: white;
}

.design-surface canvas {
    position: absolute;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
}

.design-surface canvas:last-child {
    position: static;
}

/*-------------------------------------------------------------*/
textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
}

textarea::-webkit-scrollbar {
    height: 0;
    overflow: visible;
    width: 10px;
    border-left: 1px solid rgb(229, 229, 229);
}

textarea::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
    border-width: 1px 1px 1px 6px;
}

textarea::-webkit-scrollbar-button {
    height: 0;
    width: 0;
}

textarea::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 4px;
}

textarea::-webkit-scrollbar-corner {
    background: transparent;
}

/*-------------------------------------------------------------*/
::selection, ::-moz-selection {
    background: #00A2E8;
    color: #fff;
    text-shadow: none;
}

/*-------------------------------------------------------------*/
html, body, input, textarea, h1, h2 {
    margin: 0;
    padding: 0;

    word-wrap: break-word;

    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*-------------------------------------------------------------*/

h1, .line-width-done, .colors-done, .additional-close {
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 243, 243, 1) 97%, rgba(237, 237, 237, 1) 97%, rgba(255, 255, 255, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(97%, rgba(243, 243, 243, 1)), color-stop(97%, rgba(237, 237, 237, 1)), color-stop(100%, rgba(255, 255, 255, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 243, 243, 1) 97%, rgba(237, 237, 237, 1) 97%, rgba(255, 255, 255, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 243, 243, 1) 97%, rgba(237, 237, 237, 1) 97%, rgba(255, 255, 255, 1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 243, 243, 1) 97%, rgba(237, 237, 237, 1) 97%, rgba(255, 255, 255, 1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 243, 243, 1) 97%, rgba(237, 237, 237, 1) 97%, rgba(255, 255, 255, 1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
}

/*-------------------------------------------------------------*/

a {
    color: #0b7aff;
    text-decoration: none;
}

a:hover {
    color: #043877;
}


/*-------------------------------------------------------------*/
.tool-box {
    border-right: 1px solid #E5E5E5;
    position: absolute;
    top: 0;
    width: 47px;
    background-color: #FFF;
    overflow: hidden;
    height: 100%;
    margin: 5px;
}

.tool-box canvas {
    border-bottom: 1px solid #E5E5E5;
    border-radius: 2px;
    margin-top: -4px;
}

#tool-box .icon-btn i {
    font-size: 18px;
    font-weight: 600;
}

.tool-box canvas:first-child, .tool-box canvas:first-child:hover {
    margin-top: 0;
    border-top: 0;
}

.icon-btn i {
    font-size: 18px;
    font-weight: 600;
}

.selected-shape, .tool-box canvas:hover {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .1);
}

/*-------------------------------------------------------------*/
.preview-panel {
    position: absolute;
    right: 10px;
    background-color: #FBFBFB;
    bottom: 0;
}

.preview-panel div {
    border: 1px solid #E5E5E5;
    display: inline-block;
    padding: 5px 10px;
}

.preview-panel #code-preview {
    margin-left: -6px;
}

.preview-panel div {
    border: 1px solid #E5E5E5;
}

.preview-panel div:not(.preview-selected) {
}

.preview-panel div {
    border: 1px solid rgb(9, 159, 243);
}

.preview-selected {
    margin-top: -4px;
    background-color: rgb(6, 205, 255);
    color: white;
}

/*-------------------------------------------------------------*/
input, select {
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    border: 1px solid #D9D9D9;

    -webkit-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;

    outline: none;
}

input:focus {
    border: 1px solid #043877;
}

/*-------------------------------------------------------------*/
.allow-select {
    -webkit-user-select: initial;
    -moz-user-select: initial;
    user-select: initial
}

/*-------------------------------------------------------------*/
/*.arc-range-container*/
/*{*/
/*    position: absolute;*/
/*    z-index: 1000;*/
/*    display: none;*/
/*}*/
/*.arc-range*/
/*{*/
/*    font-size: 18px;*/
/*    padding: 2px 16px;*/
/*    text-align: center;*/
/*    width: 40px;*/
/*}*/
/*.arc-range-container-guide*/
/*{*/
/*    margin-top: 10px;*/
/*    color:#C5C5C5;*/
/*}*/

.arc-range-container {
    position: absolute;
    z-index: 1000;
    display: none;
}

.arc-range {
    font-size: 18px;
    padding: 2px 16px;
    text-align: center;
    width: 40px;
}

.arc-range-container-guide {
    margin-top: 10px;
    color: #C5C5C5;
}

/*-------------------------------------------------------------*/
.code-container {
    position: absolute;
    top: 0;
    width: 100%;
    display: none;
}

.code-text {
    resize: none;
    width: 99%;
    height: 300px;
    padding: 15px;
    outline: 0;
    border: 0;
    border-top: 1px solid #E5E5E5;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Courier New", monospace;
    color: #666;
}

/*-------------------------------------------------------------*/
.options-container {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #E5E5E5;
    border-left: 0;
    background-color: #FBFBFB;
    display: none;
}

.options-container div {
    border-bottom: 1px solid #E5E5E5;
    padding: 5px;
}

.options-container div:last-child {
    border-bottom: 0;
}

/*-------------------------------------------------------------*/

.context-popup {
    position: absolute;
    display: none;
    padding: 5px;
    border: 1px solid #E5E5E5;
    border-left: 0;
    background-color: #FBFBFB;
    box-shadow: inset 0 0 14px rgb(229, 229, 229);
}

.line-width-text, .colors-container input {
    width: 25px;
    padding: 2px 5px;
    text-align: center;
}


/*.done*/
/*{*/
/*    border: 1px solid #E5E5E5;*/
/*    display: inline-block;*/
/*    padding: 4px 10px;*/
/*    border-radius: 3px;*/
/*}*/
.done {
    border: 1px solid rgb(229, 229, 229);
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    background: #615aa8;
    color: #fff;
    cursor: pointer;
}

/*.done:hover*/
/*{*/
/*    box-shadow: inset 0 0 12px white;*/
/*}*/
/*.done:active*/
/*{*/
/*    box-shadow: inset 0 0 52px white;*/
/*}*/

/*-------------------------------------------------------------*/

.colors-container label {
    width: 100px;
    display: inline-block;
}

.colors-container input {
    width: 100px;
    text-align: left;
}

.colors-container .input-div {
    margin-bottom: 5px;
}

/*-------------------------------------------------------------*/

.additional-container label, .additional-container select {
    width: 200px;
    display: inline-block;
}

.additional-container select {
    width: 120px;
}


.txtBox {
    position: absolute;
    top: -100000px;
    left: -100000px;
    z-index: 1000000;
    border: 0;
    outline: none;
    font-size: 15px;
    padding: 0;
    margin: 0;
    background: transparent;
    /*width: 100%;100*/
}