:root {
  /********************************************************
  * COMPANY LOGO
  *********************************************************/
  --company-logo-img-url: url("https://storage.googleapis.com/mic-menu-images/brand_logos/brand_logos_brinker_chilis_maggianos.png");
  --company-logo-max-height: 150px;

  /********************************************************
  * PAGE BACKGROUND 
  *********************************************************/
 /* --background-image-url: url("https://partyspace.com/images/providers/Maggianos%20rehearsal%20dinners%20venue%20Philadelphia.jpg");*/
  --background-color: rgb(255,255,255);

  /********************************************************
  * CARD BODY
  *********************************************************/
  --card-background-color: rgb(209,197,165);

  /********************************************************
  * BODY
  *********************************************************/
  --body-font-family: Montserrat;
  --body-font-size: 0.85rem;

  /********************************************************
  * TEXT FONT COLORS
  *********************************************************/

  /*  PRIMARY FONT COLOR (RGB) */
  --text-color-primary: 17, 17, 17;

  /*  MUTED TEXT ALPHA  */
  --text-color-muted-apha: 0.75;

  /*  ERROR FONT COLOR  */
  --text-color-error: rgb(223, 28, 37);

  /********************************************************
  * BUTTON ATTRIBUTES
  *********************************************************/

  /*  BUTTON FONT COLOR  */
  --button-primary-text-color: rgb(255, 255, 255);

  /*  BUTTON BACKGROUND COLOR & LINK BUTTON FONT COLOR (RGB)  */
  --button-primary-background-color: 16,181,155;

  /*  BUTTON HOVER ALPHA  */
  --button-hover-alpha: 0.70;

  /*  BUTTON ACTIVE ALPHA  */
  --button-active-alpha: 0.80;

  /*  BUTTON DISABLED ALPHA  */
  --button-disabled-alpha: 0.65;

  /********************************************************
  * ACTIVITY INDICATOR & BUTTON SPINNER COLOR
  *********************************************************/

  --activity-indicator-color: rgb(255, 194, 33);

  /********************************************************
  * APPLYING TEXT COLOR - DO NOT CHANGE
  *********************************************************/
  /* H1,H2, H3, Body text color */
  --bs-body-color: rgb(var(--text-color-main)) !important;
  --bs-danger-rgb: var(--text-color-error);
}
            
/********************************************************
* CLASSES BELOW ARE DERIVED FROM VALUES ABOVE
* DO NOT CHANGE UNLESS YOU HAVE CSS 'SKILLZ' :)
*********************************************************/

/*  COMPANY LOGO  */
.companyLogo {
  content: var(--company-logo-img-url);
  max-height: var(--company-logo-max-height);
}

/*  BACKGROUND IMAGE  */
div.bg-light {
  background-image:       var(--background-image-url);
  background-size:        cover;
  background-repeat:      no-repeat;
}

/*  BODY FONT & COLOR  */
.card-body {
  /*  font family */
  font-family: var(--body-font-family) !important;
  /*  font size */
  font-size: var(--body-font-size) !important;
  /*  font color */
  color: rgb(var(--text-color-primary)) !important;
  /*  background color */
  background-color: var(--card-background-color) !important;
}

/*  MUTED PARAGRAPH  */
p.text-muted {
  color: rgba(var(--text-color-primary), var(--text-color-muted-apha)) !important;
}

/*  ERROR MESSAGE PARAGRAPH  */
.card .text-danger {
  color: var(--text-color-error) !important;
}

/*  FORM CONTROL FONT COLOR  */
.form-control,
.form-control:focus {
  color: var(--text-color-primary) !important;
}

/*  FORM CONTROL PLACEHOLDER FONT COLOR  */
.form-floating input+label {
  color: rgba(var(--text-color-primary), var(--text-color-muted-apha)) !important;
}

/*  FORM CONTROL HIGHLIGHT  */
.form-control:focus {
  border-color: rgba(var(--button-primary-background-color), .5) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--button-primary-background-color), 0.25) !important;
}

/*  PRIMARY BUTTON  */
.btn-primary {
  /*  font color  */
  --bs-btn-color: var(--button-primary-text-color) !important;
  /*  font color when hovering  */
  --bs-btn-hover-color: var(--button-primary-text-color) !important;
  /*  border color  */
  --bs-btn-border-color: var(--button-primary-background-color) !important;
  /*  background color  */
  --bs-btn-bg: rgb(var(--button-primary-background-color)) !important;
  /*  background color when hovering  */
  --bs-btn-hover-bg: rgba(var(--button-primary-background-color), var(--button-hover-alpha)) !important;
  /*  background color when active  */
  --bs-btn-active-bg: rgba(var(--button-primary-background-color), var(--button-active-alpha)) !important;
  /*  background color when disabled  */
  --bs-btn-disabled-bg: rgba(var(--button-primary-background-color), var(--button-disabled-alpha)) !important;
  background-color: rgb(var(--button-primary-background-color)) !important;
  border-color: rgb(var(--button-primary-background-color)) !important;
  color: var(--button-primary-text-color) !important;
}


.btn-primary:hover {
  background-color: rgba(var(--button-primary-background-color), var(--button-hover-alpha)) !important;
  border-color: rgba(var(--button-primary-background-color), var(--button-hover-alpha)) !important;

  color: var(--button-primary-text-color) !important;
}

/*  LINK BUTTON  */
.btn-link {
  /*  button font color  */
  --bs-btn-color: rgb(var(--button-primary-background-color)) !important;
  /*  button font color when active  */
  --bs-btn-active-color: rgba(var(--button-primary-background-color), var(--button-active-alpha)) !important;
  /*  button font color when hovering  */
  --bs-btn-hover-color: rgba(var(--button-primary-background-color), var(--button-hover-alpha)) !important;
  /*  button font color when disabled  */
  --bs-btn-disabled-color: rgba(var(--button-primary-background-color), var(--button-disabled-alpha)) !important;
  color: rgb(var(--button-primary-background-color)) !important;
}

/*  POLLING INDICATORS  */
.css-11k6vsm,
.css-17zi2ag,
.css-139roxj {
  width: 20px;
  height: 20px;
  animation-duration: 0.75s;
  /*  circle background color  */
  background-color: var(--activity-indicator-color) !important;
}

/*  BUTTON ACTIVITY INDICATOR  */
.css-sw2ho0 {
  /*  spinning circle color  */
  --primary-color: var(--activity-indicator-color) !important;
}