/* VARIABLES */

* {
  --main-radius: 0.2em;
  --main-margin: 1em;
  --border-color: #ccc;
}

/* Cheap i18n system!
   Tag language-specific content with its language.
   By default, all languages are hidden; and then some
   JS code will make the current active language visible.
   */
.en { display: none; }
.fr { display: none; }

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  font-style: italic;
  color: #373fff;
}


li img {
  width: 128px;
}

ul {
  list-style: none;
}

.section {
  display: flex;
  background-color: #f7f7f9;
  padding: 0 2% 2% 2%;
  border-radius: 6px;
  align-items: center;
  margin: 2%;
  }

.icon {
  height: 100px;
  margin: 1%
}

.icon2 {
  height: 150px;
  margin: 1%
}
.section-content {
  padding: 0 2% 2% 2%;
  margin-top: -1px;
}


/* unvisited link */
a:link {
  text-decoration: none;
  color: #007bff;
}

/* visited link */
a:visited {
  color: purple;
}

/* mouse over link */
a:hover {
  color: #343a40;
}

/* selected link */
a:active {
  color: #17a2b8;
}

table {
  background-color: #ece4eb;
  margin-left: auto;
  margin-right: auto;
  padding: 2%;
  border-radius: 10px;
  border-spacing: 5px;
}

td:first-child {
  padding-right: 5px;
}

td:nth-child(n+2):nth-last-child(n+2) a::after {
    content: "\2022";
    margin: 0 3px 0 8px;
    color: darkslategray;
    text-decoration: none;
}

button {
  border: none;
  border-radius: var(--main-radius);
  padding: 0.3em 0.6em;
  text-align: center;
  margin-bottom: 0.5em;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  transition: box-shadow 0.2s ease
}

button:hover {
  box-shadow: 0 0.10em 0.2em rgba(0, 0, 0, 0.5);
}

button:disabled {
  background-color: #666;
  box-shadow: initial;
  cursor: initial;
}

button#logout {
  background-color: #ff3737;
}

.access-disabled-warning {
  color: red;
}