/* Common design definitions for the 2025 design pages (frontpage, zurnals). */

/* Some resetting. */
/* NB! Include the resetting only in the new design pages!
  I did not prepend with `.section_index ` or `.section_zurnals` to not increase the specificity too much. */

.center-container h2,
.center-container h3,
.center-container p,
.center-container li,
.center-container ol,
.center-container ul {
  margin: 0;
  padding: 0;
}

.center-container a,
.center-container div,
.center-container h2,
.center-container h3,
.center-container p,
.center-container li,
.center-container ol,
.center-container span,
.center-container ul {
  line-height: unset;
}



:root {
  --text-main: #101820;
  --text-light: #686a6e;/*var(--text-main);/*#898b8e;*/
  --link-main-hover: #005a8d;
  --link-blue: #2875a3;
  --link-light-blue: #00adca;
  --link-darkblue: #093479;
  --line: #dddddd;
  --bg-light: #f3f4f6;

  --prop_text_spacing: 0.05px; /* Spacing for the property type of text. */

  --topic-overlay-1: #9e8e53;
  --topic-overlay-2: #c95b44;
  --topic-overlay-3: #539d90;
  --topic-overlay-4: #4291bf;
  --topic-overlay-5: #7c539d;
}



body {
  font-family: 'Source Sans Pro', sans-serif;
  color: var(--text-main);
}
p {
  font-family: 'Noto Serif', serif;
}
a {
  color: var(--text-main);
}
a:hover {
  color: var(--link-main-hover);
}
h3 {
  overflow-wrap: break-word;
}



.icon {
  position: absolute;
  top: 15px;
  right: 15px;
}
.icon.inline {
  position: static;
  top: auto;
  right: auto;
  left: auto;
}

/* We must set the height here when using SVG sprites, as the dimensions will be set
   by the sprite's main (not the particular symbol's) size (300x150 if not set) otherwise. */
.icon.arrow_right {
  width: 7px;
  height: 10px;
}
.icon.arrow_circled_left {
  width: 40px;
  height: 40px;
}
.icon.arrow_circled_right {
  width: 40px;
  height: 40px;
}
.icon.briefcase {
  width: 40px;
  height: 41px;
}
.icon.calendar {
  width: 12px;
  height: 13px;
  position: relative;
  bottom: 1px;
}
.icon.calendar_circled {
  width: 40px;
  height: 41px;
}
.icon.camera {
  width: 18px;
  height: 15px;
}
.icon.clock {
  width: 12px;
  height: 13px;
}
.icon.free_access {
  width: 71px;
  height: 17px;
  vertical-align: middle;
}
.icon.generic_circled {
  width: 40px;
  height: 40px;
}
.icon.jv_plus {
  width: 30px;
  height: 17px;
  vertical-align: middle;
}
.icon.lightning {
  width: 40px;
  height: 41px;
}
.icon.notice {
  width: 24px;
  height: 24px;
}
.icon.play {
  width: 80px;
  height: 80px;
}
.icon.video_film {
  width: 16px;
  height: 15px;
}



/* Article property indicators */
h3 .indicators {
  white-space: nowrap;
}
h3 .indicators > a.doc_url > *,
h3 .indicators > a.comment_count {
  position: relative;
  margin-left: 5px;
  vertical-align: middle;
}
h3 .indicators .free_access,
h3 .indicators .jv_plus,
h3 .indicators .video_film {
  top: -2px;
}
h3 .indicators .camera {
  top: -3px;
}
h3 .indicators .comment_count{
  display: inline-block;
  top: -2px;
  margin-bottom: -2px; /* To counteract the padding increasing the height. */
  background: url("/img/kom2.png") center 1.5px no-repeat;
  padding: 0 0 2px;
  width: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: #ffffff;
  text-align: center;
}



/* Subsection headers */
.center-container > * > h2,
.center-container > .two_columns > .column > * > h2,
.center-container > .two_columns > .column > * > h2 a {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--link-main-hover);
}
.center-container > .two_columns > .column > * > h2 a:hover {
  color: var(--link-light-blue);
}
body .pub_time {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: var(--prop_text_spacing);
  color: var(--text-light);
  text-transform: uppercase;
}



.online_article_archive a.more_link.bomis {
  display: grid;
  /*grid-template-columns: 194px 1fr; /* An example for 260px width (Zurnals). */
  overflow: hidden; /* 1f and this to ensure the 2nd cell's background fills everything. */
  margin: 0;
  padding: 0;
}
.online_article_archive a.more_link div {
  padding: 8px 14px;
  text-align: center;
}
.online_article_archive a.more_link div:first-child {
  border-right: 1px solid var(--link-darkblue);
}
.online_article_archive a.more_link div:last-child {
  border-left: 1px solid var(--link-darkblue);
  background: var(--link-darkblue);
  color: #ffffff;
}
.online_article_archive .more_link.bomis:hover div {
  border-color: var(--link-light-blue);
}
.online_article_archive .more_link.bomis:hover div:last-child {
  background: var(--link-light-blue);
}