@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..400;1,100..400&display=swap";@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";@import"https://fonts.googleapis.com/css2?family=Exo&display=swap";.max-50{max-inline-size:50%}.w-max-30{max-inline-size:30rem!important}.w-150{inline-size:1.5rem}.h-150{block-size:1.5rem}.roofTypeSVG{inline-size:60%}.stroke-015>path{stroke-width:.15}.after-mt-2:after{margin-top:22px}.after-mr-2:after{margin-left:-22px}.after-mb-2:after{margin-top:-22px}.after-ml-2:after{margin-left:22px}.text-disabled{color:#aaa}.svgStrokeBlue>path{stroke:#0290e4}.check{background:#00b900!important}.ral7016{background:#383e42!important}.ral7021{background:#2f3234!important}.ral9005{background:#0e0e10!important}.ral9010{background:#f1ece1!important}.align-self-center{align-self:center}.align-self-top{align-self:start}.justify-self-end{justify-self:end}.content:has(.child-center){display:grid;place-content:center}.grid-1{grid-template:1fr/1fr!important}.col-1-3{grid-column:1/4!important}.col-2-4{grid-column:2/4}.col-2-6{grid-column:2/7}.col-3-4{grid-column:3/6}.col-4-6{grid-column:4/7}.row-2-6{grid-row:2/7}.row-3-4{grid-row:3/6}.row-4-6{grid-row:4/7}.selectBorder{border:3px solid rgb(0,185,0)!important}.circleBtn{inline-size:3rem;block-size:3rem;background:#fff;border:none;border-radius:50%}.colorPicture{inline-size:3rem;block-size:3rem;position:absolute;border-radius:50%}.showCheck{inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;position:absolute;border-radius:50%}.showCheck>svg{min-inline-size:3rem;max-inline-size:3rem;min-block-size:3rem;max-block-size:3rem;border:3px solid rgb(0,185,0);fill:#fff;opacity:0;border-radius:50%}.circleInput:checked+.circleBtn .showCheck>svg{opacity:1}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}*:focus-visible{outline:1px solid black}body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}ul[role=list],ol[role=list]{list-style:none}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}input[type=number]{-moz-appearance:textfield}input[type=radio]{inline-size:0!important;block-size:0!important}fieldset{border:none;outline:none}button:hover{cursor:pointer}body{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,Exo,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;overflow:hidden}.epdm-optimizer{padding:1.5rem;max-width:80rem;margin:0 auto;background:linear-gradient(135deg,#d8ebfd80,#ccedfb4d);min-height:100vh}.epdm-optimizer__options-panel{padding:1.5rem}.epdm-optimizer__options-panel h4{margin-bottom:1.5rem}.epdm-optimizer__header{margin-bottom:2rem}.epdm-optimizer__header h2{font-size:2rem;font-weight:700;color:#18213b;margin-bottom:.5rem}.epdm-optimizer__header p{color:#676767;font-size:1rem}.epdm-optimizer__main{display:grid;grid-template-columns:1fr 2fr;gap:2rem}@media(max-width:1280px){.epdm-optimizer__main{grid-template-columns:1fr}}.epdm-optimizer__options-panel{background:#fff;border:1px solid rgba(0,0,0,.05);overflow:hidden}.epdm-optimizer__options-list{display:flex;flex-direction:column;gap:.75rem}.epdm-optimizer__show-more-btn{width:100%;padding:1rem;box-sizing:border-box;background:linear-gradient(135deg,#0290e4,#1ca9fd);color:#fff;border:none;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.epdm-optimizer__show-more-btn:hover{background:linear-gradient(135deg,#03a0fd,#35b3fd);transform:translateY(-1px)}.epdm-optimizer__show-more-btn:active{transform:translateY(0)}.epdm-optimizer__show-more-btn svg{flex-shrink:0}.epdm-optimizer__show-more-content{display:flex;align-items:center;gap:.75rem}.epdm-optimizer__show-more-icon{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:#fff3;flex-shrink:0}.epdm-optimizer__show-more-text{display:flex;flex-direction:column;align-items:flex-start;gap:.125rem}.epdm-optimizer__show-more-title{font-weight:600;line-height:1.2}.epdm-optimizer__show-more-subtitle{font-size:.75rem;opacity:.9;font-weight:400;line-height:1.2}.epdm-optimizer__option-card{padding:1rem;border:2px solid #e5e7eb;cursor:pointer;transition:all .2s;margin-bottom:.5rem}.epdm-optimizer__option-card:hover{border-color:#d1d5db}.epdm-optimizer__option-card--selected{border-color:#0290e4;background-color:#0290e40d}.epdm-optimizer__option-card--selected:hover{border-color:#0290e4;background-color:#0290e41a}.epdm-optimizer__option-card--best{border-color:#00b900;background-color:#00b9000d}.epdm-optimizer__option-card--best:hover,.epdm-optimizer__option-card--best.epdm-optimizer__option-card--selected{border-color:#00b900;background-color:#00b9001a}.epdm-optimizer__option-card--best.epdm-optimizer__option-card--selected:hover{border-color:#00b900;background-color:#00b90026}.epdm-optimizer__option-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}.epdm-optimizer__option-card-header .width-info{display:flex;align-items:center;gap:.5rem}.epdm-optimizer__option-card-header .width-info .width{font-weight:600;font-size:1.125rem}.epdm-optimizer__option-card-header .width-info .mixed-widths{display:flex;flex-direction:column;gap:.25rem}.epdm-optimizer__option-card-header .width-info .mixed-widths .width{font-weight:600;font-size:1.125rem}.epdm-optimizer__option-card-header .width-info .mixed-widths .combination-details{display:flex;flex-wrap:wrap;gap:.375rem}.epdm-optimizer__option-card-header .width-info .mixed-widths .combination-details .strip-detail{display:inline-block;font-size:.75rem;background-color:#0290e41a;color:#0290e4;padding:.125rem .375rem;font-weight:500}.epdm-optimizer__option-card-header .header-right{display:flex;align-items:center;gap:.5rem}.epdm-optimizer__option-card-header .header-right .badge{padding:.125rem .5rem;background-color:#00b9001a;color:#00b900;font-size:.75rem;font-weight:500}.epdm-optimizer__option-card-header .cost{font-size:1.25rem;font-weight:700;color:#18213b}.epdm-optimizer__option-card-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;font-size:.875rem}.epdm-optimizer__option-card-metrics .metric{text-align:center}.epdm-optimizer__option-card-metrics .metric .label{color:#676767;margin:0}.epdm-optimizer__option-card-metrics .metric .value{font-weight:600;margin:0}.layout-viz{padding:1.5rem;background:#fff;border:1px solid rgba(0,0,0,.05)}.layout-viz__header{margin-bottom:1.5rem}.layout-viz__header h3{font-size:1.25rem;font-weight:600;margin:0 0 .75rem;color:#18213b}.layout-viz__info{display:flex;gap:1.5rem;margin-bottom:1rem;font-size:.875rem;color:#676767}.layout-viz__info span{font-weight:500}.layout-viz__metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1rem}.layout-viz__metrics .metric{text-align:center;padding:.5rem;background:#00000005}.layout-viz__metrics .metric .label{font-size:.75rem;color:#676767;font-weight:500;margin-bottom:.25rem}.layout-viz__metrics .metric .value{font-size:1rem;font-weight:600;color:#18213b}.layout-viz__canvas{display:flex;flex-direction:column;align-items:center;margin:1.5rem 0}.layout-viz__canvas svg{border:1px solid #ddd}.layout-viz__legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid #eee}.layout-viz__legend .legend-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem;padding:.25rem .5rem;cursor:pointer;transition:all .2s ease}.layout-viz__legend .legend-item:hover{background-color:#0000000d;transform:translateY(-1px)}.layout-viz__legend .legend-item:hover .legend-color{transform:scale(1.1)}.layout-viz__legend .legend-item:hover span{font-weight:600;color:#18213b}.layout-viz__legend .legend-item .legend-color{width:1rem;height:1rem;flex-shrink:0;transition:all .2s ease}.layout-viz__legend .legend-item span{transition:all .2s ease}.layout-viz__warning{color:orange;font-size:.875rem;font-weight:500;margin-top:1rem;padding:.75rem;background:#ffa5001a;border-left:4px solid orange}*:focus-visible{box-shadow:0 0 10px 1px #0003!important}#app{inline-size:100svw;block-size:100svh}.main{inline-size:100svw;max-inline-size:100svw;block-size:100svh;max-block-size:100svh;display:grid;grid-template:3.5rem 1fr 4rem/1fr;overflow:hidden;transition:all .3s}.main:after{content:"";width:100vw;height:100vh;position:absolute;top:0;left:0;opacity:0;background:#0006;pointer-events:none;transition:opacity .3s}.topBar{inline-size:100%;padding:.5rem .5rem 0;display:flex;justify-content:space-between;position:relative}.topBar>.backBtn{inline-size:2rem;block-size:2rem}.topBar>.backBtn:hover>svg{fill:#fff}.topBar>.hide{opacity:0;-webkit-user-select:none;user-select:none;z-index:-1}.topBar>.topBarTitle{padding:.5rem .75rem;position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;background:#0290e4;border-bottom-right-radius:7px;border-bottom-left-radius:7px}.topBar>.breadcrumbs{inline-size:33%;display:flex;flex-direction:column;justify-content:start;align-items:end;font-size:.8rem;font-weight:700;line-height:1rem}.topBar>.breadcrumbs>.activeStep{color:#0290e4}.content{block-size:100%;overflow-x:hidden;overflow-y:auto;transition:filter .3s}.content>.page{inline-size:100%;max-inline-size:80rem;margin-inline:auto;padding:0 .5rem 1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow-x:hidden;overflow-y:auto}.content .typeCard{margin:.5rem;padding:2rem 0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;border-radius:7px;box-shadow:2px 2px 7px 1px #0000004d}.content .typeCard:hover{cursor:pointer}.roofInput{inline-size:calc(100% - 4px);max-inline-size:22rem;block-size:4rem;margin:0 0 1.5rem 2px!important}.roofInput>label{font-weight:700}.lRoofInput{inline-size:calc(100% - .25rem);block-size:4rem}.lRoofInput>label{font-weight:700}.roofSvgSize{inline-size:100%}.lengthSideLabel{position:absolute;top:50%;left:1rem;font-weight:700}.aSideLabel{position:absolute;bottom:-2rem;left:38%;font-weight:700}.bSideLabel{position:absolute;top:20%;right:4rem;font-weight:700}.lShapeForm{inline-size:100%;margin-top:3rem;display:grid;grid-template:50% 50%/50% 50%}.product{inline-size:100%;block-size:6.5rem;margin-bottom:.5rem;display:grid;grid-template:min-content 1fr/min-content 1fr;position:relative}.product.flex-shrink-1{max-inline-size:60%;inline-size:auto;min-inline-size:280px}.product>img{min-inline-size:5.5rem;max-inline-size:5.5rem;min-block-size:5.5rem;max-block-size:5.5rem;aspect-ratio:1/1;grid-row:1/3;grid-column:1}.product>h2{padding-left:.5rem;font-size:1.125rem}.product>div{padding-left:.5rem;display:flex;flex-direction:column;gap:.125rem}.product>div>span{font-size:.8rem;line-height:1.2;color:#666}.product>div>span:before{content:"・";margin-right:.25rem;color:#0290e4}.product>span{position:absolute;top:50%;right:0;transform:translateY(50%)}.clickableProduct{inline-size:calc(100% - .5rem);block-size:min-content;padding-bottom:.5rem;border:3px solid transparent;border-radius:7px;transition:border .3s,box-shadow .3s;box-shadow:2px 2px 7px 1px #0003;overflow:hidden}.clickableProduct>h2{width:calc(100% - 3rem);padding-top:.5rem;font-size:.9rem}.clickableProduct>img{min-inline-size:5.5rem;max-inline-size:5.5rem;min-block-size:5.5rem;max-block-size:5.5rem}.clickableProduct>span{top:50%;right:.5rem;transform:translateY(-50%)}.clickableProduct .amountCardAmount{width:5rem;position:relative}.clickableProduct .amountCardAmount .dec-btn,.clickableProduct .amountCardAmount .inc-btn{height:2rem;padding-block:.5rem;position:absolute;top:0}.clickableProduct .amountCardAmount .dec-btn>svg,.clickableProduct .amountCardAmount .inc-btn>svg{min-width:1rem;min-height:1rem;max-width:1rem;max-height:1rem}.clickableProduct .amountCardAmount .dec-btn{padding-left:.25rem;left:0}.clickableProduct .amountCardAmount .dec-btn>svg{rotate:180deg}.clickableProduct .amountCardAmount .inc-btn{padding-right:.25rem;right:0}.clickableProduct .amountCardAmount input{inline-size:5rem;block-size:2rem;padding-inline:1.5rem;border:1px solid rgba(0,0,0,.5);border-radius:4px;text-align:center}.clickableProduct .amountCardAmount input:focus-within{outline:1px solid black;box-shadow:none!important}.clickableProduct .amountCardAmount input:after{content:"st"}.clickableProduct:hover{cursor:pointer}.clickableProduct:after{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 507.506 507.506' style='enable-background:new 0 0 507.506 507.506;' xml:space='preserve' width='10' height='10' fill='white'%3E%3Cg%3E%3Cpath d='M163.865,436.934c-14.406,0.006-28.222-5.72-38.4-15.915L9.369,304.966c-12.492-12.496-12.492-32.752,0-45.248l0,0 c12.496-12.492,32.752-12.492,45.248,0l109.248,109.248L452.889,79.942c12.496-12.492,32.752-12.492,45.248,0l0,0 c12.492,12.496,12.492,32.752,0,45.248L202.265,421.019C192.087,431.214,178.271,436.94,163.865,436.934z'/%3E%3C/g%3E%3C/svg%3E");inline-size:1.25rem;block-size:1.25rem;padding:2px 0 0;display:grid;place-content:center;position:absolute;top:.25rem;right:.25rem;border-radius:50%;background:transparent;font-size:.8rem;transition:background .3s}.selectedProduct{border:3px solid rgb(0,185,0);box-shadow:none}.selectedProduct:after{background:#00b900}.glueOption{margin-bottom:1rem;padding:.5rem;position:relative;display:flex;flex-direction:column;border-radius:.5rem;box-shadow:2px 2px 10px 1px #0003;overflow:hidden;outline:3px solid transparent;transition:all .3s;cursor:pointer}.border-success-2{outline:3px solid rgb(0,185,0)}.glueSelectBtn{width:min-content!important;padding:.25rem .5rem;position:absolute;top:.5rem;right:.25rem;font-size:.8rem;color:#fff;border-radius:.25rem}.glueProduct{max-width:25rem;margin-bottom:1.5rem;display:grid;grid-template:min-content/5rem 1fr;font-size:.9rem;line-height:1}.glueProduct>img{grid-column:1}.glueProduct>span,.glueProduct>div{padding-left:.5rem}.rectRooftrimSelection{inline-size:100%;block-size:100%;margin-top:2rem;display:grid;place-content:center;place-items:center;grid-template:2rem var(--selection-height) 2rem/2rem var(--selection-width) 2rem;gap:2px;position:relative;--selection-width: 12rem;--selection-height: 20rem}.lShapeRooftrimSelection{inline-size:100%;block-size:100%;margin-top:2rem;display:grid;place-content:center;place-items:center;grid-template:repeat(7,var(--selection-size))/repeat(7,var(--selection-size));position:relative;--selection-size: 2.5rem}.lShapeRooftrimSelection>.cornerTrimBtn{inline-size:var(--selection-size);block-size:var(--selection-size)}.lShapeRooftrimSelection>.cornerTrimBtn:after{top:4px;left:8px}.lShapeRooftrimSelection>.insideCornerBtn:after{top:-40px!important;left:50px!important}.straightTrimBtn{inline-size:var(--btn-width);block-size:var(--btn-height);position:relative;background:#aaa;cursor:pointer;transition:background .3s;--btn-width: 100%;--btn-height: .75rem}.straightTrimBtn:has(input:checked){background:#0290e4}@media(hover:hover)and (pointer:fine){.straightTrimBtn:has(input:checked):hover{background:#d44950}}.straightTrimBtn:has(input:checked):after{content:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 507.506 507.506' xml:space='preserve' fill='rgb(2, 144, 228)' width='14' height='14'%3E%3Cg%3E%3Cpath d='M163.865,436.934c-14.406,0.006-28.222-5.72-38.4-15.915L9.369,304.966c-12.492-12.496-12.492-32.752,0-45.248l0,0 c12.496-12.492,32.752-12.492,45.248,0l109.248,109.248L452.889,79.942c12.496-12.492,32.752-12.492,45.248,0l0,0 c12.492,12.496,12.492,32.752,0,45.248L202.265,421.019C192.087,431.214,178.271,436.94,163.865,436.934z'/%3E%3C/g%3E%3C/svg%3E%0A");padding:2px 0 0;border-color:#0290e4}@media(hover:hover)and (pointer:fine){.straightTrimBtn:hover{background:#00b900}}.straightTrimBtn>input{inline-size:0;block-size:0;position:absolute;opacity:0}.straightTrimBtn:after{content:"";inline-size:1.5rem;block-size:1.5rem;display:grid;place-content:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#0290e4;border:2px solid rgb(170,170,170);border-radius:4px;font-size:.8rem}.cornerTrimBtn{inline-size:var(--btn-size);block-size:var(--btn-size);position:relative;border-top:.8rem solid transparent;border-right:.8rem solid transparent;outline:2px solid transparent;rotate:var(--btn-rotate);cursor:pointer;transition:border-color .3s;--btn-size: 2rem;--btn-rotate: 0deg}.cornerTrimBtn:has(input:checked){border-color:#0290e4;outline-color:#fff}.cornerTrimBtn:has(input:checked):after{content:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 507.506 507.506' xml:space='preserve' fill='rgb(2, 144, 228)' width='14' height='14'%3E%3Cg%3E%3Cpath d='M163.865,436.934c-14.406,0.006-28.222-5.72-38.4-15.915L9.369,304.966c-12.492-12.496-12.492-32.752,0-45.248l0,0 c12.496-12.492,32.752-12.492,45.248,0l109.248,109.248L452.889,79.942c12.496-12.492,32.752-12.492,45.248,0l0,0 c12.492,12.496,12.492,32.752,0,45.248L202.265,421.019C192.087,431.214,178.271,436.94,163.865,436.934z'/%3E%3C/g%3E%3C/svg%3E%0A");padding:2px 0 0;border-color:#0290e4}@media(hover:hover)and (pointer:fine){.cornerTrimBtn:has(input:checked):hover{border-color:#d44950}}@media(hover:hover)and (pointer:fine){.cornerTrimBtn:hover{border-color:#00b900}}.cornerTrimBtn>input{inline-size:0;block-size:0;position:absolute;opacity:0}.cornerTrimBtn:after{content:"";inline-size:1.5rem;block-size:1.5rem;display:grid;place-content:center;position:absolute;top:4px;left:-8px;color:#0290e4;border:2px solid rgb(170,170,170);border-radius:4px;font-size:.8rem;rotate:calc(var(--btn-rotate) * -1)}.insideCornerBtn{position:absolute;top:calc((.8rem - 1px)*-1);left:calc((.8rem - 1px)*-1)}.insideCornerBtn:hover{cursor:pointer}.insideCornerBtn:after{top:-38px!important;left:60px!important}.roofTrimImage{inline-size:100%;max-inline-size:20rem;aspect-ratio:1}.svg-info:after{content:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg fill='%23000000' width='12px' height='12px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 23l-1-0v-8.938c0-0.011-0.003-0.021-0.003-0.031s0.003-0.020 0.003-0.031c0-0.552-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v8h-1c-0.552 0-1 0.448-1 1s0.448 1 1 1h4c0.552 0 1-0.448 1-1s-0.448-1-1-1zM16 11c1.105 0 2-0.896 2-2s-0.895-2-2-2-2 0.896-2 2 0.896 2 2 2zM16-0c-8.836 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 30.031c-7.72 0-14-6.312-14-14.032s6.28-14 14-14 14 6.28 14 14-6.28 14.032-14 14.032z'%3E%3C/path%3E%3C/svg%3E")}.footer{inline-size:calc(100% + 1rem);block-size:100%;padding:0 1rem 0 .5rem;align-self:end;position:relative;transform:translate(-.5rem);background-color:#0290e4;z-index:1}.footer>button{inline-size:100%;block-size:100%;display:flex;justify-content:end;align-items:center;color:#fff;border-radius:0;font-size:1.25rem;font-weight:700}.footer>.portablePriceContainer{inline-size:8rem;block-size:100%;display:grid;place-content:center;position:absolute;top:50%;left:1.5rem;transform:translateY(-50%);color:#fff;background-color:#00b900;font-size:1.25rem;font-weight:700}.footer>.portablePriceContainer>span{position:absolute;right:2rem;bottom:.5rem;font-size:.45rem;font-weight:400;white-space:nowrap}.overview{inline-size:100%;margin-bottom:2rem;display:flex;flex-direction:column}.priceContainer{inline-size:calc(100% - 1rem);padding:.5rem;display:grid;place-content:end;position:fixed;right:.5rem;bottom:5rem;background-color:#d8ebfd;border-radius:7px;font-size:1.25rem;font-weight:700}.priceContainer>p{position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.priceContainer>span{font-size:.45rem;font-weight:400;white-space:nowrap}.portableOverviewBtn{inline-size:3rem;block-size:3rem;display:grid;place-content:center;position:absolute;bottom:4.5rem;left:.5rem;background:#00b900;border-radius:50%;transition:bottom .3s;box-shadow:2px 2px 10px 1px #0000004d;z-index:1}.portableOverviewBtn:hover{cursor:pointer}.portableOverviewBtn>svg{inline-size:1.25rem;max-inline-size:1.25rem;block-size:1.25rem;max-block-size:1.25rem}.portableOverviewBtn>svg>g{fill:#fff}.portableOverviewBtn:has(input:checked){bottom:calc(75svh + .5rem)}.portableOverviewBtn:has(input:checked)~.portableOverview{--transform: calc(100% - 75svh) }.portableOverview{inline-size:100%;block-size:calc(75svh - 4rem);max-block-size:calc(75svh - 4rem);padding:.5rem;position:fixed;top:var(--transform);left:0;background:#fff;overflow-y:auto;transition:top .3s;box-shadow:2px 2px 7px 1px #0000004d;scroll-behavior:smooth;z-index:1;--transform: calc(100% - 4rem) }.portableOverview>.portableProduct{margin-bottom:.5rem;padding:.5rem;display:flex;flex-direction:column;position:relative;border-bottom:1px solid rgb(150,150,150)}.portableOverview>.portableProduct>.productPrice{position:absolute;right:.5rem}.overviewProduct{margin-bottom:1rem;padding-bottom:1rem;display:grid;grid-template:min-content 1fr/4.5rem 1fr min-content}.overviewProduct>img{min-inline-size:4.5rem;max-inline-size:4.5rem;min-block-size:4.5rem;max-block-size:4.5rem;grid-row:2;grid-column:1}.overviewProduct:has(>img)>div{margin-left:.5rem;padding-left:.5rem;border-left:1px solid rgb(220,220,220)}.overviewProduct:has(>img)>.productChildren{margin-left:.5rem;padding-left:.5rem;border-left:1px solid rgb(220,220,220)}.overviewProduct>.productPrice{grid-row:1;grid-column:3}.productTitle{grid-row:1;grid-column:1/3}.productChildren{grid-row:2;grid-column:2/4}.productChildren:has(.subProduct){padding-left:0;grid-column:1/4}.subProduct{inline-size:100%;margin-bottom:.25rem;display:grid;grid-template:1fr/4.5rem 1fr min-content}.subProduct>img{min-inline-size:4.5rem;max-inline-size:4.5rem;min-block-size:4.5rem;max-block-size:4.5rem}.subProduct:has(img)>div{margin-left:.5rem;padding-left:.5rem;border-left:1px solid rgb(220,220,220)}.main:has(.portableOverviewBtn>input:checked):after{opacity:1}.main:has(.portableOverviewBtn>input:checked)>.content{filter:blur(4px) grayscale(.6)}.overviewFooter{background-color:#00b900}.animation{translate:0 0;opacity:0;animation:fade-in .1s cubic-bezier(.62,.28,.23,.99) forwards}.between{display:flex;justify-content:space-between}.button{inline-size:100%;block-size:2rem;padding:.25rem .5rem;display:grid;place-content:center;border-radius:4px;color:#fff;background:#0290e4}@media(prefers-reduced-motion:no-preference){.animation{translate:100% 0;animation:fade-in .3s cubic-bezier(.62,.28,.23,.99) forwards}}@keyframes fade-in{to{opacity:1;translate:0 0}}@media screen and (min-width:768px){.topBar>.backBtn{inline-size:5rem}.content{padding:0 4rem;display:flex}.roofInput{margin:0 auto 1.5rem!important}.lShapeForm{max-inline-size:20.5rem}.lRoofInput{max-inline-size:10rem}.lengthSideLabel{left:5rem}.rectRooftrimSelection{--selection-width: 25rem !important;--selection-height: 35rem !important}.lShapeRooftrimSelection>.cornerTrimBtn:after{left:20px}.lShapeRooftrimSelection>.insideCornerBtn:after{left:64px!important}.buttonGroupSize{inline-size:75%!important}.roofTrimImage{max-inline-size:30rem}}.roof-viz{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.roof-viz--empty{opacity:.7}.roof-viz svg{max-width:100%;height:auto;background:#f8f9fa;border-radius:8px;box-shadow:0 2px 8px #0000001a}.roof-viz__legend{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;align-items:center;font-size:.85rem}.roof-viz__legend .legend-item{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;background:#fffc;border-radius:4px;cursor:pointer;transition:all .3s ease;border:1px solid rgba(0,0,0,.1)}.roof-viz__legend .legend-item:hover{background:#fff;box-shadow:0 2px 4px #0000001a;transform:translateY(-1px)}.roof-viz__legend .legend-item .legend-color{border-radius:2px;min-width:20px;height:12px}.roof-viz__legend .legend-item span{font-weight:500;color:#333;white-space:nowrap}.roofSvgSize{display:flex;justify-content:center;align-items:center;min-height:280px;width:100%}.roofSvgSize .roof-viz{width:100%;max-width:500px}@media screen and (min-width:992px){.roofSvgSize{inline-size:50%;min-height:320px}.roofSvgSize .roof-viz{max-width:600px}.lengthSideLabel{left:3rem}.rectRooftrimSelection{--selection-width: 15rem !important;--selection-height: 25rem !important}.overviewProduct{grid-template:1fr/8rem 1fr min-content}.overviewProduct>img{min-inline-size:8rem;max-inline-size:8rem;min-block-size:8rem;max-block-size:8rem}.subProduct{grid-template:1fr/8rem 1fr min-content}.subProduct>img{min-inline-size:8rem;max-inline-size:8rem;min-block-size:8rem;max-block-size:8rem}.portableOverview{max-width:30rem}}