.colorchart_wrap{display: flex;flex-wrap: wrap;box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);}
.color-right{position: relative;width: 804px; float: left;}
.color-left{width: calc(100% - 804px);background: #ffffff;padding:0 20px 43px 0;float: left;}
.color-right .img_box img { border-radius: 0;}

/*IMG*/
.roof_clr_img {
  top: 17.7%;
  left: 15.24%;
  position: absolute;
}
.gutter_clr_img {
  top: 23.8%;
  left: 0.34%;
  width: 100%;
  position: absolute;
}
.roof_clr_img img { transition: none;}

.colorchart_item_imgs {position: absolute;}
.colorchart_item_imgs img{display: none;/*width: 100%;*/}
.colorchart_roof {top: 17.7%;left: 15.24%;}
.colorchart_gutter {top: 23.8%;left: 0.34%;width: 100%;}
.swatchlist li {
  margin: 0 6px 14px;
  position: relative;
}
.clr_box {margin-bottom: 35px; }
.clr_box:first-child {padding-top: 38px; }
.sec-clr-chart-main { display: flex;  flex-wrap: wrap;}
.swatchlist li span {cursor: pointer; }

/*COLORS*/
.clr_opt_box.active:before {content: '\f00c ';position: absolute;font-family: FontAwesome;font-size: 17px;text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    color: #fff;left: 0;right: 0;width: 100%;height: 100%;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}


/*TOOLTIP*/
[data-tooltip] {/* position: relative; */z-index: 2;cursor: pointer;/* z-index: 11; */}
[data-tooltip]:before,
[data-tooltip]:after {visibility: hidden;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;pointer-events: none;}
[data-tooltip]:before {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: -1px;
  margin-left: -90px;
  padding: 7px;
  width: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #fff;
  color: #000;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  text-transform: capitalize;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.41);
  z-index: 999;
  }
span[data-tooltip]:after {
  position: absolute;
  top: 110%;
  left: 50%;
  margin-left: -5px;
  margin-top: -9px;
  width: 0;
  border-bottom: 5px solid rgb(242, 245, 248);
  border-bottom: 5px solid  rgb(242, 245, 248);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
  /* z-index: 99; */
  }
.clr_opt_box span[data-tooltip]:hover:before,
.clr_opt_box span[data-tooltip]:hover:after {visibility: visible;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);opacity: 1;}
.colorchart_configs .colorchart_config .colorchart_config_colors,.colorchart_configs .colorchart_config{overflow: inherit;} 





/*----- MEDIA QUERIES  -----*/
@media (max-width:1650px){
 
}
@media(max-width:1550px){   
  
}
@media(max-width:1439px){
 
}  
@media(max-width:1199px){   
  .color-left{width: 100%;order: 2;}
  .color-right{width: 100%;order: 1;position: relative;top: auto;align-self:auto;}
  .color-left {padding: 0;}
  .clr_opt_box.active:before{font-size: 12px;}
  .clr_box:first-child {padding-top: 10px;}
  .sec-clr-chart-main {
    display: flex;
    flex-wrap: wrap;
    max-width: 804px;
    justify-content: center;
    margin: 0 auto;
}
.clr_box {
  margin-bottom: 20px;
}
  
}
@media(max-width:991px){  

  /* .color-left{width: 100%;order: 2;}
  .color-right{width: 100%;order: 1;position: relative;top: auto;align-self:auto;}
  .color-left {padding: 0;}
  .clr_opt_box.active:before{font-size: 12px;}
   */

   .roof_clr_img {width: 74%; }
   .gutter_clr_img {width: 95%; }
   .clr_box {
    margin-bottom: 0;
}
.swatchlist {
  padding: 22px 15px;
}
}
@media(max-width:767px){ 
}
@media(max-width:575px){  
}