@charset "utf-8";
/*****************
* @this - Styles for objects found throughout the whole site.
* @mobile.css - Must be defined first, styles to use for mobile devices
*****************/

:root {
  --orangeColor: #fc5d35;
  --greyColor: #606060;
  --cyanColor: #5f9ea0;
  --yellowColor: #fcaf35;
  --blueColor: #7797d0;
  --greenColor: #009900;
}

/* Elements
----------------------------------------------------------------------------------------------------*/
#container-webpage {
  display: flex;
  flex-flow: column wrap;
  min-height: 100%;
}

#site_title {
  font-weight: bold;
  padding-right: 20px;
}

#container-developmentHeader {
  text-align: center;
  color: #FF0;
  font-weight: bold;
  background-color: #999;
}

#container-header {
  width: 100%;
  padding: 5px 20px;
  border-bottom: 3px solid var(--greyColor);
  background-color: #FFF;
  z-index: 9999;
}

#container-header a {
  text-decoration: none;
  margin-right: 20px;
}

.companyLogoContainer {
  position: relative;
  width: 100%;
  height: 50px;
}

.companyLogoContainer .companyLogo {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 50px;
  max-width: 50px;
  margin-right: 10px;
}

#container-body {
  display: grid;
}

#container-welcomeOutter {
  display: flex;
  flex-flow: column;
  align-items: center;
  min-height: 100%;
  padding-top: 20px;
}

#container-welcomeInner {
  display: flex;
  flex-flow: row wrap;
  gap: 20px 40px;
  justify-content: center; /*horizontal*/
}

#welcomeForm {
  text-align: center;
  padding: 5px 20px 10px 20px;
}

#welcomeForm input {
  width: 100%;
  font-size: x-large;
  padding: 10px;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: inset 0 1px 3px #DDD;
  border-radius: 10px;
  border: 2px solid #888;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

#welcomeForm input:focus {
  border: 2px solid #444;
}

#welcomeForm button {
  font-size: xx-large;
}

#content-groupGoalReason {
  width: 800px;
}

#input-website {
  display: none;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 20;
  font-size: 28px;
  vertical-align: middle;
}

.container-home {
  text-align: center;
  background: rgba(255,255,255,0.95);
  width: 350px;
  height: 230px;
  border-radius: 20px;
  padding: 10px;
}

.container-home p {
  font-size: x-large;
  margin-top: 0px;
  margin-bottom: 10px;
}

.homeButton {
  width: 100%;
  appearance: button;
  font-size: xx-large;
  font-weight: bold;
  line-height: 40px;
}

.clickable:hover {
  cursor: pointer;
}

.bluetxt {
  color: var(--blueColor);
}

.greentxt {
  color: var(--greenColor);
}

.container-loginForm {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
}

.container-loginTable {
  width: 300px;
}

.container-loginButtons {
  display: flex;
  flex-flow: column wrap;
  gap: 10px;
  width: 200px;
}

.container-storeCallOut .supportingImg {
  width: 150px;
  height: 150px;
  margin-right: 10px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.container-storeCallOut .supportingImg img {
  max-width: 150px;
  max-height: 150px;
  flex-shrink:0;
  margin: auto;
}

.freeDeliveryPromo a {
  margin-left: 33px;
}

#saleTimer {
  height: 71px;
  color: #FFF;
  background-color: rgb(0 0 0 / 25%);
  padding: 10px 10px 0px 10px;
}

#container-saleTimer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: x-large;
}

/* Backgrounds */
.bg1 {
  background-image: url('../images/welcome-bg.jpg');
  background-size: cover;
  background-position: center bottom;
}

.bg2 {
  background-image: url('../images/orange-bg.jpg');
  background-size: cover;
  background-position: center bottom;
}

.bg3 {
  background-image: url('../images/terms-bg.jpg');
  background-size: cover;
  background-position: center bottom;
}

/* Menu */
#container-menu {
  display: flex;
  font-size: large;  
}

#menuContainer {
  position: absolute;
  width: 0px;
  height: 100vh;
  right: 0px;
  overflow: hidden;
  z-index: 999;
}

#mobileMenuContainer {
  position: absolute;
  width: 100vw;
  height: 0px;
  left: 0px;
  overflow: hidden;
  z-index: 999;
}

