@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
    @font-face {
        font-family: 'fontello';
        src: url('./font/fontello.eot?26733752');
        src: url('./font/fontello.eot?26733752#iefix') format('embedded-opentype'), url('./font/fontello.woff?26733752') format('woff'), url('./font/fontello.ttf?26733752') format('truetype'), url('./font/fontello.svg?26733752#fontello') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    .fullWidth {
        max-width: 100%;
    }
    
    .fullWidth {
        max-width: 100%;
    }
    
    .iconRelContainer {
        text-align: center;
    }
    
    .iconRow {
        position: relative;
    }
    
    .raprotype-icon {
        font-family: "fontello";
        display: inline-block;
        text-decoration: inherit;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1em;
        font-style: normal;
        transition: all ease-in-out 200ms;
        font-size: 30px;
        cursor: default;
        margin-bottom: 0px;
        padding-bottom: 5px;
        position: relative;
        margin: auto;
        margin-top: 0px;
        margin-bottom: 0px;
        transition: all 0.2s ease-in-out;
        position: relative;
        /*        border: solid 1px transparent;*/
    }
    /*
    .raprotype-icon:hover:after {
        left: 100%;
        top: 3px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(136, 183, 213, 0);
        border-left-color: #cccccc;
        border-width: 8px;
        transition: all 250ms ease-in;
    }
*/
    
    .raprotype-icon:hover,
    label.toolLabel:hover ~ .raprotype-icon {
        /* font-size: 60px; */
        /*        border: solid 1px transparent;*/
        /*-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 17px 0px #E8E8E8;*/
        /* position: relative; */
        z-index: 2;
        /* margin-left: -15px; */
        /* margin-top: -15px; */
        color: #008cba;
        /* border-radius: 100%; */
        /*
        border-top-left-radius: 90px;
     border-bottom-left-radius: 90px;
     border-bottom-right-radius: 90px;
*/
        background: #fff;
    }
    
    .raprotype-icon:focus,
    .raprotype-icon:active,
    .raprotype-icon.selected {
        /* font-size: 60px; */
        /*        border: solid 1px #008cba;*/
        /* -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); */
        -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
        /* box-shadow: 0px 0px 17px 0px rgba(97, 182, 217, 0.5); */
        /* position: relative; */
        z-index: 1;
        /* margin-left: -15px; */
        /* margin-top: -15px; */
        color: #008cba;
        /* background: #008CBA; */
    }
    
    .raprotype-icon:active:after,
    .raprotype-icon:focus:after {
        border-left-color: #008CBA;
    }
    
    i#iconPointer,
    i#iconPointer:focus,
    i#iconPointer:active,
    i#iconPointer:hover {
        border: none;
        background: none;
        box-shadow: none;
    }
    
    label.toolLabel {
        font-size: 0.6em;
        text-transform: uppercase;
        background: #c9c9c9;
        color: #fff;
        padding-top: 3px;
        padding-bottom: 2px;
        border-radius: 3px;
        cursor: default;
        /*        margin-top: -1px;*/
    }
    
    label.toolLabel:hover,
    .raprotype-icon:hover + label.toolLabel,
    .raprotype-icon.selected + label.toolLabel {
        background: #008cba;
    }
    
    .leftPanel {
        margin-top: 0;
    }
    
    i {
        color: #8F8F8F;
        border: solid 2px rgba(221, 221, 221, 0);
        /* border-radius: 100%; */
        padding: 8px;
        /* background: #fff; */
        /* border-top: solid 2px #fff; */
        /* border-left: solid 2px #fff; */
        /* border-right: solid 2px #fff; */
    }
    
    body {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 12px;
        box-sizing: border-box;
        overflow-x: hidden;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    .wrapper {
        min-width: 100%;
        min-height: 100vh;
        position: relative;
        top: 0;
        /* bottom: -250px; */
        left: 0;
        z-index: 1;
        background: #fff url('img/raprotype_logo_bg.svg');
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .body:hover {
        /* background: rgba(234, 234, 234, 0.4); */
        /* background: rgba(0, 0, 0, 0.01); */
        position: relative;
        transition: none;
        background: none;
    }
    
    .wrapper:before {
        content: "";
        border: 2px dashed rgba(0, 0, 0, 0.1);
        position: absolute;
        box-sizing: border-box;
        margin: 6px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 3px;
        pointer-events: none;
    }
    
    .wrapper:hover:before {
        content: "";
        border: 2px dashed rgba(0, 0, 0, 0.2);
        position: absolute;
        box-sizing: border-box;
        margin: 6px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 3px;
        pointer-events: none;
    }
    
    .navigation {
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
    }
    
    .menuToggle {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }
    
    label[for="menuToggle"] {
        top: 5px;
        left: 0;
        z-index: 2;
        width: auto;
        height: 100%;
        cursor: pointer;
        text-align: center;
        position: absolute;
        font-size: 20px;
        font-weight: bold;
        color: darkgrey;
        transition: all ease-in-out 300ms;
    }
    
    label[for="menuToggle"]:hover {
        color: #4d4d4d;
    }
    
    .menuToggle + label,
    .wrapper {
        transition: left 0.2s;
    }
    
    .menuToggle:checked + label {
        left: 250px;
    }
    
    .menuToggle:checked ~ .wrapper {
        left: 250px;
        border-left: solid 1px #B1B1B1;
    }
    
    .triggerBox {
        padding: 10px;
        border: 2px solid blue;
        text-align: center;
        margin-top: 20px;
        transition: all 300ms ease-in-out;
        border-radius: 3px;
        font-family: sans-serif;
        cursor: pointer;
    }
    
    .mouseOver {
        border: 2px red solid;
        padding: 15px;
        margin-top: 30px;
    }
    
    .mouseOver.mouseOut {
        border: 2px #FFF solid;
    }
    
    .box {
        margin: 5px;
        border: 1px solid #888;
        font-size: 11px;
        text-align: center;
        line-height: 50px;
    }
    
    .small {
        width: 50px;
        height: 50px;
    }
    
    #insertElement {
        width: 250px;
        background: rgba(247, 247, 247, 0.85);
    }
    
    #insertElement:hover {
        background: rgba(247, 247, 247, 1);
    }
    
    #insertElement fieldset {
        margin-bottom: 0;
        border: none;
        padding: 15px;
    }
    
    .outline {
        border: inset 1px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        background: rgba(236, 236, 236, 0.25);
        min-height: 60px;
        height: auto;
        box-sizing: border-box;
        position: relative;
        /* cursor: pointer; */
        outline: 5px solid rgba(229, 229, 229, 0.40);
        padding: 6px;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    .outlineForm {
        border: dotted 1px rgba(255, 66, 66, 0.67);
        min-height: 1%;
        border-radius: 3px;
        padding: 5px;
    }
    
    .row .outlineForm .row {
        padding-bottom: 5;
    }
    
    .outline .columns {
        outline: none;
        /* background: #fff; */
    }
    
    .outline .columns:hover,
    .outline.columns:hover {
        outline: none;
        background: rgba(255, 255, 255, 0.9);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    input:not([type]),
    input[type="text"],
    input[type="password"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="time"],
    input[type="url"],
    input[type="color"],
    textarea {
        position: relative;
        z-index: 5;
    }
    
    legend.outline {
        display: inline-block;
        min-height: initial;
        outline: none;
        background: transparent;
        padding: 5px 10px;
    }
    
    legend.outline:hover {
        background: #fff;
    }
    
    p.outline {
        display: inline-block;
        min-height: initial;
        outline: none;
        background: rgb(255, 255, 255);
        padding: 0px 6px;
        border: dotted 1px rgba(255, 255, 255, 0.25);
        width: 100%;
        padding-left: 0;
        transition: all ease-in-out 200ms;
    }
    
    p.outline:hover {
        background: rgba(255, 255, 255, 0.8);
        border: dotted 1px rgba(79, 79, 79, 0.25);
        padding-left: 6px;
    }
    
    p.outline:last-child {
        margin-bottom: 0;
    }
    
    fieldset.outlineFieldset {
        border: 1px dotted rgba(41, 0, 162, 0.7);
        border-radius: 3px;
        margin: 0;
    }
    
    fieldset.outlineFieldset:hover {
        background: rgba(41, 0, 162, 0.2);
    }
    
    button,
    .button {
        margin-bottom: 0;
    }
    /*.outline.row:hover ~ .outline {
    border: dotted 1px #fff;
}*/
    
    .outline.row {
        margin-bottom: 5px;
    }
    
    .outline.row:hover {
        background-color: rgb(131, 216, 208);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    .outline.row .outline.row {
        margin-bottom: 0px;
    }
    
    .highlight {
        background-color: rgba(56, 193, 180, 0.62);
        /* transition: all ease-in-out 100ms; */
    }
    
    #containerMaster {
        width: 100%;
        min-height: 100vh;
        cursor: copy;
        padding: 20px;
        margin: auto;
        /* transform: translateX(0); */
        /* transform: translateZ(0); */
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    .pointer #containerMaster {
        cursor: default;
    }
    
    .tinyTxt {
        font-size: 10px
    }
    
    .CodeMirror {
        /*  border: 1px solid #eee; */
    }
    
    div#htmlEditor {
        position: absolute;
        bottom: 15px;
        z-index: 2;
        border: solid 1px rgba(169, 169, 169, 0.35);
        height: 322px;
        overflow: hidden;
        padding: 10px;
        border-radius: 3px;
        box-sizing: border-box;
        width: auto;
        left: 15px;
        right: 15px;
        background: rgb(250, 250, 250);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
    }
    
    div#showHtmlEditor,
    div#hideHtmlEditor {
        position: absolute;
        z-index: 5;
        bottom: 15px;
        right: 15px;
        padding: 4px 10px;
        font-size: 0.8em;
    }
    
    #logo {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        background: url('assets/raprotype_logo.svg');
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    
    .toggleMenu {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .formWrapper {
        position: absolute;
        z-index: 22;
        width: 375px;
        background: rgba(255, 255, 255, 0.95);
        border: solid 1px #DEDEDE;
        border-radius: 3px;
        text-align: left;
        margin-left: 100%;
        top: 0;
        margin-bottom: 30px;
        -webkit-box-shadow: 1px 1px 16px 0px rgba(50, 50, 50, 0.04);
        -moz-box-shadow: 1px 1px 16px 0px rgba(50, 50, 50, 0.04);
        box-shadow: 1px 1px 16px 0px rgba(50, 50, 50, 0.04);
    }
    
    .formWrapper fieldset {
        margin: 0;
        border: none;
        padding-bottom: 10px;
    }
    
    .formWrapper fieldset fieldset {
        border: 1px solid #DEDEDE;
        margin-bottom: 10px;
        padding: 10px 5px 0px;
        border-radius: 3px;
    }
    
    .arrow_box {
        position: relative;
    }
    
    .arrow_box:after {
        right: 100%;
        top: 22px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(136, 183, 213, 0);
        border-right-color: #CFCFCF;
        border-width: 10px;
        margin-top: -10px;
    }
    
    .formWrapper .button-group {
        text-align: center;
    }
    
    .options {
        position: absolute;
        background: #fff;
        width: 100%;
        border: solid 1px #008CBA;
        border-radius: 3px;
        top: 45px;
        box-shadow: 0px 0px 17px 0px #61b6d9;
        z-index: 6;
    }
    
    .options:after {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(136, 183, 213, 0);
        border-bottom-color: #008CBA;
        border-width: 10px;
        margin-left: -10px;
    }
    
    .options ul {
        margin: 0;
        list-style: none;
        margin-top: 10%;
        margin-bottom: 10%;
    }
    
    .colOptions {
        position: relative;
    }
    
    .colOptionsWrap {
        margin-bottom: 15px;
    }
    
    .optionButton {
        padding-top: 5%;
        padding-bottom: 5%;
        margin-bottom: 5%;
        margin-left: auto;
        margin-right: auto;
    }
    
    li.button.tiny.radius.optionButton {
        width: 70%;
        padding: 3px;
        text-align: center;
    }
    
    a.closeButton {
        font-weight: bold;
        padding: 5px;
        position: absolute;
        background: #C9C9C9;
        color: #fff;
        border-radius: 100%;
        width: 25px;
        height: 25px;
        text-align: center;
        top: 10px;
        right: 10px;
        display: block;
        transition: all 300ms ease-in-out;
        cursor: default;
    }
    
    a.closeButton:hover {
        background: darkgrey;
    }
    
    .iconFormContainer {
        /* position: relative; */
        /* left: 150%; */
        /* top: -65px; */
    }
    
    .iconFormContainer fieldset h5 {
        text-align: left;
        margin-top: 0;
        font-size: 16px;
        border-bottom: solid 1px #e4e4e4;
        margin-bottom: 20px;
        padding-bottom: 5px
    }
    
    input[type="checkbox"].checkCenter {
        margin: 0;
    }
    
    *[contenteditable="true"] {
        /*      display: inline-block;*/
    }
    
    input,
    textarea,
    [contenteditable] {
        -webkit-user-select: text;
        user-select: text;
    }
    
    .imgHolder {
        border: 3px dashed #ccc;
        border-radius: 3px;
        width: 100%;
        height: 300px;
        margin: 10px 0;
        position: relative;
        display: table;
        vertical-align: middle;
    }
    
    .imgHolder:before {
        content: "Drag Image Here";
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    
    .imgHolder.hover {
        border: 10px dashed rgba(51, 51, 51, 0.5);
    }
    
    #editor {
        margin: auto;
        position: relative;
        /* bottom: 0; */
        left: 0;
        right: 0;
        height: 250px;
        z-index: 20;
        margin-top: 0;
        box-shadow: none;
    }
    
    .hide {
        display: none;
    }
    
    .CodeMirror-gutter.CodeMirror-linenumbers {
        min-width: 30px;
        background-color: #fafafa;
    }
    
    button.secondary,
    .button.secondary {
        background-color: #e7e7e7;
        border-color: #b9b9b9;
        color: rgba(153, 153, 153, 0.87);
    }
    
    button.secondary:hover,
    button.secondary:focus,
    .button.secondary:hover,
    .button.secondary:focus {
        color: rgba(51, 51, 51, 0.8);
    }
    
    button.secondary:hover,
    button.secondary:focus,
    .button.secondary:hover,
    .button.secondary:focus {
        background-color: rgba(185, 185, 185, 0.61);
    }
    /*drag & drop*/
    
    .over {
        outline: 2px dashed #008cba;
    }
    
    .moving {
        /*        opacity: 0.25;*/
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.6);
    }