:root {--drinkName:#48c; --header:#84c; --main-bg:#383C43; --view-bg:#2F333A; --tile-bg:#2E3134; --tile-outline:#47D; --titleBar:#001720; --text:#F0F0F0; --accent:#367FCA; --loginBorder:#37c;}
:root {
--emboss:-2px -2px 5px -1px #000 inset,2px 2px 5px -1px #999 inset;
--bevel:2px 2px 5px -1px #000 inset,-2px -2px 5px -1px #999 inset;
}

body {font-family:"Segoe UI",Tahoma,Arial,sans-serif;color:var(--text);background:var(--main-bg);font-size:14px;line-height:18px;text-align:left;margin:0;padding:0;}
div,span,input,select,button,textarea {border:none;margin:0;padding:0;font-size:14px;}
button,select,svg {outline:none;cursor:pointer;}
a {color:unset;text-decoration:none;}
h3 {display:inline;font-size:16px;line-height:20px;font-weight:bold;margin:0;color:var(--header);}

/* HEAD */
.head {padding:2px 6px;background:var(--titleBar);}
.head a {color:var(--accent);font-size:21px;line-height:24px;vertical-align:top;;}
.icon {height:20px;padding:3px 3px 1px 0;fill:var(--accent);cursor:unset;}
.userIcon {float:right;height:24px;padding:2px;fill:none;stroke:var(--accent);}
.userIcon:hover {fill:var(--accent);}

/* LOGIN */
.loginContainer {display:flex;flex-flow:column nowrap;gap:18px;max-width:230px;text-align:center;margin:auto;margin-top:12px;padding:12px;border-radius:11px;border:1px solid #000;border-top-color:var(--loginBorder);border-left-color:var(--loginBorder);box-sizing:border-box;}
.welcomeMsg {margin:5px 0 10px 0;padding:10px;border:1px solid #000;border-bottom-color:var(--loginBorder);border-right-color:var(--loginBorder);border-radius:7px;}
.loginContainer input {background:none;padding:8px;border:1px solid var(--loginBorder);border-radius:18px;border-top-color:#000;border-left-color:#000;}
.loginContainer button {background:none;border:1px solid var(--loginBorder);border-radius:16px;padding:6px 12px;border-bottom-color:#000;border-right-color:#000;}
.loginContainer button:hover {border-top-color:#000;border-left-color:#000;border-bottom-color:var(--loginBorder);border-right-color:var(--loginBorder);padding:6px 12px;}
#loginErrMsg {color:#b22;}

/* CONTROL BARS */
.controlBar {margin:5px auto 10px auto;padding:0 10px;max-width:640px;}
.barName {font-size:18px;line-height:18px;margin-bottom:10px;text-align:center;}
.shareLinkNotice {display:none;position:absolute;top:30px;left:50%;border:1px solid #000;padding:2px 10px 5px 10px;color:#0bf;background:var(--main-bg);border-radius:7px;border-left-color:#fff5;border-top-color:#fff5;transform:translateX(-50%);}
.mainControls, #controlBarView, #controlBarEdit {display:flex;flex-flow:row nowrap;justify-content:space-between;gap:10px;}
select, button, .shareIcon {flex:1 1;color:#000;border:1px solid #000;padding:3px 6px;border-radius:7px;white-space:nowrap;border-left-color:#fff5;border-top-color:#fff5;background:#3C4047;}
.mainControls select {width:0;}
.shareIcon {flex:0 0 48px;padding:1px 0;fill:#000;stroke:#000;}
button:hover {padding:4px 5px 2px 7px;border-right-color:#fff5;border-bottom-color:#fff5;border-left-color:#000;border-top-color:#000;}
select:hover, #controlBarMain button:hover {padding:3px 6px;border-right-color:#000;border-bottom-color:#000;border-left-color:#fff5;border-top-color:#fff5;box-shadow:2px 2px 5px -1px #000,-2px -2px 4px -1px #fff5;}
.shareIcon:hover {padding:2px 0 0 1px;flex-basis:47px;border-right-color:#fff5;border-bottom-color:#fff5;border-left-color:#000;border-top-color:#000;}

/* CTRL BTNS COLOR */
.controlBar button.cancelBtn {color:#cc0;}
#cloneRecipeBtn {color:#0cc;}
#editRecipeBtn {color:#c0c;}
#deleteRecipeBtn {color:#a22;}
#saveRecipeBtn {color:#0c0;}

/* SEARCH */
.searchAndSort {display:flex;flex-flow:row nowrap;align-items:center;gap:14px;margin-bottom:12px;}
#searchbox {flex:2 1;color:#FFF;text-align:center;padding:3px 6px;border-radius:25px;background:none;box-shadow:-2px -2px 5px -1px #000,2px 2px 4px -1px #fff6;}
#searchbox:focus {outline:none;box-shadow:2px 2px 5px -1px #000,-2px -2px 4px -1px #fff6;}

/* TILES */
.recipeContainer {display:flex;flex-flow:row wrap;gap:12px;margin:14px 4% 12px 4%;}
.drinkTile {display:flex;flex-flow:row nowrap;flex:1 1 auto;border-radius:9px;overflow:hidden;cursor:auto;user-select:text;background:var(--tile-bg);}
.drinkTile:hover .drinkName {background:#065;}
.drinkTile:hover .tileMetaTags {border-top-color:#065;}
.drinkTile img {height:156px;max-height:156px;max-width:156px;object-fit:contain;object-position:top center;}
.drinkInfoWrapper {display:flex;flex-flow:column nowrap;gap:10px;flex:1 1;}
#viewName {color:var(--drinkName);font-size:18px;line-height:22px;font-weight:bold;padding:0 10px;text-shadow:-1px 1px 1px #000;}
.drinkName {font-size:18px;line-height:22px;padding:1px 10px 2px 10px;background:#056;}
.drinkingredientList {font-size:12px;line-height:16px;padding:0 10px;white-space:pre-wrap;}
.drinkSummary {padding:0 10px;white-space:pre-wrap;}
.tileMetaTags {margin-top:auto;padding:4px 3px 5px 3px;border-top:1px solid var(--tile-outline);}
.tileMetaTags .tileTag {margin:0 5px;}

/* POPUPS */
#loginContainer, #controlBar, #recipeContainer, #editRecipeBox, #viewRecipeBox {display:none;}

/* VIEW */
#viewRecipeBox, #editRecipeBox {margin:0 auto 12px auto;max-width:620px;padding:10px;text-align:center;border-radius:13px;background-color:var(--view-bg);}
#drinkImg {min-height:156px;max-height:45vh;width:156px;vertical-align:top;margin:0 10px 8px 0;object-fit:contain;object-position:center;}
#drinkImg[src=""] {display:none;}
.viewRecipeInfoWrapper {display:inline-block;}
#viewSummary {white-space:pre-wrap;margin:14px 0 4px 0;}
.viewRecipeInfoTable {border-spacing:0 12px;text-align:left;}
.viewRecipeInfoTable tr td:first-child {text-align:right;vertical-align:top;}
.viewRecipeInfoTable h3 {padding-right:10px;}
#viewIngredients {text-align:left;}
#viewIngredients tr td:first-child {text-align:right;}
#viewIngredients tr td:nth-child(2) {padding:0 6px 0 2px;}
#viewIngredients tr td:last-child {color:#bbb;font-style:italic;padding-left:4px;}
#viewInstructions {white-space:pre-wrap;}

/* EDIT */
#editRecipeBox select, #editRecipeBox button {flex:0 1;}
#editRecipeBox h2 {display:block;font-size:16px;line-height:20px;font-weight:bold;margin:0;color:var(--text);text-align:center;}
#glassImg, #editGlassImg {max-width:24px;max-height:24px;margin-right:10px;vertical-align:text-bottom;}
.editImgWrap {width:min-content;position:relative;border:2px dashed #555;padding:4px;margin:12px auto 18px auto;}
.editImgWrap:hover {border-color:var(--accent);}
.editImgWrap img {object-fit:contain;object-position:center;cursor:pointer;}
.editImgRemove {position:absolute;top:0;right:0;font-size:36px;line-height:1;color:#909090;padding:0 6px;background:var(--main-bg);cursor:pointer;}
.editImgRemove:hover {color:#911;}
.flexRowWrapper {display:flex;flex-flow:row nowrap;align-items:center;justify-content:start;margin-bottom:16px;}
.flexRowWrapper h3 {width:94px;text-shadow:-1px 1px 2px #000;}
textarea {flex:1 1;color:var(--text);padding:5px;background:var(--main-bg);border:1px solid;border-color:#000 #7a7d82 #7a7d82 #000;outline:none;}
textarea:focus {border-color:var(--accent);}
.flexRowWrapper input {flex:1 1;color:var(--text);padding:6px;background:none;border-bottom:1px solid var(--header);outline:none;}
.flexRowWrapper input:focus, .ingredientRow input:focus {border-bottom-color:var(--accent);}
fieldset {border:1px solid black;margin:0 0 16px 0;}
legend {text-align:left;color:var(--header);font-weight:bold;text-shadow:-1px 1px 2px #000;}
#editIngredients {background:none;}
.ingredientRow {display:flex;flex-flow:row nowrap;gap:10px;margin-top:7px;}
.ingredientRow:first-child {margin-top:0;}
.ingredientRow input {background:none;padding:4px;border-bottom:1px solid var(--header);color:var(--text);outline:none;}
.ingredientRow input[type="number"] {width:58px;}
.ingredientRow input[type="text"] {flex:1 1 auto;}
.editTag {display:inline-block;margin-right:12px;position:relative;cursor:pointer;}
.editTag:hover {padding-right:6px;margin-right:6px;border-radius:0 7px 7px 0;background:#000;}
.editTag:hover::before {content:'X';position:absolute;left:-17px;color:#911;padding:0 4px 0 5px;border-radius:7px 0 0 7px;background:#000;}

input[type="file"] {display:none;}

/* MISC */
#loader {display:none;width:40px;height:40px;border-radius:50%;border-top:3px solid #FFF;border-right:3px solid transparent;animation:rotation 1s linear infinite;}
@keyframes rotation {0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}}

@media (max-width:500px) {
  .recipeContainer {flex-flow:column nowrap;margin:14px 10px;}
  .drinkTile img {width:33% !important;height:unset;}
  #drinkImg {width:100%;}
  #viewRecipeBox, #editRecipeBox {margin:0;border-radius:0;}
  .ingredientRow {display:grid;grid-template-columns:80px 1fr;grid-template-rows:1fr 1fr;grid-auto-flow:column;gap:5px 7px;margin-top:12px;}
}

::selection {color:var(--accent);background-color:#000;}
:root {scrollbar-width:thin !important;scrollbar-color:#338 #0000 !important;}