/* Source Sans Pro */
@font-face {
  font-family: "Source Sans Pro";
  src: url("styles/SourceSansPro/SourceSansPro-Regular.woff") format("woff"),
    url("styles/SourceSansPro/SourceSansPro-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("styles/SourceSansPro/SourceSansPro-Bold.woff") format("woff"),
    url("styles/SourceSansPro/SourceSansPro-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'gesis-icons';
  src:
    url('styles/gesis-icons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}



/* Ist eine Sonderfall Schrift
@font-face {
  font-family: 'Cabin';
  src: url('styles/Cabin-Regular.ttf') format('truetype');
}*/

/* General Font Family */

* {
  font-family: "Source Sans Pro";
}

body,
.sidebar {
  font-family: "Source Sans Pro";
  font-size: 16px;
  color: #292929;
}

.main-header {
  position: fixed;
  width: 100vw;
  padding-right: 33px;
  background: white;
}

.content-wrapper {
  padding-top: 30px;
  margin-top: calc(-100vh + 50px);
}

.content {
    padding-top: 35px;
}

/* Header 1 */
h1 {
  font-family: "Source Sans Pro";
  font-weight: bold;
  font-size: 36px;
  color: #003C78;
}

/* Header 2 */
h2 {
  font-family: "Source Sans Pro";
  font-weight: bold;
  font-size: 28px;
  color: #003C78;
}

/* Header 3 */
h3:not(.box-title) {
  font-family: "Source Sans Pro";
  font-weight: 500;
  font-size: 24px;
  color: #003C78;
}

/* Anpassen der Links  */
a {
  color: #1E8CC8;
}

/* Box Design */

.box-header with-border {
  padding: 0 10px 0 0;
}

h3.box-title {
  width: 100%;
  padding: 10px;
  color: #642878;
  font-weight: bold;
}

.box {
  border-bottom: 1px solid #003C78;
  box-shadow: none;
}

.box-header.with-border {
  border-bottom: 0;
}

/* Responsive Class for iframe */

.responsive {
  width: 100%;
  height: 700px;
  position: relative;
}

.responsive iframe {
  position: absolute;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Design Change page header */

.skin-blue .main-header .navbar {
  background-color: #fff;
}

.skin-blue .main-header .logo {
  background-color: #fff;
  color: #fff;
  border-bottom: 0 solid rgba(0, 0, 0, 0);
}

.skin-blue .main-header .logo:hover {
  background-color: #fff;
  color: #fff;
}

/* Design Change toggle bar */

.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: 003C78;
  color: #003C78;
}

.skin-blue .main-header .navbar .sidebar-toggle {
  color: #003C78;
}

.skin-blue .main-header .navbar .sidebar-toggle {
  transition: background-color 0.1s ease;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: #f0f0f0;
  color: #333;
}

/* Design Change side bar */

.skin-blue .left-side,
.skin-blue .main-sidebar,
.skin-blue .wrapper {
  background-color: white;
}

.skin-blue .sidebar-menu>li>.treeview-menu {
  margin: 0 1px;
  background: white;
}

.skin-blue .sidebar-menu>li.active>a,
.skin-blue .sidebar-menu>li.menu-open>a,
.skin-blue .sidebar-menu>li:hover>a {
  color: #003C78;
  background: white;
}

.skin-blue .sidebar-form .btn,
.skin-blue .sidebar-form input[type=text] {
  box-shadow: none;
  background-color: #fff;
  border: 1px solid transparent;
  height: 35px;
}

.skin-blue .sidebar-menu .treeview-menu>li>a {
  color: #003C78;
  font-weight: bold;
}

.skin-blue .sidebar a:not(.topright-button) {
  color: #003C78;
  font-weight: bold;
}

.skin-blue .sidebar-menu>li.active>a,
.skin-blue .sidebar-menu .treeview-menu>li.active>a {
  border-left-color: #d20064;
  background-color: #F9DBE9;
  color: #d20064;
}

/* menu items should not appear as selected when there is no tab behind */
.sidebar li.active > a[href="#"] {
  background-color: inherit;
  color: #003C78 !important;
}

.sidebar li.active > a[href="#"]:hover {
  background-color: #dbe3ec;
}


.sidebar li.active > a > i.pull-right.fa-angle-left {
  transform: rotate(-90deg);
}

.skin-blue .sidebar-menu>li>a:hover,
.skin-blue .sidebar-menu .treeview-menu>li>a:hover {
  border-left-color: #d20064;
  background-color: #dbe3ec;
  color: #d20064;
}

.skin-blue .sidebar-form {
  border: 1px solid #A5D1E9;
  border-radius: 12px;
}



/* sticky Side Bar */
.main-sidebar {
  position: sticky;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100vh - 50px);
  padding-top: 55px;
  scrollbar-color: rgba(30, 140, 200, 0.5) transparent;
  scrollbar-width: thin;
}

/* show full logo when sidebar is collapsed */

@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .logo {
    width: 60px;
  }
}

@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 60px;
  }
}

