#main {
  margin-top: calc(var(--header-height));
  background-image: url('../img/datasecurity/gdprbackground.avif');
  background-repeat: no-repeat;
  background-position: top;


}

#datasec_middleSection {

  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 0 auto;
  margin-top: 4rem;
}

#datasec_middleSection>h1 {
  color: white;
}

.datasec_whitecolor {
  color: white;
}

#datasec_topicButtonWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
  gap: 1rem;

  margin-bottom: 50vh;
  margin-top: 5rem;


}


#datasec_topicButtonWrapper button {
  font-size: larger;
  padding: 10px 20px;
  margin: 5px;
  border: none;
  background-color: orange;
  color: black;
  cursor: pointer;
  font-weight: bold;

}

.datasec_infoSection {
  gap: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 10rem;
  background-color: var(--panel-color);
  padding: 3rem;
  margin-block: 3rem;
  border-radius: 10px;


}

#datasec_dba_links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 3rem;
}

#datasec_dba_links a {
 
  font-size: xx-large;
}


#datasec_rosTable {
  background-color: var(--bgcolor);
  border-radius: 10px;
  border-collapse: collapse;
  padding: 1rem;

}

/* add borders to the table cells */

#datasec_rosTable td {
  border: 1px solid var(--color);
  padding: 0.2rem;

}


#datasec_rosTableConsequences {
  width: 100%;
  border-collapse: collapse;
  aspect-ratio: 1/1;
  width: 30%;
  margin: 0 auto;
  color: black;
  font-size: large;
  font-weight: bold;
}


#datasec_rosTableConsequences td {
  /* border: 1px solid #ddd; */
  padding: 8px;
  font-weight: normal;
}

.datasec_header {
  background-color: #ddd;
  /* light grey */
}

.datasec_low {
  background-color: #90EE90;
  /* light green */
}

.datasec_moderate {
  background-color: #FFFF00;
  /* yellow */
}

.datasec_high {
  background-color: #FFA07A;
  /* light salmon */
}

#rosMatrix {
  width: 50%;
  height: auto;
  margin: 0 auto;
}



.datasec_ourComment {
  color: var(--color);
  font-size: large;
  font-style: italic;

  font-size: medium;
  list-style-type: none;
}

#datasec_dpiaList {
  font-size: large;
}

#datsec_produktbladSection>p {
  line-height: 1.5rem;

}


/* vertical */


@media (max-width: 1000px) or (orientation: portrait) {


  #main {
    text-align: center;
  }

  #datasec_topicButtonWrapper {
    align-items: center;
  }

  #datasec_middleSection {
    width: 100%;
  }

  /* make links smaller */

  #datasec_dba_links a {
    font-size: medium;
  }


  .datasec_infoSection {
    padding: 2rem;
    margin-block: 4rem;
    text-align: left;
  }

  /* Make table headers vertical */

  #datasec_rosTable {
    font-size: xx-small;
  }


  #datasec_rosTable th {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    width: 20px;
  }

  /* Make the 2,3 and 4th column of the table  1 rem */

  #datasec_rosTable td:nth-child(2),
  #datasec_rosTable td:nth-child(3),
  #datasec_rosTable td:nth-child(4) {
    width: 0.1rem;
  }

  #datasec_rosTable td:nth-child(1) {
    width: 1rem;
    word-break: break-all;

  }


  #datasec_rosTable td:nth-child(6) {
    width: 2rem;
    word-break: break-all;

  }



  #rosMatrix {
    width: 90%;
  }


}


/* This should only be for the table called 
datasec_dba_table */

    @media (max-width: 600px) {
      #datasec_dba_table, 
      #datasec_dba_table thead, 
      #datasec_dba_table tbody, 
      #datasec_dba_table th, 
      #datasec_dba_table td, 
      #datasec_dba_table tr {
        display: block;
        width: 100%;
      }
      #datasec_dba_table thead tr {
        display: none; 
      }
      #datasec_dba_table td {
        display: flex;
        justify-content: space-between;
        padding: 10px 5px;
      }
      #datasec_dba_table td::before {
        content: attr(data-label); 
        font-weight: bold;
      }
    }