:root {
  --border_radius_upload_button: 5%;
  /* Settings and colors for animation button */
  --animated_button_width_inside: 90%;
  --animated_button_height_inside: 70%;

  /* 48 ba d3 ,  72 186 211*/
  /* 05 4A 5A ,  05  74  90 */
  --outer_border_color_on    : #007BFF;
  --inner_border_color_on    : #007BFF;
  --center_color_on          : rgba(84,120,171,1.0);
  --text_color_on            : rgba(255,255,255,1.0);

  
  --outer_border_color_off   : rgba(84,120,171,0.5);  /* fills only border line */
  --inner_border_color_off   : rgba(84,120,171,0.5);  /* fills inner button */
  --center_color_off         : rgba(84,120,171,0.0);  /* fills center, overlapping color in inner border */
  --text_color_off           : rgba(255,255,255,0.6);

  /* Color of text inside animated button */
}

.AnimatedButtonContainer {
    /*width: 19em;*/
    position: relative;
    /*background-color: #0000ff;*/
    display: inline-block;
    /* Size of animated button */
    font-size: 1.0em;
}

.ImageButtonContainer 
{
  width: calc(var(--image_button_w1));
  height: calc(var(--image_button_h1));
}

.GpxButtonContainer 
{
  width: calc(var(--gpx_button_w1));
  height: calc(var(--gpx_button_h1));
}

.GuideButtonContainer 
{
  width: calc(var(--guide_button_w1));
  height: calc(var(--guide_button_h1));
}

/* Button content in unchecked of disabled state */
.AnimatedButton {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--border_radius_upload_button);
  border: 0px solid var(--outer_border_color_off);
  /*background-color: var(--button_upload_color_on);*/
  /* BUTTON COLOR1: color inside button */
  background-color: var(--inner_border_color_off);
  box-sizing: border-box;
  /* toggle_knob_color */
  /* box-shadow: inset 2px 2px 0 #7d7c7e, inset -2px -2px 0px #1c1c1c; */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /*font-size: 0.8em;*/
}

.ImageButton
{
}

.GpxButton
{
}

.AnimatedButtonContainer input {
  display: none;
}

/* Button border */
.AnimatedButton::before {
  position: absolute;
  content: "";
  border-radius: inherit;
  /*background-color: transparent;*/
  background-color: #0f0;
  z-index: -1;
  /* Shadow of button, first part right bottom, last top left */
  /* offset, radius */
  /* box-shadow: 11px 11px 22px #141414, 0px 0px 0px #333333; */
  /* toggle_knob_color */
}

.ImageButton::before
{
  width: calc(var(--image_button_w2));
  height: calc(var(--image_button_h2));
}

.GpxButton::before
{
  width: calc(var(--gpx_button_w2));
  height: calc(var(--gpx_button_h2));
}

.GuideButton::before
{
  width: calc(var(--guide_button_w2));
  height: calc(var(--guide_button_h2));
}

/* Size of rectangle within button */
.AnimatedButton .iconb {
  width: var(--animated_button_width_inside);
  height: var(--animated_button_height_inside);
  display: inline-block;
}

/* BUTTON IN DISABLED STATE */
.AnimatedButton .iconb svg {
  height: 100%;
  width: 100%;
  /* background-color: var(--button_upload_color_off); */
  /* Text color in enabled state */
  fill: var(--text_color_off);
  font-weight: bold;
  background-color: var(--center_color_off);
  /*font-size:0.4em;*/
}

/* BUTTON BORDER IN ENABLED STATE */
/* Animation of button border in checked == true state */
.AnimatedButtonContainer  input:checked + .AnimatedButton {
  /* Color for ring of button, */
  /* bottom right, top left of ring */
  /* box-shadow: inset -2px -2px 0 #5e5e5e,inset 2px 2px 0 #1c1c1c; */
  /* border    : 4px solid var(--button_upload_color_on); */
  border    : 4px solid var(----outer_border_color_on);
  /* background-color: var(--button_upload_color_on); */
  background-color: var(--inner_border_color_on);
}

/* BUTTON IN ENABLED STATE */
/* Fade from color for center of button */
.AnimatedButtonContainer input:checked + .AnimatedButton .iconb svg {
  fill: var(--text_color_on);
  font-weight: bold;
  /* BUTTON COLOR2: color inside button around text in enabled state*/
  background-color: var(--center_bg_color_on);
}