@import url('https://fonts.googleapis.com/css?family=Archivo+Black&display=swap');

.flyer-engine-sidebar {
    width: 30vw;
    position: fixed;
    left: 0px;
    top: 80px;
    height: calc(100vh - 80px);
    overflow-y: auto;
    min-width: 300px;
}

div#canvas {
    width: 68vw;
    left: 31vw;
    overflow-x: hidden;
}

.flyer-engine-sidebar-section {
    padding: 1.5%;
}

div#sidebar-project {
    background: #303030;
}

.flyer-project-input {
    background: none;
    border: none;
    color: #fff;
    font-size: 19px;
    padding: 2% 0px;
}

input#flyer-project-label {
    width: 50%;
    font-size: 24px;
    border-bottom: 3px solid #FF9800;
    border-color: #ff9800;
}

.flyer-project-input:focus {
    background: #ffffff;
    color: #303030;
    padding: 2% 2%;
}

.input-enable-button, #flyer-reorder-button {
    background: none;
    border: none;
    color: #fff;
    font-size: 27px;
    padding: 1% 3%;
    cursor: pointer;
}

.input-enable-button:hover {
    background: #2196F3;
}

canvas#artboard-display {
    border: 3px solid #0fc8ff82;
    background: #f7f7f7;
    display: none;
}

input.uploadFile {
    background: #ebebeb;
    padding: 2%;
    width: 100%;
}

#controls label {
    display: block;
    width: 100%;
    color: #fff;
    background: #212121;
    border: none;
    font-size: 150%;
    position: relative;
    padding: 1.5% 0;
    text-align: center;
}

.tool-colorPicker-input {
    border: 3px solid #dcdcdc;
    padding: 2% 0;
    text-align: center;
    cursor: pointer;
    flex: 2;
    margin-bottom: 3%;
}

.tool-colorPicker-input:focus, .tool-colorPicker-input:hover {
    border-color: #dd7f3e;
}

#control-backgroundImage img {
    opacity: .2;
    display: block;
    margin: 2% auto;
    width: 22%;
}

.control-tool-color {
    width: 94%;
    background: #e2e2e2;
    padding: 2%;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

#controls .control-tool-color label {
    background-color: black;
    flex: 1;
    font-size: 100%;
    border-radius: 5px;
    font-weight: bold;
}
.tool-image img {
    /* max-width: 70%; */
    margin: 5% auto;
    position: relative;
    /* max-height: 20vh; */
    background: #ebebeb;
    border-radius: 5px;
    display: none;
}

.tool-image {
    text-align: center;
}

.control-tool-section {
    background: #dadada;
    padding: 3% 1.5%;
}

#controls .control-xy-group label {
    background: #999 !important;
    font-size: 120%;
    flex: 2;
}

#controls .control-xy-group {
    background: #ebebeb;
    width: 100%;
    padding: 2%;
    border-radius: 3px;
    text-align: center;
    max-width: 340px;
    margin: 0 auto;
}

#controls .control-xy-group input {
    border: none;
    text-align: center;
    font-size: 130%;
    width: 48%;
    display: inline-block;
    margin-bottom: auto;
}

.control-xy-group span {
    font-size: 120% !important;
    padding: 0 1%;
    font-weight: bold;
    color: #999;
}

textarea.control-text-input {border: none;width: 100%;background: #303030;padding: 2% 5%;color: #fff;font-weight: bold;font-size: 130%;}

.tool-text-wrap {
    background: #29b0ff;
    width: 100%;
    margin-bottom: 2.5%;
}

.control-group {
    padding: 3%;
}
button.collapse-control {
    position: absolute;
    right: 0px;
    width: 100%;
    border: none;
    top: 0;
    height: 100%;
    background: transparent;
    text-align: right;
    padding-right: 10px;
    color: #fff;
}

button.collapse-control {
    position: absolute;
    right: 0px;
    width: 100%;
    border: none;
    top: 0;
    height: 100%;
    background: transparent;
    text-align: right;
    padding-right: 10px;
    color: #fff;
}

.uploadFile {
    display: none;
}
.tool-area {
    display: flex;
}
#controls label svg {
    position: absolute;
    right: 2%;
    top: 0;
    height: 100%;
}

#controls .tool-image label:hover {
    background: #dc7f3e;
    cursor: pointer;
}
img#preview {
    max-height: calc(100vh - 120px);
}
#controls .control-text-group label {
    background: #ff5830;
    font-size: 120%;
}

.control-text-group {
    background: #f7f7f7;
}

.control-text-group .control-xy-group {
    margin: 10px auto;
}

.control-text-group .control-xy-group label {
    font-size: 110% !important;
    font-weight: bold;
}
div#flyer-engine-artboard {
    text-align: center;
}

input.control-template-name {
    border: none;
    width: 94%;
    padding: 1%;
    font-size: 130%;
}

.control-tab-buttons {
    background: #000;
    padding: 2%;
    text-align: center;
    display: flex;
}


.tabButton {
    background: none;
    color: #fff;
    font-weight: bold;
    padding: 2% 0;
    border: none;
    flex: 1;
}

.tabButton.active {border-bottom: 4px solid orange;color: orange;}
label#control-new-label {
    background: #28c577;
}
input#recolor-new-check {
    display: none;
}
div#addNewLayer {
    padding: 0% 5%;
}

div#addNewLayer button {
    background: #1880bd;
    border: none;
    color: #fff;
    font-weight: bold;
    font-size: 160%;
    width: 100%;
    text-align: center;
    padding: 1% 0;
    border-radius: 3px;
}
button#flyer-project-label-save-button {
    float: left;
}

button#flyer-reorder-button {
    float: right;
}

button#flyer-reorder-button:hover {
    background: #28c676;
    color: #303030;
}

.sortable input, .sortable .control-tool-color, .sortable .control-text-group, .sortable .control-xy-group, .sortable .newText, .sortable .duplicateLayer {
    display: none;
}
span.control-sort-icon {
    display: none;
}
.sortable .label { position: relative;}
.sortable .fa-upload {
    display: none !important;
}
.sortable .control-sort-icon {
    display: block !important;
}

button.deleteLayer {
    background: #e83d3d;
    color: #fff;
    padding: 1% 6%;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    font-size: 80%;
    border-radius: 4px;
    display: block;
    border: none;
    margin: 5% auto;
}
div[data-layer]:hover button.deleteLayer {
    display: block;
}

button.newText {
    background: #44aa44;
    color: #fff;
    border: none;
    padding: 2% 4%;
    font-weight: bold;
    font-size: 125%;
    margin: 20px auto;
    position: relative;
    display: block;
}

.control-text-group .control-xy-group {
    /*display: none;*/
}

.control-text-group:hover .control-xy-group {
    display: block;
}

button.duplicateLayer {
    position: relative;
    border: none;
    color: #fff;
    background: #2ca2e8;
    font-weight: bold;
    text-transform: uppercase;
    padding: 2% 4%;
    display: block;
    margin: 0 auto;
    width: 100%;
    cursor: pointer;
}