/*#region Custom Styling */

html, body, .editor-row {
    height: 100%;
}

body {
    margin: 0;
}

h2 {
    color: chartreuse;
}

table, th, td {
    border:1px solid black;
    text-align: center;
}

table {
    width: 50%;
}

.hidden {
    display: none;
}

.component-templates {
    cursor: pointer;
    /*text-align: center;*/
    /*width: 100%;*/
}

/*.component-templates .gjs-block__media {*/

/*}*/

.component-templates svg {
    width: 25%;
}

/*#endregion*/

/*#region Grapes JS Basic */

/* Let's highlight canvas boundaries */
#gjs {
    border: 3px solid #444;
}

/* Reset some default styling */
.gjs-cv-canvas {
    top: 0;
    width: 100%;
    height: 100%;
}

/* Blocks' manager settings */
.gjs-block {
    width: auto;
    height: auto;
    min-height: auto;
}

/* Custom Panel */
.panel__top {
    padding: 0;
    width: 100%;
    display: flex;
    position: initial;
    justify-content: space-between;
}
.panel__basic-actions {
    position: initial;
}

/* Layers */
.editor-row {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    /*height: 1000px;*/
}

.editor-canvas {
    flex-grow: 1;
}

.panel__right {
    flex-basis: 230px;
    position: relative;
    overflow-y: auto;
}

/* Style Manager */
.panel__switcher {
    position: initial;
}

/* Panel Devices */
.panel__devices {
    position: initial;
}

.gjs-mdl-content #gjs-mdl-c {
    display: flex;
    flex-wrap: wrap;
}

.gjs-mdl-content .gjs-block {
    cursor: pointer;
}

.delete-template {
    display: flex;
    flex-direction: row-reverse;
    cursor: pointer;
}

.gjs-frame {
    top: 15%;
    width: 85%;
    right: unset;
    padding-bottom: 100px;
}

.gjs-dashed {
    padding-bottom: 100px;
}

/*.active-button {*/
/*    background-color: rgba(0,0,0,.15);*/
/*}*/

/*.gjs-asset-manager {*/
/*    width: 100%;*/
/*}*/


/*#endregion*/

/*#region Grapes JS Theming */

/* We can remove the border we've set at the beginning */
#gjs {
    border: none;
}
/* Theming */

/* Primary color for the background */
.gjs-one-bg {
    background-color: #152e4c;
}
/* Secondary color for the text color */
.gjs-two-color {
    color: rgba(255, 255, 255, 0.7);
}

/* Tertiary color for the background */
.gjs-three-bg {
    background-color: #067186;
    color: white;
}

/* Quaternary color for the text color */
.gjs-four-color,
.gjs-four-color-h:hover {
    color: #029fad;
}

/*#endregion */

/* loading */
#loadingScreen {
    position: absolute;
    width: 100vw;
    height: 100vh;
    color: white;
    font-size: 50px;
    text-align: center;
    background-color: #ffffffcc;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    backdrop-filter: blur(20px);
}

.m-fadeOut {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 300ms, opacity 300ms;
}

.m-fadeIn {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s, opacity 300ms;
}

#loadingScreen .logo {
    margin-left: 0;
    margin-bottom: 15px;
    position: initial;
}

#loadingScreen .text {
    color: #000;
    font-size: 24px;
    font-weight: 800;
}

canvas:focus {
	outline:0;
}