:root{--text-color:black;--light-text:dimgrey;--border-color:whitesmoke;--button-color:cornflowerblue;--button-hover:darkturquoise;--dark-background:black;--highlight:silver;--radius:8px;--shadow:0 2px 10px var(--highlight);--transition:all .3s ease}*,:before,:after{box-sizing:border-box}body{background-color:#0000;width:100%;height:100vh;margin:0;padding:0;font-family:Inter,sans-serif}canvas{width:100%;height:100%;display:block;position:absolute;top:0;left:0;overflow:hidden}a{color:var(--button-color)}h3{color:var(--text-color);border-bottom:2px solid var(--border-color);margin-top:0;margin-bottom:20px;padding-bottom:10px;font-weight:600}label{flex-direction:column;font-size:14px;font-weight:500;display:flex}select{border:1px solid var(--border-color);border-radius:var(--radius);background-color:#fff;margin-top:3px;padding:8px;font-size:1.2em}input{border:1px solid var(--border-color);border-radius:var(--radius);transition:var(--transition);background-color:#fff;margin-top:3px;padding:8px;font-size:1.2em}input[type=checkbox]{width:24px;height:24px;accent-color:var(--button-color);cursor:pointer;align-self:right}textarea{border:1px solid var(--border-color);border-radius:var(--radius);background-color:#fff;margin-top:3px;padding:8px;font-family:inherit;font-size:1.2em}button{background-color:var(--button-color);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:8px;font-size:1.2em}button:hover{background-color:var(--button-hover)}@media (width<=600px){*{font-size:.8rem!important}}.card{border-radius:var(--radius);box-shadow:var(--shadow);transition:var(--transition);background-color:#0000;margin:10px 10px 24px;padding:24px}.delete{color:var(--button-color);cursor:pointer;text-align:center;justify-content:center;align-items:center;width:30px;height:100%;font-size:2em;display:flex}.delete:hover{color:var(--highlight)}#logo{justify-content:center;align-items:center;display:flex}.logo-wrapper{cursor:pointer;border:1px solid #0000;border-radius:1rem;padding:.5rem}.logo-wrapper:hover{border:1px solid var(--border-color)}.logo_text{margin:0;padding:0;font-weight:800;line-height:1}.logo_top{margin:0;padding:0;line-height:1}.logo_bottom{flex-direction:row;gap:1rem;display:flex}.logo_top,.logo_bottom_right{color:var(--dark-background)}.logo_bottom_left{color:var(--button-color)}.logo_bottom_right{text-align:left;font-size:25px;font-weight:500}.logo_top,.logo_bottom_left{font-size:50px}#modal_overlay{backdrop-filter:blur(4px);z-index:1000;background-color:#00000080;justify-content:center;align-items:center;display:none;position:fixed;inset:0;overflow:hidden}#modal{background-color:#fff;border-radius:1rem;width:90%;max-width:500px;max-height:90vh;padding:2rem;overflow-y:auto}#modal_header{text-align:center;margin-bottom:1rem;font-size:2rem}#modal_body{text-align:center;margin-bottom:1rem;& textarea{border:1px solid var(--border-color);border-radius:.5rem;width:100%;height:10rem;padding:.5rem;font-size:1.2rem}}#modal_actions{flex-direction:row;justify-content:center;gap:1rem;margin-top:1rem;display:flex;& button{cursor:pointer;background-color:var(--button-color);color:#fff;border:none;border-radius:.5rem;padding:.5rem;font-size:1.2rem}}#container{z-index:10;border-radius:var(--radius);pointer-events:none;color:var(--text-color);background:0 0;flex-direction:column;max-width:90vw;max-height:98vh;display:flex;position:absolute;top:5px;left:5px;overflow-y:auto}#back{z-index:10;position:absolute;top:5px;right:5px}#theme-toggle{z-index:10;position:absolute;top:50px;right:5px}#controls{margin:8px;padding:5px}#controls label>input,#controls label>select{box-sizing:border-box;width:100%}#job-footer{z-index:10;border-radius:var(--radius);color:#fff;pointer-events:none;background:#000;align-items:center;gap:1rem;padding:6px 16px;font-size:.95em;display:flex;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}#job-footer-customer{font-weight:600}form.design-form{grid-template-columns:repeat(5,max-content);justify-content:start;align-items:start;gap:10px;display:grid}.form-column{flex-direction:column;grid-column:1;gap:10px;display:flex}.form-group{border-radius:var(--radius);box-shadow:var(--shadow);pointer-events:auto;flex-direction:column;gap:4px;padding:.5rem;display:flex}.form-group>summary{cursor:pointer}.form-group>summary>h4{margin:0;display:inline}.form-group h3{margin-top:5px;margin-bottom:15px}.form-group h4{margin-top:2px;margin-bottom:2px}.form-group p{color:var(--light-text);margin-top:5px;margin-bottom:5px;font-size:.9em}.form-group--fundamentals{background:#7fffd4}.form-group--sections{background:#ffdead;grid-column:2}.form-group--bullnoses{background:khaki;grid-column:4}.form-group--measurements{background:#87cefa;grid-column:3}.form-group--style{background:plum}.form-group--materials{background:pink}.form-group--headheights{background:#ffdab9;grid-column:5}details.advanced{flex-direction:column;gap:4px;width:100%;display:flex}details.advanced.section-hidden{display:none}details.advanced>summary{cursor:pointer;color:var(--light-text);margin:4px 0;font-weight:600}.section-hidden{display:none}#section-list,#bullnose-list{flex-direction:column;gap:.5rem;display:flex}.section-title{flex-direction:row;justify-content:space-between;align-items:center;width:100%;display:flex}.section-list-item{border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;align-items:center;padding:.5rem;display:flex;& label{width:100%}}#add-section-container,#add-bullnose-container{flex-direction:row;justify-content:center;margin-top:.5rem;display:flex}@keyframes flash-direct{0%{background-color:#fff}50%{background-color:#f8f8ff}to{background-color:#fff}}@keyframes flash-indirect{0%{background-color:#7fffd4}5%{background-color:#00ff7f}10%{background-color:#7fffd4}90%{background-color:#7fffd4}to{background-color:#fff}}.flash-direct{animation:.3s ease-in-out flash-direct}.flash-indirect{animation:5s ease-out flash-indirect}#title{text-align:center;color:#708090;font-size:1.8rem}#job_heading{flex-direction:row;justify-content:center;align-items:center;gap:1rem;display:flex}#top_section{flex-direction:row;gap:1rem;display:flex}#job{background-color:#0000;padding:.5rem;& .hidden{display:none}& #stairs_list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.5rem;padding:1rem;display:grid;& li{background-color:#f5f5f5;border-radius:1rem;flex-direction:column;padding:1rem;display:flex;& .line_actions{justify-content:center;align-items:center;gap:1rem;display:flex}}& li:hover{color:#fff;background-color:#008b8b}& li:not(input){cursor:pointer}}& #stairs_list.drag_target{border:3px solid #6495ed;border-radius:1rem}& .stair_line{& input{height:2rem}text-align:center;align-items:center}}.stair_box{cursor:pointer;border:2px solid #0000}ol.drag_target li:hover{background:unset}li.drop-before{border:2px solid #0000;border-color:#6495ed #0000 #0000 #6495ed}li.drop-after{border:2px solid #6495ed;border-color:#0000 #6495ed #6495ed #0000}.delete_button{background-color:#e4312b}#actions{backdrop-filter:blur(5px);position:sticky;bottom:0}#url-prompt{background-color:var(--button-color);color:#fff;opacity:0;pointer-events:none;border-radius:1rem;margin:.5rem;padding:1rem;transition:all .3s;position:fixed}#copy-url{color:var(--button-color);background-color:#0000;position:absolute}#copy-url:hover{text-decoration:underline}#clear_search{color:tomato}.jobs_page_header_header{grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;width:100%;display:grid}.header_right{justify-self:end;align-items:center;gap:1rem;display:flex}#jobs_page{background-color:#fff;flex-direction:column;align-items:center;display:flex;& .job_number{text-align:right;flex:0 0 4rem;font-weight:700;@media (width<=600px){display:none}}& .address{text-overflow:ellipsis;white-space:nowrap;flex:2 20rem;min-width:0;overflow:hidden}& .region{flex:10rem;min-width:0;@media (width<=600px){display:none}}& .contact{text-overflow:ellipsis;white-space:nowrap;flex:15rem;min-width:0;overflow:hidden}& li{margin:.2rem;list-style:none}& ul{margin:0;padding:0;list-style:none}& .jobs_page_header{background-color:#fff;width:100%;position:sticky;top:0;box-shadow:0 8px 10px 1px #fff;& .search_bar{justify-content:center;align-items:center;gap:1rem;display:flex;& button{cursor:pointer;background-color:#0000;border:none;font-size:2rem}& button:hover{color:var(--button-color);transform:scale(1.2)}}}& .job{cursor:pointer;border:1px solid var(--border-color);border-radius:.5rem;flex-direction:row;align-items:center;gap:1rem;width:100%;padding-left:1rem;padding-right:1rem;display:flex}& .job:hover{background-color:var(--palette-4);color:var(--palette-1);& .job_number{color:var(--button-color)}}& h4{margin:1rem}& .hidden{display:none}& .category_header{color:#fff;background-color:#008b8b;border-radius:.5rem;flex-direction:row;justify-content:space-between;align-items:center;width:100px;padding:1rem;display:flex;& h2{margin:0}}& button{background-color:#0000;border:none}& .category_header:hover{& button{color:var(--palette-3);transform:scale(2)}}& #recent_header{cursor:pointer;width:100px;transition:all .3s}& .jobs{box-sizing:border-box;width:calc(100% - 20px)}& #new_job{background-color:var(--button-color);color:#fff;border:none;border-radius:.5rem;padding:.5rem;font-size:1.2rem}& #new_job:hover{background-color:var(--highlight);transform:none}}#mountains{margin:0;padding:0;list-style:none}.mountain_line{color:#333;justify-content:space-between;gap:.5rem;padding:0;font-size:.95rem;display:flex}.mountain_line:has(.total_rise_name){font-size:1rem;font-weight:700}.mountain_line:first-child{opacity:.25}.mountain_line:nth-child(2){opacity:.5}.mountain_line:nth-child(3){opacity:.75}.mountain_line:last-child{opacity:.25}.mountain_line:nth-last-child(2){opacity:.5}.mountain_line:nth-last-child(3){opacity:.75}#login_container_container{justify-content:center;align-items:center;min-height:100vh;display:flex;& #login_container{background-color:var(--palette-4);border:1px solid var(--border-color);width:80%;max-width:500px;box-shadow:var(--shadow);border-radius:1rem;flex-direction:column;padding:2rem;display:flex;& #login_header{flex-direction:row;justify-content:space-between;height:3rem;margin-bottom:1rem;display:flex;& img{height:100%}& h1{margin:0;padding:0;font-size:2rem}}}& #login_form{flex-direction:column;gap:1rem;display:flex}}