div.icon {

    margin-top: 4px;

    float: left;

    width: 31px;

    height: 30px;

    background-image: url(../images/magnify.gif);

    background-repeat: no-repeat;

    -webkit-transition-property: background-position, color;

    -webkit-transition-duration: .2s, .1s;

    -webkit-transition-timing-function: linear, linear;

    -moz-transition-property: background-position, color;

    -moz-transition-duration: .2s, .1s;

    -ms-transition-duration: .2s, .1s;

    -ms-transition-timing-property: linear, linear;

    -o-transition-property: background-position, color;

    -o-transition-duration: .2s, .1s;

    -o-transition-timing-property: linear, linear;

    transition-property: background-position, color;

    transition-duration: .2s, .1s;

    transition-timing-property: linear, linear;

}

div.icon:hover {

    background-position: 0px -30px;

    cursor: pointer;

}

/* search section start*/



input#search {

    width: 75%;

    height: 50px !important;

    padding: 15px 170px 15px 15px;

    margin: 15px auto 0 auto;

    font-family: 'Montserrat';

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 2px;

    outline: none;

    border: 2px solid #BBBBBB;

    font-size: 20px;

    line-height: 25px;

    color: #ababab;    

}

input#search::placeholder{

    color: #BBBBBB;

    font-weight: 600;

}

div#gearsboxtext span#gearsboxtext1, span#gearsboxtext2 {

    color: #fff;

    width: 100%;

    display: inline-block;

    text-align: center;

    margin: 5px 0 0 0;

}

/*input#search:hover, input#search:focus {

    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);

}*/

h4#results-text {

    display: none;

}

ul#results,ul#resultsextended {    

    display: none;

    width: 80%;

    margin: 0px auto;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 10px;

    overflow-y:hidden;

    max-height:511px;

    /*position:absolute;*/

    display:block;

    z-index:1000;

    background-color:#fff; 

    color: #000;

    font-weight: 500;  

}

ul#resultsextended {

    max-height: 400px;

    position: unset;

    overflow-y: scroll;

    border-radius: 7px;

    margin-top: 10px;

    margin-bottom: 20px;

}
ul#resultsextended li img{
    width: 15px;
    margin-right: 10px;
}
ul#resultsextended li .codebox, ul#resultsextended li .refbox{
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: flex-start;
    margin-left: 10px;
}
ul#resultsextended::-webkit-scrollbar-track

{

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

    border-radius: 10px;

    background-color: #CCCCCC;

}



ul#resultsextended::-webkit-scrollbar

{

    width: 12px;

    background-color: #CCCCCC;

    position: absolute;

    right: 10px;

}



ul#resultsextended::-webkit-scrollbar-thumb

{

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

    background-color: #7A7A7A;

}

ul#results{

    border: 1px solid #ababab;

}

ul#results li,ul#resultsextended li {

    padding: 8px;

    cursor: pointer;

    border-top: 1px solid #cdcdcd;

    transition: background-color .3s ease-in-out;

    -moz-transition: background-color .3s ease-in-out;

    -webkit-transition: background-color .3s ease-in-out;

    display: flex;

    align-items: center;

}

ul#results li:hover,ul#resultsextended li:hover {

    background-color: #f9f9f9;

}

ul#results li:first-child,ul#resultsextended li:first-child {

    border-top: none;

}

ul#results li h3, ul#results li h4,ul#resultsextended li h3,ul#resultsextended li h4 {

    transition: color .3s ease-in-out;

    -moz-transition: color .3s ease-in-out;

    -webkit-transition: color .3s ease-in-out;

    color: #616161;

    line-height: 1.2em;

}

ul#results li:hover h3, ul#results li:hover h4,ul#resultsextended li:hover h3,ul#resultsextended  li:hover h4 {

    color: #3b3b3b;

    font-weight: bold;

}

ul#resultsextended .searchresults:hover{ background-color: none !important;}

ul#resultsextended .searchresults{

    font-size: 22px; padding-top: 37px; color: #404040;

}



/* search section end*/

/* Base & tinner section start*/



.circlecolour {

    width: 37px;

    height: 37px;

    -moz-border-radius: 50px;

    -webkit-border-radius: 50px;

    border-radius: 50px;

    border: 1px solid #888888;

    font-size: 16px;

    color: #fff;

    text-align: center;

    padding-top: 3px;

}

.namebox {

    margin-left: 10px;

}

#show_calculator{

    color: #fff;



}

.basetinter_section {

    display: flex;

    flex-direction: column;

}



