@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900);

body, html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
#imp-editor-wrap * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    outline: 0 !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#imp-editor-wrap input[type="color"], #imp-editor-wrap input[type="text"], #imp-editor-wrap textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
#imp-editor-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f1f1f1;
    padding: 0;
    margin: 0;
}
#imp-editor-inner-wrap {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#imp-editor-top {
    height: 96px;
    z-index: 1;
}
#imp-editor-bottom {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: row;
}
.bg-info, .bg-danger {
    padding: 8px 16px;
}
#load-code-error {
    display: none;
}
#wcp-editor-add-layer-name-error, #wcp-editor-add-layer-url-error, #wcp-editor-add-layer-url-invalid-error {
    color: red;
    display: none;
    margin-left: 5px;
    line-height: 24px;
}

/* TOOLBAR */
#imp-editor-topbar-wrap {
    flex: 1;
    height: 96px;
    padding: 16px;
    background: #333;
}
#imp-editor-topbar-wrap h3 {
    display: inline-block;
    line-height: 64px;
    padding: 0;
    letter-spacing: -2px;
    margin: 0 20px 0 0;
    color: white;
}
.editor-topbar-button {
    margin: 0 4px 0 0;
}
.toolbar-block {
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* SIDEBARS */

/* SIDEBAR LEFT */
#imp-editor-sidebar-left-wrap {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 220px;
    background: white;
    border-right: 1px solid #ddd;
    z-index: 1;
    padding: 16px;
    overflow-y: auto;
}

/* SIDEBAR RIGHT */
#imp-editor-sidebar-right-wrap {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 480px;
    padding: 0;
    background: white;
    border-left: 1px solid #ddd;
    z-index: 1;
    display: flex;
    flex-direction: column;
}
#shape-list-group {
    border-bottom: 1px solid #ddd;
    border-left: none;
    border-right: none;
    margin: 0;
    position: relative;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
}
#shape-settings-wrap {
    flex: 2;
    padding: 16px;
    overflow-y: auto;
}
#shape-list-group .shape-list-group-item {
    border-left: none;
    border-right: none;
    background-color: #fafafa;
    border-radius: 0;
}
#shape-list-group .shape-list-group-item:hover {
    background-color: #f5f5f5;
}
#shape-list-group .shape-list-group-item.active {
    background-color: #0258D0;
}
.shape-list-group-item:first-child {
    border-top: none;
}
.imp-spot-control-button {
    display: none !important;
    float: right;
    margin-top: -4px;
    margin-left: 4px;
}
#imp-spot-button-move-down, #imp-spot-button-duplicate {
    margin-right: 8px;
}
#shape-list-group .shape-list-group-item:hover .imp-spot-control-button, #shape-list-group .shape-list-group-item.active .imp-spot-control-button {
    display: block !important;
}
#imp-editor-sidebar-right-wrap legend {
    cursor: pointer;
}
.imp-icon-settings-tab-expanded {
    display: inline-block !important;
}
.imp-icon-settings-tab-collapsed {
    display: none !important;
}
.imp-settings-tab-expanded .imp-icon-settings-tab-expanded {
    display: none !important;
}
.imp-settings-tab-expanded .imp-icon-settings-tab-collapsed {
    display: inline-block !important;
}
#imp-spot-icons-container {
    height: 400px;
    overflow-y: auto;
}
.imp-spot-icon {
    display: inline-block;
    border-radius: 4px;
    margin: 0 4px 4px 0;
    width: 56px;
    height: 56px;
    padding: 8px;
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.imp-spot-icon:hover {
    background: #0258D0;
}
.imp-spot-icon:hover path {
    fill: white !important;
}
.imp-editor-shape-icon-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
    transform: scale(1, 0.25);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&amp;0.53+0,0.3+10,0.13+28,0.04+44,0+67 */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.13) 28%, rgba(0,0,0,0.04) 44%, rgba(0,0,0,0) 67%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.3) 10%,rgba(0,0,0,0.13) 28%,rgba(0,0,0,0.04) 44%,rgba(0,0,0,0) 67%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.3) 10%,rgba(0,0,0,0.13) 28%,rgba(0,0,0,0.04) 44%,rgba(0,0,0,0) 67%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* LOAD WIDGET WINDOW */
