@import "builderTools.css?20241112";

/* 

*/
:root {
    --door-scale:1.3;
    --door-transform-origin:50% 50%;
    --zoomed-door-scale: 3;
}
svg.icon-tickdisk {
    fill: var(--brand-accent-colour);
}
#footer {
    position:sticky;
    bottom:0;  
    z-index: 99;
}
#right #view {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;
    justify-content: center;
    align-content: center;
    min-height: calc(417px * var(--door-scale));
    overflow: hidden;
    position: relative;
}
#view.withRender{
    border-radius: 1rem;
}
#view.withRender::after {
    content: " ";
    display: block;
    position: absolute;
    inset: 0;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.666) inset;
    pointer-events: none;
}
/* taken from oldBuilderStyle vvvvv */
/* #doorBounds {
    height:417px; width:190px;  position:relative;
    } */
    #doorBounds {
        height: 422px;
        width: 187px;
        position:relative;
        pointer-events: none;
        /*--margininline: 55px;
        --marginblock: 43px;*/
        --margininline: 110px;
        --marginblock: 85px;
    }
    /* whilst html-to-image is working */
    .generatingImage #right {/* make sure this isnt hidden whilst generating image */
        display:block;
    }
    .generatingImage #doorBounds {/* remove the transforms and animations */
        transform: none;
        transition: none;
        transition-duration: 0ms;
    }
    .generatingImage #view {/* temporarily apply the scale to the #view object instead (so we dont see any bounce but the doorbound is its native size for the html-to-image to work) */
        /*transform: scale(var(--door-scale));
        transform-origin: 50% 50%;*/
    }
    .generatingImage #doorBounds {/* temporarily apply the scale to the #view object instead (so we dont see any bounce but the doorbound is its native size for the html-to-image to work) */
        zoom:var(--door-scale);
    }
    .generatingImage2 #doorBounds { /* this one is removed 10ms later than .generatingImage is so that we avoid the animation showing */
        transition-duration: 0ms;
    }
    /* END whilst html-to-image is working */
    #doorSummary_summary #imgData {max-height:200px; margin-bottom:1rem;}

    /* needed for the summary view but does not affect the main view */
    #doorBounds[data-showing-sidePanelLeft]{margin-left: var(--margininline);}
    #doorBounds[data-showing-sidePanelLeft] #_sidePanelLeft::before,
    #doorBounds[data-showing-sidePanelRight] #_sidePanelRight::before {/* no glass grid pattern */
        content: " ";
        display: block;
        position: absolute;
        height: 418px;
        width: 100%;
        margin-block: auto;
        /*background: repeating-conic-gradient(#cccccc 0% 25%, #fefefe 0% 50%) 50% / 16.5px 16.5px;*/
        background: repeating-conic-gradient(var(--chequerboard-from) 0% 25%, var(--chequerboard-to) 0% 50%) 50% / 16.5px 16.5px;
        bottom: 0;
        box-shadow: 0 0 0px 13px inset var(--ui-shadow); /* give it a border in case the frame borders are rough */
    }
    #doorBounds[data-showing-sidePanelRight]{margin-right: var(--margininline);}
    #doorBounds[data-showing-sidePaneltop],
    #doorBounds[data-showing-sidePanelLeft~="withtop"],
    #doorBounds[data-showing-sidePanelRight~="withtop"]{
        margin-top: var(--marginblock);
    }
    #doorBounds[data-showing-sidePaneltop] #_sidePanelTop::before {/* no glass grid pattern */
        content: " ";
        display: block;
        position: absolute;
        margin-block: auto;
        background: repeating-conic-gradient(var(--chequerboard-from) 0% 25%, var(--chequerboard-to) 0% 50%) 50% / 16.5px 16.5px;
        /* inset: 10px 10px 1px 10px; */
        inset: 0;
        box-shadow: 0 0 0px 2px inset var(--ui-shadow); /* give it a border in case the frame borders are rough (but has to be shallow for the integrated frames)*/
    }
    #doorBounds[data-showing-sidePanelLeft~="flag"] #_sidePanelLeft::before,
    #doorBounds[data-showing-sidePanelRight~="flag"] #_sidePanelRight::before {
        bottom: 180px;
        height: 242px;
    }
    #doorBounds[data-showing-sidePanelLeft~="withtop"] #_sidePanelLeft::before,
    #doorBounds[data-showing-sidePanelRight~="withtop"] #_sidePanelRight::before {
        height: 100%;
    }
    #doorBounds[data-showing-sidePanelLeft~="flag"][data-showing-sidePanelLeft~="withtop"] #_sidePanelLeft::before,
    #doorBounds[data-showing-sidePanelRight~="flag"][data-showing-sidePanelRight~="withtop"] #_sidePanelRight::before {
        height: 327px;
    }

    #doorBounds img {position:absolute; text-align:center;
        /* set background size for when the thumb is used as a placeholder whilst full-size is loading */
        -o-background-size: 100% 100%;
        -webkit-background-size: 100% 100%;
        -khtml-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;
        background-repeat:no-repeat;
        pointer-events: none; /* in case its overflowing something */
    }
    #doorBounds img.loading {opacity:.5;}
    #doorBounds #_door.loading {opacity:0.1;}

    #doorBounds .spinner {
        display:none;
        position:absolute;
        z-index: 150;
        inset:0;
        margin:auto;
        width: 40px;        /* the size */
        padding: 3px;        /* the border thickness */
        background: var(--brand-accent-colour); /* the color */        
        aspect-ratio: 1;
        border-radius: 50%;
        --_m: 
          conic-gradient(#0000 50%,#000),
          linear-gradient(#000 0 0) content-box;
        -webkit-mask: var(--_m);
                mask: var(--_m);
        -webkit-mask-composite: source-out;
                mask-composite: subtract;
        box-sizing: border-box;
        animation: spin 1s linear infinite;
      }
      #doorBounds #_door.loading ~ .spinner {
        display:block;
      }
      @keyframes spin {
        to{transform: rotate(1turn)}
      }

   /*  #doorBounds #_door {top:17px; left:17px; z-index:120; width:156px; text-align:left;} */
    #doorBounds #_door {
        /* top: 17px; */
        left: 15px;
        z-index: 120;
        height: 406px;
        max-width: 100%;
        /* text-align: left; */
        /* left: 0; */
        /* right: 0; */
        bottom: 2px;
        margin-inline: auto;
        /* box-shadow: 0px 0 1px #000; */
        outline: 1px solid #0000004d;
        outline-offset: -2px;
        outline-width: 0 0 2px 0;
    }
    #doorBounds #_doorColour {display:none;}
    /* #doorBounds #_frame {top:0px; left:0px; z-index:125; height:417px; width:190px;} */
    #doorBounds #_frame {
        height: 100%;
        /* left: 1px; */
        /* top: 1px; */
        /* width: 188px; */
        z-index: 125;
    }
    /* #doorBounds #_glass {top:38px; left:38px; z-index:110; width:113px;} */
    #doorBounds #_glass {
        top: 37px;
        z-index: 110;
        width: 113px;
        left: 0;
        right: 0;
        margin-inline: auto;
    }
    #doorBounds #_glass.cassette {
        /* left: 31px; top: 31px; width: 126px; z-index: 310; */
        top: 25px; width: 120px; 
        }
