:root {
    --blue-40: #45a1ff;
    --blue-50: #0a84ff;
    --blue-50-a15: rgba(10,132,255, 0.15);
    --blue-50-a30: rgba(10,132,255, 0.30);
    --blue-50-a50: rgba(10,132,255, 0.50);
    --blue-60: #0060df;
    --blue-70: #003eaa;
    --blue-80: #002275;
    --blue-90: #000f40;

    --teal-50: #00feff;
    --teal-60: #00c8d7;
    --teal-70: #008ea4;
    --teal-80: #005a71;
    --teal-90: #002d3e;

    --green-50: #30e60b;
    --green-50-a25: rgba(48,230,11, 0.25);
    --green-60: #12bc00;
    --green-70: #058b00;
    --green-80: #006504;
    --green-90: #003706;

    --red-50: #ff0039;
    --red-50-a25: rgba(255,0,57,0.25);
    --red-50-a30: rgba(255,0,57,0.3);
    --red-60: #d70022;
    --red-70: #a4000f;
    --red-80: #5a0002;
    --red-90: #3e0200;

    --yellow-50: #ffe900;
    --yellow-60: #d7b600;
    --yellow-70: #a47f00;
    --yellow-80: #715100;
    --yellow-90: #3e2800;

    --grey-10: #f9f9fa;
    --grey-10-a10: rgba(249, 249, 250, 0.1);
    --grey-10-a20: rgba(249, 249, 250, 0.2);
    --grey-10-a40: rgba(249, 249, 250, 0.4);
    --grey-10-a60: rgba(249, 249, 250, 0.6);
    --grey-10-a80: rgba(249, 249, 250, 0.8);
    --grey-15: #f3f3f5;
    --grey-20: #ededf0;
    --grey-30: #d7d7db;
    --grey-40: #b1b1b3;
    --grey-50: #737373;
    --grey-60: #4a4a4f;
    --grey-70: #38383d;
    --grey-80: #2a2a2e;
    --grey-90: #0c0c0d;
    --grey-90-a05: rgba(12, 12, 13, 0.05);
    --grey-90-a10: rgba(12, 12, 13, 0.1);
    --grey-90-a20: rgba(12, 12, 13, 0.2);
    --grey-90-a30: rgba(12, 12, 13, 0.3);
    --grey-90-a40: rgba(12, 12, 13, 0.4);
    --grey-90-a50: rgba(12, 12, 13, 0.5);
    --grey-90-a60: rgba(12, 12, 13, 0.6);
    --grey-90-a70: rgba(12, 12, 13, 0.7);
    --grey-90-a80: rgba(12, 12, 13, 0.8);
    --grey-90-a90: rgba(12, 12, 13, 0.9);

    --ink-70: #363959;

    --white-100: #ffffff;

    --black-100: #000000;

    --blue-grey-05: #ECEFF1;
    
    --shadow-10: 0 1px 4px rgba(12, 12, 13, 0.1);
    --shadow-20: 0 2px 8px rgba(12, 12, 13, 0.1);
    --shadow-30: 0 4px 16px rgba(12, 12, 13, 0.1);

    font-family: "Inter", "SF Pro Text", "Roboto", sans-serif
}

:root * {
    font-family: "Inter", "SF Pro Text", "Roboto", sans-serif
}

body {
    background:var(--white-100); margin:0; padding:0;
}

.card {
    padding:48px 40px 36px 40px; margin:0 auto; width:100%; 
    max-width:550px; display:block; flex-shrink:0; box-sizing:border-box;
}

.card .formrow {
    margin:24px 0 0 0; 
}

@font-face {
    font-family: "Inter"; src: url("./Inter-Variable.ttf") format("truetype");
}

@font-face {
    font-family: "Material Symbols"; font-style: normal; font-weight: 400;
    src: url("./MaterialSymbols-Variable.ttf") format('truetype');
}

