body {
  background-color: aliceblue;
  font-family: Georgia;
}

article {
  background-color: white;
}

/*form the page*/
.container_page {
  width: 98%;
  max-width: 800px;
  margin: 0 auto;
  /*max-width: 600px;*/
  padding: 30px 10px;
}

h1 {
  color: black;
  text-align: center;
  font-family: Georgia;
}

.hidden {
  display: none;
}

/*
  button = endringer styling på alle button knapper 
  .button = lager en classe med navn button
  #button = en id 
  */

/* Style the header with a grey background and some padding */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/* Testing out flex containers */
.flex-container {
  display: flex;
  background-color: white;
  width: auto;
  justify-content: center;
  /* alt: flex-start ? */
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* Original:
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
*/

.flex-container > div {
  background-color: #f1f1f1;
  margin-right: 20px;
  margin-left: 20px;
  padding-top: 20px;
  align-content: center;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  text-decoration: none;
  word-wrap: break-word;
}

.aClean {
  /* background-color: white; If I want each container to have a background color*/
  text-decoration: none;
  color: black;
  padding: 5px;
}

.aClean:hover {
  background-color: #ddd;
  color: black;
  text-decoration: none;
}

.aClean.active {
  /* Do I need this?*/
  background-color: dodgerblue;
  color: white;
}

.pCenter {
  align-content: center;
  text-align: center;
}

/* end testing flex containers*/

/* header for flex-containers - not working like I want*/
.h4My {
  word-wrap: break-word;
  white-space: normal;
}

/* Add footer to all pages*/
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: white;
  color: white;
  text-align: center;
}

/*Border for tables*/
table,
th,
td {
  text-align: left;
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
  padding-right: 10px;
}

/*container samføk indikatorer*/
.SamfOkIndikatorer {
  text-align: center;
  font-size: 40px;
  padding: 0;
  margin: 0;
}

.SamfOkIndikatorerHead {
  text-align: center;
  font-size: 20 px;
  /*13.28*/
  padding: 0;
  margin: 5px;
}

.SamfOkIndikatorerP {
  align-content: center;
  text-align: center;
  font-size: 0.8em;
  padding: 0;
  margin: 5px;
}

.SamfOkIndikatorerKilde {
  align-content: center;
  text-align: center;
  font-size: 0.8em;
  padding: 0;
  margin: 5px;
}



  /* A class for the links of to the previous and next page in the teaching pages */
  .previous-next-page{
    background-color: lightgrey;
    color: black;
    border: black;
    border: 2px solid black;
    padding: 16px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 14px 2px;
    cursor: pointer;
    border-radius: 12px;
    /* width: 20% */
    appearance: none;
    width: auto;
    max-width: 100%;
  }
  
  .previous-next-page:hover {
    background-color: #666;
    color: white;
  }
  
  /* An element for the headers of the chapters in the teaching pages */
.sok-title-page-header{
    color: black;
    text-align: center;
    font-family: Georgia;
    font-size: 32px;
    margin: 14px 2px;
  }



  /* Format the solution buttons for excercises */
  .solution-button {
    background-color: lightgrey;
    color: black;
    border: 2px solid black;
    border-radius: 12px;
    padding: 5px 5px;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    margin: 0 5px;
  }
  
  .solution-button:hover {
    background-color: #666;
    color: white;
  }


/* Style the summary button in the teacing pages */
.summary-button{
  background-color: lightgrey;
    color: black;
    border: black;
    border: 2px solid black;
    border-radius: 12px;
    padding: 10px 15px;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    margin: 25px 5px 5px 5px;
}

.summary-button:hover {
  background-color: #666;
  color: white;
}

/* Not in use
.FinishedButton {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
} */

/* Place the content summary */
.FinishedContent {
  width: 80%;
  margin: 0 auto;
  /*max-width: 600px;*/
  padding: 30px 10px;
}

.ProgressBarBoX {
  /* width: 320px;*/
  width: 100%;
  background-color: gray;
  padding: 0px;
  /*border: 5px solid gray;*/
  margin: 0;
}

.ProgressBarBoXProgress {
  /* width: 320px;*/
  width: 100%;
  background-color: green;
  text-align: center;
  padding: 0;
  /*border: 5px solid gray;*/
  margin: 0;
}

.AssingmentSolutionBox {
  display: inline-block; 
  margin-top: 10px;
  margin-inline-start: 2px;
  margin-inline-end: 2px; 
  padding-block-start: 0.35em;
  padding-inline-start: 0.75em;
  padding-inline-end: 0.75em;
  padding-block-end: 0.625em;
  min-inline-size: min-content;
  border-width: 2px;
  border-style: groove;
  border-color: rgb(192, 192, 192);
  border-image: initial;
}


/* Check these later, same bug when changes done in CSS 
https://www.w3docs.com/snippets/html/how-to-display-an-ordered-list-with-nested-counters.html
*/

/* Two plots horisontaly */
/* Testing out flex containers */

.two-plot-container {
  display: flex;
  background-color: white;
  width: auto;
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* For use in inputs, plots and math sol */
.myInputWith{
    width:48px;
}

.myPlots{
    width:100%;
    max-width:700px;
}

.myPlotSolutionMath{
    color:rgb(50, 171, 96);
}

/* Display two pictures side by side */
.two-picture-column {
  float: left;
  width: 75%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.two-picture-row::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

/* Center tables */
.fix-tables-center {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.centerSize {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* width: 50%; */
  max-width:450px; 
  max-height:350px;
}

.centerSizeLarge {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* width: 50%; */
  max-width:550px; 
  max-height:450px;
}

/* 
    ERTP Literature Reviews
 */
/* Sort box ERTP Literature Reviews */
.sortBoxErptRow {
  display: flex;
  flex-direction: column;
}

.showHidden {
  display: block;
}

.flexErpt-container {
  display: flex;
  width: 100%;
  justify-content: left;
}

.flexErpt-child {
  flex: 1;
  justify-content: left;
}  

.flexErpt-child:first-child {
  margin-right: 20px;
  justify-content: left;
}