* {
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

/* ============================================================
   TIMEGLASS (loading spinner)
   ============================================================ */
.timeglass {
  position: absolute;
  width: 100px;
  height: 100px;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  border: 16px solid #f3f3f3;
  border-top: 16px solid #FF9900;    /* H9-oransje */
  border-bottom: 16px solid #4A85E9; /* H9-blå */
  border-radius: 50%;
  animation: spin 3s linear infinite;
  display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  background: url('https://lh3.googleusercontent.com/g-kWMwn7bn7z7QfwUcqL4otLdZdu9ceALKJ8ogt6o_yub5T4Ss0DLbY7jAk8Q7X64TmwfZxEoctU8RjiECLMp3qPTFun_8k3Nn7FPSzo0i80nZD0yMXGbBSK0EYo5t8ixEl0-0mQ');
  background-repeat: no-repeat;
  background-size: 100% 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 15px;
  z-index: 100;
}

/* ============================================================
   LOGIN
   ============================================================ */
.loginPage {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loginButton {
  padding: 15px 40px;
  font-size: 16px;
  background-color: #4A85E9;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Noto Sans', sans-serif;
}

.loginButton:hover {
  background-color: #3a6fd8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   INNHOLD
   ============================================================ */
.innhold {
  position: relative;
  top: 40px;
}

/* ============================================================
   ROM-KNAPPER
   ============================================================ */
.knappAlle {
  border: 1px solid white;
  border-radius: 2em;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  font-family: 'Noto Sans', sans-serif;
}

.knapp1 { background-color: purple; }
.knapp2 { background-color: SlateBlue; }
.knapp3 { background-color: royalblue; }
.knapp4 { background-color: DarkCyan; }
.knapp5 { background-color: MediumSeaGreen; }
.knapp6 { background-color: orange; }
.knapp7 { background-color: tomato; }

.knappInaktiv { opacity: 0.3; }

.knappAktiv:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border: 1px solid black;
  cursor: pointer;
}

/* ============================================================
   INNSATSGRAF
   ============================================================ */
.studentProfilePage {
  position: relative;
  top: 0;
}

.studentProfileContainer {
  display: flex;
  flex-direction: column;
}

.studentProfileContent1 {
  position: relative;
  top: 40px;
  display: flex;
  justify-content: space-between;
}

.studentProfileContent2 {
  margin-top: 60px;
  display: flex;
}

.studentEffortGraph {
  position: relative;
  width: 700px;
  height: 300px;
  visibility: hidden;
}

.chartContainer {
  width: 100%;
  height: 100%;
}

.checkbox-container {
  position: absolute;
  bottom: 3px;
  right: 15px;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border-radius: 5px;
}

/* ============================================================
   INNSATSSIRKLER
   ============================================================ */
.circle {
  width: 46px;
  height: 46px;
  margin: 4px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
  word-wrap: break-word;
  color: #000;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}

.green  { background-color: #90ee90; } /* Grønn for "OPP" */
.orange { background-color: #ffd580; } /* Oransje for "NED" */
.red    { background-color: #f08080; } /* Rød for "BLANK" og "ILVRT" */

.studentEffortCircles {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  width: max-content;
  visibility: hidden;
}

/* ============================================================
   SHAKE-ANIMASJON
   ============================================================ */
@keyframes shake {
  0%   { transform: translate(1px, 1px) rotate(0deg); }
  10%  { transform: translate(-1px, -2px) rotate(-1deg); }
  20%  { transform: translate(-3px, 0px) rotate(1deg); }
  30%  { transform: translate(3px, 2px) rotate(0deg); }
  40%  { transform: translate(1px, -1px) rotate(1deg); }
  50%  { transform: translate(-1px, 2px) rotate(-1deg); }
  60%  { transform: translate(-3px, 1px) rotate(0deg); }
  70%  { transform: translate(3px, 1px) rotate(-1deg); }
  80%  { transform: translate(-1px, -1px) rotate(1deg); }
  90%  { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* ============================================================
   RESPONSIVT
   ============================================================ */
@media only screen and (max-width: 768px) {
  .studentEffortGraph {
    width: 100%;
    max-width: 700px;
  }
}