.div-editor-center {
    display:grid;
    grid-template-columns: 1fr;
    min-height: calc(100% - 60px);
    justify-items:center;
    width:100%;
    align-items:center;
}

.form-login {
    display:grid;
    grid-template-columns:auto;
    background-color:silver;
    border-radius:0.5em;
    padding:1em;
    grid-row-gap:0.5em;
 

}

.label-editor-field {
    font-family:arial;
    font-size:0.9em;
    font-weight:bold;
    margin:0;
    padding:0;
}

.input-editor-password {
    background-color:#F0F0F0;
    border:none;
    border-radius:0.25em;

    
    
}

.input-editor-button {
    padding:0.5em;
    background-color:red;
    color:white;
     border-radius:0.25em;
        border:none;
        width:60px;
}

.div-editor-menu {
    padding:0.25em;
}

.a-editor-menu {
    font-family:arial;
    margin-top:1em;
    color:black;
    text-decoration:none;
    border-bottom:1px dotted black;
    
}


.a-editor-menu:hover {
    border-bottom:1px solid black;
}



/* MENU EDITOR ****************************************************************/

.div-menu-container {
    max-width:1000px;
    width:100%;
}

.div-menu-header {
    display:grid;
    column-gap:1em;
    grid-column-gap:0.5em;
    grid-row-gap:0.5em;
    justify-items:space-around;
}

.div-menu-column {
    background-color:var(--grey);
    border-radius:0.25em;
    color:white;
    font-family:arial;
    font-size:0.9em;
    text-align:center;
}

.form-menu-fields {
    display:grid;

    grid-column-gap:0.5em;
    grid-row-gap:0.5em;
    align-items:center;
    margin:0.25em 0 0 0;
   }

.label-menu-field {
    background-color:#F0F0F0;
    border:1px solid silver;
    font-size:0.9em;
    font-family:arial;
    color:green;
    font-weight:bold;
    width:100%;
    border-radius:0.25em;
    text-align:center;
    
}

.input-menu-field {
    background-color:#F0F0F0;
    border:1px solid silver;
    color:blue;
    width:100%;
        font-size:0.9em;
    font-family:arial;
    border-radius:0.25em;
      text-align:center;
}


.input-menu-button {
    background-color:red;
    padding: 0.25em 0 0.25em 0em;
    border-radius:0.25em;
    color: white;
    border:none;
    width:100%;
}


/* PAGES EDITOR ***************************************************************/

.div-pages-center {
    display:grid;
    grid-template-columns: 1fr;
    justify-items:center;
    width:100%;
    padding:1em;
    box-sizing:border-box;
}

.div-pages-grid {
    display:grid;
    
    width:100%;
          max-width:1200px;
    font-family:arial;
    grid-column-gap:0.5em;
    grid-row-gap:0.25em;
    align-items:center;
}


.div-pages-header {
    display:grid;
    grid-column-gap:0.5em;
    grid-row-gap:0;   
}

.div-pages-column {
    background-color:var(--grey);
    color:white;
    font-family:'Noto Sans';
    font-size:0.9em;
    text-align:center;
    border-radius:0.25em;
}

.form-pages-fields {
    display:grid;
    grid-column-gap:0.5em;
    grid-row-gap:0;
    align-items:center;
    margin:0;
}





.form-pages-html {
    display:inline
}

.label-pages-field {
    background-color:#F0F0F0;
    border:1px solid silver;
    font-size:0.9em;
    font-family:arial;
    color:green;
    width:100%;
    border-radius:0.25em;
    text-align:center;
    
}






.input-pages-field {
    background-color:#F0F0F0;
    border:1px solid silver;
    color:blue;
    width:100%;
    border-radius:0.25em;
      text-align:center;
      font-family:arial;
}

.input-pages-button {
    background-color:red;
    padding: 0.25em 0 0.25em 0;
    border-radius:0.25em;
    color: white;
    border:none;
    width:100%;
}

.div-pages-html {
    width:100%;
    max-width:1200px;
    height:100%;

}




.div-pages-left {
    font-size:0.9em;
    font-weight:bold;
    text-align:right;
}

.div-pages-center {
        font-size:0.9em;
    font-weight:bold;

}

.div-pages-right {
        font-size:0.9em;
    font-weight:bold;
    text-align:left;
}


.form-html
{
    display:grid;
    grid-template-rows:auto auto auto 3fr auto;
    height:50vh;
}

