#holder{
    position:relative;
}
#holder .image_segment,
#holder canvas{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
}
#holder .image_segment img{
     height: 100%;
     width: 100%;
     margin: 0px;
     margin: 0px;
     margin-top: -1px;
}
#holder .holder-house1 .image_segment img{
    margin-top: 0px;
}
#holder #photo{
    margin-bottom: 0;
}
#segments-selector{
    width: 30%;
}
#tab_holder{
    width: 69%;
    border-left:2px solid black;
    overflow-x : auto;
}
.picker-component{
    padding: 0.5em;
    background-color: #313131;
}
#segments-selector,
#tab_holder{
    float:left;
}
#tab_holder .color-group-container,
#tab_holder #tab_categories{
    background-color: #313131;
    padding: 1em;
    color: #f19d61;
}
.tab_holder{
    display: none;
}
.tab_holder.active{
    display: block;
}
#tab_holder #tab_categories h4{
    color: #f19d61;
}
#tab_holder .color-group-container.inactive{
    display : none;
}
#tab_holder #tab_categories .color-group-panel{
    display: inline-block;
    background: #76be37;
    color: white;
    padding: 1em;
    border-radius: 4px;
    margin: 0.5em 0.5em 0.5em 0;
    cursor:pointer;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
#tab_holder #tab_categories .color-group-panel:hover{
    border: 2px solid;
    border-color: rgba(201, 242, 164, 0.8);
}
#tab_holder .color-group-container .color-rep{
    background-color: rgb(205, 199, 192);
    display: inline-block;
    color: black;
    font-weight: 600;
    font-size: 12px;
    padding: 1em;
    border-radius: 4px;
    margin: 0.5em 0.5em 0.5em 0;
    cursor: pointer;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    border: 1px solid #d5d5d5;
}
#tab_holder .color-group-container .back-button{
    text-align:right;
    border-top: 1px solid #ccc;
    margin-top: 1em;
    padding-top: 1em;
}
#tab_holder .color-group-container .back-button button{
    background-color: #adadad;
    padding: 1em;
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    font-size: 1em;
    display: inline-block;
}
#segments-selector h4{
    padding: 0.5em 1em;
    color: #f19d61;
}
#segments-selector ul li {
    color: white;
    font-size: 16px;
    margin: 0.5em 0;
    font-weight: 600;
    cursor:pointer;
    max-width: 150px;
}
#segments-selector ul li.active{
    background: #000;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    padding:0.5em;
}
.clearfix:after{
    content: "";
    display: table;
    clear:both;
}
.house-picker-container{
    width: 100%;
    text-align:center;
    border-bottom: 1px solid #d5d5d5;
}
.house-picker-container img{
    width: 50%;
}
::-webkit-scrollbar {
    width: 1em;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
    background-color: #76be37;
    outline: 1px solid #76be37;
}
#color-group-container-Reviver .color-rep-holder{
    width: 800px;
}
.color-group-container .color-rep-slider{
    width:100%;
    overflow-x:auto;
}

@media screen and (max-width:1024px){
    #tab_categories h4,
    #segments-selector h4 {
        font-size: 14px;
        margin:0;
    }
    #tab_categories .color-group-panel{
        font-size: 12px;
    }
    #segments-selector{
        width: 100%;
        border-bottom:1px solid #ccc;
    }
    #segments-selector ul li{
        display:inline-block;
        font-size:12px;
    }
    #tab_holder{
        width: 100%;
        border-left:none;
    }
    .color-rep-holder{
        width: 800px;
    }
    #color-group-container-Reviver .color-rep-holder
    {
        width : 1600px;
    }
    #color-group-container-Ace_Exclusive .color-rep-holder,
    #color-group-container-Ace_Classic .color-rep-holder,
    #color-group-container-Ace_Stylish .color-rep-holder{
        width: 600px;
    }
    #tab_holder .color-group-container .color-rep{
        padding: 0.5em;
    }
}