:root {
    /* Root fonts */
    font-family: 'Myriad Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 1rem !important;
    box-sizing: unset !important;

    /* Main color palette */
    --color-main: #544e8f;
    --color-main-bland: rgba(148, 210, 252, 0.3);
    /* Selected */
    --color-main-1: #4FB35D;
    --color-main-1-bland: rgba(96, 139, 224, 0.3);
    /* Hover selected */
    /* --color-main-2: #8AE1FF; */
    /* --color-main-4: rgba(178, 108, 252, 0.3); */

    /* Background colors */
    --color-off-white: #F0F0F2;
    /* editor background */
    --color-off-white-bland: rgba(240, 240, 242, 0.3);
    --color-off-white-2: #E3E3E5;
    /* Hover */

    --brand-primary: #ffa3ba;
    --brand-secondary: #8AE1FF;
    --brand-secondary-light: #c5f0ff;

    /* Sizes */
    --height-nav: 2rem;
    --padding-nav: 1rem;
    --height-footer: 0rem;
    --padding-footer: 0rem;
    --height-main: calc(100vh - (var(--height-nav) + (var(--padding-nav) * 2)) - (var(--height-footer) + (var(--padding-footer) * 2)));

    --width-min: 70rem;
    --width-main-left: 20vw;
    --width-min-main-left: calc(var(--width-min) / 5);
    --width-main-right: 20vw;
    --width-min-main-right: calc(var(--width-min) / 5);
    --width-main-center: calc(100vw - var(--width-main-left) - var(--width-main-right));
    --width-min-center: calc(var(--width-min) - var(--width-min-main-left) - var(--width-min-main-right) - 3rem);

    /* Text colors */
    --text-primary: #b6b6b6;
    --text-primary-light: #d3d3d3;
    --text-primary-secondary: #dddddd;
    --text-secondary: #ececec;
    --text-tertiary: #f3f3f3;
    --text-quaternary: #fafafa;
    --text-hover-primary: #003b4f;
    --text-hover-secundary: #005876;
    --text-hover-tertiary: #0093c4;

    /* Button colors */
    --submit-color-text: #48a528;
    --submit-color-primary: #70ff41;
    --submit-color-primary-secondary: #9cff7c;
    --submit-color-secondary: #abff8f;
    --submit-color-tertiary: #baffa3;
    --submit-color-quaternary: #c9ffb7;
    --submit-color-quaternary-2: #d7ffca;
    --delete-color-primary: #ff0000;
    --delete-color-secondary: #ff4e4e;
    --delete-color-tertiary: #ff7575;
    --delete-color-quaternary: #ff8989;
    --delete-color-quaternary-2: #ff9c9c;
    --delete-color-quaternary-3: #ffb0b0;
    --cancel-color-text: #c47f00;
    --cancel-color-primary: #ffa500;
    --cancel-color-secondary: #ffc14e;
    --cancel-color-secondary-secondary: #d6b577;
    --cancel-color-tertiary: #ffd689;
    --cancel-color-quaternary: #ffeac4;
    --cancel-color-quaternary-secondary: #f1e6d2;
    --cancel-color-table-primary: #ffd689;
    --cancel-color-table-secondary: #ffdd9d;
    --cancel-color-table-tertiary: #ffe4b0;
    --cancel-color-table-quaternary: #ffeac4;

    /* Speeds */
    --transition-speed: 600ms;
    --transition-speed-box: 600ms;
    --transition-speed-table: calc(var(--transition-speed)/2);
    --transition-speed-inputfield: calc(var(--transition-speed)/4);
    --spin-speed: 5000ms;
}

body {
    margin: 0px;
    padding: 0px;
    /* overflow-x: hidden; */
    overflow-y: hidden;

    display: flex;
    flex-flow: column;
    height: calc(100vh);

    min-width: var(--width-min);

    background-color: var(--color-off-white);
}

* {
    /* box-sizing: unset !important; */
    /* font-family: 'Myriad Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; */
    /* font-size: 1rem !important;  */
    box-sizing: unset !important;
}

.select2-search--dropdown .select2-search__field {
    box-sizing: border-box !important;
}