/* Inputs */
input, textarea {
    display:block; box-sizing:border-box; height:38px; width:100%; 
    margin:8px 0 8px 0; padding:6px 12px 6px 12px; border-radius:6px; outline-color:var(--grey-90-a20);
    font-size:14px; line-height:24px; font-weight:normal; outline-width:1px; outline-offset:0; outline-style: solid; border:none;
}
textarea {
    height:auto; min-height:32px; font-family: "Inter", "SF Pro Text", "Roboto", sans-serif;
    resize:vertical; padding:4px 8px;
}
input:hover, textarea:hover {
    outline-color:var(--grey-90-a30);
}
input:focus, textarea:focus {
    outline-width:2px; outline-color: var(--blue-50); /* box-shadow: 0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30); */
}
input.invalid, input.invalid:focus, textarea.invalid, textarea.invalid:focus {
    outline-width:2px; outline-color: var(--red-50); /*box-shadow: 0 0 0 1px var(--red-50), 0 0 0 4px var(--red-50-a30);*/
}
input.alert, input.alert:focus, textarea.alert, textarea.alert:focus {
    outline-width:2px; outline-color:var(--yellow-60);
    /* box-shadow: 0 0 0 1px var(--yellow-60), 0 0 0 4px rgba(215, 182, 0, 0.3); */
}
input::placeholder, textarea::placeholder {
    color:var(--grey-50);
}
label {
    display:block; margin:4px 0 0 0;
    color:var(--black-100); font-size:14px; line-height:24px; font-weight:500;
}

a.button, button {
    color:var(--white-100); background-color:var(--blue-60);
    height:36px; width:auto; min-width:132px;
    padding:0 6px; font-size:14px; line-height:24px; font-weight:600;
    border:none; border-radius:6px; cursor:pointer; display:inline-block; text-decoration:none;
}
a.button {
    line-height:32px;
}
a.button.long, button.long {
    width:100%;
}
a.button.micro, button.micro {
    height:24px; min-width:80px;
    font-size:0.6875rem;
}
a.button.micro {
    line-height:24px;
}
a.button.puffy, button.puffy {
    height:48px; border-radius:6px; padding:0 16px;
    font-size:0.875rem;
}
a.button.puffy {
    line-height:48px;
}
a.button:hover, button:hover {
    background-color:var(--blue-80);
}
a.button:focus, button:focus {
    box-shadow:0 0 0 1px var(--blue-50) inset, 0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30);
}
a.button:active, button:active {
    background-color:var(--blue-90);
}
a.button.disabled, button.disabled {
    opacity:0.4;
}
a.button.default, button.default {
    background-color:var(--grey-90-a10); color:#000; border-color:var(--grey-90-a50);
}
a.button.default:hover, button.default:hover {
    background-color:var(--grey-90-a30);
}
a.button.default:active, button.default:active {
    background-color:var(--grey-90-a40);
}

/* Common DOM Patterns */
div#main {
    height:100%; width:100%; min-height:100vh;
    padding:0; margin:0;
    display:flex; flex-direction:column;
}

div.topnav {
    box-sizing:border-box; height:65px; width:100%; display:flex; flex-direction:row;
    flex-grow:0; padding:8px; margin:0; justify-content:space-between;
    border-bottom:1px solid var(--grey-40);
}

div.content {
    box-sizing:border-box; width:100%;
    flex-grow:1; display:flex; flex-direction:row;
}
div.logo {
    height:auto; padding:0; font-weight:900; font-size:36px; line-height:1; 
    background-size:100%; text-align:center; font-family:"Inter", sans-serif;
}
div.topnav > div.logo {
    height:48px; width:auto; flex-grow:0; padding:0 12px;
    font-size:32px; line-height:48px; cursor:pointer; border-radius:9px;
}
div.logo::after {
    content:"🎁 LISTS"
}
div.topnav > div.logo:hover {
    background-color:var(--grey-90-a20);
}
div.topnav > div.account {
    display:inline-block; box-sizing:border-box; flex-grow:0;
    padding:4px; margin:8px;
    height:32px; width:32px;
    border-radius:50%; cursor:pointer;
    background-color:var(--teal-80); color:var(--white-100);
    font-weight:900; font-size:14px; line-height:24px; text-align:center;
}
div.topnav > div.account:hover {
    box-shadow:0 0 0 4px var(--grey-90-a20);
}

