/* Body */

body * { box-sizing:border-box; font-family:nunito_sansregular; letter-spacing:0.0125em; color:var(--text-color); }


/* Main Layout */

#application-menu { position:absolute; top:0; bottom:0; left:0; height:100vh; vertical-align:top; background-color:var(--background-one); overflow:hidden; overflow-y:auto; }

#application { position:absolute; top:0; bottom:0; right:0; height:100vh; padding:20px; overflow-y:scroll; background:var(--background-two); border-left:1px solid var(--application-border-color); }



/* Application - Application Menu */

#application-menu header { display:flex; flex-direction:row; justify-content:space-between; align-items:center; padding:0px; gap:10px; height:100px; flex:none; order:0; flex-grow:0; }

#application-menu header div.logo { display:inline-flex; max-width:100px; max-height:100px; }
#application-menu header div.logo img { margin:15px; max-width:70px; max-height:70px; align-self:stretch; }
#application-menu header div.name a { width:110px; line-height:25px; font-size:17px; text-decoration:none; }
#application-menu header div.icon { width:90px; }
#application-menu header div.icon svg { margin:30px 35px 30px 25px; width:40px; }

#application-menu label { display:flex; flex-direction:row; align-items:flex-start; padding:30px 20px 20px; gap:10px; height:30px; flex:none; order:1; flex-grow:0; text-transform:uppercase; }

#application-menu section { margin:0 0 0 15px; }
#application-menu section div.item { min-width:54px; height:55px; }
#application-menu section div.item a { font-size:17px; }


/* Application - Menu */

div.menu section div.item { box-sizing:border-box; display:flex; flex-direction:row; align-items:center; padding:16px; gap:16px; width:calc(100% - 20px); flex:none; order:0; flex-grow:1; }

div.menu section div.item div.icon svg { width:20px; height:20px; flex:none; order:0; flex-grow:0; filter:var(--inactive-filter); }
div.menu section.current div.item div.icon svg { width:20px; height:20px; flex:none; order:0; flex-grow:0; filter:var(--menu-button-filter); }

div.menu section div.item div.label a { text-decoration:none; cursor:pointer; color:var(--inactive-color); }

div.menu section.current div.item { background:var(--menu-button-background); border:1px solid var(--menu-button-border); border-radius:8px; }
div.menu section.current div.item div.label a { color:var(--menu-button-text); }



/* Application - Grid - Cell */

div.grid a { text-decoration:none; text-transform:uppercase; }

div.grid div.cell { position:relative; display:inline-block; text-align:center; vertical-align:top; margin:0 10px 20px 10px; padding-bottom:15px; border-radius:8px; }
div.grid div.cell div.image { width:210px; height:210px; }
div.grid div.cell div.image img { width:210px; height:210px; border:1px solid var(--panel-border-color); border-radius:8px; object-fit:cover; }
div.grid div.title { width:210px; height:25px; line-height:25px; text-align:center; white-space:nowrap; overflow-x:hidden; font-size:14px; text-transform:uppercase; }


/* Application - Content - Browse Panel */

div.browse-panel { position:relative; display:inline-block; width:180px; height:210px; margin:0 20px 20px 0; overflow:hidden; }

div.browse-panel div.image { width:180px; height:180px; }
div.browse-panel div.image img { width:180px; height:180px; object-fit:scale-down; border-radius:8px; border:1px solid var(--panel-border-color); }
div.browse-panel div.title { width:180px; height:25px; line-height:25px; text-align:center; white-space:nowrap; overflow-x:hidden; font-size:14px; text-transform:uppercase; }


/* View - Profile */

div.title-bar {  max-width:1200px; margin:10px 0; text-align:left; }
div.title-bar div.title-block { display:inline-block; vertical-align:top; margin:0 30px 0 0; height:42px; line-height:42px; font-weight:700; font-size:36px; text-decoration:none; }

div.profile-view div.brand { display:inline-block; vertical-align:top; width:300px; margin-right:20px; text-align:left; }
div.profile-view div.brand img { width:300px; border-radius:8px; border:1px solid var(--panel-border-color); }

div.profile-view div.profile { display:inline-block; vertical-align:top; width:600px; text-align:left; }

div.profile-view div.profile div.motto { margin:0 0 15px 0; font-family:nunito_sanslight; font-size:21px; font-weight:normal; }

div.profile-view div.profile div.actions { margin-top:40px; }
div.profile-view div.profile div.actions a { display:inline-block; height:44px; line-height:44px; margin-right:20px; padding:0 24px; border-width:2px; border-radius:100px; font-family:roboto_regular; font-size:14px; text-transform:uppercase; text-decoration:none;font-weight:700; cursor:pointer; }
div.profile-view div.profile div.actions a.action-view { background:#FFFFFF; border-style:solid; border-color:var(--standard-button-border); }
div.profile-view div.profile div.actions a.action-lookbook { background:var(--creative-button-background); color:var(--creative-button-text); }

div.profile-view div.theme-grid { display:block; vertical-align:top;   margin-top:30px; }

div.profile-view div.theme-grid a.action { display:inline-block; height:30px; line-height:30px; padding:0 18px; border-width:1px; border-radius:100px; font-family:roboto_regular; font-size:13px; }
div.profile-view div.theme-grid a.action-lookbook { background:var(--creative-button-background); color:var(--creative-button-text); }

div.profile-view div.profile div.embed { position:relative; width:100%; margin-top:40px; padding-top:400px; }