:root{
    /* Colors */
    --color-font:#363545;
    --color-font-inverse:#ffffff;
    --color-background:#f3f3f7;
    --color-background-trans:#f3f3f700;
    --color-background-tile:#ffffff;
    --color-divider:#eaeaef;
    --color-resizer:#6A697688;
    
    
    --SUbgcolor:#bfbfc6;
    --SUbgcolor-trans:#bfbfc688;
    --SUskycolor:#16a2dc;
    --SUskygrad:linear-gradient(180deg, rgba(0,45,91,1) 0%, rgba(0,95,158,1) 35%, rgba(22,162,220,1) 100%);

    --download:#363545;
    --download-font:white;
    
    
    
    /* Globals */
    --font-weight:500;
    
    
    /* Sizes */
    --grid-item-width:75px;
    --border-radius:2px;
    --border-radius-button:6px;
    --web-radius:var(--border-radius-button);
    --columns:5;
    --columns-small:6;
    --rows:5;
    --rows-small:6;
    --grid-size:80px;
    --grid-size-small:1fr;
    
    /*center control*/
    --toggle-size:80px;
    --toggle-radius:2px;
    --toggle-margin:2px;
    
    
    /* Effects */
    --icon-filter:brightness(1);
    --icon-opacity:1;
    --shadow-tile: 0px 0px 2px 0px rgba(54,53,69,0.3), 0px 0px 8px 0px rgba(54,53,69,0.2);
    --shadow-window: none; /*0px 2px 10px #00000088;*/
    
    
    /* Command sizes */
    --command-width: 48px;
    --command-padding:6px;
    --command-margin:6px;
}
/*@media (prefers-color-scheme: dark) {
    :root{
        --color-font: #f3f3f7;
        --color-background:#262533;
        --color-background-tile:#595868;
        --color-divider:#474655;
        --icon-filter:brightness(10);
        --icon-opacity:0.5;
    }
}*/


/* src/assets/css/app.css */
/* Main CSS stylesheet */
html, *, *::before, *::after {
    box-sizing: border-box;
    margin:0;
    padding:0;
    overflow:-moz-scrollbars-none;
    box-sizing:border-box;
    user-select: none;
    outline: none;
}
/*::-webkit-scrollbar { display: none; }*/
html, body, #root{
    /*width:100vw;
    height:100vh;*/
    background-color: transparent;
    color:var(--color-font);
    font-weight:var(--font-weight);
    position: relative;
    -webkit-app-region: no-drag;
    /*overflow:hidden;*/
    background: var(--SUskycolor);
    text-align: center;
    font-family: sans-serif;

}
body {
  font-size: 62.5%;
}
#container{
    /*-webkit-app-region: drag; */
    background-color:var(--color-background-trans);
    border-radius:var(--border-radius);
    box-shadow:var(--shadow-window);
    overflow-y:auto;
    overflow-x: hidden;
}

body[state="colorpalette"] #pagenav{
    display:none;
}

#pagenav{
    position:absolute;
    left:calc(var(--grid-size) * 2 + var(--toggle-margin));
    top:calc(var(--grid-size) * 2 + var(--toggle-margin));
    width:calc(var(--toggle-size) - var(--toggle-margin) - var(--toggle-margin));
    height: calc(var(--toggle-size) - var(--toggle-margin) - var(--toggle-margin));
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    z-index:20;
    background-color:var(--color-background-tile);
    border-radius:var(--toggle-radius);
    box-shadow:var(--shadow-tile);
    padding: 5px;
}

#pagenav [page]{
    background-color:transparent;
    width:50%;
    height:50%;
    border:none;
    opacity:0.5;
}
#pagenav [page] img{
    filter:var(--icon-filter);
    opacity:var(--icon-opacity);
    display: block;
    margin: auto;
}

body[page="tools"] #pagenav [page="tools"],
body[page="projects"] #pagenav [page="projects"],
body[page="warehouse"] #pagenav [page="warehouse"],
body[page="commands"] #pagenav [page="commands"],
body[page="materials"] #pagenav [page="materials"],
body[page="settings"] #pagenav [page="settings"]{
    opacity:1;
}


/*#pagenav [page="materials"],
#pagenav [page="commands"]{
    display: none;
}*/
[connected="true"] #pagenav [page="materials"],
[connected="true"] #pagenav [page="commands"]{
    display: block;
}

/* Page designs */

.page{
    position: relative;
    overflow-y: auto;
}


/* Projects Page */