.widget-load {
    cursor: pointer;
}
.saved-widgets-controls {
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* TOOLBAR */
#imp-toolbar {
    position: absolute;
    left: 236px;
    top: 16px;
    z-index: 1;
}
#imp-toolbar .imp-toolbar-button {
    padding: 10px;
}
.imp-icon-tool-spot {
    width: 20px;
    height: 20px;
}
.imp-icon-tool-spot svg {
    margin: -2px 0 0 -2px;
}
.imp-icon-tool-spot ellipse, .imp-icon-tool-spot line {
    fill: none;
    stroke: black;
    stroke-width: 2px;
}
.imp-icon-tool-rect {
    position: relative;
    width: 20px;
    height: 20px;
}
.imp-icon-tool-rect:before {
    position: absolute;
    display: block;
    content: '';
    left: 0;
    top: 2px;
    width: 20px;
    height: 14px;
    border: 2px solid black;
    border-radius: 3px;
}
.imp-icon-tool-oval {
    width: 20px;
    height: 20px;
    position: relative;
}
.imp-icon-tool-oval:before {
    position: absolute;
    display: block;
    content: '';
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid black;
    border-radius: 20px;
}
.imp-icon-tool-poly {
    width: 20px;
    height: 20px;
}
.imp-icon-tool-poly svg {
    margin: -2px 0 0 -2px;
}
.imp-icon-tool-poly svg polygon {
    fill: none;
    stroke: black;
    stroke-width: 2px;
}
.imp-icon-tool-poly svg ellipse {
    fill: black;
}

/* CANVAS */
#imp-editor-tips-container {
    position: absolute;
    left: 0;
    top: -50px;
    width: 100%;
    height: 50px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 1;
    transition: top 0.25s cubic-bezier(.55,0,.1,1);
    -moz-transition: top 0.25s cubic-bezier(.55,0,.1,1);
    -webkit-transition: top 0.25s cubic-bezier(.55,0,.1,1);
}
#imp-editor-tips-container.imp-tips-visible {
    top: 0;
}
#imp-tip-wrap {
    position: relative;
    background: rgba(0, 0, 0, 0.9);
    padding: 0 40px 0 20px;
    margin-top: 10px;
    border-radius: 4px;
    height: 40px;
    line-height: 40px;
    color: #aaa;
}
#imp-tip-wrap strong {
    color: white;
}
#imp-tip-close-button {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    text-align: center;
    color: white;
    cursor: pointer;
}
#imp-editor-canvas-background {
    position: relative;
    display: flex;
    flex: 1;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAIAAACQKrqGAAAASUlEQVQokc3QsQkAMAhE0TPO4v5zuIFTCA5wkD4RYpkr5WHxxd3NTFXxmmTmxAFYQwdgDd2/NCJIHkepqpuSvMv0X9uCnxZotwF/OhEkm8OoNAAAAABJRU5ErkJggg==');
    justify-content: center;
    align-items: center;
    z-index: 0;
    padding: 0 480px 0 220px;
}
#wcp-editor-canvas {
    position: absolute;
    background: white;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#wcp-editor-canvas img {
    pointer-events: none;
}
#imp-editor-image-loader {
    display: none;
}
.imp-editor-canvas-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
#imp-editor-canvas-overlay-zoom-in {
    cursor: -webkit-zoom-in;
}
#imp-editor-canvas-overlay-zoom-out {
    cursor: -webkit-zoom-out;
}
#imp-editor-canvas-overlay-drag {
    cursor: -webkit-grab;
}
.modal-dialog {
    z-index: 1050;
}
#imp-editor-shapes-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#imp-editor-image-backgrounds-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.imp-editor-shape-background-image {
    position: absolute;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* CANVAS LAYERS SELECT */
#select-canvas-layer {
    position: absolute;
    right: 0;
    top: -35px;
    height: 28px;
    line-height: 28px;

    /* wordpress fixes */
    padding: inherit;
    vertical-align: inherit;
    margin: 0;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    box-shadow: none;
    background-color: rgb(248, 248, 248);
    color: black;
    outline-color: rgb(34, 34, 34);
    outline-style: none;
    outline-width: 0px;
    border: 1px solid rgb(166, 166, 166);
}