@media (min-width: 768px) {

  .sidebar-mini.sidebar-collapse .content-wrapper,
  .sidebar-mini.sidebar-collapse .main-footer,
  .sidebar-mini.sidebar-collapse .right-side {
    margin-left: 60px !important;
    z-index: 840;
  }
}

@media (max-width: 767px) {
  .main-header .logo, .main-header .navbar {
      width: auto !important; 
      float: inline-start !important; 
  }


}

@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .navbar {
      margin-left: 80px;
  }
}

/* Stack footer information on smaller screens */
@media (max-width: 1250px) {

  .footer-center,
  .footer-right {
    position: static !important;
    transform: none !important;
    text-align: center !important;
    display: block;
    margin-top: 5px;
  }
}

/* Give space for the header when sidebar opens on small screens */
@media (max-width: 767px) {
  .main-sidebar {
    padding-top: 120px !important; /* Adjust to match header height */
  }
}

/* Background Color */

.content-wrapper {
  min-height: 100%;
  background-color: #fff;
  z-index: 800;
  overflow: visible !important;
}

/* NAVIGATION TABS */

.nav-tabs-custom>.nav-tabs {
  margin: 0;
  border-bottom-color: #ddd;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

/*Active Tab*/

.nav-tabs-custom>.nav-tabs>li.active {
  border-top-color: #d20064;
  border-radius: 3;
}

.nav-tabs-custom>.nav-tabs>li.active:hover>a,
.nav-tabs-custom>.nav-tabs>li.active>a {
  color: #d20064;
}

.nav-tabs-custom>.nav-tabs>li.active>a {
  border-right-color: #ddd;
  border-left-color: #ddd;
}

/*Non-Active Tab*/

.nav-tabs-custom>.nav-tabs>li>a {
  color: #003C78;
  border-radius: 0;
}

/* Cursor Pointer when hovering box title */

.box-title {
  cursor: pointer;
  color: #333333;
}

a.topright-button {
  color: #D20064 !important;
  font-size: 20px;
  border: 2px solid #D20064;
  border-radius: 999px;
  padding: 15px 20px !important;
  font-weight: bold;
  margin-top: 8px;
  margin-right: 8px;
}

a.topright-button:hover {
  background-color: #D20064 !important;
  color: #fff !important;
}

@media (max-width: 535px) {
  a.topright-button{
    display: none !important;
  }
}

.doc-active {
  position: sticky;
  top: 70px;
  z-index: 100;
}

.col-sm-2 {
  height: 150px;
}

.wrapper {
  overflow: visible;
}

/* style the TOC in Quarto style */

/* Style only the top-level TOC list */
.doc-active>ul {
  list-style: none;
  padding-left: 1rem;
  border-left: 1px solid #ccc;
  margin: 0;
}

.doc-active {
  max-width: 220px;
  padding-left: 40px;
  padding-right: 10px;
}

.doc-active h2 {
  color: #003C78;
  font-size: 1em;
  margin-bottom: 0.5rem;
}

/* Style TOC links */
.doc-active a {
  text-decoration: none;
  color: #003C78;
  font-size: 1.35rem;
  display: block;
  padding: 0.1rem 0;
}

/* color code where you are in document */
.doc-active a.active {
  color: #d20064 !important;
}

/* numbers in TOC other color */
.doc-active .toc-number {
  color: #d20064;
}

/* Nested <ul> gets NO border */
.doc-active ul ul {
  list-style: none;
  border-left: none;
  padding-left: 1rem;
  margin-top: 0.2rem;
  border-left: none;
}

/* Add hover effect */
.doc-active a:hover {
  color: #d20064 !important;
}

/* make toc-column disappear when screen gets too small */
.col-sm-3 {
  display: block;
}

@media (max-width: 1182px) {
  .col-sm-3 {
    display: none !important;
  }
  .col-sm-8 {
    width: 100% !important;
    float: none;
  }
}


/*GESIS Footer Icons*/


[class^="gesis-icon-"],
[class*=" gesis-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'gesis-icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



.gesis-icon-youtube:before {
  content: "\e909";
}

.gesis-icon-mastodon:before {
  content: "\e90b";
}

.gesis-icon-instagram:before {
  content: "\e90d";
}

.gesis-icon-linkedin:before {
  content: "\e90c";
}

.gesis-icon-facebook:before {
  content: "\e90e";
}




/* GESIS Footer*/


footer {
  position: relative;
  z-index: 999;
}

footer a {
  box-shadow: none;
}

footer a:hover {
  box-shadow: none;
}

footer.page-footer {
  background-color: #003C78;
  border-top: 10px solid #d20064;
  padding: 50px 0 100px;
  color: #fff;
}

footer.page-footer .page-footer--inner {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 33px;
  padding-right: 33px;
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  footer.page-footer .page-footer--inner {
    display: grid;
    grid-template-areas: "contact-mannheim contact-koeln social-media" "contact-mannheim contact-koeln leibniz-logo" "contact-mannheim contact-koeln footer-nav";
  }
}

footer.page-footer .page-footer--inner .contact-info a {
  text-decoration: none;
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 #d20064;
  transition: all 0.3s ease-in-out;
}

footer.page-footer .page-footer--inner .contact-info a:hover {
  box-shadow: inset 0 -10px 0 0 rgba(210, 0, 100, 0.5);
}

footer.page-footer .page-footer--inner .contact-info.standort-mannheim {
  grid-area: contact-mannheim;
}

footer.page-footer .page-footer--inner .contact-info.standort-koeln {
  grid-area: contact-koeln;
}

footer.page-footer .page-footer--inner .social-media-icons,
footer.page-footer .page-footer--inner .leibniz-logo-wrapper,
footer.page-footer .page-footer--inner nav.footer {
  justify-self: end;
}

footer.page-footer .page-footer--inner .social-media-icons {
  grid-area: social-media;
  margin-bottom: 20px;
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  footer.page-footer .page-footer--inner .social-media-icons {
    font-size: 4rem;
  }
}

footer.page-footer .page-footer--inner .social-media-icons a {
  color: inherit;
  text-decoration: none;
}

footer.page-footer .page-footer--inner .social-media-icons a:hover {
  color: d20064;
}

footer.page-footer .page-footer--inner .social-media-icons a::after {
  content: none;
}

footer.page-footer .page-footer--inner .social-media-icons i {
  font-size: calc(1.385rem + 1.62vw);
  margin-left: 0.2em;
}

@media (min-width: 1200px) {
  footer.page-footer .page-footer--inner .social-media-icons i {
    font-size: 2.6rem;
  }
}

footer.page-footer .page-footer--inner .leibniz-logo-wrapper {
  grid-area: leibniz-logo;
  width: 150px;
  max-width: 100%;
  margin-bottom: 30px;
}

footer.page-footer .page-footer--inner .leibniz-logo-wrapper img {
  width: 100%;
}

footer.page-footer .page-footer--inner nav.footer {
  grid-area: footer-nav;
}

.btn-default {
  color: #d20064 !important;
  border-color: #f6cce0 !important;
  background: transparent;
  border-radius: 999px !important;
  font-size: 1.6rem !important;
}

.btn-default:hover {
  color: #d20064;
  border-color: #f6cce0;
  background: #f6cce0;
  border-radius: 999px;
}

.btn-default.active {
  color: #d20064;
  border-color: #f6cce0;
  background: #f6cce0;
  border-radius: 999px;
  box-shadow: none;
}

.btn-default.active:hover {
  color: #d20064;
  border-color: #f6cce0;
  background: #f6cce0;
  border-radius: 999px;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}