*{box-sizing:border-box; margin:0; padding:0;}

html,body {height: 100%;    min-height: 100%; padding: 0; margin: 0; font-family: 'Montserrat', sans-serif; background-color: #ddd;}

.container{    min-width: 100%;
    /*min-height: 100%;*/
    
    display: flex;
    justify-content: center;
    align-items: center;
    
	padding:70px 350px 145px 30px;

    bottom: 20px;
    position: absolute;
	}
	
.new-box-h {
    border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.05);
    height: 155px;
    min-width: 40px;
    margin: -23px 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.new-box-v{ border-radius: 7px; background-color: rgba(0, 0, 0, 0.05); min-height: 30px; margin-bottom: 5px; display: flex; justify-content: center; align-items: center;}
.new-box-v span+span{padding-left: 5px;}
.add-element, .rem-element{ cursor: pointer;font-size: 22px;}
.boxes{display: flex; /*overflow: auto;*/}
.box-column{display: flex; flex-direction: column-reverse;}
.box-column .box-space{background: url(../images/plus.png) center center no-repeat; cursor:pointer;background-size: 30px 30px;}
.box-column .box-space .single_accesory_inner{max-width:100%; cursor:pointer; position:relative;}
.box-column .box-space .single_accesory_inner .text{display:none;}
.box-column .box-space .single_accesory_inner .image{display:flex; align-items:center; justify-content:center; height:107px;}
.box-column .box-space .single_accesory_inner .image img{max-width: 95px; max-height: 108px;}
span.remove_access {
    position: absolute;
    width: 35px;
    height: 35px;
    display: block;
    background: url(../images/remove_access_new.png) no-repeat;
    right: -1px;
    top: 3px;
    display: none;
    z-index: 1;
    margin: -5px 0px 19px 68px;
    background-size: 28px;
    background-position: center;
}
.box-column .box-space .single_accesory_inner:hover span.remove_access{display:block;}
.small-box{height: 107px; width: 107px; background-color: white;}
.large-box{ height: 107px; width: 162px; background-color: white;}
.h-shelf{background-color: white; border: 1px solid grey; height: 8.4px; cursor: pointer;}
.h-shelf .small{ width: 107px;}
.h-shelf .large{ width: 162px;}
.v-shelf{ background-color: white; border: 1px solid grey;  height: 124px; width: 8.4px;}
/*.shelf-hide{ opacity: 0.2;}*/
.options{min-width: 250px; background-color: #ffffff; min-height: 400px; position: fixed; right: 20px; border: none; box-shadow: 0 0 20px rgb(0 0 0 / 7%);
    max-height: 80%;  overflow: auto;}
.remove{display: none;}
.inner_header{background:#1e73be; display:flex; align-items:center; padding:20px 50px; position:fixed; left:0; right:0; top:0; width:100%;z-index: 1;}
.inner_header .site_logo{line-height:0;}
.inner_header .site_logo img{max-height:20px;width: 301px;}
.inner_header .back_arrow{width:27px; height:14px; background:url(../images/long_arrow.png) center left no-repeat; margin-right: 20px;}
 
 
.overlay{z-index:5; position:fixed; left:0; top:0; right:0; bottom:0; margin:0; background:rgba(0,0,0,0.6); display:none;}
.popup{position: fixed;
    display: none;
    padding: 50px 20px 0 20px;
    box-shadow: 0 0 20px rgb(0 0 0 / 7%);
    top: 60px;
    right: 0;
    background: #ffffff;
    
    height: calc(100% - 177px);
    overflow: auto;
    width: 300px;
    z-index: 2;}
	
.popup .accessories{display:flex; flex-wrap:wrap; width:100%; justify-content:space-between;}
.popup .accessories .single_accesory{width:45%; margin-bottom:30px; cursor:pointer;}
.popup .accessories .single_accesory span.remove_access{display:none;}
.popup .accessories .single_accesory .image img{max-width:100%;}
.popup .accessories .single_accesory .text{margin-top:5px;}
.popup .accessories .single_accesory .text h3{font-weight:400; font-size: 12px; line-height: 16px;}
.popup_close{	width:15px; height:15px; background:url(../images/cancel.png) center center no-repeat; cursor:pointer; position:absolute; right:15px; top:15px;}

.bottom_panel{position: fixed; z-index:3;
    bottom: 0;     
	padding: 12px 0;
    left: 0;
    width: 100%;
    background: #ffffff;
	transition:all ease 0.3s;
	-webkit-transition:all ease 0.3s;
    box-shadow: 0 0px 20px rgb(0 0 0 / 7%);}
	
	.bottom_panel.showup{bottom:0;}
	
.bottom_panel h4{letter-spacing:3px; text-transform:uppercase; font-size:13px; font-weight:500; border-bottom:1px solid #ccc; padding:0 0 5px 0; margin:0 0 15px 0;
    display: flex; justify-content: space-between; 
}

.bottom_panel h4 .far{display:none;}	
.bottom_panel .center_container{margin:0 auto; padding:0 15px; width:100%; max-width:1300px; display:flex; flex-wrap:wrap; justify-content:space-between;}

.bottom_panel .center_container .decor_panel{width:20%;}
.bottom_panel .center_container .dimension_panel{width:30%;}
.bottom_panel .center_container .price_panel{width:25%;}
.bottom_panel .center_container .common_panel{width:25%;}

.bottom_panel .decor_options{list-style-type:none; margin:0; padding:0; display:flex;}
.bottom_panel .decor_options li{margin-right:10px;}
.bottom_panel .decor_options li a{display:block; border-radius:100%; border:1px solid #ccc; width:30px; height:30px;}

.bottom_panel .dimensions{display:flex; flex-wrap:wrap;}
.bottom_panel .dimensions .dimensions_sub{width:50%; font-size:13px;}

.bottom_panel .access_Value{display: flex; flex-wrap: wrap;}
.bottom_panel .access_Value .total_price{border:1px solid #cccccc; border-right:none; width:46%; text-align:center; font-weight:700; font-size:14px; padding:10px 10px; height: 38px}
.bottom_panel .access_Value button{background:url(../images/cart_ico.png) center center no-repeat #1e73be; width:45%; text-align:center; border:none; cursor:pointer; background-size: 26px;}


.decor-oak{display: inline-block;background-color: rgb(190, 177, 152); background-image: url(../images/oak.jpg);}
.decor-oak-half{display: inline-block;background-color: rgb(190, 177, 152); background-image: url(../images/oak-half.jpg);}

.total_price::before{ content: "£ "; }

.clear{ clear: both; width: 100%; margin-bottom: 10px;border-bottom: 1px solid #000;} 
.clear h4{ padding-bottom: 5px;} 
.clearall { border: 0px !important; right: 20px; position: absolute; text-decoration: none; font-size: 20px; font-weight: 500; color: #fff;  }

.add-corner{ margin-top: 10px; }
.corner-bg{ background: #fff; justify-content: center; align-items: center; display: flex; font-size: 12px; text-align: center;}
.left-corner .corner-bg { border-left: 1px dashed #000; }
.right-corner .corner-bg { border-right: 1px dashed #000; }

.add-corner-element, .rem-corner-element { cursor: pointer; font-size: 22px;}
.rem-corner{ cursor: pointer;font-size: 22px; }

.new-corner-box-v{ border-radius: 7px; background-color: rgba(0, 0, 0, 0.05); min-height: 30px; margin-bottom: 5px; display: flex; justify-content: center; align-items: center;}
.new-corner-box-v span+span{padding-left: 5px;}
@media all and (max-width:1199px)
{
.bottom_panel h4{font-size:12px;}
.bottom_panel .dimensions .dimensions_sub{width:100%; margin-top:0px; border:0px solid #e1e1e1;}
.bottom_panel .dimensions .dimensions_sub:first-child{margin-top:0; border: 0px solid #e1e1e1;}
}


@media all and (max-width:991px)
{
.container {padding: 70px 20px 20px 20px;}

}

@media all and (max-width:768px)
{   
    /*.inner_header {
        position: absolute;
    }*/
    .bottom_panel{
        bottom: -155px; 
        padding:10px 0;
        position: absolute;
    }
    form#add_to_cart_form {
        margin-bottom: 3em;
    }
    .clearall 
    {
        right: 10px;
        font-size: 16px;
    }
    .inner_header .site_logo img {
        width: 260px;
    }

    .container
    {
        
        width: auto;
    }
    .inner_header
    {
        padding: 20px 8px;
    }
}

@media all and (max-width:767px)
{	

.bottom_panel{width:100%;}
.bottom_panel .center_container .bottom_panels{width:100%; margin-bottom: 10px;}
.bottom_panel .center_container .bottom_panels:last-child{margin-bottom: 0;}
.bottom_panel .decor_options, .bottom_panel .dimensions, .bottom_panel .access_Value{display:none;}
.bottom_panel h4 .far{display:inherit;}
 
.popup {margin-top: 0; padding: 30px; top: 20px; left: 20px; transform: none; -webkit-transform: none; height: calc(100% - 40px); width: calc(100% - 40px);}
.popup .accessories .single_accesory{width:30%;}
.inner_header .site_logo img { /*max-height: 12px;*/ }
.boxes { max-width: 100%;}

.bottom_panel h4{padding-bottom:3px; margin-bottom:7px; font-size: 11px;}
.bottom_panel h4.active{color:#1e73be;}
 }
 
 @media all and (max-width:575px)
{
    .popup .accessories .single_accesory{width:48%;}
    span.remove_access {
    width: 38px;
    height: 38px;
    margin: -4px 0px 25px 68px;
    background-size: 32px;
    opacity: 1;
    display: block;
    }
}
.left_leveling {
    width: 8px;
    height: 8px;
    background: grey;
    transform: translate(0px,16px);
    position: relative;
    margin-left: -8px;
    margin-top: -16px;
}
.right_leveling {
    width: 8px;
    height: 8px;
    background: grey;
    transform: translate(0px,8px);
    position: relative;
    margin-left: 107px;
    margin-right: -8px;
}
.right_large_leveling {
    width: 8px;
    height: 8px;
    background: grey;
    margin-left: 162px;
    transform: translate(0px,8px);
    position: relative;
    margin-top: -8px;
    margin-right: -8px;
}
.left_large_leveling {
    width: 8px;
    height: 8px;
    background: grey;
    transform: translate(0px,8px);
    position: relative;
    margin-left: -8px;
    margin-top: -8px;
}

.left_leveling_corner {
    width: 8px;
    height: 8px;
    background: grey;
    transform: translate(0px,8px);
    position: fixed;
    margin-left: 0px;
}
.right_leveling_corner {
    width: 8px;
    height: 8px;
    background: grey;
    transform: translate(0px,8px);
    position: fixed;
    margin-left: 107px;
}

.left_leveling_right_corner {
    width: 8px;
    height: 8px;
    background: grey;
    transform: translate(0px,8px);
    position: fixed;
    margin-left: -8px;
}
.right_leveling_right_corner {
    width: 8px;
    height: 8px;
    background: grey;
    transform: translate(0px,8px);
    position: fixed;
    margin-left: 99px;
}

.small1 .new-box-v, .new-corner-box-v {
    position: absolute;
    width: 100px;
    margin-left: 4px;
    transform: translate(0px,45px);
    padding-top: 3px;
}

.large1 .new-box-v {
    position: absolute;
    width: 150px;
    margin-left: 6px;
    transform: translate(0px,45px);
    padding-top: 3px;
}
i.fal.fa-plus-square, i.fal.fa-minus-square, i.fal.fa-rectangle-wide, i.fal.fa-square {
    font-weight: 500;
    font-size: 25px;
    color: #444444;
}
.new-box-h .add-element, .rem-element {
    line-height: 1.6;
}

i.fal.fa-minus-square {
    font-size: 30px;
}
i.fal.fa-plus-square {
    font-size: 30px;
}
.dimensions_sub_new {
    width: 100%;
    font-size: 13px;
}
.product_sub_image
{
    display: none;
}
.box-column .product_main_image {
    display: none;
}
.box-column .product_sub_image {
    display: block;
}
span.right_joint {
    float: left;
    border-top: 1px solid gray;
    margin: -1px -9px;
    width: 7%;
}
span.left_joint {
    float: right;
    border-top: 1px solid gray;
    margin: -1px -9px;
    width: 7%;
}
.dimensions_sub_new .dimensions_sub {
    width: 100% !important;
}

.boon_btn {
    overflow: hidden;
    position: relative;
    color: #666 !important;
    border: 1px solid #ddd;
    text-transform: none;
    font-weight: normal;
    font-size: 14px;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 14px;
    height: 38px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 2px;
}

.ui-widget-overlay {
    background: #000 !important;
    opacity: .3;
}

.ui-dialog-titlebar.ui-draggable-handle {
    background: #1e73be;
    color: #fff;
}

.ui-dialog .ui-dialog-content {
    padding: 0 0em !important;
}
.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
    padding: 0 !important;
}
button:focus
{
    outline: 2px currentColor;
}
.ui-dialog button:not(:hover):not(:active):not(.has-background)
{
    background-color: #fff !important;
}
.ui-widget .ui-widget {
    font-size: 10px !important;
}
.ui-dialog .ui-dialog-titlebar-close {
    right: 0.6em !important;
    width: 25px !important;

}
@media all and (max-width:1280px)
{
    .ui-dialog {
        width: 900px !important;
    }
    div#dialog {
        height: 600px !important;
    }
}
@media all and (max-width:768px)
{
     .ui-dialog {
        width: 700px !important;
    }
     div#dialog {
        height:700px !important;
    }
}

@media all and (max-width:480px)
{
     .ui-dialog {
        width: 370px !important;
    }
    div#dialog {
        height:550px !important;
    }
}
@media all and (max-width:375px)
{
     .ui-dialog {
        width: 350px !important;
    }
    div#dialog {
        height:500px !important;
    }
}
@media all and (max-width:320px)
{
     .ui-dialog {
        width: 280px !important;
    }
    div#dialog {
        height:400px !important;
    }
}