/*     #doorBounds #_weatherbar {bottom:-4px; left:17px; z-index:130; width:156px;} */
/*     #doorBounds #_weatherbar {
        bottom: 0px;
        left: 17px;
        z-index: 130;
        width: 156px;
    } */
    #doorBounds #_weatherbar {
        bottom: -2px;
        left: 15px;
        z-index: 130;
        width: 158px;
    }
    
    #doorBounds #_knocker {top:100px; left:80px; left:80.5px; z-index:140; width:28px;}
    #doorBounds #_spyhole {top:127px; left:80px; left:80.5px; z-index:140; width:28px;}
    #doorBounds #_letterbox {left: 56px;top: 232px;width: 79px;z-index: 150;}
    #doorBounds #_lhandle {left:3px; top:184px; width:52px; z-index:170;}
    #doorBounds #_rhandle {right:1px; top:184px; width:52px; z-index:170;}
    #doorBounds img[src*="trans.gif"]{background:none!important;}
    /* LEGACY 
    #doorBounds #_sidePanelTop {top:-80px; left:0px; z-index:160; width:190px; height:80px;}
    #doorBounds #_sidePanelLeft {top:-80px; left:-97px; z-index:170; height:497px; width:190px}
    #doorBounds #_sidePanelRight {top:-80px; right:-97px; z-index:170; height:497px; width:190px}*/
    /* V2 APR 2023 - side panels are now made up of frame, panel and glazing 
    #doorBounds #_sidePanelTop_frame, #doorBounds #_sidePanelTop_panel, #doorBounds #_sidePanelTop_glass {top:-80px; left:0px; z-index:160; width:190px; height:80px;}
    #doorBounds #_sidePanelLeft_frame, #doorBounds #_sidePanelLeft_panel, #doorBounds #_sidePanelLeft_glass {top:-80px; left:-97px; z-index:170; height:497px;}
    #doorBounds #_sidePanelRight_frame, #doorBounds #_sidePanelRight_panel, #doorBounds #_sidePanelRight_glass {top:-80px; right:-97px; z-index:170; height:497px;}
    */

/*     #doorBounds #_sidePanelTop {bottom:100%; left:0px; z-index:160; width:190px; height:80px;
        display: block;
        position: absolute;
        overflow: hidden;
    } */
    #doorBounds #_sidePanelTop {
        bottom: 100%;
        left: 0px;
        right: 0;
        z-index: 160;
        /* width: 190px; */
        /* height: 84px; */
        height: 86px;
        margin-bottom: -1px;
        display: block;
        position: absolute;
        overflow: hidden;
        /* outline: 2px solid red; */
    }
    /* #doorBounds #_sidePanelLeft, #doorBounds #_sidePanelRight {
        bottom: -4px;
        z-index: 170;
        height: 503px;
        width: 109px;
        display: block;
        position: absolute;
        overflow: hidden;
    } */
    #doorBounds #_sidePanelLeft, #doorBounds #_sidePanelRight {
        bottom: 0px;
        z-index: 170;
        /* height: 505px; */
        height: 507px;
        width: 110px;
        display: block;
        position: absolute;
        overflow: hidden;
    }
    #doorBounds #_sidePanelLeft {
        right: 100%;
    }
    #doorBounds #_sidePanelRight {
        left: 100%;
    }
    #doorBounds #_sidePanelTop_frame, #doorBounds #_sidePanelTop_panel, #doorBounds #_sidePanelTop_glass,
    #doorBounds #_sidePanelLeft_frame, #doorBounds #_sidePanelLeft_panel, #doorBounds #_sidePanelLeft_glass,
    #doorBounds #_sidePanelRight_frame, #doorBounds #_sidePanelRight_panel, #doorBounds #_sidePanelRight_glass {
        height: 100%;
        inset: 0;
        margin: auto;
        width: 100%;
    }
    #doorBounds #_sidePanelLeft_panel, 
    #doorBounds #_sidePanelRight_glass {
        bottom: 2px;
    }
    #doorBounds #_sidePanelLeft_glass,
    #doorBounds #_sidePanelRight_glass {
        bottom: 4px;
    }
    #doorBounds #_sidePanelTop_frame {
        width: 100%;
    }

/* v55 230113 >	*/	

/* 170616 bar handle styles */
#doorBounds img[data-custom-ident='longbar'],
#doorBounds #_rhandle[data-custom-ident='longbar'],
#doorBounds #_lhandle[data-custom-ident='longbar'] {
/*     top: 110px;
    width: 55px; */
    top: 50%;
    transform: translateY(-50%);
    margin-top: 4px;
    width: 55px;
}
#doorBounds img[data-custom-ident='shortbar'],
#doorBounds #_rhandle[data-custom-ident='shortbar'],
#doorBounds #_lhandle[data-custom-ident='shortbar'] {
    top: 110px;
    width: 55px;
}
#doorBounds img[data-custom-ident='cylinderpull'],
#doorBounds #_rhandle[data-custom-ident='cylinderpull'],
#doorBounds #_lhandle[data-custom-ident='cylinderpull'] {
    top: 96px;
/*-webkit-filter: brightness(75%) contrast(200%) saturate(70%);*/
}


/* REFLECTION */
#reflection {
background: none repeat scroll 0 0 #aaaaaa;
border: 0px solid #333333;
bottom: 0;
display: block;
height: 415px;
left: 0;
margin: 0 auto;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
-moz-transform   :scaleY(-1);
-ms-transform    :scaleY(-1);
-o-transform     :scaleY(-1);
-webkit-transform:scaleY(-1);
transform        :scaleY(-1);
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-transform-origin: 50% 50%;
transform-origin: 50% 50%;
width: 190px;
z-index: 10000;
}
#reflection {display:none;}
#reflection img {position:absolute;}
#reflection #reflectedFrame {width:190px; top:0; left:0;}
#reflection #reflectedWeatherbar {width:156px; left:17px; bottom:0px;}
#reflection #reflectedDoor {width:156px; left:17px; top:17px;}
#reflection #reflectionMask {
width:191px; height:417px; top:0; left:0;
display:block; position:absolute; 
background: url(/img/mask.png);
}
/* #floorAnchor {
display: block;
position:absolute;
left:0; bottom:-4px;
border:0px solid #990000;
z-index: 0;
pointer-events:none;
} */
#floorAnchor {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0px;
    border: 0px solid #990000;
    z-index: 0;
    pointer-events: none;
}
#floor {
background: none;
display: none;
position: absolute;
height: 0px;
left: 0px;
right: 0px;
top: 0;
width: 0px;
z-index: 0;
pointer-events:none;
}
#view.withRender #floor {
height: 400px;
left: -1000px;
right: -1000px;
width: 2190px;
}
#wall {
background: none;
display: block;
position: absolute;
height: 0px;
left: 0px;
right: 0px;
top: 0px;
width: 0px;
z-index: -1;
opacity:0;
pointer-events:none;
}
#view.withRender #wall {
height: 1000px;
left: -1000px;
right: -1000px;
top: -1000px;
width: 2190px;
opacity:1;    
-moz-box-shadow:    inset 0 50px 200px #000000;
-webkit-box-shadow: inset 0 50px 200px #000000;
box-shadow:         inset 0 50px 200px #000000;
}
#view.withRender #floor {
/*background:#222222 url(/img/bgtiles/ground.png) 0 0 repeat;*/
background:#ffffff;
-moz-box-shadow:    inset 0 0 100px #555555;
-webkit-box-shadow: inset 0 0 100px #555555;
box-shadow:         inset 0 0 100px #555555;
}
#view.withRender #floor #reflection {opacity: 0.8;}
#view.withRender #doorBounds {box-shadow:none;}
#view.withRender #doorBounds #_door {outline: 1px solid #0000004d;
    outline-offset: -2px;}
