* {
    box-sizing: border-box;
}

html, body {
    box-sizing: border-box;
    background-color: hsla(231, 8%, 93%, 1);
    list-style-type: none;
}

html, body, ul {
    padding: 0px;
    margin: 0px;
}

* {
    font-family: 'Roboto', sans-serif;
    font-family: 'Montserrat';
    font-size: 11px;
}

ul {
    list-style-type: none;
}

.wrapper {
    display: grid;
    user-select: none;
}

.box {
    background-color: hsla(231, 8%, 45%, 1);
    color: #fff;
    padding: 10px;
    outline: 1px solid rgb(45, 45, 45);
}

.layout {
    display: grid;
    color: #444;

    grid-template-rows: 50px 1fr;
    grid-template-columns: 250px 1fr 250px;
    height: 100vh;
}

.header {
    grid-area: header;
    background-color: hsl(233, 11%, 9%);

    display: flex;
    align-items: center;
    padding: 10px;
    padding-left: 73px;
    color: #ddd;
    font-size: 23px;
    /*font-family: "Roboto Light";*/

    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}

.sidebar-left {
    background-color: hsla(231, 8%, 84%, 1);
    overflow-y: auto;

    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

.content {
    grid-area: content;
    cursor: crosshair;
    padding: 50px;

    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;

    z-index: 1;
}

.hidden-content {
    grid-area: content;
    background-color: #e5e5e5;
    cursor: crosshair;
    padding: 50px;

    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

.exported-css {
    grid-area: content;
    padding: 50px;

    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;

    z-index: 2;
    position: relative;
}

.exported-css > div {
    max-width: 600px;
    margin: auto;
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0;
    right: 0;
    background-color: #d3d4d9;
    padding: 20px;
    max-height: 600px;
    box-shadow: 10px 10px 40px 0px #0000005c;
}

.exported-css > div textarea {
    background-color: hsla(240, 9%, 98%, 1);
    font-family: monospace;
    width: calc(100% - 40px);
    resize: none;

    position: absolute;
    top: 61px;
    right: 20px;
    bottom: 20px;
}

.exported-css > div textarea.html {
    left: 20px;
}

.exported-css > div textarea.css {
    right: 20px;
}

.sidebar-right {
    grid-area: sidebar-right;
    background-color: hsla(231, 8%, 84%, 1);
    padding: 20px;
    padding-top: 40px;
    padding-left: 0px;
    overflow-y: auto;

    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

.media {
    grid-area: media;
    background-color: #aeaeae;

    padding-left: 50px;
    color: #ddd;
    overflow: hidden;
}

.export {
    grid-area: export;
    padding: 0px 80px;
    color: black;
    justify-self: end;
    display: flex;
    align-items: center;
    border: 1px solid #aaaaaa;
}

.export:hover {
    border: #444444 solid 1px;
}

.label {
    width: 70px;
    display: inline-block;
}

.label.unused {
    color: #909090;
}

.grid-items {
    padding-top: 50px;
    height: 100%;
}

.grid-items li {
    padding-bottom: 10px;
    padding: 10px 70px;
    cursor: default;
}

.grid-items li.type-area, .grid-items li.type-add-new-area {
    padding-bottom: 10px;
    padding: 10px 80px;
}


.grid-items li:hover {
    box-sizing: initial;
    background-color: #e8e8e8;
    outline: 1px solid gray;
}

.properties li {
    margin: 15px 0px;
    position: relative;
}

.screen-type {
    display: inline-block;
    width: 60px;

    height: 100%;
    width: 50px;
    border: 1px solid #aaaaaa;
}

.screen-type:hover {
    border: 1px solid black;
}

.screen-type img {
    position: relative;
    top: 7px;
    left: 10px;
}

fieldset {
    border: solid 1px #c1c1c1;
}

fieldset input {
    width: 30px;
}

fieldset span.label {
    width: 59px;
}

input {
    padding: 0px 5px;
    width: 109px;
}

select {
    padding: 1px;
    width: 109px;
}

fieldset select, fieldset input {
    width: 53px;
}

.box.selected {
    background-color: hsla(229, 9%, 29%, 1)
}

.box:hover {
    background-color: hsl(234, 8%, 54%);
}

.question img {
    filter: invert(1);
    width: 50px;
}

.question {
    position: absolute;
    right: 0px;
    width: 59px;
    top: 0px;
    height: 49px;
    text-align: center;
}

.question:hover {
    background-color: black;
}

.active-Grid .Grid, .active-Box-1 .Box-1, .active-Box-2 .Box-2, .active-Box-3 .Box-3, .active-Box-4 .Box-4, .active-plus .plus {
    background-color: #c3c3c3;
}

.grid-item.selected {
    background-color: #c3c3c3;
}

.header-export, .template {
    position: absolute;
    right: 26px;
    top: 0px;
    width: 83px;
    text-align: center;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.template {
    right: 121px;
    width: 102px;
}

.header-export:hover, .header-export.selected, .template:hover, .template.selected {
    cursor: pointer;
    background: black;
}

.template-contents li {
    display: inline-block;
    padding: 0px;
    padding-bottom: 10px;
    padding-right: 10px;
    transform: scale(1.0);
    filter: brightness(100%);
    transition: transform 0.2s, filter 0.2s;
}

.template-contents li:hover {
    transform: scale(1.05);
    filter: brightness(130%);
    transition: transform 0.2s, filter 0.2s;
}

.template >  img {
    padding-right: 5px;
}

.template-contents {
    position: absolute;
    top: 50px;
    background-color: #000000;
    width: 582px;
    z-index: 100;
    box-shadow: 10px 10px 40px 0px #0000005c;
    left: -480px;
    text-align: left;
    padding: 10px;
    padding-left: 20px;
    padding-top: 20px;
}

.grid-item {
    position: relative;
}

.grid-item-delete {
    position: absolute;
    top: 11px;
    right: 16px;
    user-select: none;
}

.new-content {
    padding: 50px;

    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;

    z-index: 3;
}

.new-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.export-header {
    height: 40px;
    background-color: #26272d;
    top: 0;
    position: absolute;
    left: 0px;
    width: 100%;
    padding-left: 20px;
}

.export-header div {
    height: 100%;
    color: white;
    top: 0px;
    padding: 14px 17px;
    display: inline-block;
    cursor: pointer;
}

.export-header div:hover, .export-header div.selected {
    background-color: black;
}

.export-header .both {
    left: 22px;
}

.export-header .html {
    left: 122px;
}

.export-header .css {
    left: 222px;
}

.export-header .close {
    float: right;
}

.select-editable {
    position: relative;
    background-color: white;
    border: solid rgb(169, 169, 169) 1px;
    width: 109px;
    height: 17px;
    display: inline-block;
    top: 5px;
}

.select-editable select {
    position: absolute;
    top: 0px;
    left: 0px;
    border: none;
    height: 100%;
    width: 100%;
}

.select-editable input {
    position: absolute;
    top: 0px;
    left: 0px;
    border: none;
    height: 100%;
    width: calc(100% - 20px);
}

.select-editable select:focus, .select-editable input:focus {
    outline: none;
}

.select-editable.small, input.small {
    width: 53px;
}

.disabled {
    background-color: #bec0c3;
    border-radius: 11px;
    padding: 3px 5px;
    white-space: nowrap;
    line-height: 23px;
    cursor: pointer;
    font-size: 10px;
}

.disable {
    cursor: pointer;
    visibility: hidden;
    margin-right: 7px;
    margin-left: 10px;
}

li:hover .disable {
    visibility: visible;
}

li:hover .force-off {
    visibility: hidden;
}

li.disabled-list, li fieldset {
    margin-left: 20px;
}

.pseudo-box {
    background-color: #5f606b00;
    color: #ff000000;
    padding: 0px;
    outline: 1px dashed #aeb0b5;
    z-index: -1;
}

.context-menu {
    position: absolute;
    z-index: 100;
    background-color: #26272d;
    color: #ddd;
    line-height: 1.5em;
    font-size: 14px;
    /*font-family: "Roboto Light";*/
    border: solid 1px #949494;
}

.context-menu li {
    cursor: pointer;
    padding: 7px 20px;
}


.context-menu .cell-alignment {
    position: relative;
    height: 150px;
    width: 150px;
}

.context-menu .cell-alignment > div {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
}

.context-menu .cell-alignment > div:hover, .context-menu .text-item:hover {
    background-color: #3b3c44;
}

.context-menu .cell-alignment .top-left {
    top: 0px;
    left: 0px;
}

.context-menu .cell-alignment .top {
    top: 0px;
    left: 50px;
}

.context-menu .cell-alignment .top-right {
    top: 0px;
    left: 100px;
}

.context-menu .cell-alignment .left {
    top: 50px;
    left: 0px;
}

.context-menu .cell-alignment .middle {
    top: 50px;
    left: 50px;
}

.context-menu .cell-alignment .right {
    top: 50px;
    left: 100px;
}

.context-menu .cell-alignment .bottom-left {
    top: 100px;
    left: 0px;
}
.context-menu .cell-alignment .bottom {
    top: 100px;
    left: 50px;
}

.context-menu .cell-alignment .bottom-right {
    top: 100px;
    left: 100px;
}

.logo {
    font-size: 38px;
    font-weight: 200;
    padding-right: 134px;
    position: relative;
    top: -1px;
    padding-left: 5px;
}

.site-name {
    font-size: 23px;
    font-weight: 300;
    position: relative;
    top: 2px;
}