div.content > div.menu {
    display:inline-block; padding:12px; flex:0 0 auto; box-sizing:border-box;
    border-right:1px solid var(--grey-30); font-size:0px; background-color:var(--grey-20);
}
div.content > div.main {
    flex-grow:1; height:100%; min-height:100%; padding:8px 24px; box-sizing:border-box;
}

.mi {
    display: inline-block; font-style: normal;
    font:normal 24px/1 "Material Symbols";
    text-transform: none; letter-spacing: normal; word-wrap: normal;
    white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.mi.md-18 { font-size: 18px; }
.mi.md-24 { font-size: 24px; }
.mi.md-36 { font-size: 36px; }
.mi.md-48 { font-size: 48px; }

.popup {display:flex; flex-direction:column; position:absolute; top:0; left:0;height:100%;width:100%; min-height:100vh;
    background-color:var(--grey-90-a70); justify-content:space-around; align-content:center; }
.popup.inactive {display:none;}

.popup .card {background-color:var(--white-100);border-radius:8px; border:1px solid var(--grey-30); padding:24px;
    margin:0 auto; width:100%; max-width:450px; display:block; flex-shrink:0; box-sizing:border-box; max-height:100%; overflow-y:auto;}
.popup .card h1 { padding:0; margin:0 0 24px 0; line-height:32px; font-size:24px; font-weight:normal; text-align:left; display:flex; flex-direction:row; align-content:center; }
.popup .card h1 > span { line-height:32px; padding-right:12px; flex:1 1 auto; }
.popup .card h1 > span.mi {flex:0 0 auto;}
.popup .card h1 > span.close {padding:0; width:32px; border-radius:8px; text-align:center; background-color:var(--grey-15); cursor:pointer; }
.popup .card h1 > span.close:hover {background-color:var(--grey-30); color:var(--red-60); }

.popup .card .form-content { height: auto; width: 100%; padding:12px 6px; border-radius:4px; background-color:var(--grey-15); }

/*@media (max-width:1000px) {
}
@media (max-width:800px) {
}
@media (max-width:600px) {
}*/
@media (max-width:500px) {
    div.topnav > div.logo {
        font-size:24px;
    }
}
@media (max-width:360px) {
    div.topnav > div.logo::after {content:"🎁";}
}

.alert {width:100%; display:inline-block; box-sizing:border-box; padding:12px; margin-bottom:8px;
    background-color:rgb(254, 252, 232); border-radius:6px;border:none;}
.alert .content {display:flex;}
.alert .content .icon {
    width: 24px; flex:0 0 auto; height:100%; color:rgb(250, 204, 21); font-variation-settings: 'FILL' 1;
}
.alert .content .icon::before { content:"warning" }
.alert .content .message { flex: 1 1 auto; margin: 0 0 0 12px; }
.alert .content .message .header {display:block;font-size:14px; line-height:20px; height:auto; font-weight:500; width:100%;color:rgb(133, 77, 14);}
.alert .content .message .text {display:block; margin:8px 0 0 0; font-size:14px; line-height:20px;color:rgb(161, 98, 7); height:auto; width: 100%; }

.alert.warning {background-color:rgb(254, 252, 232);}
.alert.warning .content .icon {color:rgb(250, 204, 21);}
.alert.warning .content .message .header {color:rgb(133, 77, 14);}
.alert.warning .content .message .text {color:rgb(161, 98, 7);}

.alert.error {background-color:rgb(254, 242, 242);}
.alert.error .content .icon {color:rgb(248, 113, 113);}
.alert.error .content .message .header {color:rgb(153, 27, 27);}
.alert.error .content .message .text {color:rgb(185, 28, 28);}

.alert.info {background-color:rgb(239, 246, 255);}
.alert.info .content .icon {color:rgb(96, 165, 250);}
.alert.info .content .message .header {color:rgb(29, 78, 216);}
.alert.info .content .message .text {color:rgb(29, 78, 216);}

.barmeter {
    height:6px; width:100%; display:inline-block; box-sizing:border-box; margin:4px 0; 
    background-color:var(--grey-20); border-radius:3px;text-align:center;
}
.barmeter > .meter {
    height:100%; width:0; border-radius:3px; vertical-align:middle;
}