/* #view.withRender #doorBounds::after {content:" "; display:block; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-4px;
border:6px solid #C8AF95; border-bottom-color:#444444; border-bottom-width:2px;} */
#view.withRender #doorBounds::after {
    content: " ";
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: 0px;
    border: 6px solid var(--grout);
    border-bottom-color: #444444;
    border-bottom-width: 0px;
}
/* #view.withRender #doorBounds[data-showing-sidepaneltop] #_sidePanelTop::after,
#view.withRender #doorBounds[data-showing-sidepanelleft] #_sidePanelLeft::after,
#view.withRender #doorBounds[data-showing-sidepanelright] #_sidePanelRight::after {
    content: " "; display: block; position: absolute; inset: -2px; bottom: 0px; border: 2px solid var(--grout); border-bottom-width: 0px;
} */

/* this works as a way to add the grout edge but theres a problem with overlaps, z-indexes, etc depending on the combination of sides showing. 
Removed for now becuase it looks less bad without it.
#view.withRender #_sidePanelTop,
#view.withRender #_sidePanelLeft,
#view.withRender #_sidePanelRight {
    filter: drop-shadow(-2px -2px 0px var(--grout)) drop-shadow(2px 0px 0px var(--grout));
}
*/


#foshadowview.bg_pebbledash::after {
border-bottom: 110px solid transparent;
border-left: 20px solid rgba(0, 0, 0, 0.1);
bottom: 0;
content: " ";
display: block;
left: 0;
position: absolute;
top: 0;
width: 30px;
}

/* red brick */
#view.bg_red_brick #floor {
/*background-color:#222222;*/
-moz-box-shadow:    inset 0 0 100px #665555;
-webkit-box-shadow: inset 0 0 100px #665555;
box-shadow:         inset 0 0 100px #665555;
}
#view.bg_red_brick #wall {background:transparent url(/img/bgtiles/redbrick.jpg) -10px 0px repeat;
}
#view.bg_red_brick #doorBounds::after {--grout:#A4AEAE;}
/* modern red brick */
#view.bg_modern_red_brick #floor {
/*background-color:#222222;*/
-moz-box-shadow:    inset 0 0 100px #7F3B29;
-webkit-box-shadow: inset 0 0 100px #7F3B29;
box-shadow:         inset 0 0 100px #7F3B29;
}
#view.bg_modern_red_brick #wall {background:transparent url(/img/bgtiles/modernredbrick.jpg) 2px 32px repeat;
}
#view.bg_modern_red_brick {--grout:#DCCA9C;}
/* yellow brick */
#view.bg_yellow_brick #floor {
/*background-color:#222222;*/
-moz-box-shadow:    inset 0 0 100px #56402E;
-webkit-box-shadow: inset 0 0 100px #56402E;
box-shadow:         inset 0 0 100px #56402E;
}
#view.bg_yellow_brick #wall {background:transparent url(/img/bgtiles/yellowbrick.jpg) 8px 13px repeat;
}
#view.bg_yellow_brick {--grout:#AD9D7B;}
/* roughcast */
#view.bg_roughcast #floor {
/*background-color:#222222;*/
-moz-box-shadow:    inset 0 0 100px #665533;
-webkit-box-shadow: inset 0 0 100px #665533;
box-shadow:         inset 0 0 100px #665533;
}
#view.bg_roughcast #wall {
background:transparent url(/img/bgtiles/roughcast.jpg) 8px 0px repeat; 
-moz-box-shadow:    inset 0 100px 300px #221100;
-webkit-box-shadow: inset 0 100px 300px #221100;
box-shadow:         inset 0 100px 300px #221100;
}
#view.bg_roughcast {--grout:#C5B799;}
/* offwhite */
#view.bg_offwhite #floor {
-moz-box-shadow:    inset 0 0 100px #676767;
-webkit-box-shadow: inset 0 0 100px #676767;
box-shadow:         inset 0 0 100px #676767;
}
#view.bg_offwhite #wall {
background:transparent url(/img/bgtiles/offwhite.jpg) 8px 0px repeat;
-moz-box-shadow:    inset 0 100px 300px #232222;
-webkit-box-shadow: inset 0 100px 300px #232222;
box-shadow:         inset 0 100px 300px #232222;
}
#view.bg_offwhite {--grout:#c8c8c7;}
/* sandstone */
#view.bg_sandstone #floor {
/**/
-moz-box-shadow:    inset 0 0 100px #665533;
-webkit-box-shadow: inset 0 0 100px #665533;
box-shadow:         inset 0 0 100px #665533;
/*background:transparent url(/img/bgtiles/sandstone_reflection.jpg) 0px 0px repeat;*/
}
#view.bg_sandstone #wall {background:transparent url(/img/bgtiles/sandstone.jpg) 0px 197px repeat;
-moz-box-shadow:    inset 0 100px 300px #221100;
-webkit-box-shadow: inset 0 100px 300px #221100;
box-shadow:         inset 0 100px 300px #221100;
}
#view.bg_sandstone {--grout:#AA9D94;}


/* better z-indexes now that the progress must be on top 
#view.withRender #doorBounds.expandDoor {
        z-index:1000;	
    }
#tools {
z-index: 9999999;
}
#view #progress {
z-index: 199;
opacity:.7;
}
*/
/* #_opening {
background:repeating-conic-gradient(#cccccc 0% 25%, #fefefe 0% 50%) 50% / 16px 16px;
border: 20px solid #888888;
bottom: 0;
display: block;
left: 0;
margin: 2px 2px 0px 2px;
position: absolute;
right: 0;
top: 0;
z-index: 2;
height: 415px;
box-sizing: border-box;
} */
#_opening {
    /* background: linear-gradient(0deg, #666, transparent), repeating-conic-gradient(#cccccc 0% 25%, #fefefe 0% 50%) 50% / 16px 16px; */
    background: #888;
    /* border: 20px solid #888888;  */
    bottom: 0;
    display: block;
    left: 0;
    /* margin: 2px 2px 0px 2px; */
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    /* height: 421px; */
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(360deg, #7c7c7c, #7c7c7c8c);
}
#_opening::before {/* no glass grid pattern */
    content: " ";
    display: block;
    position: absolute;
    margin-block: auto;
    /* background: linear-gradient(0deg, #666, transparent), repeating-conic-gradient(#cccccc 0% 25%, #fefefe 0% 50%) 50% / 16px 16px; */
    /* background: repeating-conic-gradient(#cccccc 0% 25%, #fefefe 0% 50%) 50% / 16.5px 16.5px; */
    background: repeating-conic-gradient(var(--chequerboard-from) 0% 25%, var(--chequerboard-to) 0% 50%) 50% / 16.5px 16.5px;
    bottom: 5px;
    inset: 18px;
}


#_opening.loading {
background:#888888;
}
#view.withRender #_opening {
/* box-shadow: 0 4px 0 #888888; */
}

/* #doorBounds #_frame {
height: 420px;
left: 1px;
top: 1px;
width: 188px;
z-index: 125;
} */
#xxxfloorAnchor * {
transition:all .2s linear; 
-o-transition:all .2s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear;
}



.ie #doorBounds img {z-index:0;}

#zoomArea {
    width: 80%;
    max-width: 300px;
    max-height: 601px;
    height: 80%;
    display: block;
    position: absolute;
    inset: 0;
    cursor: zoom-in;
    margin: auto;
}


