/* <user-icon> --> <button> */
:root {
--pwa_icon_background_color:        #6cc04a;
--pwa_icon_radius:                  6px;
--pwa_icon_border:                  2px solid black;
--pwa_icon_padding:                 0px 16px;
--pwa_icon_hover_color:             lightgrey;
--pwa_icon_font:                    'Arial', sans-serif;
--pwa_icon_height:                  32px; /* state: Logged-out (sync) */
--pwa_icon_diameter:                32px; /* state: Logged-in (sync) */
}

/* <user-drawer> */
:root {
--pwa_drawer_background_color:      #fff;
--pwa_drawer_border-radius:         20px;
--pwa_drawer_border:                3px #303030 solid;
--pwa_drawer_z-index:               2;
--pwa_drawer_text_color:            #303030;
}

/* <user-settings> */
:root {
--pwa_settings_background_color:    grey;
--pwa_nav_button_color:             grey;
--pwa_nav_highlight_color:          black;
--pwa_divider_color:                grey;
--pwa_header_color:                 black;
--pwa_input_background_color:       #E1E5EB;
--pwa_label_text_color:             black;
--pwa_button_text_color:            #fff;
--pwa_button_background_color:      #6cc04a;
--pwa_button_border_color:          #60b23e;
}

/* shared core elements */
:root {
--section_background_color:         white;
}

body {
  background:           linear-gradient(124deg, #e8891d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size:      1800%;
  -webkit-animation:    rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
  -z-animation:         rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
  -o-animation:         rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
  animation:            rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
}

@keyframes rainbow {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}

.background {
  padding:              16px;
  border-radius:        12px;
  background:           linear-gradient(124deg, #e8891d, #e8b71d, #e3e81d, #1de840, #1ddde8);
  background-size:      1800%;
  -webkit-animation:    rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
  -z-animation:         rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
  -o-animation:         rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
  animation:            rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
}

:root{
  --business_card_b_c_nth:    transparent;
  --business_card_b_c:        transparent;
  --meal_content_b_c:         var(--main_b_c);  /*, white;*/
  --catering_card_b_c_nth:    rgba(0, 255, 0, 0.1);
  --catering_card_b_c:        rgba(0, 255, 255, 0.1);
  --catering_card_pre:        transparent;  /*, rgba(0, 0, 0, 0.1);*/
  --foot_button_b_c:          transparent;  /*, beige;*/
  --main_b_c:                 var(--color_4);      /*beige*/ 
  --main_color:               black;
  --h3:                       var(--color_17);
}

:root {
  --color_2:  #1C1E21;
  --color_5:  #171d29;
  --color_8:  #171d29;
  --color_9:  rgb(45 50 74);
  --color_10: #171d29;
  --color_12: #171d29;
  --color_16: #171d29;
  --color_17: #001b4d;
  --color_18: #184A78;
  --color_20: #184A78;
  --color_21: rgba(0,70,90,0.3);
  --color_22: #202124;

  --color_25: #4F62C0;
  --color_26: rgba(0,0,255,0.3);
  --color_27: #4F62C0;
  --color_28: rgba(0,0,0,0.1);
  --color_29: #4F62C0;

  /* Light Coloured */
  --color_1:  #f0f5fc;
  --color_4:  mintcream; /*rgba(245, 255, 250, 0.8)*/
  --color_6:  lightcyan;
  --color_7:  mintcream;
  --color_11: aliceblue;
  --color_19: #e8e8e8;
  --color_23: #dadeff;
  --color_24: lightcyan;
  --color_30: whitesmoke;
  --color_34: #F0FFF0;
  --color_32: #f1f1f1;
  --color_15: #f7f7f7;
  --color_36: #e8e8e8 ;

  --color_13: rgba(0, 88, 0, .3);
  --color_14: slategrey;
  --color_3:  darkolivegreen;
  --color_31: rgba(0,255,0,.1);
  --color_33: rgba(33, 207, 74, .3);
  --color_35: #2b3c44;
}