body{margin:0}:root{--htextOne: #000000;--htextTwo: #ffffff;--hbackgroundOne: #f3f4f6;--hbackgroundTwo: #ffffff;--accent: #2963EA;--textOne: #ffffff;--textTwo: #000000;--backgroundOne: #3a3a3a;--backgroundTwo: #1f1f1f}.layout{display:grid;grid-template-columns:clamp(150px,15vw,200px) 1fr;height:100vh;width:100vw;background-color:var(--backgroundOne)}.page{display:grid;grid-template-rows:150px auto;overflow-y:auto}.content{display:grid;padding:20px;color:var(--textOne)}.image{width:90%}.loginPage{display:flex;height:100vh;width:100vw;justify-content:center;align-items:center}.loginPage form{display:flex;flex-direction:column;justify-items:center;background-color:var(--backgroundTwo);padding:100px;border-radius:10px;gap:15px}.loginPage img{width:30vw}.sidebar{display:grid;height:100vh;grid-template-rows:200px auto 100px;color:var(--textOne);background-color:var(--backgroundTwo);overflow-y:auto}.sidebar .top{display:grid;grid-row:1;place-items:center;text-align:center;border-bottom:solid 2px var(--backgroundOne)}.sidebar .middle{display:grid;grid-row:2;justify-content:center;grid-template-rows:auto 400px auto}.sidebar .middle .list{display:grid;grid-row:2;grid-template-rows:80px}.item{display:grid;height:40px;width:145px;text-decoration:none;place-content:center;border-radius:8px;color:var(--textOne);background-color:var(--accent)}.item:hover{background-color:var(--backgroundOne)}.sidebar .bottom{display:grid;grid-row:3;justify-content:center}.header{border-left:solid 2px var(--backgroundOne);color:var(--textOne);background-color:var(--backgroundTwo)}.form{background-color:var(--backgroundTwo)}.screens{display:grid;grid-auto-rows:100px;gap:10px}.screen{display:grid;grid-auto-flow:column;grid-template-columns:repeat(3,1fr);place-content:center;justify-items:center;border-radius:12px;background-color:var(--backgroundTwo)}.screen button{grid-column:3;height:70px;width:100px}.media{display:grid;grid-template-columns:1fr 4fr;grid-template-rows:100px repeat(auto-fill,200px);column-gap:20px;row-gap:20px}.media form{display:grid;padding:20px;border-radius:10px;background-color:var(--backgroundTwo)}.media .toUpload{display:grid;grid-template-columns:repeat(5,1fr);column-gap:20px}.media .preUpload{display:grid;justify-content:center;overflow:auto;border-radius:10px;background-color:var(--backgroundTwo)}.media .mediaBox{display:grid;grid-row-start:2;grid-column:1 / 3;grid-row-gap:20px;grid-template-columns:repeat(auto-fill,250)}.mediaCard{display:grid;grid-template-columns:3fr 2fr 2fr 1fr 1fr;padding:20px;border-radius:10px;background-color:var(--backgroundTwo)}.sequences{display:grid;grid-template-rows:180px 50px repeat(auto-fill,180px);grid-auto-flow:row;gap:10px}.sequences input{border-radius:10px}.sequences button{border:dashed 5px var(--backgroundTwo);border-radius:10px;background-color:var(--backgroundOne)}.sequences button:hover{border:solid 5px var(--accent)}.seqCreate{display:grid;grid-row:1;grid-auto-flow:column;grid-auto-columns:200px;gap:10px}.selected{border-radius:10px;background-color:var(--backgroundTwo)}.tools{grid-row:2;grid-column:1;gap:10px;border-bottom:solid 2px var(--backgroundTwo)}.tools input,.tools button{grid-column:1;height:80%;margin-right:5px;color:var(--textOne);background-color:var(--backgroundTwo)}.saved{display:grid;row-gap:10px}.both{display:grid;grid-template-rows:50px 100px;row-gap:20px;border-radius:10px;padding:10px;width:max-content;background-color:var(--backgroundTwo)}.objs{display:grid;grid-auto-columns:200px;grid-auto-flow:column;white-space:wrap;column-gap:10px}.obj{width:200px;border-radius:10px;background-color:var(--backgroundOne)}.name{display:grid;grid-template-columns:100px 100px max-content;gap:10px;margin-bottom:10px}.name p{height:100%;border-radius:10px;margin:0;padding:10px 10px 3px;background-color:var(--accent)}.overlay{display:grid;height:100vh;width:100vw;inset:0;position:fixed;place-content:center}.popup{display:grid;grid-template-rows:100px auto;grid-template-columns:1fr 1fr 1fr 1fr;height:80vh;width:80vw;padding:20px;overflow:auto;border-radius:20px;background-color:var(--backgroundTwo)}.popup button{grid-column-start:5;justify-self:end;height:30px;width:60px}.mediaPick{display:grid;grid-row-start:2;grid-column:1/ 6;grid-auto-rows:150px;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:10px}.mediaItem{border-radius:10px;color:#fff;overflow:hidden;background-color:var(--backgroundOne)}.users{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-template-rows:200px repeat(auto-fill,200px);row-gap:20px}.users form{display:grid;padding:20px;border-radius:10px;background-color:var(--backgroundTwo)}.users .userList{display:grid;grid-row-start:2;grid-column:1 / 6;gap:20px}.users .userCard{display:grid;grid-template-columns:1fr 2fr 1fr 1fr;width:100%;align-content:center;justify-items:center;border-radius:10px;background-color:var(--backgroundTwo)}.userCard button{height:50px;width:200px}.settings{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-auto-rows:200px}.settings form{display:grid;place-content:center;border-radius:12px;background-color:var(--backgroundTwo)}