/* ANIMATIONS */

    #left {
        --door-scale:0.5;
        --door-transform-origin:0 0;
        --zoomed-door-scale: 0.5;
    }
    #right {
        --door-scale:1.26;
        --door-transform-origin:50% 50%;
        --zoomed-door-scale: 3;
    }
    #left .door {
        display: flex;
        justify-content: center; 
        align-items: center;
        /* max-height: calc(497px * var(--door-scale)); */
        max-height: calc(549px * var(--door-scale));
    }
    #doorBounds {
        transform: scale(var(--door-scale));
        transform-origin: var(--door-transform-origin);
        transition: transform 500ms cubic-bezier(0.04, 1.08, 1, 1.13);
    }
      
    #doorBounds.zoomIn {
        --door-scale: var(--zoomed-door-scale);
        -webkit-box-reflect:none!important;
        /*
        -moz-box-shadow:    0px 0px 80px #ccc;
        -webkit-box-shadow: 0px 0px 80px #ccc;
        box-shadow:         0px 0px 80px #ccc;
        */
    }




    @-moz-keyframes flash {
        0% {background:#F29A06; }
        100% {background:var(--body-bg-colour)}
    }
    @-webkit-keyframes flash {
        0% {background:#F29A06; }
        100% {background:var(--body-bg-colour)}
    }
    @-o-keyframes flash {
        0% {background:#F29A06; }
        100% {background:var(--body-bg-colour)}
    }
    @-ms-keyframes flash {
        0% {background:#F29A06; }
        100% {background:var(--body-bg-colour)}
    }
    @keyframes flash {
        0% {background:#F29A06; }
        100% {background:var(--body-bg-colour)}
    }
    .flash {
        background:#F29A06;				
        -moz-animation: flash .3s ease 0s 3 forwards;
        -webkit-animation: flash .3s ease 0s 3 forwards;
        -o-animation: flash .3s ease 0s 3 forwards;
        -ms-animation: flash .3s ease 0s 3 forwards;
        animation: flash .3s ease 0s 3 forwards;
    }




#report {
    margin-bottom: -2.5em;
    opacity: 0;
    transition: margin .5s, opacity 0.2s;
    transition-delay: .2s;
}
/* #report:hover {
    opacity: 1;
    margin-bottom: 0;
}

 */


/* ===================================================== BUILDER FORM ==================================================== */


/* wierd hacky way to make the flexbox area scrollable */
#builder_selection_scroll_area {
    flex: 1 1 auto;
    scroll-snap-type: both proximity;	
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;
    padding-bottom: 0;
}

#builder_selection_scroll_area #selection {
    /* max-height: 300px;
    max-height: 45vh; */
    max-height: 35vh;
    min-height: 448px;
}


/* Builder form */
.builder_selection_area {
    --grid-min: var(--base-grid-min);/* default gives ~6 items per row for desktop views */
    --grid-row-gap: var(--padding-double);
    --runtime-label-poz-y: auto;/* populated via js */
    --runtime-label-width: 90px;/* populated via js */
}
.builder_selection_area form#knocker  {
    --grid-min: 66px;/* ~5 items per row for desktop view */
}
.builder_selection_area form#door,
.builder_selection_area form#handle,
.builder_selection_area form#glass,
.builder_selection_area fieldset#sidePanelLeft_glass  {
    --grid-min: 80px;/* ~4 items per row for desktop view */
    --grid-min: calc(var(--base-grid-min) * 1.6);
}
.builder_selection_area form#letterbox,
.builder_selection_area form#sidePanelLeft, 
.builder_selection_area form#sidePanelRight, 
.builder_selection_area form#sidePanelTop {
    --grid-min: 110px;/* ~3 items per row for desktop view */
}
.builder_selection_area form#weatherbar,
.builder_selection_area form#aperture,  
.builder_selection_area fieldset#sidePanelLeft_size, 
.builder_selection_area fieldset#sidePanelRight_size, 
.builder_selection_area fieldset#sidePanelTop_size {
    --grid-min: 134px;/* ~2 items per row for desktop view */
}
.builder_selection_area form#frameSize,
.builder_selection_area form#doorAction,
.builder_selection_area form#doorActionOpens {/* must always be 2-up */
    --grid-min: min(134px, 46%);
}
.builder_selection_area form#misc {
    --grid-min: 140px;
    --grid-row-gap: var(--padding);
}
.builder_selection_area form#misc fieldset#spyhole {
    --grid-min: 80px;
}
.builder_selection_area form#cill, 
.builder_selection_area form#threshold,
.builder_selection_area form#extenders {
    --grid-min: 220px;
    --grid-row-gap: var(--padding);
    /* or we could use display:block (rather than grid) on the fieldsets */
}
.builder_selection_area form#frame {
    --grid-min: 49px;
}

.builder_selection_area form#frameSize label {
    max-height:auto;
}

#subselection {
    border-top: 1px solid #ccc;
    max-width: 79vw; /* bit hacky */
    padding: var(--padding-double);
    padding-block: var(--padding);
    margin-bottom: -2px;
}
#subselections {
    position:relative;
}
#subselection form.backingGlassForm { /* #backingGlass, #sidePanelLeft_backingGlass, #sidePanelRight_backingGlass, #sidePanelTop_backingGlass */
    --grid-min: 50px;
    overflow-x: auto;
    scroll-snap-type: both proximity;	
	-webkit-overflow-scrolling: touch;
}
#subselection form.backingGlassForm legend {
    position: sticky;
    left: 0;
    line-height: 3em;
    margin: 0;
    padding: 0;
    display: block;
    user-select: none;
    white-space:nowrap; /* grr @ iOS */
}
#subselection form.backingGlassForm .backingGlassItemsWrapper {
    display: contents;
}
#subselection form.backingGlassForm fieldset.backingGlass {
    grid-auto-flow: column;
    grid-auto-columns: 58px;
    grid-template-columns: unset;
    grid-template-rows: unset;
    margin: 0;
}
#subselection form.backingGlassForm label {
    outline: 5px solid var(--mono-00);
    outline-offset: -8px;
}
#subselection .goHoriz {
    position: absolute;
    display: grid;
    place-items: center center;
    margin: auto;
    inset: 0 auto;
    --h: 24px;
    font-size: 22px;
    height: var(--h);
    width: var(--h);
    background: var(--mid);
    border-radius: 50%;
    color: var(--light);
}
#subselection .goHoriz:hover {
    background: var(--brand-accent-colour);
    cursor: pointer;
}
#subselection .goHoriz[data-disabled] {
    background:var(--pale);
    pointer-events: none;
}
#subselection .goLeft {
    left: 0;
    transform: translate(-32px, 6px);
}
#subselection .goRight {
    right: 0;
    transform: translate(32px, 6px);
}

/*
#builder_selection_scroll_area form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
    column-gap: var(--padding);
    row-gap: var(--grid-row-gap);
    padding-bottom: var(--grid-row-gap);
}
#builder_selection_scroll_area form:has(fieldset) {
    */