/*.file{
    display: flex;
    flex-direction: column;
    width:200px;
    background-color:var(--color-background-tile);
    border-radius:var(--border-radius);
    box-shadow: var(--shadow-tile);
    margin:10px;
    overflow:hidden;
}*/

/*.file .image{
    width:100%;
    height:96px;
    background-color: #363545;
    overflow:hidden;
    background-size: cover;
}*/

/* State Management */
/*.page{display:none;}*/

body[page="tools"] #page-tools,
body[page="projects"] #page-projects,
body[page="warehouse"] #page-warehouse,
body[page="commands"] #page-commands,
body[page="materials"] #page-materials,
body[page="settings"] #page-settings{
    display:unset;
}
/*.commandcategory,*/
.tool-grid{
    width:400px;
    height:400px;
    display: grid;
    grid-template-columns: repeat(var(--columns-small), var(--grid-size-small));
    grid-template-rows: repeat(var(--rows-small), var(--grid-size-small));
    align-items: center;
    justify-items: center;
    padding:30px;
}
.commandcategory{
    width:100%;
}

.commandcategory .title{
    width:100%;
    flex-shrink:0;
    flex-grow:0;
    font-size:24px;
    padding-left:10px;
}
.command.btn{
    display:block;
    width:var(--command-width);
    height:var(--command-width);
    background-color:var(--color-background-tile);
    border-radius:var(--border-radius);
    box-shadow: var(--shadow-tile);
    position: relative;
    overflow: hidden;
    padding:var(--command-padding);
}
.command .image{
    width:calc(var(--command-width) - 2 * var(--command-padding));
    height:calc(var(--command-width) - 2 * var(--command-padding));
}
.command img{
    width:100%;
}


.btn, button{
    -webkit-app-region: no-drag;
    cursor:pointer;
}

button{
    border:none;
    background: transparent;
}


/* ######## MATERIALS ##############
################################# */

#page-materials{
    flex-direction:row;
}

#colorpalette{
    /*width:calc(var(--grid-item-width) * 5);
    height:calc(var(--grid-item-width) * 5);*/
    position:relative
}

body[state="colorpalette"] #colorpalette{
    display:flex;
}

#imagelist,
#colorlist{
    display: grid;
    grid-template-columns: repeat(var(--columns), var(--grid-size));
    grid-template-rows: repeat(var(--rows), var(--grid-size));
    align-items: center;
    justify-items: center;
}

.addmat,
.addcol{
    opacity:0; 
    cursor:pointer;
}
.addmat:hover,
.addcol:hover{
    opacity:1;
}
.addmat:before,
.addcol:before{
    content:'';
    background-color:#36354533;
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
}

.material-container,
.addmat,
.addcol,
.color{
    height:var(--grid-item-width);
    width:var(--grid-item-width);
    border-radius:var(--border-radius);
    overflow:hidden;
    position:relative;
    box-shadow: var(--shadow-tile);
}
.material-container::after,
.addmat::after,
.addcol::after,
.color::after{
    box-sizing: content-box;
    position: absolute;
    top:0;
    left: 0;
    right:0;
    bottom:0;
    content:'';
    border: 5px solid #f3f3f788;
    pointer-events: none;
}
.material-container:hover::after,
.color:hover::after{
    border-color:#f3f3f7;
}
#colorlist svg{
    /*width:var(--grid-item-width);
    height:var(--grid-item-width);*/
    object-fit: cover;
}
/*{
    position:relative;
    padding:0;
    margin:10px;
    width:calc(var(--grid-item-width) + 24px);
    background-color:var(--color-background-tile);
    border-radius:var(--border-radius);
    box-shadow: var(--shadow-tile);
    overflow:hidden;
}*/
.material{
    width:var(--grid-item-width);
    height:var(--grid-item-width);
    position:relative;
}

.material .image,
.material img{
    height:100%;
    background-size:cover;
}
.command .name,
.material .name{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    align-items: center;
    background-color:#00000088;
    color:#ffffff;
    text-align: center;
    align-items: center;
    display: none;
    justify-content: center;
    padding:4px;
}
.command:hover .name,
.material:hover .name{
    display: flex;
}

.edit-material{
    position: absolute;
    bottom: 0;
    right: 0;
    top:0;
    background-color: white;
    width: 24px;
}

/* #################################
LAYOUTS materials AND colors
################################# */

