:root {
       --gc_green: 20,41,29;
       --gc_spice: 226,101,38;
       --gc_herb: 54,153,70;
       --gc_pepper: 101,117,128;
       --gc_spice_light: 229,140,85;
       --gc_herb_light: 166,188,66;
       --gc_pepper_light: 175,180,190;       
       
}

@font-face {
    font-family: 'rubik';
    src: url('/fonts/rubik-medium-webfont.woff2') format('woff2'),
         url('/fonts/rubik-medium-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}
@font-face {
    font-family: 'rubik';
    src: url('/fonts/rubik-regular-webfont.woff2') format('woff2'),
         url('/fonts/rubik-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'green_cuisine';
    src: url('/fonts/days-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.page_container{font-size:1.7rem;}

h1 {color:rgb(var(--gc_spice)); font-family:rubik}
h2 {font-size:2rem; color:rgb(var(--gc_spice)); font-family:rubik}
h3 {font-size:1.5rem; color:#1d4b3d; font-family:rubik}
.green_link {color:#b9d533;}

.green_cuisine {font-family:green_cuisine;} 
.rubik {font-family:rubik;}


.gc_dark_green {color:rgb(var(--gc_green));}
.gc_dark_green {color:rgb(var(--gc_green));}
.gc_light_green {color:rgb(var(--gc_herb_light));}
.gc_green {color:rgb(var(--gc_herb));}
.gc_light_orange {color:rgb(var(--gc_spice_light));}
.gc_orange {color:rgb(var(--gc_spice));}
.gc_light_blue {color:rgb(var(--gc_pepper_light));}
.gc_blue {color:rgb(var(--gc_pepper));}


.gc_dark_green_background {background-color:rgb(var(--gc_green));}
.gc_light_green_background {background-color:rgb(var(--gc_herb_light));}
.gc_green_background {background-color:rgb(var(--gc_herb));}
.gc_light_orange_background {background-color:rgb(var(--gc_spice_light));}
.gc_orange_background {background-color:rgb(var(--gc_spice));}
.gc_light_blue_background {background-color:rgb(var(--gc_pepper_light));}
.gc_blue_background {background-color:rgb(var(--gc_pepper));}

.border_colour_gc_green {border-color:rgb(var(--gc_green));}


.range_menu_item_inner {border:2px solid #1d4b3d; background-color:#dfdfdf;}

.product_section {width:100%;}

/* 2px solid #1d4b3d; */ 
#range_list .product_section_headers {border-bottom:3px solid #1d4b3d; }


#admin_range_list .product_section_headers {border-bottom:2px solid #1d4b3d;}

.category_section {box-sizing:border-box; width:100%;}

.product_section_headers {position:relative; background-color:#fff;  display:inline-table; width: 100%;}
.product_section_fix_headers {position:fixed; top:300px;}

.product_section:hover {border-top:2px solid #ffb300; border-bottom:2px solid #ffb300; font-weight:bold; background-color:#cccccc!important;}





.popup{display:none; bottom:30px; position:absolute;  background-color:#fff; border:1px solid #01a2da; color:#000; width:200px; line-height:1.3; font-size:1.3rem; z-index:100; border-radius:5px}
.show_popup{cursor:pointer; position:relative;}
.show_popup:hover > .popup {
    display: block;
}
.cvv_popup {left:-40px; padding:5px; }
.weight_popup {left:-75px;}

.shade_row:nth-of-type(odd){background-color:#efefef;}
.shade_row:nth-of-type(even){background-color:#dfdfdf;}


.range_select {display:inline-block; min-width:95px; height:52px; margin-right:5px; padding:3px; border-radius:3px; box-sizing:border-box; background-color:#dfdfdf; text-align:center; }
.range_select.selected {color:white; background-color:rgb(var(--gc_green));} 

 .success {background-color:#08db67; }
 .fail {background-color:#ff3333;}
 
 .tick {background-color:#01bc59; border-radius:23px; width:23px; height:23px; font-size:19px; color:white; text-align:center; margin:0 10px}
 
 .form_item {font-family: arial; border-radius:2px;border: 1px solid #cfcfcf;background-color: #efefef; color:#333;}
/*select.form_item option:first-child{display: none;}*/
select.form_item option {color:#333;}
 
 
 
 .purchase_form {margin:20px auto; text-align:center; }

.purchase_form button {background-color:#102D1C; color:#fff; font-weight:bold; padding:5px; border:0px;}
.purchase_form input, .purchase_form select,.uk_only {background-color:#f0f0f0;border:2px solid rgb(var(--gc_pepper_light));} 
.purchase_form input, .purchase_form select,.opayo_form input, .opayo_form select, .uk_only { border-radius:5px; font-size:2rem; color:rgb(var(--gc_pepper));} 
.opayo_form {}

.payment_method {box-sizing:border-box;}
.payment_method, .ph_tab {background-color:#efefef;}


.opayo {background-color:rgb(12,32,116); color:#fff; }
.cvv {margin-left:5px; font-weight:bold; display:inline; padding:0 5px; text-align:center; background-color:#01a2da; color:#fff; width:20px; height:20px; line-height:10px; border-radius:10px;}

.highlight {background-color:#FBFFAB; padding:5px; border:2px solid #000; border-radius:5px; }


.adjust_basket_qty {appearance: button;  backface-visibility: hidden;  background-color: #405cf5;  border-radius: 2px;  border-width: 0;
  box-sizing: border-box;  color: #fff;  cursor: pointer; height:25px;  width: 100%;
  outline: none;  overflow: hidden;    position: relative;
  text-align: center;  text-transform: none;}


@media screen and (max-width : 829px)
{
    
.desktops_only {display:none!important;}      
.tablets_only {display:none!important;}   
}



.product_title h2{font-size:2.5rem; padding:10px 0 0 0px;}
.product_title {}

.product_code {width:100px; padding-left:5px; vertical-align:middle;}
.product_name {vertical-align:middle;}


.product_offer_price {width:55px;}
.old_price { height: 10px; text-align: right; padding-right: 30px; line-height: 0.5;}
.product_qty {text-align:center; padding-bottom:2px;} 
.product_qty_input {width:30px; text-align:center; vertical-align:middle; height: 21px;  margin: 0 1px;}
.product_vatable {width:20px; display:inline-block; text-align:left; }
.delete_image {height:17px;}
.product_detail { vertical-align:top; box-sizing:border-box;}
.payment_section {display:inline-table;}

@media screen and (min-width : 830px)
{
.category_section {display:table; border-collapse: collapse}
.category_section > div {display:table-row;}  
.category_section > div > div {display:table-cell;}

.product_detail  {display:table-cell; height:25px; vertical-align:middle; padding:4px 0; }  
.product_name {box-sizing:border-box; padding-left:5px;} 
.product_weight, .product_units {width:150px; text-align:center; } 
.product_price {width:100px; box-sizing:border-box; padding:0 5px;}
.product_line_price {width:100px; padding-right:2px;}
.product_qty {width:100px;}
.product_delete {width:20px; padding:0 5px;} 
.add_button {width:120px; text-align:right; box-sizing:border-box; padding-right:5px;} 
.add_button button {width:100px;}
.plus_add {display:none;}

.basket_totals {display:table;}
.basket_totals > div {display:table-row;}
.basket_totals > div > div {display:table-cell;}
.basket_total {width:100px; padding-right:20px; box-sizing:border-box;}

.purchase_form {display:table;}

.address_block {display:table-cell;} 
.address {padding-right:20px;}
.address > div {padding-bottom:5px;}  
.payment_method {width:850px;}
.opayo_form {display:table;}
.opayo_block {display:table-cell;}

.opayo_block > div {display:table; padding-top:10px;}
.opayo_block > div > div {display:table-row;}
.opayo_detail {padding:2px 5px;}
.t_and_c {text-align:right;}
.opayo_detail label {font-size:10pt;}

.purchase_form input, .opayo_form input  {width:100%; max-width:280px; }
}    


@media screen and (min-width : 350px) and (max-width : 829px)
{
.not_for_phones {display:none!important;} 

.product_section { padding-bottom:4px; text-align:right}
.product_detail {height:25px;}
.product_name {display:inline-block; width:100%; padding-left:2px;  text-align:left;}
.product_weight {display:inline-block; width:20%;padding-left:2px; text-align:left;}
.product_price {display:inline-block; width:20%; padding-right:2px; }
.product_line_price {display:inline-block; width:25%; padding-right:2px;}
.product_qty {display:inline-block;}
.product_delete {display:inline-block; padding:0 5px;} 
.add_button {float:right; display:block; width:60%; text-align:right; padding-right:2px;}
.add_button button {width:100%; max-width:100px;}
.plus_add {display:none;}

.total_detail {display:inline-block;} 
.basket_total {width:75px; padding-right:22px; text-align:right;}


.address {display:block; margin-bottom:10px;}
.address > div {padding-bottom:5px;}

.payment_method {width:100%;}
.purchase_form, .opayo_form {width:fit-content; max-width:100%;}
.purchase_form input, .opayo_form input {width:100%; max-width:280px; }

 

.opayo {padding:10px; box-sizing:border-box;}
.opayo_block {display:inline-block; vertical-align:top; width:280px; padding:0 5px; text-align:center;}
.opayo_detail {;}
.opayo_detail label {font-size:10pt;}

}


@media screen and (max-width : 349px)
{

.not_for_phones {display:none!important;} 
.product_section { padding-bottom:4px;  text-align:right}
.product_detail {height:25px;}
.category_section {} 
.product_name {display:inline-block; width:100%; padding-left:2px;  text-align:left;}
.product_weight {display:inline-block; width:40%;padding-left:2px; vertical-align:middle; text-align:left;}
.product_price {display:inline-block; width:26%; padding-right:2px; vertical-align:middle;}
.product_line_price {display:inline-block; width:25%; padding-right:10px;}
.product_qty {display:inline-block; width:30%; max-width:100px;}
.product_delete {display:inline-block; width:20px; padding:0 5px;} 

.add_button {float:right; display:block; width:20%; text-align:right; padding-right:2px; vertical-align:middle;}
.add_button button {width:100%; max-width:30px;}   
.text_add {display:none;}    

.total_detail {display:inline-block;} 
.basket_total {width:75px; padding-right:22px; text-align:right;}

.address_block {padding-top:10px;} 
.address > div {padding-bottom:5px;}
.opayo {padding:10px; box-sizing:border-box;}
.opayo_detail label {font-size:9pt;}

.purchase_form, .opayo_form {width:280px; max-width:100%;}
.purchase_form input, .opayo_form input  {width:100%; max-width:280px; }
} 


