body 
{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  line-height: 1.4;

  width: 98%;
  margin: auto;
  text-align: center;
  color: #363636;

  background: rgba(220, 180, 220, 0.882);
}

.Break { margin-top: 5%; }
/* ---------------------------------------- */
.Paths
{
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
  background: rgb(135, 93, 135);
  width: 100%;
  height: 20px;
  border-radius: 10px;
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
}

.Path
{
  font-weight: 500;
  display: inline-block;
  text-decoration: none;
  color: rgb(65, 34, 65);
  background: rgb(201, 160, 201);
  border-radius: 10px;
  border: none;
  outline: none;
  padding: 7px;
  margin-top: -0.5rem;
  margin-left: 10px;
  margin-right: 10px;
  transition: transform .2s;
}
.Path:hover {  transform: scale(1.2); }


.Path_Active
{
  min-height: 20px;

  background: rgb(65, 34, 65);
  color: rgb(190, 151, 190);
  font-weight: bold;

  border-radius: 10px;
  border: none;
  
  outline-color:  rgb(190, 151, 190);
  outline-width: 3px;
  outline-style: solid;

  padding : 5px;

  margin-left: 10px;
  margin-right: 10px;
  margin-top: -0.3rem;
  animation: appears 0.3s linear;
}

@keyframes appears 
{
  0%   {    margin-top: -1rem;  }
  100% {    margin-top: -0.3rem;  }
}


.Path_Button
{
  min-height: 2.3rem;
  background: rgb(65, 34, 65);
  color: rgb(255 255 255);
  font-weight: bold;
  border-radius: 10px;
  border: none;
  outline-color: rgb(190, 151, 190);
  outline-width: 4px;
  outline-style: solid;
  padding: 12px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: -0.3rem;
  transition: transform .2s;
}

.Path_Button:hover {  transform: scale(1.2); }
.Path_Button:not(:hover){  animation: attention 0.3s ease infinite alternate; }

@keyframes attention
{  
  0%   {    transform: scale(1.05);  }
  100% {    transform: scale(1.1);  }
}

/* ---------------------------------------- */
.Products
{
  display: flex;
  height: 100px;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;

}

.Product
{
  margin-left: 10px;
  margin-right: 10px;
}

.Product_Button
{
  min-height: 50px;
  min-width: 200px;
}

/* ---------------------------------------- */
.Users
{
  margin-top: -40px 0;
  margin-left: 10px 0;
}
.User
{
  font-weight: bold;
  padding: 10px 0;
}

/* ---------------------------------------- */
button
{
  transition:
  transform 0.1s ease,
  transform var(--animation-duration) ease;
}

button:hover
{
  transform: scale(1.05);
  transition:
  transform 0.1s ease;
}

/* ---------------------------------------- */
.Checkboxes
{
  min-width: 30%;
  text-align: center;
  display: inline-block; 
  text-align: left;
}

.Field
{
  text-indent: 10%;
  width: 30%;
}


input
{
  background: rgb(220, 206, 216);

  height: 4;

  margin-right: 6px;
  margin-bottom: 6px;

  padding: 10px;

  border: none;
  border-radius: 6px;
  outline: none;
}

/* Messages ---------------------------------------- */
.Message
{
  line-height: 3;

  display: block;
  margin-left: auto;
  margin-right: auto;

  text-align: center;
  font-weight: bold;
  border-radius: 25px;

  background: rgb(22, 22, 22);
  color: #e8d5d5;
  animation: animate 0.2s linear;
}

.Message_Success
{
  line-height: 3;

  display: block;
  margin-left: auto;
  margin-right: auto;

  text-align: center;
  font-weight: bold;
  border-radius: 25px;

  background: rgb(2, 78, 7);
  color: #e8d5d5;
  animation: animate 0.2s linear;
}


@keyframes animate 
{
  0%   {    width: 30%;  }
  100% {    width: 90%;  }
}


/* Graphics ---------------------------------------- */
.White { fill: #ffffff; }
.White:hover { fill: #7c7373; }
.Red 
{ 
  fill: #b22222;
  transition: transform .2s; /* Animation */
}
.Red:hover 
{ 
  fill: #a62a2a; 
  transform: scale(1.05);
}