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

body {
    width: 100%;
    height: 100%;
    margin: 0;
}

:root {
    --text-color: white;
    --container-color: #555;
    --header-color: #444;
    --header-settins-color: #222;
    --header-active-color: #333;
    --settings-color: rgba(1, 1, 1, .75);
    --hover-color: red;
    --header-height: 40px;
    --icon-size: 15px;
}

/* EDITOR */

svg {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--text-color);
    cursor: pointer;
}

    svg:hover {
        fill: var(--hover-color);
    }

.editor-container {
    width: 100%;
    height: 100%;
    background-color: var(--container-color);
}

.editor-header {
    width: calc(100% - 100px);
    height: var(--header-height);
    overflow: hidden;
    background-color: var(--header-color);
    display: flex;
    float: left;
    align-items: center;
}

.editor-header-icons {
    display: flex;
}

    .editor-header-icons svg {
        margin-left: .5rem;
    }

.editor-header-tab {
    cursor: pointer;
    color: var(--text-color);
    padding: 0 .5rem;
    width: 15rem;
    flex-basis: 15rem;
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: center;
}

    .editor-header-tab h4 {
        margin: 0;
        font-weight: normal;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .editor-header-tab:hover {
        opacity: .65;
    }

    .editor-header-tab.active {
        background-color: var(--header-active-color);
        width: auto;
    }

.editor-header-tab-title {
    display: flex;
    width: calc(100% - 1.5rem);
}

.editor-header-settings {
    color: var(--text-color);
    background-color: var(--header-settins-color);
    width: 100px;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.ace_editor {
    width: 100%;
    height: calc(100%);
}

.editor-content {
    width: 100%;
    height: calc(100% - 2.5rem);
    position: relative;
}

/* SETTINGS */

.settings {
    position: absolute;
    top: 0;
    z-index: 20;
    left: 0;
    padding: .5rem;
    width: calc(100%);
    height: calc(100%);
    background-color: var(--settings-color);
    color: white;
}

    .settings h2 {
        margin-top: 0;
    }

    .settings select {
        width: 100%;
        padding: .25rem;
    }

    .settings label {
        margin-bottom: 1rem;
        display: inherit;
        padding: .5rem;
    }


/* LOADER */

.lds-hourglass {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: auto;
    height: 100%;
    position: absolute;
    z-index: 10;
    background-color: var(--header-active-color);
}

    .lds-hourglass:after {
        content: " ";
        display: block;
        border-radius: 50%;
        width: 0;
        height: 0;
        margin: 8px;
        box-sizing: border-box;
        border: 32px solid #fff;
        border-color: #fff transparent #fff transparent;
        animation: lds-hourglass 1.2s infinite;
        margin: auto;
        margin-top: 1rem;
    }

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}