.basetinter_section h3 {

    color: #fff;

    font-size: 15px;

}
.tinter_content_left{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div#formula_section {

    margin: 0 auto;

    width: 90%;

}

span.running_button {

    display: none;

}

.listview_buttons .active_button {

    display: inline !important;

}

.listview_buttons span {

    display: none;

    font-size: 15px;

}

.grams_button,.litres_button,.each_button,.running_button{

    cursor:pointer;

    background: url("../../images/refresh-icon.png") no-repeat scroll 90% 55% transparent !important;

    padding: 3px 40px 3px 20px!important;    

   

}

.large-12.columns.section_header {

    display: flex;

    justify-content: space-between;

    width: 80%;

    margin: 0 auto;

    padding-top: 10px;

}

.delImg {

    cursor: pointer;

    display: none;

}

.input_val_field {

    width: 50% !important;

    display: none !important;

    color: #000;

    float: right;

}

div#formula_section .circlecolour , .bigcirclecolour.tintrgb1 {

    width: 22px;

    height: 22px;

    font-size: 12px;

}

.basetinter_section .base_row.base_content ,.basetinter_section .tinter_row.tinter_content {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    width: 80%;

    margin: 0 auto;

    padding-bottom: 8px;
    align-items: center;



}

.basetinter_section .base_row.base_content .xtintcode, .basetinter_section  .tinter_row.tinter_content .xtintcode {

    margin-left: 10px;

    float: left;

    display: flex;

    align-items: center;
    text-wrap: nowrap;

}

.basetinter_section .base_row.base_content .rgb , .basetinter_section .tinter_row.tinter_content .rgb{
    float: left;
    padding-top: 0px;
}  

.orig_val {

    display: none;

}

.add_edit_tinter_wrapper.aleft {

    display: flex;

    justify-content: space-between;

    width: 85%;

    margin: 0 auto;

    border-top: 1px solid #3E3E3E;

    padding-top: 15px;

    margin-top: 15px;



}

.add_edit_tinter_wrapper.aleft .add_tinter_button  {

    display: flex;

    align-items: center;

    flex-direction: column;

}

.add_edit_tinter_wrapper.aleft .add_tinter_button img {

    width: 19px;

}

.base_row.base_content div.add_base_cl_inner,.add_tinter_wrapper.aleft , .add_tinner_cl .add_base_cl_inner {

    display: flex;


}

.add_tinter_wrapper.aleft, .edit_tinter_wrapper.aright {

    display: flex;

    justify-content: space-between;
    text-align: center;

}

.base_row.base_footer.open_cl .add_tinter_wrapper.aleft , .base_row.base_footer.open_cl .edit_tinter_wrapper.aright{

    width: 100%;

}

div#ctba_base ,div#stba_base{

    display: flex;

    align-items: center;

}

div#ctba_base img ,div#stba_base img, div#ctbe_base img, div#stbe_base img, div#ctba_tint img, div#stba_tint img,div#ctbe_tint img,div#stbe_tint img {

    margin-right: 9px; 

}

.tinter_footer2.open_cl div#atb_tint, .tinter_footer2.open_cl div#etb_tint, .tinter_row.tinter_footer.tinter_footer2 .add_tinter_wrapper.aleft,.tinter_row.tinter_footer.tinter_footer2 .edit_tinter_wrapper.aright , .base_row.base_footer div#ctba_base, .base_row.base_footer div#stba_base , .base_row.base_footer div#ctbe_base, .base_row.base_footer div#stbe_base{

    display: none;

}

.tinter_row.tinter_footer.tinter_footer2.open_cl .add_tinter_wrapper.aleft {

    display: flex;

    justify-content: space-between;

}

input#formula_part_a {

    color: #000;

}

/* Base & tinner section End*/

/* total tinner section start*/

.overall_wrapper {

    background: #fff;

    color: #000;

    border-radius: 7px;

    padding: 10px 0;

    margin: 20px 0px;

}

.overall_wrapper .tinter_row.tinter_footer {

    display: flex;

    justify-content: space-around;

    text-align: center;

}

.overall_wrapper .tinter_row.tinter_footer .center:first-child{

     position: relative;

 }

/* .overall_wrapper .tinter_row.tinter_footer .center:first-child:before{

    content: '';

    display: block;

    position: absolute;

    background: #ADADAD;

    height: 100%;

    width: 1px;

    right: -38px;

    bottom: 0px;

}*/

 .page-template-page-xtint-Favourites .overall_wrapper .tinter_row.tinter_footer .center:first-child:before{

    display: none;

 }