/* spot */
.imp-editor-shape {
    position: absolute;
    cursor: pointer;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.imp-editor-shape img {
    width: 100%;
}
.imp-editor-shape.imp-editor-poly {
    cursor: default;
}
.imp-editor-shape.imp-editor-poly svg, .imp-editor-shape.imp-editor-path svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
.imp-editor-shape.imp-editor-poly polygon {
    cursor: pointer;
}
.imp-editor-shape.selected {
    z-index: 999;
    cursor: move;
}
.imp-editor-shape.selected.imp-editor-poly {
    cursor: default;
}
.imp-editor-shape .imp-selection {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;

    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-size: 20px 20px;

    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}
.imp-editor-shape.selected .imp-selection {
    display: block;
}
.imp-editor-spot-fontawesome-icon {
    text-align: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.imp-editor-shape.imp-editor-text {
    white-space: nowrap;
}

.imp-selection-translate-boxes {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.imp-selection-translate-box {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #333;
    display: none;
    margin: -4px 0 0 -4px;
    border: 1px solid rgba(255,255,255,0.75);
}
.imp-editor-shape.selected .imp-selection .imp-selection-translate-box {
    display: block;
    z-index: 1;
}
.imp-selection-translate-box-1 {
    left: 0;
    top: 0;
    cursor: nwse-resize;
}
.imp-selection-translate-box-2 {
    left: 50%;
    top: 0;
    cursor: ns-resize;
}
.imp-selection-translate-box-3 {
    left: 100%;
    top: 0;
    cursor: nesw-resize;
}
.imp-selection-translate-box-4 {
    left: 100%;
    top: 50%;
    cursor: ew-resize;
}
.imp-selection-translate-box-5 {
    left: 100%;
    top: 100%;
    cursor: nwse-resize;
}
.imp-selection-translate-box-6 {
    left: 50%;
    top: 100%;
    cursor: ns-resize;
}
.imp-selection-translate-box-7 {
    left: 0;
    top: 100%;
    cursor: nesw-resize;
}
.imp-selection-translate-box-8 {
    left: 0;
    top: 50%;
    cursor: ew-resize;
}
.imp-selection.imp-expanded-selection {
    padding: 20px;
    margin: -20px 0 0 -20px;
    background: none;
    box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    border: 1px solid rgba(0, 0, 0, 0.5);
}
.imp-selection.imp-expanded-selection:before {
    display: block;
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(255, 255, 255, 0.75);
    box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
}

#temp-poly {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 499;
}
#temp-poly polygon {
    fill: rgba(0, 0, 0, 0.25);
    stroke-width: 1px;
    stroke: white;
}
#temp-poly circle {
    fill: rgba(0, 0, 0, 0.5);
    stroke-width: 1px;
    stroke: white;
}
#temp-poly circle[data-index="0"] {
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.5);
    stroke-width: 3px;
    stroke: white;
}

.imp-poly-control-point {
    display: none;
    z-index: 5;
    position: absolute;
    cursor: pointer;
    width: 10px;
    height: 10px;
    background: #333;
    border: 1px solid rgba(255,255,255,0.75);
    margin: -5px 0 0 -5px;
    border-radius: 10px;
}
.imp-poly-control-point:hover, .imp-poly-control-point.active {
    border: 1px solid black;
    background: white;
}
.imp-editor-shape.selected .imp-poly-control-point {
    display: block;
}
.imp-editor-shape .imp-editor-shape-poly-svg-overlay {
    position: absolute !important;
    z-index: 3 !important;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    fill: transparent !important;
    stroke-width: 0;
    cursor: default;
}
.imp-editor-shape .imp-editor-shape-poly-svg-overlay polygon {
    cursor: pointer;
}
.imp-editor-shape.selected .imp-editor-shape-poly-svg-overlay polygon {
    cursor: move;
}
.imp-editor-poly-svg-temp-control-point {
    display: none;
    position: absolute;
    z-index: 4;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border: 1px solid rgba(255, 255, 255, 1);
    background: #333;
    border-radius: 20px;
    cursor: pointer;
    opacity: 0.5;
}
.imp-editor-poly-svg-temp-control-point:hover {
    border: 1px solid rgba(255, 255, 255, 1);
    background: #333;
    opacity: 0.8;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
}
.imp-editor-poly-svg-temp-control-point-line {
    position: relative;
    z-index: 3;
    stroke-width: 3px;
    stroke: white;
}
.imp-editor-svg-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}
@-o-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}
@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}

