#mycolorsflyoutmodal.owl-carousel .owl-dots {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  width: 100%;
  position: absolute;
  bottom: 1%;
}
#mycolorsflyoutmodal .owl-carousel .owl-dots .owl-dot {
  height: 11px;
  width: 11px;
  background: #ffffff;
  border: 1px solid #000000;
  /* opacity: 0.4; */
  border-radius: 50%;
  margin: 3px;
  display: inline-block;
}
#mycolorsflyoutmodal .owl-carousel .owl-dots .owl-dot.active {
  background: #000000;
}

.cart-icon.not-empty::after {
    content:"";
    width:10px;
    height: 10px;
    border-radius: 50%;
    background: red;
    z-index: 1;
    position: absolute;
    right: -5px;
    top: -5px;
}

.fa-shopping-cart{

   display: none!important;
}
.cart-icon  {
  background-image: url("/binaries/content/gallery/behrbrxm/icon-cart.png");
  background-repeat: no-repeat;
  background-size: 20px;
  width: 20px;
  height: 20px;
  display: block;
  margin: 5px;
}

.fa-heart-o{
display: none!important;
}

.heart-icon {

  background-image: url("/binaries/content/gallery/behrbrxm/icon-heart.png");
  background-repeat: no-repeat;
  background-size: 20px;
  width: 20px;
  height: 20px;
  display: block;
  margin: 5px;
}


#modalLabel.h4 {
    font-family: var(--behr-heading-font);
    font-weight: var(--behr-atf-500);
    padding-top: 12px !important;
  }
.modal-title.far.fa-heart::before {
   font-size: 1.5rem;
}

.text-no-color-link {
  color: #c25247 !important; 
}
.text-no-color-link:hover, .text-no-color-link:active {
  color: #c25247 !important; 
}
#mycolorsflyoutmodal[style] {
        padding-right: 0px !important;
    } 

 #mycolorsflyoutmodal .modal .show {
         display: block;
         padding-right: 0px;
    }
       .fadeInRight {
    -webkit-animation-name: fadeInRight; 
    animation-name: fadeInRight;
  }
  
  @keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @-webkit-keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  #mycolorsflyoutmodal .modal-dialog {    
    margin: 0;
  }
  
  #mycolorsflyoutmodal .animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
 #mycolorsflyoutmodal .modal-header {
    border-radius: 0;
    background-color: #ffffff;
    border-color: #ffffff;
    align-items: center;
    padding: 1.2rem;
  }
  
 #mycolorsflyoutmodal .modal-content {
    border-radius: 0;
    border: 0;
    -webkit-box-shadow: -12px 0 38px -14px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: -12px 0 38px -14px rgba(0, 0, 0, 0.25);
    box-shadow: -12px 0 38px -14px rgba(0, 0, 0, 0.25);
    background-clip: padding-box;
  }
    
/* #mycolorsflyoutmodal .css .modal-backdrop {
      background-color: black !important;
      opacity: 0.9 !important;
   } */
  .colordrawer-open .modal-backdrop {background-color:black !important; opacity:0.8 !important;}

  

  #mycolorsflyoutmodal a.custom-red {
    font-size: 15px!important;
    line-height: 20px!important;
    
  } 

  #mycolorsflyoutmodal .owl-carousel {
    display: block!important;
  }  

 
  
    #shoppingButton .fa-shopping-cart{

        display: block!important;
    }

  .rgb_span {
    font-size: 15px!important;
    line-height: 20px;
    letter-spacing: 0px;
  }

.square {
            width: 100%;
        }

        .color-detail-items .owl-nav.disabled, .palette-wrapper .owl-nav.disabled {
            display: block;
            width: 100%;
        }
        

        .color-detail-items .owl-nav .owl-prev {
            left: -30px;
            position: absolute;
            top: 47%;
        }

        .color-detail-items .owl-nav .owl-next {
            right: -30px;
            position: absolute;
            top: 47%;
        }

        .color-detail-items {
            position: relative;
        }
        
        .cd-selected-image {
            left: -1000%;
            right: -1000%;
            top: -1000%;
            bottom: -1000%;
            margin: auto;
            /* min-height: 100%; */
            min-width: 100%;
        }

        .circle-number {
            width: 20px;
            height: 20px;
            border: 1px solid #465058;
            border-radius: 50%;
            display: inline-block;
            color: #465058;
            background: #fff;
            padding: 3px 6px;
            font-size: 12px;
            line-height: 16px;
        }

        .square::after {
            content: "";
            display: block;
            padding-bottom: 100%;
        }

        .visualize-it {
            top: 30px;
            left: 30px;
        }

        .square .circle-number {
            bottom: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            padding: 7px 9px;
            font-size: 15px;
        }

       .cld-palette-wrapper .cld-outer .cld-inner {
    padding-bottom: 100%!important;
 }   

.cld-palette-carousel .owl-nav .owl-prev.disabled, .cld-palette-carousel .owl-nav .owl-next.disabled {
    display: block;
}