h3,
h4 {
    margin: inherit;
    margin-top: inherit;
    font-size: inherit;
}

h3 {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 1.17rem;
}

main {
    /* flex: 1 1 auto; */
    display: flex;
    height: 1;
    height: var(--height-main);
    flex-direction: row;

    min-width: var(--width-min);

    background: var(--color-off-white);
}

footer {
    display: flex;
    padding: var(--padding-footer);
    width: 100%;
    height: var(--height-footer);

    background-color: var(--color-main-1);
}

.hidden {
    display: none !important;
}

#nav-top-mid-field {
    margin-left: auto;
    margin-right: auto;
}

#left-nav {
    display: flex;
    width: var(--width-main-left);
    min-width: var(--width-min-main-left);
    max-width: 20rem;
    height: 1;
    max-height: calc(var(--height-main));

    /* border-right: grey 1px solid; */
    background-color: var(--text-quaternary);

    box-shadow: rgb(17 17 26 / 10%) 0px 8px 24px;
}

#left-nav-elements {
    display: flex;
    flex-direction: column;
    max-width: 50%;
    border-right: grey 1px solid;
}

.left-nav-element {
    padding: 1rem;
}

.left-nav-element:hover {
    background-color: var(--color-off-white-2);
}

#left-nav-extended {
    display: block;
    width: 100%;
    max-height: var(--height-main);

    overflow-y: auto;

    text-align: center;
}

.left-nav-extended-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.left-nav-extended-element {
    text-align: left;
    padding: 1rem;
}

.left-nav-extended-element:hover {
    background-color: var(--color-off-white-2);
}

.selcted-element {
    background-color: var(--color-main-bland);
}

.selcted-element:hover {
    background-color: var(--color-main-1-bland);
}

.selcted-extended-element {
    background-color: var(--color-main-bland);
}

.selcted-extended-element:hover {
    background-color: var(--color-main-1-bland);
}

#main-edit-area {
    display: flex;
    flex-direction: column;
    /* width: var(--width-main-center); */
    width: 100%;
    min-width: var(--width-min-center);
    height: 100%;
}

#main-edit-loading {
    position: absolute;
    display: flex;
    flex-direction: column;
    /* width: 100%; */
    min-width: calc(var(--width-min-center));
    background-color: var(--color-off-white);
    height: 100%;
}

#main-top {
    height: fit-content;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 2rem;
    justify-content: center;
    padding-top: 1rem;
}

.main-top-element {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    align-items: center;
}

.main-top-element .material-icons {
    font-size: 3rem;
}

#main-edit {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    zoom: 100%;
    margin-right: 1rem;
    margin-left: 1rem;
}

#main-view {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-bottom {
    height: fit-content;
}

#canvas-container {
    /* border: 1px solid black; */
    width: fit-content;
    height: fit-content;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

#right-nav {
    /* display: flex;
    flex-direction: column; */
    width: var(--width-main-right);
    min-width: var(--width-min-main-right);
    max-height: calc(var(--height-main));
    padding: 1rem;
    padding-left: 2rem;
    overflow-y: auto;
    z-index: 10;
}

#elements-list {
    display: flex;
    flex-direction: column;
}

