/* MAIN STYLE SHEET */

/* For px to em conversions, etc.
https://all-markup-news.com/px-to-em/  */

/* Columns and so on */
.columnar_area { margin:0; padding:0; }
.column_block  { margin:0; padding:0; }
.left_column {
    float:left;
    width:200px;
    margin:0;
    /* margin-right: 2em; -> 24px */
    padding:0;
    }

.right_column {
    float:right;
    width:260px;
    margin:0;
    /* margin-left: 2em; */
    padding:0;
    /*background-color: #D1D9D8;*/
    }

.centre_column {
    /* margin left +10 and margin right +10 */
    /* margin:0 270px 0 210px; */
    margin: 0 294px 0 234px;
    }



.column-holder { margin:0; padding:0; }

.two_thirds_centre_column {
    /* Let the centre column fill the right-column as well*/
    /* margin:0 0 0 210px; */
    margin: 0 0 0 234px;
}

.full_width_centre_column {
    /* Let the centre column fill the right-column as well*/
    margin:0 0 0 0;
}

.padded_centre_column {
    /* Let the centre column fill the right-column as well*/
    /* margin:0% 3% 0% 3%;*/
    margin:0% 1% 0% 1%;
}



body {
    font-family: Verdana, sans-serif;
    font-size: 100%;
    font-weight : normal;
    background : #fff;
    /*background : #EAEDED;*/
}

.clear_floats { clear:both; }
.clear_left   { clear:left; }

.header_section { width: 100%; border: 1rem; }

.embedded_header {
    /* height to that of the logo image */
    border: 0;
    height: 82px;
    /*margin-left: 40%;*/
}