.overall_wrapper .tinter_row.tinter_footer p {

    margin: 0;

}

.overall_wrapper .tinter_row.tinter_footer .center span {

    font-weight: bold;

}

/* total tinner section End*/

/* history popup start*/



.lc_finish{

    background: transparent url("../../images/job-com-head.png") no-repeat left top;

    border-top-right-radius: 0px;

    border-top-left-radius: 0px;
    background-size: cover;

}

.finish_head_image.lc_left_img{

    display: flex;

    justify-content: center;

    align-items: center;

}

.finish_head_image.lc_left_img{

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 13px 1px;

}

.head_right {

    margin-left: 8px;

    color: #fff;

}

.head_right h3 {

    color: #fff;

    margin-bottom: 2px;

    font-size: 22px;

}

#lightbox_finish .mfp-close, #lightbox_finish_revisions .mfp-close {

    color: #fff !important;
/*
    font-size: 24px;

    position: absolute;

    top: 0px;

    right: 16px;
*/
}
#lightbox_finish_revisions .mfp-content .mfp-close {
    right: 15px;
    top: 15px;
    font-size: 45px;
    opacity: 1;
}
.finish_form {

    background: #fff;

    padding: 10px 30px;

    border-bottom-right-radius: 0px;

    border-bottom-left-radius: 0px;

}

.finish_form .finish_form_cont div.input_wrap {

    display: flex;

    flex-direction: column;

}

.finish_form .finish_form_cont div.input_wrap input, .finish_form .finish_form_cont div.input_wrap textarea {

    border: 1px solid #bdbdbd;

    padding: 15px 2px;

    margin: 0 0 11px 0;

    border-radius: 7px;

}

 .finish_form .finish_form_cont div.input_wrap textarea {

    height: 60px;

}

.lightbox_button.finish_btn {

    color: #fff;

    background-color: #f16441;

    display: inline-block;

    padding: 3px 24px;

}

.finish_form_done {

    text-align: center;

}

.finish_form_done p {

    margin-bottom: 0px;

}

.finish_form_done a {

    color: #ff671f;

}

/* history popup End*/



/* Favorites popup start*/

 .lightbox_container {

    display: block;

    width: 100%;

    margin: 0 auto;

    background-color: #111111;

    padding: 20px;

    border-radius: 0px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.finish_form_cont label {

    color: #000;

}

.my-mfp-zoom-in.lightbox-white{
    margin:  0 auto;
    position: relative;
    max-width: 100% !important;
    height: 100vh;
    background-color: #111111;
}

.lightbox_container .lc_left img {

    width: 50px;

}

.lightbox_container .lc_left {

    /*background: #f16441;*/

    color: #fff;

    padding: 5px 10px;

    width: 100%;

    text-align: center;

   /* float: left;*/

    margin-right: 10px;

    border-radius: 7px;

    background: transparent url(../../images/job-com-head.png) no-repeat left top;
    background-size: cover;
    font-size: 16px;
    font-weight: 600;

}

.lightbox_container .lc_left p{

    margin-bottom: 0px;

}

.lightbox_container .lc_right {

    /*width: 66%;

    float: left;*/

    padding: 7px 0;
    text-align: center;
    color:  #fff;

}

.mfp-content .mfp-close{

   right: 15px;
    top: 15px;
    font-size: 45px;
    opacity: 1;

}

.actionbuttons.btn_favourite{

    background: transparent url("../../images/favourite-on.png") no-repeat center top;

    height: 40px;   

}

.lightbox_container button.mfp-close {

    position: absolute;

    top: 0;

    right: 22px;

    color: #000;

}
.lc_right_label{
    color: #fff;
}

.lightbox_button {

    color: #fff;

    background-color: #f16441;

    /*display: inline-block;*/

    padding: 5px 24px;

    border-radius: 5px;
    text-align: center;

}

div#favouritesuccess a, .lc_right a, .lc_right a:hover {

    color: #ff0f0f;
    text-align: center;

}
div#favouritesuccess, div#smssuccess, div#emailsuccess {
    color: #fff;
    text-align: center;
}

.lightbox_container input {

    border: 1px solid #999999;

    padding: 3px 6px;

    /*display: inline-block;*/

    margin-bottom: 6px;

    width: 100%;

}

/* Favorites popup End*/

/* SMS popup Start*/

.actionbuttons.btn_sms{

    background: transparent url("../../images/sms-on.png") no-repeat center top;

    height: 40px;   

}



