:root {
  --dark_color: #2a2626;
  --light_color: #ffffff;
  --accent_color: #cc0000;
  --remove_color: #cc0000;
  --add_color: #00cc00;
  --h1_style: normal 700 32px/1.2em "poppins", sans-serif;
  --sub_h1_style: normal 500 24px/1.2em "poppins", sans-serif;
  --h2_style: normal 600 28px/1.2em "poppins", sans-serif;
  --nav_style: normal 600 14px/1.2em "poppins", sans-serif;
  --info_style: normal 500 18px/1.2em "poppins", sans-serif;
  --paragraph_style: normal 300 16px/1.2em "poppins", sans-serif;
  --label_style: normal 300 14px/1.2em "poppins", sans-serif;
  --thead_style: normal 600 14px/1.2em "poppins", sans-serif;
  --number_informations_style: normal 700 32px/1.2em "poppins", sans-serif;
  --title_informations_style: normal 500 20px/1.2em "poppins", sans-serif;
}

header {
  position: fixed;
  width: fit-content;
  height: 100dvh;
  background: white;
  padding: 20px;
  box-shadow: -10px 0 60px 0px rgba(0, 0, 0, 0.15);
}
header nav {
  height: 100%;
}
header ul {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 20px;
  height: 100%;
  margin: 0;
  padding: 0;
}

header .header_ico {
  width: 50px;
  height: 50px;
  fill: var(--dark_color);
  transition: fill 0.3s ease-in-out;
}
@media(max-width: 1024px){
  header .header_ico{
    width: 32px;
    height: 32px;
  }
}
header .header_ico circle,
header .header_ico line {
  stroke: var(--dark_color);
  transition: stroke 0.3s ease-in-out;
}
header ul a:hover .header_ico,
header ul a.current .header_ico {
  fill: var(--accent_color);
}
header ul a:hover .header_ico circle,
header ul a:hover .header_ico line,
header ul a.current .header_ico circle,
header ul a.current .header_ico line {
  stroke: var(--accent_color);
}

main {
  margin-left: 90px;
  padding: 20px 40px;
}
main section {
  margin-top: 20px;
}

h1 {
  font: var(--h1_style);
  text-transform: uppercase;
  text-align: center;
}
h2 {
  font: var(--h2_style);
  margin: 0.5em 0 1em 0;
}
.sub_h1{
  font: var(--sub_h1_style);
  text-align: center;
}
.information {
  font: var(--info_style);
  text-align: center;
}
.information strong{
  font-weight: 700;
}
p {
  font: var(--paragraph_style);
}
nav a {
  font: var(--nav_style);
  text-transform: uppercase;
}

label,
select,
input,
button[type="submit"] {
  font: var(--label_style);
}
table,
th,
td {
  border-collapse: collapse;
  padding: 10px;
}
table,
th,
td,
tr {
  border: 1px solid black;
}

table th {
  font: var(--thead_style);
  text-transform: uppercase;
}
table td {
  font: var(--paragraph_style);
}
table td.action {
  display: flex;
  border: none;
}
table td.action a {
  height: 26px;
  display: block;
  width: fit-content;
  margin: auto;
}

.table_ico {
  width: 26px;
  height: 26px;
  fill: var(--dark_color);
  transition: fill 0.3s ease-in-out;
}
.table_ico.polyline.stroke polyline,
.table_ico.path.stroke path {
  stroke: var(--dark_color);
  transition: stroke 0.3s ease-in-out;
}
.table_ico:hover {
  fill: var(--remove_color);
}
.table_ico.polyline.stroke:hover polyline,
.table_ico.path.stroke:hover path {
  stroke: var(--add_color);
}


/** HEADER **/
nav.navigation {
  background-color: var(--light_color);
}
nav.navigation ul {
  display: flex;
  border-radius: 100px;
  border: 1px solid var(--accent_color);
}
nav.navigation ul li {
  width: 100%;
  transition: background-color 0.3s ease-in-out;
}
nav.navigation ul li:not(:nth-last-child(1)){
  border-right: 1px solid var(--accent_color);
}

nav.navigation ul li:nth-child(1){
  border-radius: 100px 0 0 100px;
}
nav.navigation ul li:nth-last-child(1){
  border-radius: 0 100px 100px 0;
}
nav.navigation ul a {
  display: block;
  width: auto;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  color: var(--accent_color);
  transition: color 0.3s ease-in-out;
}
nav.navigation li:hover,
nav.navigation li.current {
  background-color: var(--accent_color);
}
nav.navigation li:hover a,
nav.navigation li.current a {
  color: white;
}