#menuToggle {
  cursor: pointer;
}

#menuToggle.active,
#mobileMenuToggle.active {
  color: #F00;
}

.menu {
  min-width: 250px;
  max-width: 250px;
  height: 100%;
  color: #FFF;
  background: var(--greyColor);
  padding-bottom: 20px;
}

.search_input {
  float: left;
  margin: 15px 5px 0px 10px;
  width: 125px;
  height: 22px;
  border: none;
}

.search_button {
  float: left;
  margin-top: 15px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: bold;
}

.menu ul {
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.menu li a {
  display: block;
  padding: 4px 16px;
  text-decoration: none;
}

.menu li a:hover {
  background-color: var(--orangeColor);
}

.nav_menu_header  {
  float: left;
  font-weight: bold;
  font-size: larger;
  margin-top: 20px;
  margin-left: 10px;
}

.nav_menu_active_fundraiser  {
  background-color: var(--cyanColor);
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  padding-top: 10px;
}

/* Shop Display */
#container-shop {
  display: flex;
  flex-direction: row;
}

#container-shop_items {
  padding: 20px 20px 40px 20px;
}

#container-brochure_items {
  width: 100%;
  padding: 20px 20px 40px 20px;
}

.container-storeCallOut {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  color: #FFF;
}

.bgCover {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+50,000000+100&0+0,0.25+50,0+100 */
  background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}

/* Supporter Display */
#container-supporter {
  display: flex;
  flex-direction: row;
}

#container-supporter_content {
  padding: 20px 20px 40px 20px;
}

/* Seller Display */
#container-seller {
  display: flex;
  flex-direction: row;
}

/* Coordinator Display */
#container-coordinator {
  display: flex;
  flex-direction: row;
}

#container-coordinator h1,
#container-coordinator h2,
#container-coordinator h3,
#container-coordinator h4,
#container-coordinator h5,
#container-coordinator h6 {
  line-height: 1.2;
}

.orangeCallout {
  color: #FFF;
  padding: 10px 15px;
  margin-bottom: 20px;
}

.orangeCallout h2 {
  color: #FFF;
}

#container-adminContent .flexRow {
  margin-bottom: 20px;
}

#container-adminContent .flexColumn {
  max-width: 600px;
  min-width: 300px;
}

#container-adminContent .flexColumn:nth-child(odd) {
  margin-right: 40px;
}

#container-fundraiserChecklist {
  max-width: 500px;
  font-weight: bold;
}

#container-fundraiserChecklist img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-top: -2px;
  margin-right: 10px;
}

/* Error Message / Message Containers */
.error_message_container {
  background-color: #ffd4d4;
  border: solid 2px #D00;
  padding: 10px;
  margin: 10px 0px;
}
.error_title {
  color: #D00;
  font-weight: bold;
}

.message_container {
  background-color: #fff6d4;
  border: solid 2px #b7ab8d;
  padding: 10px;
  margin: 10px 0px;
}