.input-page-title {
    font-family:courier;
    border:1px solid silver;
    background-color:#F0F0F0;
    color:blue;
    border-radius:0.25em;
    width:50%;
    
}

.textarea-html {
    width:100%;
    max-width:1200px;
    height:100%;
    font-family:courier;
    border:1px solid silver;
    background-color:#F0F0F0;
    color:blue;
    border-radius:0.25em;
}

.input-html-button {
      background-color:red;
    padding: 0.25em 1em 0.25em 1em;
    border-radius:0.25em;
    color: white;
    border:none;
    width:200px;
    margin-top:1em;
}

.label-html {

    font-family:arial;
    font-weight:bold;
    font-size:1em;
}

.div-html-language {
    font-family:arial;
    font-size:2em;
    font-weight:bold;
    color:red;
    margin-bottom:0.5em;
}


.div-image-list {
    display:flex;
  flex-wrap:wrap;
gap:2em;
padding:2em;
width:100%;
justify-content:center;
box-sizing:border-box;

}


.form-image-editor {
    display:inline;
}

.div-editor-image {
    display:grid;
    grid-template-columns:auto auto;
    gap:0.5em;
}

.div-editor-form {
    display:grid;
    grid-template-columns:auto;
    gap:10px;
}


.div-editor-thumb {
    width:120px;
    height:120px;
    background-color:magenta;
      border-radius:0.5em;
}

.img-editor-image {
  width: 100%;
  height: 100%;
  border:1px solid black;
  border-radius:0.5em;
}


.input-image-submit {
    background-color:red;
    height:32px;
    width:120px;
    border:none;
    border-radius:0.5em;
    color:white;
}


.button-image-submit {
    background-color:red;
    height:32px;

    border:none;
    border-radius:0.5em;
    color:white;
}

.div-image-warning {
font-family:arial;
    box-sizing:border-box;
    color:red;
    font-weight:bold;
    text-align:center;
    width:100%;
    padding:1em 0 0 0;
}


.input-image-field {
    width:200px;
    height:32px;
        border-radius:0.5em;
        background-color:#F0F0F0;
        border:1px solid silver;
        margin-left:0.5em;
}

.div-editor-headers {
    font-family:'Noto Sans';
    display:grid;
    grid-template-columns: 1fr;
    width:100%;
    max-width:1200px;
    color:var(--grey);
}

.textarea-head-foot {
font-family:courier;
    max-width:100%;
    min-width:100%;
    height:150px;
    background-color:'#F0F0F0;
    border:1px solid silver;
    border-radius:0.5em;
    
}

.input-editor-headers {
    color:white;
    background-color:red;
    border:none;
    padding:0.25em 0.5em 0.25em 0.5em;
    margin:0.25em 0 1em 0;
    border-radius:0.25em;
}


.form-editor-message {
    display:inline;
}

.div-editor-message {
    display:grid;
    grid-template-columns:auto 1fr;
width:1200px;
max-width:95vw;
    gap:0.5em;
}

.div-message-center {
    width:100%;
    display:grid;
    grid:template-columns:1fr;
    justify-items:center;
}

.div-message-exit {
    color:red;
    padding:1em;
font-family:arial;
    max-width:1200px;
}

.a-message-exit {
    background-color:green;
    color:white;
    text-decoration:none;
    border-radius:0.25em;
    padding:0.25em;
    font-size:0.8em;
}

.div-editor-language {
    text-align:right;
    font-weight:bold;
    font-family:arial;
}


.input-editor-message {
    color:blue;
    width:100%;
    border:1px solid silver;
    background-color:#f0f0f0;
    border-radius:0.25em;
     font-family:arial;
}

.input-message-button {
    background-color:red;
    padding: 1em;
    border-radius:0.25em;
    color: white;
    border:none;
       font-family:arial;

}

.form-styles-editor {
    display:inline;
}

.div-editor-styles {
    display:grid;
    grid-template-columns:auto auto auto;
    gap:0.25em;
}

.input-style-button {
    color:white;
    background-color:red;
    border:none;
    height:24px;
    border-radius:0.25em;
}


.input-editor-style {
    width:120px;
height:24px;
        border-radius:0.25em;
        background-color:#F0F0F0;
        border:1px solid silver;
        color:blue;
        margin-left:0.5em;
}

.textarea-editor-css {
    width:100%;
    min-width:300px;
    max-width:1200px;
    min-height:300px;
    height:calc(100% - 40px);
        border:1px solid silver;
    background-color:#f0f0f0;
    border-radius:0.25em;
    color:blue;
   
}