/* misc */
#modal-generate-code {
    overflow-x: hidden;
    overflow-y: scroll;
}
#modal-generate-code pre, #modal-generate-code pre span {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
#textarea-generated-code {
    font-family: monospace;
    font-size: 12px;
    line-height: 1.846;
}
#modal-saves .modal-body {
    max-height: 600px;
    overflow-y: auto;
}
.modal-info-text {
    background: #0258D0;
    color: white;
    font-size: 14px;
    padding: 12px;
    border-radius: 3px;
}
.modal-info-text a {
    color: white;
}
.modal-error-text {
    background: #e03c1c;
    color: white;
    font-size: 14px;
    padding: 12px;
    border-radius: 3px;
}
.modal-error-text a {
    color: white;
}
#textarea-error-saving {
    width: 100%;
    height: 240px;
    margin: 20px 0 0 0;
    display: block;
    padding: 12px;
    font-family: monospace;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#wcp-editor-textarea-export, #wcp-editor-textarea-import {
    font-family: monospace;
}
#wcp-editor-control-import-type {
    margin-bottom: 20px;
}

/* content builder */

#imp-editor-tooltip-content-builder-wrap {
    z-index: 99999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    opacity: 0;
    transition: opacity 0.20s cubic-bezier(.55,0,.1,1);
    -moz-transition: opacity 0.20s cubic-bezier(.55,0,.1,1);
    -webkit-transition: opacity 0.20s cubic-bezier(.55,0,.1,1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#imp-editor-tooltip-content-builder-wrap.imp-visible {
    opacity: 1;
}
#imp-editor-tooltip-content-builder-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: #000;
    opacity: 0.8;
}
#imp-editor-tooltip-content-builder-description {
    position: relative;
    z-index: 1;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: white;
    text-align: center;
    margin: 0 40px;
}
#imp-editor-tooltip-content-builder {
}
#imp-editor-tooltip-content-builder-tooltip-wrap {
    margin: 60px;
    position: relative;
    z-index: 2;
    padding: 20px;
    background: black;
}
#imp-editor-done-editing-tooltip {
    position: relative;
    z-index: 3;
    width: 110px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 48px;
    height: 48px;
    margin-bottom: 40px;
}
#imp-editor-tooltip-content-builder-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    height: 81px;
    color: white;
    font-size: 24px;
    text-align: center;
    line-height: 81px;
    cursor: pointer;
    margin-bottom: 60px;
}

/* import modal */
#wcp-editor-import-info {
    background: rgba(33, 150, 243, 0.12);
    font-size: 14px;
    padding: 12px;
    border-radius: 3px;
    margin-top: 20px;
    display: none;
    width: 400px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#wcp-editor-textarea-import {
    width: 400px;
}

/* generate code modal */

#imp-generated-code-wrap {
    width: 600px;
}
#imp-generated-code-wrap .generated-code-help {
    background: #dfecff;
    color: #333;
    font-size: 14px;
    padding: 12px;
    border-radius: 3px;
}
#imp-generated-code-wrap pre {
    padding: 12px;
    background: #f1f1f1;
    font-size: 14px;
}
#imp-generated-code-wrap .em-code {
    color: #6ca6ff;
    font-weight: 700;
}
#textarea-generated-code {
    border: none;
    box-shadow: none;
    background: #f1f1f1;
    color: #333;
    border-radius: 3px;
    width: 100%;
    margin: 12px 0 0 0;
    display: block;
    padding: 12px;
    font: 'Roboto', monospace;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* misc */