.builder_selection_area form {
    display: flex;
    flex-direction:column;
}
.builder_selection_area form fieldset {
    display: grid;
    /*grid-template-columns: repeat(6, 1fr);*/
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
    column-gap: var(--padding);
    row-gap: var(--grid-row-gap);
    padding-bottom: var(--grid-row-gap);
    margin-top:0;
}
#builder_selection_scroll_area form fieldset ~ fieldset:last-of-type:not(.ralPicker) {
    position: sticky;
    bottom: 0;
    background: var(--mono-00);
    z-index: 9;
    padding-top: var(--padding);
}
#builder_selection_scroll_area form fieldset legend {
    background: var(--mono-00);
    display: block;
    width: 100%;
    line-height: 3em;
    white-space: nowrap;
    margin:0;
    padding:0;
}
/* #builder_selection_scroll_area form fieldset ~ fieldset:last-of-type:not(.ralPicker, #sidePanelLeft_glass, #sidePanelRight_glass, #sidePanelTop_glass) legend {
    margin-bottom: calc(0px - var(--padding));
}
 
#builder_selection_scroll_area form fieldset ~ fieldset:not(.ralPicker, #sidePanelLeft_glass, #sidePanelRight_glass, #sidePanelTop_glass, #sidePanelTop_panel #cylinderType, #spyhole, #chain, #numbers, #cylinderType) legend {
    margin-bottom: calc(0px - var(--padding));
}
*/
#builder_selection_scroll_area form:not(#misc, #sidePanelTop, #sidePanelRight, #sidePanelLeft, #extenders) fieldset ~ fieldset:not(.ralPicker) legend {
    margin-bottom: calc(0px - var(--padding));
}

/* refactored for iOS = breaks desktop
#builder_selection_scroll_area form fieldset ~ fieldset:last-of-type:not(.ralPicker) {
    padding-top:3em;
}
#builder_selection_scroll_area form fieldset ~ fieldset:last-of-type:not(.ralPicker) legend {
    display: block;
    position: absolute;
    top:0;
    width: 100%;
    line-height: 3em;
    background: var(--mono-00);
}
 */
#builder_selection_scroll_area form fieldset ~ fieldset legend {
    border-top: 1px solid var(--ui-line-faint);
}

.builder_selection_area form input {
    accent-color: var(--brand-accent-colour);
    outline-color: var(--brand-accent-colour);
}

.builder_selection_area form label>input[type="radio"] {
    width: 30px;
    height: 30px;
    opacity: 0.001;
    position: absolute;
    inset: 0;
    margin: auto;
    cursor: pointer;
}
.builder_selection_area form label .icon-tickdisk {
    width:38px; height:38px;
    max-height: 2.35em;
    position: absolute;
    inset: 0;
    margin: auto;
    display:none;
    pointer-events: none;
    overflow: visible; /* prevent clipping at certain scales */
    aspect-ratio: 1;
}
.builder_selection_area form#frame label .icon-tickdisk,
.builder_selection_area form#doorColour label .icon-tickdisk {
    max-width: 75%;
}
.builder_selection_area form label[data-disabled] {
    opacity: 0.5;
    pointer-events: none;
}
.builder_selection_area form label[data-disabled]:before {
    content:"\274c";
    color: var(--link-fg-colour);
    display: grid;
    align-content: center;
    justify-content: center;
    position:absolute;
    inset:0;
}
#builder_selection_scroll_area form#door label .icon-tickdisk {
    top: 58%;
}
/* text-only inputs when 2-up (ie the #misc panel) should display the checked icon differently so as to not overlap any text 
.builder_selection_area form#misc label .icon-tickdisk {
    width: 24px;
    height: 24px;
    top: -12px;
    margin-block: 0;
}*/
.builder_selection_area label {
    container-type: inline-size;
    container-name: scrollarealabels;
}
@container scrollarealabels (min-width: 220px) {
    /* only ones with text rather than img (:has(:not(img) didnt work)*/
     #builder_selection_scroll_area form label:has(em) .icon-tickdisk {
        margin-left:var(--padding-half);
    } 
    /* #builder_selection_scroll_area form#misc label:has(em) .icon-tickdisk {
        margin-left:auto;
    }  */
}
@container scrollarealabels (max-width: 220px) {
    /* only ones with text rather than img (:has(:not(img) didnt work)*/
     #builder_selection_scroll_area form:not(#letterbox):not(#weatherbar):not(#knocker) fieldset:not(#spyhole) label:has(em) .icon-tickdisk {
        width: 24px;
        height: 24px;
        top: -12px;
        margin-block: 0;
    }
}
#builder_selection_scroll_area fieldset .notice {
    display: block;
    position: absolute;
    color: var(--brand-accent-colour);
    margin-right: var(--padding);
}


/* WIP show that there is more to scroll */
/* Its really rather hacky ;( */
#builder_selection_scroll_area form fieldset:last-of-type:not(.ralPicker)::after {
    visibility: hidden;
    display: grid;
    content: "⇩";
    align-items: end;
    justify-content: center;
    position: sticky;
    bottom: 0;
    height: 50px;
    margin-top: -50px;/* we want it to take up no real height but it needs to be position sticky */
    left: var(--padding);
    right: var(--padding);
    background: linear-gradient(360deg, var(--light) 5%, transparent);
    font-size: 16px;
    color: var(--ui-line);
    grid-column: 1/-1;
    margin-bottom: -80px; /* bit magic-numbery - else we get a huge gap at he bottom of the fieldset */
}
#builder_selection_scroll_area form fieldset[data-secondary]::after {
    bottom: 100%!important;
/*     transform: translateY(-73px);
    transform: translateY(calc(0px - var(--grid-row-gap) - 3em)); */
    transform: translateY(calc(0px - 3em));
    border-bottom: 1px solid var(--pale);
}
#builder_selection_scroll_area.scrollable-down form fieldset:last-of-type:not(.ralPicker)::after,
#builder_selection_scroll_area.scrollable-down form fieldset[data-secondary]::after {
    visibility: visible;
}

.onQuoteView #builder_selection_scroll_area.scrollable-down form fieldset:last-of-type:not(.ralPicker)::after,
.onQuoteView #builder_selection_scroll_area.scrollable-down form fieldset[data-secondary]::after {
    visibility: hidden;
}

/* hacky AF with magic numbers! */
#builder_selection_scroll_area form:has(fieldset[data-tertiary]) fieldset ~ fieldset:not(.ralPicker) {
        position: sticky;
        bottom: 0;
        background: var(--mono-00);
        z-index: 9;
        padding-top: var(--padding);
    }
#builder_selection_scroll_area form:has(fieldset[data-tertiary]) fieldset[data-secondary]:not(.ralPicker) {
    bottom: -100px;
    min-height: 145px;
    margin-bottom: -26px;
}
#builder_selection_scroll_area form:has(fieldset[data-tertiary]) fieldset[data-tertiary]:not(.ralPicker) {
    bottom: -132px;
    min-height: 131px;
    margin-bottom: 0;
}

@media (max-width: 480px) {
    #builder_selection_scroll_area form:has(fieldset[data-tertiary]) fieldset[data-secondary]:not(.ralPicker) {bottom: -86px;}
    #builder_selection_scroll_area form:has(fieldset[data-tertiary]) fieldset[data-tertiary]:not(.ralPicker) {bottom: -115px;}
}