/* Buttons */
.orangeButton {
  color: #FFF;
  background-color: var(--orangeColor);
  padding: 5px 20px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 0px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.orangeButton:hover {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fc5d35+0,f94518+37,fc5d35+100 */
  background: rgb(252,93,53); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(252,93,53,1) 0%, rgba(249,69,24,1) 37%, rgba(252,93,53,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(252,93,53,1) 0%,rgba(249,69,24,1) 37%,rgba(252,93,53,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(252,93,53,1) 0%,rgba(249,69,24,1) 37%,rgba(252,93,53,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=var(--orangeColor), endColorstr=var(--orangeColor),GradientType=0 ); /* IE6-9 */
}

.greyButton {
  color: #FFF;
  background-color: var(--greyColor);
  padding: 5px 20px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 0px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.greyButton:hover {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#606060+0,545454+37,606060+100 */
  background: rgb(96,96,96); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(96,96,96,1) 0%, rgba(84,84,84,1) 37%, rgba(96,96,96,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(96,96,96,1) 0%,rgba(84,84,84,1) 37%,rgba(96,96,96,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(96,96,96,1) 0%,rgba(84,84,84,1) 37%,rgba(96,96,96,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=var(--greyColor), endColorstr=var(--greyColor),GradientType=0 ); /* IE6-9 */
}

.redButton {
  color: #FFF;
  background-color: #dd1a11;
  padding: 5px 20px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 0px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.redButton:hover {
  background-color: #cf1911;
}

.greenButton {
  color: #FFF;
  background-color: #179300;
  padding: 5px 20px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 0px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.greenButton:hover {
  background-color: #187107;
}

.yellowButton {
  color: #FFF;
  background-color: var(--yellowColor);
  padding: 5px 20px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 0px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.removeButton {
  display: inline-block;
  margin: 5px 5px 5px 0px;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background-color: #dd1a11;
}



/***************** STORE STYLES *****************/

.trail {
  float: left;
  margin-bottom: 20px;
}

.breadcrumb {
  float: left;
  margin-right: 10px;
}

.shop-input-qty {
  width: 65px;
  margin-right: 10px;
  border-radius: 0px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.shop-btn-view-details {
  float: left;
  width: 100%;
  margin-top: 8px;
}

#login-seller_pane legend,
#login-admin_pane legend,
#login-supporter_pane legend {
  font-weight: bold;
  color: #dd2323;
}

/* Default Shop, Categories */
#container-shop_items .brochure-list-container {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  margin-bottom: 20px;
}

#category-outer-container {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
}

.category-container {
  width: 225px;
}

.category-image img {
  width: 100%;
  border-radius: 5%;
}

.category-container .brochure-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: solid 2px #EEE;
  background: #F9F9F9;
  height: 225px;
  border-radius: 5%;
  margin-bottom: 8px;
}

.category-container .brochure-image img {
  margin: auto;
  max-height: 225px;
  max-width: 225px;
  padding-top: 8px;
}

.category-name {
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: smaller;
}

.category-name a {
  font-size: 125%;
  text-decoration: none;
}

/* Product List */
#product-list-outter-container {
  display: flex;
  flex-flow: row wrap;
  gap: 20px 10px;
}

.product-list-container {
  max-width: 200px;
  height: 420px;
  border: #ddd 1px solid;
}

.product-list-image img {
  width: 100%;
  display: block;
}

.product-list-details {
  text-align: left;
  padding: 0px 10px 10px 10px;
}

.product-list-name {
  float: left;
  width: 100%;
  margin-top: 10px;
}

.product-list-name a {
  font-weight: bold;
  text-decoration: none;
  display: block;
  line-height: 17px;
}

.product-list-overview {
  font-size: small;
  line-height: 18px;
}

.product-list-retail {
  float: left;
  margin-top: 8px;
  margin-bottom: 4px;
}

.product-list-shipping_type {
  float: left;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 4px;
  line-height: 16px;
}

.product-list-retail .retail-currency,
.product-list-retail .retail-dollars,
.product-list-retail .retail-cents {
  float: left;
}

.product-list-retail .retail-currency,
.product-list-retail .retail-cents {
  font-size: 12px;
  line-height: 14px;
}

.product-list-retail .retail-dollars {
  font-size: 21px;
  line-height: 21px;
}

.product-list-view-details {
  float: right;
  width: calc(100% - 75px);
  line-height: 14px;
  margin-top: 4px;
}

.product-list-view-details a {
  width: 100%;
  display: block;
}

#container-askDeliveryMethodBtn {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

#container-askDeliveryMethodBtn .btnDeliveryMethod {
  width: 275px;
  margin-right: 20px;
  margin-bottom: 20px;
}

/* Product Page */
.product-container {
  display: inline-block;
  padding-bottom: 20px;
  text-align: left;
}

.product-container .product_image {
  float: left;
  margin-right: 20px;
}

#container-brochure_items .product-list-view-details {
  width: 103px;
}

#product-image-container {
  float: left;
}

.product-details-container {
  float: left;
  width: 365px;
}

.product-details-container .product_name h2 {
  margin-bottom: 0px;
  line-height: 1em;
}

.product-details-container .product_shipping_type {
  line-height: 18px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.product-details-container .product_retail_lbl,
.product-details-container .product_quantity_lbl {
  float: left;
  margin-right: 5px;
  font-weight: bold;
}

.product_attribute_container .product_attribute_lbl {
  float: left;
  margin-right: 5px;
  font-weight: bold;
}

.product_attribute_container .product_attribute_desc {
  font-size: smaller;
}

input.product_quantity {
  text-align: right;
  max-width: 50px;
}

.gallery-container {
  float: left;
  clear: both;
}

.gallery-image {
  float: left;
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.gallery-image .youtube_cover {
  position: absolute;
  width: 100%;
  height: 100%;
}

.lbl_frozen {
  font-weight: bold;
  color: #00F;
}

/* Brochure Shop (must come after default store styles) */
#container-brochure_items .brochure-list-container {
  display: flex;
  flex-flow: column wrap;
  gap: 20px;
}

#container-brochure_items .brochure-list-image {
  align-self: center;
}

#container-brochure_items .page_products {
  display: flex;
  justify-content: center;
}

#container-brochure_items .product-list-outter-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 20px 10px;
  margin-bottom: 20px;
}