[position="1"]{grid-row:1; grid-column: 1;}
[position="2"]{grid-row:1; grid-column: 2;}
[position="3"]{grid-row:1; grid-column: 3;}
[position="4"]{grid-row:1; grid-column: 4;}
[position="5"]{grid-row:1; grid-column: 5;}
[position="6"]{grid-row:2; grid-column: 1;}
[position="7"]{grid-row:2; grid-column: 2;}
[position="8"]{grid-row:2; grid-column: 3;}
[position="9"]{grid-row:2; grid-column: 4;}
[position="10"]{grid-row:2; grid-column: 5;}
[position="11"]{grid-row:3; grid-column: 1;}
[position="12"]{grid-row:3; grid-column: 2;}
[position="13"]{grid-row:3; grid-column: 4;}
[position="14"]{grid-row:3; grid-column: 5;}
[position="15"]{grid-row:4; grid-column: 1;}
[position="16"]{grid-row:4; grid-column: 2;}
[position="17"]{grid-row:4; grid-column: 3;}
[position="18"]{grid-row:4; grid-column: 4;}
[position="19"]{grid-row:4; grid-column: 5;}
[position="20"]{grid-row:5; grid-column: 1;}
[position="21"]{grid-row:5; grid-column: 2;}
[position="22"]{grid-row:5; grid-column: 3;}
[position="23"]{grid-row:5; grid-column: 4;}
[position="24"]{grid-row:5; grid-column: 5;}

/* #################################
LAYOUTS BUTTONS AND STUFF
################################# */

.grid-layout > :nth-of-type(	1	){grid-column: 	2	;grid-row: 	2	;}
.grid-layout > :nth-of-type(	2	){grid-column: 	3	;grid-row: 	2	;}
.grid-layout > :nth-of-type(	3	){grid-column: 	4	;grid-row: 	2	;}
.grid-layout > :nth-of-type(	4	){grid-column: 	4	;grid-row: 	3	;}
.grid-layout > :nth-of-type(	5	){grid-column: 	4	;grid-row: 	4	;}
.grid-layout > :nth-of-type(	6	){grid-column: 	3	;grid-row: 	4	;}
.grid-layout > :nth-of-type(	7	){grid-column: 	2	;grid-row: 	4	;}
.grid-layout > :nth-of-type(	8	){grid-column: 	2	;grid-row: 	3	;}
.grid-layout > :nth-of-type(	9	){grid-column: 	2	;grid-row: 	1	;}
.grid-layout > :nth-of-type(	10	){grid-column: 	3	;grid-row: 	1	;}
.grid-layout > :nth-of-type(	11	){grid-column: 	4	;grid-row: 	1	;}
.grid-layout > :nth-of-type(	12	){grid-column: 	5	;grid-row: 	1	;}
.grid-layout > :nth-of-type(	13	){grid-column: 	5	;grid-row: 	2	;}
.grid-layout > :nth-of-type(	14	){grid-column: 	5	;grid-row: 	3	;}
.grid-layout > :nth-of-type(	15	){grid-column: 	5	;grid-row: 	4	;}
.grid-layout > :nth-of-type(	16	){grid-column: 	5	;grid-row: 	5	;}
.grid-layout > :nth-of-type(	17	){grid-column: 	4	;grid-row: 	5	;}
.grid-layout > :nth-of-type(	18	){grid-column: 	3	;grid-row: 	5	;}
.grid-layout > :nth-of-type(	19	){grid-column: 	2	;grid-row: 	5	;}
.grid-layout > :nth-of-type(	20	){grid-column: 	1	;grid-row: 	5	;}
.grid-layout > :nth-of-type(	21	){grid-column: 	1	;grid-row: 	4	;}
.grid-layout > :nth-of-type(	22	){grid-column: 	1	;grid-row: 	3	;}
.grid-layout > :nth-of-type(	23	){grid-column: 	1	;grid-row: 	2	;}
.grid-layout > :nth-of-type(	24	){grid-column: 	1	;grid-row: 	1	;}


[row="1"]{grid-row:1;}
[row="2"]{grid-row:2;}
[row="3"]{grid-row:3;}
[row="4"]{grid-row:4;}
[row="5"]{grid-row:5;}
[row="6"]{grid-row:6;}
[row="7"]{grid-row:7;}

[column="1"]{grid-column:1;}
[column="2"]{grid-column:2;}
[column="3"]{grid-column:3;}
[column="4"]{grid-column:4;}
[column="5"]{grid-column:5;}
[column="6"]{grid-column:6;}
[column="7"]{grid-column:7;}

/* #################################
Special Buttons
################################# */

button[page]{
    padding:2px;
}


button[press="clear"]{
    background-color:var(--color-background-tile);
    cursor: pointer;
    border-radius: var(--border-radius) ;
    box-shadow: var(--shadow-tile);
    padding: 12px 20px;
    margin: 20px;
}