/* WIP show that there is more to scroll */
/* Its really rather hacky ;( 
#builder_selection_scroll_area form fieldset:first-of-type:not(.ralPicker)::after {
    visibility: hidden;
    display: grid;
    content: "⇩";
    align-items: end;
    justify-content: center;
    position: sticky;
    bottom: -2px;
    height: 50px;
    margin-top: -50px;
    left: var(--padding);
    right: var(--padding);
    background: linear-gradient(360deg, var(--light) 5%, transparent);
    font-size: 16px;
    color: var(--ui-line);
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--pale);
}
#builder_selection_scroll_area.scrollable-down form fieldset:first-of-type:not(.ralPicker)::after {
    visibility: visible;
}
#builder_selection_scroll_area form:has(fieldset[data-secondary]) fieldset:first-of-type:not(.ralPicker)::after {
    visibility: hidden;
}
#builder_selection_scroll_area form:has(fieldset[data-secondary]) fieldset[data-secondary]:not(.ralPicker)::before {
    visibility: hidden;
    display: grid;
    content: "⇩";
    align-items: end;
    justify-content: center;
    position: sticky;
    bottom: 100%;
    height: 50px;
    margin-top: -50px;
    left: var(--padding);
    right: var(--padding);
    background: linear-gradient(360deg, var(--light) 5%, transparent);
    font-size: 16px;
    color: var(--ui-line);
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--pale);
}

.onQuoteView #builder_selection_scroll_area.scrollable-down form fieldset:first-of-type:not(.ralPicker)::after,
.onQuoteView #builder_selection_scroll_area.scrollable-down form fieldset:first-of-type:not(.ralPicker)::before {
    visibility: hidden;
}

#builder_selection_scroll_area form:has(fieldset[data-secondary]) xxfieldset:first-of-type:not(.ralPicker)::after {
    visibility: hidden;
}

*/

.builder_selection_area label img {
    display: block;
    width: 100%;
    /* max-height: 100%; breaks safari */
}
.builder_selection_area #doorAction label img {
    /* max-height: 100%; */
    max-height: 169px;
}
#selection label em {/* for the 'none' and plain text options */
    display: grid;
    align-items: center;
    justify-items: center;
    min-height: 100%;
    width:100%;
    font-style: normal;
    font-size: 0.875rem;
    line-height:1em;
    outline: 1px solid var(--eee);
    outline-offset: -1px;
    text-align: center;
}

#selection #door label img {
    box-shadow: inset 0 0 0px 4px #ddd; /* to compensate for some rough semi-transparent edges on some of the doors */
    aspect-ratio: 48/123;
}
.builder_selection_area form:not(#door) label img {
    object-fit: contain;
    outline: 1px solid var(--eee);
    outline-offset: -1px;
}
#selection #handle label img {
    /* height: 125px; */
    aspect-ratio: 6/9;
}
#selection #letterbox label img, 
#selection #weatherbar label img, 
#selection #misc label img {
    min-height: 60px;
}
#selection #knocker label img {
    min-height: 116px;
}
#selection #sidePanelLeft label img,
#selection #sidePanelRight label img {
    height: 170px;
}
#selection #sidePanelLeft label img.f, 
#selection #sidePanelRight label img.f {
    position: absolute;
    top: 0;
    pointer-events: none;
}
#selection #spyhole label img {
    min-height: 50px;
    height: 3em;
}
#selection #glass label img, 
#selection #sidePanelLeft_glass_glazing label img,
#selection #sidePanelRight_glass_glazing label img,
#selection #sidePanelTop_glass_glazing label img {
    min-height: 112px;
    max-height: 150px;
    aspect-ratio: 70/112;
}
#selection #sidePanelLeft_glass, #selection #sidePanelRight_glass, #selection #sidePanelTop_glass {
    /* these are nested and so need to break out of the grid */
    display:contents;
}
#selection #sidePanelLeft_cill, #selection #sidePanelRight_cill, #selection #sidePanelTop_cill {
    /* these need to be full width but renamin in the grid */
    --grid-min:275px;
}
#selection #glazingType, #selection select[id$='_glazingType'] {margin-bottom: var(--padding);}
#selection form label input[type="number"] {width:100%; padding:0 0 0 0.5em;}
#selection form label input[type=number]::-webkit-inner-spin-button {
    opacity: 0.3;
    outline:1px solid var(--ui-line);
}
#selection form label input[type=number]:hover::-webkit-inner-spin-button {
  opacity: 1;
}



.builder_selection_area form label {
    display: block;
    position: relative;
    cursor: pointer;
    border: 2px solid var(--mono-00);
    min-height: var(--padding-triple);
    min-height: max(var(--padding-triple), 36px);
    max-height: 22vh; /* this is a good rule in general for desktop (removed for mobile) but see below #doors */
}
.builder_selection_area form#frame label {
    min-height: 45px;
}
.builder_selection_area form#door label {
    max-height: inherit; /* doors are tall and thin and will get squished */
}
.builder_selection_area #doorSummary form label {
    min-height: var(--padding-triple);
}
.builder_selection_area form label[role='none']{
    /* layout-only */
    pointer-events: none;
    visibility: hidden;
}
/* .builder_selection_area form legend, .builder_selection_area form label, .builder_selection_area form p, .builder_selection_area form select { 
    scroll-snap-align: start;
    scroll-margin-top: var(--padding);
    scroll-behavior: smooth;
} */

/* todo - firefox has no :has support - the whole declaration will fail if ff doesnt understand one part of it */
.builder_selection_area form label:has(input[type=radio]):hover,
.builder_selection_area form label:has(input[type=radio]):focus-within {
    outline: 1px solid var(--brand-accent-colour);
    outline-offset: -1px;
}
/* ff */
.builder_selection_area form label[data-has~="radio"]:hover,
.builder_selection_area form label[data-has~="radio"]:focus-within {
    outline: 1px solid var(--brand-accent-colour);
    outline-offset: -1px;
}

.builder_selection_area form label[data-title]::after {
    content: attr(data-title);
    position: absolute;
    z-index: 2;
    font-size: var(--font-size-small);
    font-weight: 400;
    line-height: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 100%;
    text-align: center;
    white-space: nowrap;
    /* background: white; */
    margin-top: 0.35rem;
    display:none;
    pointer-events: none;
}
.builder_selection_area form label[data-title]:has(img)::after {
    display:block;
}
/* ff */
.builder_selection_area form label[data-has~="img"]::after {
    display:block;
}
/* some panels should show the label on the 'none' item regardless */
.builder_selection_area form#letterbox label::after, 
.builder_selection_area form#weatherbar label::after, 
.builder_selection_area form#knocker label::after, 
.builder_selection_area form fieldset#spyhole label::after {
    display:block;
}


/* glazing cassettes that are .disabled should not be visible */
.builder_selection_area form#glass label.disabled {
    display: none;
}


.builder_selection_area form label[data-help]:focus-within::after {
    content: attr(data-help);
    position: absolute;
    z-index: 2;
    font-size: var(--font-size-small);
    font-weight: 400;
    line-height: 1.25;
    left: 7px;
    right: 0;
    top: 100%;
    margin-top: 0.75em;
    padding: 0.75em;
    background: #f8f6f6;
    border-radius: 0.5em;
    color: var(--mid);
}
.builder_selection_area form label[data-help]:focus-within::before {
    content: " ";
    display: block;
    position: absolute;
    background: var(--mono-00);
    top: 100%;
    left: 0;
    width: 4px;
    height: 50px;
    border: 2px solid var(--brand-accent-colour);
    transform: translateY(-50%);
    border-width: 0 0 2px 2px;
    border-radius: 0 0 0 3px;
}
.builder_selection_area form label[data-help]:focus-within ~ label {
    opacity:0.4;
}