#container-brochure_items .product-list-container {
  display: flex;
  width: 100%;
  max-width: 400px;
  height: auto;
  border-bottom: #ddd 1px solid;
  text-align: left;
}

#container-brochure_items .product-list-image img {
  width: 132px;
  height: 132px;
}

#container-brochure_items .product-list-details {
  flex-grow: 2;
  padding: 10px 10px 0px 10px;
}

#container-brochure_items .product-list-name {
  margin-top: 0px;
}

/* Nutrition Styles */
.nutrition_wrapper {
  float: left;
  border: solid 2px #000;
  padding: 1%;
  max-width: 400px;
}

.nutrition_wrapper div {
  float: left;
}

.nutrition_wrapper div.rightCol {
  float: right;
}

.nutrition_wrapper table {
  width: 100%;
}

.thickBB,
.mediumBB,
.thinBB {
  width: 100%;
  clear: both;
}
.thickBB {
  border-bottom: solid 8px #000;
}

.mediumBB {
  border-bottom: solid 4px #000;
}

.thinBB {
  border-bottom: solid 1px #666;
}

.nutrition_title {
  font-weight: bold;
  font-size: 28px;
}

.primaryTitle {
  font-weight: bold;
}

.smallerTitle {
  font-weight: bold;
  font-size: smaller;
}

.rightAlign {
  text-align: right;
}


/* Cart Styles */

#container-cart {
  display: flex;
  justify-content: center;
}

#cart-inner-container {
  display: inline-block;
}

#cart-supporting_sellers {
  background-color: #EEE;
  padding: 10px;
  margin-bottom: 20px;
}

#seller_table {
  width: 100%;
}

.assignSeller {
  display: none;
}

select.seller_select,
input.seller_select {
  height: 33px;
  width: 100%;
}

.continueShoppingLink {
  float: left;
  margin: 0px;
}

.continueShoppingLink .greyButton {
  display: inline-block;
  line-height: 15px;
  font-size: 14px;
}

.container-cart_buttons {
  display: inline-block;
  width: 100%;
  padding: 5px 10px;
  background-color: #8f8f8f;
  color: #FFF;
}

/* Cart Table Items */

.tbl-cart_items {
  width: 100%;
  border-collapse: collapse;
}

.tbl-cart_items .removeCartItem .material-symbols-outlined {
  font-size: x-large;
}

.tbl-cart_items thead tr th {
  font-weight: 500;
}

.tbl-cart_items thead tr th,
.tbl-cart_items tbody tr td {
  padding: 0px 5px;
}

.tbl-cart_items tbody tr.even {
  background-color: #DDD;
}

.tbl-cart_items tbody tr.odd {
  background-color: #EEE;
}

.tbl-cart_items .product_column {
  width: 100%;
}

.tbl-cart_items .removeItemColumn {
  text-align: center;
}

.tbl-cart_items .product_image {
  float: left;
  margin-top: 5px;
  margin-right: 5px;
}

.tbl-cart_items .product_name {
  float: left;
}

.tbl-cart_items tfoot tr td {
  font-weight: bold;
  text-align: right;
  padding: 5px;
}

.cart-buttons {
  float: right;
}

.assign_items {
  background-color: #FAFAFA;
  border-top: dashed 2px #DDD;
}

.assign_items.first {
  border-top: none;
}