button[press="clear"]:hover{
    background-color:var(--color-background);
}


button[press="toggle"]{
    width:var(--toggle-size);
    height:var(--toggle-size);
    font-weight:bold;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:calc(var(--toggle-size) / 2 - var(--toggle-size));
    margin-top:calc(var(--toggle-size) / 2 - var(--toggle-size));
    background-color: var(--color-background);
    border-radius:50%;
    box-shadow: var(--shadow-tile);
}

body[state="colorpalette"] button[press="toggle"]{
    display:none;
}


button[type="back"]{
    width:var(--grid-item-width);
    height:var(--grid-item-width);
    font-weight:bold;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:calc(var(--grid-item-width) / 2 - var(--grid-item-width));
    margin-top:calc(var(--grid-item-width) / 2 - var(--grid-item-width));
}

#colorpalette button[type="back"]:hover{
    background-color:var(--color-background-tile);
    cursor: pointer;
}






/* website layout */
.overview{
    background: var(--SUskygrad);
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    color:var(--color-font-inverse);
    margin-bottom:-50px;
}

.infoblock{
    width:100vw;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: wrap;
    background-size: cover;
    background-position: center;
    min-height:50vw;
    background-color: var(--SUbgcolor);
}


@media screen and (min-width: 1600px) {
    .infoblock {
        min-height:30vw;
    }
    .infoblock:first-of-type {
        min-height:50vw;
    }
}

.box,
.description{
    min-width:300px;
    max-width:400px;
    border-radius: var(--web-radius);
    background-color:#ffffff;
    box-shadow:var( --shadow-tile) ;
    padding:30px;
    margin-top:20px;
    margin-bottom:20px;
}
.box h2,
.description h2{
    /*text-shadow: 2px 2px 5px var(--SUbgcolor-trans),
        -2px -2px 5px var(--SUbgcolor-trans),
        -2px 2px 5px var(--SUbgcolor-trans),
        2px -2px 5px var(--SUbgcolor-trans);*/
    margin-top:0;
}

.infoblock:nth-of-type(1){
    background-image: url(images/bg1.png);
    padding-top:50px;
    background-color: transparent;
}
.infoblock:nth-of-type(2){
    background-image: url(images/bg2.png);
}
.infoblock:nth-of-type(3){
    background-image: url(images/bg3.png);
}
.infoblock:nth-child(even){
    flex-direction: row-reverse;
}


a.download{
    display: inline-block;
    padding:16px 24px;
    border-radius:var(--border-radius-button);
    background-color: var(--download);
    color:var(--download-font);
    margin:30px 10px;
    font-size: 16px;
    text-decoration: none;
}

a.suggest{
    display: inline-block;
    padding:16px 24px;
    border-radius:var(--border-radius-button);
    border:2px solid var(--download);
    color:var(--download);
    margin:30px 10px;
    font-size: 16px;
    text-decoration: none;
}


div.download{
    text-align: center;
}


h1{
    font-size:60px;
    margin-top:1em;
    margin-bottom: 0.5em;
    font-family: 'Signika', sans-serif;
}



h2{
    font-size:32px;
    margin-top:1em;
    margin-bottom: 0.5em;
    font-family: 'Signika', sans-serif;
}

ul,
p{
    font-size: 16px;
}

a{color:white;}

ul{
    text-align: left;
    list-style: decimal;
    margin:5px 10px 5px 25px;
    list-style-position: out;
}
ul li{
    margin:15px 0;
}

.tm{
    font-size:0.5em;
}

.beta{
    opacity:0.5;
}

.split-row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.box{
    max-width: 400px;
    border-radius: var(--web-radius);
    background-color: #ffffff;
    box-shadow: var( --shadow-tile);
    padding: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.installation,
.instructions,
.troubleshooting{
    background-color: var(--SUbgcolor);
    margin:0;
    padding:50px 0;
}
.troubleshooting .split-row{
    text-align: left;
}

.keyboard-shortcut{
    padding:10px 10px;
    border-radius:var(--border-radius-button);
    border:2px solid var(--download);
    color:var(--download);
    margin: 15px 10px 30px 10px;
    font-size: 16px;
    display: inline-block
}

.shortcuts{
    font-size:24px;
    margin-left:10px;
    margin-right:10px;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 350px;
}

.shortcuts p{
    margin-bottom:20px;
    line-height: 1.3em;
}

.trouble{
    border-radius: 10px;
    overflow: hidden;
    margin:0;
    padding:0;
}
.trouble img{
    display:block;
    width:100%;
}