.builder_selection_area form label[data-has~="checked"] {/* ff */
    border-color: var(--brand-accent-colour);
}
.builder_selection_area form label:has(input:checked) {
    border-color: var(--brand-accent-colour);
}
.builder_selection_area form label[data-has~="checked"] .icon-tickdisk { /* ff */
    display:block;
}
.builder_selection_area form label:has(input:checked) .icon-tickdisk {
    display:block;
}

/* WIP 
#builder_selection_scroll_area #selection #glass label, #picker label {display:block; position:relative; float:left; width:78px; height:120px; margin:11px 0 0 11px; }
#builder_selection_scroll_area #selection #glass label img, #picker label img {display:block; position:absolute; top:0px; left:0px; width:64px; margin:5px 0 0 5px; pointer-events:none; clip: rect(0px, 64px, 106px, 0px);}
#builder_selection_scroll_area #selection #glass .collection {display:block; float:left; position:relative; border:0px solid #333; width:89px; height:131px;
    height:134px;
    margin-right:-3px;
    margin-bottom:-3px;
    width:92px;
}
#builder_selection_scroll_area #selection #glass .collection .items > label + label {
    display: none!important;
}
#builder_selection_scroll_area #selection #glass .collection .items {display:block; width:95px; height:138px;}
#builder_selection_scroll_area #selection #glass label.selectNone {display:block; position:absolute; top:0; left:-1000px;}

*/
#picker label {display:block; position:relative; float:left; width:78px; height:120px; margin:11px 0 0 11px; }
#picker label img {display:block; position:absolute; top:0px; left:0px; width:64px; margin:5px 0 0 5px; pointer-events:none; clip: rect(0px, 64px, 106px, 0px);}


#selection #glass label.selectNone {display:block; position:absolute; top:0; left:-1000px;}
/*
#right label.disabled {opacity:0.4!important;}

#selection .backingGlass {position:relative!important;}
#selection .backingGlass legend {clear: both!important; margin-bottom: 0!important; text-align: center!important; width: 167px!important;}
#selection .backingGlass .backingGlassItemsWrapper {display:block!important; position:relative!important; clear:both!important; margin-left:1px!important; margin-bottom:24px!important;}
#selection .backingGlass label {display:block!important; position:relative!important; float:left!important; width:48px!important; height:48px!important; margin:11px 0 0 11px!important; }
#selection .backingGlass label img {display:block!important; position:absolute!important; top:0px!important; left:0px!important; width:38px!important; margin:3px 0 0 3px!important;}
#selection .backingGlass::after {
    background: #CCCCCC;
    border-radius: 8px;
    bottom: 0;
    color: #FFFFFF;
    content: "+";
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: 16px;
    left: 50%;
    line-height: 16px;
    margin: 7px 0 0 -7px;
    position: absolute;
    text-align: center;
    width: 16px;
    z-index: 10;
}

#glass *[style], 
.backingGlassForm *[style],
#picker *[style] {
    overflow:visible!important;
}

#selection #glass label[data-glazingtype='unglazed'] {
    overflow: hidden;
    opacity: 0.1;
    position: absolute;
    top: -1000px;
    display: block;
}
*/

/* glazing collection stuff */
#selection .collection {
    display: contents; /* remove from grid */
    min-height: 154px; /* bug give a height to resolve a bug when its on its own row */
}
#selection .collection .items {
    outline: 0px solid var(--mid);
    transition: outline 0.1s;
    position: relative; /* but this must be position fixed on hover */
}
#selection .collection .items::after {
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    right: 5px;
    border-left: 4px dotted #999;
    height: 19px;
    width: 1px;
}
#selection .collection:hover .items::after {display:none;}
/* hide all in collection */
#selection .collection .items label {
    display: none;
    box-sizing: border-box;
}
/* only the first, else the checked should be visible */
#selection .collection .items label:first-of-type {
    display:block;
}
/* ff */
#selection .collection .items[data-has~="checked"] label:first-of-type {
    display:none;
}
#selection .collection .items[data-has~="checked"] > label[data-has~="checked"] {
    display: block;
}
/* not ff */
#selection .collection .items:has(label input:checked) label:first-of-type {
    display: none; 
} 
#selection .collection .items > label:has(input:checked) {
    display: block!important;
}
/* on hover */
#selection .collection:hover {
    display: inline-grid;
    position: relative;
}
#selection .collection:hover .items {
    position: fixed;
    top: var(--runtime-label-poz-y);
    display: inline-flex;
    flex-basis: var(--runtime-label-width);
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    z-index: 999;
    outline: 10px solid var(--mono-02);
    background: var(--mono-00);
    overflow: hidden;
    box-shadow: 0 9px 9px #0000006e;
    border-radius: 0px;
    /*transform: translateY(0); hack to make fixed relative to body rather than viewport */
    margin-right:var(--padding-double);
}
#selection .collection:hover .items label {
    min-width: var(--runtime-label-width);
    display: block!important;
    flex-grow: 1;
}
#selection .collection:hover .items label::after {
    display:none;
}














/* RAL stuff */
#selection form .ralPicker {
    display: block;
    position: relative;
    background: var(--faint);
    margin: 0;
    padding: var(--padding-half);
    border-radius: 3px;
    min-width: 166px;
    text-align: center;
    border: 1px solid var(--pale);
    /* margin-top: -40px; */
    margin-top: -20px;
    margin-bottom: 40px;
    box-sizing: border-box;
    z-index: 10;
}
#selection form .ralPicker::before,
#selection form .ralPicker::after {
    content: " ";
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0 0 0 -6px;
    padding: 0;
    display: block;
    position: absolute;
    z-index: 8;
    left: 50%;
    top: -6px;
    border: 6px solid transparent;
    border-bottom: 6px solid var(--pale);
    border-top: none;
    transform: translateY(0px) !important;
}
#selection form .ralPicker::after {
    margin: 0 0 0 -5px;
    top: -5px;
    border: 5px solid transparent;
    border-bottom: 5px solid var(--faint)!important;
    border-top: none;
}
#selection form .ralPicker label {
    background: none repeat scroll 0 0 transparent;
    border: medium none !important;
    box-shadow: none;
    color: var(--mid);
    margin: 0;
    outline: medium none; 
    padding: 0;
    width: 100%;
    height:auto;
    min-height: 1em;
}
#selection form .ralPicker .ralPickerSwatchAndFieldWrap {
    display:inline-block;
}
#selection form .ralPicker .ralPickerSwatch {
    background: none;
    box-shadow: none;
    margin: 0 -1px 0 0px;
    padding: 0;
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid var(--pale);
    cursor: default;
    position: relative;
    box-sizing: border-box;
}
#selection form .ralPicker .ralPickerField, 
#selection form .ralPicker input {
    /*min-width: 115px;*/
    min-width: 6em;
    max-width: 6em;
    box-sizing: border-box;
    height: 25px;
    vertical-align: middle;
    border-radius: 0;
    border: 1px solid #ccc;
}
/* maybe an overlay for all ral labels?
label[data-title^="RAL"]::before {
    content: " ";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 1;
    background: rgb(0,0,0);
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(86,60,152,1) 50%, rgba(86,60,152,1) 60%, rgba(173,38,81,1) 60%, rgba(173,38,81,1) 70%, rgba(213,129,34,1) 70%, rgba(213,129,34,1) 80%, rgba(232,233,20,1) 80%, rgba(232,233,20,1) 90%, rgba(91,185,56,1) 90%, rgba(91,185,56,1) 100%);
}
*/


/*the container must be positioned relative:*/
.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 101;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    max-height:300px;
    overflow-x: hidden;
    overflow-y: scroll;
    box-shadow: 0 2px 5px 0px #aaa;
    text-align: left;
    border-radius: 4px;
}