/* The top navigation bar and entries - modified unordered list */
ul.fa_navbar {
    list-style-type: none;
    margin: 0;
    padding-top: 1rem;
    overflow: hidden;
}
.fa_navbar li { float: left;}
.fa_navbar li a {
    /* We want the links to line up vertically: inline works. */
    display: inline;
    /*color: #5E7C79;*/
    color : #000;
    text-align: center;
    /*padding: 4px 3px 2px 3px;*/
    padding: 8px 5px 2px 5px;
    /*text-decoration: none; */
    /* font-variant: small-caps;*/
    text-transform: uppercase;
    font-size: 1rem;
}
.fa_navbar li a:hover { background-color: #D1D9D8; }

.embedded_link {
        color : #000;
}

.user_title{
    text-transform: uppercase;
    font-weight: bold;
}


/* Occasionally-used right-side nav_bar */
ul.fa_right_nav {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
}
.fa_right_nav li { float: right;}
.fa_right_nav li a {
    display: block;
    color: #5E7C79;
    text-align: center;
    padding: 4px 3px 2px 3px;
    text-decoration: none;
    font-variant: small-caps;
    font-size: 0.7rem;
}
.fa_right_nav li a:hover { background-color: #D1D9D8; }

/* Adjustments for the footer menu (overrides certain settings for the top menu) */
.footer_menu { width: 100%; }
.footer_menu ul.fa_navbar { padding: 0; text-align: left; }
.footer_menu .fa_navbar li a { font-size: 0.8rem; padding-right:1rem; color: #5E7C79; }


/* Left-column menu */
.left_column ul {
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding: 0;
    background-color: #D1D9D8;
    /* width to that of the logo image  */
    width: 200px;
}

.left_column ul li {
    margin: 0 0 0 0;
    padding: 2px 10px 2px 10px;
    display: block;
    text-align: left;
    font-size : 0.8em ;
    text-transform:uppercase;
    line-height: 1.5rem;
    border-bottom: solid 1px  #D1D9D8;
    background-color: #D1D9D8;
}

.left_column ul li a {
    color : #000;
    text-decoration : none;
    font-weight: normal;
    border-style:none;
    background-color: #D1D9D8;
    display: block;
}

.left_column ul li a:hover {color : #fff; background-color: #000; display: block; padding: 0;text-decoration : none;}
.left_column ul li.active a {color : #000; background-color: #D1D9D8; display: block; padding: 2px 10px 2px 10px;}

.left_column ul li.current_location a {color : white; background-color: #6c6868; display: block; padding: 0;}

/* right-column picture-grid */
.right_column ul {
    margin: 1px;
    padding: 0;
    /*background-color: #D1D9D8; */
}
.right_column ul li {
    display: block;
    float: left;
    margin-left: 1px;
    margin-bottom: 25px;
}


a.red_link {
    color: red;
    font-style: italic;
}

a.white_link {
    color: black;
    background-color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.1rem;
    width: 80%;
    display:inline-block;
    height: 4rem;
    vertical-align: middle;
    margin: 10%;
    text-align: center;
    margin-top: 1rem;
}

a.white_link_small {
    color: black;
    background-color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1rem;
    width: 80%;
    display:inline-block;
    height: 3.5rem;
    vertical-align: middle;
    margin: 10%;
    text-align: center;
    margin-top:  0.5rem;

}


/*.right_column ul li a {
    font-size: 0.7rem;
    display: inline-table; margin: 0px 0px 2px 0px; text-decoration : none;
    color : #000; max-width: 127px;
    }
*/

.right_column ul li a:hover {color : #fff; background-color: #000; display: block; padding: 0;text-decoration : none;}


.centered-and-cropped {object-fit: cover;}
.downscaled {object-fit: scale-down; }
.covered { object-fit: cover; object-position: 100% 0; }
.contained {object-fit: contain; }
/*.right_column ul li a:hover {color : #fff; background-color: #000; display: block; padding: 0; text-decoration : none;} */

.right_column p {
	font-size: 0.7rem;
	/*background-color: #D1D9D8; */
	display: block;
	margin: 0px 0px 2px 0px;
	width: 127px;
	}

.right_column img { width: 127px; height: 108px; display: block;}
.right_column .double img { width: 254px; height: auto; display: block;}
.right_column .double p { width: 254px; }
.right_column .whitened { background-color: #FFF;}

p.align_left  { text-align:left; }
p.align_center { text-align:center; }
p.align_right { text-align:right; }


.basket_block { background-color: #FFF; border: solid; border-color: black; border-width: 1px;}
.basket_block p { background-color: #FFF; font-size:0.8rem;}
.basket_block .fa_addresswidget { font-size: 0.8rem; }
.basket_block a { color : #000; text-decoration : none; }
.basket_block img { height: auto; width: auto; max-width: 2rem; display:inline; vertical-align:middle;}


/* Centre-column copy and news sections */
.main_copy { font-size: 0.8rem; text-align: justify; }
.main_copy h1 { text-align: center;  font-size: 1.5rem; }
.main_copy h2 { text-align: center; font-size: 1.2rem; }
.main_copy .copy_thanks { text-align: center;  font-size: 1.2rem; font-weight: bold; }
.main_copy img {
    /* padding: 1px; */
    /* border: 1px solid red; */
    max-width: 100%;
    object-fit: scale-down;
    object-fit: contain;
}

.entry_error p { font-size: 1rem; text-align: justify; font-style: italic; }
.entry_error h1 { color: red; font-size: 1.5rem; }

p.payment_error {
    color: red;
    font-size: 1.2rem;
    font-style: italic;
}

p.payment_error a{
    color: red;
    font-size: 1.2rem;
    margin-left: 1rem;
}

p.registration_error { color: red; font-size: 1rem;}


.news { font-size: x-small; color: #008000; }
.news h1 { color: #008000; font-size: small; display: inline; }
.news h2 { color: blue; font-size: small; display: inline;  }
.news h3 { color: #800000; text-decoration: underline; font-style: italic; display: inline;  }
.news p { display: inline; text-align: justify; }

.products p { font-size:1rem; }
.products em { font-size:1.1rem; display: inline; color:blue; font-weight:bold; font-style: normal; }
.products p.smaller_font { font-size: 0.8rem; text-align: justify; }


/* This forces intwidgets to 3 chars max - 1 extra for the up / down buttons.
    We should probably have fa_intwidgets2, 3, 4 and so on.
*/
.fa_intwidget input { width: 3rem; }
.fa_intwidget_entry input { width: 3rem; }
/* .fa_stringwidget_entry input { width: 25rem; } */
/* .fa_shortstringwidget_entry input { width: 20rem; } */

/* This styles the addresses so that newlines become breaks.
   The overflow:hidden; is needed to get the ellipsis working */
.fa_addresswidget {
    white-space: pre-line;
    padding-left: 0.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
}


/*.fa_edit_form legend { font-size:14px; font-weight:bold; }*/
.fa_edit_form p { text-align: left; }


.fa_site_admin_form p {
    text-align: left;
    font-size: 0.8rem;
    }

.fa_site_admin_form fieldset label {
    background-color: silver;
    border-width:1px;
    border-color: white;
    border-style: solid;
    padding: 1px;
    text-align: left;
    font-size: 0.6rem;
}

.fa_site_admin_picture_form fieldset label {
    background-color: white;
    border-width:1px;
    border-color: silver;
    border-style: solid;
    padding: 1px;
    text-align: left;
}

.fa_site_login_form {
    background-color: #e9eaec;

}

.fa_site_login_form fieldset {
    border: none;
    background-color: #e9eaec;
}

.fa_site_login_form p {
    text-align: left;
    font-size: 0.8rem;
    }

.fa_site_login_form p.centred {
    text-align: center;
    }


.fa_site_login_form fieldset label {
    /* background-color: silver; */
    padding: 1px;
    text-align: left;
    font-size: 0.8rem;
    width: 25%;
    float:left;
}

.fa_site_login_form input[type=text]{
    width: 26rem;
    /* border: 2px; */
}

.checkout_page input[type=text]{
    width: 26rem;
    /* border: 2px; */
}

#searchforaddress{ border-width: 2px; }

/* This is for the grey-background links in a box */
.fa_button_link {
    width: 80%;
    margin-left: 10%;
    background-color: #e9eaec;
}

.fa_button_link fieldset {
    border: none;
    background-color: #e9eaec;
}

.fa_button_link p {
    text-align: left;
    font-size: 0.8rem;
    }

.fa_button_link p.centred {
    text-align: center;
    }


.fa_button_link fieldset label {
    /* background-color: silver; */
    padding: 1px;
    text-align: left;
    font-size: 0.8rem;
    width: 25%;
    float:left;
}

.shrunk {
    height: 6rem;
    padding-top: 0.5rem;
    padding-bottom: 1.rem;
}

/* .fa_site_login_form .fa_submitwidget_entry input{
    margin-left: 40%;
} */

.fa_submitwidget_entry input, .fa_resetwidget_entry  input, .fa_buttonwidget_entry input,
 .fa_smallbuttonwidget_entry input, .fa_texttoleftbutton_entry input{
    /* background: #a7a495;
    color: white; */
    background: #cac7b7;
    color: black;
    text-transform: uppercase;
    /* font-size: 1.25rem; */
    font-size: 0.9rem;
}

.fa_submitwidget_entry .fa_delete_button {
    background: red;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
  }


.fa_smallbuttonwidget_entry input {
    /* This is, for example, for the choose country button to distinguish it */
    font-size: 0.8rem;
}


.stored_address {
    background-color: #FFF;
    border: solid;
    border-color: black;
    border-width: 1px;
    font-size: 1.1rem;
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 10%;
}
.stored_address p {
    background-color: #FFF;
    text-align: center;
}
/* .stored_address .fa_delete_button input{
    text-align: center;
} */

.fa_small_img img {
    width: 64px;
    height: auto;
    display: inline;
}

/* Emphasize the originally selected option */
.fa_popwidget option[selected] { font-weight:bold; }


table.rxline_table {
    background-color: white;
    border: 2px;
    width: 100%;
  }

table.rxline_table th {
    /*font-size: smaller;*/
    text-align: right;
    background-color: white;
}

table.rxline_table th.description {
    text-align: left;
}

table.rxline_table th, td, input {
    /*font-size: smaller;*/
}

table.rxline_table td.description {
    text-align: left;
}

table.rxline_table tr{
    background-color: #E5E5E5;
    text-align: right;
  }

table.quick_shop_table {
    border-collapse: collapse;
}

table.quick_shop_table tr {
    background-color: #FFFFCC;
}

table.quick_shop_table td.larger_font{
    color: #3333FF;
    font-weight: bold;
}

table.quick_shop_table tr.white_top_border{
    border-top: solid;
    border-color: white;
}

table.quick_shop_table tr.white_row {
    background-color: white;
    border-top: solid;
    border-color: white;
}


/* border="0" cellpadding="0" cellspacing="0"  */
table.year {
    border-spacing: 0rem;
    border: 0rem;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    background-color: white;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

table.year tr {
    vertical-align: top;
}

table.month {
    padding: 0.1rem;
    border-spacing: 0rem;
    border: 0rem;
    padding-bottom: 1rem;
    background-color: white;
    font-size: 0.8rem;
}

/*  border="0" cellpadding="0" cellspacing="0" */
table.month th {
    text-align: center;
    padding-bottom: 0.3rem;
    font-size: 0.8rem;
}

th.mon, th.tue, th.wed, th.thu, th.fri, th.sat, th.sun{
    width: 1.5rem;
    text-align: left;
    font-size: 0.8rem;
}

table.month th.sat, th.sun{
    color: red;
}

.fa_calendar_button{
    text-align: center;
    width: 2.5rem;
    height: 2.5rem;
}

table.month td{
    width: 2rem;
}

table.month td.unavailable_day{
    color: grey;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    font-style: italic;
    text-decoration: line-through;
    vertical-align: middle;
}

fieldset {
    padding: 1rem;
  /*  font-size:80%;*/
    font-size: 0.8rem;
    }

fieldset.live_items{
    width: 65%;
    background-color:rgb(253, 252, 181);
    border-style: none;
}

fieldset.live_recipient{
    /* rgb(252, 252, 215) */
    background-color:rgb(253, 252, 181);
    border-style: none;
    width: 65%;
}


fieldset.read_only_recipient {
    font-style: italic;
    background-color: #e5e5e5;
    width: 65%;
}

.read_only_recipient table.rxline_table th {
    /*font-size: smaller;*/
    text-align: right;
    background: #e5e5e5;
}

.read_only_recipient table.rxline_table th.description {
    text-align: left;
}

fieldset.checkout_page {
    border: none;
    /* background-color: #e9eaec; */
    /* background-color: red; */
    background-color:rgb(253, 252, 181);
    /* align-items: stretch; */
    border-style: none;
    width: 65%;
}

.checkout_page p{
    text-align: left;
}

.checkout_page label{
    width: 25%;
    float: left;
}
/*
fieldset.checkout_page p {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-gap: 1rem;
    float: right;
} */


table.fa_rxline_table{
    border-bottom: 1px solid #111111;
    border-collapse: collapse;
    width: 98%;
    padding-top: 2rem;
}

.fa_rxline_table td, th { border-bottom: 1px solid #111111; }
.fa_rxline_table caption { text-align: right; padding-bottom: 1rem; }
.fa_number { direction: rtl; }

.fa_list_number { direction: rtl; font-weight: bold; text-align:right;}

table.fa_rxline_totals_table{
    border-collapse: collapse;
    width: 98%;
    padding-top: 2rem;
}

table.held_basket_table {
    background-color: white;
    width: 100%;
  }

table.held_basket_table th{
    /*font-size: smaller;*/
    text-align: left;
}

table.held_basket_table td {
    text-align: left;
    width: 15%;
}

table.held_basket_table td.big {
    text-align: left;
    width: 40%;
}

table.held_basket_table th.big {
    text-align: left;
    width: 40%;
}


.country_alert {
    background-color: #ff9999;
}

.td_right { text-align: right; }


.tinycontent {
    font-size: 0.8rem;
    font-style: italic;
    color:black;
    }

.hoverRow p{
     display: None;
}
.hoverRow tr:active p{
     white-space:normal;
     word-wrap: normal;
     word-break:break-all;
     display: inline;
}

.shadow{
    box-shadow: 1.1em 0.4em 1em black;
}
.shadow legend{
    box-shadow: 1.1em 0.4em 1em black;
    background-color: white;
    font-size: 1.2rem;
    /* border-style: solid;
    border-width: thin; */
}

legend {
    background-color: white;
    font-size: 1.2rem;
}

.fa_edit_form legend{
    box-shadow: none;
    background-color: white;
    font-size: 1rem;
}

/*
label {
  float:left;
  width:15%;
  margin-right:0.5rem;
  text-align:right;
} */

.selected_highlight input{
    border: 6px solid green;
    border-style: inset;
    font-weight: bold;
    background-color: lightgreen;

    /* border-color: #6c6868; */
}

fieldset.live_recipient input[type=text], textarea{
    /* border-color: green; */
    width: 26rem;
}

input:required:focus {
   /* border-color: palegreen; */
   border-color: #3333FF;
}

input:invalid:focus, textarea:invalid:focus {
   border-color: salmon;
}

fieldset.live_recipient input:required:valid {
    /* The old highlighting was moving the text around - now
    we just inherit the colour */
    border-color: rgb(253, 252, 181);
}

input[type=text]:required:invalid, input[type=text]:focus:invalid, textarea:required:invalid, textarea:focus:invalid,
input[type=email]:required:invalid, input[type=email]:focus:invalid, input[type=password]:required:invalid, input[type=password]:focus:invalid,
input[type=tel]:required:invalid, input[type=tel]:focus:invalid
{
  /* base64 of star indicating must be completed */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wgdCzEdZwmDhQAAAJZJREFUGNONkD0KhDAYREer1HapxGsIeoGEXDLbWVumEa8h6AUUT/C2WBf3D9ZXzryBjy8D0B/yz+CWZb+lsaq0ef9WbN5rrKpTstYqpaSlbSVJS9sqpSRr7WPBwR4CfVEQJfqiYA/hWZHrCgBTXdMZw9w0RIm5aeiMYaprAAQwlCWrcwDE44LVOYayPKVXor4isivPvAMTI4JTebYFpAAAAABJRU5ErkJggg==);
    /* border-color: red; */
    width: 26rem;
    background-position: right top;
    background-repeat: no-repeat;
}


.larger_font {
  font-size: 1.3rem;
  font-weight: bold;
}


.alignleft {float: left; }
.alignright {float: right; }
.aligncentre {
    /* For aligning buttons, we apply this to the paragraph marker */
    text-align: center;
}

.right_relative{
    float: right;
    position:relative;
}

p.right_para{
    text-align: right;
}

.all_caps {
    text-transform: uppercase;
    font-size: 1.2rem;
}

.small_all_caps {
    text-transform: uppercase;
    font-size: 1rem;
}


.fa_edit_form input[type=radio]{
    display: none;
}

.fa_edit_form input[type=radio]+ b{
    font-style: italic;
    font-size: 1rem;
  }

.fa_edit_form input[type=radio]+ b::before{
    /* Circle */
    font-style: normal;
    font-size: 3rem;
    content: "\25CB";
}


.fa_edit_form input[type=radio]:checked + b{
    font-style: normal;
    font-size: 1rem;
  }

.fa_edit_form input[type=radio]:checked +b::before{
    /* tick-mark */
    font-size: 2rem;
    font-style: normal;
    color: black;
    /* content: "\2713"; */
    content: "\25C9";
  }

div.yellow_span{
    display: grid;
    grid-template-columns: max-content max-content;
    grid-gap: 1rem;
    float: right;
}

div.yellow_span label {
    text-align: right;
    width: auto;
}
/* div.yellow_span label:after { content: ":";} */

div.yellow_span .fa_submitwidget_entry { justify-self: right;}
div.yellow_span .fa_popwidget_entry { justify-self: right;}
div.yellow_span .fa_texttoleftbutton_entry  { justify-self: right;}

.medium_font {
    font-size: 1.1rem;
    font-weight: bold;
  }

.medium_font_red {
    color: red;
    font-size: 1.1rem;
    font-weight: bold;
}

.italic_font {
    font-size: 1rem;
    font-style: italic;
}

.shipping_note_bg{
    background-color: #E5E5E5;
}