/* Progress Bar */
#progress_bar_container {
  width: 100%;
  position: relative;
}

#progress_bar_container .progressBarOutline {
  position: relative;
  float: left;
  width: 100%;
  height: 25px;
  border: 1px #777 solid;
  border-radius: 5px;
  background: #AAA;
}
#progress_bar_container .progressBar {
  float: left;
  height: 100%;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#299a0b+0,3baf0e+50,299a0b+100 */
  background: #299a0b; /* Old browsers */
  background: -moz-linear-gradient(top,  #299a0b 0%, #3baf0e 50%, #299a0b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #299a0b 0%,#3baf0e 50%,#299a0b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #299a0b 0%,#3baf0e 50%,#299a0b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */
}
#progress_bar_container .progressBar.overGoal {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7f960c+0,a7b50e+50,7f960c+100 */
  background: #7f960c; /* Old browsers */
  background: -moz-linear-gradient(top,  #7f960c 0%, #a7b50e 50%, #7f960c 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #7f960c 0%,#a7b50e 50%,#7f960c 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #7f960c 0%,#a7b50e 50%,#7f960c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f960c', endColorstr='#7f960c',GradientType=0 ); /* IE6-9 */
}
#progress_bar_container .section {
  position: absolute;
}
#progress_bar_container .displayLabel {
  float: left;
  width: 25%;
  text-align: right;
}

#progress_bar-left_label {
  position: absolute;
  left: 0;
}

#progress_bar-middle_label {
  float: left;
  width: 100%;
  margin-top: -60px;
  line-height: 25px;
}

#progress_bar-right_label {
  position: absolute;
  right: 0;
  text-align: right;
}

#progress_bar-amountRaisedTxt {
  font-size: 40px;
  font-weight: bold;
}

@keyframes progress {
  0% { --percentage: 0; }
  100% { --percentage: var(--progressPercentValue); }
}

@property --percentage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