.autocomplete-items div {
    padding: 5px;
    cursor: pointer;
    background-color: var(--mono-00);
    border-bottom: 1px solid var(--mono-03);
    line-height:1em;
}
.autocomplete-items div span {
    display:inline-block;
    width:20px;
    height:20px;
    margin-right: 10px;
    vertical-align: middle;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
    background-color: var(--mono-03);
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: var(--autocomplete-active) !important;
    color: var(--mono-00)
}

/* END RAL stuff */




#warning {
    position: sticky;
    bottom: 50px;
    z-index: 100;
    right: 0;
    left: 0;
    margin: auto;
    background: #ffd300a1;
    background: #f9ea6bf0;
    padding: 0.5em;
    border: 2px solid var(--brand-accent-colour);
    border-radius: 3px;
    /* box-shadow: 0px 10px 10px -10px var(--mid); */
    backdrop-filter: blur(10px);
    transform: translateY(-100%);
    border-radius: 6px;
}
#warning svg {
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
    vertical-align: top;
    fill: var(--brand-accent-colour);
}
.warningMsg p {
    margin: 0;
}
.warningMsg p + p {
    margin-top: 1em;
}

/* tooltip */

#tooltipElement {
    position:fixed;
    background: var(--light);
    color: var(--dark);
    padding: 0.3em 0.5em;
    margin: 5px;/* need some distance from cursor */
    margin: -2.6em 0 5px -1em;
    border: 1px solid var(--pale);
    /* border-radius: .5em; */
    z-index: 9999;
    opacity: 0;
    font-size: 0.1rem;
    visibility: hidden;
    pointer-events:none;
    box-shadow: 0px 10px 10px -8px var(--ui-shadow-dark);
    /* bastardised logo style
        transform: skewX(15deg); 
        font-style: italic;
    */
}
#tooltipElement.visible {
    visibility: visible;
    font-size: var(--font-size-smaller);
    opacity:1;
    transition: opacity .2s, font-size .4s;
    transition-delay: .5s;
}



#builder_selection_scroll_area {
    position: relative;
    overflow-y: scroll;
    /* box-shadow:
        inset 0px 8px 8px -10px #999,
        inset 0px -8px 8px -10px #999;
    border-top:1px solid var(--pale);
    border-bottom:1px solid var(--pale); */
    padding-right: var(--padding);
    margin-right: var(--padding-half);
    /* min-height: 300px; */
}
.shadowthing {
    display: block;
    height: 10px;
    padding: 0;
    border: none;
    z-index:99;
}
.shadowthing[data-dir="opaque-transparent"]{
    margin: -10px 0 0 0;
    box-shadow: 0px 3px 7px -5px #000;
    border-bottom: 1px solid var(--pale);
    
}
.shadowthing[data-dir="transparent-opaque"]{
    margin: 0 0 -10px 0;
    box-shadow: 0px -3px 7px -5px #000;
    border-top: 1px solid var(--pale);
}

#builder_selection_scroll_area::before {
    top: 0;
}

#builder_selection_scroll_area::after {
    bottom: 0;
}

/* scrollbar */
#builder_selection_scroll_area, .builder_selection_area form.backingGlassForm {
    scrollbar-width: none;
}

#builder_selection_scroll_area::-webkit-scrollbar {
    width: 8px;
    border-radius:3px;
    right:10px;
    margin-right:10px;
    padding-right:10px;
}
 
#builder_selection_scroll_area::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border-radius: 4px;
    right:10px;
    margin-right:10px;
    padding-right:10px;
}
.builder_selection_area form.backingGlassForm::-webkit-scrollbar {
    height: 8px;
    border-radius:3px;
}
.builder_selection_area form.backingGlassForm::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border-radius: 4px;
}
 
#builder_selection_scroll_area::-webkit-scrollbar-thumb,
.builder_selection_area form.backingGlassForm::-webkit-scrollbar-thumb {
    background-color: transparent;
    /* background-color: #e7e7e76d; */
    outline: 0px solid var(--mid);
    border-radius: 4px;
    height:30px;
}
#builder_selection_scroll_area:hover::-webkit-scrollbar-thumb,
.builder_selection_area form.backingGlassForm:hover::-webkit-scrollbar-thumb {
    /* background-color: #e7e7e7; */
    background-color: var(--pale);
}



/* when on quote screen */
.isBuilder #main.onQuoteView {
    background-color: var(--faint);
}
.isBuilder #main.onQuoteView #left {
    flex-basis: 50%;
}
.isBuilder #main.onQuoteView #heading_area {
    display: none;
}
.isBuilder #main.onQuoteView .shadowthing {
    display: none;
}
.isBuilder #main.onQuoteView #builder_selection_scroll_area {
    padding: 0;
}
.isBuilder #main.onQuoteView #builder_selection_scroll_area #selection {
    max-height:max-content;
}
.isBuilder #main.onQuoteView #builder_selection_scroll_area #doorSummary_summary {
    display: flex;
    gap: var(--padding);
}
.isBuilder #main.onQuoteView .tool {
    display: none;
}
.isBuilder #main.onQuoteView #startOverTool, 
.isBuilder #main.onQuoteView #sizeTool,
.isBuilder #main.onQuoteView #showSummaryTool[data-displayPriceBreakdown='true']{
    display: block;
}
.isBuilder:not(.finished) #main.onQuoteView ~ #footer .bounds {
    justify-content: space-between;
    column-gap: var(--padding);
}
.isBuilder #main.onQuoteView ~ #footer .bounds #preview-door {
    display:none;
}

.left_inview .isBuilder #main.onQuoteView ~ #footer .bounds #quote-form-button-container {
    transform:translateY(120px);
    transition: transform 0.3s cubic-bezier(0.03, 1.08, 1, 1.08);
}
.right_inview .isBuilder #main.onQuoteView ~ #footer .bounds #quote-form-button-container {
    transform:translateY(0);
}


/* Thanks */
#quoteForm #thanks {
    display: flex;
    flex-direction: column;
    width: 50%;
    width: clamp(360px, 50%, 800px);
    margin: auto;
    background: var(--eee);
    padding: var(--padding);
    border-radius: var(--padding);
}
#quoteForm #thanks .thanksHeadingArea {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
#quoteForm #thanks .thanksHeadingArea h2 {
    text-align: center;
}
#quoteForm #thanks .thanksHeadingArea .button {
    margin-top: 0;
}
#quoteForm #thanks table {
    font-size: 10px;
    border-collapse: collapse;
}
#quoteForm #thanks table caption {
    text-align: left;
    font-weight: bold;
}
#quoteForm #thanks table td {
    border: 1px solid var(--pale);
    padding: 0 2px;
    line-height: 1.5em;
}

#pleaseBegin {
    border: 1px solid currentColor;
    aspect-ratio: 1;
    display: grid;
    justify-content: center;
    align-items: start;
    border-radius: 50%;
    padding: var(--padding);
    justify-items: center;
    font-size: var(--font-size-smaller);
    position: absolute;
    z-index: 99;
    color: var(--body-fg-colour);
    background: var(--body-bg-colour);
}
#pleaseBegin svg.icon {
    align-self: end;
    height: 55px;
    height: 2.5rem;
}
/* Safari is the new IE */
@supports not (aspect-ratio: 1 / 1) {
    #pleaseBegin {
        width: 8rem;
        height: 8rem;
    }
}