.cld-palette-wrapper .owl-nav button.owl-prev:focus, .cld-palette-wrapper .owl-nav button.owl-next:focus, .color-detail-items .owl-nav button.owl-prev:focus, .color-detail-items .owl-nav button.owl-next:focus {
    outline:none;
}
.cld-palette-wrapper .owl-nav button.owl-prev,
.cld-palette-wrapper .owl-nav button.owl-next {
    border: 1px solid #465058;
    width: 25px;
    height: 25px;
    color:#fff;
    background: #465058;
    border-radius: 50%;
    position: absolute;
    margin:15px 0px;
}
.cld-palette-wrapper .owl-nav button.owl-prev span, .cld-palette-wrapper .owl-nav button.owl-next span {
    font-size: 20px;
    line-height: 1;
}
.cld-palette-wrapper .owl-nav button.owl-prev {
    right:30px;
}
.cld-palette-wrapper .owl-nav button.owl-next {
    right: 0px;
}


/*Similar color styling*/
.cld-palette-wrapper .cld-outer {
    display: block;
    overflow: hidden;
    position: relative;
    line-height: 1.2;
    word-break: break-word;
}

.cld-palette-wrapper .cld-outer .cld-inner {
    width: 100%!important;
    padding-bottom: 85%;
    position: relative;
    left: 0%!important;
    overflow: hidden;
}

/*palette color style*/
.cld-palette-wrapper .cld-outer {
    display: block;
    overflow: hidden;
    position: relative;
    line-height: 1.2;
    word-break: break-word;
    /* margin: 0 10px; */
}

.cld-palette-wrapper .cld-palette-color-1 {
    position: absolute;
    height: calc(66.66% - 1px);
    width: calc(66.66% - 1px);
}

.cld-palette-wrapper .cld-palette-color-2 {
    position: absolute;
    width: calc(33.33% - 1px);
    height: calc(33.33% - 1px);
    right: 0;
}

.cld-palette-wrapper .cld-palette-color-3 {
    position: absolute;
    width: calc(33.33% - 1px);
    height: calc(33.33% - 1px);
    right: 0;
    top: 33.33%;
}

.cld-palette-wrapper .cld-palette-color-4 {
    position: absolute;
    position: absolute;
    height: calc(33.33% - 1px);
    width: 100%;
    bottom: 0;
}
.color-code-wrap .accordion-link {
    border: 1px solid #ccc;
    padding: 0px;
    text-transform: uppercase;
    border-radius:10px;
    display: flex;
}
.color-code-wrap .accordion-link.active {
    border-radius: 10px 10px 0px 0px;
}
.color-code-wrap .panel {
    border-radius: 0px 0px 10px 10px;
    border: 1px solid #ccc;
    border-top: 0;
    padding:5px;

}
.color-code-wrap .color-name {
    font-size: 20px;
    color: #465058;
    margin-bottom: 0;
    padding-top:5px;
}
.color-code-wrap .color-code {
    font-size: 12px;
    margin-bottom:0;
    padding-bottom:5px;
    color: #465058;
}
.color-code-wrap .more-color{
    line-height: 3;
    color: #465058;
}
.color-code-wrap  .close-color{
    line-height: 2.5;
    color: #465058;
    margin:5px;
    margin-left: 20px;
    display: inline-block;
 }
.selected-color {
    background: #ccc;
    width:50px;
    /* height: 50px; */
    min-height: 100%;
    display: block;
    border-radius: 10px 0px 0px 10px;
    margin-right: 20px;
}

.color-code-with-logo-1 .color-name {
    font-size: 24px;
    color: #465058;
    line-height: 23px;
    margin-bottom: 0;
    padding-top:5px;
    text-transform: uppercase;
}

.color-code-with-logo-1 .color-code {
    font-size: 12px;
    margin-bottom:0;
    padding-bottom:5px;
    text-transform: uppercase;
    line-height: 14px;
}
.color-code-with-logo-2 .color-name {
    font-size: 34px;
    color: #465058;
    line-height: 33px;
    margin-bottom: 0;
    padding-top:5px;
    text-transform: uppercase;
}

.color-code-with-logo-2 .color-code {
    font-size: 12px;
    margin-bottom:0;
    padding-bottom:5px;
    text-transform: uppercase;
    line-height: 14px;
}
.color-code-with-logo-3 .color-name {
    font-size: 45px;
    line-height: 44px;
    color: #465058;
    margin-bottom: 0;
    padding-top:5px;
    text-transform: uppercase;
}

.color-code-with-logo-3 .color-code {
    font-size: 12px;
    margin-bottom:0;
    padding-bottom:5px;
    text-transform: uppercase;
    line-height: 14px;
}
.btn-orange-primary {
    color:#fff;
    background: #bd483c;
    padding: 5px 30px;
    border-radius: 25px;
    display:inline-flex;/*CSS3*/
  align-items:center;/*Vertical align*/
  justify-content:center;/*horizontal align*/
  height:50px;
}
.btn-orange-primary:hover {
    color:#fff !important;
    background: #943a2a;
    text-decoration: none;
}
.btn-orange-primary:active {
    color:#fff;
    background: #943a2a;
    text-decoration: none;
}
.btn-orange-primary:disabled {
    background: #ccc;
    text-decoration: none;
}