[role="progressbar"] {
  --percentage: var(--progressPercentValue);
  --primary: #090;
  --secondary: #b5ffb5;
  --size: 260px;
  animation: progress 2s 0.5s forwards;
  width: var(--size);
  aspect-ratio: 2 / 1;
  border-radius: 50% / 100% 100% 0 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

[role="progressbar"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(from 0.75turn at 50% 100%, var(--primary) calc(var(--percentage) * 1% / 2), var(--secondary) calc(var(--percentage) * 1% / 2 + 0.1%));
  mask: radial-gradient(at 50% 100%, white 55%, transparent 55.5%);
  mask-mode: alpha;
  -webkit-mask: radial-gradient(at 50% 100%, #0000 55%, #000 55.5%);
  -webkit-mask-mode: alpha;
}

/******************
* Addresses
******************/
.address_block {
  float: left;
  min-width: 200px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: solid 1px #ddd;
  padding: 3px 5px;
}

.address_block .address-header {
  font-weight: bold;
}

.address_block .address-body {
  font-size: smaller;
}

/* Tablesorter Styles */
/**********************/

table.tablesorter {
  background-color: #CDCDCD;
  margin:10px 0px 5px;
  width: 100%;
  text-align: left;
  font-size: small;
}
table.tablesorter thead tr th {
  background-color: #e6EEEE;
  border: 1px solid #FFF;
  color: #000;
  padding: 4px 10px 4px 4px;
  font-weight: 500;
}
table.tablesorter tfoot tr td {
  padding: 4px 10px 4px 4px;
  font-weight: 500;
}
table.tablesorter thead tr .tablesorter-header {
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
  padding-right: 18px;
}
table.tablesorter tbody tr {
  background-color: #FFF;
}
table.tablesorter tbody tr.even {
  background-color:#F0F0F6;
}
table.tablesorter tbody tr:hover {
  background-color:#FFC;
}
table.tablesorter tbody td {
  padding: 4px;
  vertical-align: top;
}
table.tablesorter thead tr .tablesorter-headerUnSorted {
  background-image: url('/images/asc_desc.gif');
}
table.tablesorter thead tr .tablesorter-headerAsc {
  background-image: url('/images/asc.gif');
}
table.tablesorter thead tr .tablesorter-headerDesc {
  background-image: url('/images/desc.gif');
}
table.tablesorter thead tr .tablesorter-headerAsc,
table.tablesorter thead tr .tablesorter-headerDesc {
  background-color: #8dbdd8;
}
table.tablesorter thead tr .sorter-false {
  background-image: none;
  cursor: auto;
}

/* Seller Share Styles */
/**********************/
.share-button, .twitter-share-button {
  float: left;
  margin-right: 10px;
  margin-top: 10px;
}

#container-donationContent-primary .share-button a {
  width: auto;
  font-size: smaller;
}

a.instagram-share {
  float: left;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 7px 12px 6px 30px;
  color: #FFF;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 3px;

  background-image: url("/images/share/instagram.png");
  background-size: 16px 16px;
  background-position: 8px 5px;
  background-color: #9c00c3;
  background-repeat: no-repeat;
}

a.email-share {
  float: left;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 7px 12px 6px 30px;
  color: #FFF;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 3px;

  background-image: url("/images/share/mail.png");
  background-size: 16px 16px;
  background-position: 8px 5px;
  background-color: #888;
  background-repeat: no-repeat;
}

a.text-share {
  float: left;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 7px 12px 6px 30px;
  color: #FFF;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 3px;

  background-image: url("/images/share/cell-phone.png");
  background-size: 16px 16px;
  background-position: 8px 5px;
  background-color: #3C3;
  background-repeat: no-repeat;
}

a.copy-share {
  float: left;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 7px 12px 6px 30px;
  color: #FFF;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 3px;

  background-image: url("/images/share/copy.png");
  background-size: 16px 16px;
  background-position: 8px 5px;
  background-color: #3394cc;
  background-repeat: no-repeat;
}

/* Seller Photos */
.seller-photo {
  float: left;
  width: 200px;
  height: 200px;
  margin-right: 10px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.seller-photo img {
  flex-shrink:0;
  margin: auto;
  max-width: 200px;
  max-height: 200px;
}
.seller-photo-upload {
  float: left;
}

/* Group Photos */
.group-photo {
  float: left;
  width: 200px;
  height: 200px;
  margin-right: 10px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden
}
.group-photo img {
  flex-shrink:0;
  margin: auto;
  max-width: 200px;
  max-height: 200px;
}
.group-photo-upload {
  float: left;
}

.registerShopBTN {
  display: inline-block;
  width: 210px;
  padding-top: 10px;
  margin-right: 20px;
}

/* Donation Shop */
#container-donation {
  display: flex;
  flex-direction: row;
  background-color: #F4F4F4;
}

#container-donation #saleTimer {
  height: 200px;
}

#container-donationContent {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 60px;
  justify-content: center;
  padding: 20px 20px 40px 20px;
}

#container-donationContent hr {
  width: 100%;
  border: #D5D5D5 1px solid;
}

#container-donationContent-primary {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  background: #FFF;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

#container-donationContent-primary a {
  font-size: large;
  font-weight: bold;
  border-radius: 5px;
}

#container-donationContent-secondary {
  width: 600px;
  background: #FFF;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#container-donationContent-cause p:first-child {
  margin-top: 0px;
}

#container-otherDonationAmt {
  width: 300px;
  font-size: large;
  display: flex;
}

#custom_donation_amount {
  width: 200px;
  border-radius: 5px 0px 0px 5px;
  line-height: 30px;
  border: #D5D5D5 1px solid;
}

#custom_donation_amount_submit {
  border-radius: 0px 5px 5px 0px;
  flex-grow: 2;
}

.donationAmtBtn {
  width: 300px;
  font-size: large;
  font-weight: bold;
  border-radius: 5px;
}

.container-donationList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.container-donationSupporter {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 2px dashed #EFEFEF;
}

.container-donationList .container-donationSupporter:last-child {
  border-bottom: 0px;
}

.container-donationSupporter:hover {
  background-color: #EFEFEF;
}

.donation-rank {
  font-weight: bold;
}

.donation-name {
  width: 100%;
}

.donation-message {
  width: 100%;
  font-style: italic;
}

/* Sign Up Form */
.signUpForm a, .signUpForm button {
  width: 100%;
  display: block;
}

.signUpForm button {
  font-size: 100%;
  padding: 10px 20px;
}