#imp-poly-tooltip {
    z-index: 500;
    position: absolute;
    padding: 0 10px;
    background: #222;
    color: white;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 32px;
    border-radius: 3px;
    padding-right: 32px;
}
#imp-poly-tooltip:before {
    position: absolute;
    display: block;
    content: '';
    border-color: #222;

    right: -6px;
    top: 50%;
    margin-top: -6px;

    width: 0;
    height: 0;

    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;

    border-left: 6px solid #222;
}
#imp-poly-tooltip-close-button {
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}
#imp-editor-no-shape-selected-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#imp-editor-no-shape-selected-wrap span {
    opacity: 0.5;
}

/* tooltip */
#imp-editor-shape-tooltip-wrap {
    position: absolute;
}
#imp-editor-shape-tooltip {
    display: block;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#imp-editor-tooltip-bar-wrap {
    z-index: 2;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -32px;
    background: #FFFFFF;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.18);
    border-radius: 3px;
    font-size: 12px;
    color: black;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
    white-space: nowrap;
}
.imp-editor-tooltip-bar-button {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid #B8B8B8;
    border-left: none;

}.imp-editor-tooltip-bar-button:first-child {
    border-radius: 3px 0 0 3px;
    border: 1px solid #B8B8B8;
}
.imp-editor-tooltip-bar-button:last-child {
    border-radius: 0 3px 3px 0;
}
.imp-editor-tooltip-bar-button-blue {
    border: 1px solid #0258D0;
    background: #0258D0;
    color: white;
}
.imp-editor-tooltip-bar-button:hover {
    background: #f5f5f5;
}
.imp-editor-tooltip-bar-button-blue:hover {
    background: #0258D0;
    filter: brightness(1.1);
    -moz-filter: brightness(1.1);
    -webkit-filter: brightness(1.1);
}
.imp-editor-tooltip-bar-button[data-editor-object-type="14"] {
    border-right: none;
}
#imp-editor-shape-tooltip.selected {
    cursor: move;
    z-index: 999;
}
#imp-editor-shape-tooltip .imp-selection {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-size: 20px 20px;

    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}
#imp-editor-shape-tooltip.selected .imp-selection.imp-expanded-selection {
    padding: 15px;
    margin-left: -15px;
    margin-top: -15px;
}
#imp-editor-shape-tooltip.selected .imp-selection {
    display: block;
}
#imp-editor-shape-tooltip.selected .imp-selection .imp-selection-translate-box {
    display: block;
    z-index: 1;
}

/* whats new 5.0 */
.wcp-tour-root-simple {
    font-family: 'Source Sans Pro', sans-serif;
}
.wcp-tour-root-simple h1 {
    margin: 0;
    font-size: 52px;
    font-weight: 900;
}
.wcp-tour-root-simple h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
}
.wcp-tour-root-simple h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
}
.wcp-tour-root-simple p {
    font-size: 14px;
}
.wcp-tour-root-simple ul {
    
}
.wcp-tour-root-simple ul li {
    font-size: 14px;
}
.wcp-tour-simple-slide-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding-bottom: 60px;
}
#whats-new-tour-slide-1 {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#whats-new-tour-slide-1 img {
    margin-bottom: 20px;
}
#whats-new-tour-slide-2 {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#whats-new-tour-slide-2 img {
    border: 2px solid #222222;
    box-shadow: 0 2px 20px 0 rgba(0,0,0,0.50);
}
#whats-new-tour-slide-3 {
    padding: 40px;
    display: flex;
}
#whats-new-tour-slide-3 img {
    margin: 40px 0 0 40px;
}
#whats-new-tour-slide-4 {
    display: flex;
    padding: 40px;
}
#whats-new-tour-slide-4 img {
    margin-right: 40px;
}
#whats-new-tour-slide-5 {
    display: flex;
    padding: 40px;
}
#whats-new-tour-slide-6 {
    display: flex;
    flex-direction: column;
    padding: 40px;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 100%;
}
#whats-new-tour-slide-6 h3 {
    margin-bottom: 20px;
}
#whats-new-tour-slide-6 > div {
    display: flex;
}
#whats-new-tour-slide-6 ul {
    width: 50%;
}
#whats-new-tour-slide-6 ul li {
    margin: 10px 0;
}