.right-nav-element {
    padding: 1rem;
    border: var(--text-quaternary) 1px solid;
    border-radius: 0.5rem;
    background-color: var(--color-off-white-bland);
    margin-top: 1rem;
    /* margin-right: 0.15rem; */
    min-height: 1rem;
    height: fit-content;
    background-color: var(--text-quaternary);

    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.settings-panel-header {
    margin-top: 0px;
    margin-bottom: 1rem;
}

.settings-panel-sub-header {
    margin-bottom: 0rem;
}

.settings-sub-panel {
    margin-top: 0.25rem;
}

.inline-icon {
    vertical-align: bottom;
    font-size: 1.25rem !important;
}

.btn {
    transition: var(--transition-speed) ease;
    border-radius: 0.75rem;
    border: 0px solid lightgrey;
    padding: 0.5rem;
    background-color: var(--text-secondary);
    margin-top: 0.25rem;
}

.btn:hover {
    background-color: var(--text-primary-secondary);
}

.updateBtn {
    background-color: var(--submit-color-primary-secondary);
}

.updateBtn:hover {
    background-color: var(--submit-color-primary);
}

.deleteBtn {
    background-color: var(--delete-color-secondary);
}

.deleteBtn:hover {
    background-color: var(--delete-color-primary);
}

.cancelBtn {
    background-color: var(--cancel-color-secondary);
}

.cancelBtn:hover {
    background-color: var(--cancel-color-primary);
}

.infoBtn {
    background-color: var(--color-main-bland);
}

.infoBtn:hover {
    background-color: var(--color-main-1-bland);
}

.InputField {
    transition: var(--transition-speed-inputfield) ease;
    margin-bottom: 0.5rem;
    white-space: nowrap;
}

.InputGroupLabel {
    font-size: 20px;
}

.InputGroup {
    padding-top: 0.5rem;
    margin-bottom: 1rem;
    max-height: 80vh;
}

.UnderInputGroup {
    margin-bottom: 0.5rem;
}

.InputLabel {
    margin-bottom: 0.5rem;
}

.inputBox {
    transition: var(--transition-speed-inputfield) ease;
    padding: 0.2rem;
    border-radius: 0.5rem;
    border: 1px solid lightgray;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    font-family: 'Open Sans';
    max-width: 100%;
}

.inputBox:hover {
    transition: var(--transition-speed-inputfield) ease;
    background-color: var(--text-quaternary);
}

.inputBox:focus {
    border-radius: 0.5rem;
}

.inputBox:-moz-read-only {
    transition: var(--transition-speed-inputfield) ease;
    background-color: var(--text-tertiary);
}

.inputBox:read-only {
    transition: var(--transition-speed-inputfield) ease;
    background-color: var(--text-tertiary);
}

.inputBoxWithtext {
    margin-right: 1rem;
}

.inputCheckbox {
    transition: var(--transition-speed-inputfield) ease;
    padding: 0.2rem;
    border-radius: 0.5rem;
    font-family: 'Open Sans';
    margin: 0px;
    margin-bottom: 1rem;
}

.checkboxSpan {
    transition: var(--transition-speed-inputfield) ease;
    padding: 0.3rem;
    padding-top: 0.4rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 0.25rem;
}

.selectBox {
    transition: var(--transition-speed-inputfield) ease;
    padding: 0.2rem;
    border-radius: 0.5rem;
    border: 1px solid lightgray;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    font-family: 'Open Sans';
}

.inputBox:focus {
    background-color: var(--text-quaternary);
}

.input-error {
    border-color: var(--delete-color-secondary);
}

input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 32px;
    height: 32px;
    background-color: unset !important;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
}

.warning-text {
    color: var(--cancel-color-primary)
}

.error-text {
    color: var(--delete-color-secondary)
}

.select2-container {
    width: 60% !important;
}

.select2-selection {
    font-size: 0.8rem;
}

.select2-results {
    font-size: 0.8rem;
}

#mobile-advertisment {
    display: none;
}

.spin {
    animation-name: spin;
    animation-duration: var(--spin-speed);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.main-spinner-container {
    text-align: center;
    width: 100%;
    height: 100%;
    min-height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.main-spinner {
    border: 1.5rem solid var(--text-primary);
    border-top: 1.5rem solid var(--brand-primary);
    border-radius: 10rem;
    width: 10rem !important;
    height: 10rem !important;
    animation: spin 2s linear infinite;
    margin-bottom: 5rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 50px, inset rgba(0, 0, 0, 0.1) 0px 0px 50px;
}

.modal-select-element-container {
    display: flex;
    padding: 1rem;
    justify-content: center;
    align-items: baseline;
    transition: var(--transition-speed) ease background-color;
}

.modal-select-element-container:nth-child(2) {
    background-color: var(--text-quaternary);
}

.modal-select-element-container:hover {
    transition: var(--transition-speed) ease background-color;
    background-color: var(--text-tertiary);
}

.modal-select-element-text {
    flex-grow: 3;
    height: fit-content;
}

.modal-select-element-action {
    flex-grow: 1;
}

.modal-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}