/* SMS popup End*/

.my-mfp-zoom-in .mfp-content {

  opacity: 0;

  -webkit-transition: all 0.2s ease-in-out;

  -moz-transition: all 0.2s ease-in-out;

  -o-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

  -webkit-transform: scale(0.5);

  -moz-transform: scale(0.5);

  -ms-transform: scale(0.5);

  -o-transform: scale(0.5);

  transform: scale(0.5);

  -webkit-transform-origin: top center;

  -moz-transform-origin: top center;

  -o-transform-origin: top center;

  transform-origin: top center;

}

/* animate in */

.my-mfp-zoom-in.mfp-ready .mfp-content {

  opacity: 1;

  -webkit-transform: scale(1);

  -moz-transform: scale(1);

  -ms-transform: scale(1);

  -o-transform: scale(1);

  transform: scale(1);

}



/* animate out */

.my-mfp-zoom-in.mfp-removing .mfp-content {

  -webkit-transform: scale(0.8);

  -moz-transform: scale(0.8);

  -ms-transform: scale(0.8);

  -o-transform: scale(0.8);

  transform: scale(0.8);

  opacity: 0;

}

.actionbuttons.btn_mail{

    background: transparent url("../../images/email-on.png") no-repeat center top;

    height: 40px;   

}.actionbuttons.btn_label{

    background: transparent url("../../images/label-on.png") no-repeat center top;

    height: 40px;   

}.actionbuttons.btn_print{

    background: transparent url("../../images/print-on.png") no-repeat center top;

    height: 40px;   

}.actionbuttons.btn_corob{

    background: transparent url("../../images/download-on.png") no-repeat center top;

    height: 40px;   

}

select#label_format {

    margin-bottom: 5px;

    width: 100%;

    padding: 0px 3px !important;

    font-size: 15px;

}

.histy-wrapper{

    font-size: 11px;

    font-family: "roboto", sans-serif !important;

    font-weight: 400;

}

.histy-wrapper h3.entry-title {

    color: #fff;

    margin: 4px 0 0 0;  

    font-size: 11px;

    font-family: "roboto", sans-serif !important;

    font-weight: 400;

}

.histy-wrapper .cat-links {

    color: #8E8E8E;

}

main#main a {

    color: #fff;

}

div#mix_and_calc {

    width: 100%;

    display: flex;

}

div#product_option {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    justify-content: space-between;

    align-items: center;

}

#product_option select{

    border-radius: 8px;

    background-color: #fff;

    color: #000;

    font-size: 14px;

    font-family: 'roboto', sans-serif;
}
.colour_details_inner {
    color: #fff;
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}
div.save_button_hity {
    text-align: center;
    color: #fff;
}
div.save_button_hity a {
    color: #fff;
    text-decoration: none !important;
    background: url(../../../../uploads/2024/09/button-bg.png) no-repeat;
    padding: 8px 10px;
    display: inline-block;
    margin: 10px 0;
    background-size: cover;
    background-position: center;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    border-radius: 20px;
    font-weight: 600;
}
img#save_history_button_on {
    display: none;
}
.save_button_actions img.hover-button-image-off {
    display: none;
}

.save_button_actions {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}      
h1#mix_heading {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}         
.product_label , div#formula_section 
span#pref2 {
    color: #fff;
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
}


/*New style 05-sep-2024*/

/*product search style start*/

.product_wrapper{
    width:  60% !important;
}
.volume_wrapper{
    width: 35%;
}

#calc_step_2_a .volume_wrapper, #calc_step_2_b .volume_wrapper{
    width: auto;
}
#calc_step_2_a select, #calc_step_2_b select{
    padding: 0px;
}

/*product search style end*/

.actionbuttons {
    text-align: left;
    cursor: pointer;
    float: none;
    display: inline-block;
    margin: 0px 10px 0px 5px;
}
.save_button_actions .actionbuttons {
    text-align: center;
    cursor: pointer;
    float: none;
    display: inline-block;
    margin: 0px 0px 40px 0px;
    width: 100%;
    position: relative;
}

.save_button_actions .actionbuttons p{
    position: absolute;
    bottom: -25px;
    margin-bottom: 0px;
    font-size: 11px;
    font-weight: 500;
    left: 0px;
    right: 0px;
}
.loading{
    width: 100%;
    display: block;
    text-align: center;
    color: #fff;
    font-size: 14px;
}
.loading a{
    color: #fff;
    font-weight: 700;
}
.loading img {
    width: auto !important;
}