body {
  font-family: "SUSE", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 27px;
  text-align: justify;
}

#content {
    margin: 20px auto;
    display: block;
}
@media only screen and (min-width: 768px) {
    #content {
        width: 800px;
        padding: 2px;
    }
}

@media only screen and (max-width: 768px) {
    #content {
        width: 100%;
        padding: 4px;
    }
}
.lato {
  font-family: "SUSE", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
a {
    text-decoration: none;
    background-color: #7137c8;
    color: #ffffff;
}
a:hover {
    background-color: #ffffff;
    color: #7137c8;
}
p {
    font-size: 18px;
    line-height: 27px;
    text-indent: 36px;
    text-align: justify;
}

:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space: 24px;
  --space-md: 32px;
  --space-lg: 48px;
  --space-xlg: 64px;

  --screen-sm: 768px;

  --gray: #555;
  --gray-dark: #333;
  --gray-darker: #111;
  --gray-light: #f1f1f1;
  --gray-lighter: #fafafa;
  --blue: #187888;
  --yellow: #e6af05;
  --white: #fff;
  --black: #000;

  --brand-primary: var(--blue);
  --background: var(--white);
  --text-color: var(--gray-darker);
}

details {
  summary {
    list-style: none;
  }
}

.collapse {
  border: solid 1px var(--gray-lighter);
  border-radius: 4px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  margin-left: auto;
  margin-right: auto;

  transition: background-color 0.25s;
  will-change: background-color;

  &:first-child {
    margin-top: var(--space);
  }

  &:not(:last-child) {
    margin-bottom: var(--space-sm);
  }

}

.title {
  cursor: pointer;
  font-weight: 600;
  padding: var(--space-sm);
  text-align: center;
  background-color: #f5f0fa;
}

.description {
  border-top: var(--gray-light) solid 1px;
  font-size: 14px;
  line-height: 21px;
  padding: var(--space-sm);
}

p.summary {
    font-size: 16px;
    line-height: 24px;
    text-indent: 0px;
}

h2.material {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-indent: 0px;
}

 /* Style buttons */
.btn {
  background-color: #2DCD9A;
  border-radius: 4px;
  color: white;
  padding: 12px;
  margin: 12px;
  cursor: pointer;
  font-size: 18px;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: #2DCD9A;
  color: white;
}

.botoes {
    width: 100%;
    text-align: center;
    padding: 12px;
}

/* The side navigation menu */
.sidebar {
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f5f0fa;
    position: fixed;
    height: 100%;
    overflow: auto;
}

/* Sidebar links */
.sidebar a {
    display: block;
    color: black;
    padding: 20px;
    text-decoration: none;
    background-color: #f5f0fa;
}

/* Active/current link */
.sidebar a.active {
    background-color: #7137c8;
    color: white;
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
    background-color: #7137c8;
    color: white;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
    margin-left: 200px;
}

/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }
    .sidebar a {float: left;}
    div.content {margin-left: 0;}
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
    .sidebar a {
        text-align: center;
        float: none;
    }
}

.inline-icon {
    vertical-align: top; /* Aligns with text baseline */
    font-size: 1.1em; /* Scales icon relative to text */
}